*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:radial-gradient(ellipse at top,#1a1240,#07070d 70%);color:#eef0f6;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
a.back{position:fixed;top:16px;left:16px;color:#8d93a8;text-decoration:none;padding:8px 16px;border:1px solid rgba(255,255,255,.1);border-radius:30px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);transition:.2s;z-index:10}
a.back:hover{color:#fff;border-color:#7c5cff}
h1{margin-top:50px;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:800;background:linear-gradient(90deg,#7c5cff,#00e0ff,#ff4fd8);-webkit-background-clip:text;color:transparent}
.hud{display:flex;gap:14px;margin:16px 0}
.hud div{padding:8px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-family:ui-monospace,monospace}
.hud b{color:#00e0ff}
canvas,.board{border-radius:18px;border:1px solid rgba(124,92,255,.4);box-shadow:0 0 60px -10px rgba(124,92,255,.6);background:rgba(10,10,20,.8);max-width:100%}
.help{margin-top:14px;color:#8d93a8;font-size:.9rem;text-align:center}
.btn{margin-top:14px;padding:12px 28px;border:0;border-radius:30px;font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(90deg,#7c5cff,#00e0ff);cursor:pointer;box-shadow:0 10px 30px -10px #7c5cff}
.btn:active{transform:scale(.96)}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,5,12,.75);backdrop-filter:blur(6px);z-index:20}
.overlay.on{display:flex}
.overlay .box{text-align:center;padding:36px 44px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.overlay h2{font-size:2rem;margin-bottom:8px}
@keyframes pop{from{transform:scale(.7);opacity:0}}