/* Wict Studio — site styles */

/* ---------- fonts (self-hosted, SIL OFL) ---------- */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/baloo2-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/baloo2-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/baloo2-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500 900;font-display:swap;src:url(../fonts/nunito-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500 900;font-display:swap;src:url(../fonts/nunito-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500 900;font-display:swap;src:url(../fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --bg:#FBF6EC; --bg-soft:#F4ECDD; --surface:#FFFDF8; --surface-2:#F5EDDF;
  --ink:#2A211C; --ink-2:#5B4E45; --ink-3:#7E6F63; --line:#E8DCC8; --line-strong:#D3C2A8;
  --accent:#F2C14E; --accent-hover:#ECB12E; --accent-soft:#FCEBC0; --on-accent:#2A211C;
  --link:#B4462F; --pink:#F4A9B8; --pink-soft:#FBD9DF; --ok:#3E8E5A; --spot:#F5CD69; --spot-2:#F6B9C5;
  --band-bg:#2A211C; --band-ink:#FBF6EC;
  --warn-bg:#FDEBDD; --warn-line:#E9A47A;
  --shadow:0 1px 2px rgb(42 33 28/.06),0 8px 24px rgb(42 33 28/.08);
  --shadow-lg:0 2px 6px rgb(42 33 28/.08),0 24px 48px rgb(42 33 28/.16);
  --radius:20px; --radius-sm:12px; --radius-lg:32px;
  --font-display:'Baloo 2',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --container:1180px; --header-h:72px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16120F; --bg-soft:#1D1814; --surface:#231D19; --surface-2:#2B241F;
    --ink:#F5ECDF; --ink-2:#CDBFAE; --ink-3:#A09080; --line:#3A312A; --line-strong:#52463C;
    --accent-soft:#4A3B1C; --link:#F4A184; --pink-soft:#4A2C33; --ok:#7CCB95; --spot:#3D3119; --spot-2:#43272E;
    --band-bg:#2B241F; --band-ink:#F5ECDF; --warn-bg:#3B2A20; --warn-line:#9C6542;
    --shadow:0 1px 2px rgb(0 0 0/.3),0 8px 24px rgb(0 0 0/.3);
    --shadow-lg:0 2px 6px rgb(0 0 0/.35),0 24px 48px rgb(0 0 0/.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16120F; --bg-soft:#1D1814; --surface:#231D19; --surface-2:#2B241F;
  --ink:#F5ECDF; --ink-2:#CDBFAE; --ink-3:#A09080; --line:#3A312A; --line-strong:#52463C;
  --accent-soft:#4A3B1C; --link:#F4A184; --pink-soft:#4A2C33; --ok:#7CCB95; --spot:#3D3119; --spot-2:#43272E;
  --band-bg:#2B241F; --band-ink:#F5ECDF; --warn-bg:#3B2A20; --warn-line:#9C6542;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:500 1.0625rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.4rem,3.6vw + 1rem,4rem)}
h2{font-size:clamp(1.7rem,1.6vw + 1rem,2.4rem)}
h3,.h3{font-size:1.25rem;line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:var(--surface-2);padding:.1em .4em;border-radius:6px}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
main{display:block}
main:focus{outline:none}
.container{width:min(var(--container),100% - 48px);margin-inline:auto}
.container-narrow{max-width:780px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:999px;font-weight:800;text-decoration:none}
.skip-link:focus{top:12px}
.muted{color:var(--ink-3)}
.small{font-size:.9rem}
.eyebrow{font-family:var(--font-display);font-weight:800;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin-bottom:.8rem}
.lead{font-size:clamp(1.1rem,.4vw + 1rem,1.3rem);color:var(--ink-2);max-width:40rem}
.icon{flex:none}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.6rem 1.35rem;border-radius:999px;border:2px solid var(--ink);font:800 1rem/1.2 var(--font-display);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;color:var(--ink);background:transparent}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:#2A211C;box-shadow:0 3px 0 #2A211C}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 0 #2A211C}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 #2A211C}
.btn-ghost{border-color:currentColor;color:inherit}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.btn-ghost-light{border-color:var(--band-ink);color:var(--band-ink)}
.btn-ghost-light:hover{background:rgb(255 255 255/.08)}
.btn-lg{min-height:56px;padding:.75rem 1.7rem;font-size:1.1rem}
.btn-sm{min-height:40px;padding:.4rem 1rem;font-size:.95rem}
.btn-store{background:#121212;color:#fff;border-color:#121212;box-shadow:0 3px 0 rgb(0 0 0/.35)}
.btn-store:hover{transform:translateY(-1px)}
.btn-status{cursor:default;border-style:dashed;border-color:var(--g-accent,var(--ink));background:color-mix(in srgb,var(--g-accent,var(--accent)) 18%,transparent);color:inherit}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip,.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:999px;font-size:.82rem;font-weight:800;line-height:1.3;white-space:nowrap}
.chip{background:var(--surface);border:1px solid var(--line);color:inherit}
.badge-soon{background:#FCE3A3;color:#5A3D05}
.badge-dev{background:#E3DDF6;color:#3B2F6B}
.badge-live{background:#CDEBD6;color:#1E5232}
.tag{display:inline-block;padding:.15rem .6rem;border-radius:999px;background:var(--accent-soft);color:var(--ink);font-weight:800;font-size:.78rem;letter-spacing:.02em}
.link-arrow{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-display);font-weight:800;color:var(--link);text-decoration:none;white-space:nowrap}
.link-arrow .icon{transition:transform .15s ease}
a:hover .link-arrow .icon,.link-arrow:hover .icon{transform:translateX(3px)}

/* ---------- decorative blobs ---------- */
.hero-spots,.footer-spots,.cta-band-spots{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-spots::before,.hero-spots::after,.footer-spots::before,.footer-spots::after,.cta-band-spots::before,.cta-band-spots::after{content:"";position:absolute;background:var(--spot);border-radius:63% 37% 54% 46%/55% 48% 52% 45%}
.hero-spots::before{width:250px;height:180px;left:-130px;bottom:-100px;transform:rotate(-12deg)}
.hero-spots::after{background:var(--spot-2);width:150px;height:120px;right:-50px;top:-40px;transform:rotate(20deg);border-radius:42% 58% 38% 62%/52% 40% 60% 48%}
.page-hero .hero-spots::before{width:220px;height:160px;left:auto;bottom:auto;right:-80px;top:-70px}
.page-hero .hero-spots::after{width:90px;height:70px;right:140px;top:auto;bottom:24px;opacity:.9}
.footer-spots::before{width:240px;height:170px;right:-90px;top:-80px;opacity:.9}
.footer-spots::after{background:var(--spot-2);width:110px;height:90px;left:-40px;bottom:30px}
.cta-band-spots::before{background:rgb(255 255 255/.06);width:260px;height:200px;right:-60px;top:-80px}
.cta-band-spots::after{background:rgb(255 255 255/.05);width:120px;height:90px;left:30%;bottom:-50px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;flex:none}
.brand img{transition:transform .3s cubic-bezier(.3,1.6,.6,1)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.main-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.main-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.main-nav ul a{display:block;padding:.5rem .85rem;border-radius:999px;color:var(--ink-2);text-decoration:none;font-weight:800}
.main-nav ul a:hover{color:var(--ink);background:var(--surface-2)}
.main-nav ul a[aria-current]{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.nav-cta{margin-left:8px}
.header-tools{display:flex;align-items:center;gap:8px}
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px 3px 3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-3)}
.lang-switch a{padding:.2rem .55rem;border-radius:999px;font-weight:800;font-size:.85rem;color:var(--ink-2);text-decoration:none}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a[aria-current]{background:var(--ink);color:var(--bg)}
.lang-switch .icon{margin-right:2px}
.lang-switch-menu{display:none}
.nav-toggle{display:none;width:44px;height:44px;border-radius:999px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.nav-toggle-close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-close{display:inline}

@media (max-width:960px){
  .nav-toggle{display:inline-flex}
  .header-tools{margin-left:auto}
  .main-nav{position:fixed;inset:var(--header-h) 0 auto 0;display:none;flex-direction:column;align-items:stretch;gap:12px;padding:16px 16px 24px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);max-height:calc(100dvh - var(--header-h));overflow:auto}
  .main-nav.is-open{display:flex}
  .main-nav ul{flex-direction:column;gap:4px}
  .main-nav ul a{padding:.8rem 1rem;font-size:1.1rem}
  .nav-cta{margin:4px 0 0}
  .lang-switch-menu{display:flex;justify-content:center;align-self:center}
  body.nav-open{overflow:hidden}
}
@media (max-width:420px){
  .header-tools .lang-switch{display:none}
  .brand{font-size:1.25rem}
}

/* ---------- sections ---------- */
.section{padding:88px 0;position:relative}
.section-tight{padding:48px 0}
.section-soft{background:var(--bg-soft)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:32px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-lead{color:var(--ink-2);margin:.4rem 0 0;max-width:40rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

/* ---------- home hero ---------- */
.home-hero{position:relative;padding:56px 0 88px;overflow:hidden}
.home-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.home-hero h1{font-size:clamp(2.7rem,4.4vw + 1rem,5rem);line-height:1;margin-bottom:.35em}
.home-hero h1 em,.page-hero h1 em{font-style:normal;background:linear-gradient(transparent 52%,var(--pink-soft) 52%,var(--pink-soft) 80%,transparent 80%);padding:0 .06em}
.hero-collage{position:relative;height:540px}
.hero-tile{position:absolute;width:37%;aspect-ratio:9/16;border-radius:28px;overflow:hidden;border:3px solid #2A211C;box-shadow:var(--shadow-lg);background:var(--g-bg)}
.hero-tile>img:first-child{width:100%;height:100%;object-fit:cover}
.tile-logo{position:absolute;left:9%;top:6%;width:82%;filter:drop-shadow(0 4px 6px rgb(0 0 0/.15))}
.tile-a{left:0;top:52px;transform:rotate(-7deg)}
.tile-b{left:31.5%;top:0;transform:rotate(2deg);z-index:2}
.tile-c{right:0;top:70px;transform:rotate(7deg)}
.hero-mascot{position:absolute;z-index:3;filter:drop-shadow(0 8px 10px rgb(42 33 28/.22));animation:bob 4s ease-in-out infinite}
.hero-mascot.m1{width:22%;left:-3%;bottom:0}
.hero-mascot.m2{width:19%;right:-2%;bottom:6px;animation-delay:-1.3s}
.hero-mascot.m3{width:20%;left:41%;bottom:-18px;animation-delay:-2.6s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ---------- stats band ---------- */
.stats-band{background:var(--band-bg);color:var(--band-ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px 0}
.stat{display:flex;flex-direction:column;gap:2px}
.stat-n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,3vw + 1rem,3.4rem);line-height:1;color:var(--accent)}
.stat-label{font-weight:700;opacity:.85}

/* ---------- game cards ---------- */
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.game-grid-3{grid-template-columns:repeat(3,1fr)}
.game-card{--g-chip:rgb(255 255 255/.6);background:var(--g-bg);color:var(--g-ink);border-radius:28px;overflow:hidden;border:2px solid color-mix(in srgb,var(--g-ink) 14%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.game-card.is-dark{--g-chip:rgb(255 255 255/.1)}
.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.game-card-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.game-card-media{position:relative;aspect-ratio:16/10;min-height:0;flex:none}
.game-card-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.game-card:hover .game-card-cover{transform:scale(1.04)}
.game-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,color-mix(in srgb,var(--g-bg) 55%,transparent));pointer-events:none}
.game-card-media{clip-path:inset(0 0 -60px 0)}
.game-card-icon{position:absolute;z-index:1;left:24px;bottom:-30px;width:68px;height:68px;border-radius:18px;border:3px solid var(--g-bg);box-shadow:0 6px 14px rgb(0 0 0/.18);background:var(--g-bg)}
.game-card-body{padding:44px 24px 24px;display:flex;flex-direction:column;flex:1}
.game-card-genre{font-size:.8rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:.2rem}
.game-card-title{font-size:1.75rem;margin:0 0 .35rem}
.game-card-tagline{margin-bottom:16px;opacity:.9}
.game-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.game-card .chip{background:var(--g-chip);border:0}

/* ---------- values / cards ---------- */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.value-grid-3{grid-template-columns:repeat(3,1fr)}
.value{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.value h3{margin:.9rem 0 .4rem}
.value p{color:var(--ink-2);margin:0}
.value-icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--accent);color:#2A211C;border:2px solid #2A211C;box-shadow:0 2px 0 #2A211C;flex:none}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card-grid-4{grid-template-columns:repeat(4,1fr)}
.link-card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;color:var(--ink);text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.link-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.link-card h2,.link-card h3{margin:.5rem 0 0}
.link-card p{color:var(--ink-2);margin:0}
.link-card .link-arrow{margin-top:auto;padding-top:8px}

/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-grid-2{grid-template-columns:repeat(2,1fr)}
.news-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.news-card-link{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
.news-card-media{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.news-card-media img{width:100%;height:100%;object-fit:cover}
.news-card-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.news-card-body p{color:var(--ink-2)}
.news-card-title{font-size:1.35rem;margin:.6rem 0 .5rem}
.news-card .link-arrow{margin-top:auto}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.88rem;color:var(--ink-3);font-weight:700;margin:0}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:center;background:var(--band-bg);color:var(--band-ink);border-radius:var(--radius-lg);padding:48px}
.cta-band>:not(.cta-band-spots){position:relative;z-index:1}
.cta-band h2{margin-bottom:.3em}
.cta-band p{opacity:.85;margin:0;max-width:36rem}
.cta-band .actions{margin:0}

/* ---------- page hero ---------- */
.page-hero{position:relative;overflow:hidden;padding:64px 0 40px}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{max-width:18ch}
.hero-meta{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-weight:700;margin-top:8px}

/* ---------- game page ---------- */
.game-hero{background:var(--g-bg);color:var(--g-ink);padding:40px 0 72px;position:relative;overflow:hidden}
.game-hero a:not(.btn){color:inherit}
.game-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.breadcrumb{display:flex;gap:8px;font-size:.9rem;font-weight:800;opacity:.75;margin-bottom:18px}
.game-logo{width:min(380px,90%);margin:0 0 8px -6px;filter:drop-shadow(0 6px 10px rgb(0 0 0/.12))}
.game-emblem{width:120px;height:120px;margin-bottom:12px;filter:drop-shadow(0 6px 10px rgb(0 0 0/.25))}
.game-title{font-size:clamp(2.6rem,4vw + 1rem,4.4rem);margin-bottom:.15em}
.game-altname{font-weight:800;opacity:.7;margin:0 0 .3rem}
.game-tagline{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,1vw + 1rem,1.6rem);line-height:1.25;margin-bottom:.6rem}
.game-hero .lead{color:inherit;opacity:.88}
.game-hero .chip{background:color-mix(in srgb,var(--g-ink) 8%,transparent);border-color:color-mix(in srgb,var(--g-ink) 18%,transparent)}
.status-note{font-size:.92rem;opacity:.8;margin-top:12px}
.game-hero.is-dark .btn-store{background:#fff;color:#121212;border-color:#fff}
.game-hero-art{position:relative;display:flex;justify-content:center;padding:12px 0}
.phone{width:min(300px,78%);border-radius:40px;border:10px solid #1C1916;background:#1C1916;overflow:hidden;box-shadow:var(--shadow-lg);transform:rotate(2.5deg)}
.phone img{width:100%;border-radius:30px}
.key-art{width:min(340px,85%);aspect-ratio:9/14;border-radius:28px;overflow:hidden;border:2px solid color-mix(in srgb,var(--g-accent) 60%,transparent);box-shadow:var(--shadow-lg)}
.key-art img{width:100%;height:100%;object-fit:cover}
.game-mascot{position:absolute;width:30%;max-width:150px;filter:drop-shadow(0 8px 10px rgb(0 0 0/.22));animation:bob 4s ease-in-out infinite}
.game-mascot.gm1{left:0;bottom:4%}
.game-mascot.gm2{right:0;top:6%;animation-delay:-2s;width:24%}
.game-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start}
.factsheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:sticky;top:calc(var(--header-h) + 20px)}
.factsheet h2{font-size:1.35rem}
.factsheet dl{margin:0}
.factsheet dl>div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.factsheet dt{color:var(--ink-3);font-weight:700;font-size:.92rem}
.factsheet dd{margin:0;font-weight:700}
.factsheet-links{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0 0;font-weight:800}
.factsheet-links a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.feature-icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--g-bg);color:var(--g-ink);border:2px solid color-mix(in srgb,var(--g-ink) 25%,transparent)}
.feature h3{margin:.9rem 0 .35rem;font-size:1.15rem}
.feature p{margin:0;color:var(--ink-2)}
.gallery{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:4px 4px 18px;scrollbar-width:thin}
.gallery li{flex:0 0 auto;width:clamp(170px,20vw,230px);scroll-snap-align:start}
.shot{display:block;border-radius:22px;overflow:hidden;border:3px solid #1C1916;background:#1C1916;box-shadow:var(--shadow);transition:transform .2s ease}
.shot:hover{transform:translateY(-4px) rotate(-1deg)}
.shot img{width:100%}
.callout{display:flex;gap:12px;align-items:flex-start;padding:18px 22px;border-radius:16px;border:1px solid var(--line);background:var(--surface-2);margin-bottom:12px}
.callout .icon{margin-top:3px}
.callout p{margin:0}
.callout-warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout-plain{display:block;background:var(--surface);border-radius:24px;padding:32px}
.callout-plain h2{font-size:1.6rem}

/* ---------- prose (legal, posts) ---------- */
.prose{max-width:72ch}
.prose h2{font-size:1.65rem;margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin-top:1.8em}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--link)}
.note{background:var(--accent-soft);border-left:5px solid var(--accent);border-radius:14px;padding:18px 22px;margin:0 0 2em}
.note p{color:var(--ink)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;margin:0 0 1.5em;background:var(--surface)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
.table-wrap th{background:var(--surface-2);text-align:left;font-family:var(--font-display);font-weight:800;font-size:.95rem}
.table-wrap th,.table-wrap td{padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap td{color:var(--ink-2)}

/* ---------- legal ---------- */
.legal-hero{padding:48px 0 24px}
.legal-hero h1{font-size:clamp(2.2rem,3vw + 1rem,3.4rem);margin-bottom:.2em}
.back-link{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.92rem;color:var(--ink-2);text-decoration:none;margin-bottom:16px}
.back-link:hover{color:var(--ink)}
.legal-layout{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start;padding-bottom:96px}
.toc{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:20px;font-size:.93rem}
.toc-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.toc-box summary{font-family:var(--font-display);font-weight:800;cursor:pointer}
.toc-box ol{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.toc-box a,.toc-docs a{color:var(--ink-2);text-decoration:none;font-weight:700}
.toc-box a:hover,.toc-docs a:hover{color:var(--link)}
.toc-docs ul{list-style:none;margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--line)}
.toc-docs a[aria-current]{color:var(--ink);font-weight:900}
.legal-body{padding-top:4px}

/* ---------- support ---------- */
.faq-layout{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.faq-nav{position:sticky;top:calc(var(--header-h) + 20px)}
.faq-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.faq-nav a{color:var(--ink-2);font-weight:800;text-decoration:none}
.faq-nav a:hover{color:var(--link)}
.faq-group{margin-bottom:40px;scroll-margin-top:calc(var(--header-h) + 16px)}
.faq-group h2{display:flex;align-items:center;gap:12px;font-size:1.6rem}
.faq-group h2 img{width:36px;height:36px;border-radius:10px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:800;font-size:1.05rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--link)}
.faq .chev{transition:transform .2s ease;color:var(--ink-3)}
.faq details[open] .chev{transform:rotate(180deg)}
.faq-answer{padding:0 0 18px;color:var(--ink-2);max-width:68ch}
.faq-answer p{color:var(--ink-2)}
.check-list{list-style:none;padding:0;margin:16px 0}
.check-list li{display:flex;gap:10px;margin:.6rem 0;color:var(--ink-2)}
.check-list .icon{color:var(--ok);margin-top:4px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.channel-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.channel{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.channel h2{margin:0 0 .2rem}
.channel p{color:var(--ink-2);font-size:.95rem;margin:0 0 .4rem}
.channel a{font-weight:800;word-break:break-all}
.contact-form{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.contact-form h2{font-size:1.6rem;margin:0}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-weight:800}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-weight:600;color:var(--ink);background:var(--bg);border:2px solid var(--line-strong);border-radius:12px;padding:.7rem .9rem;width:100%}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:3px solid color-mix(in srgb,var(--accent) 70%,transparent);border-color:var(--ink)}
.contact-form .btn{align-self:flex-start}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- careers ---------- */
.empty-state{display:flex;align-items:center;gap:24px;background:var(--surface);border:2px dashed var(--line-strong);border-radius:24px;padding:28px 32px}
.empty-state h3{margin:0 0 .3rem}
.empty-state p{color:var(--ink-2);margin:0}
.empty-state .btn{margin-left:auto;flex:none}
.steps{list-style:none;counter-reset:s;padding:0;margin:20px 0}
.steps li{counter-increment:s;position:relative;padding:4px 0 18px 56px;color:var(--ink-2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#2A211C;border:2px solid #2A211C;font:800 1.05rem var(--font-display)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.why-box{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px;text-align:center}
.why-box img{margin:0 auto 12px;animation:bob 5s ease-in-out infinite}
.why-box p{color:var(--ink-2)}
.mini-games{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mini-game{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;color:var(--ink);text-decoration:none;transition:transform .15s ease}
.mini-game:hover{transform:translateY(-2px)}
.mini-game img{border-radius:16px;flex:none}
.mini-game strong{display:block;font-family:var(--font-display);font-size:1.1rem;line-height:1.2}
.mini-game small{color:var(--ink-3);font-weight:700}

/* ---------- press ---------- */
.press-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:start}
.press-grid .factsheet{position:static}
.press-grid .factsheet dl>div{grid-template-columns:110px 1fr}
.brand-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.logo-tiles{display:flex;gap:16px;margin:20px 0}
.logo-tile{display:grid;place-items:center;width:170px;height:170px;border-radius:24px;background:#FBF6EC;border:1px solid var(--line)}
.logo-tile-dark{background:#16120F;border-color:#16120F}
.dl-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dl{display:inline-flex;align-items:center;gap:6px;padding:.4rem .85rem;border-radius:999px;border:2px solid var(--line-strong);color:var(--ink);font-weight:800;font-size:.9rem;text-decoration:none;background:var(--surface)}
.dl:hover{border-color:var(--ink)}
.swatches{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.swatches li{display:flex;align-items:center;gap:12px}
.swatches strong{display:block;line-height:1.2}
.swatch{width:52px;height:52px;border-radius:14px;border:2px solid var(--line-strong);flex:none}
.press-games{display:grid;gap:20px}
.press-game{display:flex;gap:20px;background:var(--surface);border:1px solid var(--line);border-left:8px solid var(--g-accent);border-radius:24px;padding:24px;scroll-margin-top:calc(var(--header-h) + 16px)}
.press-game-icon{border-radius:18px;flex:none}
.press-game-body{min-width:0}
.press-game h3{font-size:1.4rem;margin-bottom:.3rem}
.press-game h3 a{color:var(--ink);text-decoration:none}
.press-game p{color:var(--ink-2)}
.press-shots{display:flex;gap:10px;overflow-x:auto;list-style:none;margin:16px 0 0;padding:0 0 8px}
.press-shots img{height:150px;width:auto;border-radius:12px;border:2px solid #1C1916}

/* ---------- posts ---------- */
.post-header{padding:48px 0 8px}
.post-header h1{font-size:clamp(2.2rem,3vw + 1rem,3.4rem);margin-top:.4em}
.post-cover{margin:24px 0 40px;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.post-cover img{width:100%;height:100%;object-fit:cover}
.post .prose{padding-bottom:40px}

/* ---------- 404 ---------- */
.not-found{text-align:center;padding:72px 0 96px}
.not-found img{margin:0 auto 16px;animation:bob 4s ease-in-out infinite}
.not-found div[lang]{margin:24px auto;max-width:34rem}
.not-found h1{font-size:2.4rem}

/* ---------- footer ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--bg-soft);border-top:1px solid var(--line);margin-top:24px}
.footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 2.9fr;gap:48px;padding:64px 0 40px}
.footer-brand p{color:var(--ink-2);margin:14px 0}
.footer-contact{display:flex;align-items:center;gap:8px;font-weight:800}
.footer-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-title{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:.45rem 0}
.footer-col a{color:var(--ink-2);text-decoration:none;font-weight:700}
.footer-col a:hover{color:var(--ink);text-decoration:underline}
.social{display:flex;gap:8px;margin-top:12px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink)}
.social a:hover{background:var(--surface)}
.footer-bottom{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:20px 0 28px;font-size:.9rem;color:var(--ink-3)}
.footer-bottom p{margin:0}

/* ---------- lightbox ---------- */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lightbox::backdrop{background:rgb(10 8 6/.88)}
.lightbox[open]{display:grid;place-items:center}
.lightbox img{max-height:88vh;max-width:min(92vw,560px);width:auto;border-radius:24px;box-shadow:0 20px 60px rgb(0 0 0/.5)}
.lightbox button{position:fixed;width:52px;height:52px;border-radius:50%;border:2px solid rgb(255 255 255/.7);background:rgb(0 0 0/.4);color:#fff;display:grid;place-items:center;cursor:pointer}
.lightbox button:hover{background:rgb(0 0 0/.7)}
.lightbox .lb-close{top:16px;right:16px}
.lightbox .lb-prev{left:16px;top:50%;translate:0 -50%}
.lightbox .lb-next{right:16px;top:50%;translate:0 -50%}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .value-grid,.card-grid-4,.mini-games{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .home-hero-grid,.game-hero-grid,.game-layout,.about-grid,.press-grid,.brand-grid,.contact-grid,.two-col{grid-template-columns:1fr}
  .hero-collage{height:auto;aspect-ratio:1/1;max-width:520px;width:100%;margin:8px auto 0}
  .game-grid-3,.news-grid,.feature-grid,.value-grid-3,.card-grid{grid-template-columns:repeat(2,1fr)}
  .factsheet{position:static}
  .legal-layout,.faq-layout{grid-template-columns:1fr;gap:24px}
  .toc,.faq-nav{position:static}
  .toc-docs{display:none}
  .cta-band{grid-template-columns:1fr;padding:36px 28px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .game-hero-art{max-width:420px;margin:0 auto}
  .page-hero .hero-spots::after{display:none}
}
@media (max-width:640px){
  .container{width:calc(100% - 32px)}
  .section{padding:64px 0}
  .game-grid,.game-grid-3,.news-grid,.news-grid-2,.feature-grid,.value-grid,.value-grid-3,.card-grid,.card-grid-4,.mini-games,.channel-list,.form-row,.footer-nav,.swatches{grid-template-columns:1fr}
  .footer-nav{grid-template-columns:1fr 1fr}
  .empty-state{flex-direction:column;align-items:flex-start}
  .empty-state .btn{margin-left:0}
  .press-game{flex-direction:column}
  .contact-form{padding:22px}
  .factsheet dl>div{grid-template-columns:110px 1fr}
  .home-hero{padding-top:32px}
  .hero-tile{border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .site-header,.site-footer,.toc,.skip-link{display:none}
  .legal-layout{display:block}
  body{background:#fff;color:#000}
}