:root { --bg:#03030a; --ui:#18f0ff; --good:#00ffa6; --warn:#fffb00; --bad:#ff2f92; --accent:#8a2be2; --white:#f6f8ff; }
    html, body { margin:0; height:100%; background: radial-gradient(1200px 800px at 50% 60%, #0a0a20 0%, #040414 45%, #02020a 100%) fixed; color:var(--white); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; overflow:hidden; }
    canvas{ display:block; width:100vw; height:100vh; }
    .hud{ position:fixed; inset:0; pointer-events:none; padding:16px; display:flex; flex-direction:column; justify-content:space-between; }
    .topbar{ display:flex; gap:24px; align-items:center; text-shadow:0 0 8px rgba(24,240,255,.6); }
    .chip{ pointer-events:auto; user-select:none; border:1px solid rgba(24,240,255,.5); padding:6px 10px; border-radius:999px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; backdrop-filter: blur(6px); background: rgba(10,20,30,.24); box-shadow:0 0 16px rgba(24,240,255,.15) inset, 0 0 24px rgba(24,240,255,.1); }
    .chip[aria-pressed="true"]{ border-color:var(--good); text-shadow:0 0 8px rgba(0,255,166,.6); box-shadow:0 0 16px rgba(0,255,166,.25) inset, 0 0 24px rgba(0,255,166,.2); }
    .stage{ color:var(--warn); text-shadow:0 0 10px rgba(255,251,0,.55); }
    .overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: radial-gradient(1200px 800px at 50% 60%, rgba(138,43,226,.08), rgba(0,0,0,.75)); }
    .panel{ max-width:940px; margin:0 16px; border:1px solid rgba(138,43,226,.55); border-radius:16px; padding:28px; background: rgba(10,10,30,.6); box-shadow:0 0 44px rgba(138,43,226,.25), 0 0 140px rgba(24,240,255,.1) inset; text-align:center; }
    h1{ margin:0 0 8px; font-size:clamp(28px,4vw,56px); letter-spacing:.06em; text-transform:uppercase; color:#c7f5ff; text-shadow: 0 0 12px rgba(24,240,255,.65), 0 0 40px rgba(138,43,226,.4);}  
    .subtitle{ opacity:.9; margin-bottom:22px; }
    .kbd{ display:inline-block; border:1px solid rgba(198,255,255,.45); border-bottom-width:3px; border-radius:8px; padding:6px 10px; margin:2px 4px; background: rgba(6,10,18,.6); text-shadow: 0 0 8px rgba(24,240,255,.5);}  
    .btn{ pointer-events:auto; display:inline-block; margin-top:16px; color:#12141c; background: linear-gradient(180deg, #18f0ff, #8a2be2); border:none; border-radius:999px; padding:12px 18px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; box-shadow:0 10px 30px rgba(138,43,226,.4), 0 0 24px rgba(24,240,255,.45); }
    .btn:active{ transform:translateY(1px); }
    .bottomhelp{ font-size:12px; opacity:.8; }
    .lb-list ol{margin:0;padding-left:18px}
    .lb-item{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid rgba(138,43,226,.2)}
    .lb-name{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .lb-score{font-weight:800}
    .lb-meta{opacity:.75;font-size:12px}

      :root {
    --hud-text: #ffffff;
    --hud-stroke: rgba(0,0,0,.75);     /* thin dark outline for contrast */
    --hud-glow: rgba(0,255,204,.35);   /* subtle neon glow */
    --hud-chip-bg: rgba(0,0,0,.45);    /* translucent backing */
    --hud-chip-brd: rgba(255,255,255,.25);
  }

  /* Make the toggle/status text readable on any background */
  .hud .hud-toggle,
  .hud .hud-status,
  .audio-toggle,
  .music-toggle,
  .paused {
    color: var(--hud-text) !important;
    -webkit-text-stroke: 0.6px var(--hud-stroke);
    text-shadow:
      0 1px 2px rgba(0,0,0,.6),
      0 0 10px var(--hud-glow);
    font-weight: 800;
    letter-spacing: .3px;
  }

  /* Optional: chip-style backing for extra readability */
  .hud .hud-toggle,
  .hud .hud-status {
    background: var(--hud-chip-bg);
    border: 1px solid var(--hud-chip-brd);
    border-radius: 10px;
    padding: 4px 10px;
    backdrop-filter: saturate(120%) blur(2px);
  }

  /* Make PAUSED extra obvious */
  .hud .paused {
    text-transform: uppercase;
    letter-spacing: .6px;
    box-shadow: 0 0 18px rgba(255,102,204,.2) inset;
  }

  /* Show name entry only on Game Over */
#startOverlay [data-section="name-entry"] { display: none !important; }
#startOverlay[data-state="gameover"] [data-section="name-entry"] { display: flex !important; }