/* =====================================================================
STAR REBELLION — UI THEME v1 ("Chunky Ops")
One stylesheet for every scene. Replaces the three per-scene copies
(#sc-base / #sc-space / #sc-ground) with shared, sr- prefixed
components so migration can happen screen by screen.
Fonts (add to ):
Rules of the house
1. Top reads, bottom does. Status lives in the top bar; every decision
lives in the bottom command bar.
2. Gold means "you can act on this". One gold primary per screen, and
whatever advances time is always the gold button at the far right.
3. Red is yours, blue is theirs, orange is danger. Never decorative.
4. Nothing below 12px except keyboard hints and tiny tags (11px).
5. Every interactive thing has an ink outline and presses down.
===================================================================== */
:root{
color-scheme:dark;
/* ---- raw palette ---- */
--sr-ink:#070818; /* outlines, hard shadows, text on gold */
--sr-void:#0a0c22; /* stage background, wells, tracks */
--sr-night:#10132e; /* rail, recessed areas */
--sr-hull:#1a1f47; /* panels, windows */
--sr-plate:#252c62; /* raised cards, buttons */
--sr-plate-hi:#313a7c; /* hover */
--sr-seam:#3a4488; /* dashed slots, dividers on dark */
--sr-text:#f1f3ff;
--sr-text-2:#b3bbe3;
--sr-text-3:#8790c4; /* AA on hull at >=12px */
--sr-gold:#ffc83a; --sr-gold-hi:#ffd866; --sr-gold-deep:#b9820a; --sr-gold-ink:#2a1a00;
--sr-rebel:#ff4a3d; --sr-rebel-hi:#ff8a5c; --sr-rebel-deep:#9c1a12; /* the revolution: classic rebel red */
--sr-heg:#4f8cff; --sr-heg-hi:#9cc2ff; --sr-heg-deep:#1a3a9e; /* the Hegemony: cold, evil blue */
--sr-hazard:#ff8a1f; --sr-hazard-deep:#9a4a00; /* danger that belongs to nobody */
--sr-go:#78ec5c; --sr-go-deep:#2b8f1d;
--sr-psi:#b47cff; --sr-psi-deep:#6b34c4;
--sr-fuel:#ff7ac8;
--sr-steel:#b9c5e6;
--sr-shield:#36e3f2; --sr-shield-deep:#0f7f8f;
--sr-ember:var(--sr-rebel); --sr-ember-hi:#ffb347; --sr-ember-deep:#5c120c; --sr-ember-core:#2a0705;
/* ---- meaning (use these, not raw colours) ---- */
--sr-c-action:var(--sr-gold); /* do this: primary, selection, coach */
--sr-c-friend:var(--sr-rebel); /* your people and assets */
--sr-c-foe:var(--sr-heg); /* Hegemony, hostiles, their awareness */
--sr-c-good:var(--sr-go); /* done, healthy, cover, safe */
--sr-c-warn:var(--sr-hazard); /* caution, wounded, shaken */
--sr-c-bad:var(--sr-hazard); /* low health, panic, misses, failed checks */
--sr-c-progress:var(--sr-psi); /* XP, levels, cultivation */
--sr-c-revolution:var(--sr-rebel); /* the Revolution hub: rebel red at its loudest */
--sr-c-info:var(--sr-shield); /* neutral info, shields, intel, stealth */
/* ---- resources ---- */
--sr-res-credits:var(--sr-gold);
--sr-res-supplies:var(--sr-go);
--sr-res-materials:var(--sr-steel);
--sr-res-fuel:var(--sr-fuel);
--sr-res-intel:var(--sr-shield);
/* ---- phases (the single strongest signal on screen) ---- */
--sr-phase-free:var(--sr-shield);
--sr-phase-plan:var(--sr-gold);
--sr-phase-fight:var(--sr-hazard);
--sr-phase-exec:var(--sr-steel);
/* ---- type ---- */
--sr-font-display:"Bungee","Exo 2",system-ui,sans-serif;
--sr-font-ui:"Exo 2",system-ui,sans-serif;
--sr-fs-micro:11px; /* kbd hints, tiny tags only */
--sr-fs-xs:12px;
--sr-fs-sm:13px;
--sr-fs-md:15px; /* body */
--sr-fs-lg:18px;
--sr-fs-xl:24px;
--sr-fs-2xl:34px;
--sr-fs-3xl:56px;
/* ---- space, shape, depth ---- */
--sr-s1:4px; --sr-s2:8px; --sr-s3:12px; --sr-s4:16px; --sr-s5:24px; --sr-s6:32px;
--sr-r-sm:5px; --sr-r:8px; --sr-r-lg:12px; --sr-r-xl:16px;
--sr-line:2px; /* the ink outline */
--sr-bevel:inset 0 2px 0 rgba(255,255,255,.10), inset 0 -3px 0 rgba(0,0,0,.28);
--sr-lift:0 3px 0 var(--sr-ink);
--sr-float:0 5px 0 var(--sr-ink), 0 18px 44px rgba(0,0,0,.5);
/* ---- motion ---- */
--sr-ease-pop:cubic-bezier(.34,1.56,.64,1);
--sr-ease-out:cubic-bezier(.2,.8,.2,1);
--sr-t-fast:90ms; --sr-t:180ms; --sr-t-slow:320ms;
/* ---- layout ---- */
--sr-topbar-h:56px;
--sr-rail-w:320px;
--sr-gutter:16px;
--sr-hit:40px; /* desktop minimum target; 44px on touch */
/* ---- layers ---- */
--sr-z-world:10; --sr-z-hud:20; --sr-z-rail:30; --sr-z-coach:40;
--sr-z-window:50; --sr-z-toast:60; --sr-z-menu:70;
}
/* ===== base ===== */
.sr-root{font-family:var(--sr-font-ui);font-size:var(--sr-fs-md);line-height:1.45;color:var(--sr-text);
font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;}
.sr-root *,.sr-root *::before,.sr-root *::after{box-sizing:border-box;}
.sr-root [hidden]{display:none!important;}
.sr-root :focus-visible{outline:3px solid var(--sr-gold);outline-offset:3px;}
.sr-display{font-family:var(--sr-font-display);font-weight:400;letter-spacing:.02em;line-height:1.05;}
.sr-muted{color:var(--sr-text-2);} .sr-faint{color:var(--sr-text-3);}
.sr-num{font-variant-numeric:tabular-nums;font-weight:700;}
/* ===== icons =====
— inherits currentColor */
.sr-ico{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em;color:inherit;}
/* ===== buttons ===== */
.sr-btn{--c:var(--sr-plate);--ct:var(--sr-text);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sr-s2);
min-height:var(--sr-hit);padding:0 var(--sr-s4);
font:700 var(--sr-fs-md)/1 var(--sr-font-ui);color:var(--ct);text-decoration:none;white-space:nowrap;
background:var(--c);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r);
box-shadow:var(--sr-bevel),var(--sr-lift);cursor:pointer;user-select:none;
transition:transform var(--sr-t-fast) var(--sr-ease-out),box-shadow var(--sr-t-fast),filter var(--sr-t-fast);}
.sr-btn:hover{filter:brightness(1.18);}
.sr-btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.28),0 1px 0 var(--sr-ink);}
.sr-btn .sr-ico{width:20px;height:20px;}
.sr-btn:disabled,.sr-btn[aria-disabled="true"]{--c:var(--sr-night);--ct:var(--sr-text-3);
box-shadow:inset 0 0 0 1px var(--sr-seam);filter:none;transform:none;cursor:not-allowed;}
.sr-btn--primary{--c:var(--sr-gold);--ct:var(--sr-gold-ink);font-family:var(--sr-font-display);font-weight:400;letter-spacing:.03em;}
.sr-btn--primary:hover{--c:var(--sr-gold-hi);filter:none;}
.sr-btn--danger{--c:var(--sr-hazard);--ct:var(--sr-ink);}
.sr-btn--friend{--c:var(--sr-rebel);--ct:#fff;}
.sr-btn--ghost{--c:transparent;box-shadow:none;border-color:var(--sr-seam);}
.sr-btn--ghost:hover{--c:var(--sr-plate);filter:none;}
.sr-btn--lg{min-height:52px;padding:0 var(--sr-s5);font-size:var(--sr-fs-lg);border-radius:var(--sr-r-lg);}
.sr-btn--sm{min-height:32px;padding:0 var(--sr-s3);font-size:var(--sr-fs-sm);}
.sr-btn--block{display:flex;width:100%;}
.sr-btn--icon{width:var(--sr-hit);padding:0;}
.sr-btn--icon.sr-btn--sm{width:32px;}
.sr-btn[aria-pressed="true"]{--c:var(--sr-shield-deep);--ct:#e6fdff;}
/* time-advancing primary: chevrons nudge forward on hover */
.sr-btn--go .sr-ico{transition:transform var(--sr-t) var(--sr-ease-pop);}
.sr-btn--go:hover .sr-ico{transform:translateX(3px);}
.sr-btn--attn::after{content:"";position:absolute;inset:-6px;border:2px solid var(--sr-gold);border-radius:calc(var(--sr-r) + 5px);
animation:sr-ping 1.6s var(--sr-ease-out) infinite;pointer-events:none;}
.sr-btngroup{display:inline-flex;}
.sr-btngroup>.sr-btn{border-radius:0;}
.sr-btngroup>.sr-btn+.sr-btn{margin-left:calc(var(--sr-line) * -1);}
.sr-btngroup>.sr-btn:first-child{border-radius:var(--sr-r) 0 0 var(--sr-r);}
.sr-btngroup>.sr-btn:last-child{border-radius:0 var(--sr-r) var(--sr-r) 0;}
.sr-kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;
font:800 var(--sr-fs-micro)/1 var(--sr-font-ui);border:1.5px solid currentColor;border-radius:4px;opacity:.75;}
/* ===== menu (top-bar overflow: restart, debug, settings) ===== */
.sr-menu{position:absolute;z-index:var(--sr-z-menu);min-width:230px;padding:6px;background:var(--sr-hull);border:var(--sr-line) solid var(--sr-ink);
border-radius:var(--sr-r-lg);box-shadow:var(--sr-float);animation:sr-pop var(--sr-t) var(--sr-ease-pop);}
.sr-menu__item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;font:700 var(--sr-fs-md)/1 var(--sr-font-ui);
color:var(--sr-text);background:transparent;border:0;border-radius:var(--sr-r);cursor:pointer;text-align:left;}
.sr-menu__item .sr-ico{width:18px;height:18px;color:var(--sr-text-2);}
.sr-menu__item:hover{background:var(--sr-plate);}
.sr-menu__item .sr-kbd{margin-left:auto;color:var(--sr-text-3);}
.sr-menu__item--danger{color:var(--sr-hazard);} .sr-menu__item--danger .sr-ico{color:var(--sr-hazard);}
.sr-menu__item--debug{color:var(--sr-psi);border:1.5px dashed color-mix(in srgb,var(--sr-psi) 50%,transparent);margin-top:4px;}
.sr-menu__item--debug .sr-ico{color:var(--sr-psi);}
.sr-menu__sep{height:2px;margin:6px 4px;background:var(--sr-ink);border-radius:2px;}
.sr-menu__head{padding:6px 10px 4px;font:800 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text-3);}
/* ===== tags, badges, chips ===== */
.sr-tag{--c:var(--sr-text-2);display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;
font:700 var(--sr-fs-xs)/1 var(--sr-font-ui);white-space:nowrap;color:var(--c);
background:color-mix(in srgb,var(--c) 15%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 45%,transparent);}
.sr-tag .sr-ico{width:15px;height:15px;}
.sr-tag--solid{background:var(--c);color:var(--sr-ink);box-shadow:inset 0 0 0 var(--sr-line) var(--sr-ink);}
.sr-tag--friend{--c:var(--sr-c-friend);} .sr-tag--foe{--c:var(--sr-c-foe);} .sr-tag--good{--c:var(--sr-c-good);}
.sr-tag--warn{--c:var(--sr-c-warn);} .sr-tag--bad{--c:var(--sr-c-bad);} .sr-tag--action{--c:var(--sr-c-action);} .sr-tag--progress{--c:var(--sr-c-progress);}
.sr-tag--info{--c:var(--sr-c-info);}
.sr-badge{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
font:800 var(--sr-fs-xs)/1 var(--sr-font-ui);color:#fff;background:var(--sr-rebel);border:var(--sr-line) solid var(--sr-ink);border-radius:999px;}
.sr-gear{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 6px;border-radius:var(--sr-r-sm);
font:700 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text);background:var(--sr-void);border:1.5px solid var(--sr-seam);}
.sr-gear .sr-ico{width:16px;height:16px;color:var(--sr-gold);}
/* ===== top bar ===== */
.sr-topbar{display:flex;align-items:center;gap:var(--sr-s4);height:var(--sr-topbar-h);padding:0 var(--sr-s3) 0 var(--sr-s4);
background:var(--sr-hull);border-bottom:var(--sr-line) solid var(--sr-ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);position:relative;z-index:var(--sr-z-rail);}
.sr-topbar__id{display:flex;flex-direction:column;min-width:0;}
.sr-topbar__title{font:400 var(--sr-fs-lg)/1 var(--sr-font-display);white-space:nowrap;}
.sr-topbar__sub{font:600 var(--sr-fs-xs)/1.2 var(--sr-font-ui);color:var(--sr-text-3);white-space:nowrap;margin-top:3px;}
.sr-topbar__mid{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--sr-s3);min-width:0;}
.sr-topbar__tools{display:flex;align-items:center;gap:6px;}
.sr-topbar__tools .sr-btn{min-height:36px;}
.sr-topbar__tools .sr-btn--icon{width:36px;}
/* resources: icon + value + label, labels drop on small screens */
.sr-resbar{display:flex;align-items:center;gap:var(--sr-s2);}
.sr-res{--c:var(--sr-gold);display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 5px;
background:var(--sr-void);border:var(--sr-line) solid var(--sr-ink);border-radius:999px;position:relative;cursor:default;}
.sr-res__ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--c);
background:color-mix(in srgb,var(--c) 18%,transparent);}
.sr-res__ico .sr-ico{width:17px;height:17px;}
.sr-res__txt{display:flex;flex-direction:column;line-height:1;}
.sr-res__val{font:800 var(--sr-fs-md)/1 var(--sr-font-ui);}
.sr-res__lbl{font:600 var(--sr-fs-micro)/1 var(--sr-font-ui);color:var(--sr-text-3);margin-top:3px;}
.sr-res__delta{position:absolute;left:50%;top:-4px;transform:translate(-50%,-100%);font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);
color:var(--c);text-shadow:0 2px 0 var(--sr-ink);animation:sr-float-up 1.2s var(--sr-ease-out) forwards;pointer-events:none;}
.sr-res--credits{--c:var(--sr-res-credits);} .sr-res--supplies{--c:var(--sr-res-supplies);} .sr-res--materials{--c:var(--sr-res-materials);}
.sr-res--fuel{--c:var(--sr-res-fuel);} .sr-res--intel{--c:var(--sr-res-intel);}
.sr-res.is-short .sr-res__val{color:var(--sr-c-bad);}
/* revolution level: replaces the red "lamp" that read as a notification */
/* Revolution hub: the master progress indicator, centre of the base top bar.
Larger than the bar and hangs below it; resources sit either side.
Rebel red at full volume: the burning flag of the revolution. */
.sr-revhub{--p:0;position:relative;flex:none;align-self:flex-start;width:88px;height:88px;margin:6px 10px -40px;
border-radius:50%;cursor:default;z-index:2;}
.sr-revhub__ring{position:absolute;inset:0;border-radius:50%;
background:conic-gradient(var(--sr-ember-hi) 0,var(--sr-ember) calc(var(--p)*1%),#2b1014 0);
box-shadow:0 0 0 var(--sr-line) var(--sr-ink),0 5px 0 var(--sr-ink),0 0 22px rgba(255,90,31,.45);}
.sr-revhub__ring::after{content:"";position:absolute;inset:-1px;border-radius:50%; /* milestone ticks every 25% */
background:repeating-conic-gradient(var(--sr-ink) 0 1.2deg,transparent 1.2deg 90deg);}
.sr-revhub__core{position:absolute;inset:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;
background:radial-gradient(circle at 50% 30%,#8a1f12 0,var(--sr-ember-deep) 55%,var(--sr-ember-core) 100%);
box-shadow:0 0 0 var(--sr-line) var(--sr-ink),inset 0 3px 0 rgba(255,200,140,.25),inset 0 -6px 12px rgba(0,0,0,.5);}
.sr-revhub__core .sr-ico{width:24px;height:24px;color:var(--sr-ember-hi);filter:drop-shadow(0 0 6px rgba(255,140,40,.8));
animation:sr-flicker 2.4s ease-in-out infinite;}
.sr-revhub__lvl{font:400 26px/1 var(--sr-font-display);color:#fff4e6;text-shadow:0 2px 0 var(--sr-ink),0 0 10px rgba(255,120,40,.7);margin-top:1px;}
.sr-revhub__lbl{font:800 var(--sr-fs-micro)/1 var(--sr-font-ui);color:#ffc9a3;letter-spacing:.06em;margin-top:2px;}
.sr-revhub__tip{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);display:none;width:230px;padding:10px 12px;
background:var(--sr-ink);border:var(--sr-line) solid var(--sr-ember);border-radius:var(--sr-r);box-shadow:0 10px 30px rgba(0,0,0,.5);
font:600 var(--sr-fs-sm)/1.45 var(--sr-font-ui);color:var(--sr-text-2);text-align:left;}
.sr-revhub__tip b{display:block;font:400 var(--sr-fs-md)/1.2 var(--sr-font-display);color:var(--sr-ember-hi);margin-bottom:3px;}
.sr-revhub:hover .sr-revhub__tip,.sr-revhub:focus-visible .sr-revhub__tip{display:block;}
.sr-revhub.is-rising .sr-revhub__ring{animation:sr-ember-surge 1.2s var(--sr-ease-out);} /* add when progress increases */
.sr-revhub--inline{align-self:center;margin:0;}
/* top bar with a hub: three columns so the hub sits at the exact centre of the screen */
.sr-topbar--hub{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--sr-s3);}
.sr-topbar__side{display:flex;align-items:center;justify-content:space-between;gap:var(--sr-s3);min-width:0;}
.sr-shell.has-revhub .sr-slot-tc{top:calc(var(--sr-gutter) + 44px);}
/* day */
.sr-day{display:inline-flex;align-items:center;gap:8px;font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);color:var(--sr-text-2);}
.sr-day b{font:400 var(--sr-fs-lg)/1 var(--sr-font-display);color:var(--sr-text);}
/* ===== phase plate: status + phase + round, centre of the top bar ===== */
.sr-phase{--c:var(--sr-phase-free);--s:var(--sr-c-good);display:inline-flex;align-items:stretch;height:40px;
border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-lg);overflow:hidden;box-shadow:var(--sr-lift);}
.sr-phase__status{display:flex;align-items:center;gap:7px;padding:0 12px;font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);
color:var(--s);background:color-mix(in srgb,var(--s) 14%,var(--sr-void));}
.sr-phase__status .sr-ico{width:17px;height:17px;}
.sr-phase__name{display:flex;align-items:center;padding:0 16px;font:400 var(--sr-fs-lg)/1 var(--sr-font-display);
color:var(--sr-ink);background:var(--c);border-left:var(--sr-line) solid var(--sr-ink);border-right:var(--sr-line) solid var(--sr-ink);}
.sr-phase__round{display:flex;align-items:center;padding:0 12px;font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);color:var(--sr-text-2);background:var(--sr-void);}
.sr-phase[data-status="alert"]{--s:var(--sr-c-foe);}
.sr-phase[data-status="alert"] .sr-phase__status .sr-ico{animation:sr-blink 1s steps(2) infinite;}
.sr-phase[data-phase="plan"]{--c:var(--sr-phase-plan);}
.sr-phase[data-phase="fight"]{--c:var(--sr-phase-fight);}
.sr-phase[data-phase="exec"]{--c:var(--sr-phase-exec);}
/* full-screen phase change: plays once when the phase flips */
.sr-banner{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:var(--sr-z-toast);}
.sr-banner__txt{--c:var(--sr-phase-plan);font:400 var(--sr-fs-3xl)/1 var(--sr-font-display);color:var(--c);
-webkit-text-stroke:3px var(--sr-ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--sr-ink);
animation:sr-slam 1.3s var(--sr-ease-pop) forwards;}
.sr-banner__sub{display:block;margin-top:10px;text-align:center;font:800 var(--sr-fs-lg)/1 var(--sr-font-ui);color:var(--sr-text);
-webkit-text-stroke:0;text-shadow:0 2px 0 var(--sr-ink);}
/* ===== shell & HUD slots ===== */
.sr-shell{display:grid;grid-template-columns:minmax(0,1fr) var(--sr-rail-w);grid-template-rows:var(--sr-topbar-h) minmax(0,1fr);height:100%;background:var(--sr-void);}
.sr-shell>.sr-topbar{grid-column:1/-1;}
.sr-stage{position:relative;overflow:hidden;min-width:0;min-height:0;}
.sr-stage>canvas{display:block;width:100%;height:100%;}
.sr-slot-tl,.sr-slot-tc,.sr-slot-tr,.sr-slot-bl,.sr-slot-bc,.sr-slot-br{position:absolute;z-index:var(--sr-z-hud);display:flex;flex-direction:column;gap:var(--sr-s3);}
.sr-slot-tl{top:var(--sr-gutter);left:var(--sr-gutter);}
.sr-slot-tc{top:var(--sr-gutter);left:50%;transform:translateX(-50%);align-items:center;}
.sr-slot-tr{top:var(--sr-gutter);right:var(--sr-gutter);align-items:flex-end;}
.sr-slot-bl{bottom:var(--sr-gutter);left:var(--sr-gutter);}
.sr-slot-bc{bottom:var(--sr-gutter);left:50%;transform:translateX(-50%);align-items:center;}
.sr-slot-br{bottom:var(--sr-gutter);right:var(--sr-gutter);align-items:flex-end;}
/* ===== right rail (information only — no controls besides selection) ===== */
.sr-rail{display:flex;flex-direction:column;min-height:0;background:var(--sr-night);border-left:var(--sr-line) solid var(--sr-ink);}
.sr-rail__scroll{flex:1;min-height:0;overflow-y:auto;padding:var(--sr-s3);display:flex;flex-direction:column;gap:var(--sr-s4);}
.sr-section__head{--c:var(--sr-text-2);display:flex;align-items:center;gap:8px;margin:0 0 var(--sr-s2);
font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);color:var(--c);}
.sr-section__head .sr-ico{width:18px;height:18px;}
.sr-section__head .sr-section__count{margin-left:auto;font-weight:700;color:var(--sr-text-3);}
.sr-section__head--friend{--c:var(--sr-c-friend);} .sr-section__head--foe{--c:var(--sr-c-foe);}
.sr-section__head--good{--c:var(--sr-c-good);} .sr-section__head--action{--c:var(--sr-c-action);}
.sr-section__head--progress{--c:var(--sr-c-progress);} .sr-section__head--info{--c:var(--sr-c-info);}
.sr-stack{display:flex;flex-direction:column;gap:6px;}
.sr-railhint{font:600 var(--sr-fs-xs)/1.3 var(--sr-font-ui);color:var(--sr-text-3);text-align:center;margin-top:6px;}
/* ===== avatars & level ring ===== */
.sr-avatar{--c:var(--sr-c-friend);position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
font:400 var(--sr-fs-sm)/1 var(--sr-font-display);color:var(--c);background:var(--sr-void);
box-shadow:0 0 0 var(--sr-line) var(--c),0 0 0 4px var(--sr-ink);}
.sr-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.sr-avatar__role{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
background:var(--c);color:var(--sr-ink);border:var(--sr-line) solid var(--sr-ink);}
.sr-avatar__role .sr-ico{width:12px;height:12px;}
.sr-avatar--foe{--c:var(--sr-c-foe);box-shadow:0 0 0 var(--sr-line) var(--c),0 0 0 4px var(--sr-ink),0 0 14px rgba(79,140,255,.45);}
.sr-avatar--pilot{--c:var(--sr-gold);}
.sr-avatar--lg{width:56px;height:56px;font-size:var(--sr-fs-lg);}
.sr-level{--p:40;position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
background:conic-gradient(var(--sr-psi) calc(var(--p)*1%),var(--sr-void) 0);box-shadow:0 0 0 var(--sr-line) var(--sr-ink);}
.sr-level::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--sr-hull);box-shadow:inset 0 0 0 var(--sr-line) var(--sr-ink);}
.sr-level b{position:relative;font:400 var(--sr-fs-xl)/1 var(--sr-font-display);color:var(--sr-psi);}
/* ===== health, nerve, meters ===== */
.sr-hp{--hp:var(--sr-go);display:flex;align-items:center;gap:7px;}
.sr-hp__cells{display:flex;gap:2px;padding:2px;background:var(--sr-ink);border-radius:4px;}
.sr-hp__cell{width:11px;height:8px;border-radius:2px;background:#1b1f40;}
.sr-hp__cell.is-on{background:var(--hp);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);}
.sr-hp__num{font:700 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text-2);white-space:nowrap;}
.sr-hp--mid{--hp:var(--sr-gold);}
.sr-hp--low{--hp:var(--sr-c-bad);}
.sr-hp--low .sr-hp__num{color:var(--sr-c-bad);}
.sr-nerve{display:inline-flex;align-items:center;gap:4px;font:800 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--c);}
.sr-nerve .sr-ico{width:15px;height:15px;}
.sr-nerve--cool{--c:var(--sr-shield);} .sr-nerve--steady{--c:var(--sr-text-2);}
.sr-nerve--shaken{--c:var(--sr-c-warn);} .sr-nerve--panic{--c:var(--sr-c-bad);animation:sr-blink 1s steps(2) infinite;}
.sr-meter{--c:var(--sr-psi);display:grid;grid-template-columns:88px 1fr 34px;align-items:center;gap:10px;font:700 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text-2);}
.sr-meter__track{height:12px;padding:2px;background:var(--sr-ink);border-radius:999px;}
.sr-meter__fill{height:100%;border-radius:999px;background:var(--c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);}
.sr-meter__val{text-align:right;color:var(--sr-text);}
.sr-meter--risk{--c:var(--sr-c-bad);}
.sr-meter--risk.is-hot .sr-meter__fill{background:repeating-linear-gradient(-45deg,var(--sr-hazard) 0 6px,#ffc07a 6px 12px);animation:sr-hazard 1s linear infinite;background-size:17px 17px;}
/* ===== unit row (rail) ===== */
.sr-unit{--c:var(--sr-c-friend);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
padding:9px 10px 9px 12px;background:var(--sr-hull);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r);
box-shadow:inset 4px 0 0 var(--c),0 2px 0 var(--sr-ink);cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%;
transition:background var(--sr-t-fast);}
.sr-unit:hover{background:var(--sr-plate);}
.sr-unit__main{min-width:0;display:flex;flex-direction:column;gap:5px;}
.sr-unit__top{display:flex;align-items:baseline;gap:8px;}
.sr-unit__name{font:800 var(--sr-fs-md)/1.1 var(--sr-font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-unit__role{font:600 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text-3);white-space:nowrap;}
.sr-unit__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.sr-unit--foe{--c:var(--sr-c-foe);cursor:default;}
.sr-unit.is-selected{background:var(--sr-plate);box-shadow:inset 4px 0 0 var(--c),0 0 0 2px var(--sr-gold),0 2px 0 var(--sr-ink);}
.sr-unit.is-acting{animation:sr-acting 1.2s ease-in-out infinite;}
.sr-unit.is-down{opacity:.5;filter:saturate(.25);cursor:default;}
.sr-unit--ghost{grid-template-columns:auto 1fr;background:transparent;border:var(--sr-line) dashed var(--sr-seam);box-shadow:none;color:var(--sr-text-3);cursor:default;}
.sr-unit--ghost .sr-ico{width:20px;height:20px;}
.sr-unit--ghost b{color:var(--sr-text-2);}
.sr-ordertag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:var(--sr-r-sm);
font:700 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-gold);background:color-mix(in srgb,var(--sr-gold) 12%,transparent);border:1.5px dashed color-mix(in srgb,var(--sr-gold) 55%,transparent);}
.sr-ordertag .sr-ico{width:14px;height:14px;}
.sr-ordertag--none{color:var(--sr-text-3);background:transparent;border-color:var(--sr-seam);}
/* ===== loot ===== */
.sr-loot{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--sr-hull);border-radius:var(--sr-r-sm);font:700 var(--sr-fs-sm)/1.2 var(--sr-font-ui);}
.sr-loot .sr-ico{width:18px;height:18px;color:var(--c,var(--sr-gold));}
.sr-loot b{margin-left:auto;font-weight:800;}
.sr-empty{padding:10px 12px;border:var(--sr-line) dashed var(--sr-seam);border-radius:var(--sr-r);font:600 var(--sr-fs-sm)/1.4 var(--sr-font-ui);color:var(--sr-text-3);}
/* ===== objective tracker (top-left of every mission) ===== */
.sr-objectives{width:320px;padding:12px 14px;background:color-mix(in srgb,var(--sr-hull) 94%,transparent);
border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-lg);box-shadow:var(--sr-float);}
.sr-objectives__head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);color:var(--sr-gold);}
.sr-objectives__head .sr-ico{width:18px;height:18px;}
.sr-obj{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;padding:5px 0;font:600 var(--sr-fs-sm)/1.35 var(--sr-font-ui);color:var(--sr-text-3);}
.sr-obj__mark{width:18px;height:18px;margin-top:1px;display:grid;place-items:center;border:var(--sr-line) dashed currentColor;border-radius:5px;}
.sr-obj__mark .sr-ico{width:13px;height:13px;}
.sr-obj__count{font-weight:800;color:var(--sr-text-2);}
.sr-obj.is-current{color:var(--sr-text);font-size:var(--sr-fs-md);font-weight:700;}
.sr-obj.is-current .sr-obj__mark{border-style:solid;border-color:var(--sr-gold);background:color-mix(in srgb,var(--sr-gold) 22%,transparent);
animation:sr-acting 1.4s ease-in-out infinite;}
.sr-obj.is-done{color:var(--sr-go);}
.sr-obj.is-done .sr-obj__mark{border-style:solid;background:var(--sr-go);color:var(--sr-ink);border-color:var(--sr-ink);}
.sr-objectives.is-compact .sr-obj:not(.is-current){display:none;} /* during combat rounds */
.sr-obj--note{grid-template-columns:22px 1fr;font-size:var(--sr-fs-xs);font-style:italic;}
/* ===== coach card (tutorial) — gold sticker with a pointer tail ===== */
.sr-coach{position:relative;width:320px;padding:12px 14px 12px;background:var(--sr-gold);color:var(--sr-gold-ink);
border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-lg);box-shadow:0 5px 0 var(--sr-ink);
font:600 var(--sr-fs-sm)/1.45 var(--sr-font-ui);animation:sr-pop var(--sr-t-slow) var(--sr-ease-pop);z-index:var(--sr-z-coach);}
.sr-coach__head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.sr-coach__title{font:400 var(--sr-fs-md)/1 var(--sr-font-display);}
.sr-coach__dots{display:flex;gap:4px;margin-left:auto;}
.sr-coach__dots i{width:8px;height:8px;border-radius:50%;background:rgba(42,26,0,.25);}
.sr-coach__dots i.is-on{background:var(--sr-ink);}
.sr-coach b{font-weight:800;}
.sr-coach .sr-kbd{opacity:1;border-color:var(--sr-gold-ink);margin:0 1px;}
.sr-coach__foot{display:flex;justify-content:flex-end;margin-top:10px;}
.sr-coach__foot .sr-btn{--c:var(--sr-ink);--ct:var(--sr-gold);min-height:30px;font-size:var(--sr-fs-sm);box-shadow:none;}
.sr-coach::after{content:"";position:absolute;width:16px;height:16px;background:var(--sr-gold);border:var(--sr-line) solid var(--sr-ink);
border-top:0;border-left:0;display:none;}
.sr-coach--tail-down::after{display:block;left:32px;bottom:-9px;transform:rotate(45deg);}
.sr-coach--tail-up::after{display:block;left:32px;top:-9px;transform:rotate(-135deg);}
.sr-coach--tail-left::after{display:block;left:-9px;top:22px;transform:rotate(135deg);}
/* floating pointer at a target (replaces the bobbing triangle) */
.sr-pointer{position:absolute;z-index:var(--sr-z-coach);display:flex;flex-direction:column;align-items:center;pointer-events:none;
transform:translateX(-50%);animation:sr-bob 1s ease-in-out infinite;}
.sr-pointer__label{padding:5px 10px;font:800 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-gold-ink);background:var(--sr-gold);
border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-sm);box-shadow:var(--sr-lift);white-space:nowrap;}
.sr-pointer__arrow{width:0;height:0;margin-top:4px;border:9px solid transparent;border-top:12px solid var(--sr-gold);filter:drop-shadow(0 2px 0 var(--sr-ink));}
/* ===== comms feed (bottom-left, fades; full log lives in a drawer) ===== */
.sr-comms{width:360px;display:flex;flex-direction:column;gap:5px;}
.sr-comm{--c:var(--sr-text-3);padding:6px 10px 6px 11px;font:600 var(--sr-fs-sm)/1.35 var(--sr-font-ui);color:var(--sr-text-2);
background:rgba(7,8,24,.82);border-left:4px solid var(--c);border-radius:0 var(--sr-r-sm) var(--sr-r-sm) 0;
animation:sr-slide-in var(--sr-t) var(--sr-ease-out);}
.sr-comm b{color:var(--c);font-weight:800;}
.sr-comm--friend{--c:var(--sr-c-friend);} .sr-comm--foe{--c:var(--sr-c-foe);} .sr-comm--good{--c:var(--sr-c-good);}
.sr-comm--action{--c:var(--sr-c-action);}
.sr-comm.is-old{opacity:.55;}
.sr-comm.is-expired{display:none;} /* lines expire ~6s after arriving; the full log keeps them */
.sr-comms__more{align-self:flex-start;}
.sr-slot-tr .sr-comms{width:320px;}
.sr-slot-tr .sr-comms__more{align-self:flex-end;}
/* full log (drawer / window body) */
.sr-log{font:500 var(--sr-fs-sm)/1.5 var(--sr-font-ui);color:var(--sr-text-2);}
.sr-log p{margin:0 0 4px;}
.sr-log .is-friend{color:var(--sr-c-friend);} .sr-log .is-foe{color:var(--sr-c-foe);} .sr-log .is-good{color:var(--sr-c-good);}
.sr-log .is-action{color:var(--sr-c-action);} .sr-log .is-progress{color:var(--sr-c-progress);}
.sr-log .sr-log__day{display:block;margin:10px 0 4px;font:800 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text-3);}
/* ===== command bar (bottom centre: who, orders, commit) ===== */
.sr-cmdbar{display:flex;align-items:stretch;gap:var(--sr-s3);padding:10px;background:var(--sr-hull);
border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-xl);box-shadow:var(--sr-float);}
.sr-cmdbar__who{display:flex;align-items:center;gap:12px;padding:0 14px 0 6px;border-right:var(--sr-line) solid var(--sr-ink);min-width:170px;}
.sr-cmdbar__name{font:800 var(--sr-fs-md)/1.1 var(--sr-font-ui);}
.sr-cmdbar__hint{font:600 var(--sr-fs-xs)/1.2 var(--sr-font-ui);color:var(--sr-text-3);margin-top:3px;}
.sr-cmdbar__go{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:6px;padding-left:14px;border-left:var(--sr-line) solid var(--sr-ink);}
.sr-cmdbar__count{font:700 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text-3);text-align:center;}
.sr-cmdbar__count b{color:var(--sr-text);}
.sr-orders{display:flex;gap:6px;}
.sr-order{--c:var(--sr-text);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
width:72px;min-height:72px;padding:6px 4px;font:700 var(--sr-fs-xs)/1.1 var(--sr-font-ui);color:var(--sr-text);text-align:center;
background:var(--sr-plate);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-lg);box-shadow:var(--sr-bevel),var(--sr-lift);
cursor:pointer;transition:transform var(--sr-t-fast) var(--sr-ease-pop),box-shadow var(--sr-t-fast),background var(--sr-t-fast);}
.sr-order .sr-ico{width:26px;height:26px;color:var(--c);}
.sr-order__key{position:absolute;top:4px;left:5px;}
.sr-order:hover{background:var(--sr-plate-hi);transform:translateY(-2px);box-shadow:var(--sr-bevel),0 5px 0 var(--sr-ink);}
.sr-order:active{transform:translateY(1px);box-shadow:var(--sr-bevel),0 1px 0 var(--sr-ink);}
.sr-order.is-active{background:var(--sr-gold);color:var(--sr-gold-ink);transform:translateY(-4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 6px 0 var(--sr-ink);}
.sr-order.is-active .sr-ico{color:var(--sr-gold-ink);}
.sr-order:disabled{background:var(--sr-night);color:var(--sr-text-3);box-shadow:inset 0 0 0 1px var(--sr-seam);transform:none;cursor:not-allowed;}
.sr-order:disabled .sr-ico{color:var(--sr-text-3);opacity:.6;}
/* order families tint the icon so the bar scans at a glance */
.sr-order--move{--c:var(--sr-rebel);} .sr-order--fight{--c:var(--sr-hazard);} .sr-order--stance{--c:var(--sr-shield);}
.sr-order--util{--c:var(--sr-go);} .sr-order--nerve{--c:var(--sr-psi);}
.sr-orders__sep{width:2px;margin:6px 2px;background:var(--sr-ink);border-radius:2px;}
/* engagement: the VS panel docks directly above the command bar (.sr-slot-bc stacks top-down) */
/* contextual pill above the bar ("Pick a destination — Esc to cancel") */
.sr-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);
color:var(--sr-gold);background:var(--sr-ink);border:var(--sr-line) solid var(--sr-gold);border-radius:999px;box-shadow:var(--sr-lift);}
.sr-pill .sr-kbd{color:var(--sr-text-2);}
/* ===== tooltip ===== */
.sr-tip{position:absolute;z-index:var(--sr-z-menu);width:240px;padding:10px 12px;background:var(--sr-ink);color:var(--sr-text);
border:var(--sr-line) solid var(--sr-seam);border-radius:var(--sr-r);box-shadow:0 10px 30px rgba(0,0,0,.5);
font:600 var(--sr-fs-sm)/1.45 var(--sr-font-ui);pointer-events:none;}
.sr-tip__title{display:flex;align-items:center;gap:8px;font:800 var(--sr-fs-md)/1.1 var(--sr-font-ui);margin-bottom:4px;}
.sr-tip__title .sr-kbd{margin-left:auto;color:var(--sr-text-3);}
.sr-tip__rule{color:var(--sr-text-2);}
.sr-tip__nums{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.sr-tip__why{margin-top:8px;padding-top:8px;border-top:1px solid var(--sr-seam);color:var(--sr-c-bad);font-weight:700;}
/* ===== VS panel (engagement) — recommended to move from canvas to DOM ===== */
.sr-vs{display:grid;grid-template-columns:minmax(0,1fr) 168px minmax(0,1fr);width:min(760px,calc(100vw - 32px));
background:var(--sr-hull);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-xl);box-shadow:var(--sr-float);overflow:hidden;
animation:sr-pop var(--sr-t-slow) var(--sr-ease-pop);}
.sr-vs__side{--c:var(--sr-c-friend);padding:12px 14px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 12%,transparent),transparent 60%);}
.sr-vs__side--foe{--c:var(--sr-c-foe);}
.sr-vs__who{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sr-vs__role{display:inline-flex;align-items:center;gap:4px;font:800 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--c);}
.sr-vs__role .sr-ico{width:14px;height:14px;}
.sr-vs__name{font:800 var(--sr-fs-md)/1.1 var(--sr-font-ui);margin-top:3px;}
.sr-vs__mods{display:flex;flex-direction:column;gap:3px;}
.sr-mod{display:flex;justify-content:space-between;gap:8px;font:600 var(--sr-fs-sm)/1.3 var(--sr-font-ui);color:var(--sr-text-2);}
.sr-mod b{font-weight:800;color:var(--sr-text);}
.sr-mod.is-plus b{color:var(--sr-go);} .sr-mod.is-minus b{color:var(--sr-c-bad);}
.sr-vs__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:8px;border-top:var(--sr-line) solid var(--sr-ink);
font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);color:var(--c);}
.sr-vs__total b{font:400 var(--sr-fs-xl)/1 var(--sr-font-display);}
.sr-vs__mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px;background:var(--sr-void);
border-left:var(--sr-line) solid var(--sr-ink);border-right:var(--sr-line) solid var(--sr-ink);}
.sr-vs__odds{--c:var(--sr-gold);font:400 44px/1 var(--sr-font-display);color:var(--c);}
.sr-vs__odds small{font-size:22px;}
.sr-vs__odds.is-good{--c:var(--sr-go);} .sr-vs__odds.is-bad{--c:var(--sr-c-bad);}
.sr-vs__need{font:800 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text-3);}
.sr-vs__step{font:700 var(--sr-fs-micro)/1 var(--sr-font-ui);color:var(--sr-text-3);margin-top:6px;}
.sr-die{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:6px 0 2px;color:var(--sr-text);}
.sr-die .sr-ico{position:absolute;inset:0;width:100%;height:100%;color:var(--sr-seam);}
.sr-die b{position:relative;font:400 var(--sr-fs-xl)/1 var(--sr-font-display);}
.sr-die.is-rolling{animation:sr-roll .5s var(--sr-ease-out);}
.sr-die.is-hit .sr-ico{color:var(--sr-go);} .sr-die.is-miss .sr-ico{color:var(--sr-c-bad);}
/* ===== stamps & toasts ===== */
.sr-stamp{--c:var(--sr-go);display:inline-block;padding:4px 14px;font:400 var(--sr-fs-xl)/1.1 var(--sr-font-display);color:var(--c);
border:4px solid var(--c);border-radius:var(--sr-r);transform:rotate(-6deg);background:color-mix(in srgb,var(--c) 10%,transparent);
text-shadow:0 2px 0 var(--sr-ink);box-shadow:0 0 0 2px var(--sr-ink),inset 0 0 0 2px var(--sr-ink);animation:sr-stamp .45s var(--sr-ease-pop) both;}
.sr-stamp--foe{--c:var(--sr-heg);} .sr-stamp--bad{--c:var(--sr-c-bad);} .sr-stamp--action{--c:var(--sr-gold);}
.sr-toast{--c:var(--sr-go);display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;font:700 var(--sr-fs-md)/1.2 var(--sr-font-ui);
color:var(--sr-text);background:var(--sr-hull);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-lg);
box-shadow:inset 6px 0 0 var(--c),var(--sr-float);animation:sr-pop var(--sr-t-slow) var(--sr-ease-pop);}
.sr-toast .sr-ico{width:22px;height:22px;color:var(--c);margin-left:4px;}
.sr-toast b{color:var(--c);}
.sr-toast--friend{--c:var(--sr-c-friend);} .sr-toast--foe{--c:var(--sr-c-foe);} .sr-toast--action{--c:var(--sr-c-action);}
/* ===== windows (one family for every popup) ===== */
.sr-scrim{position:absolute;inset:0;z-index:var(--sr-z-window);display:grid;place-items:center;padding:24px;overflow:auto;
background:rgba(7,8,24,.72);backdrop-filter:blur(3px);}
.sr-window{--accent:var(--sr-gold);display:flex;flex-direction:column;width:min(600px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
background:var(--sr-hull);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-xl);box-shadow:var(--sr-float);
overflow:hidden;animation:sr-pop var(--sr-t-slow) var(--sr-ease-pop);}
.sr-window--sm{width:min(440px,100%);} .sr-window--lg{width:min(920px,100%);}
.sr-window__head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;background:var(--sr-plate);
border-bottom:var(--sr-line) solid var(--sr-ink);box-shadow:inset 0 4px 0 var(--accent);}
.sr-window__title{flex:1;min-width:0;font:400 var(--sr-fs-lg)/1.1 var(--sr-font-display);}
.sr-window__body{flex:1;min-height:0;padding:18px;overflow-y:auto;overflow-x:hidden;}
.sr-window__foot{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--sr-night);border-top:var(--sr-line) solid var(--sr-ink);}
.sr-window__foot .sr-spacer{flex:1;}
.sr-window__note{font:600 var(--sr-fs-sm)/1.3 var(--sr-font-ui);color:var(--sr-text-3);}
.sr-window--friend{--accent:var(--sr-rebel);} .sr-window--foe{--accent:var(--sr-heg);} .sr-window--good{--accent:var(--sr-go);}
.sr-window--progress{--accent:var(--sr-psi);}
.sr-h3{margin:18px 0 8px;font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);color:var(--sr-text-2);}
.sr-h3:first-child{margin-top:0;}
.sr-p{margin:0 0 12px;max-width:62ch;font:500 var(--sr-fs-md)/1.6 var(--sr-font-ui);color:var(--sr-text);}
.sr-p b{color:var(--sr-gold);font-weight:700;}
.sr-fine{margin:12px 0 0;font:600 var(--sr-fs-sm)/1.5 var(--sr-font-ui);color:var(--sr-text-3);}
/* briefing hero */
.sr-brief__hero{padding:22px 22px 18px;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%),var(--sr-plate);
border-bottom:var(--sr-line) solid var(--sr-ink);}
.sr-brief__title{margin:8px 0 0;font:400 var(--sr-fs-2xl)/1 var(--sr-font-display);color:var(--sr-text);text-shadow:0 3px 0 var(--sr-ink);}
.sr-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;}
.sr-squadcard{display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--sr-plate);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r);}
.sr-squadcard__name{font:800 var(--sr-fs-md)/1.1 var(--sr-font-ui);}
.sr-squadcard__role{font:600 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--sr-text-3);margin:3px 0 7px;}
.sr-squadcard__gear{display:flex;flex-wrap:wrap;gap:4px;}
/* transmissions */
.sr-signal{display:block;width:100%;height:46px;background:var(--sr-void);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r);}
.sr-quote{position:relative;margin:14px 0 0;padding:14px 16px;font:600 var(--sr-fs-md)/1.55 var(--sr-font-ui);color:var(--sr-text);
background:color-mix(in srgb,var(--sr-rebel) 9%,var(--sr-void));border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-lg);}
.sr-quote::before{content:"";position:absolute;left:24px;top:-9px;width:14px;height:14px;background:inherit;border:var(--sr-line) solid var(--sr-ink);
border-right:0;border-bottom:0;transform:rotate(45deg);}
.sr-quote__who{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);color:var(--sr-rebel);}
.sr-quote__who .sr-ico{width:16px;height:16px;}
/* mission planning: preconditions + slots */
.sr-check{display:flex;align-items:center;gap:10px;padding:4px 0;font:600 var(--sr-fs-sm)/1.3 var(--sr-font-ui);}
.sr-check__box{display:grid;place-items:center;width:22px;height:22px;flex:none;border:var(--sr-line) solid var(--sr-ink);border-radius:6px;background:var(--sr-go);color:var(--sr-ink);}
.sr-check__box .sr-ico{width:14px;height:14px;}
.sr-check.is-no{color:var(--sr-text-2);}
.sr-check.is-no .sr-check__box{background:transparent;border-color:var(--sr-c-bad);color:var(--sr-c-bad);}
.sr-check__why{margin-left:auto;font-weight:700;font-size:var(--sr-fs-xs);color:var(--sr-c-bad);}
.sr-slot{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 12px;border:var(--sr-line) dashed var(--sr-seam);border-radius:var(--sr-r);
color:var(--sr-text-3);font:600 var(--sr-fs-sm)/1.2 var(--sr-font-ui);cursor:pointer;transition:background var(--sr-t-fast),border-color var(--sr-t-fast);}
.sr-slot:hover,.sr-slot.is-target{border-color:var(--sr-gold);background:color-mix(in srgb,var(--sr-gold) 8%,transparent);color:var(--sr-text-2);}
.sr-slot__label{display:block;font:800 var(--sr-fs-micro)/1 var(--sr-font-ui);color:var(--sr-text-3);margin-bottom:4px;}
.sr-slot.is-filled{border-style:solid;border-color:var(--sr-ink);background:var(--sr-plate);color:var(--sr-text);box-shadow:var(--sr-lift);}
.sr-slot.is-filled .sr-slot__name{font:800 var(--sr-fs-md)/1.1 var(--sr-font-ui);}
.sr-slot .sr-slot__clear{margin-left:auto;}
/* dialogue answers (source conversations, recruit offers) */
.sr-choice{display:flex;align-items:flex-start;gap:10px;width:100%;margin-top:8px;padding:11px 14px;text-align:left;
font:600 var(--sr-fs-md)/1.45 var(--sr-font-ui);color:var(--sr-text);background:var(--sr-plate);border:var(--sr-line) solid var(--sr-ink);
border-radius:var(--sr-r);box-shadow:var(--sr-lift);cursor:pointer;transition:transform var(--sr-t-fast),background var(--sr-t-fast);}
.sr-choice:hover{background:var(--sr-plate-hi);transform:translateX(3px);}
.sr-choice__key{flex:none;margin-top:2px;}
.sr-choice:disabled{background:var(--sr-night);color:var(--sr-text-3);box-shadow:none;transform:none;cursor:not-allowed;}
/* tone is never shown before choosing; after choosing, the picked answer can be marked: */
.sr-choice.is-picked{box-shadow:inset 0 0 0 2px var(--sr-gold),var(--sr-lift);}
/* list rows inside windows (missions, sources, builds) */
.sr-card{--c:var(--sr-gold);padding:12px 14px;background:var(--sr-plate);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r);
box-shadow:inset 4px 0 0 var(--c),var(--sr-lift);}
.sr-card__top{display:flex;align-items:center;gap:10px;}
.sr-card__title{font:800 var(--sr-fs-md)/1.2 var(--sr-font-ui);}
.sr-card__top .sr-tag{margin-left:auto;}
.sr-card__body{margin:6px 0 10px;font:500 var(--sr-fs-sm)/1.55 var(--sr-font-ui);color:var(--sr-text-2);max-width:68ch;}
.sr-card__meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.sr-card__acts{display:flex;flex-wrap:wrap;gap:8px;}
.sr-card--friend{--c:var(--sr-c-friend);} .sr-card--foe{--c:var(--sr-c-foe);} .sr-card--good{--c:var(--sr-c-good);}
.sr-card--progress{--c:var(--sr-c-progress);} .sr-card.is-locked{--c:var(--sr-seam);opacity:.65;}
.sr-cost{display:inline-flex;align-items:center;gap:3px;font:800 var(--sr-fs-xs)/1 var(--sr-font-ui);color:var(--c,var(--sr-gold));}
.sr-cost .sr-ico{width:14px;height:14px;}
.sr-cost.is-short{color:var(--sr-c-bad);text-decoration:underline wavy;}
/* base navigation tabs (Galaxy / Missions / ...) */
.sr-tabs{display:inline-flex;gap:6px;padding:6px;background:var(--sr-night);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-lg);box-shadow:var(--sr-float);}
.sr-tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;font:800 var(--sr-fs-md)/1 var(--sr-font-ui);color:var(--sr-text-2);
background:transparent;border:var(--sr-line) solid transparent;border-radius:var(--sr-r);cursor:pointer;}
.sr-tab .sr-ico{width:20px;height:20px;}
.sr-tab:hover{color:var(--sr-text);background:var(--sr-hull);}
.sr-tab[aria-selected="true"]{color:var(--sr-text);background:var(--sr-plate);border-color:var(--sr-ink);box-shadow:var(--sr-bevel);}
.sr-tab.is-calling{color:var(--sr-go);}
.sr-tab.is-calling::after{content:"";position:absolute;inset:-4px;border:2px solid var(--sr-go);border-radius:calc(var(--sr-r) + 4px);animation:sr-ping 1.6s var(--sr-ease-out) infinite;}
/* ===== app container + utilities ===== */
/* Each scene's root gets .sr-app. Phone rules are CONTAINER queries on it,
so they fire on real phones (the app fills the screen) and inside the
style guide's phone frames alike. Windows/scrims must live inside .sr-app. */
.sr-app{container:sr-app / size;position:relative;width:100%;height:100%;overflow:hidden;}
.sr-phone-only{display:none!important;}
/* minimap frame (canvas drawn by the scene) */
.sr-minimap{display:block;width:200px;height:130px;background:var(--sr-void);border:var(--sr-line) solid var(--sr-ink);
border-radius:var(--sr-r);box-shadow:var(--sr-lift);}
/* drawer button: phones open the rail with this (top-right of the stage) */
.sr-drawerbtn{position:relative;}
.sr-drawerbtn .sr-badge{top:-6px;right:-6px;}
/* space maneuver dial: lives in the command bar, not over the ship */
.sr-dial{display:grid;grid-template-columns:repeat(var(--cols,6),40px);gap:4px;align-items:center;}
.sr-dial__h{font:800 var(--sr-fs-micro)/1 var(--sr-font-ui);color:var(--sr-text-3);text-align:center;}
.sr-dial__k{display:grid;place-items:center;height:36px;font:800 var(--sr-fs-sm)/1 var(--sr-font-ui);color:var(--sr-text);
background:var(--sr-plate);border:var(--sr-line) solid var(--sr-ink);border-radius:var(--sr-r-sm);box-shadow:0 2px 0 var(--sr-ink);cursor:pointer;}
.sr-dial__k:hover{background:var(--sr-plate-hi);}
.sr-dial__k.is-active{background:var(--sr-gold);color:var(--sr-gold-ink);}
.sr-dial__k.is-pilot{color:var(--sr-psi);box-shadow:inset 0 0 0 1.5px var(--sr-psi),0 2px 0 var(--sr-ink);} /* pilot-only maneuvers */
.sr-dial__k:disabled{background:var(--sr-night);color:var(--sr-text-3);box-shadow:none;cursor:not-allowed;}
.sr-dial__k.is-empty{visibility:hidden;}
/* ===== phones & short landscape (desktop-first; phone adapts) ===== */
@container sr-app (max-width:900px) or (max-height:520px){
.sr-app>*{--sr-topbar-h:48px;--sr-hit:44px;--sr-gutter:8px;--sr-fs-3xl:40px;--sr-fs-2xl:26px;}
.sr-desk-only{display:none!important;}
.sr-phone-only{display:revert!important;}
.sr-btn.sr-phone-only,.sr-drawerbtn.sr-phone-only,.sr-tab.sr-phone-only{display:inline-flex!important;}
.sr-shell{grid-template-columns:minmax(0,1fr);}
.sr-rail{position:absolute;z-index:var(--sr-z-rail);left:0;right:0;bottom:0;height:64%;border-left:0;border-top:var(--sr-line) solid var(--sr-ink);
transform:translateY(105%);transition:transform var(--sr-t) var(--sr-ease-out);box-shadow:0 -12px 40px rgba(0,0,0,.6);}
.sr-shell.is-drawer-open .sr-rail{transform:none;}
/* top bar */
.sr-topbar{gap:8px;padding:0 8px;}
.sr-topbar__sub,.sr-phase__round,.sr-phase__text,.sr-res__lbl,.sr-day{display:none;}
.sr-topbar__title{font-size:var(--sr-fs-sm);}
.sr-phase{height:34px;} .sr-phase__status{padding:0 8px;} .sr-phase__name{font-size:var(--sr-fs-sm);padding:0 10px;}
.sr-topbar--hub .sr-topbar__id{display:none;}
.sr-topbar--hub .sr-topbar__side:first-child{justify-content:flex-end;}
.sr-topbar--hub{gap:4px;}
.sr-resbar{gap:2px;}
.sr-res{flex-direction:column;justify-content:center;gap:1px;height:auto;padding:2px 3px;background:none;border:0;}
.sr-res__ico{width:22px;height:22px;} .sr-res__ico .sr-ico{width:14px;height:14px;}
.sr-res__val{font-size:var(--sr-fs-xs);}
.sr-revhub{width:62px;height:62px;margin:4px 2px -18px;}
.sr-revhub__core{inset:7px;} .sr-revhub__core .sr-ico{width:17px;height:17px;}
.sr-revhub__lvl{font-size:18px;} .sr-revhub__lbl{display:none;}
.sr-shell.has-revhub .sr-slot-tc{top:calc(var(--sr-gutter) + 22px);}
/* stage */
.sr-objectives{width:auto;max-width:calc(100cqw - 72px);padding:8px 10px;}
.sr-objectives .sr-obj:not(.is-current){display:none;}
.sr-objectives__head{display:none;}
.sr-coach{width:min(300px,calc(100cqw - 16px));font-size:var(--sr-fs-xs);}
.sr-comms,.sr-minimap{display:none;}
.sr-tabs{padding:4px;gap:2px;} .sr-tab{padding:0 10px;font-size:var(--sr-fs-sm);} .sr-tab .sr-ico{display:none;}
.sr-tab.sr-drawerbtn{padding:0 10px;} .sr-tab.sr-drawerbtn .sr-ico{display:inline-block;}
.sr-slot-bc{left:var(--sr-gutter);right:var(--sr-gutter);transform:none;align-items:stretch;}
.sr-slot-bc .sr-pill{align-self:center;}
.sr-cmdbar{gap:6px;padding:6px;}
.sr-cmdbar__who{display:none;}
.sr-orders{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding-right:18px;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);}
.sr-order{width:60px;min-height:58px;flex:none;}
.sr-order__key{display:none;}
.sr-cmdbar__go{padding-left:6px;}
.sr-cmdbar__go .sr-btn--lg{min-height:58px;padding:0 12px;font-size:var(--sr-fs-md);}
.sr-cmdbar__count{display:none;}
.sr-vs{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);width:100%;}
.sr-vs__mods,.sr-vs__step{display:none;}
.sr-vs__side{padding:8px 10px;} .sr-vs__who{margin-bottom:4px;gap:8px;} .sr-vs__who .sr-avatar{display:none;}
.sr-vs__total{margin-top:2px;padding-top:6px;}
.sr-vs__odds{font-size:32px;} .sr-die{width:44px;height:44px;margin:2px 0;} .sr-die b{font-size:var(--sr-fs-lg);}
.sr-scrim{padding:8px;place-items:start center;}
.sr-window{max-height:none;}
}
@container sr-app (max-height:520px) and (orientation:landscape){
.sr-rail{left:auto;top:0;height:auto;width:min(48%,360px);border-top:0;border-left:var(--sr-line) solid var(--sr-ink);transform:translateX(105%);}
.sr-vs{width:min(560px,100%);align-self:center;}
.sr-coach{display:none;} /* short screens: the coach collapses to the objective line; tap it to expand */
}
/* ===== tablets in portrait (an iPad Pro 12.9" is 1024 wide) and other narrow desktops =====
Between the phone layout and the desktop one: everything keeps its desktop size, but the rail becomes a panel that
slides in from the right over the stage (the drawer button opens it, as on a phone), so the stage, the tabs and the
windows have the whole width. */
@container sr-app (min-width:901px) and (max-width:1100px) and (min-height:521px){
.sr-shell{grid-template-columns:minmax(0,1fr);}
.sr-rail{position:absolute;z-index:var(--sr-z-rail);top:var(--sr-topbar-h);right:0;bottom:0;width:min(400px,46%);
transform:translateX(105%);transition:transform var(--sr-t) var(--sr-ease-out);box-shadow:-12px 0 40px rgba(0,0,0,.6);}
.sr-shell.is-drawer-open .sr-rail{transform:none;}
.sr-btn.sr-phone-only,.sr-drawerbtn.sr-phone-only,.sr-tab.sr-phone-only{display:inline-flex!important;}
/* the hub's top bar, a little tighter so the menu button stays on screen */
.sr-topbar--hub{gap:8px;}
.sr-topbar--hub .sr-topbar__side{gap:8px;}
.sr-res{gap:6px;padding:0 9px 0 4px;}
}
/* ===== motion ===== */
@keyframes sr-pop{0%{opacity:0;transform:scale(.92) translateY(6px);}100%{opacity:1;transform:none;}}
@keyframes sr-slam{0%{opacity:0;transform:scale(2.2) rotate(-4deg);}18%{opacity:1;transform:scale(1) rotate(-2deg);}80%{opacity:1;transform:scale(1) rotate(-2deg);}100%{opacity:0;transform:scale(.96) rotate(-2deg);}}
@keyframes sr-stamp{0%{opacity:0;transform:scale(2.4) rotate(-14deg);}100%{opacity:1;transform:scale(1) rotate(-6deg);}}
@keyframes sr-ping{0%{opacity:.85;transform:scale(1);}100%{opacity:0;transform:scale(1.25);}}
@keyframes sr-blink{50%{opacity:.35;}}
@keyframes sr-acting{50%{filter:brightness(1.3);}}
@keyframes sr-bob{50%{transform:translate(-50%,6px);}}
@keyframes sr-float-up{0%{opacity:0;transform:translate(-50%,-60%);}20%{opacity:1;}100%{opacity:0;transform:translate(-50%,-220%);}}
@keyframes sr-slide-in{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
@keyframes sr-hazard{to{background-position:17px 0;}}
@keyframes sr-flicker{0%,100%{transform:none;opacity:1;}30%{transform:scale(1.06) rotate(-3deg);}55%{opacity:.85;}75%{transform:scale(.97) rotate(2deg);}}
@keyframes sr-ember-surge{0%{box-shadow:0 0 0 var(--sr-line) var(--sr-ink),0 5px 0 var(--sr-ink),0 0 0 rgba(255,90,31,0);}40%{box-shadow:0 0 0 var(--sr-line) var(--sr-ink),0 5px 0 var(--sr-ink),0 0 46px rgba(255,140,40,.95);}}
@keyframes sr-roll{0%{transform:rotate(-200deg) scale(.6);}70%{transform:rotate(12deg) scale(1.08);}100%{transform:none;}}
@media (prefers-reduced-motion:reduce){
.sr-root *,.sr-root *::before,.sr-root *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;}
}
/* =====================================================================
STAR REBELLION — GALAXY VIEW additions (proposal for the UI kit)
Galaxy becomes a full view beside Base, sharing the same shell:
top bar + Revolution hub, tabs, comms, rail, command bar.
Everything here builds on sr-theme.css tokens; gx- prefixed so it can
be folded into the kit (or kept as game/ui/galaxy.css).
===================================================================== */
/* the map is the stage canvas (SVG in this mock,