/* A phone held sideways gets a large flight window and a separate thumb console.
   Both housings are crops of the same illustrated mobile cockpit, with live type
   and controls above them. Desktop layouts wider than 1100px are untouched. */
@media (min-aspect-ratio: 10001/10000) and (max-height: 600px) and (max-width: 1100px) {
  body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #020a12;
  }
  #app {
    --landscape-console: clamp(238px, 31.5vw, 326px);
    --landscape-board: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 64px);
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-width: none;
    aspect-ratio: auto;
    background: #031321;
  }
  #app :is(.cockpit-shell, .startup-cockpit-video, .nuclear-lights-frame) { display: none !important; }
  #app :is(footer, .history-strip, .mission-map) { display: none; }

  .mobile-cockpit-art { display: block; position: absolute; inset: 0; z-index: 2; border: 0; background: none; pointer-events: none; }
  .mobile-cockpit-art::before,
  .mobile-cockpit-art::after { content: ''; position: absolute; pointer-events: none; background-image: url('../../public/assets/ui-v23-mobile/mobile-cockpit.png'); background-repeat: no-repeat; }
  .mobile-cockpit-art::before {
    left: 8px; right: calc(var(--landscape-console) + 24px); top: 48px; bottom: 8px;
    background-size: 100% 208.460635%; background-position: center 25.135428%;
  }
  .mobile-cockpit-art::after {
    right: 8px; top: 56px; bottom: 8px; width: var(--landscape-console);
    background-size: 100% 249.859155%; background-position: center bottom;
  }
  #arena {
    /* Render beneath the metal, rather than stopping at an estimated inner edge.
       The outer corner clip prevents scenery escaping beyond the housing. */
    left: 8px; right: calc(var(--landscape-console) + 24px);
    top: 48px; bottom: 8px; width: auto; height: auto; border: 0; border-image: none; z-index: 1;
    clip-path: polygon(5% 0, 95% 0, 100% 8%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 0 8%);
  }
  #arena::after { background: linear-gradient(0deg, #020912b0, transparent 18%); }
  .brand { left: calc((100% - var(--landscape-console) - 16px) * .5); top: -8px; width: min(246px, calc(100% - var(--landscape-console) - 168px)); transform: translateX(-50%); z-index: 7; filter: drop-shadow(0 2px 3px #0008); }
  #sound-button, #fullscreen-button { top: 2px; width: 68px; height: 44px; min-width: 44px; min-height: 44px; border: 0; padding: 0; background-image: url('../../public/assets/ui-v23-mobile/mobile-cockpit.png'); background-size: 412.55814% 1323.880597%; background-repeat: no-repeat; z-index: 7; }
  #fullscreen-button { left: 8px; background-position: left top; }
  #sound-button { left: auto; right: calc(var(--landscape-console) + 24px); background-position: right top; }
  #fullscreen-button > svg, #sound-button > svg { position: absolute; top: 50.75%; transform: translate(-50%, -50%); }
  #fullscreen-button > svg { left: 42.56%; }
  #sound-button > svg { left: 58.84%; }
  .icon-button svg { width: 23px; height: 23px; filter: drop-shadow(0 0 3px #087aaa); }

  .wallet { left: auto; right: 8px; top: 6px; width: var(--landscape-console); height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; border: 0; background: none; overflow: hidden; }
  .wallet::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('../../public/assets/ui-v23-mobile/mobile-cockpit.png') center 7.747318% / 132.38806% 1847.916667% no-repeat; pointer-events: none; }
  .wallet .coin { width: 27px; height: 27px; min-width: 27px; max-width: 27px; flex: 0 0 27px; object-fit: contain; }
  .wallet #balance { width: auto; min-width: 0; max-width: calc(100% - 35px); flex: 0 1 auto; font-size: calc(21px * var(--amount-scale, 1)); line-height: 1; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px #532009; }

  .nuclear-meter, .multiplier-panel { width: calc(var(--landscape-console) * .4); aspect-ratio: auto; padding: 0; background: none; transform: none; filter: none; }
  .nuclear-meter { left: auto; right: calc(8px + var(--landscape-console) * .5152097); top: calc(56px + var(--landscape-board) * .03471831); width: calc(var(--landscape-console) * .46); height: calc(var(--landscape-board) * .17); }
  .nuclear-meter-art { display: block; content: url('../../public/assets/ui-v24-mobile/nuclear-collector.png'); width: 100%; height: 100%; object-fit: fill; }
  .nuclear-meter::before { content: 'NUCLEAR'; position: absolute; left: 25%; right: 25%; top: 16.5%; bottom: auto; height: auto; z-index: 2; text-align: center; font-size: 9px; line-height: 1; text-box: trim-both cap alphabetic; font-weight: 800; letter-spacing: .06em; color: #dfb6ff; transform: translateY(-50%); }
  .nuclear-canisters { left: 3.7%; right: 3.7%; top: 32%; bottom: 25%; gap: 0; }
  .nuclear-canister img { left: 0; width: 100%; filter: none; }
  .nuclear-canister:not(.is-collected) img { opacity: 0; }
  .nuclear-canister.is-collected img { filter: drop-shadow(0 0 3px #ca6aff); opacity: 1; }
  .nuclear-meter-status { left: 25%; right: 25%; top: 88%; bottom: auto; height: auto; font-size: 8px; letter-spacing: 0; line-height: 1; text-box: trim-both cap alphabetic; transform: translateY(-50%); }
  .nuclear-meter-track { display: none; }
  .multiplier-panel { left: auto; right: calc(8px + var(--landscape-console) * .02310259); top: calc(56px + var(--landscape-board) * .03471831); width: calc(var(--landscape-console) * .46); height: calc(var(--landscape-board) * .17); background: url('../../public/assets/ui-v25-mobile/multiplier-housing.png') center / 100% 100% no-repeat; }
  .multiplier-panel .panel-label { position: absolute; left: 28%; right: 28%; top: 14%; bottom: auto; width: auto; height: auto; padding: 0; background: none; font-size: 8px; line-height: 1; text-box: trim-both cap alphabetic; letter-spacing: .02em; color: #f2d7ff; text-align: center; transform: translateY(-50%); }
  .multiplier-panel #multiplier { position: absolute; left: 13%; right: 13%; top: 31%; width: 74%; height: 38%; margin: 0; font-size: 24px; line-height: 1; }
  .multiplier-panel .potential { left: 18%; right: 18%; top: 85%; bottom: auto; height: 9px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; transform: translateY(-50%); }
  .multiplier-panel .potential::before { display: none; }
  .multiplier-panel .potential > span { top: 0; max-width: none; flex: 0 0 auto; font-size: 5.5px; line-height: 1; letter-spacing: 0; white-space: nowrap; transform: none; }
  .multiplier-panel .potential #potential { top: 0; width: auto; min-width: 0; max-width: 54%; font-size: calc(8px * var(--amount-scale, 1)); line-height: 1; transform: none; }

  .power-panel { left: auto; right: calc(8px + var(--landscape-console) * .057); top: calc(56px + var(--landscape-board) * .205); width: calc(var(--landscape-console) * .886); height: 44px; min-height: 44px; background: none; border: 0; box-shadow: none; overflow: visible; z-index: 4; }
  .power-panel::before, .collections-title { display: none; }
  #mobile-collections-button { display: flex; position: absolute; inset: 0; width: 100%; height: 44px; min-height: 44px; align-items: center; justify-content: space-between; padding: 0 3px; border: 0; background: transparent; color: #b7ddee; font-size: 8px; font-weight: 700; letter-spacing: .02em; z-index: 4; }
  #mobile-collections-button > span:first-child { width: 24%; text-align: left; }
  #mobile-collections-button > span:last-child { font-size: 25px; color: #77daff; }
  .collections-feed { inset: 1px 7% 1px calc(25% + 6px); display: block; padding: 0; overflow: hidden; pointer-events: none; scrollbar-width: none; }
  .collections-feed:empty::after { content: 'Your first pickup awaits'; display: flex; align-items: center; height: 100%; color: #97b7c9; font-size: 10px; font-weight: 500; }
  .collections-feed .collection-entry { display: none; height: 100%; min-height: 0; border: 0; padding: 0; animation: none; }
  .collections-feed .collection-entry:first-child { display: block; }
  .collections-feed .collection-face { padding: 0; transform: none; }
  .collections-feed .collection-card-art { display: none; }
  .collections-feed .collection-entry .item-art { left: 0; top: 5px; width: 31px; height: 31px; }
  .collections-feed .collection-copy { left: 35px; right: 1px; top: 9px; bottom: 9px; }
  .collections-feed .collection-copy b { font-size: 10px; line-height: 1.1; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .collections-feed .collection-copy small { font-size: 8px; line-height: 1; max-width: 62%; letter-spacing: 0; }
  .collections-feed .collection-entry .collection-value { right: 0; bottom: 9px; min-width: 0; font-size: 10px; line-height: 1; }
  .collections-feed .collection-entry:is([data-type=uranium], [data-type=minigun], [data-type=grow], [data-type=nuclear], [data-kind=neutralized]) .collection-value { font-size: 8px; }

  /* Source-space well centres: minus (94.5,1364), input (443.5,1364),
     plus (791,1364). Hitboxes remain 44px while their blue faces fit the art. */
  .stake-control { left: auto; right: 8px; top: calc(34px + var(--landscape-board) * .422535211); width: var(--landscape-console); height: 44px; min-height: 44px; aspect-ratio: auto; background: none; filter: none; }
  .stake-control::before { content: 'BET'; position: absolute; left: 25%; right: 25%; top: 7px; text-align: center; font-size: 9px; line-height: 1; letter-spacing: .14em; font-weight: 800; color: #9bcde5; pointer-events: none; }
  .stake-input button { top: 0; width: 44px; height: 44px; min-height: 44px; min-width: 44px; padding: 0; font-size: 0; color: #7ddcff; background: none; clip-path: none; text-shadow: none; }
  .stake-input #stake-minus { left: calc(var(--landscape-console) * .106538895 - 22px); }
  .stake-input #stake-plus { left: calc(var(--landscape-console) * .891770011 - 22px); }
  .stake-input button::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--landscape-console) * .12); height: calc(var(--landscape-board) * .0845); transform: translate(-50%, -50%); border: 1px solid #68c9f5; background: linear-gradient(#168bc4, #06488a 48%, #052766 51%, #085f9f); clip-path: polygon(9% 0, 91% 0, 100% 12%, 100% 88%, 91% 100%, 9% 100%, 0 88%, 0 12%); pointer-events: none; }
  .stake-input button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); background: linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat; filter: drop-shadow(0 0 2px #29aaff80); pointer-events: none; }
  .stake-input #stake-plus::after { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 18px 2px, 2px 18px; }
  .stake-input input { left: 23%; top: 0; width: 54%; height: 44px; padding: 11px 0 0; font-size: 22px; line-height: 1; }
  .stake-presets { display: none; }
  .launch-control { left: auto; right: calc(8px + var(--landscape-console) * .083); top: calc(56px + var(--landscape-board) * .55); width: calc(var(--landscape-console) * .834); height: calc(var(--landscape-board) * .18); min-height: 44px; aspect-ratio: auto; background: none; }
  #launch-button, #launch-button[data-art-label=true], #launch-button[data-wormhole-spin=true] { overflow: hidden; background: url('../../public/assets/ui-v23-mobile/mobile-cockpit.png') left calc(var(--landscape-console) * -.083) top calc(var(--landscape-board) * -2.04859155) / var(--landscape-console) calc(var(--landscape-board) * 2.49859155) no-repeat; }
  #launch-button::before { background: linear-gradient(100deg, transparent, #ffddad33, transparent); clip-path: polygon(5% 0, 95% 0, 100% 25%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 0 25%); }
  /* Flat red face is centred on source y1510, independent of the metal base. */
  #launch-button #launch-label { left: 50%; top: 43.42723%; width: 94%; font-size: clamp(16px, 2.4vw, 20px); line-height: 1; text-box: trim-both cap alphabetic; letter-spacing: .035em; white-space: nowrap; transform: translate(-50%, -50%); text-shadow: 0 2px 1px #742306; }
  #launch-lettering { left: 50%; top: 43.42723%; width: 54%; transform: translate(-50%, -45.8667%); }
  #wormhole-spin-lettering { left: 50%; top: 43.42723%; width: 84%; transform: translate(-50%, -50.8333%); }
  #launch-button > .idle-button-shine { clip-path: polygon(6% 4%, 94% 4%, 100% 24%, 100% 76%, 94% 95%, 6% 95%, 0 76%, 0 24%); }

  .utility-controls { display: contents; position: static; }
  .utility-controls .icon-button, #speed-button { position: absolute; left: auto; top: calc(56px + var(--landscape-board) * .769084507); bottom: auto; width: calc(var(--landscape-console) * .22); height: calc(var(--landscape-board) * .19); min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none; z-index: 5; transform: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; filter: none; }
  .utility-controls #rules-button { left: auto; top: calc(56px + var(--landscape-board) * .769084507); right: calc(8px + var(--landscape-console) * .74394589); }
  .utility-controls #mobile-log-button { right: calc(8px + var(--landscape-console) * .50837655); }
  .utility-controls #settings-button { left: auto; top: calc(56px + var(--landscape-board) * .769084507); right: calc(8px + var(--landscape-console) * .27162345); }
  #speed-button { right: calc(8px + var(--landscape-console) * .03656144); }
  #rules-button::after { content: 'GUIDE'; }
  #settings-button::after { content: 'SETTINGS'; }
  .utility-controls .icon-button::after, #mobile-log-button > span, #speed-button b, #speed-button > span { font-size: 8px; line-height: 1; letter-spacing: .03em; font-weight: 700; color: #c2e6f3; }
  #speed-button::before, #speed-button::after, #speed-button > i { display: none; }
  #speed-button b, #speed-button > span { display: block; position: static; width: auto; transform: none; }
  #speed-button b { color: #80deff; font-size: 11px; }
  #speed-button > span { color: #8caebe; }
  #speed-button[aria-pressed=true] b, #speed-button[aria-pressed=true] > span { color: #b9ff8a; }
  .utility-controls .icon-button:active:not(:disabled) { transform: translateY(1px); }

  .bottom-telemetry { left: 8%; right: 8%; bottom: 8%; gap: 18px; }
  .course-caption { font-size: 9px; letter-spacing: 0; }
  .course-caption b { font-size: 12px; }
  .course-caption small { font-size: 8px; }
  .course-line { height: 3px; margin-top: 5px; }
  .course-line > i { height: 6px; top: -2px; }
  #course-orb { width: 6px; height: 6px; top: -2px; }
  .energy { width: 96px; }
  .energy > div:first-child { font-size: 8px; }
  .energy .energy-meter { height: 7px; margin-top: 5px; }
  #event-text.terminal-messages { top: 8%; left: 8%; width: 72%; max-width: 72%; font-size: 19px; }
  .power-status-list { top: 8%; right: 7%; width: 112px; gap: 2px; }
  .power-status-card { height: 36px; min-height: 36px; }
  .power-status-copy > b { font-size: 10px; }
  .power-status-time { font-size: 11px; }
  .power-status-detail small { font-size: 7px; }
  #resume-button.primary { width: 76%; min-height: 64px; font-size: 23px; }
  .nuclear-alert { left: calc((100% - var(--landscape-console) - 16px) * .5); width: calc(100% - var(--landscape-console) - 64px); }
  .nuclear-alert > span { font-size: 10px; letter-spacing: 3px; }
  .nuclear-alert > strong { font-size: 38px; }
  .nuclear-alert > small { font-size: 9px; }
  .wormhole-wheel-title { font-size: 20px; }
  .wormhole-wheel-footer { bottom: 8%; }
  .wormhole-wheel-formula { white-space: normal; }
  .wormhole-wheel:not(.is-revealed) .wormhole-wheel-formula { font-size: 12px; }

  /* The same presentation clock reveals portrait and landscape artwork. */
  #app.startup-armed .mobile-cockpit-art { opacity: clamp(0, calc((1 - var(--startup-screen-veil, 1)) * 1.12), 1); filter: blur(calc(var(--startup-screen-blur, 0px) * .28)); transition: none; }
  #app.startup-armed[data-startup-stage='waiting'] .mobile-cockpit-art { opacity: 0; }
  #app.startup-armed :is(#mobile-log-button, #mobile-collections-button) { opacity: 0; visibility: hidden; pointer-events: none; }
  #app.startup-armed:has(.power-panel.startup-revealed) #mobile-collections-button,
  #app.startup-armed:has(.history-strip.startup-revealed) #mobile-log-button { opacity: 1; visibility: visible; pointer-events: auto; animation: startupInstrumentOnline .7s ease-out; }
  #app.startup-suspended :is(#mobile-log-button, #mobile-collections-button) { animation-play-state: paused !important; }
  .reduced-motion #app.startup-armed .mobile-cockpit-art { filter: none; }
  .reduced-motion #app.startup-armed :is(#mobile-log-button, #mobile-collections-button) { animation: none !important; }

  /* Reuse calibrated source-space lamps inside the two new crops. */
  #app :is(.nuclear-lights-panel, .nuclear-lights-history-mobile, .nuclear-lights-portrait, .nuclear-lights-mobile-header) { display: none !important; }
  #app.nuclear-alarm .nuclear-lights-mobile-frame { display: block; position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
  #app .nuclear-lights-mobile-sides { left: 8px; right: calc(var(--landscape-console) + 24px); top: calc(48px + (100% - 56px) * .03290247); bottom: auto; width: calc(100% - var(--landscape-console) - 32px); height: calc((100% - 56px) * .944770858); }
  #app .nuclear-lights-mobile-footer { left: auto; right: 8px; top: 56px; bottom: 8px; width: var(--landscape-console); height: calc(100% - 64px); }
  #app .nuclear-lights-mobile .nuclear-lights-bloom { stroke-width: 15; filter: blur(4px); opacity: .5; }
  #app .nuclear-lights-mobile .nuclear-lights-tube { stroke-width: 5.5; }
  #app .nuclear-lights-mobile .nuclear-lights-core { stroke-width: 1.65; }
  #app.startup-armed .nuclear-lights-mobile-frame { display: none; }
}

@media (min-aspect-ratio: 10001/10000) and (max-height: 600px) and (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  #app.startup-armed .mobile-cockpit-art { filter: none; }
  #app.startup-armed :is(#mobile-log-button, #mobile-collections-button) { animation: none !important; }
}

/* Browser bars can leave less than 350px of height. The receipt stays readable;
   its complete history remains available through the full-size LOG button. */
@media (min-aspect-ratio: 10001/10000) and (max-height: 350px) and (max-width: 1100px) {
  .power-panel { height: 34px; min-height: 0; pointer-events: none; }
  #mobile-collections-button { display: none !important; }
  .power-panel::after { content: 'COLLECTIONS'; position: absolute; left: 3px; top: 13px; font-size: 8px; font-weight: 700; color: #b7ddee; letter-spacing: .02em; }
  .multiplier-panel .panel-label { top: calc(var(--landscape-board) * .064788732 - 5px); height: 10px; font-size: 8px; }
  .multiplier-panel .potential { top: calc(var(--landscape-board) * .174647887 - 9px); height: 8px; }
  .multiplier-panel .potential #potential { font-size: calc(8px * var(--amount-scale, 1)); }
}