*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#07111f;color:#fff;font-family:Arial,sans-serif}
body{display:flex;align-items:center;justify-content:center;padding:12px}
.game-shell{width:min(100%,420px)}
.topbar{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:#0e1c31;border:1px solid rgba(255,255,255,.12);border-radius:14px 14px 0 0;font-size:14px}
.game-wrap{position:relative;background:#0b1628;border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12)}
canvas{display:block;width:100%;height:auto;touch-action:manipulation;background:linear-gradient(#15365c,#0b1424)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(3,9,18,.62)}
.overlay.hidden{display:none}
.panel{width:min(100%,290px);text-align:center;padding:24px;border-radius:18px;background:rgba(7,17,31,.94);border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.panel h1,.panel h2{margin:0 0 12px}
.panel p{line-height:1.5;color:#cbd8e8}
button{border:0;border-radius:12px;padding:13px 22px;font-size:16px;font-weight:700;background:#54d6ff;color:#04111d;cursor:pointer}
button:active{transform:scale(.98)}
.hint{text-align:center;margin:0;padding:11px;background:#0e1c31;color:#aebdd1;border:1px solid rgba(255,255,255,.12);border-radius:0 0 14px 14px;font-size:13px}