/* Stage screen: the "mission" view (assets/stage-mission.js) and the centre celebrations.
   Space scenes reuse the mission monitor's scene colours (.mvis in app.css); everything else uses
   the theme tokens. The cards fill the grid; text sizes follow --fs (set from the cell size) so it fits any screen. */

/* ---------- layout ---------- */
.sm-host { min-height: 0; height: 100%; }
.sm { height: 100%; min-height: 0; display: grid; gap: 1vw; }
.sm.wide { grid-template-columns: minmax(0, 1fr) clamp(240px, 23vw, 480px); }
.sm.tall { grid-template-rows: minmax(0, 32%) minmax(0, 1fr); }
.sm.wide .sm-side { display: flex; flex-direction: column; gap: 1vw; min-height: 0; }
.sm.wide .sm-lb { flex: 1.25 1 0; } .sm.wide .sm-fleet { flex: 1 1 0; }
.sm.tall .sm-side { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; min-height: 0; }
.sm-grid { min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); gap: var(--gap, 10px); }

/* ---------- team cards: a live monitor per team ---------- */
.sm-card { min-width: 0; min-height: 0; margin: 0; font-size: var(--fs, 12px); display: flex; flex-direction: column; border-radius: calc(var(--fs, 12px) * 0.7); border-top: 0.25em solid var(--team); box-shadow: 0 0.4em 1.4em var(--shadow); will-change: transform; }
.sm-card .mvis-screen { flex: 1 1 auto; min-height: 4em; aspect-ratio: auto; }
.sm-card svg.sm-cam { overflow: hidden; } /* clip the wings to the card, never the scene */ /* the camera takes whatever height is left */
.sm-card.leader { box-shadow: 0 0 0 2px var(--lime), 0 0 2em color-mix(in srgb, var(--lime) 35%, transparent); }
.sm-ch { display: flex; align-items: center; gap: 0.4em; padding: 0.35em 0.55em; letter-spacing: 0.05em; white-space: nowrap; min-width: 0; }
.sm-ch .grow { flex: 1; }
.sm-ch .glyph { width: 1.3em; height: 1.3em; flex: none; }
.sm-rank { font-weight: 700; min-width: 1.7em; padding: 0 0.3em; text-align: center; border-radius: 0.3em; background: var(--line); color: var(--off); }
.sm-card.leader .sm-rank { background: var(--lime); color: var(--ink); }
.sm-crown { font-size: 0.9em; margin-right: 0.1em; }
.sm-name { font-size: 1.15em; color: var(--off); overflow: hidden; text-overflow: ellipsis; }
.sm-where { color: var(--muted); font-size: 0.8em; }
.sm-card .mvis-status { font-size: 0.75em; padding: 0.1em 0.45em; }
.sm-card .mvis-alert { font-size: 0.75em; top: 0.4em; right: 0.4em; }
.sm-card .mvis-cam { font-size: 0.62em; left: 0.5em; right: 0.5em; bottom: 0.35em; }
.sm-freeze { position: absolute; left: 0.5em; top: 0.4em; font-size: 0.68em; letter-spacing: 0.06em; color: var(--scr-dim); }
.sm-freeze.bad { color: #fff; background: #c62828; padding: 0.05em 0.4em; border-radius: 0.2em; font-weight: 700; animation: mvis-blink 1.2s steps(2) infinite; }
.sm-cf { display: flex; align-items: center; gap: 0.55em; padding: 0.4em 0.55em 0.45em; }
.sm-pips { display: flex; gap: 0.25em; }
.sm-pip { font-size: 0.68em; padding: 0.1em 0.35em; border: 1px solid var(--line); border-radius: 0.3em; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.sm-pip.on { background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 700; }
.sm-pip.now { border-color: var(--lime); color: var(--accent-text); }
.sm-bud { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.4em; font-size: 0.8em; }
.sm-bn { font-weight: 700; color: var(--off); }
.sm-bn::before { content: "⛽ "; }
.sm-burn { color: var(--p1); font-size: 0.85em; }
.sm-meter { grid-column: 1 / 3; } .sm-meter .meter { height: 0.45em; margin-top: 0.15em; }
.sm-score { font-size: 1.7em; font-weight: 700; color: var(--accent-text); min-width: 2.2em; text-align: right; }

/* ---------- side: leaderboard and fleet tracker ---------- */
.sm-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 0.8vw; display: flex; flex-direction: column; min-height: 0; overflow: hidden; margin: 0; }
.sm-ph { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.8em; font-family: var(--mono); letter-spacing: 0.12em; font-size: clamp(0.7rem, 0.85vw, 1.1rem); border-bottom: 1px solid var(--line); }
.sm-ph b { color: var(--accent-text); } .sm-ph .grow { flex: 1; } .sm-ph-note { color: var(--muted); font-size: 0.85em; }
.sm-rows { list-style: none; margin: 0; padding: 0.35em 0.5em; display: flex; flex-direction: column; justify-content: space-around; flex: 1; min-height: 0; font-size: clamp(0.8rem, 1.1vw, 1.6rem); }
.sm.tall .sm-rows { font-size: clamp(0.75rem, 1.6vh, 1.4rem); }
.sm-row { display: grid; grid-template-columns: 1.5em 0.9em auto minmax(0, 1fr) auto auto 2.6em; align-items: center; gap: 0.4em; padding: 0.12em 0.35em; border-radius: 0.35em; will-change: transform; }
.sm-row .glyph { width: 1.1em; height: 1.1em; }
.sm-row.leader { background: color-mix(in srgb, var(--lime) 14%, transparent); }
.sm-rk { font-family: var(--mono); font-weight: 700; color: var(--olive); text-align: center; }
.sm-row.leader .sm-rk { color: var(--accent-text); }
.sm-mv { font-size: 0.75em; } .sm-mv.up { color: var(--ok); } .sm-mv.down { color: var(--p0); }
.sm-rn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-rs { font-family: var(--mono); font-size: 0.75em; color: var(--muted); }
.sm-ro { display: flex; gap: 0.2em; }
.sm-ro .sev { font-style: normal; font-family: var(--mono); font-size: 0.65em; font-weight: 700; padding: 0.05em 0.35em; border-radius: 99px; color: var(--ink); }
.sm-rp { font-family: var(--mono); font-weight: 700; text-align: right; color: var(--off); }
.sm-fleet { background: var(--scr); }
.sm-fleet svg { flex: 1; width: 100%; min-height: 0; display: block; }
.sm-fleet .sm-ftick { fill: var(--scr-dim); }
.sm-fleet .sm-fp0 { fill: none; stroke: #ff3b3b; stroke-width: 1.6; animation: mvis-blink 0.9s steps(2) infinite; }
.sm-fleet .sev-3 .craft .beacon { fill: #ff3b3b; animation: mvis-blink 0.35s steps(2) infinite; }
.sm-fleet .sev-2 .craft .beacon { fill: #fa961e; animation: mvis-blink 0.7s steps(2) infinite; }
.sm-fleet .sev-1 .craft .beacon { fill: #e6d23c; }

/* ---------- celebrations (centre overlay) ---------- */
.cel { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; opacity: 0; visibility: hidden; }
.cel.on { opacity: 1; visibility: visible; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.78)); transition: opacity 0.4s; }
.cel.out { opacity: 0; visibility: visible; background: rgba(0, 0, 0, 0.6); transition: opacity 0.6s; }
.cel-box { position: relative; width: min(80vw, 118vh); margin: 0; border: 2px solid var(--team); border-radius: 1.2vw; background: var(--scr); box-shadow: 0 0 4vw color-mix(in srgb, var(--team) 50%, transparent), 0 2vw 6vw rgba(0, 0, 0, 0.6); animation: cel-pop 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.cel-box svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 320; }
.cel-text { position: relative; padding: 1.1vw 2vw 1.5vw; text-align: center; border-top: 1px solid var(--scr-line); background: linear-gradient(180deg, color-mix(in srgb, var(--team) 14%, var(--scr)), var(--scr)); animation: cel-rise 0.6s 0.35s cubic-bezier(0.2, 1, 0.3, 1) both; }
.cel-kicker { font-family: var(--mono); font-weight: 700; letter-spacing: 0.22em; color: var(--team); font-size: clamp(0.9rem, 1.4vw, 2rem); filter: brightness(1.25); }
.cel-head { display: flex; justify-content: center; align-items: center; gap: 0.35em; margin-top: 0.15em; font-family: var(--font); font-weight: 700; color: #fff; font-size: clamp(1.5rem, 3.4vw, 4.8rem); line-height: 1.1; }
.cel-head .glyph { width: 1em; height: 1em; flex: none; }
.cel-sub { margin-top: 0.4em; font-size: clamp(0.9rem, 1.45vw, 2rem); color: var(--scr-text); }
.cel-first, .cel-fast { color: #c8e842; }
.cel-test { position: absolute; top: 0.6vw; right: 1vw; font-family: var(--mono); font-size: clamp(0.7rem, 0.9vw, 1.2rem); letter-spacing: 0.2em; color: var(--scr-dim); border: 1px solid var(--scr-dim); padding: 0 0.5em; border-radius: 0.3em; }
.cel-conf, .cel-dust ellipse, .cel-flag, .cel-cloth, .cel-ring, .cel-shield, .cel-check, .cel-spark, .cel-moon, .cel-fix-ship { transform-box: fill-box; }
.cel .stars circle { animation: cel-twinkle 2.4s ease-in-out infinite alternate; }
.cel .stars circle:nth-child(3n) { animation-delay: 0.8s; } .cel .stars circle:nth-child(3n+1) { animation-delay: 1.6s; }
.cel-conf { transform-origin: center; animation: cel-fall 3.4s ease-in both; }

/* Stage 1: launch from the Earth into orbit */
.cel-s1 { transform-box: view-box; animation: cel-s1 4.6s cubic-bezier(0.45, 0, 0.3, 1) 0.3s both; }
.cel-orbit { fill: none; stroke: var(--atmo); stroke-width: 2; stroke-dasharray: 8 7; opacity: 0; animation: cel-fade 1s 2.4s both, cel-march 6s linear 2.4s infinite; }
.cel-atmo { animation: cel-glow 2s ease-in-out infinite alternate; }
@keyframes cel-s1 {
  0% { transform: translate(300px, 282px) rotate(0deg); }
  12% { transform: translate(300px, 270px) rotate(0deg); }
  45% { transform: translate(302px, 196px) rotate(8deg); }
  65% { transform: translate(345px, 182px) rotate(80deg); }
  100% { transform: translate(470px, 214px) rotate(114deg); }
}

/* Stage 2: the trans-lunar coast, Earth to Moon */
.cel-s2 { transform-box: view-box; animation: cel-s2 5.2s cubic-bezier(0.4, 0, 0.35, 1) 0.4s both; }
.cel-traj { fill: none; stroke: var(--atmo); stroke-width: 2; stroke-dasharray: 8 7; opacity: 0.75; animation: cel-march 5s linear infinite; }
.cel-moon { transform-origin: center; animation: cel-moon 5.6s ease-in-out 0.3s both; }
.cel-crater { fill: #00000030; }
@keyframes cel-s2 {
  0% { transform: translate(100px, 238px) rotate(36deg) scale(1); }
  25% { transform: translate(199px, 125px) rotate(48deg) scale(0.95); }
  50% { transform: translate(295px, 66px) rotate(70deg) scale(0.9); }
  75% { transform: translate(388px, 58px) rotate(102deg) scale(0.8); }
  100% { transform: translate(462px, 94px) rotate(125deg) scale(0.62); }
}

/* Stage 3: powered descent, touchdown, dust, then the team flag goes up */
.cel-s3 { transform-box: view-box; animation: cel-s3 4s cubic-bezier(0.15, 0.6, 0.35, 1) 0.2s both; }
.cel-s3 .plume { animation: mvis-plume 0.18s ease-in-out infinite alternate, cel-off 0.35s 3.9s forwards; }
.cel-dust ellipse { fill: #c9ced6; opacity: 0; transform-origin: center; animation: cel-dust 1.6s ease-out 3.95s both; }
.cel-dust ellipse:nth-child(2) { animation-delay: 4.05s; }
.cel-flag { transform-origin: bottom center; animation: cel-pole 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) 4.7s both; }
.cel-pole { fill: #d9dde2; } .cel-finial { fill: #ffffff; }
.cel-cloth { transform-origin: left center; animation: cel-cloth 0.7s cubic-bezier(0.3, 1.3, 0.5, 1) 5.4s both, cel-wave 1.6s ease-in-out 6.1s infinite alternate; }
.cel-ftext { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1px; }
@keyframes cel-s3 {
  0% { transform: translate(300px, -70px); }
  75% { transform: translate(300px, 196px); }
  100% { transform: translate(300px, 208px); }
}

/* Incident fixed: alarm, shield up, the craft calms down, a green check */
.cel-fix-ship { animation: mvis-shake 0.24s linear 0s 5; transform-origin: center; }
.cel.fix .craft .beacon { animation: cel-beacon 1.3s steps(8) forwards; }
.cel-ring { fill: none; stroke-width: 4; transform-origin: center; animation: cel-ring-red 1.3s ease-out forwards; }
.cel-ring.ok { stroke: #3ccf7a; opacity: 0; animation: cel-ring-ok 1.8s ease-out 1.2s forwards; }
.cel-shield { fill: rgba(95, 182, 255, 0.1); stroke: #5fb6ff; stroke-width: 2; opacity: 0; transform-origin: center; animation: cel-shield 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) 1.1s both; }
.cel-check { opacity: 0; transform-origin: center; animation: cel-check 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 1.5s both; }
.cel-check circle { fill: #3ccf7a; } .cel-check path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.cel-spark { fill: #c8e842; opacity: 0; transform-origin: center; animation: cel-spark 1.4s ease-out both; }

@keyframes cel-pop { from { transform: scale(0.82); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cel-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cel-twinkle { from { opacity: 0.25; } to { opacity: 0.9; } }
@keyframes cel-fade { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes cel-march { to { stroke-dashoffset: -150; } }
@keyframes cel-glow { from { opacity: 0.25; } to { opacity: 0.55; } }
@keyframes cel-moon { from { transform: scale(0.8); } to { transform: scale(1.25); } }
@keyframes cel-off { to { opacity: 0; } }
@keyframes cel-dust { 0% { opacity: 0.8; transform: scale(0.2); } 100% { opacity: 0; transform: scale(2.6, 1.6); } }
@keyframes cel-pole { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cel-cloth { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cel-wave { from { transform: skewY(0deg) scaleX(1); } to { transform: skewY(-3deg) scaleX(0.96); } }
@keyframes cel-fall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), 340px) rotate(var(--rot, 360deg)); opacity: 0.9; } }
@keyframes cel-beacon { 0%, 70% { fill: #ff3b3b; } 35% { fill: #ff3b3b; opacity: 0.3; } 100% { fill: #3ccf7a; opacity: 1; } }
@keyframes cel-ring-red { 0% { opacity: 1; transform: scale(0.9); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes cel-ring-ok { 0% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes cel-shield { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes cel-check { from { opacity: 0; transform: translate(392px, 82px) scale(0.2); } to { opacity: 1; transform: translate(392px, 82px) scale(1); } }
@keyframes cel-spark { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 40% { opacity: 1; transform: scale(1.3) rotate(45deg); } 100% { opacity: 0; transform: scale(0.6) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
  .cel-box svg { display: none; } /* text only: no flying craft */
  .cel-box, .cel-text { animation: none; }
  .sm-card, .sm-row { transition: none !important; }
}