/* In-game title menu. Run, save, renderer and audio behavior live in their existing modules. */
body { overflow: hidden; }
.shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: max(12px, env(safe-area-inset-top, 0px)) 28px max(12px, env(safe-area-inset-bottom, 0px)); }
.shell main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
body[data-phase] .shell .game { flex: 1 1 0; height: 0; min-height: 0; max-height: none; }
body[data-phase="home"] #world { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body[data-phase="home"] .start-screen { position: absolute; inset: 0; display: block; min-height: 0; overflow: hidden; padding: 0; background: transparent; animation: none; }
.title-menu { position: absolute; inset: 0; color: #e4ffff; background: linear-gradient(90deg, #03111d18 30%, #020d18a8 100%); }
.title-brand { position: absolute; top: 7%; left: 5%; text-shadow: 0 3px 18px #020d1b; }
.title-brand > span { font-size: 11px; font-weight: 800; letter-spacing: 3px; color: #9bd4e1; }
.title-brand h1 { font-size: clamp(28px, 4.2vw, 52px); margin: 8px 0; letter-spacing: 1px; line-height: 1; }
.title-brand h1 b { color: #67edff; }
.title-brand p { margin: 0; font-size: 10px; letter-spacing: 2px; color: #c5e5ed; }
.title-actions { position: absolute; right: 6%; top: 50%; transform: translateY(-30%); width: clamp(220px, 27%, 310px); display: grid; gap: 13px; }
.sci-fi-button { position: relative; min-height: 56px; padding: 14px 22px; background: #4dabc1; color: #8feaff; font-size: 17px; text-transform: uppercase; letter-spacing: 2px; clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%); isolation: isolate; text-shadow: 0 0 12px #32a2d3; }
.sci-fi-button::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: #041824f2; clip-path: inherit; }
.sci-fi-button:hover, .sci-fi-button:focus-visible { background: #adf8ff; color: #efffff; outline: none; text-shadow: 0 0 10px #00c8ff; }
.sci-fi-button:hover::before, .sci-fi-button:focus-visible::before { background: linear-gradient(90deg, #094666, #12627c, #094666); box-shadow: inset 0 0 18px #35e9ff; }
body[data-phase="home"] .menu-panel { position: absolute; top: 4%; bottom: 4%; right: 4%; width: min(440px, 92%); max-width: none; display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 0; border: 1px solid #4d91a9; border-radius: 10px; background: #071a2bf5; color: #ecf8ff; box-shadow: 0 16px 70px #000a; backdrop-filter: blur(10px); animation: none; }
body[data-phase="home"] .lobby-heading { flex: 0 0 auto; padding: 14px 20px; border-bottom: 1px solid #275068; }
body[data-phase="home"] .lobby-heading h2 { margin: 9px 0 4px; font-size: 25px; letter-spacing: -.5px; }
body[data-phase="home"] .intro { display: block; margin: 0; font-size: 12px; color: #bdd3e6; }
.menu-back { color: #a5eaff; background: #102c40; border: 1px solid #397990; border-radius: 5px; min-height: 44px; padding: 8px 15px; font-size: 12px; }
body[data-phase="home"] .setup-scroll, .settings-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 18px 20px 22px; scroll-padding: 12px; }
.setup-scroll:focus-visible, .settings-scroll:focus-visible { outline: 2px solid #69e5ff; outline-offset: -3px; }
body[data-phase="home"] .menu-panel fieldset { margin: 0 0 20px; }
body[data-phase="home"] .menu-panel legend { font-size: 13px; margin-bottom: 10px; color: #e7f7ff; }
body[data-phase="home"] .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-phase="home"] .modes button { display: flex; flex-direction: column; gap: 5px; min-height: 76px; padding: 10px; border: 1px solid #37617b; background: #102b40; color: #d6eafa; }
body[data-phase="home"] .modes button b { font-size: 13px; }
body[data-phase="home"] .modes button small { white-space: normal; font-size: 11px; line-height: 1.4; }
body[data-phase="home"] .modes button[aria-pressed="true"] { background: #10465a; border-color: #65e7ff; color: #e0fcff; }
body[data-phase="home"] .table-options { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
body[data-phase="home"] .table-options button, body[data-phase="home"] .table-options button:last-child { grid-column: auto; min-height: 44px; font-size: 15px; color: #dcefff; background: #102b40; border: 1px solid #41657c; box-shadow: none; }
body[data-phase="home"] .table-options button[aria-pressed="true"] { color: #041c29; background: #88e9f5; border-color: #b8f8ff; }
body[data-phase="home"] .table-selection-tools { display: flex; gap: 8px; }
body[data-phase="home"] .table-selection-tools button { min-width: 60px; min-height: 44px; color: #dcf5ff; background: #143348; border: 1px solid #41657c; padding: 8px 12px; }
body[data-phase="home"] .table-hint, body[data-phase="home"] .table-reward-summary, body[data-phase="home"] .small-note { color: #bdd3e6; font-size: 11px; line-height: 1.5; }
body[data-phase="home"] .table-summary { font-size: 12px; color: #a1ecff; margin: 12px 0 6px; }
body[data-phase="home"] .starting-pace-label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 800; }
body[data-phase="home"] .menu-panel select { min-height: 44px; width: 100%; color: #e1f6ff; background: #102e43; border: 1px solid #47728b; border-radius: 6px; padding: 8px; }
body[data-phase="home"] .lobby-start { flex: 0 0 auto; padding: 12px 20px 18px; border-top: 1px solid #275068; background: #071a2b; }
body[data-phase="home"] .lobby-start-hint { font-size: 11px; color: #ffd48b; margin: 0 0 8px; }
body[data-phase="home"] .start-button { min-height: 50px; background: #65e0ef; color: #082b3a; box-shadow: none; }
body[data-phase="home"] .start-button:disabled { background: #294355; color: #9cb1bf; opacity: 1; }
body[data-phase="home"] .runner-picker { display: grid; gap: 10px; min-height: 0; padding: 0 0 18px; margin: 0; background: none; border: 0; box-shadow: none; animation: none; }
body[data-phase="home"] .runner-label { color: #d6efff; margin: 0; }
body[data-phase="home"] .locker-button { min-height: 44px; margin: 0; color: #dff6ff; background: #15354d; border-color: #41657c; }
body[data-phase="home"] .run-options { margin: 0; color: #dcf5ff; background: #102b40; border-color: #37617b; }
body[data-phase="home"] .run-options > summary { min-height: 44px; color: #dcf5ff; }
body[data-phase="home"] #paceSummary { color: #9acfe3; }
body[data-phase="home"] .controls-setting { min-height: 44px; color: #d6eafa; }
body[data-phase="home"] .bottom-bar { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 0 0; color: #bdd3e6; }
body[data-phase="home"] #privacyNote { order: 2; font-size: 10px; }
body[data-phase="home"] .play-settings { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 16px; }
body[data-phase="home"] .motion-setting, body[data-phase="home"] #voiceOptionsToggle { min-height: 44px; display: flex; align-items: center; font-size: 12px; }
body[data-phase="home"] .voice-options { position: static; }
body[data-phase="home"] .voice-options[open] { flex-basis: 100%; }
body[data-phase="home"] .voice-panel { position: static; inset: auto; transform: none; width: 100%; max-height: none; overflow: visible; margin: 6px 0; box-shadow: none; background: #102b40; color: #e1f6ff; border-color: #47728b; }
body[data-phase="home"] .voice-panel a { color: #9aeeff; }
body[data-phase="home"] .voice-panel button { min-height: 44px; border-radius: 7px; background: #c9edf4; color: #15384a; }
body[data-phase="home"] .voice-panel label, body[data-phase="home"] .voice-options > summary { min-height: 44px; }
.game-credits { margin-top: 18px; padding-top: 12px; border-top: 1px solid #275068; font-size: 11px; color: #bdd3e6; }
.game-credits h3 { font-size: 12px; margin: 0; }.game-credits p { margin: 6px 0; }
@media (max-width: 900px), (max-height: 600px) {
  body .shell { width: 100%; max-width: none; 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 .shell .game { border: 0; border-radius: 0; box-shadow: none; }
}
@media (orientation: portrait) and (max-width: 740px) {
  .title-menu { background: linear-gradient(0deg, #020e1df2 0%, #020e1d00 62%); }
  .title-brand { top: 5%; left: 7%; }
  .title-brand h1 { font-size: 33px; }
  .title-brand p { font-size: 8px; letter-spacing: 1.2px; }
  .title-actions { top: auto; right: 9%; left: 9%; bottom: 5%; width: auto; transform: none; gap: 10px; }
  .sci-fi-button { min-height: 50px; font-size: 15px; }
  body[data-phase="home"] .menu-panel { inset: 12px; width: auto; }
  body[data-phase="home"] .lobby-heading { padding: 10px 14px; }
  body[data-phase="home"] .lobby-heading h2 { font-size: 22px; }
  body[data-phase="home"] .setup-scroll, .settings-scroll { padding: 14px; }
  body[data-phase="home"] .lobby-start { padding: 10px 14px 14px; }
  body[data-phase="home"] .table-options { gap: 4px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .title-brand { top: 8%; left: 4%; }
  .title-brand h1 { font-size: 28px; }.title-brand p { font-size: 8px; }
  .title-actions { right: 5%; width: 32%; top: 47%; gap: 9px; }
  .sci-fi-button { min-height: 46px; font-size: 13px; padding: 10px; }
  body[data-phase="home"] .menu-panel { inset: 8px 12px 8px auto; width: min(440px, 62%); }
  body[data-phase="home"] .lobby-heading { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
  body[data-phase="home"] .lobby-heading h2 { font-size: 19px; margin: 0; }
  body[data-phase="home"] .intro { display: none; }
  body[data-phase="home"] .setup-scroll, .settings-scroll { padding: 12px 14px; }
  body[data-phase="home"] .lobby-start { padding: 8px 14px 10px; }
  body[data-phase="home"] .lobby-start-hint { margin-bottom: 5px; }
}
.title-brand h1 { color: #f0fcff; }
body[data-phase="home"] .table-options button[aria-pressed="true"]::before { content: ' ✓'; font-size: 10px; }

body[data-phase="home"] .starting-pace-label { color: #e7f7ff; }
body[data-phase="home"] .start-button { border: 1px solid #9aeffa; }
#newGameButton { background: #b8f8ff; color: #f1ffff; }
#newGameButton::before { background: #10495c; }
body[data-phase="home"] .play-settings .motion-setting { color: #c5e1ee; }
@media (orientation: portrait) and (max-width: 380px) {
  body[data-phase="home"] .table-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
}
body[data-phase="home"] .runner-picker { grid-template-columns: minmax(0, 1fr); }
body[data-phase="home"] .runner-picker .runner-label { display: flex; flex-direction: column; width: 100%; gap: 8px; }

/* Side cockpit: real canvas stays visible, with one compact launch console. */
body[data-phase="home"] .menu-panel{top:3%;bottom:3%;right:3%;width:min(420px,48%);border:1px solid #65d5ef;border-radius:18px 7px 18px 7px;background:linear-gradient(145deg,#09293bec,#061723f5);box-shadow:0 0 0 3px #123b4a80,0 14px 44px #0009,inset 0 0 25px #1cd7ff08}
body[data-phase="home"] .lobby-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;background:#071b28b8;border-bottom-color:#2d6578}
body[data-phase="home"] .lobby-heading h2{font-size:23px;margin:0}.lobby-heading .intro{flex-basis:100%}
body[data-phase="home"] .menu-back{min-height:44px;border-radius:8px;background:#103044}
body[data-phase="home"] .setup-scroll,body[data-phase="home"] .settings-scroll{padding:14px 16px;scrollbar-width:thin;scrollbar-color:#38728a #081c29}
body[data-phase="home"] .menu-panel fieldset{margin:0 0 14px}
body[data-phase="home"] .menu-panel legend{font-size:13px;margin-bottom:8px}
body[data-phase="home"] .modes button{min-height:62px;border-radius:10px;padding:9px 11px}
body[data-phase="home"] .modes button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px #66eaff,0 0 12px #17bad728}
body[data-phase="home"] .table-field{display:flex;flex-direction:column}
body[data-phase="home"] .table-selection-tools{order:2;margin-top:10px}
body[data-phase="home"] .table-selection-tools button{width:100%;border-radius:9px;background:#103248;min-height:44px}
body[data-phase="home"] .table-hint{margin:0 0 10px;font-size:11px}
body[data-phase="home"] .table-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
body[data-phase="home"] .table-options button,body[data-phase="home"] .table-options button:last-child{position:relative;min-height:48px;border-radius:10px;font-size:19px;padding:8px 12px;overflow:visible}
body[data-phase="home"] .table-options button[aria-pressed="true"]{background:linear-gradient(#92f3f7,#64dfe9);border-color:#b7fcff;box-shadow:0 0 9px #27b9d52b}
body[data-phase="home"] .table-options button[aria-pressed="true"]::before{position:absolute;right:5px;bottom:4px;font-size:13px;line-height:1;content:'✓'}
body[data-phase="home"] .table-options button.table-complete::after{content:'★';position:absolute;right:auto;left:-5px;top:-7px;width:26px;height:26px;display:grid;place-items:center;clip-path:none;border:2px solid #ffe5a0;border-radius:50%;background:linear-gradient(#f7c653,#b47915);color:#fff4b5;font-size:20px;line-height:1;box-shadow:0 2px 5px #0008,0 0 8px #f6c35e66;pointer-events:none}
body[data-phase="home"] .table-summary{order:3;margin:9px 0 0;font-size:11px}
body[data-phase="home"] .table-reward-summary{order:4;margin:5px 0 0;font-size:10px}
body[data-phase="home"] .pace-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body[data-phase="home"] .pace-options button{min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 3px;border-radius:9px;background:#0d3043;color:#d8f9ff;border:1px solid #3d849c;font-size:12px}
body[data-phase="home"] .pace-options button span{font-size:9px;white-space:nowrap}
body[data-phase="home"] .pace-options button[aria-pressed="true"]{background:#72e9f2;color:#062935;border-color:#b4faff;box-shadow:0 0 10px #39cce34a}
body[data-phase="home"] .pace-options button:disabled{opacity:1;background:#132b3c;color:#a0b5c8;border-color:#3b5264;cursor:not-allowed;box-shadow:none}
body[data-phase="home"] #startingPaceHelp{margin:8px 0 0;font-size:10px}
body[data-phase="home"] .lobby-start{padding:10px 16px 14px;background:#071c2be8;border-top-color:#2d6578}
body[data-phase="home"] .start-button{font-size:19px;border-radius:11px;background:linear-gradient(#83f0f5,#49d4e3)}
body[data-phase="home"] .start-button:disabled{background:#294355}
body[data-phase="home"] .settings-group{padding:12px;margin:0 0 12px;border:1px solid #315f74;border-radius:11px;background:#0e2b3ca8}
body[data-phase="home"] .settings-group h3{width:100%;font-size:13px;color:#dffbff;margin:0 0 10px}
body[data-phase="home"] .settings-panel select{min-height:46px;border-color:#4e8fa6;background:#103247;border-radius:8px}
body[data-phase="home"] .runner-picker{gap:8px}.settings-panel .runner-picker h3{margin-bottom:0}
body[data-phase="home"] .locker-button{border-radius:9px;background:#123c50}
body[data-phase="home"] .settings-panel .bottom-bar{gap:0;padding:0}
body[data-phase="home"] .play-settings{gap:4px 14px}
body[data-phase="home"] .settings-panel input[type="checkbox"]{width:22px;height:22px;accent-color:#73e6f1;flex-shrink:0;cursor:pointer}
body[data-phase="home"] .settings-panel .motion-setting,body[data-phase="home"] .settings-panel .controls-setting{display:flex;align-items:center;gap:9px;min-height:46px;color:#e1f5ff;font-size:12px}
body[data-phase="home"] .voice-options{width:100%}
body[data-phase="home"] .voice-options>summary{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;min-height:44px;background:#12364a;border:1px solid #396b80;border-radius:8px;color:#c8f6ff;font-size:12px;cursor:pointer;list-style:none}
body[data-phase="home"] .voice-options>summary::after{content:'+';font-size:20px}
body[data-phase="home"] .voice-options[open]>summary::after{content:'−'}
body[data-phase="home"] .voice-options>summary::-webkit-details-marker{display:none}
body[data-phase="home"] .voice-panel{padding:12px;border-radius:9px}
body[data-phase="home"] .voice-panel input[type="range"]{width:100%;min-height:44px;accent-color:#75e9f2}
body[data-phase="home"] .game-credits{margin-top:12px;padding-top:12px}
body[data-phase="home"] .game-credits h3{margin-bottom:9px}
body[data-phase="home"] #privacyNote{margin:0 3px;font-size:10px;line-height:1.5}
body[data-phase="home"] .menu-panel button:focus-visible,body[data-phase="home"] .menu-panel summary:focus-visible,body[data-phase="home"] .menu-panel select:focus-visible{outline:3px solid #c3f9ff;outline-offset:3px}
/* Portrait keeps an unobstructed strip of the real city above the cockpit. */
@media(orientation:portrait) and (max-width:740px){
 body[data-phase="home"] .menu-panel{inset:clamp(78px,18dvh,150px) 10px 10px;width:auto;max-height:none}
 body[data-phase="home"] .lobby-heading{padding:9px 12px;gap:6px 10px}
 body[data-phase="home"] .lobby-heading h2{font-size:21px}
 body[data-phase="home"] .lobby-heading .intro{display:none}
 body[data-phase="home"] .setup-scroll,body[data-phase="home"] .settings-scroll{padding:12px}
 body[data-phase="home"] .lobby-start{padding:9px 12px 11px}
 body[data-phase="home"] .table-options{gap:8px}
}
@media(orientation:landscape) and (max-height:600px){
 body[data-phase="home"] .menu-panel{inset:8px 10px 8px auto;width:min(440px,56%)}
 body[data-phase="home"] .lobby-heading{padding:7px 12px}
 body[data-phase="home"] .lobby-heading .intro{display:none}
 body[data-phase="home"] .setup-scroll,body[data-phase="home"] .settings-scroll{padding:10px 12px}
 body[data-phase="home"] .table-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
 body[data-phase="home"] .table-options button,body[data-phase="home"] .table-options button:last-child{min-height:44px;font-size:17px}
 body[data-phase="home"] .lobby-start{padding:8px 12px}
}
/* Readable state copy, including small phones; never squeeze four tiny labels. */
body[data-phase="home"] .pace-options button{font-size:13px;min-height:66px}
body[data-phase="home"] .pace-options button span{font-size:12px;white-space:normal;line-height:1.3;text-align:center}
body[data-phase="home"] .table-hint,body[data-phase="home"] .table-summary,body[data-phase="home"] .table-reward-summary,body[data-phase="home"] #startingPaceHelp,body[data-phase="home"] .practice-pace-note,body[data-phase="home"] .lobby-start-hint{font-size:12px;line-height:1.45}
body[data-phase="home"] #privacyNote{font-size:11px}
@media(max-width:400px){body[data-phase="home"] .pace-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Shared street-backed menu language. Canvas always fills the game surface. */
body .shell .game{border:0;border-radius:0;background:#061320;box-shadow:none}
body[data-phase="home"] #world{position:absolute;inset:0;width:100%;height:100%}
body[data-phase="home"] .menu-panel{top:50%;bottom:auto;transform:translateY(-50%);height:auto;max-height:94%;border-radius:3px;background:linear-gradient(135deg,#061b2ce8,#04111de8);border:1px solid #65cde3;box-shadow:0 0 0 3px #061d2b75,0 12px 40px #0008;backdrop-filter:blur(3px)}
body[data-phase="home"] .setup-scroll,body[data-phase="home"] .settings-scroll{flex:1 1 auto}
body[data-phase="home"] .lobby-heading,body[data-phase="home"] .lobby-start{background:#05172255}
body[data-phase="home"] .lobby-heading h2{color:#edfdff}
body[data-phase="home"] .settings-group{background:#0a273985;border-color:#326a7e;border-radius:4px}
body[data-phase="home"] .menu-panel select{background:#0b293ce0;border-radius:4px}
body[data-phase="home"] .table-selection-tools button,body[data-phase="home"] .voice-options>summary{border-radius:4px;background:#0b2b3b99;color:#bdf5ff;border-color:#4d9bb0}
body[data-phase="home"] .modes button,body[data-phase="home"] .pace-options button{border-radius:5px}
body[data-phase="home"] .modes button[aria-pressed="true"]{background:#145066b3}
body[data-phase="home"] .table-options button{border-radius:5px}

/* Angular action faces are pseudo-elements so keyboard focus is never clipped. */
:is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button){position:relative;isolation:isolate;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#b7f5ff!important;text-transform:uppercase;letter-spacing:1.3px;font-size:12px;min-height:46px;padding:12px 20px;text-shadow:0 0 10px #3fbdde66;clip-path:none;}
:is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button)::before,
:is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button)::after{content:'';position:absolute;pointer-events:none;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);}
:is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button)::before{inset:0;z-index:-2;background:#69cfe5}
:is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button)::after{inset:1px;z-index:-1;background:#071c2beb}
:is(.start-button,.end-actions .primary,dialog .primary)::after{background:#12495deb!important}
:is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button):hover:not(:disabled)::after{background:#14556beb}
:is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button):focus-visible{outline:3px solid #e0fcff!important;outline-offset:4px!important}
:is(.start-button,.end-actions button,dialog button):disabled{color:#89a3b5!important;opacity:.65}
:is(.start-button,.end-actions button,dialog button):disabled::before{background:#54707e}
:is(.start-button,.end-actions button,dialog button):disabled::after{background:#122634!important}
body[data-phase="home"] .start-button{font-size:17px;min-height:50px;text-align:center}
body[data-phase="home"] .menu-back{font-size:11px;letter-spacing:.8px;padding:10px 16px}
body[data-phase="home"] .locker-button{font-size:11px;letter-spacing:.7px}
dialog .danger{color:#ffd1d1!important}dialog .danger::before{background:#d58f93}dialog .danger::after{background:#42212be8}

/* Existing modal mechanics stay intact; every surface now belongs to the city. */
dialog,.results-card{color:#e5f8ff;background:linear-gradient(135deg,#071d2ef2,#04121eea);border:1px solid #65cde3;border-radius:4px;box-shadow:0 0 0 3px #061d2b75,0 18px 65px #0009;color-scheme:dark}
dialog::backdrop{background:#020b1666;backdrop-filter:blur(2px)}
.end-screen{background:#020b164d;backdrop-filter:blur(2px)}
dialog .eyebrow,.results-card .eyebrow{color:#84ddef;letter-spacing:2px}
dialog h2,.results-card h2{color:#e8fbff}
.dialog-inner>p,.results-card>p,body[data-phase="ended"] .results-content>p{color:#c4dce8}
dialog .small-note,dialog small,dialog label,.results-card li{color:#bfd8e7}
dialog a,.results-card a{color:#a1ebff}
.help-steps p{color:#c9dfeb;background:#0c2b3cb8;border:1px solid #28566b;border-radius:5px}.help-steps b{color:#e4f9ff}
.result-stats div{background:#0b2c3dba;border:1px solid #32677c;border-radius:5px}.result-stats strong{color:#a2f0ff}.result-stats span{color:#c2dfeb}
.practice-summary{color:#b5f2de!important;background:#103c3a9e;border-color:#387f7b;border-radius:5px}
.results-card details{border-color:#366478}.results-card summary{color:#beeefe}
.earned-summary{background:#433a208c;color:#ffe3a1;border-color:#ab8844;border-radius:5px}
.suit{color:#d6effa;background:#0c2b3d;border-color:#386b80;border-radius:5px}.suit[aria-pressed="true"]{background:#155166;border-color:#83e7f1}.suit small{color:#bdd9e6}.suit-swatch{border-color:#bee9f3}
dialog input{accent-color:#77deee}dialog input[type="checkbox"]{width:20px;height:20px}
.graphics-notice{background:#102b3bf5;color:#e0f5ff;border-color:#69b9cf;border-radius:5px}
body[data-phase="home"] .voice-panel{background:#092536d9;border-color:#3e7990;border-radius:4px}
body[data-phase="home"] .voice-panel button{color:#c7f7ff;background:#10394d;border:1px solid #66bbd0;border-radius:4px;text-transform:uppercase;letter-spacing:1px}
@media(orientation:portrait) and (max-width:740px){
 body[data-phase="home"] .menu-panel{top:clamp(36px,8dvh,76px);bottom:auto;transform:none;height:auto;max-height:calc(100% - clamp(36px,8dvh,76px) - 12px);inset-inline:12px;width:auto}
}
@media(orientation:landscape) and (max-height:600px){
 body[data-phase="home"] .menu-panel{top:50%;bottom:auto;transform:translateY(-50%);height:auto;max-height:calc(100% - 16px);right:10px;width:min(440px,56%)}
}
@media(forced-colors:active){
 dialog,.results-card,body[data-phase="home"] .menu-panel{border:2px solid CanvasText;background:Canvas;color:CanvasText}
 :is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button){border:2px solid ButtonText!important;background:ButtonFace!important;color:ButtonText!important}
 :is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button)::before,:is(.menu-back,.start-button,.locker-button,.end-actions button,dialog button:not(.suit),.graphics-notice button)::after{display:none}
}
body[data-phase="ended"] .results-card{border-radius:4px}
body[data-phase="home"] .table-options button,body[data-phase="home"] .table-options button:last-child{border-radius:5px}
/* Four centered main-menu actions remain reachable in short landscape views. */
@media(orientation:landscape) and (max-height:360px){
 .title-actions{top:50%;right:4%;width:52%;transform:translateY(-50%);grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .title-actions .sci-fi-button{min-height:52px;font-size:12px;letter-spacing:1px;padding:10px 12px}
}
/* Captions sit beside their controls; only interactive rows need touch height. */
body[data-phase="home"] .voice-panel .voice-control-field{display:grid;gap:4px;min-width:0;align-content:start}
body[data-phase="home"] .voice-panel .voice-control-field>label{display:block;min-height:0;height:auto;margin:0;padding:0;font-size:12px;line-height:1.4}
body[data-phase="home"] .voice-panel .voice-control-field>select,
body[data-phase="home"] .voice-panel .voice-control-field>input[type="range"]{margin:0;min-height:44px}
body[data-phase="home"] .voice-panel #closeVoiceOptions{position:static;min-height:44px;background:#10394d;color:#c7f7ff;border:1px solid #66bbd0;border-radius:4px}
/* A number tile must be wide enough to tap, even in short landscape viewports. */
body[data-phase="home"] .table-options button,body[data-phase="home"] .table-options button:last-child{min-width:44px}
@media(orientation:landscape) and (max-width:740px){body[data-phase="home"] .table-options{grid-template-columns:repeat(4,minmax(44px,1fr))}}
@media(orientation:landscape) and (max-width:480px){body[data-phase="home"] .table-options{grid-template-columns:repeat(3,minmax(44px,1fr))}}
@media(orientation:landscape) and (max-width:360px){body[data-phase="home"] .table-options{grid-template-columns:repeat(2,minmax(44px,1fr))}}
#helpTitle:focus-visible{outline:2px solid #9aebfa;outline-offset:5px}

/* Store is a sibling cockpit panel, with the same header and scrolling model. */
body[data-phase="home"] .store-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:14px 16px;scroll-padding:12px;scrollbar-width:thin;scrollbar-color:#38728a #081c29}
body[data-phase="home"] .store-scroll:focus-visible{outline:2px solid #69e5ff;outline-offset:-3px}
body[data-phase="home"] .store-panel .intro{display:block;flex-basis:100%;font-size:12px;color:#bfdfed}
body[data-phase="home"] .store-panel .suit-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body[data-phase="home"] .store-panel .suit{min-width:0;min-height:98px;padding:10px 8px;gap:6px;font-size:13px}
body[data-phase="home"] .store-panel .suit small{font-size:12px;line-height:1.35;white-space:normal}
body[data-phase="home"] .store-panel .suit-swatch{width:32px;height:32px}
body[data-phase="home"] #savedProgressOptions{margin-top:12px}
body[data-phase="home"] #savedProgressOptions button{display:block;width:100%;min-height:44px;margin:8px 0;padding:9px;border:1px solid #586e80;border-radius:4px;background:#112b3d;color:#c8deeb;font-size:12px}
body[data-phase="home"] #progressFeedback:empty{display:none}
@media(orientation:portrait) and (max-width:740px){body[data-phase="home"] .store-scroll{padding:12px}}
@media(orientation:landscape) and (max-height:600px){body[data-phase="home"] .store-scroll{padding:10px 12px}}