/* Space Man · shared flight deck
   Orbital Arena is the visual reference. This layer owns chrome, not worlds:
   no canvas sizing, gameplay positioning, touch hit zones or safe-inset math.
   The lazy mode styles are intentionally overridden with scoped specificity. */
:root {
  --sm-font-display: var(--font);
  --sm-font-body: ui-rounded, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --sm-space: #060818;
  --sm-ink: #f4f7ff;
  --sm-copy: #afc8de;
  --sm-muted: #8faac3;
  --sm-cyan: #9ff1ff;
  --sm-gold: #ffc66b;
  --sm-lime: #c7f47d;
  --sm-focus: #ffe59a;
  --sm-panel: linear-gradient(145deg, rgba(19,37,60,.94), rgba(9,18,34,.96));
  --sm-surface: #132239;
  --sm-surface-hover: #1c304c;
  --sm-line: rgba(117,179,216,.22);
  --sm-line-strong: rgba(159,241,255,.32);
  --sm-radius-panel: 22px;
  --sm-radius-control: 12px;
  --sm-radius-small: 8px;
  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-5: 24px;
  --sm-target: 44px;
  --sm-shadow: 0 20px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(214,244,255,.04);
  /* Keep the existing shared layout/visual-viewport inset contract. */
  --sm-safe-top: var(--game-ui-top, env(safe-area-inset-top, 0px));
  --sm-safe-right: var(--game-ui-right, env(safe-area-inset-right, 0px));
  --sm-safe-bottom: var(--game-ui-bottom, env(safe-area-inset-bottom, 0px));
  --sm-safe-left: var(--game-ui-left, env(safe-area-inset-left, 0px));
}

/* Calm panels, warm actions and readable body copy across all three modes. */
.overlay .panel, .arena-root .arena-setup, .arena-root .arena-small-panel,
.race-root .race-setup, .race-root .race-compact {
  background: var(--sm-panel);
  border-color: var(--sm-line);
  border-radius: var(--sm-radius-panel);
  box-shadow: var(--sm-shadow);
}
.overlay .dock { background: rgba(10,20,36,.97); border-color: var(--sm-line); }
.overlay .title-lg { color: var(--sm-ink); letter-spacing: -.025em; text-transform: none; line-height: 1.25; }
.overlay .sub, .overlay .daily-blurb, .overlay .stats-line,
.overlay .toggle-row, .overlay .settings-list, .overlay .net-sub {
  font-family: var(--sm-font-body);
  letter-spacing: .01em;
}
.overlay .sub { color: var(--sm-copy); opacity: 1; line-height: 1.5; }
.overlay .toggle-row { text-transform: none; line-height: 1.4; padding-inline: 6px; }
.overlay .eyebrow, .overlay .section-head, .overlay .room-caption {
  color: var(--sm-muted); font-size: calc(10px * var(--ui-scale, 1)); letter-spacing: .14em; line-height: 1.5;
}
.overlay .btn {
  min-height: var(--sm-target);
  border: 1px solid #ffd998;
  border-radius: var(--sm-radius-control);
  background: var(--sm-gold);
  color: #1a1724;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: 0 3px 0 #8a6137;
  text-shadow: none;
}
.overlay .btn.ghost {
  background: var(--sm-surface);
  color: #dbefff;
  border-color: var(--sm-line-strong);
  box-shadow: none;
}
.overlay .btn.coral:not(.ghost) { background: var(--sm-gold); color: #1a1724; border-color: #ffd998; box-shadow: 0 3px 0 #8a6137; }
.overlay .btn.ghost.coral { background: rgba(255,79,102,.06); color: #ff9ca9; border-color: rgba(255,139,155,.35); }
.overlay .btn:disabled { box-shadow: none; }
.overlay .btn.pulse, .overlay .btn.pulse::after { animation: none; }
.overlay .btn.pulse::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .overlay .btn:hover:not(:disabled):not(:active), .overlay .btn.coral:hover:not(:disabled):not(:active) { background: #ffd793; filter: none; box-shadow: 0 3px 0 #8a6137; }
  .overlay .btn.ghost:hover:not(:disabled):not(:active) { background: var(--sm-surface-hover); border-color: #6f9eb9; box-shadow: none; }
}
.overlay :is(button, summary, input):focus-visible,
body.gamepad-active .overlay :is(button, summary, input):focus,
.arena-root :focus-visible, .race-root :focus-visible,
body.gamepad-active :is(.arena-root, .race-root) :is(button, summary, input):focus {
  outline: 3px solid var(--sm-focus) !important;
  outline-offset: -3px !important;
}
.overlay .pause-settings > summary { min-height: var(--sm-target); border-radius: var(--sm-radius-control); }
.overlay .slider-row input[type='range'] { min-height: var(--sm-target); }
.overlay .stat-grid .stat { background: rgba(4,12,27,.5); border-color: var(--sm-line); }
.overlay #deadScore { text-shadow: none; color: var(--sm-ink); }
.overlay .control-guide > div { background: rgba(4,12,27,.35); border-color: var(--sm-line); border-radius: var(--sm-radius-small); }

/* A compact launcher: three equally discoverable adventures, quiet utilities.
   Existing IDs, focus order and start/room handlers remain the entry points. */
#ovAttract .panel { max-width: 780px; --px: 22px; --py: 18px; }
#ovAttract .attract-main, #ovAttract .attract-side { min-width: 0; }
.launch-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.launch-heading h1 { margin: 0; color: var(--sm-muted); font: 800 calc(10px * var(--ui-scale, 1))/1.5 var(--sm-font-display); letter-spacing: .14em; text-align: left; }
#ovAttract #attractBest { margin: 0; color: var(--sm-gold); font: 700 calc(11px * var(--ui-scale, 1))/1.4 var(--sm-font-body); letter-spacing: .03em; white-space: nowrap; }
.launch-modes { display: grid; gap: 8px; }
#ovAttract .mode-link {
  --mode-accent: var(--sm-gold);
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 3px; text-align: left;
  min-height: 66px; margin: 0; padding: 11px 40px 11px 16px;
  background: rgba(9,20,37,.76); color: var(--sm-ink);
  border: 1px solid var(--sm-line-strong); border-left: 3px solid var(--mode-accent);
  font-size: 14px; box-shadow: none;
}
#ovAttract #btnArena { --mode-accent: var(--sm-cyan); }
#ovAttract #btnRace { --mode-accent: var(--sm-lime); }
#ovAttract .mode-link::after { content: attr(data-description); color: var(--sm-copy); font: 400 calc(11px * var(--ui-scale, 1))/1.45 var(--sm-font-body); letter-spacing: .01em; }
#ovAttract .mode-link::before { content: '›'; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); color: var(--mode-accent); font: 500 25px/1 var(--sm-font-body); }
#ovAttract .mode-link:hover:not(:disabled):not(:active) { background: #193049; border-color: var(--mode-accent); box-shadow: none; }
#ovAttract .mode-link:active { transform: translateY(1px); }
#ovAttract #btnDaily { margin: 12px 0 0; padding: 9px 12px; min-height: 50px; font-size: calc(11px * var(--ui-scale, 1)); background: rgba(9,20,37,.46); }
#ovAttract #btnDaily .daily-theme { font-family: var(--sm-font-body); letter-spacing: .04em; color: var(--sm-copy); }
#ovAttract #btnDaily .daily-info { font-size: calc(10px * var(--ui-scale, 1)); letter-spacing: .01em; color: var(--sm-gold); }
#ovAttract .daily-blurb { margin: 6px 0 0; max-width: none; color: var(--sm-muted); opacity: 1; text-align: left; font-size: calc(11px * var(--ui-scale, 1)); }
#ovAttract #attractMedals { margin: 0 0 10px !important; color: var(--sm-muted); }
#ovAttract .medal-empty { font: 500 calc(10px * var(--ui-scale, 1))/1.5 var(--sm-font-body); letter-spacing: .05em; opacity: 1; }
#ovAttract .control-guide { margin: 0 0 12px; }
#ovAttract #attractRow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#ovAttract #attractRow .btn { min-width: 0; margin: 0; padding: 10px 6px; font-size: calc(11px * var(--ui-scale, 1)); }
#ovAttract #attractStats { color: var(--sm-muted); opacity: 1; font-size: calc(10px * var(--ui-scale, 1)); line-height: 1.5; margin-top: 12px; }

/* Lazy mode chrome consumes the same tokens; art and selection accents stay
   mode-specific. Do not broaden these rules to the touch buttons or HUD. */
.arena-root .arena-setup, .race-root .race-setup { border-color: var(--sm-line); }
.arena-root .arena-dialog .arena-button, .race-root .race-dialog .race-button { border-radius: var(--sm-radius-control); }
.race-root .race-title { font-family: var(--sm-font-display); font-size: clamp(34px,3.75vw,52px); font-weight: 900; letter-spacing: -.045em; line-height: 1.12; }
.race-root .race-compact h2 { font-family: var(--sm-font-display); font-size: 27px; letter-spacing: -.025em; line-height: 1.25; }
.race-root .race-kicker, .race-root .race-label, .race-root .race-dialog .race-button:not(.race-segment), .race-root .race-track strong { font-family: var(--sm-font-display); font-weight: 700; }
.race-root .race-dialog .race-text { font: 600 12px/1.4 var(--sm-font-body); }
.race-root .race-kicker, .race-root .race-label { font-size: calc(10px * var(--ui-scale, 1)); letter-spacing: .14em; color: var(--sm-muted); }
.race-root .race-dialog .race-segment { font: 600 calc(11px * var(--ui-scale, 1))/1.2 var(--sm-font-body); }
.race-root .race-options { flex-wrap: wrap; }
/* Correct the existing root button font inheritance without moving a hit zone.
   The lazy 320px icon-only rule still wins at equal specificity. */
.race-root .race-recover { font-size: calc(9px * var(--ui-scale, 1)); }
.race-root .race-lede, .race-root .race-compact p { color: var(--sm-copy); }
.arena-root .arena-primary, .race-root .race-primary { background: var(--sm-gold); color: #1a1724; border-color: #ffd998; box-shadow: 0 4px 0 #8a6137, 0 10px 28px rgba(255,180,84,.13); }
.arena-root .arena-primary:hover, .race-root .race-primary:hover { background: #ffd793; border-color: #fff0c1; }
.arena-root .arena-dialog .arena-segment, .race-root .race-dialog .race-segment,
.arena-root .arena-dialog summary, .race-root .race-dialog summary { min-height: var(--sm-target); }
.race-root .race-dialog summary, .arena-root .arena-dialog summary { display: list-item; align-content: center; }
.arena-root .arena-small-panel .arena-button { min-height: var(--sm-target); }
.arena-root .arena-result-row, .race-root .race-result-row { border-radius: var(--sm-radius-small); }

@media (min-width: 700px) {
  #ovAttract .panel { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 24px; align-items: center; }
}
@media (max-width: 699px) {
  #ovAttract .panel { display: block; max-width: 440px; --px: 16px; --py: 16px; }
  #ovAttract .attract-side { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sm-line); }
  #ovAttract .control-guide { display: none !important; }
  #ovAttract #attractMedals { display: none; }
  #ovAttract .mode-link { min-height: 59px; padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
  #ovAttract .daily-blurb { display: none !important; }
  #ovAttract #attractStats { margin-top: 8px; }
  .race-root .race-title { font-size: 30px; }
  .race-root .race-track strong { font-size: calc(11px * var(--ui-scale, 1)); }
}
@media (max-width: 380px) {
  #ovAttract .panel { --px: 12px; --py: 12px; }
  .launch-heading h1 { font-size: calc(10px * var(--ui-scale, 1)); letter-spacing: .09em; }
  #ovAttract .mode-link { font-size: 12px; }
  #ovAttract #btnDaily { font-size: calc(10px * var(--ui-scale, 1)); }
  #ovAttract #attractRow .btn { font-size: calc(10px * var(--ui-scale, 1)); }
}
@media (orientation: landscape) and (max-height: 560px) {
  #ovAttract .panel { --py: 12px; max-width: 780px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 18px; }
  #ovAttract .attract-side { margin: 0; padding: 0; border: 0; }
  #ovAttract .mode-link { min-height: 52px; padding-top: 7px; padding-bottom: 7px; font-size: 12px; }
  #ovAttract .mode-link::after { font-size: calc(10px * var(--ui-scale, 1)); }
  #ovAttract .launch-heading { margin-bottom: 8px; }
  #ovAttract #btnDaily { margin-top: 8px; min-height: 44px; padding: 6px 10px; }
  #ovAttract .daily-blurb { display: none !important; }
  .race-root .race-title { font-size: 34px; }
}
/* The saved motion switch is authoritative; its default already reads the OS. */
body.reduce-motion #ovAttract .panel, body.reduce-motion #ovAttract .panel > *,
body.reduce-motion .overlay .btn { animation: none; transition: none; }

/* Star Circuit uses one flight deck instead of separate stacks of controls.
   Keep the simulation canvas and every in-race touch target unchanged. */
.race-root .race-lobby { max-width: 1040px; scrollbar-gutter: stable; scroll-padding-block: 12px; }
.race-root .race-lobby-header { margin-bottom: 14px; min-height: 44px; }
.race-root .race-grid {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas: 'intro setup' 'utilities setup';
  gap: 20px 32px; align-items: start;
}
.race-root .race-intro { grid-area: intro; display: block; }
.race-root .race-intro .race-pill { font-family: var(--sm-font-display); font-size: calc(9px * var(--ui-scale, 1)); }
.race-root .race-title { margin: 12px 0; font-size: clamp(30px,3.4vw,44px); }
.race-root .race-lede { margin: 0; max-width: 350px; font-size: 13px; line-height: 1.55; }
.race-root .race-hero { max-width: 280px; margin: 2px 0 -8px; }
.race-root .race-facts { display: none; }
.race-root .race-setup { grid-area: setup; padding: 20px; }
.race-root .race-track-list { gap: 8px; }
.race-root .race-track { min-height: 68px; gap: 12px; padding: 8px 10px; }
.race-root .race-track canvas { width: 76px; height: 46px; flex-basis: 76px; }
.race-root .race-track > span { min-width: 0; }
.race-root .race-track strong { font-size: 12px; line-height: 1.5; }
.race-root .race-track small { font: 650 calc(10px * var(--ui-scale, 1))/1.3 var(--sm-font-body); letter-spacing: .07em; }
.race-root .race-track[aria-pressed=true] { box-shadow: inset 3px 0 var(--sm-lime); }
.race-root .race-track-description { min-height: 32px; margin: 10px 0 8px; font-size: 12px; line-height: 1.5; }
.race-root .race-options { margin: 8px 0 16px; }
.race-root .race-options .race-label { margin: 0; }
.race-root .race-options .race-segment { padding-inline: 12px; }
.race-root .race-local-note { font-size: calc(11px * var(--ui-scale, 1)); line-height: 1.5; margin-top: 12px; }
.race-root .race-utilities { grid-area: utilities; min-width: 0; display: grid; gap: 10px; }
.race-root .race-preferences, .race-root .race-online-panel {
  margin: 0; padding: 14px 16px; background: rgba(9,20,37,.76);
  border: 1px solid var(--sm-line); border-radius: 16px;
}
.race-root .race-preferences > .race-label { margin-bottom: 10px; }
.race-root .race-setting-label { margin: 8px 0 6px; color: var(--sm-copy); font-size: 12px; font-weight: 650; }
.race-root .race-camera-options { margin: 0; gap: 6px; }
.race-root .race-dialog .race-camera-options .race-button { flex: 1 1 auto; min-width: max-content; padding-inline: 4px; white-space: nowrap; font: 650 calc(11px * var(--ui-scale, 1))/1.3 var(--sm-font-body); }
.race-root .race-audio-controls { margin-top: 0; gap: 6px; }
.race-root .race-dialog .race-audio-controls .race-button { flex: 1; font: 650 calc(11px * var(--ui-scale, 1))/1.3 var(--sm-font-body); }
.race-root .race-audio-volume { flex: 1 0 100%; justify-content: space-between; gap: 12px; min-width: 0; font-size: 12px; }
.race-root .race-audio-volume input { flex: 1; width: 100%; min-width: 0; max-width: none; margin: 0; }
.race-root .race-help { margin-top: 8px; padding-top: 4px; }
.race-root .race-help summary { font-size: 12px; padding-block: 10px; }
.race-root .race-help p { line-height: 1.6; font-size: 12px; }
.race-root .race-online-panel { padding-block: 4px; }
.race-root .race-online-panel > summary { font: 650 12px/1.5 var(--sm-font-body); color: var(--sm-copy); }
.race-root .race-online-panel[open] { padding-bottom: 14px; }
.race-root .race-online-actions { gap: 8px; }
.race-root .race-online-actions .race-button { flex: 1; }
.race-root .race-room-code { display: block; overflow-wrap: anywhere; }
.race-root .race-room-members { padding-left: 18px; overflow-wrap: anywhere; }
.race-root .race-room-input { font-size: 16px; }
.race-root .race-compact { padding: 22px; scroll-padding-block: 14px; }
.race-root .race-compact h2 { margin: 12px 0 8px; }
.race-root .race-menu-copy > p { margin: 0 0 16px; line-height: 1.55; }
.race-root .race-menu-actions { display: grid; gap: 8px; }
.race-root .race-menu-actions > .race-button { width: 100%; min-height: 46px; margin: 0; }
.race-root .race-menu-actions > .race-text { color: var(--sm-copy); border-color: var(--sm-line); }
.race-root .race-compact .race-camera-options { margin-top: 16px; }
.race-root .race-compact .race-audio-controls { margin-top: 12px; }
.race-root .race-results { display: grid; gap: 6px; margin: 16px 0; }
.race-root .race-result-row { padding: 10px 12px; gap: 10px; border: 1px solid var(--sm-line); background: rgba(4,12,27,.4); }
.race-root .race-result-row strong { min-width: 0; overflow-wrap: anywhere; }
.race-root .race-result-row span:last-child { flex-shrink: 0; font-size: calc(11px * var(--ui-scale, 1)); }
.race-root .race-result-row[data-you=true] { background: rgba(199,244,125,.09); border-color: rgba(199,244,125,.4); }

@media (max-width: 760px) {
  .race-root .race-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: 'intro' 'setup' 'utilities'; gap: 14px; }
  .race-root .race-lobby-header { margin-bottom: 8px; gap: 8px; }
  .race-root .race-lobby-header > .race-kicker { font-size: calc(9px * var(--ui-scale, 1)); letter-spacing: .06em; }
  .race-root .race-lobby-header .race-button { white-space: nowrap; padding-inline: 10px; }
  .race-root .race-intro { display: grid; grid-template-columns: minmax(0,1fr) 100px; column-gap: 8px; }
  .race-root .race-intro .race-pill { display: none; }
  .race-root .race-title { grid-column: 1; margin: 0 0 8px; font-size: 28px; }
  .race-root .race-title span { display: inline; }
  .race-root .race-lede { grid-column: 1/-1; font-size: 12px; }
  .race-root .race-hero { grid-column: 2; grid-row: 1; width: 100%; margin: 0; align-self: center; }
  .race-root .race-setup { padding: 16px; }
  .race-root .race-track { min-height: 62px; padding: 6px 8px; gap: 10px; }
  .race-root .race-track canvas { width: 62px; height: 42px; flex-basis: 62px; }
  .race-root .race-track strong { font-size: calc(11px * var(--ui-scale, 1)); }
  .race-root .race-track-description { margin-block: 8px; min-height: 0; font-size: calc(11px * var(--ui-scale, 1)); }
  .race-root .race-options { margin: 10px 0 14px; }
  .race-root .race-options .race-segments { flex: 1; }
  .race-root .race-options .race-segment { flex: 1; padding-inline: 9px; }
  .race-root .race-compact { padding: 20px; }
}
@media (max-width: 380px) {
  .race-root .race-intro { grid-template-columns: minmax(0,1fr) 80px; }
  .race-root .race-title { font-size: 25px; }
  .race-root .race-track canvas { width: 50px; flex-basis: 50px; }
  .race-root .race-options { display: block; }
  .race-root .race-options .race-label { display: block; margin-bottom: 6px; }
  .race-root .race-track strong { font-size: calc(10px * var(--ui-scale, 1)); }
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  .race-root .race-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); grid-template-areas: 'intro setup' 'utilities setup'; gap: 12px 18px; }
  .race-root .race-intro { display: block; }
  .race-root .race-intro .race-pill, .race-root .race-hero { display: none; }
  .race-root .race-title { font-size: 25px; margin: 0 0 8px; }
  .race-root .race-title span { display: inline; }
  .race-root .race-lede { font-size: calc(11px * var(--ui-scale, 1)); }
  .race-root .race-setup { padding: 12px; }
  .race-root .race-track-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .race-root .race-track { display: block; min-height: 100px; text-align: center; padding: 6px; }
  .race-root .race-track canvas { width: 60px; height: 34px; margin-inline: auto; display: block; }
  .race-root .race-track small { display: none; }
  .race-root .race-track strong { font-size: calc(9px * var(--ui-scale, 1)); line-height: 1.5; }
  .race-root .race-track-description { margin-block: 6px; min-height: 0; font-size: calc(11px * var(--ui-scale, 1)); }
  .race-root .race-options { margin: 8px 0 10px; }
  .race-root .race-options .race-segment { padding-inline: 10px; }
  .race-root .race-local-note { margin-top: 8px; }
  .race-root .race-compact { padding: 18px; }
  .race-root .race-results { margin-block: 12px; }
}

/* Short landscape screens keep both Resume and the way out visible. Settings
   remain in the same scrollable dialog; no controls are hidden to force a fit. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  .race-root .race-pause-panel { width: min(730px,100%); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: 'copy actions' 'preferences actions'; gap: 0 20px; }
  .race-root .race-menu-copy { grid-area: copy; }
  .race-root .race-pause-panel .race-menu-actions { grid-area: actions; align-self: start; gap: 10px; }
  .race-root .race-menu-preferences { grid-area: preferences; min-width: 0; }
  .race-root .race-menu-copy h2 { font-size: 23px; margin-block: 8px 6px; }
  .race-root .race-menu-copy > p { margin-bottom: 8px; font-size: 12px; }
  .race-root .race-compact .race-camera-options { margin-top: 0; }
  .race-root .race-compact .race-audio-controls { margin-top: 8px; padding-top: 8px; }
  .race-root .race-result-panel { width: min(730px,100%); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 6px 20px; align-items: start; }
  .race-root .race-result-panel > .race-pill { grid-column: 1/-1; justify-self: start; }
  .race-root .race-result-panel > h2 { grid-column: 1/-1; font-size: 24px; margin-block: 2px 6px; }
  .race-root .race-result-panel .race-results { margin: 0; gap: 4px; }
  .race-root .race-result-panel .race-result-row { padding: 6px 9px; }
  .race-root .race-result-panel .race-menu-actions { gap: 7px; }
}

/* Lobby headlines support the controls rather than dominate wide displays. */
@media(min-width:851px) {
 .arena-root .arena-title, .race-root .race-title { font-size:36px; line-height:1.14; margin:12px 0; }
}
/* Pause is an intermission, not a dashboard. Keep one clear resume action. */
#ovPause .panel { width:min(580px,100%); padding:28px; }
#ovPause .title-lg { font-size:clamp(27px,3vw,34px); margin-bottom:16px; }
#ovPause .dock.top { position:static; margin:0 0 18px; padding:0; border:0; background:none; }
#ovPause .btn { font-family:var(--sm-font-body); letter-spacing:0; font-size:14px; }
#ovPause .control-guide { gap:8px; margin:8px 0 20px; }
#ovPause .control-guide > div { border:0; background:transparent; padding:9px 5px; }
#ovPause .control-guide b { font:700 13px/1.4 var(--sm-font-body); letter-spacing:0; }
#ovPause .control-guide span { font:450 calc(10px * var(--ui-scale, 1))/1.4 var(--sm-font-body); letter-spacing:.04em; }
#ovPause .pause-settings > summary { padding:12px; font:600 13px/1.4 var(--sm-font-body); letter-spacing:0; text-transform:none; background:transparent; }
#ovPause #btnQuit { background:transparent; border-color:transparent; color:#a9c2d4; box-shadow:none; margin-top:12px; }
@media(max-height:560px) { #ovPause .panel { padding:18px 24px; }#ovPause .title-lg { margin-bottom:10px; font-size:27px; }#ovPause .control-guide { margin:0 0 8px; }#ovPause .dock.top { margin-bottom:10px; } }
#ovPause .pause-session-note { margin:-7px 0 16px; color:#aac2d3; font:450 12px/1.5 var(--sm-font-body); }

/* Secondary screens share the studio's quiet, readable surface language.
   Keep each panel's existing scrolling and action IDs: these are places to
   read and choose, rather than another animated game world. */
.overlay .secondary-panel {
  --px: 28px; --py: 24px;
  width: min(680px,100%); max-width: 680px;
  padding: var(--py) var(--px);
  background: #101e31;
  font: 400 15px/1.5 var(--sm-font-body);
  text-align: left;
  scrollbar-gutter: stable;
}
.overlay.in:has(.secondary-panel) { background: rgba(3,8,18,.78); }
.overlay .secondary-panel > .title-lg { font-size: clamp(26px,3vw,34px); margin: 0 0 24px; text-align: left; }
.overlay .secondary-panel .btn { font: 650 15px/1.4 var(--sm-font-body); letter-spacing: 0; min-height: 46px; }
.overlay .secondary-panel .sub { font-size: 14px; letter-spacing: 0; }
.overlay .secondary-panel .section-head { color: #dbe8f4; font: 700 15px/1.4 var(--sm-font-body); letter-spacing: 0; text-transform: none; margin: 22px 0 10px; padding: 0; border: 0; }
.overlay .secondary-panel .stats-line { font-size: 13px; line-height: 1.6; letter-spacing: 0; color: #a9c0d4; }
.overlay .secondary-panel .dock { margin-top: 22px; padding-top: 14px; background: #101e31; border-top: 1px solid var(--sm-line); box-shadow: 0 -10px 15px #101e31; }
.overlay .secondary-panel .dock .btn { width: auto; min-width: 120px; margin-left: auto; display: block; }
.overlay .secondary-panel table.scores { font: 500 15px/1.5 var(--sm-font-body); margin: 10px 0 18px; letter-spacing: 0; }
.overlay .secondary-panel table.scores td { padding: 12px 8px; font-size: 15px; }
.overlay .secondary-panel table.scores td.sc { font: 700 20px/1.3 var(--sm-font-body); color: var(--sm-ink); font-variant-numeric: tabular-nums; }
.overlay .secondary-panel table.scores .empty { padding: 24px 0; color: var(--sm-copy); letter-spacing: 0; text-align: left; }
#ovTrophy .panel { max-width: 740px; width: min(740px,100%); }
#ovTrophy #logbook { grid-template-columns: minmax(0,1fr); gap: 0; max-height: none; overflow: visible; }
#ovTrophy .log-row { min-height: 44px; padding: 10px 0; gap: 14px; font: 450 14px/1.45 var(--sm-font-body); letter-spacing: 0; }
#ovTrophy .log-glyph { flex-basis: 26px; font-size: 18px; }
#ovTrophy .log-name { text-transform: none; color: var(--sm-ink); }
#ovTrophy .log-row.unfound .log-hint { color: #9eb5ca; opacity: 1; font-family: var(--sm-font-body); }
#ovTrophy #logCount { margin-top: 18px; }
#ovSettings .panel { width: min(820px,100%); max-width: 820px; }
#ovSettings .settings-list { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px 30px; align-items: start; }
.settings-group { min-width: 0; }
.settings-group .section-head { margin: 0 0 8px; }
#ovSettings .settings-group > .section-head { margin-top: 0; }
.settings-group .toggle-row { font: 500 14px/1.45 var(--sm-font-body); min-height: 52px; gap: 14px; padding: 5px 0; }
.settings-group .toggle-row > span:first-child { min-width: 0; }
.settings-group .slider-row { flex-wrap: wrap; }
.settings-group .slider-row > span:first-child { flex: 1 1 100%; }
.settings-group .slider-row input { flex: 1; min-width: 0; }
.settings-group .switch { min-width: 48px; min-height: 44px; flex-shrink: 0; border-radius: 22px; }
.settings-group .switch::after { top: 10px; }
.settings-group .mini-chip { min-height: 44px; min-width: 48px; font: 600 13px/1.3 var(--sm-font-body); }
.settings-group .settings-action, .settings-group .net-radio-opt { width: 100%; color: var(--sm-copy); background: transparent; text-align: left; border: 0; border-bottom: 1px solid var(--sm-line); border-radius: 0; cursor: pointer; }
.settings-group .net-radio-opt { min-height: 44px; font: 500 14px/1.4 var(--sm-font-body); letter-spacing: 0; }
.settings-group .net-radio-opt.sel { color: var(--sm-ink); }
.settings-group .net-sub { font: 700 15px/1.4 var(--sm-font-body); color: #dbe8f4; }
.settings-group .net-val { overflow-wrap: anywhere; text-align: right; }
.settings-group .hint { opacity: 1; color: #9eb5ca; font: 400 12px/1.5 var(--sm-font-body); padding-left: 26px; }
#ovSettings #btnWardrobe2, #ovSettings #btnReset { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 11px 18px; margin: 24px 12px 0 0; }
#ovTogether .sub { margin-bottom: 24px; }
#ovTogether .together-or { font: 600 13px/1.5 var(--sm-font-body); letter-spacing: 0; text-transform: none; margin: 26px 0 12px; color: var(--sm-copy); }
#ovTogether .join-label, #ovTogether .join-hint { font: 450 14px/1.5 var(--sm-font-body); letter-spacing: 0; text-transform: none; }
#ovTogether #btnTogetherBack { background: transparent; border-color: transparent; box-shadow: none; color: var(--sm-copy); }
#ovCallsign .callsign-cols { gap: 24px; margin: 28px 0; }
#ovCallsign .callsign-col { min-width: 0; flex: 1; }
#ovCallsign .callsign-word { font: 700 clamp(18px,4vw,24px)/1.4 var(--sm-font-body); width: 100%; letter-spacing: 0; text-shadow: none; text-transform: none; color: var(--sm-ink); overflow-wrap: anywhere; }
.secondary-panel .arrow-btn { min-height: 44px; min-width: 64px; border-radius: 12px; color: var(--sm-copy); background: var(--sm-surface); }
#ovCallsign #callsignPreview { font: 450 14px/1.5 var(--sm-font-body); text-transform: none; letter-spacing: 0; color: var(--sm-copy); text-align: center; }
#ovInitials .initial-char { text-shadow: none; color: var(--sm-ink); }
#ovDead .secondary-panel { width: min(720px,100%); max-width: 720px; }
#ovDead .secondary-panel #deadScore { margin: 12px 0; font-size: clamp(44px,8vw,72px); }
#ovDead .secondary-panel .stat { font-family: var(--sm-font-body); }
#ovDead .secondary-panel .dock .btn { width: 100%; }
#ovDead .secondary-panel #deadTapHint { font-size: calc(11px * var(--ui-scale, 1)); text-align: center; }
@media (hover:hover) and (pointer:fine) {
 .secondary-panel .settings-action:hover, .secondary-panel .net-radio-opt:hover { background: var(--sm-surface-hover); }
}
@media (max-width:620px) {
 .overlay .secondary-panel { --px: 20px; --py: 20px; scrollbar-gutter: auto; }
 #ovSettings .settings-list { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .overlay .secondary-panel > .title-lg { margin-bottom: 20px; }
 #ovSettings #btnWardrobe2, #ovSettings #btnReset { width: 100%; margin: 16px 0 0; }
}
@media (max-height:560px) {
 .overlay .secondary-panel { --px: 22px; --py: 16px; }
 .overlay .secondary-panel > .title-lg { margin-bottom: 16px; font-size: 26px; }
 .overlay .secondary-panel .dock { margin-top: 16px; padding-top: 10px; }
}

.settings-group .switch::before { inset: 0; }
/* The hit target is 44px; the switch track stays visually light. */
.settings-group .switch, .settings-group .switch.on { background: transparent; }
.settings-group .switch::before { inset: 8px 0; background: #354357; border-radius: 14px; }
.settings-group .switch.on::before { background: #61d4e7; }
.settings-group .switch::after { top: 11px; }
.settings-group .slider-row { flex-wrap: nowrap; }
.settings-group .slider-row > span:first-child { flex: 0 1 110px; }
@media(min-width:800px) {
 #ovTrophy #logbook { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; }
 #ovTrophy .log-row { min-height: 62px; }
}

#ovCallsign .secondary-panel, #ovInitials .secondary-panel { width:min(520px,100%); max-width:520px; }
#ovCallsign #btnCallsignReroll { width:auto; display:block; margin:16px auto 20px; padding:10px 24px; }
.secondary-panel .surface-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.secondary-panel .surface-actions .btn { margin:0; }
.secondary-panel .mini-chip { min-height:44px; min-width:44px; font:600 13px/1.4 var(--sm-font-body); }
.secondary-panel .net-relayurl, .secondary-panel .net-relaylist, .secondary-panel .join-input { min-height:46px; font:400 15px/1.5 var(--sm-font-body); }
#ovRoom #roomCode { min-height:44px; display:flex; align-items:center; justify-content:center; }
#ovRoom .switch { height:44px; background:transparent; }
#ovRoom .switch::before { inset:8px 0; border-radius:14px; background:#354357; }
#ovRoom .switch.on::before { background:#61d4e7; }
#ovRoom .switch::after { top:11px; }

.secondary-panel .haptic-test .mini-chip { min-height:46px; }

#ovRoom .room-qr { max-width:100%; height:auto; aspect-ratio:1; }
.secondary-panel textarea:focus-visible,
.secondary-panel [role="button"]:focus-visible,
body.gamepad-active .secondary-panel textarea:focus,
body.gamepad-active .secondary-panel [role="button"]:focus { outline:3px solid var(--sm-focus); outline-offset:-3px; }
/* A short landscape viewport must expose the complete invite, not only a
   scrollable canvas whose lower half is permanently under the action dock. */
@media (min-width:600px) {
 #ovRoom .dock { display:flex; justify-content:flex-end; align-items:center; gap:12px; }
 #ovRoom .dock .btn { margin:0; }
}
@media (min-width:600px) and (max-height:560px) {
 #ovRoom .room-qr { width:min(245px,calc(100dvh - 136px - var(--game-ui-top, 0px) - var(--game-ui-bottom, 0px))); }
}
.secondary-panel .net-sub, .secondary-panel .room-relay,
.secondary-panel .code-note, .secondary-panel .offline-note { opacity:1; color:var(--sm-copy); font:400 13px/1.5 var(--sm-font-body); letter-spacing:0; }
.secondary-panel .invite-block .k { font:600 12px/1.5 var(--sm-font-body); letter-spacing:.04em; color:var(--sm-copy); }
.secondary-panel .mini-chip { text-transform:none; letter-spacing:0; }
.secondary-panel .roster-row { font:500 14px/1.5 var(--sm-font-body); letter-spacing:0; }
.secondary-panel .room-log summary { min-height:44px; display:flex; align-items:center; font:500 13px/1.4 var(--sm-font-body); letter-spacing:0; opacity:1; }
#ovRoom .secondary-panel, #ovSettings .secondary-panel {
 max-height:calc(100dvh - 2 * var(--oy) - var(--game-ui-top, env(safe-area-inset-top, 0px)) - var(--game-ui-bottom, env(safe-area-inset-bottom, 0px)));
}

/* Real keyboard input owns a persistent cursor, including browsers that lose
   :focus-visible after native-switch haptic feedback. Pointerdown clears it. */
body.keyboard-active .overlay :is(button, summary, input, textarea, [role="button"]):focus,
body.keyboard-active :is(.arena-root, .race-root) :is(button, summary, input, textarea):focus {
 outline:3px solid var(--sm-focus) !important; outline-offset:-3px !important;
}