/* Stacked Deck: casino felt, gold, cards. */
:root {
  --felt: #0f5a37;
  --felt-2: #0c4a2d;
  --felt-3: #083821;
  --felt-4: #052716;
  --gold: #d4af37;
  --gold-2: #f2c14e;
  --gold-soft: rgba(212, 175, 55, 0.35);
  --ink: #f4ecd8;
  --ink-2: #c9c2ad;
  --muted: #93a99a;
  --card: #fdf8ec;
  --red: #c0293f;
  --good: #5fd38d;
  --bad: #ff6b6b;
  --panel: rgba(4, 30, 17, 0.72);
  --line: rgba(212, 175, 55, 0.22);
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--felt-4);
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
kbd {
  display: inline-block; min-width: 1.5em; padding: 0 0.35em; border-radius: 4px;
  border: 1px solid var(--gold-soft); border-bottom-width: 2px; background: rgba(0, 0, 0, 0.25);
  font: 600 11px/1.6 var(--sans); color: var(--ink); text-align: center;
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* felt texture used on screens */
.felt-bg, .select, .story, .board-wrap {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.07), transparent 60%),
    repeating-radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--gold-soft); background: rgba(0, 0, 0, 0.25); cursor: pointer;
  font-weight: 600; letter-spacing: 0.01em; transition: background 0.15s, border-color 0.15s, transform 0.05s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: rgba(212, 175, 55, 0.14); border-color: var(--gold); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--gold-soft); }
.btn.gold {
  background: linear-gradient(180deg, #f6d77a, #d4af37 55%, #b38b22); color: #2a1d02; border-color: #f6e19c;
  box-shadow: 0 2px 0 #7a5c10, 0 4px 14px rgba(0, 0, 0, 0.35);
}
.btn.gold:hover:not(:disabled) { background: linear-gradient(180deg, #ffe597, #e2bd4a 55%, #c39a2c); }
.btn.danger:hover:not(:disabled) { border-color: var(--bad); color: #ffb3b3; background: rgba(255, 80, 80, 0.1); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* ---------- little HTML cards ---------- */
.hand { display: inline-flex; gap: 2px; vertical-align: middle; }
.card {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px;
  min-width: 26px; height: 22px; padding: 0 3px; border-radius: 3px;
  background: var(--card); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  font: 700 12px/22px var(--serif);
}
.card b { font-weight: 700; }
.card i { font-style: normal; font-size: 12px; }
.card.red { color: var(--red); }
.card.black { color: #16181d; }
/* special cards: jokers (? monochrome, ?? colour) and advertising cards ($ front, $$ back) */
.card.spc { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; }
.card.spc { position: relative; }
.card.joker.colour b, .card.ad.back b { letter-spacing: -0.1em; margin-right: 0.1em; }
.card.spc i { position: absolute; left: 2px; bottom: 1px; font-size: 6.5px; line-height: 1; }
.card.joker.mono { background: linear-gradient(#16181d 0 3px, #fff 3px); color: #16181d; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px #16181d; }
.card.joker.colour {
  background: linear-gradient(90deg, #d62f4b 0 25%, #e9a100 25% 50%, #1f9d55 50% 75%, #2f6fd6 75%) top / 100% 3px no-repeat, #fffaf0;
}
.card.joker.colour b { background: linear-gradient(90deg, #d62f4b, #c2185b 45%, #2f6fd6 55%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.joker.colour i { color: #e9a100; }
.card.ad.front { background: #dcf1d3; color: #1d6b3a; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px #1d6b3a; }
.card.ad.back { background: #1d5a36; color: #f2c14e; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1.5px #dcf1d3, inset 0 0 0 2.5px #1d5a36; }

/* a floor's card as a badge (editor top bar, story screen) */
.card.floor-badge, .floor-badge {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 30px; height: 24px; padding: 0 5px;
  border-radius: 4px; background: var(--card); font: 700 14px/24px var(--serif); color: #16181d;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.floor-badge b { font-weight: 700; }
.floor-badge i { font-style: normal; }
.floor-badge.red { color: var(--red); }
.floor-badge.plain { color: #8a6420; font-family: var(--sans); font-size: 12px; }
.floor-badge.big { min-width: 46px; height: 34px; font-size: 21px; line-height: 34px; padding: 0 8px; border-radius: 6px; }
.floor-badge.spc { font-family: var(--sans); font-weight: 800; }
.floor-badge.spc i { font-size: 0.55em; align-self: center; margin-left: 2px; }
.floor-badge.joker.mono { background: linear-gradient(#16181d 0 4px, #fff 4px); color: #16181d; box-shadow: inset 0 0 0 1px #16181d; }
.floor-badge.joker.colour { background: linear-gradient(90deg, #d62f4b 0 25%, #e9a100 25% 50%, #1f9d55 50% 75%, #2f6fd6 75%) top / 100% 4px no-repeat, #fffaf0; }
.floor-badge.joker.colour b { background: linear-gradient(90deg, #d62f4b, #2f6fd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.floor-badge.joker.colour i { color: #e9a100; }
.floor-badge.ad.front { background: #dcf1d3; color: #1d6b3a; box-shadow: inset 0 0 0 1px #1d6b3a; }
.floor-badge.ad.back { background: #1d5a36; color: #f2c14e; box-shadow: inset 0 0 0 1.5px #dcf1d3, inset 0 0 0 2.5px #1d5a36; }

/* ---------- level select ---------- */
.select { min-height: 100vh; padding: 28px 24px 60px; }
.marquee { text-align: center; max-width: 820px; margin: 0 auto 26px; }
.marquee-suits { color: var(--gold); letter-spacing: 0.6em; font-size: 16px; opacity: 0.85; }
.marquee h1 {
  font: 700 clamp(40px, 6vw, 64px)/1.05 var(--serif); margin: 6px 0 8px; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff3c4, #e7c25a 45%, #b38b22); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.tagline { color: var(--ink-2); font: italic 17px/1.4 var(--serif); margin: 0 0 12px; }
.marquee-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; align-items: center; color: var(--muted); font-size: 13px; }
.chapter { max-width: 1320px; margin: 0 auto 26px; }
.chapter h2 {
  font: 600 15px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold);
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
}
.chapter h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-soft), transparent); }
.ch-suit { font-size: 18px; color: var(--ink); }
.ch-suit.red { color: #ff7a93; }
.ch-name { color: var(--ink-2); }
/* Every card is the same size, in a playing card's proportions (5:7), and
   what is on it scales with its width: 1cqi is 1% of it (the slot around an
   open card is the container). */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.tile-slot { position: relative; display: grid; container-type: inline-size; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 2.4cqi; aspect-ratio: 5 / 7; min-width: 0; padding: 7cqi 8cqi 6.5cqi 16cqi;
  border-radius: 12px; background: var(--card); color: #1d1d1d; text-decoration: none;
  box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s, box-shadow 0.15s;
}
a.tile:hover, .tile-slot:hover a.tile { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--gold); }
.tile-corner { position: absolute; display: flex; flex-direction: column; align-items: center; font: 700 max(13px, 8.4cqi)/1 var(--serif); }
.tile-corner i { font-style: normal; font-size: 0.88em; margin-top: 2px; }
.tile-corner.tl { top: 4.5cqi; left: 5cqi; }
.tile-corner.br { bottom: 4.5cqi; right: 5cqi; transform: rotate(180deg); }
.tile.red .tile-corner { color: var(--red); }
.tile.black .tile-corner { color: #16181d; }
.tile.plain .tile-corner { color: #8a6420; font-size: 14px; }
.tile-pip {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); font: 700 56cqi/1 var(--serif);
  opacity: 0.07; pointer-events: none; user-select: none;
}
.tile.red .tile-pip { color: var(--red); opacity: 0.09; }
.tile.plain .tile-pip { display: none; }
a.tile > :not(.tile-pip):not(.tile-corner):not(.tile-foil) { position: relative; }
/* the finale's special-card floors */
.tile.special { padding-left: 20cqi; }
.tile.special .tile-corner { font-family: var(--sans); font-weight: 800; font-size: max(12px, 7.8cqi); }
.tile.special .tile-corner i { font-size: 0.6em; }
.tile.special .tile-pip { font-family: var(--sans); font-weight: 800; font-size: 40cqi; opacity: 0.1; }
.tile.f-mono { background: #fff; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #16181d, 0 6px 18px rgba(0, 0, 0, 0.35); }
.tile.f-mono .tile-corner, .tile.f-mono .tile-pip { color: #16181d; }
.tile.f-colour {
  border: 5px solid transparent; padding: calc(7cqi - 5px) calc(8cqi - 5px) calc(6.5cqi - 5px) calc(20cqi - 5px);
  background: linear-gradient(180deg, #fffdf6, #fbf3df) padding-box,
    linear-gradient(135deg, #d62f4b, #e9a100 33%, #1f9d55 66%, #2f6fd6) border-box;
}
.tile.f-colour .tile-corner.tl { top: 4px; left: 5px; }
.tile.f-colour .tile-corner.br { bottom: 4px; right: 5px; }
.tile.f-colour .tile-corner b, .tile.f-colour .tile-pip {
  background: linear-gradient(90deg, #d62f4b, #2f6fd6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tile.f-colour .tile-pip { opacity: 0.16; }
.tile.f-colour .tile-corner i { color: #e9a100; }
.tile.f-front { background: linear-gradient(180deg, #ecf8e6, #d6eecb); box-shadow: inset 0 0 0 5px #ecf8e6, inset 0 0 0 7px #1d6b3a, 0 6px 18px rgba(0, 0, 0, 0.35); }
.tile.f-front .tile-corner, .tile.f-front .tile-pip { color: #1d6b3a; }
.tile.f-back { background: linear-gradient(180deg, #fdf8ec, #f1ead2); box-shadow: inset 0 0 0 8px #1d5a36, inset 0 0 0 9px #f2c14e, 0 6px 18px rgba(0, 0, 0, 0.35); }
.tile.f-back .tile-corner { color: #f2c14e; background: #1d5a36; padding: 2px 3px; border-radius: 4px; top: 6px; left: 7px; }
.tile.f-back .tile-corner.br { top: auto; left: auto; bottom: 6px; right: 7px; }
.tile.f-back .tile-pip { color: #1d5a36; opacity: 0.12; }
.tile-title { font: 700 max(14px, 9.4cqi)/1.12 var(--serif); margin-top: 1cqi; overflow-wrap: anywhere; }
.tile-brief { flex: 1 1 0; min-height: 0; overflow: hidden; padding-right: 2cqi; font-size: max(11px, 6.2cqi); line-height: 1.38; color: #4a4a44; }
.tile-brief.clipped { mask-image: linear-gradient(180deg, #000 calc(100% - 2.4em), transparent); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.4em), transparent); }
/* your best on each count against par */
.tile-score {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; margin-right: 6cqi; padding-top: 3cqi;
  border-top: 1px solid rgba(60, 50, 20, 0.14); color: #2b2b26;
}
.tile-score.open { display: flex; flex-direction: column; gap: 1cqi; color: #8a6420; font-weight: 600; font-size: max(11px, 6cqi); }
.ts-axis { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ts-k { font: 700 max(8px, 4.3cqi)/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #8b8676; }
.ts-v { display: flex; align-items: baseline; gap: 1.4cqi; white-space: nowrap; }
.ts-v b { font: 700 max(15px, 10.5cqi)/1.05 var(--serif); font-variant-numeric: tabular-nums; }
.ts-v i { font: normal 800 max(9px, 5.2cqi)/1 var(--sans); }
.ts-par { font-size: max(9.5px, 5cqi); color: #8b8676; font-weight: 400; }
.tile .ts-at, .tile .ts-under { color: #1d7a43; }
.tile .ts-over { color: #b45a14; }
.tile .ts-top { color: #a87b00; font-size: max(10px, 6cqi); text-shadow: 0 0 6px rgba(255, 200, 40, 0.7); }
.tile .ts-axis.top .ts-v b { text-decoration: underline 2px rgba(201, 151, 0, 0.6); text-underline-offset: 3px; }
/* on dark backgrounds (the legend, the chart beside a card) */
.ts-at, .ts-under { color: var(--good); }
.ts-over { color: #ffaa66; }
.ts-top { color: var(--gold-2); }
.tile-friends {
  align-self: flex-start; max-width: calc(100% - 4cqi); margin-top: -0.5cqi; padding: 0.4cqi 2.4cqi; border-radius: 999px;
  font: 700 max(9px, 4.8cqi)/1.5 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(60, 50, 20, 0.08); color: #5d5640;
}
.tile-friends.beaten { background: rgba(180, 90, 20, 0.12); color: #934810; }
.tile.solved { background: linear-gradient(180deg, #fffdf6, #f1ead2); }
.tile.solved::after {
  content: 'PAID'; position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-14deg);
  border: 2px solid #1f7a45; color: #1f7a45; border-radius: 4px; padding: 0 6px; font: 800 max(11px, 7cqi)/1.5 var(--sans);
  letter-spacing: 0.14em; opacity: 0.4; pointer-events: none;
}
/* the best known score on one count: gold foil; on both: holographic. The
   shine follows the pointer (--mx, --my, set in screens.js). */
.tile-foil {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  --mx: 30%; --my: 20%;
}
.tile.foil { background: linear-gradient(150deg, #fffaf0, #f7e7b4 30%, #fffaf0 50%, #f1dc9c 76%, #fff8e6); }
.tile.foil .tile-foil {
  box-shadow: inset 0 0 0 2.5px #c9a227, inset 0 0 0 4px rgba(255, 250, 225, 0.8), inset 0 0 0 5px rgba(160, 120, 20, 0.45);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.75), transparent 40%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 236, 160, 0.25) 52%, transparent 66%) var(--mx) var(--my) / 250% 250%;
  mix-blend-mode: soft-light;
}
.tile.holo { background: linear-gradient(160deg, #fbf8ff, #eef6ff 50%, #fff5fb); }
.tile.holo .tile-foil {
  box-shadow: inset 0 0 0 2.5px rgba(150, 120, 210, 0.7), inset 0 0 0 4px rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.85), transparent 38%),
    radial-gradient(rgba(255, 255, 255, 0.9) 0.8px, transparent 1.4px) 0 0 / 7px 7px,
    repeating-linear-gradient(115deg, #ff8fb1 0%, #ffd27f 7%, #b6f28d 14%, #7fe3ff 21%, #b49bff 28%, #ff8fb1 35%) var(--mx) var(--my) / 300% 300%;
  mix-blend-mode: multiply; opacity: 0.42;
  animation: holo-drift 7s ease-in-out infinite alternate;
}
.tile.holo:hover .tile-foil { animation: none; opacity: 0.55; }
@keyframes holo-drift { from { --mx: 15%; --my: 10%; } to { --mx: 85%; --my: 90%; } }
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 20%; }
@media (prefers-reduced-motion: reduce) { .tile.holo .tile-foil { animation: none; } }
/* the chart button, on touch screens (elsewhere hovering a card, or focusing
   it from the keyboard, shows the chart) */
.tile-chart {
  position: absolute; top: 5px; right: 5px; z-index: 2; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display: none; place-items: center; cursor: pointer; color: #6b5a28;
  border: 1px solid rgba(107, 90, 40, 0.3); background: rgba(255, 252, 240, 0.9);
}
@media (hover: none) {
  .tile-chart { display: grid; }
  .tile-slot:has(.tile-chart) .tile-title { padding-right: 14cqi; }
}
/* the chart beside a card */
.tile-pop {
  position: fixed; z-index: 30; width: min(372px, calc(100vw - 16px)); padding: 10px 12px 8px; border-radius: 12px;
  background: #05200f; border: 1px solid var(--gold-soft); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pop-head > b { font: 700 17px/1.2 var(--serif); }
.pop-table { border-collapse: collapse; margin: 0 0 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pop-table th, .pop-table td { padding: 1px 0 1px 16px; text-align: right; }
.pop-table thead th { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pop-table tbody th { padding-left: 0; text-align: left; font-weight: 600; color: var(--ink-2); text-transform: capitalize; }
.pop-table td { font-weight: 700; }
.pop-friends { margin: 0 0 6px; padding: 0; list-style: none; font-size: 12.5px; color: #ffcf9e; }
.pop-friends b { color: var(--ink); }
.pop-note { margin: 4px 0 0; }
.tile-pop .sc-legend { font-size: 11px; }
.select-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; font-size: 12px; color: var(--ink-2);
}
.select-legend span { display: inline-flex; align-items: center; gap: 5px; }
.select-legend b { font-weight: 800; }
.lg-foil, .lg-holo { display: inline-block; width: 11px; height: 15px; border-radius: 2px; }
.lg-foil { background: linear-gradient(150deg, #fff8dc, #e6c55a 45%, #fff4cc 60%, #c9a227); box-shadow: inset 0 0 0 1px #a8851d; }
.lg-holo { background: linear-gradient(150deg, #ff8fb1, #ffd27f, #b6f28d, #7fe3ff, #b49bff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.tile.locked { background: none; box-shadow: none; padding: 0; color: var(--ink-2); }
.tile-back {
  position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #7a1f2e, #5b1622);
  box-shadow: inset 0 0 0 6px #fdf8ec, inset 0 0 0 7px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0.75;
}
/* the bonus deck: navy card backs and a navy frame */
.chapter.bonus { margin-top: 40px; padding-top: 22px; border-top: 1px dashed rgba(143, 176, 230, 0.35); }
.chapter.bonus h2 { color: #a9c3f0; }
.chapter.bonus h2::after { background: linear-gradient(90deg, rgba(143, 176, 230, 0.45), transparent); }
.ch-suit.bonus { color: #f2c14e; }
.bonus-note { margin: -6px 0 14px; color: var(--ink-2); font: italic 14px/1.4 var(--serif); }
.tile.bonus {
  box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 7px #1f3b70, 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.tile.bonus::before {
  content: 'BONUS'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font: 800 9.5px/1.6 var(--sans); letter-spacing: 0.14em;
  color: #fdf8ec; background: #1f3b70; padding: 0 8px; border-radius: 3px; box-shadow: 0 0 0 2px var(--card);
}
.tile.locked.bonus::before { display: none; }
.tile.bonus.solved::before { background: #1f7a45; }
.tile.bonus.plain .tile-corner { color: #1f3b70; }
.tile.locked.bonus .tile-back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #24427a, #142a52);
}
.floor-badge.bonus { box-shadow: inset 0 0 0 1.5px #1f3b70; }
.floor-badge.bonus.plain { color: #1f3b70; }
.meta-bonus { color: #a9c3f0; }
.bonus-star { color: #b38b22; }
.lock { background: rgba(0, 0, 0, 0.45); padding: 4px 12px; border-radius: 999px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
/* what opens a locked bonus floor: campaign floors plain, bonus floors on a navy chip with a star */
.tile.locked.bonus .lock { max-width: calc(100% - 20px); text-align: center; line-height: 1.9; }
.req { white-space: nowrap; }
.req.bonus { background: #1f3b70; color: #fdf8ec; padding: 1px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px #f2c14e; }
.req-star { color: #f2c14e; margin-right: 2px; }
.req.done { opacity: 0.55; text-decoration: line-through; }
.tile.locked .tile-no { position: absolute; top: 14px; left: 16px; font: 700 15px var(--serif); color: #fdf8ec; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); }

/* ---------- story ---------- */
.story { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.story-card {
  max-width: 640px; width: 100%; padding: 40px 44px 30px; border-radius: 14px; background: var(--card); color: #232320;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 10px #fdf8ec, inset 0 0 0 11px rgba(179, 139, 34, 0.5);
  font: 18px/1.6 var(--serif);
}
.story-head { display: flex; align-items: center; gap: 12px; }
.story-no { font: 600 12px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #8a6420; }
.story-no .red { color: var(--red); }
.story-card h1 { font: 700 38px/1.1 var(--serif); margin: 8px 0 18px; }
.story-card p { margin: 0 0 14px; }
.story-brief { margin: 22px 0 6px; padding: 12px 16px; border-left: 4px solid var(--gold); background: #f4ecd2; border-radius: 0 8px 8px 0; font: 600 15px/1.45 var(--sans); }
.story-brief .stat-k { display: block; color: #8a6420; }
.story-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 10px 0 0; padding: 0 20px; font: 14px/1.4 var(--sans); color: #4a4a44; }
.story-score .stat-k { color: #8a6420; }
.story-count b { font: 700 18px var(--serif); color: #232320; }
.story-count i { margin-left: 4px; font: normal 800 12px var(--sans); }
.story-count .ts-at, .story-count .ts-under { color: #1d7a43; }
.story-count .ts-over { color: #b45a14; }
.story-par { color: #8b8676; font-size: 12.5px; }
.story-actions { display: flex; justify-content: space-between; margin-top: 22px; }
.story-actions .btn.ghost { color: #5a5446; }
.story-actions .btn.ghost:hover:not(:disabled) { color: #2a1d02; background: rgba(138, 100, 32, 0.12); border-color: #8a6420; }

/* ---------- editor layout ---------- */
.editor {
  height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 350px; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'top top' 'stage side';
}
.topbar {
  grid-area: top; display: flex; align-items: center; gap: 16px; padding: 8px 14px; min-height: 54px;
  background: linear-gradient(180deg, #0a2e1c, #06231a); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); z-index: 2;
}
.title { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.title .lvl-no { align-self: center; }
.lvl-title { font: 700 20px/1 var(--serif); }
.brief { flex: 1; color: var(--ink-2); font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stats { display: flex; gap: 8px; }
.stat {
  display: flex; flex-direction: column; align-items: center; padding: 3px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); line-height: 1.15;
}
.stat-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; }
.stat-v { font: 700 17px var(--serif); color: var(--gold-2); }
.stat.par .stat-v { color: var(--ink-2); font-size: 15px; }

/* palette: at the top of the side panel, above the inspector it switches */
.palette { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.pal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pal-head .pal-title { margin: 0 2px; }
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.pal-title, .sub-title, .ports-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); font-weight: 700; margin: 2px 2px 4px;
}
.pal-item {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 10px; min-height: 36px;
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.03); cursor: grab; text-align: left; touch-action: none;
}
.pal-item:hover { background: rgba(212, 175, 55, 0.1); border-color: var(--gold-soft); }
.pal-item.on { background: rgba(212, 175, 55, 0.2); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.pal-item kbd {
  position: absolute; top: 2px; right: 2px; min-width: 0; padding: 0 2px; border: 0; background: none;
  font-size: 8.5px; line-height: 1.2; opacity: 0.5;
}
.pal-name { font-weight: 600; font-size: 11.5px; line-height: 1.1; min-width: 0; }
.palette .pal-item .pal-chip { width: 28px; height: 28px; border-width: 2.5px; }
.palette .pal-item .pal-chip span { width: 19px; height: 19px; font-size: 6.5px; }
.pal-chip {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.85); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.pal-chip span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.22);
  font: 800 7.5px/1 var(--sans); letter-spacing: 0.02em; color: #fff; outline: 1px solid rgba(255, 255, 255, 0.5);
}
.pal-chip.big { width: 42px; height: 42px; }
.pal-chip.big span { width: 28px; height: 28px; font-size: 8.5px; }
.pal-hint { color: var(--muted); font-size: 11.5px; margin: 0 2px; }
.pal-tools { display: flex; gap: 4px; }
.pal-tools .btn { justify-content: center; padding: 3px 9px; }

/* stage */
.stage { grid-area: stage; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.board-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45); }
svg.board { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; }
svg.board.placing { cursor: copy; }
.toast {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); max-width: min(680px, 92%);
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 10px;
  background: rgba(6, 28, 18, 0.94); border: 1px solid var(--gold-soft); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-weight: 500; z-index: 3;
}
.toast.good { border-color: var(--good); }
.toast.good::before { content: '✓'; color: var(--good); font-weight: 800; }
.toast.bad { border-color: var(--bad); }
.toast.bad::before { content: '!'; color: #1d0505; background: var(--bad); border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; font-weight: 800; flex: none; font-size: 12px; margin-top: 1px; }
.toast-x { border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); padding: 0 2px; }

.transport {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 14px;
  background: linear-gradient(0deg, #06231a, #0a2e1c); border-top: 1px solid var(--line);
}
.tp-group { display: flex; align-items: center; gap: 4px; }
.tp {
  width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--gold-soft); background: rgba(0, 0, 0, 0.25);
  cursor: pointer; font-size: 15px; display: grid; place-items: center;
}
.tp:hover:not(:disabled) { border-color: var(--gold); background: rgba(212, 175, 55, 0.12); }
.tp:disabled { opacity: 0.35; cursor: default; }
.tp.main { width: 50px; background: linear-gradient(180deg, #f6d77a, #d4af37 55%, #b38b22); color: #2a1d02; border-color: #f6e19c; }
.tp.main.on { background: linear-gradient(180deg, #ffe9a8, #f2c14e); }
.speeds { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 9px; padding: 2px; gap: 2px; }
.sp { border: 0; background: none; padding: 5px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.sp:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.sp.on { background: var(--gold-soft); color: #fff; }
.tp-round { margin-left: auto; font-size: 13px; }
.tp-round b { font: 700 17px var(--serif); color: var(--gold-2); }

/* side panel */
.side {
  grid-area: side; display: flex; flex-direction: column; overflow-y: auto; min-height: 0;
  background: rgba(3, 26, 15, 0.8); border-left: 1px solid var(--line);
}
.panel { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel h3 { margin: 0; font: 700 17px/1.2 var(--serif); }
.inspector h3 { margin-bottom: 2px; }
.brief-big { font: 600 15px/1.4 var(--sans); color: var(--gold-2); margin: 6px 0 10px; }
.howto { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.howto li { margin-bottom: 5px; }
.keys { color: var(--muted); font-size: 12px; margin: 10px 0 0; line-height: 2; }
.insp-head { display: flex; align-items: center; gap: 10px; }
.insp-head > div { flex: 1; }
.insp-at { color: var(--muted); font-size: 11.5px; }
.insp-desc { color: var(--ink-2); font-size: 12.5px; margin: 8px 0 10px; }
.param { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
.param.col { flex-direction: column; align-items: stretch; }
.param-k { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.seg { display: inline-flex; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button { border: 0; background: none; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
.seg button.on { background: var(--gold); color: #2a1d02; }
.seg.wide { display: grid; grid-template-columns: repeat(7, 1fr); }
.seg.wide button { padding: 4px 0; }
.param-more { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.n-in {
  width: 64px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3);
  color: var(--ink); font: 700 12.5px/1.3 inherit; text-align: center;
}
.n-in.on { border-color: var(--gold); background: var(--gold); color: #2a1d02; }
.deck-special { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.help-special .help-table.special td:first-child { width: 1%; white-space: nowrap; }
.help-special .help-table.special td:nth-child(2) { min-width: 160px; }
.deck-in {
  width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--gold-soft); background: rgba(0, 0, 0, 0.35);
  color: var(--ink); font: 600 13px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em;
}
.deck-in.bad { border-color: var(--bad); }
.deck-prev { display: flex; flex-wrap: wrap; }
.deck-prev .hand { flex-wrap: wrap; }
.err { color: var(--bad); font-size: 12px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.ports-title { margin-top: 14px; display: flex; align-items: baseline; gap: 4px; }
.ports-title .muted { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; }
.port-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  flex-wrap: wrap;
}
.port-row:hover { background: rgba(255, 255, 255, 0.04); }
.port-row.active { border-color: var(--gold); background: rgba(212, 175, 55, 0.1); }
.port-tag {
  display: inline-block; min-width: 46px; text-align: center; padding: 2px 7px; border-radius: 999px; color: #10241a;
  font-weight: 800; font-size: 11.5px; border: 1.5px solid transparent;
}
.port-tag.input { background: transparent; }
.sides { display: flex; gap: 3px; margin-left: auto; }
.side-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); cursor: pointer;
  font-size: 14px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.side-btn:hover { border-color: var(--gold); }
.side-btn.on { background: var(--gold); color: #2a1d02; border-color: var(--gold); font-weight: 800; }
.side-btn.floor { color: var(--muted); }
.side-btn.floor.on { background: #3a4a40; color: #fff; border-color: #6c7f73; }
.port-row.deal { flex-wrap: wrap; }
.deal-list { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 100%; order: 3; padding: 2px 0 0 2px; }
.deal-chip { border: 1px solid var(--gold-soft); background: rgba(242, 193, 78, 0.12); border-radius: 6px; padding: 1px 6px; font-size: 12px; cursor: pointer; }
.deal-chip:hover { border-color: var(--bad); text-decoration: line-through; }

/* tests panel */
.tests { flex: 1; }
.tests-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tests-head .edit-btn { margin-left: auto; }
/* Play mode: only the tests (and a selected croupier's panel) beside or under the board. */
.side.watching .palette, .editor:not(.cell-selected) .side.watching .inspector { display: none; }
.test-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.test-chip {
  min-width: 30px; height: 28px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.35); background: #24493a;
  cursor: pointer; font-weight: 700; font-size: 12px; padding: 0 4px;
}
.test-chip.on { border-style: solid; border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.3); }
.test-chip.pass { background: #1f7a45; }
.test-chip.fail { background: #8c2632; }
.test-chip.check { border-radius: 8px; }
.check-hint { align-self: center; margin-left: 4px; cursor: help; }
.sim-status { padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); font-size: 13px; margin-bottom: 8px; border: 1px solid var(--line); }
.sim-status.good { border-color: var(--good); color: #c8f5d8; }
.sim-status.bad { border-color: var(--bad); color: #ffd0d0; }
.sim-detail { font-size: 12.5px; margin: -2px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sub-title { margin-top: 12px; display: flex; align-items: baseline; gap: 6px; }
.sub-title .muted { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11.5px; }
.queue, .paid { display: flex; flex-direction: column; gap: 3px; max-height: 30vh; overflow-y: auto; padding-right: 2px; }
.q-item, .p-item { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; }
.q-n, .p-n { width: 20px; text-align: right; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.q-mark, .p-mark { margin-left: auto; font-weight: 800; color: var(--gold-2); }
.desk-tag { font-size: 11px; font-weight: 700; color: var(--gold-2); white-space: nowrap; }
.q-item.dealt { opacity: 0.38; }
.q-item.next { background: rgba(212, 175, 55, 0.14); outline: 1px solid var(--gold-soft); }
.p-item.ok .p-mark { color: var(--good); }
.p-item.bad { background: rgba(255, 80, 80, 0.14); }
.p-item.bad .p-mark { color: var(--bad); }
.queue.short { max-height: 22vh; }
.paid.expected { max-height: 32vh; }
.e-item:not(.ok) .p-mark { color: var(--muted); font-weight: 600; }
.e-item.ok { background: rgba(95, 211, 141, 0.1); }
.p-item.bad .p-n { color: var(--bad); font-weight: 800; }
.p-item.bad .p-mark { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.order-note { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; flex-wrap: wrap; }
.order-tag { font: 700 10px/1.6 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-2); border: 1px solid var(--gold-soft); border-radius: 999px; padding: 0 7px; white-space: nowrap;
}
.queue .card, .paid .card { min-width: 22px; height: 19px; font-size: 11px; line-height: 19px; }

/* drag ghost */
.drag-ghost { position: fixed; left: -21px; top: -21px; pointer-events: none; z-index: 50; display: flex; align-items: center; gap: 6px; }
.drag-ghost .pal-chip { width: 42px; height: 42px; opacity: 0.9; }
.drag-ghost.trash .pal-chip { filter: grayscale(1); opacity: 0.6; }
.ghost-t { background: var(--bad); color: #200; font-weight: 800; padding: 1px 6px; border-radius: 6px; font-size: 12px; }

/* ---------- board SVG ---------- */
.board text { font-family: var(--sans); pointer-events: none; }
.hex.floor { fill: rgba(255, 255, 255, 0.035); stroke: rgba(212, 175, 55, 0.28); stroke-width: 1.2; }
svg.placing .hex.floor:hover { fill: rgba(242, 193, 78, 0.08); }
.hex.table { fill: #0a3522; stroke: var(--gold); stroke-width: 1.6; }
.hex.table-in { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.cell.selected .hex.table { fill: #0e4129; }
.chip { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.chip-ring { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 3.2; stroke-dasharray: 4.2 3.6; }
.chip-face { fill: rgba(0, 0, 0, 0.2); stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.8; }
.chip-t { font-size: 7.6px; font-weight: 800; fill: #fff; letter-spacing: 0.02em; }
.chip-t.small { font-size: 6.2px; }
.shoe-deck { font-size: 7.5px; fill: var(--ink-2); font-weight: 700; }
.hex.src { fill: #4c1521; stroke: var(--gold); stroke-width: 1.6; }
.cardback { fill: #fdf8ec; stroke: rgba(0, 0, 0, 0.4); stroke-width: 0.6; }
.cardback-inner { fill: #8c2234; stroke: none; }
.src-count { font: 800 10px var(--sans); fill: #fff; }
.fixed-label { font-size: 7px; font-weight: 800; letter-spacing: 0.14em; fill: var(--ink); }
.fixed-label.dark { fill: #3a2a05; }
.hex.desk { fill: #d9b44a; stroke: #fff1b8; stroke-width: 1.6; }
.deskchip { fill: #b3243a; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.desk-sign { font: 800 13px var(--serif); fill: #3a2a05; }
.paid-badge { fill: #1f7a45; stroke: #fff; stroke-width: 1.2; }
.paid-badge-t { font-size: 9px; font-weight: 800; fill: #fff; }
.cell.alert .hex { animation: alert 0.9s ease-in-out infinite alternate; }
@keyframes alert { from { stroke: #fff; stroke-width: 2; } to { stroke: var(--bad); stroke-width: 5; } }

.port-line { stroke-width: 2.6; stroke-linecap: round; opacity: 0.95; }
.port-head { stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.8; stroke-linejoin: round; }
.pill text { font-size: 7px; font-weight: 800; fill: #10241a; }
.pill rect { stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.6; }
.pill.active rect, .badge.active circle { stroke: #fff; stroke-width: 1.6; }
.in-mark { stroke-width: 3.5; stroke-linecap: round; }
.badge circle { stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.6; }
.badge text { font-size: 7.5px; font-weight: 900; fill: #10241a; }

.sel-ring { fill: none; stroke: var(--gold-2); stroke-width: 2.6; filter: drop-shadow(0 0 4px rgba(242, 193, 78, 0.7)); pointer-events: none; }
.edge-hint { stroke: rgba(255, 255, 255, 0.16); stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.edge-hint.hot { stroke-width: 7; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6)); }
.edge-tip { font-size: 8.5px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: #06231a; stroke-width: 3px; }
.hex.ghost { fill: rgba(242, 193, 78, 0.1); stroke: var(--gold-2); stroke-width: 1.4; stroke-dasharray: 5 4; pointer-events: none; }
.hex.drop { pointer-events: none; stroke-width: 2; stroke-dasharray: 6 4; }
.hex.drop.ok { fill: rgba(95, 211, 141, 0.15); stroke: var(--good); }
.hex.drop.bad { fill: rgba(255, 107, 107, 0.12); stroke: var(--bad); }

.l-cards { pointer-events: none; }
.l-cards .peekable { pointer-events: auto; } /* a cut-short stack: hover or tap to see it all */
.scard rect { fill: var(--card); stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.6; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.scard text { font-family: var(--serif); font-weight: 700; }
.scard .rank { font-size: 8.4px; }
.scard .suit { font-size: 8.4px; }
.scard.red text { fill: var(--red); }
.scard.black text { fill: #16181d; }
.scard.house rect { fill: #efe2bd; stroke: #8a6420; stroke-dasharray: 2 1.4; }
/* special cards on the board */
.scard.spc > rect:not(:first-child), .hand.held .scard.spc > rect:not(:first-child) { stroke: none; filter: none; }
.scard.spc .face { font: 800 10.5px var(--sans); }
.scard.spc .face.two { font-size: 8.6px; letter-spacing: -0.4px; }
.scard.spc .pip { font: 700 5.4px var(--sans); }
.scard.spc.joker.mono > rect:first-child { fill: #fff; }
.scard.spc.joker.mono .sp-stripe, .scard.spc.joker.mono text { fill: #16181d; }
.scard.spc.joker.colour > rect:first-child { fill: #fffaf0; }
.scard.spc.joker.colour .pip { fill: #e9a100; }
.scard.spc.ad.front > rect:first-child { fill: #dcf1d3; }
.scard.spc.ad.front text { fill: #1d6b3a; }
.scard.spc.ad.back > rect:first-child { fill: #dcf1d3; }
.scard.spc.ad.back .sp-band { fill: #1d5a36; stroke: none; }
.scard.spc.ad.back text { fill: #f2c14e; }
.scard.spc.house > rect:first-child { stroke: #16181d; stroke-width: 0.7; }
.scard.spc.ad.house > rect:first-child { stroke: #1d6b3a; }
.scard.more rect { fill: #31584a; stroke: #fdf8ec; }
.scard.more text { fill: #fff; font: 800 7.5px var(--sans); }
/* Hands on the board: waiting to be placed (gold, dashed), waiting at an
   input (on a tray with a notch pointing at the croupier), held by a
   croupier waiting for more (on a blue plate in the middle, with a badge). */
.hand-glow { fill: rgba(242, 193, 78, 0.15); stroke: var(--gold-2); stroke-width: 1.2; stroke-dasharray: 3 2; }
.hand-tray { fill: rgba(2, 20, 11, 0.6); stroke: rgba(244, 236, 216, 0.7); stroke-width: 0.9; }
.tray-notch { fill: #f4ecd8; stroke: #06231a; stroke-width: 0.9; stroke-linejoin: round; }
.hand-plate { fill: rgba(16, 44, 82, 0.92); stroke: #6fb7ff; stroke-width: 1.6; }
.hand.hand-buffer.full .hand-plate { stroke: var(--gold-2); }
.held-badge rect { fill: #6fb7ff; stroke: #06231a; stroke-width: 0.8; }
.held-tag { font-size: 6px; font-weight: 800; fill: #0b2440; letter-spacing: 0.08em; text-transform: uppercase; }
.peekable { cursor: zoom-in; }
.peek-hit { fill: transparent; pointer-events: all; }
.hand.paid-now.wrong .scard rect { stroke: var(--bad); stroke-width: 2; }

/* ---------- modals ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(0, 10, 5, 0.6); display: grid; place-items: center; z-index: 40; padding: 20px; backdrop-filter: blur(2px); }
.modal {
  position: relative; max-width: 860px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px 28px; border-radius: 14px;
  background: linear-gradient(180deg, #0d3a26, #072a1a); border: 1px solid var(--gold-soft); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.modal h2 { font: 700 26px/1.2 var(--serif); margin: 0 0 10px; color: var(--gold-2); }
.modal h3 { font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin: 18px 0 8px; }
.modal-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--muted); }
.modal-x:hover { color: var(--ink); }
.rules { padding-left: 18px; color: var(--ink-2); margin: 0; }
.rules li { margin-bottom: 6px; }
.help-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.help-table td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.help-table td:first-child { width: 48px; }
.help-table td:nth-child(2) { width: 110px; }
.ports-cell { width: 170px; }
.ports-cell .port-tag { margin: 2px; min-width: 0; }
.keys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; color: var(--ink-2); font-size: 13px; }
.results { max-width: 580px; text-align: center; }
.res-suits { color: var(--gold); letter-spacing: 0.5em; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.res-row { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.res-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 700; }
.res-v { font: 700 40px/1.1 var(--serif); color: var(--gold-2); display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.res-par { font: 800 15px var(--sans); }
.res-new { font: 800 10px var(--sans); background: var(--good); color: #062; border-radius: 999px; padding: 2px 7px; letter-spacing: 0.06em; text-transform: uppercase; }
.res-sub { color: var(--ink-2); font-size: 12.5px; }
.modal-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ---------- solutions scatter plot ---------- */
.sol-btn { color: var(--gold-2); }
.res-plot { margin: 0 0 16px; text-align: left; }
.res-plot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.res-plot-head .sub-title { margin: 0; }
.solutions { max-width: 640px; }
.solutions .res-sub { margin: 0 0 12px; }
.scatter { position: relative; }
.sc-svg {
  display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 30% 80%, rgba(255, 255, 255, 0.05), transparent 70%), rgba(0, 0, 0, 0.22);
}
.sc-svg text { font-family: var(--sans); }
.sc-grid { stroke: rgba(212, 175, 55, 0.09); stroke-width: 1; }
.sc-axis { fill: none; stroke: var(--gold-soft); stroke-width: 1.4; }
.sc-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.sc-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--gold); }
.sc-better { font-size: 10.5px; font-style: italic; fill: var(--muted); opacity: 0.8; }
.sc-others circle { fill: rgba(244, 236, 216, 0.08); stroke: rgba(244, 236, 216, 0.12); stroke-width: 0.8; }
.sc-overall { fill: none; stroke: rgba(244, 236, 216, 0.45); stroke-width: 1.4; stroke-dasharray: 5 4; stroke-linejoin: round; pointer-events: none; }
.sc-beaten { fill: rgba(212, 175, 55, 0.05); stroke: none; }
.sc-front { fill: none; stroke: var(--gold-2); stroke-width: 1.8; stroke-linejoin: round; opacity: 0.75; }
.sc-par { pointer-events: none; }
.sc-par-mark { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
.sc-par-t { font-size: 10.5px; font-weight: 800; fill: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; paint-order: stroke; stroke: #06231a; stroke-width: 3px; }
.sc-pt { cursor: pointer; outline: none; }
.sc-hit { fill: transparent; }
.sc-dot { stroke-width: 1.6; transition: r 0.12s; }
.sc-pt.front .sc-dot { fill: var(--gold-2); stroke: #fff1b8; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.sc-pt.beaten .sc-dot { fill: #24493a; stroke: var(--gold); }
.sc-pt:hover .sc-dot, .sc-pt:focus-visible .sc-dot { stroke: #fff; stroke-width: 2.4; }
.sc-pt:focus-visible .sc-hit { stroke: var(--gold-2); stroke-width: 1.5; stroke-dasharray: 2 2; }
.sc-ring { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.sc-halo { fill: rgba(95, 211, 141, 0.18); stroke: var(--good); stroke-width: 1.6; animation: sc-pulse 1.4s ease-in-out infinite alternate; }
@keyframes sc-pulse { from { opacity: 1; } to { opacity: 0.35; } }
.sc-fresh-t { font-size: 10px; font-weight: 800; fill: var(--good); letter-spacing: 0.08em; text-transform: uppercase; paint-order: stroke; stroke: #06231a; stroke-width: 3px; }
.sc-count { font-size: 10px; font-weight: 800; fill: var(--ink-2); paint-order: stroke; stroke: #06231a; stroke-width: 3px; }
.sc-tip {
  position: absolute; z-index: 5; pointer-events: none; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.35;
  background: rgba(6, 28, 18, 0.96); border: 1px solid var(--gold-soft); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); white-space: nowrap; text-align: left;
}
.sc-tip b { color: var(--gold-2); }
.sc-tip-tags { display: flex; gap: 4px; margin: 3px 0 1px; }
.sc-tag {
  display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--line); color: var(--ink-2); line-height: 1.6; white-space: nowrap;
}
.sc-tag.front { border-color: var(--gold); color: var(--gold-2); }
.sc-tag.cur { border-color: var(--ink-2); color: var(--ink); }
.sc-tag.new { background: var(--good); border-color: var(--good); color: #062; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.sc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--gold); background: #24493a; }
.lg-dot.front { background: var(--gold-2); border-color: #fff1b8; }
.lg-dot.ring { margin: 0 3px; box-shadow: 0 0 0 2px #072a1a, 0 0 0 3.5px var(--ink); }
.lg-dot.ring:not(.front):not(.beaten) { background: transparent; border-color: transparent; }
.lg-dot.others { background: rgba(244, 236, 216, 0.15); border-color: rgba(244, 236, 216, 0.2); }
.lg-overall { display: inline-block; width: 16px; height: 0; margin: 0 2px 3px; border-top: 1.5px dashed rgba(244, 236, 216, 0.6); }
.lg-par { display: inline-block; width: 9px; height: 9px; margin: 0 2px; transform: rotate(45deg); border: 1.5px dashed var(--ink); }
.sol-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 34vh; overflow-y: auto; }
.sol-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.2);
}
.sol-row.current { border-color: var(--gold-soft); background: rgba(212, 175, 55, 0.08); }
.sol-load {
  flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border: 0; background: none; padding: 4px 0; cursor: pointer; text-align: left;
}
.sol-load:hover .sol-score { color: var(--gold-2); }
.sol-score { font-size: 13.5px; }
.sol-score b { font: 700 16px var(--serif); color: var(--gold-2); }
.sol-date { font-size: 11.5px; color: var(--muted); }
.sol-del {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--muted); font-size: 18px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.sol-del:hover { color: #ffb3b3; border-color: var(--bad); background: rgba(255, 80, 80, 0.1); }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .editor { grid-template-columns: minmax(0, 1fr) 310px; }
  .brief { font-size: 12.5px; }
}
.insp-head .done-btn { display: none; } /* a phone's way back from a selected croupier */
.phone-only { display: none; } /* shown by the phone layout below */
/* Keyboard shortcuts only where there is a mouse (so likely a keyboard),
   touch gestures only where there is a touch screen. */
@media not (any-pointer: fine) { .kbd-only, .pal-item kbd, .picker-item kbd { display: none !important; } }
@media not (any-pointer: coarse) { .touch-only { display: none !important; } }
@media (max-width: 900px) {
  .editor { height: auto; min-height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: 'top' 'stage' 'side'; }
  /* The floor keeps its size whatever shows under it (the play controls
     step aside for a selected croupier): a floor that grew into their place
     would take a tap meant for them. */
  .board-wrap { flex: none; height: 50vh; }
  .topbar { flex-wrap: wrap; }
  .brief { flex-basis: 100%; order: 5; }
  .pal-item kbd { display: none; }
  /* Croupiers are placed by tapping an empty hex (the picker), so no palette. */
  .side .palette { display: none; }
  .phone-only { display: block; }
  .btn.phone-only { display: inline-flex; }
  .side { border-left: 0; }
  .story-card { padding: 28px 22px; }
  /* A selected croupier: its panel right under the floor (in play mode, under the play controls), Done to go back. */
  .editor.cell-selected:not(.watching) .transport, .editor.cell-selected .palette { display: none; }
  .insp-head .done-btn { display: inline-flex; }
}
.fixed-rule { font-size: 12.5px; font-weight: 700; color: var(--gold-2); }

/* zoom controls */
.zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.zoom button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--gold-soft); background: rgba(4, 30, 17, 0.85);
  cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.zoom button:hover { border-color: var(--gold); }
/* undo / redo, bottom left of the floor */
.history { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px; z-index: 2; }
.history button {
  width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--gold-soft); background: rgba(4, 30, 17, 0.85);
  cursor: pointer; font-size: 19px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.history button:hover:not(:disabled) { border-color: var(--gold); }
.history button:disabled { opacity: 0.35; cursor: default; }
svg.board.panning { cursor: grabbing; }

/* A cut-short stack or label shown in full (hover, or tap on a touch screen). */
.peek {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; max-width: min(420px, calc(100% - 12px));
  padding: 6px 8px; border-radius: 8px; background: rgba(6, 28, 18, 0.96); border: 1px solid var(--gold-soft);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); font-size: 12.5px;
}
.peek .hand { flex-wrap: wrap; }
.peek-t { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.peek.type-info { z-index: 6; max-width: min(300px, calc(100% - 8px)); }
.card.house { box-shadow: inset 0 0 0 1px #8a6420; outline: 1px dashed #8a6420; outline-offset: -1px; background: #efe2bd; }

/* Port menu: a ring of a croupier's ports around a long press on an edge. */
.radial { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.radial::before {
  content: ''; position: absolute; left: -96px; top: -96px; width: 192px; height: 192px; border-radius: 50%;
  background: radial-gradient(circle, rgba(4, 30, 17, 0.88) 55%, rgba(4, 30, 17, 0) 72%); pointer-events: none;
}
.radial-hub, .radial-item { position: absolute; transform: translate(-50%, -50%); cursor: pointer; }
.radial-hub {
  left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; align-content: center;
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--gold-soft); color: var(--gold-2); line-height: 1;
}
.radial-hub b { font-size: 17px; }
.radial-hub span { font-size: 9.5px; font-weight: 700; color: var(--ink-2); }
.radial-item {
  min-width: 46px; padding: 6px 10px; border-radius: 999px; border: 2px solid rgba(0, 0, 0, 0.45); color: #10241a;
  font: 800 13px/1 var(--sans); white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
}
.radial-item.input { background: rgba(4, 30, 17, 0.95); }
.radial-item.on { border-color: #fff; }
.radial-item:hover, .radial-item.hot { transform: translate(-50%, -50%) scale(1.12); border-color: #fff; }
.radial-tick { font-size: 11px; }
svg.board { -webkit-touch-callout: none; }

/* Croupier picker: a grid of the floor's croupiers beside an empty hex. */
.picker {
  position: absolute; left: 0; top: 0; z-index: 5; padding: 6px; border-radius: 12px; max-width: calc(100% - 8px);
  background: rgba(4, 30, 17, 0.96); border: 1px solid var(--gold-soft); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.picker-head { font-size: 11px; color: var(--muted); margin: 0 4px 5px; }
.picker-grid { display: grid; grid-template-columns: repeat(4, 64px); gap: 3px; }
.picker-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px;
  border-radius: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.04); cursor: pointer;
}
.picker-item:hover { background: rgba(212, 175, 55, 0.14); border-color: var(--gold-soft); }
.picker-item .pal-chip { width: 32px; height: 32px; border-width: 2.5px; }
.picker-item .pal-chip span { width: 21px; height: 21px; font-size: 6.6px; }
.picker-name { font-size: 10.5px; font-weight: 600; line-height: 1.1; text-align: center; }
.picker-item kbd { position: absolute; top: 2px; right: 2px; min-width: 0; padding: 0 2px; border: 0; background: none; font-size: 8.5px; opacity: 0.5; }
.board .pick-hex { fill: rgba(242, 193, 78, 0.16); stroke: var(--gold-2); stroke-width: 2; stroke-dasharray: 5 3; pointer-events: none; }
.board .pick-edge { stroke: var(--gold-2); stroke-width: 4; stroke-linecap: round; pointer-events: none; }

/* Groups: the box being drawn, the picked-up croupiers, their toolbar. */
.box-select {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; border-radius: 3px;
  border: 1.5px dashed #6fb7ff; background: rgba(111, 183, 255, 0.12);
}
.box-select.armed { width: 0; height: 0; box-shadow: 0 0 0 6px rgba(111, 183, 255, 0.35); border-radius: 50%; }
.board .cell.lifted { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.55)); }
.board .cell.lifted .hex.table { stroke: #6fb7ff; stroke-width: 2.4; stroke-dasharray: 6 3; }
.board .cell.lifted.bad .hex.table { fill: rgba(140, 38, 50, 0.85); stroke: var(--bad); }
.lift-bar {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 12px; border-radius: 12px; background: rgba(4, 30, 17, 0.94); border: 1px solid #6fb7ff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); white-space: nowrap; max-width: calc(100% - 12px);
}
.lift-bar.bad { border-color: var(--bad); }
.lift-n { font-size: 12.5px; font-weight: 700; margin-right: 4px; overflow: hidden; text-overflow: ellipsis; }
.lift-bar button {
  width: 34px; height: 32px; flex: none; border-radius: 8px; border: 1px solid var(--gold-soft); background: rgba(0, 0, 0, 0.3);
  cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.lift-bar button:hover:not(:disabled) { border-color: var(--gold); }
.lift-bar button:disabled { opacity: 0.35; cursor: default; }
.lift-bar button.ok { background: linear-gradient(180deg, #f6d77a, #d4af37); color: #2a1d02; border-color: #f6e19c; font-weight: 800; }
.insp-head .turn-btn { padding: 3px 7px; font-size: 15px; line-height: 1; }

/* Inspector: a croupier kind picked in the palette, before placing it. */
.port-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
/* The floor panel: its heading (with Clear floor on a phone), and its
   foldable list of the floor's croupiers. */
.floor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roster-box > summary { cursor: pointer; list-style: none; user-select: none; }
.roster-box > summary::-webkit-details-marker { display: none; }
.roster-box > summary::before { content: '▸'; display: inline-block; width: 1em; transition: transform 0.15s; }
.roster-box[open] > summary::before { transform: rotate(90deg); }
.roster { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 6px; }
.roster-row { display: flex; align-items: flex-start; gap: 9px; }
.roster-row .pal-chip { width: 30px; height: 30px; border-width: 2.5px; margin-top: 1px; }
.roster-row .pal-chip span { width: 19px; height: 19px; font-size: 6.5px; }
.roster-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; }
.roster-head .port-list { margin: 0; gap: 3px; }
.roster-head .port-tag { min-width: 0; padding: 0 6px; font-size: 10px; line-height: 1.5; }
.roster-desc { color: var(--ink-2); font-size: 12.5px; line-height: 1.35; }

/* Which side a croupier faces (placeholder until croupier art). */
.board .facing { fill: none; stroke: var(--gold-2, #f2c14e); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; pointer-events: none; }
.rules-version { font-size: 11px; opacity: 0.55; letter-spacing: 0.04em; }
.lg-dot.broken { background: transparent; border: 1.5px dashed rgba(255, 255, 255, 0.35); }
.sol-score.broken { opacity: 0.6; font-style: italic; }

/* Online: sign-in and account dialogs (above every other modal), the note under a floor's plot */
.dialog-back { z-index: 60; }
.modal.dialog { max-width: 520px; }
.modal.dialog p { line-height: 1.5; }
.dlg-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.5; }
.dlg-list li { margin-bottom: 6px; }
.dlg-input {
  display: block; width: 100%; margin: 8px 0 4px; padding: 9px 11px; border-radius: 8px; font: 15px var(--sans);
  background: rgba(0, 0, 0, 0.3); color: var(--ink); border: 1px solid var(--gold-soft);
}
.dlg-status { min-height: 1.2em; margin: 8px 0 0; text-align: center; }
.compare-note { margin: 6px 0 0; font-size: 12.5px; text-align: center; }
.compare-note .btn { margin-left: 4px; }
.btn.account.signed-in { border-color: var(--gold-soft); }
.btn.account.offline { color: #ffb3b3; border-color: rgba(255, 120, 120, 0.4); }
.offline-note { color: #ffb3b3; }
.btn.danger { background: #8c2632; border-color: #c4485a; color: #fff; }
.btn.danger:hover:not(:disabled) { background: #a32e3c; }
.btn.ghost.danger { background: transparent; color: #ffb3b3; border-color: rgba(255, 120, 120, 0.4); }
.dlg-danger-row { margin: 14px 0 0; text-align: center; }
.dlg-check { display: block; margin: 4px 0 12px; font-size: 13.5px; line-height: 1.4; }
.friend-list { margin: 8px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.22); }
.friend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-box:empty { display: none; }
.invite-box { margin-top: 12px; }
.invite-link { font: 13px var(--mono, monospace); }
.sc-friend { fill: none; stroke-width: 1.8; stroke-linejoin: round; opacity: 0.9; pointer-events: none; }
.sc-friend-pt { stroke: rgba(0, 0, 0, 0.5); stroke-width: 1; }
.sc-friend-t { font-size: 10.5px; font-weight: 600; paint-order: stroke; stroke: rgba(4, 30, 18, 0.85); stroke-width: 3px; }
.lg-friend { display: inline-block; width: 14px; height: 0; margin: 0 2px 3px; border-top: 2px solid; }

/* ---------- privacy.html ---------- */
.doc-page { min-height: 100%; }
.doc { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.doc h1, .doc h2 { font-family: var(--serif); color: var(--gold-2); font-weight: 600; }
.doc h1 { font-size: 30px; margin: 8px 0 0; }
.doc h2 { font-size: 20px; margin: 28px 0 6px; }
.doc strong { color: var(--ink); }
.doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc a, .dlg-link, .help a { color: var(--gold-2); }