:root {
    color-scheme: dark;
    --app-vh: 1vh;
    --menu-olive:#3f4a3a;
    --menu-olive-deep:#2f382c;
    --menu-steel:#1a2028;
    --menu-steel-light:#262f3a;
    --menu-ink:#0d1117;
    --menu-bone:#ede5d3;
    --menu-bone-soft:#d7cfb9;
    --menu-accent:#c45b32;
    --menu-accent-soft:#d87042;
    --menu-gold:#d3b272;
  }

  /* --- iOS Safari anti-highlight/zoom/select guards --- */
  html, body, canvas, #hud, #overlay, .panel, .btn, .overlay-buttons,
  .touch-ui, .touch-ui * {
    -webkit-user-select: none !important;
            user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }
  input, textarea, select {
    -webkit-user-select: text !important;
            user-select: text !important;
    -webkit-touch-callout: default !important;
  }
  canvas, .touch-ui, .btn, .overlay-buttons button, .overlay a.btn { touch-action: none; }
  .overlay a.btn, .overlay .btn, .overlay button.btn { touch-action: manipulation; }

  html, body {
    margin:0;
    padding:0;
    height:100%;
    min-height:calc(var(--app-vh) * 100);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background-color:#04060b;
    /* New dusk-to-dawn banding with aurora glaze */
    background-image:
      radial-gradient(120% 80% at 50% 100%, rgba(255,219,170,0.55) 0%, rgba(255,219,170,0.18) 32%, rgba(255,219,170,0) 55%),
      linear-gradient(160deg, rgba(49,107,150,0.55) 0%, rgba(49,107,150,0.12) 38%, rgba(49,107,150,0) 55%),
      radial-gradient(120% 90% at 15% -20%, rgba(140,196,255,0.45) 0%, rgba(140,196,255,0) 60%),
      linear-gradient(185deg, #040b14 0%, #05162a 32%, #0a2948 58%, #123b47 76%, #1c2a2c 90%, #2c241f 100%);
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:#eaf2ff;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body{
    position:relative;
  }
  body.playing:not(.store-open){
    touch-action:none;
  }
  body::before{
    content:"";
    position:fixed;
    inset:-12% -12% -6%;
    /* contrails + aurora ribbons + distant clouds + distant mountains */
    background-image:
      radial-gradient(50% 30% at 20% 25%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%),
      radial-gradient(40% 30% at 80% 18%, rgba(161,206,255,0.2) 0%, rgba(161,206,255,0) 65%),
      conic-gradient(from 210deg at 28% 38%, rgba(255,255,255,0.18), transparent 120deg),
      conic-gradient(from 10deg at 74% 30%, rgba(128,199,255,0.16), transparent 150deg),
      linear-gradient(120deg, rgba(255,255,255,0.04) 20%, rgba(255,255,255,0) 40%),
      linear-gradient(300deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 55%),
      /* snowy ridgeline highlights */
      conic-gradient(from 205deg at 32% 78%, transparent 0deg 34deg, rgba(255,255,255,0.55) 34deg 44deg, transparent 44deg 360deg),
      conic-gradient(from 210deg at 58% 82%, transparent 0deg 36deg, rgba(255,255,255,0.48) 36deg 46deg, transparent 46deg 360deg),
      conic-gradient(from 208deg at 78% 84%, transparent 0deg 38deg, rgba(255,255,255,0.4) 38deg 48deg, transparent 48deg 360deg),
      /* distant snow-capped mountains */
      conic-gradient(from 204deg at 16% 81%, transparent 0deg 30deg, rgba(255,255,255,0.6) 30deg 36deg, rgba(47,78,98,0.9) 36deg 118deg, transparent 118deg 360deg),
      conic-gradient(from 205deg at 44% 85%, transparent 0deg 32deg, rgba(255,255,255,0.55) 32deg 38deg, rgba(29,56,74,0.92) 38deg 122deg, transparent 122deg 360deg),
      conic-gradient(from 206deg at 70% 88%, transparent 0deg 34deg, rgba(255,255,255,0.48) 34deg 40deg, rgba(18,38,52,0.88) 40deg 120deg, transparent 120deg 360deg),
      radial-gradient(45% 18% at 36% 84%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 58%),
      radial-gradient(36% 16% at 66% 88%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%),
      /* distant mountain silhouettes */
      conic-gradient(from 206deg at 24% 82%, transparent 0deg 52deg, rgba(30,52,66,0.78) 52deg 138deg, transparent 138deg 360deg),
      conic-gradient(from 204deg at 54% 86%, transparent 0deg 48deg, rgba(18,38,50,0.85) 48deg 134deg, transparent 134deg 360deg),
      conic-gradient(from 205deg at 82% 88%, transparent 0deg 46deg, rgba(12,26,36,0.82) 46deg 128deg, transparent 128deg 360deg),
      linear-gradient(180deg, rgba(6,12,18,0) 0%, rgba(6,12,18,0) 58%, rgba(6,12,18,0.52) 70%, rgba(4,9,14,0.9) 88%, rgba(2,4,7,0.97) 100%);
    background-repeat:no-repeat;
    filter:blur(1.4px);
    opacity:0.68;
    pointer-events:none;
    z-index:-2;
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    /* instrumentation grid + cockpit canopy glare */
    background-image:
      linear-gradient(180deg, rgba(2,8,15,0) 0%, rgba(2,8,15,0.65) 62%, rgba(0,0,0,0.92) 100%),
      linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0) 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 8px),
      radial-gradient(130% 80% at 50% 70%, rgba(255,164,101,0.22) 0%, rgba(255,164,101,0) 58%);
    mix-blend-mode:screen;
    opacity:0.5;
    pointer-events:none;
    z-index:-3;
  }
  html { -webkit-text-size-adjust:100%; }
  canvas {
    display:block;
    width:100vw;
    height:calc(var(--app-vh) * 100);
    background:transparent;
    image-rendering: pixelated;
  }

  /* HUD */
  #hud {
    position:fixed; top:10px; left:10px; right:10px; z-index:10;
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:8px; pointer-events:none;
    font-weight:500; color:#f2f6ff; text-shadow:0 1px 1px rgba(0,0,0,.22);
  }
  .hud-group{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:8px;
    pointer-events:none;
  }
  .hud-pause-btn{
    display:none;
    pointer-events:auto;
    align-self:flex-start;
    width:38px;
    height:38px;
    border-radius:19px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(12,18,26,0.22);
    box-shadow:0 2px 6px rgba(0,0,0,0.18);
    backdrop-filter:blur(2px);
    margin-left:auto;
    padding:0;
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
  }
  .hud-pause-btn:focus-visible{
    outline:2px solid rgba(255,255,255,0.65);
    outline-offset:2px;
  }
  .hud-pause-btn:active{
    transform:translateY(1px);
  }
  .hud-pause-btn:hover{
    background:rgba(20,26,34,0.32);
    border-color:rgba(255,255,255,0.24);
  }
  .hud-pause-btn .pause-lines{
    position:relative;
    width:100%;
    height:100%;
  }
  .hud-pause-btn .pause-lines::before,
  .hud-pause-btn .pause-lines::after{
    content:"";
    position:absolute;
    top:24%;
    bottom:24%;
    width:4px;
    border-radius:2px;
    background:rgba(240,242,248,0.78);
  }
  .hud-pause-btn .pause-lines::before{ left:50%; transform:translateX(-7px); }
  .hud-pause-btn .pause-lines::after{ left:50%; transform:translateX(3px); }
  body.touch-device .hud-pause-btn{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .hud-card{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:20px;
    padding:5px 8px;
    border-radius:6px;
    background:rgba(10,16,24,.32);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:none;
    backdrop-filter:blur(.5px);
    pointer-events:none;
  }
  #roundGroup{
    align-items:stretch;
    gap:8px;
  }
  #roundBadge,
  #scoreBadge{
    position:relative;
    min-width:0;
    padding:7px 13px 9px;
    border-radius:9px;
    background:linear-gradient(170deg, #273b2a 0%, #18291d 58%, #101d14 100%);
    border:1px solid rgba(6,10,7,0.88);
    box-shadow:
      0 6px 12px rgba(6,10,7,0.28),
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -2px 4px rgba(0,0,0,0.44);
    font-family:'Segoe Print','Bradley Hand','Chalkboard SE','Comic Sans MS',cursive;
    color:#f4f6ed;
    text-transform:uppercase;
    letter-spacing:0.16em;
    overflow:hidden;
    align-items:flex-end;
    justify-content:flex-start;
  }
  #roundBadge::before,
  #scoreBadge::before{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:7px;
    background:
      linear-gradient(125deg, rgba(104,144,112,0.14) 0%, rgba(46,65,51,0.12) 30%, rgba(6,10,7,0.62) 100%),
      repeating-linear-gradient(96deg, rgba(255,255,255,0.08) 0 1px, rgba(255,255,255,0) 1px 9px),
      radial-gradient(180% 140% at 14% 110%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 52%);
    opacity:0.9;
    pointer-events:none;
  }
  #roundBadge::after,
  #scoreBadge::after{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:6px;
    background:
      radial-gradient(45% 38% at 18% 28%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 70%),
      radial-gradient(95% 70% at 74% 76%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 80%);
    mix-blend-mode:screen;
    opacity:0.4;
    filter:blur(0.4px);
    pointer-events:none;
  }
  #roundBadge .chalk-text,
  #scoreBadge .chalk-text{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-end;
    gap:10px;
    font-size:10px;
    letter-spacing:0.2em;
    color:rgba(240,244,232,0.88);
    white-space:nowrap;
  }
  #roundBadge .chalk-text::after,
  #scoreBadge .chalk-text::after{
    content:"";
    position:absolute;
    left:2px;
    right:2px;
    bottom:-2px;
    height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.06) 100%);
    opacity:0.32;
  }
  #roundBadge .round-number,
  #scoreBadge .score-number{
    position:relative;
    font-size:1.34em;
    letter-spacing:0.12em;
    color:#fdfcf2;
    text-shadow:0 0 9px rgba(255,255,255,0.3);
    font-weight:600;
  }
  #scoreBadge .score-number{
    min-width:58px;
    text-align:right;
    font-variant-numeric:tabular-nums;
  }
  #hudStatus{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  #hpBlock { display:flex; flex-direction:column; gap:3px; min-width:112px; }
  #hpLabel { font-size:10px; letter-spacing:0.11em; text-transform:uppercase; color:#e8dcc4; opacity:.9; }
  #hpBar {
    position:relative;
    width:100%; height:6px;
    border:1px solid rgba(10,12,16,.8);
    background:linear-gradient(180deg, rgba(24,28,33,.9) 0%, rgba(14,18,23,.92) 100%);
    border-radius:3px; overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  }
  #hpBar::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 6px);
    opacity:.22;
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  #hpFill {
    position:relative;
    height:100%; width:100%;
    background-color:var(--hp-fill-color,#b8573c);
  }
  #hpFill::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.25) 100%);
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  #hpFill::after{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 1px, rgba(0,0,0,0) 1px 5px);
    opacity:.25;
    mix-blend-mode:soft-light;
    pointer-events:none;
  }
  .throttle-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:6px 10px 8px;
    min-width:160px;
    background:rgba(10,16,24,.32);
    border-radius:8px;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
    pointer-events:none;
  }
  .throttle-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
  }
  .throttle-label{
    font-size:10px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(169,198,220,.95);
  }
  .throttle-readout{
    display:flex;
    align-items:baseline;
    gap:4px;
    font-family:'Oswald','Arial Narrow',sans-serif;
    font-weight:700;
    color:#f7e8bf;
    text-shadow:0 1px 2px rgba(0,0,0,0.55);
  }
  #speedValue{
    font-size:18px;
    letter-spacing:0.02em;
  }
  .throttle-unit{
    font-size:10px;
    letter-spacing:0.28em;
  }
  .throttle-bar{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .orientation-notice{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    text-align:center;
    background:linear-gradient(180deg, rgba(5,10,18,.95) 0%, rgba(5,9,14,.96) 100%);
    color:#f2f6ff;
    z-index:9999;
    pointer-events:auto;
  }
  .orientation-notice .notice-card{
    max-width:320px;
    padding:22px 26px;
    border-radius:10px;
    background:rgba(18,26,36,.85);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 12px 28px rgba(0,0,0,.55);
  }
  .orientation-notice h2{
    margin:0 0 10px;
    font-size:20px;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .orientation-notice p{
    margin:0;
    font-size:14px;
    line-height:1.4;
    color:rgba(226,235,246,.9);
  }

  .round-banner{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:24px;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.22s ease, visibility 0.22s ease;
    z-index:4200;
  }
  .round-banner.hidden{
    opacity:0;
    visibility:hidden;
  }
  .round-banner:not(.hidden){
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .round-banner-card{
    min-width:240px;
    max-width:420px;
    padding:26px 30px 28px;
    border-radius:12px;
    text-align:center;
    background:linear-gradient(165deg, rgba(20,28,38,0.92) 0%, rgba(13,19,27,0.94) 100%);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 14px 36px rgba(5,8,14,0.55);
    pointer-events:auto;
  }
  .round-banner-title{
    margin:0 0 12px;
    font-size:24px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#f5f7ef;
    text-shadow:0 3px 12px rgba(0,0,0,0.45);
  }
  .round-banner-delta{
    margin:0 0 6px;
    font-size:18px;
    letter-spacing:0.06em;
    color:#f4e1a7;
  }
  .round-banner-total{
    margin:0;
    font-size:15px;
    letter-spacing:0.08em;
    color:#cbd8ec;
  }
  .round-banner-prompt{
    margin:18px 0 0;
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(214,223,235,0.72);
  }
  .round-banner.skip-ready .round-banner-prompt{
    color:#f1a56b;
  }
  .round-banner-actions{
    margin-top:20px;
    display:flex;
    justify-content:center;
    gap:14px;
    pointer-events:auto;
  }
  .round-banner-actions.hidden{
    display:none;
  }
  .round-banner-button{
    padding:8px 18px;
    border-radius:999px;
    border:1px solid rgba(241,230,210,0.28);
    background:rgba(29,39,54,0.85);
    color:#f3f6ef;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    cursor:pointer;
    transition:transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  }
  .round-banner-button:hover:not(:disabled),
  .round-banner-button:focus-visible:not(:disabled){
    transform:translateY(-1px);
    background:rgba(42,56,76,0.9);
    border-color:rgba(255,242,220,0.5);
    outline:none;
  }
  .round-banner-button:disabled{
    opacity:0.6;
    cursor:default;
  }
  .round-banner-button-primary{
    background:linear-gradient(145deg, rgba(231,180,102,0.9) 0%, rgba(208,142,60,0.85) 100%);
    color:#1b1f28;
    border-color:rgba(255,221,170,0.6);
  }
  .round-banner-button-primary:hover:not(:disabled),
  .round-banner-button-primary:focus-visible:not(:disabled){
    background:linear-gradient(145deg, rgba(241,194,126,0.95) 0%, rgba(226,160,80,0.92) 100%);
  }
  @media (max-width:600px){
    .round-banner-card{
      width:100%;
      max-width:320px;
      padding:20px 22px;
      border-radius:10px;
    }
    .round-banner-title{
      font-size:20px;
      letter-spacing:0.1em;
    }
    .round-banner-delta{
      font-size:16px;
    }
    .round-banner-prompt{
      font-size:12px;
      letter-spacing:0.08em;
    }
  }

  .enemy-intel{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:24px;
    background:rgba(6,8,12,0.75);
    backdrop-filter:blur(8px);
    z-index:4800;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity 0.22s ease, visibility 0.22s ease;
  }
  .enemy-intel.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .enemy-intel:not(.hidden){
    opacity:1;
    visibility:visible;
  }
  .enemy-intel-card{
    position:relative;
    width:min(92vw, 640px);
    padding:clamp(26px, 4vh, 38px);
    border-radius:22px;
    background:
      linear-gradient(165deg, rgba(64,74,62,0.78) 0%, rgba(38,44,36,0.78) 38%, rgba(14,18,24,0.96) 95%),
      radial-gradient(120% 140% at 50% 0%, rgba(232,204,164,0.16) 0%, rgba(14,16,22,0.9) 60%);
    border:1px solid rgba(236,229,211,0.12);
    box-shadow:0 28px 46px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    text-align:center;
    color:var(--menu-bone, #f8f3ea);
    isolation:isolate;
  }
  .enemy-intel-card::before,
  .enemy-intel-card::after{
    content:"";
    position:absolute;
    inset:clamp(10px, 1.6vw, 16px);
    border-radius:20px;
    pointer-events:none;
  }
  .enemy-intel-card::before{
    border:1px solid rgba(237,229,211,0.15);
    background:
      linear-gradient(135deg, rgba(215,178,114,0.16) 0%, rgba(0,0,0,0) 70%),
      repeating-linear-gradient(176deg, rgba(255,255,255,0.06) 0 2px, rgba(0,0,0,0) 2px 7px);
    opacity:0.65;
  }
  .enemy-intel-card::after{
    inset:auto;
    left:clamp(24px, 4vw, 40px);
    right:clamp(24px, 4vw, 40px);
    bottom:clamp(18px, 3vw, 32px);
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(196,91,50,0) 0%, rgba(196,91,50,0.5) 50%, rgba(196,91,50,0) 100%);
    opacity:0.55;
  }
  .enemy-intel-label{
    margin:0 0 16px;
    font-size:clamp(0.9rem, 0.8vw + 0.4rem, 1rem);
    letter-spacing:0.34em;
    text-transform:uppercase;
    font-family:'Impact','Anton','League Spartan','Roboto Condensed','Arial Narrow',sans-serif;
    color:rgba(255,233,197,0.85);
  }
  .enemy-intel-text{
    margin:0 0 28px;
    font-size:clamp(1.05rem, 1.4vw + 0.4rem, 1.45rem);
    line-height:1.55;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:rgba(236,229,211,0.9);
  }
  .enemy-intel-button{
    padding:12px 36px;
    border-radius:999px;
    border:1px solid rgba(255,230,190,0.75);
    font-size:0.95rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    font-weight:700;
    background:linear-gradient(140deg, rgba(241,192,122,0.96) 0%, rgba(226,158,82,0.92) 100%);
    color:#1c1f25;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
    transition:transform 0.16s ease, box-shadow 0.16s ease;
  }
  .enemy-intel-button:focus-visible,
  .enemy-intel-button:hover{
    outline:none;
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  }

  .store-overlay{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px;
    background:rgba(9,14,20,0.7);
    backdrop-filter:blur(8px);
    z-index:60;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.28s ease, visibility 0.28s ease;
  }
  .store-overlay.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .store-overlay:not(.hidden){
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .store-panel{
    width:clamp(320px, 92vw, 940px);
    max-height:calc(var(--app-vh) * 100 - clamp(48px, 12vh, 140px));
    background:linear-gradient(155deg, rgba(22,29,39,0.95) 0%, rgba(10,14,19,0.97) 100%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    box-shadow:0 14px 32px rgba(7,9,12,0.6);
    padding:clamp(20px, 3vw, 30px);
    display:grid;
    grid-template-rows:auto 1fr auto;
    gap:clamp(16px, 2vh, 24px);
    color:#ebf0fa;
    overflow:auto;
  }
  @media (max-height:700px){
    .store-panel{
      max-height:calc(var(--app-vh) * 100 - clamp(32px, 8vh, 96px));
    }
  }
  @media (max-height:560px){
    .store-panel{
      overflow:auto;
    }
  }
  .store-confirm{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:24px;
    background:rgba(4,8,12,0.68);
    backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.24s ease, visibility 0.24s ease;
    z-index:80;
  }
  .store-confirm:not(.hidden){
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .store-confirm-panel{
    width:min(360px, 80vw);
    background:linear-gradient(160deg, rgba(18,26,36,0.95) 0%, rgba(8,12,18,0.96) 100%);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    box-shadow:0 20px 44px rgba(5,7,10,0.62);
    padding:22px 24px;
    display:flex;
    flex-direction:column;
    gap:18px;
    color:#e8edf8;
  }
  .store-confirm-title{
    margin:0;
    font-size:18px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:#f4d28c;
  }
  .store-confirm-text{
    margin:0;
    font-size:14px;
    line-height:1.6;
    color:rgba(226,235,249,0.88);
  }
  .store-confirm-emphasis{
    color:#ffe8ab;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .store-confirm-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
  }
  .store-button{
    border-radius:32px;
    border:1px solid rgba(255,255,255,0.2);
    background:rgba(34,45,60,0.7);
    color:#f4f7ff;
    padding:10px 20px;
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .store-button:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,0.32);
    background:rgba(48,62,80,0.78);
  }
  .store-button:focus-visible{
    outline:2px solid rgba(255,255,255,0.7);
    outline-offset:2px;
  }
  .store-button-primary{
    background:linear-gradient(130deg, rgba(240,192,96,0.92) 0%, rgba(255,227,160,0.86) 100%);
    color:#1a1f2a;
    border-color:rgba(255,223,154,0.72);
    box-shadow:0 12px 24px rgba(240,186,82,0.35);
  }
  .store-button-primary:hover{
    background:linear-gradient(130deg, rgba(248,206,120,1) 0%, rgba(255,236,188,0.92) 100%);
    border-color:rgba(255,240,196,0.86);
  }
  .store-button-secondary{
    background:rgba(30,40,56,0.78);
  }
  .store-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .store-header-text h2{
    margin:0;
    font-size:20px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .store-subtitle{
    margin:6px 0 0;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:rgba(210,220,235,0.78);
  }
  .store-close-btn{
    align-self:flex-start;
    border-radius:36px;
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(36,48,62,0.65);
    color:#f2f6ff;
    padding:8px 16px;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .store-close-btn:hover{
    background:rgba(48,60,78,0.8);
    border-color:rgba(255,255,255,0.28);
  }
  .store-close-btn:focus-visible{
    outline:2px solid rgba(255,255,255,0.6);
    outline-offset:2px;
  }
  .store-body{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:clamp(16px, 2vw, 24px);
    align-content:start;
  }
  .store-section{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .store-section-title{
    margin:0;
    font-size:14px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(217,226,239,0.8);
  }
  .store-plane-card{
    position:relative;
    min-height:140px;
    border-radius:10px;
    overflow:hidden;
    background:rgba(18,24,32,0.9);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 12px 24px rgba(6,8,12,0.52);
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .store-plane-art{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2px 0 8px;
  }
  .store-plane-art img{
    width:100%;
    max-width:150px;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,0.45));
  }
  .store-plane-card::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--plane-card-image, none);
    background-size:cover;
    background-position:center;
    opacity:0.2;
    transition:opacity 0.3s ease;
  }
  .store-plane-card.has-image::before{
    opacity:0.35;
  }
  .store-plane-card-content{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:1;
  }
  .store-plane-name{
    margin:0;
    font-size:16px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .store-plane-bio{
    margin:0;
    font-size:12px;
    line-height:1.5;
    color:rgba(226,233,245,0.84);
  }
  .store-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
  }
  .store-item{
    position:relative;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:12px;
    background:linear-gradient(155deg, rgba(26,32,44,0.9) 0%, rgba(14,18,24,0.94) 100%);
    color:#f4f6fb;
    cursor:pointer;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
  }
  .store-item-art{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .store-item-art img{
    width:100%;
    max-width:130px;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45));
  }
  .store-item[aria-disabled="true"]{
    cursor:not-allowed;
    opacity:0.55;
  }
  .store-item:hover:not([aria-disabled="true"]){
    transform:translateY(-2px);
    border-color:rgba(255,255,255,0.18);
  }
  .store-item:focus-visible{
    outline:2px solid rgba(240,245,255,0.7);
    outline-offset:3px;
  }
  .store-item-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
  }
  .store-item-name{
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }
  .store-item-cost{
    font-size:11px;
    letter-spacing:0.08em;
    color:#f4d28c;
  }
  .store-item-status{
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(208,222,242,0.78);
  }
  .store-item-bio{
    margin:0;
    font-size:11px;
    line-height:1.4;
    color:rgba(220,230,245,0.82);
  }
  .store-ratings{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .store-rating-row{
    display:grid;
    grid-template-columns:80px 1fr 42px;
    align-items:center;
    gap:8px;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(204,216,234,0.82);
  }
  .store-rating-meter{
    position:relative;
    height:6px;
    border-radius:4px;
    background:rgba(255,255,255,0.12);
    overflow:hidden;
  }
  .store-rating-meter::after{
    content:"";
    position:absolute;
    inset:0;
    width:calc((var(--rating, 0) / 10) * 100%);
    background:linear-gradient(90deg, rgba(244,210,140,0.95) 0%, rgba(255,244,198,0.8) 100%);
  }
  .store-rating-value{
    justify-self:end;
    font-size:12px;
    color:rgba(236,244,255,0.76);
  }
  .store-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(206,218,236,0.78);
  }
  .store-score{
    font-size:13px;
    letter-spacing:0.16em;
    color:#f6f1c2;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .store-score span{
    display:inline-block;
    letter-spacing:0.14em;
    font-size:10px;
    color:rgba(245,236,198,0.82);
  }
  .store-score strong{
    font-size:15px;
    letter-spacing:0.18em;
    color:#fff6d4;
  }
  .store-hint{
    text-align:right;
    font-size:11px;
    letter-spacing:0.12em;
  }
  .store-plane-stats{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .store-plane-card .store-rating-row{
    grid-template-columns:70px 1fr 40px;
  }

  @media (max-width:900px){
    .store-body{
      grid-template-columns:1fr;
    }
    .store-panel{
      padding:18px 16px;
    }
  }
  @media (max-width:1024px){
    .store-body{
      grid-template-columns:1fr;
      gap:16px;
    }
  }

  @media (max-width:600px){
    .store-panel{
      width:calc(100vw - 18px);
      max-height:calc(var(--app-vh) * 100 - 60px);
      padding:16px 14px;
      gap:12px;
      border-radius:10px;
      transform:none;
    }
    .store-confirm{
      padding:16px;
    }
    .store-confirm-panel{
      width:100%;
    }
    .store-header{
      flex-direction:column;
      align-items:flex-start;
      gap:12px;
    }
    .store-close-btn{
      width:100%;
      text-align:center;
    }
    .store-grid{
      grid-template-columns:1fr;
    }
    .store-footer{
      flex-direction:column;
      gap:10px;
      align-items:flex-start;
      text-align:left;
    }
    .store-hint{
      text-align:left;
    }
  }

  @media (max-width:768px), (pointer:coarse){
    #throttleCard{
      position:absolute;
      top:10px;
      right:10px;
      margin:0;
      padding:0;
      min-width:auto;
      background:none;
      border:none;
      box-shadow:none;
    }
    #throttleCard .throttle-label,
    #throttleCard .throttle-bar{
      display:none;
    }
    #throttleCard .throttle-header{
      justify-content:flex-end;
      align-items:flex-start;
      gap:4px;
      padding:0;
    }
    .throttle-readout{
      gap:4px;
      padding:6px 8px;
      border-radius:6px;
      background:rgba(7,10,14,.4);
      box-shadow:0 6px 18px rgba(0,0,0,.35);
    }
    #speedValue{
      font-size:24px;
      letter-spacing:0.06em;
    }
    .throttle-unit{
      display:inline-block;
      font-size:11px;
      letter-spacing:0.24em;
    }
  }
  @media (max-width:900px) and (orientation:portrait){
    canvas,
    #hud,
    #overlay,
    .touch-ui{
      display:none !important;
    }
    body{
      overflow:hidden;
      background:linear-gradient(180deg, rgba(5,10,18,.95) 0%, rgba(5,9,14,.96) 100%);
    }
    html{
      height:100%;
    }
    #orientationNotice{
      display:flex;
    }
  }
  #boostBar{
    position:relative;
    width:100%;
    height:10px;
    border-radius:5px;
    background:linear-gradient(180deg, rgba(22,30,40,0.92) 0%, rgba(10,16,24,0.95) 100%);
    border:1px solid rgba(203,216,228,0.16);
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  }
  #boostBar::before{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 12px);
    opacity:0.35;
    pointer-events:none;
    z-index:2;
  }
  #boostBar::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,0.38) 100%);
    mix-blend-mode:overlay;
    pointer-events:none;
    z-index:3;
  }
  #boostFill{
    position:absolute;
    inset:0;
    width:0%;
    background:linear-gradient(90deg,#3ae2ff 0%, #6ff0d0 48%, #dffe7c 92%);
    box-shadow:0 0 12px rgba(111,240,208,0.35);
    z-index:1;
    transition:width 0.12s ease-out;
  }
  #boostFill::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 55%, rgba(0,0,0,0.28) 100%);
    mix-blend-mode:screen;
    opacity:0.55;
    pointer-events:none;
    z-index:1;
  }
  .throttle-scale{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:4;
  }
  .throttle-scale .tick{
    position:absolute;
    bottom:-4px;
    width:1px;
    height:16px;
    background:linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 55%, rgba(0,0,0,0.2) 100%);
    opacity:0.55;
  }
  .throttle-scale .tick-pos-0{ left:0%; }
  .throttle-scale .tick-pos-20{ left:20%; }
  .throttle-scale .tick-pos-35{ left:35%; }
  .throttle-scale .tick-pos-60{ left:60%; }
  .throttle-scale .tick-pos-80{ left:80%; }
  .throttle-scale .tick-pos-100{ left:100%; }
  .throttle-scale .tick::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:-2px;
    width:5px;
    height:2px;
    border-radius:4px;
    background:rgba(255,255,255,0.22);
  }
  .throttle-scale .tick.tick-minor{
    height:10px;
    opacity:0.35;
  }
  .throttle-scale .tick.tick-minor::after{
    bottom:-1px;
    width:3px;
    left:-1px;
    height:1px;
  }
  .throttle-scale .tick.tick-cruise{
    height:12px;
    opacity:0.8;
  }
  .throttle-markers{
    display:flex;
    justify-content:space-between;
    font-size:9px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(198,214,229,0.75);
  }
  body.touch-device #hud {
    top:7px; left:7px; right:7px;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  body.touch-device .hud-card{
    padding:4px 6px;
    gap:6px;
    border-radius:6px;
    min-height:20px;
  }
  body.touch-device #roundBadge,
  body.touch-device #scoreBadge{
    padding:6px 12px 8px;
    letter-spacing:0.16em;
    border-radius:8px;
  }
  body.touch-device #roundBadge .chalk-text,
  body.touch-device #scoreBadge .chalk-text{
    font-size:9px;
    gap:8px;
  }
  body.touch-device #roundBadge .round-number,
  body.touch-device #scoreBadge .score-number{
    font-size:1.22em;
  }
  body.touch-device #scoreBadge .score-number{
    min-width:52px;
  }
  body.touch-device #hpBlock{ min-width:100px; gap:2px; }
  body.touch-device #hpLabel{ font-size:9px; letter-spacing:0.08em; }
  body.touch-device #hpBar{
    height:5px;
    border-radius:3px;
  }
  body.touch-device #boostBar{
    height:8px;
  }
  body.touch-device .throttle-card{
    padding:5px 8px 7px;
    min-width:0;
    width:100%;
  }
  body.touch-device .throttle-markers{ font-size:8px; }

  /* Overlay */
  .overlay {
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    z-index:20;
    background:
      radial-gradient(140% 160% at 50% 18%, rgba(68,78,86,0.55) 0%, rgba(24,30,38,0.82) 52%, rgba(7,10,13,0.94) 100%);
    backdrop-filter:blur(6px);
    overflow:hidden;
    transition:opacity .32s ease, transform .32s ease;
  }
  .overlay::before,
  .overlay::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .overlay::before{
    background:
      linear-gradient(120deg, rgba(196,91,50,0.08) 0%, rgba(45,54,58,0.18) 32%, rgba(12,18,24,0.45) 100%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, rgba(0,0,0,0) 1px 3px);
    opacity:0.9;
    mix-blend-mode:screen;
    animation:overlayNoise 11s linear infinite;
  }
  .overlay::after{
    background:radial-gradient(80% 100% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  }
  .overlay.hidden {
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
  }

  /* --- Title image mode --- */
  .overlay.menu { background:#000; backdrop-filter:none; }
  .overlay.menu::before{
    background:none;
    animation:none;
  }
  .overlay.menu::after{ background:none; }
  #titleWrap {
    display:none;
    position:relative;
    width:100vw;
    height:calc(var(--app-vh) * 100);
    min-height:calc(var(--app-vh) * 100);
    overflow:hidden;
  }
  .overlay.menu #titleWrap { display:block; }
  #titleImg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
  }
  #titleCta{
    position:absolute;
    left:50%;
    bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 4vh, 60px));
    transform:translateX(-50%);
    padding:18px 56px;
    border:none;
    border-radius:999px;
    font-size:20px;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
    background:rgba(15,40,60,.9);
    color:#fef2d4;
    box-shadow:0 18px 35px rgba(0,0,0,.55);
    cursor:pointer;
    pointer-events:auto;
  }
  #titleCta:focus-visible{
    outline:3px solid rgba(255,255,255,.9);
    outline-offset:4px;
  }
  @media (max-height:700px){
    #titleCta{ bottom:20px; }
  }
  @supports (height: 100dvh) {
    html, body, canvas, #titleWrap {
      height:100dvh;
      min-height:100dvh;
    }
  }

  /* Panel (used for game over / non-title overlays) */
  .panel {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(10px, 1.6vh, 18px);
    padding:clamp(16px, 3vh, 28px);
    width:clamp(320px, 70vw, 640px);
    max-height:min(85vh, calc(var(--app-vh) * 100 - clamp(48px, 12vh, 140px)));
    overflow:hidden;
    border-radius:22px;
    background:
      linear-gradient(165deg, rgba(64,74,62,0.82) 0%, rgba(38,44,36,0.82) 34%, rgba(22,27,31,0.94) 90%),
      radial-gradient(120% 120% at 50% 0%, rgba(219,196,158,0.18) 0%, rgba(25,31,39,0.9) 60%);
    border:1px solid rgba(236,229,211,0.08);
    box-shadow:0 26px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
    text-align:center;
    color:var(--menu-bone);
    isolation:isolate;
  }
  .overlay.menu .panel { display:none; } /* hide panel when showing title image */

  .panel > *{
    width:100%;
    max-width:min(520px, 100%);
    margin-inline:auto;
  }
  .panel > h1{
    max-width:100%;
  }
  .panel::before,
  .panel::after{
    content:"";
    position:absolute;
    inset:clamp(8px, 1.2vw, 14px);
    border-radius:20px;
    pointer-events:none;
    mix-blend-mode:soft-light;
  }
  .panel::before{
    border:1px solid rgba(237,229,211,0.14);
    background:
      linear-gradient(135deg, rgba(215,178,114,0.12) 0%, rgba(0,0,0,0) 65%),
      repeating-linear-gradient(172deg, rgba(255,255,255,0.06) 0 2px, rgba(0,0,0,0) 2px 6px);
    opacity:0.7;
  }
  .panel::after{
    inset:auto;
    left:clamp(18px, 3vw, 32px);
    right:clamp(18px, 3vw, 32px);
    bottom:clamp(18px, 3vw, 32px);
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(196,91,50,0) 0%, rgba(196,91,50,0.38) 50%, rgba(196,91,50,0) 100%);
    opacity:0.6;
  }

  #overlay:not(.hidden) .panel{
    opacity:1;
    transform:translateY(0);
    animation:panelReveal .6s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .panel h1{
    margin:0;
    font-size:clamp(24px, 3.4vw, 34px);
    letter-spacing:0.24em;
    text-transform:uppercase;
    font-family:'Impact','Anton','League Spartan','Roboto Condensed','Arial Narrow',sans-serif;
    color:var(--menu-bone);
    text-shadow:0 12px 28px rgba(0,0,0,0.65), 0 0 18px rgba(211,178,114,0.32);
  }
  #ovSubtitle,
  #controlsRow,
  #ovFoot{
    align-self:center;
  }
  #menuButtons,
  #pauseButtons,
  #endButtons{
    margin-top:auto;
    padding-top:clamp(16px, 2vh, 24px);
    align-self:center;
  }
  #ovSubtitle,
  #controlsRow,
  #ovFoot{
    text-align:center;
  }
  .panel p{
    margin:0;
    line-height:1.5;
    letter-spacing:0.04em;
    color:rgba(236,229,211,0.88);
  }
  .kbd{
    background:rgba(46,56,61,0.55);
    padding:2px 6px;
    border-radius:5px;
    border:1px solid rgba(255,255,255,0.12);
    color:var(--menu-bone);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:clamp(10px, 2.2vh, 14px) clamp(18px, 3vw, 26px);
    border-radius:999px;
    border:1px solid rgba(0,0,0,0.55);
    background:linear-gradient(170deg, var(--menu-accent) 0%, #8b4126 85%);
    color:var(--menu-bone);
    text-decoration:none;
    font-weight:800;
    font-size:clamp(13px, 1.8vh, 15px);
    letter-spacing:0.18em;
    text-transform:uppercase;
    box-shadow:0 16px 28px rgba(0,0,0,0.45);
    pointer-events:auto;
    transition:transform .18s ease, box-shadow .18s ease, background .3s ease;
  }
  .btn:hover,
  .btn:focus-visible{
    transform:translateY(-1px);
    box-shadow:0 22px 36px rgba(0,0,0,0.5);
    background:linear-gradient(170deg, var(--menu-accent-soft) 0%, #a74a2c 90%);
  }
  .btn.outline{
    background:linear-gradient(170deg, rgba(42,52,58,0.85) 0%, rgba(26,32,38,0.95) 100%);
    border:1px solid rgba(236,229,211,0.16);
    color:var(--menu-bone);
    box-shadow:0 14px 24px rgba(0,0,0,0.35);
  }
  .btn.outline:hover,
  .btn.outline:focus-visible{
    background:linear-gradient(170deg, rgba(56,66,71,0.9) 0%, rgba(32,38,43,0.98) 100%);
  }
  #ovSubtitle{
    position:relative;
    padding:clamp(8px, 1.2vh, 12px) clamp(12px, 3vw, 24px);
    border-radius:16px;
    border:1px solid rgba(237,229,211,0.16);
    background:
      linear-gradient(140deg, rgba(66,74,60,0.85) 0%, rgba(35,41,31,0.88) 48%, rgba(16,20,26,0.92) 100%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, rgba(0,0,0,0) 1px 3px);
    box-shadow:0 18px 32px rgba(0,0,0,0.4);
    max-width:clamp(260px, 60vw, 460px);
    font-size:clamp(12px, 1.7vh, 15px);
    line-height:1.6;
    letter-spacing:0.05em;
    opacity:0;
    transform:translateY(14px);
    color:rgba(237,229,211,0.92);
  }
  #ovSubtitle::after{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:12px;
    border:1px solid rgba(237,229,211,0.08);
    opacity:0.35;
    pointer-events:none;
  }
  #overlay:not(.hidden) #ovSubtitle{
    opacity:1;
    transform:translateY(0);
    animation:subtitleReveal .68s ease forwards .22s;
  }
  #controlsRow{
    margin:clamp(6px, 1vh, 10px) 0 0;
    padding:clamp(8px, 1.2vh, 10px) clamp(10px, 2vw, 18px);
    border-radius:14px;
    background:rgba(15,20,24,0.65);
    border:1px solid rgba(237,229,211,0.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
    font-size:clamp(12px, 1.7vh, 14px);
  }
  #controlsRow strong{
    color:var(--menu-gold);
    letter-spacing:0.16em;
    text-transform:uppercase;
  }
  #ovFoot{
    margin-top:clamp(6px, 1.2vh, 12px);
    font-size:clamp(11px, 1.5vh, 13px);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(237,229,211,0.62);
  }
  @keyframes overlayNoise{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(-120px,0,0); }
  }
  @keyframes panelReveal{
    0%{ opacity:0; transform:translateY(24px) scale(0.96); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
  }

  @media (max-height:700px){
    .panel{
      max-height:calc(var(--app-vh) * 100 - clamp(32px, 10vh, 110px));
    }
  }
  @media (max-height:580px){
    .panel{
      overflow-y:auto;
    }
  }
  @keyframes subtitleReveal{
    0%{ opacity:0; transform:translateY(14px); }
    100%{ opacity:1; transform:translateY(0); }
  }
  @keyframes instructionRise{
    0%{ opacity:0; transform:translateY(18px) scale(0.97); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
  }
  .overlay-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:clamp(12px, 2vw, 20px);
    margin-top:clamp(10px, 1.8vh, 20px);
    width:min(520px, 100%);
    margin-inline:auto;
    pointer-events:auto;
  }
  .overlay-buttons .btn{
    min-width:clamp(120px, 26vw, 180px);
  }
  #menuButtons{ justify-content:center; }
  #pauseButtons,
  #endButtons{
    display:none;
    margin-top:auto;
  }

  /* Lightweight touch UI */
  .touch-ui{position:fixed;inset:0;pointer-events:none;touch-action:none}
  .touch-ui.overlay-active{pointer-events:auto}
  .touch-ui .touch-pad{position:absolute;left:0;top:0;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .12s ease}
  .touch-ui .touch-pad.visible{opacity:1;pointer-events:auto}
  .touch-ui .touch-pad.active{background:rgba(255,255,255,.1)}
  .touch-ui .touch-thumb{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);transform:translate(-50%,-50%)}
  .touch-ui .touch-fire{position:absolute;right:20px;bottom:36px;pointer-events:auto;padding:22px 30px;border-radius:15px;border:2px solid rgba(255,255,255,.18);background:rgba(220,60,60,.22);color:#fff;font-weight:900;font-size:16px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
  .touch-ui .touch-fire.active{background:rgba(220,60,60,.32)}
  .touch-tip{position:fixed;left:50%;bottom:20px;transform:translate(-50%,12px);padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);opacity:0;transition:opacity .25s ease, transform .25s ease;pointer-events:none}
  .touch-tip.show{opacity:1;transform:translate(-50%,0)}

  /* Instruction overlay */
  .instruction-grid{
    display:none;
    margin:0;
    width:100%;
    max-width:100%;
    text-align:left;
    gap:clamp(12px, 2vw, 18px);
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    align-content:start;
    align-items:stretch;
    grid-auto-rows:1fr;
    flex:1 1 auto;
  }
  #instructionBody{
    justify-content:center;
  }
  .instruction-grid.active{display:grid;}
  .instruction-card{
    position:relative;
    padding:clamp(14px, 2vh, 20px) clamp(18px, 3vw, 26px);
    border-radius:20px;
    border:1px solid rgba(80,46,16,0.45);
    background:
      radial-gradient(140% 140% at 50% -20%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
      repeating-linear-gradient(95deg, rgba(146,93,34,0.18) 0px, rgba(146,93,34,0.18) 8px, rgba(104,62,20,0.12) 8px, rgba(104,62,20,0.12) 16px),
      linear-gradient(158deg, #cfa76a 0%, #aa7334 45%, #7d4f22 100%);
    box-shadow:0 20px 32px rgba(13,10,6,0.48), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 0 rgba(0,0,0,0.46);
    color:#f8f3de;
    overflow:visible;
    transform:translateY(18px);
    opacity:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .instruction-card > *{
    position:relative;
    z-index:1;
  }
  .instruction-card::before{
    content:"";
    position:absolute;
    inset:clamp(12px, 2vh, 20px);
    border-radius:clamp(10px, 1.9vh, 16px);
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1.6px, transparent 1.6px, transparent 6px),
      radial-gradient(140% 200% at 88% 12%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 50%),
      radial-gradient(120% 220% at 12% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 60%),
      linear-gradient(176deg, #353d42 0%, #20272d 60%, #14191f 100%);
    box-shadow:inset 0 0 24px rgba(0,0,0,0.68), inset 0 0 0 1px rgba(255,255,255,0.04);
    z-index:0;
    pointer-events:none;
  }
  .instruction-card::after{
    content:"";
    position:absolute;
    left:clamp(22px, 3.6vw, 30px);
    right:clamp(22px, 3.6vw, 30px);
    bottom:clamp(14px, 2.4vh, 20px);
    height:clamp(6px, 1.4vh, 10px);
    background:linear-gradient(90deg, rgba(211,162,92,0.96) 0%, rgba(170,117,58,0.96) 54%, rgba(139,91,36,0.96) 100%);
    border-radius:4px;
    box-shadow:0 6px 12px rgba(0,0,0,0.48);
    transform:translateY(52%);
    z-index:0;
    pointer-events:none;
  }
  #overlay:not(.hidden) .instruction-card{
    opacity:1;
    transform:translateY(0);
    animation:instructionRise .52s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  }
  #overlay:not(.hidden) .instruction-card:nth-child(1){ animation-delay:0.18s; }
  #overlay:not(.hidden) .instruction-card:nth-child(2){ animation-delay:0.26s; }
  #overlay:not(.hidden) .instruction-card:nth-child(3){ animation-delay:0.34s; }
  #overlay:not(.hidden) .instruction-card:nth-child(4){ animation-delay:0.42s; }
  #overlay:not(.hidden) .instruction-card:nth-child(5){ animation-delay:0.5s; }
  #overlay:not(.hidden) .instruction-card:nth-child(6){ animation-delay:0.58s; }
  .instruction-tag{
    display:block;
    margin:0;
    padding-bottom:clamp(12px, 1.8vh, 16px);
    font-size:clamp(12px, 1.8vh, 15px);
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-family:'Bebas Neue','Oswald','Roboto Condensed','Arial Narrow',sans-serif;
    font-weight:700;
    text-align:center;
    color:rgba(248,241,212,0.92);
    background:none;
    border:none;
    position:relative;
    text-shadow:0 2px 6px rgba(0,0,0,0.45);
  }
  .instruction-tag::before{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, rgba(248,241,212,0) 0%, rgba(248,241,212,0.45) 50%, rgba(248,241,212,0) 100%);
    box-shadow:0 1px 0 rgba(0,0,0,0.55);
  }
  .instruction-card h3{
    margin:clamp(10px, 1.4vh, 16px) 0 clamp(8px, 1.2vh, 12px);
    font-size:clamp(15px, 2vh, 18px);
    letter-spacing:0.18em;
    text-transform:uppercase;
    text-align:center;
    color:rgba(249,245,225,0.94);
    font-family:'Bebas Neue','Oswald','Roboto Condensed','Arial Narrow',sans-serif;
    text-shadow:0 2px 8px rgba(0,0,0,0.6), 0 0 3px rgba(255,255,255,0.15);
  }
  .instruction-card ul{
    margin:0;
    padding:clamp(8px, 1.6vh, 12px) clamp(4px, 1.2vw, 12px) clamp(6px, 1.4vh, 10px);
    list-style:none;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:clamp(6px, 1.2vh, 10px);
  }
  .instruction-card li{
    position:relative;
    padding-left:clamp(14px, 2vw, 20px);
    font-size:clamp(12px, 1.7vh, 14px);
    line-height:1.5;
    letter-spacing:0.05em;
    color:rgba(248,241,212,0.9);
    text-shadow:0 1px 4px rgba(0,0,0,0.64);
  }
  .instruction-card li+li{
    padding-top:clamp(6px, 1vh, 8px);
    border-top:1px solid rgba(248,241,212,0.06);
  }
  .instruction-card li::before{
    content:"\2022";
    position:absolute;
    left:0;
    top:0.24em;
    font-size:0.9em;
    color:rgba(248,241,212,0.68);
    text-shadow:0 1px 2px rgba(0,0,0,0.55);
  }
  @media (prefers-reduced-motion: reduce){
    .overlay{
      transition:none;
    }
    .overlay::before{
      animation:none;
    }
    #overlay:not(.hidden) .panel,
    #overlay:not(.hidden) .instruction-card,
    #overlay:not(.hidden) #ovSubtitle{
      animation:none;
    }
    .instruction-card,
    #ovSubtitle{
      opacity:1;
      transform:none;
    }
  }
  @media (max-width:720px){
    .instruction-grid{
      grid-template-columns:1fr;
    }
  }
  .leaderboard{
    margin:0;
    max-width:100%;
    text-align:center;
    display:none;
    flex-direction:column;
    gap:clamp(10px, 1.6vh, 16px);
    align-items:center;
  }
  .leaderboard.visible{ display:flex; }
  #instructionBody,
  .leaderboard{
    align-self:center;
    justify-self:center;
    width:100%;
    max-width:min(520px, 100%);
  }
  .leaderboard-header{
    margin:0 0 clamp(4px, 1vh, 8px);
    font-size:clamp(14px, 2vh, 16px);
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--menu-gold);
  }
  .leaderboard-status{
    margin:0 0 clamp(8px, 1.4vh, 12px);
    font-size:clamp(12px, 1.8vh, 14px);
    letter-spacing:0.06em;
    color:rgba(237,229,211,0.76);
  }
  .leaderboard-list{
    margin:0;
    padding:0;
    width:100%;
    list-style:none;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(237,229,211,0.16);
    box-shadow:0 16px 34px rgba(0,0,0,0.45);
    background:
      linear-gradient(160deg, rgba(52,60,56,0.92) 0%, rgba(38,45,51,0.96) 100%),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, rgba(0,0,0,0) 2px 6px);
    text-align:left;
  }
  .leaderboard-list li{
    display:grid;
    grid-template-columns:64px 1fr 72px;
    align-items:center;
    gap:6px;
    padding:clamp(8px, 1.4vh, 12px) clamp(14px, 2.6vw, 20px);
    font-size:clamp(11px, 1.6vh, 13px);
    letter-spacing:0.06em;
    color:var(--menu-bone);
    background:rgba(0,0,0,0.18);
  }
  .leaderboard-list li:nth-child(even){
    background:rgba(255,255,255,0.02);
  }
  .leaderboard-list li .rank{
    font-weight:800;
    color:var(--menu-accent-soft);
    font-family:'Bebas Neue','Oswald','Roboto Condensed','Arial Narrow',sans-serif;
    letter-spacing:0.12em;
  }
  .leaderboard-list li .name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .leaderboard-list li .score{
    justify-self:end;
    font-variant-numeric:tabular-nums;
    color:var(--menu-gold);
  }
  .leaderboard-list li.self{
    background:linear-gradient(90deg, rgba(211,178,114,0.32) 0%, rgba(211,178,114,0.12) 100%);
    color:var(--menu-ink);
  }
  .leaderboard-list li.self .rank{
    color:#8b4126;
  }
  .leaderboard-gap{
    padding:clamp(8px, 1.4vh, 12px) clamp(14px, 2.6vw, 20px);
    font-size:clamp(11px, 1.6vh, 13px);
    text-align:center;
    color:rgba(237,229,211,0.7);
    background:rgba(0,0,0,0.24);
  }
  .leaderboard-form{
    display:none;
    width:100%;
    margin-top:clamp(10px, 1.6vh, 16px);
    padding:clamp(12px, 2vh, 18px);
    border-radius:20px;
    border:1px solid rgba(237,229,211,0.16);
    background:linear-gradient(180deg, rgba(34,39,33,0.92) 0%, rgba(20,24,28,0.94) 100%);
    box-shadow:0 16px 34px rgba(0,0,0,0.4);
    flex-direction:column;
    gap:clamp(10px, 1.8vh, 16px);
  }
  .leaderboard.allow-name .leaderboard-form{
    display:flex;
  }
  .leaderboard-field label{
    display:block;
    font-size:10px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:rgba(237,229,211,0.72);
    margin-bottom:6px;
  }
  .leaderboard-field input{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(237,229,211,0.18);
    background:rgba(10,14,16,0.68);
    color:var(--menu-bone);
    font-size:14px;
    letter-spacing:0.06em;
    outline:none;
    transition:box-shadow .18s ease, border-color .18s ease;
  }
  .leaderboard-field input:focus{
    border-color:rgba(196,91,50,0.45);
    box-shadow:0 0 0 3px rgba(196,91,50,0.25);
  }
  .leaderboard-opt{
    display:flex;
    align-items:flex-start;
    gap:6px;
    font-size:11px;
    letter-spacing:0.04em;
    color:rgba(237,229,211,0.7);
  }
  .leaderboard-opt input{
    margin-top:2px;
    accent-color:var(--menu-accent);
  }
  .leaderboard-button{
    align-self:flex-start;
    padding:8px 20px;
    border-radius:999px;
    border:none;
    font-weight:800;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--menu-ink);
    background:linear-gradient(160deg, rgba(211,178,114,0.98) 0%, rgba(181,144,76,0.98) 92%);
    box-shadow:0 14px 28px rgba(0,0,0,0.4);
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .leaderboard-button:hover,
  .leaderboard-button:focus-visible{
    transform:translateY(-1px);
    box-shadow:0 18px 34px rgba(0,0,0,0.45);
  }
  .leaderboard-button:disabled{
    cursor:default;
    opacity:0.6;
    box-shadow:none;
  }
  .leaderboard-note{
    margin:0;
    font-size:10px;
    letter-spacing:0.04em;
    color:rgba(237,229,211,0.6);
  }
  @media (max-width:600px){
    #hud{
      top:8px;
      left:8px;
      right:8px;
      gap:6px;
      flex-wrap:wrap;
    }
    body.touch-device #roundGroup{
      order:1;
      width:100%;
      justify-content:space-between;
      gap:4px;
    }
    body.touch-device #roundBadge,
    body.touch-device #scoreBadge{
      padding:4px 10px 6px;
      border-radius:7px;
    }
    body.touch-device #roundBadge .chalk-text,
    body.touch-device #scoreBadge .chalk-text{
      font-size:8px;
      gap:6px;
      letter-spacing:0.14em;
    }
    body.touch-device #roundBadge .round-number,
    body.touch-device #scoreBadge .score-number{
      font-size:1.08em;
    }
    body.touch-device #scoreBadge .score-number{
      min-width:46px;
    }
    #throttleCard{ order:2; }
    body.touch-device #hudStatus{
      order:3;
      width:100%;
    }
    body.touch-device #hpBlock{
      min-width:90px;
      gap:2px;
    }
    body.touch-device #hpLabel{
      font-size:8px;
      letter-spacing:0.07em;
    }
    body.touch-device #hpBar{
      height:4px;
    }
    body.touch-device #hpFill{
      min-height:4px;
    }
    .overlay{
      padding:clamp(12px, 5vw, 32px);
      place-items:center;
      align-content:center;
      overflow:auto;
    }
    .overlay .panel{
      width:clamp(260px, 80vw, 520px);
      max-width:calc(100vw - clamp(32px, 6vw, 64px));
      max-height:calc(var(--app-vh) * 100 - 32px);
      padding:18px clamp(16px, 6vw, 22px);
      border-radius:18px;
      gap:clamp(12px, 3vh, 18px);
      justify-self:center;
      align-self:center;
    }
    .overlay .panel h1{
      font-size:clamp(22px, 7vw, 28px);
      letter-spacing:0.18em;
      text-align:center;
    }
    #ovSubtitle{
      font-size:clamp(12px, 3.6vw, 15px);
      padding:clamp(12px, 4vw, 18px) clamp(14px, 5vw, 22px);
      text-align:center;
    }
    #controlsRow{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
      font-size:clamp(11px, 3.4vw, 13px);
    }
    #controlsRow .kbd{
      display:inline-flex;
      margin-top:2px;
    }
    .instruction-grid{
      grid-template-columns:1fr;
      gap:clamp(10px, 4vw, 18px);
    }
    .instruction-card{
      padding:clamp(18px, 7vw, 26px) clamp(22px, 9vw, 32px);
    }
    .instruction-card::before{
      inset:clamp(12px, 5vw, 22px);
      border-radius:clamp(10px, 4vw, 18px);
    }
    .instruction-card::after{
      left:clamp(22px, 8vw, 32px);
      right:clamp(22px, 8vw, 32px);
      bottom:clamp(14px, 5vw, 22px);
      height:clamp(7px, 2.6vw, 12px);
    }
    .leaderboard,
    #instructionBody,
    .instruction-grid{
      width:100%;
      max-width:520px;
      margin:clamp(14px, 5vw, 22px) auto 0;
    }
    .leaderboard-list{
      width:100%;
    }
    .leaderboard-list li{
      grid-template-columns:48px 1fr 62px;
      padding:clamp(10px, 4vw, 16px);
    }
    .leaderboard-form{
      width:100%;
      padding:clamp(12px, 5vw, 20px);
      gap:clamp(8px, 3vw, 14px);
    }
    .overlay-buttons{
      width:auto;
      max-width:520px;
      margin-left:auto;
      margin-right:auto;
      gap:clamp(10px, 4vw, 18px);
    }
    .overlay-buttons .btn{
      flex:0 0 auto;
      min-width:140px;
      padding:12px clamp(20px, 8vw, 32px);
    }
  }
  @media (max-width:920px) and (orientation:landscape){
    .overlay .panel{
      max-width:min(96vw,760px);
      max-height:calc(100vh - 24px);
      padding:clamp(18px, 4vw, 34px);
      gap:clamp(12px, 2vh, 20px);
    }
    .overlay .panel h1{
      font-size:clamp(22px, 3.6vw, 30px);
    }
    #ovSubtitle{
      padding:clamp(10px, 2vh, 14px) clamp(14px, 3vw, 22px);
    }
    #controlsRow{
      font-size:clamp(11px, 1.6vh, 13px);
      padding:clamp(7px, 1.4vh, 10px) clamp(10px, 2.2vw, 16px);
    }
    #ovFoot{
      font-size:clamp(10px, 1.4vh, 12px);
    }
    .instruction-grid{
      max-width:none;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:clamp(10px, 1.8vw, 18px);
    }
    .instruction-card{
      padding:clamp(18px, 2.4vh, 24px) clamp(22px, 3.2vw, 30px);
    }
    .instruction-card::before{
      inset:clamp(14px, 2vh, 20px);
      border-radius:clamp(10px, 1.8vh, 16px);
    }
    .instruction-card::after{
      left:clamp(22px, 3vw, 28px);
      right:clamp(22px, 3vw, 28px);
      bottom:clamp(14px, 2vh, 20px);
      height:clamp(7px, 1.4vh, 11px);
    }
    .instruction-card h3{
      font-size:clamp(17px, 2.2vh, 20px);
    }
    .instruction-card ul{
      padding:clamp(10px, 1.6vh, 14px) clamp(6px, 1.6vw, 12px) clamp(8px, 1.6vh, 12px);
      font-size:clamp(13px, 1.8vh, 15px);
    }
    .instruction-card li+li{
      margin-top:clamp(8px, 1.4vh, 12px);
      padding-top:clamp(8px, 1.4vh, 10px);
    }
    .leaderboard{
      max-width:100%;
      margin:clamp(16px, 2vh, 20px) auto 0;
    }
    .leaderboard-list li{
      grid-template-columns:56px 1fr 64px;
      padding:clamp(9px, 1.6vh, 12px) clamp(14px, 2.4vw, 20px);
    }
    .leaderboard-form{
      padding:clamp(14px, 2.2vh, 18px);
      gap:clamp(8px, 1.4vh, 12px);
    }
    .leaderboard-button{
      padding:9px 18px;
    }
    .instruction-tag{
      font-size:clamp(12px, 1.8vh, 14px);
      letter-spacing:0.28em;
      padding-bottom:clamp(10px, 1.6vh, 12px);
    }
    .instruction-tag::before{
      left:12%;
      right:12%;
    }
    .overlay-buttons{
      margin-top:clamp(12px, 2vh, 18px);
      gap:clamp(10px, 1.6vw, 16px);
    }
    .overlay-buttons .btn{
      min-width:clamp(110px, 22vw, 150px);
    }
  }