/* Sky Team: a cockpit at night. Dark navy panels, instrument amber and green glows, the pilot's blue and the co-pilot's
   orange. The theme block swaps the shared tokens while the game is on screen (html.theme-skyteam); the rest is this
   game's own pieces, scoped under its own class names (.st-*) so nothing leaks into the other games' pages.
   The instruments move by CSS transitions with a short delay: a placed die flies in first (skyteam.js), then the
   horizon turns, the track slides, the markers move and the lights come on.
   The panel's palette is the --st-* tokens below (skyteam.js reads them too); its labels come in four sizes
   (--st-fs-1 … 4, in viewBox units); radii follow the app's 8 / 12 / 16 scale. */
html.theme-skyteam {
    --bg: #07121f;
    --panel: #0f2133;
    --panel-2: #163049;
    --panel-3: #1e3d5c;
    --line: #2a4d70;
    --text: #e9f1fa;
    --muted: #93abc4;
    --accent: #ffb547;
    --accent-2: #ffd27a;
    --accent-dark: #c27f1c;
    --accent-text: #1d1206;
    --danger: #ff5a4a;
    --ok: #5cf08e;
    --display: "Abril Fatface", "Playfair Display", Georgia, serif;
    --body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
    /* the crew and the instrument lights */
    --st-pilot: #4d96ff;
    --st-pilot-ink: #2a6fd9;
    --st-pilot-face: #eef4ff;
    --st-copilot: #ff9d33;
    --st-copilot-ink: #e07a10;
    --st-copilot-face: #fff3e4;
    --st-amber: #ffc25c;
    --st-green: #5cf08e;
    --st-green-soft: #7fe8a6;
    --st-green-pale: #9df5bd;
    --st-red: #ff4d4d;
    --st-red-soft: #ff8b8b;
    /* the panel: from the darkest well to the brightest print */
    --st-night: #08121d;
    --st-well: #0a1726;
    --st-panel: #0b1a2a;
    --st-bezel: #0f2438;
    --st-bezel-soft: #0d2033;
    --st-space: #13314d;
    --st-off: #1a2a3a;
    --st-cup-off: #1f3a56;
    --st-edge-soft: #203f5c;
    --st-edge: #24425f;
    --st-space-edge: #24496b;
    --st-bezel-edge: #2a4d70;
    --st-steel: #3a6189;
    --st-off-edge: #3a5570;
    --st-print-5: #47627e;
    --st-print-4: #5d7896;
    --st-tick: #6f8aa6;
    --st-print-3: #7f98b2;
    --st-print-2: #93abc4;
    --st-print-1: #c9d8e8;
    --st-print: #e9f1fa;
    --st-sky: #2f7fd0;
    --st-ground: #7c5228;
    --st-airport: #173b2a;
    --st-airport-edge: #4fbf7a;
    --st-traffic: #ffe1d6;
    /* the four label sizes on the panel */
    --st-fs-1: 7px;
    --st-fs-2: 8.5px;
    --st-fs-3: 10.5px;
    --st-fs-4: 15px;
}
html.theme-skyteam body { background: radial-gradient(ellipse 120% 60% at 50% 0%, #10263d 0%, var(--bg) 65%) fixed var(--bg); }
html.theme-skyteam h1, html.theme-skyteam h2 { font-weight: 400; letter-spacing: .01em; }

/* ---- the page: top bar, the panel, the tray, one bar of actions */
.st-page .topbar .round { color: var(--accent-2); }
.page.game-page.st-page.with-fabs { padding-bottom: 5.4rem; }
.st-topbar .row { gap: .35rem; flex-wrap: nowrap; }
.st-alt-pill { background: var(--st-well); border-color: var(--st-amber); color: var(--st-amber); font-weight: 700; letter-spacing: .04em; }
.st-alt-pill.final { border-color: var(--st-green); color: var(--st-green); }
.st-role { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .55rem; border-radius: 999px; font-weight: 700; font-size: .82rem; border: 1px solid; white-space: nowrap; }
.st-role .ico { width: 1em; height: 1em; }
.st-role.pilot { color: var(--st-pilot); border-color: var(--st-pilot); background: rgba(77, 150, 255, .12); }
.st-role.copilot { color: var(--st-copilot); border-color: var(--st-copilot); background: rgba(255, 157, 51, .12); }

.st-board-wrap { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; margin-bottom: .45rem; }
/* --st-room: the height everything but the board takes (top bar, the tray with its last-move line, the action bar). */
.st-board { display: block; --st-room: 17.6rem; --st-h: 548; width: min(100%, calc((100dvh - var(--st-room)) * 360 / var(--st-h))); aspect-ratio: 360 / var(--st-h); height: auto; margin: 0 auto; border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.st-page.final .st-board { --st-room: 19.4rem; }
.st-shake { animation: st-shake .55s cubic-bezier(.36, .07, .19, .97); }
@keyframes st-shake { 10%, 90% { transform: translate3d(-2px, 1px, 0); } 20%, 80% { transform: translate3d(5px, -2px, 0); } 30%, 50%, 70% { transform: translate3d(-9px, 2px, 0) rotate(-.6deg); } 40%, 60% { transform: translate3d(9px, -1px, 0) rotate(.6deg); } }
/* The end of a round: the panel sinks a few pixels with the altitude row and settles. */
.st-descend { animation: st-descend 1.4s cubic-bezier(.45, 0, .3, 1); }
@keyframes st-descend { 0% { transform: translateY(0); } 45% { transform: translateY(7px); } 75% { transform: translateY(-1px); } 100% { transform: translateY(0); } }

/* ---- the board (SVG) */
.st-panel { fill: var(--st-panel); stroke: var(--st-edge); stroke-width: 1.5; }
.st-bezel { fill: var(--st-bezel); stroke: var(--st-bezel-edge); stroke-width: 1; }
.st-bezel.soft { fill: var(--st-bezel-soft); stroke: var(--st-edge-soft); }
.st-board text { font-family: var(--body); }
.st-stop-pilot { stop-color: var(--st-pilot); }
.st-stop-copilot { stop-color: var(--st-copilot); }
.st-label { font-size: var(--st-fs-2); font-weight: 700; letter-spacing: .14em; fill: var(--st-print-2); }
.st-label-s { font-size: var(--st-fs-1); font-weight: 700; letter-spacing: .1em; fill: var(--st-print-3); }

.st-space rect { fill: var(--st-space); stroke: var(--st-space-edge); stroke-width: 1; }
.st-space.airport rect { fill: var(--st-airport); stroke: var(--st-airport-edge); }
.st-runway { stroke: var(--st-print); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .45; }
.st-track { transition: transform 1.25s cubic-bezier(.45, 0, .3, 1) .6s; }
.st-traffic { color: var(--st-traffic); transform-box: fill-box; transform-origin: center; transition: opacity .6s ease .55s, transform .8s cubic-bezier(.3, 0, .5, 1) .55s; }
.st-traffic.gone { opacity: 0; transform: translate(12px, -16px) scale(.35) rotate(40deg); }
.st-window { fill: none; stroke: var(--st-amber); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(255, 194, 92, .7)); }
/* The plane advanced: the window flashes amber once the track has slid. */
.st-window.st-flash { animation: st-flash 1.2s ease-out; }
@keyframes st-flash { 0% { fill: rgba(255, 194, 92, 0); stroke-width: 2; } 25% { fill: rgba(255, 194, 92, .45); stroke-width: 3.5; filter: drop-shadow(0 0 8px rgba(255, 194, 92, 1)); } 100% { fill: rgba(255, 194, 92, 0); stroke-width: 2; } }
.st-dist { font-size: var(--st-fs-2); font-weight: 700; fill: var(--st-print-4); }
.st-dist.here { fill: var(--st-amber); }

.st-alt-now { fill: rgba(255, 194, 92, .15); stroke: var(--st-amber); stroke-width: 1.2; transition: transform 1.2s cubic-bezier(.45, 0, .3, 1) .2s; }
.st-alt-t { font-size: var(--st-fs-3); font-weight: 700; fill: var(--st-print-1); }
.st-alt-row.past .st-alt-t { fill: var(--st-print-5); }
.st-alt-row.now .st-alt-t { fill: var(--st-amber); }
.st-alt-row.past .st-first { opacity: .35; }
.st-first.pilot { fill: var(--st-pilot); }
.st-first.copilot { fill: var(--st-copilot); }
.st-first-t { font-size: var(--st-fs-1); font-weight: 800; fill: var(--st-night); }
.st-reroll-token { color: var(--accent-2); filter: drop-shadow(0 0 2px rgba(255, 210, 122, .6)); }

.st-disc-bezel { fill: var(--st-well); stroke: var(--st-steel); stroke-width: 2.5; }
.st-horizon { transition: transform 1.3s cubic-bezier(.3, 1.45, .5, 1) .55s; }
.st-sky { fill: var(--st-sky); }
.st-ground { fill: var(--st-ground); }
.st-horizon-line { stroke: #fff; stroke-width: 1.6; }
.st-pitch { stroke: rgba(255, 255, 255, .65); stroke-width: 1; }
.st-pointer { fill: var(--st-amber); }
.st-tick { stroke: var(--st-tick); stroke-width: 2; stroke-linecap: round; transition: stroke .3s 1s; }
.st-tick.zero { stroke: var(--st-print); }
.st-tick.on { stroke: var(--st-amber); stroke-width: 3; }
.st-tick-t { font-size: var(--st-fs-1); font-weight: 700; fill: var(--st-print-3); }
.st-spin line { stroke: var(--st-red); stroke-width: 2.6; stroke-linecap: round; }
.st-spin.on line { filter: drop-shadow(0 0 4px var(--st-red)); stroke-width: 3.4; }
.st-aircraft { fill: none; stroke: var(--st-amber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.st-aircraft-dot { fill: var(--st-amber); }
.st-who { font-size: var(--st-fs-1); font-weight: 800; letter-spacing: .1em; }
.st-who.pilot { fill: var(--st-pilot); }
.st-who.copilot { fill: var(--st-copilot); }
.st-reroll-supply { color: var(--st-edge); }
.st-reroll-supply.on { color: var(--accent-2); filter: drop-shadow(0 0 2px rgba(255, 210, 122, .6)); }
.st-speed-t { font-size: var(--st-fs-4); font-weight: 800; fill: var(--st-amber); }

.st-zone { transition: fill .5s ease .6s; }
.st-zone.z0 { fill: rgba(92, 240, 142, .32); }
.st-zone.z1 { fill: rgba(255, 194, 92, .32); }
.st-zone.z2 { fill: rgba(255, 77, 77, .3); }
.st-zone.z2.final { fill: rgba(255, 77, 77, .62); }
/* The final round: everything past the brake marker is a crash. */
.st-overbrake { fill: rgba(255, 77, 77, .1); stroke: var(--st-red); stroke-width: 1.2; stroke-dasharray: 3 2; pointer-events: none; }
.st-zone-t { font-size: var(--st-fs-1); font-weight: 700; letter-spacing: .06em; }
.st-zone-t.z0 { fill: var(--st-green-soft); }
.st-zone-t.z1 { fill: var(--st-amber); }
.st-zone-t.z2 { fill: var(--st-red-soft); }
.st-num { font-size: var(--st-fs-3); font-weight: 700; fill: var(--st-print-1); }
.st-num.now { fill: var(--st-amber); font-weight: 800; }
.st-speed-now { fill: none; stroke: var(--st-amber); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(255, 194, 92, .8)); }
.st-marker { transition: transform .9s cubic-bezier(.3, 1.4, .5, 1) .6s; }
.st-marker line { stroke-width: 2.2; }
.st-marker.blue path { fill: var(--st-pilot); } .st-marker.blue line { stroke: var(--st-pilot); }
.st-marker.orange path { fill: var(--st-copilot); } .st-marker.orange line { stroke: var(--st-copilot); }
.st-marker.brake path { fill: var(--st-red); } .st-marker.brake line { stroke: var(--st-red); stroke-dasharray: 2 2; }

.st-cup { color: var(--st-cup-off); transition: color .4s .5s, filter .4s .5s; }
.st-cup.full { color: var(--st-amber); filter: drop-shadow(0 0 3px rgba(255, 194, 92, .6)); }
.st-light { fill: var(--st-off); stroke: var(--st-off-edge); stroke-width: 1.2; transition: fill .25s .6s, filter .25s .6s; }
.st-light.on { fill: var(--st-green); stroke: #b6ffd0; filter: drop-shadow(0 0 4px var(--st-green)); }
.st-brake-t { font-size: var(--st-fs-1); font-weight: 700; fill: var(--st-print-4); }
.st-brake-t.on { fill: var(--st-red-soft); }
.st-check circle { fill: none; stroke: var(--st-red-soft); stroke-width: 1.3; }
.st-check.met circle { fill: rgba(92, 240, 142, .2); stroke: var(--st-green); }
.st-check path { fill: none; stroke: var(--st-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-check-id { font-size: var(--st-fs-1); font-weight: 800; fill: var(--st-red-soft); }
.st-check-t { font-size: var(--st-fs-2); font-weight: 600; fill: var(--st-print-1); }
.st-check.met .st-check-t { fill: var(--st-green-pale); }

.st-slot .frame { stroke-width: 1.8; transition: fill .2s, stroke .2s, opacity .2s; }
.st-slot.pilot .frame { fill: rgba(77, 150, 255, .12); stroke: var(--st-pilot); }
.st-slot.copilot .frame { fill: rgba(255, 157, 51, .12); stroke: var(--st-copilot); }
.st-slot.either .frame { fill: rgba(255, 255, 255, .05); }
.st-slot-t { font-size: var(--st-fs-3); font-weight: 800; fill: var(--st-print); opacity: .85; pointer-events: none; }
.st-slot-ico { opacity: .5; pointer-events: none; }
.st-slot.pilot .st-slot-ico { color: var(--st-pilot); }
.st-slot.copilot .st-slot-ico { color: var(--st-copilot); }
.st-slot.either .st-slot-ico { color: var(--st-print-1); }
.st-board.interactive .st-slot { cursor: pointer; }
.st-slot.legal .frame { stroke: var(--st-amber); stroke-width: 2.6; fill: rgba(255, 194, 92, .2); animation: st-pulse 1s ease-in-out infinite alternate; }
.st-slot.legal .st-slot-t { fill: #fff; opacity: 1; }
.st-slot.legal .st-slot-ico { color: var(--st-amber); opacity: .9; }
.st-slot.dim { opacity: .35; }
@keyframes st-pulse { from { filter: drop-shadow(0 0 1px rgba(255, 194, 92, .4)); } to { filter: drop-shadow(0 0 6px rgba(255, 194, 92, .95)); } }
.st-must { fill: var(--st-amber); }
.st-must-t { font-size: var(--st-fs-1); font-weight: 700; letter-spacing: .06em; fill: var(--st-amber); opacity: .8; }
.st-must-t.now { opacity: 1; font-weight: 800; }
/* Your last dice must go on your axis and engine: those frames breathe in amber until they are filled. */
.st-slot.must-now .frame { stroke: var(--st-amber); stroke-width: 2.4; animation: st-must 1.1s ease-in-out infinite alternate; }
.st-slot.must-now .st-slot-ico { color: var(--st-amber); opacity: .85; }
@keyframes st-must { from { fill: rgba(255, 194, 92, .06); filter: drop-shadow(0 0 0 rgba(255, 194, 92, 0)); } to { fill: rgba(255, 194, 92, .26); filter: drop-shadow(0 0 7px rgba(255, 194, 92, .9)); } }

.st-pdie .face { stroke: rgba(0, 0, 0, .35); stroke-width: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.st-pdie.pilot .face { fill: var(--st-pilot-face); }
.st-pdie.copilot .face { fill: var(--st-copilot-face); }
.st-pdie.pilot .pip { fill: var(--st-pilot-ink); }
.st-pdie.copilot .pip { fill: var(--st-copilot-ink); }
.st-pdie.fresh { transform-box: fill-box; transform-origin: center; animation: st-land .34s cubic-bezier(.3, 1.6, .5, 1) .44s both; }
@keyframes st-land { from { opacity: 0; transform: scale(1.5); } 70% { opacity: 1; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.st-coffee-tag { fill: var(--st-amber); stroke: var(--st-night); stroke-width: 1; }
.st-coffee-tag-t { font-size: var(--st-fs-1); font-weight: 800; fill: var(--st-night); }

/* ---- a die in flight from the tray (or the other player's corner) to its space */
.st-flydie { position: fixed; left: 0; top: 0; z-index: 70; border-radius: 20%; pointer-events: none; box-shadow: 0 10px 22px rgba(0, 0, 0, .55); will-change: transform; }
.st-flydie.pilot { background: var(--st-pilot-face); border: 2px solid var(--st-pilot); }
.st-flydie.copilot { background: var(--st-copilot-face); border: 2px solid var(--st-copilot); }
.st-flydie i { position: absolute; width: 20%; height: 20%; border-radius: 50%; transform: translate(-50%, -50%); }
.st-flydie.pilot i { background: var(--st-pilot-ink); }
.st-flydie.copilot i { background: var(--st-copilot-ink); }

/* ---- your dice tray */
.st-tray-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .4rem .6rem .45rem; transition: border-color .3s, box-shadow .3s; }
.st-tray-card.turn { border-color: var(--st-amber); box-shadow: 0 0 0 1px rgba(255, 194, 92, .3), 0 0 18px rgba(255, 194, 92, .14); }
.st-tray-head { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; font-size: .85rem; }
.st-other { display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem; min-width: 0; padding: .1rem .5rem .1rem .3rem; border-radius: 999px; border: 1px solid transparent; transition: border-color .3s; }
.st-other.turn { border-color: currentColor; }
.st-other.pilot { color: var(--st-pilot); }
.st-other.copilot { color: var(--st-copilot); }
.st-other .name { color: var(--text); font-weight: 700; }
.st-other small { color: var(--muted); }
.st-other .st-seat-ico { width: 1.1rem; height: 1.1rem; }
.st-mini { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; margin-right: 2px; vertical-align: -.1rem; background: var(--st-off); border: 1.5px solid currentColor; }
/* The last move, in words, until the next one: a die in its owner's colour, then what it did. */
.st-lastmove { display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .8rem; line-height: 1.2; color: var(--text); background: var(--st-well);
    border: 1px solid var(--line); border-left: 3px solid var(--st-pilot); border-radius: 8px; padding: .2rem .45rem; animation: st-strip-in .35s ease-out; }
.st-lastmove.copilot { border-left-color: var(--st-copilot); }
.st-lastmove > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-lastmove-die { flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 4px; font-style: normal; font-weight: 800; font-size: .78rem;
    background: var(--st-pilot-face); color: var(--st-pilot-ink); border: 1.5px solid var(--st-pilot); }
.st-lastmove.copilot .st-lastmove-die { background: var(--st-copilot-face); color: var(--st-copilot-ink); border-color: var(--st-copilot); }
@keyframes st-strip-in { from { opacity: 0; transform: translateY(-4px); } }
/* The final round: the landing checklist is the first thing in the tray. */
.st-checklist { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.st-checklist li { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .76rem; padding: .18rem .4rem; border-radius: 8px;
    background: rgba(255, 77, 77, .1); border: 1px solid var(--st-red); color: var(--text); }
.st-checklist li b { font-family: var(--display); font-weight: 400; color: var(--st-red-soft); }
.st-checklist li .ico { width: .9rem; height: .9rem; flex: none; color: var(--st-red-soft); }
.st-checklist li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-checklist li.met { background: rgba(92, 240, 142, .1); border-color: var(--st-green); }
.st-checklist li.met b, .st-checklist li.met .ico { color: var(--st-green); }
.st-dice { display: flex; justify-content: center; gap: 1.25rem; padding: .55rem 0 .5rem; }

.st-die { --d: 46px; width: var(--d); height: var(--d); padding: 0; border: 0; background: none; position: relative; cursor: pointer; perspective: 420px;
    -webkit-tap-highlight-color: transparent; transition: transform .15s ease-out, opacity .25s, filter .25s; touch-action: manipulation; }
.st-die:disabled { cursor: default; }
/* Not your turn: your dice wait, greyed a little, so the lit tray of your turn stands out. */
.st-die:disabled:not(.placed):not(.blank) { filter: saturate(.3) brightness(.82); }
.st-die.big { --d: 60px; }
.st-cube { position: absolute; inset: 0; transform-style: preserve-3d; --fx: 0deg; --fy: 0deg;
    transform: translateY(0) scale(1) rotateX(-10deg) rotateY(12deg) rotateX(var(--fx)) rotateY(var(--fy)) rotateZ(0deg); }
.st-cube[data-v="2"] { --fy: -90deg; }
.st-cube[data-v="3"] { --fx: -90deg; }
.st-cube[data-v="4"] { --fx: 90deg; }
.st-cube[data-v="5"] { --fy: 90deg; }
.st-cube[data-v="6"] { --fy: 180deg; }
.st-face { position: absolute; inset: 0; border-radius: 10px; border: 2px solid var(--st-pilot); background: linear-gradient(155deg, #ffffff, #dfe8f5); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .12); }
.st-die.copilot .st-face { border-color: var(--st-copilot); background: linear-gradient(155deg, #ffffff, #f6e6d2); }
.st-face i { position: absolute; width: 17%; height: 17%; border-radius: 50%; transform: translate(-50%, -50%); background: var(--st-pilot-ink); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35); }
.st-die.copilot .st-face i { background: var(--st-copilot-ink); }
.st-face.f1 { transform: rotateY(0deg) translateZ(calc(var(--d) / 2)); }
.st-face.f2 { transform: rotateY(90deg) translateZ(calc(var(--d) / 2)); }
.st-face.f3 { transform: rotateX(90deg) translateZ(calc(var(--d) / 2)); }
.st-face.f4 { transform: rotateX(-90deg) translateZ(calc(var(--d) / 2)); }
.st-face.f5 { transform: rotateY(-90deg) translateZ(calc(var(--d) / 2)); }
.st-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.st-die.blank .st-face { background: linear-gradient(155deg, #1d3550, #12263b); border-style: dashed; opacity: .75; }
.st-die.blank .st-face i { display: none; }
.st-die.placed { opacity: .2; filter: grayscale(.7); }
.st-die.sel { transform: translateY(-9px); }
.st-die.sel .st-face { border-color: var(--st-amber); box-shadow: 0 0 14px rgba(255, 194, 92, .65), inset 0 -3px 6px rgba(0, 0, 0, .12); }
.st-shift { position: absolute; top: -9px; right: -11px; z-index: 2; transform: translateZ(60px); background: var(--st-amber); color: var(--accent-text); border-radius: 999px; font-size: .72rem; font-weight: 800; padding: .02rem .32rem; }

.st-coffee-row { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .3rem 0 0; }
.st-chip { border-radius: 999px; min-width: 3rem; font-weight: 800; border-color: var(--st-amber); color: var(--st-amber); }
.st-coffee-val { font-size: .88rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.st-coffee-val b { color: var(--st-amber); font-size: 1.1rem; }
.st-coffee-val .cups .ico { color: var(--st-amber); width: 1.05em; height: 1.05em; }
.st-tray-note { text-align: center; color: var(--muted); font-size: .86rem; margin: .25rem 0 0; min-height: 1.2em; }
.st-tray-note.must { color: var(--st-amber); font-weight: 700; }
.st-error { text-align: center; font-size: .85rem; margin: .2rem 0 0; }

.st-actions .fab-status { font-size: .95rem; padding: .7rem 1rem; transition: border-color .3s, background .3s, color .3s; }
/* Your turn: the status pill goes amber for as long as it lasts (the sweep, .turn-cue, plays once on top). */
.st-actions .fab-status.turn { border-color: var(--st-amber); color: var(--st-amber); background: linear-gradient(180deg, rgba(255, 194, 92, .2), rgba(255, 194, 92, .08)), var(--panel); font-weight: 800; letter-spacing: .02em; }
.st-reroll-btn { border-radius: 999px; box-shadow: var(--shadow); background: var(--panel-2); border-color: var(--st-amber); color: var(--st-amber); font-weight: 700; gap: .45rem; padding: .5rem .9rem; text-align: left; line-height: 1.1; }
.st-reroll-btn small { display: block; font-size: .7rem; font-weight: 400; color: var(--muted); }

/* Toasts sit just above the tray (skyteam.trackTray measures it), clear of the panel's top and the altitude pill; with a
   sheet open they keep the shared place above the action bar. */
.st-page:has(.st-tray-card):not(:has(.sheet-backdrop)) .toasts.bottom { bottom: var(--st-toast-bottom, calc(14rem + env(safe-area-inset-bottom, 0px))); }

/* ---- sheets */
.sheet.st-sheet { border-color: var(--st-steel); }
.sheet.st-sheet > header { background: linear-gradient(180deg, #13304b, var(--panel)); }
.st-brief { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.st-brief li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; background: var(--panel-2); border-radius: 8px; padding: .45rem .6rem; }
.st-brief li > .ico { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .05rem; }
.st-brief li.warn { border: 1px solid var(--st-amber); }
.st-brief li.warn > .ico { color: var(--st-amber); }
.st-role-ico.pilot { color: var(--st-pilot); }
.st-role-ico.copilot { color: var(--st-copilot); }
.st-gold { color: var(--accent-2); }
.st-hush { display: flex; gap: .5rem; align-items: center; color: var(--accent-2); font-style: italic; font-size: .92rem; margin: .2rem 0 0; }
.st-hush .ico { width: 1.4rem; height: 1.4rem; flex: none; }
.st-ready .ico { width: 1.3em; height: 1.3em; }

.st-altimeter { display: flex; align-items: baseline; gap: .2rem; background: var(--st-well); border: 1px solid var(--st-amber); border-radius: 8px; padding: .15rem .6rem; box-shadow: inset 0 0 12px rgba(255, 194, 92, .18), 0 0 14px rgba(255, 194, 92, .12); }
.st-altimeter b { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1.05; color: var(--st-amber); font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; text-shadow: 0 0 10px rgba(255, 194, 92, .35); }
.st-altimeter small { color: var(--muted); }
.st-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.st-summary li { display: flex; gap: .55rem; align-items: center; font-size: .9rem; }
.st-summary li .ico { width: 1.2rem; height: 1.2rem; flex: none; color: var(--muted); }
.st-summary li.good .ico { color: var(--st-green); }
.st-summary li.warn .ico { color: var(--st-amber); }
.st-warnline { display: flex; gap: .45rem; align-items: center; color: var(--st-amber); font-size: .9rem; margin: .5rem 0 0; }
/* The round-end lines come in one after another, 120 ms apart, while the altimeter winds down. */
.st-roundend .st-summary li, .st-roundend .st-warnline, .st-table-round .st-summary li { animation: st-line-in .32s ease-out both; animation-delay: calc(var(--i, 0) * 120ms + 180ms); }
@keyframes st-line-in { from { opacity: 0; transform: translateX(-10px); } }
.st-roundend.sheet { max-width: 640px; }

.st-reroll-dice { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 0 .4rem; }

.st-end-badge .ico { width: 2.4rem; height: 2.4rem; }
.st-end.landed { border-color: var(--st-green); }
.st-end.landed > header { background: linear-gradient(180deg, rgba(92, 240, 142, .22), var(--panel)); }
.st-end.landed .st-end-badge .ico { color: var(--st-green); filter: drop-shadow(0 0 6px var(--st-green)); }
.st-end.crashed { border-color: var(--st-red); }
.st-end.crashed > header { background: linear-gradient(180deg, rgba(255, 77, 77, .25), var(--panel)); }
.st-end.crashed .st-end-badge .ico { color: var(--st-red); }
.st-crash-text { font-size: 1rem; }
.st-final-checks { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.st-final-checks li { display: flex; align-items: center; gap: .5rem; background: var(--panel-2); border-radius: 8px; padding: .35rem .55rem; font-size: .9rem; }
.st-final-checks li .ico { width: 1.15rem; height: 1.15rem; flex: none; }
.st-final-checks li b { font-family: var(--display); font-weight: 400; width: 1rem; }
.st-final-checks li.met .ico { color: var(--st-green); }
.st-final-checks li.failed { border: 1px solid var(--st-red); }
.st-final-checks li.failed .ico { color: var(--st-red); }

.st-rules h3 { color: var(--accent-2); margin-top: .9rem; }
.st-rules-list { margin: 0 0 .5rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .25rem; }
.st-rules-panel { margin: 0; }
.st-rules-panel dt { font-weight: 700; display: flex; align-items: center; gap: .4rem; margin-top: .45rem; }
.st-rules-panel dt small { color: var(--muted); font-weight: 400; }
.st-rules-panel dt .ico { color: var(--accent-2); }
.st-rules-panel dd { margin: .1rem 0 0 1.6rem; font-size: .92rem; color: var(--muted); }
.st-blue { color: var(--st-pilot); }
.st-orange { color: var(--st-copilot); }

.st-flightlog { margin-top: .75rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: .5rem .7rem; }
.st-flightlog summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.st-flightlog .log { max-height: 45vh; overflow: auto; margin-top: .5rem; font-size: .88rem; }

/* ---- the lobby */
.st-lobby h2 { display: flex; align-items: center; gap: .45rem; }
.st-lobby h2 .ico { color: var(--st-amber); }
.st-airport { display: flex; gap: .65rem; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; margin-bottom: .6rem; }
.st-airport > .ico { width: 1.8rem; height: 1.8rem; color: var(--st-green); flex: none; }
.st-airport span { display: flex; flex-direction: column; }
.st-airport small { color: var(--muted); font-size: .8rem; }
.st-crew { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; }
.st-crew-row { display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; background: var(--panel-2); border-radius: 8px; border-left: 4px solid; }
.st-crew-row.pilot { border-color: var(--st-pilot); }
.st-crew-row.copilot { border-color: var(--st-copilot); }
.st-crew-row.pilot .st-seat-ico, .st-crew-row.pilot .minis { color: var(--st-pilot); }
.st-crew-row.copilot .st-seat-ico, .st-crew-row.copilot .minis { color: var(--st-copilot); }
.st-crew-row .st-seat-ico { width: 1.3rem; height: 1.3rem; flex: none; }
.st-crew-row .name { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.st-crew-row .name small { color: var(--muted); font-size: .76rem; }
.st-crew-row.turn { box-shadow: 0 0 0 1px var(--st-amber); }
.st-crew-row > small { color: var(--muted); }

/* ---- the table */
.st-tablepage { max-width: 1280px; }
.st-table-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
.st-board-wrap.big { position: relative; }
.st-board-wrap.big .st-board { --st-room: 6.5rem; width: min(100%, calc((100vh - var(--st-room)) * 360 / var(--st-h))); }
.st-table-side { display: flex; flex-direction: column; gap: .75rem; }
.st-table-side .st-crew { margin: 0; }
.st-ticker-card h3 { margin-top: 0; }
.st-ticker-card .ticker div.marker { color: var(--accent-2); }
.st-table-end.landed { border-color: var(--st-green); }
.st-table-end.crashed { border-color: var(--st-red); }
.st-table-end h2 { display: flex; align-items: center; gap: .45rem; }
/* The round's end on the table: the altimeter winding down and what the round did, until the next roll. */
.st-table-round { border-color: var(--st-amber); animation: st-strip-in .4s ease-out; }
.st-table-round .head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.st-table-round .eyebrow { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.st-table-round h3 { margin: 0; }
@media (max-width: 760px) { .st-table-grid { grid-template-columns: 1fr; } }

/* ---- short phones: a smaller board and tray so it all still fits */
@media (max-height: 760px) {
    .st-board { --st-room: 17.4rem; }
    .st-page.final .st-board { --st-room: 19rem; }
    .page.game-page.st-page.with-fabs { padding-bottom: 4.4rem; }
    .st-actions { padding-top: .4rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
    .st-actions .fab-status { padding: .5rem .8rem; }
    .st-tray-card { padding: .3rem .5rem .35rem; }
    .st-coffee-row { margin-top: .15rem; }
    .st-die { --d: 40px; }
    .st-dice { gap: 1rem; padding: .45rem 0 .4rem; }
    .st-tray-note { font-size: .8rem; }
}
@media (max-height: 640px) {
    .st-board { --st-room: 16.6rem; }
    .st-page.final .st-board { --st-room: 18.2rem; }
    .st-die { --d: 36px; }
}
/* A phone held sideways is short too, but there the height-driven size above would shrink the panel to a thumbnail:
   keep it readable and let the page scroll to the tray instead. */
@media (orientation: landscape) and (max-height: 520px) {
    .st-board, .st-page.final .st-board { width: min(100%, 340px); }
}

/* ---- the Flight Log: the clock, the piece in hand, the ability buttons */
.st-clock { display: inline-flex; align-items: center; gap: .25rem; background: var(--st-well); border-color: var(--st-red); color: var(--st-red-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.st-clock .ico { width: 1em; height: 1em; }
.st-clock.idle { border-color: var(--line); color: var(--muted); }
.st-clock.hurry { animation: st-hurry .5s steps(2) infinite; }
@keyframes st-hurry { to { background: rgba(255, 77, 77, .35); } }
.st-piece { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-weight: 800; font-size: 1.3rem; transform: translateY(-9px); }
.st-piece.token { background: var(--st-amber); color: var(--st-night); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25), 0 0 14px rgba(255, 194, 92, .65); }
.st-piece.traffic { border-radius: 10px; background: #141414; color: #fff; border: 2px solid #555; box-shadow: 0 0 14px rgba(255, 194, 92, .65); }
.st-piece .st-shift { transform: none; }
.st-lastmove-die.token { background: var(--st-amber); color: var(--st-night); border-color: var(--st-amber); border-radius: 50%; }
.st-lastmove-die.traffic { background: #141414; color: #fff; border-color: #555; }
.st-ability-row { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: .25rem 0 0; }
.st-ability-btn { border-radius: 999px; border-color: var(--accent-2); color: var(--accent-2); font-size: .78rem; padding: .25rem .6rem; gap: .3rem; }
.st-ability-btn .ico { width: 1em; height: 1em; }
.st-ability-btn.on { background: var(--accent-2); color: var(--accent-text); }
.st-flydie.token { border-radius: 50%; background: var(--st-amber); border: 2px solid var(--accent-dark); color: var(--st-night); display: grid; place-items: center; font-weight: 800; font-size: 1rem; }
.st-flydie.traffic { background: #141414; border: 2px solid #555; }
.st-flydie.traffic i { background: #f4f4f4; }

/* ---- the Flight Log on the board: the track's printed effects, the turn on the disc, the ice brakes, the pieces */
.st-space.turn rect { stroke: var(--st-amber); stroke-dasharray: 3 2; }
.st-turn { fill: var(--st-off); }
.st-turn.ok { fill: var(--st-green); }
.st-dice-ico { color: #0a0a0a; }
.st-dice-n { font-size: var(--st-fs-1); font-weight: 800; fill: var(--st-print); }
.st-more { font-size: var(--st-fs-1); font-weight: 800; fill: var(--st-traffic); }
.st-traffic.arrive { animation: st-arrive .6s ease-out both; }
@keyframes st-arrive { from { opacity: 0; transform: translate(-10px, 14px) scale(.4); } }
.st-box-ico { color: var(--st-print-3); transform: rotate(180deg); transform-box: fill-box; transform-origin: center; }
.st-label.warn { fill: var(--st-amber); }
.st-tick.ok { stroke: var(--st-green); }
.st-tick.bad { stroke: var(--st-red); opacity: .75; }
.st-tick-t.ok { fill: var(--st-green); }
.st-tick-t.bad { fill: var(--st-red-soft); }
.st-ice-row { font-size: var(--st-fs-1); font-weight: 800; }
.st-ice-row.pilot { fill: var(--st-pilot); }
.st-ice-row.either { fill: var(--st-print-3); }
.st-slot-t.ice { font-size: var(--st-fs-2); }
.st-slot.done .frame { opacity: .35; }
.st-slot.done .st-slot-t { opacity: .3; }
.st-slot.open .frame { stroke-width: 2.4; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .3)); }
.st-pdie.token .face { fill: var(--st-amber); stroke: var(--accent-dark); stroke-width: 1.2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.st-token-t { font-size: var(--st-fs-3); font-weight: 800; fill: var(--st-night); }
.st-pdie.traffic .face { fill: #141414; stroke: #666; }
.st-pdie.traffic .pip { fill: #f4f4f4; }
.st-check.tight .st-check-t { font-size: var(--st-fs-1); }
.st-checklist.six li { font-size: .7rem; }

/* ---- the strip: kerosene, the intern, the wind */
.st-kero-cell { transition: opacity .4s .5s; }
.st-kero-cell.k2 { fill: var(--st-green); } .st-kero-cell.k1 { fill: var(--st-amber); } .st-kero-cell.k0 { fill: var(--st-red); }
.st-kero-cell.burnt { opacity: .14; }
.st-kero-x { fill: var(--st-red); }
.st-kero-t { font-size: var(--st-fs-3); font-weight: 800; }
.st-kero-t.k2 { fill: var(--st-green); } .st-kero-t.k1 { fill: var(--st-amber); } .st-kero-t.k0 { fill: var(--st-red-soft); }
.st-kero-marker { transition: transform .9s cubic-bezier(.3, 1.4, .5, 1) .6s; }
.st-kero-marker path { fill: var(--st-print); } .st-kero-marker line { stroke: var(--st-print); stroke-width: 1.6; }
.st-intern-token circle { fill: var(--st-amber); stroke: var(--st-night); stroke-width: 1; }
.st-intern-token.pilot circle { stroke: var(--st-pilot); stroke-width: 2; }
.st-intern-token.copilot circle { stroke: var(--st-copilot); stroke-width: 2; }
.st-intern-t { font-size: var(--st-fs-2); font-weight: 800; fill: var(--st-night); }
.st-wind-cell { stroke: var(--st-panel); stroke-width: .8; transition: filter .3s .6s; }
.st-wind-cell.w3 { fill: #ff6a5a; } .st-wind-cell.w2 { fill: #ff9d33; } .st-wind-cell.w1 { fill: #ffd27a; } .st-wind-cell.w0 { fill: #e9f1fa; }
.st-wind-cell.wm1 { fill: #9fd0ff; } .st-wind-cell.wm2 { fill: #4d96ff; } .st-wind-cell.wm3 { fill: #2a6fd9; }
.st-wind-cell.nose { stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); }
.st-wind-plane { color: var(--st-print); transition: transform .9s cubic-bezier(.3, 1.4, .5, 1) .6s; }
.st-wind-t { font-size: var(--st-fs-4); font-weight: 800; fill: var(--st-amber); }

/* ---- the lobby: the scenario card, the ability cards, the clock, the airport picker */
.st-scn { border-radius: 12px; border: 1px solid var(--line); border-left: 6px solid var(--st-green); background: var(--panel-2); padding: .55rem .7rem; margin-bottom: .6rem; }
.st-scn.yellow { border-left-color: #ffd23b; } .st-scn.red { border-left-color: var(--st-red); } .st-scn.black { border-left-color: #0a0a0a; }
.st-scn-head { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.st-scn-code { font-family: var(--display); font-size: 1.4rem; color: var(--accent-2); }
.st-scn-name { font-weight: 700; font-size: 1.05rem; }
.st-scn-diff { margin-left: auto; font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.st-scn-blurb { margin: .35rem 0; font-size: .9rem; font-style: italic; }
.st-scn-extras { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .8rem; color: var(--muted); }
.st-scn-extras span { display: inline-flex; align-items: center; gap: .25rem; }
.st-scn-extras .ico { width: 1em; height: 1em; color: var(--accent-2); }
.st-scn-btn { margin-top: .5rem; }
.st-abilities { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.st-abilities .label { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.st-abilities .label .ico { color: var(--accent-2); width: 1.1em; height: 1.1em; }
.st-abilities .label small { color: var(--muted); font-weight: 400; }
.st-ability { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .1rem; border-radius: 10px; padding: .4rem .6rem; }
.st-ability small { color: var(--muted); font-weight: 400; font-size: .76rem; line-height: 1.25; white-space: normal; }
.st-ability.on { border-color: var(--accent-2); background: rgba(255, 210, 122, .14); }
.st-ability.on b { color: var(--accent-2); }
.st-ability:disabled { opacity: 1; cursor: default; }
.st-clock-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .3rem; }
.st-clock-row .label { font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; margin-right: .3rem; }
.st-clock-row .label .ico { width: 1.1em; height: 1.1em; color: var(--accent-2); }
.st-clock-btn { border-radius: 999px; padding: .3rem .7rem; }
.st-clock-btn.on { border-color: var(--accent-2); background: rgba(255, 210, 122, .14); color: var(--accent-2); font-weight: 700; }
.st-pick-h { display: flex; align-items: center; gap: .45rem; margin: .8rem 0 .3rem; color: var(--accent-2); font-size: 1rem; }
.st-pick-h i { width: .9rem; height: .9rem; border-radius: 50%; background: var(--st-green); }
.st-pick-h.yellow i { background: #ffd23b; } .st-pick-h.red i { background: var(--st-red); } .st-pick-h.black i { background: #0a0a0a; border: 1px solid #666; }
.st-pick-row { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-left: 5px solid var(--st-green); border-radius: 10px; padding: .45rem .6rem; margin-bottom: .3rem; color: var(--text); font: inherit; cursor: pointer; }
.st-pick-row.yellow { border-left-color: #ffd23b; } .st-pick-row.red { border-left-color: var(--st-red); } .st-pick-row.black { border-left-color: #0a0a0a; }
.st-pick-row.on { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }
.st-pick-row .code { font-family: var(--display); font-size: 1.15rem; color: var(--accent-2); width: 3rem; flex: none; }
.st-pick-row .body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.st-pick-row .body small { color: var(--muted); font-size: .76rem; }
.st-pick-row .icons { display: flex; gap: .15rem; flex-wrap: wrap; justify-content: flex-end; max-width: 5rem; }
.st-pick-row .icons .ico { width: 1rem; height: 1rem; color: var(--muted); }
.st-swap-offer { display: flex; align-items: center; gap: .8rem; background: var(--panel-2); border-radius: 10px; padding: .5rem .7rem; margin-bottom: .3rem; font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
    .st-track, .st-horizon, .st-marker, .st-alt-now, .st-traffic, .st-light, .st-zone, .st-cup, .st-kero-marker, .st-wind-plane, .st-kero-cell { transition: none !important; }
    .st-traffic.arrive, .st-clock.hurry { animation: none !important; }
    .st-pdie.fresh, .st-slot.legal .frame, .st-shake, .st-descend, .st-window.st-flash, .st-slot.must-now .frame, .st-lastmove, .st-table-round,
    .st-roundend .st-summary li, .st-roundend .st-warnline, .st-table-round .st-summary li { animation: none !important; }
}