/* Quantum — dark space theme. No images: dice pips, sockets, glyphs are CSS. */

:root {
  --bg0: #05070f;
  --bg1: #0b1026;
  --panel: rgba(15, 22, 44, 0.82);
  --panel2: rgba(9, 14, 30, 0.9);
  --line: #22315a;
  --line2: #31436f;
  --text: #ccd7f0;
  --dim: #8593b8;
  --accent: #6ee7ff;
  --good: #7ae582;
  --bad: #ff5d73;
  --gold: #ffd166;
  --purple: #c77dff;
  --pip: #0a1122;
  /* board cell size; only the fallback for the stacked narrow layout below
     (responsive mobile design is pending) — at >=1001px #board derives
     --cell from the space actually available (see the override there) */
  --cell: clamp(34px, 4.6vmin, 52px);
  /* Player ship colors: muted pastels kept readable on the dark-space board
     (sage / dusty rose / slate blue / sand). Cube sockets and dots share them;
     dice use them as the die face, and player panes tint themselves with
     darkened versions of the same hues (see .player-card.pcN). */
  --p0: #8fb3de;
  --p1: #d798a4;
  --p2: #a8c6a0;
  --p3: #d9c491;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 15px/1.45 system-ui, "Segoe UI", sans-serif;
  background:
    radial-gradient(1100px 600px at 15% -10%, #17224a 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 30%, #23143f 0%, transparent 55%),
    radial-gradient(700px 500px at 40% 120%, #0d2440 0%, transparent 60%),
    var(--bg0);
  background-attachment: fixed;
}

.mono { font-family: ui-monospace, "Cascadia Mono", monospace; }
.hidden { display: none !important; }
.spacer { flex: 1; }
.lbl { color: var(--dim); font-size: 13px; }
.hint { color: var(--dim); font-size: 12.5px; margin: 2px 0 6px; }
.note { color: var(--accent); font-size: 12.5px; margin: 4px 0; }

button {
  font: inherit;
  color: var(--text);
  background: #16203f;
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible, output:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button:disabled, button.disabled { opacity: 0.45; cursor: default; }
/* Tooltip hosts must not dim via opacity — the ::after tooltip inherits it.
   Color-based dimming keeps the tooltip fully opaque. */
button:disabled[data-tip], button.disabled[data-tip] {
  opacity: 1;
  color: var(--dim);
  border-color: var(--line);
}
button.primary { background: #14406b; border-color: #2a6ea6; }
button.mini { padding: 2px 8px; font-size: 12px; border-radius: 6px; }

input, output {
  font: inherit;
  color: var(--text);
  background: #0d1730;
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 6px 10px;
}
input.mono, output.mono { font-family: ui-monospace, monospace; }

/* ---------------------------------------------------------------- layout */

#toasts {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}
.toast {
  background: #26152b;
  border: 1px solid #7a3b57;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

#topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 480px) {
  #topbar { gap: 6px 8px; padding: 6px 8px; }
  #topbar button { padding: 4px 8px; font-size: 12px; }
}
.dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #55627f; flex: none;
}
.dot.ok { background: var(--good); box-shadow: 0 0 8px var(--good); }
.dot.wait { background: var(--gold); animation: pulse 1s infinite; }
.dot.off { background: var(--bad); }
@keyframes pulse { 50% { opacity: 0.4; } }

.badge, .chip, .pill {
  font-size: 12px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--dim);
  white-space: nowrap;
}
.chip { padding: 0 8px; }
.chip.turn-chip { color: var(--gold); border-color: var(--gold); }

/* signed-in user chip + sign-out: inside the topbar (game) and at the
   top-right of the home screen */
.userbox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.userbox b {
  color: var(--dim);
  font-weight: 600;
  font-size: 12.5px;
}
.userbox.hidden { display: none; }
.userbox-home {
  align-self: flex-end;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ home */

#home {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 18px 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.logo {
  font-size: 54px;
  letter-spacing: 0.35em;
  margin: 0;
  text-align: center;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(110, 231, 255, 0.45);
}
.tagline { text-align: center; color: var(--dim); margin: 0 0 10px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.card h2 { margin: 0 0 6px; font-size: 18px; color: var(--accent); }
.card h3 { margin: 14px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.row label { color: var(--dim); font-size: 13px; }

.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.segbtn { border: 0; border-radius: 0; border-right: 1px solid var(--line2); min-width: 40px; }
.segbtn:last-child { border-right: 0; }
.segbtn[aria-pressed="true"] { background: #1b4f74; color: var(--accent); }

.created { border: 1px dashed var(--line2); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.joincode { font-size: 28px; letter-spacing: 0.2em; color: var(--gold); }
.code-row output { padding: 4px 14px; }
#shareUrl { flex: 1; min-width: 200px; }

/* ------------------------------------------------------------------ game */

#game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  padding: 12px 14px 40px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  #game { grid-template-columns: 1fr; }
}
/* query container: #board sizes itself off the real column width (100cqw) */
.game-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; container-type: inline-size; }
.game-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.banner-main strong { color: var(--accent); margin-right: 6px; }
.banner-combat { color: var(--bad); font-weight: 600; }

/* dedicated turn-change notice (hotseat auto seat switch) */
#turnNotice {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  z-index: 55;
  padding: 8px 20px;
  border-radius: 999px;
  background: #12314a;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
#turnNotice.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------ card reference tooltips */
/* CSS-only: appear on hover and on keyboard focus of the [data-tip] element */

[data-tip] { position: relative; }
/* Viewport-aware: width is clamped to the viewport and edge hosts (--tip-*
   overrides below) pull the bubble inward so it never clips off-screen. */
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: var(--tip-left, 50%);
  right: var(--tip-right, auto);
  bottom: calc(100% + 7px);
  transform: translateX(var(--tip-x, -50%)) translateY(4px);
  z-index: 80;
  width: max-content;
  max-width: min(250px, calc(100vw - 24px));
  padding: 6px 10px;
  border-radius: 8px;
  background: #0d1428;
  border: 1px solid var(--line2);
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease 0.05s, transform 0.12s ease 0.05s;
}
[data-tip]:hover::after,
[data-tip]:focus::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(var(--tip-x, -50%)) translateY(0);
}
.market-card[data-tip]::after { max-width: min(230px, calc(100vw - 24px)); }
/* edge cards/chips anchor their tooltip to the inner edge */
.market-row > [data-tip]:first-child::after,
.p-hand > [data-tip]:first-child::after { --tip-left: 0; --tip-x: 0; }
.market-row > [data-tip]:last-child::after,
.p-hand > [data-tip]:last-child::after {
  --tip-left: auto; --tip-right: 0; --tip-x: 0;
}
@media (min-width: 1001px) {
  /* the right column hugs the viewport edge: tooltips grow inward (left) */
  .game-right [data-tip]::after, .float-card [data-tip]::after {
    --tip-left: auto; --tip-right: 0; --tip-x: 0;
  }
}
@media (max-width: 1000px) {
  /* stacked panel buttons sit at the left edge once the columns fold */
  .panel-block > button[data-tip]::after { --tip-left: 0; --tip-x: 0; }
}

#boardWrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#board {
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  grid-template-rows: repeat(9, var(--cell));
  gap: 2px;
  background: rgba(20, 30, 60, 0.35);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  touch-action: manipulation;
}
@media (min-width: 1001px) {
  /* Desktop board sizing (target >= 1024x768): fill the space actually
     available instead of the small vmin cap. The cell is the smaller of
     - the board column width (100cqw of .game-left) minus the board's own
       chrome (8x2px gap + 2x6px padding + 2px border = 28, plus 10 slack), and
     - the viewport height minus the layout chrome (topbar ~52 + #game padding
       52 + banner ~46 + gaps ~18 + legend ~20 = ~188, plus 40 slack).
     Cell sizes above ~110px look cartoonish, so cap there. */
  #board {
    --cell: clamp(34px,
      min(calc((100cqw - 38px) / 9), calc((100vh - 228px) / 9)),
      110px);
  }
}
.cell {
  position: relative;
  background: rgba(30, 44, 84, 0.35);
  border-radius: 4px;
}
.cell.orbital { box-shadow: inset 0 0 0 1px rgba(110, 231, 255, 0.14); }

/* highlights — shape + glyph, never color alone */
.cell.hl { cursor: pointer; }
.cell.hl::after { content: ""; position: absolute; inset: 1px; border-radius: 4px; pointer-events: none; }
.hl-move::after { border: 2px dotted var(--good); }
.hl-attack::after { border: 2px solid var(--bad); }
.hl-strike::after { border: 2px dashed var(--purple); }
.hl-deploy::after, .hl-drop::after { border: 2px dotted var(--accent); }
.hl-transport-dest::after { border: 2px dashed var(--accent); }
.hl-cube::after, .hl-construct::after { border: 2px solid var(--gold); }
.hl-startCube::after, .hl-startShip::after, .hl-reloSrc::after, .hl-reloDst::after,
.hl-retreat::after, .hl-gambit::after, .hl-nomadic::after, .hl-tactical::after,
.hl-curious::after { border: 2px dashed var(--accent); }
/* orbital cells already holding a starting die */
.cell.hl-startShip.taken::after { border: 2px solid var(--gold); }
/* staged starting die preview: dashed outline (not opacity) marks it as not
   confirmed yet; the glyph title keeps the full click explanation */
.cell > .die.ship.preview {
  position: absolute; inset: 6%; width: auto; height: auto;
  outline: 2px dashed rgba(255, 255, 255, 0.75); outline-offset: 0;
  cursor: pointer; /* the staged die is clickable: it unpicks back to the pane */
}
.cell.under::after { border-style: solid; }
.glyph {
  position: absolute; top: 0; right: 3px;
  font-size: calc(var(--cell) * 0.34);
  line-height: 1.1;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
.hl-move .glyph { color: var(--good); }
.hl-attack .glyph { color: var(--bad); }
.hl-strike .glyph { color: var(--purple); }
.hl-deploy .glyph, .hl-drop .glyph { color: var(--accent); }
.hl-transport-dest .glyph { color: var(--accent); }
.hl-cube .glyph, .hl-construct .glyph { color: var(--gold); }

/* planet */
.planet { background: rgba(48, 36, 16, 0.25); }
/* pending cube placement: planets without a legal spot go mute */
.planet.muted { background: rgba(30, 28, 24, 0.16); }
.planet.muted .planet-disc {
  background: radial-gradient(circle at 35% 30%, #4a4437, #2b2820 70%);
  border-color: #211d17;
}
.planet.muted .pnum { color: #9c9487; }
.planet.muted .socket { opacity: 0.45; }
.planet-disc {
  position: absolute; inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a6a3d, #4c3a1d 70%);
  border: 1px solid #2a2013;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.planet-disc.starting { box-shadow: 0 0 0 2px var(--gold); }
.pnum { font-size: calc(var(--cell) * 0.3); font-weight: 700; color: #ffe9c4; line-height: 1; }
.sockets { display: flex; gap: 2px; }
.socket {
  width: calc(var(--cell) * 0.14); height: calc(var(--cell) * 0.14);
  border-radius: 2px;
  border: 1px solid rgba(255, 233, 196, 0.55);
  background: transparent;
  padding: 0;
  min-width: 0;
}
button.socket { cursor: pointer; }
.socket.empty { border-style: dashed; opacity: 0.7; }
.socket.target { outline: 2px solid var(--gold); outline-offset: 1px; }
.socket.p0 { background: var(--p0); }
.socket.p1 { background: var(--p1); }
.socket.p2 { background: var(--p2); }
.socket.p3 { background: var(--p3); }

/* ships (dice) */
.shipbtn {
  position: absolute; inset: 6%;
  padding: 0; border: 0; background: transparent; border-radius: 6px;
  display: block;
}
.die {
  width: 100%; height: 100%;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow:
    0 0 0 1px rgba(205, 222, 255, 0.30),
    0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  display: block;
}
.pips {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 14%;
  gap: 0;
}
.pip { border-radius: 50%; margin: 8%; }
.pip.on { background: var(--pip); box-shadow: inset 0 1px 1px rgba(255,255,255,0.35); }

.die.ship.p0 { background: var(--p0); }
.die.ship.p1 { background: var(--p1); }
.die.ship.p2 { background: var(--p2); }
.die.ship.p3 { background: var(--p3); }
.die.ship.moved { filter: saturate(0.55) brightness(0.8); }
.die.ship.selected { outline: 2px solid #fff; outline-offset: 1px; }
.die.ship.warp { outline: 2px dashed var(--good); outline-offset: 1px; }
.die.ship.pickup { outline: 2px dotted #fff; outline-offset: 1px; }
.die.ship.reorg { outline: 2px dashed var(--gold); outline-offset: 1px; }

/* small tracker dice in sidebars */
.die.track { width: 22px; height: 22px; display: inline-block; background: #e8ecf5; flex: none; }
.die.track.res { box-shadow: 0 0 0 2px #2a6ea6 inset; }
.die.track.dom { box-shadow: 0 0 0 2px #7a3b57 inset; }
.die.track .pips { padding: 6%; }

/* mini dice inside panel buttons (setup ship placement) */
.die.mini { width: 21px; height: 21px; display: inline-block; flex: none; }
.die.mini.p0 { background: var(--p0); }
.die.mini.p1 { background: var(--p1); }
.die.mini.p2 { background: var(--p2); }
.die.mini.p3 { background: var(--p3); }
button.diebtn, .die-slot { display: inline-flex; align-items: center; gap: 7px; }
/* display-only dice (placed/done, sticky rows) carry the die-button box
   invisibly (same padding + margin + border footprint, no visuals) so the
   dice row height never jumps when a pickable die loses its buttons */
.die-slot {
  padding: 6px 12px; margin: 3px 6px 3px 0;
  border: 1px solid transparent; border-radius: 8px;
}

/* full-size dice row in setup panels (the primary visual, unlike .mini) */
.dice-row { display: inline-flex; align-items: center; gap: 9px; margin: 2px 0; }
.startdice { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; }
/* a starting die already staged on the board: gold ring = placed cue */
.dice-row .die.done { box-shadow: 0 0 0 2px var(--gold); }
.dice-row .die {
  width: 34px; height: 34px; display: inline-block;
  background: #e8ecf5; flex: none;
}
.dice-row .die.p0 { background: var(--p0); }
.dice-row .die.p1 { background: var(--p1); }
.dice-row .die.p2 { background: var(--p2); }
.dice-row .die.p3 { background: var(--p3); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--dim); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }
.swatch.hl-move { border: 2px dotted var(--good); }
.swatch.hl-attack { border: 2px solid var(--bad); }
.swatch.hl-strike { border: 2px dashed var(--purple); }
.swatch.hl-deploy { border: 2px dotted var(--accent); }
.swatch.hl-cube { border: 2px solid var(--gold); }
.swatch.hl-choice { border: 2px dashed var(--accent); }

/* -------------------------------------------------------------- sidebars */

#playersPanel, #marketPanel, #sidePanel { display: flex; flex-direction: column; gap: 10px; }
.player-card, .panel-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.panel-block h3 { margin: 0 0 4px; font-size: 13.5px; color: var(--accent); }
.panel-block button { margin: 3px 6px 3px 0; font-size: 13px; }
/* A block's buttons form one row (flex gap, wrapping only when truly too
   wide) on their own line under the dice row — never each on its own line
   beside the dice. Notes in a button list take the full width. */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.btn-row .note { flex-basis: 100%; margin: 2px 0 0; }
.panel-block .btn-row button { margin: 0; }
.panel-block button.active { border-color: var(--purple); }
.panel-block button.gambit { border-color: #6b2d4f; background: #241428; }
.panel-block button.command { border-color: #2d4c6b; background: #131f33; }
.panel-block button.toggled { background: #3d3413; border-color: var(--gold); color: var(--gold); }

/* Per-player pane tint: same hue as the player's dice (--p0..--p3), darkened to
   a muted ink so text/buttons stay readable on the dark theme, plus a
   translucent sheen of the pastel itself so the hue still clearly reads as that
   player's color. (A plain translucent wash over --panel would desaturate
   toward gray on the near-black background, so the ink is precomputed to keep
   the hue.) Labels inside panes get a slightly lifted --dim for contrast. */
.player-card { --dim: #aebad6; }
.player-card.pc0 {
  background: linear-gradient(180deg, rgba(143, 179, 222, 0.14), rgba(143, 179, 222, 0.04)), #213650;
}
.player-card.pc1 {
  background: linear-gradient(180deg, rgba(215, 152, 164, 0.14), rgba(215, 152, 164, 0.04)), #522c23;
}
.player-card.pc2 {
  background: linear-gradient(180deg, rgba(168, 198, 160, 0.14), rgba(168, 198, 160, 0.04)), #284a26;
}
.player-card.pc3 {
  background: linear-gradient(180deg, rgba(217, 196, 145, 0.14), rgba(217, 196, 145, 0.04)), #504426;
}

.player-card.turn {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.22), inset 0 0 0 1px rgba(255, 209, 102, 0.28);
}
/* Pane(s) with agency right now (pending decision owners, else the Phase-1
   turn player): accent border + outer glow + soft inset ring, readable on
   every tinted pane ink. */
.player-card.to-act {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(110, 231, 255, 0.45), 0 0 4px rgba(110, 231, 255, 0.60),
    inset 0 0 0 1px rgba(110, 231, 255, 0.35);
}
.p-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pdot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pdot.p0 { background: var(--p0); }
.pdot.p1 { background: var(--p1); }
.pdot.p2 { background: var(--p2); }
.pdot.p3 { background: var(--p3); }

.p-stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.stat { display: flex; align-items: center; gap: 6px; }
.stat-lbl { font-size: 10.5px; color: var(--dim); letter-spacing: 0.08em; }
.cuberow { display: inline-flex; gap: 3px; }
.cbslot { width: 11px; height: 11px; border-radius: 3px; border: 1px dashed var(--line2); }
.cbslot.used { border-style: solid; background: var(--gold); border-color: var(--gold); }
/* Action budget markers: hollow chevron = action left, filled = spent (§5). */
.acts { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; }
.acts svg { width: 13px; height: 22px; overflow: visible; }
.acts .act-used { color: var(--gold); }
.acts .act-left { color: var(--dim); }
.p-fleet { margin-top: 4px; }
.fleetrow { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
button.scrapbtn {
  padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; line-height: 0;
}
button.scrapbtn .die.mini { width: 22px; height: 22px; border-radius: 5px; }
.p-hand { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cardchip {
  font-size: 11px;
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 1px 7px;
  background: #131f33;
  cursor: help;
}
.cardchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cardchip.gambit { background: #241428; border-color: #6b2d4f; }
.cardchip.spent { color: var(--dim); border-color: var(--line); background: #0e1626; text-decoration: line-through; }
.cardchip.used-active { border-color: var(--purple); color: var(--purple); background: transparent; }

.market-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.market-card {
  flex: 1 1 90px;
  min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  padding: 4px 6px;
}
.market-card .mk-name { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.market-card .mk-kind { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.market-card.gambit { background: #241428; border-color: #6b2d4f; }
.market-card.command { background: #131f33; border-color: #2d4c6b; }
.market-card.pickable { border-color: var(--accent); box-shadow: 0 0 8px rgba(110, 231, 255, 0.35); }

/* ------------------------------------------------------------ who decides */
/* One-line "this block is answered by Player N" strip at the top of every
   decision block (own = accent, foreign FIFO = dim). Color from the seat dot;
   the "Player N" word keeps it non-color-only. */
.who-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.who-row.who-mine { color: var(--accent); }
.who-row.who-dim { color: var(--dim); }
.who-row .who-note { color: inherit; font-weight: 400; }
.who-row .pdot { width: 10px; height: 10px; }
/* Player pane agency chip: "decides" (pending question owner, already caught
   by .to-act) vs "acts" (actions-phase turn player). */
.chip.decide-chip { color: var(--accent); border-color: rgba(110, 231, 255, 0.55); }

/* Banner: the acting/deciding seat gets its own emphasis slot. */
.banner-actor { color: var(--gold); font-weight: 600; }

/* ------------------------------------------------------------ combat + win */

.float-card {
  /* Combat card lives at the top of the right column (off-board, §8): the
     highlighted target spaces must stay visible while combat questions ask. */
  background: #1c1220;
  border: 1px solid #7a3b57;
  border-radius: 14px;
  padding: 12px 16px;
}
.combat-head h3 { margin: 0; color: var(--bad); letter-spacing: 0.06em; }
/* Header row: ⚔ Combat title left, ✕ close right — same line, no overlap. */
.combat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
/* Combatants: two scannable rows. Player color comes from the pdot AND the
   name tint; the literal "Player N" word keeps the label non-color-only. */
.combatants {
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(9, 14, 30, 0.55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.combatant { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.combatant .pc-name { font-size: 14.5px; }
.combatant .pc-name.p0 { color: var(--p0); }
.combatant .pc-name.p1 { color: var(--p1); }
.combatant .pc-name.p2 { color: var(--p2); }
.combatant .pc-name.p3 { color: var(--p3); }
.combatant .pdot { align-self: center; }
.combatant .role-chip {
  margin-left: auto; font-size: 10.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--dim);
}
/* Roll totals: large numbers over uppercase labels; — placeholder until the
   engine rolled both sides (§8.3). */
#combatCard .rolls {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  margin: 10px 0 4px;
}
#combatCard .roll { display: flex; flex-direction: column; align-items: center; gap: 1px; }
#combatCard .roll-lbl {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
#combatCard .roll b { font-size: 26px; line-height: 1.05; color: var(--gold); }
#combatCard .roll-sep { font-size: 11px; letter-spacing: 0.08em; color: var(--dim); }
/* Decision blocks keep the shared .panel-block look; buttons flow and wrap
   inside the card — nothing floats, nothing clips (long §8.2/§8.4 labels). */
#combatCard .panel-block .btn-row button { margin: 0; }
/* §8 resolved-without-decisions summary (one state broadcast); the roll
   totals inlined into the combatant rows keep the card compact. */
#combatCard .combat-result {
  margin: 10px 2px 2px; font-size: 14px; color: var(--text);
}

.overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(3, 5, 12, 0.8);
  display: flex; align-items: center; justify-content: center;
}
.winner-box {
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 30px 44px;
  text-align: center;
}
.winner-box h2 { color: var(--gold); font-size: 30px; margin: 0 0 16px; }

/* ============================================================ responsive */
/* Target: the last ~5 years of phones (>= 360px CSS width); very old
   low-resolution devices are deliberately out of scope. Layout modes:
   - >= 1001px               : desktop two-column (the --cell override near
                               #board and the tooltip rules above)
   - <= 1000px               : stacked — board on top, panels below
   - <= 600px                : phone-portrait compaction on top of stacked
   - landscape & max-height
     520px                   : phone landscape — two columns again (a stacked
                               board would push the panels off-screen)
   --cell keeps the desktop derivation (min of column width and viewport
   height minus chrome, /9); dvh so mobile browser chrome can't overflow it. */

@media (max-width: 1000px) {
  /* Stacked mode scrolls anyway: the board fills the column width and keeps a
     peek of the panels below the fold. */
  #board {
    --cell: clamp(30px,
      min(calc((100cqw - 38px) / 9), calc((100dvh - 200px) / 9)),
      84px);
  }
  #game { padding: 10px 12px 32px; gap: 12px; }
  /* act first: the block that answers the current question sits directly
     under the board (combat card already docks above it in the DOM);
     player/market info follows after */
  #combatCard { order: -2; }
  #sidePanel { order: -1; }
}

@media (max-width: 600px) {
  #game { padding: 8px 10px 28px; gap: 10px; }
  #topbar { gap: 6px 8px; padding: 6px 8px; }
  #topbar button { padding: 5px 8px; font-size: 12px; }
  /* the full match id can't fit beside the buttons: truncate it (share links
     carry the id anyway) and drop the debug dump affordance on phones */
  #matchLabel {
    max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 12px;
  }
  #dumpBtn { display: none; }
  .banner { padding: 6px 10px; font-size: 13px; }
  #turnNotice { top: 48px; padding: 6px 14px; font-size: 12.5px; }
  /* one scrolling legend row beats three wrapped ones under the board */
  .legend {
    flex-wrap: nowrap; overflow-x: auto; gap: 12px;
    width: 100%; align-self: stretch;
    font-size: 11px; padding-bottom: 2px;
  }
  .legend span { flex: none; white-space: nowrap; }
  .player-card, .panel-block { padding: 8px 10px; border-radius: 10px; }
  .panel-block button, .panel-block .die-slot { padding: 8px 12px; } /* taller tap targets */
  button.mini { padding: 4px 8px; }
  .cardchip { padding: 4px 9px; }            /* tooltip host needs a tap area */
  #toasts { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  /* 16px inputs stop iOS Safari from zooming the page on focus */
  input, output { font-size: 16px; }
  #home { padding: 24px 14px 60px; gap: 14px; }
  .logo { font-size: 38px; letter-spacing: 0.25em; }
  .card { padding: 12px 14px; }
  .joincode { font-size: 22px; letter-spacing: 0.15em; }
  .winner-box { padding: 22px 20px; }
  .winner-box h2 { font-size: 22px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  /* Phone landscape: two columns again — height-budgeted board left, compact
     act-first rail right. (This block intentionally overrides the stacked
     rules above; it must stay last.) */
  #game {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    padding: 6px 8px 20px; gap: 10px;
  }
  #board {
    --cell: clamp(24px,
      min(calc((100cqw - 38px) / 9), calc((100dvh - 150px) / 9)),
      56px);
  }
  #combatCard { order: -2; }
  #sidePanel { order: -1; }
  #topbar { gap: 6px 8px; padding: 4px 8px; }
  #topbar button { padding: 4px 8px; font-size: 12px; }
  #matchLabel {
    max-width: 32vw; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 12px;
  }
  #dumpBtn { display: none; }
  .banner { padding: 4px 10px; font-size: 12px; }
  #turnNotice { top: 42px; padding: 5px 12px; font-size: 12px; }
  .legend {
    flex-wrap: nowrap; overflow-x: auto; gap: 10px;
    width: 100%; align-self: stretch;
    font-size: 10.5px; padding-bottom: 2px;
  }
  .legend span { flex: none; white-space: nowrap; }
  .player-card, .panel-block { padding: 7px 9px; border-radius: 10px; }
  .panel-block button, .panel-block .die-slot { padding: 7px 10px; }
  /* the rail hugs the viewport edge here too: tooltips grow inward (left),
     exactly like the >=1001px rule above */
  .game-right [data-tip]::after, .float-card [data-tip]::after {
    --tip-left: auto; --tip-right: 0; --tip-x: 0;
  }
}

/* Responsive hygiene: tooltip bubbles are absolutely positioned and must
   never create a horizontal page scrollbar (clip keeps position: sticky and
   vertical scrolling intact, unlike overflow-x: hidden on body). */
html { overflow-x: clip; }