html,body{height:100%;margin:0;background:#000;color:#fff;font-family:system-ui,Segoe UI,Roboto,Arial}
.container{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px}
canvas{background:#000; border:4px solid #111; image-rendering:pixelated; box-shadow:0 8px 30px rgba(0,0,0,.6)}
.hud{display:flex;gap:20px;align-items:center;font-weight:700}
.hint{font-size:12px;color:#bbb}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.panel{background:rgba(0,0,0,.85);padding:18px 22px;border-radius:8px;pointer-events:auto;text-align:center}
button{background:#ffcc00;border:0;padding:10px 14px;border-radius:6px;font-weight:800;cursor:pointer}
@media (max-width:720px){ canvas{width:92vw;height:102vw} }