:root{--bg:#111318;--panel:#1b2029;--panel-2:#242b36;--text:#f5f7fb;--muted:#9aa6b7;--accent:#f6c343;--green:#38d39f;--danger:#ff4d5f;--shadow:rgba(0, 0, 0, 0.35)}*{box-sizing:border-box}canvas,img,video,svg{max-width:100%}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,rgb(246 195 67 / .12),transparent 34rem),linear-gradient(180deg,#171b22,var(--bg));color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;touch-action:manipulation}body{display:grid;place-items:center;min-height:100svh;padding:10px;overflow-y:auto}main{width:100%;max-width:1120px;height:calc(100svh - 20px);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}@supports (height:100dvh){body{min-height:100dvh}main{height:calc(100dvh - 20px)}}header,.controls,.message-bar{background:rgb(27 32 41 / .9);border:1px solid rgb(255 255 255 / .08);box-shadow:0 14px 36px var(--shadow);backdrop-filter:blur(14px)}header{display:flex;align-items:stretch;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:8px;flex-direction:column}h1{margin:0;font-size:clamp(1.15rem, 2.6vw, 1.75rem);line-height:1;color:var(--accent);text-transform:uppercase}nav{width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-right:5px;padding-top:2px;padding-bottom:2px;margin-bottom:1px;flex-shrink:0}nav a{color:#bcdaf1;text-decoration:none;font-weight:500;font-size:1rem;padding:1rem .5rem;transition:color 0.2s,background 0.3s,transform 0.2s;border-radius:6px}nav a::after{height:3px;background:#38b2ac;transition:width 0.3s cubic-bezier(.4,0,.2,1),left 0.3s cubic-bezier(.4,0,.2,1)}nav a:hover{color:#38b2ac;background:rgb(56 178 172 / .08);transform:translateY(-3px) scale(1.05)}nav a:hover::after{width:80%;left:10%}.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;align-items:center}.stat{min-width:0;padding:8px 10px;border-radius:6px;background:var(--panel-2);border:1px solid rgb(255 255 255 / .07);text-align:center}.stat span{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.stat strong{display:block;margin-top:2px;font-size:1rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.game-shell{position:relative;min-height:0;overflow:hidden;border-radius:8px;background:#0e1217;border:1px solid rgb(255 255 255 / .08);box-shadow:0 18px 44px var(--shadow)}canvas{display:block;width:100%;height:100%;background:linear-gradient(rgb(255 255 255 / .025) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .025) 1px,transparent 1px),radial-gradient(circle at center,#17202a,#0e1217 70%);background-size:38px 38px,38px 38px,auto}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(12px, 4vw, 20px);background:rgb(8 10 14 / .7);opacity:0;pointer-events:none;overflow:auto;transition:opacity 220ms ease}.overlay.show{opacity:1;pointer-events:auto}.dialog{width:min(460px, 100%);max-height:100%;padding:clamp(16px, 5vw, 22px);border-radius:8px;background:rgb(27 32 41 / .96);border:1px solid rgb(255 255 255 / .12);box-shadow:0 24px 70px rgb(0 0 0 / .55);text-align:center;transform:translateY(8px) scale(.98);transition:transform 220ms ease}.overlay.show .dialog{transform:translateY(0) scale(1)}.dialog h2{margin:0 0 8px;font-size:clamp(1.5rem, 4vw, 2.4rem);color:var(--accent);text-transform:uppercase}.dialog p{font-size:1rem;margin:8px 0 16px;color:var(--text);line-height:1.45}.dialog .final{color:var(--text);font-size:1.1rem;margin-bottom:18px}.controls{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;padding:10px;border-radius:8px}.track-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}button{appearance:none;border:0;border-radius:8px;color:#111318;background:var(--accent);font:inherit;font-size:clamp(0.82rem, 3.5vw, 1rem);font-weight:800;cursor:pointer;line-height:1.1;min-height:56px;padding:9px 6px;box-shadow:inset 0 -3px rgb(0 0 0 / .18),0 7px 18px rgb(0 0 0 / .25);transition:transform 90ms ease,filter 140ms ease,box-shadow 140ms ease}button:hover{filter:brightness(1.08);box-shadow:inset 0 -3px rgb(0 0 0 / .18),0 10px 22px rgb(0 0 0 / .32)}button:active{transform:translateY(2px);box-shadow:inset 0 -1px rgb(0 0 0 / .2),0 4px 10px rgb(0 0 0 / .25)}.track-btn{display:grid;place-items:center;gap:3px}.track-btn small{display:none;color:rgb(17 19 24 / .7);font-size:.75rem;line-height:1}.restart{width:100%;min-width:0;background:var(--green)}.message-bar{position:absolute;left:50%;top:14px;transform:translateX(-50%) translateY(-12px);width:min(460px, calc(100% - 28px));padding:11px 14px;border-radius:8px;color:#fff;text-align:center;font-weight:800;opacity:0;pointer-events:none;transition:opacity 150ms ease,transform 150ms ease}.message-bar.show{opacity:1;transform:translateX(-50%) translateY(0);background:rgb(255 77 95 / .94);border-color:rgb(255 255 255 / .22)}.instructions{color:var(--text);font-size:.85rem;line-height:1rem;line-height:1.35;margin:0;display:none}@media (min-width:560px){.track-btn small{display:block}}@media (min-width:760px){body{padding:16px}main{height:min(760px, calc(100svh - 32px));gap:12px}@supports (height:100dvh){main{height:min(760px, calc(100dvh - 32px))}}header{align-items:center;flex-direction:row}.stats{display:flex;flex-wrap:wrap;justify-content:flex-end}.controls{grid-template-columns:minmax(0,1fr) auto;padding:12px}button{min-height:52px;padding:10px 14px}.restart{width:auto;min-width:132px}.instructions{display:block}}footer{padding:5px 0;text-align:center;font-size:.8rem;color:var(--text);width:100%;flex-shrink:0}footer p{margin:0}@media (min-width:1024px){.instructions{max-width:390px}}