/* Command Bridge bay (views/bridge.js): the console deck full width, the roster and the fleet's seats beneath it.
   The Bridge's accent lights the consoles; one motion only, a screen powering up when a pilot boards it. */

.br{display:flex;flex-direction:column;gap:22px}

/* ── The deck ─────────────────────────────────────
   `--k` runs -1…1 across the deck: the outer consoles drop and turn in. */
.br-deck{
  display:flex;justify-content:center;align-items:stretch;gap:14px;
  padding:16px 10px 34px;
  background:radial-gradient(ellipse 55% 140% at 50% -10%,color-mix(in srgb,var(--u-bridge) 11%,transparent),transparent 70%);
  border-bottom:1px solid var(--u-line-soft);
}
.br-console{
  flex:1 1 0;min-width:156px;max-width:224px;
  display:flex;flex-direction:column;gap:10px;
  padding:11px 11px 13px;
  border-radius:var(--u-r) var(--u-r) 16px 16px;
  transform:translateY(calc(var(--k,0) * var(--k,0) * 24px)) rotate(calc(var(--k,0) * 2deg));
  transform-origin:50% 0;
  transition:border-color .15s,box-shadow .15s;
}
.br-console-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.br-console-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.br-console .u-job{padding:8px 9px;gap:6px}

/* Manned: the seat is live. Free: dashed and selectable. Selected: what the roster's buttons now fill. */
.br-console.is-manned{border-color:color-mix(in srgb,var(--u-ok) 34%,transparent)}
.br-console.is-free{border:1px dashed var(--u-line-dim);cursor:pointer}
.br-console.is-free:hover{border-color:var(--u-bridge)}
.br-console.is-target{
  border:1px solid var(--u-bridge);
  box-shadow:0 0 0 1px var(--u-bridge),0 0 26px color-mix(in srgb,var(--u-bridge) 32%,transparent);
}
.br-console.is-target .br-hint{color:var(--u-bridge)}
/* Unpowered: dark glass and a dead screen; the next one, which carries the upgrade, keeps a faint rim. */
.br-console.is-dark{border:1px dashed #1b2a3d;background:rgba(5,10,20,.78);opacity:.55}
.br-console.is-next{border:1px dashed color-mix(in srgb,var(--u-bridge) 28%,transparent);background:rgba(5,10,20,.78)}
.br-console:is(.is-dark,.is-next) .pl-screen{background:#040912;border-color:#1b2a3d;box-shadow:none}
.br-console:is(.is-dark,.is-next) .pl-screen-num{color:#3b5676}
.br-console:is(.is-dark,.is-next) .br-name{color:var(--u-label)}

@keyframes brPowerUp{
  0%{filter:brightness(.25) saturate(0)}
  30%{filter:brightness(1.9)}
  100%{filter:none}
}
.br-console.is-powering .pl-screen{animation:brPowerUp .75s ease-out}

/* ── Shared text ──────────────────────────────── */
.br-name{font:600 15px/1.2 var(--u-font-ui);color:var(--u-value);overflow-wrap:anywhere}
.br-hint,
.br-seats{font:400 12px/1.35 var(--u-font-ui);color:var(--u-label);overflow-wrap:anywhere}

/* ── Roster and fleet ─────────────────────────── */
.br-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:24px;align-items:start}
.br-roster{display:flex;flex-direction:column;gap:20px}
.br-roster .u-note{margin-bottom:10px}

.br-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px}
.br-cards.is-away .br-pilot>:not(.br-pilot-main),.br-cards.is-away .br-pilot-main>:not(.br-pilot-act){opacity:.68}
.br-pilot{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;
  padding:12px 14px;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r-sm);
  background:var(--u-well);
}
.br-pilot-portrait{width:50px;height:50px;border-radius:50%;border:1px solid var(--u-line-soft)}
.br-pilot-main{display:flex;flex-direction:column;gap:9px;min-width:0}
.br-pilot-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.br-pilot-lvl{font:500 12px/1 var(--u-font-ui);color:var(--u-mute);white-space:nowrap}
.br-pilot .pl-stamina{margin:0}
.br-pilot-act{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px}

.br-fleet{padding:14px 16px;border:1px solid var(--u-line-soft);border-radius:var(--u-r);background:rgba(3,9,20,.4)}
.br-fleet .u-note{margin-top:12px}
.br-ship{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--u-line-soft)}
.br-ship:first-of-type{padding-top:0;border-top:0}
.br-ship.is-active .br-ship-name{color:var(--u-bridge)}
.br-ship-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.br-ship-name{font:600 14px/1.2 var(--u-font-ui);color:var(--u-value)}
.br-ship-count{margin-left:auto;font:400 12px/1 var(--u-font-ui);font-variant-numeric:tabular-nums;color:var(--u-label)}
.br-seat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.br-seat{
  display:grid;grid-template-columns:10px minmax(70px,auto) minmax(0,1fr);align-items:center;gap:8px;
  font:400 13px/1.3 var(--u-font-ui);
}
.br-seat::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--u-mute)}
.br-seat.is-aboard::before{background:var(--u-ok);box-shadow:0 0 6px var(--u-ok)}
.br-seat.is-absent::before{background:var(--u-warn)}
.br-seat.is-empty::before{background:transparent;border:1px solid var(--u-mute)}
.br-seat-role{color:var(--u-label)}
.br-seat-who{color:var(--u-value);overflow-wrap:anywhere}
.br-seat.is-absent .br-seat-who{color:var(--u-warn)}
.br-seat.is-empty .br-seat-who{color:var(--u-mute)}

/* ── Reflow ───────────────────────────────────── */
@media (max-width:1100px){
  .br-cols{grid-template-columns:minmax(0,1fr)}
}
/* Narrow: the deck scrolls sideways at a fixed console width instead of squeezing six consoles together. */
@media (max-width:900px){
  .br-deck{justify-content:flex-start;overflow-x:auto;padding:12px 4px 26px}
  .br-console{flex:0 0 168px;transform:translateY(calc(var(--k,0) * var(--k,0) * 14px))}
  .br-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-height:520px){
  .br{gap:14px}
  .br-deck{padding:8px 6px 20px}
  .br-console{padding:8px 9px 10px;gap:7px}
  .br-pilot{padding:9px 11px}
}
@media (prefers-reduced-motion:reduce){
  .br-console{transition:none}
  .br-console.is-powering .pl-screen{animation:none}
}