:root{--ink:#17171a;--panel:#232327;--text:#f4f4f0;--dim:#9a9aa3;--y:#ffd21f;--t:#4FD1C5;--p:#e63027;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.5 "Trebuchet MS",Verdana,sans-serif;padding:0 16px 48px}
header,main{max-width:1000px;margin:0 auto}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:22px 0 14px}
h1{margin:0;font:400 clamp(2.2rem,7vw,3.4rem)/1 Impact,"Arial Black",sans-serif;color:var(--y);transform:skew(-6deg);letter-spacing:.01em}
#q{width:min(100%,260px);padding:9px 12px;border:2px solid var(--dim);border-radius:4px;background:#0e0e10;color:var(--text);font:inherit}
.line{max-width:1000px;margin:0 auto 18px;border-top:4px dashed var(--y)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--y);outline-offset:2px}
#chips{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
#chips button{padding:4px 14px;border:2px solid var(--dim);border-radius:4px;background:none;color:var(--text)}
#chips button[aria-pressed=true]{background:var(--y);border-color:var(--y);color:#111;font-weight:700}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tile{position:relative;aspect-ratio:4/3;border:0;border-radius:6px;overflow:hidden;padding:0;text-align:left;background:repeating-linear-gradient(-45deg,var(--a) 0 16px,var(--b) 16px 32px)}
.tile b{position:absolute;inset:auto 0 0 0;padding:9px 11px;background:#0c0c0e;color:var(--y);font:400 1.4rem/1 Impact,"Arial Black",sans-serif}
.tile small{position:absolute;top:8px;left:8px;padding:1px 7px;background:#0c0c0e;color:#fff;font-size:.78rem}
.tile:hover b{background:var(--y);color:#111}
#stage{background:var(--panel);border-radius:8px;padding:18px;margin-bottom:22px;text-align:center}
#stage:fullscreen{overflow:auto;display:flex;flex-direction:column;justify-content:center}
#gt{margin:0;font:400 2rem/1.1 Impact,"Arial Black",sans-serif}
#help{margin:4px auto 14px;max-width:60ch;color:var(--dim)}
#game{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:200px;justify-content:center}
#st{min-height:1.5em;margin:14px 0 8px;color:var(--y);font-weight:700}
.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.bar button,.ghost{background:none;border:2px solid var(--dim);color:var(--text);border-radius:4px;padding:5px 16px}
canvas{max-width:100%;max-height:72vh;height:auto;background:#0d0b1f;border-radius:6px;touch-action:none}
.g4{display:grid;grid-template-columns:repeat(4,min(80px,20vw));gap:8px;touch-action:none}
.t{display:grid;place-items:center;aspect-ratio:1;border-radius:8px;font:800 1.2rem system-ui;font-style:normal;background:#34343a;color:var(--ink)}
.t[style]{background:hsl(calc(var(--v)*32 + 160) 75% 62%)}
.card{aspect-ratio:1;border:0;border-radius:8px;background:var(--p);font-size:1.8rem;padding:0}
.card.up{background:var(--text)}
.g3{display:grid;grid-template-columns:repeat(3,min(96px,26vw));gap:8px}
.g3 button{aspect-ratio:1;border:0;border-radius:8px;background:#34343a;color:var(--t);font-size:2.4rem;font-weight:800}
.g3 button.o{color:var(--p)}
.ms{display:grid;gap:3px;width:min(100%,360px)}
.ms button{aspect-ratio:1;border:0;border-radius:4px;background:#4a4a52;color:var(--text);font-weight:800;padding:0}
.ms button.o{background:#18181b;color:hsl(calc(var(--n)*45 + 150) 80% 65%)}
.react{width:min(100%,420px);height:200px;border:0;border-radius:8px;background:#34343a;color:var(--text);font-size:1.3rem;font-weight:800}
.react.wait{background:var(--p);color:var(--ink)}
.react.go{background:var(--t);color:var(--ink)}
.big{font:400 2.2rem/1 Impact,"Arial Black",sans-serif}
.pz{width:min(210px,58vw);aspect-ratio:1;border-radius:50%;border:10px solid #c98532;cursor:pointer;
 background:radial-gradient(circle at 30% 35%,#b3261e 0 9%,#0000 10%),radial-gradient(circle at 66% 30%,#b3261e 0 9%,#0000 10%),radial-gradient(circle at 56% 68%,#b3261e 0 9%,#0000 10%),radial-gradient(circle at 28% 70%,#b3261e 0 9%,#0000 10%),#f2c14e}
.pz:active{transform:scale(.96)}
.shop{display:grid;gap:6px;width:min(100%,380px)}
.shop button{padding:9px 12px;border:0;border-radius:4px;background:var(--y);color:#111;font-weight:700;text-align:left}
.shop button:disabled{opacity:.4;cursor:default}
#game{position:relative}
.goldpz{position:absolute;width:64px;height:64px;border-radius:50%;border:0;background:radial-gradient(#fff3a0,#ffc400);font-size:1.7rem;box-shadow:0 0 18px #ffd21f}
.cm{display:grid;gap:12px;justify-items:center}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.cm select,.cm input{padding:6px 8px;border-radius:4px;border:2px solid var(--dim);background:#0e0e10;color:var(--text);font:inherit;width:auto}
.cm input{width:9ch;text-transform:uppercase}
.cm button{padding:8px 16px;border:0;border-radius:4px;background:var(--y);color:#111;font-weight:700}
.sm{margin:0;color:var(--dim);font-size:.9rem}
.cb{display:grid;grid-template-columns:repeat(8,min(60px,11vw));border:4px solid #0c0c0e;border-radius:4px}
.cb:empty{display:none}
.sq{aspect-ratio:1;border:0;padding:0;font-size:min(2.4rem,7.5vw);line-height:1}
.sq.l{background-color:#c3cbd9}.sq.d{background-color:#6b7d9c}
.sq.w{color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 0 3px #000}
.sq.b{color:#14141a;text-shadow:0 0 1px #fff}
.sq.last{box-shadow:inset 0 0 0 4px #ffd21faa}
.sq.sel{background-color:#ffd21f}
.sq.to{background-image:radial-gradient(circle,#0007 0 17%,#0000 19%)}
.sq.cap{background-image:radial-gradient(circle,#0000 0 58%,#e63027bb 61%)}
.sq.chk{background-image:radial-gradient(#e63027,#0000 72%)}