/* ==========================================================================
   AFK Games Studio — site styles
   Source of truth: AFK_GAMES_BRAND_SYSTEM.md
   Studio = paper + ink + one orange. Games wear their own colours.
   ========================================================================== */

/* ---------- Fonts (self-hosted: faster, no third-party requests) ---------- */
@font-face{font-family:"Bricolage";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations");
  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:"Bricolage";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format("woff2-variations");
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Sans";font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Sans";font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Sans";font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  /* Palette measured from the AFK logo (see brand system §9) */
  --paper:#FFF8EA; --paper-2:#EEE6FF; --paper-3:#DCCFFF;
  --ink:#140C36; --ink-2:#4B4470; --ink-3:#8C84AE;
  --mor:#6B3BEB; --mor-deep:#5327C9; --lila:#B99BFF; --lila-soft:#EEE6FF;
  --tap:#FF7A1A; --tap-deep:#E5600A;
  --sari:#FFD21F; --nane:#2EE6C6; --pembe:#FF3D9E;
  /* Scale (v2.2): every radius, key depth and border on the site comes from here.
     Game-world internals and the hero keyboard keep their own values on purpose. */
  --r-xs:4px; --r-s:8px; --r-m:12px; --r-l:20px; --r-xl:24px;     /* micro · chip · key/button · card · panel */
  --lift-xs:2px; --lift-s:4px; --lift-m:6px; --lift-l:8px; --lift-xl:10px;  /* hard key depth, same steps */
  --bw-hair:1.5px; --bw-s:2px; --bw-l:3px;                        /* rule line · control · card/panel */
  --base:0 var(--lift-m) 0 var(--ink);  /* key base: hard, no blur */
  --r-key:var(--r-m);

  --f-display:"Bricolage","Familjen Grotesk",system-ui,sans-serif;
  --f-body:"Plex Sans","Figtree",system-ui,sans-serif;
  --f-mono:"Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --t-mega:clamp(4rem,1rem + 11vw,12.5rem);
  --t-xl:clamp(3rem,1.6rem + 6vw,7rem);
  --t-l:clamp(2.25rem,1.5rem + 3.2vw,4.5rem);
  --t-h2:clamp(1.5rem,1.3rem + .8vw,2rem);
  --t-body-l:clamp(1.125rem,1.08rem + .2vw,1.25rem);
  --t-body:clamp(1rem,.98rem + .1vw,1.0625rem);
  --t-label:.75rem;

  --gutter:clamp(16px,4vw,40px);
  --container:1280px;
  --gap:clamp(72px,9vw,144px);
  --line:2px solid var(--ink);

  --d-instant:90ms; --d-fast:160ms; --d-base:260ms; --d-slow:420ms;
  --e-out:cubic-bezier(.2,0,0,1); --e-tap:cubic-bezier(.3,1.4,.5,1);

  --key:clamp(78px,13vw,176px);   /* keycap size in the hero */
  --key-depth:clamp(8px,1.1vw,14px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--tap);outline-offset:3px}
::selection{background:var(--sari);color:var(--ink)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.label{font-family:var(--f-mono);font-weight:500;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--tap);flex:none}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px}
.skip:focus{top:12px}

/* ---------- Header ---------- */
.top{position:relative;z-index:20;background:var(--mor);color:var(--paper);border-bottom:2px solid rgba(255,248,234,.22)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:50px;height:50px}
.brand b{display:block;font-weight:600;font-size:1rem;line-height:1.15}
.brand small{display:block;color:var(--lila-soft);font-size:.6875rem}
.top nav ul{list-style:none;display:flex;align-items:center;gap:clamp(14px,2.6vw,34px)}
.top nav a{text-decoration:none;font-weight:500;font-size:.9375rem;padding:8px 0;border-bottom:1.5px solid transparent;transition:border-color var(--d-fast) var(--e-out)}
.top nav a:hover{border-bottom-color:var(--sari)}
.clock{display:flex;align-items:center;gap:8px;color:var(--lila-soft)}
.clock .dot{background:var(--nane)}
.clock .dot{width:8px;height:8px;animation:blink 2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
@media (max-width:860px){.clock{display:none}}
@media (max-width:520px){.brand .txt{display:none}}

/* ---------- HERO ---------- */
.hero{background:var(--mor);color:var(--paper);position:relative;overflow:hidden;padding:clamp(28px,5vw,64px) 0 0;min-height:min(100svh,980px);display:flex;flex-direction:column}
.hero>.wrap{width:100%}
.hero .meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--lila-soft)}
.hero h1{font-family:var(--f-display);font-weight:800;font-size:var(--t-mega);line-height:.8;letter-spacing:-.045em;margin:clamp(18px,3vw,36px) 0 0;font-variation-settings:"opsz" 96}
.hero h1 .l2{display:block;padding-left:clamp(0px,14vw,240px)}
.hero h1 .l2 em{font-style:normal;color:var(--sari)}

/* keyboard stage */
.stage{position:relative;flex:1;width:100%;max-width:var(--container);margin-inline:auto;min-height:clamp(260px,33vw,390px);margin-top:clamp(8px,2vw,24px)}
.board{position:absolute;left:var(--gutter);bottom:clamp(96px,9vw,124px);display:flex;gap:clamp(10px,1.4vw,20px);padding:clamp(14px,1.6vw,22px);border:var(--line);border-width:clamp(2px,.3vw,3px);border-radius:clamp(18px,2vw,28px);background:var(--lila);box-shadow:0 var(--key-depth) 0 var(--ink)}
.key{position:relative;width:var(--key);height:var(--key);border-radius:clamp(12px,1.4vw,20px)}
.key .cap{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper);border:var(--line);border-width:clamp(2px,.35vw,4px);border-radius:inherit;font-family:var(--f-display);font-weight:800;font-size:calc(var(--key)*.52);line-height:1;color:var(--ink);transform:translateY(0);box-shadow:0 var(--key-depth) 0 var(--ink);transition:transform var(--d-instant) var(--e-out),box-shadow var(--d-instant) var(--e-out),background var(--d-fast)}
.key .cap span{transform:translateY(-4%)}
.key .cap small{position:absolute;left:12%;top:10%;font-family:var(--f-mono);font-size:calc(var(--key)*.075);font-weight:500;letter-spacing:.06em;color:var(--ink);opacity:.6}
.key[data-key=a] .cap{background:var(--tap)}
.key[data-key=f] .cap{background:var(--sari)}
.key:hover .cap{filter:brightness(1.06)}
.key.is-down .cap,.key:active .cap{transform:translateY(var(--key-depth));box-shadow:0 0 0 var(--ink)}
.slot{border:clamp(2px,.3vw,3px) dashed var(--ink);background:var(--mor-deep);display:grid;place-items:end start;padding:10%}
.slot .label{font-size:calc(var(--key)*.07);color:var(--lila-soft);line-height:1.3}

/* speed lines behind the runner */
.speed{position:absolute;pointer-events:none;opacity:0;transition:opacity var(--d-fast)}
.speed i{display:block;height:clamp(4px,.5vw,6px);border-radius:4px;background:var(--paper);margin:10px 0}
.speed i:nth-child(1){width:44px}.speed i:nth-child(2){width:30px;margin-left:12px}.speed i:nth-child(3){width:38px;margin-left:-4px}
.runner.is-running+.speed{opacity:1}

/* the runaway K */
.runner{position:absolute;left:0;top:0;width:calc(var(--key)*1.25);height:calc(var(--key)*1.45);will-change:transform;touch-action:none;z-index:5;cursor:grab}
.runner .flip{position:absolute;inset:0;transition:transform var(--d-base) var(--e-out)}
.runner.face-left .flip{transform:scaleX(-1)}
.runner .body{position:absolute;inset:0;animation:bob 1.6s ease-in-out infinite}
.runner.is-running .body{animation:bob-run .28s linear infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes bob-run{50%{transform:translateY(-7px) rotate(2deg)}}
.runner svg{width:100%;height:100%;overflow:visible}
.runner .leg-a,.runner .leg-b,.runner .arm-a,.runner .arm-b{transform-box:fill-box}
.runner .leg-a{transform-origin:50% 0}.runner .leg-b{transform-origin:50% 0}
.runner .arm-a{transform-origin:100% 50%}.runner .arm-b{transform-origin:0 50%}
.runner.is-running .leg-a{animation:legA .28s linear infinite}
.runner.is-running .leg-b{animation:legB .28s linear infinite}
.runner.is-running .arm-a{animation:armA .28s linear infinite}
.runner.is-running .arm-b{animation:armB .28s linear infinite}
.runner:not(.is-running) .arm-b{animation:wave 2.4s ease-in-out infinite}
@keyframes legA{0%,100%{transform:rotate(28deg)}50%{transform:rotate(-26deg)}}
@keyframes legB{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(28deg)}}
@keyframes armA{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(18deg)}}
@keyframes armB{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-18deg)}}
@keyframes wave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-30deg)}80%{transform:rotate(0)}90%{transform:rotate(-30deg)}}
.runner .eye{transition:transform var(--d-fast)}
.runner.is-caught .body{animation:squash .42s var(--e-tap)}
@keyframes squash{30%{transform:scale(1.12,.86)}60%{transform:scale(.94,1.06)}}

.bubble{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) scale(.6);opacity:0;white-space:nowrap;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:0 var(--lift-s) 0 var(--ink);border-radius:var(--r-m);font-family:var(--f-mono);font-size:.8125rem;font-weight:500;padding:9px 12px;border-radius:var(--r-m);pointer-events:none;transition:transform var(--d-base) var(--e-tap),opacity var(--d-fast)}
.bubble::after{content:"";position:absolute;left:50%;top:calc(100% + 2px);border:8px solid transparent;border-top-color:var(--ink);transform:translateX(-50%)}
.bubble.show{opacity:1;transform:translateX(-50%) scale(1)}

.hint-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(20px,3vw,40px);display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.hint-bar p{max-width:38ch;font-size:var(--t-body-l);line-height:1.45}
.kbd{color:var(--ink);display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .35em;border:1.5px solid var(--ink);border-radius:var(--r-xs);box-shadow:0 var(--lift-xs) 0 var(--ink);font-family:var(--f-mono);font-size:.8em;font-weight:500;background:var(--paper);transform:translateY(-.1em)}
.hero .ctas{display:flex;gap:14px 26px;align-items:center;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 24px;background:var(--tap);color:var(--ink);font-weight:600;text-decoration:none;border:2px solid var(--ink);border-radius:var(--r-key);box-shadow:var(--base);transition:transform var(--d-instant) var(--e-out),box-shadow var(--d-instant) var(--e-out),background var(--d-fast)}
.btn .dot{background:var(--ink);width:10px;height:10px}
.btn:hover{transform:translateY(-2px);box-shadow:0 var(--lift-l) 0 var(--ink)}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--paper-2)}
.link{font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.hero .link{text-decoration-color:var(--sari)}
.link:hover{text-decoration-thickness:3px}

/* ---------- Section head ---------- */
.sec{padding:var(--gap) 0}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2 .hl{background:var(--sari);padding:0 .12em;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sec-head h2{font-family:var(--f-display);font-weight:800;font-size:var(--t-xl);line-height:.88;letter-spacing:-.04em}
.sec-head p{max-width:44ch;color:var(--ink-2);font-size:var(--t-body-l)}
@media (min-width:900px){.sec-head{grid-template-columns:1fr auto;align-items:end}.sec-head p{text-align:right}}

/* ---------- Game worlds ---------- */
.games{display:grid;gap:clamp(28px,4vw,48px)}
.game{position:relative;display:grid;border:3px solid var(--ink);box-shadow:0 var(--lift-xl) 0 var(--ink);margin-bottom:10px;background:var(--g-bg);color:var(--g-ink);overflow:hidden;isolation:isolate}
.game .info{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3.4vw,48px)}
.game .no{display:flex;align-items:center;justify-content:space-between;gap:12px}
.game .no .n{font-family:var(--f-display);font-weight:800;font-size:clamp(5rem,3rem + 7vw,10rem);line-height:.78;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--g-ink)}
.game h3{font-family:var(--f-display);font-weight:800;font-size:var(--t-l);line-height:.92;letter-spacing:-.03em;max-width:12ch}
.game p{font-size:var(--t-body-l);line-height:1.5;max-width:36ch;opacity:.92}
.game .kunye{display:flex;flex-wrap:wrap;gap:6px 14px;opacity:.85}
.game .kunye span+span::before{content:"·";margin-right:14px}
.status{display:inline-block;font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border:2px solid var(--ink);border-radius:var(--r-s);box-shadow:0 var(--lift-s) 0 var(--ink);white-space:nowrap;background:var(--paper);color:var(--ink)}
.status.soon{background:var(--sari)}
.status.dev{background:var(--nane)}
.game .world{position:relative;min-height:clamp(360px,42vw,560px);border-top:3px solid var(--ink)}
.game .credit{position:absolute;right:14px;bottom:12px;z-index:3;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.game .endorse{margin-top:auto;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.game .endorse .dot{width:9px;height:9px}
@media (min-width:980px){
  .game{grid-template-columns:5fr 7fr}
  .game .world{border-top:0;border-left:3px solid var(--ink)}
  .game.rev{grid-template-columns:7fr 5fr}
  .game.rev .info{order:2}
  .game.rev .world{border-left:0;border-right:3px solid var(--ink)}
}

/* Mimo — night, memory cards */
.g-mimo{--g-bg:#1C2150;--g-ink:#F6EEDC;--g-acc:#F7C548}
.g-mimo .world{display:grid;place-items:center;padding:clamp(20px,3vw,40px);background:
  radial-gradient(circle at 18% 22%,rgba(247,197,72,.9) 0 2px,transparent 3px),
  radial-gradient(circle at 72% 12%,rgba(246,238,220,.8) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 88% 64%,rgba(246,238,220,.7) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 34% 86%,rgba(247,197,72,.7) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 56% 40%,rgba(246,238,220,.5) 0 1px,transparent 2px),
  #1C2150}
.memo{width:min(100%,480px)}
.memo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px);perspective:900px}
.card{aspect-ratio:3/4;position:relative;transform-style:preserve-3d;transition:transform .5s var(--e-out);cursor:pointer;border-radius:10px}
.card:focus-visible{outline-color:var(--g-acc)}
.card.is-open,.card.is-done{transform:rotateY(180deg)}
.card .f,.card .b{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid #0E1130;display:grid;place-items:center}
.card .b{background:#2B3278;box-shadow:inset 0 0 0 5px #1C2150,inset 0 0 0 7px rgba(247,197,72,.55)}
.card .b span{font-family:var(--f-display);font-weight:800;font-size:clamp(1.2rem,2.4vw,1.8rem);color:var(--g-acc)}
.card .f{background:#F6EEDC;transform:rotateY(180deg);padding:14%}
.card.is-done .f{background:#FBE3A0}
.card:hover:not(.is-open):not(.is-done){transform:translateY(-4px)}
.memo-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#F6EEDC}
.memo-bar button{border:1px solid #F6EEDC;padding:7px 10px;color:#F6EEDC;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
.memo-bar button:hover{background:#F6EEDC;color:#1C2150}
.memo-win{margin-top:14px;min-height:1.6em;font-family:var(--f-display);font-weight:700;font-size:1.25rem;color:var(--g-acc)}

/* Wolf Route — winter heritage, conveyor belt */
.g-wolf{--g-bg:#D6EAE6;--g-ink:#10323A;--g-acc:#E8743B}
.g-wolf .world{background:#BFDDD8;overflow:hidden}
.wolf-scene{position:absolute;inset:0;width:100%;height:100%}
.belt-items{animation:belt 7s linear infinite}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-240px)}}
.roller{animation:spin 1.2s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(-360deg)}}
.snow circle{animation:fall linear infinite}
@keyframes fall{from{transform:translateY(-40px)}to{transform:translateY(560px)}}
.paws{position:absolute;left:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,28px);z-index:2;display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#10323A}

/* Lezzet Kulesi — warm tower */
.g-lezzet{--g-bg:#F4D9B8;--g-ink:#3A1D12;--g-acc:#C8553D}
.g-lezzet .world{background:#C8553D;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:clamp(20px,3vw,36px) 20px 0;overflow:hidden}
.tower{display:flex;flex-direction:column-reverse;align-items:center;width:min(78%,360px)}
.floor{width:100%;height:clamp(42px,4.6vw,56px);background:#FFF1DC;border:2px solid #3A1D12;border-bottom:0;display:flex;align-items:center;justify-content:space-around;padding:0 10%;position:relative;animation:drop .42s var(--e-tap) both}
.floor:first-child{border-bottom:2px solid #3A1D12}
.floor:nth-child(even){background:#FBE6C8}
.floor .plate{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #3A1D12;display:grid;place-items:center}
.floor .plate i{width:12px;height:12px;border-radius:50%;background:var(--c,#F2A541)}
.floor .win{width:22px;height:18px;border:2px solid #3A1D12;background:#F2A541}
.roof{width:86%;height:0;border-left:clamp(20px,3vw,40px) solid transparent;border-right:clamp(20px,3vw,40px) solid transparent;border-bottom:clamp(26px,3vw,38px) solid #3A1D12;position:relative;order:99}
.roof::after{content:"LEZZET";position:absolute;left:50%;top:6px;transform:translateX(-50%);font-family:var(--f-display);font-weight:800;font-size:clamp(.75rem,1.1vw,.95rem);letter-spacing:.14em;color:#FFF1DC}
@keyframes drop{from{transform:translateY(-60px);opacity:0}}
.street{width:120%;height:26px;background:#3A1D12;margin-top:-1px}
.tower-ctl{position:absolute;left:clamp(16px,2.6vw,28px);top:clamp(16px,2.6vw,28px);z-index:3;display:flex;gap:10px;align-items:center}
.tower-ctl button{background:#FFF1DC;color:#3A1D12;border:2px solid #3A1D12;box-shadow:0 4px 0 #3A1D12;font-weight:600;padding:9px 14px;border-radius:2px;transition:transform var(--d-instant),box-shadow var(--d-instant)}
.tower-ctl button:active{transform:translateY(4px);box-shadow:0 0 0 #3A1D12}
.tower-ctl button[disabled]{opacity:.5;cursor:not-allowed}
.tower-ctl output{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#FFF1DC}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--sari);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.manifesto .big{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,1rem + 3.4vw,4.2rem);line-height:1.06;letter-spacing:-.025em;max-width:22ch}
.manifesto .big .w{color:rgba(20,12,54,.28);transition:color var(--d-slow) var(--e-out)}
.manifesto .big .w.on{color:var(--ink)}
.manifesto .big mark{background:none;color:inherit;position:relative;white-space:nowrap}
.manifesto .big mark.on{color:var(--ink)}
.manifesto .big mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.16em;background:var(--mor);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out)}
.manifesto .big mark.on::after{transform:scaleX(1)}
.manifesto .sig{margin-top:40px;display:flex;align-items:center;gap:14px}

/* ---------- YouTube ---------- */
.yt{background:var(--ink);color:var(--paper)}
.yt .sec-head h2 .hl{color:var(--ink)}
.yt .sec-head p{color:var(--lila-soft)}
.yt-card{display:block;background:var(--paper);color:var(--ink);text-decoration:none;border:2px solid var(--paper);border-radius:var(--r-key);overflow:hidden;box-shadow:0 var(--lift-xl) 0 var(--mor);transition:transform var(--d-instant) var(--e-out),box-shadow var(--d-instant) var(--e-out)}
.yt-card:hover{transform:translateY(-3px);box-shadow:0 calc(var(--lift-xl) + 4px) 0 var(--mor)}
.yt-card:active{transform:translateY(10px);box-shadow:0 0 0 var(--mor)}
.yt-card picture,.yt-card picture img{display:block;width:100%;height:auto}
.yt-card picture{border-bottom:2px solid var(--ink)}
.yt-meta{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:clamp(16px,2.2vw,24px)}
.yt-meta .av{width:clamp(48px,5vw,64px);height:auto;flex:none}
.yt-meta .who{display:grid;gap:4px;margin-right:auto}
.yt-meta .who b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.05;letter-spacing:-.015em}
.yt-meta .who .label{color:var(--ink-2);text-transform:none}
.yt-meta .chips{display:flex;gap:8px;flex-wrap:wrap}
.yt-meta .chips i{font-style:normal;padding:7px 10px;border:2px solid var(--ink);border-radius:var(--r-s);box-shadow:0 var(--lift-s) 0 var(--ink);background:var(--paper)}
.yt-meta .chips i:nth-child(1){background:var(--sari)}.yt-meta .chips i:nth-child(2){background:var(--nane)}.yt-meta .chips i:nth-child(3){background:var(--lila)}
.yt-card:hover .btn{transform:translateY(-2px);box-shadow:0 var(--lift-l) 0 var(--ink)}
@media (max-width:640px){.yt-meta .btn{width:100%;justify-content:center}}

/* ---------- Parents ticket ---------- */
.parents{background:var(--lila-soft)}
.parents .grid{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
@media (min-width:980px){.parents .grid{grid-template-columns:5fr 7fr}}
.parents h2{font-family:var(--f-display);font-weight:800;font-size:var(--t-l);line-height:.92;letter-spacing:-.03em}
.parents .intro p{margin-top:18px;max-width:38ch;font-size:var(--t-body-l);color:var(--ink-2)}
.ticket{position:relative;background:var(--paper);border:3px solid var(--ink);filter:drop-shadow(0 var(--lift-l) 0 var(--ink));display:grid;grid-template-columns:1fr auto;
  --hole:14px;
  -webkit-mask:radial-gradient(circle var(--hole) at calc(100% - 118px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--hole) at calc(100% - 118px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--hole) at calc(100% - 118px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--hole) at calc(100% - 118px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ticket .main{padding:clamp(20px,3vw,36px)}
.ticket .stub{background:var(--nane);width:118px;border-left:3px dashed var(--ink);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:24px 10px;text-align:center}
.ticket .stub b{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:-.02em}
.ticket .row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:13px 0;border-bottom:var(--bw-hair) solid var(--ink)}
.ticket .row:last-of-type{border-bottom:0}
.ticket dt{color:var(--ink-2)}
.ticket dd{font-weight:600;text-align:right}
.ticket .t-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:var(--line);margin-bottom:4px}
.ticket .foot{margin-top:18px}
@media (max-width:520px){.ticket{grid-template-columns:1fr;-webkit-mask:none;mask:none}.ticket .stub{width:auto;border-left:0;border-top:2px dashed var(--ink);flex-direction:row}.ticket .stub b{writing-mode:horizontal-tb;transform:none;font-size:1.6rem}}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
footer .top-row{padding:var(--gap) 0 clamp(40px,5vw,64px)}
footer .huge{font-family:var(--f-display);font-weight:800;font-size:var(--t-mega);line-height:.8;letter-spacing:-.045em}
footer .huge .o{color:var(--sari)}
footer .k-wave{display:inline-block;width:clamp(70px,9vw,150px);vertical-align:-.08em;margin-left:.12em}
footer .k-wave .arm-b{transform-box:fill-box;transform-origin:0 50%;animation:wave 2.4s ease-in-out infinite}
footer .cols{display:grid;gap:28px;padding:28px 0;border-top:1.5px solid rgba(243,237,226,.2)}
footer .cols .label{color:var(--lila)}
footer ul{list-style:none;margin-top:10px}
footer li+li{margin-top:6px}
footer a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;overflow-wrap:anywhere}
footer a:hover{text-decoration-thickness:2px}
footer .base{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0 76px;border-top:1.5px solid rgba(243,237,226,.2)}
footer .base img{width:54px;height:54px}
.esc{display:inline-flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none}
.esc .kbd{background:var(--ink);color:var(--paper);border-color:var(--paper);box-shadow:0 var(--lift-xs) 0 var(--paper)}
@media (min-width:760px){footer .cols{grid-template-columns:repeat(4,1fr)}}

/* ---------- Ferry scroll progress ---------- */
.ferry{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;box-shadow:0 var(--lift-s) 0 var(--ink);font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;transition:opacity var(--d-base),transform var(--d-base) var(--e-out)}
.ferry.hide{opacity:0;transform:translate(-50%,20px);pointer-events:none}
.ferry .sea{position:relative;width:clamp(90px,16vw,180px);height:16px}
.ferry .sea::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--mor)}
.ferry .boat{position:absolute;top:-3px;left:0;width:26px;height:18px;transform:translateX(-50%)}
.ferry .min{min-width:5.2em;text-align:right;color:var(--ink-2)}
@media (max-width:520px){.ferry .pier{display:none}}

/* ---------- Toast for keyboard easter eggs ---------- */
.toast{visibility:hidden;position:fixed;left:50%;top:18px;transform:translate(-50%,-80px);z-index:60;background:var(--pembe);color:var(--ink);border:2px solid var(--ink);box-shadow:0 var(--lift-s) 0 var(--ink);padding:10px 16px;font-family:var(--f-mono);font-size:.8125rem;font-weight:500;border-radius:var(--r-m);transition:transform var(--d-base) var(--e-tap)}
.toast.show{visibility:visible;transform:translate(-50%,0)}

/* ---------- Reveal (once) ---------- */
.rv{opacity:0;transform:translateY(8px);transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .belt-items,.roller,.snow circle{animation:none!important}
}

/* ---------- Mobile hero: stack instead of overlay ---------- */
@media (max-width:760px){
  .hero{min-height:0}
  .hero h1 .l2{padding-left:12vw}
  .stage{display:flex;flex-direction:column;min-height:0;padding:calc(var(--key)*1.75) var(--gutter) 32px}
  .board{position:relative;left:auto;bottom:auto;align-self:flex-start}
  .hint-bar{position:static;margin-top:40px}
  .hint-bar p{font-size:1.0625rem}
}

.on-touch{display:none}
@media (hover:none){.on-hover{display:none}.on-touch{display:inline}}

/* ==========================================================================
   v3 — Juice + Oyunlar + Oyun sayfaları
   ========================================================================== */
.top nav a[aria-current="page"]{border-bottom-color:var(--sari)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;opacity:.85}
.crumbs a{text-decoration:none;border-bottom:1.5px solid currentColor}
footer .k-foot{display:inline-block;width:clamp(70px,9vw,150px);vertical-align:-.1em;margin-left:.1em;filter:drop-shadow(0 0 0 transparent)}

/* ---------- Marquee band ---------- */
.band{background:var(--sari);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;transform:rotate(-1.4deg);margin:-14px -2vw 0;position:relative;z-index:3}
.band .track{display:flex;width:max-content;animation:marq 26s linear infinite}
.band span{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,1rem + 1.4vw,2.3rem);letter-spacing:-.01em;padding:12px 18px;white-space:nowrap;color:var(--ink)}
.band i{align-self:center;width:18px;height:18px;border-radius:50%;border:var(--bw-l) solid var(--ink);flex:none}
.band i:nth-of-type(4n+1){background:var(--tap)}.band i:nth-of-type(4n+2){background:var(--nane)}.band i:nth-of-type(4n+3){background:var(--pembe)}.band i:nth-of-type(4n){background:var(--mor)}
@keyframes marq{to{transform:translateX(-33.333%)}}
.band:hover .track{animation-play-state:paused}

/* ---------- Juicy keys: springy hover on anything key-like ---------- */
.fact,.gcard,.nkey,.fkey,.mode-keys li,.how li{transition:transform .35s var(--e-tap),box-shadow .2s var(--e-out)}
.game{transition:transform .4s var(--e-tap)}
.game:hover{transform:translateY(-4px)}
.game .open{display:inline-flex;align-self:flex-start}

/* ---------- Confetti (key bits) ---------- */
.confetti{position:fixed;left:0;top:0;width:10px;height:10px;border:2px solid var(--ink);border-radius:var(--r-xs);pointer-events:none;z-index:90}

/* ---------- Games list ---------- */
.gl-hero{background:var(--sari);border-bottom:3px solid var(--ink);padding:clamp(24px,4vw,48px) 0 clamp(28px,4vw,48px);overflow:hidden}
.gl-row{display:grid;gap:12px;align-items:end;margin-top:16px}
@media (min-width:800px){.gl-row{grid-template-columns:1fr auto}}
.gl-hero h1{font-family:var(--f-display);font-weight:800;font-size:var(--t-mega);line-height:.8;letter-spacing:-.05em}
.gl-hero h1 em{font-style:normal;color:var(--mor)}
.gl-hero .lead{margin-top:18px;font-size:var(--t-body-l);max-width:40ch}
.gl-tusik{width:clamp(150px,20vw,280px);height:auto;animation:bob 2.2s ease-in-out infinite}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,3vw,36px)}
.fkey{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-key);box-shadow:var(--base);font-weight:600}
.fkey b{font-family:var(--f-mono);font-size:.75rem;background:var(--ink);color:var(--paper);border-radius:var(--r-xs);padding:2px 7px}
.fkey:hover{transform:translateY(-2px);box-shadow:0 var(--lift-l) 0 var(--ink)}
.fkey:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
.fkey.is-on{background:var(--mor);color:var(--paper);transform:translateY(4px);box-shadow:0 var(--lift-xs) 0 var(--ink)}
.fkey.is-on b{background:var(--sari);color:var(--ink)}
.gl-grid-sec{padding-top:clamp(40px,5vw,72px)}
.gl-grid{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.gcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);overflow:hidden;will-change:transform}
.gcard:hover{transform:translateY(-8px) rotate(var(--rot,-1.2deg));box-shadow:0 calc(var(--lift-xl) + 4px) 0 var(--ink)}
.gcard:nth-child(even){--rot:1.2deg}
.gcard:active{transform:translateY(4px);box-shadow:0 var(--lift-xs) 0 var(--ink)}
.gcard[hidden]{display:none}
.gcover{position:relative;display:block;aspect-ratio:4/5;background:var(--g-bg);border-bottom:3px solid var(--ink);overflow:hidden}
.gcover img,.gcover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gcover video{opacity:0;transition:opacity .3s}
.gcover video.on{opacity:1}
.gfallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px;color:var(--g-ink);background:
  radial-gradient(circle at 80% 18%,var(--g-acc) 0 18%,transparent 18.5%),var(--g-bg)}
.gno{font-family:var(--f-display);font-weight:800;font-size:clamp(6rem,4rem + 6vw,9rem);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:3px var(--g-ink)}
.gname{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem);line-height:.92;letter-spacing:-.03em;max-width:9ch}
.gcover .status{position:absolute;left:14px;top:14px;z-index:2}
.gmeta{display:flex;flex-direction:column;gap:6px;padding:18px 20px 22px}
.gmeta .label{color:var(--ink-2)}
.gtitle{font-family:var(--f-display);font-weight:800;font-size:1.6rem;line-height:1.02;letter-spacing:-.02em}
.gtag{color:var(--ink-2)}
.go{margin-top:8px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.gcard:hover .go span{transform:translateX(4px)}
.go span{transition:transform .3s var(--e-tap)}
.status.live{background:var(--nane)}
.status.soon{background:var(--sari)}
.status.dev{background:var(--paper)}
.teaser{background:var(--ink);color:var(--paper);cursor:help}
.teaser .gcover{background:repeating-linear-gradient(-45deg,var(--t) 0 22px,var(--ink) 22px 44px);display:grid;place-items:center}
.teaser .q{font-family:var(--f-display);font-weight:800;font-size:9rem;line-height:1;color:var(--paper);background:var(--ink);border:3px solid var(--paper);border-radius:var(--r-xl);width:1.2em;height:1.2em;display:grid;place-items:center;box-shadow:0 var(--lift-l) 0 var(--t);transition:transform .45s var(--e-tap)}
.teaser:hover .q{transform:rotate(-12deg) scale(1.06)}
.teaser .lock{position:absolute;left:14px;top:14px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-s);padding:6px 10px}
.teaser .gmeta .label,.teaser .gtag{color:var(--lila)}
.g-empty{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:12px;background:var(--lila-soft);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);padding:24px}
.g-empty p{font-size:var(--t-body-l);max-width:40ch}

/* ---------- Game page ---------- */
.gp-hero{background:var(--g-bg);color:var(--g-ink);border-bottom:3px solid var(--ink);padding:clamp(20px,3vw,36px) 0 clamp(40px,5vw,72px);overflow:hidden}
.gp-grid{display:grid;gap:clamp(28px,4vw,56px);margin-top:clamp(18px,3vw,36px);align-items:center}
@media (min-width:980px){.gp-grid{grid-template-columns:5fr 6fr}}
.gp-info{display:flex;flex-direction:column;gap:16px}
.gp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gp-no{font-family:var(--f-display);font-weight:800;font-size:clamp(5rem,3rem + 6vw,9rem);line-height:.78;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2.5px var(--g-ink)}
.gp-info h1{font-family:var(--f-display);font-weight:800;font-size:var(--t-xl);line-height:.86;letter-spacing:-.045em}
.gp-tag{font-size:var(--t-body-l);max-width:34ch}
.gp-info .kunye{display:flex;flex-wrap:wrap;gap:6px 14px;opacity:.85}
.gp-info .kunye span+span::before{content:"·";margin-right:14px}
.gp-info .ctas{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:6px}
.gp-info .link{text-decoration-color:var(--g-acc)}
.gp-info .endorse{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.gp-info .endorse .dot{width:9px;height:9px}
.gp .status{border-color:var(--ink)}

.player{position:relative;border:3px solid var(--ink);border-radius:var(--r-xl);box-shadow:0 var(--lift-xl) 0 var(--ink);background:var(--g-deep);overflow:hidden;aspect-ratio:16/10}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.player .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;gap:6px;width:clamp(96px,11vw,132px);height:clamp(96px,11vw,132px);background:var(--tap);border:3px solid var(--ink);border-radius:var(--r-xl);box-shadow:0 var(--lift-l) 0 var(--ink);transition:transform .3s var(--e-tap),box-shadow .15s}
.player .play:hover{transform:translate(-50%,-54%) rotate(-4deg)}
.player .play:active{transform:translate(-50%,-44%);box-shadow:0 0 0 var(--ink)}
.player .tri{width:0;height:0;border-left:30px solid var(--ink);border-top:19px solid transparent;border-bottom:19px solid transparent;margin-left:8px}
.player .play .label{font-size:.625rem;color:var(--ink)}
.player.is-playing .play{display:none}
.p-missing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--g-ink);padding:20px;background:
  repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 18px,transparent 18px 36px),var(--g-deep)}
.p-missing .pm-no{position:absolute;right:16px;bottom:-10px;font-family:var(--f-display);font-weight:800;font-size:9rem;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--g-ink);opacity:.35}
.p-missing b{font-family:var(--f-display);font-size:1.6rem}
.p-missing img{animation:bob 1.8s ease-in-out infinite}
.player.missing video,.player.missing .play{display:none}

.feat-band{background:var(--ink);color:var(--paper);overflow:hidden;border-bottom:3px solid var(--ink)}
.feat-track{display:flex;width:max-content;animation:marq 30s linear infinite;padding:14px 0}
.feat-band span{font-family:var(--f-display);font-weight:700;font-size:1.25rem;padding:0 18px;white-space:nowrap}
.feat-band i{font-style:normal;color:var(--g-acc)}

.gp-about-grid{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:980px){.gp-about-grid{grid-template-columns:5fr 6fr}}
.gp-text p{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,1rem + 1.6vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
.gp-text p+p{margin-top:.7em;font-family:var(--f-body);font-weight:400;font-size:var(--t-body-l);line-height:1.55;letter-spacing:0;color:var(--ink-2)}
.how{list-style:none;display:grid;gap:16px;counter-reset:none}
.how li{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:2px;align-items:start;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);padding:18px}
.how li:nth-child(1){background:var(--sari)}.how li:nth-child(2){background:var(--nane)}.how li:nth-child(3){background:var(--lila)}
.how li:hover{transform:translateX(6px) rotate(-.6deg)}
.how .step{grid-row:span 2;display:grid;place-items:center;width:58px;height:58px;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-m);box-shadow:0 var(--lift-s) 0 var(--ink);font-family:var(--f-display);font-weight:800;font-size:1.9rem}
.how b{font-family:var(--f-display);font-weight:800;font-size:1.35rem;line-height:1.1}
.how span:not(.step){color:var(--ink)}

.gp-modes{background:var(--lila-soft);border-top:3px solid var(--ink)}
.mode-keys{list-style:none;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mode-keys li{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);padding:20px;display:flex;flex-direction:column;gap:6px;min-height:130px;justify-content:space-between}
.mode-keys li:hover{transform:translateY(-5px) rotate(-1deg)}
.mode-keys b{font-family:var(--f-display);font-weight:800;font-size:1.5rem;line-height:1.05}
.mode-keys span{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-2)}

.gp-media{border-top:3px solid var(--ink)}
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(180px,22vw,260px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 22px}
.shot{scroll-snap-align:start;aspect-ratio:9/19.5;border:3px solid var(--ink);border-radius:var(--r-xl);box-shadow:0 var(--lift-l) 0 var(--ink);overflow:hidden;background:var(--g-deep);padding:0}
.shot img{width:100%;height:100%;object-fit:cover}
.shot:hover{transform:translateY(-6px) rotate(-1.5deg)}
.shot{transition:transform .35s var(--e-tap)}
.shots-empty{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:var(--lila-soft);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);padding:24px}
.shots-empty p{font-size:var(--t-body-l);max-width:40ch}

.gp-tusik{background:var(--mor);color:var(--paper);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:26px 0}
.gp-tusik .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.gp-tusik img{width:96px;height:auto}
.gp-tusik p{font-size:var(--t-body-l);max-width:60ch}

.gp-next{display:grid;gap:16px;padding:clamp(40px,5vw,72px) var(--gutter);max-width:var(--container);margin:0 auto}
@media (min-width:760px){.gp-next{grid-template-columns:1fr auto 1fr}}
.nkey{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--g-bg);color:var(--g-ink);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);padding:18px 20px}
.nkey b{font-family:var(--f-display);font-weight:800;font-size:1.5rem;line-height:1.05}
.nkey.all{background:var(--sari);color:var(--ink);justify-content:center;text-align:center}
.nkey:hover{transform:translateY(-4px) rotate(-1deg)}
.nkey:active{transform:translateY(5px);box-shadow:0 var(--lift-xs) 0 var(--ink)}

.lightbox{position:fixed;inset:0;z-index:95;background:rgba(20,12,54,.94);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:88vh;max-width:92vw;border:3px solid var(--paper);border-radius:var(--r-xl)}
.lb-close{position:absolute;right:18px;top:18px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-m);box-shadow:0 var(--lift-s) 0 var(--sari);padding:8px 12px;font-family:var(--f-mono);font-weight:500}

@media (prefers-reduced-motion:reduce){.band .track,.feat-track,.gl-tusik,.p-missing img{animation:none!important}}

.sh-right{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
@media (min-width:900px){.sh-right{align-items:flex-end}}
.game .btn.ghost{background:var(--paper);color:var(--ink)}
.game .btn.ghost .dot{background:var(--tap)}
.g-empty[hidden],.shots-empty[hidden],.shots[hidden],.p-missing[hidden]{display:none!important}
.gcover .status{left:auto;right:14px}
.gfallback{background:radial-gradient(circle at 84% 64%,var(--g-acc) 0 16%,transparent 16.5%),var(--g-bg)}
footer .k-foot{background:var(--paper);border:3px solid var(--paper);border-radius:var(--r-xl);padding:4px;box-shadow:0 var(--lift-m) 0 var(--sari);transform:rotate(-6deg)}
.gp-top{flex-wrap:wrap}
@media (max-width:520px){.gp .status{white-space:normal;max-width:100%}}

/* ==========================================================================
   v2 — sticky header, status board, keycap facts, Lumen + PC worlds
   ========================================================================== */

/* ---------- Header: sticks, tightens on scroll ---------- */
.top{position:sticky;top:0;z-index:40;transition:box-shadow var(--d-base) var(--e-out)}
.top .wrap{transition:min-height var(--d-base) var(--e-out)}
.top .brand img{transition:width var(--d-base) var(--e-out),height var(--d-base) var(--e-out)}
.top.is-scrolled{box-shadow:0 var(--lift-s) 0 var(--ink)}
.top.is-scrolled .wrap{min-height:62px}
.top.is-scrolled .brand img{width:40px;height:40px}
.top nav a.nav-cta{display:inline-flex;align-items:center;padding:7px 14px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-m);box-shadow:0 var(--lift-s) 0 var(--ink);font-weight:600;transition:transform var(--d-instant) var(--e-out),box-shadow var(--d-instant) var(--e-out),background var(--d-fast)}
.top nav a.nav-cta:hover{background:var(--sari);border-bottom-color:var(--ink);transform:translateY(-1px);box-shadow:0 var(--lift-m) 0 var(--ink)}
.top nav a.nav-cta:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
@media (max-width:700px){.top .nav-x{display:none}}
@media (max-width:380px){.top nav a.nav-cta{display:none}}

/* ---------- Hero: status pill ---------- */
.hero .meta{align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 11px;background:var(--mor-deep);color:var(--paper);border:1.5px solid rgba(255,248,234,.35);border-radius:999px;text-decoration:none;transition:background var(--d-fast),border-color var(--d-fast)}
.pill:hover{background:var(--ink);border-color:var(--nane)}
.pill .arr{transition:transform var(--d-base) var(--e-tap)}
.pill:hover .arr{transform:translateX(4px)}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--nane);flex:none}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--nane);animation:ring 1.8s var(--e-out) infinite}
@keyframes ring{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}

/* ---------- Hero: the three games in test, as keycaps (desktop only) ---------- */
.hero>.wrap{position:relative}
.hero-games{display:none;list-style:none}
@media (min-width:1100px){.hero-games{position:absolute;right:var(--gutter);top:clamp(80px,7vw,110px);display:flex;z-index:2}}
.hero-games li{width:clamp(120px,10vw,152px);margin-left:-16px;transform:rotate(var(--r));transition:transform .35s var(--e-tap)}
.hero-games li:nth-child(1){--r:-7deg;margin-top:22px}
.hero-games li:nth-child(2){--r:4deg}
.hero-games li:nth-child(3){--r:-3deg;margin-top:34px}
.hero-games li:hover{transform:rotate(0) translateY(-8px);z-index:3}
.hero-games a{display:flex;flex-direction:column;justify-content:space-between;gap:6px;aspect-ratio:1;padding:13px;background:var(--g-bg);color:var(--g-ink);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);text-decoration:none}
.hero-games a:active{transform:translateY(6px);box-shadow:0 var(--lift-xs) 0 var(--ink)}
.hero-games .label{font-size:.5625rem;opacity:.85}
.hg-no{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,1.4rem + 1.8vw,3.4rem);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--g-ink)}
.hg-name{font-family:var(--f-display);font-weight:800;font-size:clamp(.85rem,.7rem + .3vw,1rem);line-height:1.05}

/* ---------- Facts: three keycaps ---------- */
.facts{background:var(--ink);padding:clamp(30px,4vw,56px) 0 clamp(40px,5vw,68px)}
.facts-grid{display:grid;gap:clamp(14px,1.8vw,22px)}
@media (min-width:760px){.facts-grid{grid-template-columns:1.35fr 1fr 1fr}}
.fact{position:relative;display:flex;flex-direction:column;gap:10px;min-height:clamp(210px,21vw,270px);padding:clamp(20px,2.4vw,30px);background:var(--c);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 #05021A,0 8px 0 2px rgba(255,248,234,.2)}
.fact:hover{transform:translateY(-6px)}
.f-mobile{--c:var(--sari)}.f-pc{--c:var(--nane)}.f-team{--c:var(--lila)}
.fact .legend{opacity:.7}
.fact .num{margin-top:auto;font-family:var(--f-display);font-weight:800;font-size:clamp(3.6rem,2rem + 4vw,6.2rem);line-height:.82;letter-spacing:-.045em}
.fact p{font-weight:500;font-size:1rem;line-height:1.4;max-width:32ch}
.fact .tag{position:absolute;right:clamp(16px,2vw,24px);top:clamp(16px,2vw,24px);padding:6px 10px;background:var(--ink);color:var(--nane);border-radius:var(--r-s)}
.split{display:flex;gap:8px;margin-top:4px}
.split>span{flex:var(--n);display:flex;gap:4px;padding:4px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-s)}
.split i{flex:1;height:16px;border-radius:var(--r-xs)}
.s-test i{background:var(--mor)}
.s-dev i{background:repeating-linear-gradient(-45deg,var(--ink) 0 4px,var(--paper) 4px 8px);border:1.5px solid var(--ink)}
.split-key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.6875rem}
.sw{display:inline-block;width:11px;height:11px;margin-right:7px;border:2px solid var(--ink);border-radius:var(--r-xs);vertical-align:-1px;flex:none}
.sw.t{background:var(--mor)}.sw.l{background:var(--nane)}
.sw.d{background:repeating-linear-gradient(-45deg,var(--ink) 0 2px,var(--paper) 2px 4px)}
.crew{position:absolute;right:clamp(16px,2vw,24px);top:clamp(14px,2vw,22px);display:flex}
.crew i{display:grid;place-items:center;width:46px;height:46px;margin-left:-12px;border:var(--bw-l) solid var(--ink);border-radius:50%;background:var(--paper);overflow:hidden}
.crew i:first-child{margin-left:0}
.crew .p svg{width:32px;margin-top:9px}
.crew .p:nth-child(2){background:var(--sari)}
.crew .t{background:var(--mor)}
.crew .t img{width:36px;height:auto;margin-top:4px}

/* ---------- Section eyebrow ---------- */
.eyebrow{display:block;margin-bottom:14px;color:var(--ink-2)}
.yt .eyebrow{color:var(--lila)}

/* ---------- Status board ---------- */
.board-sec{padding-bottom:calc(var(--gap) * .6)}
.lanes{display:grid;gap:clamp(16px,2vw,24px);align-items:start}
@media (min-width:980px){.lanes{grid-template-columns:.8fr 1.1fr 1.1fr}}
.lane{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);overflow:hidden;display:flex;flex-direction:column}
.l-live{--lc:var(--nane)}.l-test{--lc:var(--sari)}.l-dev{--lc:var(--lila)}
.lane-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:var(--lc);border-bottom:3px solid var(--ink)}
.lane-t{display:flex;align-items:center;font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.lane-h b{font-family:var(--f-display);font-weight:800;font-size:2.2rem;line-height:1;letter-spacing:-.03em}
.lane-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:236px;padding:24px 20px;text-align:center;background:repeating-linear-gradient(-45deg,rgba(20,12,54,.045) 0 14px,transparent 14px 28px)}
.lane-empty img{width:104px;height:auto;animation:bob 2.6s ease-in-out infinite}
.lane-empty p{max-width:26ch;color:var(--ink-2);font-size:.9375rem;line-height:1.45}
.rows{list-style:none}
.rows li+li{border-top:1.5px solid var(--ink)}
.rows a,.rows .secret{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"no name go" "no meta go";column-gap:14px;row-gap:3px;align-items:center;padding:14px 20px;text-decoration:none;color:var(--ink)}
.rows a{box-shadow:inset 0 0 0 0 var(--sw);transition:background var(--d-fast),box-shadow var(--d-base) var(--e-out)}
.rows a:hover{background:var(--paper-2);box-shadow:inset 7px 0 0 0 var(--sw)}
.r-no{grid-area:no;color:var(--ink-2);font-size:.6875rem}
.r-name{grid-area:name;font-family:var(--f-display);font-weight:800;font-size:1.2rem;line-height:1.12;letter-spacing:-.01em}
.r-meta{grid-area:meta;color:var(--ink-2);font-size:.6875rem;letter-spacing:.05em}
.r-go{grid-area:go;font-weight:600;font-size:1.15rem;transition:transform var(--d-base) var(--e-tap)}
.rows a:hover .r-go,.more-secrets:hover .r-go{transform:translateX(5px)}
.rows .secret{cursor:help}
.redact{display:inline-block;width:var(--w,10ch);height:.95em;vertical-align:-.1em;border-radius:var(--r-xs);background:repeating-linear-gradient(-45deg,var(--ink) 0 6px,#3A2E6E 6px 12px);background-size:200% 100%;animation:redact 2.4s linear infinite}
@keyframes redact{to{background-position:-33.94px 0}}

/* ---------- Game worlds: v2 polish ---------- */
.game{border-radius:var(--r-xl);transition:transform .4s var(--e-tap),box-shadow .25s var(--e-out)}
.game:hover{box-shadow:0 calc(var(--lift-xl) + 4px) 0 var(--ink)}
.game h3 small{display:block;margin-top:.3em;font-size:.44em;line-height:1.1;letter-spacing:-.01em;opacity:.78}
.status::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--ink);vertical-align:1px}
.status.test{background:var(--sari)}
.status.test::before{animation:dotping 1.6s var(--e-out) infinite}
@keyframes dotping{from{box-shadow:0 0 0 0 rgba(20,12,54,.55)}to{box-shadow:0 0 0 6px rgba(20,12,54,0)}}
.game .btn.ghost span[aria-hidden]{transition:transform var(--d-base) var(--e-tap)}
.game .btn.ghost:hover span[aria-hidden]{transform:translateX(4px)}
.codename{display:flex;align-items:center;gap:10px}

/* Lumen — a dark maze lit by one light */
.g-lumen{--g-bg:#14163A;--g-ink:#F3EFE0;--g-acc:#FFC94D}
.lumen-world{background:#0A0B22;overflow:hidden;touch-action:none;--lx:120px;--ly:120px;--lr:70px}
@media (hover:hover){.lumen-world{cursor:none}}
.maze{position:absolute;inset:0;width:100%;height:100%}
.maze .walls{fill:none;stroke:#F3EFE0;stroke-width:5;stroke-linecap:round}
.maze .exit rect{fill:#FFC94D}
.maze .exit text{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:1px;fill:#140C36}
.dark{position:absolute;inset:0;pointer-events:none;background:#05061A;
  -webkit-mask:radial-gradient(circle at var(--lx) var(--ly),transparent 0,transparent var(--lr),rgba(0,0,0,.8) calc(var(--lr) * 1.7),rgba(0,0,0,.9) calc(var(--lr) * 2.3));
          mask:radial-gradient(circle at var(--lx) var(--ly),transparent 0,transparent var(--lr),rgba(0,0,0,.8) calc(var(--lr) * 1.7),rgba(0,0,0,.9) calc(var(--lr) * 2.3))}
.orb{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#FFE7A3;border:2px solid #FFC94D;box-shadow:0 0 0 7px rgba(255,201,77,.22),0 0 34px 12px rgba(255,201,77,.3);transform:translate(var(--lx),var(--ly));pointer-events:none}
.lumen-hint{position:absolute;left:clamp(14px,2.4vw,24px);top:clamp(14px,2.4vw,24px);z-index:3;padding:7px 11px;background:#14163A;color:#F3EFE0;border:1.5px solid rgba(243,239,224,.4);border-radius:var(--r-s);transition:background var(--d-fast),color var(--d-fast)}
.lumen-world.found .lumen-hint{background:#FFC94D;color:#140C36;border-color:#140C36}
.lumen-world.found .dark{opacity:.55;transition:opacity 1.2s var(--e-out)}
.g-lumen .credit{color:#F3EFE0}

/* PC (code name) — a drum you can play */
.g-pc{--g-bg:#FF3D9E;--g-ink:#140C36;--g-acc:#FFD21F}
.drum-world{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:clamp(28px,4vw,48px) 20px 56px;overflow:hidden;background:repeating-linear-gradient(-45deg,#140C36 0 26px,#21174C 26px 52px);color:var(--paper)}
.drum-wrap{position:relative}
.drum{display:block;width:clamp(210px,24vw,300px);filter:drop-shadow(0 10px 0 rgba(0,0,0,.4));cursor:pointer}
.drum svg{width:100%;height:auto;overflow:visible}
.drum.hit svg{animation:drumhit .24s var(--e-tap)}
@keyframes drumhit{40%{transform:scale(1.05,.93) translateY(6px)}}
.drum .mallet{transform-box:fill-box;transition:transform .09s var(--e-out)}
.drum .m-l{transform-origin:0 0;transform:rotate(-16deg)}
.drum .m-r{transform-origin:100% 0;transform:rotate(16deg)}
.drum.dum .m-l,.drum.tek .m-r{transform:rotate(0)}
.drum:focus-visible{outline-offset:8px;border-radius:var(--r-m)}
.drum-word{position:absolute;left:50%;top:-6px;font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,1.2rem + 1.6vw,2.8rem);letter-spacing:-.02em;color:var(--sari);text-shadow:0 var(--lift-s) 0 var(--ink);transform:translate(-50%,0) scale(.5);opacity:0;pointer-events:none}
.drum-word.pop{animation:wordpop .5s var(--e-out)}
@keyframes wordpop{0%{opacity:0;transform:translate(-50%,10px) scale(.5)}30%{opacity:1;transform:translate(-50%,-14px) scale(1.08)}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.drum-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;align-items:center}
.drum-bar #drum-count{padding:6px 10px;background:var(--sari);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-s);box-shadow:0 var(--lift-s) 0 var(--pembe)}
.drum-tip .kbd{margin:0 2px}
.note{position:absolute;left:0;top:0;pointer-events:none;font-family:var(--f-display);font-weight:800;font-size:1.6rem;color:var(--nane);text-shadow:0 var(--lift-s) 0 var(--ink)}
.g-pc .credit{color:var(--paper)}

/* ---------- "two more secrets" key ---------- */
.more-secrets{display:flex;align-items:center;gap:16px;margin-top:clamp(28px,4vw,44px);padding:18px clamp(18px,2.4vw,26px);background:var(--ink);color:var(--paper);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--mor);text-decoration:none;transition:transform .35s var(--e-tap),box-shadow .2s var(--e-out)}
.more-secrets:hover{transform:translateY(-3px);box-shadow:0 var(--lift-xl) 0 var(--mor)}
.more-secrets:active{transform:translateY(8px);box-shadow:0 0 0 var(--mor)}
.ms-q{display:grid;place-items:center;flex:none;width:50px;height:50px;font-family:var(--f-display);font-weight:800;font-size:1.8rem;background:var(--ink);border:var(--bw-l) solid var(--paper);border-radius:var(--r-m);box-shadow:0 var(--lift-s) 0 var(--nane);transform:rotate(-6deg)}
.ms-q+.ms-q{margin-left:-28px;box-shadow:0 var(--lift-s) 0 var(--sari);transform:rotate(5deg)}
.ms-t{display:grid;gap:2px}
.ms-t b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.15}
.ms-t span{color:var(--lila-soft);font-size:.9375rem}
.more-secrets .r-go{margin-left:auto}

/* ---------- Games list: test status ---------- */
.gcard .status.test{background:var(--sari)}

@media (prefers-reduced-motion:reduce){.pulse::after,.redact,.lane-empty img,.status.test::before{animation:none!important}}
.lumen-world .lumen-hint{left:auto;right:clamp(14px,2.4vw,24px)}
.g-lumen .credit{right:auto;left:14px}
.gp-about-grid.solo{grid-template-columns:1fr}.gp-about-grid.solo .gp-text{max-width:30ch}

/* ==========================================================================
   Gizlilik (genel gizlilik politikası) — gizlilik/index.html
   ========================================================================== */
.pv-hero{background:var(--lila-soft);border-bottom:3px solid var(--ink);padding:clamp(24px,4vw,48px) 0 clamp(40px,5vw,72px)}
.pv-head{display:grid;gap:24px;align-items:end;margin-top:clamp(18px,3vw,32px)}
@media (min-width:900px){.pv-head{grid-template-columns:1fr auto}}
.pv-hero h1{font-family:var(--f-display);font-weight:800;font-size:var(--t-mega);line-height:.8;letter-spacing:-.05em}
.pv-hero h1 em{font-style:normal;color:var(--mor)}
.pv-hero .lead{margin-top:20px;max-width:52ch;font-size:var(--t-body-l);color:var(--ink-2)}
.pv-tusik{width:clamp(130px,16vw,220px);height:auto;animation:bob 2.4s ease-in-out infinite}
.pv-keys{list-style:none;display:grid;gap:14px;margin-top:clamp(28px,4vw,52px);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.pv-keys li{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--c);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-l) 0 var(--ink);transition:transform .35s var(--e-tap)}
.pv-keys li:hover{transform:translateY(-4px)}
.pv-keys .label{opacity:.6}
.pv-keys b{font-family:var(--f-display);font-weight:800;font-size:1.25rem;line-height:1.1;letter-spacing:-.01em}
.pv-keys span:not(.label){font-size:.9375rem;line-height:1.45}

.pv-games{padding-bottom:calc(var(--gap) * .5)}
.pv-games h2{font-family:var(--f-display);font-weight:800;font-size:var(--t-l);line-height:.92;letter-spacing:-.03em}
.pv-list{list-style:none;border-top:2px solid var(--ink)}
.pv-list li{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:10px 18px;padding:16px 4px;border-bottom:1.5px solid var(--ink)}
.pv-sw{width:30px;height:30px;border:var(--bw-l) solid var(--ink);border-radius:var(--r-s);background:var(--g-bg);box-shadow:inset 0 0 0 5px var(--g-bg),inset 0 0 0 30px var(--g-acc)}
.pv-secret .pv-sw{background:repeating-linear-gradient(-45deg,var(--ink) 0 4px,var(--pembe) 4px 8px);box-shadow:none}
.pv-no{color:var(--ink-2)}
.pv-list b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.1}
.pv-links{display:flex;flex-wrap:wrap;gap:10px;justify-self:end}
.pv-go{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-m);box-shadow:0 var(--lift-s) 0 var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none;transition:transform var(--d-instant) var(--e-out),box-shadow var(--d-instant) var(--e-out),background var(--d-fast)}
.pv-go:hover{background:var(--sari);transform:translateY(-1px);box-shadow:0 var(--lift-m) 0 var(--ink)}
.pv-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.pv-go.en{background:transparent}
.pv-go.en:hover{background:var(--paper-2)}
.pv-wait{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:760px){
  .pv-list li{grid-template-columns:auto 1fr;grid-template-areas:"sw no" "sw name" "st st" "ln ln"}
  .pv-sw{grid-area:sw;align-self:start}.pv-no{grid-area:no}.pv-list b{grid-area:name}
  .pv-list .status{grid-area:st;justify-self:start}.pv-links{grid-area:ln;justify-self:start}
}

.pv-body{padding-top:calc(var(--gap) * .5)}
.pv-grid{display:grid;gap:36px}
.pv-grid>*{min-width:0}
@media (min-width:980px){.pv-grid{grid-template-columns:230px 1fr;gap:72px}.pv-toc{position:sticky;top:96px;align-self:start}}
.pv-toc>.label{color:var(--ink-2)}
.pv-toc ol{list-style:none;counter-reset:t;display:grid;gap:2px;margin-top:12px}
.pv-toc a{display:flex;gap:10px;padding:6px 10px;border-radius:var(--r-s);color:var(--ink-2);font-weight:500;font-size:.9375rem;text-decoration:none;counter-increment:t;transition:background var(--d-fast),color var(--d-fast)}
.pv-toc a::before{content:counter(t,decimal-leading-zero);padding-top:3px;font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3)}
.pv-toc a:hover{background:var(--paper-2);color:var(--ink)}
.pv-toc a.on{background:var(--paper-2);color:var(--ink);box-shadow:inset 3px 0 0 var(--tap)}
@media (max-width:979px){
  .pv-toc ol{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity}
  .pv-toc a{white-space:nowrap;border:2px solid var(--ink);background:var(--paper);scroll-snap-align:start}
}

.pv-text{max-width:72ch}
.pv-text section{padding:clamp(30px,3.6vw,46px) 0;border-top:1.5px solid var(--ink);scroll-margin-top:90px}
.pv-text section:first-child{padding-top:0;border-top:0}
.pv-text h2{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem);line-height:1.05;letter-spacing:-.02em}
.pv-text h2 .label{color:var(--ink-3)}
.pv-text h3{margin:28px 0 8px;font-family:var(--f-display);font-weight:700;font-size:1.2rem;line-height:1.2}
.pv-text p,.pv-text li{font-size:1.0625rem;line-height:1.65;color:var(--ink-2)}
.pv-text b{color:var(--ink);font-weight:600}
.pv-text p+p,.pv-text ul+p,.pv-text .pv-table+p{margin-top:14px}
.pv-text ul{list-style:none;display:grid;gap:8px;margin-top:12px}
.pv-text ul li{position:relative;padding-left:22px}
.pv-text ul li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;border-radius:var(--r-xs);background:var(--mor)}
.pv-text ul.pv-rights{counter-reset:r}
.pv-text ul.pv-rights li{padding-left:30px}
.pv-text ul.pv-rights li::before{counter-increment:r;content:counter(r,decimal-leading-zero);top:.38em;left:0;width:auto;height:auto;background:none;font-family:var(--f-mono);font-size:.6875rem;font-weight:500;color:var(--mor)}
.pv-text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--tap);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.pv-text a:hover{text-decoration-thickness:3px}
.pv-dl,.pv-table{margin-top:16px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-l);box-shadow:0 var(--lift-s) 0 var(--ink);overflow:hidden}
.pv-dl div{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:12px 16px}
.pv-dl div+div,.pv-table [role=row]+[role=row]{border-top:1.5px solid var(--ink)}
.pv-dl dt{padding-top:3px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pv-dl dd{font-weight:600}
.pv-table [role=row]{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;padding:11px 16px}
.pv-table [role=row]:first-child{background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
.pv-table [role=cell]{font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.pv-table [role=cell]:first-child{color:var(--ink);font-weight:500}
@media (max-width:560px){.pv-table [role=row],.pv-dl div{grid-template-columns:1fr;gap:2px}}
@media (prefers-reduced-motion:reduce){.pv-tusik{animation:none!important}}

/* ==========================================================================
   v2.1 — scroll worlds: stacking hero, opening game keys, world colours,
   guide Tuşik, marquee that feels your speed, footer curtain
   JS writes --p (0→1 progress) on elements; CSS turns it into motion.
   ========================================================================== */
body{overflow-x:clip}   /* "hidden" made body a scroll box and broke every position:sticky */

/* ---------- Hero stays put while the band and facts slide over it ---------- */
.hero-stack .hero{position:sticky;top:var(--hero-top,0);z-index:0}
.hero-stack .facts{position:relative;z-index:2}
.hero::after{content:"";position:absolute;inset:0;z-index:8;background:#140C36;opacity:calc(var(--hp,0) * .6);pointer-events:none}
.hero>.wrap{translate:0 calc(var(--hp,0) * -70px);opacity:calc(1 - var(--hp,0) * .5)}

/* ---------- Facts and lanes rise one after another ---------- */
.facts .fact{--q:clamp(0, 1 - var(--p,1) * 1.7 + var(--i,0) * .28, 1);translate:0 calc(var(--q) * 80px);rotate:calc(var(--q) * var(--r,-5deg))}
.facts .fact:nth-child(2){--r:4deg}
.lanes .lane{--q:clamp(0, 1 - var(--p,1) * 1.7 + var(--i,0) * .28, 1);translate:0 calc(var(--q) * 90px);rotate:calc(var(--q) * var(--r,-3deg))}
.lanes .lane:nth-child(2){--r:2deg}

/* ---------- Game panels open from a keycap into a world ---------- */
.games .game{translate:0 calc((1 - var(--p,1)) * 90px);scale:calc(.86 + .14 * var(--p,1));border-radius:calc(var(--r-xl) + (1 - var(--p,1)) * 44px);will-change:translate,scale}
.games .game .no .n{translate:calc((1 - var(--p,1)) * -60px) 0;opacity:calc(.15 + .85 * var(--p,1))}
.games .game .world{filter:saturate(calc(.4 + .6 * var(--p,1)))}

/* ---------- The catalogue takes on the colour of the world you are in ---------- */
.games-sec{background:var(--world-bg,var(--paper));transition:background-color .8s var(--e-out)}
.games-sec .sec-head h2,.games-sec .sec-head p,.games-sec .eyebrow{transition:color .6s var(--e-out)}
.games-sec.is-dark .sec-head h2{color:var(--paper)}
.games-sec.is-dark .sec-head p,.games-sec.is-dark .eyebrow{color:var(--lila-soft)}
.games-sec.is-dark .sec-head h2 .hl{color:var(--ink)}

/* ---------- Section titles: words come up out of a slot ---------- */
.wsplit .w-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .02em .1em;margin:-.16em -.02em -.1em}
.wsplit .w-in{display:inline-block;transform:translateY(110%);transition:transform .9s var(--e-out);transition-delay:calc(var(--wi,0) * 80ms)}
.wsplit.in .w-in{transform:none}
.no-js .wsplit .w-in{transform:none}

/* ---------- Marquee band leans into your scroll speed ---------- */
.band{transform:rotate(-1.4deg) skewX(var(--skew,0deg));transition:transform .25s var(--e-out)}

/* ---------- Guide Tuşik ---------- */
.guide{position:fixed;right:clamp(10px,2vw,28px);bottom:22px;z-index:55;width:clamp(70px,7.5vw,112px);transform:translateY(170%);transition:transform .55s var(--e-tap);pointer-events:none}
.guide.on{transform:none}
.g-body{position:relative;transform-origin:50% 90%;rotate:var(--lean,0deg);transition:rotate .2s var(--e-out);pointer-events:auto;cursor:pointer}
.g-body svg{width:100%;height:auto;overflow:visible;display:block}
.guide .leg-a,.guide .leg-b,.guide .arm-a,.guide .arm-b,.guide .acc{transform-box:fill-box}
.guide .leg-a,.guide .leg-b{transform-origin:50% 0}
.guide .arm-a{transform-origin:100% 50%}
.guide .arm-b{transform-origin:0 50%}
.guide.run .g-body svg{animation:bob-run .28s linear infinite}
.guide.run .leg-a{animation:legA .28s linear infinite}
.guide.run .leg-b{animation:legB .28s linear infinite}
.guide.run .arm-a{animation:armA .28s linear infinite}
.guide.run .arm-b{animation:armB .28s linear infinite}
.guide.run.back .leg-a,.guide.run.back .leg-b,.guide.run.back .arm-a,.guide.run.back .arm-b{animation-direction:reverse}
.guide:not(.run) .g-body svg{animation:bob 1.6s ease-in-out infinite}
.guide:not(.run) .arm-b{animation:wave 2.4s ease-in-out infinite}
.guide.w-pc:not(.run) .arm-b{animation:halay .5s ease-in-out infinite alternate}
@keyframes halay{from{transform:rotate(14deg)}to{transform:rotate(-34deg)}}
.guide.hop .g-body{animation:hop .6s var(--e-tap)}
@keyframes hop{0%{transform:none}35%{transform:translateY(-42px) scale(.92,1.08)}70%{transform:translateY(0) scale(1.14,.86)}100%{transform:none}}
.guide .acc{opacity:0;transform:translateY(-16px) scale(.5);transform-origin:50% 100%;transition:opacity .25s var(--e-out),transform .45s var(--e-tap)}
.guide.w-mimo .acc-mimo,.guide.w-lumen .acc-lumen,.guide.w-lezzet .acc-lezzet,.guide.w-wolf .acc-wolf,.guide.w-pc .acc-pc{opacity:1;transform:none}
.g-bubble{position:absolute;right:55%;bottom:calc(100% - 4px);width:max-content;max-width:min(240px,64vw);padding:9px 12px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-m);box-shadow:0 var(--lift-s) 0 var(--ink);font-family:var(--f-mono);font-size:.8125rem;font-weight:500;line-height:1.35;opacity:0;transform:translateY(8px) scale(.7);transform-origin:100% 100%;transition:transform var(--d-base) var(--e-tap),opacity var(--d-fast);pointer-events:none}
.g-bubble::after{content:"";position:absolute;right:12px;top:calc(100% + 2px);border:7px solid transparent;border-top-color:var(--ink)}
.g-bubble.show{opacity:1;transform:none}
@media (max-width:760px){.guide{bottom:70px;width:66px}}

/* ---------- Footer curtain: the page lifts off the footer ---------- */
/* main sits above the fixed footer (z 1 over z 0). A negative z-index on the footer looked right
   but sent every click to <body>, so the footer links were dead. */
.reveal-foot main{position:relative;z-index:1;background:var(--paper)}
.reveal-foot main::after{content:"";display:block;height:0;border-bottom:3px solid var(--ink)}
.reveal-foot footer{position:fixed;left:0;right:0;bottom:0;z-index:0}
.reveal-foot body{padding-bottom:var(--fh,0)}

@media (prefers-reduced-motion:reduce){
  .hero>.wrap,.facts .fact,.lanes .lane,.games .game,.games .game .no .n{translate:none!important;rotate:none!important;scale:none!important;opacity:1}
  .games .game{border-radius:var(--r-xl)}
  .games .game .world{filter:none}
  .wsplit .w-in{transform:none!important}
  .band{transform:rotate(-1.4deg)}
}

/* ---------- Tuşik as punctuation: peeks out from behind a "?" (Phantom-style, one per page) ---------- */
.peek{position:relative;display:inline-block;isolation:isolate}
.peek .tq{position:absolute;z-index:-1;left:.3em;bottom:.36em;width:.6em;max-width:none;height:auto;overflow:visible;transform-origin:30% 100%;rotate:16deg;translate:0 0;transition:translate .5s var(--e-tap),rotate .5s var(--e-tap)}
.wsplit .peek .tq{translate:-.12em .38em;rotate:0deg;transition-delay:.75s}
.wsplit.in .peek .tq{translate:0 0;rotate:16deg}
.sec-head h2:hover .peek .tq{translate:-.1em .32em;rotate:4deg;transition-delay:0s}
.tq-eyes{transform-box:fill-box;transform-origin:center;animation:tqblink 4.2s infinite}
@keyframes tqblink{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.peek .tq{translate:0 0!important;rotate:16deg!important}.tq-eyes{animation:none}}

/* ---------- Secret cards: Tuşik hides behind the "?" key and whispers the hint (Playdate-style bubble) ---------- */
.teaser .q{position:relative;isolation:isolate}
.teaser .q .tq{position:absolute;z-index:-1;right:-.2em;top:.04em;width:.4em;max-width:none;height:auto;overflow:visible;transform-origin:20% 100%;rotate:0deg;translate:-.22em .14em;scale:.6;opacity:0;transition:translate .45s var(--e-tap),rotate .45s var(--e-tap),scale .45s var(--e-tap),opacity .15s}
.teaser:hover .q .tq,.teaser:focus-visible .q .tq,.teaser.say .q .tq{translate:0 0;rotate:18deg;scale:1;opacity:1}
.t-bubble{position:absolute;left:50%;top:14px;z-index:3;width:max-content;max-width:min(86%,240px);padding:9px 12px;background:var(--paper);color:var(--ink);border:var(--bw-s) solid var(--ink);border-radius:var(--r-m);box-shadow:0 var(--lift-s) 0 var(--ink);font-family:var(--f-mono);font-size:.8125rem;font-weight:500;line-height:1.35;text-align:center;opacity:0;transform:translate(-50%,8px) scale(.8);transform-origin:50% 100%;transition:transform var(--d-base) var(--e-tap),opacity var(--d-fast);pointer-events:none}
.t-bubble::after{content:"";position:absolute;left:50%;top:calc(100% + 2px);border:7px solid transparent;border-top-color:var(--ink);transform:translateX(-50%)}
.teaser:hover .t-bubble,.teaser:focus-visible .t-bubble,.teaser.say .t-bubble{opacity:1;transform:translate(-50%,0) scale(1);transition-delay:.12s}
.teaser:hover .lock,.teaser.say .lock{opacity:0}
.teaser .lock{transition:opacity var(--d-fast)}
@media (prefers-reduced-motion:reduce){.teaser .q .tq{transition:none}}