@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

:root { color-scheme: dark; --ink:#effff6; --muted:#88a499; --green:#65ff9b; --violet:#a87cff; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; overflow:hidden; background:#07100d; color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 18% 15%,#173c2d 0,transparent 28%),radial-gradient(circle at 82% 80%,#20183a 0,transparent 27%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:auto,auto,32px 32px,32px 32px; }
.shell { width:min(92vw,820px); position:relative; }
header { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.eyebrow { margin:0 0 3px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.26em; }
h1 { margin:0; font-size:clamp(27px,4vw,43px); line-height:1; letter-spacing:-.055em; } h1 span{color:var(--green)}
.stats { display:flex; gap:10px; }
.stats div { min-width:76px; padding:9px 14px; border:1px solid #24352f; border-radius:12px; background:#0d1814bb; }
.stats small { display:block; color:var(--muted); font-size:8px; letter-spacing:.18em; font-weight:800; }
.stats strong { display:block; margin-top:2px; font-size:20px; font-variant-numeric:tabular-nums; }
.game-wrap { position:relative; border:1px solid #294037; border-radius:20px; padding:10px; background:#0b1612; box-shadow:0 30px 80px #0008,0 0 60px #5dff9a0b; }
canvas { display:block; width:min(74vh,100%); height:auto; margin:auto; border-radius:13px; background:#09130f; image-rendering:auto; }
.overlay { position:absolute; inset:10px; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px; text-align:center; background:radial-gradient(circle at 50% 38%,#193328ed,#08110ff7 65%); transition:.25s; }
.overlay.hidden { opacity:0; pointer-events:none; }
.badge { border:1px solid #5aff9490; border-radius:999px; padding:6px 10px; color:var(--green); background:#5aff9410; font-size:9px; font-weight:800; letter-spacing:.16em; }
h2 { margin:18px 0 8px; font-size:clamp(33px,6vw,62px); letter-spacing:-.06em; }
.overlay>p:not(.keys) { max-width:500px; margin:0 0 24px; color:#b2c8bf; font-size:14px; line-height:1.65; }
button { border:0; border-radius:12px; padding:14px 20px; background:var(--green); color:#07100d; font:800 13px Manrope; cursor:pointer; box-shadow:0 10px 30px #5aff9430; } button:hover{transform:translateY(-1px)} button span{margin-left:18px}
.keys { position:absolute; bottom:20px; margin:0; color:#587067; font-size:8px; font-weight:800; letter-spacing:.14em; }
footer { display:flex; justify-content:space-between; margin-top:14px; color:#6f8b80; font-size:9px; font-weight:700; letter-spacing:.08em; }
.legend { display:flex; gap:7px; align-items:center; }.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:9px}.food{background:var(--green);box-shadow:0 0 8px var(--green)}.crystal{background:var(--violet);transform:rotate(45deg);border-radius:1px}.ring{width:9px;height:9px;border:2px solid #43dfff;border-radius:50%;display:inline-block;margin-left:9px}
@media(max-width:600px){.shell{width:95vw}header{margin-bottom:10px}.stats div{min-width:58px;padding:7px 9px}.stats strong{font-size:16px}.overlay{padding:22px}.keys{display:none}footer{padding:0 4px}.legend{font-size:0}}