/* Final responsive play overrides. Load after style.css, menu.css and neon.css. */
#hud {
  top: 56px; left: 8px; right: 8px;
  display: flex; align-items: center; gap: 6px;
  pointer-events: none;
}
#hud .hud-cell:not(.sr-only) {
  flex: 0 1 auto; min-width: 0; max-width: calc((100% - 62px) / 2);
  padding: 3px 8px; border-radius: 8px;
}
#hud .hud-label { font-size: 8px; line-height: 1.15; letter-spacing: .7px; }
#hud .hud-cell strong {
  display: block; font-size: 15px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.control-pause {
  position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%);
  width: 52px; height: 44px; min-width: 52px; min-height: 44px;
  margin: 0; padding: 0 4px; font-size: 11px;
  pointer-events: auto; touch-action: manipulation;
}
#equationBar {
  top: 8px; left: 50%; width: max-content;
  max-width: calc(100% - 136px); min-height: 38px;
  margin: 0; padding: 5px 7px;
  display: flex; justify-content: center; align-items: center;
  text-align: center; pointer-events: none;
}
#equationBar #liveEquation {
  font-size: clamp(20px, 5.6vw, 28px); line-height: 1.15;
  letter-spacing: 0; white-space: nowrap;
}
#hud #bonusBadge {
  margin-left: auto; min-width: 44px; flex-shrink: 0;
  padding: 3px 5px; border-radius: 7px; pointer-events: none;
}
#hud #bonusBadge:not(.active) { display: none; }
#hud #bonusBadge b { font-size: 17px; line-height: 1; }
#hud #bonusBadge span { font-size: 7px; line-height: 1.15; margin-top: 2px; white-space: nowrap; }
/* Keep the data accessible without creating a visible extra row. */
#topicLabel.sr-only, #masteryStatus.sr-only, #hud .shield-status.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 0 !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
#checkpoint { pointer-events: none; }
#statusToast { top: 94px; bottom: auto; max-width: calc(100% - 24px); pointer-events: none; }

@media (max-width: 900px), (max-height: 600px) {
  /* Apply insets once, around the entire canvas/control layout. */
  .shell {
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  body:is([data-phase="running"], [data-phase="paused"], [data-phase="help"], [data-phase="wipeout"], [data-phase="ended"]) {
    overflow: hidden; overscroll-behavior: none;
  }
  body:is([data-phase="running"], [data-phase="paused"], [data-phase="help"], [data-phase="wipeout"], [data-phase="ended"]) .shell {
    display: flex; flex-direction: column;
    width: 100%; max-width: none; height: 100vh; height: 100dvh; margin: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: hidden;
  }
  body:is([data-phase="running"], [data-phase="paused"], [data-phase="help"], [data-phase="wipeout"], [data-phase="ended"]) .topbar,
  body:is([data-phase="running"], [data-phase="paused"], [data-phase="help"], [data-phase="wipeout"], [data-phase="ended"]) .bottom-bar {
    display: none;
  }
  body:is([data-phase="running"], [data-phase="paused"], [data-phase="help"], [data-phase="wipeout"], [data-phase="ended"]) main {
    display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0;
  }
  body:is([data-phase="running"], [data-phase="paused"], [data-phase="help"], [data-phase="wipeout"], [data-phase="ended"]) .game {
    flex: 1 1 0; height: 0; min-height: 0; max-height: none; width: 100%;
    border: 0; border-radius: 0; box-shadow: none;
  }
  body:is([data-phase="running"], [data-phase="paused"], [data-phase="help"], [data-phase="wipeout"], [data-phase="ended"]) #world {
    width: 100%; height: 100%; touch-action: none;
  }
  dialog {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    max-width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px);
  }
}
@media (max-height: 500px) {
  #hud { top: 52px; }
  #hud .hud-cell:not(.sr-only) { padding: 2px 6px; }
  #hud .hud-label { font-size: 7px; line-height: 1; }
  #hud .hud-cell strong { font-size: 14px; line-height: 1; }
  #equationBar { top: 6px; min-height: 38px; }
  #hud #bonusBadge { padding: 2px 4px; }
  #hud #bonusBadge b { font-size: 14px; line-height: 1; }
  #hud #bonusBadge span { font-size: 6px; line-height: 1; margin-top: 1px; }
}
.pause-settings{display:flex;flex-wrap:wrap;gap:10px 16px;margin:12px 0;font-size:13px}.pause-settings label{min-height:44px;display:flex;align-items:center;gap:6px}
/* Extra-short landscape with browser chrome: keep the information strip above compact drones. */
@media (max-height:340px){#hud{top:48px}#hud .hud-label{display:none}#hud .hud-cell strong{font-size:13px;line-height:16px}#hud .hud-cell:not(.sr-only){padding:2px 6px}#hud #bonusBadge{min-width:30px;padding:2px 4px}#hud #bonusBadge b{font-size:13px;line-height:16px}#hud #bonusBadge span{display:none}#statusToast{top:72px}}

/* Short landscape: distance belongs in the unused top-left corner, never over the runner. */
@media (orientation: landscape) and (max-height: 500px) {
  #checkpoint {
    top: 8px; bottom: auto; left: 8px; right: auto; transform: none;
    width: max-content; max-width: 128px; min-height: 28px;
    padding: 4px 8px; border-radius: 8px; box-shadow: none;
  }
  #checkpoint #distance {
    font-size: 13px; line-height: 18px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
  }
  #checkpoint #paceLabel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap;
  }
}

.wipeout-cue{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 64px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid #68dce4;border-radius:12px;background:#10273ded;color:#e9fcff;font-size:14px}.wipeout-cue[hidden]{display:none}.wipeout-cue button{min-height:44px;padding:8px 14px}.wipeout-cue button:disabled{opacity:.45}body[data-phase="wipeout"] #pauseButton{visibility:hidden}

/* Keep loss presentation and results within the same safe viewport as the run. */
body[data-phase="ended"] .results-card { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
body[data-phase="ended"] .results-content { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; }
body[data-phase="ended"] .results-content > p { margin:9px 0 15px; color:var(--muted); font-size:14px; }
body[data-phase="ended"] .end-actions { flex:0 0 auto; }
body[data-phase="ended"] .end-actions button { min-height:44px; }
@media (max-width:900px), (max-height:600px) {
  body[data-phase="ended"] .end-screen { padding:12px 12px max(12px,env(safe-area-inset-bottom,0px)); overflow:hidden; }
  body[data-phase="ended"] .results-card { max-height:100%; width:min(620px,100%); }
}
@media (max-height:500px) {
  body[data-phase="ended"] .results-card { padding:10px 14px; border-radius:14px; }
  body[data-phase="ended"] .results-content > .eyebrow { font-size:9px; line-height:12px; }
  body[data-phase="ended"] .results-content h2 { margin:3px 0; font-size:24px; line-height:28px; }
  body[data-phase="ended"] .results-content > p { margin:4px 0; font-size:12px; line-height:16px; }
  body[data-phase="ended"] .result-stats { margin:8px 0; gap:6px; }
  body[data-phase="ended"] .result-stats div { padding:6px 4px; }
  body[data-phase="ended"] .result-stats strong { font-size:20px; line-height:24px; }
  body[data-phase="ended"] .result-stats span { margin-top:1px; font-size:10px; }
  body[data-phase="ended"] .practice-summary { padding:6px; }
  body[data-phase="ended"] .end-actions { flex-direction:row; margin-top:8px; gap:8px; }
  body[data-phase="ended"] .end-actions button { padding:8px 14px; font-size:13px; }
}
/* Explicit, keyboard-accessible run exit confirmation. */
#mainMenuButton,#menuConfirmDialog button{min-height:44px}
/* Narrow screens: reserve the host toolbar's top-corner band, without
   styling host UI. Insets are already applied by the active .shell. */
@media (max-width:500px) {
  #equationBar { top:max(8px,calc(68px - env(safe-area-inset-top,0px))); max-width:clamp(144px,40vw,180px); }
  #hud { top:max(8px,calc(68px - env(safe-area-inset-top,0px))); display:grid; grid-template-columns:minmax(0,1fr) clamp(144px,40vw,180px) minmax(0,1fr); gap:6px; align-items:start; }
  #hud .hud-cell:not(.sr-only) { max-width:100%; width:100%; padding:3px 5px; }
  #hud .hud-cell:first-child { grid-column:1; grid-row:1; }
  #hud .hud-cell.coins { grid-column:3; grid-row:1; }
  #hud #bonusBadge { grid-column:3; grid-row:2; margin-left:auto; }
  #statusToast { top:max(112px,calc(148px - env(safe-area-inset-top,0px))); }
}

/* Controls overlay the track instead of taking a full-width strip from it.
   All interactive targets stay above the movable host toolbar's corner band. */
#runControls {
  position: absolute; inset: 0; z-index: 14;
  display: block; margin: 0; padding: 0; min-height: 0;
  background: transparent; pointer-events: none;
}
#runControls .steer-group { display: none; }
body[data-controls="buttons"] #runControls .steer-group {
  position: absolute; bottom: 68px; left: 8px;
  display: flex; gap: 6px; pointer-events: auto;
}
body[data-controls="buttons"] #runControls .steer-group:last-child { left: auto; right: 8px; }
#runControls .steer-group button {
  width: clamp(44px, 12vw, 60px); height: 44px; min-height: 44px;
  border-radius: 10px; box-shadow: none; touch-action: manipulation;
}
#runControls .steer-group button b { font-size: 22px; line-height: 1; }
#runControls .steer-group button span { font-size: 9px; line-height: 1.2; }
#runControls .control-pause { background: #f7faffee; border: 1px solid #c7d7e7; box-shadow: 0 2px 10px #13254433; }
#runControls .control-pause:active { transform: translateX(-50%); }
.controls-setting { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; cursor: pointer; }
.controls-setting input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: #5b49c9; }
.pause-settings .controls-setting { flex-basis: 100%; }
/* Keep twelve equal toggles and the current choice together. */
.start-card .table-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.start-card .table-options button, .start-card .table-options button:last-child {
  grid-column: auto; min-height: 44px; font-size: 15px;
}
.table-hint { margin: 0 0 8px; color: #536580; font-size: 12px; line-height: 1.35; }
.table-summary { margin: 10px 0 0; color: #174863; font-size: 12px; font-weight: 800; line-height: 1.4; }
.start-card .runner-picker select, .run-options > summary { min-height: 44px; }
@media (max-width: 359px) {
  .start-card .table-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Wide framing puts the runner near the lower edge. Keep Pause in the open
   central HUD gap, above answer drones, rather than over the runner.
   Feedback sits 8px below Pause. Answer feedback follows gate resolution;
   a new gate clears the startup/previous feedback before its drones appear. */
@media (min-width: 501px) and (orientation: landscape) {
  #runControls .control-pause { top: 56px; bottom: auto; }
  #statusToast { top: 108px; }
}
@media (min-width: 501px) and (max-height: 340px) {
  #equationBar { top: 2px; }
  #equationBar #liveEquation { font-size: 23px; }
  #runControls .control-pause { top: 42px; bottom: auto; }
  #statusToast { top: 94px; }
}
/* Portrait distance/mode stays in the existing central HUD column, between
   the equation and answer cards, clear of every host-toolbar corner. */
@media (max-width: 500px) and (orientation: portrait) {
  #checkpoint {
    top: max(8px, calc(112px - env(safe-area-inset-top, 0px))); bottom: auto;
    width: clamp(144px, 40vw, 180px); min-height: 24px;
    padding: 3px 6px; gap: 6px; border-radius: 7px; box-shadow: none;
  }
  #checkpoint #distance {
    min-width: 0; font-size: 12px; line-height: 16px; letter-spacing: .3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
  }
  #checkpoint #paceLabel {
    flex: 0 0 auto; font-size: 8px; line-height: 12px; letter-spacing: .35px;
    white-space: nowrap;
  }
}

/* Table rewards are menu/results-only; active-play layout is unchanged. */
.table-reward-summary{font-size:12px;line-height:1.45;color:#42516c;margin:6px 0 0}
.start-card .table-options button.table-complete{position:relative;box-shadow:inset 0 0 0 2px #b27a20}
.start-card .table-options button.table-complete::after{content:"";position:absolute;right:3px;top:3px;width:9px;height:9px;background:#c58a26;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%)}
.starting-pace-label{display:grid;gap:6px;font-size:13px;font-weight:700;margin:10px 0 0;color:#253557}
.starting-pace-label select{width:100%;min-height:44px;font:inherit;padding:8px;border:1px solid #bdcbe0;border-radius:8px;background:#fff;color:#17264e}
#startingPaceHelp{margin:6px 0 12px}
.earned-summary{padding:9px 12px;border:1px solid #c6b978;border-radius:9px;background:#fff8d9;color:#493c0b;font-size:13px;line-height:1.4}

/* Keep the footer's Announcer controls reachable regardless of line wrapping. */
.voice-panel {
  position:fixed; left:50%; right:auto; bottom:max(48px,env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); width:min(290px,calc(100vw - 24px));
  max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px);
  overflow:auto; overscroll-behavior:contain;
}
.starting-pace-label select:focus-visible { outline:4px solid #fd8a27; outline-offset:3px; }
/* Desktop results use the same contained viewport as compact results. */
body[data-phase="ended"] { overflow:hidden; overscroll-behavior:none; }
body[data-phase="ended"] .shell {
  display:flex; flex-direction:column; width:100%; max-width:none;
  height:100vh; height:100dvh; margin:0; overflow:hidden;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
body[data-phase="ended"] .topbar, body[data-phase="ended"] .bottom-bar { display:none; }
body[data-phase="ended"] main { display:flex; flex:1; flex-direction:column; min-height:0; min-width:0; }
body[data-phase="ended"] .game { flex:1 1 0; height:0; min-height:0; max-height:none; width:100%; border:0; border-radius:0; box-shadow:none; }
body[data-phase="ended"] #world { width:100%; height:100%; }
body[data-phase="ended"] .end-screen { overflow:hidden; }
.voice-panel #closeVoiceOptions { position:sticky; top:0; z-index:1; min-height:44px; background:#dcebf7; color:#203b61; border-radius:7px; }
.voice-panel label:first-of-type { display:flex; align-items:center; min-height:44px; gap:7px; }

/* Practice choices are the existing drone number plates, not a movement strip. */
.practice-answer-targets {position:absolute;inset:0;z-index:13;pointer-events:none;}
.practice-answer-targets button {position:absolute;min-width:44px;min-height:44px;padding:0;background:transparent;border:2px solid transparent;border-radius:9px;pointer-events:auto;touch-action:manipulation;color:transparent;}
.practice-answer-targets button[data-selected="true"] {border-color:#a4d3ff;}
.practice-answer-targets button[data-guided="true"] {border:3px solid #93ffcf;box-shadow:0 0 0 3px #123f37,0 0 18px #8dffd866;}
.practice-answer-targets button[data-guided="true"]::after {content:"Choose";position:absolute;right:3px;top:-15px;padding:1px 5px;border-radius:4px;background:#b9ffe2;color:#123f37;font-size:10px;line-height:12px;}
.practice-answer-targets button:focus-visible {outline:4px solid #ffc471;outline-offset:4px;}
.practice-hint {position:absolute;z-index:13;left:50%;top:101px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);margin:0;padding:4px 8px;border-radius:6px;background:#132b45ed;color:#ebf9ff;font-size:11px;line-height:15px;text-align:center;pointer-events:none;}
body[data-mode="practice"] #statusToast {top:131px;font-size:12px;max-width:calc(100% - 24px);}
body[data-mode="practice"] .hud-cell.coins {visibility:hidden;}
.table-selection-tools {display:flex;gap:6px;margin:0 0 7px;}
.table-selection-tools button {min-height:36px;padding:6px 12px;border:1px solid #c4d3e2;border-radius:7px;background:#eef5ff;color:#263d5f;font-size:12px;}
.start-button:disabled {opacity:.5;box-shadow:none;}
@media(max-width:500px){.practice-hint{top:max(140px,calc(148px - env(safe-area-inset-top,0px)));font-size:10px;}body[data-mode="practice"] #statusToast{top:173px;}}
@media(min-width:501px) and (max-height:340px){.practice-hint{top:91px;font-size:10px;line-height:13px;padding:2px 6px;}body[data-mode="practice"] #statusToast{top:111px;}}

.practice-continue{position:absolute;z-index:15;left:calc(50% - 60px);top:190px;width:120px;min-height:44px;padding:8px 14px;border:2px solid #b6eadc;border-radius:10px;background:#ddfff0;color:#143e32;box-shadow:0 3px 12px #16384c44;touch-action:manipulation;}

/* v2: one correction region owns the hint and Continue, independent of drone Y.
   The complete equation remains in #equationBar. Suppress its duplicate toast
   while awaiting Continue, so there is only one instruction/action region. */
.practice-feedback { display:contents; }
.practice-feedback[data-correction="true"] {
  position:absolute; z-index:15; left:50%; top:108px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:min(360px,calc(100% - 24px)); margin:0; padding:8px;
  border:1px solid #8bb4cc; border-radius:10px; background:#132b45ed;
  pointer-events:none;
}
.practice-feedback[data-correction="true"] .practice-hint {
  position:static; transform:none; width:auto; max-width:100%; margin:0; padding:0;
  background:transparent; font-size:11px; line-height:15px;
}
.practice-feedback[data-correction="true"] .practice-continue {
  position:static; flex:none; width:120px; height:44px; min-height:44px; margin:0;
  pointer-events:auto;
}
.practice-feedback[data-correction="true"] ~ #statusToast { display:none; }
@media (max-width:500px) {
  .practice-feedback[data-correction="true"] { top:max(140px,calc(148px - env(safe-area-inset-top,0px))); }
}
@media (min-width:501px) {
  .practice-feedback[data-correction="true"] {
    /* Keep the entire correction region above the airborne runner and out
       of the equation/Pause column, including short landscape viewports. */
    left:auto; right:8px; top:8px; transform:none;
    display:flex; flex-direction:column; gap:6px; width:156px; padding:6px;
  }
}
@media (min-width:501px) and (max-height:340px) {
  .practice-feedback[data-correction="true"] { top:8px; }
}

/* Keep landscape Pause above traffic and outside the longest equation. */
@media (orientation: landscape) and (min-width: 501px) and (max-height: 600px) {
  #runControls .control-pause { left: calc(50% - 152px); top: 4px; bottom: auto; transform: none; }
  #runControls .control-pause:active { transform: none; }
  #checkpoint { max-width: min(128px, calc(50% - 168px)); }
}