* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  html {
    background: #5a8edd url('../../Windows XP Background.svg') center center / cover no-repeat fixed;
  }
  body {
    min-height: 100vh;
    background: transparent;
    font-family: Tahoma, "Segoe UI", "MS Sans Serif", Arial, sans-serif;
    font-size: 11px;
    color: #000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* ─── XP window chrome ─── */
  .xp-window {
    background: linear-gradient(to bottom, #0058e6 0%, #245edb 9%, #245edb 100%);
    border-radius: 8px 8px 0 0;
    padding: 0 3px 3px;
    box-shadow: 0 0 0 1px #003a99, 0 18px 32px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 926px;
  }
  .xp-titlebar {
    background: linear-gradient(to bottom,
      #0058e6 0%, #3893ff 3%, #1d72e0 9%, #0c5fd5 50%, #045fda 90%, #0455b7 100%);
    color: #fff;
    padding: 3px 4px 3px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 13px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
    height: 28px;
    border-radius: 6px 6px 0 0;
  }
  .xp-titlebar-left { display: flex; align-items: center; gap: 6px; }
  .xp-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
  .xp-icon svg { display: block; }
  .xp-titlebar-buttons { display: flex; gap: 2px; }
  .xp-tb-btn {
    width: 22px; height: 22px;
    background: linear-gradient(to bottom, #4791ed 0%, #2772d4 50%, #205fc4 100%);
    border: 1px solid rgba(0,0,0,0.55);
    border-radius: 3px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: default;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.18);
  }
  .xp-tb-btn.close {
    background: linear-gradient(to bottom, #e96d65 0%, #c93630 50%, #9d1410 100%);
    border-color: #500000;
  }
  .xp-tb-btn:hover { filter: brightness(1.12); }
  a.xp-tb-btn { text-decoration: none; }

  .xp-menubar {
    background: #ece9d8;
    padding: 2px 6px;
    border-bottom: 1px solid #aca899;
    font-size: 11px;
    display: flex; gap: 4px;
  }
  .xp-menubar span { padding: 3px 8px; cursor: default; color: #000; }
  .xp-menubar span:hover { background: #316ac5; color: #fff; }

  .xp-toolbar {
    background: linear-gradient(to bottom, #f7f6ef 0%, #ece9d8 100%);
    padding: 5px 8px;
    border-bottom: 1px solid #d4d0c8;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
  }
  .toolbar-spacer { flex: 1; }
  .toolbar-stat {
    font-size: 11px;
    color: #003399;
    background: #fff;
    border: 1px inset #aca899;
    padding: 2px 8px;
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
  }
  .toolbar-stat b { color: #000; }

  .xp-btn {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    background: linear-gradient(to bottom,
      #f6f6f6 0%, #ece9d8 45%, #ddd9c0 55%, #d6d2c2 100%);
    border: 1px solid #003c74;
    border-radius: 3px;
    padding: 3px 12px;
    color: #000;
    cursor: pointer;
    min-width: 90px;
    min-height: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.05);
  }
  .xp-btn:hover:not(:disabled) {
    background: linear-gradient(to bottom,
      #fff7d2 0%, #ffe589 45%, #ffb04a 55%, #ffa12d 100%);
    border-color: #c66902;
  }
  .xp-btn:active:not(:disabled) {
    background: linear-gradient(to bottom, #d6d2c2 0%, #ddd9c0 45%, #ece9d8 55%, #f6f6f6 100%);
  }
  .xp-btn.primary {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 1px #0855c4;
    font-weight: bold;
  }

  .game-area {
    position: relative;
    padding: 10px;
    background: #ece9d8;
  }

  /* ─── XP-styled threat strip (above the canvas, centred) ─── */
  .xp-threat-strip {
    background: linear-gradient(to bottom, #f7f6ef 0%, #ece9d8 100%);
    border-bottom: 1px solid #d4d0c8;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    color: #003399;
    flex-wrap: wrap;
  }
  .xp-threat-label {
    color: #003399;
    font-weight: bold;
    letter-spacing: 0.3px;
  }
  .xp-threat-strip #bossCooldownVal {
    color: #c41e3a;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .xp-threat-bar {
    width: 280px;
    max-width: 50vw;
    height: 12px;
    background: #fff;
    border: 1px solid;
    border-color: #919b9c #ffffff #ffffff #919b9c;
    overflow: hidden;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.08);
  }
  .xp-threat-bar #bossCooldownBarFill {
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, #2a7be5 0%, #0a47ad 100%);
    transition: width 0.1s linear, background 0.3s;
  }
  .xp-threat-bar #bossCooldownBarFill.warn {
    background: linear-gradient(to bottom, #f0c000 0%, #c08000 100%);
  }
  .xp-threat-bar #bossCooldownBarFill.danger {
    background: linear-gradient(to bottom, #e44040 0%, #9a0000 100%);
  }
  .xp-threat-strip #challengeStatus {
    font-family: Tahoma, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #003399;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-height: 12px;
    margin-left: 6px;
  }

  .xp-statusbar {
    background: #ece9d8;
    border-top: 1px solid #919b9c;
    padding: 3px 8px;
    font-size: 11px;
    color: #333;
    display: flex;
    justify-content: space-between;
  }
  .status-cell { border-left: 1px solid #aca899; padding-left: 8px; margin-left: 8px; }
  .xp-start-tag {
    display: inline-block;
    background: linear-gradient(to bottom, #3ca33c 0%, #2c8f2c 50%, #207020 100%);
    color: #fff;
    font-style: italic;
    font-weight: bold;
    padding: 2px 12px 2px 8px;
    border-radius: 0 12px 12px 0;
    font-size: 11px;
    margin-right: 4px;
  }

  /* ─── Game container (sits inside .game-area) ─── */
  #wrap {
    position: relative;
    width: 900px;
    height: 560px;
    overflow: hidden;
    font-family: 'Georgia', 'Palatino', serif;
    color: #e8f4f8;
  }
  canvas#game {
    display: block;
    width: 900px;
    height: 560px;
    background: linear-gradient(180deg,
      #0a4d6e 0%,
      #083e5c 25%,
      #052a44 55%,
      #021a30 85%,
      #000814 100%);
    box-shadow: 0 0 80px rgba(0, 200, 255, 0.15) inset;
    image-rendering: auto;
  }

  @media (max-width: 940px) {
    body { padding: 4px; }
    .xp-toolbar { flex-wrap: wrap; }
    #wrap, canvas#game { width: 100%; height: auto; aspect-ratio: 900 / 560; }
  }

  /* =====================================================================
     IN-CANVAS HUD — ORIGINAL dark / cinematic style. Sits on top of the
     deep-water gameplay canvas and uses glowing cyan / gold accents so
     it reads as part of the game world (not the XP chrome surrounding
     it). The XP toolbar above the canvas mirrors the stat numbers for
     anyone who prefers a sterile readout.
  ===================================================================== */
  #hud {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 12px 18px;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    z-index: 5;
  }
  .panel {
    background: rgba(2, 18, 38, 0.78);
    border: 1px solid rgba(110, 220, 255, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  /* ─── XP-styled pre-boss question strip (top chrome, under threat) ─── */
  /* Hidden by default — the game shows it (display: flex) for ~6s after
     the reading modal docks, then auto-hides it. */
  #questionPanel {
    display: none;
    background: linear-gradient(to bottom, #f7f6ef 0%, #ece9d8 100%);
    border-bottom: 1px solid #d4d0c8;
    padding: 5px 12px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    color: #1a1a1a;
    flex-wrap: wrap;
  }
  #questionLabel {
    color: #003399;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-transform: none;
  }
  #questionText {
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #1a1a1a;
  }
  #progress {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    letter-spacing: 4px;
    color: #555;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
  }
  #progress .filled {
    color: #1e8636;
    animation: progressPop 0.3s ease-out;
  }
  #progress .empty { color: #aca899; }
  @keyframes progressPop {
    0%   { transform: scale(0.5); color: #00b830; }
    100% { transform: scale(1);   color: #1e8636; }
  }

  /* (The boss-cooldown UI lives in the XP chrome strip above the canvas
     now — see .xp-threat-strip. The old in-canvas #bossCooldownPanel is
     kept as a hidden no-op element for legacy show/hide call sites.) */

  /* ─── Letter timer bar (under question panel) ─── */
  #letterTimerWrap {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    max-width: 60%;
    pointer-events: none;
    z-index: 5;
    text-align: center;
  }
  #letterTimerWrap.hidden { display: none; }
  #letterTimerLabel {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #6edcff;
    margin-bottom: 4px;
    opacity: 0.85;
  }
  #letterTimerBar {
    height: 8px;
    background: rgba(2, 18, 38, 0.7);
    border: 1px solid rgba(110, 220, 255, 0.35);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  #letterTimerFill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #7fffb0 0%, #6edcff 100%);
    transition: width 0.08s linear, background 0.3s;
    box-shadow: 0 0 10px rgba(127, 255, 176, 0.5);
  }
  #letterTimerFill.warn {
    background: linear-gradient(90deg, #ffd87a 0%, #ff8a3a 100%);
    box-shadow: 0 0 12px rgba(255, 138, 58, 0.6);
  }
  #letterTimerFill.critical {
    background: linear-gradient(90deg, #ff3a5a 0%, #ff8a3a 100%);
    box-shadow: 0 0 16px rgba(255, 58, 90, 0.8);
    animation: timerPulse 0.4s ease-in-out infinite;
  }
  @keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }

  /* ─── Combo display (bottom-centre, dramatic gradient text) ─── */
  #comboDisplay {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 5;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
  }
  #comboDisplay.show { opacity: 1; }
  #comboMult {
    font-family: 'Georgia', serif;
    font-size: 56px;
    font-weight: bold;
    background: linear-gradient(180deg, #ffd87a 0%, #ff8aa0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 216, 122, 0.6);
    filter: drop-shadow(0 0 8px rgba(255, 216, 122, 0.5));
    line-height: 1;
  }
  #comboLabel {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    color: #ffd87a;
    text-transform: uppercase;
    margin-top: 2px;
  }
  #comboMult.pulse { animation: comboPulse 0.4s ease-out; }
  @keyframes comboPulse {
    0%   { transform: scale(1.4); filter: drop-shadow(0 0 20px #ffd87a); }
    100% { transform: scale(1);   filter: drop-shadow(0 0 8px  rgba(255, 216, 122, 0.5)); }
  }

  /* ─── Powerup badges (left-stack, glowing) ─── */
  #powerupBar {
    position: absolute;
    left: 18px;
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
    pointer-events: none;
  }
  .pBadge {
    width: 50px; height: 50px;
    background: rgba(2, 18, 38, 0.85);
    border: 2px solid;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    position: relative;
    box-shadow: 0 0 16px;
    animation: badgePop 0.3s ease-out;
  }
  @keyframes badgePop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  .pBadge .timer {
    position: absolute;
    bottom: -2px;
    left: 2px;
    right: 2px;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
  }
  .pBadge .timer .fill {
    height: 100%;
    transition: width 0.1s linear;
  }

  /* ─── Boss HP bar ─── */
  #bossHPBar {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 600px;
    height: 28px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 58, 90, 0.6);
    border-radius: 4px;
    overflow: hidden;
    z-index: 5;
    display: none;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(255, 58, 90, 0.4);
  }
  #bossHPBar.show { display: block; }
  #bossHPBar.punch { animation: hpPunch 0.18s ease-out; }
  #bossHPBar.enraged {
    border-color: #ff3a5a;
    box-shadow: 0 0 32px rgba(255, 58, 90, 0.85);
    animation: hpEnraged 0.5s ease-in-out infinite;
  }
  @keyframes hpPunch {
    0%   { transform: translateX(-50%) scale(1); }
    40%  { transform: translateX(-50%) scale(1.06, 1.5); filter: brightness(1.6); }
    100% { transform: translateX(-50%) scale(1); }
  }
  @keyframes hpEnraged {
    0%, 100% { box-shadow: 0 0 32px rgba(255, 58, 90, 0.85); }
    50%      { box-shadow: 0 0 48px rgba(255, 58, 90, 1); }
  }
  #bossHPFill {
    height: 100%;
    background: linear-gradient(90deg, #ff3a5a 0%, #ff8a3a 100%);
    transition: width 0.15s;
    box-shadow: 0 0 20px rgba(255, 58, 90, 0.6) inset;
  }
  #bossName {
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Georgia', serif;
    font-size: 14px;
    letter-spacing: 6px;
    color: #ff8aa0;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 138, 160, 0.6);
  }

  /* ─── Boss warning (centre-screen, dramatic) ─── */
  #bossWarning {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Georgia', serif;
    font-size: 72px;
    font-weight: bold;
    color: #ff3a5a;
    text-shadow: 0 0 40px rgba(255, 58, 90, 0.8), 0 0 80px rgba(255, 58, 90, 0.4);
    letter-spacing: 12px;
    pointer-events: none;
    opacity: 0;
    z-index: 7;
    text-align: center;
  }
  #bossWarning.show { animation: bossWarnAnim 2.5s ease-out forwards; }
  @keyframes bossWarnAnim {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(2); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: hue-rotate(0deg); }
    75%  { opacity: 1; filter: hue-rotate(40deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  }
  #bossWarning .sub {
    display: block;
    font-size: 18px;
    letter-spacing: 8px;
    color: #ffd87a;
    margin-top: 8px;
    font-style: italic;
  }

  /* ─── Flash messages (centre, big glow text) ─── */
  #flash {
    position: absolute;
    top: 38%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    text-shadow: 0 0 24px currentColor;
    font-family: 'Georgia', serif;
    letter-spacing: 4px;
  }
  #flash.show { animation: flashAnim 1.2s ease-out forwards; }
  @keyframes flashAnim {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -65%) scale(1); }
  }

  /* ─── Damage vignette (red flash on hit) ─── */
  #damageVignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 200px rgba(255, 58, 90, 0);
    transition: box-shadow 0.15s;
    z-index: 4;
  }
  #damageVignette.hit { box-shadow: inset 0 0 200px rgba(255, 58, 90, 0.7); }

  /* ─── Caustic light shimmer from surface ─── */
  #caustic {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 35%;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(180, 240, 255, 0.18) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 0%, rgba(180, 240, 255, 0.12) 0%, transparent 60%);
    z-index: 2;
    mix-blend-mode: screen;
    animation: caustic 8s ease-in-out infinite alternate;
  }
  @keyframes caustic {
    0%   { opacity: 0.7; transform: translateX(-10px); }
    100% { opacity: 1;   transform: translateX(10px); }
  }

  /* =====================================================================
     PRE-BOSS READING MODAL — ORIGINAL glowing dark panel with cyan accent.
     Sits over the (paused) canvas while the student reads the question.
  ===================================================================== */
  #readingModal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 30;
    width: min(620px, 86%);
    padding: 30px 34px 26px;
    background: linear-gradient(160deg, rgba(8, 38, 64, 0.97) 0%, rgba(3, 20, 38, 0.98) 100%);
    border: 1px solid rgba(110, 220, 255, 0.45);
    border-radius: 16px;
    box-shadow: 0 0 60px rgba(0, 180, 255, 0.35), 0 0 0 1px rgba(110,220,255,0.15) inset;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.85s cubic-bezier(0.34, 1.2, 0.4, 1), opacity 0.6s ease;
  }
  #readingModal.show { opacity: 1; }
  #readingModal.dock {
    transform: translate(-50%, -50%) translateY(-46vh) scale(0.42);
    opacity: 0;
  }
  #readingModalLabel {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #6edcff;
    margin-bottom: 14px;
  }
  #readingModalText {
    font-family: 'Georgia', serif;
    font-size: 23px;
    line-height: 1.4;
    color: #f0f8ff;
    font-style: italic;
    margin-bottom: 18px;
  }
  #readingModalHint {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffd87a;
  }
  #readingModalCountdown {
    display: inline-block;
    min-width: 26px;
    font-family: 'Georgia', serif;
    font-size: 18px;
    color: #fff;
  }
  #readingModalRing {
    margin: 4px auto 16px;
    width: 64px;
    height: 64px;
  }
  #readingModalRing circle.bg { stroke: rgba(110,220,255,0.18); }
  #readingModalRing circle.fg {
    stroke: #6edcff;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.2s linear;
    filter: drop-shadow(0 0 6px rgba(110,220,255,0.7));
  }

  /* =====================================================================
     MENU OVERLAYS — full-area dim background with a centred overlay-card.
     The card uses the XP card pattern: blue titlebar header on top, tan
     (#ece9d8) body below, xp-btn footer. Used for Start, Pause, Game
     Over, and the microbyte gate only — these are out-of-game screens
     where the XP chrome reads as "Windows is talking to you", not as a
     gameplay element.
  ===================================================================== */
  .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 14, 30, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 20px;
    overflow-y: auto;
  }
  .overlay.hidden { display: none; }
  .overlay-card {
    background: linear-gradient(to bottom, #0058e6 0%, #245edb 9%, #245edb 100%);
    border-radius: 6px 6px 0 0;
    padding: 0 3px 3px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 0 1px #003a99;
    max-width: 460px;
    width: 100%;
  }
  .overlay-card.overlay-card-wide { max-width: 600px; }
  .overlay-card > * { background: #ece9d8; }
  .overlay-card > *:first-child,
  .overlay-card .oc-title {
    background: linear-gradient(to bottom,
      #0058e6 0%, #3893ff 3%, #1d72e0 9%, #0c5fd5 50%, #045fda 90%, #0455b7 100%);
    color: #fff;
    font-family: Tahoma, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
    padding: 6px 12px;
    border-radius: 4px 4px 0 0;
    text-align: left;
  }
  .overlay-card .oc-title-warn { color: #ffd87a; }
  .overlay-card .oc-sub {
    padding: 12px 18px 8px;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    color: #003399;
    text-align: center;
  }
  .overlay-card .oc-body {
    padding: 6px 18px;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #1a1a1a;
  }
  .overlay-card .oc-summary {
    padding: 6px 18px 10px;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    color: #003399;
    text-align: center;
    font-style: italic;
  }
  .overlay-card ul.oc-controls {
    list-style: none;
    margin: 0; padding: 8px 18px;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    color: #1a1a1a;
  }
  .overlay-card ul.oc-controls li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .overlay-card ul.oc-controls kbd {
    background: #fff;
    border: 1px solid #aca899;
    border-radius: 2px;
    padding: 1px 5px;
    font: 10px 'Courier New', monospace;
    color: #000;
    box-shadow: 1px 1px 0 #888;
  }
  .overlay-card .xp-btn {
    display: block;
    margin: 12px auto 14px;
    min-width: 180px;
  }
  .overlay-card .oc-btn-row {
    padding: 6px 18px 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .overlay-card .oc-btn-row .xp-btn { margin: 0; }

  /* ─── Game over summary inside overlay-card ─── */
  .new-best {
    background: linear-gradient(to bottom, #f0c000 0%, #c08000 100%);
    color: #1a1004;
    font-family: Tahoma, sans-serif;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 11px;
    text-align: center;
    margin: 10px 18px 2px;
    padding: 4px;
    border: 1px solid #7a4a00;
    animation: newBestPulse 1.2s ease-in-out infinite;
  }
  @keyframes newBestPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(240,192,0,0); }
    50%      { box-shadow: 0 0 12px rgba(240,192,0,0.7); }
  }
  .final-score {
    font-family: 'Courier New', monospace;
    font-size: 30px;
    color: #003399;
    text-align: center;
    margin: 8px 0 6px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .final-stats {
    display: flex;
    gap: 22px;
    justify-content: center;
    margin: 6px 0 8px;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
  }
  .final-stats .st {
    text-align: center;
    background: #fff;
    border: 1px solid;
    border-color: #919b9c #ffffff #ffffff #919b9c;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.08);
    padding: 6px 14px;
    min-width: 72px;
  }
  .final-stats .st .v {
    color: #003399;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
  }
  .final-stats .st .l {
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 9px;
    margin-top: 2px;
  }