/* The game owns the viewport: header, one slim HUD and the playfield all fit at 1280x720 and up, and on a phone held
   sideways. Loaded after every other sheet; it replaces the stacked, page-scrolling layout that pushed the HUD off screen. */
:root { --sj-label: 12px; --sj-text: 15px; --sj-value: 19px; --sj-hit: 44px; }
@media (min-width: 1700px) { :root { --sj-label: 14px; --sj-text: 18px; --sj-value: 23px; } }

html, body { height: 100%; margin: 0; overflow: hidden; }
.game-shell { height: 100dvh; min-height: 0; max-height: 100dvh; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); }
.game-footer { display: none; }
.game-header { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.game-canvas-wrap { min-height: 0; height: auto; }
.game-canvas-wrap canvas { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.input-mode-chip, .offline-chip { font-size: var(--sj-label); }
.game-wordmark span { font-size: var(--sj-label); }

.hud { grid-template-columns: minmax(0, 1fr) 100px 124px 156px 124px; gap: 6px; padding: 6px 12px; align-items: stretch; }
@media (min-width: 1700px) { .hud { grid-template-columns: minmax(0, 1fr) 120px 150px 196px 150px; } }
/* a meter's value is never cut: the label takes what is left and wraps, the number keeps its width */
.meter-card { grid-template-columns: minmax(0, 1fr) auto; }
.meter-card span { min-width: 0; line-height: 1.1; overflow-wrap: normal; word-break: normal; }
.meter-card strong { white-space: nowrap; }
.objective-chip, .timer-chip, .meter-card { min-height: 46px; padding: 4px 10px; }
.objective-chip small { display: none; }
.objective-chip span, .timer-chip span, .meter-card span, .quota-chip span { font-size: var(--sj-label); letter-spacing: .08em; }
.objective-chip strong { font-size: var(--sj-text); }
.timer-chip strong { font-size: var(--sj-value); }
.meter-card strong { font-size: var(--sj-text); }
.mission-rail { grid-column: 1 / 5; gap: 6px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mission-rail li { padding: 2px 8px; font-size: var(--sj-label); }
.mission-rail i { width: 20px; height: 20px; font-size: var(--sj-label); }
.quota-chip { grid-column: 5; display: flex; align-items: baseline; gap: 6px; min-height: 0; padding: 2px 8px; min-width: 0; }
.quota-chip { white-space: nowrap; overflow: hidden; }
.quota-chip span { display: none; }
.quota-chip strong { font-size: var(--sj-label); }
.quota-chip small { display: none; }

.tool-rack > button span { font-size: var(--sj-label); }
.tool-rack > button kbd { font-size: var(--sj-label); }
.tool-readout span { font-size: var(--sj-text); }
.tool-readout small { font-size: var(--sj-label); }
.coach-card span { font-size: var(--sj-label); }
.coach-card p { font-size: var(--sj-label); }
.toast { font-size: var(--sj-text); }

/* short desktop windows: the briefing and result cards scroll inside the playfield instead of spilling out of it */
.overlay { overflow: auto; padding: 8px; }
.radio-card, .panel-card { max-height: 100%; overflow: auto; }
.radio-card { --pad-x: 22px; --pad-b: 14px; padding: 16px var(--pad-x) var(--pad-b); }
@media (max-height: 800px) {
  .radio-card { --pad-x: 20px; padding-top: 14px; }
  .radio-card h1 { font-size: 2.4rem; margin: 0 0 6px; }
  .contract-grid { gap: 6px; }
  .contract-grid > div { padding: 7px 9px; }
  .control-primer { margin: 8px 0; }
}

/* phones and small windows: one slim bar (HUD on the left, Settings and Pause on the right), controls over the letterbox bars */
@media (pointer: coarse), (max-width: 860px), (max-height: 500px) {
  .game-shell { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
  .game-header { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: 0; padding: 2px 6px 2px 0; border-bottom: 0; background: rgba(7, 17, 31, .96); }
  .game-header .back-link, .game-header .game-wordmark, .game-header .input-mode-chip, .game-header .offline-chip,
  .game-header .fullscreen-button, .game-header .assist-badge { display: none; }
  .header-actions { gap: 4px; }
  .icon-button { min-width: var(--sj-hit); min-height: var(--sj-hit); padding: 0 10px; font-size: var(--sj-text); }
  .hud { grid-column: 1; grid-row: 1; position: relative; grid-template-columns: minmax(0, 1fr) 70px 96px 96px; padding: 2px 6px; gap: 4px; border-bottom: 0; }
  .hud .meter-card[data-tug-integrity] { display: none; }
  .hud .mission-rail, .hud .quota-chip { display: none; }
  .hud [data-cargo-integrity] span::after { font-size: var(--sj-label); }
  .hud .tension-card { position: relative; right: auto; top: auto; width: auto; }
  .objective-chip, .timer-chip, .meter-card { min-height: 44px; padding: 2px 8px; }
  .objective-chip strong { font-size: var(--sj-label); line-height: 1.15; }
  .timer-chip strong { font-size: var(--sj-text); }
  .meter-card strong { font-size: var(--sj-label); }
  .game-canvas-wrap { grid-column: 1 / -1; grid-row: 2; }
  .tool-rack { left: 50%; bottom: 6px; transform: translateX(-50%); gap: 4px; }
  .tool-rack > button { min-width: 56px; min-height: var(--sj-hit); padding: 2px 6px; }
  .tool-rack > button kbd { display: none; }
  .tool-readout { display: none; }
  .touch-controls { bottom: 6px; }
  .touch-controls button { min-width: var(--sj-hit); min-height: var(--sj-hit); }
  /* top: auto, or the short-landscape top: 8px of space-junk-experience.css stretches the card over the top of the field */
  .coach-card { left: 50%; top: auto; transform: translateX(-50%); bottom: 58px; width: min(440px, calc(100% - 300px)); padding: 6px 10px; gap: 8px; }
  .coach-card strong { font-size: var(--sj-text); margin-bottom: 2px; }
  .coach-card button { flex-basis: var(--sj-hit); width: var(--sj-hit); height: var(--sj-hit); }
  .radio-card { --pad-x: 16px; --pad-b: 12px; padding-top: 12px; }
  .radio-card h1 { font-size: 1.9rem; margin: 0 0 4px; }
}

/* Launch is always in view, at every window size: the briefing scrolls inside its card under an action bar pinned to the
   card's bottom edge (the installer window is 1280x720, where the full briefing is taller than the playfield). */
.radio-card .overlay-actions { position: sticky; bottom: calc(-1 * var(--pad-b)); z-index: 2; margin: 10px calc(-1 * var(--pad-x)) calc(-1 * var(--pad-b)); padding: 10px var(--pad-x) var(--pad-b); border-top: 1px solid rgba(7, 17, 31, .14); background: linear-gradient(180deg, rgba(196, 211, 217, .86), #c4d3d9 40%); }
@media (max-height: 560px) {
  .radio-card .overlay-actions { padding-top: 8px; }
  .radio-card .overlay-actions .secondary { display: none; }
}

/* Region 4's inspection read-out: a compact strip in the corner instead of four cards across the whole playfield */
.disposal-hud { left: auto; right: 12px; top: 10px; width: min(560px, calc(100% - 24px)); gap: 5px; }
.disposal-hud > div { grid-template-columns: 24px 1fr; column-gap: 6px; padding: 4px 8px; border-radius: 9px; }
.disposal-hud svg, .disposal-hud img { width: 24px; height: 24px; }
.disposal-hud span, .disposal-hud strong { font-size: var(--sj-label); }
@media (pointer: coarse), (max-width: 860px), (max-height: 500px) {
  .disposal-hud { grid-template-columns: repeat(4, auto); width: auto; gap: 3px; right: 6px; top: 6px; }
  .disposal-hud span { display: none; }
}

/* Region 3 heat read-out and Region 2 carrier meter: the same dark HUD as the rest of the game, 12px floor, tucked in the corner */
.sunward-thermal-hud { top: 10px; right: 12px; left: auto; width: auto; grid-template-columns: 112px 112px 100px; gap: 8px; padding: 6px 10px; background: rgba(7, 17, 31, .9); color: #dce7e8; border: 2px solid #31495b; border-radius: 9px; box-shadow: none; }
.sunward-thermal-hud span, .sunward-thermal-hud strong, .sunward-thermal-hud small { font-size: var(--sj-label); }
.sunward-thermal-hud i { height: 9px; border-color: #31495b; }
.sunward-thermal-hud strong[data-state="critical"], .sunward-thermal-hud strong[data-state="damage"], .sunward-thermal-hud[data-flare="true"] [data-flare-time] { color: #ff8f86; }
.sunward-forecast strong { font-size: var(--sj-text); }
.relay-signal-meter { top: 10px; right: 12px; padding: 5px 9px; }
.relay-signal-meter > span, .relay-signal-meter strong { font-size: var(--sj-label); }
@media (pointer: coarse), (max-width: 860px), (max-height: 500px) {
  .sunward-thermal-hud { grid-template-columns: repeat(3, auto); top: 6px; right: 6px; left: auto; transform: none; padding: 3px 6px; gap: 6px; }
  .relay-signal-meter { top: 6px; right: 6px; padding: 3px 6px; }
}

/* The contract board is not a shift: hide the shift read-outs and the objective rail behind it. */
[data-sj-board] .hud, [data-sj-board] .mission-rail, [data-sj-board] .coach-card { visibility: hidden; }
/* Short landscape phones: the meter names (CARGO, TENSION) sit on one line beside their value instead of breaking a word. */
@media (max-height: 500px) and (orientation: landscape) {
  .hud .meter-card span, .hud .meter-card span::after { white-space: nowrap; letter-spacing: .02em; }
}