:root{
  --ink:#1a1320;--ink2:#23262f;--paper:#fff8ef;--card:#fffdf7;--line:#e2dccb;--text:#1d1f24;--muted:#5b5f6b;
  --accent:#ff9f1c;--red:#e0102a;--led:#39ff7a;--blue:#3a6df0;--hdr:56px;
  --display:'Archivo Black',Impact,sans-serif;--body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Share Tech Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.7 var(--body)}
a{color:var(--blue)}
img,svg{max-width:100%}

/* header */
.top{position:sticky;top:0;z-index:20;height:var(--hdr);background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;padding:0 max(14px,env(safe-area-inset-left));border-bottom:3px solid var(--accent)}
.logo{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:15px/1 var(--display);letter-spacing:.02em;white-space:nowrap}
.logo-img{display:block;border-radius:9px;border:2px solid #333}
.logo .led{font:600 15px/1 var(--mono);color:var(--led);background:#000;border:2px solid #333;border-radius:6px;padding:4px 6px}
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{color:#d9dce4;text-decoration:none;font:800 14px/1 var(--body);padding:10px 10px;border-radius:8px;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:var(--accent)}

/* game */
#play{position:relative;height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));min-height:420px;background:#0d0f14;overflow:hidden;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#play:fullscreen{height:100%}
#play:-webkit-full-screen{height:100%}
#wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#wrap canvas{display:block;width:100%;height:100%}
.gbtn{font:900 15px var(--body);border:3px solid #111;border-radius:12px;background:var(--accent);color:#111;padding:0 14px;min-height:46px;cursor:pointer;box-shadow:0 4px 0 #111}
.gbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #111}
.gbtn.alt{background:#fff}
/* control bar under the game, so buttons never cover the play area */
.gbar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;gap:10px;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:#1a1320;border-top:2px solid #2e2440}
.gbar .gbtn{min-width:46px;min-height:44px;padding:0 10px;font-size:19px;background:#fff;box-shadow:0 3px 0 #111}
.gbar .gshare{background:var(--accent);font-size:15px;padding:0 16px}
#fsx{display:none;position:absolute;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));z-index:7;min-width:46px;padding:0;font-size:22px;background:#fff}
#play:fullscreen #fsx{display:block}
#play:-webkit-full-screen #fsx{display:block}
#titleBtns{position:absolute;left:0;right:0;top:72%;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 10px}
#howto{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(14,8,24,.72);padding:12px}
#howto[hidden]{display:none}
.ht-card{width:min(360px,92%);background:var(--card);color:var(--text);border:3px solid #111;border-radius:20px;box-shadow:0 6px 0 #111;padding:18px 18px 20px;text-align:center}
.ht-card h2{margin:0 0 10px;font:400 26px/1.1 var(--display)}
.ht-demo{position:relative;height:110px;border-radius:14px;overflow:hidden;background:linear-gradient(#45b6fe,#bfeaff);border:3px solid #111}
.ht-wall{position:absolute;left:0;right:0;height:14px;top:100%;display:flex;justify-content:space-between;animation:htWall 2.4s linear infinite}
.ht-wall i{display:block;height:14px;border:2px solid #111;border-radius:4px;background:repeating-linear-gradient(-45deg,#ffcf3f 0 8px,#111 8px 14px)}
.ht-wall i:first-child{width:52%}.ht-wall i:last-child{width:22%}
.ht-gooby{position:absolute;top:22px;width:30px;height:30px;margin-left:-15px;border-radius:50%;border:3px solid #111;
  background:radial-gradient(circle at 34% 40%,#111 0 2px,#fff 2.5px 5px,transparent 5.5px),radial-gradient(circle at 68% 38%,#111 0 2px,#fff 2.5px 5.5px,transparent 6px),#ff9f1c;animation:htSteer 2.4s ease-in-out infinite}
.ht-thumb{position:absolute;bottom:6px;font-size:28px;margin-left:-14px;animation:htSteer 2.4s ease-in-out infinite}
@keyframes htWall{0%{top:100%}100%{top:-20%}}
@keyframes htSteer{0%,15%{left:25%}45%,100%{left:64%}}
.ht-steps{text-align:left;margin:14px 0 16px;padding-left:22px;font-size:15.5px;line-height:1.45}
.ht-steps li{margin:6px 0}
#htGo{width:100%;font-size:18px;min-height:52px}
@media (prefers-reduced-motion:reduce){.ht-wall,.ht-gooby,.ht-thumb{animation:none}.ht-gooby,.ht-thumb{left:64%}.ht-wall{top:70%}}
html{overscroll-behavior-y:none} /* no pull-to-refresh mid-run */
#rotate{display:none;position:absolute;inset:0;z-index:5;background:#1a1320;color:#fff;align-items:center;justify-content:center;text-align:center;padding:20px;font:400 24px/1.3 var(--display)}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){#rotate{display:flex}}
@media (max-width:380px){.gbtn{padding:0 10px;font-size:14px}#deathBtns,#titleBtns{gap:6px}}
#deathBtns{position:absolute;left:0;right:0;top:81%;display:none;justify-content:center;gap:8px;padding:0 10px}

/* under-game strip */
.strip{background:var(--ink2);color:#fff;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;font-size:15px}
.strip strong{font-family:var(--display);font-weight:400;letter-spacing:.02em}

/* article */
.article{max-width:760px;margin:0 auto;padding:40px max(18px,env(safe-area-inset-left)) 64px}
.kicker{font:800 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.article h1{font:400 clamp(32px,7vw,48px)/1.08 var(--display);margin:.25em 0 .4em;letter-spacing:-.01em}
.article h2{font:400 clamp(24px,5vw,30px)/1.2 var(--display);margin:2.2em 0 .6em;scroll-margin-top:calc(var(--hdr) + 12px)}
.article h3{font:900 20px/1.3 var(--body);margin:1.6em 0 .4em}
.lead{font-size:20px;line-height:1.6;color:#33363e}
.meta{color:var(--muted);font-size:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:20px 0}
.toc{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:18px 22px;margin:28px 0;box-shadow:5px 5px 0 var(--ink)}
.toc b{font-family:var(--display);font-weight:400}
.toc ol{margin:8px 0 0;padding-left:22px;columns:2 220px;column-gap:28px}
.toc li{margin:3px 0;break-inside:avoid}
.toc a{color:var(--text);text-decoration:none;font-weight:700}
.toc a:hover{color:var(--blue);text-decoration:underline}
.sticky{background:#ffe66b;border:none;padding:16px 20px;margin:26px 0;transform:rotate(-.6deg);box-shadow:0 8px 18px rgba(0,0,0,.12);font-weight:600}
.sticky.pink{background:#ffc2dc;transform:rotate(.5deg)}
.sticky p{margin:0}
.tbl{overflow-x:auto;margin:20px 0;border:2px solid var(--ink);border-radius:12px;background:var(--card)}
.tbl table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px;line-height:1.5}
.tbl th{background:var(--ink);color:#fff;text-align:left;padding:10px 12px;font:900 14px var(--body)}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl td:first-child{font-weight:800;white-space:nowrap}
.pill{display:inline-block;font:900 12px var(--body);padding:2px 8px;border-radius:999px;background:var(--ink);color:#fff}
.pill.duck{background:var(--blue)}
.article ul,.article ol{padding-left:24px}
.article li{margin:6px 0}
blockquote{margin:22px 0;padding:14px 20px;border-left:6px solid var(--red);background:var(--card);font-weight:700;font-size:19px}
.faq details{background:var(--card);border:2px solid var(--line);border-radius:12px;margin:10px 0;padding:0 18px}
.faq details[open]{border-color:var(--ink)}
.faq summary{cursor:pointer;font:900 17px/1.4 var(--body);padding:15px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:24px/1 var(--display)}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 16px}
.cta{display:block;text-align:center;background:var(--ink);color:#fff;border-radius:18px;padding:34px 20px;margin:48px 0 0;text-decoration:none}
.cta b{display:block;font:400 clamp(26px,6vw,36px)/1.15 var(--display);color:var(--accent)}
.cta span{display:inline-block;margin-top:14px;background:var(--accent);color:var(--ink);font:900 17px var(--body);padding:12px 22px;border-radius:12px}
.note{font-size:14px;color:var(--muted)}

/* sub-page hero */
.hero{background:var(--ink);color:#fff;padding:44px 18px 40px;text-align:center;border-bottom:3px solid var(--accent)}
.hero h1{font:400 clamp(32px,7vw,50px)/1.08 var(--display);margin:8px 0 10px}
.hero p{max-width:620px;margin:0 auto;color:#c8ccd6;font-size:18px}
.hero .led{display:inline-block;font:600 20px var(--mono);color:var(--led);background:#000;border:2px solid #333;border-radius:8px;padding:4px 10px}
.btn{display:inline-block;background:var(--accent);color:var(--ink);text-decoration:none;font:900 16px var(--body);padding:12px 20px;border-radius:12px;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);margin-top:18px}

/* footer */
.foot{background:var(--ink);color:#aeb3bf;padding:36px 18px calc(36px + env(safe-area-inset-bottom));font-size:14px}
.foot .in{max-width:960px;margin:0 auto;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.foot b{display:block;color:#fff;font:400 15px var(--display);margin-bottom:8px}
.foot a{color:#dfe2ea;text-decoration:none;display:block;padding:4px 0}
.foot a:hover{color:var(--accent)}
.foot .fine{max-width:960px;margin:26px auto 0;padding-top:18px;border-top:1px solid #2c303a;font-size:13px;line-height:1.6}

@media (max-width:600px){
  .tbl.stack table{min-width:0}
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:block;padding:12px 14px;border-top:1px solid var(--line)}
  .tbl.stack tr:first-child{border-top:0}
  .tbl.stack td{display:inline;border:0;padding:0 6px 0 0}
  .tbl.stack td:last-child{display:block;padding-top:4px;color:#33363e}
}
@media (max-width:520px){
  .logo .word{display:none}
  .article{padding-top:28px}
  body{font-size:16.5px}
  .lead{font-size:18px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticky{transform:none}}