/* Starlock: a quiet, printed card game on a night-sky table.
   Matte surfaces, thin brass rules, serif type; category colour as a
   restrained accent, never a glow. */
:root {
  --night: #0f1624;
  --navy: #16203a;
  --navy-2: #1d2946;
  --ink: #1b1f27;
  --paper: #ece3cf;
  --paper-2: #e2d7bf;
  --cream: #efe6d2;
  --muted: #9aa3b5;
  --brass: #b39a62;
  --brass-2: #8c7545;
  --bad: #c85a4f;
  --good: #8ea83b;
  --charge: #e0b955;      /* the Charge cell, on the night */
  --charge-ink: #876515;  /* and on paper */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 6px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--cream);
  font: 16px/1.45 var(--serif);
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 9%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 62%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 44%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 30%, #fff4 50%, transparent 51%),
    radial-gradient(60% 40% at 80% 0%, #2a3a66 0%, transparent 70%),
    radial-gradient(50% 35% at 0% 100%, #3a2f4a 0%, transparent 70%),
    var(--night);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}
.term { background: none; border: 0; padding: 0; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; cursor: help; text-align: inherit; }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 24px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
b { font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0 0 8px; font-weight: 600; }

/* buttons */
.primary, .ghost, .choice, .claim {
  border-radius: var(--r);
  border: 1px solid var(--brass-2);
  background: var(--navy-2);
  padding: 12px 16px;
  min-height: 48px;
}
.primary { width: 100%; background: var(--brass); color: var(--ink); border-color: var(--brass); font-weight: 700; letter-spacing: .04em; }
.primary:not(:disabled):active { transform: translateY(1px); }
.ghost { background: transparent; }
.link { background: none; border: 0; padding: 8px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-align: left; font-size: .9rem; }

/* ---------------------------------------------------------------- home */
.home { padding-top: 5vh; display: grid; gap: 14px; }
.eyebrow { margin: 0; font: 600 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.home h1 { margin: 0; font-size: clamp(2.6rem, 13vw, 5.4rem); line-height: .95; letter-spacing: .08em; font-weight: 600; color: var(--cream); }
.tagline { margin: -4px 0 0; font-size: 1.35rem; color: var(--brass); font-style: italic; }
.intro { margin: 4px 0 8px; color: #d6cfbf; max-width: 36em; }
.field { display: grid; gap: 6px; }
.field span { font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input {
  font: 1.1rem var(--serif); color: var(--cream); background: var(--navy); border: 1px solid #34405e;
  border-radius: var(--r); padding: 12px; min-height: 48px; width: 100%;
}
#code { font-family: var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.join-row .ghost { min-width: 96px; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.or::before, .or::after { content: ""; border-top: 1px solid #34405e; }
.err { margin: 0; color: #e8a79f; }
.name-row { display: grid; gap: 6px; } /* (errors sit right under the name, where a phone's keyboard can't hide them) */
.rules { border-top: 1px solid #2a3552; padding-top: 10px; color: #d6cfbf; }
.rules summary { cursor: pointer; color: var(--brass); }
.rules li { margin: 8px 0; }
.wild-die { display: inline-block; vertical-align: middle; }

/* --------------------------------------------------------------- lobby */
.panel { background: var(--navy); border: 1px solid #2a3552; border-radius: 10px; padding: 20px 16px; }
.center { text-align: center; }
.lobby { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 4vh; }
.lobby .code { margin: 0; font: 700 3.4rem/1 var(--mono); letter-spacing: .25em; padding-left: .25em; color: var(--cream); }
.qr { width: 168px; height: 168px; }
.qr svg { width: 100%; height: 100%; border-radius: 4px; display: block; }
.roster { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; width: 100%; max-width: 320px; }
.roster li { background: var(--navy-2); border-radius: var(--r); padding: 10px 12px; text-align: left; display: flex; gap: 8px; align-items: center; }
.lobby .primary { max-width: 320px; }
.lobby > .ghost, .bot-adds .ghost { width: 100%; max-width: 320px; }
.roster .who { display: grid; gap: 2px; }
.roster .tell { color: var(--muted); font-size: .8rem; }
.epithet { color: var(--brass); font-style: italic; font-weight: 400; font-size: .85em; white-space: nowrap; }
.roster .drop { margin-left: auto; background: none; border: 1px solid #34405e; border-radius: var(--r); padding: 4px 10px; font-size: .8rem; color: var(--muted); min-height: 32px; }

/* ----------------------------------------------------------------- game */
.bar { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0 10px; border-bottom: 1px solid #2a3552; }
/* the bar (and its clock) stays in view while you scroll the table */
#game > .bar, #game > .g-top > .bar { position: sticky; top: 0; z-index: 5; background: var(--night); margin: -16px -16px 0; padding-left: 16px; padding-right: 16px; }
.brand { font-weight: 700; letter-spacing: .16em; font-size: .9rem; color: var(--brass); }
.phase { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font: 600 .78rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.clock { font: 700 1.1rem/1 var(--mono); min-width: 3.2em; text-align: right; }
.clock.low { color: #e8a79f; }
.leave { background: none; border: 1px solid #34405e; border-radius: var(--r); padding: 4px 12px; font-size: .8rem; color: var(--muted); min-height: 44px; }
.stock { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 0 12px; font: .78rem/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stock b { color: var(--cream); font-size: .95rem; }

.pill { font: 700 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid #45506c; border-radius: 99px; padding: 4px 8px; color: var(--muted); white-space: nowrap; }
.pill.lock { border-color: var(--brass); color: var(--brass); }
.pill.think { border-style: dashed; }
.pill.out { border-color: var(--bad); color: var(--bad); }

.rivals { display: grid; gap: 8px; container-type: inline-size; }
.rival, .me { background: var(--navy); border: 1px solid #2a3552; border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.rival.out, .me.out { opacity: .5; }
.rival.targetable { border-color: var(--brass-2); cursor: pointer; }
.rival.sel { border-color: #b44343; box-shadow: inset 0 0 0 1px #b44343; }
.rival-head, .me-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rname { font-weight: 700; font-size: 1.05rem; margin-right: auto; }
.aim { font: 700 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #e8a79f; }
.rival-stats { display: grid; grid-template-columns: minmax(60px, 1fr) auto; gap: 10px; align-items: center; }
.hpbar { height: 6px; background: #2a3552; border-radius: 3px; overflow: hidden; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #6f9fbf, #9ec4d8); transition: width .6s ease; }
.stats { display: flex; gap: 12px; font: .78rem/1 var(--mono); color: var(--muted); }
.stats b { color: var(--cream); font-size: .95rem; }
.rival-dice { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; min-height: 26px; }
.mode { font: .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--brass); margin-left: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rival.compact { gap: 6px; padding: 8px 12px; }
.rival.compact .rival-dice { min-height: 0; }
.rival .more, .vs-own .more { margin-left: auto; background: none; border: 1px solid #34405e; border-radius: var(--r); padding: 3px 9px; font-size: .75rem; color: var(--muted); min-height: 28px; }
.bot-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 320px; }
.ghost.wide { width: 100%; }
.chip { display: grid; text-align: left; gap: 1px; background: var(--paper); color: var(--ink); border: 0; border-left: 4px solid var(--cat); border-radius: 4px; padding: 5px 8px; font-size: .8rem; font-weight: 700; line-height: 1.15; }
.chip small { font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #5a5446; }

/* dice: square flat enamel tiles */
.die { --s: 44px; width: var(--s); height: var(--s); border-radius: 5px; background: var(--tile, #333); color: #f3ead6; display: inline-grid; place-items: center; box-shadow: inset 0 -2px 0 #0003, 0 1px 0 #0006; flex: none; }
.die svg { width: 62%; height: 62%; }
.die.small { --s: 26px; border-radius: 4px; }
.die.tiny { --s: 20px; border-radius: 3px; vertical-align: -5px; }
.die.micro { --s: 14px; border-radius: 2px; box-shadow: none; }
/* the wild die (Command): a still sheen on the tile, and a brief glint on the star every few seconds,
   each die a beat apart (--wi). The glint is transform + opacity only, so it costs the compositor, not layout. */
.die[data-wild] { position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--tile) 62%, #fff) 0%, var(--tile) 72%); }
.die[data-wild] svg { animation: wild-glint 3.6s ease-in-out calc(var(--wi, 0) * -1.1s) infinite; }
.die[data-wild]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff6 0%, #fff0 62%); animation: wild-flash 3.6s ease-in-out calc(var(--wi, 0) * -1.1s) infinite; }
@keyframes wild-glint { 0%, 10%, 100% { transform: scale(1); } 5% { transform: scale(1.2); } }
@keyframes wild-flash { 0%, 10%, 100% { opacity: 0; } 5% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .die[data-wild] svg, .die[data-wild]::after { animation: none; } }
.hand-dice { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hand-group { display: inline-flex; gap: 2px; }
.die.empty { background: transparent; border: 1px dashed #45506c; box-shadow: none; }
.die.held { box-shadow: inset 0 -2px 0 #0003, 0 5px 0 -1px var(--brass); }
.die.sel { opacity: .55; outline: 2px dashed var(--cream); outline-offset: 2px; }
.die.bank { box-shadow: inset 0 -2px 0 #0003, 0 5px 0 -1px var(--brass); }
.die-btn { background: none; border: 0; padding: 0; line-height: 0; border-radius: 6px; }
.die, .die-btn .die { transition: transform .15s ease; }
.bank-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.bank-row > .small:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-row .die.small { --s: min(44px, calc((100vw - 58px - 62px - 90px - 30px) / 5)); }
/* Engineering's one row of dice: Keep (a die for the fight) or Reroll (until you have) */
.bank-dice { display: flex; gap: 6px; align-items: center; }
.actionbar .bank-row > .ghost { margin-left: auto; min-height: 42px; padding: 6px 10px; font-size: .85rem; white-space: nowrap; }
.dice-mode { flex: none; width: 62px; display: grid; border: 1px solid var(--brass-2); border-radius: var(--r); overflow: hidden; }
.dice-mode button { min-height: 32px; padding: 2px 0; border: 0; background: transparent; color: var(--muted); font: var(--t-label)/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.dice-mode button + button { border-top: 1px solid var(--brass-2); }
.dice-mode button[aria-pressed="true"] { background: var(--brass-2); color: var(--cream); }
.die.off { opacity: .35; }
.dice-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; }
.dice-row .ghost { margin-left: auto; min-height: 44px; padding: 8px 12px; font-size: .9rem; }

.pat { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: #3d7ea6; color: #fff; font: 700 .64rem/1 var(--mono); margin-right: 2px; vertical-align: -3px; }
.pat { background: var(--ink) !important; color: var(--paper) !important; }
.pat.b { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Command Center: small printed cards */
.center-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; container-type: inline-size; }
@container (min-width: 520px) { .center-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.slot { display: grid; gap: 2px; align-content: start; text-align: left; min-height: 78px; background: var(--paper); color: var(--ink); border: 1px solid var(--paper-2); border-top: 5px solid var(--cat, #999); border-radius: 5px; padding: 7px 9px; transition: transform .15s ease, opacity .15s; }
.slot.empty { background: transparent; border: 1px dashed #34405e; color: var(--muted); font-size: .8rem; place-content: center; text-align: center; min-height: 40px; }
.slot-art { display: block; height: 44px; margin: -7px -9px 5px; background: #1b2442 center / cover no-repeat; border-bottom: 1px solid var(--brass-2); }
.slot-name { font-weight: 700; font-size: .95rem; line-height: 1.15; }
.slot-hand { font: 700 .66rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #5a5446; }
.slot-eff { font-size: .8rem; line-height: 1.25; color: #3a3630; }
.slot { position: relative; }
.slot.ready { box-shadow: 0 0 0 2px var(--brass); }
.ok { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 3px; display: grid; place-items: center;
  background: var(--paper); color: var(--brass-2); box-shadow: inset 0 0 0 1px var(--brass-2); }
.ok svg { width: 13px; height: 13px; }
.slot, .die { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* a hand, drawn: blank dice in one color per group */
.hand-pic { display: inline-flex; gap: 6px; align-items: center; vertical-align: middle; }
.hand-pic .hand-group { display: inline-flex; gap: 2px; }
.hdie { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.hdie-a { background: var(--ink); }
.hdie-b { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
/* the dice that make the command you picked */
.die.match { transform: translateY(-7px); box-shadow: 0 0 0 2px var(--brass), 0 3px 0 #0006; }
/* a stat or pool that explains itself */
.term:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }
.stats .term { display: inline-flex; gap: 4px; align-items: center; }
.helptip { position: fixed; z-index: 60; max-width: min(300px, calc(100vw - 16px)); padding: 8px 11px; border-radius: 6px; background: var(--paper); color: var(--ink);
  font: .9rem/1.35 var(--serif); border: 1px solid var(--brass-2); box-shadow: 0 4px 12px #0008; pointer-events: none; animation: fade .15s ease both; }
.slot.dim { opacity: .45; }
.slot.sel { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px var(--cream); transform: translateY(-3px); }

/* the action area */
.action { margin-top: 12px; display: grid; gap: 10px; }
/* What to do now: pinned to the bottom (above the hub's navbar), so the stage's
   question is in sight however far down the page is scrolled */
#game:not([hidden]) { padding-bottom: calc(var(--bar-h, 0px) + 12px); }
#game:focus { outline: none; } /* (focus handed to the game itself as the cutscene closes: no ring round the whole screen) */
.actionbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: var(--random-nav-h, 0px); display: grid; gap: 8px;
  width: min(760px, 100%); margin: 0 auto; padding: 10px 16px max(12px, calc(env(safe-area-inset-bottom) - var(--random-nav-h, 0px) + 12px)); /* (the navbar already clears the home indicator) */
  background: var(--night); border-top: 1px solid #b39a6255; box-shadow: inset 0 3px 0 -2px #b39a6230, 0 -1px 0 #0009; }
.actionbar::before { content: ""; position: fixed; left: 0; right: 0; height: 16px; margin-top: -26px; pointer-events: none; background: linear-gradient(transparent, var(--night)); }
@media (min-width: 761px) { .actionbar { border: 1px solid #b39a6255; border-bottom: 0; border-radius: 10px 10px 0 0; } }
.actionbar { max-height: calc((100dvh - var(--random-nav-h, 0px)) * .6); display: flex; flex-direction: column; padding-inline: 29px; }
.bar-scroll { display: grid; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-inline: -29px; padding: 0 29px 2px;
  /* a soft edge at the bottom while there's more to scroll (it scrolls away at the end) */
  background: linear-gradient(to top, var(--night) 40%, transparent) bottom / 100% 26px no-repeat local,
    linear-gradient(to top, #b39a6236, transparent) bottom / 100% 14px no-repeat scroll; }
@media (max-width: 360px) { .actionbar { padding-inline: 16px; } }
/* the stage's main buttons stay in reach when the bar scrolls */
.bar-foot { flex: none; padding-top: 8px; }
.bar-foot .wide { width: 100%; }
/* the tutorial: the one thing to tap */
.coach-ring { outline: 2px solid var(--cream) !important; outline-offset: 4px; animation: coach 1.4s ease-in-out infinite; }
@keyframes coach { 50% { outline-color: color-mix(in srgb, var(--cream) 25%, transparent); } }
.coach-off { opacity: .35; }
.actionbar { --t-line: 1rem; --t-name: .875rem; --t-note: .78rem; --t-label: .68rem; }
.bar-line { margin: 0; font-size: var(--t-line); line-height: 1.35; color: var(--cream); }
.actionbar .toast { margin: 0; }
.actionbar .two { gap: 8px; }
.actionbar .choice { padding: 10px 12px; gap: 3px; min-height: 44px; text-align: center; align-content: center; }
.actionbar .choice b { font-size: 1.05rem; }
.actionbar .choice span { font-size: .8rem; line-height: 1.25; }
.actionbar .claims { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.actionbar .claim { padding: 8px; min-height: 0; }
.actionbar .claim b { font-size: var(--t-name); }
.actionbar .claim span { font-size: var(--t-label); line-height: 1.3; white-space: nowrap; }
.actionbar .two.side { grid-template-columns: 1fr 1fr; }
.actionbar .dice-row { padding: 10px 0 0; gap: 6px; flex-wrap: nowrap; }
.actionbar .dice-row .die { --s: min(44px, calc((100vw - 58px - 90px - 24px) / 5)); }
.actionbar .bar-row .dice-row .die { --s: min(44px, calc((100vw - 58px - 62px - 90px - 30px) / 5)); }
/* your commands, and who to aim at, as chips */
/* the commands: one row, a hand of cards that scrolls sideways and snaps to each card. Its
   padding keeps a picked card's lift and the tutorial's ring inside the scroll box; a fade
   shows on a side only while there's more that way (ui.js handEdges) */
.pick-cmds { --hand-pad: 7px; --fade: 28px; --fade-l: 0px; --fade-r: 0px; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--fade); scroll-behavior: smooth; scrollbar-width: none; /* (a card snapped or scrolled to sits clear of the fades) */
  margin: calc(-1 * var(--hand-pad)); padding: var(--hand-pad); contain: inline-size; /* (its width comes from the bar, never from the cards: a long hand can't widen the Refit's panels) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); }
.pick-cmds::-webkit-scrollbar { display: none; }
.pick-cmds.more-l { --fade-l: var(--fade); }
.pick-cmds.more-r { --fade-r: var(--fade); }
@media (prefers-reduced-motion: reduce) { .pick-cmds { scroll-behavior: auto; } }
.pick-cmd { flex: 0 0 auto; width: max-content; min-width: 104px; max-width: 160px; scroll-snap-align: start; }
.pick-cmd { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 7px 8px; border-radius: var(--r); border: 1px solid #45506c; border-left: 4px solid var(--cat, #888);
  background: var(--paper); color: var(--ink); font: 600 var(--t-name)/1.15 var(--serif); min-height: 52px; position: relative; align-content: space-between; padding-right: 26px; -webkit-touch-callout: none; user-select: none; }
.pick-cmd.off { background: var(--paper-2); color: #6b6456; filter: saturate(.4); }
.pick-cmd.off .hdie-a { background: #6b6456; }
.pick-cmd.lit { box-shadow: inset 0 0 0 1px var(--brass-2); }
.pick-cmd.sel { background: var(--navy); color: var(--cream); box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--brass); transform: translateY(-2px); }
.pick-cmd.sel .hdie-a { background: var(--cream); }
.pick-cmd.sel .hdie-b { box-shadow: inset 0 0 0 1.5px var(--cream); }
.pick-cmd .cmd-name { overflow-wrap: break-word; }
.pick-tgts { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-tgt { display: grid; gap: 1px; min-width: 96px; text-align: left; padding: 6px 12px; border-radius: var(--r); border: 1px solid #45506c; border-left: 4px solid #b44343; background: var(--navy-2); color: var(--cream); font: var(--t-name)/1.1 var(--serif); min-height: 44px; }
.pick-tgt span { font: var(--t-label)/1 var(--mono); color: var(--muted); }
.pick-tgt.sel { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px #b44343; }
.pick-tgt.sel span { color: #5a5446; }
/* Prep's shop: one row a card */
.shop { display: grid; gap: 6px; }
.shop-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r); background: var(--paper); color: var(--ink); border-left: 4px solid var(--cat, #45506c); }
.shop-row.sel { box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--brass); }
.shop-row .lane { position: static; box-shadow: none; padding: 0; background: none; grid-column: 1 / -1; font: var(--t-label)/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #6b6456; margin-bottom: -4px; }
.shop-card { display: grid; gap: 3px; justify-items: start; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); font: 600 var(--t-name)/1.2 var(--serif); min-width: 0; }
.shop-card small { font: 400 var(--t-note)/1.25 var(--serif); color: #3a3630; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.buy-btn { min-height: 44px; padding: 6px 10px; font-size: var(--t-note); white-space: nowrap; color: var(--ink); border-color: var(--brass-2); }
.shop-row.sel .buy-btn { background: var(--navy); color: var(--cream); }
.actionbar .dice-row .ghost { margin-left: auto; min-height: 42px; padding: 6px 10px; font-size: .85rem; white-space: nowrap; }
.actionbar .primary, .actionbar .ghost { min-height: 44px; padding: 8px 12px; }
.lede { margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { text-align: left; display: grid; gap: 6px; align-content: start; padding: 14px; }
.choice b { font-size: 1.15rem; color: var(--brass); }
.choice span { font-size: .88rem; color: #d6cfbf; }
.claims { display: grid; gap: 8px; }
.claim { display: grid; text-align: left; gap: 2px; }
.claim span { font: .74rem/1.2 var(--mono); color: var(--muted); }
.claim:disabled { opacity: 1; color: var(--muted); border-style: dashed; }
.claim.sel { border-color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream); }
.pool { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.buy { position: relative; }
.lane { position: absolute; top: 6px; left: 6px; z-index: 1; font: 700 .6rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; border-radius: 99px; background: #0f1624cc; color: var(--cream); }
.lane-1 { color: #9cc5e6; }
.lane-2 { color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.refresh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.refresh-row .ghost { min-height: 40px; padding: 8px 12px; white-space: nowrap; }
.buy { display: grid; gap: 6px; }
.buy .ghost { padding: 8px; font-size: .82rem; min-height: 40px; }
.buy.sel .ghost { border-color: var(--cream); background: var(--navy-2); }
.toast { margin: 10px 0 0; color: #e8a79f; }
.version-note { margin: 0 0 10px; text-align: center; }
.me { margin-top: 12px; border-color: #3a4666; }

.reveal { margin: 12px 0 0; background: var(--paper); color: var(--ink); border-radius: 8px; padding: 12px 14px; }
.reveal h3 { color: #6b5a33; }
.reveal ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.reveal .res { margin-top: 8px; border-top: 1px solid #cbbd9c; padding-top: 8px; }
.reveal .act { border-left: 4px solid var(--cat); padding-left: 8px; }
.reveal .bad { color: #9b2d25; }

/* table screen */
.table-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 12px; }
body:has(.table-grid) main { max-width: 1500px; }

/* --------------------------------------------------- the museum card */
.overlay { position: fixed; inset: 0; z-index: 50; background: #070b14e6; display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; overflow: auto; }
.overlay .hint { color: var(--muted); font-size: .85rem; margin: 0; }
.card { width: min(360px, 88vw); aspect-ratio: 5 / 7.2; background: var(--paper); color: var(--ink); border: 1px solid var(--brass); outline: 3px solid var(--navy); border-radius: 12px; display: grid; grid-template-rows: auto auto 1fr auto auto auto; overflow: hidden; box-shadow: 0 20px 60px #000a; }
.card-name { background: var(--navy); color: var(--cream); text-align: center; font: 600 1.3rem/1.1 var(--serif); letter-spacing: .05em; text-transform: uppercase; padding: 10px 8px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-cat { background: var(--navy); display: grid; place-items: center; padding: 0 0 6px; }
.card-cat span { border: 1px solid var(--brass-2); border-radius: 3px; padding: 2px 16px; font: 600 .7rem/1.4 var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--cream); background: color-mix(in srgb, var(--cat) 35%, var(--navy)); }
.card-art { min-height: 0; background: #1b2442 center / cover no-repeat; }
.card h4 { margin: 0 0 3px; font: 700 .6rem/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: #2a3a5c; }
.card-rule { display: grid; grid-template-columns: 1.15fr 1fr; border-top: 1px solid var(--brass-2); }
.card-rule > div { padding: 6px 9px; }
.card-req { border-right: 1px solid #cbbd9c; }
.hand-name { margin: 0 0 3px; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.hand-tiles { margin: 0; line-height: 1.6; }
.hand-note { margin: 2px 0 0; font-size: .66rem; line-height: 1.1; color: #5a5446; }
.card-eff p { margin: 0; font-size: .86rem; line-height: 1.2; }
.card-meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cbbd9c; text-align: center; }
.card-meta > div { padding: 4px; }
.card-meta > div + div { border-left: 1px solid #cbbd9c; }
.card-meta p { margin: 0; font-style: italic; font-size: .78rem; line-height: 1.15; }
.card-meta .cost { font: 700 1.05rem/1 var(--serif); font-style: normal; }
.card-meta small { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: #5a5446; }
.card-flavor { background: var(--navy); color: #d9c38e; text-align: center; font-style: italic; font-size: .72rem; line-height: 1.25; padding: 5px 12px; border-top: 1px solid var(--brass-2); }

@media (max-width: 420px) {
  .pool { grid-template-columns: 1fr; }
  .buy { grid-template-columns: 1fr auto; align-items: stretch; }
  .two { grid-template-columns: 1fr; }
  .die { --s: 42px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------ the Lock-On Reveal */
.stage { position: fixed; inset: 0; z-index: 40; background: radial-gradient(ellipse at center, #1c2848 0%, #0b1120 70%); animation: fade .3s ease both; overflow: hidden; cursor: pointer; }
.stage.leaving { animation: fade .3s ease reverse both; }
@keyframes fade { from { opacity: 0; } }
/* the 3D reveal (prototype): a canvas, with names, hull and badges as a layer over the ships */
.stage3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage3d .labels { position: absolute; inset: 0; pointer-events: none; }
.stage3d .grain { position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay; }
.stage3d .label { position: absolute; left: 0; top: 0; width: 118px; display: grid; gap: 4px; justify-items: center; opacity: 0; transition: opacity .4s; text-shadow: 0 1px 3px #000c; }
.stage3d.labelled .label { opacity: 1; }
.stage3d.cut .label:not(.focus) { opacity: 0; } /* the swoop: only who did it and who took it */
.stage3d .label .nm { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: .9rem; white-space: nowrap; }
.stage3d .label .nm span { overflow: hidden; text-overflow: ellipsis; }
.stage3d .sig { flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--hue); box-shadow: 0 0 0 1px #0008; }
.stage3d .youtag { flex: none; font: 700 .55rem/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); background: var(--brass); padding: 2px 4px; border-radius: 3px; text-shadow: none; }
.stage3d .label .hpbar { height: 3px; }
.stage3d .label .hit { font: 700 .95rem/1 var(--mono); color: #ff8a7a; } /* (what it took, by its hull number) */
.stage3d .label .hit:empty { display: none; }
.stage3d .label .hp { display: grid; grid-template-columns: 1fr auto auto; gap: 5px; align-items: center; width: 100%; font: 700 .72rem/1 var(--mono); }
.stage3d .label.gone { opacity: .35; transition: opacity .4s 1.2s; } /* (the wreck is gone: its card steps back) */
.stage3d .label.fallen > :not(.pops3d) { opacity: .45; filter: grayscale(1); transition: opacity .6s .5s, filter .6s .5s; } /* (its badges stay readable) */
.chip3d { position: relative; display: grid; width: 100%; min-height: 30px; font: 700 .7rem/1.15 var(--serif); color: var(--ink); text-shadow: none; }
.chip3d > span { grid-area: 1 / 1; position: relative; display: grid; place-content: center; text-align: center; border-radius: 4px; padding: 3px 4px; backface-visibility: hidden; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.chip3d .down { background: repeating-linear-gradient(45deg, #2a3552 0 6px, #232d47 6px 12px); color: var(--muted); border: 1px solid #45506c; }
.chip3d .up { background: var(--paper); border-top: 3px solid var(--cat); transform: rotateY(180deg); }
.chip3d .up small { display: block; font: 600 .55rem/1.2 var(--mono); color: #5b5446; }
.chip3d.none .up { background: #2a3552; color: var(--muted); border-top-color: #45506c; }
.stage3d.flipped .chip3d .down { transform: rotateY(-180deg); }
.stage3d.flipped .chip3d .up { transform: rotateY(0); }
.stage3d:not(.landed) .chip3d .res { display: none; } /* (the outcome waits for the shots to land) */
.pops3d { display: grid; gap: 3px; justify-items: center; }
/* badges: paper, with the category's colour as a rule down the side (damage stays loud) */
.stage3d .pops3d .pop { max-width: 100%; white-space: normal; text-align: center; background: var(--paper); color: var(--ink); border-left: 4px solid var(--cat); border-radius: 3px; font: 700 .74rem/1.15 var(--serif); font-variant: small-caps; letter-spacing: .03em; padding: 3px 6px; text-shadow: none; box-shadow: 0 2px 6px #0006; }
.stage3d .pops3d .pop b { font: 700 .8rem/1 var(--mono); font-variant: normal; letter-spacing: 0; }
.stage3d .pops3d .pop.dmg b { color: #a3312f; font-size: .95rem; } /* (damage stays the loudest number) */
.stage3d .pops3d .pop.dead b { margin-left: 4px; }
.stage3d .stage-title { top: 9%; font-size: clamp(1.2rem, 6vw, 2.4rem); text-shadow: 0 2px 12px #000; transition: opacity .3s; }
.stage3d.cut .stage-title { opacity: 0; }
.stage3d .stage-title::after { content: ""; display: block; width: 40%; height: 3px; margin: .45em auto 0; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); opacity: .7; } /* (the museum cards' double rule) */
.caption3d { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); margin: 0; width: max-content; max-width: 90%; text-align: center; font: 600 clamp(1.05rem, 5vw, 1.8rem)/1.2 var(--serif); color: var(--cream); text-shadow: 0 2px 10px #000; opacity: 0; transition: opacity .35s; pointer-events: none; }
.caption3d b { color: var(--hue); }
.caption3d small { display: block; margin-top: 4px; font: 600 .72rem/1.3 var(--mono); color: #c9bfa6; }
.caption3d .n { color: var(--cream); }
.caption3d .dmg { font: 700 .9em/1 var(--mono); color: #ff8a7a; }
.stage3d.cut .caption3d:not(:empty) { opacity: 1; }
.log3d { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); list-style: none; display: grid; gap: 2px; font: .7rem/1.3 var(--mono); color: var(--cream); background: #0c1022eb; border-top: 1px solid #b8955a44; opacity: 0; transition: opacity .4s; pointer-events: none; }
.log3d li { display: flex; align-items: baseline; gap: 6px; }
.log3d .sig { width: 6px; height: 6px; align-self: center; }
.stage3d.landed .log3d { opacity: 1; }
.stage3d.cut .log3d { opacity: .85; } /* (stepped back, never gone) */
.log3d li.wrap { white-space: normal; }
.log3d li.wrap > span { overflow: visible; }
.log3d .got { color: #c9bfa6; }
.log3d .bad { color: #ff9a8a; font-style: normal; }
.log3d .note { color: #c9bfa6; }
.log3d li > span { overflow: hidden; text-overflow: ellipsis; }
.rift3d { position: absolute; left: 50%; top: calc(9% + 2.6rem); transform: translateX(-50%); margin: 0; width: max-content; max-width: 90%; font: 600 .7rem/1.2 var(--mono); letter-spacing: .04em; color: #e4c9f0; text-align: center; opacity: 0; transition: opacity .4s; pointer-events: none; text-shadow: 0 1px 4px #000; }
.stage3d.landed .rift3d:not(:empty) { opacity: 1; }
.stage3d.landed.cut .rift3d { opacity: 0; }
@media (max-height: 500px) { .log3d { grid-template-columns: 1fr 1fr; column-gap: 18px; padding-top: 14px; } .stage3d .stage-title, .caption3d { top: 5%; font-size: 1.1rem; } .rift3d { top: 10px; left: 14px; transform: none; } }
@media (max-width: 480px) {
  .stage3d .label { width: 104px; gap: 3px; }
  .stage3d .label .nm { font-size: .75rem; }
  .chip3d { min-height: 26px; font-size: .64rem; }
}
.stage-title.final { color: var(--cream); letter-spacing: .12em; animation: stamp .5s cubic-bezier(.2,1.6,.4,1) both; white-space: normal; text-align: center; width: 90%; }
.over-banner { margin: 10px 0; padding: 16px; border: 1px solid var(--brass-2); border-radius: 10px; background: var(--navy); display: grid; gap: 8px; text-align: center; }
.over-banner .lede { margin: 0; font-size: 1.15rem; }
.over-banner .primary { max-width: 320px; justify-self: center; }
.stage-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font: 600 clamp(1.4rem, 7vw, 3rem)/1 var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); animation: stamp .5s cubic-bezier(.2,1.6,.4,1) both; white-space: nowrap; padding-left: .3em; }
@keyframes stamp { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
.beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.beam { stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); opacity: 0; }
.firing .beam { animation: beam .7s cubic-bezier(.7,0,.3,1) forwards; }
.beam.miss { stroke-dasharray: 3 9; stroke-dashoffset: 0; stroke-width: 3; }
.firing .beam.miss { animation: show .7s ease forwards; }
@keyframes show { to { opacity: .85; } }
@keyframes beam { 0% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.tip { opacity: 0; }
.firing .tip { animation: tip .5s .6s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes tip { 0% { transform: scale(0); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.ring { fill: none; stroke-width: 3; opacity: 0; }
.firing .ring { animation: ring .9s ease-out forwards; }
@keyframes ring { 0% { opacity: .9; transform-box: fill-box; transform-origin: center; transform: scale(.6); } 100% { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.15); } }
.seat { position: absolute; z-index: 3; width: 142px; transform: translate(-50%, -50%); background: var(--navy); border: 1px solid #34405e; border-radius: 10px; padding: 8px; display: grid; gap: 6px; box-shadow: 0 8px 24px #0008; }
.seat.you { border-color: var(--brass-2); }
.seat-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-hp { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; font: 700 .9rem/1 var(--mono); }
.seat-hp .hpbar i { transition: width .8s cubic-bezier(.3,.7,.3,1); }
.seat-dice { display: flex; gap: 3px; }
.seat-dice .die.small { --s: 22px; }
.stage.flipped .die:not(.used):not(.ghost) { opacity: .35; transition: opacity .3s; }
.seat-card { position: relative; height: 40px; perspective: 400px; }
.seat-card > div { position: absolute; inset: 0; border-radius: 4px; backface-visibility: hidden; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.face-down { background: repeating-linear-gradient(45deg, #26345a 0 6px, #202c4c 6px 12px); border: 1px solid var(--brass-2); }
.face-up { transform: rotateY(180deg); background: var(--paper); color: var(--ink); border-top: 4px solid var(--cat, #888); padding: 3px 7px; display: grid; align-content: center; line-height: 1.1; }
.face-up b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face-up small { font: 700 .56rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #5a5446; }
.seat-card.none .face-up { background: #2a3552; color: var(--muted); border-top-color: #45506c; }
.flipped .face-down { transform: rotateY(-180deg); }
.flipped .face-up { transform: rotateY(0); }
.seat-card.charged .face-up { box-shadow: 0 0 0 2px var(--cat); }
.seat-vp { font: .72rem/1 var(--mono); color: var(--muted); }
.seat-vp b { color: var(--cream); }
.seat.hit { animation: shake .45s ease; }
@keyframes shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.seat.fallen { opacity: .45; filter: grayscale(1); transition: opacity .6s .5s, filter .6s .5s; }
.pops { position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%); display: grid; gap: 3px; justify-items: center; pointer-events: none; z-index: 4; }
.pops.below { top: auto; bottom: -6px; transform: translate(-50%, 100%); }
.pop { font: 700 .8rem/1 var(--mono); padding: 4px 7px; border-radius: 4px; background: var(--paper); color: var(--ink); white-space: nowrap; animation: pop .45s cubic-bezier(.2,1.6,.4,1) both; }
.pop.dmg { background: #b44343; color: #fff; font-size: 1.1rem; }
.pop.blk { background: #3d7ea6; color: #fff; }
.pop.vp { background: #8ea83b; color: #1b1f27; }
.pop.heal { background: #4f9c8d; color: #fff; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@media (min-width: 900px) { .seat { width: 190px; padding: 10px; } .seat-dice .die.small { --s: 28px; } .seat-card { height: 48px; } .face-up b { font-size: .95rem; } }

/* Charge: its own drawn cell, beside every amount of it */
.chg { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.17em; color: var(--charge); flex: none; }
.reveal, .card, .pop, .slot, .chip, .face-up, .chip3d .up { --charge: var(--charge-ink); }
.stock .chg { width: 1.25em; height: 1.25em; align-self: center; }
/* a card named in running text: tap to see the whole card */
.cardref { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline dotted var(--cat, currentColor); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cardref:hover, .cardref:focus-visible { text-decoration-style: solid; }
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- the viewscreen (viewscreen.js, viewscreen-draw.js)
   A captain's top half: your ship in one line, the long-range sweep and one ship's feed, a
   transmission from far off. It fills the space above the pinned bar: the sweep about 40%,
   the feed the rest; on a short screen the feed gives way first (to 190 px, where its callouts
   are still legible), then the page scrolls.
   Landscape and desktop: side by side. Motion is CSS only (no animation loop). */
#game .g-top, #game .g-rest { display: contents; }
.vs, .tv-sweep { --vs-ink: #cfe3ff; --vs-dim: #9cc4ff; --vs-line: #6fa8ff44; --vs-bg: #070b18; }
.me.vs-own { display: grid; grid-template-columns: auto minmax(28px, 1fr) auto auto; align-items: center; gap: 5px; padding: 6px 8px; margin-top: 10px; font: 12px/1.2 var(--mono); } /* (12 px: your ship outranks the sweep's 10 px rivals; a 12-letter name stays whole at 390) */
.vs-own .rname { display: flex; align-items: center; gap: 5px; margin: 0; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.vs-own .rname .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vs-own .rname .muted { font-weight: 400; text-transform: none; font-size: 11px; }
.vs-own .sig { width: 11px; height: 11px; flex: none; }
.vs-own .vs-hp { display: block; width: 100%; max-width: 160px; padding: 8px 0; } /* (on a wide screen, a bar, not a runway) */
.vs-own .hpbar { display: block; }
.vs-own .stats { gap: 6px; font-size: 12px; white-space: nowrap; }
.vs-own .stats b { font-size: 12px; }
.vs-own .more { font: 10px/1 var(--mono); padding: 4px 5px; min-height: 26px; }
.vs-own .more { position: relative; }
.vs-own .more::after { content: ""; position: absolute; inset: -10px -3px; } /* (44 px to tap, without growing the line) */
.hpbar.s1 i { background: linear-gradient(90deg, #b88a3c, #e0b25a); }
.hpbar.s2 i { background: linear-gradient(90deg, #a8463f, #e06a5f); }
.me-center { margin-top: 8px; display: grid; gap: 8px; }
.vs { display: grid; grid-template-rows: max(180px, 40%) minmax(190px, 1fr); gap: 8px; margin: 8px 0 4px; min-height: 378px;
  height: calc(100dvh - var(--random-nav-h, 0px) - var(--bar-h, 0px) - var(--vs-top, 0px) - 16px);
  font: 10px/1.25 var(--mono); color: var(--vs-ink); transition: grid-template-rows .5s ease; }
/* a tall bar: the sweep becomes a slim strip (short labels), so the whole feed stays above it */
.vs.compact { grid-template-rows: 120px minmax(190px, 1fr); min-height: 318px; }
/* the Refit: the sweep gets the room; the feed folds to one header line, a button that opens it
   over the sweep */
.vs-fold { display: none; }
.vs.refit { grid-template-rows: minmax(120px, 1fr) 36px; gap: 4px; min-height: 0; }
.vs.refit .vs-fold { display: block; position: absolute; left: 0; right: 0; top: 0; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--vs-dim); cursor: pointer; z-index: 2; min-height: 0; }
.vs.refit .vs-fold::before { content: ""; position: absolute; inset: 0 0 -10px; } /* (46 px to tap) */
.vs.refit.feed-open .vs-fold::before { bottom: 0; } /* (open, the feed's top callouts sit just below it) */
.vs.refit .vs-fold::after { content: ""; position: absolute; right: 12px; top: 13px; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
.vs.refit .vs-fold[aria-expanded="true"]::after { transform: translateY(3px) rotate(225deg); }
.vs.refit .vs-fold:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.vs.refit:not(.feed-open) .vs-feed > :not(.vs-top):not(.vs-fold) { display: none; }
.vs.refit:not(.feed-open) .vs-top { top: 0; bottom: 0; align-items: center; padding-right: 22px; right: .7em; }
.vs.refit:not(.feed-open) .vs-id { display: flex; gap: 1em; min-width: 0; flex: 1; }
.vs.refit:not(.feed-open) .vs-link, .vs.refit:not(.feed-open) .vs-tag { display: none; } /* (folded: the ship, VP and Charge; the sweep shows its distance) */
.vs.refit:not(.feed-open) .vs-read { display: flex; gap: .8em; flex: none; }
.vs.refit .vs-sweep { grid-area: 1 / 1; } /* (it stays put under the open feed, never pushed into a row below) */
.vs.refit.feed-open .vs-feed { grid-row: 1 / -1; grid-column: 1; height: max(100%, 190px); z-index: 1; animation: vs-open .2s ease-out; }
.vs.refit.feed-open .vs-top { right: 2.2em; }
/* room for both (the results): the feed opens under the sweep, which stays in view and tappable */
.vs.refit.stacked { grid-template-rows: minmax(120px, 1fr) 190px; }
.vs.refit.feed-open.stacked .vs-feed { grid-row: 2; height: auto; z-index: auto; animation: none; }
@keyframes vs-open { from { opacity: 0; } }
@media (orientation: landscape) and (min-width: 600px) {
  .vs, .vs.compact { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: 240px; }
}
.vs-sweep, .vs-feed { position: relative; overflow: hidden; border: 1px solid var(--vs-line); border-radius: 8px;
  background: radial-gradient(circle at 50% 55%, #12305a66, transparent 70%), var(--vs-bg); }
/* the plot: the same inset sweepLayout plots in (2 font sizes at the top, 1 elsewhere) */
.vs-plot { position: absolute; inset: 2em 1em 1em; pointer-events: none; }
.vs-ring { position: absolute; left: calc(50% - var(--r) * 50%); top: calc(50% - var(--r) * 50%); width: calc(var(--r) * 100%); height: calc(var(--r) * 100%); border: 1px dashed #6fa8ff33; border-radius: 50%; }
.vs-title, .vs-pool { position: absolute; top: .5em; margin: 0; letter-spacing: .06em; text-transform: uppercase; color: var(--vs-dim); white-space: nowrap; }
.vs-title { left: .7em; }
.vs-pool { right: .7em; }
.vs-pool.dry { color: #ff8a6b; }
.vs-sweep.two-row .vs-pool { left: .7em; right: auto; top: 1.9em; } /* (no room beside the title: under it) */
.vs-contacts { position: absolute; inset: 0; }
.vs-contact { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 0; min-height: 0; background: none; color: inherit; display: grid; place-items: center;
  opacity: var(--sig, 1); transition: left .9s ease, top .9s ease, opacity .6s; }
.vs-contact::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; } /* (44 px to tap; where two overlap, the nearer mark takes it: ui.js) */
.vs-contact .sig { width: 10px; height: 10px; fill: var(--hue); filter: drop-shadow(0 0 3px var(--hue)); }
.vs-contact.you .sig { width: 13px; height: 13px; }
.vs-contact.lead .sig { width: 12px; height: 12px; filter: drop-shadow(0 0 5px var(--hue)) drop-shadow(0 0 11px var(--hue)); } /* the leader burns bright */
.vs-contact.dark .sig { fill: #555c6a; filter: none; }
.vs-contact.on::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--vs-ink); border-radius: 50%; opacity: .7; } /* the ship in the feed */
.vs-label { position: absolute; z-index: 1; white-space: nowrap; line-height: 1.4; cursor: pointer; opacity: var(--sig, 1); transition: left .9s ease, top .9s ease, opacity .6s; }
.vs-label.lead { color: #fff; }
.vs-label.dark { color: #8a92a3; }
.vs-leader { position: absolute; height: 1px; margin-top: -.5px; background: var(--vs-dim); transform-origin: 0 50%; opacity: calc(var(--sig, 1) * .8); pointer-events: none;
  transition: left .9s ease, top .9s ease, width .9s ease, transform .9s ease, opacity .6s; } /* a label that couldn't sit by its contact, joined to it */
.vs-leader.dark { background: #8a92a3; }
.vs-label .lk { width: 1em; height: 1em; margin-left: .35em; vertical-align: -.15em; color: var(--brass); }
.vs-feed { --sig: 1; }
.vs-drift { position: absolute; inset: 0; animation: vs-drift 11s ease-in-out infinite alternate; }
.vs-feed.dark .vs-drift { filter: grayscale(1); }
.vs-schematic { display: block; width: 100%; height: 100%; }
.vs-schematic text { font-family: var(--mono); }
.vs-track { fill: none; stroke: #24304d; stroke-width: 3; }
.vs-hull { fill: none; stroke-width: 3; stroke-linecap: round; opacity: var(--sig); transition: stroke-dasharray .8s ease, stroke .4s; }
.vs-hull.s0 { stroke: #8fd69a; }
.vs-hull.s1 { stroke: #e0b25a; }
.vs-hull.s2 { stroke: #e06a5f; }
.vs-shield { fill: none; stroke: #6fa8ff; stroke-width: 1.6; opacity: .85; }
.vs-ship, .vs-flat { opacity: var(--sig); }
.vs-leader { fill: none; stroke: #9cc4ff; stroke-width: .7; }
.vs-dot { fill: var(--cat); }
.vs-co-name { font-weight: 700; fill: #fff; letter-spacing: .02em; }
.vs-co-hand { fill: var(--vs-dim); }
.vs-callout { cursor: pointer; outline: none; }
.vs-hit { fill: transparent; }
.vs-callout:focus-visible .vs-hit { stroke: var(--brass); stroke-width: 1; }
.vs-nosig { font-size: 11px; font-weight: 700; letter-spacing: .14em; fill: #ff8a6b; }
.vs-top { position: absolute; left: .7em; right: .7em; top: .5em; display: flex; justify-content: space-between; gap: 1em; pointer-events: none; }
.vs-id { min-width: 0; }
.vs-head, .vs-link { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-head { color: var(--vs-dim); letter-spacing: .04em; }
.vs-head b { color: var(--vs-ink); }
.vs-head .sig { width: 1em; height: 1em; vertical-align: -.15em; }
.vs-link { color: #ffb86b; }
.vs-read { margin: 0; display: grid; justify-items: end; color: var(--vs-dim); white-space: nowrap; }
.vs-read b { color: var(--vs-ink); }
.vs-dice { position: absolute; left: .7em; bottom: .5em; display: flex; gap: 3px; }
/* scanlines: a 3 px pattern slid two periods and back to the start, on the compositor */
.vs-scan { position: absolute; left: 0; right: 0; top: -6px; bottom: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 3px); animation: vs-scan 9s linear infinite; will-change: transform; }
@keyframes vs-drift { from { transform: translate(-1.5px, 1px) rotate(-.35deg); } to { transform: translate(1.5px, -1px) rotate(.35deg); } }
@keyframes vs-scan { to { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .vs-drift, .vs-scan { animation: none; }
  .vs, .vs-contact, .vs-label, .vs-leader, .vs-hull, .vs.refit .vs-fold::after { transition: none; }
  .vs.refit.feed-open .vs-feed { animation: none; }
}

/* ---------------------------------------------------------------- the table screen, as a broadcast (tv.js)
   Sized in --u (a hundredth of the height, or of 16:9's width if that's less), so a
   1080p TV and a laptop get the same picture; panel text is read from the couch: at
   1080p nothing needed to follow the game is under 2.2u (24 px), nothing at all under
   1.8u (20 px). Everything sits inside a 2.5% margin a side (the action-safe area of a
   TV that overscans). */
.tv { --u: min(1vh, .5625vw); --side: calc(40 * var(--u)); position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); grid-template-rows: calc(5.6 * var(--u)) minmax(0, 1fr) calc(6.6 * var(--u)); padding: 2.5vh 2.5vw; background: var(--night); color: var(--cream); font: calc(2.2 * var(--u))/1.25 var(--serif); overflow: hidden; }
.tv button { min-height: 0; }
.tv [hidden] { display: none !important; }
.tv .who { color: var(--hue); white-space: nowrap; }
.tv .who .sig { margin-right: .25em; vertical-align: -.1em; }
.tv .n { font-family: var(--mono); font-weight: 700; }
.tv .n.dim { color: var(--muted); }
.tv .n.bad, .tv .dmg { color: #ff8a7a; font-family: var(--mono); }
/* each seat's shape, in its colour (never colour alone) */
.tv .sig { flex: none; display: inline-block; width: 1em; height: 1em; fill: var(--hue); stroke: #0b101c; stroke-width: 1.6; paint-order: stroke; overflow: visible; }
.tv-top { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(2 * var(--u)); padding: 0 calc(2 * var(--u)); background: linear-gradient(#0b1120, #0f1624); border-bottom: 1px solid #b39a6255; }
.tv-brand { font: 600 calc(2.3 * var(--u))/1 var(--serif); letter-spacing: .32em; color: var(--brass); }
.tv-phase { flex: 1; display: flex; justify-content: center; align-items: center; gap: calc(1.4 * var(--u)); font: 600 calc(2.4 * var(--u))/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.tv-phase b { font-family: var(--mono); }
.tv-phase .dot { width: calc(.8 * var(--u)); height: calc(.8 * var(--u)); background: var(--brass); transform: rotate(45deg); }
.tv-clock { font: 700 calc(2.9 * var(--u))/1 var(--mono); min-width: calc(8 * var(--u)); text-align: right; }
.tv-clock.low { color: var(--bad); }
.tv-gear { width: calc(4.2 * var(--u)); height: calc(4.2 * var(--u)); padding: calc(.6 * var(--u)); border: 0; background: none; color: var(--muted); border-radius: 50%; }
.tv-gear:hover, .tv-gear[aria-expanded="true"] { color: var(--brass); background: #ffffff10; }
.tv-gear svg { width: 100%; height: 100%; display: block; }

/* the captains, down each side */
.tv-side { display: grid; grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); gap: calc(1 * var(--u)); padding: calc(1 * var(--u)); min-height: 0; align-content: center; }
.cap { display: grid; grid-template-rows: auto auto auto auto auto; align-content: start; gap: calc(.7 * var(--u)); padding: calc(1 * var(--u)) calc(1.2 * var(--u)); background: linear-gradient(#19233df2, #121a2ef2); border: 1px solid #b39a6238; border-left: calc(.6 * var(--u)) solid var(--hue); border-radius: calc(.6 * var(--u)); min-height: 0; overflow: hidden; transition: box-shadow .35s, border-color .35s, background .35s, opacity .6s, filter .6s; }
.cap.spot { border-color: var(--brass); border-left-color: var(--hue); box-shadow: 0 0 0 calc(.25 * var(--u)) var(--brass), 0 0 calc(3 * var(--u)) #e0b25a44; background: linear-gradient(#28335af5, #1b2544f5); }
.cap.flare { animation: flare 1.2s ease-out; } /* (just locked in) */
@keyframes flare { 0% { box-shadow: 0 0 0 calc(.4 * var(--u)) var(--brass), 0 0 calc(5 * var(--u)) #e0b25aaa; background: #3a4166; } 100% { box-shadow: none; } }
.cap.out { opacity: .5; filter: grayscale(.8); }
.cap-head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.2 * var(--u)) calc(.7 * var(--u)); min-width: 0; } /* (a long ship name sends the style tag to a line of its own) */
.cap-head .sig { font-size: calc(2.2 * var(--u)); }
.cap-name { font: 700 calc(2.8 * var(--u))/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.cap-style { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(1.8 * var(--u)); font-style: italic; color: var(--brass); }
.cap-style .pill { font-size: calc(1.4 * var(--u)); padding: calc(.3 * var(--u)) calc(.6 * var(--u)); }
.cap-chip { flex: none; margin-left: auto; font: 700 calc(1.9 * var(--u))/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: calc(.55 * var(--u)) calc(.8 * var(--u)); border-radius: calc(.4 * var(--u)); border: 1px solid currentColor; }
.cap-chip:empty { display: none; }
.cap-chip.think { color: var(--cream); background: #34405f; border-color: #5a6788; }
.cap-chip.lock { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.cap-chip.scav { color: var(--ink); background: var(--charge); border-color: var(--charge); }
.cap-chip.prep { color: var(--ink); background: #7fe0c8; border-color: #7fe0c8; }
.cap-chip.fire { background: #b44343; border-color: #e0776a; color: #fff; }
.cap-chip.hit { background: #ff8a7a; border-color: #ff8a7a; color: #2a0d0a; }
.cap-chip.heal { background: #2f6f63; border-color: #7fe0c8; color: #fff; }
.cap-chip.down { color: #c9cfdb; background: #2a2f3b; border-color: #45506c; }
.cap-chip.idle { color: var(--cream); background: #262e44; border-color: #45506c; }
.cap.live .cap-chip.fire, .cap.live .cap-chip.hit { animation: chipin .35s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes chipin { from { transform: scale(1.5); opacity: 0; } }
/* hull and VP: two blocks, never one line of numbers */
.cap-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: calc(.9 * var(--u)); font: 700 calc(2.4 * var(--u))/1 var(--mono); }
.cap-stats .k { font: 700 calc(1.8 * var(--u))/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.cap-stats .hp { display: flex; align-items: center; gap: calc(.7 * var(--u)); min-width: 0; }
.cap-stats .hpbar { flex: 1; min-width: calc(2.5 * var(--u)); height: calc(1.3 * var(--u)); border-radius: 99px; }
.cap-stats .hpbar.low i { background: linear-gradient(90deg, #c85a4f, #e08a6a); }
.cap-stats .hpn { font-size: calc(2.6 * var(--u)); min-width: 2ch; }
.cap-stats .vp { display: flex; align-items: baseline; white-space: nowrap; gap: calc(.4 * var(--u)); padding-left: calc(.9 * var(--u)); border-left: 1px solid #ffffff2e; }
.cap-stats .vp b { color: #cfe08e; font-size: calc(2.6 * var(--u)); }
.cap-stats .vp small { font-size: calc(1.8 * var(--u)); color: var(--muted); }
.cap-stats .vp:has(.delta) small { display: none; } /* (room for what changed) */
.cap-stats .ch { display: flex; align-items: center; gap: calc(.3 * var(--u)); color: var(--charge); padding-left: calc(.9 * var(--u)); border-left: 1px solid #ffffff2e; }
.cap-stats .ch .chg { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }
.cap-stats .dhp:empty { display: none; }
.delta { align-self: center; font: 700 calc(1.9 * var(--u))/1 var(--mono); padding: calc(.3 * var(--u)) calc(.45 * var(--u)); margin-left: calc(.2 * var(--u)); border-radius: calc(.3 * var(--u)); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; gap: .2em; white-space: nowrap; animation: popin .45s cubic-bezier(.2,1.6,.4,1) both; }
.delta.neg { background: #b44343; color: #fff; }
.delta.pos { background: #2f6f63; color: #fff; }
.delta.vp { background: #8EA83B; color: #111; }
.delta.ch { background: var(--charge); color: var(--ink); }
.delta .chg { color: var(--ink); width: 1em; height: 1em; }
.cap-dice { display: flex; gap: calc(.7 * var(--u)); align-items: center; min-height: calc(4 * var(--u)); }
.cap-dice .die { --s: calc(4 * var(--u)); border-radius: calc(.5 * var(--u)); }
.cap-dice .die.held { outline-width: calc(.25 * var(--u)); }
.cap-dice .kept { color: var(--muted); font-size: calc(1.9 * var(--u)); }
/* the installed commands: whole names; the ones this roll can't make shrink to a thin pip */
.cap-cmds { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--u)); min-height: 0; }
.cmd { flex: 1 1 auto; display: flex; align-items: center; padding: calc(.35 * var(--u)) calc(.6 * var(--u)); border-radius: calc(.4 * var(--u)); background: #0c1322; border: 1px solid #ffffff1c; border-left: calc(.5 * var(--u)) solid var(--cat); font-size: calc(2.2 * var(--u)); line-height: 1.15; white-space: nowrap; }
.cap.faceup .cmd, .cmd.cant { flex: 0 1 auto; font-size: calc(1.8 * var(--u)); padding: calc(.15 * var(--u)) calc(.5 * var(--u)); background: none; border-color: transparent; border-left-width: calc(.3 * var(--u)); color: var(--muted); }
.cmd-name { min-width: 0; }
.cmd.fresh { animation: slidein .8s cubic-bezier(.2,1.3,.4,1) both; box-shadow: 0 0 0 calc(.2 * var(--u)) var(--brass), 0 0 calc(2 * var(--u)) #e0b25a66; }
@keyframes slidein { from { transform: translateX(-120%); opacity: 0; } }
.cap-play { perspective: calc(80 * var(--u)); }
.cap:not(.faceup) .cap-play, .cap.faceup .cap-dice { display: none; } /* (the turned card takes the dice's place) */
.cap.faceup .cap-card { animation: turn .7s cubic-bezier(.3,1.3,.5,1) both; }
@keyframes turn { from { transform: rotateY(0); } }
.cap-card { position: relative; height: calc(5.8 * var(--u)); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.cap-card.flipped { transform: rotateY(180deg); }
.cap-card .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; gap: calc(1 * var(--u)); padding: 0 calc(1.3 * var(--u)); border-radius: calc(.5 * var(--u)); overflow: hidden; }
.cap-card .face.down { background: repeating-linear-gradient(135deg, #1d2946 0 calc(.8 * var(--u)), #172039 calc(.8 * var(--u)) calc(1.6 * var(--u))); border: 1px dashed #b39a6255; color: var(--muted); font-size: calc(2.2 * var(--u)); }
.cap-card.locked .face.down { border: 1px solid var(--brass); color: var(--cream); }
.cap-card .face.down svg { flex: none; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); color: var(--brass); }
.cap-card .lbl.dim { font-style: italic; }
.cap-card .face.up { transform: rotateY(180deg); background: var(--paper); color: var(--ink); display: grid; align-content: center; gap: calc(.35 * var(--u)); padding-left: calc(1.4 * var(--u)); }
.cap-card .face.up .cn { font: 700 calc(2.4 * var(--u))/1 var(--serif); white-space: nowrap; display: flex; align-items: center; gap: calc(.7 * var(--u)); }
.cap-card .face.up .cn::before { content: ""; flex: none; width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); background: var(--cat, #45506c); transform: rotate(45deg); }
.cap-card .face.up .cn.held { color: #5a5446; font-style: italic; }
.cap-card .face.up .to { font: 600 calc(2 * var(--u))/1.1 var(--mono); color: #3d372b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-card .face.up .res { color: #9a2f22; }

/* the field */
.tv-field { position: relative; overflow: hidden; min-width: 0; min-height: 0; background: #0e1528; }
.tv-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tv-tags { position: absolute; inset: 0; pointer-events: none; }
.tv .tag { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: calc(.4 * var(--u)); text-shadow: 0 1px 3px #000, 0 0 8px #000a; transition: opacity .4s; will-change: transform; }
.tv .tag .nm { display: flex; align-items: center; gap: calc(.5 * var(--u)); font: 700 calc(2.2 * var(--u))/1 var(--serif); white-space: nowrap; }
.tv .tag .nm .sig { font-size: calc(2 * var(--u)); }
.tv .tag .lk { display: none; width: calc(2 * var(--u)); height: calc(2 * var(--u)); color: var(--ink); background: var(--brass); border-radius: calc(.3 * var(--u)); padding: calc(.2 * var(--u)); box-shadow: 0 1px 4px #000a; }
.tv .tag .lk svg { display: block; width: 100%; height: 100%; }
.tv .tag.locked .lk { display: block; animation: popin .45s cubic-bezier(.2,1.6,.4,1) both; } /* (a lock stamped on the tag) */
.tv .tag.gone .nm { opacity: .45; text-decoration: line-through; text-decoration-thickness: .08em; }
.tv .tag.focus .nm { color: var(--brass); }
.tv-field.cut .tag:not(.focus) { opacity: 0; }
.tv .pooltag { display: flex; gap: .4em; align-items: baseline; white-space: nowrap; font: 600 calc(1.9 * var(--u))/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--charge); background: #0b101cc8; padding: calc(.35 * var(--u)) calc(.8 * var(--u)); border-radius: calc(.4 * var(--u)); text-shadow: none; border: 1px solid transparent; }
.tv .pooltag .n { text-transform: none; }
.tv .pooltag.far { font-size: calc(1.8 * var(--u)); background: #0b101c99; }
.tv .pooltag.empty { color: #b9b2a0; background: #0b101ce0; border: 1px dashed #b39a6288; } /* (gone: said, not faded out) */
.tv .pooltag.empty b { text-decoration: line-through; text-decoration-thickness: .1em; }
/* a ship's badges stack up from its name, over its own hull: never over a name, never nearer another ship */
.tv .tag .pops { position: absolute; top: auto; bottom: calc(100% + .5 * var(--u)); left: 50%; transform: translateX(-50%); display: grid; gap: calc(.35 * var(--u)); justify-items: center; }
.tv .tag .pop { background: var(--paper); color: var(--ink); font: 700 calc(2 * var(--u))/1.1 var(--serif); font-variant: small-caps; letter-spacing: .03em; padding: calc(.35 * var(--u)) calc(.8 * var(--u)); border-radius: calc(.3 * var(--u)); text-shadow: none; box-shadow: 0 2px 8px #0009; white-space: nowrap; animation: popin .45s cubic-bezier(.2,1.6,.4,1) both; display: inline-flex; align-items: center; gap: .3em; }
.tv .tag .pop b { font-family: var(--mono); font-variant: normal; }
.tv .tag .pop .chg { width: 1em; height: 1em; }
.tv .tag .pop.dmg { background: #b44343; color: #fff; font: 700 calc(3 * var(--u))/1 var(--mono); animation: popin .45s cubic-bezier(.2,1.6,.4,1) both, floatup 2.4s ease-in forwards; }
@keyframes floatup { 0%, 55% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 calc(-3 * var(--u)); } }
.tv .tag .pop.dead { background: #1b1f27; color: #ff8a7a; border: 1px solid #ff8a7a; }
.tv .tag .pop.gain { background: var(--charge); font-family: var(--mono); font-variant: normal; }
.tv .tag .pop.gain .chg { color: var(--ink); }
.tv .tag .pop.bad { background: #4a1f1c; color: #ffc2b8; }
.tv .tag .pop.prep { background: #7fe0c8; }
.tv .tag .pop.blk { border-left: calc(.5 * var(--u)) solid #3D7EA6; }
.tv .tag .pop.heal { border-left: calc(.5 * var(--u)) solid #2f6f63; }
.tv .tag .pop.vp { border-left: calc(.5 * var(--u)) solid #8EA83B; }
.tv .tag .pop.tac { border-left: calc(.5 * var(--u)) solid #7963A5; }
@keyframes popin { from { transform: scale(.3); opacity: 0; } }

/* the insets: broadcast boxes over the field's top corners (the 3D inside is drawn on the field's canvas) */
.pip { position: absolute; top: calc(1.6 * var(--u)); width: 34%; aspect-ratio: 16 / 10.4; border: calc(.3 * var(--u)) solid var(--brass); border-radius: calc(.4 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) #000b; opacity: 0; transition: opacity .2s; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.pip[data-box="0"] { left: calc(1.6 * var(--u)); }
.pip[data-box="1"] { right: calc(1.6 * var(--u)); }
.pip.on { opacity: 1; }
.pip-label { margin: 0; background: #0b101cf5; padding: calc(.55 * var(--u)) calc(1 * var(--u)); font-size: calc(2.2 * var(--u)); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--brass-2); }
.pip-label small { font: 600 calc(1.8 * var(--u))/1 var(--mono); color: #c9bfa6; }
.pip-label .k { font: 700 calc(1.8 * var(--u))/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--brass); padding: calc(.25 * var(--u)) calc(.5 * var(--u)); border-radius: calc(.2 * var(--u)); margin-right: calc(.5 * var(--u)); vertical-align: .1em; }
.pip[data-kind="replay"] .pip-label .k { background: #b44343; color: #fff; }
.pip[data-kind="replay"] .pip-label { white-space: normal; } /* (who made the kill, on a second line) */
.pip[data-kind="replay"] .pip-label small { display: block; margin-top: calc(.3 * var(--u)); }
.pip-extra { position: absolute; left: calc(.8 * var(--u)); top: calc(.8 * var(--u)); display: grid; gap: calc(.3 * var(--u)); font: 700 calc(1.9 * var(--u))/1 var(--mono); }
.pip-extra span { display: flex; align-items: center; gap: calc(.5 * var(--u)); background: #0b101cd0; padding: calc(.3 * var(--u)) calc(.6 * var(--u)); border-radius: calc(.3 * var(--u)); }
.pip-extra i { width: calc(1 * var(--u)); height: calc(1 * var(--u)); transform: rotate(45deg); background: var(--c); }

/* the title cards between phases (tv.js drives their motion: in, hold, a wipe out) */
.tv-card { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; overflow: hidden; pointer-events: none; text-align: center;
  background: radial-gradient(ellipse at 50% 42%, #1b2644fa, #0b101cfc 70%), repeating-linear-gradient(115deg, #ffffff05 0 calc(1.2 * var(--u)), transparent calc(1.2 * var(--u)) calc(2.4 * var(--u))); }
.tc-wipe { position: absolute; top: 0; bottom: 0; left: 0; width: calc(1.1 * var(--u)); transform: translateX(-50%); background: var(--brass); box-shadow: 0 0 calc(3 * var(--u)) #e0b25acc; opacity: 0; }
.tc-body { --rest: 1; display: grid; justify-items: center; gap: calc(2.2 * var(--u)); width: min(94%, calc(165 * var(--u))); }
.tc-title { margin: 0; display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); width: 100%; padding: calc(1.8 * var(--u)) 0; font: 700 calc(10 * var(--u))/1 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); text-shadow: 0 calc(.4 * var(--u)) calc(2 * var(--u)) #000;
  background: linear-gradient(90deg, transparent, #b39a6230 18%, #b39a6230 82%, transparent); border-block: calc(.25 * var(--u)) solid; border-image: linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass) 80%, transparent) 1; }
.tc-title em { font-style: normal; color: var(--brass); }
.tc-title .dot { flex: none; width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); background: var(--brass); transform: rotate(45deg); }
.tc-title.lock { font-size: calc(13 * var(--u)); letter-spacing: .16em; }
.tc-kicker { margin: calc(-1 * var(--u)) 0 0; font: 700 calc(2.6 * var(--u))/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); opacity: var(--rest); }
.tc-rest { display: grid; justify-items: center; gap: calc(2.2 * var(--u)); width: 100%; opacity: var(--rest); translate: 0 calc((1 - var(--rest)) * 2 * var(--u)); }
.tv-card p { margin: 0; }
.tv-card .k { font: 700 calc(2 * var(--u))/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--brass); padding: calc(.45 * var(--u)) calc(.7 * var(--u)); border-radius: calc(.3 * var(--u)); margin-right: calc(1.2 * var(--u)); vertical-align: .25em; }
.tv-card .vs { color: var(--muted); font-style: italic; font-weight: 400; }
.tc-lead { font: 700 calc(4.2 * var(--u))/1.15 var(--serif); }
.tc-table { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(1.4 * var(--u)); }
.tc-table li { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; column-gap: calc(1.4 * var(--u)); row-gap: calc(.6 * var(--u)); align-items: center; padding: calc(1.1 * var(--u)) calc(1.8 * var(--u)); background: #16203ae0; border: 1px solid #b39a6240; border-left: calc(.6 * var(--u)) solid var(--hue); border-radius: calc(.6 * var(--u)); }
.tc-table .sig { grid-row: 1; font-size: calc(2.6 * var(--u)); }
.tc-table .nm { grid-row: 1; grid-column: 2 / -1; justify-self: start; font: 700 calc(3.1 * var(--u))/1 var(--serif); white-space: nowrap; }
.tc-table .vp, .tc-table .hp { grid-row: 2; display: flex; align-items: baseline; gap: calc(.5 * var(--u)); font: 700 calc(3 * var(--u))/1 var(--mono); }
.tc-table .vp { grid-column: 1 / 3; color: #cfe08e; }
.tc-table .hp { grid-column: 3; }
.tc-table .k { background: none; color: var(--muted); padding: 0; margin: 0; font-size: calc(2 * var(--u)); vertical-align: 0; }
.tc-table li.low { border-color: #ff8a7a88; }
.tc-table li.low .hp { color: #ff8a7a; }
.tc-table li.out { opacity: .5; }
.tc-table li.out .nm { text-decoration: line-through; text-decoration-thickness: .08em; }
.tc-table li.out .hp { font-size: calc(2.4 * var(--u)); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tc-low { font-size: calc(2.8 * var(--u)); }
.tc-low .k { background: #b44343; color: #fff; }
.tc-head { font: 700 calc(3.8 * var(--u))/1.2 var(--serif); }
.tc-head small { font: 600 calc(2.6 * var(--u))/1 var(--serif); margin-left: calc(1 * var(--u)); }
.tc-head .chg { width: 1em; height: 1em; vertical-align: -.12em; color: var(--charge); }
.tc-head .cardname { border-bottom: calc(.35 * var(--u)) solid var(--cat); }
.tc-how { font-size: calc(3 * var(--u)); padding: calc(1.2 * var(--u)) calc(2.2 * var(--u)); border: 1px solid var(--brass-2); border-radius: calc(.6 * var(--u)); background: #0b101cc0; }
.tc-seats { list-style: none; margin: calc(1 * var(--u)) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(5 * var(--u)); }
.tc-seats li { display: grid; justify-items: center; gap: calc(1.2 * var(--u)); opacity: .45; }
.tc-seats svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); overflow: visible; fill: transparent; stroke: var(--hue); stroke-width: 1.2; transition: fill .2s, transform .25s; }
.tc-seats .nm { font: 700 calc(3 * var(--u))/1 var(--serif); color: var(--muted); }
.tc-seats li.lit { opacity: 1; }
.tc-seats li.lit svg { fill: var(--hue); stroke: #fff; filter: drop-shadow(0 0 calc(1.6 * var(--u)) var(--hue)); transform: scale(1.12); }
.tc-seats li.lit .nm { color: var(--cream); }
.tc-count { height: calc(15 * var(--u)); font: 700 calc(15 * var(--u))/1 var(--mono); color: var(--cream); text-shadow: 0 0 calc(3 * var(--u)) #e0b25a88; }
.tc-count.beat { animation: countbeat .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes countbeat { from { transform: scale(1.7); opacity: 0; } }
.tv-caption { position: absolute; left: 50%; bottom: calc(3.5 * var(--u)); transform: translateX(-50%); margin: 0; display: block; text-align: center; background: #0b101cf0; border-left: calc(.7 * var(--u)) solid var(--brass); padding: calc(1 * var(--u)) calc(2.2 * var(--u)); font: 700 calc(3.2 * var(--u))/1.1 var(--serif); white-space: nowrap; opacity: 0; transition: opacity .35s; pointer-events: none; }
.tv-caption.on { opacity: 1; }
.tv-caption small { display: block; margin-top: calc(.5 * var(--u)); font: 600 calc(2 * var(--u))/1 var(--mono); color: var(--muted); }
/* waiting on the last captains: a lower third, with the clock */
.tv-wait { position: absolute; right: calc(1.6 * var(--u)); bottom: calc(1.6 * var(--u)); margin: 0; display: flex; align-items: center; gap: calc(.8 * var(--u)); background: #0b101cf0; border-left: calc(.7 * var(--u)) solid var(--brass); padding: calc(.9 * var(--u)) calc(1.6 * var(--u)); font: 700 calc(2.6 * var(--u))/1.1 var(--serif); white-space: nowrap; opacity: 0; transform: translateY(30%); transition: opacity .35s, transform .35s; pointer-events: none; }
.tv-wait.on { opacity: 1; transform: none; }
/* the long-range sweep (viewscreen-draw.js), bottom left of the field, a little wider than an
   inset (its labels need it); its type at the screen's floor (1.8u), labels short (name and distance). It steps aside when
   the camera cuts in, and under Calm motion its contacts jump. */
.tv-sweep.vs-sweep { position: absolute; left: calc(1.6 * var(--u)); bottom: calc(1.6 * var(--u)); width: 40%; aspect-ratio: 16 / 10.4; font: 600 calc(1.8 * var(--u))/1.25 var(--mono); color: var(--vs-ink);
  background: radial-gradient(circle at 50% 55%, #12305a55, transparent 70%), #070b18cc; border-color: #6fa8ff55; transition: opacity .3s; pointer-events: none; }
.tv-sweep .vs-contact { width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; }
.tv-sweep .vs-contact .sig { width: .9em; height: .9em; }
.tv-sweep .vs-label { cursor: default; line-height: 1.2; } /* (two lines, name over distance: 2.4 font sizes, as labelLanes measures) */
.tv-field.cut .tv-sweep { opacity: 0; }
.tv.still .vs-contact, .tv.still .vs-label, .tv.still .vs-leader { transition: none; }
.tv-wait .k { font: 700 calc(1.9 * var(--u))/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.tv-wait .clk { font: 700 calc(2.8 * var(--u))/1 var(--mono); color: var(--cream); margin-left: calc(.6 * var(--u)); }
.tv-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(80%, calc(80 * var(--u))); text-align: center; background: #0b101cf0; border: 1px solid var(--brass); border-radius: calc(.6 * var(--u)); padding: calc(3 * var(--u)) calc(4 * var(--u)); opacity: 0; transition: opacity .6s; pointer-events: none; }
.tv-banner.on { opacity: 1; }
.tv-banner .eyebrow { font-size: calc(2 * var(--u)); }
.tv-banner .lede { font-size: calc(3.4 * var(--u)); margin: calc(1 * var(--u)) 0; }
.tv-banner .small { font-size: calc(2 * var(--u)); color: var(--muted); }

/* the ticker: standings, the latest word, then the crawl */
.tv-ticker { grid-column: 1 / -1; display: flex; align-items: stretch; background: #0a0f1a; border-top: 2px solid var(--brass-2); min-width: 0; }
.tv-live { flex: none; display: flex; align-items: center; gap: calc(1.1 * var(--u)); padding: 0 calc(1.6 * var(--u)); background: var(--brass); color: var(--ink); font: 700 calc(2.2 * var(--u))/1 var(--mono); max-width: 34%; overflow: hidden; }
.tv-live .rd { font-size: calc(2 * var(--u)); padding-right: calc(1 * var(--u)); border-right: 2px solid #0e152855; }
.tv-live .st { display: inline-flex; align-items: center; gap: calc(.35 * var(--u)); white-space: nowrap; }
.tv-live .st .sig { font-size: calc(2 * var(--u)); stroke: var(--ink); stroke-width: 1.2; }
.tv-live .st .nm { font: 700 calc(2.2 * var(--u))/1 var(--serif); }
.tv-live .st.out { opacity: .45; }
.tv-latest { flex: 0 1 auto; max-width: 40%; display: flex; align-items: center; gap: calc(.6 * var(--u)); padding: 0 calc(1.6 * var(--u)); background: #172038; border-right: 2px solid var(--brass-2); font-size: calc(2.4 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-latest:empty { display: none; }
.tv-latest::before { content: "Latest"; flex: none; font: 700 calc(1.8 * var(--u))/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.tv-latest.in { animation: latest .6s ease-out; }
.tv-latest.old { color: var(--muted); background: #111827; }
.tv-latest.hot:not(.old) { color: #ffd2c8; }
@keyframes latest { from { background: #4a4a2a; } }
.tv-crawl { position: relative; flex: 1; overflow: hidden; }
.tv-crawl .track { position: absolute; left: 0; top: 0; bottom: 0; width: max-content; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.tv-crawl .item { flex: none; position: relative; padding: 0 calc(2.4 * var(--u)); font-size: calc(2.4 * var(--u)); }
.tv-crawl .item::after { content: ""; position: absolute; right: calc(-.45 * var(--u)); top: 50%; width: calc(.9 * var(--u)); height: calc(.9 * var(--u)); background: var(--brass); transform: translateY(-50%) rotate(45deg); opacity: .6; }
.tv-crawl .item.hot { color: #ffd2c8; }
.tv-crawl .item.tk-stand { color: #cfe08e; }
.tv-crawl .item.old { color: var(--muted); }
.tv-crawl .item.old .who { opacity: .75; }
.tv .rd { font: 700 calc(1.8 * var(--u))/1 var(--mono); color: var(--muted); border: 1px solid #45506c; border-radius: calc(.3 * var(--u)); padding: calc(.2 * var(--u)) calc(.4 * var(--u)); vertical-align: .15em; }
.tv-live .rd { border: 0; color: var(--ink); padding: 0 calc(1 * var(--u)) 0 0; border-right: 2px solid #0e152855; border-radius: 0; font-size: calc(2.2 * var(--u)); }
.tv-crawl .cardname { border-bottom: calc(.3 * var(--u)) solid var(--cat); }
.tv.still .tv-crawl .track { position: static; height: 100%; justify-content: flex-start; }

/* settings */
.tv-menu { position: absolute; right: calc(4 * var(--u)); top: calc(9 * var(--u)); z-index: 5; display: grid; gap: calc(1.4 * var(--u)); min-width: calc(48 * var(--u)); background: var(--navy); border: 1px solid var(--brass-2); border-radius: calc(.6 * var(--u)); padding: calc(1.8 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) #000c; font-size: calc(2 * var(--u)); }
.tv-menu .eyebrow { margin: 0; }
.tv-menu .opt { display: grid; gap: calc(.6 * var(--u)); }
.tv-menu .opt small { color: var(--muted); }
.tv-menu .seg { display: flex; }
.tv-menu .seg button { flex: 1; padding: calc(.9 * var(--u)) calc(1.2 * var(--u)); border: 1px solid var(--brass-2); background: var(--navy-2); }
.tv-menu .seg button + button { border-left: 0; }
.tv-menu .seg button[aria-pressed="true"] { background: var(--brass); color: var(--ink); }
.tv-menu .seg button:disabled { opacity: .45; }
.tv-menu .link { justify-self: start; }
.tv-toast { position: absolute; left: 50%; bottom: calc(10 * var(--u)); transform: translateX(-50%); z-index: 6; margin: 0; background: var(--bad); color: #fff; padding: calc(.6 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(.4 * var(--u)); }
.bar .tv-back { border: 1px solid var(--brass-2); background: none; border-radius: var(--r); padding: 4px 10px; font-size: .8rem; color: var(--brass); }
/* the full-screen reveal, played on the table screen: its words sized for the couch */
.stage3d.on-tv .label { width: 210px; gap: 6px; }
.stage3d.on-tv .label .nm { font-size: 1.55rem; gap: 7px; }
.stage3d.on-tv .sig { width: 13px; height: 13px; }
.stage3d.on-tv .label .hp { font-size: 1.2rem; gap: 8px; }
.stage3d.on-tv .label .hpbar { height: 6px; }
.stage3d.on-tv .label .hit { font-size: 1.5rem; }
.stage3d.on-tv .chip3d { font-size: 1.2rem; min-height: 54px; }
.stage3d.on-tv .chip3d .up small { font-size: .95rem; }
.stage3d.on-tv .pops3d .pop { font-size: 1.2rem; padding: 4px 9px; }
.stage3d.on-tv .pops3d .pop b { font-size: 1.25rem; }
.stage3d.on-tv .caption3d { font-size: 2.6rem; }
.stage3d.on-tv .caption3d small { font-size: 1.2rem; }
.stage3d.on-tv .log3d { font-size: 1.2rem; padding: 12px 3vw; }
@media (prefers-reduced-motion: reduce) { .cap-card, .cap.faceup .cap-card { transition: none; animation: none; } .cmd.fresh, .delta, .cap.flare, .tv-latest.in, .tv .tag .pop, .tv .tag.locked .lk { animation: none; } }
/* a phone while the table screen's title card is on */
.get-ready .ready-n { font-family: var(--mono); color: var(--brass); margin-left: .3em; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* review: 44px to tap, without growing what you see */
.stats .term { position: relative; }
.stats .term { padding: 6px 2px; }
.term.stock { padding-block: 6px; }
.term.stock { position: relative; }
.rival .more { position: relative; }
.rival .more { min-height: 36px; }
.refresh-row .ghost { min-height: 44px; }
.bar-row { display: flex; align-items: center; gap: 8px; }
.bar-row .dice-row { flex: 1; min-width: 0; padding-top: 6px; }
.row-label { flex: none; width: 54px; font: var(--t-label)/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pill.term { cursor: help; }
.refresh-row .term u { text-decoration: underline dotted; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- the Refit */
/* The bar's two panels from the pick to the results: the shared pool, then your
   Engineering offer; side by side once the bar is wide enough, stacked on a phone.
   Once you've chosen, yours goes first and the other folds to one dimmed line that
   stays in view (tap it to unfold it, dimmed; it takes no taps). */
.refit { container: refit / inline-size; }
.refit-grid { display: grid; gap: 8px; }
@container refit (min-width: 520px) { .refit-grid:not(.folded) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
/* the folded line, pinned in the foot above the stage's buttons */
.bar-foot:not(.two) { display: grid; gap: 6px; }
.refit-sum { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; margin: 0; padding: 6px 10px; border-radius: 8px; text-align: left;
  font: var(--t-note)/1.2 var(--serif); color: var(--muted); } /* (quieter by colour, not opacity: it's a live control, so its text keeps 4.5:1) */
.refit-sum span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refit-sum .chev { flex: none; width: 14px; height: 14px; transition: transform .2s; }
.refit-sum.open .chev { transform: rotate(180deg); }
.refit-sum-pool { background: #0b101cc8; border: 1px dashed color-mix(in srgb, var(--charge) 60%, transparent); }
.refit-sum-eng { background: color-mix(in srgb, var(--navy) 60%, var(--night)); border: 1px solid color-mix(in srgb, var(--hue) 60%, transparent); border-left-width: 4px; }
.refit-panel { position: relative; display: grid; gap: 6px; padding: 10px 10px 8px; border-radius: 8px; transition: opacity .2s, filter .2s; }
/* The panel you didn't choose is quieter in its frame and surfaces only. Its text keeps full colour (4.5:1 or better): it's there to be read.
   It takes no taps (not inert: screen readers still read it). */
.refit-panel.unchosen { pointer-events: none; }
.refit-panel.unchosen .shop-card { pointer-events: auto; } /* (a card opens the card view; its claim and buy buttons stay blocked) */
.refit-pool.unchosen { background: #0b101c99; border-color: color-mix(in srgb, var(--charge) 45%, transparent); }
.refit-pool.unchosen .tile { background: color-mix(in srgb, var(--navy) 70%, transparent); border-color: #b39a6244; }
.refit-eng.unchosen { background: color-mix(in srgb, var(--navy) 70%, transparent); border-color: color-mix(in srgb, var(--hue) 45%, transparent); }
.refit-eng.unchosen .idea { background: color-mix(in srgb, var(--paper) 70%, var(--night)); border-left-color: color-mix(in srgb, var(--cat, #45506c) 60%, transparent); }
.refit-eng.unchosen .idea.short { background: color-mix(in srgb, var(--paper-2) 70%, var(--night)); }
.refit-eng.unchosen .idea .shop-card, .refit-eng.unchosen .idea .shop-card small, .refit-eng.unchosen .idea .flavor, .refit-eng.unchosen .idea .lane, .refit-eng.unchosen .idea.short .shop-card, .refit-eng.unchosen .idea.short .need { color: var(--ink); }
.refit-eng.unchosen .idea .need { color: #5c4207; }
.refit-panel[hidden] { display: none; }
.refit-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font: 600 var(--t-label)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.refit .sig { flex: none; width: 12px; height: 12px; }
/* the heading wraps inside itself, so your shape keeps its line (not alone above it); your Charge drops below when it can't fit beside */
.refit-title { flex: 1 1 16em; min-width: 0; }
/* the pool is the table's: the brass the table screen labels it in, a dashed edge, every captain's shape along it */
.refit-pool { background: #0b101cc8; border: 1px dashed var(--charge); }
.refit-pool .refit-head { color: var(--charge); }
.refit-pool .edge { position: absolute; top: -7px; right: 10px; display: flex; gap: 3px; padding: 0 4px; background: var(--night); }
.refit-pool .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.refit-pool .tile { display: grid; gap: 1px; align-content: start; min-width: 0; text-align: left; padding: 6px 7px; border-radius: var(--r); border: 1px solid #b39a6266; background: var(--navy); color: var(--cream); font: var(--t-label)/1.25 var(--mono); }
.actionbar .refit-pool .tile { min-height: 0; padding: 6px 7px; }
.actionbar .refit-pool .tile span { font-size: var(--t-label); white-space: normal; }
.refit-pool .t-name { font: 700 var(--t-name)/1.15 var(--serif); color: var(--cream); }
.refit-pool .t-val { display: inline-flex; gap: 3px; align-items: center; color: var(--charge); }
.refit-pool .t-hand, .refit-pool .t-left { color: var(--muted); }
.refit-pool .tile.sel { border-color: var(--cream); box-shadow: inset 0 0 0 1px var(--cream); }
.refit-pool .claim:disabled { border-style: dashed; }
.refit-pool .tile.gone { opacity: .4; filter: grayscale(1); }
.refit-pool .t-who { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 2px; }
.refit-pool .t-who em { font-style: normal; color: #e8a79f; }
.refit-note, .refit-who { margin: 0; font-size: var(--t-note); line-height: 1.3; color: #d6cfbf; }
.refit-who { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--muted); }
/* the offer is yours: your colour and shape, a solid edge like your Command Center */
.refit-eng { background: var(--navy); border: 1px solid var(--hue); border-left-width: 4px; }
.refit-eng .refit-head { color: var(--hue); }
.refit-eng .refit-charge { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; color: var(--cream); letter-spacing: 0; text-transform: none; font: var(--t-note)/1.2 var(--serif); }
.refit-eng .refresh-row { margin: 2px 0 0; }
/* an idea: the rules at full size, then what it needs, then its flavour */
.idea .shop-card small { display: block; overflow: visible; -webkit-line-clamp: unset; }
.idea .need, .idea .flavor { grid-column: 1 / -1; margin: 0; }
.idea .need { display: inline-flex; gap: 4px; align-items: center; font: 600 var(--t-note)/1.25 var(--serif); color: var(--charge-ink); }
.idea .flavor { font: italic var(--t-note)/1.3 var(--serif); color: #5a5446; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line; the card in full has it all */
.idea.short { background: var(--paper-2); }
.idea.short .shop-card, .idea.short .need { color: #6b6456; }
/* The cutscene (cutscene-stage.js). Over the picture (cutscene3d.js places them): the lock beat's
   stamps over each hologram (a "?" while the captain picks in secret, then LOCK: big enough to read
   on a table screen across the room), the ships' names, and the Refit's chips, as the game has them */
.cut-locks { position: absolute; inset: 0; pointer-events: none; }
.cut-lock { position: absolute; font: 700 clamp(.8rem, 1.6vw, 1.5rem)/1 var(--mono); letter-spacing: .2em; color: var(--hue); border: 2px solid var(--hue); padding: .3em .45em .25em; border-radius: 3px; background: #0f1624cc; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(1.6); transition: opacity .12s, transform .18s cubic-bezier(.2, 1.6, .4, 1); }
.cut-lock.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cut-lock.on.secret { opacity: .8; letter-spacing: 0; border-style: dashed; animation: cut-secret .45s ease-in-out infinite alternate; }
.cut-lock.you::after { content: " · YOU"; letter-spacing: .12em; }
@keyframes cut-secret { to { opacity: .4; } }
.cut-name { position: absolute; display: grid; justify-items: center; gap: 4px; transform: translate(-50%, -100%); font: 700 clamp(.72rem, 1.3vw, 1.1rem)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--hue); text-shadow: 0 1px 2px #000, 0 0 10px #000d; opacity: 0; transition: opacity .2s; }
.cut-name b { display: block; }
.cut-name i { font-style: normal; color: var(--cream); }
.cut-name.you { grid-template-columns: auto auto; column-gap: .5em; }
.cut-name.you i::before { content: "· "; }
.cut-name::after { content: ""; grid-column: 1 / -1; width: 1px; height: clamp(10px, 2vh, 22px); background: var(--hue); box-shadow: 0 0 6px var(--hue); }
.cut-name.on { opacity: 1; }
.cut-name.under { transform: translate(-50%, 0); }
.cut-name.under::after { order: -1; }
/* (a table screen's: bigger, on a dark pill, to read across the room) */
.cut-name.across { font-size: clamp(.9rem, 1.8vw, 1.6rem); }
.cut-name.across b { background: #0b0f1acc; padding: .2em .45em .15em; border-radius: 4px; }
.cut-chip { position: absolute; transform: translate(-50%, -100%) scale(.7); font: 700 clamp(.75rem, 1.4vw, 1.25rem)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink); padding: .5em .75em .45em; border-radius: 4px; border: 1px solid; box-shadow: 0 2px 10px #0008; opacity: 0; transition: opacity .12s, transform .2s cubic-bezier(.2, 1.6, .4, 1); }
.cut-chip.scav { background: var(--charge); border-color: var(--charge); }
.cut-chip.prep { background: #7fe0c8; border-color: #7fe0c8; }
.cut-chip.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
/* (the lead ship's command card, its die's glyph on it, in the weapon's red) */
.cut-chip.cmd { display: inline-flex; align-items: center; gap: .45em; background: #B44343; border-color: #e7a3a3; color: #f3ead6; transform: translate(-50%, -50%) scale(.4) rotateY(90deg); }
.cut-chip.cmd svg { width: 1.3em; height: 1.3em; }
.cut-chip.cmd.on { transform: translate(-50%, -50%) scale(1); }
/* the overlay: over the game and its bar, the picture full bleed, captions low in a box of fixed
   height (so nothing jumps as lines change), Skip at the foot */
.cutscene { position: fixed; inset: 0; z-index: 45; overflow: hidden; background: var(--night); color: var(--cream); animation: fade .4s ease both; }
.cutscene.leaving { animation: fade .3s ease reverse both; }
.cut-pic, .cut-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cut-veil { position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; }
/* (the title on a dark band of its own, so it reads from its first frame, even over the flash it slams in on) */
.cut-title { position: absolute; inset: 0; z-index: 1; isolation: isolate; display: grid; place-content: center; text-align: center; pointer-events: none; }
.cut-title::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: clamp(10rem, 40vw, 26rem); transform: translateY(-50%); background: radial-gradient(60% 50% at 50% 50%, #0b0f1ae6, #0b0f1a99 55%, transparent); z-index: -1; animation: fade .12s ease both; }
.cut-title h2 { margin: 0; padding-left: .12em; font: 900 clamp(2.4rem, 11vw, 9rem)/1 var(--serif); letter-spacing: .12em; color: var(--cream); text-shadow: 0 2px 0 #0b0f1a, 0 0 18px #0b0f1a, 0 0 32px #b39a6288; animation: cut-slam .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.cut-title p { margin: .6em 0 0; font: 600 clamp(.95rem, 3.6vw, 1.7rem)/1 var(--mono); letter-spacing: .3em; color: var(--brass); text-shadow: 0 1px 3px #000, 0 0 12px #000c, 0 0 24px #0b0f1a; animation: fade .5s .12s ease both; } /* (in with the slam) */
@keyframes cut-slam { from { opacity: 0; transform: scale(1.6); } }
/* (a soft dark band at the foot, under the captions and Skip: the words read over any frame) */
.cutscene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, #0b0f1aa8 70%); pointer-events: none; }
.cutscene.attract::after { display: none; }
.cut-caption, .cut-foot { z-index: 1; }
.cut-caption { position: absolute; left: 16px; right: 16px; bottom: calc(88px + var(--random-nav-h, 0px)); margin: 0 auto; max-width: 34em; min-height: 2.7em; display: grid; align-content: end; text-align: center; font: 600 clamp(1rem, 4.2vw, 1.6rem)/1.35 var(--serif); text-shadow: 0 1px 3px #000, 0 0 12px #000c; }
.cut-foot { position: absolute; left: 16px; right: 16px; bottom: calc(20px + var(--random-nav-h, 0px)); display: grid; grid-auto-flow: column; justify-content: end; gap: 8px; }
.cut-skip { min-width: 120px; min-height: 48px; border-radius: var(--r); padding: 0 16px; font: 700 .9rem/1 var(--mono); letter-spacing: .08em; background: #0f1624cc; color: var(--cream); border: 1px solid var(--brass); }
.cut-skip[aria-pressed="true"] { color: var(--muted); border-color: var(--brass-2); }
.cut-sound { font: 600 .85rem/1 var(--mono); background: #0f1624cc; }
/* (reduced motion: the global rule stops every animation, so the title's fade is put back over it; the stamps land with no pop) */
@media (prefers-reduced-motion: reduce) { .cut-title h2 { animation: fade .6s ease both !important; } .cut-lock { transform: translate(-50%, -50%); } }
/* a table screen's lobby: the cutscene loops behind it, silent; the lobby (its code and QR code)
   stays on top, to the right, on a darker glass */
.cutscene.attract { z-index: 0; pointer-events: none; }
body.cut-attract main { max-width: none; }
body.cut-attract #game { position: relative; z-index: 1; }
body.cut-attract .lobby { max-width: 440px; margin-left: auto; background: #0f1624e0; }
.cutscene.attract .cut-caption { left: 32px; right: calc(440px + 64px); bottom: calc(32px + var(--random-nav-h, 0px)); margin: 0; text-align: left; }
@media (max-width: 899px) { .cutscene.attract .cut-caption { display: none; } }