/* ZGame Premium UI 2026 — shared visual system. Functionality intentionally unchanged. */
:root{
  --orange:#ff6a3d;--pink:#f33878;--purple:#7357ff;--blue:#4f7cff;--green:#16a678;
  --bg:#f7f7fb;--surface:#ffffff;--surface-2:#fbfbfe;--text:#171727;--muted:#6c6b7c;
  --border:#e8e7f0;--border-strong:#dcd9e9;--shadow:0 18px 50px rgba(31,25,61,.08);
  --shadow-hover:0 24px 60px rgba(31,25,61,.13);--radius:24px;--radius-sm:16px;
  --brand-gradient:linear-gradient(135deg,#ff6a3d 0%,#f33878 48%,#7357ff 100%);
}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0!important;background:var(--bg)!important;color:var(--text)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:460px;pointer-events:none;z-index:-1;background:radial-gradient(circle at 12% 8%,rgba(243,56,120,.08),transparent 28%),radial-gradient(circle at 86% 6%,rgba(115,87,255,.09),transparent 32%)}
a{transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
::selection{background:#ffd4e1;color:#3c1630}

/* Premium navigation */
.navbar{width:calc(100% - 32px)!important;max-width:1240px;margin:14px auto 0!important;padding:10px 12px 10px 18px!important;box-sizing:border-box;border:1px solid rgba(226,224,238,.9);border-radius:20px;background:rgba(255,255,255,.88)!important;box-shadow:0 12px 36px rgba(33,25,68,.08)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:sticky!important;top:10px!important;z-index:1000!important}
.logo{font-size:1.22rem!important;letter-spacing:-.03em}.logo-icon{width:38px!important;height:38px!important;border-radius:12px!important;background:var(--brand-gradient)!important;box-shadow:0 8px 20px rgba(243,56,120,.22)}
.nav-links{gap:10px!important}.browse-links{gap:4px!important;background:#f5f4fa;border:1px solid #eeedf5;padding:4px;border-radius:13px}.browse-links a{padding:8px 10px;border-radius:9px;font-size:.86rem!important}.browse-links a:hover{background:#fff;color:var(--pink)!important;box-shadow:0 3px 10px rgba(31,25,61,.07)}
.btn-nav{border-radius:12px!important;padding:9px 14px!important;background:#fff0f5!important;color:#d92f69!important;border:1px solid #ffd7e4!important}.btn-nav:hover{background:var(--brand-gradient)!important;border-color:transparent!important;color:#fff!important}
.btn-outline{border:1px solid var(--border)!important;border-radius:12px!important;padding:8px 11px!important;background:#fff}.welcome-name{font-size:.85rem!important}.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text);align-items:center;justify-content:center;font-size:1rem;cursor:pointer}

/* Homepage */
.hero{width:min(1180px,calc(100% - 32px));box-sizing:border-box;margin:24px auto 12px!important;padding:78px clamp(24px,7vw,92px)!important;border-radius:32px;background:linear-gradient(135deg,#17172a 0%,#29213f 45%,#4a234c 100%)!important;position:relative;overflow:hidden;text-align:left!important;box-shadow:0 26px 75px rgba(31,25,61,.18)}
.hero::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-80px;top:-120px;background:radial-gradient(circle,rgba(255,100,148,.42),rgba(255,100,148,0) 68%)}
.hero::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:150px;bottom:-190px;background:radial-gradient(circle,rgba(115,87,255,.44),rgba(115,87,255,0) 70%)}
.hero>*{position:relative;z-index:1}.hero h1{max-width:800px;font-size:clamp(2.45rem,5vw,4.5rem)!important;letter-spacing:-.055em;line-height:1.01!important;color:#fff;margin:0 0 20px!important}.hero h1 span{background:linear-gradient(90deg,#ffb790,#ff8ab0,#b8a8ff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}.hero p{max-width:680px!important;margin:0!important;color:#d9d4e3!important;font-size:clamp(1rem,1.7vw,1.18rem)!important;line-height:1.75!important}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-primary,.hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:14px;text-decoration:none;font-weight:800;font-size:.93rem}.hero-primary{background:#fff;color:#241b32;box-shadow:0 10px 24px rgba(0,0,0,.16)}.hero-secondary{color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08)}.hero-primary:hover,.hero-secondary:hover{transform:translateY(-2px)}
.games-section{width:min(1180px,calc(100% - 32px))!important;padding:38px 0 48px!important;margin:0 auto!important}.section-title{font-size:clamp(1.45rem,3vw,2rem)!important;letter-spacing:-.035em;margin:0 0 22px!important}.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}.game-card{border:1px solid var(--border)!important;border-radius:22px!important;padding:22px!important;background:rgba(255,255,255,.95)!important;box-shadow:0 9px 26px rgba(31,25,61,.055)!important;min-width:0}.game-card:hover{transform:translateY(-5px)!important;border-color:#ddd3f6!important;box-shadow:var(--shadow-hover)!important}.game-icon{width:52px!important;height:52px!important;border-radius:15px!important;font-size:1.42rem!important}.game-card h3{letter-spacing:-.025em;font-size:1.15rem!important}.game-card p{line-height:1.7!important;color:var(--muted)!important}.btn-play{border-radius:13px!important;padding:11px 14px!important;background:var(--brand-gradient)!important;box-shadow:none!important}.btn-play:hover{opacity:1!important;transform:translateY(-1px)!important;box-shadow:0 10px 20px rgba(243,56,120,.18)!important}.badge{top:18px!important;right:18px!important;border-radius:999px!important;font-size:.68rem!important;letter-spacing:.02em}.seo-article{width:min(1180px,calc(100% - 32px));box-sizing:border-box;margin:0 auto 54px!important;padding:0!important;background:transparent!important;border:0!important}.seo-container{max-width:none!important;background:#fff;border:1px solid var(--border);border-radius:28px;padding:clamp(26px,5vw,52px);box-shadow:var(--shadow)}.seo-container h2{font-size:clamp(1.7rem,3vw,2.45rem)!important;letter-spacing:-.04em}.seo-container h3{letter-spacing:-.025em}.seo-container p,.seo-container li{color:var(--muted)!important}

/* Category/static pages */
.static-hero{width:min(1180px,calc(100% - 32px));box-sizing:border-box;margin:24px auto 0;padding:68px clamp(22px,7vw,76px)!important;border-radius:30px;background:linear-gradient(135deg,#17172a 0%,#30233d 60%,#522647 100%)!important;color:#fff;text-align:left!important;box-shadow:0 24px 68px rgba(31,25,61,.14)}.static-hero .eyebrow{color:#ffb0c8!important;letter-spacing:.13em}.static-hero h1{margin:10px 0 14px!important;max-width:820px!important;font-size:clamp(2.1rem,5vw,4rem)!important;letter-spacing:-.055em;line-height:1.04!important}.static-hero p{margin:0!important;color:#dcd7e6!important;max-width:700px!important;font-size:1.03rem}.static-wrap{width:min(1180px,calc(100% - 32px))!important;margin:28px auto 64px!important}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}.tool-card{border-radius:22px!important;border-color:var(--border)!important;padding:22px!important;box-shadow:0 9px 26px rgba(31,25,61,.05)!important}.tool-card:hover{transform:translateY(-5px)!important;border-color:#ddd3f6!important;box-shadow:var(--shadow-hover)!important}.tool-card h2{letter-spacing:-.025em}.tool-card p{line-height:1.68!important}.tool-card span{color:#d93674!important}.content-card{border-color:var(--border)!important;border-radius:24px!important;box-shadow:var(--shadow)!important}

/* Generic tool surfaces and forms */
.container,.main-container,.form-container,.quiz-container,.card,.panel,.content-box,.tool-container,.generator-container{border-color:var(--border)!important}
input:not([type="checkbox"]):not([type="radio"]),textarea,select{border-color:var(--border-strong)!important;border-radius:13px!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s;background:#fff!important;color:var(--text)!important}
input:focus,textarea:focus,select:focus{outline:none!important;border-color:#a994ff!important;box-shadow:0 0 0 4px rgba(115,87,255,.1)!important}
button,.btn,.button{border-radius:13px}.login-overlay{background:rgba(20,18,33,.74)!important;backdrop-filter:blur(12px)!important}.login-popup{border:1px solid rgba(255,255,255,.5);border-radius:26px!important;box-shadow:0 28px 80px rgba(20,18,33,.3)!important}

/* Footer */
footer{width:min(1180px,calc(100% - 32px));box-sizing:border-box;margin:0 auto 18px!important;border-radius:24px;background:#171724!important;padding:34px 24px!important;color:#aaa8b5!important}.footer-links{gap:2px 5px!important}.footer-links a,footer a{color:#d6d1e0!important;padding:6px 7px;border-radius:8px}.footer-links a:hover,footer a:hover{color:#fff!important;background:rgba(255,255,255,.07)}

/* Accessibility / performance-minded motion */
:focus-visible{outline:3px solid rgba(115,87,255,.45);outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:960px){.grid,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.browse-links{position:absolute;left:12px;right:12px;top:calc(100% + 8px);display:none!important;flex-direction:column;align-items:stretch;background:#fff!important;border:1px solid var(--border);padding:8px!important;border-radius:16px;box-shadow:var(--shadow)}.browse-links.is-open{display:flex!important}.browse-links a{padding:11px 12px!important}.nav-toggle{display:flex}.navbar{overflow:visible!important}.nav-links{margin-left:auto}.welcome-name{display:none!important}}
@media(max-width:640px){.navbar{width:calc(100% - 20px)!important;margin-top:10px!important;padding:8px 9px 8px 12px!important;border-radius:17px}.logo-icon{width:34px!important;height:34px!important}.logo{font-size:1.08rem!important}.btn-nav{font-size:0!important;width:42px;height:42px;padding:0!important;display:inline-flex;align-items:center;justify-content:center}.btn-nav i{font-size:.95rem}.btn-outline{width:42px;height:42px;padding:0!important;display:inline-flex;align-items:center;justify-content:center}.hero,.static-hero{width:calc(100% - 20px)!important;margin-top:14px!important;border-radius:24px!important;padding:52px 22px!important}.hero h1{font-size:clamp(2.25rem,12vw,3.5rem)!important}.hero p{font-size:.98rem!important}.games-section,.static-wrap,.seo-article{width:calc(100% - 20px)!important}.grid,.tool-grid{grid-template-columns:1fr!important}.game-card,.tool-card{border-radius:19px!important}.seo-container{border-radius:22px!important;padding:24px!important}footer{width:calc(100% - 20px)!important;margin-bottom:10px!important;border-radius:20px!important}}

/* Full-width desktop refinement — keeps mobile/tablet behavior unchanged. */
@media (min-width:961px){
  .navbar,
  .hero,
  .games-section,
  .seo-article,
  .static-hero,
  .static-wrap,
  footer{
    width:calc(100% - 36px)!important;
    max-width:none!important;
  }

  .guides-wrap{
    width:calc(100% - 36px)!important;
    max-width:none!important;
  }
}

/* Use the extra desktop space instead of making individual cards too wide. */
@media (min-width:1350px){
  .grid,
  .tool-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .guide-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}