/* Readability tokens and layouts shared by menus, play and the field guide. */
:root {
  --text-scale: 1;
  --type-meta: calc(12px * var(--text-scale));
  --type-label: calc(14px * var(--text-scale));
  --type-body: calc(16px * var(--text-scale));
  --type-title: calc(20px * var(--text-scale));
  --muted: #a5b9c1;
}
button, select { touch-action: manipulation; }
button, p, h2, h3, small, .mono { overflow-wrap: anywhere; }
.text-setting { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--type-label); color: #b7cbd1; }
.text-setting select { font: inherit; color: #edf4f3; background: #101e27; border: 1px solid #78969a; padding: 10px 12px; border-radius: 0; min-height: 44px; }
.text-setting select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.menu-bottom, .menu-bottom > div, .pause-settings { flex-wrap: wrap; gap: 16px 24px; }
.menu-bottom { padding-top: 20px; }
.menu-content, .menu-footer, .menu-bottom, .masthead { flex-shrink: 0; }
.menu-content { flex: 1 0 auto; align-items: flex-start; }
.hero-copy { width: 600px; max-width: 65%; }
.menu-screen { background: linear-gradient(90deg,#080d13 0%,#080d13f5 48%,#080d13d9 100%); }
.menu-footer, .menu-bottom { background: #080d13; }
.edition .dim, .menu-bottom > span, .how-step > span { color: #a5b9c1; }
.mode { color: #a5b9c1; font-size: var(--type-label); min-width: 0; }
.mode span { font-size: var(--type-meta); white-space: normal; line-height: 1.5; }
.mode-picker { gap: 20px; }
.hero-description, .how-step p, .panel-intro, .pause-help, .end-advice,
.upgrade-card p, .daily-info p, .training-panel p, .guide-heading p,
.guide-entry-heading p, .guide-step-detail, .guide-notes p, .pilot-badge p,
.archive-empty p, .archive-note, .sector-report-copy p { font-size: var(--type-body); line-height: 1.65; color: #b7cbd1; }
.primary-btn { font-size: var(--type-body); min-height: 62px; height: auto; padding-block: 20px; gap: 16px; }
.secondary-btn, .text-btn, .guide-launch, .pilot-links .mono, .how-step strong { font-size: var(--type-label); }
.text-btn { min-height: 44px; }
.guide-launch { flex-wrap: wrap; line-height: 1.6; }
.guide-launch > span:last-child { font-size: var(--type-meta); color: #b7cbd1; }
.pilot-links { gap: 12px; }
.pilot-links button { min-width: 0; }
.pilot-links small { font-size: var(--type-label); line-height: 1.5; }
.panel { width: 640px; }
.panel h2, .upgrade-panel h2, .training-panel h2 { font-size: calc(32px * var(--text-scale)); }
.panel h2, .upgrade-panel h2, .training-panel h2, .archive-title h2 { line-height: 1.15; }
.stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.stats-grid span { letter-spacing: .4px; color: #b7cbd1; }
.end-top, .sector-report, .sector-report-copy { min-width: 0; }
.end-top { flex-wrap: wrap; }
.sector-report { max-width: 100%; flex-wrap: wrap; }
.sector-report-copy > strong, .end-achievements { font-size: var(--type-body); }
.sector-reward { white-space: normal; }
.upgrade-panel { width: 1120px; }
.upgrade-choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
.upgrade-card strong, .pilot-badge h3 { font-size: var(--type-title); line-height: 1.3; }
.upgrade-card .upgrade-key { color: #b7cbd1; }
.upgrade-card .upgrade-type { letter-spacing: 1px; }
.muted, .end-mode { color: #a5b9c1; }

/* Solid surfaces keep contrast independent of arena glow and particles. */
#hud { display: grid; grid-template-columns: 1fr minmax(260px,400px) 1fr; align-items: start; gap: 16px; padding: 16px 24px; background: transparent; }
#hud:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.hud-score, .hud-mission, .hud-systems { background: #080d13; border: 1px solid #a2ffd72b; padding: 12px 14px; border-radius: 3px; }
.hud-score { justify-self: start; min-width: 0; }
.hud-mission { position: static; transform: none; width: auto; min-width: 0; }
.hud-systems { justify-self: end; gap: 14px; }
.system-meters { width: 170px; }
.mission-title { gap: 14px; flex-wrap: wrap; }
.mission-title, .mission-goal, .shield-label, .meter-row, .hud-score .eyebrow { font-size: var(--type-label); letter-spacing: .4px; }
.record-line { color: #a5b9c1; display: block; }
.record-line b { display: inline-block; }
.meter-row { color: #b7cbd1; }
.meter-track { flex: 1; min-width: 35px; }
.icon-btn { min-width: 36px; min-height: 36px; }
.contract-hud { font-size: var(--type-label); line-height: 1.5; color: #b7cbd1; }
.contract-hud small { font-size: var(--type-meta); color: #b7cbd1; letter-spacing: .3px; }
.contract-hud.failed { color: #b7cbd1; }
#bossStatus { font-size: var(--type-label); }
.controls-hint { background: #080d13; border: 1px solid #a2ffd72b; padding: 10px 14px; color: #b7cbd1; font-size: var(--type-label); gap: 14px; flex-wrap: wrap; justify-content: center; }
.loadout { max-width: 28%; }
.loadout span { background: #080d13; color: #b7cbd1; }
.nova-button { width: 112px; height: 112px; flex-shrink: 0; color: #b7cbd1; }
.nova-button > span:not(.nova-glyph) { font-size: var(--type-meta); background: #0d2028; padding: 2px; }
.nova-button small { color: #b7cbd1; background: #080d13; padding: 3px 5px; bottom: -24px; right: 0; white-space: normal; width: max-content; max-width: 180px; text-align: center; }
.combo-badge { background: #080d13; padding: 10px; max-width: calc(100% - 40px); top: var(--hud-bottom,193px); }
.combo-badge > div { color: #b7cbd1; }
.announcement { background: #080d13; padding: 22px; width: min(760px,calc(100% - 32px)); left: 50%; transform: translateX(-50%); }
.announcement p { font-size: var(--type-body); }
.training-panel { width: min(580px,calc(100% - 180px)); max-width: none; background: #101e27; }
.training-top .text-btn, .training-top .mono { font-size: var(--type-meta); }
.training-top { flex-wrap: wrap; }

/* Handbooks reflow by their own window width, including after resizing. */
.guide-layout { grid-template-columns: 260px minmax(0,1fr); }
.guide-top, .guide-brand, .guide-heading, .guide-entry-heading { flex-wrap: wrap; }
.guide-top { padding-block: 12px; gap: 12px; }
.guide-brand { font-size: var(--type-label); letter-spacing: 1px; }
.guide-edition, .guide-coordinate, .guide-tabs button small, .guide-steps small,
.guide-footer, .guide-stage-bottom > span { color: #a5b9c1; }
.guide-tabs { background: #091218; gap: 24px; }
.guide-tabs button, .guide-steps button, .guide-object strong { font-size: var(--type-label); color: #b7cbd1; }
.guide-tabs button small, .guide-object small { font-size: var(--type-meta); }
.guide-object small { color: #a5b9c1; letter-spacing: .3px; line-height: 1.6; }
.guide-object { gap: 8px; padding-block: 14px; }
.guide-index-label, .guide-facts span, .guide-stage-top { color: #b7cbd1; }
.guide-object-arrow { color: #a5b9c1; }
.guide-entry-tag { letter-spacing: .7px; }
.guide-stage { background: #081217; }
.guide-stage-top, .guide-stage-bottom { flex-wrap: wrap; line-height: 1.5; }
.guide-stage-bottom > span { max-width: none; flex: 1 1 180px; }
.guide-stage-bottom button { min-height: 44px; font-size: var(--type-meta); }
.guide-steps { flex-wrap: wrap; }
.guide-steps button { white-space: normal; min-width: 90px; line-height: 1.5; }
.guide-facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
.guide-facts span { line-height: 1.6; }
.guide-footer { flex-wrap: wrap; line-height: 1.6; }
.guide-footer span:last-child { max-width: none; text-align: left; }
.guide-coordinate { font-size: var(--type-meta); }
.guide-canvas-labels { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 16px; color: #b7cbd1; background: #081217; font: var(--type-label)/1.6 Consolas,monospace; border-top: 1px solid #a2ffd72b; }
.guide-canvas-labels:empty { display: none; }
.pilot-badges { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.pilot-badge { min-width: 0; }
.badge-state, .archive-section-title .mono, .run-row small { color: #a5b9c1; }
.run-row { font-size: var(--type-body); }
.run-row strong, .run-row small { font-size: var(--type-meta); }
.archive-section-title { flex-wrap: wrap; }
.pilot-totals { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pilot-totals span { line-height: 1.5; }

@container archive (max-width: 1000px) {
  .guide-layout { grid-template-columns: 220px minmax(0,1fr); }
  .guide-object strong { font-size: var(--type-label); }
  .guide-object small { font-size: var(--type-meta); }
}
@container archive (max-width: 700px) {
  .guide-layout { display: block; }
  .guide-object { min-width: 220px; }
  .guide-heading p, .guide-entry-heading p, .guide-step-detail, .guide-notes p { font-size: var(--type-body); }
  .guide-brand, .guide-tabs button, .guide-steps button { font-size: var(--type-label); }
  .guide-stage-top, .guide-stage-bottom > span, .guide-footer, .guide-facts span { font-size: var(--type-meta); }
  .guide-tabs button { flex-shrink: 0; }
  .guide-facts { gap: 12px; }
  .guide-facts > div { padding-inline: 0; border: 0; }
}
@media (max-width: 1100px) {
  #hud { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; }
  .hud-mission { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: min(100%,480px); }
  .hud-systems { grid-column: 2; grid-row: 1; }
  .controls-hint { display: none; }
  .combo-badge { top: var(--hud-bottom, 245px); }
}
@media (max-width: 760px) {
  .hero-copy { width: 100%; max-width: none; }
  .menu-content { min-height: 0; }
  .menu-screen { padding: 20px; background: #080d13f5; }
  .mode-picker { gap: 12px; }
  .mode { flex: 1; font-size: var(--type-label); }
  .mode span { font-size: var(--type-meta); }
  .start-meta { gap: 16px; flex-wrap: wrap; }
  .pilot-links { grid-template-columns: 1fr; }
  .pilot-links button + button { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .menu-bottom > div { gap: 12px; justify-content: flex-start; }
  .menu-bottom { justify-content: flex-start; }
  .hud-score, .hud-mission, .hud-systems { padding: 8px; }
  .hud-systems { gap: 7px; }
  .system-meters { width: 145px; }
  .hud-score > strong { font-size: 30px; }
  .hud-score { align-self: start; }
  .utility-buttons { gap: 4px; }
  .icon-btn { min-width: 32px; min-height: 32px; }
  .mission-title { justify-content: space-between; }
  .loadout { max-width: calc(100% - 135px); }
  .announcement { top: 38%; }
  .nova-button { width: 100px; height: 100px; }
  .training-panel { width: calc(100% - 32px); left: 16px; bottom: 16px; padding: 16px; }
  body.training .nova-button { bottom: var(--training-height,240px); right: 0; }
  .panel { padding: 24px 18px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .upgrade-choices { grid-template-columns: 1fr; }
  .upgrade-card { padding: 22px; min-height: 0; }
  .upgrade-art { position: static; width: 100%; height: 112px; transform: none; margin: 0 0 12px; }
  .upgrade-art img { width: 150px; }
  .upgrade-card strong { font-size: var(--type-title); }
  .upgrade-card p { font-size: var(--type-body); }
  .sector-report { padding: 16px; }
  .sector-report-copy { flex-basis: 65%; }
  .archive-body { padding: 24px 16px; }
  .pilot-totals > div + div { padding-left: 12px; }
  .run-table-head, .run-row { grid-template-columns: 1.6fr 1fr .6fr .6fr; gap: 8px; }
}
/* At larger text settings, use the roomy reading layouts at any screen width. */
html[data-large-text] .hero-copy { max-width: 100%; width: 760px; }
html[data-large-text] .menu-footer { grid-template-columns: 1fr; }
html[data-large-text] .mode-picker, html[data-large-text] .pilot-links { display: flex; flex-direction: column; }
html[data-large-text] .mode { text-align: left; }
html[data-large-text] .hero-art-caption { display: none; }
html[data-large-text] .upgrade-choices { grid-template-columns: 1fr; }
html[data-large-text] .guide-layout { display: block; }
html[data-large-text] #guideObjects { display: flex; overflow-x: auto; gap: 12px; }
html[data-large-text] .guide-object { min-width: 280px; width: 280px; flex-shrink: 0; }
html[data-large-text] .guide-notes { grid-template-columns: 1fr; }
html[data-large-text] .pilot-badges { grid-template-columns: 1fr; }
html[data-large-text] .run-table { overflow-x: auto; }
html[data-large-text] .run-row, html[data-large-text] .run-table-head { min-width: 640px; }
html[data-large-text] .training-panel { max-height: 45dvh; overflow-y: auto; }
html[data-large-text] .nova-button { width: 150px; height: 150px; }
html[data-large-text] .nova-button small { display: none; }
html[data-large-text] #hud { max-height: 45dvh; overflow-y: auto; pointer-events: auto; scrollbar-color: #78969a #080d13; }
@media (max-width: 760px) {
  .nova-button small { display: none; }
  html[data-large-text] .loadout { max-width: calc(100% - 170px); }
  html[data-large-text] .guide-brand { font-size: var(--type-meta); }
  html[data-large-text] .guide-edition { display: none; }
  html[data-large-text] .pilot-totals { grid-template-columns: 1fr; gap: 20px; }
  html[data-large-text] .pilot-totals > div + div { border: 0; padding: 0; }
  html[data-large-text] .guide-facts { grid-template-columns: 1fr; }
  html[data-large-text] .hud-score .record-line { max-width: 120px; }
  html[data-large-text] .hud-systems { flex-wrap: wrap; justify-content: flex-end; max-width: 190px; }
  html[data-large-text] .utility-buttons { flex-direction: row; }
  html[data-large-text] .meter-row, html[data-large-text] .shield-label { flex-wrap: wrap; }
  html[data-large-text] .mission-title { flex-direction: column; gap: 4px; }
}
@media (max-height: 540px) and (min-aspect-ratio: 7/5) {
  #hud { grid-template-columns: 1fr minmax(220px,1.5fr) 1fr; gap: 8px; padding: 8px; max-height: 45dvh; overflow-y: auto; pointer-events: auto; scrollbar-color: #78969a #080d13; }
  .hud-mission { grid-column: 2; grid-row: 1; }
  .hud-systems { grid-column: 3; }
  .hud-score { padding: 6px; }
  .training-panel { max-height: 45dvh; overflow-y: auto; width: min(50%,560px); }
  body.training .nova-button { bottom: 0; }
}
@media (pointer: coarse) {
  .start-key:after, .nova-button small:after { font-size: var(--type-meta); }
}