:root {
  --ink:#172b33; --paper:#fff9ea; --sun:#f6c453; --orange:#ff6b4a;
  --red:#d7263d; --teal:#45c4b0; --deep:#1f4e5f; --space:#21243a;
  --violet:#6b5b95; --shadow:rgba(23,43,51,.24);
  --safe-top:max(16px,env(safe-area-inset-top));
  --safe-bottom:max(18px,env(safe-area-inset-bottom));
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:#ef9a62; color:var(--ink); font-family:Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif; }
button { font:inherit; }
#game { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

.screen { position:fixed; inset:0; z-index:40; display:none; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:clamp(22px,6vw,54px); text-align:center; background:linear-gradient(150deg,rgba(255,249,234,.97),rgba(246,196,83,.94)); }
.screen.visible { display:flex; }
.screen::before { content:""; position:absolute; inset:14px; border:3px solid var(--ink); border-radius:24px; pointer-events:none; box-shadow:8px 8px 0 rgba(23,43,51,.18); }
.screen h1 { margin:0; font-size:clamp(38px,10vw,84px); line-height:.86; letter-spacing:-.055em; max-width:900px; text-shadow:4px 4px 0 rgba(255,255,255,.7); }
.screen h2 { margin:0; font-size:clamp(34px,9vw,72px); line-height:.9; letter-spacing:-.045em; }
.screen p { margin:0; max-width:620px; font-size:clamp(14px,3.7vw,21px); line-height:1.35; font-weight:750; }
.screen .mission { color:#8d281f; }
.memo,.eyebrow,.signal { padding:6px 10px; background:var(--ink); color:var(--paper); border-radius:6px; font-size:11px; font-weight:900; letter-spacing:.16em; }
.primary { position:relative; z-index:2; margin-top:5px; min-height:58px; padding:15px 24px; border:3px solid var(--ink); border-radius:14px; background:var(--red); color:white; font-size:clamp(14px,3.5vw,19px); font-weight:1000; letter-spacing:.04em; box-shadow:0 7px 0 var(--ink); cursor:pointer; }
.primary:active { transform:translateY(5px); box-shadow:0 2px 0 var(--ink); }
.controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:11px; font-weight:900; }
.controls span { padding:6px 9px; border:2px solid var(--ink); border-radius:999px; background:rgba(255,255,255,.55); }

.briefing.transmission { display:none; overflow:hidden; padding:0; gap:0; background:#071217; color:var(--paper); isolation:isolate; }
.briefing.transmission.visible { display:flex; }
.briefing.transmission::before { z-index:8; inset:10px; border:1px solid rgba(247,243,232,.34); border-radius:2px; box-shadow:inset 0 0 0 1px rgba(215,38,61,.25); }
.transmission-frames,.transmission-frame,.transmission-frame picture,.transmission-frame img { position:absolute; inset:0; width:100%; height:100%; }
.transmission-frame { opacity:0; overflow:hidden; pointer-events:none; transition:opacity .72s cubic-bezier(.2,.65,.25,1); }
.transmission-frame.active { z-index:2; opacity:1; }
.transmission-frame.previous { z-index:1; opacity:1; }
.transmission-frame picture { display:block; }
.transmission-frame img { object-fit:cover; object-position:center; filter:saturate(1.06) contrast(1.04) brightness(.8); transform:scale(1.035); animation:transmission-drift 3.2s cubic-bezier(.2,.7,.2,1) both; }
.transmission-frame[data-frame="0"] img { object-position:55% center; }
.transmission-frame[data-frame="1"] img { object-position:48% center; }
.transmission-frame[data-frame="3"] img { object-position:52% center; }
.transmission-frame[data-frame="5"] img { object-position:center 58%; }
.transmission-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,12,18,.28) 0%,transparent 34%,rgba(5,12,18,.2) 54%,rgba(5,12,18,.94) 100%),linear-gradient(90deg,rgba(5,12,18,.35),transparent 52%); }
@keyframes transmission-drift { from{transform:scale(1.035) translate3d(0,0,0)} to{transform:scale(1.11) translate3d(-1.2%,-.5%,0)} }
.transmission-caption { position:absolute; z-index:3; left:max(28px,calc(env(safe-area-inset-left) + 20px)); right:max(28px,calc(env(safe-area-inset-right) + 20px)); bottom:max(76px,calc(env(safe-area-inset-bottom) + 64px)); max-width:min(780px,82vw); text-align:left; filter:drop-shadow(0 4px 18px rgba(0,0,0,.82)); }
.transmission-caption span { display:inline-block; margin-bottom:8px; padding:5px 8px; border-left:4px solid var(--red); background:rgba(7,18,23,.78); color:var(--sun); font-size:clamp(9px,1.2vw,12px); font-weight:1000; letter-spacing:.2em; }
.transmission-caption h1 { margin:0; max-width:900px; color:var(--paper); font-size:clamp(34px,7.2vw,88px); line-height:.86; letter-spacing:-.055em; text-wrap:balance; text-shadow:0 3px 0 #071217,0 7px 30px rgba(0,0,0,.86); }
.transmission-caption p { margin-top:10px; max-width:610px; color:var(--paper); font-size:clamp(14px,2.2vw,22px); font-weight:850; line-height:1.25; text-shadow:0 2px 8px #071217; }
.transmission-frame.active .transmission-caption span { animation:caption-signal .55s steps(5,end) both; }
.transmission-frame.active .transmission-caption h1 { animation:caption-rise .72s .08s cubic-bezier(.16,.8,.2,1) both; }
.transmission-frame.active .transmission-caption p { animation:caption-rise .68s .2s cubic-bezier(.16,.8,.2,1) both; }
.transmission.mission-armed .transmission-caption { opacity:0; transition:opacity .35s ease; }
@keyframes caption-rise { from{opacity:0;transform:translateY(24px);filter:blur(6px)} to{opacity:1;transform:none;filter:none} }
@keyframes caption-signal { 0%,35%{opacity:0;transform:translateX(-9px)} 40%,65%{opacity:1;transform:translateX(5px)} 70%,100%{opacity:1;transform:none} }
.transmission-chrome { position:absolute; z-index:6; inset:max(21px,var(--safe-top)) max(24px,calc(env(safe-area-inset-right) + 16px)) auto max(24px,calc(env(safe-area-inset-left) + 16px)); display:flex; flex-direction:column; gap:9px; color:var(--paper); font-size:clamp(8px,1.3vw,11px); font-weight:1000; letter-spacing:.15em; text-shadow:0 2px 5px #071217; }
.transmission-chrome > div:first-child { display:flex; align-items:center; gap:8px; }
.transmission-chrome > div:first-child i { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); animation:signal-blink .8s steps(2,end) infinite; }
.transmission-chrome > div:first-child span { margin-left:auto; font-variant-numeric:tabular-nums; }
@keyframes signal-blink { 50%{opacity:.28} }
.transmission-progress { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; width:100%; }
.transmission-progress i { height:3px; background:rgba(247,243,232,.28); }
.transmission-progress i.done { background:var(--red); box-shadow:0 0 8px rgba(215,38,61,.72); }
.transmission-static { position:absolute; z-index:5; inset:0; opacity:.13; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(247,243,232,.14) 4px); mix-blend-mode:screen; }
.transmission-static::after { content:""; position:absolute; inset:-30%; background:radial-gradient(circle,transparent 25%,rgba(7,18,23,.82) 72%); }
.mission-ready { position:absolute; z-index:7; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; padding:max(90px,var(--safe-top)) max(24px,calc(env(safe-area-inset-right) + 18px)) max(26px,calc(env(safe-area-inset-bottom) + 18px)) max(24px,calc(env(safe-area-inset-left) + 18px)); background:linear-gradient(180deg,rgba(7,18,23,.06) 18%,rgba(7,18,23,.72) 61%,rgba(7,18,23,.96) 100%); opacity:0; pointer-events:none; transition:opacity .7s ease; }
.mission-ready[hidden] { display:none; }
.mission-ready.revealed { opacity:1; pointer-events:auto; }
.mission-ready-copy { position:absolute; top:54.5%; left:max(22px,env(safe-area-inset-left)); right:max(22px,env(safe-area-inset-right)); display:flex; flex-direction:column; align-items:center; gap:clamp(17px,3vh,28px); transform:translateY(-50%); }
.mission-ready h2 { color:var(--paper); font:900 clamp(48px,9vw,92px)/.84 Impact,"Arial Narrow","Nimbus Sans Narrow",sans-serif; letter-spacing:.018em; text-transform:uppercase; text-shadow:0 3px 0 #531923,0 9px 32px rgba(0,0,0,.9); }
.mission-ready .mission-ready-story { display:grid; gap:7px; max-width:780px; color:var(--paper); font:800 clamp(13px,2.1vw,20px)/1.18 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.005em; text-shadow:0 2px 9px #071217; text-wrap:balance; }
.mission-ready-story span:first-child { color:#ff9298; }
.mission-ready-story span:nth-child(2) { color:#ffe2ad; }
.mission-ready-actions { position:absolute; left:22px; right:22px; bottom:calc(max(19px,var(--safe-bottom)) + 136px); display:flex; flex-direction:column; align-items:center; gap:9px; }
.replay-transmission { border:0; border-bottom:1px solid rgba(247,243,232,.7); padding:4px 2px; background:transparent; color:var(--paper); font-size:10px; font-weight:900; letter-spacing:.12em; cursor:pointer; }
.mission-ready .controls { color:var(--paper); }
.mission-ready .controls span { border-color:rgba(247,243,232,.55); background:rgba(7,18,23,.5); }
.briefing.exiting { pointer-events:none; animation:transmission-leave .9s cubic-bezier(.2,.7,.2,1) both; }
.briefing.exiting .transmission-frame img { animation:transmission-match-cut .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes transmission-leave { 0%{opacity:1} 56%{opacity:.82} 100%{opacity:0} }
@keyframes transmission-match-cut { to{transform:scale(1.24);filter:saturate(1.15) contrast(1.08) brightness(1.12)} }

/* The opening is live 3D, so the interface never hides the room behind a card. */
.briefing.breakroom-intro { display:none; padding:0; gap:0; overflow:hidden; background:transparent; color:var(--paper); pointer-events:none; isolation:isolate; }
.briefing.breakroom-intro.visible { display:flex; }
.briefing.breakroom-intro::before { display:none; }
.intro-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,16,23,.57),transparent 26%,transparent 55%,rgba(4,16,23,.68)); pointer-events:none; }
.intro-masthead { position:absolute; z-index:5; top:var(--safe-top); left:max(20px,env(safe-area-inset-left)); right:max(20px,env(safe-area-inset-right)); display:flex; align-items:center; gap:9px; color:var(--paper); font-size:clamp(9px,1.2vw,12px); font-weight:1000; letter-spacing:.13em; text-shadow:0 2px 7px #06131a; }
.intro-masthead span:last-child { margin-left:auto; font-variant-numeric:tabular-nums; }
.intro-dot { width:10px; height:10px; flex:none; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal); }
.breakroom-intro.code-red .intro-dot { background:var(--red); box-shadow:0 0 16px var(--red); animation:signal-blink .6s steps(2,end) infinite; }
.intro-bubble { position:absolute; z-index:5; left:50%; bottom:clamp(115px,18vh,195px); transform:translateX(-50%); display:flex; flex-direction:column; gap:5px; width:min(560px,calc(100vw - 36px)); padding:15px 20px 17px; border:3px solid var(--ink); border-radius:19px 19px 19px 4px; background:rgba(255,249,234,.97); color:var(--ink); text-align:left; box-shadow:0 7px 0 var(--ink),0 16px 40px rgba(0,0,0,.36); }
.intro-bubble[hidden] { display:none; }
.intro-bubble strong { color:#a82738; font-size:10px; letter-spacing:.17em; }
.intro-bubble span { font-size:clamp(19px,3.3vw,29px); font-weight:1000; line-height:1.08; letter-spacing:-.03em; text-wrap:balance; }
.intro-bubble.robot { border-color:#7e1427; background:#142631; color:var(--paper); box-shadow:0 7px 0 #7e1427,0 16px 40px rgba(0,0,0,.5); }
.intro-bubble.robot strong { color:#ff5f77; }
.intro-bubble.code-red { border-color:var(--red); background:#b92238; color:var(--paper); box-shadow:0 7px 0 #5c1223,0 16px 40px rgba(0,0,0,.55); }
.intro-bubble.code-red strong { color:#ffe2a1; }
.intro-footer { position:absolute; z-index:5; left:max(20px,env(safe-area-inset-left)); bottom:var(--safe-bottom); display:flex; flex-direction:column; align-items:flex-start; gap:8px; color:var(--paper); font-size:clamp(8px,1vw,11px); font-weight:1000; letter-spacing:.1em; text-shadow:0 2px 6px #06131a; }
.intro-footer button { pointer-events:auto; border:1px solid rgba(255,249,234,.75); padding:7px 10px; border-radius:5px; background:rgba(6,19,26,.72); color:var(--paper); font-size:10px; font-weight:900; cursor:pointer; }
.intro-start { position:absolute; z-index:10; right:max(20px,env(safe-area-inset-right)); bottom:var(--safe-bottom); min-height:48px; margin:0; padding:10px 16px; pointer-events:auto; font-size:13px; background:var(--teal); color:var(--ink); }
.breakroom-intro.mission-armed .intro-start { right:50%; bottom:max(19px,var(--safe-bottom)); transform:translateX(50%); width:min(780px,92vw); min-height:116px; padding:20px 30px; background:linear-gradient(165deg,#fc6270,#d7263d 57%,#9f192d); color:var(--paper); font:900 clamp(22px,4.5vw,32px)/1 Impact,"Arial Narrow","Nimbus Sans Narrow",sans-serif; letter-spacing:.07em; text-shadow:0 2px 0 #791829; box-shadow:0 9px 0 #34151d,0 0 36px rgba(240,63,82,.38),inset 0 2px 0 rgba(255,255,255,.48); }
.breakroom-intro.mission-armed .intro-start:active { transform:translate(50%,5px); }
.breakroom-intro .mission-ready { z-index:7; padding-bottom:100px; pointer-events:none; }
.breakroom-intro .mission-ready.revealed { pointer-events:none; }
.breakroom-intro .mission-ready button { pointer-events:auto; }
.breakroom-intro.mission-armed .intro-masthead,.breakroom-intro.mission-armed .intro-bubble,.breakroom-intro.mission-armed .intro-footer { display:none; }
.breakroom-intro.exiting { pointer-events:none; animation:transmission-leave .9s ease both; }
@media (orientation:portrait) and (max-width:600px) {
  .intro-masthead { font-size:9px; }
  .intro-masthead strong { max-width:66vw; }
  .intro-bubble { bottom:max(125px,calc(env(safe-area-inset-bottom) + 100px)); padding:12px 15px; }
  .intro-bubble span { font-size:clamp(18px,5.2vw,25px); }
  .intro-footer { max-width:48vw; }
  .breakroom-intro .mission-ready { gap:8px; padding-bottom:97px; }
  .breakroom-intro .mission-ready h2 { font-size:clamp(44px,12vw,66px); }
}
@media (orientation:landscape) and (max-height:500px) {
  .intro-bubble { left:33%; bottom:54px; width:min(380px,50vw); padding:9px 13px; }
  .intro-bubble span { font-size:clamp(16px,2.4vw,23px); }
  .intro-footer { bottom:10px; }
  .intro-start { bottom:10px; }
  .breakroom-intro .mission-ready { padding-bottom:45px; }
  .breakroom-intro .mission-ready h2 { font-size:clamp(35px,5.4vw,52px); }
}

#loading.load-cinematic { display:none; overflow:hidden; padding:0; background:#091521; color:#f5eee2; text-align:left; isolation:isolate; }
#loading.load-cinematic.visible { display:block; }
#loading.load-cinematic::before { z-index:8; inset:11px; border:1px solid rgba(202,226,220,.28); border-radius:3px; box-shadow:inset 0 0 0 1px rgba(12,25,35,.55); }
.load-visual { position:absolute; inset:0; width:100%; height:100%; }
.load-frame { opacity:0; transition:opacity .7s ease,transform 1.3s ease; transform-origin:50% 50%; }
#loading[data-stage="city"] .load-city,#loading[data-stage="launch"] .load-city { opacity:1; }
#loading[data-stage="orbit"] .load-orbit { opacity:1; }
#loading[data-stage="station"] .load-station { opacity:1; }
#loading[data-stage="launch"] .load-city { transform:scale(1.1) translateY(36px); }
.load-rocket { transform-origin:540px 560px; transition:transform 1.05s cubic-bezier(.2,.7,.2,1); }
#loading[data-stage="launch"] .load-rocket { transform:translateY(-155px) scale(.87); }
.load-orbit-ship { animation:load-ship-drift 2.8s ease-in-out infinite; }
.load-station-ring { transform-origin:558px 433px; animation:load-station-pulse 6s ease-in-out infinite; }
.load-film { position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(5,13,22,.68),transparent 25% 60%,rgba(4,12,21,.92) 93%),radial-gradient(ellipse at 53% 46%,transparent 22%,rgba(3,9,18,.56) 82%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(210,232,234,.025) 4px 5px); }
.load-film::after { content:""; position:absolute; inset:-20%; background:linear-gradient(108deg,transparent 36%,rgba(255,221,177,.07) 50%,transparent 64%); animation:load-scan 4.8s linear infinite; }
.load-header,.load-title,.load-chapter,.load-route,.load-status { position:absolute; z-index:2; left:max(27px,calc(env(safe-area-inset-left) + 20px)); right:max(27px,calc(env(safe-area-inset-right) + 20px)); }
.load-header { top:max(26px,calc(env(safe-area-inset-top) + 11px)); display:flex; align-items:center; justify-content:space-between; gap:12px; font:800 clamp(9px,1vw,12px)/1.2 ui-monospace,Consolas,monospace; letter-spacing:.13em; color:#c2d7d6; }
.load-header i { display:inline-block; width:3px; height:3px; margin:0 5px 2px; border-radius:50%; background:#ff9a79; }
.load-header b { flex:none; padding:5px 7px; border:1px solid #e95b67; color:#ff9c8f; font-size:10px; box-shadow:0 0 15px rgba(222,46,66,.27),inset 0 0 10px rgba(222,46,66,.15); animation:load-red-pulse 1.5s steps(2,end) infinite; }
.load-title { top:clamp(88px,14vh,145px); }
.load-title span { display:inline-block; margin-bottom:13px; padding-left:9px; border-left:3px solid #ee6870; color:#f7b397; font:800 clamp(10px,1.2vw,13px)/1 ui-monospace,Consolas,monospace; letter-spacing:.2em; }
#loading .load-title h1 { max-width:820px; margin:0; color:#fff5e6; font:900 clamp(44px,8vw,112px)/.85 Bahnschrift,"Arial Narrow",Impact,sans-serif; letter-spacing:-.015em; text-shadow:0 4px 0 #0b1b29,0 9px 35px rgba(0,0,0,.92); }
.load-chapter { bottom:clamp(190px,25vh,257px); display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-shadow:0 2px 8px #06121d; }
.load-chapter span { color:#ff9784; font:800 clamp(10px,1.2vw,13px)/1.1 ui-monospace,Consolas,monospace; letter-spacing:.2em; }
.load-chapter strong { max-width:600px; color:#fff3e8; font:900 clamp(26px,4.5vw,50px)/.95 Bahnschrift,"Arial Narrow",Impact,sans-serif; letter-spacing:.02em; }
.load-chapter small { margin-top:7px; color:#c8d7d4; font:700 clamp(9px,1vw,11px)/1.2 ui-monospace,Consolas,monospace; letter-spacing:.1em; }
.load-route { bottom:112px; padding-top:13px; }
.load-route-line { position:relative; height:2px; margin:0 8px; background:rgba(198,222,220,.4); }
.load-route-line::before,.load-route-line::after { content:""; position:absolute; z-index:2; top:-5px; width:12px; height:12px; border:2px solid #cbd8d4; border-radius:50%; background:#182b36; }
.load-route-line::before { left:0; }.load-route-line::after { right:0; }
#loadingRouteFill { position:relative; display:block; width:4%; height:100%; background:linear-gradient(90deg,#f47a66,#ffce9e,#84d9d4); box-shadow:0 0 11px #ff776e; transition:width .7s cubic-bezier(.2,.7,.2,1); }
#loadingRouteFill::after { content:""; position:absolute; top:-4px; right:0; width:10px; height:10px; border-radius:50%; background:#ffe7b6; box-shadow:0 0 13px 3px #f26362; }
.load-route-stops { display:flex; justify-content:space-between; gap:8px; margin-top:14px; color:#b8c9c9; font:700 clamp(9px,1.15vw,12px)/1.2 ui-monospace,Consolas,monospace; letter-spacing:.07em; }
.load-route-stops span:nth-child(2) { text-align:center; }.load-route-stops span:last-child { text-align:right; }
.load-route-stops b { display:block; margin-top:3px; color:#f5eee2; font-weight:800; }
#loading[data-stage="city"] .load-stop-city,#loading[data-stage="launch"] .load-stop-city,#loading[data-stage="orbit"] .load-stop-orbit,#loading[data-stage="station"] .load-stop-station { color:#ff9d87; text-shadow:0 0 10px rgba(248,103,99,.7); }
.load-status { bottom:max(27px,calc(env(safe-area-inset-bottom) + 13px)); }
.load-status-top { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:9px; color:#d4ded8; font:750 clamp(10px,1.2vw,13px)/1.2 ui-monospace,Consolas,monospace; letter-spacing:.06em; }
#loadingPercent { color:#ffc09b; font-size:15px; }
.loading-track { width:100%; height:7px; overflow:hidden; border:1px solid rgba(196,225,222,.6); background:rgba(10,25,35,.64); box-shadow:0 0 0 3px rgba(5,16,27,.38); }
#loadingFill { width:4%; height:100%; background:linear-gradient(90deg,#d9535b,#f5a977,#9ae0d0); box-shadow:0 0 12px #f39374; transition:width .35s ease; }
#loadingRetry { margin-top:11px; padding:8px 13px; border:1px solid #f09e8e; background:rgba(80,24,39,.86); color:#fff0e3; font:800 11px ui-monospace,Consolas,monospace; letter-spacing:.12em; cursor:pointer; }
#loadingRetry[hidden] { display:none; }
#loading[data-stage="error"] .load-city { opacity:1; filter:saturate(.5) brightness(.58); }
#loading[data-stage="error"] .load-route { display:none; }
#loading[data-stage="error"] #loadingFill { background:#e85564; box-shadow:0 0 12px #e85564; }
#loading[data-stage="error"] .load-header b { animation:none; color:#fff0e3; background:#bb344d; }
@keyframes load-ship-drift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(12px,-14px)} }
@keyframes load-station-pulse { 0%,100%{opacity:1} 50%{opacity:.78} }
@keyframes load-scan { from{transform:translateX(-42%)} to{transform:translateX(42%)} }
@keyframes load-red-pulse { 50%{opacity:.55} }
@media (max-width:600px) {
  .load-header { font-size:8px; letter-spacing:.05em; }
  .load-header b { font-size:8px; }
  .load-title { top:max(95px,calc(env(safe-area-inset-top) + 70px)); }
  #loading .load-title h1 { font-size:clamp(43px,11.8vw,66px); }
  .load-chapter { bottom:190px; }
  .load-chapter strong { font-size:clamp(25px,7.6vw,37px); }
  .load-route { bottom:100px; }
  .load-route-stops { font-size:9px; }
}
@media (max-height:630px) {
  .load-title { top:74px; }
  #loading .load-title h1 { font-size:clamp(38px,8vh,60px); }
  .load-chapter { bottom:155px; }
  .load-route { bottom:81px; }
  .load-status { bottom:18px; }
  .load-route-stops { margin-top:9px; }
}
@media (orientation:landscape) and (max-height:500px) {
  .load-title { right:52%; }
  .load-chapter { left:53%; bottom:139px; }
  .load-chapter strong { font-size:clamp(25px,3.8vw,38px); }
}
@media (prefers-reduced-motion:reduce) {
  .load-frame,.load-rocket,#loadingRouteFill,#loadingFill { transition:none; }
  .load-orbit-ship,.load-station-ring,.load-film::after,.load-header b { animation:none; }
}

#hud { position:fixed; z-index:45; left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); top:var(--safe-top); display:none; pointer-events:none; filter:drop-shadow(0 2px 0 rgba(255,255,255,.4)); }
#hud.visible { display:block; }
.hud-label { display:flex; align-items:end; justify-content:space-between; font-size:clamp(10px,2.7vw,14px); font-weight:1000; letter-spacing:.08em; text-shadow:0 2px 7px rgba(255,255,255,.9); }
.hud-label strong { font-size:clamp(20px,5vw,30px); letter-spacing:-.04em; }
.humanity-track { position:relative; isolation:isolate; overflow:hidden; height:30px; border:3px solid var(--ink); border-radius:11px; background:linear-gradient(180deg,#441827 0%,#8d2736 37%,#c34343 70%,#ea7957 100%); box-shadow:0 3px 0 rgba(23,43,51,.25),inset 0 0 0 1px rgba(255,186,129,.16); }
.humanity-track::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:radial-gradient(ellipse at 24% 27%,rgba(247,146,103,.35),transparent 27%),radial-gradient(ellipse at 65% 5%,rgba(24,18,31,.5),transparent 25%),radial-gradient(ellipse at 88% 48%,rgba(45,19,34,.3),transparent 22%),repeating-linear-gradient(108deg,transparent 0 27px,rgba(255,198,142,.08) 28px 29px,transparent 30px 50px); }
.humanity-track::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(14,18,30,.26),transparent 38%,rgba(17,19,31,.32) 100%); }
#humanityFill { position:absolute; z-index:1; inset:0 0 0 auto; width:95%; height:100%; background:linear-gradient(90deg,rgba(255,183,126,.08),rgba(255,206,147,.24) 70%,rgba(255,221,164,.35)); box-shadow:inset 2px 0 0 rgba(255,223,165,.42); transition:width 1.1s cubic-bezier(.22,.7,.12,1),filter .2s; }
#humanityFill.impact { filter:brightness(1.65) saturate(1.3); }
.humanity-horizon { position:absolute; z-index:3; inset:auto 0 0; height:10px; opacity:.8; pointer-events:none; background:linear-gradient(90deg,#1d1c29 0 36%,transparent 36%) 0 4px/17px 6px repeat-x,linear-gradient(90deg,#291d29 0 21%,transparent 21%) 7px 2px/29px 8px repeat-x,linear-gradient(90deg,#251c2b 0 12%,transparent 12%) 18px 0/47px 10px repeat-x,linear-gradient(#171b28,#171b28) 0 8px/100% 2px no-repeat; }
.population-crowd { position:absolute; z-index:4; inset:0 3px; display:flex; align-items:flex-end; justify-content:space-around; padding-bottom:1px; }
.crowd-symbols { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.population-person { position:relative; flex:0 0 8px; height:10px; color:#11212b; opacity:.96; filter:drop-shadow(0 -1px 0 rgba(255,207,149,.38)); transition:opacity .38s ease .2s,transform .38s ease .2s; }
.population-person:nth-child(3n) { color:#24212b; }
.population-person svg { display:block; width:8px; height:10px; fill:currentColor; transform-origin:center bottom; animation:crowd-run var(--run-speed,.85s) var(--run-delay,0s) ease-in-out infinite; }
.population-person.gone { opacity:.08; transform:translateX(-2px) scale(.55); }
.population-crowd.startled { animation:crowd-startle .38s ease-out; }
.population-crowd.last-survivor { z-index:6; }
.population-crowd.last-survivor .population-person:last-child { color:#fff3ce; filter:drop-shadow(0 0 3px #fff0b7) drop-shadow(0 0 2px #111c29); }
@keyframes crowd-run { 0%,100%{transform:translate(0,0) rotate(-6deg)} 50%{transform:translate(2px,-1px) rotate(5deg)} }
@keyframes crowd-startle { 20%{transform:translateX(3px)} 45%{transform:translateX(-1px)} 100%{transform:none} }
.robot-advance { position:absolute; z-index:5; left:5%; bottom:-2px; width:39px; height:26px; transform:translateX(-50%); filter:drop-shadow(0 1px 1px rgba(10,13,23,.85)); transition:left 1.1s cubic-bezier(.22,.7,.12,1); }
.robot-advance svg { display:block; width:100%; height:100%; overflow:visible; }
.walker-leg { transform-box:fill-box; transform-origin:50% 12%; animation:walker-stride 1.15s ease-in-out infinite; }
.walker-leg-back { animation-delay:-.575s; }
.walker-body { animation:walker-bob 1.15s ease-in-out infinite; }
@keyframes walker-stride { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)} }
@keyframes walker-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }
.robot-muzzle { position:absolute; z-index:2; left:36px; top:13px; width:7px; height:6px; background:#ffcf8e; clip-path:polygon(0 36%,55% 0,48% 34%,100% 48%,48% 65%,55% 100%,0 67%); opacity:0; filter:drop-shadow(0 0 3px #ff344d); transform-origin:left center; }
#hud.visible .robot-muzzle { animation:robot-patrol-fire 5.2s steps(1,end) infinite; }
.robot-beam { position:absolute; z-index:1; left:38px; top:15px; width:clamp(19px,8vw,42px); height:2px; border-radius:2px; background:#fff3c5; box-shadow:0 0 3px 1px #ff3549,0 0 8px 3px rgba(255,51,67,.66); opacity:0; transform:scaleX(.1); transform-origin:left center; }
.robot-advance.firing .robot-beam { animation:robot-fire .55s ease-out; }
#hud.visible .robot-advance.firing .robot-muzzle { animation:robot-hit-muzzle .55s ease-out; }
.robot-advance.recoiling .walker-body { animation:robot-recoil .7s ease-out both; }
#hud.visible .robot-advance.recoiling .robot-muzzle { animation:none; opacity:0; }
@keyframes robot-patrol-fire { 0%,39%,41%,43%,100%{opacity:0;transform:scale(.45)} 40%,42%{opacity:.8;transform:scale(1)} }
@keyframes robot-hit-muzzle { 0%,100%{opacity:0;transform:scale(.4)} 10%,40%,62%{opacity:1;transform:scale(1.3)} }
@keyframes robot-fire { 12%,48%{opacity:1;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(.3)} }
@keyframes robot-recoil { 0%{transform:none} 22%{transform:translateX(-3px) rotate(-5deg)} 100%{transform:none} }
#forecast { margin-top:5px; font-size:clamp(9px,2.25vw,12px); font-weight:900; letter-spacing:.04em; text-align:right; }
#districtLabel { margin-top:3px; font-size:clamp(9px,2.1vw,11px); font-weight:1000; letter-spacing:.08em; text-align:right; color:var(--red); text-shadow:0 1px 5px var(--paper); }
#hud.on-dark .hud-label,#hud.on-dark #forecast,#hud.on-dark #districtLabel { color:var(--paper); text-shadow:0 2px 5px rgba(9,13,34,.95); }
#hud.on-station .hud-label { padding:2px 5px; border-radius:6px; background:rgba(255,249,234,.86); text-shadow:none; }
#hud.on-station #forecast { width:max-content; margin-left:auto; padding:2px 5px; border-radius:4px; background:rgba(255,249,234,.86); text-shadow:none; }
#hud.on-station #districtLabel { width:max-content; margin-left:auto; padding:2px 5px; border-radius:4px; background:rgba(255,249,234,.86); text-shadow:none; }
#actLabel { position:absolute; top:103px; left:50%; transform:translateX(-50%); width:max-content; max-width:90vw; padding:6px 10px; border:2px solid var(--ink); border-radius:999px; background:rgba(255,249,234,.86); font-size:10px; font-weight:1000; letter-spacing:.08em; }

#tutorial { position:fixed; z-index:16; inset:auto 0 14%; display:none; justify-content:center; pointer-events:none; }
#tutorial.visible { display:flex; }
#tutorialText { max-width:min(480px,92vw); padding:10px 14px; border:3px solid var(--ink); border-radius:12px; background:var(--paper); font-weight:1000; font-size:clamp(11px,2.8vw,13px); line-height:1.2; text-align:center; box-shadow:0 5px 0 var(--ink); }
#sceneBanner { position:fixed; z-index:24; left:50%; top:31%; transform:translate(-50%,-50%) scale(.9); width:max-content; max-width:min(90vw,980px); color:var(--paper); text-align:center; opacity:0; pointer-events:none; }
#sceneBanner.show { animation:scene-in 1.45s ease both; }
#sceneBanner strong { display:block; font:1000 clamp(28px,7vw,68px)/.98 "Arial Black",system-ui,sans-serif; letter-spacing:-.04em; text-wrap:balance; -webkit-text-stroke:.6px #091820; text-shadow:0 2px 0 #7e2234,0 4px 0 #091820,0 8px 24px #000; }
#lockWarning { position:fixed; z-index:23; left:50%; bottom:max(29%,calc(var(--safe-bottom) + 155px)); transform:translateX(-50%); display:none; width:min(430px,88vw); padding:8px; border:3px solid var(--red); border-radius:12px; background:rgba(23,43,51,.9); color:var(--paper); text-align:center; pointer-events:none; box-shadow:0 0 30px rgba(215,38,61,.5); }
#lockWarning.visible { display:block; }
#lockWarning.firing { background:var(--red); }
#lockWarning strong { display:block; font-size:clamp(13px,3.5vw,18px); font-weight:1000; letter-spacing:.08em; }
#laneCountdown { display:none; margin:5px auto 0; font:1000 clamp(26px,8vw,40px)/1 ui-monospace,"SFMono-Regular",Consolas,monospace; color:var(--paper); }
#lockWarning.lane-challenge { top:max(19%,calc(var(--safe-top) + 110px)); bottom:auto; border-color:var(--teal); box-shadow:0 0 30px rgba(69,196,176,.5); }
#lockWarning.lane-challenge #laneCountdown { display:block; }
#lockWarning.lane-challenge.cleared #laneCountdown,
#lockWarning.lane-challenge.firing #laneCountdown { display:none; }
#lockWarning.lane-challenge::after { background:var(--teal); }
#lockWarning small { display:block; margin-top:4px; font-size:10px; font-weight:900; letter-spacing:.08em; }
.lock-lanes { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:6px; }
.lock-lane { padding:4px 2px; border:1px solid rgba(255,249,234,.5); border-radius:5px; font-size:9px; font-weight:1000; }
.lock-lane.targeted { background:var(--red); border-color:var(--paper); }
.lock-lane.safe { background:var(--teal); border-color:var(--paper); color:var(--ink); }
#lockWarning.net-gate { border-color:var(--teal); box-shadow:0 0 30px rgba(69,196,176,.46); }
#lockWarning.net-gate::after { background:var(--teal); }
#lockWarning.net-gate.cleared { background:#17665c; }
#lockWarning.free-flight .lock-lanes { display:none; }
#lockWarning.free-flight strong { display:block; margin-bottom:4px; }
#lockWarning::after { content:""; display:block; width:var(--remaining,100%); height:3px; margin-top:5px; background:var(--red); }
@media (max-height:500px) {
  #lockWarning.lane-challenge { top:145px; padding:5px 8px; }
  #lockWarning.lane-challenge strong { font-size:12px; }
  #lockWarning.lane-challenge #laneCountdown { font-size:25px; margin-top:2px; }
  #lockWarning.lane-challenge .lock-lanes { margin-top:2px; }
}
@keyframes scene-in { 0%{opacity:0;transform:translate(-50%,-40%) scale(.9)} 12%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-62%) scale(1)} }

#stick { position:absolute; inset:0; z-index:12; display:none; touch-action:none; user-select:none; cursor:grab; }
#stick.visible { display:block; }
#stick:active { cursor:grabbing; }
#flightJoystick { position:fixed; z-index:2; left:var(--joy-x,50%); top:var(--joy-y,72%); width:104px; height:104px; transform:translate(-50%,-50%) scale(.82); border:3px solid rgba(247,243,232,.82); border-radius:50%; background:radial-gradient(circle,rgba(31,78,95,.2),rgba(23,43,51,.72)); box-shadow:0 0 0 5px rgba(69,196,176,.16),0 0 28px rgba(69,196,176,.35); opacity:0; transition:opacity .11s ease,transform .11s ease; pointer-events:none; will-change:left,top,transform; }
#flightJoystick::before,#flightJoystick::after { content:""; position:absolute; background:rgba(69,196,176,.48); }
#flightJoystick::before { left:12px; right:12px; top:50%; height:2px; }
#flightJoystick::after { top:12px; bottom:12px; left:50%; width:2px; }
#flightJoystick span { position:absolute; left:50%; top:50%; width:42px; height:42px; transform:translate(calc(-50% + var(--joy-dx,0px)),calc(-50% + var(--joy-dy,0px))); border:3px solid var(--paper); border-radius:50%; background:var(--teal); box-shadow:0 0 18px rgba(69,196,176,.8); will-change:transform; }
#stick.flight-mode #flightJoystick.active { opacity:1; transform:translate(-50%,-50%) scale(1); }
#damageFlash { position:fixed; inset:0; z-index:18; pointer-events:none; opacity:0; background:radial-gradient(circle,rgba(215,38,61,0) 32%,rgba(215,38,61,.92)); }
#damageFlash.hit { animation:damage .5s ease-out; }
@keyframes damage { 0%{opacity:1} 100%{opacity:0} }
#impactCopy { position:fixed; z-index:19; left:50%; top:32%; transform:translate(-50%,-50%) rotate(-2deg) scale(.7); width:max-content; max-width:88vw; padding:9px 12px; border:3px solid var(--ink); border-radius:10px; background:var(--paper); color:var(--red); font-weight:1000; font-size:clamp(16px,5vw,30px); opacity:0; pointer-events:none; }
#impactCopy.show { animation:impact .9s ease-out; }
@keyframes impact { 0%{opacity:0;transform:translate(-50%,-50%) rotate(-4deg) scale(.6)} 16%,62%{opacity:1;transform:translate(-50%,-50%) rotate(-2deg) scale(1)} 100%{opacity:0;transform:translate(-50%,-70%) rotate(1deg) scale(.92)} }

#mute { position:fixed; z-index:50; right:max(12px,env(safe-area-inset-right)); bottom:var(--safe-bottom); padding:7px 10px; border:2px solid var(--ink); border-radius:999px; background:rgba(255,249,234,.82); color:var(--ink); font-size:10px; font-weight:1000; letter-spacing:.06em; transition:opacity .75s ease; }
body.intro-playing #mute { opacity:0; pointer-events:none; }
#devPause { position:fixed; z-index:52; top:calc(var(--safe-top) + 104px); right:max(14px,env(safe-area-inset-right)); display:none; width:44px; height:44px; padding:0; border:2px solid var(--ink); border-radius:12px; background:rgba(255,249,234,.55); color:var(--ink); font-size:22px; font-weight:900; cursor:pointer; backdrop-filter:blur(4px); }
#devPause.visible { display:block; }
#devPause.paused { background:rgba(255,249,234,.82); }
#devPaused { position:fixed; z-index:51; top:calc(var(--safe-top) + 155px); right:max(14px,env(safe-area-inset-right)); display:none; padding:5px 7px; border-radius:6px; background:rgba(23,43,51,.7); color:var(--paper); font-size:9px; font-weight:900; letter-spacing:.06em; pointer-events:none; }
#devPaused.visible { display:block; }
body.dev-paused * { animation-play-state:paused!important; }

.interlude-screen { color:var(--paper); background:linear-gradient(145deg,rgba(33,36,58,.86),rgba(107,91,149,.8)); }
.interlude-screen::before { border-color:var(--paper); box-shadow:8px 8px 0 rgba(255,249,234,.22); }
.interlude-screen .memo { color:var(--space); background:var(--paper); }
.climb-track { width:min(430px,74vw); height:24px; border:3px solid var(--paper); border-radius:999px; overflow:hidden; background:rgba(23,43,51,.55); }
#climbFill { width:6%; height:100%; background:linear-gradient(90deg,var(--orange),var(--sun),var(--teal)); transition:width .12s ease-out; }
.giant-tap { min-width:min(360px,78vw); background:var(--orange); }
#climbStatus { min-height:38px; font-size:12px!important; letter-spacing:.08em; }
.docking-screen { gap:24px; }
.dock-rings { position:relative; width:150px; height:150px; }
.dock-rings i { position:absolute; inset:0; border:8px solid var(--teal); border-radius:50%; animation:dock 1.1s ease-in-out infinite; }
.dock-rings i:nth-child(2) { inset:25px; border-color:var(--sun); animation-delay:.15s; }
.dock-rings i:nth-child(3) { inset:50px; border-color:var(--orange); animation-delay:.3s; }
@keyframes dock { 0%,100%{transform:scale(.86);opacity:.45} 50%{transform:scale(1.08);opacity:1} }

.switch-screen { background:linear-gradient(160deg,rgba(247,243,232,.98),rgba(155,167,180,.95)); }
.master-button { position:relative; z-index:2; width:min(270px,68vw); aspect-ratio:1; border:12px solid var(--ink); border-radius:50%; background:radial-gradient(circle at 35% 28%,#ff8067,var(--red) 55%,#8b1527); color:white; box-shadow:0 18px 0 #0b171c,0 26px 26px rgba(0,0,0,.32); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; }
.master-button span { font-size:clamp(54px,15vw,92px); line-height:.8; font-weight:1000; }
.master-button small { font-size:11px; font-weight:1000; letter-spacing:.12em; }
.master-button:active { transform:translateY(13px); box-shadow:0 5px 0 #0b171c; }

.finale-screen { justify-content:flex-start; padding-top:max(28px,var(--safe-top)); background:radial-gradient(circle at 50% 35%,#4b5878,#21243a 67%); color:var(--paper); }
.finale-screen::before { border-color:var(--paper); box-shadow:8px 8px 0 rgba(255,249,234,.16); }
.subtitle { min-height:74px; width:min(650px,88vw); padding:12px 16px; border:3px solid var(--paper); border-radius:14px; background:rgba(23,43,51,.75); color:var(--paper); font-size:clamp(19px,5.2vw,32px); line-height:1.15; font-weight:900; box-shadow:0 6px 0 rgba(255,255,255,.22); }

@media (max-height:720px) {
  .mission-ready { gap:7px; padding-bottom:max(18px,var(--safe-bottom)); }
  .mission-ready h2 { font-size:clamp(30px,8vh,56px); }
}
@media (orientation:landscape) and (min-width:700px) {
  #hud { left:4vw; right:4vw; max-width:920px; margin:auto; }
  #actLabel { top:103px; }
  .transmission-caption { max-width:min(760px,68vw); }
}

/* Keep controls and story panels usable when the viewport is short or narrow. */
.screen {
  padding-left:max(clamp(22px,6vw,54px),calc(env(safe-area-inset-left) + 12px));
  padding-right:max(clamp(22px,6vw,54px),calc(env(safe-area-inset-right) + 12px));
}
@media (orientation:portrait) and (max-width:600px) {
  .transmission-caption { bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px)); max-width:88vw; }
  .transmission-caption h1 { font-size:clamp(31px,10.2vw,54px); }
  .mission-ready { justify-content:flex-end; }
}
.finale-screen { overflow-y:auto; padding-bottom:calc(28px + var(--safe-bottom)); }

@media (max-width:380px) and (max-height:620px) and (orientation:portrait) {
  .transmission-caption { bottom:max(58px,calc(env(safe-area-inset-bottom) + 48px)); }
  .transmission-caption h1 { font-size:clamp(27px,9.4vw,40px); }
  .transmission-caption p { font-size:12px; }
  #sceneBanner { top:41%; }
  .mission-ready { gap:5px; }
  .mission-ready h2 { font-size:30px; }
  .mission-ready p { font-size:11px; }
  .mission-ready .controls { display:none; }
}

@media (orientation:landscape) and (max-height:500px) {
  .transmission-caption { left:max(30px,calc(env(safe-area-inset-left) + 22px)); bottom:35px; max-width:58vw; }
  .transmission-caption h1 { font-size:clamp(25px,6.2vw,52px); }
  .transmission-caption p { margin-top:5px; font-size:clamp(11px,1.8vw,15px); }
  .mission-ready { align-items:flex-end; justify-content:center; padding-right:max(45px,calc(env(safe-area-inset-right) + 26px)); padding-left:48%; text-align:center; }
  .mission-ready h2 { font-size:clamp(28px,6vw,48px); }
  .mission-ready p { font-size:clamp(10px,1.7vw,14px); }
  .mission-ready .controls { gap:4px; font-size:9px; }
  .mission-ready .controls span { padding:3px 5px; }

  #sceneBanner { top:39%; }
  #sceneBanner strong { font-size:clamp(28px,5.6vw,48px); }

  .switch-screen.visible {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:repeat(3,auto);
    align-content:center;
    column-gap:20px;
    row-gap:8px;
    padding-top:20px;
    padding-bottom:28px;
  }
  .switch-screen .memo { grid-column:1; grid-row:1; justify-self:center; }
  .switch-screen h2 { grid-column:1; grid-row:2; font-size:clamp(30px,5vw,48px); }
  .switch-screen p { grid-column:1; grid-row:3; font-size:clamp(12px,1.8vw,16px); }
  .master-button { grid-column:2; grid-row:1 / 4; width:min(190px,42dvh); border-width:7px; }
  .master-button span { font-size:clamp(34px,8vw,56px); }
  .master-button small { font-size:9px; }

  .finale-screen.visible {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-rows:repeat(3,auto);
    align-content:center;
    column-gap:18px;
    row-gap:12px;
    padding-top:24px;
    padding-bottom:30px;
  }
  .finale-screen .signal { grid-column:2; grid-row:1; justify-self:center; }
  .subtitle { grid-column:2; grid-row:2; width:100%; min-height:56px; font-size:clamp(16px,2.5vw,22px); }
}

@media (min-width:900px) and (min-height:600px) {
  .finale-screen { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .briefing.exiting,.briefing.exiting .transmission-frame img { animation:none; }
  #humanityFill,.population-person,.robot-advance,.transmission-frame,#mute { transition:none; }
  .transmission-frame img,.transmission-caption span,.transmission-caption h1,.transmission-caption p,.transmission-chrome > div:first-child i { animation:none!important; }
  .population-person svg,.walker-leg,.walker-body,.robot-muzzle,.robot-beam,.population-crowd.startled { animation:none!important; }
  .primary:active { transform:none; }
  .dock-rings i { animation:none; }
}

/* Story prompts sit over the same live camera view through every transition. */
#climb.screen.visible,#docking.screen.visible,#switchScreen.screen.visible,#finale.screen.visible {
  display:flex;
  background:transparent;
  color:var(--paper);
  border:0;
  box-shadow:none;
  pointer-events:none;
  padding:max(18px,var(--safe-top)) max(16px,env(safe-area-inset-right)) calc(20px + var(--safe-bottom)) max(16px,env(safe-area-inset-left));
  gap:7px;
}
#climb.screen::before,#docking.screen::before,#switchScreen.screen::before,#finale.screen::before { display:none; }
#climb.screen.visible { justify-content:flex-end; }
#climb .memo,#docking .memo,#switchScreen .memo,#finale .signal {
  border-radius:8px;
  padding:5px 9px;
  background:rgba(23,43,51,.82);
  color:var(--paper);
  font-size:10px;
  letter-spacing:.08em;
  text-shadow:none;
}
#climb h2,#docking h2,#switchScreen h2 { font-size:clamp(20px,5vw,34px); color:var(--paper); text-shadow:0 2px 8px rgba(0,0,0,.9); }
#climb p,#docking p,#switchScreen p { font-size:clamp(11px,2.8vw,15px); color:var(--paper); text-shadow:0 2px 8px rgba(0,0,0,.9); }
#climb .climb-track { width:min(340px,76vw); height:16px; background:rgba(23,43,51,.8); }
#climbTap { pointer-events:none; min-width:min(270px,76vw); padding:10px 18px; border:2px solid var(--paper); border-radius:8px; background:var(--orange); font-size:clamp(16px,4vw,22px)!important; font-weight:900; text-align:center; }
#climbStatus { min-height:18px; }
#docking.screen.visible { justify-content:flex-end; align-items:flex-end; text-align:right; padding-right:max(24px,calc(env(safe-area-inset-right) + 18px)); padding-bottom:max(72px,calc(var(--safe-bottom) + 50px)); }
#docking h2 { line-height:1; max-width:min(330px,calc(100vw - 56px)); }
#docking .dock-rings { width:42px; height:42px; opacity:.8; }
#docking .dock-rings i { border-width:3px; }
#docking .dock-rings i:nth-child(2) { inset:8px; }
#docking .dock-rings i:nth-child(3) { inset:16px; }
#docking p { max-width:240px; }
#switchScreen.screen.visible { justify-content:flex-end; }
#switchScreen h2 { max-width:300px; }
#switchScreen .master-button { pointer-events:auto; width:clamp(96px,26vw,126px); min-width:0; border-width:5px; box-shadow:0 7px 0 #0b171c,0 12px 15px rgba(0,0,0,.34); }
#switchScreen .master-button span { font-size:clamp(30px,9vw,45px); }
#switchScreen .master-button small { font-size:8px; }
#finale.screen.visible { justify-content:space-between; overflow:hidden; }
#finale .subtitle { margin-top:auto; margin-bottom:0; width:min(540px,88vw); min-height:55px; font-size:clamp(16px,4.6vw,26px); }
@media (orientation:landscape) and (max-height:500px) {
  #climb.screen.visible,#docking.screen.visible,#switchScreen.screen.visible,#finale.screen.visible { display:flex; }
  #switchScreen.screen.visible { position:fixed; display:block; padding:0; }
  #switchScreen .memo { position:absolute; left:16px; bottom:65px; font-size:8px; }
  #switchScreen h2 { position:absolute; left:16px; bottom:12px; width:225px; font-size:22px; text-align:left; }
  #switchScreen p { display:none; }
  #switchScreen .master-button { position:absolute; right:100px; bottom:14px; width:88px; }
  #switchScreen .master-button span { font-size:31px; }
  #finale .subtitle { min-height:40px; }
}

/* The debrief arrives over the same Earth view after the radio call. */
#finale .subtitle { transition:opacity .3s ease,transform .3s ease; }
#finale.done .subtitle { opacity:0; transform:translateY(12px); }
#finale.screen.visible[data-outcome="fragile"] { background:rgba(8,13,31,.1); }
#finale.screen.visible[data-outcome="last"] { background:rgba(5,8,22,.24); }
#finale .results-card {
  --grade:#f6c453;
  position:absolute;
  z-index:3;
  right:max(20px,calc(env(safe-area-inset-right) + 16px));
  top:50%;
  width:min(440px,44vw);
  max-height:calc(100dvh - 42px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:20px;
  border:1px solid #a8aeb0;
  border-radius:9px;
  background:
    linear-gradient(132deg,rgba(255,255,255,.22),transparent 19% 76%,rgba(255,255,255,.06) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    linear-gradient(145deg,#354954 0%,#192b38 23%,#0d1d2a 70%,#263b47 100%);
  color:#f6f2e8;
  box-shadow:0 0 0 4px rgba(10,22,29,.84),0 0 0 5px rgba(215,226,225,.39),0 24px 60px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -12px 20px rgba(0,0,0,.28);
  text-align:left;
  opacity:0;
  transform:translate(110px,-44%) rotate(5deg) scale(.86);
  transition:opacity .3s ease,transform .85s cubic-bezier(.15,1.25,.22,1);
  pointer-events:none;
}
#finale .results-card::before { content:""; position:absolute; inset:5px; border:1px solid rgba(216,231,231,.17); border-radius:5px; pointer-events:none; }
#finale .results-card::after { content:""; position:absolute; top:0; left:28px; right:28px; height:3px; background:linear-gradient(90deg,transparent,var(--grade) 20% 80%,transparent); box-shadow:0 0 14px var(--grade); pointer-events:none; }
#finale .results-card > * { flex-shrink:0; }
#finale.done .results-card { opacity:1; transform:translate(0,-50%) rotate(0) scale(1); pointer-events:auto; }
#resultsCard[data-grade="A"] { --grade:#79d9c9; }
#resultsCard[data-grade="B"] { --grade:#bba9f2; }
#resultsCard[data-grade="C"] { --grade:#ff9b68; }
#resultsCard[data-grade="D"] { --grade:#ff6776; }
.results-form { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid rgba(204,223,223,.27); padding-bottom:9px; color:#ccd7d8; font:700 9px/1.2 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.08em; }
.results-form span:last-child { max-width:50%; text-align:right; }
.results-form i { display:inline-block; width:3px; height:3px; margin:0 3px 2px; border-radius:50%; background:var(--grade); box-shadow:0 0 5px var(--grade); }
.results-rating { display:flex; align-items:center; gap:18px; min-height:104px; }
.results-stamp { position:relative; flex:0 0 94px; width:94px; height:94px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.64); border-radius:6px; background:linear-gradient(145deg,#6b7880,#1b2b37 20%,#0a1722 69%,#62717a); box-shadow:inset 0 0 0 4px #14252f,inset 0 0 0 5px color-mix(in srgb,var(--grade) 75%,#aab5b6),0 6px 12px rgba(0,0,0,.38); opacity:0; transform:translateY(-20px) rotate(-11deg) scale(1.2); }
.results-stamp::before { content:""; position:absolute; inset:9px; border:1px solid rgba(238,245,241,.28); clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); }
.results-stamp::after { content:""; position:absolute; left:-7px; right:-7px; top:50%; height:1px; background:linear-gradient(90deg,transparent,var(--grade),transparent); opacity:.45; }
.results-stamp span { z-index:1; color:var(--grade); font:900 75px/.9 Bahnschrift,"Arial Narrow",Impact,sans-serif; letter-spacing:-.06em; text-shadow:0 2px 0 #060f19,0 0 18px color-mix(in srgb,var(--grade) 44%,transparent); }
#finale.done .results-stamp { animation:results-stamp .58s cubic-bezier(.15,1.5,.3,1) .2s both; }
@keyframes results-stamp { 0%{opacity:0;transform:translateY(-20px) rotate(-11deg) scale(1.2)} 65%{opacity:1;transform:translateY(3px) rotate(3deg) scale(.96)} 100%{opacity:1;transform:none} }
.results-verdict { min-width:0; }
.results-label { color:var(--grade); font:800 9px/1.2 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.12em; }
#finale .results-verdict h2 { margin:6px 0 8px; font:900 clamp(22px,2.7vw,31px)/.98 Bahnschrift,"Arial Narrow",Impact,sans-serif; letter-spacing:.015em; text-transform:uppercase; overflow-wrap:anywhere; text-shadow:0 2px 9px rgba(0,0,0,.54); }
#resultsTitle:focus { outline:none; }
.results-score { display:inline-block; padding:4px 8px; border:1px solid var(--grade); border-radius:3px; background:color-mix(in srgb,var(--grade) 14%,#111e29); color:var(--grade); font:800 11px/1 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.08em; }
.results-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.results-stat { position:relative; min-width:0; min-height:71px; display:flex; flex-direction:column; justify-content:center; padding:9px 11px 9px 17px; border:1px solid rgba(205,223,221,.3); border-left:3px solid var(--grade); border-radius:3px; background:linear-gradient(135deg,rgba(220,235,232,.12),rgba(11,24,34,.37) 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.13); opacity:.42; transform:translateY(7px); transition:opacity .24s ease,transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.results-stat::before { content:attr(data-step); position:absolute; top:7px; right:8px; color:rgba(214,231,229,.39); font:700 9px ui-monospace,"SFMono-Regular",Consolas,monospace; }
.results-stat.revealed { opacity:1; transform:none; border-color:color-mix(in srgb,var(--grade) 65%,#ccd9d9); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 15px color-mix(in srgb,var(--grade) 13%,transparent); }
.results-stat span { color:var(--grade); font:800 9px/1.3 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.06em; }
.results-stat strong { min-height:1.1em; font:800 clamp(23px,3vw,32px)/1.1 Bahnschrift,"Arial Narrow",system-ui,sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:.01em; }
.results-stat small { min-height:10px; color:#b9c9c9; font:700 9px/1.1 ui-monospace,"SFMono-Regular",Consolas,monospace; }
.results-overrides { padding:7px 9px; border:1px solid rgba(121,217,201,.55); border-radius:3px; color:#9de1d4; background:rgba(18,66,65,.22); font:800 9px/1.3 ui-monospace,"SFMono-Regular",Consolas,monospace; letter-spacing:.04em; text-align:center; }
#finale .results-replay { align-self:stretch; margin:1px 0 3px; min-height:48px; border:1px solid rgba(255,255,255,.7); border-radius:4px; background:linear-gradient(160deg,color-mix(in srgb,var(--grade) 75%,white),var(--grade) 62%,color-mix(in srgb,var(--grade) 72%,#142833)); color:#11232d; box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 5px 0 #091823; font:900 15px/1 Bahnschrift,"Arial Narrow",system-ui,sans-serif; letter-spacing:.12em; }
#finale .results-replay:focus-visible { outline:4px solid var(--paper); outline-offset:4px; }
@media (orientation:portrait), (max-width:699px) {
  #finale .results-card { left:max(14px,calc(env(safe-area-inset-left) + 10px)); right:max(14px,calc(env(safe-area-inset-right) + 10px)); bottom:calc(16px + var(--safe-bottom)); top:auto; width:auto; max-height:min(70dvh,510px); transform:translateY(90px) rotate(3deg) scale(.9); }
  #finale.done .results-card { transform:translateY(0) rotate(0) scale(1); }
  .results-rating { min-height:84px; }
  .results-stamp { flex-basis:76px; width:76px; height:76px; }
  .results-stamp span { font-size:61px; }
  #finale .results-verdict h2 { font-size:clamp(20px,6vw,27px); }
}
@media (orientation:landscape) and (max-height:500px) {
  #finale .results-card { width:min(365px,43vw); right:max(12px,calc(env(safe-area-inset-right) + 10px)); max-height:calc(100dvh - 24px); gap:6px; padding:10px; }
  .results-form { font-size:7px; padding-bottom:4px; }
  .results-rating { min-height:61px; gap:10px; }
  .results-stamp { flex-basis:55px; width:55px; height:55px; }
  .results-stamp span { font-size:46px; }
  .results-label { font-size:8px; }
  #finale .results-verdict h2 { font-size:17px; margin:2px 0; }
  .results-score { font-size:8px; padding:2px 4px; }
  .results-stats { gap:4px; }
  .results-stat { min-height:43px; padding:5px 7px; }
  .results-stat span { font-size:8px; }
  .results-stat strong { font-size:21px; }
  .results-stat small { font-size:7px; }
  .results-overrides { padding:3px 5px; font-size:8px; }
  #finale .results-replay { min-height:37px; padding:5px 8px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  #finale .results-card,#finale .subtitle { transition:none; }
  #finale.done .results-stamp { animation:none; opacity:1; transform:none; }
  .results-stat { transition:none; }
}

/* Keep the start decision readable alongside the enlarged launch control. */
@media (orientation:portrait) and (max-height:620px) {
  .mission-ready-copy { top:56%; gap:12px; }
  .mission-ready .mission-ready-story { gap:4px; }
  .mission-ready-actions { top:max(24px,var(--safe-top)); bottom:auto; }
  .breakroom-intro .mission-ready h2 { font-size:clamp(36px,11vw,44px); }
}
@media (orientation:landscape) and (max-height:500px) {
  .mission-ready-copy { top:49%; left:max(28px,env(safe-area-inset-left)); right:auto; width:51vw; align-items:flex-start; text-align:left; gap:12px; }
  .breakroom-intro .mission-ready h2 { font-size:clamp(34px,5vw,49px); }
  .mission-ready .mission-ready-story { gap:4px; font-size:clamp(11px,1.5vw,15px); }
  .mission-ready-actions { left:max(28px,env(safe-area-inset-left)); right:auto; bottom:10px; width:51vw; align-items:flex-start; gap:5px; }
  .mission-ready-actions .controls { font-size:9px; }
  .breakroom-intro.mission-armed .intro-start { right:4vw; bottom:50%; transform:translateY(50%); width:37vw; min-height:116px; font-size:clamp(20px,3.4vw,30px); }
  .breakroom-intro.mission-armed .intro-start:active { transform:translateY(calc(50% + 5px)); }
}