/* Rift Crew: a fighter cockpit in deep violet space.
   Panels are cockpit screens (MFDs) in bolted bezels, buttons are backlit keys, the header is the
   dashboard and the battle is seen through the canopy. Amber for actions and the HUD, cyan only
   for shields, rarity colors as the brightest things. */
:root {
  --void: #15112b;
  --hull: #262045;
  --hull-2: #2f2854;
  --rivet: #3d3566;
  --haze: #a9a3c9;
  --star: #efeaff;
  --amber: #ffc04d;
  --amber-deep: #b5761c;
  --shield: #57e3ea;
  --hp: #5ad15a;
  --danger: #ff5a5f;
  --common: #9aa3ad; --uncommon: #5ad15a; --rare: #4aa3ff; --epic: #b36bff; --legendary: #ff9d2e;
  --cut: 10px;
  --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  /* cockpit */
  --hud: var(--amber);                       /* screen titles, brackets, lit keys */
  --bezel: #2c2839; --bezel-2: #211e2d;      /* the metal around each screen */
  --glass: #0b0a18; --glass-line: #1f1b38;   /* a screen's face and its inner edge */
  --cell: #151229; --cell-line: #2a2550;     /* things drawn on a screen: rows, cards, tiles */
  --key: #1a1724; --key-top: #24202f; --key-hi: #3a3550; --key-lo: #0a0814;
  --screw: radial-gradient(circle, #6b6590 0 1.6px, #14121c 2.2px, transparent 2.8px);
  --scan: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
  --mfd-bg:
    var(--screw) 2px 2px / 6px 6px no-repeat border-box,
    var(--screw) calc(100% - 2px) 2px / 6px 6px no-repeat border-box,
    var(--screw) 2px calc(100% - 2px) / 6px 6px no-repeat border-box,
    var(--screw) calc(100% - 2px) calc(100% - 2px) / 6px 6px no-repeat border-box,
    var(--scan) padding-box,
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(var(--bezel), var(--bezel-2)) border-box;
  --hazard: repeating-linear-gradient(-45deg, var(--amber) 0 6px, #1a1626 6px 12px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--void);
  background-image:
    radial-gradient(1px 1px at 20% 30%, #5d5a85 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 80%, #5d5a85 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, #3d3a5c 50%, transparent 51%),
    radial-gradient(ellipse at 50% -20%, #2c2454 0%, #15112b 55%, #0b0918 100%);
  background-size: 180px 140px, 230px 190px, 120px 110px, 100% 100%;
  background-attachment: scroll, scroll, scroll, fixed;
  color: var(--star);
  font: 15px/1.45 var(--font);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
img, canvas { image-rendering: pixelated; }
h2, h3 { margin: 0; font-weight: 700; letter-spacing: 0.01em; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
p { margin: 0; }
.sub { color: var(--haze); font-size: 13px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- panels: cockpit screens in bolted bezels */
.panel {
  background: var(--mfd-bg);
  border: 10px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 0 50px rgba(255, 192, 77, 0.035),
    0 0 0 1px #000, 0 8px 20px rgba(0, 0, 0, 0.45);
}
.panel .panel {                       /* a screen inside a screen: just a framed area, no second bezel */
  background: var(--cell); border: 1px solid var(--cell-line); border-radius: 6px; box-shadow: none;
}
.panel > header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #26214a;
}
.panel[data-screen]::before {         /* the screen's name, top left, in the HUD color */
  content: attr(data-screen); display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hud);
}
.mtitle { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hud); }

/* ---------- buttons: backlit cockpit keys */
.btn {
  background: linear-gradient(var(--key-top), var(--key));
  border: 1px solid var(--key-lo);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--key-hi), 0 2px 0 var(--key-lo);
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { color: var(--hud); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--key-hi), 0 0 0 var(--key-lo); }
.btn.primary {                        /* a lit key */
  background: linear-gradient(#ffd27a, var(--amber)); color: #2a1a00; border-color: #7a4c0c;
  box-shadow: inset 0 1px 0 #fff0c4, 0 2px 0 var(--amber-deep), 0 0 14px rgba(255, 192, 77, 0.3);
}
.btn.primary:hover:not(:disabled) { color: #2a1a00; filter: brightness(1.06); }
.btn.ghost { color: var(--hud); }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- top bar: the dashboard */
.top {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 20px 14px;
  background: linear-gradient(#2c2839, #1c1927);
  border-bottom: 3px solid var(--key-lo);
  box-shadow: inset 0 1px 0 #4a4462, 0 8px 24px rgba(0, 0, 0, 0.5);
  position: sticky; top: 0; z-index: 5;
}
#logo canvas { display: block; }
.tabs { display: flex; gap: 8px; }
.tabs button {                        /* keys with an indicator light */
  background: linear-gradient(var(--key-top), var(--key)); border: 1px solid var(--key-lo); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--key-hi), 0 2px 0 var(--key-lo);
  padding: 9px 14px 9px 28px; min-height: 40px; cursor: pointer; color: var(--haze); font-weight: 700; position: relative;
}
.tabs button::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--key-hi); box-shadow: inset 0 1px 1px #000;
}
.tabs button:hover { color: var(--star); }
.tabs button[aria-selected="true"] { color: var(--hud); background: #211c2c; }
.tabs button[aria-selected="true"]::before { background: var(--hud); box-shadow: 0 0 8px var(--hud); }
.dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.me { display: flex; align-items: stretch; gap: 8px; font-size: 13px; }
.me > div {                           /* gauge windows set into the dash */
  display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 12px;
  background: #0b0916; border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 2px 6px #000, 0 1px 0 var(--key-hi);
}
.me-name { font-weight: 700; font-size: 14px; }
.me-class { color: var(--haze); font-weight: 400; font-size: 12px; }
.me-level { gap: 5px; color: var(--haze); }
.xpbar { display: block; width: 110px; height: 6px; background: #1d1934; }
.xpbar i { display: block; height: 100%; background: var(--hud); box-shadow: 0 0 6px var(--hud); }
.me .cap { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #8a83ad; }
.me-credits b { color: var(--amber); font-size: 17px; letter-spacing: 0.04em; }

.raid-banner {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(#2e220c, #241a08); border-bottom: 4px solid transparent; border-image: var(--hazard) 4; padding: 8px 16px;
}
.net-status { background: #4a1d24; text-align: center; padding: 6px; font-size: 13px; }

main { max-width: 1180px; margin: 0 auto; padding: 20px; }

/* ---------- splash / class pick */
.splash { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(21,17,43,0.94); z-index: 20; padding: 20px; }
.splash[hidden] { display: none; }
.splash-card { max-width: 420px; display: grid; gap: 12px; }
.splash-card a:not(.btn) { color: var(--hud); }
.web-login .btn { justify-self: start; text-decoration: none; }
.web-error { color: var(--danger); }
#signout-btn[hidden] { display: none; }
@media (max-width: 1440px) {          /* six tabs: header buttons go icon-only before the bar overflows */
  .top-btns .invite-btn { width: 40px; padding: 0; justify-content: center; }
  .top-btns .invite-btn span { display: none; }
}
.field { display: grid; gap: 4px; font-size: 13px; color: var(--haze); }
.field input, .field select {
  background: #0b0916; border: 1px solid #000; border-radius: 3px; color: var(--star);
  box-shadow: inset 0 2px 6px #000, 0 1px 0 var(--key-hi);
  font: inherit; padding: 8px 10px; min-height: 40px;
}
.field.inline { grid-auto-flow: column; align-items: center; gap: 8px; }

.class-pick { display: grid; gap: 20px; }
.pick-head { max-width: 60ch; display: grid; gap: 6px; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.class-card {
  text-align: left; cursor: pointer; display: grid; gap: 6px; align-content: start; color: inherit;
  box-shadow: inset 0 4px 0 var(--cls), inset 0 0 0 1px var(--glass-line), 0 0 0 1px #000, 0 8px 20px rgba(0, 0, 0, 0.45);
}
.class-card:hover { box-shadow: inset 0 4px 0 var(--cls), inset 0 0 0 1px var(--cls), 0 0 0 1px #000, 0 8px 20px rgba(0, 0, 0, 0.45); }
.panel .class-card { box-shadow: inset 0 3px 0 var(--cls); }
.class-art { display: flex; align-items: flex-end; gap: 18px; min-height: 90px; }
.class-name { font-size: 18px; font-weight: 700; color: var(--cls); }
.class-role { color: var(--haze); font-size: 13px; }
.class-blurb { font-size: 14px; }
.class-ship { display: grid; gap: 1px; font-size: 13px; padding-top: 6px; border-top: 1px solid var(--rivet); }
.class-ship .sub { font-size: 12px; }

/* ---------- hangar */
.room { display: flex; flex-direction: column; gap: 14px; }   /* layout 7: the schematic, then the hold (see the end) */
.hero { width: 84px; }
.hero.ship { width: 96px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin: 0; font-size: 13px; }
.stats > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed #26214a; padding: 4px 0; }
.stats dt { color: var(--haze); }
.stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats .up { color: var(--hp); font-weight: 400; }
.stats .down { color: var(--danger); font-weight: 400; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px; }
.slot {
  display: grid; justify-items: center; gap: 4px; padding: 8px 4px; background: #100d20; border-radius: 4px;
  border: 2px solid var(--rivet); cursor: pointer; position: relative; font-size: 11px; color: var(--haze); min-height: 70px;
}
.slot::before, .tile::before {        /* HUD corner ticks */
  content: ""; position: absolute; inset: 3px; pointer-events: none; opacity: 0.6;
  background:
    linear-gradient(var(--hud), var(--hud)) left top / 7px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left top / 1px 7px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right bottom / 7px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right bottom / 1px 7px no-repeat;
}
.slot.empty { border-style: dashed; cursor: default; }
.icon { width: 36px; height: 36px; display: block; }
.icon.ghost { opacity: 0.25; }
.r-common { border-color: var(--common); }
.r-uncommon { border-color: var(--uncommon); }
.r-rare { border-color: var(--rare); }
.r-epic { border-color: var(--epic); }
.r-legendary { border-color: var(--legendary); box-shadow: 0 0 0 1px var(--legendary), 0 0 12px -2px var(--legendary); }
.sel { outline: 2px solid var(--amber); outline-offset: 2px; }
.rank { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 11px; color: var(--amber); font-weight: 700; }
.ilvl { position: absolute; bottom: 1px; right: 3px; font-style: normal; font-size: 10px; color: var(--haze); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.chip {
  background: linear-gradient(var(--key-top), var(--key)); border: 1px solid var(--key-lo); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--key-hi), 0 2px 0 var(--key-lo); padding: 5px 11px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--haze);
}
.chip[aria-selected="true"], .chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--hud); color: #2a1a00; box-shadow: 0 2px 0 var(--amber-deep); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.tile { aspect-ratio: 1; display: grid; place-items: center; background: #100d20; border: 2px solid; border-radius: 3px; cursor: pointer; position: relative; }
.empty-note { color: var(--haze); max-width: 46ch; }
.salvage-note { margin: 0 0 6px; padding: 8px 12px; border-left: 4px solid var(--amber); background: rgba(255, 255, 255, 0.04); font-weight: 600; }
.detail-head { display: flex; gap: 12px; align-items: center; }
.detail-icon { border: 2px solid; padding: 6px; background: var(--cell); }
.detail-icon .icon { width: 60px; height: 60px; }
.perk { background: #3a2a0c; border-left: 3px solid var(--legendary); padding: 8px 10px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- materials and upgrades (Hangar) */
.mats { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.mat { display: flex; align-items: center; gap: 8px; }
.mat i { width: 10px; height: 10px; display: block; }
.mat b { font-variant-numeric: tabular-nums; }
.list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; }
.list li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rivet); }
.li-main { display: grid; gap: 2px; }
.costs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cost { font-size: 12px; background: var(--cell); padding: 1px 6px; }
.cost.short { color: var(--danger); }
.tile-sm { border: 2px solid; padding: 2px; background: var(--cell); }
.pips { display: flex; gap: 3px; }
.pips i { width: 10px; height: 6px; background: #0e0b1f; border: 1px solid var(--rivet); }
.pips i.on { background: var(--amber); border-color: var(--amber); }

/* ---------- raid */
.raid-controls { margin-bottom: 16px; }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ctl-row > div:first-child { flex: 1 1 260px; display: grid; gap: 2px; }
.roster { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.crew-card { display: flex; gap: 10px; align-items: center; background: var(--cell); padding: 8px 10px; border-left: 4px solid var(--cls); }
.crew-card img { width: 36px; }
.crew-card div { display: grid; }
.open-seat { border: 2px dashed var(--rivet); color: var(--haze); display: grid; place-items: center; min-height: 56px; font-size: 13px; }
.sectors { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.sectors li { min-width: 34px; padding: 5px 7px; text-align: center; background: #141127; color: #6e67a0; font-size: 12px; font-weight: 700; border: 1px solid #000; border-radius: 2px; }
.sectors li.done { background: #211d3e; color: var(--haze); }
.sectors li.now { background: var(--hud); color: #2a1a00; box-shadow: 0 0 10px var(--hud); }
.sectors li.boss { min-width: 46px; }

.raid-stage { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.screen {                            /* the canopy: an angled frame around the battle */
  position: relative; line-height: 0; align-self: start; padding: 14px;
  /* as wide as the window's height allows, so the whole fight fits in an Activity without scrolling
     (--stage-top is where this row starts, set by fitStage() in main.js) */
  width: min(100%, max(420px, calc((100vh - var(--stage-top, 330px) - 16px - 28px) * 16 / 9 + 28px)));
  justify-self: center;
  background: linear-gradient(#34304a, #1b1826);
  clip-path: polygon(48px 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%, 0 48px);
}
#scene {
  width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: #100c22;
  clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%, 0 36px);
}
.screen::after {                      /* glare on the glass and HUD brackets in its corners */
  content: ""; position: absolute; left: 14px; right: 14px; top: 14px; aspect-ratio: 16 / 9; pointer-events: none;
  clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%, 0 36px);
  background:
    linear-gradient(var(--hud), var(--hud)) left 12px top 44px / 22px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left 12px top 44px / 2px 22px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right 12px top 44px / 22px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right 12px top 44px / 2px 22px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left 12px bottom 12px / 22px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left 12px bottom 12px / 2px 22px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right 12px bottom 12px / 22px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right 12px bottom 12px / 2px 22px no-repeat,
    linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 18%, transparent 18% 100%);
  opacity: 0.85;
}
.side { display: grid; grid-template-rows: auto auto auto 1fr; gap: 8px; min-height: 280px;
  max-height: min(560px, max(280px, calc(100vh - var(--stage-top, 330px) - 16px))); }
.side .mtitle + .log { padding-top: 2px; }
.side .log { border-top: 1px solid #26214a; padding-top: 10px; }
.crew-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.crew-bars li { display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 13px; border-left: 3px solid var(--cls); padding-left: 8px; }
.crew-bars li.me b { color: var(--amber); }
.crew-bars li.ko { opacity: 0.5; }
.crew-bars.many { grid-template-columns: 1fr 1fr; column-gap: 10px; }
.crew-bars.many b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { display: block; height: 5px; background: #1d1934; }
.bar i { display: block; height: 100%; background: var(--hp); }
.bar.sh { height: 3px; }
.bar.sh i { background: var(--shield); }
.log { list-style: none; margin: 0; padding: 0; overflow-y: auto; font-size: 13px; display: grid; align-content: start; gap: 4px; }
.log li { color: var(--haze); }
.log .log-sector { color: var(--star); font-weight: 700; margin-top: 6px; }
.log .log-kill, .log .log-ok { color: #c9f5c4; }
.log .log-down { color: var(--danger); }
.log .log-warn { color: #feae34; }
.log .log-crit { color: #fee761; }
.log .log-vote, .log .log-start { color: var(--amber); }
.log .log-rare { color: var(--rare); }
.log .log-uncommon { color: var(--uncommon); }
.log .log-epic { color: var(--epic); font-weight: 700; }
.log .log-legendary { color: var(--legendary); font-weight: 700; }
.log .log-boss { color: var(--legendary); font-weight: 700; }
.log .log-end { color: var(--star); font-weight: 700; margin-top: 6px; }

/* A crew vote pops up in the middle of the window, wherever the player has scrolled (the owner, 2026-11-05): the
   crew has 3 seconds to pick, a big countdown says how long is left, then the mission moves on. */
.vote {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 35;
  width: min(720px, calc(100vw - 24px)); line-height: 1.45; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
}
@media (max-height: 520px) {          /* a very short window: the card scrolls rather than run off it */
  .vote { max-height: calc(100dvh - 16px); overflow-y: auto; }
}
.vote:not([hidden]) { animation: vote-pop 160ms ease-out; }
@keyframes vote-pop { from { transform: translate(-50%, -50%) scale(0.92); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vote:not([hidden]) { animation: none; } }
.vote-count { font: 700 28px/1 var(--font); color: var(--amber); min-width: 1.2em; text-align: right; }
.vote-count.low { color: #ff5a5f; }
.vote-card { display: grid; gap: 8px; }
.vote-card > header { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
@media (min-width: 861px) {           /* on a wide window: a slimmer card */
  .vote .vote-card { border-width: 6px; padding: 10px 14px; gap: 6px; }
  .vote .vote-card::before { display: none; }
  .vote .vote-opt { padding: 7px 12px; }
}
.vote-card header { display: flex; align-items: center; gap: 12px; margin: 0; }
.timer { flex: 1; height: 4px; background: #1d1934; display: block; }
.timer i { display: block; height: 100%; background: var(--amber); width: 100%; transition: width 0.25s linear; }
.vote-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.vote-opt {
  text-align: left; background: #120f24; border: 1px solid #3a3264; border-radius: 3px; padding: 9px 12px; cursor: pointer;
  display: grid; gap: 2px; position: relative; box-shadow: 0 2px 0 var(--key-lo);
}
.vote-opt span { color: var(--haze); font-size: 12px; }
.vote-opt .count { position: absolute; top: 6px; right: 8px; font-style: normal; font-weight: 700; color: var(--amber); }
.vote-opt.mine { border-color: var(--amber); }
.vote-opt.won { background: #3a2a0c; border-color: var(--amber); }
.vote-opt:disabled { cursor: default; }

.debrief { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.loot-card { display: grid; gap: 6px; align-content: start; }
.loot-card.me { box-shadow: inset 0 0 0 1px var(--hud), 0 0 0 1px #000, 0 0 16px rgba(255, 192, 77, 0.25); }
.loot-card header { margin: 0; }
.earn b { color: var(--amber); }
.loot { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.drop {
  display: flex; align-items: center; gap: 8px; border-left: 3px solid; padding-left: 8px; font-size: 13px;
  animation: flip 0.45s calc(var(--n, 0) * 0.35s + 0.2s) both;
}
.drop .icon { width: 30px; height: 30px; }
.drop.r-legendary, .drop.r-epic { box-shadow: none; }
@keyframes flip { from { opacity: 0; transform: rotateX(80deg); } to { opacity: 1; transform: none; } }

/* ---------- toasts */
/* Toasts never take clicks: in a small Activity window they sit over buttons (Salvage, say), which must
   keep working while one shows. They're messages only, never controls. */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 30; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--glass); border: 1px solid #000; border-left: 4px solid var(--amber); border-radius: 4px; padding: 10px 14px; box-shadow: inset 0 0 0 1px var(--glass-line), 0 6px 18px rgba(0, 0, 0, 0.5); transition: opacity 0.4s; }
.toast.t-error { border-color: var(--danger); }
.toast.t-rare { border-color: var(--rare); }
.toast.t-epic { border-color: var(--epic); }
.toast.t-legendary { border-color: var(--legendary); }
.toast.out { opacity: 0; }

/* ---------- small screens: stack everything */
@media (max-width: 1000px) {           /* the top bar: tabs drop to their own row */
  .top { grid-template-columns: 1fr auto auto; padding: 10px 14px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs { padding-bottom: 2px; }
  .tabs button { flex: none; white-space: nowrap; padding: 8px 10px 8px 24px; }
  .tabs button::before { left: 9px; }
  #logo canvas { width: 160px; height: auto; }
  .me > .me-level, .me > .me-name { display: none; }
}
@media (max-width: 860px) {
  .panel { border-width: 8px; padding: 12px; }
  .screen { padding: 10px; clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%, 0 28px); }
  #scene, .screen::after { clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px); }
  .screen::after { left: 10px; right: 10px; top: 10px; }
  main { padding: 12px; }
  .raid-stage { grid-template-columns: 1fr; }
  .side { max-height: 320px; }
}
@media (max-width: 1340px) and (min-width: 1001px) {  /* mid-size windows: the top bar would overflow */
  .me > .me-level { display: none; }
  .tabs { gap: 6px; }
  .tabs button { padding-left: 20px; padding-right: 9px; }
  .tabs button::before { left: 8px; }
}
@media (max-width: 1100px) and (min-width: 1001px) {   /* just above the two-row bar: the pilot's name goes */
  .me > .me-name { display: none; }
}
@media (max-width: 460px) {                            /* phones: a smaller logo and tighter buttons */
  .top { gap: 8px; padding: 8px 10px; }
  #logo canvas { width: 112px; }
  .top-btns { gap: 6px; }
  .top-btns .invite-btn, .music-btn { width: 36px; min-width: 36px; }
  .me > div { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 1160px) and (min-width: 1001px) {
  #logo canvas { width: 140px; height: auto; }
}
@media (max-height: 760px) {                           /* short Activity windows: give the fight the room */
  .raid-controls { margin-bottom: 10px; }
  .retreat-bar .sub, .strike-bar:not(.on) > div .sub { display: none; }
  main { padding-top: 12px; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .hero { width: 64px; }
  .hero.ship { width: 72px; }
  .chips { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .drop { animation: none; }
  .timer i { transition: none; }
}
.log .log-hint { color: var(--haze); font-style: italic; }

/* ---------- mission picker */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mode-card {
  display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer; color: inherit;
  background: #120f24; border: 1px solid #3a3264; border-radius: 4px; padding: 10px 12px; box-shadow: 0 2px 0 var(--key-lo);
}
.mode-card img { width: 48px; flex: none; }
.mode-card > span { display: grid; gap: 2px; }
.mode-card.on { border-color: var(--hud); background: #1c1730; box-shadow: 0 2px 0 var(--key-lo), 0 0 14px rgba(255, 192, 77, 0.18); }
.mode-card:hover:not(.on) { border-color: var(--haze); }
@media (max-width: 520px) { .modes { grid-template-columns: 1fr; } }

/* ---------- appearance */
.look-picker { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin: 10px 0 14px; }
.class-pick > .look-picker { justify-content: center; margin: 4px 0 18px; }
.look-row { display: flex; align-items: center; gap: 10px; }
.look-label { color: var(--haze); font-size: 13px; }
.swatches { display: flex; gap: 6px; }
.swatch {
  width: 26px; height: 26px; padding: 0; cursor: pointer; border: 2px solid var(--rivet);
  background: linear-gradient(135deg, var(--c1) 0 35%, var(--c2) 35% 70%, var(--c3) 70%);
}
.swatch[aria-checked="true"] { border-color: var(--amber); box-shadow: 0 0 0 2px #0e0b1f, 0 0 0 4px var(--amber); }
.swatch:focus-visible { outline: 2px solid var(--star); outline-offset: 3px; }
.look-btn { margin-left: auto; }

/* ---------- paper doll */
img.doll { image-rendering: pixelated; }
.hero.doll { width: auto; height: 132px; }
.class-art img.doll { height: 96px; width: auto; }
.crew-card img.doll { height: 40px; width: auto; }
.look-preview { display: flex; align-items: flex-end; gap: 14px; margin: 8px 0 12px; padding: 10px; background: var(--cell); }
.look-preview figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.look-preview img { height: 88px; width: auto; }
.look-preview figcaption { font-size: 12px; color: var(--haze); }
.look-preview .arrow { color: var(--amber); font-size: 20px; align-self: center; }

/* ---------- leaderboard */
.board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.board-switches { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.records-head { margin: 22px 0 10px; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hud); }
.board-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.board-rows li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; background: var(--cell); }
.board-rows li.mine { outline: 1px solid var(--amber); background: #2a2140; }
.board-rows .clear { display: grid; }
.board-rows .val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; font-weight: 700; font-size: 12px; background: #0e0b1f; color: var(--haze); border: 1px solid var(--rivet); }
.rank-badge.r1 { background: #ffc04d; color: #1a1430; border-color: #ffc04d; }
.rank-badge.r2 { background: #c9d1e6; color: #1a1430; border-color: #c9d1e6; }
.rank-badge.r3 { background: #d38b4a; color: #1a1430; border-color: #d38b4a; }
@media (max-width: 760px) { .boards { grid-template-columns: 1fr; } }

/* ---------- repairs */
.repair-bay {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 14px; margin-top: 12px; background: var(--cell); border: 1px solid var(--cell-line); border-left: 3px solid var(--danger); border-radius: 4px;
}
.repair-bay.panel { background: var(--mfd-bg); border: 10px solid transparent; border-radius: 10px;
  box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px var(--glass-line), 0 0 0 1px #000, 0 8px 20px rgba(0, 0, 0, 0.45); }
.room > .repair-bay { margin-top: 0; }
.repair-bay > div:not(.meters) { display: grid; gap: 2px; flex: 1 1 280px; }
.repair-bay .meters { display: grid; gap: 4px; font-size: 13px; min-width: 150px; }
.repair-bay .meters span { display: grid; grid-template-columns: 70px auto; gap: 8px; align-items: center; }
.repair-bay .meters i { height: 8px; background: linear-gradient(90deg, var(--c) var(--v), #0e0b1f var(--v)); border: 1px solid var(--rivet); }
.repair-bay .meters i.hp { --c: #5ad15a; }
.repair-bay .meters i.hull { --c: #57e3ea; }
.hurt { color: var(--danger); }

/* ---------- retreat */
.retreat-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px;
  padding: 10px 12px; background: var(--cell); border: 1px solid var(--cell-line); border-left: 3px solid #feae34; border-radius: 4px;
}
.retreat-bar [data-action="retreat"] {  /* a guarded switch */
  border: 4px solid transparent; border-image: var(--hazard) 4; border-radius: 0; color: var(--amber); padding: 6px 16px;
}
.retreat-bar > div:first-child { display: grid; gap: 2px; flex: 1 1 320px; }
.retreat-bar.on { background: #241a12; }
/* raids that keep going (the new design): where the raid stands, the Captain's Stop, the break, the repair pick */
.run-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px;
  padding: 10px 12px; background: var(--cell); border: 1px solid var(--cell-line); border-left: 3px solid #57e3ea; border-radius: 4px;
}
.run-bar > div:first-child { display: grid; gap: 2px; flex: 1 1 280px; }
.run-bar.stopping { border-left-color: #feae34; }
.run-break h2 b { color: var(--amber); }
.repair-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.run-ended { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid #feae34; background: #241a12; border-radius: 4px; }
.retreat-note { margin: 2px 0 6px; color: #feae34; font-size: 13px; }
.lost-item { margin: 0 0 6px; font-size: 13px; color: var(--muted, #a9a3c9); }
.lost-item s { opacity: 0.8; }

/* ---------- Threat (follows how often the crew goes down) */
.threat-chip {
  display: inline-block; padding: 0 6px; margin-left: 2px; border: 1px solid var(--cell-line); border-radius: 3px;
  font-size: 12px; line-height: 18px; color: var(--muted, #a9a3c9); white-space: nowrap; cursor: help;
}
.threat-chip.up { color: #ff8a6a; border-color: #5a2a24; }
.threat-chip.down { color: #8ef3f7; border-color: #1f4a4a; }
.threat-line { list-style: none; padding: 0; margin: 2px 0 6px; display: grid; gap: 4px; font-size: 12px; color: var(--haze); }
.threat-line b { color: var(--star); }
.threat-line .up b { color: #ff9d7a; }
.threat-line .down b { color: #8fe08f; }
.threat-explain { margin: 4px 0 10px; font-size: 13px; }

/* ---------- orbital strike (Planetfall, once per mission) */
.strike-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px;
  padding: 10px 12px; background: var(--cell); border: 1px solid var(--cell-line); border-left: 3px solid #ffc04d; border-radius: 4px;
}
.strike-bar > div:first-child { display: grid; gap: 2px; flex: 1 1 320px; }
.strike-bar.on { background: #2a2410; }
.strike-bar.used { padding: 6px 12px; }

/* ---------- Orbital Aide */
.aid-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px;
  padding: 10px 12px; background: var(--cell); border: 1px solid var(--cell-line); border-left: 3px solid #57e3ea; border-radius: 4px;
}
.aid-bar > div:first-child { display: grid; gap: 2px; flex: 1 1 260px; }
.aid-bar.crew { margin-top: 12px; }
.aid-pips { display: flex; gap: 3px; }
.aid-pips i { width: 10px; height: 10px; background: #0e0b1f; border: 1px solid var(--rivet); }
.aid-pips i.on { background: #57e3ea; border-color: #57e3ea; }
.aid-status { flex: 1 1 200px; }
.log .log-aid { color: #8ef3f7; }
.set-line { margin: 4px 0 8px; font-size: 13px; }
.set-line b { color: var(--amber); }

/* ships: class cards and shipyard */
.class-art img.ship-art { image-rendering: pixelated; height: 56px; width: auto; }
.hero.ship, .hero.ship:is(img) { image-rendering: pixelated; width: auto; max-width: 45%; height: auto; }
.loadout header .btn { margin-left: auto; }
.shipyard { grid-column: 1 / -1; }
.shipyard header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shipyard header .btn { margin-left: auto; }
.yard-row { margin-top: 12px; }
.yard-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.yard-ships { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .yard-ships { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.yard-ship { display: grid; justify-items: start; gap: 4px; padding: 10px; background: var(--cell); border: 2px solid transparent; }
.yard-ship img { image-rendering: pixelated; height: 72px; width: auto; max-width: 100%; object-fit: contain; justify-self: center; }
.yard-ship .sub { font-size: 12px; }
.yard-ship .ship-traits { font-size: 12px; line-height: 1.35; }
.yard-ship .ship-cmp .up { color: var(--uncommon); } .yard-ship .ship-cmp .down { color: #ff8a65; }
.yard-ship .maker { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--haze); margin-top: -3px; }
.yard-ship.sel { border-color: var(--amber); }
.yard-ship.locked img { filter: grayscale(1) brightness(0.6); }
.yard-ship .tag { color: var(--amber); font-weight: 600; font-size: 13px; }

/* class change */
.head-btns { margin-left: auto; display: flex; gap: 6px; }
.head-btns .look-btn { margin-left: 0; }
.class-change { grid-column: 1 / -1; }

/* delete pilot: permanent, so it looks it */
.head-btns .del-btn { color: var(--danger); }
.delete-pilot { grid-column: 1 / -1; border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger), 0 0 0 1px #000; }
.delete-pilot h2 { color: var(--danger); }
.delete-warn { background: #4a1d24; border-left: 4px solid var(--danger); padding: 8px 12px; margin: 10px 0 0; }
.delete-confirm { max-width: 300px; margin-bottom: 12px; }
.delete-confirm span { color: var(--star); }
.delete-confirm input { letter-spacing: 0.12em; text-transform: uppercase; }
.class-change .class-grid { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.class-change .class-card { cursor: default; }
.class-change .class-card.locked .class-art { filter: grayscale(0.8) brightness(0.7); }
.confirm-row { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) { .class-change .class-grid { grid-template-columns: 1fr; } }

/* Void Rift */
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }
.rift-card .rift-glyph { width: 48px; height: 32px; flex: none; background:
  radial-gradient(ellipse at 50% 50%, #e6d0ff 0 8%, #c25bff 9% 22%, #5a2a9a 23% 40%, transparent 41%),
  radial-gradient(ellipse at 50% 50%, transparent 0 46%, #57e3ea 47% 49%, transparent 50%); image-rendering: pixelated; }
.rift-card.on { border-color: #c25bff; }
.rift-card.locked { opacity: 0.6; }
.rift-panel h2 { color: #d8b0ff; }
.depth-meter { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.depth-meter b { font-family: var(--pixel, inherit); font-size: 28px; color: #d8b0ff; }
.mod-chip { padding: 2px 8px; border: 1px solid #c25bff; color: #e6d0ff; font-size: 12px; }
.new-best { color: #d8b0ff; font-weight: 600; margin: 0 0 4px; }
.new-ship { color: var(--legendary); font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.new-ship img { image-rendering: pixelated; height: 28px; width: auto; }
.yard-ship .how { font-size: 12px; color: var(--amber); font-weight: 600; }

/* Legacy and the Hall of Fame */
.legacy { color: var(--amber); font-size: 0.85em; margin-left: 4px; }
.hall { margin-top: 16px; }
.hall-rows { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hall-rows li { display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--cell); }
.hall-rows img.doll { height: 64px; width: auto; image-rendering: pixelated; }
.hall-rows span { display: grid; gap: 2px; }
.retire { grid-column: 1 / -1; }
.retire-list { margin: 8px 0 12px; padding-left: 18px; display: grid; gap: 4px; }
.retire-class { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.sync-note { font-size: 12px; color: var(--haze); margin: 8px 0 0; }

/* set bonuses */
.set-bonuses { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 12px; }
.set-bonuses b { color: var(--amber); margin-right: 6px; }
.set-bonuses .off, .set-tiers .off { color: var(--haze); opacity: 0.7; }
.set-bonuses .on, .set-tiers .on { color: #9be89b; }
.set-tiers { font-size: 12px; }
.perk-name { text-decoration: underline dotted; }

/* ---------- Admin tab (server admins only) */
.btn.danger, .btn.small.danger { background: var(--danger); border-color: #ff9a9d; color: #2b0608; box-shadow: 0 3px 0 #7a1c20; }
.blocked-note { background: #4a1d24; border-left: 4px solid var(--danger); padding: 8px 12px; margin: 0 0 12px; font-size: 14px; }
.admin { display: grid; gap: 16px; }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.admin-head h2 .sub { font-weight: 400; font-size: 15px; }
.admin-head p { margin: 4px 0 0; max-width: 70ch; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.admin .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin .stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.admin .stat { background: var(--cell); padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.admin .stat b { font-size: 22px; color: var(--amber); font-variant-numeric: tabular-nums; }
.admin .mode-lines { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.admin-live ul, .admin-hall ul, .admin .people { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.admin-live li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: var(--cell); padding: 8px 10px; }
.admin-live li > div { display: grid; gap: 2px; }
.admin-live .state-dot { width: 10px; height: 10px; background: var(--haze); }
.admin-live .phase-raid .state-dot { background: var(--hp); }
.admin-live .phase-lobby .state-dot { background: var(--amber); }
.admin .nm { display: flex; align-items: baseline; gap: 2px; }
.admin-settings fieldset { border: 2px solid var(--rivet); padding: 8px 12px 10px; margin: 0 0 12px; display: grid; gap: 6px; }
.admin-settings legend { color: var(--haze); font-size: 13px; padding: 0 4px; }
.admin-settings .radio, .admin-settings .check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
.admin-settings .radio.off { opacity: 0.5; cursor: not-allowed; }
.admin-settings select { background: #0e0b1f; border: 2px solid var(--rivet); color: var(--star); font: inherit; padding: 4px 8px; }
.admin-settings .field { margin-bottom: 10px; justify-content: start; }
.admin-settings .check { margin-bottom: 12px; }
.admin input[type="radio"], .admin input[type="checkbox"] { accent-color: var(--amber); width: 18px; height: 18px; }
.admin .search { margin-left: auto; background: #0e0b1f; border: 2px solid var(--rivet); color: var(--star); font: inherit; padding: 6px 10px; min-width: 220px; }
.admin .people li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; background: var(--cell); padding: 8px 10px; border-left: 4px solid transparent; }
.admin .people li.is-blocked { border-left-color: var(--danger); }
.admin .people .who { display: grid; gap: 2px; }
.admin .people .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.admin .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.admin .tag { font-size: 12px; padding: 1px 8px; border: 2px solid var(--rivet); color: var(--haze); }
.admin .tag.online { border-color: var(--hp); color: var(--hp); }
.admin .tag.blocked { border-color: var(--danger); color: #ffb3b5; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin .block-form { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 8px; border-top: 2px solid var(--rivet); }
.admin .block-form p { margin: 0; max-width: 70ch; }
.admin-hall li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--cell); padding: 8px 10px; }
.admin-hall li > span { display: grid; gap: 2px; }
.admin-log ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.admin-log li .sub { display: inline-block; min-width: 9ch; }
@media (max-width: 860px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin .stat-tiles { grid-template-columns: 1fr 1fr; }
  .admin .people li { grid-template-columns: 1fr; }
  .admin .people .acts { justify-content: flex-start; }
  .admin .search { margin-left: 0; min-width: 0; width: 100%; }
}

/* ---------- header buttons: invite friends, music */
.top-btns { display: flex; gap: 8px; align-items: center; }
.invite-btn {
  background: linear-gradient(var(--key-top), var(--key)); border: 1px solid var(--key-lo); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--key-hi), 0 2px 0 var(--key-lo); color: var(--haze); height: 40px; padding: 0 12px;
  display: flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-weight: 700;
}
.invite-btn:hover { color: var(--hud); }
.open-seat .btn { margin: 0; }
/* ---------- the Feedback page: a window over the game */
.feedback-pop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 12px;
  background: rgba(14, 11, 31, 0.78); }
.feedback-pop[hidden] { display: none; }
.feedback-card { width: min(760px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; display: grid; gap: 12px; }
.feedback-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.feedback-card h2 { margin: 0; }
.feedback-topics { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.feedback-topics li { display: grid; gap: 6px; }
.feedback-card .rate, .feedback-card .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.feedback-card textarea, .feedback-card input { width: 100%; font: inherit; color: var(--star); background: var(--cell);
  border: 1px solid var(--cell-line); border-radius: 4px; padding: 8px; resize: vertical; }
.feedback-card .btn.primary { justify-self: start; }
.feedback-done { font-weight: 700; color: var(--hud); }
.feedback-privacy { font-size: 12px; }
@media (max-width: 520px) { .feedback-card .rate .chip span { display: none; } }
@media (max-width: 920px) {
  .invite-btn { width: 40px; padding: 0; justify-content: center; }
  .invite-btn span { display: none; }
}

/* ---------- music control (header) */
.music-ctl { position: relative; }
.music-btn {
  background: linear-gradient(var(--key-top), var(--key)); border: 1px solid var(--key-lo); border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--key-hi), 0 2px 0 var(--key-lo); color: var(--haze); width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
}
.music-btn:hover, .music-btn[aria-expanded="true"] { color: var(--hud); }
.music-btn .cross { display: none; }
.music-btn.muted .wave { display: none; }
.music-btn.muted .cross { display: inline; }
.music-btn.muted { color: var(--danger); }
.music-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; z-index: 30; display: grid; gap: 10px; }
.music-pop input[type="range"] { width: 100%; accent-color: var(--amber); }
.music-pop .music-hint { margin: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; }
.legal-links a { color: var(--haze); }
.legal-links a:hover { color: var(--hud); }
.music-pop .legal-links { padding-top: 8px; border-top: 1px solid #26214a; }
.web-login .legal-links { justify-content: center; margin-top: 14px; }
.retire-hint { margin: 0 0 10px; font-size: 14px; }
.retire-hint b { color: var(--amber); }

/* ---------- the Station: bays */
.station { display: grid; gap: 16px; }
/* The concourse: the Station opens on a large button per location */
.concourse .locations { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.locations .location { grid-column: span 2; }                       /* three across, then two wider ones */
.locations .location:nth-child(n + 4) { grid-column: span 3; }
@media (max-width: 1000px) {
  .concourse .locations { grid-template-columns: 1fr 1fr; }
  .locations .location, .locations .location:nth-child(n + 4) { grid-column: auto; }
  .locations .location:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .concourse .locations { grid-template-columns: 1fr; }
}
.location {
  position: relative; display: grid; grid-template-rows: 112px auto; gap: 10px; text-align: left; cursor: pointer;
  color: inherit; font: inherit; padding: 12px 14px 14px; min-height: 230px;
  background: linear-gradient(#17132c, #100d22); border: 1px solid #3a3264; border-radius: 4px;
  box-shadow: inset 0 1px 0 #2c2650, 0 3px 0 var(--key-lo);
}
.location:hover { border-color: var(--hud); box-shadow: inset 0 1px 0 #2c2650, 0 3px 0 var(--key-lo), 0 0 18px rgba(255, 192, 77, 0.16); }
.location:active { transform: translateY(1px); }
.location.lit { border-color: var(--hud); }
.location .dot { top: 10px; right: 10px; }
.loc-art {
  display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden;
  background: var(--scan), radial-gradient(ellipse at 50% 60%, #2a2050, #0b0a18 70%); border: 1px solid var(--glass-line); border-radius: 3px;
}
.loc-art img { image-rendering: pixelated; max-height: 100px; max-width: 100%; }
.loc-art .doll { height: 92px; width: auto; }
.loc-art .foe-art { height: 80px; }
.loc-shipyard .loc-art img { max-height: 90px; }
.loc-casino .loc-art img { height: 56px; padding: 4px; background: #1d1735; border: 1px solid #3a3264; border-radius: 3px; }
.loc-text { display: grid; gap: 3px; align-content: start; }
.loc-name { font-size: 19px; color: var(--hud); letter-spacing: 0.02em; }
.loc-status { font-size: 13px; color: var(--haze); padding-top: 6px; margin-top: 3px; border-top: 1px solid var(--rivet); }
.loc-status b { color: var(--star); }
.station-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.station-nav .back { font-weight: 700; }
.station-nav .hops { display: flex; flex-wrap: wrap; gap: 6px; }
.station-nav .hop {
  position: relative; background: none; border: 1px solid var(--cell-line); border-radius: 3px; color: var(--haze);
  font: inherit; font-size: 13px; padding: 5px 10px; cursor: pointer;
}
/* Hover only where there's a mouse, and colour alone: an outlined chip under the pointer (or left "stuck" after a
   tap on a phone) read as the place you're in */
@media (hover: hover) { .station-nav .hop:hover { color: var(--hud); } }
.station-nav .hop .dot { top: -3px; right: -3px; }
.bay { display: grid; gap: 14px; }
.bay > header { margin-bottom: 0; }
.mat-chip { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; font-size: 13px; }
.mat-chip i { width: 9px; height: 9px; display: block; }
.haul { display: grid; gap: 6px; padding: 12px 14px; background: #1d1630; border: 1px solid var(--hud); border-radius: 4px; box-shadow: 0 0 16px rgba(255, 192, 77, 0.15); }
.haul header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.haul header b { color: var(--hud); }
.bp-glyph { width: 30px; height: 30px; flex: none; background: #2a8fd8; border: 2px solid #0e0b1f; box-shadow: inset 0 0 0 3px #1a4a86; }

/* Expeditions */
.berths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.berth { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 10px; background: var(--cell); border: 1px solid var(--cell-line); border-left: 3px solid var(--shield); min-height: 84px; }
.berth img { height: 40px; width: auto; }
.berth > div { display: grid; gap: 1px; min-width: 0; }
.berth > .btn { grid-column: 1 / -1; justify-self: start; }
.berth.open { display: grid; place-items: center; border: 1px dashed var(--rivet); border-left-style: dashed; background: transparent; }
.berth.done { border-left-color: var(--hp); box-shadow: inset 0 0 0 1px rgba(90, 209, 90, 0.3); }
.berth .eta { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--shield); font-size: 17px; letter-spacing: 0.04em; }
.berth .back { color: var(--hp); font-weight: 700; }
.exp-step { display: grid; gap: 8px; }
.exp-ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.exp-ship, .exp-zone {
  display: grid; gap: 3px; text-align: left; cursor: pointer; color: inherit; padding: 10px;
  background: #120f24; border: 1px solid #3a3264; border-radius: 4px; box-shadow: 0 2px 0 var(--key-lo);
}
.exp-ship { justify-items: center; text-align: center; }
.exp-ship img { height: 40px; width: auto; }
.exp-ship.on, .exp-zone.on { border-color: var(--hud); background: #1c1730; box-shadow: 0 2px 0 var(--key-lo), 0 0 14px rgba(255, 192, 77, 0.18); }
.exp-ship:disabled { opacity: 0.45; cursor: not-allowed; }
.exp-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exp-zone .zt { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.exp-zone .dur { color: var(--shield); font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-zone .pv { font-size: 13px; }
.exp-zone .pv b { color: var(--amber); }
.exp-zone .fuel { font-size: 12px; color: var(--haze); }
.exp-zone .warn { font-size: 12px; color: var(--danger); }
.exp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 10px; border-top: 1px solid #26214a; }
.exp-go .sub { flex: 1 1 260px; }
@media (max-width: 860px) {
  .berths, .exp-zones { grid-template-columns: 1fr; }
  .location { min-height: 0; grid-template-rows: 84px auto; }
  .loc-art img { max-height: 76px; }
  .loc-art .doll { height: 72px; }
}

/* Bounty Board */
.contracts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.contracts.wide { grid-template-columns: 1fr 1fr; }
.contract {
  display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 4px 10px; padding: 12px;
  background: var(--cell); border: 1px solid var(--cell-line); border-top: 3px solid var(--rivet); border-radius: 4px;
}
.contract > .kind, .contract > .ct, .contract > .sub, .contract > .reward, .contract > .contributors, .contract > .ct-act { grid-column: 1 / -1; }
.contract .kind { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--haze); }
.contract .ct { font-size: 16px; }
.contract .meter { display: block; height: 8px; background: #0e0b1f; border: 1px solid var(--rivet); align-self: center; }
.contract .meter i { display: block; height: 100%; background: var(--hud); box-shadow: 0 0 8px rgba(255, 192, 77, 0.5); }
.contract .meter.big { height: 12px; }
.contract .count { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--haze); }
.contract .reward { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; padding-top: 4px; border-top: 1px dashed #26214a; }
.contract .reward b { color: var(--amber); }
.contract .ct-act { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.contract .tag { color: var(--hp); font-weight: 700; font-size: 13px; }
.contract.k-weekly { border-top-color: var(--shield); }
.contract.done { border-top-color: var(--hp); box-shadow: inset 0 0 0 1px rgba(90, 209, 90, 0.25); }
.contract.done .meter i { background: var(--hp); box-shadow: 0 0 8px rgba(90, 209, 90, 0.5); }
.contract.claimed { opacity: 0.7; }
.contract.k-server { border-top: 4px solid transparent; border-image: var(--hazard) 4; border-image-width: 4px 0 0 0; }
.contract.k-server .kind { color: var(--hud); }
.contract .contributors { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; counter-reset: top; }
.contract .contributors li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 6px; background: #100d20; counter-increment: top; }
.contract .contributors li::before { content: counter(top); color: var(--haze); width: 1.4em; }
.contract .contributors li b { flex: 1; font-weight: 600; }
.contract .contributors li.mine b { color: var(--amber); }
@media (max-width: 860px) { .contracts, .contracts.wide { grid-template-columns: 1fr; } }

/* Arena */
.arena-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
#arena-scene {
  width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: #100c22;
  clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%, 0 36px);
}
.arena-side { display: grid; align-content: start; gap: 8px; min-width: 0; }
.arena-side .log { max-height: 200px; border-top: 1px solid #26214a; padding-top: 8px; }
.bout-line { font-size: 13px; padding: 6px 10px; background: #2a1d0c; border-left: 3px solid var(--hud); }
.duels { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.duel-card { display: grid; gap: 6px; padding: 8px 10px; background: var(--cell); border: 1px solid var(--cell-line); border-left: 3px solid var(--rivet); font-size: 14px; }
.duel-card > div:first-child { display: grid; gap: 1px; }
.duel-card.incoming { border-left-color: var(--hud); box-shadow: 0 0 12px rgba(255, 192, 77, 0.15); }
.duel-card .odds b { color: var(--amber); }
.duel-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.duel-form { display: grid; grid-template-columns: 1fr auto auto; gap: 12px 18px; align-items: start; padding-top: 12px; border-top: 1px solid #26214a; }
.duel-step { display: grid; gap: 6px; }
.duel-step .chips { margin-left: 0; flex-wrap: wrap; }
.duel-step .chip:disabled { opacity: 0.4; cursor: not-allowed; }
.foes { display: flex; flex-wrap: wrap; gap: 6px; }
.foe {
  display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; color: inherit; padding: 6px 10px 6px 6px;
  background: #120f24; border: 1px solid #3a3264; border-left: 3px solid var(--cls); border-radius: 3px; box-shadow: 0 2px 0 var(--key-lo);
}
.foe img.doll { height: 36px; width: auto; }
.foe > span { display: grid; }
.foe.on { border-color: var(--hud); border-left-color: var(--cls); background: #1c1730; }
.duel-go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.duel-go .sub { flex: 1 1 260px; }
.arena-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 12px; border-top: 1px solid #26214a; }
.arena-boards .board-rows { margin-top: 6px; }
.recent { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.recent li { padding: 5px 8px; background: var(--cell); }
@media (max-width: 860px) {
  .arena-stage, .arena-boards, .duel-form { grid-template-columns: 1fr; }
  #arena-scene { clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px); }
}

/* Casino */
.casino { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.game { display: grid; gap: 10px; padding: 14px; background: var(--cell); border: 1px solid var(--cell-line); border-radius: 4px; }
.game-head { display: grid; gap: 2px; }
.game-head h3 { color: var(--hud); letter-spacing: 0.04em; }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; background: #07060f; border: 2px solid #000; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 6px 18px #000; }
.reel { display: grid; place-items: center; aspect-ratio: 1; background: linear-gradient(#0e0b1f, #1a1630 50%, #0e0b1f); border: 1px solid #2a2550; position: relative; overflow: hidden; }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.55), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.55)); }
.reel img { width: 60%; height: auto; image-rendering: pixelated; transition: transform 0.12s; }
.reel.blur img { transform: translateY(-3px) scaleY(1.18); filter: blur(0.6px) brightness(1.15); }
.reels-game.jackpot .reels { box-shadow: inset 0 0 0 2px var(--legendary), 0 0 22px rgba(255, 157, 46, 0.5); }
.reel-result { min-height: 22px; text-align: center; }
.reel-result .win { color: var(--amber); }
.reel-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.reel-controls .chips { margin-left: 0; }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }
.paytable summary { cursor: pointer; color: var(--haze); font-size: 13px; }
.paytable ul { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; }
.paytable li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 6px; background: #100d20; }
.paytable li b { color: var(--amber); }
.pt-line { display: flex; gap: 2px; align-items: center; }
.pt-line img { width: 20px; height: 20px; image-rendering: pixelated; }
.pt-line .any { width: 20px; height: 20px; display: inline-block; border: 1px dashed var(--rivet); }

.reactor { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: stretch; padding: 12px; background: #07060f; border: 2px solid #000; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 6px 18px #000; --heat: var(--shield); }
.reactor[data-heat="warm"] { --heat: var(--amber); }
.reactor[data-heat="hot"] { --heat: var(--danger); }
.reactor .core { position: relative; height: 130px; border: 2px solid #3a3264; border-radius: 26px; background: #0e0b1f; overflow: hidden; }
.reactor .core i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(8% + var(--fill) * 92%); background: linear-gradient(to top, var(--heat), color-mix(in srgb, var(--heat) 40%, #fff)); box-shadow: 0 0 18px var(--heat); }
.reactor[data-phase="running"] .core i { animation: pulse 0.6s ease-in-out infinite alternate; }
.reactor[data-phase="crashed"] { --heat: var(--danger); animation: shake 0.4s; }
.reactor[data-phase="crashed"] .core i { height: 100%; background: repeating-linear-gradient(-45deg, var(--danger) 0 6px, #3a0d10 6px 12px); }
.readout { display: grid; align-content: center; gap: 4px; }
.readout b#crash-mult { font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--heat); text-shadow: 0 0 16px color-mix(in srgb, var(--heat) 60%, transparent); }
.readout .blown { color: var(--danger); }
.history { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.history span { padding: 1px 6px; border: 1px solid var(--rivet); }
.history .low { color: #ff8c8f; }
.history .mid { color: var(--amber); }
.history .big { color: var(--hp); border-color: var(--hp); }
.crash-controls { display: grid; gap: 8px; }
.crash-controls > div { display: grid; gap: 4px; }
.crash-controls .chips { margin-left: 0; flex-wrap: wrap; }
.crash-go { display: flex; }
.crash-go .btn { flex: 1; }
.btn.big { min-height: 52px; font-size: 18px; }
.riders { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.riders li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 3px 8px; background: #100d20; }
.riders li.mine b { color: var(--amber); }
.riders .won { color: var(--hp); font-weight: 700; }
.riders .lost { color: var(--danger); }
.big-wins { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid #26214a; }
@keyframes pulse { from { filter: brightness(0.9); } to { filter: brightness(1.25); } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 860px) { .casino { grid-template-columns: 1fr; } .paytable ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .reactor[data-phase="running"] .core i, .reactor[data-phase="crashed"] { animation: none; }
}

/* Live games: lobbies and missions in other channels (the Raid tab, between missions) */
.live-games { margin-bottom: 16px; display: grid; gap: 10px; }
.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.live-head .sub { flex: 1 1 260px; margin: 0; }
.live-head .chips { margin-left: 0; }
.game-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.game-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 4px 14px; align-items: center;
  padding: 8px 10px; background: var(--cell); border: 1px solid var(--cell-line); }
.game-row.here { outline: 1px solid var(--amber); background: #2a2140; }
.game-row > div { display: grid; gap: 2px; min-width: 0; }
.game-row .sub { overflow-wrap: anywhere; }
.g-status { font-size: 13px; font-weight: 700; }
.g-status.lobby { color: var(--hp); }
.g-status.raid { color: var(--amber); }
.chip-note { font-size: 12px; font-weight: 700; color: var(--hud); letter-spacing: 0.04em; }
.visit-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-bottom: 12px; padding: 8px 12px; background: #2a2140; border: 1px solid var(--amber); }
@media (max-width: 640px) {
  .game-row { grid-template-columns: minmax(0, 1fr) auto; }
  .game-row .g-who { grid-column: 1 / -1; grid-row: 2; }
  .game-row .g-act { grid-column: 2; grid-row: 1; }
}

/* ---------- lobbies: the Captain's lobby time, and why a lobby can't take you */
.lobby-time { margin: 10px 0 0; align-items: center; flex-wrap: wrap; }
.lobby-time .sub { margin-right: 4px; }
.chip-note.cant { color: var(--haze); margin-right: 8px; }
.game-row .g-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.who-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 10px; }
.who-row .who-say { flex: 1 1 240px; margin: 0; }
.who-row select { max-width: 260px; }
.game-section { display: grid; gap: 6px; }
.game-section h3 { margin: 4px 0 0; font-size: 14px; letter-spacing: 0.04em; color: var(--amber); }
.game-section > .sub { margin: 0; }
.web-link { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.public-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2a1a00;
  background: var(--hud); border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.crew-card { position: relative; }
.crew-card .remove-crew { position: absolute; top: 4px; right: 4px; padding: 2px 8px; font-size: 11px; }
.public-games { display: grid; gap: 8px; margin-top: 6px; }
.public-games h3 { margin: 6px 0 0; font-size: 15px; }
.splash-card.web-login { max-width: 640px; }
.g-what .public-tag { justify-self: start; align-self: start; width: max-content; margin: 2px 0 0; }
/* the crew you're in between missions (Room.party): it stays together until you leave */
.crew-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px;
  padding: 10px 12px; background: var(--cell); border: 1px solid var(--cell-line); border-left: 3px solid var(--hud); border-radius: 4px;
}
.crew-strip > div { display: grid; gap: 2px; flex: 1 1 320px; min-width: 0; }
.away-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--haze);
  border: 1px solid var(--cell-line); border-radius: 3px; padding: 0 5px; margin-left: 4px; vertical-align: middle; }
.crew-card .away-tag { justify-self: start; width: max-content; margin: 2px 0 0; }

/* ---------- the Collection tab: every set, and what you've found of it at each rarity */
.col-head { display: grid; gap: 12px; margin-bottom: 16px; }
.col-summary { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; justify-content: space-between; }
.col-summary > div:first-child { flex: 1 1 320px; }
.col-summary h2 { margin: 0 0 4px; }
.col-summary .sub { margin: 0; }
.col-stats { display: flex; gap: 18px; }
.col-stats > div { display: grid; text-align: center; }
.col-stats b { font-size: 22px; color: var(--hud); font-variant-numeric: tabular-nums; }
.col-bar { height: 8px; background: var(--cell); border: 1px solid var(--cell-line); }
.col-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber-deep), var(--amber)); }
.col-titles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.col-title { padding: 2px 8px; border: 1px solid var(--cell-line); font-size: 12px; font-weight: 700; color: var(--haze); }
.col-title.won { color: var(--hud); border-color: var(--hud); }
.col-head .chips { margin-left: 0; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.col-set { padding: 10px 12px; background: var(--cell); border: 1px solid var(--cell-line); display: grid; gap: 4px; align-content: start; }
.col-set.done { border-color: var(--amber-deep); }
.col-set.mastered { border-color: var(--legendary); box-shadow: 0 0 10px -3px var(--legendary); }
.col-set header { display: flex; align-items: center; gap: 8px; }
.col-set h3 { margin: 0; font-size: 15px; }
.col-set .sub { margin: 0; }
.col-count { font-variant-numeric: tabular-nums; }
.col-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 6px; border: 1px solid currentColor; }
.col-badge.done { color: var(--hud); }
.col-badge.mastered { color: var(--legendary); }
.col-pieces { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.col-pieces li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.col-pieces li:not(.got) .col-name { color: var(--haze); opacity: 0.7; }
.col-name { font-size: 13px; overflow-wrap: anywhere; }
.pips { display: flex; gap: 3px; }
.pip { width: 10px; height: 10px; border: 1px solid var(--c); opacity: 0.45; }
.pip.got { background: var(--c); opacity: 1; }
@media (max-width: 640px) { .col-stats { gap: 12px; } .col-stats b { font-size: 18px; } }

/* Stats in plain words: what each stat does for you, how fabrication works, and damage dealt in the debrief */
.stats.explained { grid-template-columns: 1fr; }
.stats.explained > div { flex-wrap: wrap; }
.stats .fx { flex-basis: 100%; color: var(--haze); font-size: 11px; line-height: 1.3; margin-top: 1px; }
.stats > div[title] dt { text-decoration: underline dotted rgba(169, 163, 201, 0.5); text-underline-offset: 3px; cursor: help; }
.help-btn { margin-top: 8px; }
.glossary { display: grid; gap: 6px; margin: 8px 0 0; font-size: 12px; }
.glossary div { display: grid; grid-template-columns: 9em 1fr; gap: 8px; }
.glossary dt { color: var(--amber); }
.glossary dd { margin: 0; color: var(--star); }
.fab-guide { margin: 0 0 6px; font-size: 12px; }
.fab-guide .rarities { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 2px; }
.fab-guide .rarities b { display: inline-block; min-width: 9.5em; }
.fab-guide .rarities span { color: var(--haze); }
.preview { font-size: 12px; }
.rarity-note { font-size: 13px; margin: 0 0 8px; }
@media (max-width: 460px) {
  .glossary div { grid-template-columns: 1fr; gap: 0; }
}
.dealt { margin: 4px 0 2px; }
.dealt .dealt-top { color: var(--amber); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.dealt-fights { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; }
.dealt-fights li { background: var(--cell); border: 1px solid var(--cell-line); padding: 1px 6px; font-variant-numeric: tabular-nums; }
.dealt-fights li span { color: var(--haze); }
.dealt-fights li.boss { border-color: var(--amber-deep); }
.dealt-fights li.more { color: var(--haze); }
/* the blueprint libraries (Hangar: ship parts, Quarters: gear) */
.library .chips { margin: 4px 0 6px; }
.lib-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; font-size: 13px; }
.lib-progress b { color: var(--amber); font-size: 16px; }
.lib-progress .pips { display: inline-flex; gap: 3px; }
.lib-progress .pips i { width: 10px; height: 10px; border: 1px solid var(--rivet); background: var(--cell); }
.lib-progress .pips i.on { background: var(--hud); border-color: var(--amber-deep); }
.lib-progress .sub { flex-basis: 100%; }
.lib-list { max-height: 560px; overflow-y: auto; }
.perk-line b { color: var(--legendary); }
.style-tag { font-weight: 700; }
.s-dodge { color: #7fd4ff; } .s-striker { color: #ff8a65; } .s-tank { color: #c9b27a; } .s-medic { color: #7be38f; } .s-fortune { color: #ffd34d; }
.glossary-head { margin: 12px 0 2px; font-size: 13px; color: var(--amber); }
.style-note { font-size: 13px; margin: 0 0 8px; }
.styles-guide dt { font-weight: 700; }
.glossary dt.s-dodge { color: #7fd4ff; } .glossary dt.s-striker { color: #ff8a65; } .glossary dt.s-tank { color: #c9b27a; }
.glossary dt.s-medic { color: #7be38f; } .glossary dt.s-fortune { color: #ffd34d; }

/* ---------- legendary: top-tier items glow, a whole legendary set (or legendary ship parts) puts an aura on the
   pilot or ship, here and in fights (scene.js), with a badge naming the perk */
.slot.r-legendary, .tile.r-legendary, .tile-sm.r-legendary { position: relative; overflow: hidden; animation: legend-pulse 2.4s ease-in-out infinite; }
.slot.r-legendary::after, .tile.r-legendary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 210, 140, 0.35) 50%, transparent 65%);
  background-size: 250% 100%; animation: legend-sheen 3.2s linear infinite;
}
@keyframes legend-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--legendary), 0 0 10px -3px var(--legendary); }
  50% { box-shadow: 0 0 0 1px var(--legendary), 0 0 18px 0 var(--legendary); }
}
@keyframes legend-sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.hero.aura { --aura: var(--legendary); animation: aura-pulse 2.4s ease-in-out infinite; }
.hero.a-dodge { --aura: #7fd4ff; } .hero.a-striker { --aura: #ff8a65; } .hero.a-tank { --aura: #c9b27a; }
.hero.a-medic { --aura: #7be38f; } .hero.a-fortune { --aura: #ffd34d; }
@keyframes aura-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px var(--aura)) drop-shadow(0 0 6px var(--aura)); }
  50% { filter: drop-shadow(0 0 3px var(--aura)) drop-shadow(0 0 16px var(--aura)); }
}
.legend-badge { margin: 4px 0 8px; padding: 6px 10px; border: 1px solid currentColor; border-radius: 4px; background: rgba(255, 157, 46, 0.08);
  font-size: 13px; text-align: center; }
.legend-badge .sub { display: block; color: var(--haze); font-size: 12px; margin-top: 2px; }
.legend-badge.s-legendary { color: var(--legendary); }
.set-bonuses .on.legend, .set-tiers .on.legend { color: var(--legendary); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .slot.r-legendary, .tile.r-legendary, .tile-sm.r-legendary, .hero.aura { animation: none; }
  .slot.r-legendary::after, .tile.r-legendary::after { animation: none; display: none; }
  .hero.aura { filter: drop-shadow(0 0 3px var(--aura)) drop-shadow(0 0 10px var(--aura)); }
}

/* ---------- role items (Field Medkit, Decoy Beacon, Shield Link, Repair Drones): what they do for the crew */
.perk.role { background: #0c2a2c; border-left-color: #57e3ea; }
.preview.role-line { display: block; color: #9be0e6; }

/* ---------- layout 7: the Hangar and the Captain's Quarters. A blueprint-grid schematic (the ship or the pilot,
   callouts for each slot on dashed lines, the stat web on the right), then the hold, blueprints and tuning as tabs. */
:root {
  --grid-bg: #0a1630; --grid-line: rgba(87, 227, 234, 0.08); --grid-fine: rgba(87, 227, 234, 0.04);
  --schem-edge: #1f4a5a; --schem-text: #a9c9d9; --schem-glass: rgba(5, 10, 26, 0.88);
  --give-bg: #10263a; --give-line: #1f4a5a; --give-text: #9fe8ee;
  --up: #5ad15a; --down: #ff8a8e;
}
.kick { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--shield); }
.panel.schem {
  background-color: var(--grid-bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  border: 4px solid var(--bezel); border-radius: 6px; padding: 16px 20px;
  box-shadow: 0 0 0 1px #000, 0 8px 20px rgba(0, 0, 0, 0.45);
}
.schem[data-screen]::before { display: none; }
.schem-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: stretch; }
.schem-name { font-size: 26px; line-height: 1.15; }
.schem-sub { color: var(--schem-text); font-size: 13px; }
.schem-head .look-picker { margin-top: 10px; padding: 8px 10px; background: var(--schem-glass); border: 1px solid var(--schem-edge); border-radius: 4px; }

/* the stage: the ship or the pilot in the middle, the callouts around them */
.schem-stage { display: grid; gap: 16px 34px; align-items: center; min-height: 440px; }
.schem-gear .schem-stage {
  grid-template-columns: minmax(0, 230px) minmax(110px, 1fr) minmax(0, 230px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "head head ." "left hero right";
}
.schem-ship .schem-stage {
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head top" "left hero" ". bottom";
}
.schem-head { grid-area: head; align-self: start; }
.schem-hero { grid-area: hero; display: grid; justify-items: center; gap: 8px; min-width: 0; }
.schem-hero .hero.doll { height: 240px; width: auto; }
.schem-hero .hero.ship { width: min(100%, 340px); max-width: 100%; height: auto; }
.schem-hero .legend-badge { margin: 0; background: var(--schem-glass); }
.schem-group { display: flex; flex-direction: column; justify-content: space-around; gap: 22px; align-self: stretch; min-width: 0; }
.g-left { grid-area: left; } .g-right { grid-area: right; } .g-top { grid-area: top; flex-direction: row; justify-content: center; }
.g-bottom { grid-area: bottom; flex-direction: row; gap: 16px; }
.g-bottom > * { flex: 1 1 0; }

/* a callout: a slot's card on the schematic, joined to the middle by a dashed wire */
.slot.callout {
  display: flex; flex-direction: column; gap: 6px; justify-items: stretch; text-align: left; width: 100%; max-width: 236px;
  min-height: 0; padding: 8px; border-radius: 4px; border: 1px solid var(--shield); background: rgba(11, 10, 24, 0.92);
  color: var(--star); font: inherit; font-size: 13px; cursor: pointer; position: relative; overflow: visible;
}
.g-top .slot.callout { max-width: 260px; }
.g-bottom .slot.callout { max-width: none; }
.slot.callout::before { display: none; }
.slot.callout.empty { border-style: dashed; border-color: var(--schem-edge); cursor: default; }
.slot.callout.r-legendary { border-color: var(--legendary); }
.slot.callout.sel, .slot.callout.swapping { border-color: var(--amber); }
.slot.callout.sel { outline: 2px solid var(--amber); outline-offset: 2px; }
.slot.callout:hover:not(.empty) { background: rgba(16, 38, 58, 0.95); }
.callout .c-top { display: flex; gap: 8px; align-items: center; min-width: 0; }
.callout .c-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--cell); border: 1px solid var(--cell-line); border-radius: 4px; position: relative; }
.callout .c-icon .icon { width: 32px; height: 32px; }
.callout .c-txt { display: flex; flex-direction: column; min-width: 0; }
.c-slot { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--shield); }
.callout.swapping .c-slot, .callout.sel .c-slot { color: var(--amber); }
.callout .c-name { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.callout.empty .c-name { color: var(--haze); font-weight: 400; }
.gives { display: flex; flex-wrap: wrap; gap: 4px; }
.give { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--give-bg); color: var(--give-text); border: 1px solid var(--give-line); }
.callout .wire { position: absolute; pointer-events: none; border: 0 dashed var(--shield); opacity: 0.7; }
.g-left .callout .wire { left: 100%; top: 50%; width: 34px; border-top-width: 1px; }
.g-right .callout .wire { right: 100%; top: 50%; width: 34px; border-top-width: 1px; }
.g-top .callout .wire { top: 100%; left: 50%; height: 16px; border-left-width: 1px; }
.g-bottom .callout .wire { bottom: 100%; left: 50%; height: 16px; border-left-width: 1px; }
.callout.swapping .wire, .callout.sel .wire { border-color: var(--amber); opacity: 1; }

/* the stat web's panel */
.web-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--schem-glass); border: 1px solid var(--schem-edge); border-radius: 6px; min-width: 0; scroll-margin-top: 96px; }
.web-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.web-head .kick { margin: 0; }
.web-key { font-size: 12px; color: var(--haze); display: inline-flex; align-items: center; gap: 4px; }
.web-key i { display: inline-block; width: 10px; height: 10px; }
.web-key .k-now { background: var(--shield); }
.web-key .k-next { border: 2px dashed var(--amber); margin-left: 8px; }
.stat-web { position: relative; width: 100%; max-width: 340px; aspect-ratio: 340 / 300; margin: 0 auto; }
.stat-web svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stat-web .ring { fill: none; stroke: var(--schem-edge); }
.stat-web .spoke { stroke: var(--schem-edge); stroke-dasharray: 2 3; }
.stat-web .now { fill: rgba(87, 227, 234, 0.25); stroke: var(--shield); stroke-width: 2; stroke-linejoin: round; }
.stat-web .next { fill: rgba(255, 192, 77, 0.06); stroke: var(--amber); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.web-label { position: absolute; transform: translate(-50%, -50%); text-align: center; font-size: 12px; line-height: 1.25; white-space: nowrap; }
.web-label span:first-child { display: block; color: var(--schem-text); }
.web-label b { font-variant-numeric: tabular-nums; }
.web-label .next { color: var(--amber); font-weight: 700; }
.web-label[title] span:first-child { text-decoration: underline dotted rgba(169, 201, 217, 0.5); text-underline-offset: 3px; cursor: help; }
.web-more { font-family: "Courier New", monospace; font-size: 12px; color: #8fc3cf; text-transform: uppercase; letter-spacing: 0.03em; }
.web-more b { color: var(--star); text-transform: none; font-family: var(--font); }
.web-more i { font-style: normal; color: var(--haze); }
.web-more [title] { cursor: help; }
.inv .cost { background: var(--glass); }
.web-panel .detail { display: grid; gap: 8px; border-top: 1px solid var(--schem-edge); padding-top: 10px; }
.web-panel .help-btn { margin-top: 0; justify-self: start; align-self: flex-start; }
.detail .detail-head { align-items: flex-start; gap: 10px; }
.detail .detail-icon { padding: 3px; flex: none; }
.detail .detail-icon .icon { width: 36px; height: 36px; }
.detail .sel-line { font-size: 13px; line-height: 1.35; }
.detail .detail-title { display: grid; gap: 2px; min-width: 0; }
.detail .perk { font-size: 13px; }
.sel-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.sel-actions .btn { white-space: normal; line-height: 1.2; min-height: 40px; padding: 6px 10px; font-size: 13px; }
.sel-actions .equipped-note { align-self: center; }
.tune-note { font-size: 12px; }
.item-more { font-size: 13px; }
.item-more summary { cursor: pointer; color: var(--hud); font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.item-more[open] summary { margin-bottom: 6px; }
.item-more .look-preview { margin: 6px 0; }
.verdict { font-size: 11px; font-weight: 700; white-space: nowrap; }
.verdict.v-up { color: var(--up); } .verdict.v-down { color: var(--down); } .verdict.v-flat { color: var(--haze); }
.verdict.v-set { color: var(--down); font-weight: 400; display: block; }

/* the schematic's foot: set progress (Quarters) and the buttons */
.schem-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.schem-sets { flex: 1 1 420px; min-width: 0; }
.set-strip { margin: 0; padding: 8px 12px; background: var(--schem-glass); border: 1px solid var(--schem-edge); border-radius: 4px; font-size: 13px; }
.set-strip li { line-height: 1.5; }
.set-strip b { color: var(--legendary); }
.set-strip .off { color: var(--schem-text); opacity: 1; }
p.set-strip { color: var(--schem-text); }
.schem-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.menu-wrap { position: relative; display: inline-block; }
.pilot-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 4; display: grid; min-width: 200px; padding: 6px;
  background: var(--glass); border: 1px solid var(--key-hi); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.menu-item { text-align: left; background: none; border: 0; padding: 10px 12px; min-height: 40px; cursor: pointer; font-weight: 700; color: var(--star); border-radius: 3px; }
.menu-item:hover, .menu-item:focus-visible { background: var(--key-top); color: var(--hud); }
.menu-item.del-btn { color: var(--danger); }
.menu-item[aria-expanded="true"] { color: var(--hud); }

/* the "What do these stats do?" panel: every stat with its line, and what each means */
.stats-panel header .btn, .panel-close { margin-left: auto; order: 9; }
.stats-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
.stats-cols .glossary-head:first-child { margin-top: 0; }

/* the bottom half: tabs, then the hold's tiles, the blueprints or tuning */
.panel.inv { padding-top: 6px; }
.inv-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 24px; border-bottom: 1px solid var(--cell-line); }
.inv-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.inv-tab {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 2px; min-height: 44px; cursor: pointer;
  color: var(--haze); font-size: 15px; font-weight: 700;
}
.inv-tab .count { font-weight: 400; color: var(--haze); }
.inv-tab:hover { color: var(--star); }
.inv-tab[aria-selected="true"] { color: var(--star); border-bottom-color: var(--amber); }
.inv-mats { margin-left: auto; padding-bottom: 10px; gap: 4px 14px; font-size: 12px; color: var(--haze); }
.inv-mats .mat { gap: 5px; }
.inv-mats .mat i { width: 8px; height: 8px; }
.inv-mats .mat b { color: var(--star); }
.inv-body { padding-top: 14px; }
.inv-intro { margin-bottom: 10px; max-width: 80ch; }
.hold-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.hold-tools .chips { margin-left: 0; }
.sort-pick { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--haze); }
.sort-pick select {
  background: var(--cell); color: var(--star); border: 1px solid var(--key-hi); border-radius: 4px; padding: 6px 8px; font: inherit; min-height: 36px;
}
.hold-full { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid var(--danger); background: #3a1820; font-size: 13px; }
.item-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tile.item-tile {
  aspect-ratio: auto; display: flex; flex-direction: column; align-items: stretch; place-items: initial; gap: 5px; text-align: left;
  min-height: 124px; padding: 10px; background: var(--cell); border: 2px solid var(--cell-line); border-radius: 6px; color: var(--star);
}
.tile.item-tile::before { display: none; }
.tile.item-tile:hover { border-color: var(--key-hi); }
.tile.item-tile.r-legendary { border-color: var(--legendary); }
.tile.item-tile.sel { border-color: var(--amber); outline: 2px solid var(--amber); outline-offset: 1px; }
.item-tile .t-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.item-tile .t-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: #100d20; border: 1px solid; border-radius: 4px; }
.item-tile .t-icon .icon { width: 32px; height: 32px; }
.item-tile .t-icon .rank { top: -2px; right: 1px; }
.item-tile .verdict { text-align: right; }
.item-tile .t-name { font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.item-tile .t-meta { font-size: 11px; color: var(--haze); line-height: 1.3; }
.free-slot { display: flex; align-items: center; justify-content: center; min-height: 124px; border: 2px dashed var(--cell-line); border-radius: 6px; color: var(--haze); font-size: 12px; text-align: center; padding: 6px; }
.free-slot.more { color: var(--star); }
.lib-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 24px; align-items: start; margin-bottom: 6px; }
.library .chips { margin: 4px 0 12px; }
.inv .lib-list { max-height: 720px; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.inv .lib-list li, .inv .tune-list li { padding: 10px; background: var(--cell); border: 1px solid var(--cell-line); border-radius: 6px; align-items: start; }
.inv .lib-list li .btn { align-self: center; }
.inv .tune-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.inv .tune-list li { align-items: center; }

@media (max-width: 1100px) {
  .item-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 980px) {            /* the stat web goes under the stage */
  .schem-body { grid-template-columns: minmax(0, 1fr); }
  .web-panel { max-width: 560px; width: 100%; justify-self: center; }
  .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-cols { grid-template-columns: minmax(0, 1fr); }
  .lib-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {            /* phones: the callouts become a list of slot cards under the pilot or ship */
  .panel.schem { padding: 12px; border-width: 3px; }
  .schem-gear .schem-stage, .schem-ship .schem-stage { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; }
  .schem-name { font-size: 22px; }
  .schem-hero .hero.doll { height: 180px; }
  .schem-group, .g-top, .g-bottom { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
  .schem-ship .g-left { order: 1; } .schem-ship .g-top { order: 2; } .schem-ship .g-bottom { order: 3; }
  .slot.callout, .g-top .slot.callout { max-width: none; }
  .callout .wire { display: none; }
  .web-panel { padding: 10px; }
  .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tile.item-tile, .free-slot { min-height: 112px; padding: 8px; }
  .inv-mats { margin-left: 0; }
  .sort-pick { margin-left: 0; }
  .inv .lib-list, .inv .tune-list { grid-template-columns: minmax(0, 1fr); }
  .schem-btns { margin-left: 0; }
  .pilot-menu { left: 0; right: auto; max-width: calc(100vw - 32px); }
  .item-tile .t-top { flex-wrap: wrap; gap: 2px; }
  .item-tile .verdict { white-space: normal; }
}
@media (max-width: 400px) {
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- the owner's new design (2026-10-22) */
/* Threat, 0 to 100: a tag in its tier's colour (--tc), by names in the lobby, the crew bars and the debrief */
.threat-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-weight: 700; font-size: 0.85em;
  color: #11101a; background: var(--tc, #a9a3c9); white-space: nowrap; }
.threat-tag.t0 { color: var(--fg, #e8e6f5); background: rgba(169, 163, 201, 0.18); }
.threat-tag.t4 { color: #fff; animation: threat-pulse 1.2s ease-in-out infinite; }
.threat-tag.big { font-size: 1.05em; padding: 2px 10px; }
.crew-bars li.threat b { color: var(--tc); }
.crew-bars li .name-threat { display: inline-block; min-width: 2.2em; padding: 0 5px; margin-left: 4px; border-radius: 6px;
  font-size: 0.8em; text-align: center; color: #11101a; background: var(--tc); }
.crew-bars li.t4 .name-threat { color: #fff; animation: threat-pulse 1.2s ease-in-out infinite; }
@keyframes threat-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(194, 91, 255, 0.7); } 50% { box-shadow: 0 0 10px 3px rgba(194, 91, 255, 0.9); } }
/* At launch, the stage flashes in the crew's highest Threat colour; at 100 a warning frame stays all mission */
.raid-stage .screen { position: relative; }
.raid-stage.threat-flash .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 4px solid var(--tc); border-radius: inherit; animation: threat-flash 1.6s ease-out 2; }
@keyframes threat-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.raid-stage.threat-max .screen::before { content: "THREAT 100"; position: absolute; bottom: 14px; right: 18px; z-index: 2;
  padding: 2px 8px; border-radius: 6px; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: #8a1fd1;
  animation: threat-pulse 1s ease-in-out infinite; pointer-events: none; }
.raid-stage.threat-max .screen { box-shadow: inset 0 0 0 3px #c25bff, 0 0 18px rgba(194, 91, 255, 0.55); animation: threat-edge 1.4s ease-in-out infinite; }
@keyframes threat-edge { 0%, 100% { box-shadow: inset 0 0 0 3px #c25bff, 0 0 10px rgba(194, 91, 255, 0.35); }
  50% { box-shadow: inset 0 0 0 3px #ff4a4a, 0 0 26px rgba(255, 74, 74, 0.6); } }
.threat-line li.up b, .threat-line li.down b { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .threat-tag.t4, .crew-bars li.t4 .name-threat, .raid-stage.threat-max .screen, .raid-stage.threat-max .screen::before { animation: none; }
}

/* The XP bar: level, a bar in tenths with a sheen, the numbers, and a pop when it grows */
.xp-strip { display: flex; align-items: center; gap: 10px; padding: 6px 16px; margin: 0;
  background: linear-gradient(180deg, rgba(29, 25, 52, 0.95), rgba(18, 15, 34, 0.95)); border-bottom: 1px solid #2c2650;
  position: relative; overflow: hidden; }
.xp-level { flex: none; display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px;
  font-weight: 800; color: #11101a; background: linear-gradient(180deg, #ffe58a, #f0b43a); box-shadow: 0 0 10px rgba(240, 180, 58, 0.45); }
.xp-level.up { animation: xp-level 1.2s ease-out; }
.xp-track { position: relative; flex: 1 1 auto; min-width: 60px; height: 12px; border-radius: 999px; background: #120f22;
  box-shadow: inset 0 0 0 1px #3a3366; overflow: hidden; }
.xp-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width 1.1s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(90deg, #3ad8e6, #7b6bff 55%, #d06bff); box-shadow: 0 0 10px rgba(123, 107, 255, 0.6); }
.xp-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.35) 50%, transparent 100%); background-size: 60px 100%;
  animation: xp-sheen 3.2s linear infinite; opacity: 0.6; }
.xp-ticks { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 255, 255, 0.14) calc(10% - 1px) 10%); }
.xp-sweep { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%); animation: xp-sweep 1.1s ease-out 1; }
.xp-text { flex: none; font-size: 12px; color: #c9c4ea; white-space: nowrap; }
.xp-text b { color: #fff; }
.xp-pop { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 800; color: #ffe58a;
  text-shadow: 0 0 8px rgba(255, 229, 138, 0.8); animation: xp-pop 1.8s ease-out forwards; pointer-events: none; }
@keyframes xp-sheen { from { background-position: -60px 0; } to { background-position: 400px 0; } }
@keyframes xp-sweep { to { transform: translateX(100%); } }
@keyframes xp-pop { 0% { opacity: 0; transform: translateY(-20%); } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120%); } }
@keyframes xp-level { 0% { transform: scale(1); } 30% { transform: scale(1.35); box-shadow: 0 0 22px rgba(255, 229, 138, 0.95); } 100% { transform: scale(1); } }
@media (max-width: 520px) { .xp-strip { padding: 5px 16px; gap: 8px; } .xp-text .sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .xp-fill, .xp-fill::after, .xp-sweep, .xp-pop, .xp-level.up { animation: none; transition: none; } }

/* The Quarters' and Hangar's design strip: Threat, luck in numbers, sets */
.design-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start; padding: 10px 14px; margin-bottom: 12px; }
.design-strip .dz-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.design-strip .dz-head { font-weight: 800; letter-spacing: 0.04em; margin-right: 2px; }
.luck-line { flex-direction: column; align-items: flex-start !important; }
.luck-line > span { display: block; }
.luck-meter { width: min(220px, 100%); height: 6px; border-radius: 999px; background: #1d1934; overflow: hidden; }
.luck-meter i { display: block; height: 100%; background: linear-gradient(90deg, #ffd34d, #fff1a8); }
.sets-line ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sets-line li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.sets-line .ability { font-size: 12px; color: #8a83ad; }
.sets-line .ability.on { color: #e8e6f5; }
.sets-line li.glow b { text-shadow: 0 0 8px currentColor; }
.glow-tag { font-size: 11px; padding: 0 6px; border-radius: 999px; color: #11101a; background: #ffd34d; animation: threat-pulse 1.6s ease-in-out infinite; }
.marks-worlds { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.marks-slots li.done { background: rgba(194, 91, 255, 0.08); }
.cargo .actions { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cargo-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.marks-sets li, .marks-slots li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.marks-flash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent) 0, transparent 60%); animation: cf-fade 1.9s ease-out forwards; }
.marks-flash i { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--rc);
  animation: cf-ring 1.4s ease-out forwards; }
.marks-flash i:nth-child(2) { animation-delay: 0.15s; }
.marks-flash i:nth-child(3) { animation-delay: 0.3s; }
.marks-flash span { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px var(--rc); }
@keyframes cf-ring { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
@keyframes cf-fade { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .marks-flash, .marks-flash i { animation-duration: 0.01s; } }