/* Exo 2 (SIL Open Font License, fonts/OFL.txt), bundled */
@font-face { font-family: "Exo 2"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/exo2.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/exo2-italic.woff2") format("woff2"); }

/* ar.css: Artifact. Builds on the shared start-screen/overlay styles in
   gw.css + oh.css (from Oh Hell). Sizes come from --cw/--ch (hand card)
   and --tw (track tile), set in ar-app.js. */

:root {
  --font: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --cw: 70px; --ch: 105px; --tw: 80px;
  --gold: #ffd84a;
  --sky: #1fa2e6;
  --sky-hi: #6fd3ff;
  --ink: #e9eefc;
  --panel: rgba(6, 10, 24, 0.52);
  --panel-line: rgba(140, 170, 255, 0.25);
  --ui-rgb: 8, 14, 32;
  --ui-accent: #4f8cff;
}

/* ===== Tables ===== */

html:has(body.table-space) { background-color: #000; }
body.table-space { --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
body.table-space .modal-shade .tut-offer-panel, body.table-space #tut-offer .tut-offer-panel { border-color: #4f8cff; }
body.table-green  { background: radial-gradient(ellipse at 50% 46%, transparent 0%, rgba(0,0,0,0.7) 85%), url("baize.jpg") center / cover, #0b3d22; --ui-rgb: 3, 32, 18; --ui-accent: #1fa2e6; }
body.table-walnut { background: radial-gradient(ellipse at 50% 46%, transparent 0%, rgba(0,0,0,0.7) 85%), url("walnut.jpg") center / cover, #2a160c; --ui-rgb: 34, 18, 9; --ui-accent: #c08a4a; }
body.table-marble { background: radial-gradient(ellipse at 50% 46%, transparent 0%, rgba(0,0,0,0.7) 85%), url("table-marble.jpg") center / cover, #1c1c1e; --ui-rgb: 22, 22, 25; --ui-accent: #a8a8b4; }
.seg-tables .sw-space { background: url("img/milkyway.webp") center / 300% !important; }

/* ===== Layout: a table; everything is placed by ar-app.js layout() ===== */
#game {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
}
#opps { position: absolute; inset: 0; pointer-events: none; }
#opps .pseat { pointer-events: auto; }
#board, #sets, #hand, #piles { position: absolute; }
body.overlay-active #game > * { visibility: hidden; }
#board { display: flex; flex-direction: column; gap: var(--gap); }
#board-row { display: flex; justify-content: center; }

/* ===== Track ===== */
#track {
  position: relative;
  height: var(--track-h);
  flex: none;
  display: flex;
  align-items: flex-start;
}
/* The board: one dark, neutral surface inside a double white frame. The
   hidden cards are tucked underneath it, so only their tips show. */
#track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--space-h);
  z-index: 1;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  background: #07080c;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.7), 0 0 0 5px rgba(255, 255, 255, 0.45), 0 8px 24px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Each body's space; neighbours share a thin white wall */
.tile .space {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--space-h);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding-top: 5%;
  padding-bottom: calc(var(--tok) * 0.72 + 4px);
  box-sizing: border-box;
}
.tile + .tile .space { border-left: 1px solid rgba(255, 255, 255, 0.55); }
.tile.probe-here .space { background: radial-gradient(ellipse at 50% 85%, rgba(57, 198, 255, 0.16), transparent 70%); }
.tile .planet-box {
  width: 100%;
  height: var(--pl);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile .planet {
  width: calc(var(--pl) * var(--f));
  height: calc(var(--pl) * var(--f));
  object-fit: contain;
  pointer-events: none;
}
/* Saturn's picture includes its rings: the globe is about 44% of its width */
.tile.saturn .space { z-index: 3; }
.tile.saturn .planet { width: calc(var(--pl) * var(--f) / 0.55); height: calc(var(--pl) * var(--f) / 0.55); max-width: none; flex: none; transform: rotate(-22deg); }
.tile .tile-name {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  font-size: var(--tile-font);
  line-height: 1.1;
  white-space: nowrap;
  color: #cfd8f6;
}
.tile .tile-name .sym { color: var(--gold); font-family: var(--font); font-weight: 600; font-size: 1.15em; }
.tile .tile-num {
  font: 600 calc(var(--tile-font) * 2) var(--font);
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}
.tile.probe-here .tile-num { color: #7fe3ff; }
/* The hidden card, tucked under the board: only its tip shows below */
.tile .slot {
  position: relative;
  z-index: 0;
  flex: none;
  width: var(--sw);
  height: calc(var(--sw) * 1.4);
  margin-top: calc(var(--sw) * 1.4 * -1 + var(--track-h) - var(--space-h));
  border-radius: 4px;
}
.tile .slot.empty { visibility: hidden; }
.tile .slot .seen {
  position: absolute;
  left: 50%; bottom: 6%;
  transform: translateX(-50%);
  font-size: calc(var(--sw) * 0.36);
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 4px #000, 0 0 2px #000;
  font-family: var(--font);
  font-weight: 600;
}
.tile .slot .seen.art { color: var(--gold); text-shadow: 0 0 8px var(--gold), 0 0 2px #000; }
.tile.clickable { cursor: pointer; }
.tile.clickable:hover .space { border-color: var(--gold); }
.tile.scan-target .slot { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(255, 216, 74, 0.6); }
.tile.scan-target .space { border-color: rgba(255, 216, 74, 0.7); }

/* The probe: a playing piece - a white-rimmed token with New Horizons on it */
#probe {
  position: absolute;
  top: calc(var(--space-h) - var(--tok) - 5px);
  width: var(--tok);
  height: var(--tok);
  z-index: 6;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #fff;
  background: radial-gradient(circle at 40% 35%, #2a3550 0%, #0b0f1a 70%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.85), 0 0 10px rgba(127, 227, 255, 0.55), inset 0 0 6px rgba(127, 227, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: left 0.6s cubic-bezier(.5, 0, .3, 1);
}
#probe img { width: 92%; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); transition: transform 0.3s; }
#probe.going-in img { transform: scaleX(-1); }
.tile.probe-here .tile-name .nm { color: #7fe3ff; font-weight: 600; }
.probe-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 6;
}
.probe-arrows button {
  pointer-events: auto;
  margin: 0;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  background: #39c6ff;
  color: #021018;
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 0 12px #39c6ff;
}

/* ===== Opponents: a name over a fan of card backs ===== */
.pseat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
}
.at-left { justify-content: center; }
.seat-head .nm { padding: 0.05em 0.6em; border-radius: 999px; background: rgba(0, 0, 0, 0.5); }
.active > .seat-head .nm { background: rgba(57, 198, 255, 0.3); box-shadow: 0 0 12px rgba(57, 198, 255, 0.85); }
.seat-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--seat-font);
  white-space: nowrap;
}
.seat-head .nm { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.seat-head .score { color: var(--gold); font-weight: 600; }
.seat-head .cards { margin-left: auto; opacity: 0.8; display: flex; align-items: center; gap: 0.3em; }
.seat-head .mini-back { width: 0.9em; height: 1.3em; border-radius: 2px; }
.seat-head .doing { color: #7fe3ff; font-style: italic; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
/* ===== Cards on the table ===== */
.fan { position: relative; flex: none; width: calc(var(--fch) * 1.5); height: var(--fch); }
.fan .acard {
  position: absolute;
  left: 50%; bottom: 0;
  width: calc(var(--fch) / 1.5); height: var(--fch);
  transform-origin: 50% 110%;
  transform: translateX(calc(-50% + var(--x) * var(--fch) / 1.5)) rotate(var(--a));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.fan .count { position: absolute; right: -6px; top: -4px; z-index: 3; }

/* ===== The sets panel (right) ===== */
#sets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  box-sizing: border-box;
  scrollbar-width: thin;
}
.set-block { display: flex; flex-direction: column; gap: 4px; border-radius: 10px; padding: 3px 4px 5px; }
.set-block .seat-head { font-size: calc(var(--seat-font) * 0.9); }
#me-panel.drop-target { cursor: pointer; box-shadow: inset 0 0 0 2px #ffd84a, 0 0 14px rgba(255, 216, 74, 0.5); }
/* Sets: little overlapping stacks */
.melds {
  --ms: 1; --ov: 0.6;
  --mch: var(--smh); --mcw: calc(var(--smh) / 1.5);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 8px;
  min-height: calc(var(--smh) * 0.8);
}
.meld { flex: none; display: flex; align-items: flex-end; border-radius: 6px; }
.mc { flex: none; position: relative; width: calc(var(--mcw) * var(--ms)); height: calc(var(--mch) * var(--ms)); }
.mc + .mc { margin-left: calc(var(--mcw) * var(--ms) * -1 * var(--ov)); }
.mc .acard { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.55); }
/* Close-pass cards: upright, with a cyan glow and a ×2 badge */
.mc.close .acard { border-color: #7fe3ff; box-shadow: 0 0 0 1px #7fe3ff, 0 0 7px rgba(57, 198, 255, 0.85); }
/* one badge per stack: on its top close-pass card */
.mc.close:last-child::after {
  content: "×2";
  position: absolute;
  right: -3px; top: -5px;
  z-index: 2;
  padding: 0 3px;
  border-radius: 4px;
  background: #39c6ff;
  color: #021018;
  font: 600 9px/1.35 var(--font);
}
.meld.new { animation: meldPop 0.8s ease-out; }
@keyframes meldPop { 0% { transform: scale(1.25); filter: drop-shadow(0 0 10px #7fe3ff); } 100% { transform: scale(1); } }
.meld.target { cursor: pointer; filter: drop-shadow(0 0 7px #ffd84a); animation: targetPulse 1s ease-in-out infinite; }
@keyframes targetPulse { 50% { filter: drop-shadow(0 0 2px #ffd84a); } }
.empty-note { align-self: center; opacity: 0.5; font-size: var(--chip-font); }

/* ===== Board row: deck, discard, the turn prompt ===== */
#piles { display: flex; gap: var(--pad); align-items: flex-start; z-index: 4; }
.pile {
  position: relative;
  width: var(--pw); height: calc(var(--pw) * 1.5);
  border-radius: 7px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
}
.pile .acard { position: absolute; inset: 0; width: 100%; height: 100%; }
.pile-label {
  position: absolute;
  left: 0; right: 0; bottom: -1.3em;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pile .count { position: absolute; right: -6px; top: -8px; z-index: 3; }
.pile.can-draw { cursor: pointer; }
.pile.can-draw .acard { box-shadow: 0 0 0 3px #7fe3ff, 0 0 18px rgba(57, 198, 255, 0.7); }
.count {
  min-width: 1.5em;
  padding: 0.05em 0.4em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
/* The action dock, bottom right */
#actions {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
}
body.overlay-active #actions { visibility: hidden; }
#status { font-size: var(--status-font); line-height: 1.3; color: #dfe6ff; }
#status b { color: var(--gold); }
#status .warn { color: #ffb0a0; font-weight: 600; }
#action-buttons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#action-buttons button {
  margin: 0;
  padding: 0.45em 0.9em;
  min-height: 36px;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--btn-font);
  background: #2f7bff;
  color: #fff;
}
#action-buttons button.go { background: #1fa2e6; color: #021408; }
#action-buttons button.mc { background: #d98c1f; color: #1a0e00; }
#action-buttons button.quiet { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); }
#action-buttons button:disabled { opacity: 0.35; cursor: default; }

/* ===== Your hand ===== */
#hand .acard {
  position: absolute;
  bottom: calc(var(--pad) + var(--ch) * 0.12);
  --lift: 0px;
  transform-origin: 50% 140%;
  transform: translateY(var(--dy, 0px)) rotate(var(--rot, 0deg)) translateY(var(--lift));
  transition: transform 0.14s ease, left 0.25s ease, box-shadow 0.12s ease;
  cursor: pointer;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.6);
}
#hand .acard:hover { --lift: -8%; }
#hand .acard.sel { --lift: -24%; box-shadow: 0 0 0 3px var(--gold), 0 10px 18px rgba(0, 0, 0, 0.7); }
#hand .acard.playable::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: -7px;
  height: 4px;
  border-radius: 2px;
  background: #7fe3ff;
  box-shadow: 0 0 8px #39c6ff;
}
/* A card you've just drawn glows yellow, then slowly fades (FRESH_MS in ar-app.js) */
#hand .acard.fresh { outline: 3px solid transparent; outline-offset: 0; animation: fresh 6s ease-in forwards; }
@keyframes fresh {
  0%, 30% { outline-color: rgba(255, 216, 74, 1); filter: drop-shadow(0 0 10px rgba(255, 216, 74, 0.95)); }
  100% { outline-color: rgba(255, 216, 74, 0); filter: drop-shadow(0 0 0 rgba(255, 216, 74, 0)); }
}

/* ===== Cards ===== */
.acard {
  width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * 0.08);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  container-type: size;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 0 0 2px #000, inset 0 0 0 3px rgba(31, 162, 230, 0.35);
  color: #fff;
}
.acard .art {
  position: absolute;
  left: 50%; top: 52%;
  width: calc(78cqw * var(--f, 1)); height: calc(78cqw * var(--f, 1));
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
}
/* Saturn: tilted, so the rings fit across the card's diagonal and the
   globe can be bigger without spilling over the edges. */
.acard.saturn .art { width: 104cqw; height: 104cqw; transform: translate(-50%, -50%) rotate(-28deg); }
body.faces-large .acard.saturn .art { width: 98cqw; height: 98cqw; left: 54%; top: 64%; }
.acard .idx {
  position: absolute;
  left: 5cqw; top: 3cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
  pointer-events: none;
}
.acard .idx .num { font: 600 24cqw var(--font); color: #fff; }
.acard .idx .sym { font-size: 24cqw; color: var(--gold); font-family: var(--font); }
.acard .idx.br { left: auto; top: auto; right: 5cqw; bottom: 3cqw; transform: rotate(180deg); }
.acard .cname {
  position: absolute;
  left: 0; right: 0; bottom: 4cqw;
  text-align: center;
  font-size: 11cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 230, 255, 0.8);
  pointer-events: none;
}
/* Mission Control */
.acard.mission { background: #1a0e04; border-color: rgba(255, 190, 90, 0.6); }
.acard.mission .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.acard.mission .mc-title {
  position: absolute;
  left: 0; right: 0; top: 6cqw;
  text-align: center;
  font: 600 11cqw var(--font);
  letter-spacing: 0.05em;
  color: #ffdf9a;
  text-shadow: 0 1px 4px #000, 0 0 2px #000;
  line-height: 1.05;
}
/* Artifacts */
.acard.artifact { background: radial-gradient(circle at 50% 48%, #3a2a00 0%, #120c00 60%, #050300 100%); border-color: var(--gold); }
.acard.artifact .glyph {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: 64cqw; height: 64cqw;
  border-radius: 50%;
  border: 2cqw solid var(--gold);
  box-shadow: 0 0 6cqw var(--gold), inset 0 0 6cqw rgba(255, 216, 74, 0.6);
  display: flex; align-items: center; justify-content: center;
  font: 600 40cqw var(--font);
  color: var(--gold);
  text-shadow: 0 0 6cqw var(--gold);
}
.acard.artifact .cname { color: var(--gold); }
/* Backs: the Artifact card back */
.acard.back, .mini-back, .slot.hidden {
  background: url("img/cardback.webp") center / 100% 100% no-repeat;
  border: none;
}

/* Large-face mode for small cards: bigger index, no name */
body.faces-large .acard .cname { display: none; }
body.faces-large .acard .idx .num, body.faces-large .acard .idx .sym { font-size: 32cqw; }
body.faces-large .acard .idx.br { display: none; }
body.faces-large .acard .art { top: 62%; left: 58%; width: calc(70cqw * var(--f, 1)); height: calc(70cqw * var(--f, 1)); }

/* Flying cards */
.flying { position: fixed !important; z-index: 9000; pointer-events: none; margin: 0; }

/* ===== Popups ===== */
#popup {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
.popup-panel {
  max-width: min(560px, 90vw);
  max-height: 86vh;
  overflow: auto;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(var(--ui-rgb), 0.97);
  border: 2px solid #7fe3ff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
  color: var(--ink);
  text-align: center;
  font-size: var(--status-font);
}
.popup-body .title { font-size: 1.25em; font-weight: 600; color: var(--gold); margin-bottom: 0.4em; }
.popup-body .acard { display: inline-block; margin: 8px 6px; vertical-align: top; }
.popup-body .pick-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.popup-body .pick-row .acard { margin: 0; cursor: pointer; }
.popup-body .pick-row .acard:hover { box-shadow: 0 0 0 3px var(--gold); }
.popup-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.popup-buttons button { margin: 0; padding: 0.5em 1.2em; min-height: 40px; border-radius: 9px; font-weight: 600; font-size: 1em; background: #2f7bff; color: #fff; }
.popup-buttons button.go { background: #1fa2e6; color: #021408; }
.popup-buttons button.quiet { background: transparent; border: 1px solid rgba(255,255,255,0.4); }

/* Toast for other players' actions */
.toast {
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translateX(-50%);
  z-index: 9500;
  padding: 0.45em 1em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid #7fe3ff;
  color: #fff;
  font-weight: 600;
  font-size: var(--status-font);
  white-space: nowrap;
  pointer-events: none;
  animation: toastIn 0.25s ease-out;
}
.toast.gold { border-color: var(--gold); color: var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -6px); } }

/* Hand over */
.hand-over-panel { min-width: min(520px, 90vw); }
#ho-table table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
#ho-table th, #ho-table td { padding: 0.3em 0.5em; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: center; }
#ho-table th { color: rgba(255,255,255,0.65); font-weight: 600; font-size: 0.9em; }
#ho-table td.total { color: var(--gold); font-weight: 600; }
#ho-table td.zeroed { text-decoration: line-through; opacity: 0.6; }

/* Titles */
.ar-title {
  font: 600 1em var(--font);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: #fff;
  text-shadow: 0 0 18px rgba(57, 198, 255, 0.8), 0 0 2px #7fe3ff;
  text-align: center;
}
.splash-ar-title { font-size: clamp(44px, 11vw, 132px); }
.start-ar-title { font-size: clamp(24px, 3.2vw, 44px); letter-spacing: 0.22em; text-indent: 0.22em; }
.ar-aka { text-align: center; color: rgba(220, 230, 255, 0.75); font-style: italic; margin-top: 0.4em; }
#splash { background: radial-gradient(ellipse at 50% 45%, rgba(20, 40, 90, 0.55) 0%, rgba(0, 0, 0, 0.95) 70%), #02040a; }

/* Coach (tutorial) placement */
#coach { width: min(640px, 62vw); }
#tut-spot { border-color: #7fe3ff; box-shadow: 0 0 18px rgba(57, 198, 255, 0.6); }

/* Phones */
@media (orientation: landscape) and (max-height: 500px) {
  #action-buttons button { min-height: 34px; padding: 0.3em 0.7em; }
  .popup-panel { padding: 10px 14px; }
  #coach { width: min(560px, 62vw); font-size: 14px; }
}

/* Opponents sit opposite you, so their fans open towards the table */
#opps .fan { transform: rotate(180deg); }
#opps .fan .count { transform: rotate(180deg); right: auto; left: -6px; top: auto; bottom: -4px; }

/* ===== Space backgrounds (auditioning): darker in the middle where you play ===== */
body.table-space { background: radial-gradient(ellipse at 42% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 100%), url("img/milkyway.webp") center / cover no-repeat, #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-space { background: url("img/milkyway.webp") center / cover !important; }
body.table-core { background: radial-gradient(ellipse at 42% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 100%), url("img/bg-milkyway-core.webp") center / cover no-repeat, #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-core { background: url("img/bg-milkyway-core.webp") center / cover !important; }
body.table-cliffs { background: radial-gradient(ellipse at 42% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 100%), url("img/bg-cliffs.webp") center / cover no-repeat, #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-cliffs { background: url("img/bg-cliffs.webp") center / cover !important; }
body.table-pillars { background: radial-gradient(ellipse at 42% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 100%), url("img/bg-pillars.webp") center / cover no-repeat, #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-pillars { background: url("img/bg-pillars.webp") center / cover !important; }
body.table-orion { background: radial-gradient(ellipse at 42% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 100%), url("img/bg-orion.webp") center / cover no-repeat, #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-orion { background: url("img/bg-orion.webp") center / cover !important; }
body.table-tarantula { background: radial-gradient(ellipse at 42% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 100%), url("img/bg-tarantula.webp") center / cover no-repeat, #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-tarantula { background: url("img/bg-tarantula.webp") center / cover !important; }
body.table-westerlund { background: radial-gradient(ellipse at 42% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 100%), url("img/bg-westerlund.webp") center / cover no-repeat, #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-westerlund { background: url("img/bg-westerlund.webp") center / cover !important; }
body.table-deepfield { background: radial-gradient(ellipse at 42% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.12) 100%), url("img/bg-deepfield.webp") center / cover no-repeat, #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-deepfield { background: url("img/bg-deepfield.webp") center / cover !important; }
html:has(body[class*="table-"]) { background-color: #000; }
#bg-credit {
  position: fixed;
  right: 8px; bottom: 4px;
  z-index: 3;
  max-width: 34vw;
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
#bg-credit b { color: rgba(255, 255, 255, 0.7); font-weight: 600; }
body.overlay-active #bg-credit { display: none; }


/* ======================================================================
   Polish
   ====================================================================== */

/* Card faces: black, with a thin blue inner line (like the back) */
.acard .idx .num { color: #fff; text-shadow: 0 0 6px rgba(111, 211, 255, 0.35); }
.acard .cname { color: rgba(255, 255, 255, 0.72); letter-spacing: 0.12em; }
.acard.mission { border-color: rgba(255, 190, 90, 0.55); }

/* ---- The board ---- */
#track::before {
  background:
    radial-gradient(ellipse 22% 140% at 0% 50%, rgba(255, 196, 80, 0.30), rgba(255, 140, 40, 0.10) 45%, transparent 75%),
    linear-gradient(180deg, #0c0f17 0%, #050608 55%, #07090e 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 0 0 3px #050608,
    inset 0 0 0 4px rgba(255, 216, 74, 0.55),
    0 0 0 4px rgba(0, 0, 0, 0.75),
    0 0 0 5px rgba(255, 255, 255, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.8);
}
/* The orbit: a fine line through every planet */
.orbit-line { display: none; }
.tile .planet-box { position: relative; }
.tile .planet-box::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(150, 200, 255, 0.28);
}
.tile:first-child .planet-box::before { left: 50%; background: linear-gradient(90deg, rgba(255, 200, 90, 0.7), rgba(150, 200, 255, 0.28)); }
.tile:last-child .planet-box::before { right: 50%; }
.tile .planet { position: relative; }
.unused-orbit {
  position: absolute;
  z-index: 1;
  left: 1.5%; right: 1.5%;
  top: calc(var(--space-h) * 0.05 + var(--tile-font) * 1.5 + var(--pl) / 2);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 200, 90, 0.6), rgba(111, 211, 255, 0.35) 35%, rgba(111, 211, 255, 0.18));
  pointer-events: none;
}
.tile .space { z-index: 2; }
.tile .planet { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.12)); }
.tile .tile-name { text-transform: uppercase; letter-spacing: 0.14em; font-size: calc(var(--tile-font) * 0.85); color: rgba(220, 230, 255, 0.75); }
.tile .tile-num { color: var(--gold); text-shadow: 0 0 10px rgba(255, 216, 74, 0.25); }
.tile.probe-here .tile-num { color: var(--sky-hi); text-shadow: 0 0 10px rgba(111, 211, 255, 0.6); }
.tile.probe-here .tile-name .nm { color: var(--sky-hi); }
.tile.probe-here .space { background: radial-gradient(ellipse at 50% 80%, rgba(31, 162, 230, 0.22), transparent 70%); }
#probe { border-color: var(--sky-hi); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9), 0 0 14px rgba(31, 162, 230, 0.7), inset 0 0 8px rgba(111, 211, 255, 0.4); }

/* ---- Buttons ---- */
#action-buttons button, .popup-buttons button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, #2aa8ea, #1679b8);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.08s, filter 0.12s;
}
#action-buttons button:hover:not(:disabled), .popup-buttons button:hover:not(:disabled) { filter: brightness(1.12); }
#action-buttons button:active:not(:disabled), .popup-buttons button:active:not(:disabled) { transform: translateY(1px); }
#action-buttons button.go, .popup-buttons button.go { background: linear-gradient(180deg, #ffe066, #e8b923); color: #1a1200; }
#action-buttons button.mc { background: linear-gradient(180deg, #f0a23a, #c06f12); color: #1a0e00; }
#action-buttons button.quiet, .popup-buttons button.quiet { background: rgba(0, 0, 0, 0.45); }
#status { text-shadow: 0 1px 3px #000; }

/* ---- Names, panels, piles ---- */
.seat-head .nm { border: 1px solid rgba(255, 255, 255, 0.12); }
.active > .seat-head .nm { background: rgba(31, 162, 230, 0.35); border-color: var(--sky-hi); box-shadow: 0 0 12px rgba(31, 162, 230, 0.8); }
.set-block { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 6px; }
.set-block:first-child { border-top: 0; }
.pile .acard { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.8); }
.pile.can-draw .acard { box-shadow: 0 0 0 2px var(--sky-hi), 0 0 16px rgba(31, 162, 230, 0.8); }
.pile-label { letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.6); }
.count { background: #05070c; border-color: var(--sky); }
.popup-panel, .hand-over-panel { border-color: var(--sky) !important; background: rgba(4, 6, 12, 0.96) !important; }
#hand .acard.sel { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 216, 74, 0.6), 0 10px 18px rgba(0, 0, 0, 0.7); }
#hand .acard.playable::before { background: var(--sky-hi); box-shadow: 0 0 8px var(--sky); }
#bg-credit { text-shadow: 0 1px 2px #000; }

/* ---- Type ---- */
body, button, input, select, textarea { font-family: var(--font); }
b, strong { font-weight: 600; }
.acard .idx .num { font-weight: 600; font-size: 26cqw; }
.tile .tile-num { font-weight: 300; font-size: calc(var(--tile-font) * 2.3); }
.tile .tile-name { font-weight: 400; }
.ar-title { font-weight: 300; }
.seat-head .nm { font-weight: 600; }

/* Start screen in the card back's colours */
#btn-play { background: linear-gradient(180deg, #ffe066, #e8b923) !important; color: #1a1200 !important; border: none !important; }
#btn-tutorial { color: var(--sky-hi) !important; border-color: var(--sky) !important; }
#start-panel, .tut-offer-panel, #coach { border-color: var(--sky) !important; }
.tab-btn.active { color: #fff; }

#discard-pile.can-discard { cursor: pointer; }
#discard-pile.can-discard .acard, #discard-pile.can-discard { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 216, 74, 0.6); border-radius: 7px; }

/* Corner buttons */
#controls .icon-btn { display: inline-flex; align-items: center; justify-content: center; color: #fff; border-color: var(--sky); }
#controls .icon-btn svg { display: block; }
#controls .icon-btn:hover { background: rgba(31, 162, 230, 0.25); }

/* Corner buttons: top level, above the start screen and every popup */
#controls { position: fixed; z-index: 25000; }

/* ---- Scores ---- */
.seat-head .score { color: #fff; font-weight: 400; }
.seat-head .score b { color: var(--gold); font-weight: 600; }
.seat-head .hand-pts { color: var(--sky-hi); font-size: 0.82em; white-space: nowrap; }

/* ---- What an opponent just did: a bubble under their hand ---- */
.pseat { overflow: visible; }
.doing-bubble {
  position: absolute;
  left: 50%; top: calc(100% - 6px);
  transform: translateX(-50%);
  z-index: 7;
  max-width: 120%;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(4, 8, 18, 0.92);
  border: 1px solid var(--sky);
  color: #dff3ff;
  font-size: calc(var(--seat-font) * 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: toastIn 0.2s ease-out;
}
.doing-bubble::before {
  content: "";
  position: absolute;
  left: 50%; top: -6px;
  width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(4, 8, 18, 0.92);
  border-left: 1px solid var(--sky);
  border-top: 1px solid var(--sky);
}

/* ---- A hidden card lifted off the board ---- */
.pk { position: fixed; z-index: 9600; perspective: 900px; pointer-events: none; }
.pk-in { position: relative; width: 100%; height: 100%; transition: transform 0.45s ease; transform-style: preserve-3d; }
.pk.flipped .pk-in { transform: rotateY(180deg); }
.pk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pk-front { transform: rotateY(180deg); }
.pk-face .acard { width: 100%; height: 100%; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.85); }
.pk.glow .pk-front .acard { box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgba(255, 216, 74, 0.9), 0 0 60px rgba(255, 216, 74, 0.45); }
.pk-caption {
  position: absolute;
  left: 50%; top: 104%;
  transform: translateX(-50%) scale(0.6);
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 15px;
  animation: toastIn 0.3s ease-out;
}
.peek-ui {
  position: fixed;
  z-index: 9700;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(4, 6, 12, 0.95);
  border: 1px solid var(--sky);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  color: var(--ink);
  font-size: var(--status-font);
  line-height: 1.35;
  animation: toastIn 0.2s ease-out;
}
.peek-ui b { color: var(--gold); }
.peek-buttons { display: flex; gap: 8px; margin-top: 10px; }
.peek-buttons button {
  margin: 0;
  padding: 0.45em 1.1em;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, #2aa8ea, #1679b8);
  color: #fff;
  font-weight: 600;
}
.peek-buttons button.go { background: linear-gradient(180deg, #ffe066, #e8b923); color: #1a1200; }
.peek-buttons button.quiet { background: rgba(0, 0, 0, 0.45); }
.peek-buttons button:disabled { opacity: 0.35; }

/* Logo */
.splash-logo-img { width: min(86vw, 150vh); max-height: 52vh; object-fit: contain; filter: drop-shadow(0 0 24px rgba(31, 162, 230, 0.35)); }
.start-logo-img { display: block; width: 100%; max-width: 34em; max-height: 34vh; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 0 18px rgba(31, 162, 230, 0.3)); }
#start-panel:not(.instructions-open):not(.results-open) { width: min(96vw, 1180px); max-width: 96vw; }
#start-panel:not(.instructions-open):not(.results-open) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

/* ======================================================================
   Board style: Orbit - planets on plinths along an arc, no frame
   ====================================================================== */
body.board-orbit #track::before { display: none; }
body.board-orbit .tile { padding: 0 3px; transition: transform 0.3s; }
body.board-orbit .tile .space {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 38%, rgba(30, 50, 90, 0.55), rgba(4, 6, 12, 0.9) 70%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.board-orbit .tile.probe-here .space { border-color: var(--sky-hi) !important; box-shadow: 0 0 16px rgba(31, 162, 230, 0.55), inset 0 0 18px rgba(31, 162, 230, 0.25); }
body.board-orbit .tile .planet-box::before { display: none; }
body.board-orbit .tile:first-child .space { background: radial-gradient(ellipse 90% 70% at 0% 50%, rgba(255, 190, 80, 0.35), transparent 70%), radial-gradient(ellipse at 50% 38%, rgba(30, 50, 90, 0.55), rgba(4, 6, 12, 0.9) 70%); }
.orbit-svg { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
body.board-orbit .tile .space { z-index: 2; }
body.board-orbit .tile .planet { z-index: 4; }
#probe { transition: left 0.6s cubic-bezier(.5, 0, .3, 1), top 0.6s cubic-bezier(.5, 0, .3, 1); }

/* ---- Hint ---- */
#action-buttons button.hint { color: var(--sky-hi); }
.pile.hint-mark .acard { box-shadow: 0 0 0 2px var(--sky-hi), 0 0 20px rgba(111, 211, 255, 0.9) !important; animation: hintPulse 0.9s ease-in-out infinite; }

/* ======================================================================
   End of a hand / final results
   ====================================================================== */
#hand-over .hand-over-panel { width: min(760px, 94vw); padding: 22px 26px 20px; text-align: left; }
#ho-title { font-size: 1.7em; font-weight: 600; color: #fff; text-align: center; }
.ho-kicker { display: block; font-size: 0.45em; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sky-hi); font-weight: 400; margin-bottom: 4px; }
#ho-sub { text-align: center; color: rgba(255, 255, 255, 0.75); margin: 6px 0 16px; }
#ho-sub b { color: var(--gold); }
.ho-rows { display: flex; flex-direction: column; gap: 8px; }
.ho-row {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr) 7.5em 9em;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ho-row.me { border-color: rgba(111, 211, 255, 0.35); }
.ho-row.top { background: rgba(255, 216, 74, 0.08); border-color: rgba(255, 216, 74, 0.5); }
.ho-name { font-weight: 600; color: #fff; display: flex; flex-direction: column; }
.ho-tag { font-size: 0.72em; font-weight: 400; color: var(--sky-hi); }
.ho-haul { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.haul { display: inline-flex; align-items: center; gap: 2px; font-size: 0.9em; color: #dfe6ff; }
.haul img { width: 1.6em; height: 1.6em; object-fit: contain; }
.haul i { font-style: normal; font-size: 0.75em; color: var(--sky-hi); margin-left: 1px; }
.haul.art { width: 1.6em; height: 1.6em; justify-content: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(255, 216, 74, 0.5); }
.haul.none { opacity: 0.45; font-style: italic; }
.ho-pts { font-size: 1.25em; font-weight: 600; color: var(--gold); display: flex; flex-direction: column; }
.ho-pts small { font-size: 0.6em; font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.ho-pts s { color: rgba(255, 255, 255, 0.4); font-weight: 400; }
.ho-total b { font-size: 1.35em; color: #fff; }
.ho-bar { position: relative; height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ho-bar span { position: absolute; top: 0; bottom: 0; }
.ho-bar .old { left: 0; background: rgba(111, 211, 255, 0.45); }
.ho-bar .new { background: var(--gold); }
.ho-target { margin-top: 10px; text-align: center; font-size: 0.85em; color: rgba(255, 255, 255, 0.5); }
#hand-over .tut-offer-buttons { margin-top: 16px; justify-content: center; }
#btn-ho-next { background: linear-gradient(180deg, #ffe066, #e8b923) !important; color: #1a1200 !important; border: none; font-weight: 600; padding: 0.6em 2em; border-radius: 10px; }
/* final results */
#hand-over.final #ho-title { font-size: 2.2em; color: var(--gold); text-shadow: 0 0 20px rgba(255, 216, 74, 0.5); }
.final-rows .ho-row { grid-template-columns: 3em 9em minmax(0, 1fr) 9em; }
.ho-place { font-size: 1.1em; font-weight: 600; color: var(--sky-hi); }
.ho-row.top .ho-place { color: var(--gold); }
.ho-stats { color: rgba(255, 255, 255, 0.65); font-size: 0.9em; }

/* Artifact glyph: SVG text, centred in its ring */
.acard.artifact .glyph svg { width: 100%; height: 100%; overflow: visible; }
.acard.artifact .glyph text { fill: var(--gold); font: 400 58px var(--font); filter: drop-shadow(0 0 4px rgba(255, 216, 74, 0.8)); }
/* Orbit plinths are solid, so the hidden cards stay tucked out of sight */
body.board-orbit .tile .space { background: radial-gradient(ellipse at 50% 38%, #142038, #05070d 70%) !important; }
body.board-orbit .tile:first-child .space { background: radial-gradient(ellipse 90% 70% at 0% 50%, rgba(255, 190, 80, 0.35), transparent 70%), radial-gradient(ellipse at 50% 38%, #142038, #05070d 70%) !important; }

/* Tutorial highlight boxes */
.tut-spot-box {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  border: 3px solid #7fe3ff;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(57, 198, 255, 0.6);
  animation: tutPulse 1.1s ease-in-out infinite;
}

/* Generated starfield */
#starfield { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
#game { z-index: 1; }
body.table-stars { background: #000; --ui-rgb: 8, 14, 32; --ui-accent: #4f8cff; }
.seg-tables .sw-stars { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 25%, #cfe0ff, transparent), radial-gradient(1px 1px at 40% 55%, #fff, transparent), #020309 !important; }

/* Artifact cards: the symbol large in the centre, glowing */
.acard.artifact .art-sym {
  position: absolute;
  left: 50%; top: 45%;
  width: 94cqw; height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 2.5cqw rgba(255, 216, 74, 0.95)) drop-shadow(0 0 8cqw rgba(255, 200, 60, 0.55));
  animation: artGlow 2.4s ease-in-out infinite;
}
@keyframes artGlow { 50% { filter: drop-shadow(0 0 3.5cqw rgba(255, 228, 110, 1)) drop-shadow(0 0 12cqw rgba(255, 200, 60, 0.75)); } }
.acard.artifact { background: radial-gradient(circle at 50% 45%, #2a1f00 0%, #0d0900 55%, #000 100%); }
.acard.artifact .cname { bottom: 5cqw; }
.acard.artifact .cname { white-space: nowrap; font-size: 9.5cqw; letter-spacing: 0.08em; }

/* Logo heading the right-hand column */
#side-logo {
  position: absolute;
  z-index: 2;
  object-fit: contain;
  pointer-events: none;
  padding-bottom: 8px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  filter: drop-shadow(0 0 10px rgba(31, 162, 230, 0.3));
}
body.overlay-active #side-logo { visibility: hidden; }

/* Hint: by the corner controls, at the left of the right-hand column */
#btn-hint-top {
  position: fixed;
  z-index: 25000;
  margin: 0;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid var(--sky);
  background: rgba(0, 0, 0, 0.5);
  color: var(--sky-hi);
  font: 600 15px var(--font);
}
#btn-hint-top:hover:not(:disabled) { background: rgba(31, 162, 230, 0.25); }
#btn-hint-top:disabled { opacity: 0.35; cursor: default; }
body.overlay-active #btn-hint-top { display: none !important; }

/* Credits */
.credits-panel { width: min(640px, 92vw); text-align: left !important; }
.credits-panel .tut-offer-title { text-align: center; color: var(--gold); }
.credits-body { max-height: 62vh; overflow-y: auto; padding-right: 6px; font-size: 0.95em; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.credits-body h4 { margin: 14px 0 4px; color: var(--sky-hi); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8em; }
.credits-body h4:first-child { margin-top: 4px; }
.credits-body p { margin: 0 0 6px; }
.credits-body b { color: #fff; }
.credits-body a { color: var(--sky-hi); }
#credits { z-index: 21000; }
#credits .tut-offer-buttons { justify-content: center; margin-top: 12px; }
#btn-credits-close { background: linear-gradient(180deg, #ffe066, #e8b923); color: #1a1200; border: none; padding: 0.5em 2em; border-radius: 9px; font-weight: 600; }
.credits-body { scrollbar-width: thin; scrollbar-color: rgba(31,162,230,0.6) transparent; }
.credits-body::-webkit-scrollbar { width: 6px; }
.credits-body::-webkit-scrollbar-thumb { background: rgba(31,162,230,0.6); border-radius: 3px; }
.credits-body::-webkit-scrollbar-track { background: transparent; }

/* The probe token (BugVictim art): a round piece, no extra rim */
#probe {
  border: none !important;
  background: radial-gradient(circle, #05080f 0%, #05080f 62%, transparent 64%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.85), 0 0 14px rgba(31, 162, 230, 0.55) !important;
  transform: scale(1.05);
}
#probe img { width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 0 3px rgba(111, 211, 255, 0.6)); }
#probe.going-in img { transform: none; }

/* Orbit plinths: pure black */
body.board-orbit .tile .space, body.board-orbit .tile:first-child .space { background: #000 !important; }
body.board-orbit .tile.probe-here .space { background: #000 !important; }

/* ---- Sets panel: a points total under each stack ---- */
.melds { row-gap: 18px !important; padding-bottom: 14px; }
.meld { position: relative; }
.meld[data-pts]::after {
  content: attr(data-pts);
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

/* ---- Music button ---- */
#controls .icon-btn.muted { opacity: 0.55; }

/* ---- Stats ---- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.stat b { font-size: 1.6em; font-weight: 600; color: var(--gold); }
.stat span { font-size: 0.8em; color: rgba(255, 255, 255, 0.65); text-align: center; }
.stat-wide { grid-column: 1 / -1; display: flex; justify-content: center; gap: 24px; color: rgba(255, 255, 255, 0.75); font-size: 0.9em; }
.stat-wide b { color: var(--gold); }
#stats { z-index: 21000; }
#stats .tut-offer-buttons { justify-content: center; gap: 12px; margin-top: 14px; }
#btn-stats-close { background: linear-gradient(180deg, #ffe066, #e8b923); color: #1a1200; border: none; padding: 0.5em 2em; border-radius: 9px; font-weight: 600; }
#btn-stats-reset { background: rgba(0, 0, 0, 0.4); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.5em 1.4em; border-radius: 9px; }

/* ---- Game log (bottom of the right column) ---- */
#game-log { position: absolute; z-index: 2; display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 6px; box-sizing: border-box; }
body.overlay-active #game-log { visibility: hidden; }
.log-title { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky-hi); margin-bottom: 4px; }
.log-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(31,162,230,0.5) transparent; }
.log-list::-webkit-scrollbar { width: 5px; }
.log-list::-webkit-scrollbar-thumb { background: rgba(31,162,230,0.5); border-radius: 3px; }
.log-row { padding: 1px 0; }
.log-row b { color: #fff; font-weight: 600; }
.log-row b.me { color: var(--sky-hi); }
.log-row i { font-style: normal; color: #dfe6ff; }
.log-row .pts { color: var(--gold); font-weight: 600; }
.log-row .x2 { color: var(--sky-hi); }
.log-row .mc { color: #f0a23a; }
.log-row .art { color: var(--gold); font-weight: 600; }
.log-row.probe { color: rgba(111, 211, 255, 0.6); padding-left: 10px; font-size: 0.92em; }
.log-row.end { color: rgba(255, 255, 255, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 3px; margin-bottom: 2px; }
.log-row.hand { color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85em; margin-top: 4px; }
.log-row.big { color: #fff; }

/* Hint highlight: a glowing outline that fades away */
.hint-glow {
  position: fixed;
  z-index: 9800;
  pointer-events: none;
  border: 3px solid var(--sky-hi);
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(111, 211, 255, 0.9), inset 0 0 10px rgba(111, 211, 255, 0.4);
  animation: hintFade 4s ease-out forwards;
}
@keyframes hintFade {
  0% { opacity: 0; transform: scale(1.12); }
  10% { opacity: 1; transform: scale(1); }
  25% { opacity: 0.6; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}

/* Sets panel: bigger numbers on the small cards */
#sets .mc .acard .idx { left: 4cqw; top: 2cqw; }
#sets .mc .acard .idx .num { font-size: 40cqw; line-height: 1; text-shadow: 0 0 3px #000, 0 0 6px #000; }
#sets .mc .acard .cname { display: none; }

/* In-game settings */
#settings { z-index: 20500; }
.settings-panel { width: min(620px, 94vw); text-align: left !important; }
.settings-panel .tut-offer-title { text-align: center; color: var(--gold); }
.settings-body .tab-pane.in-settings { display: block !important; visibility: visible !important; }
.settings-body .opt-row { margin-bottom: 10px; }
#settings .tut-offer-buttons { justify-content: center; margin-top: 12px; }
#btn-settings-close { background: linear-gradient(180deg, #ffe066, #e8b923); color: #1a1200; border: none; padding: 0.5em 2em; border-radius: 9px; font-weight: 600; }

/* Settings is for games in progress; the start screen has Look & feel */
body.overlay-active #btn-settings, body:has(#splash:not(.gone)) #btn-settings { display: none; }

/* ======================================================================
   Start panel: softer, see-through, glowing edge
   ====================================================================== */
#start-overlay { background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55)) !important; }
#start-panel {
  background: linear-gradient(160deg, rgba(10, 22, 48, 0.62), rgba(3, 6, 14, 0.78)) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(111, 211, 255, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 40px rgba(31, 162, 230, 0.18), inset 0 0 60px rgba(31, 162, 230, 0.06), 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}
#start-panel:not(.instructions-open):not(.results-open) .start-panel-content { align-self: center; }

/* Tabs: text with a glowing underline */
#start-panel .tab-bar { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#start-panel .tab-btn { border: none !important; background: transparent !important; border-radius: 0; position: relative; color: rgba(255, 255, 255, 0.55); }
#start-panel .tab-btn:hover { color: #fff; }
#start-panel .tab-btn.active { color: #fff; }
#start-panel .tab-btn.active::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: -1px; height: 2px;
  background: var(--sky-hi); box-shadow: 0 0 8px var(--sky-hi); border-radius: 2px;
}

/* Options: quiet outlines; the chosen one glows with gold text */
.seg label > span { border-color: rgba(255, 255, 255, 0.14) !important; background: rgba(255, 255, 255, 0.03) !important; color: rgba(255, 255, 255, 0.75) !important; }
.seg label:hover > span { border-color: rgba(111, 211, 255, 0.5) !important; color: #fff !important; }
.seg input:checked + span {
  background: rgba(31, 162, 230, 0.16) !important;
  border-color: var(--sky-hi) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 10px rgba(31, 162, 230, 0.45), inset 0 0 10px rgba(31, 162, 230, 0.2);
}
/* picture swatches keep their pictures */
.seg-tables label > span { color: #fff !important; text-shadow: 0 1px 3px #000; }
.seg-tables input:checked + span { color: var(--gold) !important; outline: 2px solid var(--sky-hi); outline-offset: -2px; }

/* Secondary buttons on the panel (Stats, How to play, Credits) */
#btn-stats, #btn-instructions, #btn-credits {
  background: transparent !important; border: 1px solid rgba(111, 211, 255, 0.45) !important; color: var(--sky-hi) !important;
  border-radius: 8px; padding: 0.35em 1.1em;
}
#btn-stats:hover, #btn-instructions:hover, #btn-credits:hover { background: rgba(31, 162, 230, 0.15) !important; }
#player-name-input { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; }
#player-name-input:focus { border-color: var(--sky-hi) !important; outline: none; box-shadow: 0 0 8px rgba(31, 162, 230, 0.4); }
#btn-tutorial { background: rgba(0, 0, 0, 0.3) !important; }

/* ======================================================================
   Animated logo: your logo split into blue rings, gold dots and white
   lettering. A light sweeps round the rings, the gold dots glint the
   other way; on the splash it builds up first.
   ====================================================================== */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.alogo { position: relative; aspect-ratio: 1400 / 569; height: auto; filter: none !important; }
.splash-logo-img.alogo { width: min(86vw, 150vh); max-height: none; }
.start-logo-img.alogo { width: 100%; max-width: 34em; margin: 0 auto; }
.alogo .l { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.alogo .l-blue { filter: drop-shadow(0 0 10px rgba(31, 162, 230, 0.35)); }
.alogo .l-white { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25)); }
.alogo .l-gold { filter: drop-shadow(0 0 4px rgba(255, 216, 74, 0.4)); }
/* the sweep: a brightened copy of the rings, shown only in a moving wedge */
.alogo .sweep {
  filter: brightness(1.8) drop-shadow(0 0 12px rgba(140, 220, 255, 0.7));
  /* two opposite beams, like a lighthouse */
  /* two wide, soft beams turning slowly, like a lighthouse */
  -webkit-mask-image: conic-gradient(from var(--sweep) at 50% 50%, transparent 0deg, rgba(0,0,0,0.15) 20deg, rgba(0,0,0,0.55) 45deg, rgba(0,0,0,0.7) 60deg, rgba(0,0,0,0.55) 75deg, rgba(0,0,0,0.15) 100deg, transparent 120deg, transparent 180deg, rgba(0,0,0,0.15) 200deg, rgba(0,0,0,0.55) 225deg, rgba(0,0,0,0.7) 240deg, rgba(0,0,0,0.55) 255deg, rgba(0,0,0,0.15) 280deg, transparent 300deg);
  mask-image: conic-gradient(from var(--sweep) at 50% 50%, transparent 0deg, rgba(0,0,0,0.15) 20deg, rgba(0,0,0,0.55) 45deg, rgba(0,0,0,0.7) 60deg, rgba(0,0,0,0.55) 75deg, rgba(0,0,0,0.15) 100deg, transparent 120deg, transparent 180deg, rgba(0,0,0,0.15) 200deg, rgba(0,0,0,0.55) 225deg, rgba(0,0,0,0.7) 240deg, rgba(0,0,0,0.55) 255deg, rgba(0,0,0,0.15) 280deg, transparent 300deg);
  animation: logoSweep 22s linear infinite;
}
/* the glint: the gold dots flaring in a wedge going the other way */
.alogo .glint {
  filter: brightness(1.6) drop-shadow(0 0 7px rgba(255, 230, 120, 1)) drop-shadow(0 0 2px #fff);
  -webkit-mask-image: conic-gradient(from var(--sweep) at 50% 50%, transparent 0deg, #000 18deg, transparent 40deg, transparent 180deg, #000 198deg, transparent 220deg);
  mask-image: conic-gradient(from var(--sweep) at 50% 50%, transparent 0deg, #000 18deg, transparent 40deg, transparent 180deg, #000 198deg, transparent 220deg);
  animation: logoSweep 30s linear infinite reverse;
}
@keyframes logoSweep { to { --sweep: 360deg; } }

@media (prefers-reduced-motion: reduce) { .alogo .l { animation: none !important; } .alogo .sweep, .alogo .glint { display: none; } }

/* ===== Phones on their side (body.compact, set by layout) ===== */
@media (hover: none) { #hand .acard:hover:not(.sel) { --lift: 0px; } }
body.compact #side-logo { display: none !important; }
/* the hand dips off the bottom edge; the top-left index is what you read */
body.compact #hand .acard { bottom: calc(var(--ch) * -0.16); }
body.compact #hand .acard.sel { --lift: -22%; }
/* the prompt and buttons at the foot of the right-hand column */
body.compact #actions { justify-content: flex-end; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
body.compact #status { line-height: 1.3; }
body.compact #action-buttons { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
body.compact #action-buttons button { min-height: 44px; margin: 0; padding: 0.3em 0.6em; }
body.compact #btn-hint-top { min-width: 64px; }
body.compact .count { font-size: 13px; }
/* corner buttons: finger-sized */
@media (orientation: landscape) and (max-height: 500px) {
  #controls .icon-btn { width: 44px; height: 42px; margin-left: 6px; }
  #controls .icon-btn svg { width: 22px; height: 22px; }
}
/* Turn-your-phone screen, in space colours */
#rotate-prompt { background: radial-gradient(ellipse at 50% 45%, rgba(20, 40, 90, 0.6), #02040a 75%), #02040a !important; }
#rotate-prompt .rotate-title { color: var(--gold) !important; }
/* crowded dock (Mission Control's choices): drop Clear, tap the card again instead */
body.compact #action-buttons:has(> button:nth-child(5)) button.quiet { display: none; }
body.compact #action-buttons:has(> button:nth-child(4)) button { min-height: 40px; }
/* Hint never shows over a popup */
body:has(.modal-shade[style*="flex"]) #btn-hint-top, body:has(#popup[style*="flex"]) #btn-hint-top { display: none !important; }
/* Popups on a phone: below the corner buttons, scrolling if they must */
@media (orientation: landscape) and (max-height: 500px) {
  .modal-shade { padding: 56px 8px 6px; box-sizing: border-box; }
  .modal-shade .tut-offer-panel { max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 12px 18px 12px; font-size: 15px; }
  #hand-over .hand-over-panel { padding: 10px 16px 12px; }
  #ho-title { font-size: 1.4em; }
  #ho-sub { margin: 2px 0 8px; }
  .ho-rows { gap: 5px; }
  .ho-row { padding: 4px 10px; gap: 8px; }
  .ho-target { margin-top: 6px; }
  #hand-over .tut-offer-buttons { margin-top: 8px; }
  .settings-panel .tut-offer-title { display: none; }
}
/* Phones: opponents' heads stay in their own slot */
body.compact #opps .hand-pts { display: none; }
body.compact #opps .seat-head { max-width: 100%; overflow: hidden; }
@media (orientation: landscape) and (max-height: 500px) {
  .settings-body .opt-row { margin-bottom: 4px; }
  .settings-panel button, .settings-panel .seg button { padding-top: 0.3em; padding-bottom: 0.3em; }
  .ho-row { font-size: 14px; }
  .ho-name, .ho-pts { line-height: 1.15; }
}
body.compact #coach { box-sizing: border-box; }
/* Phones: the prompt sits in a strip between the board and the hand, so the
   right-hand column keeps its room for everyone's sets */
body.compact #status { position: fixed; left: var(--st-l); top: var(--st-t); width: var(--st-w); height: var(--st-h); display: block; overflow: hidden; padding-top: 2px; box-sizing: border-box; text-align: center; line-height: 1.2; font-size: 14px; pointer-events: none; }
body.compact #status:empty { display: none; }
body.compact #actions { border-top: none; padding-top: 0; }
/* Phones: the log slides up over the right-hand column from a Log button */
#log-toggle { display: none; }
body.compact #log-toggle { display: block; position: absolute; z-index: 7; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; color: var(--sky-hi); font: 600 15px var(--font); letter-spacing: 0.06em; }
body.overlay-active #log-toggle { visibility: hidden; }
body.compact #game-log { display: flex; z-index: 6; border-top: none; padding: 6px 4px 6px 8px; background: #02040a; border: 1px solid rgba(111, 211, 255, 0.35); border-radius: 8px;
  transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; }
body.compact.show-log #game-log { transform: none; opacity: 1; pointer-events: auto; }
body.compact #game-log .log-title { display: none; }
body.compact .log-list { font-size: 14px; }
/* Phones: the prompt floats under the opponents; bigger type */
body.compact #opps .seat-head { font-size: 15px; gap: 0.4em; }
body.compact #opps .seat-head .nm { min-width: 0; flex: 0 1 auto; }
body.compact #opps .seat-head .count { font-size: 13px; flex: none; }
body.compact #status { top: var(--st-t); height: auto; overflow: visible; z-index: 6; font-size: 16px; line-height: 1.2; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px #000; }
body.compact #sets .seat-head { font-size: 15px; }
body.compact #sets .hand-pts { font-size: 13px; }
/* Phones: a shorter board; the probe hangs half off the foot of its space */
body.compact .tile .space { padding-top: 3px; padding-bottom: calc(var(--tok) * 0.3); gap: 0; }
/* Phones: the planet's name, small, to the right of the number on each card in your hand */
body.compact #hand .acard.body .cname { display: block; top: 9cqw; bottom: auto; left: 21cqw; right: auto; text-align: left; white-space: nowrap; font-size: 9.5cqw; font-weight: 600; letter-spacing: 0; color: #dfe6ff; text-shadow: 0 0 3px #000; }
body.compact #hand .acard.body.pluto .cname { left: 34cqw; }
/* Phones: the open log covers the whole display until you shut it */
body.compact.show-log #game-log { position: fixed; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; z-index: 26000; border: none; border-radius: 0; padding: 14px 24px 64px; box-sizing: border-box; }
body.compact.show-log #game-log .log-title { display: block; text-align: center; font-size: 13px; margin-bottom: 8px; }
body.compact.show-log .log-list { font-size: 16px; line-height: 1.45; width: 100%; max-width: 760px; margin: 0 auto; }
body.compact.show-log #log-toggle { position: fixed; z-index: 26001; top: auto !important; bottom: 10px; left: 50% !important; width: 220px !important; height: 42px !important; transform: translateX(-50%); background: #0b1430; border-color: var(--sky); }
body.compact.show-log #controls, body.compact.show-log #btn-hint-top { display: none !important; }
body.compact #sets .seat-head { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
/* Whoever's turn it is: name and hand glow */
#opps .pseat.active .fan .acard { box-shadow: 0 0 0 1px var(--sky-hi), 0 0 10px rgba(57, 198, 255, 0.75); }
/* Phones: start screen and popup type at a readable size */
@media (orientation: landscape) and (max-height: 500px) {
  #start-panel { font-size: 11.5px !important; padding-top: 50px !important; }
  #start-panel .opt-row { grid-template-columns: 5.4em 1fr; gap: 0.4em; margin-bottom: 0.45em; }
  #start-panel .opt-row button, #start-panel .seg button { padding: 0.35em 0.45em; white-space: nowrap; }
  #start-panel .tab-btn { white-space: nowrap; padding: 0.35em 0.3em; }
  #btn-play small, #btn-play-sub, #btn-tutorial small, .start-buttons-main button small { font-size: 12px !important; opacity: 0.9; }
  #btn-stats, #btn-credits { font-size: 13px !important; }
  .popup-panel { font-size: 16px; }
  .popup-buttons button { font-size: 16px; min-height: 44px; }
  .peek-ui { font-size: 16px; }
  .peek-buttons button { font-size: 16px; min-height: 44px; flex: 1; padding: 0.3em 0.6em; }
  #coach button { font-size: 16px; }
}
/* Phones: each set is one card with the edges of the rest behind it */
body.compact #sets .mc + .mc { margin-left: calc(var(--mcw) * var(--ms) * -1 + 5px); }
body.compact #sets { gap: 4px; }
body.compact .set-block { gap: 2px; padding: 2px 4px 3px; }
body.compact .melds { min-height: 0; gap: 4px 10px; row-gap: 16px !important; padding-bottom: 12px; }
body.compact .melds:has(.empty-note) { padding-bottom: 0; }
/* the cards behind are bare outlines; the front card's number sits over a bigger planet */
body.compact #sets .meld .mc:not(:last-child) .acard > * { visibility: hidden; }
body.compact #sets .mc .acard .art { width: calc(92cqw * var(--f, 1)); height: calc(92cqw * var(--f, 1)); left: 50%; top: 58%; }
body.compact #sets .mc .acard .idx { left: 3cqw; top: 0; }
body.compact #sets .mc .acard .idx .num { font-size: 72cqw; line-height: 1; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
/* Phones: opponents' scores live in the sets column, not over their hands */
body.compact #opps .seat-head .score { display: none; }
/* Question boxes can be dragged by any bare part of them */
.peek-ui, .popup-panel { touch-action: none; cursor: grab; position: relative; padding-top: 18px !important; }
.peek-ui { position: fixed; }
/* a dotted grip, the usual sign for "drag me" */
.peek-ui::before, .popup-panel::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 10px; margin-left: -18px;
  background: radial-gradient(circle, rgba(127, 227, 255, 0.85) 1.4px, transparent 1.8px) 0 0 / 6px 5px; }
/* see-through, so the table underneath still shows */
.peek-ui { background: rgba(4, 6, 12, 0.72) !important; }
.popup-panel { background: rgba(4, 8, 20, 0.74) !important; }
#popup { background: rgba(0, 0, 0, 0.12) !important; }
.peek-ui.dragging, .popup-panel.dragging { cursor: grabbing; }
.peek-ui button, .popup-panel button, .popup-panel .acard { cursor: pointer; }
/* Phones: names on the board and on your cards in pure white; bigger on your cards */
body.compact .tile .tile-name { color: #fff; font-size: var(--tile-font); letter-spacing: 0.04em; }
body.compact #hand .acard.body .cname { color: #fff; font-size: 12.5cqw; top: 8cqw; }
/* Phones: the bare probe on its black disc, so it reads over the hidden cards */
body.compact #probe { background: #05080f !important; border: 1.5px solid var(--sky-hi) !important; box-shadow: 0 0 6px rgba(111, 211, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.9) !important; transform: scale(1.5); }
body.compact #probe img { width: 84% !important; height: 84% !important; filter: drop-shadow(0 0 2px rgba(111, 211, 255, 0.7)); }
/* Phones: no dim grey text anywhere; small screens need full contrast */
@media (orientation: landscape) and (max-height: 500px) {
  .empty-note { opacity: 1; color: #dfe6ff; }
  .pile-label { color: #fff; }
  .ar-aka, #ho-sub, .ho-stats, .stat-wide { color: #fff; }
  .ho-pts small, .ho-target, .stat span, #bg-credit, #bg-credit b { color: #e8eeff; }
  .ho-pts s, .haul.none { opacity: 0.8; color: #e8eeff; }
  .seat-head .cards { opacity: 1; }
  .log-list, .log-row.end { color: #f0f4ff; }
  .log-row.probe { color: var(--sky-hi); }
  #start-panel .tab-btn { color: rgba(255, 255, 255, 0.85); }
  #start-panel .tab-btn.active { color: #fff; }
  .opt-label { opacity: 1; }
  .seg button, .opt-row button, .settings-body button, .seg label > span { color: #fff !important; }
  .seg input:checked + span { color: var(--gold) !important; }
  .modal-shade .tut-offer-text { opacity: 1; }
  #instructions, #instructions li, .tab-pane { color: #f0f4ff; }
}