:root {
  color-scheme: dark;
  --bg: #071017; --bg2: #0b1820; --panel: #0f1f27; --panel2: #13282f;
  --line: #b8d5ca1f; --line2: #b8d5ca38;
  --mint: #a1e1c8; --gold: #e2c694; --red: #ff8f74; --blue: #8fc9ff; --violet: #c9a2ff;
  --muted: #a2b8b1; --text: #e6ebe3;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: calc(15px * var(--ts, 1))/1.5 var(--font); }
body { background: radial-gradient(ellipse at 80% 0%, #17423a55, transparent 40%), radial-gradient(ellipse at 0% 60%, #2a1d3a33, transparent 40%), var(--bg); min-height: 100vh; }
body.in-battle { overflow: hidden; }
button, a, select, input { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; background: transparent; border: 1px solid var(--line2); border-radius: 6px; padding: 8px 12px; transition: border-color .18s, background .18s, transform .12s, box-shadow .18s; }
button:hover:not(:disabled) { border-color: var(--gold); background: #e2c6940d; }
button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .4; cursor: not-allowed; }
:is(button, a, select, input, canvas):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a { color: var(--gold); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
select, input[type=range] { width: 100%; }
select { background: #0b1a20; color: var(--text); border: 1px solid var(--line2); border-radius: 6px; padding: 9px 10px; font: inherit; }
input[type=range] { accent-color: var(--gold); }
kbd { font: 600 calc(12px * var(--ts, 1)) var(--mono); border: 1px solid var(--line2); border-radius: 4px; padding: 1px 5px; color: var(--muted); background: #0006; }
.hidden { display: none !important; }
.eyebrow { font: 600 calc(12px * var(--ts, 1))/1.2 var(--mono); letter-spacing: .13em; color: var(--gold); text-transform: uppercase; }
.quiet, .muted { color: var(--muted); }
.small, .small-note { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.dot.gold { background: #ffcf6b; box-shadow: 0 0 10px #ffcf6b88; }
.dot.violet { background: var(--violet); box-shadow: 0 0 10px #c9a2ff88; }
.violet { color: var(--violet); }
.primary { background: linear-gradient(180deg, #ecd3a2, #d2b47c); color: #13140f; border: 0; font-weight: 650; box-shadow: 0 8px 26px #e2c69424, inset 0 1px #fff6; }
.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f5dfb3, #dcc08a); box-shadow: 0 10px 34px #e2c6943d; }
.primary.big { padding: 14px 24px; font-size: calc(15px * var(--ts, 1)); }
.ghost { border-color: var(--line2); }
.ghost.danger, .danger { color: #ffb4a0; border-color: #ff8f7444; }
.link { border: 0; padding: 0; color: var(--gold); font-size: calc(13px * var(--ts, 1)); }
.icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.icon-btn.off { opacity: .5; text-decoration: line-through; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 22px; padding: 12px clamp(14px, 4vw, 48px); background: #071017e6; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font: 22px var(--serif); letter-spacing: .08em; }
.brand img { width: 30px; }
.brand small { display: block; font: 600 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .18em; color: var(--gold); }
.tabs { display: flex; gap: 4px; margin-right: auto; }
.tabs button { border: 0; border-radius: 999px; padding: 8px 15px; color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.tabs button[aria-selected=true] { color: var(--text); background: #a1e1c814; box-shadow: inset 0 0 0 1px #a1e1c833; }
.wallet { display: flex; align-items: center; gap: 14px; font: 600 calc(13px * var(--ts, 1)) var(--mono); }
.rank-chip { border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 3px 9px; font-size: calc(12px * var(--ts, 1)); }
.campaign-link { font: calc(13px * var(--ts, 1)) var(--font); }

/* ---------- menu ---------- */
#menu { width: min(1320px, 100%); margin: 0 auto; padding: 0 clamp(14px, 4vw, 48px) 40px; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; padding: 42px 0 26px; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: .98; margin: 16px 0 18px; }
.hero h1 em { color: var(--mint); }
.hero-copy > p { color: #c0ccc6; max-width: 520px; font-size: calc(15px * var(--ts, 1)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 24px; }
.rank-progress { max-width: 460px; }
.rank-progress > div { display: flex; justify-content: space-between; gap: 10px; font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); margin-bottom: 7px; }
.rank-progress > i { display: block; height: 4px; background: #ffffff10; border-radius: 4px; overflow: hidden; }
.rank-progress b { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--gold)); }
.hero-ship { height: 360px; position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-ship::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #3b9b8c22, transparent 62%); z-index: -1; }
.hero-ship > .capital-art { width: 82%; height: 250px; filter: drop-shadow(0 20px 15px #0008); transform: rotate(-16deg); animation: float 8s ease-in-out infinite; }
.hero-ship.has-3d > .capital-art { display: none; }
.hangar-canvas, .software-hangar { position: absolute; inset: -10px 0 60px; width: 100%; height: 310px; z-index: 1; pointer-events: none; }
.software-hangar { object-fit: contain; }
.orbital-ring { position: absolute; top: 6%; left: 15%; width: 70%; height: 72%; border: 1px solid #a4cfb520; border-radius: 50%; transform: rotate(-20deg); }
.orbital-ring.second { inset: 0 9%; width: 82%; height: 83%; border-style: dashed; transform: rotate(20deg); animation: spin 90s linear infinite; }
.ship-caption { position: absolute; bottom: 0; left: 5%; right: 5%; text-align: center; z-index: 2; pointer-events: none; }
.ship-caption h2 { font-size: 30px; margin: 8px 0 4px; }
.ship-caption p { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
@keyframes float { 50% { transform: translateY(-12px) rotate(-13deg); } }
@keyframes spin { to { transform: rotate(380deg); } }

.panel { padding: 26px 0; border-top: 1px solid var(--line); animation: rise .35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
/* For centred HUD panels: "rise" would replace their translateX(-50%) and slide them sideways. */
@keyframes fade { from { opacity: 0; } }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.section-title h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 8px; }
.sub-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 12px; }

/* star chart */
.chart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
.regions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.region { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--race) 9%, transparent), transparent 55%), var(--panel); }
.region header h3 { font-size: 21px; margin: 7px 0 4px; }
.region header p { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.region header small { font: calc(12px * var(--ts, 1)) var(--mono); color: var(--race); }
.nodes { display: grid; gap: 7px; margin-top: 13px; }
.node { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 10px; text-align: left; padding: 9px 11px; background: #0007; border-color: var(--line); }
.node strong { display: block; font-weight: 600; font-size: calc(14px * var(--ts, 1)); }
.node small { font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); }
.node-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--race); color: var(--race); font-size: calc(15px * var(--ts, 1)); }
.node i { color: var(--mint); font-style: normal; font-weight: 700; }
.node.cleared .node-icon { background: color-mix(in srgb, var(--race) 22%, transparent); }
.node.locked { opacity: .45; }
.node.active { border-color: var(--gold); background: #e2c69412; box-shadow: 0 0 0 1px #e2c69433, 0 10px 30px #0006; }
.node.boss .node-icon { border-width: 2px; box-shadow: 0 0 14px color-mix(in srgb, var(--race) 60%, transparent); }
.briefing { position: sticky; top: 84px; border: 1px solid var(--line2); border-radius: 14px; padding: 22px; background: linear-gradient(170deg, #17302e, #0c1a21); display: grid; gap: 14px; }
.briefing h2 { font-size: 32px; }
.briefing .brief { color: #c6d3cd; }
.facts { display: grid; grid-template-columns: 90px 1fr; gap: 7px 12px; margin: 0; font-size: calc(13px * var(--ts, 1)); }
.facts dt { font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); text-transform: uppercase; padding-top: 2px; }
.facts dd { margin: 0; }
.reward-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font: 600 calc(13px * var(--ts, 1)) var(--mono); padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reward-row .quiet { font: calc(12px * var(--ts, 1)) var(--font); }
.your-ship { display: grid; gap: 3px; }
.your-ship strong { font: calc(18px * var(--ts, 1)) var(--serif); }
.your-ship small { color: var(--muted); }
.your-ship .link { justify-self: start; margin-top: 4px; }

/* hangar */
.hangar-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; align-items: start; }
.hangar-layout.lower { margin-top: 22px; }
.capital-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.capital-card { display: grid; grid-template-columns: 74px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; text-align: left; padding: 11px; background: var(--panel); border-color: var(--line); }
.capital-card .capital-art { grid-row: 1 / 4; width: 74px; height: 56px; align-self: center; }
.capital-card small { font: calc(12px * var(--ts, 1)) var(--mono); color: var(--race, var(--muted)); text-transform: uppercase; letter-spacing: .1em; }
.capital-card strong { font: calc(17px * var(--ts, 1)) var(--serif); }
.capital-card span { font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); }
.capital-card.active { border-color: var(--gold); background: #e2c69410; }
.capital-card.locked .capital-art { filter: grayscale(1) brightness(.6); }
.capital-detail { border: 1px solid var(--line2); border-radius: 14px; padding: 20px; background: linear-gradient(170deg, #142a2e, #0c1a21); display: grid; gap: 14px; }
.detail-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.detail-head h2 { font-size: 30px; margin: 6px 0 4px; }
.badge { font: 600 calc(12px * var(--ts, 1)) var(--mono); color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.ship-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ship-specs span { border: 1px solid var(--line); border-radius: 8px; padding: 9px; font-size: calc(12px * var(--ts, 1)); color: var(--muted); background: #0005; }
.ship-specs strong { display: block; font: 600 calc(17px * var(--ts, 1)) var(--mono); color: var(--text); }
.kit { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.kit li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-items: baseline; }
.kit kbd { grid-row: 1 / 3; color: var(--gold); border-color: #e2c69455; text-align: center; }
.kit small { color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.upgrades { display: grid; gap: 8px; }
.upgrade { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #0004; }
.upgrade strong { display: block; font-size: calc(14px * var(--ts, 1)); }
.upgrade small { color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.pips { display: flex; gap: 4px; }
.pips i { width: 14px; height: 6px; border-radius: 2px; background: #ffffff14; }
.pips i.on { background: linear-gradient(90deg, var(--mint), var(--gold)); box-shadow: 0 0 8px #a1e1c855; }
.upgrade button { font: 600 calc(13px * var(--ts, 1)) var(--mono); min-width: 120px; }
.mods-panel, .formation-setup { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); }
.mod-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.slot-mod { min-height: 74px; border-radius: 8px; padding: 9px; text-align: left; }
.slot-mod.empty { border: 1px dashed var(--line2); display: grid; place-items: center; font: calc(12px * var(--ts, 1)) var(--mono); color: #8ea69f88; letter-spacing: .15em; }
.slot-mod.filled { border-color: #e2c69466; background: #e2c6940c; }
.mod { display: grid; gap: 3px; }
.mod strong { font-size: calc(13px * var(--ts, 1)); }
.mod small { font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
.mod i { font-style: normal; font-size: calc(12px * var(--ts, 1)); letter-spacing: 1px; color: var(--gold); }
.mod.uncommon strong { color: #9fdcff; }
.mod.rare strong { color: var(--violet); }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.mod-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 9px; background: #0004; }
.mod-card.on { border-color: #e2c69466; }
.mod-card .row { display: flex; gap: 6px; }
.mod-card .row button { flex: 1; padding: 6px 8px; font-size: calc(12.5px * var(--ts, 1)); }
.formation-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.formation-buttons button { padding: 7px 11px; font-size: calc(13px * var(--ts, 1)); }
.formation-buttons .active { border-color: var(--gold); color: var(--gold); background: #e2c69410; }
.board-labels { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0 6px; font: calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .15em; color: var(--muted); text-align: center; }
.deployment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; border: 1px solid #9adbc729; border-radius: 8px; background: radial-gradient(ellipse at right, #194a3c35, transparent), #0b191e; }
.slot { height: 64px; position: relative; border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; gap: 3px; }
.slot small { position: absolute; top: 4px; left: 6px; font: calc(11.5px * var(--ts, 1)) var(--mono); color: #8ea69f88; }
.slot span { font: 600 calc(12px * var(--ts, 1)) var(--mono); }
.slot b { color: #8ea69f66; font-weight: 400; }
.slot.occupied { border-style: solid; background: #a1e1c807; cursor: grab; }
.slot.selected { border-color: var(--gold); background: #e2c69414; }
.ship-glyph { width: 40px; height: 26px; overflow: visible; fill: none; flex-shrink: 0; }
.deploy-roster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 10px 0; }
.deploy-roster button { padding: 7px 3px; display: grid; place-items: center; gap: 4px; }
.deploy-roster .ship-glyph { width: 30px; height: 20px; }
.deploy-roster span { font: calc(11.5px * var(--ts, 1)) var(--mono); }
.deploy-roster .active { border-color: var(--gold); }

/* skirmish */
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.mode-card { text-align: left; padding: 16px; display: grid; gap: 5px; background: var(--panel); border-color: var(--line); min-height: 150px; align-content: start; }
.mode-card strong { font: 22px var(--serif); }
.mode-card > span { color: var(--gold); font-size: calc(13px * var(--ts, 1)); }
.mode-card p { color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.mode-card i { font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); font-style: normal; margin-top: auto; letter-spacing: .12em; }
.mode-number { font: calc(12px * var(--ts, 1)) var(--mono) !important; color: var(--muted) !important; }
.mode-card.active { border-color: var(--gold); background: linear-gradient(160deg, #e2c69414, transparent), var(--panel); }
.setup-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.setup-columns > section { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); min-width: 0; }
.race-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.race-tabs button { font-size: calc(13px * var(--ts, 1)); padding: 7px 11px; display: flex; align-items: center; gap: 7px; }
.race-tabs i { width: 9px; height: 9px; border-radius: 50%; }
.race-tabs .active { border-color: var(--gold); }
.capital-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.capital-details { display: grid; gap: 9px; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.capital-details small { color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-grid label { display: grid; gap: 6px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.terrain-legend { display: flex; flex-wrap: wrap; gap: 12px; font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); margin: 8px 0 16px; }
.difficulty-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.difficulty-grid button { text-align: left; padding: 9px; display: grid; gap: 3px; font-size: calc(13px * var(--ts, 1)); }
.difficulty-grid span { font-size: calc(12px * var(--ts, 1)); color: var(--gold); letter-spacing: 1px; }
.difficulty-grid small { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
.difficulty-grid .active { border-color: var(--gold); background: #e2c69410; }
.story-toggle { display: flex; gap: 10px; align-items: start; margin-top: 16px; font-size: calc(13px * var(--ts, 1)); }
.story-toggle small { display: block; color: var(--muted); }
.launch-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; padding: 18px 22px; border: 1px solid var(--line2); border-radius: 14px; background: linear-gradient(90deg, #17302e, #0c1a21); }
.launch-bar strong { display: block; font: 21px var(--serif); margin-top: 5px; }

/* settings */
.settings-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.settings-grid.wide { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); }
label.check { display: flex !important; align-items: center; gap: 8px; color: var(--text) !important; }
label.check small { color: var(--muted); }
.controls-card, .profile-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); display: grid; gap: 12px; align-content: start; }
.controls-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: calc(13px * var(--ts, 1)); }
.controls-card dt { font: calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); }
.controls-card dd { margin: 0; color: #c6d3cd; }
.profile-card .row { display: flex; flex-wrap: wrap; gap: 8px; }
.lobby-foot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; padding: 18px 0 0; border-top: 1px solid var(--line); font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); }

/* ---------- battle ---------- */
#battle-screen { position: fixed; inset: 0; overflow: hidden; background: #02070b; user-select: none; -webkit-user-select: none; }
#universe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; cursor: none; touch-action: none; }
.battle-webgl { position: absolute; z-index: 0; }
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: var(--font); }
.hud button { pointer-events: auto; }
.hud-top-left { position: absolute; top: 16px; left: 18px; max-width: min(380px, 31vw); text-shadow: 0 2px 10px #000c; }
.hud-top-left h2 { font-size: 26px; margin: 4px 0 3px; }
.hud-top-left p { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--mint); }
#radio { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
#radio li { font-size: calc(12px * var(--ts, 1)); color: #c6d3cd; background: #04101a99; border-left: 2px solid var(--line2); padding: 4px 9px; border-radius: 0 6px 6px 0; animation: slidein .3s ease-out; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#radio li.warning { border-color: var(--red); }
#radio li.success { border-color: var(--mint); }
#radio li.whisper { border-color: var(--violet); color: #dcc2ff; font-style: italic; }
#radio time { font: calc(11px * var(--ts, 1)) var(--mono); color: var(--muted); margin-right: 7px; }
#radio .repeat { font: 600 calc(11px * var(--ts, 1)) var(--mono); color: var(--muted); margin-left: 6px; }
.banner.swap { transition: none; }
@keyframes slidein { from { opacity: 0; transform: translateX(-10px); } }
.hud-clock { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
.hud-clock span { display: block; font: 600 26px var(--mono); color: var(--text); text-shadow: 0 0 18px #a1e1c844; letter-spacing: .05em; }
.hud-clock small { font: calc(10px * var(--ts, 1)) var(--mono); letter-spacing: .3em; color: var(--muted); }
.hud-clock.urgent span { color: #ff8f74; text-shadow: 0 0 14px #ff6a4a88; }
/* Warnings hold a steady glow; nothing in the HUD pulses or blinks. */
.boss-bar { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: min(560px, 44vw); display: grid; gap: 4px; text-align: center; }
.boss-bar > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; }
.boss-bar strong { white-space: nowrap; }
.boss-bar strong { font: 400 20px var(--serif); color: #ffc2b0; text-shadow: 0 0 18px #ff8f7466, 0 2px 8px #000; letter-spacing: .04em; }
.boss-bar small { font: 600 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .13em; color: var(--red); }
.boss-bar i { display: block; height: 8px; border-radius: 4px; background: #04101acc; border: 1px solid #ff8f7444; overflow: hidden; }
.boss-bar i.sh { height: 3px; border-color: #8fc9ff33; }
.boss-bar b { display: block; height: 100%; background: linear-gradient(90deg, #d9483b, #ff8f74); box-shadow: 0 0 12px #ff8f7488; transition: width .15s; }
.boss-bar i.sh b { background: var(--blue); box-shadow: none; }
.hud-top-right { position: absolute; top: 14px; right: 16px; display: grid; gap: 7px; justify-items: end; }
#minimap { width: 200px; height: 127px; border-radius: 8px; box-shadow: 0 8px 26px #0008; pointer-events: auto; cursor: crosshair; touch-action: none; }
.hud-buttons { display: flex; gap: 6px; }
.hud-buttons button { background: #04101acc; padding: 6px 11px; font-size: calc(12px * var(--ts, 1)); }
.hud-chain { position: absolute; left: 18px; top: 44%; transform: translateY(-50%); text-align: left; opacity: .35; transition: opacity .2s; }
.hud-chain.active { opacity: 1; }
.hud-chain strong { display: block; font: 700 54px/1 var(--mono); color: var(--text); text-shadow: 0 0 22px #a1e1c866; }
.hud-chain.hot strong { color: var(--gold); text-shadow: 0 0 26px #ffcf6b99; }
.hud-chain > span { font: calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .4em; color: var(--muted); }
.hud-chain i { display: block; width: 120px; height: 3px; background: #ffffff14; margin: 6px 0 8px; border-radius: 2px; overflow: hidden; }
.hud-chain i b { display: block; height: 100%; background: var(--gold); }
.hud-chain small { font: calc(13px * var(--ts, 1)) var(--mono); color: #ffcf6b; }
.hud-chain small b { font-weight: 700; }
.hud-escorts { position: absolute; left: 18px; bottom: 124px; display: grid; gap: 4px; width: 190px; padding: 10px; border-radius: 10px; background: #04101a88; border: 1px solid var(--line); }
.hud-escorts .eyebrow { font-size: calc(9px * var(--ts, 1)); margin-bottom: 3px; }
.hud-escorts .eyebrow b { color: var(--mint); margin-left: 6px; }
.escort { display: grid; grid-template-columns: 28px 1fr 52px; align-items: center; gap: 6px; font: calc(10px * var(--ts, 1)) var(--mono); }
.escort .ship-glyph { width: 26px; height: 15px; }
.escort i { height: 3px; background: #ffffff14; border-radius: 2px; overflow: hidden; }
.escort i b { display: block; height: 100%; background: var(--mint); }
.escort.lost { opacity: .3; text-decoration: line-through; }
.escort.drones { grid-template-columns: 1fr auto; color: var(--mint); }
.escort.drones em { font-style: normal; }
.hud-escorts .hint { font: calc(9.5px * var(--ts, 1)) var(--mono); color: var(--muted); margin-top: 4px; }
.hud-bottom { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; grid-template-columns: 300px auto 112px; gap: 14px; align-items: end; }
.vitals { display: grid; gap: 5px; }
.bar { position: relative; height: 18px; border-radius: 4px; background: #04101acc; border: 1px solid var(--line); overflow: hidden; transform: skewX(-12deg); }
.bar > i { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width .08s linear; }
.bar > i.lag { background: #fff3d6aa; transition: none; }
.bar.hull > i:not(.lag) { background: linear-gradient(90deg, #4fc8a8, #a1e1c8); box-shadow: 0 0 14px #a1e1c866; }
.bar.hull.critical > i:not(.lag) { background: linear-gradient(90deg, #d9483b, #ff8f74); box-shadow: 0 0 10px #ff6a4a99; }
.bar.shield { height: 9px; }
.bar.shield > i { background: linear-gradient(90deg, #4f8de8, var(--blue)); box-shadow: 0 0 10px #8fc9ff66; }
.bar.energy { height: 9px; }
.bar.energy > i { background: linear-gradient(90deg, #2fb7e0, #7af0ff); box-shadow: 0 0 10px #7af0ff66; }
.bar.deny { animation: deny .35s; }
@keyframes deny { 30% { box-shadow: 0 0 0 2px var(--red); } }
.bar > span { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 9px; transform: skewX(12deg); font: 600 calc(11px * var(--ts, 1)) var(--mono); text-shadow: 0 1px 3px #000; }
.bar.shield > span, .bar.energy > span { font-size: 0; }
.bar > span b { letter-spacing: .13em; color: #e6ebe3cc; font-weight: 600; }
.bar > span em { font-style: normal; }
.abilities { display: flex; gap: 8px; }
.ability { position: relative; width: 104px; height: 70px; display: grid; align-content: end; gap: 1px; text-align: left; padding: 8px 9px; background: #06141dd9; border-color: #a1e1c833; overflow: hidden; --cd: 0; }
.ability::after { content: ''; position: absolute; inset: 0; background: conic-gradient(#000b calc(var(--cd) * 360deg), transparent 0); pointer-events: none; }
.ability kbd { position: absolute; top: 6px; left: 7px; color: var(--gold); border-color: #e2c69455; }
.ability strong { font-size: calc(11.5px * var(--ts, 1)); font-weight: 650; line-height: 1.15; }
.ability small { font: calc(10px * var(--ts, 1)) var(--mono); color: #7af0ff; }
.ability .cd { position: absolute; top: 6px; right: 8px; z-index: 1; font: 700 calc(15px * var(--ts, 1)) var(--mono); }
.ability.ultimate { border-color: #e2c69477; background: linear-gradient(170deg, #2b2616e6, #06141dd9); }
.ability.starved small { color: var(--red); }
.ability.starved:not(.cooling) { opacity: .65; }
.ability:not(.cooling):not(.starved) { box-shadow: inset 0 0 18px #a1e1c815; }
.boost { position: relative; height: 70px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid #9ffcff44; border-radius: 6px; background: #06141dd9; overflow: hidden; font: 600 calc(10px * var(--ts, 1)) var(--mono); letter-spacing: .2em; }
.boost i { position: absolute; left: 0; bottom: 0; height: 3px; background: #9ffcff; box-shadow: 0 0 10px #9ffcff; }
.banner { position: absolute; top: 24%; left: 50%; transform: translate(-50%, 10px) scale(.96); text-align: center; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.banner strong { display: block; font: 400 clamp(26px, 4vw, 46px) var(--serif); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 30px #a1e1c866, 0 3px 14px #000; }
.banner small { font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); letter-spacing: .15em; }
.banner.gold strong { color: var(--gold); text-shadow: 0 0 32px #ffcf6b88, 0 3px 14px #000; }
.banner.legendary small { display: block; max-width: min(720px, 86vw); margin: 8px auto 0; color: #ffe2a8; letter-spacing: .05em; line-height: 1.55; text-shadow: 0 2px 10px #000; }
.banner.warn strong { color: var(--red); text-shadow: 0 0 30px #ff8f7488, 0 3px 14px #000; }
.banner.chain strong { color: #fff3d6; font-family: var(--mono); font-weight: 700; }
.tutorial { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); width: min(520px, 90vw); padding: 13px 18px; border-radius: 12px; background: #0c1f26ee; border: 1px solid #e2c69466; box-shadow: 0 14px 40px #000a; text-align: center; animation: fade .3s ease-out; }
.tutorial p { margin-top: 6px; font-size: calc(15px * var(--ts, 1)); }
.pause-menu { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #02070bb3; }
.pause-card { width: min(460px, 92vw); padding: 26px; border-radius: 16px; background: linear-gradient(170deg, #17302e, #0c1a21); border: 1px solid var(--line2); display: grid; gap: 16px; text-align: center; }
.pause-card h2 { font-size: 30px; }
.pause-stats, .result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pause-stats span, .result-stats span { border: 1px solid var(--line); border-radius: 8px; padding: 9px 6px; font-size: calc(12px * var(--ts, 1)); color: var(--muted); background: #0004; }
.pause-stats strong, .result-stats strong { display: block; font: 600 calc(17px * var(--ts, 1)) var(--mono); color: var(--text); }
.pause-actions { display: grid; gap: 8px; }

/* touch: two sticks, boost between them, abilities in a row above the aim stick */
.touch { position: absolute; inset: 0; pointer-events: none; }
.stick { position: absolute; bottom: 18px; width: 140px; height: 140px; border-radius: 50%; border: 1px solid #a1e1c844; background: radial-gradient(circle, #a1e1c812, #04101a66); pointer-events: auto; touch-action: none; }
.stick.left { left: 14px; }
.stick.right { right: 14px; border-color: #ff8f7455; }
.stick i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: #a1e1c833; border: 1px solid #a1e1c899; }
.stick.right i { background: #ff8f7433; border-color: #ff8f7499; }
.touch-buttons { position: absolute; inset: 0; pointer-events: none; }
.touch-buttons button { position: absolute; pointer-events: auto; touch-action: none; padding: 0; width: 48px; height: 48px; border-radius: 50%; background: #06141dcc; font: 700 calc(14px * var(--ts, 1)) var(--mono); }
.touch-buttons [data-touch=boost] { left: 50%; bottom: 46px; width: 84px; height: 84px; margin-left: -42px; color: #9ffcff; border-color: #9ffcff77; font-size: calc(12px * var(--ts, 1)); box-shadow: 0 0 22px #9ffcff22; }
.touch-buttons [data-touch=focus] { left: 14px; bottom: 170px; width: 74px; height: 40px; border-radius: 20px; font-size: calc(11px * var(--ts, 1)); color: var(--red); border-color: #ff8f7466; }
.touch-buttons [data-touch="0"] { right: 176px; bottom: 170px; }
.touch-buttons [data-touch="1"] { right: 122px; bottom: 170px; }
.touch-buttons [data-touch="2"] { right: 68px; bottom: 170px; }
.touch-buttons [data-touch="3"] { right: 14px; bottom: 170px; color: var(--gold); border-color: #e2c69477; }
.touch-buttons .cooling { opacity: .45; }
.touch-buttons .starved:not(.cooling) { border-color: #ff8f7488; color: var(--red); }

/* dialogs */
dialog { border: 1px solid var(--line2); border-radius: 18px; padding: 0; background: linear-gradient(170deg, #17302e, #0b161c); color: var(--text); width: min(620px, 94vw); box-shadow: 0 30px 80px #000c; }
dialog::backdrop { background: #02070bcc; }
.dialog-body { padding: 28px; display: grid; gap: 14px; }
.dialog-body h2 { font-size: 34px; }
.dialog-body p { color: #c6d3cd; }
.dialog-note { color: var(--muted); font: calc(12px * var(--ts, 1)) var(--mono); }
.result-stats { grid-template-columns: repeat(3, 1fr); }
.result-rewards { display: grid; gap: 6px; }
.result-rewards div { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 8px; background: #0005; border: 1px solid var(--line); font-size: calc(13px * var(--ts, 1)); animation: rise .4s ease-out both; }
.result-rewards div:nth-child(2) { animation-delay: .08s; } .result-rewards div:nth-child(3) { animation-delay: .16s; } .result-rewards div:nth-child(4) { animation-delay: .24s; } .result-rewards div:nth-child(5) { animation-delay: .32s; }
.result-rewards strong { font: 600 calc(14px * var(--ts, 1)) var(--mono); color: var(--gold); }
.result-rewards .rank-up { border-color: var(--gold); background: #e2c69414; }
/* 2.56: the defeat debrief. */
.result-rewards .debrief-row { flex-direction: column; gap: 7px; border-color: #ff6a5a66; background: #ff4a3a12; }
.debrief-head { font: 600 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .12em; color: #ff8a7a; }
.debrief-cause { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 3.2em; align-items: center; gap: 10px; }
.debrief-label small { color: var(--muted, #9aa9b3); }
.debrief-bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ff6a5a var(--w), #ffffff14 var(--w)); }
.debrief-cause b { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: #ffb0a6; text-align: right; }
.debrief-note { font-size: calc(13px * var(--ts, 1)); color: #ffcf8a; }
.debrief-tip { font-size: calc(13px * var(--ts, 1)); line-height: 1.45; color: var(--text, #e8f0f4); }

.result-rewards .mod-drop strong { color: var(--violet); }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* reduced motion */
.reduced *, .reduced *::before, .reduced *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .chart-layout { grid-template-columns: 1fr; }
  .briefing { position: static; }
  .hangar-layout { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-grid.wide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 10px 16px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
  .hero { grid-template-columns: 1fr; padding-top: 22px; }
  .hero-ship { height: 280px; order: -1; }
  .hangar-canvas, .software-hangar { height: 240px; }
  .regions, .mode-grid, .setup-columns { grid-template-columns: 1fr; }
  .difficulty-grid { grid-template-columns: repeat(3, 1fr); }
  .hud-bottom { grid-template-columns: 1fr; width: min(96vw, 560px); gap: 8px; }
  .hud-escorts { display: none; }
  .hud-chain strong { font-size: 38px; }
  .ability { width: auto; flex: 1; height: 58px; }
  .boost { display: none; }
}
@media (max-width: 640px) {
  .brand { font-size: calc(18px * var(--ts, 1)); }
  .wallet { gap: 9px; font-size: calc(13px * var(--ts, 1)); }
  .campaign-link { display: none; }
  .capital-list, .mod-slots { grid-template-columns: 1fr 1fr; }
  .ship-specs { grid-template-columns: 1fr 1fr; }
  .upgrade { grid-template-columns: 1fr auto; }
  .upgrade .pips { grid-column: 1; }
  .settings-grid, .settings-grid.wide { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .launch-bar { flex-direction: column; align-items: stretch; }
  .hud-top-left { max-width: 58vw; }
  .boss-bar { width: 90vw; }
  .hud-top-left h2 { font-size: 19px; }
  #radio { display: none; }
  #minimap { width: 130px; height: 83px; }
  .hud-clock { top: 142px; left: auto; right: 16px; transform: none; text-align: right; }
  .hud-clock span { font-size: calc(18px * var(--ts, 1)); }
  .boss-bar { top: auto; bottom: 300px; width: 90vw; }
  .boss-bar strong { font-size: calc(16px * var(--ts, 1)); }
  .hud-chain { top: 128px; transform: none; }
  .hud-chain strong { font-size: 30px; }
  .hud-chain i { width: 90px; }
  .ability strong { font-size: calc(10px * var(--ts, 1)); }
  .ability { padding: 6px; }
  .pause-stats { grid-template-columns: 1fr 1fr; }
}
/* With touch controls the bottom HUD sits above the sticks and buttons. */
.hud:has(.touch:not(.hidden)) .abilities, .hud:has(.touch:not(.hidden)) .boost { display: none; }
.hud:has(.touch:not(.hidden)) .hud-bottom { bottom: 226px; grid-template-columns: 1fr; width: min(92vw, 440px); }
.hud:has(.touch:not(.hidden)) .tutorial { bottom: 300px; }
.hud:has(.touch:not(.hidden)) .hud-escorts { display: none; }

/* 1.5: status effects, Fracture Surge, space events and whispers */
.status-row { display: flex; flex-wrap: wrap; gap: 4px; }
.status-chip { --c: var(--mint); display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 10px; font: 600 calc(11px * var(--ts, 1)) var(--mono); color: var(--c); background: #04101add; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 25%, transparent); animation: rise .2s ease-out; }
.status-chip b { font-size: calc(12px * var(--ts, 1)); line-height: 1; }
.status-chip em { font-style: normal; color: #e6ebe3aa; }
.status-chip.debuff { background: #1a0808dd; }
.status-chip.expiring { opacity: .6; border-style: dashed; }
.side-meters { display: grid; gap: 6px; }
.side-meters .boost { height: 32px; grid-auto-flow: column; gap: 7px; }
.surge { position: relative; height: 32px; padding: 0; display: grid; grid-auto-flow: column; place-items: center; place-content: center; gap: 7px; border-color: #e7c2ff44; background: #120a1dd9; overflow: hidden; font: 600 calc(10px * var(--ts, 1)) var(--mono); letter-spacing: .2em; color: #e7c2ffaa; }
.surge i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #5a2a9a66, #b77cff66); }
.surge span, .surge kbd { position: relative; }
.surge.ready { color: #fff; border-color: #e7c2ff; box-shadow: 0 0 22px #b77cff88, inset 0 0 14px #b77cff55;  }
.surge.active { color: #fff; border-color: #fff; background: linear-gradient(90deg, #6a2aba, #e7c2ff55); }
.event-banner { position: absolute; top: 128px; left: 50%; transform: translateX(-50%); width: min(560px, 80vw); display: grid; justify-items: center; gap: 1px; padding: 8px 20px; background: linear-gradient(90deg, transparent, #3a0d0bcc 20%, #3a0d0bcc 80%, transparent); text-align: center; pointer-events: none; animation: fade .3s ease-out; }
.event-banner strong { font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .32em; color: #ffb39e; }
.event-banner small { font-size: calc(12px * var(--ts, 1)); color: #e6ebe3d0; }
.event-banner b { font: 700 30px/1.1 var(--mono); color: #fff; text-shadow: 0 0 18px #ff6a5a; }
.event-banner b:empty { display: none; }
.event-banner.whisper, .event-banner.blackout { background: linear-gradient(90deg, transparent, #1d0d33cc 20%, #1d0d33cc 80%, transparent); }
.event-banner.whisper strong, .event-banner.blackout strong { color: #d6b8ff; }
.event-banner.collapse b { font-size: 20px; }
.whisper { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); width: min(640px, 86vw); margin: 0; text-align: center; font: italic 400 clamp(16px, 2.1vw, 23px) var(--serif); color: #dcc2ff; text-shadow: 0 0 18px #8a4aff, 0 2px 8px #000; letter-spacing: .08em; opacity: 0; pointer-events: none; }
.whisper.show { animation: whisper 4.4s ease-in-out forwards; }
@keyframes whisper { 0% { opacity: 0; filter: blur(6px); letter-spacing: .18em; } 20%, 70% { opacity: .95; filter: blur(0); letter-spacing: .08em; } 100% { opacity: 0; filter: blur(5px); } }
.boss-bar.immune b { background: linear-gradient(90deg, #6a5cff, #b9b8ff); box-shadow: 0 0 14px #b9b8ff88; }
.boss-bar.armored b { background: linear-gradient(90deg, #b07a2a, #ffc870); }
.boss-bar.vulnerable b { background: linear-gradient(90deg, #ffb340, #fff0a0); box-shadow: 0 0 12px #ffd27a99; }
.boss-bar .boss-extra { font: 600 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .16em; color: #ffd7c8; }
.touch-buttons [data-touch=surge] { left: 50%; bottom: 138px; margin-left: -40px; width: 80px; height: 30px; border-radius: 15px; font-size: calc(11px * var(--ts, 1)); color: #e7c2ff; border-color: #b77cff66; opacity: .55; }
.touch-buttons [data-touch=surge].ready { opacity: 1; box-shadow: 0 0 22px #b77cff99; border-color: #e7c2ff; }
.reduced .whisper.show, .reduced .surge.ready { animation: none; opacity: .95; }
@media (max-width: 900px) {
  .side-meters { grid-auto-flow: column; }
  .side-meters .boost { display: none; }
  .event-banner { top: 112px; }
}
@media (max-width: 640px) {
  .event-banner { top: 186px; width: 92vw; }
  .event-banner b { font-size: 22px; }
}
.hud:has(.touch:not(.hidden)) .side-meters { display: none; }
/* Phones held sideways: everything has to fit in ~400px of height. */
@media (max-height: 520px) {
  #radio, .hud-escorts { display: none; }
  .hud-top-left { max-width: 34vw; }
  .hud-top-left h2 { font-size: calc(17px * var(--ts, 1)); }
  #objective { font-size: calc(12px * var(--ts, 1)); }
  .hud-clock span { font-size: 20px; }
  .boss-bar { top: 64px; width: min(360px, 30vw); }
  .boss-bar strong { font-size: calc(14px * var(--ts, 1)); }
  .boss-bar small { display: none; }
  .event-banner { top: 92px; padding: 4px 14px; }
  .event-banner b { font-size: 20px; }
  .hud-chain { top: 40%; }
  .hud-chain strong { font-size: 30px; }
  .hud:has(.touch:not(.hidden)) .hud-bottom { bottom: 6px; width: min(38vw, 320px); gap: 4px; }
  .hud:has(.touch:not(.hidden)) .bar.hull { height: 14px; }
  .touch-buttons [data-touch=boost] { bottom: 70px; width: 70px; height: 70px; margin-left: -35px; }
  .touch-buttons [data-touch=surge] { bottom: 146px; }
  .stick { width: 124px; height: 124px; bottom: 12px; }
  .touch-buttons [data-touch="0"], .touch-buttons [data-touch="1"], .touch-buttons [data-touch="2"], .touch-buttons [data-touch="3"], .touch-buttons [data-touch=focus] { bottom: 146px; }
  .tutorial { bottom: auto; top: 120px; }
}

/* ---- 1.6: icons, squads, command mode, side quests, visible upgrades, mod descriptions ---- */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 18px; }
.hero-points li { padding: 6px 11px; border: 1px solid var(--line2); border-radius: 999px; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; background: #0b1a1f99; }
.hero-points b { color: var(--gold); font-weight: 650; margin-right: 4px; }
.mk { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); font-style: normal; letter-spacing: .08em; margin-left: 6px; vertical-align: middle; }
.kit li { grid-template-columns: 26px 22px 1fr; }
.kit li .ico { color: #9fd0ff; grid-row: 1 / 3; align-self: center; width: 20px; height: 20px; }
.kit li small { grid-column: 3; }
.upgrade { grid-template-columns: 32px 1fr auto auto; }
.up-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #9fd0ff14; color: #9fd0ff; }
.up-ico .ico { width: 20px; height: 20px; }
.upgrade strong em { font: 600 calc(12.5px * var(--ts, 1)) var(--mono); color: var(--gold); font-style: normal; letter-spacing: .08em; margin-left: 4px; text-transform: uppercase; }
.upgrade small.look { display: block; color: #9fd0ffb0; font-size: calc(12.5px * var(--ts, 1)); }
.mod strong em { font: 600 calc(12px * var(--ts, 1)) var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }
.mod p { margin: 2px 0 0; font-size: calc(13px * var(--ts, 1)); line-height: 1.4; color: #c6d3cd; }
.mod-grid.codex { margin-top: 14px; }
.mod-grid.codex > .eyebrow { grid-column: 1 / -1; }
.mod-card.locked { opacity: .55; border-style: dashed; }
.small-eyebrow { display: block; font-size: calc(12px * var(--ts, 1)); margin: 12px 0 6px; color: var(--muted); }
.tactic-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tactic-buttons button { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; font-size: calc(12.5px * var(--ts, 1)); }
.tactic-buttons .ico { width: 22px; height: 22px; }
.tactic-buttons .active, .duty-defaults .active { border-color: var(--gold); color: var(--gold); background: #e2c69412; }
.duty-defaults { display: grid; gap: 5px; }
.duty-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; font-size: calc(13px * var(--ts, 1)); }
.duty-row > span { display: flex; align-items: center; gap: 6px; }
.duty-row .ship-glyph { width: 26px; height: 16px; }
.duty-row .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.duty-row .seg button { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 6px; font-size: calc(12.5px * var(--ts, 1)); }

/* battle: quest tracker */
.quest-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-width: 330px; }
.quest { --p: 0%; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 10px; background: linear-gradient(90deg, #2b2410e6, #0b141add); border: 1px solid #ffd27a55; animation: slidein .3s ease-out; }
.quest > .ico { width: 22px; height: 22px; color: #ffd27a; }
.quest strong { display: block; font-size: calc(13px * var(--ts, 1)); color: #ffe6b0; line-height: 1.2; }
.quest small { display: block; font-size: calc(12px * var(--ts, 1)); color: #d8d2c0; }
.quest i { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.quest i b { display: block; height: 100%; width: var(--p); background: #ffd27a; transition: width .2s; }
.quest time { font: 700 calc(13px * var(--ts, 1)) var(--mono); color: #ffd27a; }
.banner.side-quest strong { color: #ffd27a; font-size: clamp(20px, 2.8vw, 32px); text-shadow: 0 0 28px #ffcf6b88, 0 3px 14px #000; }

/* battle: abilities with icons */
.ab-ico { position: absolute; top: 7px; right: 9px; color: #9fd0ff; opacity: .9; }
.ab-ico .ico { width: 22px; height: 22px; }
.ability.ultimate .ab-ico { color: var(--gold); }
.ability.cooling .ab-ico { opacity: .25; }

/* battle: squad bar and command mode */
.squad-bar { position: absolute; left: 16px; bottom: 112px; display: grid; grid-template-columns: repeat(6, 54px); grid-auto-rows: auto; gap: 5px; z-index: 2; }
.squad-chip { --duty: #8ff5df; position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; height: 54px; padding: 4px 2px 7px; border-radius: 9px; background: #06141ddd; border: 1px solid #ffffff1f; font: 600 calc(11px * var(--ts, 1)) var(--mono); }
.squad-chip kbd { position: absolute; top: 3px; left: 4px; font-size: calc(10.5px * var(--ts, 1)); padding: 0 3px; color: var(--muted); border-color: #ffffff22; }
.squad-chip .ship-glyph { width: 30px; height: 18px; }
.squad-chip .duty { color: var(--duty); line-height: 0; }
.squad-chip .duty .ico { width: 15px; height: 15px; }
.squad-chip i { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px; background: #ffffff18; border-radius: 1px; overflow: hidden; }
.squad-chip i b { display: block; height: 100%; background: var(--duty); }
.squad-chip.selected { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 18px #ffffff40; }
.squad-chip.lost { opacity: .3; }
.squad-chip.form, .squad-chip.cmd, .squad-chip.skill { grid-column: span 2; height: 34px; grid-auto-flow: column; justify-content: center; gap: 6px; font-size: calc(11.5px * var(--ts, 1)); letter-spacing: .08em; }
.squad-chip.cmd { color: var(--gold); border-color: #e2c69466; }
.squad-chip.cmd kbd { position: static; }
.command-panel { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); width: min(720px, 94vw); padding: 12px 14px; border-radius: 14px; background: #071419ee; border: 1px solid #e2c69466; box-shadow: 0 18px 50px #000b; display: grid; gap: 10px; z-index: 3; animation: fade .2s ease-out; }
.cmd-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cmd-head strong { font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .3em; color: var(--gold); }
.cmd-head span { font-size: calc(12.5px * var(--ts, 1)); color: #c6d3cd; }
.cmd-duties { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cmd-duties button { --duty: #8ff5df; position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 4px 7px; border-color: color-mix(in srgb, var(--duty) 40%, transparent); color: var(--duty); }
.cmd-duties button .ico { width: 24px; height: 24px; }
.cmd-duties button strong { font-size: calc(12px * var(--ts, 1)); color: var(--text); }
.cmd-duties button kbd { position: absolute; top: 4px; right: 5px; font-size: calc(9px * var(--ts, 1)); padding: 0 3px; }
.cmd-duties button.active { background: color-mix(in srgb, var(--duty) 18%, transparent); box-shadow: 0 0 0 1px var(--duty); }
.cmd-formations { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cmd-formations > span { font: 600 calc(10px * var(--ts, 1)) var(--mono); letter-spacing: .2em; color: var(--muted); margin-right: 4px; }
.cmd-formations button { display: flex; align-items: center; gap: 5px; padding: 5px 9px; font-size: calc(11.5px * var(--ts, 1)); }
.cmd-formations button.active { border-color: var(--gold); color: var(--gold); }
body.commanding #universe { filter: saturate(.75) brightness(.92); }
body.commanding .hud::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px #e2c69455, inset 0 0 120px #e2c69422; }
body.picking #universe { cursor: crosshair; }
.quest-row span { display: flex; align-items: center; gap: 6px; }
.quest-row strong { color: #ffd27a; }
.quest-row.failed strong { color: var(--red); }
.t-cmd { left: 96px; bottom: 170px; width: 64px !important; height: 40px !important; border-radius: 20px !important; font-size: calc(12px * var(--ts, 1)) !important; color: var(--gold); border-color: #e2c69466 !important; }
@media (max-width: 900px) {
  .squad-bar { grid-template-columns: repeat(6, 44px); left: 8px; bottom: 200px; }
  .squad-chip { height: 44px; }
  .squad-chip .ship-glyph { width: 24px; height: 14px; }
  .squad-chip.form, .squad-chip.cmd, .squad-chip.skill { height: 30px; }
  .cmd-duties { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tactic-buttons { grid-template-columns: repeat(3, 1fr); }
  .quest-list { max-width: 260px; }
}
.hud:has(.touch:not(.hidden)) .squad-bar { bottom: auto; top: 196px; left: auto; right: 8px; grid-template-columns: repeat(3, 40px); }
.hud:has(.touch:not(.hidden)) .squad-chip { height: 40px; }
.hud:has(.touch:not(.hidden)) .squad-chip.form, .hud:has(.touch:not(.hidden)) .squad-chip.cmd, .hud:has(.touch:not(.hidden)) .squad-chip.skill { display: none; }
.hud:has(.touch:not(.hidden)) .command-panel { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
@media (max-height: 520px) {
  .quest-list { display: none; }
  .squad-bar { display: none; }
}

.slot-mod .mod p { display: none; }
@media (max-width: 640px) {
  .hud-chain { top: 300px; left: auto; right: 12px; text-align: right; }
  .hud-chain i { margin-left: auto; }
  .quest-list { max-width: 62vw; }
  .quest { grid-template-columns: 20px 1fr auto; padding: 6px 8px; }
  .quest small { font-size: calc(12.5px * var(--ts, 1)); }
}

.ico { width: 1em; height: 1em; flex: none; vertical-align: -.15em; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }





/* Optional voice pack: a radio subtitle under the clock while a crew line plays. */
.voice-sub { position: absolute; left: 50%; top: 88px; z-index: 4; transform: translate(-50%, -6px); max-width: min(620px, 88vw); margin: 0; padding: 7px 14px; border-radius: 10px; background: #04101acc; border: 1px solid #8ff5df33; color: #e9f2ee; font-size: calc(14px * var(--ts, 1)); line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.voice-sub.show { opacity: 1; transform: translate(-50%, 0); }
.voice-sub b { display: block; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .13em; color: var(--mint); margin-bottom: 2px; }
@media (max-width: 640px) { .voice-sub { top: 64px; font-size: calc(13px * var(--ts, 1)); } }

/* Equipment bay: the hangar ship with its eight hardpoints; mods are fitted right on the hull. */
.mod-bay { position: relative; height: 340px; margin: 10px 0 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, #12313a 0%, #071019 70%); }
.mod-bay.dropping { outline: 2px dashed var(--gold); outline-offset: -4px; }
.bay-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bay-slots { position: absolute; inset: 0; pointer-events: none; }
.bay-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bay-lines line { stroke: #8ff5df66; stroke-width: 1; }
.bay-lines line.locked { stroke: #8ff5df22; }
.bay-slot { position: absolute; left: -99px; top: -99px; transform: translate(-50%, -50%); width: 28px; height: 28px; padding: 0; border-radius: 50%; display: grid; place-items: center; pointer-events: auto; cursor: pointer; border: 1.5px dashed #8ff5df99; background: #04101acc; color: var(--mint); font: 600 calc(14px * var(--ts, 1)) var(--mono); transition: transform .15s, box-shadow .15s; }
.bay-slot.filled { border-style: solid; background: #0a1822e6; }
.bay-slot.common { border-color: #c8d0d8; color: #eef2f5; }
.bay-slot.uncommon { border-color: #7dffb2; color: #b8ffd4; }
.bay-slot.rare { border-color: #c28bff; color: #e2ccff; }
.bay-slot.locked { opacity: .35; cursor: not-allowed; font-size: calc(12px * var(--ts, 1)); }
.bay-slot:not(.locked):hover, .bay-slot:focus-visible { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 14px #8ff5df88; }
.bay-picker { position: absolute; z-index: 3; width: 270px; max-height: 270px; overflow: auto; padding: 10px; border-radius: 12px; background: #06121cf2; border: 1px solid var(--line2); display: grid; gap: 6px; box-shadow: 0 12px 32px #0009; }
.bay-picker .pick { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #0b1a24; color: var(--text); cursor: pointer; }
.bay-picker .pick:hover, .bay-picker .pick:focus-visible { border-color: var(--mint); }
.bay-picker .pick.on { border-color: var(--gold); }
.bay-picker .pick b { font-size: calc(16px * var(--ts, 1)); text-align: center; }
.bay-picker .pick.uncommon b { color: #7dffb2; } .bay-picker .pick.rare b { color: #c28bff; }
.bay-picker .pick strong { display: block; font-size: calc(13px * var(--ts, 1)); }
.bay-picker .pick small { font-size: calc(12px * var(--ts, 1)); color: var(--muted); }
.bay-hint { position: absolute; left: 12px; bottom: 8px; margin: 0; font: calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); pointer-events: none; }
.slot-no { display: inline-block; min-width: 16px; margin-right: 6px; font: 700 calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); }
.mod-card[draggable="true"] { cursor: grab; }
@media (max-width: 640px) { .mod-bay { height: 260px; } .bay-picker { width: min(260px, 80vw); } }
.hangar-layout > * { min-width: 0; }
@media (max-width: 640px) { .duty-row { grid-template-columns: 92px minmax(0, 1fr); } .duty-row .seg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .duty-row .seg button { padding: 5px 3px; font-size: calc(12.5px * var(--ts, 1)); overflow: hidden; } }

/* ===== 2.4: navigation, command deck, squads and equipment ===== */
.tabs button { display: inline-flex; align-items: center; gap: 7px; }
.tab-ico { display: inline-flex; width: 18px; height: 18px; }
.tab-ico .ico { width: 18px; height: 18px; }
.tabs button[aria-selected=true] .tab-ico { color: var(--gold); }
/* Command deck: the next mission, your flagship and your fleet's state. Full on the star chart, a slim strip elsewhere. */
.deck { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(220px, .75fr); gap: 24px; padding: 28px 0 18px; }
.deck h1 { font-size: clamp(32px, 4.4vw, 54px); margin: 10px 0 10px; }
.deck-brief { color: #c0ccc6; max-width: 540px; font-size: calc(14.5px * var(--ts, 1)); line-height: 1.55; margin: 0 0 12px; }
.deck-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.deck-chips span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; background: #0b1a1f99; }
.deck-chips span.challenge { color: var(--gold); border-color: #e2c69455; }
.deck .hero-actions { margin: 18px 0 0; }
.deck .hero-ship { height: 300px; }
.deck-status { display: grid; gap: 10px; align-content: center; }
.rank-progress.campaign b { background: linear-gradient(90deg, #8fc9ff, var(--mint)); }
.deck-link { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #0b1a1f99; cursor: pointer; }
.deck-link:hover, .deck-link:focus-visible { border-color: var(--mint); }
.deck-link strong { font-size: calc(14px * var(--ts, 1)); color: var(--text); }
.deck-link small { font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
body:not([data-view="chart"]) .deck { display: none; }
/* Squads tab */
.sub-title h3 { margin: 2px 0 0; font-size: calc(17px * var(--ts, 1)); font-weight: 600; }
.squad-summary { display: grid; gap: 6px; padding: 14px 16px; margin: 6px 0 18px; border-radius: 14px; border: 1px solid #e2c69433; background: linear-gradient(90deg, #2b241033, #0b141a); }
.fx-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.fx { padding: 3px 8px; border-radius: 999px; font: 600 calc(12px * var(--ts, 1)) var(--mono); border: 1px solid; }
.fx.up { color: #9dffcb; border-color: #57d79a55; background: #0f2a1f; }
.fx.down { color: #ffb3a0; border-color: #ff8f7455; background: #2a1410; }
.tactic-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 8px 0 22px; }
.tactic-card, .doctrine-card { display: grid; gap: 6px; align-content: start; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #0b161d; cursor: pointer; color: var(--text); }
.tactic-card:hover, .doctrine-card:hover { border-color: var(--line2); }
.tactic-card.active, .doctrine-card.active { border-color: var(--gold); background: #e2c69410; box-shadow: 0 0 0 1px #e2c69433 inset; }
.tactic-card strong, .doctrine-card strong { display: flex; align-items: center; gap: 6px; font-size: calc(13.5px * var(--ts, 1)); }
.tactic-card strong .ico { width: 16px; height: 16px; }
.tactic-card small { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); line-height: 1.4; }
.tactic-card em { font-style: normal; font-size: calc(12px * var(--ts, 1)); color: #9fd0ff; }
.diagram { width: 100%; height: auto; max-height: 92px; background: radial-gradient(ellipse at 50% 50%, #12313a, #071019); border-radius: 8px; }
.diagram .grid { stroke: #8ff5df22; stroke-width: .6; fill: none; }
.diagram .cap { fill: var(--gold); }
.diagram .sq { stroke: #04101a; stroke-width: .8; }
.diagram .sq0, .diagram rect.sq0 { fill: #8ff5df; }
.diagram .sq1, .diagram rect.sq1 { fill: #8fc9ff; }
.diagram .sq2, .diagram rect.sq2 { fill: #ffd27a; }
.diagram rect.off { fill: #ffffff10; }
.diagram .arrow { stroke: #ffffff55; stroke-width: 1; fill: none; }
.squad-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 22px; }
.squad-card { display: grid; gap: 7px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #0b161d; }
.squad-head { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; }
.squad-head .ship-glyph { width: 32px; height: 20px; }
.squad-head b { display: block; font-size: calc(14px * var(--ts, 1)); }
.squad-head small { font-size: calc(12px * var(--ts, 1)); color: var(--muted); }
.vet { display: grid; justify-items: end; color: var(--gold); font-size: calc(13px * var(--ts, 1)); letter-spacing: 1px; }
.vet em { font: 600 calc(12px * var(--ts, 1)) var(--mono); font-style: normal; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.vet.r4 { color: #ff9ae8; } .vet.r3 { color: #ffd27a; }
.vet-bar { display: block; height: 4px; border-radius: 3px; background: #ffffff10; overflow: hidden; }
.vet-bar b { display: block; height: 100%; background: linear-gradient(90deg, #8ff5df, var(--gold)); }
.vet-note { font: calc(12.5px * var(--ts, 1)) var(--mono); color: var(--muted); }
.squad-card .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.squad-card .seg button { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 4px; font-size: calc(12px * var(--ts, 1)); }
.squad-card .seg .ico { width: 14px; height: 14px; }
.squad-card .seg .active { border-color: var(--gold); color: var(--gold); background: #e2c69412; }
.doctrine-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 8px; align-items: start; }
.doctrine-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.deploy-editor { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
/* Equipment bay and mod inventory side by side */
.equip-panel { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); }
.equip-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.equip-ship .mod-bay { margin-top: 0; }
.loadout-sum { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.loadout-sum .eyebrow { margin-right: 4px; }
.mod-filter { display: inline-flex; gap: 4px; margin-bottom: 10px; }
.mod-filter button { padding: 5px 12px; font-size: calc(13px * var(--ts, 1)); border-radius: 999px; }
.mod-filter .active { border-color: var(--mint); color: var(--mint); background: #8ff5df12; }
.equip-inventory .mod-grid { grid-template-columns: 1fr; max-height: 430px; overflow: auto; padding-right: 4px; }
.equip-inventory .mod-card { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-left: 3px solid #c8d0d8; }
.mod-card.uncommon { border-left-color: #7dffb2; } .mod-card.rare { border-left-color: #c28bff; }
.mod-card.on { background: #e2c6940d; }
.mod-glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #04101a; border: 1px solid var(--line2); font-size: calc(15px * var(--ts, 1)); color: var(--mint); }
.mod-card.uncommon .mod-glyph { color: #7dffb2; } .mod-card.rare .mod-glyph { color: #c28bff; }
.mod-body strong { display: block; font-size: calc(13px * var(--ts, 1)); }
.mod-body small { font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
.mod-body small em { font-style: normal; color: #9dffcb; }
.mod-body .pips { display: block; font-style: normal; font-size: calc(12px * var(--ts, 1)); letter-spacing: 1px; color: var(--gold); }
.mod-actions { display: flex; align-items: center; gap: 4px; }
.mod-actions button { padding: 5px 8px; font-size: calc(12px * var(--ts, 1)); }
.mod-actions .fitted { font: 700 calc(12px * var(--ts, 1)) var(--mono); color: var(--gold); padding: 3px 6px; border: 1px solid #e2c69455; border-radius: 6px; }
.codex-box { margin-top: 10px; }
.codex-box summary { cursor: pointer; font: 600 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .1em; color: var(--muted); }
.codex-box .mod-grid { margin-top: 8px; }
@media (max-width: 1100px) { .tactic-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .squad-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doctrine-layout, .equip-layout { grid-template-columns: 1fr; } .deck { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .deck-status { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* Phones: the main menu becomes a tab bar along the bottom edge. */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; margin: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #071017f2; border-top: 1px solid var(--line); }
  .tabs button { flex-direction: column; gap: 2px; padding: 4px 6px; border-radius: 10px; font-size: calc(11.5px * var(--ts, 1)); }
  .tab-ico, .tab-ico .ico { width: 20px; height: 20px; }
  body.in-battle .tabs { display: none; }
  #menu { padding-bottom: 76px; }
  .deck { grid-template-columns: 1fr; }
  .deck .hero-ship { height: 220px; order: -1; }
  .deck-status { grid-template-columns: 1fr; }
  .tactic-cards, .squad-roster { grid-template-columns: 1fr 1fr; }
  .squad-roster { grid-template-columns: 1fr; }
  .doctrine-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not([data-view="chart"]) .deck { grid-template-columns: 1fr; }
}

.squad-chip .reserve { position: absolute; top: 2px; right: 4px; font: 700 calc(10.5px * var(--ts, 1)) var(--mono); font-style: normal; color: #9dffcb; letter-spacing: -1px; }
.squad-chip.repairing { box-shadow: inset 0 0 0 1px #7dffb288; }
.squad-chip.repairing .ship-glyph { filter: drop-shadow(0 0 4px #7dffb2); }

/* 2.5: the alert feed. Each alert slides in once, holds still, then fades once; nothing pulses. */
.alerts { width: min(320px, 40vw); display: grid; gap: 6px; pointer-events: none; text-align: left; }
.alert { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #06121cf0; border: 1px solid var(--line2); border-left: 4px solid var(--mint); box-shadow: 0 8px 24px #0008; animation: alert-in .22s ease-out; transition: opacity .4s; }
.alert.out { opacity: 0; }
.alert:first-child { border-color: #ffffff2a; box-shadow: 0 8px 24px #0008, 0 0 0 1px #ffffff14; }
.alert .a-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffffff10; font-size: calc(14px * var(--ts, 1)); color: var(--mint); }
.alert strong { display: block; font: 700 calc(12.5px * var(--ts, 1)) var(--mono); letter-spacing: .08em; color: var(--text); text-transform: uppercase; }
.alert small { display: block; font-size: calc(12px * var(--ts, 1)); color: #b9c7c1; }
.alert .a-count { font: 700 calc(12px * var(--ts, 1)) var(--mono); color: var(--gold); }
.alert.warn { border-left-color: #ff7a5a; } .alert.warn .a-ico { color: #ff9a7a; background: #ff6a4a22; } .alert.warn strong { color: #ffb19c; }
.alert.gold { border-left-color: var(--gold); } .alert.gold .a-ico { color: var(--gold); background: #e2c69422; } .alert.gold strong { color: #ffe2a8; }
.alert.side-quest { border-left-color: #ffd27a; } .alert.side-quest .a-ico { color: #ffd27a; background: #ffd27a22; }
.alert.chain { border-left-color: #8ff5df; }
@keyframes alert-in { from { transform: translateY(-8px); opacity: 0; } }
@media (max-width: 640px) { .alerts { width: min(240px, 52vw); } .alert { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; padding: 5px 8px; } .alert .a-ico { width: 20px; height: 20px; font-size: calc(11px * var(--ts, 1)); } .alert strong { font-size: calc(10.5px * var(--ts, 1)); } .alert small { font-size: calc(10.5px * var(--ts, 1)); } }

/* 2.5: formation skill button. Fills while it recharges, holds a steady glow when ready, drains while active. */
.squad-chip.form span, .squad-chip.skill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.squad-chip.skill { overflow: hidden; color: #cdbb94; border-color: #e2c69440; font-size: calc(11px * var(--ts, 1)); letter-spacing: .04em; }
.squad-chip.skill kbd { position: static; }
.squad-chip.skill .sk-fill { position: absolute; left: 0; top: 0; bottom: 0; right: auto; height: auto; width: 0; background: #e2c69422; border-radius: 0; }
.squad-chip.skill.ready { color: #ffe2a8; border-color: #ffd27a; box-shadow: 0 0 14px #ffd27a55, inset 0 0 10px #ffd27a22; }
.squad-chip.skill.active { color: #fff; border-color: #8ff5df; box-shadow: 0 0 14px #8ff5df55; }
.squad-chip.skill.active .sk-fill { background: #8ff5df2e; }
.t-skill { left: 96px; bottom: 216px; width: 64px !important; height: 40px !important; border-radius: 20px !important; font-size: calc(11px * var(--ts, 1)) !important; color: #cdbb94; opacity: .7; }
.t-skill.ready { opacity: 1; color: #ffe2a8; border-color: #ffd27a !important; box-shadow: 0 0 16px #ffd27a55; }

/* 2.5: Squads tab — formation skill, positions board and role legend. */
.squad-summary .sk-chip { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: #e2c6940f; border: 1px solid #e2c69440; min-width: 0; }
.squad-summary .sk-chip strong { color: var(--gold); font-size: calc(15px * var(--ts, 1)); }
.squad-summary .sk-chip small { color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.tactic-card .skill-line { display: block; font-size: calc(12.5px * var(--ts, 1)); line-height: 1.35; color: #c9c2ae; padding: 6px 8px; border-radius: 7px; background: #e2c6940d; border: 1px dashed #e2c69433; text-align: left; }
.tactic-card .skill-line b { color: var(--gold); font-weight: 700; }
.tactic-card .skill-line i { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: calc(12.5px * var(--ts, 1)); }
.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.pos-board { position: relative; aspect-ratio: 16 / 10; width: 100%; max-width: 720px; justify-self: center; border-radius: 14px; border: 1px solid var(--line2); background: radial-gradient(circle at 50% 50%, #0f2a3366, transparent 70%), repeating-linear-gradient(0deg, #ffffff07 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, #ffffff07 0 1px, transparent 1px 40px), #04101a; overflow: hidden; }
.pos-front { position: absolute; right: 12px; top: 10px; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .13em; color: var(--muted); }
.pos-cap { position: absolute; width: 96px; transform: translate(-50%, -50%); opacity: .9; pointer-events: none; }
.pos-cap svg { width: 100%; height: auto; display: block; }
.pos-chip { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; width: 78px; padding: 5px 4px 4px; border-radius: 9px; background: #071823f0; border: 1px solid var(--line2); font: 600 calc(12px * var(--ts, 1)) var(--mono); color: var(--text); cursor: grab; transition: left .25s, top .25s; z-index: 1; }
.pos-chip .ship-glyph { width: 30px; height: 18px; }
.pos-chip b { font-weight: 700; white-space: nowrap; }
.pos-chip em { font-style: normal; font-size: calc(11.5px * var(--ts, 1)); letter-spacing: .12em; padding: 0 5px; border-radius: 6px; }
.pos-chip.vanguard em { color: #ffb19c; background: #ff7a5a22; }
.pos-chip.flank em { color: #9fe0ff; background: #6fc6ff22; }
.pos-chip.guard em { color: #a8ffcf; background: #6fffb022; }
.pos-chip.vanguard { border-color: #ff7a5a66; } .pos-chip.flank { border-color: #6fc6ff66; } .pos-chip.guard { border-color: #6fffb066; }
.pos-chip.selected { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 18px #ffffff33; z-index: 2; }
.pos-chip:hover { z-index: 3; }
.pos-chip:active:not(:disabled) { transform: translate(-50%, -50%) scale(.97); }
.position-info { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #06121bcc; border: 1px solid var(--line); min-width: 0; }
.position-info strong { font-size: calc(18px * var(--ts, 1)); }
.position-info p { margin: 0; color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.role-legend { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.role-legend b { display: inline-block; min-width: 34px; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .1em; padding: 1px 5px; border-radius: 5px; text-align: center; margin-right: 4px; }
.role-legend .vanguard b { color: #ffb19c; background: #ff7a5a22; } .role-legend .flank b { color: #9fe0ff; background: #6fc6ff22; } .role-legend .guard b { color: #a8ffcf; background: #6fffb022; }
@media (max-width: 760px) {
  .pos-layout { grid-template-columns: minmax(0, 1fr); }
  .pos-board { aspect-ratio: 1 / 1; }
  .pos-chip { width: 58px; padding: 3px 2px; font-size: calc(11.5px * var(--ts, 1)); }
  .pos-chip .ship-glyph { width: 22px; height: 13px; }
  .pos-chip em { font-size: calc(11px * var(--ts, 1)); }
  .pos-cap { width: 64px; }
}
/* Touch and short screens: the alert feed moves under the clock, one line each, two at most. */
.hud:has(.touch:not(.hidden)) .alerts, .alerts.compact { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); width: min(300px, 44vw); z-index: 6; }
.hud:has(.touch:not(.hidden)) .alert small { display: none; }
.hud:has(.touch:not(.hidden)) .alert:nth-child(n+3) { display: none; }
.hud:has(.touch:not(.hidden)) .alert { padding: 4px 8px; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; }
.hud:has(.touch:not(.hidden)) .alert .a-ico { width: 18px; height: 18px; font-size: calc(10px * var(--ts, 1)); }
.hud:has(.touch:not(.hidden)) .alert strong { font-size: calc(10px * var(--ts, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 520px) { .alert small { display: none; } .alert:nth-child(n+3) { display: none; } }

/* 2.5: signature skills and race traits in the hangar kit and skirmish picker. */
.kit li strong em { font-style: normal; font: 700 calc(11.5px * var(--ts, 1)) var(--mono); letter-spacing: .14em; color: var(--muted); margin-left: 6px; padding: 1px 5px; border-radius: 5px; background: #ffffff0d; vertical-align: 2px; }
.kit li.own strong em { color: var(--gold); background: #e2c69418; }
.kit li.trait strong em { color: #a8ffcf; background: #6fffb018; }
.kit li.trait .ico { color: #a8ffcf; }
.sig-note { margin: 6px 0 0; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.sig-note b { color: var(--gold); }
.sig-note.trait b { color: #a8ffcf; }

/* 2.5: every tab opens with its own hero — a summary of the choices made in that tab. */
.tab-hero { --race: #8ff5df; position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; align-items: center; margin: 22px 0 6px; padding: 24px 26px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--race) 30%, transparent); background: radial-gradient(ellipse at 85% 40%, color-mix(in srgb, var(--race) 16%, transparent), transparent 60%), linear-gradient(120deg, #0a1820f2, #06121ae6); overflow: hidden; animation: rise .3s ease-out; }
.tab-hero[hidden] { display: none; }
.tab-hero h1 { font-size: clamp(26px, 3.4vw, 42px); margin: 6px 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tab-hero h1 em { font-style: normal; color: var(--gold); font-size: .55em; font-family: var(--mono); letter-spacing: .08em; }
.tab-hero h1 .ico { width: .9em; height: .9em; color: var(--race); }
.tab-hero .eyebrow { color: color-mix(in srgb, var(--race) 70%, #fff); }
.th-copy { display: grid; gap: 12px; min-width: 0; }
.th-sub { margin: 0; color: #b9c7c1; font-size: calc(14px * var(--ts, 1)); max-width: 620px; }
.th-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.th-stats span { display: grid; padding: 8px 12px; border-radius: 10px; background: #ffffff08; border: 1px solid var(--line); font-size: calc(12px * var(--ts, 1)); color: var(--muted); min-width: 84px; }
.th-stats b { font-size: calc(18px * var(--ts, 1)); color: var(--text); }
.th-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.th-grid > div { display: grid; gap: 5px; align-content: start; min-width: 0; }
.th-up { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; padding: 3px 0; border-bottom: 1px dashed #ffffff12; min-width: 0; }
.th-up span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.th-up b { color: var(--text); font-family: var(--mono); }
.th-up small { color: var(--muted); font-size: calc(12px * var(--ts, 1)); margin-left: auto; padding-left: 6px; }
.th-up.role.vanguard b { color: #ffb19c; } .th-up.role.flank b { color: #9fe0ff; } .th-up.role.guard b { color: #a8ffcf; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 12px; height: 6px; border-radius: 2px; background: #ffffff18; }
.pips i.on { background: var(--race); }
.pips.hot i.on { background: linear-gradient(90deg, #ffd27a, #ff7a5a); }
.pips.big i { width: 26px; height: 12px; border-radius: 3px; }
.th-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: calc(13px * var(--ts, 1)); }
.th-skills li { display: flex; gap: 8px; align-items: center; }
.th-skills kbd { min-width: 20px; text-align: center; }
.th-skills li.own { color: var(--gold); } .th-skills li.trait { color: #a8ffcf; }
.th-mods > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.th-mod { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line2); font-size: calc(13px * var(--ts, 1)); background: #0b1a1f99; }
.th-mod b { color: var(--gold); font-family: var(--mono); margin-left: 3px; }
.th-mod.rare { border-color: #8fc9ff66; } .th-mod.epic { border-color: #c9a2ff77; } .th-mod.legendary { border-color: #ffd27a88; }
.th-skill { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #e2c6940f; border: 1px solid #e2c69440; }
.th-skill strong { color: var(--gold); font-size: calc(16px * var(--ts, 1)); }
.th-skill small { color: #c6d3cd; font-size: calc(13px * var(--ts, 1)); }
.th-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.th-vs > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #ffffff08; border: 1px solid var(--line); min-width: 0; }
.th-vs > div:last-child { border-color: color-mix(in srgb, var(--enemy) 50%, transparent); background: color-mix(in srgb, var(--enemy) 8%, transparent); }
.th-vs > b { font: 700 calc(14px * var(--ts, 1)) var(--mono); color: var(--muted); letter-spacing: .13em; }
.th-vs strong { font-size: calc(16px * var(--ts, 1)); } .th-vs small { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
.th-meter { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.th-meter i { height: 6px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.th-meter i b { display: block; height: 100%; background: linear-gradient(90deg, var(--race), #fff); }
.th-meter em { font-style: normal; font-family: var(--mono); color: var(--muted); text-align: right; }
.th-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.th-visual { display: grid; place-items: center; min-height: 220px; min-width: 0; }
.th-visual .capital-art, .th-ship .capital-art { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 18px 16px #0009); transform: rotate(-12deg); }
.th-ship { width: 100%; display: grid; place-items: center; }
.th-diagram { width: 100%; max-width: 360px; }
.th-diagram .diagram { width: 100%; height: auto; aspect-ratio: 88 / 72; max-height: 300px; }
.th-dial { display: grid; justify-items: center; gap: 10px; padding: 22px; border-radius: 16px; border: 1px solid var(--line2); background: #ffffff06; }
.th-dial span { font: 700 22px var(--mono); letter-spacing: .13em; color: var(--gold); }
.th-dial small { color: var(--muted); font-family: var(--mono); }
@media (max-width: 860px) {
  .tab-hero { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 12px; margin-top: 14px; }
  .th-visual { order: -1; min-height: 0; }
  .th-visual .capital-art, .th-ship .capital-art { max-width: 260px; }
  .th-diagram { max-width: 220px; }
  .th-dial { padding: 12px 18px; }
}
@media (max-width: 520px) {
  .tab-hero { gap: 8px; padding: 14px 12px; }
  .tab-hero h1 { font-size: 24px; margin: 2px 0 0; }
  .th-copy { gap: 9px; }
  .th-sub { font-size: calc(13px * var(--ts, 1)); }
  .th-visual .capital-art, .th-ship .capital-art { max-width: 190px; }
  .th-diagram { max-width: 130px; }
  .th-grid { gap: 10px; }
  .th-up { font-size: calc(12.5px * var(--ts, 1)); padding: 2px 0; }
  .th-up small { display: none; }
  .th-stats span { min-width: 0; flex: 1 1 20%; padding: 6px 8px; font-size: calc(12px * var(--ts, 1)); }
  .th-stats b { font-size: calc(14px * var(--ts, 1)); }
  .th-vs { gap: 6px; } .th-vs > div { padding: 7px 8px; } .th-vs strong { font-size: calc(13px * var(--ts, 1)); } .th-vs > b { font-size: calc(12px * var(--ts, 1)); letter-spacing: .1em; }
  .th-skill { padding: 8px 10px; } .th-skill strong { font-size: calc(14px * var(--ts, 1)); } .th-skill small { font-size: calc(12.5px * var(--ts, 1)); }
  .th-meter { grid-template-columns: 70px minmax(0, 1fr) 34px; font-size: calc(12px * var(--ts, 1)); gap: 5px; }
  .th-mod { font-size: calc(12px * var(--ts, 1)); padding: 3px 7px; }
}

/* ---------- 2.6: quick settings in every hero ---------- */
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: #04101a99; font-size: calc(13px * var(--ts, 1)); }
.q-label { display: inline-flex; align-items: center; gap: 5px; font: 600 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .16em; color: var(--muted); }
.q-label .ico { width: 13px; height: 13px; }
.q-seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; }
.q-seg button { border: 0; border-radius: 0; padding: 4px 9px; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
.q-seg button + button { border-left: 1px solid var(--line); }
.q-seg button.on { color: #13140f; background: var(--gold); font-weight: 650; }
.q-tog { padding: 4px 10px; border-radius: 999px; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
.q-tog.on { color: var(--text); border-color: #a1e1c877; background: #a1e1c814; }
.q-tog.on::before { content: '✓ '; color: var(--mint); }
.q-range, .q-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
.q-range input { width: 74px; }
.q-pick select { width: auto; max-width: 150px; padding: 4px 6px; font-size: calc(12.5px * var(--ts, 1)); }
.deck-quick { margin-top: 14px; }
.coin.mat { opacity: .9; }
.dot.steel { background: #b8c4cf; box-shadow: 0 0 8px #b8c4cf66; }
.dot.exotic { background: #7dfff0; box-shadow: 0 0 10px #7dfff088; }
@media (max-width: 1100px) { .coin.mat { display: none; } }
@media (max-width: 520px) { .quick { gap: 5px; padding: 7px; } .q-range input { width: 56px; } .q-seg button { padding: 4px 6px; font-size: calc(12.5px * var(--ts, 1)); } }

/* ---------- 2.6: the chronicle ---------- */
.chronicle { margin: 0 0 18px; }
.chapters { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.chapter { position: relative; display: grid; gap: 3px; align-content: start; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c0) 40%, transparent); background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--c0) 18%, transparent), transparent 70%), #08151c; min-width: 0; }
.chapter .galaxy-art { width: 100%; height: 64px; }
.chapter .eyebrow { color: color-mix(in srgb, var(--c0) 75%, #fff); font-size: calc(11.5px * var(--ts, 1)); letter-spacing: .14em; }
.chapter strong { font: calc(15px * var(--ts, 1)) var(--serif); }
.chapter small { font-size: calc(12px * var(--ts, 1)); color: var(--muted); }
.chapter:not(.seen):not(.locked) small { color: var(--gold); }
.chapter.locked { opacity: .45; }
.chapter.locked .galaxy-art { filter: grayscale(1); }
.chapter-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: calc(13px * var(--ts, 1)); }
.chapter-link .ico { width: 14px; height: 14px; }
.node .foe { color: var(--foe, var(--red)); font-weight: 600; }
.node[style*="--foe"] { box-shadow: inset 3px 0 0 var(--foe); }
@media (max-width: 1100px) { .chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chapter .galaxy-art { height: 48px; } }

/* ---------- 2.6: Meridian Station ---------- */
.crew-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.crew-slot { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 9px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--race) 35%, transparent); background: #0b161d; min-width: 0; }
.crew-slot.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: #e2c6940d; }
.crew-slot .ship-glyph { width: 52px; height: 36px; }
.crew-slot strong { font-size: calc(13px * var(--ts, 1)); line-height: 1.2; }
.crew-slot small { font-size: calc(12px * var(--ts, 1)); color: var(--muted); }
.crew-slot .eyebrow { font-size: calc(11.5px * var(--ts, 1)); letter-spacing: .14em; }
.crew-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crew-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--race); background: #0b161d; }
.crew-card.dim { opacity: .55; }
.crew-card.owned { background: #0e1f22; }
.crew-card .ship-glyph { width: 58px; height: 42px; }
.crew-card strong { display: block; font-size: calc(14px * var(--ts, 1)); }
.crew-card small { display: block; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
.crew-card .eyebrow { color: var(--race); font-size: calc(11.5px * var(--ts, 1)); }
.crew-at { color: var(--gold) !important; }
.crew-act { display: grid; gap: 5px; justify-items: end; }
.crew-act button, .offer button, .dock-ship button, .contract button { white-space: nowrap; font-size: calc(13px * var(--ts, 1)); padding: 6px 10px; }
.crew-line { display: flex !important; align-items: center; gap: 4px; color: var(--race) !important; }
.crew-line .ico { width: 12px; height: 12px; }
.contracts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.contract { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--race) 45%, transparent); background: #0b161d; }
.contract .capital-art { width: 90px; height: 64px; }
.contract strong { display: block; font: calc(17px * var(--ts, 1)) var(--serif); }
.contract small { display: block; color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); margin-bottom: 4px; }
.contract .eyebrow { color: var(--race); }
.dock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dock-race { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--race) 8%, transparent), transparent 60%), #0a151b; }
.dock-race > .eyebrow { display: flex; align-items: center; gap: 6px; color: var(--race); }
.dock-race > .eyebrow .ico { width: 15px; height: 15px; }
.dock-ship { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px dashed #ffffff10; }
.dock-ship .capital-art { width: 70px; height: 50px; }
.dock-ship strong { display: block; font: calc(15px * var(--ts, 1)) var(--serif); }
.dock-ship small { display: block; color: var(--muted); font-size: calc(12px * var(--ts, 1)); }
.dock-ship.owned strong::after { content: ' · owned'; font: calc(12px * var(--ts, 1)) var(--mono); color: var(--mint); }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.offer { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid #c8d0d8; background: #0b161d; }
.offer > .ico { width: 26px; height: 26px; color: var(--mint); }
.offer strong { display: block; font-size: calc(14px * var(--ts, 1)); }
.offer strong em { font-style: normal; color: var(--gold); font: calc(12px * var(--ts, 1)) var(--mono); }
.offer small { display: block; font-size: calc(12.5px * var(--ts, 1)); color: #c6d3cd; }
.offer small.muted { color: var(--muted); }
.offer small em { font-style: normal; color: var(--mint); }
.offer .eyebrow { font-size: calc(11.5px * var(--ts, 1)); }
.offer.sold { opacity: .5; }
.offer.uncommon { border-left-color: #7dffb2; } .offer.rare { border-left-color: #c28bff; } .offer.exotic { border-left-color: #7dfff0; background: linear-gradient(90deg, #0d2a2c, #0b161d 40%); }
.offer.uncommon .mod-glyph { color: #7dffb2; } .offer.rare .mod-glyph { color: #c28bff; } .offer.exotic .mod-glyph { color: #7dfff0; border-color: #7dfff066; }
.offer.supply { border-left-color: var(--gold); }
.mod-card.exotic { border-left-color: #7dfff0; } .mod-card.exotic .mod-glyph { color: #7dfff0; }
.bay-slot.exotic { border-color: #7dfff0; color: #c8fffa; }
.bay-picker .pick.exotic b { color: #7dfff0; }
.th-mod.exotic { border-color: #7dfff088; }
.th-station { position: relative; width: 100%; height: 240px; display: grid; place-items: center; }
.th-station .station-art { width: 100%; max-width: 420px; }
.th-station.has-3d .station-art { display: none; }
.station-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1100px) { .crew-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .crew-grid, .contracts, .dock, .offers { grid-template-columns: 1fr; }
  .crew-card, .offer, .dock-ship { grid-template-columns: 44px minmax(0, 1fr); }
  .crew-card .ship-glyph { width: 44px; height: 32px; }
  .crew-act, .offer > button, .offer > .badge, .dock-ship > button, .dock-ship > .badge { grid-column: 1 / -1; justify-self: stretch; justify-items: stretch; }
  .dock-ship .capital-art { width: 44px; height: 32px; }
  .contract { grid-template-columns: 60px minmax(0, 1fr); } .contract .capital-art { width: 60px; height: 44px; } .contract button { grid-column: 1 / -1; }
  .th-station { height: 170px; }
}
@media (max-width: 520px) { .crew-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 2.6: story cutscenes ---------- */
.cinema { position: fixed; inset: 0; z-index: 100; background: #000; color: #f3f1ea; overflow: hidden; cursor: pointer; }
.cinema canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cinema.flat { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--c0) 30%, #000), #000 70%); }
.cinema.flat canvas { display: none; }
.cin-bars i { position: absolute; left: 0; right: 0; height: 9vh; background: #000; }
.cin-bars i:first-child { top: 0; } .cin-bars i:last-child { bottom: 0; }
.cin-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 88vw); text-align: center; display: grid; gap: 10px; opacity: 0; transition: opacity .9s; pointer-events: none; text-shadow: 0 2px 18px #000; }
.cinema.titling .cin-title { opacity: 1; }
.cin-title .eyebrow { color: var(--c0); font-size: calc(12px * var(--ts, 1)); }
.cin-title h2 { font-size: clamp(30px, 6vw, 64px); }
.cin-title p { color: #d6d9d2; font-size: clamp(13px, 1.6vw, 16px); line-height: 1.6; }
.cin-caption { position: absolute; left: 50%; bottom: calc(9vh + 18px); transform: translateX(-50%); width: min(820px, 90vw); text-align: center; padding: 6px 14px; border-radius: 12px; background: radial-gradient(ellipse at 50% 50%, #000b, #0000 75%); font: clamp(15px, 2vw, 21px)/1.5 var(--serif); text-shadow: 0 2px 10px #000, 0 0 2px #000; min-height: 2em; }
.cinema.titling .cin-caption { opacity: 0; }
.cin-controls { position: absolute; right: 16px; top: calc(9vh + 12px); display: flex; align-items: center; gap: 12px; font: calc(12px * var(--ts, 1)) var(--mono); color: #aab4ae; }
.cin-controls button { color: #f3f1ea; background: #0008; }
.cin-hint { opacity: .7; }
body.watching { overflow: hidden; }
@media (max-width: 640px) { .cin-hint { display: none; } .cin-bars i { height: 6vh; } .cin-controls { top: calc(6vh + 8px); right: 8px; } .cin-caption { bottom: calc(6vh + 10px); } }
/* 2.6: six tabs need the second row a little sooner; long class names never widen a card. */
@media (min-width: 641px) and (max-width: 1200px) { .topbar { flex-wrap: wrap; gap: 10px 16px; } .tabs { order: 3; width: 100%; overflow-x: auto; } }
.capital-list, .capital-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.capital-card { min-width: 0; }
.capital-card :is(small, strong, span) { min-width: 0; white-space: normal; overflow-wrap: break-word; }
.difficulty-grid > button { min-width: 0; } .difficulty-grid small { overflow-wrap: anywhere; }
.difficulty-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 900px) { .difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 2.6: crew skills on the squad bar, the station and the roster. Steady when ready, never pulsing. */
.squad-chip .cs { position: absolute; bottom: 8px; right: 5px; font-style: normal; font-size: calc(11px * var(--ts, 1)); line-height: 1; color: #ffffff30; }
.squad-chip .cs.ready { color: #ffd27a; text-shadow: 0 0 6px #ffd27a88; }
.crew-skill { display: block; color: #ffd9a0 !important; font-size: calc(12px * var(--ts, 1)); }
.crew-slot .crew-skill { font-size: calc(12.5px * var(--ts, 1)); }
.q-act { padding: 4px 10px; border-radius: 999px; font-size: calc(12.5px * var(--ts, 1)); color: var(--gold); border-color: #e2c69455; }

/* ---------- 2.8: mods as illustrated emblems ---------- */
.mod-emblem { display: block; flex: none; filter: drop-shadow(0 3px 6px #0008); }
.mod-emblem.locked { filter: grayscale(1) brightness(.55); }
.equip-inventory .mod-card { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: 9px 11px; border-left-width: 3px; background: linear-gradient(90deg, #ffffff06, transparent 60%), #0b161d; }
.mod-card.exotic { border-left-color: #7dfff0; background: linear-gradient(90deg, #0d2a2c, #0b161d 55%); }
.mod-card .mod-body .eyebrow { font-size: calc(11.5px * var(--ts, 1)); letter-spacing: .14em; color: var(--muted); }
.mod-card.uncommon .mod-body .eyebrow { color: #7dffb2; } .mod-card.rare .mod-body .eyebrow { color: #c28bff; } .mod-card.exotic .mod-body .eyebrow { color: #7dfff0; }
.mod-codex .mod-card, .mod-grid.codex .mod-card { grid-template-columns: 48px minmax(0, 1fr); display: grid; align-items: center; gap: 10px; }
.bay-slot { width: 34px; height: 34px; }
.bay-slot.filled { padding: 0; border-width: 0; background: transparent; }
.bay-slot.filled .mod-emblem { width: 34px; height: 34px; }
.bay-picker .pick { grid-template-columns: 34px 1fr; }
.th-mod { display: inline-flex; align-items: center; gap: 5px; }
.th-mod .mod-emblem { width: 20px; height: 20px; filter: none; }
.offer { grid-template-columns: 52px minmax(0, 1fr) auto; }
.offer.small-offer { grid-template-columns: 40px minmax(0, 1fr) auto; }
.offer.supply { grid-template-columns: 34px minmax(0, 1fr) auto; }
.mod-drop span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .offer { grid-template-columns: 52px minmax(0, 1fr); } .offer.small-offer { grid-template-columns: 40px minmax(0, 1fr); } .equip-inventory .mod-card { grid-template-columns: 48px minmax(0, 1fr); } .equip-inventory .mod-card .mod-actions { grid-column: 1 / -1; } .equip-inventory .mod-card .mod-emblem { width: 48px; height: 48px; } }

.ship-crew { display: block; color: #9fe8d4 !important; font-size: calc(12px * var(--ts, 1)); }

/* ---- 2.10: the jump drive, the station bar and the compact phone HUD ---- */
.side-meters .jump { border-color: #7ec8ff44; color: #9fd8ffaa; }
.side-meters .jump i { background: #7ec8ff; box-shadow: 0 0 10px #7ec8ff; }
.side-meters .jump.ready { color: #e8f6ff; border-color: #9fd8ff; box-shadow: 0 0 16px #7ec8ff55; }
.side-meters .jump.active { color: #fff; border-color: #fff; }
.touch-buttons [data-touch=jump] { left: 50%; bottom: 46px; margin-left: 52px; width: 58px; height: 58px; font-size: calc(11px * var(--ts, 1)); color: #9fd8ff; border-color: #7ec8ff66; }
.touch-buttons [data-touch=jump].ready { border-color: #cfeaff; box-shadow: 0 0 18px #7ec8ff66; }
.boss-bar.ally strong { color: #cfe8ff; text-shadow: 0 0 18px #7ec8ff66, 0 2px 8px #000; }
.boss-bar.ally small { color: #9fd8ff; }
.boss-bar.ally i { border-color: #7ec8ff44; }
.boss-bar.ally b { background: linear-gradient(90deg, #3a7ad9, #9fd8ff); box-shadow: 0 0 12px #7ec8ff88; }
.boss-bar.ally i.sh b { background: #cfeaff; }
.boss-bar.ally.vulnerable b { background: linear-gradient(90deg, #d9483b, #ffb08a); box-shadow: 0 0 12px #ff8f7488; }
.boss-bar.ally.vulnerable small { color: #ffb08a; }
@media (max-height: 520px) { .touch-buttons [data-touch=jump] { bottom: 76px; margin-left: 44px; width: 56px; height: 56px; } }

/* Phones (set by app.js when touch controls are on a small screen): only what matters in a fight. The quest list,
   radio, chain counter, squad cards, view and fullscreen buttons and the mission title go; the objective, the
   minimap, the clock, one alert, the station or boss bar, your bars and the controls stay. */
.hud.compact #battle-kicker, .hud.compact #battle-title, .hud.compact .quest-list, .hud.compact #radio, .hud.compact .hud-chain,
.hud.compact .squad-bar, .hud.compact #view-toggle, .hud.compact [data-fullscreen], .hud.compact .voice-sub, .hud.compact .hud-escorts,
.hud.compact .hud-clock small, .hud.compact [data-touch=focus] { display: none !important; }
.hud.compact .hud-top-left { top: 8px; left: 8px; max-width: calc(100vw - 140px); }
.hud.compact #objective { margin: 0; padding: 5px 9px; font-size: calc(11px * var(--ts, 1)); line-height: 1.35; border-radius: 8px; background: #04101acc; border: 1px solid #8ff5df33; }
.hud.compact .hud-top-right { top: 8px; right: 8px; gap: 5px; }
.hud.compact #minimap { width: 120px; height: 76px; }
.hud.compact .hud-buttons button { padding: 4px 9px; }
.hud.compact .hud-clock { top: 88px; left: auto; right: 48px; transform: none; text-align: right; }
.hud.compact .hud-clock span { font-size: calc(15px * var(--ts, 1)); }
.hud.compact .alerts { width: min(220px, 56vw); }
.hud.compact .alerts > :nth-child(n+2) { display: none; }
.hud.compact .status-row > :nth-child(n+4) { display: none; }
.hud.compact .boss-bar { top: 52px; bottom: auto; left: 8px; transform: none; width: calc(100vw - 144px); gap: 2px; text-align: left; }
.hud.compact .boss-bar > div { justify-content: flex-start; }
.hud.compact .boss-bar strong { font-size: calc(13px * var(--ts, 1)); }
.hud.compact .boss-bar small { display: block; font-size: calc(8.5px * var(--ts, 1)); letter-spacing: .12em; }
.hud.compact .boss-bar i { height: 6px; }
.hud.compact .event-banner { top: 120px; width: 92vw; padding: 4px 12px; }
.hud.compact .event-banner b { font-size: calc(18px * var(--ts, 1)); }
.hud.compact .banner { top: 30%; width: 92vw; }
.hud.compact .banner strong { font-size: 22px; }
.hud.compact .banner small { font-size: calc(10px * var(--ts, 1)); letter-spacing: .08em; }
.hud.compact .t-skill:not(.ready), .hud.compact [data-touch=surge]:not(.ready) { display: none; }
.hud.compact [data-touch=surge] { left: 14px; bottom: 170px; margin-left: 0; width: 74px; height: 40px; border-radius: 20px; }
.hud.compact .t-skill { bottom: 216px; }
/* Portrait phones: the jump sits above the boost, between the sticks. */
@media (orientation: portrait) {
  .hud.compact [data-touch=jump] { left: 50%; bottom: 136px; margin-left: -40px; width: 80px; height: 32px; border-radius: 16px; }
}
@media (max-height: 520px) {
  .hud.compact .hud-top-left { max-width: 40vw; }
  .hud.compact .boss-bar { top: 8px; left: 50%; transform: translateX(-50%); width: min(300px, 32vw); text-align: center; }
  .hud.compact .boss-bar > div { justify-content: center; }
  .hud.compact .hud-clock { top: 88px; }
  .hud.compact [data-touch=surge] { left: 14px; bottom: 146px; }
  .hud.compact .event-banner { top: 64px; }
}

/* ---- 2.10: mod tiers. One colour per tier on the icon tile, the name, the tag and the card's edge. ---- */
.tier-common { --tier: #c3ccd4; --tier-bg: #1b263055; }
.tier-uncommon { --tier: #62e295; --tier-bg: #0f2a1d66; }
.tier-rare { --tier: #5aaaff; --tier-bg: #0e1d3866; }
.tier-epic { --tier: #c084ff; --tier-bg: #22143a77; }
.tier-legendary { --tier: #ffb547; --tier-bg: #30200a88; }
.tier-tag { font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tier); }
.tier-name { color: var(--tier); }
.mod-card[class*="tier-"], .offer[class*="tier-"] { border-left: 3px solid var(--tier); background: linear-gradient(90deg, var(--tier-bg), transparent 55%), #0b161dcc; }
.mod-card.tier-legendary, .offer.tier-legendary { box-shadow: inset 0 0 0 1px #ffb54733; }
.mod-card[class*="tier-"] .mod-body .eyebrow { color: var(--muted); }
.bay-slot[class*="tier-"] { border-color: var(--tier); }
.bay-picker .pick[class*="tier-"] { border-left: 3px solid var(--tier); }
.th-mod[class*="tier-"] { border-color: color-mix(in srgb, var(--tier) 55%, transparent); }
.mod-drop[class*="tier-"] { border-left: 3px solid var(--tier); padding-left: 8px; }
.mod-drop .tier-tag { margin: 0 4px; }
.bonus-line { color: #e2d6b8; }
.bonus-line::before { content: '✦ '; color: var(--tier, #ffd27a); }
/* Phones with a boss or station bar: the bar carries the phase, so the objective line steps aside for it. */
.hud.compact:has(.boss-bar:not(.hidden)) #objective { display: none; }
.hud.compact .boss-bar { top: 8px; }
@media (max-height: 520px) { .hud.compact:has(.boss-bar:not(.hidden)) #objective { display: block; } }
.result-rewards .mod-drop[class*="tier-"] { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.result-rewards .mod-drop[class*="tier-"] > span { display: grid; grid-template-columns: auto; justify-items: center; gap: 2px; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); text-align: center; min-width: 76px; }
.result-rewards .mod-drop strong.tier-name { color: var(--tier); text-align: left; font-family: inherit; }

/* ---- 2.11: currency icons, the wallet, the tuning bay and the refinery ---- */
.cur-ico { flex: none; vertical-align: middle; }
.cur-slot { display: inline-flex; width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.wallet .coin { display: inline-flex; align-items: center; }
.cost-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; padding: 1px 7px 1px 3px; border-radius: 999px; background: #00000033; border: 1px solid #ffffff14; font: 600 calc(13px * var(--ts, 1)) var(--mono); white-space: nowrap; vertical-align: middle; }
.cost-chip b { font-weight: 700; }
.cost-chip.credits b { color: #ffd98a; } .cost-chip.cores b { color: #d9c2ff; } .cost-chip.scrap b { color: #d5dce2; } .cost-chip.exotics b { color: #8ff5ea; }
.cost-chip.reforge b { color: #9ff0ff; } .cost-chip.clamp b { color: #b8d0ff; } .cost-chip.ascend b { color: #ffd08a; } .cost-chip.veil b { color: #d9b8ff; }
.cost-chip.free { padding: 1px 8px; color: var(--muted); }
button .cost-chip { background: #00000026; border-color: #00000022; }
button.primary .cost-chip b { color: inherit; }
.wallet-chip { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 5px 10px 5px 6px; border-radius: 10px; background: #08141cd9; border: 1px solid var(--line); }
.wallet-chip .cur-ico { grid-row: 1 / 3; }
.wallet-chip b { font: 700 calc(14px * var(--ts, 1)) var(--mono); line-height: 1.1; }
.wallet-chip small { font: 600 calc(11.5px * var(--ts, 1)) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cur-stats span { display: grid; justify-items: start; gap: 2px; }
.th-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 2px; font: 700 calc(13px * var(--ts, 1)) var(--mono); }
.th-cats span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: #08141cbb; border: 1px solid var(--line); }
.tune { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tune-card { padding: 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); background: linear-gradient(160deg, var(--tier-bg), #08141cee 60%); }
.tune-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.tune-head h3 { margin: 2px 0 4px; font-size: 22px; }
.tune-lines { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; gap: 6px; }
.tune-lines li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: #0005; border: 1px solid var(--line); font-size: calc(13px * var(--ts, 1)); }
.tune-lines li.main { color: #e8efe9; }
.tune-lines li.bonus { color: #e2d6b8; }
.tune-lines li.held { border-color: #8fb8ff; background: #8fb8ff14; }
.clamp-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: calc(12px * var(--ts, 1)); }
.clamp-btn.on { border-color: #8fb8ff; color: #cfe0ff; }
.tune-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.tune-actions > div { display: grid; gap: 4px; align-content: start; }
.tune-act { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; padding: 9px 8px; font-size: calc(13px * var(--ts, 1)); }
.tune-actions small { font-size: calc(12.5px * var(--ts, 1)); line-height: 1.35; text-align: center; }
.tune-note { margin: 6px 0 2px; padding: 7px 10px; border-radius: 8px; font-size: calc(13px * var(--ts, 1)); background: #62e29514; border: 1px solid #62e29555; color: #c8f5da; }
.tune-note.bad { background: #ff8f7414; border-color: #ff8f7455; color: #ffd2c6; }
.tune-list { display: grid; gap: 5px; max-height: 520px; overflow: auto; padding-right: 4px; }
.tune-pick { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; text-align: left; padding: 6px 9px; border-left: 3px solid var(--tier); background: #08141ccc; }
.tune-pick.on { background: linear-gradient(90deg, var(--tier-bg), #08141ccc); border-color: var(--tier); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 40%, transparent); }
.tune-pick strong { display: block; font-size: calc(13px * var(--ts, 1)); }
.tune-pick small { font-size: calc(12px * var(--ts, 1)); color: var(--muted); }
.veiled-tag { color: #d9b8ff; font-weight: 700; }
.unique-effect { display: block; margin-top: 4px; color: #f2d699; font-size: calc(13px * var(--ts, 1)); line-height: 1.4; }
.cat-grid, .mat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.cat-card, .mat-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: linear-gradient(140deg, color-mix(in srgb, var(--cat) 12%, transparent), #08141cee 55%); border: 1px solid color-mix(in srgb, var(--cat) 35%, transparent); }
.cat-card > button { grid-column: 1 / -1; justify-self: stretch; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.cat-card strong, .mat-card strong { display: block; font-size: calc(14px * var(--ts, 1)); color: var(--cat); }
.cat-count { display: block; font: 700 calc(18px * var(--ts, 1)) var(--mono); color: #f3f6f4; margin: 2px 0; }
.cat-card small, .mat-card small { display: block; font-size: calc(12.5px * var(--ts, 1)); line-height: 1.4; color: #c6d3cd; }
.cat-drop strong { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tier-unique { --tier: #ecc77a; --tier-bg: #26200f88; }
.mod-card.tier-unique, .offer.tier-unique { box-shadow: inset 0 0 0 1px #ecc77a44; }
@media (max-width: 900px) { .tune { grid-template-columns: 1fr; } .tune-list { max-height: 300px; } }
@media (max-width: 640px) { .tune-actions { grid-template-columns: 1fr; } .wallet .coin small { display: none; } }
.sub-title .q-pick { white-space: nowrap; }
@media (max-width: 640px) { .sub-title:has(.q-pick) { flex-wrap: wrap; } .sub-title .q-pick select { max-width: 60vw; } }

/* ---- 2.12: support modules ---- */
.sup-emblem { flex: none; display: block; }
.sup-emblem.locked { filter: grayscale(1); opacity: .55; }
.sup-emblem.idle { opacity: .7; }
.kit li { position: relative; }
.kit-sockets { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 6px; }
.kit li > .kit-sockets { justify-content: flex-start; }
.socket { padding: 0; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 8px; }
.socket.on { background: #ffffff14; box-shadow: 0 0 0 1px var(--gold); }
.socket:disabled { opacity: .8; cursor: default; }
.kit .sup-picker { display: block; padding: 10px; border-radius: 10px; background: #08141cee; border: 1px solid var(--gold); grid-template-columns: none; }
.sup-pick-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sup-pick-head .eyebrow { margin-right: auto; }
.sup-pick-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.sup-pick { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; text-align: left; padding: 7px 9px; }
.sup-pick.on { border-color: var(--gold); background: #e2c69412; }
.sup-pick strong { display: block; font-size: calc(13px * var(--ts, 1)); }
.sup-pick small { display: block; font-size: calc(12px * var(--ts, 1)); line-height: 1.35; color: #c6d3cd; }
.sup-pick:disabled small { color: var(--muted); }
.sup-box { margin-top: 12px; }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.sup-card { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: linear-gradient(130deg, color-mix(in srgb, var(--sup) 10%, transparent), #08141ccc 60%); border: 1px solid color-mix(in srgb, var(--sup) 30%, transparent); }
.sup-card strong { display: block; font-size: calc(13.5px * var(--ts, 1)); color: var(--sup); }
.sup-card small { display: block; font-size: calc(12.5px * var(--ts, 1)); line-height: 1.4; color: #c6d3cd; }
.sup-card small.muted { color: var(--muted); }
.sup-card > button { white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.ab-sups { position: absolute; left: 8px; bottom: 6px; display: flex; gap: 2px; }
.sup-drop strong { text-align: right; }
@media (max-width: 640px) { .sup-card { grid-template-columns: auto 1fr; } .sup-card > button, .sup-card > .badge { grid-column: 1 / -1; justify-self: start; } }
.sup-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.sup-card { grid-template-columns: auto 1fr; }
.sup-card > button, .sup-card > .badge { grid-column: 2; justify-self: start; }
.ab-sups { left: auto; right: 7px; bottom: 6px; }

/* ---- 2.13: boss loot, the archive and the relic forge ---- */
.coin.relic b { color: #ff9aa8; }
.loot-tag { color: #ffd27a; font-weight: 700; letter-spacing: .04em; }
.loot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.loot-chip { --c: #ffd27a; display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 5px 10px 5px 5px; border-radius: 10px; background: #08141ccc; border: 1px solid var(--line); }
.loot-chip > svg { grid-row: 1 / 3; }
.loot-chip b { font-size: calc(13px * var(--ts, 1)); font-weight: 650; color: #e8efe9; }
.loot-chip em { font: 700 calc(12px * var(--ts, 1)) var(--mono); font-style: normal; color: #ffd27a; }
.loot-chip.relic { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), #08141ccc); }
.loot-chip.relic > svg { width: 54px; height: 26px; }
.loot-chip.relic b { color: var(--c); }
.loot-chips.small .loot-chip { padding: 3px 8px 3px 3px; }
.loot-chips.small .loot-chip b { font-size: calc(12px * var(--ts, 1)); }
.loot-fact .link { margin-top: 6px; }
#archive-dialog { width: min(1100px, 96vw); max-height: 90vh; padding: 0; }
.archive-body { position: relative; padding: 22px 24px 26px; overflow: auto; max-height: 90vh; }
.dialog-close { position: absolute; top: 12px; right: 12px; padding: 4px 10px; }
.archive-lead { font-size: calc(13.5px * var(--ts, 1)); line-height: 1.6; color: #c6d3cd; max-width: 900px; }
.archive-lead .cost-chip { font-size: calc(12px * var(--ts, 1)); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 12px; margin-top: 14px; }
.archive-card { padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--race) 40%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--race) 10%, transparent), #08141cee 50%); display: grid; gap: 10px; }
.archive-card.focus { box-shadow: 0 0 0 2px var(--gold); }
.archive-card.lesser { opacity: .92; border-style: dashed; }
.archive-card h3 { margin: 2px 0 4px; font-size: 20px; }
.archive-card p { margin: 2px 0; font-size: calc(13px * var(--ts, 1)); }
.archive-card .where { font-size: calc(13px * var(--ts, 1)); }
.forge-stars { color: #ffd27a; letter-spacing: 1px; font-size: calc(13px * var(--ts, 1)); }
.src { color: var(--muted); }
.src-link { font-size: inherit; padding: 0; }
.forge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
.forge-card { --c: #ffd27a; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 9%, transparent), #08141cee 55%); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.forge-card.tier-unique { --c: #ecc77a; }
.forge-card > button, .forge-card > .badge { grid-column: 2; justify-self: start; display: inline-flex; gap: 5px; align-items: center; }
.forge-card strong { display: block; font-size: calc(15px * var(--ts, 1)); color: var(--c); }
.forge-card small { display: block; font-size: calc(13px * var(--ts, 1)); line-height: 1.45; color: #c6d3cd; margin-top: 2px; }
.forge-card.relic .forge-art { width: 110px; }
.forge-card.relic .forge-art svg { width: 110px; height: auto; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 40%, transparent)); }
.forge-card.flying { box-shadow: 0 0 0 2px var(--c), 0 0 26px color-mix(in srgb, var(--c) 30%, transparent); }
.relic-drop.ship { border-color: var(--c) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), #0005) !important; }
.relic-drop.ship span { display: inline-flex; align-items: center; gap: 8px; color: var(--c); font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .14em; }
.relic-drop.ship span svg { width: 60px; height: 26px; }
@media (max-width: 640px) { .forge-card.relic .forge-art, .forge-card.relic .forge-art svg { width: 70px; } .archive-body { padding: 18px 14px; } }

/* ---- 2.13: commanders and the navigation ---- */
.cmdr-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid #e2c69455; background: #e2c6940f; color: var(--text); font: 600 calc(13px * var(--ts, 1)) var(--mono); }
.cmdr-chip:hover { border-color: var(--gold); background: #e2c6941c; }
.cmdr-chip .rank-chip { border: 0; background: var(--gold); color: #1b1408; font-weight: 800; }
.cmdr-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-list { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px; }
.roster-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #08141ccc; border: 1px solid var(--line); }
.roster-list li.on { border-color: var(--gold); background: linear-gradient(90deg, #e2c69414, #08141ccc); }
.roster-list strong { display: block; font-size: calc(14px * var(--ts, 1)); }
.roster-list small { display: block; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
.cmdr-badge { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #a1e1c81a; border: 1px solid #a1e1c855; font: 700 calc(14px * var(--ts, 1)) var(--mono); color: var(--mint); }
.roster-list li.on .cmdr-badge { background: var(--gold); color: #1b1408; border-color: var(--gold); }
.cmdr-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
button.small { padding: 5px 10px; font-size: calc(13px * var(--ts, 1)); }

/* The main menu: a raised segmented bar; the open tab is a gold pill; badges flag what needs you. */
.tabs { gap: 3px; padding: 4px; border-radius: 16px; background: linear-gradient(180deg, #0e1e27, #08131a); border: 1px solid #a1e1c826; box-shadow: inset 0 1px 0 #ffffff0a, 0 8px 26px #0007; }
.tabs button { position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: 12px; font-size: calc(14px * var(--ts, 1)); font-weight: 600; color: #a9b8b4; letter-spacing: .01em; transition: background .2s, color .2s, box-shadow .2s; }
.tabs button:hover { color: #eef5f1; background: #ffffff0f; }
.tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tabs button[aria-selected=true] { color: #1b1408; background: linear-gradient(180deg, #f6dea4, #d4a95e); box-shadow: 0 4px 18px #e2c69455, inset 0 1px 0 #ffffff66; }
.tabs button[aria-selected=true] .tab-ico { color: #1b1408; }
.tabs .tab-ico, .tabs .tab-ico .ico { width: 20px; height: 20px; }
.tab-badge { position: absolute; top: 1px; right: 3px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #ff7a5a; color: #fff; font: 800 calc(12px * var(--ts, 1))/17px var(--mono); text-align: center; box-shadow: 0 0 0 2px #08131a; }
.tab-badge:empty { display: none; }
.tabs button[aria-selected=true] .tab-badge { box-shadow: 0 0 0 2px #d4a95e; }
@media (min-width: 641px) and (max-width: 1200px) { .tabs { justify-content: center; } }
@media (max-width: 640px) {
  .tabs { border-radius: 0; padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); gap: 0; background: #071017f5; border: 0; border-top: 1px solid #a1e1c833; box-shadow: 0 -8px 24px #0008; }
  .tabs button { flex: 1; flex-direction: column; gap: 3px; padding: 6px 2px; border-radius: 12px; font-size: calc(11.5px * var(--ts, 1)); background: transparent; box-shadow: none; }
  .tabs button[aria-selected=true] { color: var(--gold); background: transparent; box-shadow: none; }
  .tabs button[aria-selected=true] .tab-ico { color: #1b1408; background: linear-gradient(180deg, #f6dea4, #d4a95e); border-radius: 12px; box-shadow: 0 3px 14px #e2c69466; }
  .tabs .tab-ico { width: 44px; height: 28px; display: grid; place-items: center; }
  .tabs .tab-ico .ico { width: 21px; height: 21px; }
  .tab-badge { top: 0; right: calc(50% - 26px); }
  .cmdr-name { display: none; }
}
.brand { flex: none; white-space: nowrap; }
.archive-forge { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 4px 0 2px; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.archive-forge > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: #08141ccc; border: 1px solid var(--line); }
@media (max-width: 640px) { .wallet .fs-btn { display: none; } .wallet { gap: 7px; } .wallet .coin b { font-size: calc(12.5px * var(--ts, 1)); } }
@media (max-width: 1360px) and (min-width: 1201px) { .brand small { display: none; } .tabs button { padding: 10px 13px; } }
/* Up to 1600 px the menu gets a row of its own under the brand and the wallet, centred and full width. */
@media (min-width: 641px) and (max-width: 1600px) {
  .topbar { flex-wrap: wrap; gap: 10px 16px; }
  .wallet { margin-left: auto; }
  .tabs { order: 3; width: 100%; margin-right: 0; justify-content: center; overflow-x: auto; }
  .brand small { display: block; }
}
@media (min-width: 641px) { .tab-badge { top: -7px; right: -5px; } }

/* ---- 2.14: the bounty board and the win streak ---- */
.bounty-board { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: #08141ccc; border: 1px solid #e2c69433; }
.bb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 6px; }
.bounty-board ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bounty { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 10px; align-items: center; }
.bounty strong { display: block; font-size: calc(13px * var(--ts, 1)); }
.bounty small { font: 600 calc(12.5px * var(--ts, 1)) var(--mono); color: var(--muted); }
.bounty-bar { display: block; height: 4px; margin: 4px 0 2px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.bounty-bar b { display: block; height: 100%; background: linear-gradient(90deg, #d4a95e, #f6dea4); }
.bounty-reward { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.bounty-reward .cost-chip { font-size: calc(12px * var(--ts, 1)); }
.streak-chip { font: 700 calc(12px * var(--ts, 1)) var(--mono); color: #ffb08a; padding: 3px 9px; border-radius: 999px; background: #ff7a4a14; border: 1px solid #ff7a4a44; }
.streak-chip.off { color: var(--muted); background: transparent; border-color: var(--line); }
.bounty-row { border-color: #e2c69466 !important; background: #e2c69410 !important; }
.bounty-row span { color: var(--gold); font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .08em; }
.streak-row span { color: #ffb08a; }
.relic-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.loot-chip.relic.owned { opacity: .75; }
.loot-chip em small { font-size: calc(12px * var(--ts, 1)); color: var(--muted); }
@media (max-width: 640px) { .bounty { grid-template-columns: 1fr; } .bounty-reward { justify-content: flex-start; } }

/* ---- 2.15: Meridian Station, tidied: a deck bar of big grouped tiles, one header per deck ---- */
.station-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px 8px; margin: 0 0 14px; }
.deck-group { grid-column: span var(--n, 1); min-width: 0; }
.deck-group-label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 2px; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .13em; text-transform: uppercase; color: #9fb4ad; }
.deck-group-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #a1e1c833, transparent); }
.deck-row { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 8px; }
.deck-tile { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px 8px 9px; text-align: left; border-radius: 14px; border: 1px solid #a1e1c829; background: linear-gradient(180deg, #102330, #09161d); box-shadow: inset 0 1px 0 #ffffff0d, 0 6px 18px #0006; color: #c9d6d1; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.deck-tile:hover { border-color: #a1e1c877; background: linear-gradient(180deg, #14303d, #0b1c24); transform: translateY(-1px); }
.deck-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.deck-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #a1e1c81a; box-shadow: inset 0 0 0 1px #a1e1c833; color: var(--mint); }
.deck-ico .ico { width: 21px; height: 21px; }
.deck-text { display: grid; gap: 2px; min-width: 0; }
.deck-text strong { font-size: calc(14.5px * var(--ts, 1)); font-weight: 700; color: #eef5f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-text small { font: 600 calc(12.5px * var(--ts, 1)) var(--mono); color: #8fa59e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-tile.active { border-color: #f6dea4; background: linear-gradient(180deg, #f6dea4, #d4a95e); box-shadow: 0 6px 22px #e2c69455, inset 0 1px 0 #ffffff77; transform: none; }
.deck-tile.active .deck-text strong { color: #1b1408; }
.deck-tile.active .deck-text small { color: #5a4520; }
.deck-tile.active .deck-ico { background: #1b14081f; box-shadow: inset 0 0 0 1px #1b140833; color: #1b1408; }
.deck-tile.active::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 11px; height: 11px; background: #d4a95e; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0; }
.deck-badge { position: absolute; top: -7px; right: -5px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; font: 800 calc(12px * var(--ts, 1)) var(--mono); color: #062018; background: var(--mint); box-shadow: 0 0 0 2px #071017; }
.deck-badge.relic { color: #fff; background: #d8435a; }
.deck-tile.active .deck-badge { box-shadow: 0 0 0 2px #d4a95e; }
/* The open deck's header: its icon, name and purpose, then only the currencies it spends. */
.station-head { margin: 0 0 12px; }
.deck-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid #e2c69438; background: radial-gradient(ellipse at 0% 0%, #e2c6941c, transparent 55%), linear-gradient(180deg, #0e1d26, #08131a); }
.deck-ico.big { width: 58px; height: 58px; border-radius: 16px; color: #1b1408; background: linear-gradient(180deg, #f6dea4, #d4a95e); box-shadow: 0 6px 20px #e2c69444, inset 0 1px 0 #ffffff77; }
.deck-ico.big .ico { width: 30px; height: 30px; }
.deck-title { min-width: 0; }
.deck-title .eyebrow { color: var(--gold); }
.deck-title h2 { margin: 2px 0 3px; font: 26px/1.15 var(--serif); }
.deck-title p { margin: 0; font-size: calc(14px * var(--ts, 1)); line-height: 1.45; color: #b6c5bf; }
.deck-wallet { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 640px; }
/* The short bar under the header once the big one has scrolled away: calm fade, no motion with reduced motion. */
.deck-mini { position: fixed; z-index: 19; top: calc(var(--topbar-h, 0px) + 6px); left: 50%; transform: translate(-50%, -6px); display: flex; gap: 3px; width: max-content; max-width: calc(100% - 28px); padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 14px; background: linear-gradient(180deg, #0e1e27f5, #08131af5); border: 1px solid #a1e1c833; box-shadow: 0 10px 30px #000a; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
.deck-mini.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.deck-mini::-webkit-scrollbar { display: none; }
.deck-mini button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 7px 11px; border-radius: 10px; font-size: calc(13px * var(--ts, 1)); font-weight: 600; color: #a9b8b4; background: transparent; white-space: nowrap; }
.deck-mini button .ico { width: 16px; height: 16px; color: var(--mint); }
.deck-mini button:hover { color: var(--text); background: #ffffff0f; }
.deck-mini button.active { color: #1b1408; background: linear-gradient(180deg, #f6dea4, #d4a95e); }
.deck-mini button.active .ico { color: #1b1408; }
@media (prefers-reduced-motion: reduce) { .deck-mini { transition: none; } }
@media (max-width: 1100px) { .deck-mini button:not(.active) span { display: none; } }
.deck-wallet.compact .wallet-chip { padding: 5px 9px 5px 6px; }
.deck-wallet.compact .wallet-chip small { display: none; }
.deck-how { margin-top: 6px; border-radius: 12px; border: 1px solid var(--line); background: #08141c99; }
.deck-how summary { display: flex; align-items: center; gap: 7px; padding: 8px 12px; cursor: pointer; list-style: none; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #a9bdb6; }
.deck-how summary::-webkit-details-marker { display: none; }
.deck-how summary::after { content: '▾'; margin-left: auto; transition: transform .2s; }
.deck-how[open] summary::after { transform: rotate(180deg); }
.deck-how summary:hover { color: var(--text); }
.deck-how summary .ico { width: 14px; height: 14px; color: var(--gold); }
.deck-how ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; margin: 0; padding: 2px 14px 12px 30px; font-size: calc(13px * var(--ts, 1)); line-height: 1.45; color: #c3d0cb; }
.deck-how li::marker { color: var(--gold); }
/* Long lists get a small filter, and the forge a row of jump chips. */
.seg-filter { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 12px; background: #08141c; border: 1px solid var(--line); }
.seg-filter button { border: 0; padding: 6px 12px; border-radius: 9px; font-size: calc(13px * var(--ts, 1)); font-weight: 600; color: #a9b8b4; background: transparent; }
.seg-filter button:hover { color: var(--text); background: #ffffff0f; }
.seg-filter button[aria-pressed=true] { color: #1b1408; background: linear-gradient(180deg, #f6dea4, #d4a95e); }
.seg-filter button b { font: 700 calc(12.5px * var(--ts, 1)) var(--mono); opacity: .75; margin-left: 3px; }
.deck-jumps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.deck-jumps button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: calc(13px * var(--ts, 1)); color: #d6e1dc; }
.deck-jumps button b { font: 700 calc(12px * var(--ts, 1)) var(--mono); color: var(--gold); }
#station-body .sub-title[id] { scroll-margin-top: calc(var(--topbar-h, 0px) + var(--decknav-h, 0px) + 12px); }
#station-body > .sub-title:first-child { margin-top: 0; }
@media (max-width: 1100px) { .deck-how ul { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .deck-head { grid-template-columns: auto minmax(0, 1fr); }
  .deck-wallet { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}
/* Phones: one sliding row of compact tiles that stays under the header; the header shrinks. */
@media (max-width: 640px) {
  .deck-mini { display: none; }
  .station-nav { --gut: clamp(14px, 4vw, 48px); position: sticky; top: var(--topbar-h, 0px); z-index: 12; display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 calc(-1 * var(--gut)) 10px; padding: 8px var(--gut) 10px; background: linear-gradient(180deg, #071017f5 86%, #07101700); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .station-nav::-webkit-scrollbar { display: none; }
  .deck-group, .deck-row { display: contents; }
  .deck-group-label { display: none; }
  .deck-tile { flex: none; scroll-snap-align: center; grid-template-columns: 28px auto; gap: 7px; min-height: 0; padding: 6px 11px 6px 6px; border-radius: 12px; }
  .deck-ico { width: 28px; height: 28px; border-radius: 8px; }
  .deck-ico .ico { width: 17px; height: 17px; }
  .deck-text strong { font-size: calc(13px * var(--ts, 1)); }
  .deck-text small { font-size: calc(12px * var(--ts, 1)); }
  .deck-tile.active::after { display: none; }
  .deck-badge { top: -5px; right: -3px; min-width: 16px; height: 16px; font-size: calc(12px * var(--ts, 1)); }
  .deck-head { gap: 10px 12px; padding: 11px 12px; }
  .deck-ico.big { width: 44px; height: 44px; border-radius: 12px; }
  .deck-ico.big .ico { width: 24px; height: 24px; }
  .deck-title h2 { font-size: 21px; }
  .deck-title p { font-size: calc(13px * var(--ts, 1)); }
  .deck-wallet .wallet-chip { padding: 4px 8px 4px 5px; }
  .deck-wallet .wallet-chip small { display: none; }
  .deck-how ul { padding: 0 12px 10px 28px; font-size: calc(13px * var(--ts, 1)); }
  .seg-filter { width: 100%; }
  .seg-filter button { flex: 1; padding: 6px 6px; }
}
/* The header is nearly opaque so titles scrolling under it do not show through (no backdrop filter: the phone menu bar inside it is fixed). */
.topbar { background: #071017f7; }

/* ---- 2.16: warships in 3D, with their skills and special features ---- */
.ship-shot { display: block; width: 100%; height: 100%; object-fit: contain; }
span.ship-shot { display: grid; place-items: center; }
span.ship-shot .capital-art { width: 78%; height: 78%; }
img.ship-shot.fresh { animation: shot-in .35s ease-out; }
@keyframes shot-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { img.ship-shot.fresh { animation: none; } }
.capital-card .ship-shot { grid-row: 1 / 4; width: 86px; height: 52px; align-self: center; }
.capital-card.locked .ship-shot { filter: grayscale(.85) brightness(.65); }
.loot-chip.relic > .ship-shot { grid-row: 1 / 3; width: 60px; height: 30px; }
.relic-drop.ship span .ship-shot { width: 72px; height: 36px; }
.inspect-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: calc(13px * var(--ts, 1)); }
/* The cards: picture on top (click for the inspector), then race and class, skills as chips, gun and passive, bars. */
.ship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-bottom: 8px; }
.ship-grid > p { grid-column: 1 / -1; }
.ship-card { --race: var(--mint); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-width: 0; border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--race) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--race) 7%, #0b161d), #08131a); box-shadow: 0 8px 24px #0006; }
.ship-card.mine { border-color: #e2c694aa; box-shadow: 0 0 0 1px #e2c69466 inset, 0 8px 24px #0006; }
.ship-card.relic { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.ship-card.relic.flying { box-shadow: 0 0 0 2px var(--c), 0 0 26px color-mix(in srgb, var(--c) 30%, transparent); }
.ship-pic { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; padding: 0; border: 0; border-radius: 0; cursor: zoom-in; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--race) 22%, transparent), transparent 62%), radial-gradient(ellipse at 50% 120%, #ffffff10, transparent 60%), #050c11; }
.ship-pic::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--race) 55%, transparent), transparent); }
.ship-pic .pic-hint { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .08em; color: #d6e1dc; background: #050c11cc; border: 1px solid #ffffff22; opacity: .8; transition: opacity .2s, border-color .2s; }
.ship-pic:hover .pic-hint, .ship-pic:focus-visible .pic-hint { opacity: 1; border-color: var(--gold); color: var(--gold); }
.ship-pic:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ship-pic .pic-flag { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .08em; color: #1b1408; background: var(--c, var(--gold)); }
.ship-card.locked .ship-pic img { filter: saturate(.7); }
.ship-info { display: grid; align-content: start; gap: 3px; padding: 10px 12px 4px; min-width: 0; }
.ship-info .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; white-space: normal; color: var(--race); font-size: calc(12px * var(--ts, 1)); line-height: 1.5; }
.ship-info .eyebrow .ico { width: 13px; height: 13px; }
.ship-info strong { font: calc(18px * var(--ts, 1))/1.2 var(--serif); }
.ship-info > small { font-size: calc(13px * var(--ts, 1)); line-height: 1.4; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 2px; }
.skill-chip { --k: var(--mint); display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px 3px 5px; border-radius: 8px; font-size: calc(12.5px * var(--ts, 1)); color: #e3ece8; background: color-mix(in srgb, var(--k) 12%, #08141c); border: 1px solid color-mix(in srgb, var(--k) 40%, transparent); cursor: help; }
.skill-chip .ico { flex: none; width: 14px; height: 14px; color: var(--k); }
.skill-chip b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-chip.power { --k: #ffcf6b; } .skill-chip.sig { --k: #8fc9ff; } .skill-chip.race { --k: #a1e1c8; } .skill-chip.trait { --k: #c9a2ff; } .skill-chip.crew { --k: #ffb08a; } .skill-chip.relic { --k: var(--c, #ffd27a); }
.ship-feature { color: #b6c5bf; }
.ship-feature b { color: #e6ebe3; font-weight: 600; }
.ship-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #c6d3cd; }
.mini-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 6px 0 2px; }
.mini-stats span { display: grid; gap: 3px; }
.mini-stats em, .stat-bars em { font: 700 calc(11.5px * var(--ts, 1)) var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #8fa59e; }
.mini-stats i, .stat-bars i { display: block; height: 4px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.mini-stats b, .stat-bars b { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--race, var(--mint)) 70%, #fff), var(--race, var(--mint))); }
.ship-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px 12px; }
.ship-act > button { display: inline-flex; align-items: center; gap: 5px; }
/* The inspector: the turntable beside the full list of skills and features. */
#ship-dialog { width: min(1120px, 96vw); max-height: 92vh; padding: 0; overflow: hidden; }
.ship-body { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-height: 92vh; padding: 0; }
.ship-body .dialog-close { position: absolute; z-index: 2; top: 10px; right: 10px; }
.ship-view { position: relative; min-height: 420px; background: radial-gradient(ellipse at 50% 55%, #1b3a4366, transparent 65%), radial-gradient(ellipse at 50% 120%, #ffffff12, transparent 55%), #040a0e; border-right: 1px solid var(--line); }
#ship-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#ship-canvas:active { cursor: grabbing; }
#ship-canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.ship-flat { display: none; }
.ship-view.flat #ship-canvas { display: none; }
.ship-view.flat .ship-flat { position: absolute; inset: 0; display: grid; place-items: center; }
.ship-view.flat .ship-flat svg { width: 80%; height: auto; transform: rotate(-12deg); }
.ship-view.flat .drag-hint { display: none; }
.drag-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #a9bdb6; background: #050c11cc; border: 1px solid #ffffff1c; pointer-events: none; white-space: nowrap; }
.ship-detail { display: flex; flex-direction: column; min-height: 0; max-height: 92vh; overflow: hidden; }
.ship-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 22px 14px; }
.ship-detail h2 { margin: 4px 0 2px; font: 30px/1.1 var(--serif); }
.ship-detail .ship-role { margin: 0 0 12px; color: #b6c5bf; font-size: calc(14px * var(--ts, 1)); line-height: 1.45; }
.ship-detail h3 { margin: 16px 0 8px; font: 700 calc(12.5px * var(--ts, 1)) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.stat-bars { display: grid; gap: 7px; }
.stat-bars span { display: grid; grid-template-columns: 70px minmax(0, 1fr) 56px; align-items: center; gap: 10px; }
.stat-bars i { height: 7px; border-radius: 4px; }
.stat-bars small { font: 700 calc(13px * var(--ts, 1)) var(--mono); text-align: right; color: #e6ebe3; }
.skill-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.skill-card { --k: var(--mint); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 11px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--k) 11%, transparent), #08141c 70%); border: 1px solid color-mix(in srgb, var(--k) 30%, transparent); }
.skill-card .sk-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 40%, transparent); }
.skill-card .sk-ico .ico { width: 19px; height: 19px; }
.skill-card .sk-tag { font: 700 calc(11.5px * var(--ts, 1)) var(--mono); letter-spacing: .14em; color: var(--k); }
.skill-card strong { display: block; font-size: calc(15px * var(--ts, 1)); margin: 1px 0 2px; }
.skill-card p { margin: 0; font-size: calc(13px * var(--ts, 1)); line-height: 1.45; color: #c6d3cd; }
.skill-card small { display: inline-block; margin-top: 4px; font: 700 calc(12.5px * var(--ts, 1)) var(--mono); color: #9fb4ad; }
.skill-card.power { --k: #ffcf6b; } .skill-card.sig { --k: #8fc9ff; } .skill-card.race { --k: #a1e1c8; } .skill-card.trait { --k: #c9a2ff; } .skill-card.crew { --k: #ffb08a; } .skill-card.fleet { --k: #7dffb2; } .skill-card.relic { --k: #ffd27a; }
.skill-cards.compact .skill-card { padding: 7px 10px; }
.skill-cards.compact .skill-card p { font-size: calc(13px * var(--ts, 1)); }
.feature-list { margin: 0; display: grid; gap: 6px; }
.feature-list div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.feature-list dt { font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9fb4ad; padding-top: 2px; }
.feature-list dd { margin: 0; font-size: calc(13px * var(--ts, 1)); line-height: 1.45; color: #dbe5e0; }
.ship-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px 16px; background: #0b161c; border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .ship-body { grid-template-columns: 1fr; grid-template-rows: 280px minmax(0, 1fr); height: min(92vh, 980px); }
  .ship-view { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .ship-detail { max-height: none; }
}
@media (max-width: 640px) {
  #ship-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .ship-body { max-height: 100dvh; height: 100dvh; grid-template-rows: 230px minmax(0, 1fr); }
  .ship-scroll { padding: 16px 14px 12px; }
  .ship-detail h2 { font-size: 24px; }
  .ship-actions { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .feature-list div { grid-template-columns: 1fr; gap: 2px; }
  .stat-bars span { grid-template-columns: 62px minmax(0, 1fr) 48px; }
  .ship-grid { grid-template-columns: 1fr; }
  .ship-pic { aspect-ratio: 5 / 2; }
  .mini-stats em { font-size: calc(10.5px * var(--ts, 1)); letter-spacing: .06em; }
}

/* ---- 2.19: the phone battle controls, laid out so nothing overlaps ----
   Bottom row: move stick, BOOST (JUMP above it), aim stick. Above the sticks: CMD and SURGE (when ready) on the
   left, the four abilities (icons, seconds while recharging) on the right. Your bars sit above that row. The
   formation skill and FOCUS live in the command panel and on the aim stick, so their buttons go. */
.touch-buttons [data-touch="0"], .touch-buttons [data-touch="1"], .touch-buttons [data-touch="2"], .touch-buttons [data-touch="3"] { display: grid; place-items: center; overflow: hidden; }
.touch-buttons [data-touch] > .ico { width: 20px; height: 20px; }
.touch-buttons .t-cd { position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(14px * var(--ts, 1)) var(--mono); color: #fff; background: conic-gradient(#020a10cc calc(var(--cd, 0) * 360deg), transparent 0); border-radius: inherit; pointer-events: none; }
.touch-buttons .t-cd:empty { display: none; }
.hud.compact .touch-buttons [data-touch=formskill], .hud.compact .touch-buttons [data-touch=focus] { display: none !important; }
.hud.compact .stick { width: 120px; height: 120px; bottom: 12px; }
.hud.compact .stick.left { left: 10px; } .hud.compact .stick.right { right: 10px; }
.hud.compact .stick i { width: 50px; height: 50px; margin: -25px; }
.hud.compact .touch-buttons [data-touch=boost] { left: 50%; bottom: 30px; width: 64px; height: 64px; margin-left: -32px; font-size: calc(11px * var(--ts, 1)); }
.hud.compact .touch-buttons [data-touch=jump] { left: 50%; bottom: 102px; margin-left: -35px; width: 70px; height: 28px; border-radius: 14px; font-size: calc(10.5px * var(--ts, 1)); }
.hud.compact .touch-buttons [data-touch="0"], .hud.compact .touch-buttons [data-touch="1"], .hud.compact .touch-buttons [data-touch="2"], .hud.compact .touch-buttons [data-touch="3"] { bottom: 142px; width: 40px; height: 40px; }
.hud.compact .touch-buttons [data-touch="0"] { right: 142px; } .hud.compact .touch-buttons [data-touch="1"] { right: 98px; }
.hud.compact .touch-buttons [data-touch="2"] { right: 54px; } .hud.compact .touch-buttons [data-touch="3"] { right: 10px; }
.hud.compact .touch-buttons .t-cmd { left: 10px; bottom: 145px; width: 52px !important; height: 34px !important; border-radius: 17px !important; font-size: calc(10.5px * var(--ts, 1)) !important; }
.hud.compact .touch-buttons [data-touch=surge] { left: 68px; bottom: 145px; margin-left: 0; width: 62px; height: 34px; border-radius: 17px; font-size: calc(10.5px * var(--ts, 1)); }
.hud.compact:has(.touch:not(.hidden)) .hud-bottom { left: 50%; bottom: 190px; transform: translateX(-50%); width: min(calc(100vw - 20px), 420px); grid-template-columns: 1fr; gap: 3px; }
.hud.compact .vitals { gap: 3px; }
.hud.compact .bar.hull { height: 13px; } .hud.compact .bar.shield, .hud.compact .bar.energy { height: 5px; }
.hud.compact .bar.shield span, .hud.compact .bar.energy span { display: none; }
.hud.compact .bar span { font-size: calc(9.5px * var(--ts, 1)); }
.hud.compact:has(.touch:not(.hidden)) .tutorial { bottom: 236px; top: auto; }
.hud.compact:has(.touch:not(.hidden)) .command-panel { top: auto; bottom: 186px; left: 50%; transform: translateX(-50%); width: min(calc(100vw - 16px), 460px); max-height: calc(100vh - 260px); overflow-y: auto; }
/* Landscape phones: the abilities and CMD ride above the sticks; BOOST, JUMP and SURGE sit in a row between them. */
@media (orientation: landscape) {
  .hud.compact .stick { width: 112px; height: 112px; bottom: 10px; }
  .hud.compact .touch-buttons [data-touch=boost] { bottom: 18px; width: 58px; height: 58px; margin-left: -29px; }
  .hud.compact .touch-buttons [data-touch=jump] { bottom: 30px; margin-left: 40px; width: 58px; }
  .hud.compact .touch-buttons [data-touch=surge] { left: 50%; bottom: 30px; margin-left: -98px; width: 58px; height: 34px; }
  .hud.compact .touch-buttons [data-touch="0"], .hud.compact .touch-buttons [data-touch="1"], .hud.compact .touch-buttons [data-touch="2"], .hud.compact .touch-buttons [data-touch="3"] { bottom: 132px; }
  .hud.compact .touch-buttons .t-cmd { bottom: 135px; }
  .hud.compact:has(.touch:not(.hidden)) .hud-bottom { bottom: 88px; width: min(40vw, 320px); }
  .hud.compact:has(.touch:not(.hidden)) .tutorial { bottom: 132px; }
  .hud.compact:has(.touch:not(.hidden)) .command-panel { bottom: auto; top: 50%; transform: translate(-50%, -50%); max-height: calc(100vh - 24px); }
}

/* ---- 2.20: picking a target for Attack, Defend or Hold: the command panel steps aside, this bar stays ---- */
.pick-bar { position: absolute; z-index: 8; top: 112px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(92vw, 640px); padding: 8px 10px 8px 14px; border-radius: 14px; background: #06141df2; border: 1px solid #e2c69488; box-shadow: 0 10px 30px #0009; pointer-events: auto; font-size: calc(13px * var(--ts, 1)); color: #dbe5e0; }
.pick-bar b { color: var(--gold); font: 700 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .1em; margin-right: 4px; }
.pick-bar span { flex: 1; min-width: 0; }
.pick-bar button { flex: none; }
.hud.compact .pick-bar { top: 92px; width: calc(100vw - 16px); font-size: calc(12px * var(--ts, 1)); flex-wrap: wrap; }
.skill-chip.role { --k: #ffd27a; } .skill-card.role { --k: #ffd27a; }

/* ---- 2.21: the trailers ---- */
.trailer-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid #e2c69466; color: var(--gold); font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.trailer-link:hover, .trailer-link:focus-visible { background: #e2c69418; border-color: var(--gold); }

/* 2.22: the jump map: a large map of the field to pick where to drop out of hyperspace (slow motion meanwhile). */
.jump-map { position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 760px); max-height: 92vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-radius: 16px; background: #04101af2; border: 1px solid #9fd8ff66; box-shadow: 0 18px 60px #000c; pointer-events: auto; }
.jump-map.hidden { display: none; }
.jm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.jm-head strong { font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .13em; color: #9fd8ff; }
.jm-head span { font-size: calc(13px * var(--ts, 1)); color: #dbe5e0; }
.jm-frame { position: relative; display: grid; place-items: center; min-height: 0; width: 100%; height: auto; aspect-ratio: var(--field-ratio, 1.58); max-height: min(64vh, 470px); }
.jm-frame canvas { display: block; border-radius: 10px; touch-action: none; cursor: crosshair; }
.jm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jm-acts .primary { min-width: 120px; min-height: 44px; font-size: calc(15px * var(--ts, 1)); }
.jm-acts .ghost { min-height: 44px; }
.jm-acts .primary:disabled { opacity: .45; }
.jm-legend { margin-left: auto; display: flex; align-items: center; gap: 5px; color: var(--muted); font: calc(11px * var(--ts, 1)) var(--mono); }
.jm-legend .lg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }
.jm-legend .you { border: 2px solid #f0d49b; } .jm-legend .foe { background: #ff8a6a; } .jm-legend .ring { border: 1.5px dashed #9fd8ff; }
body.jump-picking .hud::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px #9fd8ff44, inset 0 0 120px #7ec8ff1f; }
.hud.compact .jump-map { width: calc(100vw - 12px); padding: 8px; gap: 6px; }
.hud.compact .jm-frame { max-height: min(58vh, 420px); }
@media (orientation: landscape) and (max-height: 500px) { .jump-map { width: min(96vw, 900px); grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto minmax(0, 1fr); } .jm-head { grid-column: 1 / -1; } .jm-frame { max-height: calc(92vh - 70px); } .jm-acts { flex-direction: column; align-items: stretch; } .jm-legend { margin: 0; flex-wrap: wrap; } }

/* 2.23: the skirmish difficulties on the star chart: six cards (the campaign as designed, then the five). */
.chart-tier { display: grid; gap: 6px; margin: 4px 0 10px; }
/* The briefing column is narrow: three cards a row, names only; the chosen one's description sits below. */
.difficulty-grid.tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier-grid button { padding: 7px 8px; }
.tier-grid small { display: none; }
.tier-desc { margin: 0; color: var(--muted); font-size: calc(13px * var(--ts, 1)); line-height: 1.4; }
/* 2.23: the briefing grew (the difficulty cards): when it is taller than the window it scrolls inside itself, so
   Launch is always in reach. */
@media (min-width: 1101px) { .briefing { max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }

/* 2.24: one difficulty ladder (six cards) in the briefing and the skirmish setup, and the step-up suggestion. */
#difficulties.difficulty-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { #difficulties.difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step-up { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px solid #e2c69455; background: #e2c69412; font-size: calc(13px * var(--ts, 1)); color: #e6dcc6; }
.step-up span { flex: 1 1 180px; }

/* 2.25: the hangar's mod tools: focus, sort, stacked copies, best fit; each piece's quality and worth. */
.mod-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 8px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.mod-tools label { display: inline-flex; align-items: center; gap: 6px; }
.mod-tools select { padding: 5px 8px; border-radius: 8px; background: #06141d; color: var(--text, #e6ebe3); border: 1px solid var(--line2, #ffffff22); font-size: calc(13px * var(--ts, 1)); }
.mod-tools .on { border-color: var(--gold); color: var(--gold); }
.mod-tools small { flex-basis: 100%; }
.mod-family { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #08151c; }
.mod-family > .mod-card { border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.mod-copies > summary { padding: 10px 14px; color: var(--mint); cursor: pointer; font-size: calc(13px * var(--ts, 1)); background: #9adbc707; }
.mod-variants { display: grid; gap: 7px; padding: 8px; border-top: 1px solid var(--line); }
.mod-family .mod-rule { display: block; margin-top: 5px; color: var(--muted); line-height: 1.5; }
.equip-inventory .mod-family .mod-card { grid-template-columns: 44px minmax(0, 1fr); }
.mod-family .mod-actions { grid-column: 2; flex-wrap: wrap; padding-top: 5px; }
.mod-family .mod-actions button { min-height: 30px; }
.mod-recovery { margin: 10px 0; padding: 12px; border: 1px solid var(--gold); border-radius: 10px; background: #e2c69409; }
.mod-recovery > summary { cursor: pointer; color: var(--gold); font-weight: 700; }
.mod-recovery .offer { margin-top: 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.mod-recovery small { display: block; line-height: 1.6; }
.mod-recovery .crew-act { flex-wrap: wrap; }
@media (max-width: 640px) {
  .mod-recovery .offer { grid-template-columns: 1fr; }
  .mod-family .mod-actions { grid-column: 1 / -1; }
  .topbar .wallet { width: 100%; min-width: 0; flex-wrap: wrap; }
}
.mod-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 2px; }
.mv { padding: 1px 7px; border-radius: 999px; font: 600 calc(12px * var(--ts, 1)) var(--mono); background: #ffffff0d; border: 1px solid #ffffff1c; color: #dfe8e4; }
.mv.stat { color: #8ff5df; border-color: #8ff5df44; }
.mv.pick { color: var(--gold); border-color: #e2c69466; }
.mod-rankno { color: var(--muted); font-weight: 600; margin-right: 2px; }
.q-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 6px; border-radius: 999px; font: 700 calc(12px * var(--ts, 1)) var(--mono); border: 1px solid #ffffff22; background: #ffffff08; color: #cfd8d4; }
.q-chip i { width: 26px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, currentColor var(--q), #ffffff1f var(--q)); }
.q-chip.q-low { color: #9aa6ab; } .q-chip.q-mid { color: #d7dfdb; } .q-chip.q-good { color: #8ff5bf; } .q-chip.q-top { color: #ffd27a; border-color: #ffd27a55; }
.g-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font: 700 calc(12px * var(--ts, 1)) var(--mono); border: 1px solid #ffffff22; background: #ffffff08; color: #cfd8d4; white-space: nowrap; }
.g-chip.g-low { color: #9aa6ab; } .g-chip.g-mid { color: #d7dfdb; } .g-chip.g-good { color: #8ff5bf; border-color: #8ff5bf44; }
.g-chip.g-top { color: #ffd27a; border-color: #ffd27a66; } .g-chip.g-perfect { color: #1b1206; background: linear-gradient(90deg, #ffd27a, #fff1c4, #ffb547); border-color: #ffe3a0; }
.mod-vs { display: block; color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
/* 2.99: which copy is stronger, said in words, and the fit score as the number to compare. */
.mod-verdict { margin: 4px 0 2px; padding: 4px 9px; border-radius: 8px; font-weight: 600; font-size: calc(13px * var(--ts, 1)); line-height: 1.35; border: 1px solid; }
.mod-verdict.down { color: #ffb4a3; background: #ff6a4a14; border-color: #ff6a4a55; }
.mod-verdict.up { color: #9ff5c8; background: #5bff9a12; border-color: #5bff9a55; }
.mod-verdict.same { color: #d7dfdb; background: #ffffff08; border-color: #ffffff22; }
.mv.score { color: #fff; border-color: #8ff5df88; background: #8ff5df1a; font-size: calc(13px * var(--ts, 1)); }
.mod-copies > summary b.up { color: #9ff5c8; } .mod-copies > summary b.down { color: #ffb4a3; }
.mod-vs.up { color: #8ff5bf; }
.mod-card.best { box-shadow: inset 3px 0 0 #e2c69499; }
.mod-actions .cal { font: 600 calc(13px * var(--ts, 1)) var(--mono); }

/* 2.25: the hangar hero's live ship and its skill demonstrations. */
.th-ship3d { position: relative; width: 100%; min-height: 320px; display: grid; grid-template-rows: minmax(240px, 1fr) auto auto; gap: 8px; }
.th-ship-canvas { width: 100%; height: 100%; min-height: 240px; display: block; border-radius: 14px; cursor: grab; touch-action: none; background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--race) 14%, transparent), transparent 70%); }
.th-ship-canvas:active { cursor: grabbing; }
.th-ship-canvas:focus-visible { outline: 2px solid var(--race); outline-offset: 2px; }
.th-demo { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.th-demo button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid #ffffff26; background: #04101acc; color: #dfe8e4; font-size: calc(13px * var(--ts, 1)); cursor: pointer; }
.th-demo button kbd { font: 700 calc(12px * var(--ts, 1)) var(--mono); padding: 1px 5px; border-radius: 5px; background: #ffffff14; color: var(--gold); }
.th-demo button.on { border-color: var(--race); color: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--race) 50%, transparent); }
.th-demo-text { margin: 0; min-height: 2.8em; text-align: center; color: #c3d0cb; font-size: calc(13px * var(--ts, 1)); line-height: 1.4; }
.th-demo-text b { color: #fff; margin-right: 4px; }
@media (max-width: 760px) { .th-ship3d { min-height: 250px; grid-template-rows: minmax(180px, 1fr) auto auto; } .th-ship-canvas { min-height: 180px; } }

/* 2.26: change things where they are shown: the text with a ▾ and a native list laid over it. */
.inline-pick { position: relative; display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; cursor: pointer; border-bottom: 1px dashed color-mix(in srgb, currentColor 40%, transparent); }
.inline-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-pick i { font-style: normal; font-size: .7em; color: var(--gold); }
.inline-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: calc(16px * var(--ts, 1)); }
.inline-pick:hover, .inline-pick:focus-within { border-bottom-color: var(--gold); }
.inline-pick:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.tab-hero h1 .inline-pick.big { border-bottom-width: 2px; }
/* The skirmish's two sides and the duel picture. */
.sk-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.sk-side { display: grid; gap: 3px; align-content: start; padding: 10px 12px; border-radius: 12px; min-width: 0; border: 1px solid color-mix(in srgb, var(--side) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--side) 12%, transparent), #ffffff05); box-shadow: inset 3px 0 0 var(--side); }
.sk-side.foe { box-shadow: inset -3px 0 0 var(--side); }
.sk-side strong { font-size: calc(17px * var(--ts, 1)); } .sk-side small { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
.sk-side .eyebrow { color: var(--side); }
.sk-vs-badge { align-self: center; font: 800 calc(14px * var(--ts, 1)) var(--mono); letter-spacing: .13em; color: var(--gold); }
.sk-duel { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; padding: 10px 0; }
.sk-duel > div { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; }
.sk-duel > div::before { content: ''; position: absolute; inset: 10% 5%; border-radius: 50%; filter: blur(22px); opacity: .35; z-index: 0; }
.sk-duel .you::before { background: var(--you); } .sk-duel .foe::before { background: var(--foe); }
.sk-duel .ship-shot { position: relative; z-index: 1; width: 100%; max-width: 260px; height: auto; }
.sk-duel .foe .ship-shot { transform: scaleX(-1); }
.sk-duel span { position: relative; z-index: 1; font: 600 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #dfe8e4; text-align: center; }
.sk-duel > b { font: 800 22px var(--serif); color: var(--gold); text-shadow: 0 0 16px #e2c69466; }
/* Difficulty pips you can click, and on/off switches. */
.pip-pick { display: inline-flex; gap: 4px; }
.pip-pick button { width: 18px; height: 8px; padding: 0; border-radius: 3px; border: 1px solid #e2c69455; background: #ffffff10; cursor: pointer; }
.pip-pick button.on { background: linear-gradient(90deg, #ffd27a, #ff9a52); border-color: transparent; }
.pip-pick button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sw { min-width: 46px; padding: 2px 10px; border-radius: 999px; border: 1px solid #ffffff2a; background: #ffffff0a; color: var(--muted); font: 700 calc(12px * var(--ts, 1)) var(--mono); cursor: pointer; }
.sw.on { color: #04101a; background: #8ff5df; border-color: transparent; }
@media (max-width: 760px) { .sk-vs { grid-template-columns: 1fr; } .sk-vs-badge { justify-self: center; } .sk-duel .ship-shot { max-width: 150px; } }

/* 2.26: the mission briefing: the goal, the key facts and what to watch out for, lit; the rest folds away. */
.brief-goal { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid #8ff5df55; background: linear-gradient(135deg, #8ff5df14, #8ff5df05); }
.brief-goal .goal-ico { font-size: 20px; line-height: 1.2; }
.brief-goal b { display: block; font-size: calc(15px * var(--ts, 1)); color: #fff; margin-bottom: 2px; }
.brief-goal span:last-child { color: #d5e4de; font-size: calc(13.5px * var(--ts, 1)); }
.brief-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid #ffffff22; background: #ffffff08; font: 600 calc(13px * var(--ts, 1)) var(--mono); color: #dfe8e4; }
.bchip.lvl b { color: var(--gold); }
.bchip.foe { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.bchip.foe i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bchip.warn { border-color: #ffb36b66; color: #ffcf9a; }
.brief-threats ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.brief-threats li { padding-left: 10px; border-left: 2px solid #ffb36b88; color: #c9d6d1; font-size: calc(13px * var(--ts, 1)); line-height: 1.4; }
.brief-threats li b { color: #fff; margin-right: 4px; }
.brief-threats li.boss { border-left-color: #ff5a4a; } .brief-threats li.boss b { color: #ff9a8a; }
.brief-threats li.hard { border-left-color: var(--gold); } .brief-threats li.hard b { color: var(--gold); }
.reward-row.first { border-color: #e2c69466; background: #e2c6940f; }
.brief-more { border-top: 1px solid var(--line); padding-top: 8px; }
.brief-more summary { cursor: pointer; color: var(--muted); font: 600 calc(13px * var(--ts, 1)) var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.brief-more[open] summary { margin-bottom: 8px; }
/* 2.26: the hangar's ship detail opens on its 3D picture. */
.detail-shot { position: relative; display: block; width: 100%; padding: 0; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--race, #8ff5df) 22%, transparent), transparent 70%), #04101a; }
.detail-shot .ship-shot { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.detail-shot .ship-shot.pending { display: grid; place-items: center; padding: 18px; }
.detail-shot .pic-hint { position: absolute; right: 10px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: #000a; color: var(--gold); font: 600 calc(12px * var(--ts, 1)) var(--mono); }
.detail-shot:hover .pic-hint, .detail-shot:focus-visible .pic-hint { color: #fff; }

/* ---- 2.27/2.28 online co-op: the Co-op tab (the lobby of open rooms and your room), the HUD chip, and what a guest
   does not get ---- */
.coop-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.coop-lobby, .coop-you { min-width: 0; }
.coop-lobby .sub-title { display: flex; align-items: center; gap: 10px; }
.coop-lobby .sub-title button { margin-left: auto; }
.coop-count { font: 600 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.coop-empty { margin: 0; padding: 26px 18px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--muted); font-size: calc(13px * var(--ts, 1)); text-align: center; }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.room-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px 8px 6px; border: 1px solid var(--line); border-left: 3px solid var(--race); border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--race) 9%, transparent), rgba(255, 255, 255, .02)); }
.rr-ship .ship-shot, .rr-ship svg { width: 92px; height: auto; display: block; }
.rr-main { display: grid; gap: 2px; min-width: 0; }
.rr-main strong { font: calc(17px * var(--ts, 1)) var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-main small { color: color-mix(in srgb, var(--race) 70%, #fff); font-size: calc(13px * var(--ts, 1)); }
.rr-main span { color: var(--muted); font-size: calc(13px * var(--ts, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-meta { display: grid; justify-items: end; gap: 2px; }
.room-row.mine { border-style: solid; border-color: color-mix(in srgb, var(--mint) 45%, transparent); border-left-color: var(--mint); background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 12%, transparent), rgba(255, 255, 255, .02)); }
.rr-yours { font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .14em; color: var(--mint); padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--mint) 45%, transparent); border-radius: 8px; white-space: nowrap; }
.rr-meta b { font: 700 calc(13px * var(--ts, 1)) var(--mono); color: var(--mint); }
.rr-meta small { color: var(--muted); font-size: calc(12px * var(--ts, 1)); white-space: nowrap; }
.coop-you { display: grid; gap: 12px; }
.coop-card { padding: 14px 16px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(160deg, #102226, #0b151b); display: grid; gap: 10px; justify-items: start; }
.coop-card > * { max-width: 100%; }
.coop-field { display: grid; gap: 4px; width: 100%; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.coop-field input, .coop-join input, .coop-card textarea { width: 100%; min-width: 0; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line2); background: #08110f; color: var(--text); font: calc(15px * var(--ts, 1)) var(--font); }
.coop-join { display: flex; gap: 8px; width: 100%; }
.coop-join input { flex: 1; font: 600 calc(18px * var(--ts, 1)) var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.coop-join input::placeholder { color: #47605b; }
.coop-card textarea { font: calc(12px * var(--ts, 1)) var(--mono); word-break: break-all; resize: vertical; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 7px 12px; font-size: calc(13px * var(--ts, 1)); }
.seg button.on { background: color-mix(in srgb, var(--mint) 18%, transparent); color: var(--text); }
.coop-offline { width: 100%; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.coop-offline summary { cursor: pointer; }
.coop-offline textarea { margin: 8px 0 6px; }
.coop-room { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coop-room .eyebrow { width: 100%; }
.coop-code { font: 700 34px var(--mono); letter-spacing: .18em; color: var(--mint); }
.room-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.room-players li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .03); display: grid; gap: 2px; min-width: 0; }
.room-players strong { font: calc(18px * var(--ts, 1)) var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-players small { color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.room-players .waiting { border-style: dashed; }
.room-players .waiting strong { color: var(--muted); }
.coop-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.coop-status { color: var(--muted); font-size: calc(13px * var(--ts, 1)); margin: 0; }
.coop-note { color: var(--gold); font-size: calc(13px * var(--ts, 1)); margin: 0; }
.coop-error { color: var(--red); font-size: calc(13px * var(--ts, 1)); margin: 0; }
.coop-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; width: 100%; }
.coop-steps li { display: grid; gap: 6px; justify-items: start; }
.coop-steps span { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
#tab-coop > .small-note { margin: 16px 0 0; }
.coop-duel { grid-template-columns: 1fr 1fr auto 1fr; }
.coop-duel .mate { margin-left: -14%; }
.coop-duel .slot { display: grid; place-items: center; width: 70%; aspect-ratio: 16 / 10; border: 1px dashed #5f7f7a; border-radius: 14px; font: 700 30px var(--serif); color: #5f7f7a; position: relative; z-index: 1; }
.coop-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--mint) 45%, transparent); border-radius: 999px; font: 600 calc(12px * var(--ts, 1))/1.4 var(--mono); letter-spacing: .12em; color: var(--mint); vertical-align: middle; }
@media (max-width: 900px) { .coop-layout { grid-template-columns: 1fr; } .coop-you { order: -1; } }
@media (max-width: 560px) { .room-row { grid-template-columns: 64px minmax(0, 1fr) auto; } .rr-ship .ship-shot, .rr-ship svg { width: 64px; } .rr-meta { display: none; } .room-players { grid-template-columns: 1fr; } .coop-code { font-size: 28px; } }
/* A guest flies one capital: the fleet's squads, formation, jump drive and restart belong to the host. */
body.coop-guest #squad-bar, body.coop-guest #jump, body.coop-guest #restart, body.coop-guest #cmd-panel,
body.coop-guest [data-touch="jump"], body.coop-guest [data-touch="formskill"], body.coop-guest [data-touch="command"], body.coop-guest [data-touch="focus"] { display: none !important; }
body.coop-guest #pause-menu .small-note { visibility: hidden; }

/* 2.34: readable fleet cards and reachable detail/purchase controls on small screens. */
.fleet-browser, .fleet-card-copy { min-width: 0; }
.fleet-browser, #capital-detail { scroll-margin-top: calc(var(--topbar-h, 0px) + 12px); }
.fleet-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.fleet-filters button { padding: 7px 10px; font-size: calc(13px * var(--ts, 1)); border-radius: 999px; }
.fleet-filters button.active { background: #e2c69418; border-color: var(--gold); color: var(--gold); }
.fleet-filters b { margin-left: 4px; font: calc(12px * var(--ts, 1)) var(--mono); }
.fleet-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.fleet-search label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.fleet-search input, .fleet-search select { min-width: 0; width: 100%; padding: 10px; border: 1px solid var(--line2); border-radius: 7px; background: #0b1a20; color: var(--text); font: inherit; }
.fleet-note { line-height: 1.6; margin-bottom: 14px; }
.capital-list .fleet-card { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 12px; padding: 12px; }
.capital-list .fleet-card .capital-art, .capital-list .fleet-card .ship-shot { grid-row: auto; width: 76px; height: 64px; }
.fleet-card-copy { display: grid; gap: 4px; }
.fleet-card .fleet-card-copy small { font-size: calc(12px * var(--ts, 1)); line-height: 1.4; letter-spacing: .06em; }
.fleet-card .fleet-card-copy strong { color: var(--text); font-size: 19px; line-height: 1.2; }
.fleet-card .fleet-class { font: calc(12.5px * var(--ts, 1))/1.5 var(--font); }
.fleet-card .fleet-price { color: var(--gold); font: 600 calc(13px * var(--ts, 1))/1.5 var(--font); }
.fleet-card .fleet-state { color: #d2aca1; font: calc(12.5px * var(--ts, 1))/1.5 var(--font); }
.fleet-card .fleet-state.ready, .fleet-ready { color: var(--mint); }
.fleet-pages { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 14px 0 0; }
.fleet-pages span { color: var(--muted); font-size: calc(12px * var(--ts, 1)); text-align: center; }
.fleet-empty { grid-column: 1 / -1; border: 1px dashed var(--line2); border-radius: 10px; padding: 18px; }
.fleet-empty p { margin: 8px 0 14px; color: var(--muted); }
.fleet-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fleet-purchase, .fleet-special-note { border: 1px solid var(--line2); border-radius: 9px; padding: 12px; font-size: calc(13px * var(--ts, 1)); line-height: 1.6; }
.fleet-special-note h3 { color: var(--gold); font-size: 21px; margin-bottom: 6px; }
.fleet-special-note p + p { margin-top: 8px; }
.fleet-shortfall { color: #ffc0a6; }
#capital-detail > .ship-card { width: 100%; min-width: 0; }
#capital-detail .detail-head > div { min-width: 0; }
#capital-detail .detail-head button { flex-shrink: 0; max-width: 100%; white-space: normal; }
@media (max-width: 1100px) {
  #capital-detail .detail-shot { max-height: 180px; }
  body[data-view="hangar"] #tab-hero { display: none; }
  .tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
  .tabs button { width: 100%; min-width: 0; padding: 8px 2px; font-size: clamp(11px, 1.6vw, 13px); }
  .tabs button > span { max-width: 100%; white-space: normal; }
}
@media (max-width: 640px) {
  .topbar { position: static; }
  .section-title { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
  .section-title h2 { font-size: 28px; line-height: 1.2; }
  .section-title > .quiet { font-size: calc(13px * var(--ts, 1)); line-height: 1.5; }
  .capital-list, .capital-grid { grid-template-columns: minmax(0, 1fr); }
  .capital-list .fleet-card { grid-template-columns: 86px minmax(0, 1fr); }
  .capital-list .fleet-card .capital-art, .capital-list .fleet-card .ship-shot { width: 86px; }
  .capital-detail { padding: 14px; gap: 12px; }
  .detail-head { flex-direction: column; align-items: stretch; }
  .detail-head h2 { font-size: 28px; line-height: 1.2; }
  .detail-head > button { width: 100%; }
  .upgrade { grid-template-columns: 28px minmax(0, 1fr); gap: 9px 10px; padding: 12px; }
  .upgrade .up-ico { grid-column: 1; grid-row: 1; }
  .upgrade > div:not(.pips) { grid-column: 2; min-width: 0; }
  .upgrade .pips { grid-column: 2; }
  .upgrade > button { grid-column: 2; width: 100%; min-width: 0; white-space: normal; }
  .tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; overflow: visible; }
  .tabs button { width: 100%; min-width: 0; padding: 5px 1px; font-size: clamp(10px, 2.5vw, 10.5px); line-height: 1.3; }
  .tabs button > span { max-width: 100%; white-space: normal; }
  #menu { padding-bottom: calc(var(--menu-nav-h, 82px) + 28px); }
  html { scroll-padding-bottom: calc(var(--menu-nav-h, 82px) + 16px); }
  #capital-detail .ship-act > button { flex-wrap: wrap; max-width: 100%; justify-content: center; }
}
@media (max-width: 440px) {
  .fleet-search { grid-template-columns: minmax(0, 1fr); }
  .fleet-pages button { padding: 7px 8px; font-size: calc(12px * var(--ts, 1)); }
}

/* ---- 2.35: easier to read, easier to use ---- */
/* Resources: one button in the top bar opens a legend of what each one is for. */
.wallet { position: relative; }
.coins { display: inline-flex; align-items: center; gap: 14px; padding: 5px 10px; border-radius: 999px; border-color: transparent; font: inherit; }
.coins:hover:not(:disabled) { border-color: var(--line2); background: #ffffff08; }
.coins .coin b { font-weight: 650; }
.wallet-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(380px, calc(100vw - 24px)); padding: 12px; border-radius: 14px; border: 1px solid var(--line2); background: #0b1a21; box-shadow: 0 18px 50px #000a; isolation: isolate; font: calc(13px * var(--ts, 1))/1.45 var(--font); }
.wallet-pop header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wallet-pop header strong { font: calc(18px * var(--ts, 1)) var(--serif); }
.wallet-pop header .icon-btn { width: 30px; height: 30px; }
.wallet-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wallet-pop li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 9px 4px; border-top: 1px solid var(--line); }
.wallet-pop li > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.wallet-pop li b { font-weight: 650; }
.wallet-pop .wallet-amt { font: 700 calc(14px * var(--ts, 1)) var(--mono); color: var(--gold); text-align: right; }
.wallet-pop li small { grid-column: 1 / -1; color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.wallet-pop li > button { grid-column: 2; justify-self: start; padding: 4px 10px; font-size: calc(13px * var(--ts, 1)); border-radius: 999px; }
@media (max-width: 640px) { .coins { gap: 9px; padding: 6px 8px; flex: 1; justify-content: space-between; } .wallet-pop { left: 0; right: 0; width: auto; max-height: calc(100vh - 190px); overflow-y: auto; } }

/* Quick settings: say what the strip is. */
.q-label { flex-basis: 100%; font: 600 calc(12px * var(--ts, 1)) var(--font); letter-spacing: .02em; color: var(--muted); }
.q-tog, .q-range, .q-pick, .q-pick select { font-size: calc(13px * var(--ts, 1)); }
@media (pointer: coarse) { .q-tog, .q-act, .q-seg button { min-height: 36px; } .q-pick select { min-height: 36px; } }

/* Star chart: locked and finished regions fold to their header. */
.regions { align-items: start; }
.region-bar { display: block; height: 4px; margin: 9px 0 2px; border-radius: 4px; background: #ffffff12; overflow: hidden; }
.region-bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--race), var(--mint)); }
.region-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.region-state { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.region-state.done { color: var(--mint); }
.region-state.open { color: var(--gold); }
.region-toggle { padding: 5px 12px; border-radius: 999px; font-size: calc(13px * var(--ts, 1)); }
.region.folded { padding-bottom: 13px; }
.region.folded header p { display: none; }
.region.region-locked header h3 { color: #c7d2cd; }
.node small { font-size: calc(12.5px * var(--ts, 1)); }
.node.locked { opacity: .6; }

/* Settings: three groups, one row per setting, the control on the right. */
.settings-groups { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.set-group { margin: 0; padding: 6px 16px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); min-width: 0; }
.set-group legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; margin-left: -6px; font: 19px var(--serif); color: var(--text); }
.set-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--gold); font: calc(16px * var(--ts, 1)) var(--font); }
.set-ico .ico { width: 18px; height: 18px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.set-group legend + .set-row { border-top: 0; }
.set-text { display: grid; gap: 3px; }
.set-text b { font-weight: 600; font-size: calc(14px * var(--ts, 1)); color: var(--text); }
.set-text small { font-size: calc(13px * var(--ts, 1)); color: var(--muted); line-height: 1.4; }
.set-row select { width: auto; min-width: 150px; max-width: 200px; }
.set-row.slider { grid-template-columns: minmax(90px, auto) minmax(0, 1fr) 46px; }
.set-row.slider input { width: 100%; }
.set-row output { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); text-align: right; }
#settings-form.muted-sound .set-row.slider:has(#set-volume, #set-music) { opacity: .5; }
input.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: #ffffff1c; border: 1px solid var(--line2); position: relative; cursor: pointer; transition: background .18s; flex: none; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #c7d2cd; transition: transform .18s; }
input.switch:checked { background: var(--mint); border-color: var(--mint); }
input.switch:checked::after { transform: translateX(18px); background: #0b1a20; }
input.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1100px) { .settings-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .settings-groups { grid-template-columns: 1fr; }
  .set-row select { min-width: 0; max-width: 46vw; }
}
.chapter .eyebrow { letter-spacing: .06em; }
.rank-progress > div { flex-wrap: wrap; gap: 2px 10px; }
.rank-progress .eyebrow { white-space: nowrap; }
.section-title .eyebrow, .sub-title .eyebrow { letter-spacing: .1em; }
.region .nodes[hidden] { display: none; }
/* Phones: the chronicle is one swipeable row instead of a tall grid. */
@media (max-width: 640px) {
  .chapters { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 6px; margin-right: -14px; padding-right: 14px; scrollbar-width: thin; }
  .chapters .chapter { flex: 0 0 42%; scroll-snap-align: start; }
  .chronicle .sub-title { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 720px) {
  .set-row:not(.toggle):not(.slider) { grid-template-columns: 1fr; }
  .set-row:not(.toggle):not(.slider) select { width: 100%; max-width: none; }
  .set-row.slider { grid-template-columns: 1fr 46px; }
  .set-row.slider .set-text { grid-column: 1 / -1; }
  .controls-card dl { grid-template-columns: 1fr; gap: 2px; }
  .controls-card dd { margin-bottom: 8px; }
}

/* ---- 2.36: the Deep Space Atlas ---- */
.chart-switch { display: inline-flex; gap: 6px; padding: 5px; margin: 0 0 16px; border-radius: 14px; border: 1px solid var(--line); background: #04101a99; max-width: 100%; }
.chart-switch button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 0; border-radius: 10px; color: var(--muted); text-align: left; }
.chart-switch button span { display: grid; line-height: 1.2; }
.chart-switch button b { font-weight: 650; font-size: calc(14px * var(--ts, 1)); color: inherit; }
.chart-switch button small { font: 600 calc(12px * var(--ts, 1)) var(--mono); color: var(--muted); }
.chart-switch button .ico { width: 20px; height: 20px; }
.chart-switch button.on { color: var(--text); background: linear-gradient(180deg, #a1e1c81f, #a1e1c80a); box-shadow: inset 0 0 0 1px #a1e1c840; }
.chart-switch button[data-chart-view=atlas].on { background: linear-gradient(180deg, #c9a2ff26, #c9a2ff0a); box-shadow: inset 0 0 0 1px #c9a2ff55; }
.chart-switch button.on small { color: var(--gold); }
.atlas-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--violet); font-size: calc(18px * var(--ts, 1)); }
.atlas-glyph.big { width: 56px; height: 56px; font-size: 40px; border-radius: 50%; background: radial-gradient(circle, #c9a2ff33, transparent 70%); }
.atlas { --atlas: #c9a2ff; }
.atlas-locked { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 20px; border: 1px solid #c9a2ff33; border-radius: 16px; background: radial-gradient(ellipse at 50% 0%, #c9a2ff1c, transparent 60%), var(--panel); }
.atlas-locked h3 { font-size: 28px; }
.atlas-locked p { max-width: 520px; color: #c6d3cd; }
.atlas-locked .atlas-lock-line { color: var(--gold); font-size: calc(14px * var(--ts, 1)); }
.atlas-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 14px; }
.atlas-head h3 { font-size: 30px; margin: 6px 0 4px; }
.atlas-head .eyebrow { color: var(--violet); }
.atlas-head p { color: #c6d3cd; }
.atlas-stats { display: flex; gap: 8px; }
.atlas-stats span { display: grid; min-width: 86px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.atlas-stats b { font: 700 calc(18px * var(--ts, 1)) var(--mono); color: var(--text); }
.atlas-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.atlas-map { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #c9a2ff1f, transparent 34%), radial-gradient(circle at 50% 50%, #0d2230, #071017 72%); border: 1px solid #c9a2ff26; }
.atlas-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-map line { stroke: #c9a2ff40; stroke-width: .35; stroke-dasharray: 1.2 1; }
.atlas-map line.done { stroke: var(--mint); stroke-dasharray: none; stroke-width: .5; }
.atlas-map line.ring { stroke: #b8d5ca1c; stroke-dasharray: none; }
.atlas-node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; width: 23%; min-width: 74px; padding: 10px 4px 8px; border-radius: 16px; background: #0b1a21ee; border: 1px solid var(--line2); text-align: center; }
.atlas-node:active:not(:disabled) { transform: translate(-50%, -50%) scale(.98); }
.atlas-node .an-art { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff0a; }
.atlas-node .an-name { font-size: calc(13px * var(--ts, 1)); font-weight: 600; line-height: 1.2; color: var(--text); }
.atlas-node .an-mods { display: flex; gap: 3px; font-size: calc(12px * var(--ts, 1)); color: var(--red); }
.atlas-node .an-mods i { font-style: normal; }
.atlas-node.active { border-color: var(--gold); box-shadow: 0 0 0 1px #e2c69455, 0 10px 30px #0008; }
.atlas-node.cleared { opacity: .62; border-color: #a1e1c855; }
.atlas-node .an-done { color: var(--mint); font-size: 22px; font-weight: 700; }
.atlas-node.gate { width: 27%; border-color: #c9a2ff66; background: radial-gradient(circle, #2a1c40, #0b1a21 75%); }
.atlas-node.gate.sealed { opacity: .75; }
.atlas-node.gate.open { border-color: var(--violet); box-shadow: 0 0 26px #c9a2ff44; }
.atlas-node.gate.active { border-color: var(--gold); }
.gate-glyph { font-size: 24px; color: var(--violet); }
.atlas-brief { position: sticky; top: 84px; display: grid; gap: 12px; padding: 20px; border-radius: 14px; border: 1px solid #c9a2ff33; background: linear-gradient(170deg, #1d1830, #0c1a21); }
.atlas-brief h3 { font-size: 26px; }
.atlas-brief .eyebrow { color: var(--violet); }
.atlas-brief > p { color: #c6d3cd; font-size: calc(13.5px * var(--ts, 1)); }
.atlas-brief .ab-kicker { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); margin-top: -6px; }
.ab-mods { display: grid; gap: 6px; }
.ab-mod { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #ff8f740d; border: 1px solid #ff8f7426; }
.ab-mod i { font-style: normal; color: var(--red); font-size: calc(16px * var(--ts, 1)); text-align: center; }
.ab-mod b { display: block; font-weight: 600; font-size: calc(13.5px * var(--ts, 1)); }
.ab-mod small { color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.ab-mod em { font: 700 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); font-style: normal; }
.ab-cache { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #e2c6940d; border: 1px solid #e2c69433; }
.ab-cache .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-cache small { color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.ab-lock { color: var(--gold); }
.ab-done { color: var(--mint); }
.ab-ship { font-size: calc(13px * var(--ts, 1)); color: var(--muted) !important; }
.atlas-brief .primary.big { width: 100%; }
.atlas-how { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.atlas-how summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.atlas-how ul { margin: 10px 0 2px; padding-left: 18px; color: #c6d3cd; display: grid; gap: 6px; }
.atlas-row span { color: var(--violet); }
@media (max-width: 900px) {
  .atlas-layout { grid-template-columns: 1fr; }
  .atlas-brief { position: static; }
}
@media (max-width: 640px) {
  .chart-switch { display: flex; width: 100%; }
  .chart-switch button { flex: 1; padding: 8px 10px; }
  .atlas-head h3 { font-size: 24px; }
  .atlas-stats { width: 100%; } .atlas-stats span { flex: 1; min-width: 0; }
  .atlas-node { width: 25%; min-width: 0; padding: 7px 2px 6px; border-radius: 12px; }
  .atlas-node .an-art { width: 32px; height: 32px; }
  .atlas-node .an-name { font-size: calc(11.5px * var(--ts, 1)); }
  .atlas-node.gate { width: 29%; }
}

/* ---- 2.37: abilities as cards with their module sockets inside; the module collection; the relic forge ---- */
/* Hangar: one card per ability. Its sockets sit inside the card, each naming its module and what it changes. */
.ak-head { margin-top: 16px; flex-wrap: wrap; }
.ak-kit { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ak-card { display: grid; grid-template-columns: 28px 28px minmax(0, 1fr); column-gap: 10px; row-gap: 9px; align-items: start; padding: 11px 12px; border-radius: 12px; background: #0a171ecc; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.ak-card.own { border-color: #e2c69433; }
.ak-card.picking { border-color: var(--gold); box-shadow: 0 0 0 1px #e2c69455, 0 10px 30px #0006; }
.ak-card.flash { animation: akFlash 1.2s ease-out; }
@keyframes akFlash { from { box-shadow: 0 0 0 2px var(--mint), 0 0 26px #a1e1c866; } to { box-shadow: 0 0 0 0 transparent; } }
.ak-card > kbd { margin-top: 3px; text-align: center; color: var(--gold); border-color: #e2c69455; font-size: calc(13px * var(--ts, 1)); }
.ak-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #8fc9ff14; color: #9fd0ff; }
.ak-ico .ico { width: 18px; height: 18px; }
.ak-card.trait .ak-ico { color: #a8ffcf; background: #6fffb014; }
.ak-body { min-width: 0; }
.ak-body strong { display: block; font-size: calc(15px * var(--ts, 1)); line-height: 1.35; }
.ak-body strong em { font: 700 calc(11.5px * var(--ts, 1)) var(--mono); font-style: normal; letter-spacing: .1em; color: var(--muted); margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: #ffffff0d; vertical-align: 2px; white-space: nowrap; }
.ak-card.own strong em { color: var(--gold); background: #e2c69418; }
.ak-card.trait strong em { color: #a8ffcf; background: #6fffb018; }
.ak-body p { margin: 3px 0 0; font-size: calc(13px * var(--ts, 1)); line-height: 1.45; color: #c6d3cd; }
.ak-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ak-stat { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; background: #ffffff0a; border: 1px solid #ffffff12; white-space: nowrap; }
.ak-stat .ico { width: 13px; height: 13px; color: var(--muted); }
.ak-stat b { color: var(--text); font-weight: 650; }
.ak-stat .was { color: var(--muted); text-decoration: line-through; }
.ak-stat b.better, .ak-stat.better { color: #8ff0bf; }
.ak-stat b.worse, .ak-stat.worse { color: #ffc27a; }
.ak-mods { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; padding-top: 9px; border-top: 1px dashed #ffffff14; }
.ak-mods-label { align-self: center; min-width: 58px; font: 700 calc(11.5px * var(--ts, 1)) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.socket.socket-pill { flex: 1 1 230px; min-width: 0; width: auto; height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; place-items: center start; gap: 9px; padding: 6px 9px 6px 7px; text-align: left; border-radius: 10px; border: 1px solid var(--line2); background: #ffffff05; }
.socket-pill > span { display: grid; gap: 3px; min-width: 0; }
.socket-pill b { font-size: calc(13px * var(--ts, 1)); font-weight: 650; line-height: 1.25; }
.socket-pill small { font-size: calc(12.5px * var(--ts, 1)); line-height: 1.35; color: var(--muted); }
.socket-pill.filled { background: linear-gradient(120deg, color-mix(in srgb, var(--sup) 14%, transparent), #08141ccc 70%); border-color: color-mix(in srgb, var(--sup) 45%, transparent); }
.socket-pill.filled b { color: var(--sup); }
.socket-pill.empty { border: 1px dashed #8fa3ad88; }
.socket-pill.empty b { color: var(--text); }
.socket-pill.locked { border: 1px dashed #ffffff1c; background: transparent; }
.socket-pill.locked:disabled { opacity: .7; }
.socket-pill.idle { border-color: #ffb36b88; background: #ffb36b0d; }
.socket-pill .warn { color: #ffc27a; }
.socket.socket-pill.on { background: #e2c69414; box-shadow: 0 0 0 2px var(--gold); border-color: transparent; }
.pill-act { font: 600 calc(12px * var(--ts, 1)) var(--mono); font-style: normal; color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px solid #ffffff1a; }
.socket-pill:hover .pill-act, .socket-pill.on .pill-act { color: var(--gold); border-color: var(--gold); }
/* What a module changes: green for a gain, amber for its trade-off. */
.fx-tags { display: flex; flex-wrap: wrap; gap: 3px 4px; }
.sfx { display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: calc(12.5px * var(--ts, 1)); font-style: normal; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.sfx.up { color: #9ff3c7; background: #4fdc9a1c; }
.sfx.down { color: #ffc98f; background: #ffa94d19; }
/* The picker opens inside the ability card it fills. */
.ak-card .sup-picker { grid-column: 1 / -1; display: block; padding: 10px; border-radius: 10px; background: #061017; border: 1px solid #e2c69455; }
.sup-pick-head { flex-wrap: wrap; }
.sup-pick-head > div { display: grid; gap: 1px; margin-right: auto; min-width: 0; }
.sup-pick-head > div strong { font-size: calc(14px * var(--ts, 1)); }
.sup-pick-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.sup-pick { align-items: start; border-color: color-mix(in srgb, var(--sup) 35%, transparent); }
.sup-pick strong { color: var(--sup); }
.sup-pick .fx-tags { margin: 3px 0 2px; }
.sup-pick .here { font: 700 calc(11px * var(--ts, 1)) var(--mono); font-style: normal; letter-spacing: .04em; color: #1b1408; background: var(--gold); padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.sup-pick-no { margin: 9px 0 0; font-size: calc(13px * var(--ts, 1)); line-height: 1.55; color: var(--muted); }
.sup-pick-no b { color: #c6d3cd; }
.sup-pick-no span { opacity: .85; }
.sup-pick-more { margin: 5px 0 0; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
/* Numbered steps that say how a screen works, in a line. */
.how-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 6px; }
.how-steps li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; background: #ffffff06; border: 1px solid var(--line); font-size: calc(13px * var(--ts, 1)); line-height: 1.4; color: #c6d3cd; }
.how-steps li > b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 calc(13px * var(--ts, 1)) var(--mono); color: #1b1408; background: var(--gold); }
.how-steps .key-eg { display: inline-block; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line2); background: #ffffff08; font: 700 calc(12px * var(--ts, 1))/1.5 var(--mono); font-style: normal; color: var(--text); white-space: nowrap; }
/* The module collection. */
.sup-box { margin-top: 18px; }
.sup-box .sub-title { flex-wrap: wrap; }
.sup-box .sup-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr)); gap: 8px; }
.sup-box .sup-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.sup-card.missing { background: #08141c99; border-style: dashed; }
.sup-body { display: grid; gap: 6px; min-width: 0; }
.sup-name { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.sup-name strong { color: var(--sup, var(--c)); font-size: calc(14.5px * var(--ts, 1)); }
.own-tag { font: 700 calc(11.5px * var(--ts, 1)) var(--mono); letter-spacing: .05em; color: #8ff0bf; padding: 1px 7px; border-radius: 999px; background: #4fdc9a17; border: 1px solid #4fdc9a3a; white-space: nowrap; }
.fit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fit-label { font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); margin-right: 3px; }
.fit-key { display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 7px; font: 700 calc(13px * var(--ts, 1)) var(--mono); }
.fit-key.no { color: #ffffff3a; border: 1px solid #ffffff10; text-decoration: line-through; }
.fit-key.can { color: var(--text); border: 1px solid var(--line2); background: #ffffff08; }
button.fit-key.can:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
button.fit-key.in { color: #1b1408; background: var(--sup, var(--gold)); border: 1px solid transparent; }
button.fit-key.in:hover:not(:disabled) { filter: brightness(1.1); border-color: transparent; background: var(--sup, var(--gold)); }
.sup-get { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sup-get .src { flex: 1 1 160px; }
/* A forge / rank-up button: what it does on top, its price below. A price you cannot meet shows have / need. */
button.act-btn { display: inline-grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: center; gap: 4px; text-align: left; padding: 8px 12px; min-width: 0; }
.act-btn .act-label { font-weight: 650; font-size: calc(13.5px * var(--ts, 1)); }
.act-btn .act-sub { font-size: calc(12.5px * var(--ts, 1)); opacity: .8; }
.act-btn .act-cost { display: flex; flex-wrap: wrap; gap: 4px; }
.act-btn .cost-chip { margin: 0; }
button.act-btn:disabled { opacity: 1; color: #a9bab5; background: #ffffff04; border-style: dashed; }
.cost-chip.short { border-color: #ff8f7466; background: #ff8f7417; }
.cost-chip.short b { color: #ffb4a0; }
.act-btn.flying { border-color: color-mix(in srgb, var(--c, var(--gold)) 60%, transparent); }
.act-btn.flying .act-label { color: var(--c, var(--gold)); }
.act-done { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); padding: 6px 2px; }
#capital-detail .ship-act > button.act-btn, .ship-actions > button.act-btn { justify-content: stretch; flex-wrap: nowrap; }
/* Relic forge: the relic wing as slots, a forge meter, a filter, and cards that say what to do next. */
.relic-wing { margin: 0 0 14px; padding: 14px; border-radius: 14px; background: linear-gradient(160deg, #e2c6940f, #08141cee 60%); border: 1px solid #e2c69433; }
.wing-head p { margin: 4px 0 10px; font-size: calc(13px * var(--ts, 1)); line-height: 1.5; color: #c6d3cd; }
.wing-head p b { color: var(--gold); }
.wing-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 8px; margin-bottom: 10px; }
.wing-slot { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 8px 10px 8px 8px; border-radius: 11px; min-height: 64px; }
.wing-slot.filled { grid-template-rows: auto auto; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 16%, transparent), #08141c 75%); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.wing-slot.filled > .ghost { grid-column: 2; justify-self: start; padding: 4px 10px; }
.wing-art { grid-row: 1 / 3; padding: 0; border: 0; width: 92px; aspect-ratio: 2 / 1; border-radius: 8px; overflow: hidden; background: #050c11; cursor: zoom-in; }
.wing-art .ship-shot { width: 100%; height: 100%; }
.wing-art .ship-shot svg { width: 100%; height: 100%; }
.wing-slot.empty { border: 1px dashed #e2c69466; background: #e2c69405; }
.wing-slot.locked { border: 1px dashed #ffffff1a; opacity: .78; }
.wing-mark { display: grid; place-items: center; width: 92px; height: 46px; border-radius: 8px; font-size: 24px; color: var(--gold); background: #e2c6940d; }
.wing-slot.locked .wing-mark { color: var(--muted); background: #ffffff06; }
.wing-text { display: grid; gap: 1px; min-width: 0; }
.wing-text small { font: 700 calc(11.5px * var(--ts, 1)) var(--mono); letter-spacing: .08em; color: var(--muted); }
.wing-slot.filled .wing-text small { color: var(--c); }
.wing-text b { font-size: calc(14px * var(--ts, 1)); font-weight: 650; }
.wing-text em { font-style: normal; font-size: calc(13px * var(--ts, 1)); line-height: 1.35; color: #b6c5bf; }
.forge-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 9px; background: #00000026; border: 1px solid var(--line); font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.forge-meter.ready { border-color: #4fdc9a55; }
.forge-meter.ready .fm-label { color: #8ff0bf; font-weight: 600; }
.fm-cost { display: flex; flex-wrap: wrap; gap: 4px; }
.fm-cost .cost-chip { margin: 0; }
.relic-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.ship-pic .pic-flag.own { background: #d6e1dc; }
.ship-pic .pic-flag.missing { color: #c6d3cd; background: #0b161dd9; border: 1px solid #ffffff2a; }
.ship-card.relic.missing { border-color: color-mix(in srgb, var(--c) 28%, transparent); }
.ship-card.relic.missing .ship-pic img { filter: saturate(.6) brightness(.82); }
.relic-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.relic-mult { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0; }
.relic-mult span { font-size: calc(12.5px * var(--ts, 1)); color: #b6c5bf; padding: 2px 8px; border-radius: 6px; background: #ffffff08; border: 1px solid #ffffff10; white-space: nowrap; }
.relic-mult b { color: var(--c); font-weight: 700; }
.relic-status { display: grid; gap: 3px; margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: #ffffff06; border: 1px solid #ffffff10; }
.relic-status small { font-size: calc(13px * var(--ts, 1)); line-height: 1.45; color: #c6d3cd; }
.relic-status.get { border-style: dashed; }
.relic-status .pity b { color: var(--gold); }
.relic-rank { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--ts, 1)); }
.relic-rank b { color: var(--c); font-size: calc(15px * var(--ts, 1)); }
.ship-card.relic .ship-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 6px; }
.ship-card.relic .ship-act > * { width: 100%; }
.forge-card.owned { background: linear-gradient(140deg, color-mix(in srgb, var(--c) 12%, transparent), #08141cee 55%); }
.forge-card .fx-tags { margin: 3px 0; }
.forge-card .sup-name strong { display: inline; }
/* Stat labels no longer run together ("SHIELDSGUNS") in narrow cards. */
.mini-stats em { overflow: hidden; white-space: nowrap; font-size: calc(10.5px * var(--ts, 1)); letter-spacing: .03em; }
@media (max-width: 640px) {
  .ak-card { grid-template-columns: 26px 26px minmax(0, 1fr); padding: 10px; column-gap: 8px; }
  .ak-ico { width: 26px; height: 26px; }
  .ak-mods-label { flex-basis: 100%; }
  .socket.socket-pill { flex-basis: 100%; }
  .relic-wing { padding: 12px; }
  .wing-slot { grid-template-columns: 76px minmax(0, 1fr); }
  .wing-art, .wing-mark { width: 76px; }
  .relic-grid .ship-pic { aspect-ratio: 3 / 1; }
  .relic-filter .quiet { display: none; }
}

/* ---- 2.38: the hangar drops its module collection; recycle several mods at once; Undo instead of popups ---- */
.sup-note { margin-top: 8px; }
.mod-grid.picking .mod-card { position: relative; cursor: pointer; padding-left: 46px; }
.mod-grid.picking .mod-actions, .mod-grid.picking .mod-vs { display: none; }
.mod-grid.picking .mod-card.selected { border-color: #ff8f74; box-shadow: 0 0 0 1px #ff8f74, 0 0 22px #ff8f7433; background: linear-gradient(140deg, #ff8f741a, transparent 60%), var(--panel, #0b161d); }
.mod-grid.picking .mod-card.protected { cursor: default; opacity: .55; }
.mod-check { position: absolute; left: 10px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 2px solid #b8d5ca66; background: #050c11; font: 700 calc(14px * var(--ts, 1))/1 var(--mono); color: #1b1408; }
.mod-check[aria-pressed=true] { background: #ff8f74; border-color: #ff8f74; }
.mod-check:disabled { opacity: 1; border-style: dashed; color: var(--muted); font-size: calc(12px * var(--ts, 1)); }
#mod-recycle:empty { display: none; }
.recycle-bar { position: sticky; bottom: calc(var(--menu-nav-h, 0px) + 10px); z-index: 6; display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #0b161df7; border: 1px solid #ff8f7466; box-shadow: 0 12px 40px #000a; backdrop-filter: blur(8px); }
.rb-head { display: grid; gap: 2px; }
.rb-head strong { font-size: calc(14.5px * var(--ts, 1)); color: #ffc0a6; }
.rb-head small { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.rb-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rb-quick > span { white-space: nowrap; font: 700 calc(11.5px * var(--ts, 1)) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.rb-quick button.ghost { padding: 5px 10px; border-radius: 999px; font-size: calc(13px * var(--ts, 1)); }
.rb-quick button.on { border-color: #ff8f74; color: #ffc0a6; background: #ff8f7414; }
.rb-quick button b { font: 700 calc(12px * var(--ts, 1)) var(--mono); opacity: .75; margin-left: 2px; }
.rb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.rb-sum { font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.rb-sum b { color: var(--text); font-size: calc(15px * var(--ts, 1)); }
.rb-acts { display: flex; gap: 6px; margin-left: auto; }
.primary.rb-go { background: linear-gradient(180deg, #ffab8f, #f0805f); color: #1b0d08; }
.primary.rb-go:hover:not(:disabled) { background: linear-gradient(180deg, #ffbba3, #f58f70); }
.undo-bar { position: fixed; left: 50%; bottom: calc(var(--menu-nav-h, 0px) + 16px); z-index: 90; translate: -50% 20px; opacity: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: min(560px, calc(100vw - 24px)); padding: 10px 12px 12px 16px; overflow: hidden; border-radius: 14px; background: #101d24f7; border: 1px solid var(--line2); box-shadow: 0 16px 48px #000c; transition: opacity .2s, translate .2s; }
.undo-bar.show { opacity: 1; translate: -50% 0; }
.undo-bar[hidden] { display: none; }
.undo-text { display: grid; gap: 3px; min-width: 0; }
.undo-text strong { font-size: calc(14px * var(--ts, 1)); }
.undo-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.undo-text .cost-chip { margin: 0; }
.undo-bar .icon-btn { padding: 6px 9px; }
.undo-time { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: left; animation: undoTime linear forwards; }
@keyframes undoTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .undo-bar { transition: none; } .undo-time { animation: none; } }
@media (max-width: 640px) {
  .rb-head small { display: none; }
  .rb-quick { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .rb-quick button { flex: none; }
  .rb-acts { width: 100%; } .rb-acts button { flex: 1; }
}

/* ---- 2.39: Meridian Station expansion: a big 3D stage and four build tracks ---- */
@media (min-width: 1101px) { .station-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.expand-stage { position: relative; height: clamp(300px, 52vw, 560px); margin: 0 0 16px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: radial-gradient(ellipse at 50% 55%, #16283a 0%, #070c12 55%, #020406 100%); }
.expand-stage > .station-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.expand-hud { position: absolute; left: 14px; top: 12px; right: 14px; display: grid; gap: 6px; max-width: 360px; pointer-events: none; }
.expand-hud .eyebrow { color: #cfe3f5; text-shadow: 0 1px 6px #000; }
.expand-bar { display: block; height: 5px; border-radius: 3px; background: #ffffff1a; overflow: hidden; }
.expand-bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--gold)); }
.expand-views { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.expand-views button { --c: var(--gold); padding: 5px 11px; border-radius: 999px; font-size: calc(13px * var(--ts, 1)); color: #dbe6e1; background: #050a0ecc; border: 1px solid #ffffff2a; backdrop-filter: blur(4px); }
.expand-views button.on { color: #10140f; background: var(--c); border-color: var(--c); }
.expand-flat { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.expand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.expand-card { --c: var(--gold); display: grid; gap: 9px; align-content: start; padding: 14px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, transparent), #08141cee 55%); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.expand-card.max { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.expand-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.expand-card header .eyebrow { color: var(--c); }
.expand-card h3 { margin: 1px 0 0; font-size: calc(17px * var(--ts, 1)); }
.expand-card .pips i.on { background: var(--c); }
.ex-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ex-ico .ico { width: 22px; height: 22px; }
.ex-desc { margin: 0; font-size: calc(13px * var(--ts, 1)); line-height: 1.45; color: #c6d3cd; }
.ex-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ex-steps li { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.ex-steps li i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font: 700 calc(12px * var(--ts, 1)) var(--mono); font-style: normal; border: 1px solid #ffffff22; }
.ex-steps li.done { color: var(--text); }
.ex-steps li.done i { color: #10140f; background: var(--c); border-color: var(--c); }
.ex-steps li.next { color: var(--text); font-weight: 600; }
.ex-steps li.next i { border-color: var(--c); color: var(--c); }
.ex-bonus { display: grid; gap: 2px; margin: 0; padding: 8px 10px; border-radius: 9px; font-size: calc(13px * var(--ts, 1)); background: #ffffff06; border: 1px solid #ffffff10; color: #c6d3cd; }
.ex-bonus b { color: var(--c); font-weight: 650; }
.ex-next { color: var(--muted); }
.ex-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ex-act .act-btn { flex: 1 1 200px; }
.station-row span { color: #cfe3f5; }
@media (max-width: 640px) { .expand-stage { height: 300px; margin-left: -4px; margin-right: -4px; } .expand-views button { padding: 4px 9px; font-size: calc(12.5px * var(--ts, 1)); } }

/* 2.41: "Almost there" — the nearest unlocks on the results screen. The dim bar is where you were before the
   battle (--p), the bright one fills to where you are now (--f), after the rewards have risen in (--d). */
.result-goals { display: grid; gap: 8px; padding: 12px; border: 1px solid #e2c69455; border-radius: 12px; background: linear-gradient(160deg, #e2c69410, #0004); animation: rise .4s .3s ease-out both; }
.result-goals.hidden { display: none; }
.goals-title { margin: 0; font: 600 calc(13px * var(--ts, 1)) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.goal { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #0006; color: var(--text); font: calc(13px * var(--ts, 1))/1.35 var(--font); text-align: left; }
button.goal { cursor: pointer; transition: border-color .15s, background .15s; }
button.goal:hover, button.goal:focus-visible { border-color: var(--gold); background: #e2c69414; }
.goal-head { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.goal-head b { font: 600 calc(14px * var(--ts, 1)) var(--mono); color: var(--gold); }
.goal-head > span { color: var(--muted); }
.goal-head .cost-chip { font-weight: 600; }
.goal-eta { font: calc(13px * var(--ts, 1)) var(--mono); color: var(--muted); white-space: nowrap; }
.goal.one .goal-eta { color: var(--mint); }
.goal.ready { border-color: #a1e1c877; }
.goal.ready .goal-head b, .goal.ready .goal-eta { color: var(--mint); }
.goal-bar { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 4px; background: #ffffff12; overflow: hidden; }
.goal-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.goal-bar .was { width: var(--p); background: #e2c69455; }
.goal-bar .now { width: var(--f); background: linear-gradient(90deg, #c9a46a, var(--gold)); box-shadow: 0 0 10px #e2c69488; animation: goal-fill 1.1s var(--d, .5s) cubic-bezier(.2, .8, .2, 1) both; }
.goal.ready .goal-bar .now { background: linear-gradient(90deg, #6fbfa2, var(--mint)); box-shadow: 0 0 10px #a1e1c888; }
@keyframes goal-fill { from { width: var(--p); } }
/* 2.50: one-tap hide on every goal, the inline Undo strip, and the settings chips. */
.goals-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.goals-set { border: 0; background: none; padding: 2px 0; color: var(--muted); font: calc(12px * var(--ts, 1)) var(--mono); cursor: pointer; }
.goals-set:hover, .goals-set:focus-visible { color: var(--gold); }
.goal-row { display: grid; grid-template-columns: 1fr 34px; gap: 6px; align-items: stretch; }
.goal-x { border: 1px solid var(--line); border-radius: 9px; background: #0006; color: var(--muted); font: calc(18px * var(--ts, 1))/1 var(--font); cursor: pointer; padding: 0; min-height: 34px; }
.goal-x:hover, .goal-x:focus-visible { color: var(--text); border-color: #ff9a8a88; background: #ff6a4a14; }
.goal-row.hidden-goal { grid-template-columns: 1fr auto auto; align-items: center; padding: 8px 11px; border: 1px dashed var(--line); border-radius: 9px; font: calc(13px * var(--ts, 1)) var(--font); color: var(--muted); }
.goal-row.hidden-goal b { color: var(--text); font-weight: 600; }
.goal-kinds-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.goal-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.goal-kinds.hidden { display: none; }
.goal-kind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font: calc(13px * var(--ts, 1)) var(--font); color: var(--text); cursor: pointer; }
.goal-kind:has(input:disabled) { opacity: .45; cursor: default; }
.goal-kind.vip { border-color: #e2c69466; }
@media (max-width: 520px) { .goal { grid-template-columns: 1fr; } .goal-eta { white-space: normal; } .goal-row.hidden-goal { grid-template-columns: 1fr auto; } .goal-row.hidden-goal .goal-gone { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .goal-bar .now { animation: none; } }

/* 2.42: expeditions and the codex */
.badge.away { color: var(--blue); border-color: #8fc9ff55; white-space: normal; }
.odds { font: 600 calc(13px * var(--ts, 1)) var(--mono); padding: 1px 6px; border-radius: 6px; margin-left: 6px; }
.odds.good { color: var(--mint); background: #a1e1c81a; } .odds.ok { color: var(--gold); background: #e2c6941a; } .odds.risky { color: var(--red); background: #ff8f741a; }
.danger-pips { font-size: calc(12px * var(--ts, 1)); letter-spacing: .05em; color: var(--muted); }
.danger-pips.d3 { color: var(--gold); } .danger-pips.d4, .danger-pips.d5 { color: var(--red); }
.exp-runs { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.exp-run { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: #0005; }
.exp-run-head { display: flex; justify-content: space-between; align-items: center; }
.exp-run.empty { border-style: dashed; color: var(--muted); place-content: center; min-height: 64px; }
.exp-run.repair { border-color: #ff8f7455; }
.exp-run .bounty-bar { display: block; height: 6px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.exp-run .bounty-bar b { display: block; height: 100%; background: linear-gradient(90deg, #6fa6d8, var(--blue)); }
.exp-when { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.exp-board { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.exp-card { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(165deg, #13282f, #0b161c); }
.exp-card-head { display: flex; gap: 10px; align-items: center; }
.exp-card-head > div { display: grid; gap: 2px; }
.exp-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(13px * var(--ts, 1)); }
.exp-pay > span { color: var(--muted); min-width: 78px; }
.exp-pay.fail { opacity: .8; } .exp-pay.fail small { color: var(--red); }
.exp-ships { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-ship { display: inline-flex; align-items: center; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line2); background: #0006; color: var(--text); font: calc(13px * var(--ts, 1)) var(--font); cursor: pointer; }
.exp-ship.on { border-color: var(--gold); background: #e2c6941c; }
.exp-go { width: 100%; }
.exp-locked { padding: 18px; border: 1px dashed var(--line2); border-radius: 12px; }
.result-rewards .exp-row { border-color: #8fc9ff55; } .result-rewards .exp-row.failed { border-color: #ff8f7455; }
.result-rewards .codex-row strong, .codex-new { color: var(--violet); }
.codex-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.codex-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: #0004; font-size: calc(13px * var(--ts, 1)); }
.codex-list li small { grid-column: 1; color: var(--muted); }
.codex-list li button { grid-column: 2; grid-row: 1 / span 2; }
.codex-list li.known span { color: var(--violet); }
.codex-list li.unknown { opacity: .55; }
.tune-lines li.target { outline: 1px dashed var(--violet); outline-offset: 2px; border-radius: 6px; }
.imprint-tag { font: 600 calc(11px * var(--ts, 1)) var(--mono); color: var(--violet); text-transform: uppercase; }
@media (max-width: 520px) { .exp-board, .exp-runs, .codex-list { grid-template-columns: 1fr; } }

/* 2.43: features that open as you play */
[data-tab].locked { opacity: .55; }
[data-tab].locked .tab-ico::after, .deck-tile.locked .deck-ico::after { content: '🔒'; position: absolute; font-size: calc(10px * var(--ts, 1)); transform: translate(10px, -6px); }
[data-tab].locked .tab-ico, .deck-tile.locked .deck-ico { position: relative; }
.deck-tile.locked { opacity: .6; }
.deck-tile.locked small { color: var(--muted); }
.locked-card { max-width: 520px; margin: 24px auto; padding: 24px; display: grid; gap: 10px; justify-items: start; border: 1px dashed var(--line2); border-radius: 14px; background: #0005; }
.locked-card .lock-ico { font-size: 28px; }
.locked-card h3 { margin: 0; font-size: 24px; }
.locked-card .lock-need { color: var(--gold); margin: 0; }
.locked-card .bounty-bar { width: 100%; height: 6px; }
#tab-locked { min-height: 50vh; }
.result-rewards .unlock-row { border-color: var(--mint); background: #a1e1c814; }
.result-rewards .unlock-row span { display: grid; gap: 2px; color: var(--mint); font-weight: 600; }
.result-rewards .unlock-row small { color: var(--muted); font-weight: 400; }
button.locked[data-set-difficulty], button.locked[data-difficulty] { opacity: .45; cursor: not-allowed; }

/* 2.44: Fleet Command */
.fleet-registry { display: grid; gap: 8px; padding: 12px; margin-bottom: 10px; border: 1px solid #e2c69444; border-radius: 12px; background: linear-gradient(160deg, #e2c6940d, #0004); }
.fleet-registry:empty { display: none; }
.registry-head { display: grid; gap: 2px; }
.registry-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 14px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.registry-roles li { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; font-size: calc(13px * var(--ts, 1)); }
.registry-roles li span { display: grid; } .registry-roles li small { color: var(--muted); font-size: calc(12px * var(--ts, 1)); }
.registry-roles .bounty-bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: #ffffff14; overflow: hidden; margin: 0; }
.registry-roles .bounty-bar b { display: block; height: 100%; background: linear-gradient(90deg, #c9a46a, var(--gold)); }
.registry-roles strong { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); }
.registry-next { color: var(--mint); }
.mastery-pips { color: var(--gold); letter-spacing: .04em; font-size: calc(12px * var(--ts, 1)); }
.fleet-mastery, .fleet-gain { display: block; font-size: calc(12px * var(--ts, 1)); margin-top: 3px; }
.fleet-gain { color: var(--mint); }
.ship-info .fleet-mastery, .ship-info .fleet-gain { font-size: calc(13px * var(--ts, 1)); margin: 4px 0; }
.bounty.order { border-left: 2px solid var(--violet); padding-left: 6px; }
.order-tag { display: inline-block; margin-right: 6px; font: 600 calc(11px * var(--ts, 1)) var(--mono); color: var(--violet); letter-spacing: .06em; }
.result-rewards .mastery-row { border-color: var(--gold); background: #e2c69414; }
.order-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px); z-index: 60; display: grid; gap: 6px; width: min(520px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--violet); border-radius: 12px; background: #120f1fee; box-shadow: 0 16px 40px #000a; opacity: 0; transition: opacity .25s, transform .25s; }
.order-toast.show { opacity: 1; transform: translate(-50%, 0); }
.order-toast div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: calc(13px * var(--ts, 1)); }
.order-toast span { color: var(--violet); font-weight: 600; }

/* 2.45: civilization sagas */
.sagas { display: grid; gap: 14px; }
.saga-list { display: grid; gap: 16px; }
.saga { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line2); border-left: 3px solid var(--race); border-radius: 14px; background: linear-gradient(165deg, #13282f, #0b161c); }
.saga.locked { opacity: .62; }
.saga.done { border-color: #a1e1c855; }
.saga header { display: grid; gap: 4px; justify-items: start; }
.saga header h3 { margin: 0; font-size: 24px; }
.saga header p { margin: 0; color: #c6d3cd; }
.saga .lock-need { color: var(--gold); }
.saga-gift { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 10px; background: #e2c69410; border: 1px solid #e2c69433; font-size: calc(13px * var(--ts, 1)); }
.saga-gift.done { background: #a1e1c814; border-color: #a1e1c855; color: var(--mint); }
.saga-gift .ship-art, .saga-gift svg, .saga-gift img { width: 72px; height: auto; flex: none; }
.saga-missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.saga-mission { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: #0005; }
.saga-mission.cleared { border-color: #a1e1c844; }
.saga-mission.locked { opacity: .55; }
.saga-ship svg, .saga-ship img { width: 96px; height: auto; display: block; }
.saga-copy { display: grid; gap: 3px; min-width: 0; }
.saga-copy small { color: #c6d3cd; }
.saga-copy .saga-loan { color: var(--mint); }
.result-rewards .unlock-row strong svg, .result-rewards .unlock-row strong img { width: 64px; height: auto; }
@media (max-width: 640px) { .saga-mission { grid-template-columns: 72px 1fr; } .saga-mission > button { grid-column: 1 / -1; } .saga-ship svg, .saga-ship img { width: 72px; } }
/* 2.45: three views (campaign, Atlas, sagas): wrap on narrow screens instead of overflowing. */
.chart-switch { flex-wrap: wrap; }
@media (max-width: 520px) { .chart-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .chart-switch button { padding: 6px 8px; gap: 6px; flex-direction: column; text-align: center; } .chart-switch button span { justify-items: center; } .chart-switch button b { font-size: calc(13px * var(--ts, 1)); } .chart-switch button small { font-size: calc(11px * var(--ts, 1)); } }

/* 2.46: expedition specialists */
.specialist { color: var(--gold); }
.exp-pay small.specialist { margin-left: 6px; font-size: calc(12px * var(--ts, 1)); }
.fleet-calling { display: block; font-size: calc(12px * var(--ts, 1)); color: var(--muted); margin-top: 2px; }

/* 2.47: Threat */
.threat-pick { margin-top: 12px; padding: 12px; border: 1px solid #ff8f7444; border-radius: 12px; background: linear-gradient(160deg, #ff8f740d, #0004); display: grid; gap: 8px; }
.threat-row { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.threat-btn { padding: 6px 0; border-radius: 8px; border: 1px solid var(--line2); background: #0006; color: var(--text); font: 600 calc(13px * var(--ts, 1)) var(--mono); cursor: pointer; }
.threat-btn.won { border-color: #ff8f7466; }
.threat-btn.on { background: var(--red); color: #1a0b07; border-color: var(--red); }
.threat-btn:disabled { opacity: .35; cursor: not-allowed; }
.threat-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.threat-rules b { color: var(--red); font-weight: 600; }
.threat-pay { margin: 0; font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); }
.threat-row .threat-btn { background: #0006; color: var(--text); }
.threat-row .threat-btn.on { background: var(--red); color: #1a0b07; border-color: var(--red); }

/* 2.56: difficulty medals. */
.medal-glyph { color: var(--medal, var(--gold)); font-style: normal; text-shadow: 0 0 8px var(--medal, var(--gold)); }
.result-rewards .medal-row { border-color: var(--medal, var(--gold)); background: #ffffff08; }
.medal-note, .difficulty-hint { display: block !important; margin: 4px 0 0; font-size: calc(13px * var(--ts, 1)); }
.medal-note { color: var(--medal); }
.difficulty-grid button { position: relative; }
.card-medal { position: absolute; top: 6px; right: 8px; font-size: calc(13px * var(--ts, 1)); }
.difficulty-hint { color: #ffcf8a; }

/* 2.60: a signature skill's live state on its button. */
.ability .ab-state { position: absolute; bottom: 7px; right: 8px; z-index: 2; font: 700 calc(10.5px * var(--ts, 1)) var(--mono); color: #7af0ff; letter-spacing: .04em; pointer-events: none; }
.ability .ab-state:empty { display: none; }
.ability.charging { border-color: var(--gold); }
.ability.charging::before { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--charge, 0) * 100%); background: linear-gradient(90deg, #ffd27a, #fff3c4); box-shadow: 0 0 10px #ffd27a; z-index: 2; }
.ability.charging .ab-state { color: var(--gold); }
.ability.again { border-color: #7af0ff; box-shadow: 0 0 0 2px #7af0ff66, 0 0 18px #7af0ff55; }
.ability.parry { border-color: #fff0c0; box-shadow: 0 0 0 2px #fff0c088, 0 0 18px #fff0c066; }
.ability.parry .ab-state { color: #fff0c0; }
@media (prefers-reduced-motion: no-preference) { .ability.again { animation: ab-again .35s ease-in-out infinite alternate; } }
@keyframes ab-again { to { box-shadow: 0 0 0 3px #7af0ffaa, 0 0 24px #7af0ff88; } }

/* 2.61: badges that say what they mean. */
.deck-tile small.deck-why { color: var(--mint); font-weight: 600; }
.deck-tile.active small.deck-why { color: #4a3510; }
.ready-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.ready-now .ready-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ready-hide { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.ready-hide:hover, .ready-hide:focus-visible { color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .deck-arrive { animation: deck-arrive .9s ease-out; } }
@keyframes deck-arrive { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 24px #e2c69466; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ready-item { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid #a1e1c855; background: #0f2a2acc; color: var(--text); text-align: left; font: calc(13px * var(--ts, 1)) var(--font); cursor: pointer; }
.ready-item:hover, .ready-item:focus-visible { border-color: var(--mint); }
.ready-item b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--mint); color: #062018; font: 800 calc(12px * var(--ts, 1)) var(--mono); }
.ready-item.relic b { background: #d8435a; color: #fff; }
.ready-item span { min-width: 0; }
.ready-item strong { font-weight: 650; margin-right: 4px; }
.ready-item i { font-style: normal; color: var(--mint); }

/* 2.62: difficulty for the Atlas and the sagas. */
.mode-diff { display: grid; gap: 6px; margin: 10px 0; }
.mode-diff-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-diff-row button { display: grid; gap: 1px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line2); background: #0a1a22; color: var(--muted); font: 600 calc(13px * var(--ts, 1)) var(--font); cursor: pointer; text-align: left; }
.mode-diff-row button span { font: calc(10px * var(--ts, 1)) var(--mono); letter-spacing: -.05em; color: var(--gold); opacity: .8; }
.mode-diff-row button.on { border-color: var(--gold); color: var(--text); background: #2b2616cc; }
.mode-diff-pay { margin: 0; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.saga-medal { display: block; color: var(--medal, var(--muted)); }

/* 2.63: soft cuts between a chapter's shots. */
.cin-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* 2.64: the Fleet Advisor (AI help chat). */
.advisor-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #c9a2ff66; background: #1c1430cc; color: #e9dcff; font: 600 calc(13px * var(--ts, 1)) var(--font); cursor: pointer; }
.advisor-btn span { color: var(--violet); }
.advisor-btn:hover, .advisor-btn.on { border-color: var(--violet); background: #2a1d48; }
.advisor { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: 12px; top: 72px; width: min(420px, calc(100vw - 24px)); z-index: 90; display: grid; grid-template-rows: auto 1fr auto auto; border-radius: 16px; border: 1px solid #c9a2ff55; background: #0b1119f2; box-shadow: 0 20px 60px #000c; backdrop-filter: blur(8px); overflow: hidden; }
.advisor[hidden] { display: none; }
.adv-head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--line); }
.adv-head b { display: block; font-size: calc(15px * var(--ts, 1)); }
.adv-head small { color: var(--muted); font-size: calc(12px * var(--ts, 1)); }
.adv-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2a1d48; color: var(--violet); }
.adv-log { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; min-height: 0; }
.adv-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: calc(13.5px * var(--ts, 1)); line-height: 1.5; }
.adv-msg p { margin: 0 0 6px; } .adv-msg p:last-child { margin-bottom: 0; }
.adv-msg ul, .adv-msg ol { margin: 4px 0 6px; padding-left: 20px; } .adv-msg li { margin: 2px 0; }
.adv-msg code { font: calc(13px * var(--ts, 1)) var(--mono); background: #ffffff12; padding: 1px 4px; border-radius: 4px; }
.adv-msg .adv-h { font-weight: 700; color: var(--gold); }
.adv-msg.user { align-self: flex-end; background: #2a1d48; color: #f1e9ff; border-bottom-right-radius: 4px; }
.adv-msg.assistant { align-self: flex-start; background: #12222b; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.adv-msg.error { align-self: stretch; max-width: none; background: #3a1414aa; border: 1px solid #ff8f7455; color: #ffd2c6; }
.adv-msg.streaming:empty::after { content: '…'; color: var(--muted); }
.adv-starters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.adv-starters:empty { display: none; }
.adv-chip { padding: 6px 10px; border-radius: 999px; border: 1px solid #c9a2ff44; background: transparent; color: #e3d6ff; font: calc(13px * var(--ts, 1)) var(--font); cursor: pointer; text-align: left; }
.adv-chip:hover { border-color: var(--violet); }
.adv-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.adv-form textarea { resize: none; min-height: 42px; max-height: 120px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line2); background: #06101a; color: var(--text); font: calc(14px * var(--ts, 1)) var(--font); }
.adv-form textarea:focus { outline: none; border-color: var(--violet); }
.advisor.busy .adv-form button { background: #3a2a10; color: var(--gold); }
@media (max-width: 640px) { .advisor { inset: 0; width: auto; top: 0; border-radius: 0; } .advisor-btn b { display: none; } }

/* 2.66: leaderboards and titles */
.lb-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.lb-boards, .lb-you { min-width: 0; display: grid; gap: 12px; }
.lb-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-switch button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font: 600 calc(13px * var(--ts, 1)) var(--font); cursor: pointer; }
.lb-switch button[aria-selected="true"] { color: #071017; background: var(--gold); border-color: var(--gold); }
.lb-board-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.lb-board-head p { margin: 0; color: var(--muted); font-size: calc(13px * var(--ts, 1)); max-width: 60ch; }
.lb-reset { flex: none; font: 600 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 5px 9px; border: 1px solid var(--line2); border-radius: 8px; white-space: nowrap; }
.lb-reset b { color: var(--gold); }
.lb-chase { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--mint) 40%, transparent); border-radius: 12px; background: #a1e1c80f; font-size: calc(14px * var(--ts, 1)); }
.lb-chase b { color: var(--mint); }
.lb-place { font: 700 20px var(--mono); color: var(--gold); }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-r { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, .02); }
.lb-pos { font: 700 calc(15px * var(--ts, 1)) var(--mono); color: var(--muted); text-align: center; }
.lb-who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lb-who b { font: calc(16px * var(--ts, 1)) var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-title { font: 600 calc(11.5px * var(--ts, 1)) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-crown { font-size: calc(15px * var(--ts, 1)); color: var(--gold); text-shadow: 0 0 10px #e2c69480; }
.lb-val { display: grid; justify-items: end; line-height: 1.15; }
.lb-val b { font: 700 calc(15px * var(--ts, 1)) var(--mono); color: var(--text); }
.lb-val small { color: var(--muted); font-size: calc(12px * var(--ts, 1)); }
.lb-r.top-1 { border-color: #e2c69488; background: linear-gradient(90deg, #e2c6941f, transparent); }
.lb-r.top-1 .lb-pos { color: var(--gold); font-size: calc(18px * var(--ts, 1)); }
.lb-r.top-2 .lb-pos { color: #d7e2e6; } .lb-r.top-3 .lb-pos { color: #d9a06b; }
.lb-r.me { border-color: var(--mint); background: linear-gradient(90deg, #a1e1c81c, transparent); }
.lb-r.me.apart { margin-top: 10px; position: relative; }
.lb-r.me.apart::before { content: '⋯'; position: absolute; top: -17px; left: 22px; color: var(--muted); }
.lb-empty { margin: 0; padding: 22px 16px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--muted); font-size: calc(13px * var(--ts, 1)); text-align: center; }
.lb-err { margin: 0; color: var(--red); font-size: calc(13px * var(--ts, 1)); }
.lb-card { padding: 14px 16px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(160deg, #102226, #0b151b); }
.lb-me { display: grid; gap: 10px; }
.lb-foot { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lb-me-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lb-me-name { display: grid; gap: 2px; min-width: 0; }
.lb-me-name b { font: 22px var(--serif); overflow: hidden; text-overflow: ellipsis; }
.lb-me-rating { display: grid; justify-items: end; }
.lb-me-rating b { font: 700 20px var(--mono); color: var(--gold); }
.lb-me-rating small { color: var(--muted); font-size: calc(12px * var(--ts, 1)); text-transform: uppercase; letter-spacing: .12em; }
.lb-crown-note { margin: 0; font-size: calc(13px * var(--ts, 1)); color: var(--gold); }
.lb-sub { margin: 4px 0 0; font: 600 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lb-sub small { letter-spacing: 0; text-transform: none; font-family: var(--font); }
.lb-titles { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--text); font: 600 calc(13px * var(--ts, 1)) var(--font); cursor: pointer; }
.lb-chip.on { border-color: var(--violet); color: var(--violet); background: #c9a2ff1a; }
.lb-chip:hover:not(.on) { border-color: var(--mint); }
.lb-locked summary { cursor: pointer; color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.lb-locked ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.lb-locked li b { color: var(--text); }
.lb-join { display: grid; gap: 10px; }
.lb-join p { margin: 0; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.lb-join label { display: grid; gap: 4px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.lb-join input { width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line2); background: #08110f; color: var(--text); font: calc(16px * var(--ts, 1)) var(--font); }
.lb-join button { justify-self: start; }
.lb-how { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.lb-how summary { cursor: pointer; color: var(--text); }
.lb-how p { margin: 8px 0 0; }
.lb-how b { color: var(--text); }
.result-rewards .lb-row { border-color: var(--gold); background: #e2c69412; }
.result-rewards .lb-row span { color: var(--gold); font-weight: 600; }
.result-rewards .lb-row b { color: var(--gold); }
.lb-up { color: var(--mint); font-weight: 600; }
@media (max-width: 860px) {
  .lb-layout { grid-template-columns: 1fr; }
  .lb-board-head { flex-direction: column; }
  .lb-r { grid-template-columns: 34px minmax(0, 1fr) auto; padding-right: 10px; }
  .lb-who { flex-direction: column; gap: 0; }
}

.tl-short { display: none; }
@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; }
  .tabs button { min-width: 0; flex: 1 1 0; white-space: nowrap; font-size: calc(10.5px * var(--ts, 1)); }
  .tabs button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tabs .tab-ico { width: 38px; }
  .tl-long { display: none; } .tl-short { display: inline; }
}

/* 2.67: boss presence: phase marks and pips, the entrance card, the phase flash */
.boss-bar i.hp { position: relative; overflow: visible; }
.boss-bar i.hp > b { border-radius: 4px; }
.boss-marks { position: absolute; inset: -3px 0; pointer-events: none; }
.boss-marks span { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff3e0; box-shadow: 0 0 6px #fff, 0 0 0 1px #0009; }
.boss-marks span.past { background: #ffffff40; box-shadow: none; }
.boss-pips { display: inline-flex; gap: 4px; align-self: center; }
.boss-pips i { width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); border: 1px solid #ff8f74aa; background: transparent; }
.boss-pips i.on { background: #ff8f74; box-shadow: 0 0 8px #ff8f74; }
.boss-card { position: absolute; inset: 0; z-index: 40; pointer-events: none; --boss: #ff8f74; }
.boss-card.hidden { display: none; }
.bc-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.bc-bar.top { top: 0; transform: translateY(-100%); } .bc-bar.bottom { bottom: 0; transform: translateY(100%); }
.boss-card.in .bc-bar { transform: none; }
.bc-body { position: absolute; left: 50%; bottom: calc(11vh + 26px); width: min(640px, 90vw); transform: translate(-50%, 16px); opacity: 0; transition: opacity .5s .25s, transform .6s .25s cubic-bezier(.2, .8, .2, 1); text-align: center; display: grid; gap: 8px; justify-items: center; }
.boss-card.in .bc-body { opacity: 1; transform: translate(-50%, 0); }
.boss-card.out .bc-body { opacity: 0; transition-delay: 0s; transition-duration: .3s; }
.bc-kicker { font: 600 calc(13px * var(--ts, 1)) var(--mono); letter-spacing: .32em; color: var(--boss); text-shadow: 0 0 14px color-mix(in srgb, var(--boss) 60%, transparent); }
.bc-body h2 { margin: 0; font: 400 clamp(34px, 5.4vw, 64px)/1 var(--serif); letter-spacing: .05em; color: #fff3ea; text-transform: uppercase; text-shadow: 0 0 40px color-mix(in srgb, var(--boss) 70%, transparent), 0 4px 18px #000; }
.bc-body h2::after { content: ''; display: block; height: 2px; margin: 14px auto 0; width: 0; background: linear-gradient(90deg, transparent, var(--boss), transparent); transition: width .9s .45s; }
.boss-card.in .bc-body h2::after { width: 100%; }
.bc-body p { margin: 0; max-width: 52ch; font-size: calc(15px * var(--ts, 1)); color: #e6ebe3; text-shadow: 0 2px 8px #000; }
.bc-phases { display: inline-flex; gap: 6px; align-items: center; }
.bc-phases i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--boss); box-shadow: 0 0 8px var(--boss); }
.bc-phases b { margin-left: 6px; font: 700 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .2em; color: var(--boss); }
.bc-body small { font: calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .12em; color: #ffffff80; }
.phase-flash { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0; box-shadow: inset 0 0 160px 40px var(--c, #ff6a8a); }
.phase-flash.go { animation: phase-flash 1.1s ease-out; }
@keyframes phase-flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }
.banner.phase strong { letter-spacing: .14em; }
@media (prefers-reduced-motion: reduce) { .bc-bar, .bc-body, .bc-body h2::after { transition: none; } .phase-flash.go { animation-duration: .5s; } }
@media (max-width: 640px) { .bc-bar { height: 7vh; } .bc-body { bottom: calc(7vh + 14px); } .bc-body p { font-size: calc(13px * var(--ts, 1)); } }
body.boss-intro .hud > *:not(.boss-card):not(.banner) { opacity: 0; transition: opacity .3s; pointer-events: none; }
body.boss-intro .hud > * { transition: opacity .3s; }

/* 2.68: heavy strike call and perfect dodge */
.heavy-call { position: absolute; left: 50%; top: 61%; transform: translate(-50%, 6px); display: grid; justify-items: center; gap: 3px; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; text-align: center; z-index: 6; }
.heavy-call.show { opacity: 1; transform: translate(-50%, 0); }
.heavy-call b { font: 700 calc(15px * var(--ts, 1)) var(--mono); letter-spacing: .2em; color: #ffd0c4; padding: 4px 12px; border: 1px solid #ff6a4a; border-radius: 6px; background: #3a0d08cc; text-shadow: 0 0 10px #ff6a4a; }
.heavy-call.on-you b { color: #fff; background: #b02a16e6; animation: heavy-blink .22s steps(2) infinite; }
.heavy-call span { font-size: calc(12px * var(--ts, 1)); color: #ffe6dc; text-shadow: 0 1px 4px #000; }
.heavy-call kbd { font: 700 calc(10px * var(--ts, 1)) var(--mono); padding: 1px 5px; border: 1px solid #ffffff66; border-radius: 4px; }
.heavy-call.dodged b { color: #0b1a17; background: linear-gradient(180deg, #e9fff8, #8ff5df); border-color: #e9fff8; text-shadow: none; box-shadow: 0 0 22px #8ff5df99; animation: none; }
@keyframes heavy-blink { 50% { background: #3a0d08e6; } }
@media (prefers-reduced-motion: reduce) { .heavy-call.on-you b { animation: none; } }

/* 2.71: fourteen sagas: filter chips, region groups, one-line locked sagas, folded finished ones with their ending */
.saga-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.saga-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font: 600 calc(13px * var(--ts, 1)) var(--font); cursor: pointer; }
.saga-chip b { color: var(--text); margin-left: 3px; }
.saga-chip[aria-pressed="true"] { color: #1b1408; background: var(--gold); border-color: var(--gold); }
.saga-chip[aria-pressed="true"] b { color: #1b1408; }
.saga-group { margin: 10px 0 -4px; font: 600 calc(12px * var(--ts, 1)) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.saga-list > .saga-group:first-child { margin-top: 0; }
.saga.compact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px 16px; }
.saga.compact header h3 { font-size: 19px; }
.saga.compact header p { font-size: calc(13px * var(--ts, 1)); }
.saga.compact .lock-need { margin: 2px 0 0; font-size: calc(13px * var(--ts, 1)); }
.saga-gift-mini svg, .saga-gift-mini img, .saga-gift-mini .ship-art { width: 110px; height: auto; display: block; opacity: .8; filter: grayscale(.4); }
.saga-ending { margin: 0; padding: 10px 14px; border-left: 3px solid var(--race); background: #ffffff08; border-radius: 0 10px 10px 0; font: italic calc(15px * var(--ts, 1))/1.5 var(--serif); color: #e6ebe3; }
.saga-more summary { cursor: pointer; color: var(--muted); font-size: calc(13px * var(--ts, 1)); padding: 4px 0; }
.saga-more[open] summary { margin-bottom: 8px; }
.saga-more .saga-missions { margin-top: 8px; }
@media (max-width: 640px) { .saga.compact { grid-template-columns: 1fr; } .saga-gift-mini { display: none; } }
/* 2.71: a ship picture still being drawn (its SVG stand-in) keeps the size of the picture it stands in for */
.saga-gift .ship-shot { width: 72px; flex: none; display: block; }
.saga-gift-mini .ship-shot { width: 110px; display: block; }
.saga-ship .ship-shot { width: 96px; display: block; }
.saga-gift .ship-shot svg, .saga-gift-mini .ship-shot svg, .saga-ship .ship-shot svg { width: 100%; height: auto; display: block; }

/* 2.77: 3D previews and skill demonstrations from the sagas (and in every ship inspector) */
button.saga-ship, .saga-gift-art, button.saga-gift-mini { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
button.saga-ship .pic-hint { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font: 700 calc(10.5px * var(--ts, 1)) var(--mono); letter-spacing: .08em; white-space: nowrap; color: var(--gold); background: #000a; padding: 1px 6px; border-radius: 6px; opacity: .85; }
button.saga-ship:hover, .saga-gift-art:hover, button.saga-gift-mini:hover { outline: 1px solid var(--gold); outline-offset: 3px; }
.saga-gift-art svg, .saga-gift-art img, .saga-gift-art .ship-shot { width: 72px; height: auto; display: block; }
.saga-loan .link { font-size: calc(13px * var(--ts, 1)); }
.insp-demo { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.insp-demo button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line2); background: #ffffff0a; color: var(--text); font: 600 calc(13px * var(--ts, 1)) var(--font); cursor: pointer; }
.insp-demo button kbd { font: 700 calc(11px * var(--ts, 1)) var(--mono); padding: 1px 5px; border-radius: 4px; border: 1px solid #ffffff44; }
.insp-demo button.on { border-color: var(--gold); background: #e2c69422; color: var(--gold); }
.insp-demo-text { flex-basis: 100%; margin: 2px 0 0; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; min-height: 2.6em; }
.insp-demo-text b { color: var(--text); }
.insp-saga { margin: 8px 0 4px; padding: 8px 12px; border-left: 3px solid var(--gold); background: #e2c69410; border-radius: 0 10px 10px 0; font-size: calc(13px * var(--ts, 1)); }

/* 2.80 fleet synergies */
.syn-panel { margin-bottom: 18px; }
.syn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.syn-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--syn) 45%, transparent); background: #ffffff05; }
.syn-card.on { border-style: solid; border-color: color-mix(in srgb, var(--syn) 70%, transparent); background: color-mix(in srgb, var(--syn) 9%, #0b141a); box-shadow: inset 0 0 22px color-mix(in srgb, var(--syn) 14%, transparent); }
.syn-card strong { color: var(--syn); font-size: calc(15px * var(--ts, 1)); }
.syn-card:not(.on) strong { opacity: .8; }
.syn-card small { color: var(--muted); line-height: 1.45; } .syn-card small b { color: #d8e4e0; font-weight: 600; }
.syn-card .syn-fx { color: #e9f2ee; font: 600 calc(13px * var(--ts, 1)) var(--mono); }
.syn-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.syn-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font: 700 calc(12px * var(--ts, 1)) var(--mono); color: var(--syn); border: 1px solid color-mix(in srgb, var(--syn) 55%, transparent); background: color-mix(in srgb, var(--syn) 10%, transparent); }

/* ---------- 2.83: easier to read ---------- */
/* Text size: every small font size above is calc(Npx * var(--ts)). The battle HUD keeps its own size so its buttons
   never overflow, except the words you read in battle: the mission panel, training tips, subtitles and the pause menu. */
:root { --ts: 1; --ts-user: 1; }
html[data-textsize=large] { --ts: 1.12; --ts-user: 1.12; }
html[data-textsize=larger] { --ts: 1.25; --ts-user: 1.25; }
#hud { --ts: 1; }
#hud :is(.hud-top-left, .tutorial, .voice-sub, .whisper), .pause-card { --ts: var(--ts-user); }
/* The phone's bottom menu has eight tabs in one row: its labels keep their size. */
@media (max-width: 640px) { .tabs { --ts: 1; } .tabs button { font-size: 10.5px; } }

/* Battle words stay readable over bright planets and nebulae: a tight dark outline instead of a soft glow. */
.hud-top-left, .hud-clock, .hud-chain, .alerts, .voice-sub, .whisper, .hud-top-left .quest-list { text-shadow: 0 1px 2px #000, 0 0 6px #000d; }
.hud-top-left p { color: #c3f3df; }
.hud-clock small { color: #d6e2dc; letter-spacing: .2em; }
.hud-chain > span { color: #d6e2dc; letter-spacing: .25em; }

/* The help button in the top bar; it glows until it has been opened once. */
.help-btn { font: 700 calc(16px * var(--ts, 1)) var(--font); color: var(--gold); border-color: #e2c69466; }
.help-btn.fresh { animation: help-glow 2.4s ease-in-out infinite; }
@keyframes help-glow { 50% { box-shadow: 0 0 0 4px #e2c69433, 0 0 18px #e2c69466; } }
body.reduced .help-btn.fresh { animation: none; box-shadow: 0 0 0 3px #e2c69444; }

/* How to play */
#help-dialog { width: min(760px, 94vw); max-height: 92vh; }
.help-body { position: relative; gap: 12px; padding: 26px clamp(16px, 4vw, 30px); }
.help-body h2 { font-size: clamp(26px, 5vw, 34px); padding-right: 40px; }
.help-body h3 { font: 600 calc(13px * var(--ts, 1)) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 14px; }
.help-lead { font-size: calc(16px * var(--ts, 1)); color: #d7e2dc !important; }
.help-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.help-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; background: #0a171d; }
.help-steps i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 calc(16px * var(--ts, 1)) var(--mono); font-style: normal; color: #1b1408; background: linear-gradient(180deg, #f6dea4, #d4a95e); }
.help-steps span > b, .help-tab span > b { display: block; font-size: calc(15px * var(--ts, 1)); }
.help-steps small b { color: var(--text); font-weight: 650; }
.help-steps small, .help-tab small { display: block; color: #c6d3cd; font-size: calc(14px * var(--ts, 1)); line-height: 1.45; margin-top: 2px; }
.help-tabs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.help-tab { width: 100%; height: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; padding: 10px 12px; border-radius: 10px; background: #0a171d; }
.help-tab .ico { width: 22px; height: 22px; color: var(--mint); margin-top: 1px; }
.help-tab em { display: block; margin-top: 4px; font-style: normal; font-size: calc(13px * var(--ts, 1)); color: var(--gold); }
.help-tab.locked b, .help-tab.locked .ico { opacity: .7; }
.help-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.help-col h4 { margin: 4px 0 8px; font-size: calc(14px * var(--ts, 1)); color: var(--text); }
.help-keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: calc(14px * var(--ts, 1)); }
.help-keys dt { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); white-space: nowrap; }
.help-keys dd { margin: 0; color: #c6d3cd; }
.help-note { font-size: calc(14px * var(--ts, 1)); margin-top: 6px; }
.help-note .link { font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.help-size { display: flex; flex-wrap: wrap; gap: 8px; }
.help-size button { min-width: 96px; font-size: calc(14px * var(--k, 1)); }
.help-size button[aria-pressed=true] { border-color: var(--gold); background: #e2c6941f; color: var(--gold); }
.help-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (max-width: 640px) { .help-steps, .help-tabs, .help-controls { grid-template-columns: 1fr; } }

/* Controls in the pause menu */
.pause-card { max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.pause-keys { text-align: left; border: 1px solid var(--line2); border-radius: 10px; padding: 0 12px; max-height: 42vh; overflow: auto; }
.pause-keys summary { cursor: pointer; padding: 10px 0; font-weight: 650; color: var(--gold); }
.pause-keys dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; font-size: calc(13px * var(--ts, 1)); }
.pause-keys dt { font: 600 calc(12px * var(--ts, 1)) var(--mono); color: var(--gold); }
.pause-keys dd { margin: 0; color: #c6d3cd; }
@media (max-width: 640px) {
  /* On a phone the wallet row is full, so the help button sits at the end of the brand row. */
  .topbar { position: relative; z-index: auto; }
  .topbar .wallet { position: static; }
  .topbar .wallet-pop { left: clamp(14px, 4vw, 48px); right: clamp(14px, 4vw, 48px); width: auto; }
  .wallet .help-btn { position: absolute; top: 10px; right: clamp(14px, 4vw, 48px); }
}

/* ---------- 2.84: battle videos ---------- */
.hud-buttons .rec-btn { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--mono); letter-spacing: .08em; }
.rec-btn i { width: 9px; height: 9px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 0 2px #ff5a4a33; }
.rec-btn small { font: 700 10px var(--mono); padding: 1px 5px; border-radius: 6px; background: #ffffff1a; color: #ffd9a8; }
.rec-btn.on { border-color: #ff6a55; background: #3a0d0bd9; color: #ffd6cf; }
.rec-btn.on i { animation: rec-blink 1s steps(2, start) infinite; }
.rec-btn.auto i { background: #ff8a6b; }
@keyframes rec-blink { to { opacity: .2; } }
body.reduced .rec-btn.on i { animation: none; }
.result-videos { display: grid; gap: 8px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.vid-wrap { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 12px; align-items: start; }
.vid-preview { width: 100%; max-height: 300px; border-radius: 10px; background: #000; border: 1px solid var(--line2); }
.vid-preview.landscape { aspect-ratio: 16 / 9; } .vid-preview.vertical { aspect-ratio: 9 / 16; max-height: 300px; width: auto; justify-self: center; } .vid-preview.square { aspect-ratio: 1; }
.vid-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 300px; overflow: auto; }
.vid-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #0a171d; }
.vid-list li.on { border-color: #e2c69488; background: #e2c69412; }
.vid-pick { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; text-align: left; border: 0; padding: 2px; background: transparent; }
.vid-pick:hover:not(:disabled) { background: transparent; }
.vid-pick b { display: block; font-size: calc(14px * var(--ts, 1)); }
.vid-pick small { display: block; color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
.vid-ico { color: #ff8a6b; font-weight: 700; }
.vid-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vid-acts button { padding: 6px 10px; font-size: calc(13px * var(--ts, 1)); }
.vid-acts .vid-del { padding: 6px 9px; }
.vid-note, .vid-busy, .vid-tip, .vid-empty { margin: 0; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
.vid-tip { color: #d7e2dc; }
.vid-note .link, .vid-tip .link { font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vid-busy::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #ff8a6b; animation: rec-blink 1s steps(2, start) infinite; }
.vid-recent { display: block; }
.vid-recent .vid-wrap { grid-template-columns: 1fr; }
.vid-recent .vid-preview { max-height: 240px; }
.vid-head { display: block; margin-bottom: 8px; }
@media (max-width: 640px) { .vid-wrap { grid-template-columns: 1fr; } .vid-list li { grid-template-columns: 1fr; } .vid-acts { justify-content: flex-start; } }
.hud-buttons .rec-btn[hidden] { display: none; }
/* The Video group takes the whole row under the other three, its settings side by side. */
@media (min-width: 901px) {
  .settings-groups .video-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
  .settings-groups .video-group > legend { grid-column: 1 / -1; }
  .settings-groups .video-group > .vid-recent { grid-column: 1 / -1; }
  .video-group .vid-recent .vid-wrap { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}


/* 2.90: the hunt card (star chart), its result line, hunt buttons and the hangar's play styles */
#hunt-card:empty { display: none; }
.hunt-card { --c: #f0b45a; margin: 12px 0 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, transparent), #08141cee 60%); display: grid; gap: 10px; }
.hunt-card.empty { border-style: dashed; border-color: var(--line2); background: #0b18207a; }
.hunt-card.empty p { margin: 4px 0 0; color: #c6d3cd; font-size: calc(14px * var(--ts, 1)); }
.hunt-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hunt-top .eyebrow { color: var(--c); }
.hunt-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.hunt-main h3 { margin: 0 0 2px; font-size: calc(18px * var(--ts, 1)); }
.hunt-effect { margin: 0; color: #d6e2dc; font-size: calc(14px * var(--ts, 1)); }
.hunt-builds { margin: 4px 0 0; color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.hunt-ship { display: block; width: 96px; }
.hunt-ship img, .hunt-ship svg { width: 100%; height: auto; display: block; }
.hunt-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.hunt-way { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; background: #00000030; border: 1px solid var(--line); }
.hunt-way b { font-size: calc(14px * var(--ts, 1)); }
.hunt-step { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 28%, transparent); color: var(--text); font: 700 calc(13px * var(--ts, 1)) var(--mono); }
.hunt-srcs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.hunt-srcs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; font-size: calc(13px * var(--ts, 1)); }
.hunt-meter { height: 8px; border-radius: 99px; background: #ffffff14; overflow: hidden; margin: 8px 0 6px; }
.hunt-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c, #e2c694) 70%, #fff 0%), var(--c, #e2c694)); }
.hunt-meter.ready i { background: linear-gradient(90deg, #4fdc9a, #8ff0bf); }
.hunt-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; margin-bottom: 6px; }
.hunt-way .act-btn, .hunt-way .primary { margin-top: 4px; }
.hunt-btn { margin-top: 6px; justify-self: start; border: 1px solid #f0b45a77; background: #f0b45a14; color: #f6d39a; border-radius: 999px; padding: 6px 12px; font: 600 calc(13px * var(--ts, 1)) var(--font); cursor: pointer; }
.hunt-btn:hover, .hunt-btn:focus-visible { background: #f0b45a2a; border-color: #f0b45a; }
.hunt-btn.on { background: #f0b45a; color: #1a1205; border-color: #f0b45a; }
.hunt-result { padding: 10px 12px; border-radius: 10px; border: 1px solid #f0b45a55; background: #f0b45a12; --c: #f0b45a; }
.hunt-result p { margin: 4px 0 0; font-size: calc(14px * var(--ts, 1)); }
.hunt-result.done { border-color: #4fdc9a77; background: #4fdc9a14; }
.hunt-result.done .eyebrow { color: #8ff0bf; }
.builds { margin-bottom: 18px; }
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.build-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(160deg, #13282f, #08141c); }
.build-card.hunting { border-color: #f0b45a; box-shadow: 0 0 0 1px #f0b45a55 inset; }
.build-card.complete { border-color: #4fdc9a88; }
.build-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.build-head strong { font-size: calc(16px * var(--ts, 1)); }
.build-count { font: 600 calc(13px * var(--ts, 1)) var(--mono); color: var(--gold); }
.build-tag { margin: 0; color: #d0dcd6; font-size: calc(13px * var(--ts, 1)); }
.build-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: calc(13px * var(--ts, 1)); }
.build-pieces li { display: flex; gap: 6px; align-items: baseline; color: var(--muted); }
.build-pieces li i { font-style: normal; width: 1em; text-align: center; }
.build-pieces li.own { color: var(--text); }
.build-pieces li.fit i { color: #8ff0bf; }
.build-pieces li.own:not(.fit) i { color: var(--gold); }
.build-pieces li em { font-style: normal; font-size: calc(11px * var(--ts, 1)); color: #f6d39a; border: 1px solid #f0b45a55; border-radius: 4px; padding: 0 4px; }
.build-more summary { cursor: pointer; color: var(--gold); font-size: calc(13px * var(--ts, 1)); }
.build-more p { margin: 6px 0 0; font-size: calc(13px * var(--ts, 1)); color: #c6d3cd; }
.build-weak b { color: #ffb39e; }
.build-acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.build-acts .hunt-btn { margin-top: 0; }
.bp-done { color: #8ff0bf; font-size: calc(13px * var(--ts, 1)); }
@media (max-width: 600px) {
  .hunt-main { grid-template-columns: 1fr; }
  .hunt-ways { grid-template-columns: 1fr; }
}
/* 2.90: the command deck's hunt line and the station's named catalyst chips */
.deck-link.deck-hunt { border-color: #f0b45a66; background: linear-gradient(135deg, #f0b45a14, transparent 70%); }
.deck-link.deck-hunt .eyebrow { color: #f6d39a; }
.th-cats span small { color: var(--muted); font-size: calc(12px * var(--ts, 1)); margin-left: 2px; }
@media (max-width: 600px) {
  /* Phones: the play styles are one swipeable row, so the equipment bay stays close. */
  .build-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; overscroll-behavior-x: contain; }
  .build-card { scroll-snap-align: start; }
}
/* The pinned hunt stays solid gold under the pointer too (a general button hover rule is more specific). */
button.hunt-btn.on, button.hunt-btn.on:hover, button.hunt-btn.on:focus-visible { background: #f0b45a; color: #1a1205; border-color: #f0b45a; }
button.hunt-btn.on:hover { background: #f6c472; }

/* 2.91: blueprints */
.bp-need { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px dashed #8fc9ff77; background: #8fc9ff0f; margin-top: 6px; }
.bp-need .eyebrow { color: #a9d6ff; }
.bp-need p { margin: 0; font-size: calc(13px * var(--ts, 1)); color: #d0dcd6; }
.bp-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bp-acts .hunt-btn { margin-top: 0; }
.bp-badge { border-color: #8fc9ff88 !important; color: #a9d6ff !important; background: #8fc9ff14 !important; }
.saga-bp { display: block; margin: 4px 0; padding: 4px 8px; border-radius: 8px; border: 1px dashed #8fc9ff66; background: #8fc9ff0d; color: #cfe6ff; font-size: calc(12.5px * var(--ts, 1)); }
.saga-bp.done { border-style: solid; border-color: #4fdc9a66; background: #4fdc9a10; color: #bff2d8; }
.bp-row { border-color: #8fc9ff66 !important; background: #8fc9ff10 !important; }
.bp-row span { color: #cfe6ff; font-weight: 600; }
.hunt-way .bp-need { margin-top: 6px; }

/* 2.92: doctrines */
.doctrines { margin-bottom: 18px; }
.doctrines:empty { display: none; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.doc-card { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: linear-gradient(160deg, #13282f, #08141c); color: var(--text); font: inherit; cursor: pointer; }
.doc-card:hover, .doc-card:focus-visible { border-color: #e2c69488; }
button.doc-card.on, button.doc-card.on:hover { border-color: var(--gold); background: linear-gradient(160deg, #e2c69422, #08141c 70%); box-shadow: 0 0 0 1px #e2c69455 inset; }
.doc-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: calc(15px * var(--ts, 1)); }
.doc-name i { font-style: normal; color: var(--gold); width: 1.2em; text-align: center; }
.doc-name em { margin-left: auto; font: 700 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #1a1205; background: var(--gold); border-radius: 4px; padding: 1px 6px; }
.doc-good { color: #9ff0c6; font-size: calc(13px * var(--ts, 1)); }
.doc-bad { color: #ffb39e; font-size: calc(13px * var(--ts, 1)); }
.doc-play { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
.doctrine-chip { justify-self: start; margin-bottom: 2px; padding: 2px 9px; border-radius: 999px; font: 700 12px var(--mono); letter-spacing: .04em; color: #e2c694; background: #08141ccc; border: 1px solid #e2c69455; }
.doctrine-chip.on { color: #1a1205; background: #e2c694; border-color: #e2c694; }
.doctrine-chip[hidden] { display: none; }
@media (max-width: 600px) {
  .doc-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; overscroll-behavior-x: contain; }
  .doc-card { scroll-snap-align: start; }
}

/* ---- 2.93: Meridian Spire: build in any order, the power priority, the beacon, raids and the trophy hall ---- */
.mer-raid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid #ff8a5c66; background: linear-gradient(160deg, #ff8a5c1a, #08141cee 60%); }
.mer-raid.ready { border-color: #ff8a5c; box-shadow: 0 0 0 1px #ff8a5c44 inset; }
.mer-raid .eyebrow { color: #ffb39e; display: inline-flex; align-items: center; gap: 6px; }
.mer-raid h3 { margin: 2px 0 4px; font-size: calc(18px * var(--ts, 1)); }
.mer-raid p { margin: 0; color: var(--text); font-size: calc(13.5px * var(--ts, 1)); max-width: 70ch; }
.mer-raid small { color: var(--muted); }
.mer-next { display: grid; gap: 10px; margin: 0 0 12px; padding: 14px; border-radius: 16px; border: 1px solid #e2c69466; background: linear-gradient(170deg, #e2c69414, #08141cee 55%); }
.mer-next header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mer-next header .eyebrow { color: var(--gold); }
.mer-pips { display: inline-flex; align-items: center; gap: 3px; }
.mer-pips i { width: 14px; height: 6px; border-radius: 2px; background: #ffffff1f; }
.mer-pips i.on { background: var(--c, var(--gold)); }
.mer-pips b { width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; border: 1.5px solid var(--muted); }
.mer-pips b.on { border-color: #9fdcff; background: #9fdcff; box-shadow: 0 0 8px #9fdcff; }
.mer-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mer-opt { --c: var(--gold); display: grid; gap: 5px; align-content: start; padding: 11px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: #050c12cc; }
.mer-opt > b { font-size: calc(16px * var(--ts, 1)); }
.mer-opt small { color: var(--text); font-size: calc(13px * var(--ts, 1)); line-height: 1.4; }
.mer-opt small.mer-look { color: var(--muted); font-size: calc(12px * var(--ts, 1)); }
.mer-opt .act-btn { justify-self: stretch; margin-top: 4px; }
.mer-lane { --c: var(--gold); display: inline-flex; align-items: center; gap: 5px; font: 700 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.mer-lane .ico { width: 14px; height: 14px; }
.mer-locked { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
.mer-locked li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mer-locked b { color: var(--text); font-weight: 600; }
.mer-fine { margin: 0; color: var(--muted); font-size: calc(12px * var(--ts, 1)); line-height: 1.45; }
.mer-order { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font: 600 calc(11.5px * var(--ts, 1)) var(--mono); color: var(--muted); }
.mer-order span { text-transform: uppercase; letter-spacing: .1em; margin-right: 2px; }
.mer-order i { font-style: normal; color: var(--c); }
.mer-order em { font-style: normal; opacity: .6; }
.mer-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mer-modes button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line2); background: #08141ccc; color: var(--muted); font: 600 calc(12px * var(--ts, 1)) var(--mono); }
.mer-modes button b { color: var(--text); }
.mer-modes .ico { width: 15px; height: 15px; color: #9fdcff; }
.mer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.mer-card { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line2); background: linear-gradient(160deg, #9fdcff0d, #08141cee 55%); }
.mer-card.wide { grid-column: 1 / -1; }
.mer-card header { display: flex; align-items: center; gap: 8px; }
.mer-card header .ico { width: 20px; height: 20px; color: #9fdcff; }
.mer-card h3 { margin: 0; font-size: calc(16px * var(--ts, 1)); }
.mer-card p { margin: 0; font-size: calc(13.5px * var(--ts, 1)); line-height: 1.45; color: var(--text); }
.mer-card small { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); line-height: 1.45; }
#mer-beacon { border-color: color-mix(in srgb, var(--b) 40%, transparent); }
#mer-beacon header .ico { color: var(--b); }
.mer-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.mer-seg button { flex: 1 1 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font: 700 calc(12.5px * var(--ts, 1)) var(--mono); letter-spacing: .04em; }
.mer-seg button[aria-pressed="true"], .mer-seg button[aria-pressed="true"]:hover { border-color: #9fdcff; background: #9fdcff; color: #04121c; }
.mer-plaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.mer-plaques li { --c: var(--gold); display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line2); background: #00000030; }
.mer-plaques li b { font-size: calc(13.5px * var(--ts, 1)); color: var(--muted); }
.mer-plaques li.on { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.mer-plaques li.on b { color: var(--c); }
.mer-plaques li small { font-size: calc(12px * var(--ts, 1)); }
.mer-engines { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed #9fdcff55; color: var(--muted); font-size: calc(13px * var(--ts, 1)); }
.mer-engines b { color: var(--text); }
.mer-engines.on { border-style: solid; border-color: #9fdcff; }
.trophy-row span { color: var(--gold); }
.raid-row span { color: #ffb39e; }
.mer-empty { margin: 0; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); line-height: 1.6; }
.mer-empty span { font: 700 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }