:root{--bg:#0b0f1a;--card:#0f1629;--text:#e6ecff;--muted:#96a2c2;--acc:#5dd6ff;--good:#84ffb5;--warn:#ffd27a}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
background:radial-gradient(1200px 600px at 20% -10%,#10203a 0%,#0b0f1a 60%,#090c14 100%);
color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--acc);text-decoration:none}
.topbar{position:sticky;top:0;z-index:10;backdrop-filter:saturate(140%) blur(6px);
background:rgba(11,15,26,.65);border-bottom:1px solid rgba(255,255,255,.06);
padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.5px}
.nav a{margin-left:14px;color:var(--muted)}
.wrap{max-width:1100px;margin:16px auto;padding:0 12px;display:grid;grid-template-columns:1fr;gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.card-head .left span{margin-right:12px}
.card-head .right button{margin-left:8px;background:transparent;border:1px solid rgba(255,255,255,.15);
color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}
.canvas-wrap{width:100%;max-width:640px;margin:0 auto;}
canvas#game{display:block;width:100%;height:auto;aspect-ratio:2/3;background:radial-gradient(600px 400px at 50% 40%,#0a1a2f 0%,#070b13 60%,#05070c 100%)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45)}
.overlay.hidden{display:none}
.panel{width:min(92vw,520px);background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px;text-align:center}
.panel h2{margin:0 0 6px 0}
.row{display:flex;gap:10px;justify-content:center;margin-top:12px}
.primary{background:var(--acc);color:#041221;border:none;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}
.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 16px;cursor:pointer}
.tips{padding:14px 16px}
.tips h3{margin:8px 0 6px 0}
.tips ul{margin:0 0 8px 18px;color:var(--muted)}
.footer{padding:16px;color:var(--muted);text-align:center;display:grid;gap:8px}
.ad-block,.ad-footer{padding:8px}
.doc{background:#0b0f1a}
.doc-wrap{max-width:900px;margin:24px auto;padding:0 16px}
#game-card{position:relative}
#score{color:var(--good)}#best{color:var(--warn)}
@media(min-width:1000px){.wrap{grid-template-columns:1fr 320px}.ad-block{position:sticky;top:64px;align-self:start}}