:root { --card-bg:#0b1020; --card-fg:#e7ecf3; --accent:#6ee7ff; }
      *{ box-sizing:border-box }
      html,body{
        height:100%; margin:0;
        font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
        background:radial-gradient(1000px 600px at 50% -200px,#16203a 0%,#0a0f20 60%,#060914 100%);
        background-repeat: no-repeat;
        background-attachment: fixed;
        color:var(--card-fg);
      }
      .shell{ min-height:100%; display:grid; place-items:center; padding:24px; }
      .frame{ width:min(92vw,520px); }
      .header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px 0; }
      .title{ font-weight:700; letter-spacing:.3px; font-size:clamp(16px,2.6vw,22px); opacity:.9; }
      .btn{
        appearance:none; border:1px solid #23304f; background:#0e1530; color:var(--card-fg);
        padding:8px 12px; border-radius:12px; font-size:14px; cursor:pointer;
        transition:transform .08s ease, background .2s ease, border-color .2s ease;
      }
      .btn:hover{ transform:translateY(-1px); border-color:#2f4370 }
      .card{
        background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
        border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:12px;
        box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
      }
      canvas{
        width:80%; margin:auto; aspect-ratio:9/16; display:block; border-radius:16px; overflow:hidden;
        background:#70c5ce; box-shadow:0 12px 40px rgba(0,0,0,.45);
      }
      .hud{
        position:relative; margin-top:10px; display:grid; grid-template-columns:1fr auto auto;
        gap:10px; align-items:center; font-size:14px; opacity:.8;
      }
      .hud .pill{ border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.04); }
      .tips{ margin-top:8px; font-size:12px; opacity:.7; }
      .kbd{
        padding:1px 6px; border:1px solid rgba(255,255,255,.25); border-bottom-width:2px; border-radius:6px;
        font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:11px;
        background:rgba(255,255,255,.06);
      }
      /* Leaderboard container */
      #leaderboard.card{ margin-top:12px; padding:10px; display:none }
      #leaderboard ol{ margin:6px 0 0 18px; padding:0 }