/* Dry Powder. Neutral, spreadsheet-like. One accent per player color. */

:root {
  /* Height of the fixed bottom bar, measured after each render so nothing fixed or scrollable is drawn behind it. */
  --hostbar-h: 62px;
  --bg: #edece6;
  --surface: #ffffff;
  --surface-2: #f8f7f4;
  --line: #dcdad4;
  --line-strong: #b9b6ad;
  --ink: #1c1c1c;
  --ink-2: #4a4a48;
  --muted: #7a7873;
  --accent: #1c1c1c;
  --danger: #c0392b;
  --up: #1f7a4d;
  --down: #b03a2e;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pc: #444;
  --pc-soft: #eee;
}

.c-teal   { --pc: #0e8a8c; --pc-soft: #dff3f3; }
.c-amber  { --pc: #c47a00; --pc-soft: #fbeed3; }
.c-purple { --pc: #7a4fb5; --pc-soft: #ece3f7; }
.c-red    { --pc: #c9382e; --pc-soft: #f9e0dd; }
.c-blue   { --pc: #2f6fd6; --pc-soft: #dfe9fa; }
.c-green  { --pc: #3a8f3f; --pc-soft: #e0f1e0; }
.c-pink   { --pc: #d24c8a; --pc-soft: #f9e1ec; }
.c-slate  { --pc: #5c6b7a; --pc-soft: #e4e8ec; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }

.page { min-height: 100dvh; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.mono { font-family: var(--mono); letter-spacing: 0.08em; }
.center { text-align: center; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.quad-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
.eyebrow { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--pc-soft); color: var(--pc); vertical-align: middle;
}
.pill { display: inline-block; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--surface); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--pc); flex: none; margin-right: 8px; }

/* Buttons and inputs */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.12s, transform 0.06s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover:not(:disabled) { background: #333; }
.btn.warn { border-color: #d8a23a; background: #fff6e3; }
.btn.big { min-height: 48px; padding: 10px 20px; font-size: 1.05rem; }
.btn.tiny { min-height: 30px; padding: 3px 10px; font-size: 0.8rem; font-weight: 600; }
.input {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface); font: inherit; color: var(--ink);
}
.input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.input.select { width: auto; min-width: 170px; }
.code-input { font-family: var(--mono); letter-spacing: 0.25em; text-transform: uppercase; font-size: 1.1rem; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
/* The wordmark: vector paths that fill with the text colour, sized by the place it sits. */
.wordmark { display: block; height: 1em; width: auto; }
.brand-wordmark { height: 26px; }
.landing .brand-wordmark { height: 56px; }
.mat-wordmark { height: calc(var(--mm) * 15); }
.back-wordmark { height: max(8px, calc(var(--mm) * 6)); margin: 0 auto; }

/* Landing */
.landing { max-width: 560px; margin: 0 auto; padding: 40px 16px 32px; display: flex; flex-direction: column; gap: 20px; }
.hero { display: flex; flex-direction: column; gap: 20px; }
.landing h1 { font-size: 2rem; margin-top: 8px; }
/* Wide screens: the landing page is one viewport, actions on the left and the round summary on the right. */
@media (min-width: 1100px) and (min-height: 600px) {
  .landing { max-width: 1120px; height: 100dvh; box-sizing: border-box; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 56px; row-gap: 14px; align-items: center; overflow: hidden; }
  .hero { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .landing .howto { grid-column: 2; grid-row: 2; }
  .landing .center { grid-column: 2; grid-row: 3; text-align: left; }
  .landing .foot { grid-column: 2; grid-row: 4; align-self: end; padding-bottom: 20px; }
  .landing h1 { font-size: 2.4rem; }
}
.lede { font-size: 1.05rem; color: var(--ink-2); }
.landing-actions { display: flex; flex-direction: column; gap: 12px; }
.join-form { display: flex; gap: 8px; }
.join-form .input { flex: 1; }
.howto { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.howto ol { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.foot { font-size: 0.8rem; }
.gate { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }

/* Lobby and the final table: one viewport each, nothing below the fold.
   Only the seat list and the log scroll, and only when they overflow. */
.lobby, .over {
  max-width: 1100px; margin: 0 auto; box-sizing: border-box;
  height: 100dvh; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; overflow: hidden;
}
.lobby > .topbar, .over > .topbar { grid-row: 1; }
.lobby > .tutorial-note { grid-row: 2; }
.lobby-grid, .over-grid { grid-row: 3; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lobby-foot, .over-foot { grid-row: 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lobby-foot .grow, .over-foot .grow { flex: 1; }
.lobby-sub { text-align: right; }
@media (min-width: 860px) {
  .lobby-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .over-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.lobby .card, .over .card { min-height: 0; overflow: hidden; }
.lobby-players .seatlist { overflow-y: auto; min-height: 0; }
.lobby-invite { overflow-y: auto; }
.lobby-bots { border-top: 1px dashed var(--line-strong); padding-top: 10px; }
.lobby-bot-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lobby-bot-row .btn { min-width: 0; padding-left: 6px; padding-right: 6px; }
.over-head { display: flex; flex-direction: column; gap: 4px; }
.over-you { font-weight: 600; color: var(--ink); }
.over-table-scroll { min-height: 0; }
.over-tabs { flex-wrap: wrap; margin-bottom: 6px; }
.over-log { min-height: 0; }
.over-log-scroll { overflow-y: auto; min-height: 0; }
.results td.up { color: var(--up); font-weight: 600; }
.results td.down { color: var(--down); font-weight: 600; }
.over .results thead th { position: sticky; top: 0; background: var(--surface); }
/* Short screens: drop the prose so the table and the buttons still fit without a scrollbar. */
@media (max-height: 620px) {
  .over-head p { display: none; }
  .over-head .over-you { display: block; }
  .over h1 { font-size: 1.25rem; }
  .lobby .muted.small { display: none; }
}
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.linkrow { display: flex; gap: 8px; }
.linkrow .input { flex: 1; font-size: 0.9rem; letter-spacing: 0.02em; }
.seatlist { display: flex; flex-direction: column; }
.seat { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.seat:last-child { border-bottom: none; }
.seat-name { font-weight: 600; }
.results { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.results th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.results td { padding: 9px 4px; height: 42px; border-bottom: 1px solid var(--line); }
.results td:nth-child(2) { white-space: nowrap; }
.results td:nth-child(2) .swatch { vertical-align: -1px; }
.results tr.you td { background: var(--surface-2); }
.results .num { text-align: right; }
.results tbody tr:first-child td { font-weight: 700; }

/* Table layout: center mat | your side (hand + mat) | other funds. Stacked on phones, 40/40/20 on wide screens. */
.table { max-width: 1700px; margin: 0 auto; padding: 8px 12px calc(var(--hostbar-h) + 12px); display: flex; flex-direction: column; gap: 12px; }
.viewport { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.board-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.board-col.player .board-wrap .board { --mm: calc(100cqw / 300); }
.board-col.player .board-wrap.zoomed .board { --mm: 2.1px; }
/* No visible scrollbars inside the table: columns, hands and strips still scroll by wheel, trackpad or touch. */
.viewport, .viewport * { scrollbar-width: none; }
.viewport::-webkit-scrollbar, .viewport *::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 1100px) {
  .table { height: 100dvh; box-sizing: border-box; padding: 6px 12px 0; gap: 6px; overflow: hidden; }
  /* The center column is exactly as wide as the mat is tall (--center-side, measured by the client), so nothing is wasted beside a square; your column takes the rest and never scrolls. */
  .viewport { flex: 1; display: grid; grid-template-columns: minmax(280px, min(var(--center-side, 50vw), 52vw)) minmax(320px, 3fr) minmax(220px, 2fr); gap: 14px; min-height: 0; padding-bottom: calc(var(--hostbar-h) + 8px); }
  .col.center .board-wrap { flex: 1 1 auto; min-height: 0; aspect-ratio: 1 / 1; width: auto; max-width: 100%; align-self: center; }
  .col.player { overflow: hidden; }
  .col.player .board-col.player { flex: none; }
  .col.player .board-wrap.player { display: block; width: 100%; }
  .col.player .card-panel, .col.player .hand-wrap, .col.player .played-strip { flex: none; }
  /* The sell rows are the one place that may scroll, and only when a fund holds more than the screen has room for. */
  .col.player .sell-panel { flex: 0 1 auto; min-height: 0; }
  .col.player .sell-rows { min-height: 0; overflow-y: auto; }
  .col.player .cards-row { --mm: 1.25px; gap: 8px; }
  .col.player .handnote { font-size: 0.56rem; }
  .col.others { overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
  .col.others .strips { grid-template-columns: minmax(0, 1fr); }
  .col.others .strip { --mm: 2px; padding: 8px 10px 10px; }
  .col.others .strip-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .col.others .strip-sec.portfolio { grid-column: 1 / -1; }
  .col.others .strip-sec.venture, .col.others .strip-sec.play { border-left: none; padding-left: 0; }
  .col.others .strip-tokens { --mm: 1.4px; }

}
.slimhead { display: flex; align-items: center; gap: 10px; padding: 4px 4px; flex-wrap: wrap; }
.slimhead .brand { white-space: nowrap; }
.slimhead .phase { color: var(--ink-2); font-weight: 600; flex-basis: 100%; order: 5; }
@media (min-width: 720px) { .slimhead .phase { flex-basis: auto; order: 0; text-align: right; } }
.board-tools { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
/* Your chips, under the mat rather than on it: the printed mat has no cash area either. */
.mat-cash { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 0; flex: none; }
.mat-cash b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sheet-build.borrow b, .m-build.borrow b { color: var(--danger); }
.board-tools .btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (min-width: 900px) { .board-tools .zoom-btn { display: none; } }

/* Move sheet: your hand and the lots, big, over the table */
.move-sheet { position: fixed; inset: 0; bottom: var(--hostbar-h); z-index: 45; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
.move-sheet::-webkit-scrollbar { display: none; }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head h2 { font-size: 1.4rem; text-transform: none; letter-spacing: -0.01em; }
.sheet-how { font-size: 0.95rem; color: var(--ink-2); line-height: 1.45; max-width: 900px; }
.sheet-how b { color: var(--ink); }
.sheet-sec { display: flex; flex-direction: column; gap: 8px; }
/* One grid of identical boxes: same rows in the same order at fixed heights, so a lot with a longer note is never taller than its neighbours. Your sector focus card is the last cell, drawn the same way. */
.sheet-lots { --mm: 1.5px; display: grid; grid-template-columns: repeat(var(--cells, 6), minmax(120px, 190px)); gap: 10px; }
.sheet-lot, .sheet-sector-cell { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 8px; border: 2px solid transparent; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); font-size: 0.72rem; color: var(--ink-2); text-align: center; min-width: 0; }
.sheet-lot > *, .sheet-sector-cell > * { flex: none; width: 100%; }
.sheet-lot > .card, .sheet-sector-cell > .card { width: calc(var(--mm) * 63); }
.sheet-sector-cell { border-style: dashed; border-color: var(--line-strong); background: var(--mint); }
.sheet-sector-cell > .card { margin: 0 auto; }
.sheet-lot-sector { height: 14px; line-height: 14px; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-lot-note { height: 32px; display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.3; }
.sheet-lot-note b { color: var(--ink); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-lot-note span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-lot-label { height: 16px; line-height: 16px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }
/* The hand, in a popup over the sheet for the lot whose Bid you pressed: bid cards only, the build card stays on the sheet. */
.hand-pop-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(24, 24, 22, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade-in 0.15s ease-out; }
.hand-pop { width: min(1040px, 100%); max-height: min(92dvh, 100%); overflow-y: auto; box-sizing: border-box; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px 16px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; gap: 10px; }
.hand-pop-head { display: flex; align-items: center; gap: 12px; }
.hand-pop-card { --mm: 1.2px; flex: none; }
.hand-pop-card .card-flavor { display: none; }
.hand-pop-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hand-pop-title h3 { font-size: 1.1rem; text-transform: none; letter-spacing: -0.01em; }
.hand-pop .hand { max-width: none; }
.hand-pop .cards-scroll::after { display: none; }
.hand-pop .cards-row { --mm: 1.7px; flex-wrap: wrap; overflow: visible; gap: 12px; padding: 8px 4px 10px; }
.hand-pop .lot-picks { display: none; }
.hand-pop .outcome { font-size: 0.95rem; }
.hand-pop .outcome-actions .btn.primary { min-height: 48px; font-size: 1.05rem; min-width: 240px; }
.move-fab { position: fixed; right: 16px; bottom: calc(var(--hostbar-h) + 16px); z-index: 34; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); }
/* The walkthrough's prompt bar sits over the move sheet: it is what tells you to play. */
.reopen-move { align-self: flex-start; margin-bottom: 6px; }
@media (min-width: 1100px) {
  .move-sheet {
    padding: 14px 28px 16px; overflow: hidden; gap: 8px;
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    /* The table row takes the slack, so the sheet never grows past the viewport; the hand lives in its popup. */
  }
  .move-sheet > * { min-width: 0; }
  .move-sheet > .sheet-sec-lots { min-height: 0; }
  .move-sheet > .sheet-table { align-self: end; }
  /* The hand in your column (while peeking) keeps only the staged bid's headline and its buttons; the popup carries the explanation. */
  .col.player .hand .outcome-list { display: none; }
  /* All ten bid cards on one row at 1040 px. */
  .hand-pop .cards-row { --mm: 1.4px; gap: 10px; padding: 6px 2px 8px; justify-content: flex-start; }
  .hand-pop .hand .card .card-flavor, .hand-pop .hand .card .card-color { display: none; }
  .hand-pop .outcome { font-size: 0.9rem; gap: 6px; padding-top: 8px; }
  .hand-pop .outcome-actions .btn.primary { min-height: 44px; font-size: 1rem; min-width: 220px; }
  /* Every lot and the sector card on one row: the cells share the width and the card scales with its cell, so six cells fit at 1100 px. */
  .move-sheet .sheet-lots { container-type: inline-size; }
  .move-sheet .sheet-lot > .card, .move-sheet .sheet-sector-cell > .card { --mm: min(2px, calc((100cqw - (var(--cells, 6) - 1) * 10px) / var(--cells, 6) / 63 * 0.8)); }
  .move-sheet .sheet-lots .card-flavor { display: none; }
  .move-sheet .sheet-build b { font-size: 0.92rem; }
  .move-sheet .sheet-how { font-size: 0.88rem; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .move-sheet > .sheet-how { display: none; }
  .move-sheet .sheet-lot, .move-sheet .sheet-sector-cell { padding: 8px 6px 6px; gap: 4px; }
  .move-sheet .sheet-lot > .card, .move-sheet .sheet-sector-cell > .card { --mm: min(1.5px, calc((100cqw - (var(--cells, 6) - 1) * 10px) / var(--cells, 6) / 63 * 0.8)); }
  .move-sheet .sheet-head h2 { font-size: 1.15rem; }
  .hand-pop .cards-row { --mm: 1.25px; gap: 8px; }
}
@media (min-width: 1100px) and (max-height: 740px) {
  .move-sheet > .sheet-table { display: none; }
  .hand-pop .outcome { font-size: 0.82rem; }
  .hand-pop .cards-row { --mm: 1.1px; }
}

/* Step bar: where the round is and what you do now */
.stepbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 0.86rem; line-height: 1.3; }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 4px; flex: none; }
.step { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 8px 0 4px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; }
.step b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: var(--ink-2); font-size: 0.68rem; }
.step.on { border-color: var(--ink); color: var(--ink); background: #fff; }
.step.on b { background: var(--ink); color: #fff; }
.step.done { color: var(--mint-ink); border-color: var(--mint-line); }
.step.done b { background: var(--mint-ink); color: #fff; }
.step-now { flex: 1 1 260px; min-width: 0; color: var(--ink); font-weight: 600; }
.step-score { flex: none; color: var(--muted); font-size: 0.74rem; white-space: nowrap; }

/* Sell step panel */
.sell-panel { gap: 6px; }
.sell-rows { display: flex; flex-direction: column; }
.sell-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 6px 0; min-height: 50px; border-top: 1px solid var(--line); }
.sell-what { min-width: 0; line-height: 1.2; }
.sell-what b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sell-what .muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sell-math { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sell-math .value { font-weight: 800; font-size: 1.05rem; }
.sell-math .value.neg { color: var(--danger); }
.sell-btns { display: flex; gap: 6px; justify-content: flex-end; }
.sell-note { line-height: 1.3; }
.sell-panel.collapsed { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 14px; }
.focus-sell .col.center, .focus-sell .col.others { opacity: 0.38; filter: saturate(0.4); transition: opacity 0.25s, filter 0.25s; }
.focus-sell .col.center:hover, .focus-sell .col.others:hover { opacity: 0.75; filter: none; }
.focus-sell .sell-panel { box-shadow: 0 0 0 2px var(--ink), var(--shadow); }
.vcell.pending { border-style: dashed; border-color: var(--token-teal); color: var(--token-teal); font-weight: 700; }

/* Until you have played, everything you cannot act on steps back. The lots, your hand and the outcome panel stay lit. */
.focus-place .col.others, .focus-place .board-col.player, .focus-place .center-board .market-zone, .focus-place .center-board .multiple-zone, .focus-place .center-board .b-title, .focus-place .center-board .b-round { opacity: 0.38; filter: saturate(0.4); transition: opacity 0.25s, filter 0.25s; }
.focus-place .col.others:hover, .focus-place .board-col.player:hover { opacity: 0.75; filter: none; }
.focus-place .hand { box-shadow: 0 0 0 2px var(--ink), var(--shadow); }

/* Outcome panel: what the staged move does */
.outcome { border-top: 1px dashed var(--line-strong); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); }
.outcome.empty { display: block; }
.outcome.empty b { color: var(--ink); }
.outcome-head { color: var(--ink); font-size: 1rem; }
.outcome-head b { font-size: 1.15rem; }
.outcome-warn { color: #a36a00; font-weight: 700; }
.outcome-list { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.outcome-list b { color: var(--ink); }
.outcome .good { color: var(--mint-ink); font-weight: 700; }
.outcome .bad { color: var(--danger); font-weight: 700; }
.debt-callout { color: #fff; background: var(--danger); border-radius: 6px; padding: 1px 7px; }
/* The borrow step: the button sits inline at the end of its line, and the line is the one place the debt is decided. */
.borrow-step .borrow-btn { margin-left: 6px; vertical-align: baseline; }
.borrow-step:not(.outcome-warn) { color: var(--ink-2); }
.m-borrow { min-height: 52px; }
.outcome.has-debt .outcome-head b { color: var(--danger); }
.outcome-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.outcome-actions .btn.primary { min-width: 180px; }
.outcome-done { font-weight: 700; color: var(--mint-ink); background: var(--mint); border-radius: 6px; padding: 8px 12px; }
.lot-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.lot-pick { all: unset; cursor: pointer; box-sizing: border-box; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; padding: 5px 9px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 0.74rem; color: var(--ink-2); line-height: 1.3; }
.lot-pick:hover { border-color: var(--ink); }
.lot-pick.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.lot-pick-n { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.lot-pick-name { font-weight: 700; color: var(--ink); }
.lot-pick.on .lot-pick-name { color: #fff; }
.handnote.on { color: var(--ink); }

/* Palette for the printed pieces */
:root {
  --mat: #fbfaf5; --mat-line: #cfcabb;
  --mint: #e8f3ec; --mint-line: #a9cdb8; --mint-ink: #1e6b46; --mint-deep: #134a30;
  --peach: #f9ecd8; --peach-line: #d4b283; --peach-ink: #7d4e15; --peach-deep: #4a2c08;
  --wood: #e3c79f; --wood-line: #b8955f; --token-teal: #1f9e9a; --token-red: #c0392b;
}

/*
 * Boards are laid out in millimetres and scaled by --mm (pixels per millimetre).
 * Center mat 400 mm, player mat 300 mm, cards 63 x 88 mm.
 */
.board-wrap { container-type: inline-size; width: 100%; }
.board-wrap .board { --mm: calc(100cqw / 400); }
.board-wrap.player { display: flex; justify-content: center; }
.board-wrap.zoomed { overflow: auto; aspect-ratio: 1 / 1; position: relative; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.board-wrap.zoomed .board { --mm: 2.1px; }
.board-wrap.zoomed.player .board { --mm: 2.1px; }
.board-wrap.zoomed.player { display: block; }
.board-wrap.zoomed::after { content: "drag to pan"; position: sticky; left: 0; bottom: 0; display: block; width: max-content; margin-top: -22px; padding: 2px 8px; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; background: rgba(28, 28, 28, 0.7); pointer-events: none; }
.board-wrap.zoomed.panned::after { display: none; }
/* Small on-screen center mats (under 720px wide) drop the flavour line so the card name and EBITDA stay clear. */
@container (max-width: 720px) {
  .board .card.company .card-flavor, .board .card.market .card-flavor { display: none; }
  .board .card.player .card-color { display: none; }
  .board .slot-mine { display: none; }
  .board .card-name { font-size: max(7px, calc(var(--mm) * 4.4)); }
}
@container (max-width: 260px) {
  .board .card .card-caption, .board .card .card-eyebrow, .board .card .card-flavor, .board .card .bonus, .board .card .card-band { display: none; }
  .board .card .card-name { font-size: 7px; margin-top: 0; padding-bottom: 1px; }
  .board .card.player { padding: calc(var(--mm) * 3); }
}
@container (max-height: 260px) {
  .board .card .card-caption, .board .card .card-eyebrow, .board .card .card-flavor, .board .card .bonus, .board .card .card-band { display: none; }
  .board .card .card-name { font-size: 7px; margin-top: 0; padding-bottom: 1px; }
  .board .card.player { padding: calc(var(--mm) * 3); }
}
.export-stage { position: absolute; left: -100000px; top: 0; }
.export-stage .board-wrap { width: calc(400px * 3); }
.board-wrap.export .board { --mm: 3px; }

.board { position: relative; box-sizing: border-box; background: var(--mat); border: calc(var(--mm) * 1.2) solid var(--mat-line); color: var(--ink); font-family: var(--font); line-height: 1.2; flex: none; overflow: visible; }
.center-board { width: calc(var(--mm) * 400); height: calc(var(--mm) * 400); }
.player-board { width: calc(var(--mm) * 300); height: calc(var(--mm) * 300); border-color: var(--pc); border-width: calc(var(--mm) * 2); }
.board .b-label, .board .zone-label, .board .quad-label, .board .slot-label { font-size: max(8px, calc(var(--mm) * 3.6)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
.board .zone-note, .board .quad-note, .board .fund-note, .board .venture-notes { font-size: max(7px, calc(var(--mm) * 2.8)); color: var(--muted); line-height: 1.3; }
.board .zone-label.mint, .board .zone-note.mint { color: var(--mint-ink); }
.board .zone-label.peach, .board .zone-note.peach { color: var(--peach-ink); }
.board .slot-hint { font-size: max(7px, calc(var(--mm) * 2.8)); color: var(--muted); font-style: italic; text-align: center; padding: calc(var(--mm) * 2); }
.board .tiny { font-size: max(7px, calc(var(--mm) * 2.8)); }
.board .btn.tiny { min-height: max(22px, calc(var(--mm) * 7)); padding: calc(var(--mm) * 1) calc(var(--mm) * 2.5); font-size: max(10px, calc(var(--mm) * 3)); border-radius: calc(var(--mm) * 1.2); }

/* Center board regions (mm). Three bands: the round track, then the lots beside the
   market, then the multiple track, which gets the height five cards never needed. */
.b-title { position: absolute; left: calc(var(--mm) * 12); top: calc(var(--mm) * 12); }
.b-round { position: absolute; left: calc(var(--mm) * 12); top: calc(var(--mm) * 40); width: calc(var(--mm) * 376); height: calc(var(--mm) * 34); display: flex; align-items: center; gap: calc(var(--mm) * 6); }
.b-round .b-label { display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(var(--mm) * 0.8); text-align: left; width: calc(var(--mm) * 92); flex: none; font-size: max(8px, calc(var(--mm) * 4)); }
.b-round-note { font-size: max(6px, calc(var(--mm) * 2.5)); font-weight: 700; letter-spacing: 0.06em; color: var(--mint-ink); }
.b-round-cells { display: inline-flex; gap: calc(var(--mm) * 10); }
.b-round-cell { position: relative; width: calc(var(--mm) * 18); height: calc(var(--mm) * 18); border-radius: 50%; border: calc(var(--mm) * 0.6) solid var(--line-strong); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: max(9px, calc(var(--mm) * 6.5)); font-weight: 600; color: var(--ink-2); }
.b-round-cell.past { color: var(--muted); border-style: dashed; }
.b-round-cell.on { border-color: var(--ink); }
/* A scheduled IPO window: filled mint and captioned, so the round reads as a sell round on paper too. */
.b-round-cell.ipo { background: var(--mint); border-color: var(--mint-line); color: var(--mint-deep); }
.b-round-cell.ipo.past { border-style: dashed; color: var(--mint-ink); opacity: 0.7; }
.b-round-cell.ipo.on { border-color: var(--mint-ink); box-shadow: 0 0 0 calc(var(--mm) * 0.6) var(--mint-line); }
.b-round-ipo { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + var(--mm) * 1); font-size: max(5px, calc(var(--mm) * 2.4)); font-weight: 800; letter-spacing: 0.08em; color: var(--mint-ink); line-height: 1; }
.cube-black { width: calc(var(--mm) * 8); height: calc(var(--mm) * 8); background: #1c1c1c; border-radius: calc(var(--mm) * 1); box-shadow: calc(var(--mm) * 0.7) calc(var(--mm) * 0.7) 0 #555; }

.zone { position: absolute; box-sizing: border-box; }
.zone-label { position: absolute; left: calc(var(--mm) * 6); top: calc(var(--mm) * 5); }
.zone-note { position: absolute; right: calc(var(--mm) * 6); top: calc(var(--mm) * 5); max-width: 60%; text-align: right; }
.lots-zone { left: calc(var(--mm) * 12); top: calc(var(--mm) * 84); width: calc(var(--mm) * 228); height: calc(var(--mm) * 124); background: var(--mint); border: calc(var(--mm) * 0.5) solid var(--mint-line); }
.lot-slot { position: absolute; top: calc(var(--mm) * 16); width: calc(var(--mm) * 66); height: calc(var(--mm) * 108); }
.slot-label { position: absolute; left: calc(var(--mm) * 1.5); top: 0; max-width: calc(100% - var(--mm) * 3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mint-ink); }
.slot-mine { color: var(--ink); }
.lot-slot > .card-slot, .lot-slot > .lot-btn { position: absolute; left: calc(var(--mm) * 1.5); top: calc(var(--mm) * 9); }
.lot-btn .card-slot { position: static; }
.lot-btn { all: unset; display: block; cursor: pointer; width: calc(var(--mm) * 63); height: calc(var(--mm) * 88); }
.lot-btn:hover .card { transform: translateY(calc(var(--mm) * -1)); }

.card-slot { width: calc(var(--mm) * 63); height: calc(var(--mm) * 88); box-sizing: border-box; border-radius: calc(var(--mm) * 3); display: flex; align-items: center; justify-content: center; }
.card-slot.empty { border: calc(var(--mm) * 0.4) dashed var(--line-strong); }
.card-slot.selected .card { outline: calc(var(--mm) * 1.2) solid var(--ink); outline-offset: calc(var(--mm) * 0.8); }
.card-slot.mine .card { box-shadow: 0 0 0 calc(var(--mm) * 1) var(--mat), 0 0 0 calc(var(--mm) * 2) var(--ink); }

/* The reveal on screen: the bids lie over the lower part of the company card, leaving its
   sector and name showing, and the outcome takes the line under the card. */
.bid-revealed { position: absolute; left: 0; right: 0; top: calc(var(--mm) * 24); bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--mm) * 1.5); box-sizing: border-box; background: rgba(255, 255, 255, 0.92); border-radius: 0 0 calc(var(--mm) * 3) calc(var(--mm) * 3); }
.slot-bids { display: flex; flex-wrap: wrap; gap: calc(var(--mm) * 1.5) calc(var(--mm) * 2); justify-content: center; }
.bid-revealed.many .slot-bids { gap: calc(var(--mm) * 1) calc(var(--mm) * 1.5); }
.slot-bid { display: flex; flex-direction: column; align-items: center; gap: calc(var(--mm) * 0.6); position: relative; }
.slot-bid.lost { opacity: 0.55; }
.slot-bid.won .card-scaled { outline: calc(var(--mm) * 0.8) solid var(--ink); outline-offset: calc(var(--mm) * 0.5); border-radius: calc(var(--mm) * 1); }
.slot-bid-name { font-size: max(6px, calc(var(--mm) * 2.2)); color: var(--mint-deep); max-width: calc(var(--mm) * 24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.slot-bid-debt { display: flex; gap: calc(var(--mm) * 0.5); }
.slot-bid-debt .dtoken { width: calc(var(--mm) * 3); height: calc(var(--mm) * 3); }
/* Two lines at most ("Ninth Avenue · $15 (tie)" wraps at laptop scale), in the strip under the card. */
.slot-outcome { position: absolute; left: 0; top: calc(var(--mm) * 98); width: calc(var(--mm) * 66); font-size: max(7px, calc(var(--mm) * 3)); font-weight: 700; color: var(--mint-deep); text-align: center; line-height: 1.1; }

.market-zone { left: calc(var(--mm) * 250); top: calc(var(--mm) * 84); width: calc(var(--mm) * 138); height: calc(var(--mm) * 124); background: var(--peach); border: calc(var(--mm) * 0.5) solid var(--peach-line); }
.market-slot { position: absolute; top: calc(var(--mm) * 16); width: calc(var(--mm) * 63); height: calc(var(--mm) * 108); }
.market-slot.deck { left: calc(var(--mm) * 6); }
.market-slot.now { left: calc(var(--mm) * 73); }
.market-slot .slot-label { color: var(--ink-2); }
.market-slot .card-slot { position: absolute; left: 0; top: calc(var(--mm) * 9); }
.market-slot .card-slot:not(:has(.card)) { border: calc(var(--mm) * 0.4) dashed var(--peach-line); }
.market-slot .card-slot .slot-hint { color: var(--peach-ink); }
.market-slot .zone-note { top: calc(var(--mm) * 99); right: 0; left: 0; max-width: none; text-align: center; }

.multiple-zone { left: calc(var(--mm) * 12); top: calc(var(--mm) * 226); width: calc(var(--mm) * 376); height: calc(var(--mm) * 162); background: var(--peach); border: calc(var(--mm) * 0.5) solid var(--peach-line); }
.multiple-zone .zone-label, .multiple-zone .zone-note { color: var(--peach-ink); }
.mtrack { position: absolute; left: calc(var(--mm) * 6); top: calc(var(--mm) * 20); width: calc(100% - var(--mm) * 12); display: flex; gap: calc(var(--mm) * 3.5); }
.mcell { position: relative; flex: 1; height: calc(var(--mm) * 120); box-sizing: border-box; background: var(--peach); border: calc(var(--mm) * 0.5) solid var(--peach-line); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--mm) * 18) 0; color: var(--peach-ink); font-weight: 700; }
.mcell-n { font-size: max(14px, calc(var(--mm) * 16)); line-height: 1; }
.mcell-n.flip { transform: rotate(180deg); }
.mcell-start { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: max(5px, calc(var(--mm) * 2.4)); text-transform: uppercase; letter-spacing: 0.1em; }
.mcell.on { background: #fff3df; border-color: var(--peach-ink); }
.cube-nat { position: absolute; top: calc(var(--mm) * 4); left: 50%; margin-left: calc(var(--mm) * -5); width: calc(var(--mm) * 10); height: calc(var(--mm) * 10); background: var(--wood); border: calc(var(--mm) * 0.4) solid var(--wood-line); border-radius: calc(var(--mm) * 1); box-shadow: calc(var(--mm) * 1) calc(var(--mm) * 1) 0 var(--wood-line); }
.mend { position: absolute; top: calc(var(--mm) * 148); font-size: max(6px, calc(var(--mm) * 2.8)); text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); }
.mend.cold { left: calc(var(--mm) * 6); }
.mend.hot { right: calc(var(--mm) * 6); }

/* Player board (mm): the portfolio across the top half, then sector focus, play and venture
   in three columns across the bottom. No cash area: chips are counted, not placed. */
.quad { position: absolute; box-sizing: border-box; }
.quad.portfolio { left: calc(var(--mm) * 10); top: calc(var(--mm) * 10); width: calc(var(--mm) * 280); height: calc(var(--mm) * 136); }
.quad.sector, .quad.play, .quad.venture { top: calc(var(--mm) * 150); width: calc(var(--mm) * 93.3); height: calc(var(--mm) * 140); border-top: calc(var(--mm) * 0.4) solid var(--mat-line); padding-top: calc(var(--mm) * 4); }
.quad.sector { left: calc(var(--mm) * 10); }
.quad.play { left: calc(var(--mm) * 103.3); border-left: calc(var(--mm) * 0.4) solid var(--mat-line); border-right: calc(var(--mm) * 0.4) solid var(--mat-line); }
.quad.venture { left: calc(var(--mm) * 196.7); }
.board .quad-label { position: absolute; left: calc(var(--mm) * 4); top: calc(var(--mm) * 3); }
.board .quad.sector .quad-label, .board .quad.play .quad-label, .board .quad.venture .quad-label { top: calc(var(--mm) * 7); }
.board .quad.play .quad-label { left: calc(var(--mm) * 8); }
.card-zone { position: absolute; left: calc(var(--mm) * 4); top: calc(var(--mm) * 12); width: calc(var(--mm) * 272); height: calc(var(--mm) * 96); border: calc(var(--mm) * 0.4) dashed var(--line-strong); box-sizing: border-box; }
.card-zone.empty { display: flex; align-items: center; justify-content: center; }
.fan-card { position: absolute; top: calc(var(--mm) * 3); }
.quad.portfolio .quad-note { position: absolute; left: calc(var(--mm) * 4); top: calc(var(--mm) * 110); }
/* The sell rows sit under the cards; with several holdings they wrap, so they start right under the card zone and the quadrant paints above the row below it. */
.quad.portfolio, .quad.venture { z-index: 1; }
.sell-row { position: absolute; left: calc(var(--mm) * 4); right: calc(var(--mm) * 2); top: calc(var(--mm) * 110); display: flex; flex-wrap: wrap; gap: calc(var(--mm) * 1) calc(var(--mm) * 3); }
.quad.portfolio:has(.sell-row) .quad-note { display: none; }
.sell-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(var(--mm) * 1.5); font-size: max(8px, calc(var(--mm) * 3)); max-width: 100%; }
/* Company names run long ("Regional Hospital Network"), and an ellipsis on the mat hides
   which asset a price belongs to. They wrap instead: the row is flex-wrapped already. */
.sell-name { max-width: calc(var(--mm) * 56); overflow-wrap: anywhere; color: var(--ink-2); }
.sell-item .value { font-weight: 700; font-variant-numeric: tabular-nums; }
.sell-item .value.neg { color: var(--danger); }
.quad.sector .card-slot { position: absolute; left: calc(var(--mm) * 15); top: calc(var(--mm) * 16); }
.quad.sector .card-slot.empty .slot-hint { max-width: calc(var(--mm) * 50); }
.sector-lower { position: absolute; left: calc(var(--mm) * 4); right: calc(var(--mm) * 4); top: calc(var(--mm) * 108); bottom: calc(var(--mm) * 2); display: flex; flex-direction: column; gap: calc(var(--mm) * 1.5); overflow: hidden; font-size: max(8px, calc(var(--mm) * 3.4)); }
.sell-ctl { display: flex; flex-direction: column; gap: calc(var(--mm) * 1.5); align-items: flex-start; }
.quad.venture .card-slot { position: absolute; left: calc(var(--mm) * 4); top: calc(var(--mm) * 16); }
.quad.venture .vcol { position: absolute; left: calc(var(--mm) * 72); top: calc(var(--mm) * 16); display: flex; flex-direction: column; gap: calc(var(--mm) * 2.2); }
.vcell { width: calc(var(--mm) * 9); height: calc(var(--mm) * 9); border-radius: 50%; border: calc(var(--mm) * 0.4) solid var(--line-strong); background: #fff; display: flex; align-items: center; justify-content: center; font-size: max(6px, calc(var(--mm) * 3.2)); color: var(--muted); box-sizing: border-box; }
.vcell.filled { border-color: var(--token-teal); }
.gtoken { width: calc(var(--mm) * 6.5); height: calc(var(--mm) * 6.5); border-radius: 50%; background: var(--token-teal); box-shadow: inset 0 calc(var(--mm) * -0.7) 0 rgba(0, 0, 0, 0.2), 0 calc(var(--mm) * 0.4) calc(var(--mm) * 0.4) rgba(0, 0, 0, 0.3); }
.venture-notes { position: absolute; left: calc(var(--mm) * 4); right: calc(var(--mm) * 2); top: calc(var(--mm) * 108); }
.quad.venture:has(.venture-sell) .venture-notes { display: none; }
.venture-hint { position: absolute; left: calc(var(--mm) * 4); right: calc(var(--mm) * 2); top: calc(var(--mm) * 124); }
.venture-sell { top: calc(var(--mm) * 108); left: calc(var(--mm) * 4); }
.quad.play .card-slot { position: absolute; left: calc(var(--mm) * 15); top: calc(var(--mm) * 16); }
.quad.play .card-slot.empty .slot-hint { max-width: calc(var(--mm) * 50); }
.quad.play .quad-note { position: absolute; left: calc(var(--mm) * 3); right: calc(var(--mm) * 3); top: calc(var(--mm) * 108); text-align: center; }
.b-foot-name { position: absolute; left: calc(var(--mm) * 10); bottom: calc(var(--mm) * 2.5); font-size: max(9px, calc(var(--mm) * 4)); font-weight: 700; }
.b-foot-color { position: absolute; right: calc(var(--mm) * 10); bottom: calc(var(--mm) * 2.5); font-size: max(7px, calc(var(--mm) * 3.4)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--pc); }

/* Cards: 63 x 88 mm at --mm */
.card { position: relative; width: calc(var(--mm) * 63); height: calc(var(--mm) * 88); box-sizing: border-box; border-radius: calc(var(--mm) * 3); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.1s; flex: none; }
.card.company { background: var(--mint); border: calc(var(--mm) * 0.4) solid var(--mint-line); color: var(--mint-deep); padding: calc(var(--mm) * 4.5); }
.card.market { background: #fff7ea; border: calc(var(--mm) * 0.4) solid var(--peach-line); color: var(--peach-ink); padding: calc(var(--mm) * 4.5); }
.card.market .card-name, .card.market .card-big b { color: var(--peach-deep); }
/* The longest sector ("Industrials") runs past a narrow card at 0.12em, so the tracking
   gives way before the word does: a clipped label is worse than a tighter one. */
.card-eyebrow { font-size: max(6px, calc(var(--mm) * 2.6)); text-transform: uppercase; letter-spacing: clamp(0.02em, calc(var(--mm) * 0.06), 0.12em); }
.card-eyebrow.row { display: flex; justify-content: space-between; }
.card-eyebrow .bonus { color: var(--ink); }
.card-name { font-weight: 700; font-size: max(8px, calc(var(--mm) * 4.4)); line-height: 1.15; margin-top: calc(var(--mm) * 1.5); padding-bottom: calc(var(--mm) * 2); border-bottom: calc(var(--mm) * 0.3) solid currentColor; overflow-wrap: break-word; hyphens: auto; }
/* The number area gives way before the flavour line is pushed out of the card. */
.card-big { min-height: 0; }
.card-flavor { flex: none; }
.card.company .card-name { border-color: var(--mint-line); }
.card.market .card-name { border-color: var(--peach-line); }
.card-big { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--mm) * 1); }
.card-big b { font-size: max(16px, calc(var(--mm) * 16)); line-height: 1; }
.card-big.text b { font-size: max(10px, calc(var(--mm) * 6.5)); text-align: center; }
.card-caption { font-size: max(6px, calc(var(--mm) * 2.6)); text-transform: uppercase; letter-spacing: 0.12em; text-align: center; }
.card-ask { display: block; font-size: 0.72em; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; margin-top: 2px; }
.board .card .card-ask { display: none; }
.card-flavor { font-size: max(6px, calc(var(--mm) * 2.9)); line-height: 1.3; padding-top: calc(var(--mm) * 2); border-top: calc(var(--mm) * 0.3) solid currentColor; }
.card.company .card-flavor { border-color: var(--mint-line); color: var(--mint-ink); }
.card.market .card-flavor { border-color: var(--peach-line); }
.card-growth { position: absolute; left: calc(var(--mm) * 3); bottom: calc(var(--mm) * 24); display: flex; flex-wrap: wrap; gap: calc(var(--mm) * 0.8); max-width: calc(var(--mm) * 28); }
.card-growth .gtoken { width: calc(var(--mm) * 6); height: calc(var(--mm) * 6); }
.move-sheet .lot-picks.build-targets { display: flex; }
.lot-pick:disabled { opacity: 0.45; cursor: not-allowed; }
.card-debt { position: absolute; right: calc(var(--mm) * 3); bottom: calc(var(--mm) * 24); display: flex; flex-wrap: wrap; gap: calc(var(--mm) * 0.8); max-width: calc(var(--mm) * 28); justify-content: flex-end; }
.dtoken { width: calc(var(--mm) * 6); height: calc(var(--mm) * 6); border-radius: 50%; background: var(--token-red); box-shadow: inset 0 calc(var(--mm) * -0.7) 0 rgba(0, 0, 0, 0.25), 0 calc(var(--mm) * 0.4) calc(var(--mm) * 0.4) rgba(0, 0, 0, 0.3); }
.card.sector { background: var(--surface); border: calc(var(--mm) * 0.4) solid var(--ink); color: var(--ink); padding: calc(var(--mm) * 4.5); box-shadow: inset 0 0 0 calc(var(--mm) * 1.2) var(--surface), inset 0 0 0 calc(var(--mm) * 1.6) var(--line-strong); }
.card.sector .card-name { border-color: var(--ink); }
.card.sector .card-flavor { border-color: var(--line-strong); color: var(--ink-2); }
.card.player { background: var(--pc-soft); border: calc(var(--mm) * 0.4) solid var(--pc); color: var(--pc); padding: calc(var(--mm) * 4) calc(var(--mm) * 4) calc(var(--mm) * 4) calc(var(--mm) * 8); }
.card.player .card-big b { color: var(--ink); }
.card-band { position: absolute; left: calc(var(--mm) * 2.5); top: calc(var(--mm) * 4); bottom: calc(var(--mm) * 4); width: calc(var(--mm) * 2); border-radius: calc(var(--mm) * 1); background: var(--pc); }
.card-color { text-transform: uppercase; }
.card.player .card-flavor { border-color: var(--pc); opacity: 0.85; }
.card.back { background: var(--pc); border: calc(var(--mm) * 0.4) solid var(--pc); color: rgba(255, 255, 255, 0.92); align-items: center; justify-content: center; gap: calc(var(--mm) * 1); box-shadow: inset 0 0 0 calc(var(--mm) * 1.5) var(--pc), inset 0 0 0 calc(var(--mm) * 2) rgba(255, 255, 255, 0.6); }
.card.back.deck-market { --pc: #7d4e15; }
.card.back.deck-company { --pc: #1e6b46; }
.back-title { display: block; text-align: center; }
.back-sub { font-size: max(5px, calc(var(--mm) * 2.6)); opacity: 0.85; }
.card-scaled { position: relative; flex: none; overflow: visible; }
.card-scaled .card { transform: scale(var(--k)); transform-origin: 0 0; }

/* Hand: cards at a fixed comfortable size */
.card-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.hand-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hand-head .quad-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
.cards-scroll { position: relative; }
.cards-scroll.more::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface) 80%); pointer-events: none; }
.cards-row { --mm: 1.7px; display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.hand-wrap { position: relative; }
.hand-head .hint { color: var(--ink-2); font-weight: 600; }
.handcard { all: unset; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; scroll-snap-align: start; border-radius: 8px; transition: transform 0.08s; width: calc(var(--mm) * 63); }
.handcard:hover:not(:disabled) { transform: translateY(-3px); }
.handcard.active .card { outline: 3px solid var(--ink); outline-offset: 1px; transform: translateY(-4px); }
.handcard:disabled { opacity: 0.4; cursor: not-allowed; }
.handnote { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); height: 0.8rem; line-height: 0.8rem; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handnote.danger { color: var(--danger); }

/* Other funds: summary strips */
.others { display: flex; flex-direction: column; gap: 8px; }
.others-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; min-height: 30px; }
.others-head h2 { font-size: 0.72rem; letter-spacing: 0.1em; }
.board-tools { min-height: 30px; }
.strips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.strip { --mm: 2.2px; background: var(--mat); border: 2px solid var(--pc); padding: 8px 12px 10px; min-width: 0; }
.strip.offline { opacity: 0.6; }
.strip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.strip-name { font-weight: 700; }
.strip-status { white-space: nowrap; }
.strip-cash { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.strip-body { display: flex; gap: 10px; align-items: stretch; }
.strip-sec { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.strip-sec .quad-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
.strip-sec.portfolio { flex: 1; }
.strip-sec.venture, .strip-sec.play { border-left: 1px solid var(--mat-line); padding-left: 10px; flex: none; }
/* The card rows are always one card tall, so a fund with nothing yet is the same height as one with four companies. */
.strip-cards { display: flex; gap: 6px; overflow-x: auto; height: calc(var(--mm) * 88 * 0.45 + 22px); align-items: flex-start; padding: 2px 0; }
.strip-cards .slot-hint { font-size: 0.75rem; color: var(--muted); font-style: italic; }
.strip-tokens { display: flex; gap: 3px; margin-top: 4px; --mm: 1.6px; }
.strip .card-scaled { --k: 0.45; }
.strip-play { height: calc(var(--mm) * 88 * 0.45 + 22px); display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }
.strip-play .played-col { gap: 3px; }
.strip-play .slot-hint { font-size: 0.75rem; color: var(--muted); font-style: italic; }
.played-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* Sell values and bid lists */
.assets { display: flex; flex-direction: column; }
.asset { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.asset:last-child { border-bottom: none; }
.asset-main { display: flex; align-items: center; min-width: 0; }
.asset-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.value { font-weight: 700; font-variant-numeric: tabular-nums; }
.value.neg { color: var(--danger); }

/* Rulebook */
.rules-page { max-width: 760px; margin: 0 auto; padding: 16px 16px 60px; display: flex; flex-direction: column; gap: 14px; }
.rules-page .brand { text-decoration: none; }
.rulebook { display: flex; flex-direction: column; gap: 18px; color: var(--ink-2); line-height: 1.5; }
.rulebook h2 { font-size: 1.6rem; text-transform: none; letter-spacing: -0.01em; color: var(--ink); }
.rulebook h3 { font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 4px; }
.rulebook h4 { font-size: 0.9rem; color: var(--ink); margin-top: 6px; }
.rb-head { display: flex; flex-direction: column; gap: 6px; }
.rb-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rb-sec { display: flex; flex-direction: column; gap: 8px; }
.rulebook ul, .rulebook ol { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.rulebook ul { list-style: disc; }
.rulebook ol { list-style: decimal; }
.rb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rb-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 5px 6px; border-bottom: 1px solid var(--line-strong); }
.rb-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rb-table .small { font-size: 0.78rem; }
.rb-scroll { overflow-x: auto; }
.rb-sectors { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.rb-sectors dt { font-weight: 700; color: var(--ink); font-size: 0.85rem; }
.rb-sectors dd { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.82rem; }
.rb-co b { color: var(--mint-ink); }
.drawer.ref { max-height: 80dvh; }
.ref-body { display: flex; flex-direction: column; gap: 10px; }
.ref-tabs { flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; }
.tabs .btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }


/* Tutorial: a popup for each step, a slim prompt bar while the step waits for the player */
.tutorial-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(24, 24, 22, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade-in 0.15s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.tutorial { width: min(460px, 100%); max-height: min(82dvh, 100%); overflow: auto; box-sizing: border-box; background: #fff; border: 1px solid var(--line-strong); border-top: 6px solid #d68f00; border-radius: 14px; padding: 14px 18px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; gap: 8px; font-size: 0.95rem; line-height: 1.5; }
.tutorial h3 { font-size: 1.2rem; }
.tutorial p { color: var(--ink-2); }
.tutorial-head { display: flex; align-items: center; justify-content: space-between; }
.tutorial-todo { font-weight: 700; color: #a36a00; background: #fff6e3; border-radius: 8px; padding: 8px 10px; }
.tutorial-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.tutorial-note { border-left: 5px solid #d68f00; }
.tutorial-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--hostbar-h) + 12px); z-index: 55; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff6e3; color: #6b4600; border: 1px solid #d68f00; border-radius: 10px; padding: 8px 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); font-size: 0.9rem; line-height: 1.3; }
.tutorial-bar .quad-label { color: #a36a00; white-space: nowrap; }
.tutorial-bar b { flex: 1 1 200px; min-width: 0; }
.tutorial-bar .btn { border-color: #d6b57a; background: #fff; }
@media (min-width: 1100px) { .tutorial-bar { left: auto; right: 16px; width: min(560px, calc(100vw - 32px)); bottom: calc(var(--hostbar-h) + 16px); } }
/* Quick reference */
.ref-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.refcard { flex: 1; min-width: 220px; background: #f1f0ea; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px; font-size: 0.8rem; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.ref-eyebrow { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin-top: 6px; }
.refcard ol { list-style: decimal; padding-left: 18px; }
.refcard li { padding: 1px 0; }

/* Venture sale */
@media (min-width: 1100px) {
}

/* Log */
.over .log { font-size: 0.82rem; }
.log { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--ink-2); }
.log li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.log li:first-child { color: var(--ink); font-weight: 600; }
.drawer { position: fixed; left: 0; right: 0; bottom: var(--hostbar-h); z-index: 40; max-height: 65dvh; overflow: auto; background: var(--surface); border-top: 1px solid var(--line-strong); border-radius: 14px 14px 0 0; padding: 12px 16px 24px; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

/* Host bar */
.hostbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(243, 242, 238, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.hostbar .btn.primary { flex: 1; min-width: 180px; }
.bar-tools { display: flex; gap: 6px; }
.bar-tools .btn { min-width: 96px; }
.bar-tools .btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bar-text { flex: 1; min-width: 160px; }

/* Toasts, net status */
.toast { position: fixed; left: 50%; bottom: calc(var(--hostbar-h) + 22px); transform: translateX(-50%); z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.netbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; text-align: center; padding: 6px; background: #b03a2e; color: #fff; font-size: 0.85rem; font-weight: 600; }

/* The one animation: a card flip. */
@keyframes flip-in {
  from { transform: perspective(600px) rotateY(90deg); opacity: 0; }
  to { transform: perspective(600px) rotateY(0deg); opacity: 1; }
}
.flip-in { animation: flip-in 0.35s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .flip-in { animation: none; }
  .cube-cell { transition: none; }
}


/* ---------- The three numbers that decide every play ---------- */
.stepbar { flex-direction: column; align-items: stretch; gap: 8px; }
.stepbar-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.debt-line { color: var(--danger); }

/* Your sector, on the card itself */
.card.company.yours { border-color: var(--mint-ink); box-shadow: inset 0 0 0 calc(var(--mm) * 0.8) var(--mint); }
.card.company.yours .bonus { position: absolute; right: calc(var(--mm) * 2); top: calc(var(--mm) * 2); font-size: max(6px, calc(var(--mm) * 2.6)); font-weight: 800; color: #fff; background: var(--mint-ink); border-radius: 999px; padding: calc(var(--mm) * 0.4) calc(var(--mm) * 1.6); letter-spacing: 0.04em; }
.card.company.yours .card-eyebrow { padding-right: calc(var(--mm) * 13); }
/* On the mats and strips the badge is just "+1": the eyebrow keeps its sector name. */
.board .card .bonus-long, .strip .card .bonus-long { display: none; }
.board .card.company.yours .card-eyebrow, .strip .card.company.yours .card-eyebrow { padding-right: calc(var(--mm) * 7); }
.lot-slot .card-slot { position: relative; }

/* Move sheet: Bid under a company opens your hand for it */
.sheet-lot { position: relative; }
.sheet-lot.played { border-color: var(--ink); }
.sheet-lot-cta { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; text-align: center; height: 30px; line-height: 28px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--ink); font-size: 0.8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 0.08s; }
.sheet-lot-cta:hover:not(:disabled) { transform: translateY(-1px); }
.sheet-lot-cta:disabled { cursor: default; opacity: 0.6; }
.sheet-lot-cta.on { background: #fff; color: var(--ink); }
.sheet-lot-cta.ghost { cursor: default; background: transparent; border-color: var(--mint-line); color: var(--mint-deep); }
.sheet-builds { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.sheet-build {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  height: 58px; min-width: 0; padding: 8px 14px; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.sheet-build:hover { border-color: var(--ink); transform: translateY(-1px); }
.sheet-build b { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-build span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The market card already prints its effect. This box repeats it for the sizes that drop the
   card's own flavour line, and only those: on a full-size mat it was the same sentence twice. */
.market-effect { display: none; }
@container (max-width: 720px) { .board .market-effect { display: block; } }
@container (max-height: 260px) { .board .market-effect { display: block; } }
.market-effect {
  position: absolute; left: calc(var(--mm) * 6); right: calc(var(--mm) * 6); bottom: calc(var(--mm) * 5);
  font-size: max(7px, calc(var(--mm) * 2.9)); font-weight: 700; line-height: 1.25; text-align: center;
  color: var(--peach-deep); background: #fff; border: calc(var(--mm) * 0.4) solid var(--peach-line);
  border-radius: calc(var(--mm) * 1.5); padding: calc(var(--mm) * 1.2);
}

/* One-line opponents, used once there are more than four of them */
.strips.mini { gap: 5px; }
.strip.mini {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
  align-items: baseline; gap: 0 6px; padding: 5px 9px; border-width: 1px; border-left-width: 4px;
  background: var(--surface); font-size: 0.8rem;
}
.strip.mini .swatch { grid-row: 1; margin-right: 0; align-self: center; }
.strip.mini .strip-name { grid-row: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip.mini .strip-cash { grid-row: 1; font-size: 0.95rem; }
.strip.mini .mini-owns { grid-row: 2; grid-column: 2; font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip.mini .mini-debt { grid-row: 2; grid-column: 3; font-size: 0.72rem; color: var(--danger); font-weight: 700; }
.strip.mini .mini-where { grid-row: 3; grid-column: 2 / -1; font-size: 0.72rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .strip-head { height: 26px; flex-wrap: nowrap; overflow: hidden; }
.strip .strip-name { white-space: nowrap; display: inline-flex; align-items: center; flex: none; }
.strip .strip-status { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Wide screens: your mat scales to the space left in its column instead of scrolling out of it. */
@media (min-width: 1100px) {
  .col.player { overflow: hidden; }
  .col.player .board-col.player { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  /* The mat takes exactly the height the panels leave. Under 220 px it would be unreadable (a fund holding eight companies squeezes it to that in a window), so it folds into one line instead of being cut. */
  .col.player .board-wrap.player { container-type: size; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-start; position: relative; }
  .col.player .board-wrap.player .board { --mm: max(0.55px, calc(min(100cqw, 100cqh) / 300)); }
  @container (max-height: 220px) {
    .col.player .board-wrap.player .board { display: none; }
    .col.player .board-wrap.player::before { content: "Your mat is folded while the sell panel needs the room."; display: block; font-size: 0.78rem; color: var(--muted); padding: 6px 2px; }
  }
}


@media (max-width: 859px) {
  .over-grid { grid-template-rows: minmax(0, 1fr) auto; }
  .over-log.fold { padding: 8px 12px; }
  .over-log.fold > summary { cursor: pointer; padding: 8px 0; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
  .over-log.fold[open] .over-log-scroll { max-height: 34dvh; margin-top: 6px; }
}
@media (max-width: 859px) {
  .over .results { font-size: 0.85rem; }
  .over .results td { padding: 5px 3px; }
  .over .results th { padding: 3px 3px; }
  .over .results .swatch { width: 9px; height: 9px; margin-right: 5px; }
}

/* Lobby primer: the whole game in four lines, in the space the bot controls leave behind */
.lobby-primer { border-top: 1px dashed var(--line-strong); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.lobby-primer ol { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; color: var(--ink-2); line-height: 1.4; }
.lobby-primer b { color: var(--ink); }

/* Who else is at the table, on the move sheet */
.sheet-table { display: flex; flex-direction: column; gap: 4px; }
.sheet-table-row { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 0.8rem; }
.sheet-fund { display: inline-flex; align-items: center; }
.sheet-fund .swatch { width: 9px; height: 9px; margin-right: 5px; }

/* A squeezed player mat keeps its numbers and drops its prose: the panels above it say the
   same thing. The mat is drawn at min(container width, container height), so either can be
   the binding one — hence the pair of rules. */
@container (max-width: 400px) {
  /* The sell panel above the mat carries the same buttons at full size; on a squeezed mat they only collide with the text. */
  .player-board .sell-ctl, .player-board .held-btn, .player-board .venture-sell .btn { display: none; }
  .player-board .card.player .card-color { display: none; }
  .player-board .sector-lower .tiny.debt-line { display: none; }
  .player-board .venture-notes, .player-board .quad-note, .player-board .card .card-flavor { display: none; }
}
@container (max-height: 400px) {
  .player-board .sell-ctl, .player-board .held-btn, .player-board .venture-sell .btn { display: none; }
  .player-board .sector-lower .tiny.debt-line { display: none; }
  .player-board .venture-notes, .player-board .quad-note, .player-board .card .card-flavor { display: none; }
}
@container (max-width: 320px) { .player-board .sell-row .sell-name { display: none; } }
@container (max-height: 320px) { .player-board .sell-row .sell-name { display: none; } }
.sheet-fund-note { margin-left: 5px; }
@media (max-width: 859px) {
  /* The landing page already carries the primer; on a phone the seats matter more. */
  .lobby-primer { display: none; }
  .lobby .seat { padding: 6px 0; }
  .lobby-sub { display: none; }
}
@media (max-width: 859px) {
  .over h1 { font-size: 1.3rem; }
  .over .over-head > p.muted { display: none; }
  .over .results td { padding: 4px 3px; }
}
@media (max-width: 859px) {
  .over .results .tag { margin-left: 4px; padding: 0 4px; font-size: 0.58rem; }
  .over .results td:nth-child(2) { line-height: 1.2; }
}
/* "Sector +1 yours" must not wrap a small card onto an extra line. */
.card.company .card-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buildid { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }

/* ---------- Rulebook figures: the real blank mats, used as the diagrams ---------- */
.rb-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rb-board { max-width: 640px; margin: 0 auto; }
.rb-fig-center .rb-board .board { --mm: calc(100cqw / 400); }
.rb-fig-player .rb-board { max-width: 480px; }
.rb-fig-player .rb-board .board { --mm: calc(100cqw / 300); }
.rb-fig .board .card .card-flavor, .rb-fig .board .venture-notes { display: none; }
.rb-fig figcaption { font-size: 0.8rem; color: var(--muted); text-align: center; font-style: italic; }
.rb-zones { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 0.86rem; }
.rb-zones dt { font-weight: 700; color: var(--ink); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; padding-top: 3px; }
.rb-zones dd { margin: 0; color: var(--ink-2); }
.rb-cards { --mm: 2.2px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.rb-card-fig { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: calc(var(--mm) * 63); }
.rb-card-fig span { font-size: 0.76rem; color: var(--muted); text-align: center; }

/* ---------- Print: the rules page is the rulebook PDF ---------- */
@media print {
  @page { size: A4; margin: 15mm 14mm 14mm; }
  html, body { background: #fff; }
  body { font-size: 10.5pt; line-height: 1.45; }
  .topbar, .rb-links, .no-print, .toast, .netbar, .buildid { display: none !important; }
  .page { min-height: 0; }
  .rules-page { max-width: none; margin: 0; padding: 0; gap: 0; }
  /* The page's white panel, not the playing cards, which share the class name. */
  .rules-page > .card { border: none; box-shadow: none; padding: 0; background: none; }
  /* Flex containers that span a page break lay their children out at the wrong
     offsets in Chrome's paginated rendering, and the overflow lands on top of the
     next section. The rulebook is a long document, so in print it is block flow
     with margins, not flex with gaps. */
  .rulebook, .rb-sec, .rb-head, .rb-fig, .rb-cards, .rulebook ul, .rulebook ol { display: block; }
  .rulebook { color: #1c1c1c; }
  .rulebook > .rb-sec { margin-bottom: 13px; }
  .rb-sec > * + * { margin-top: 7px; }
  .rb-head > * + * { margin-top: 5px; }
  .rb-fig > * + * { margin-top: 9px; }
  .rulebook li + li { margin-top: 3px; }
  .rb-cards { text-align: center; }
  .rb-card-fig { display: inline-block; vertical-align: top; margin: 0 7px; text-align: center; }
  .rb-card-fig > * + * { margin-top: 5px; }
  .rb-head { margin-bottom: 4px; }
  .rulebook h2 { font-size: 26pt; }
  .rulebook h3 { font-size: 13pt; break-after: avoid; page-break-after: avoid; }
  .rulebook h4 { break-after: avoid; page-break-after: avoid; }
  .rb-sec { break-inside: auto; }
  .rulebook p, .rulebook li { orphans: 3; widows: 3; }
  /* A diagram or a card figure split across a page break is unreadable. Long tables
     are the opposite: forcing them whole leaves half-empty pages, so they flow and
     repeat their header instead. */
  .rb-fig, .rb-cards, .rb-card-fig, .refcard, .rb-zones { break-inside: avoid; page-break-inside: avoid; }
  .rb-table thead { display: table-header-group; }
  .rb-table tr { break-inside: avoid; page-break-inside: avoid; }
  .rb-sectors dt, .rb-sectors dd { break-inside: avoid; }
  .rb-scroll { overflow: visible; }
  .rb-board { max-width: 150mm; }
  .rb-fig-player .rb-board { max-width: 110mm; }
  .board { box-shadow: none; }
  /* Print in ink, not in the screen's soft greys. */
  .rulebook p, .rulebook li, .rulebook dd, .rb-table td { color: #1c1c1c; }
  .rulebook .muted, .rb-fig figcaption { color: #555; }
}

/* After you have played, on a wide screen, your column shows the mat and one line about your play; the full hand lives on the move sheet. */
.played-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.86rem; }
.played-strip b { color: var(--ink); }
.played-strip .reopen-move { margin: 0; }

/* Final screen: how each fund made its money */
.over-recap { display: flex; flex-direction: column; gap: 10px; }
.recap-fund { border-left: 4px solid var(--pc); padding: 4px 0 4px 10px; display: flex; flex-direction: column; gap: 4px; }
.recap-fund { padding-right: 8px; }
.recap-fund.you { background: var(--surface-2); border-radius: 0 8px 8px 0; }
.recap-head { display: flex; align-items: center; gap: 6px; }
.recap-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.recap-total.up, .recap-delta.up { color: var(--up); }
.recap-total.down, .recap-delta.down { color: var(--down); }
.recap-lines { display: flex; flex-direction: column; gap: 3px; font-size: 0.84rem; color: var(--ink-2); line-height: 1.35; }
.recap-lines li { display: flex; gap: 8px; align-items: baseline; }
.recap-delta { flex: none; min-width: 44px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Lobby: which rule set this table plays. */
.lobby-variant { display: grid; gap: 8px; align-content: start; }
.variant-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.variant-btn { display: grid; gap: 2px; text-align: left; justify-items: start; min-width: 0; padding: 8px 10px; line-height: 1.25; height: auto; white-space: normal; }
.variant-btn b { font-size: 14px; }
.variant-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.variant-btn.on .muted { color: rgba(255, 255, 255, 0.72); }

/* The round's cash flow, itemised, and the end-of-game bill for the debt. */
.flow-panel .flow-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.flow-panel .flow-table td { padding: 2px 0; vertical-align: baseline; }
.flow-panel .flow-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-panel .flow-table td.neg { color: var(--down); }
.flow-panel .flow-sum td { border-top: 1px solid var(--line); padding-top: 4px; }
.flow-panel .flow-net td { border-top: 1px solid var(--line-strong); padding-top: 4px; }
.over-left { min-height: 0; display: grid; grid-template-rows: auto auto; gap: 10px; align-content: start; }
.over-bill h2 { margin: 0 0 2px; }
.over-bill .flow-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.over-bill .flow-table td { padding: 3px 0; vertical-align: baseline; }
.over-bill .flow-table td:first-child { padding-right: 12px; }
.flow-panel .flow-table td:first-child { padding-right: 10px; }
.over-bill .flow-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }

/* ---------- lot cards ---------- */
/* The printable sheet: the same .card.player faces the game draws, at their real 63 x 88 mm,
   wrapping three to an A4 page. --mm is set here because these cards are not on a board. */
.lot-sheet { --mm: 3.7795px; display: flex; flex-wrap: wrap; gap: 4mm; margin-top: 6mm; }
.lot-sheet .card.player { page-break-inside: avoid; break-inside: avoid; }
.lots-page h1 { margin-bottom: 2mm; }
@media print {
  .lots-page .lede, .lots-page h1 { font-size: 10pt; }
  .lot-sheet { gap: 3mm; }
}

/* The one-line cash flow in the move sheet: what you already earn, before you spend the round. */
.sheet-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; padding: 8px 12px; }
.sheet-flow b { font-size: 1.05rem; }
.sheet-flow b.good { color: var(--mint-ink); }
.sheet-flow b.neg { color: var(--danger); }
.sheet-flow .flow-bar { display: flex; flex: 1 1 160px; min-width: 120px; height: 14px; gap: 2px; }
.sheet-flow .flow-seg { display: flex; align-items: center; justify-content: center; min-width: 14px; border-radius: 3px; background: var(--mint); color: var(--mint-deep); font-size: 0.62rem; font-weight: 700; }

/* ==========================================================================
   The phone table: one step per screen, everything a tap.
   Under 1100 px the table is drawn by mobile.ts, not by the three-column layout,
   so none of these classes appear on a wide screen. ========================================================================== */
/* One explicit column at the viewport width: an implicit column would grow to the widest row and push the table off screen. */
.mtable { height: 100dvh; box-sizing: border-box; width: 100%; max-width: 720px; margin: 0 auto; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); padding-bottom: var(--hostbar-h); }
.m-top { display: flex; align-items: center; gap: 8px; padding: 8px 14px 4px; min-height: 44px; min-width: 0; }
.m-top > * { flex: none; }
.m-round { white-space: nowrap; font-size: 0.95rem; }
.m-step { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff; white-space: nowrap; }
@media (max-width: 379px) { .m-top { gap: 6px; padding-left: 10px; padding-right: 10px; } .m-round .muted { display: none; } .m-body { padding-left: 10px; padding-right: 10px; } .m-bar { padding-left: 10px; padding-right: 10px; } }
.m-cash { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.m-menu-btn { min-height: 36px; }
.m-menu-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.m-body { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 8px; scrollbar-width: none; }
.m-body::-webkit-scrollbar { display: none; }
.m-screen { display: flex; flex-direction: column; gap: 8px; }
.m-title { display: flex; flex-direction: column; gap: 4px; }
.m-title h1 { font-size: 1.3rem; }
.m-title p { font-size: 0.84rem; color: var(--ink-2); line-height: 1.35; }
.m-keep { align-self: flex-start; margin-top: 4px; }
.m-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); margin-top: 4px; }
.m-lots, .m-rows { display: flex; flex-direction: column; gap: 8px; }
.m-lot, .m-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 8px 10px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); cursor: pointer; text-align: left; }
.m-lot:active, .m-row:active { transform: translateY(1px); }
.m-lot:disabled, .m-row:disabled { opacity: 0.5; cursor: not-allowed; }
.m-lot { --mm: 0.9px; height: 92px; padding-top: 6px; padding-bottom: 6px; }
.m-lot.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.m-lot-card, .m-result-card { flex: none; display: block; }
/* The thumbnail is a name and a number: the row beside it carries the sector, the caption and the asking price. */
.m-lot-card .card-flavor, .m-lot-card .card-ask, .m-lot-card .card-caption, .m-lot-card .card-eyebrow, .m-result-card .card-flavor, .m-result-card .card-ask, .m-result-card .card-caption, .m-result-card .card-eyebrow { display: none; }
.m-lot-card .card-name, .m-result-card .card-name { margin-top: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-lot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.m-lot-eyebrow { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mint-ink); }
.m-lot-name { font-size: 0.98rem; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-lot-num { font-size: 0.78rem; color: var(--ink-2); }
.m-lot-ask { font-size: 0.74rem; color: var(--muted); }
.m-lot-cta { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; min-width: 52px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.m-lot-cta i { font-style: normal; opacity: 0.7; }
.m-lot-cta.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.m-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.m-row-text b { font-size: 0.95rem; }
.m-row-text span { font-size: 0.76rem; color: var(--muted); }
.m-pass { border-style: dashed; box-shadow: none; }
.m-note { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }

/* The bar: one big button, or one line saying whose turn it is. */
.m-bar { padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); gap: 8px; justify-content: center; }
.m-bar .m-primary { flex: 1; min-height: 52px; font-size: 1.05rem; }
.m-bar-text { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.m-bar .btn.warn { flex: 1 1 100%; }

/* Bottom sheets: the bid grid, the menu, the mats. */
.m-sheet-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(24, 24, 22, 0.45); display: flex; align-items: flex-end; justify-content: center; }
@keyframes sheet-up { from { transform: translateY(28px); } to { transform: translateY(0); } }
.m-sheet { animation: sheet-up 0.18s ease-out; width: 100%; max-width: 720px; max-height: calc(100dvh - 24px); box-sizing: border-box; background: var(--bg); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25); padding-bottom: env(safe-area-inset-bottom); }
.m-sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
.m-sheet-head h2 { font-size: 1.05rem; text-transform: none; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.m-sheet-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-sheet-title.row { flex-direction: row; align-items: center; gap: 10px; }
.m-sheet-body { overflow-y: auto; min-height: 0; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.m-sheet-body > p { font-size: 0.95rem; color: var(--ink-2); line-height: 1.45; }
.m-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.m-total b { font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.m-total span { color: var(--muted); font-size: 0.85rem; }
.m-total.has-debt b { color: var(--danger); }
.m-status { font-size: 0.84rem; line-height: 1.3; font-weight: 600; color: var(--ink-2); }
.m-status.good { color: var(--mint-ink); }
.m-status.bad { color: var(--danger); }
.m-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.m-chip { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 58px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: pointer; }
.m-chip:active { transform: translateY(1px); }
.m-chip:disabled { opacity: 0.5; }
.m-chip b { font-size: 1.05rem; }
.m-chip span { height: 0.8rem; font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.m-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.m-chip.on span { color: rgba(255, 255, 255, 0.7); }
.m-chip.debt span { color: var(--danger); }
.m-lines { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; line-height: 1.35; color: var(--ink-2); }
.m-lines b { color: var(--ink); }
.m-lines .good { color: var(--mint-ink); font-weight: 700; }
.m-lines .bad { color: var(--danger); font-weight: 700; }
.m-sheet-actions { display: flex; gap: 8px; align-items: center; }
.m-sheet-actions .outcome-done { flex: 1; text-align: center; }
.m-play { min-height: 52px; }

/* Your card is down: what you played, and who the table waits on. */
.m-yourplay { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface); border: 2px solid var(--ink); border-radius: 12px; }
.m-yourplay > b { font-size: 1.3rem; }
.m-yourplay > span { font-size: 0.84rem; color: var(--ink-2); }
.m-change { margin-top: 8px; }
.m-funds { display: flex; flex-direction: column; }
.m-fund { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.m-fund.offline { opacity: 0.6; }
.m-fund-name { font-weight: 700; white-space: nowrap; }
.m-fund-note { flex: 1; min-width: 0; color: var(--muted); font-size: 0.8rem; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-fund-cash { font-weight: 700; font-variant-numeric: tabular-nums; }

/* The reveal: each lot with every bid on it, the winner lit. */
.m-result { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.m-result-head { display: flex; gap: 10px; align-items: flex-start; --mm: 0.9px; }
.m-result-outcome { font-size: 0.86rem; font-weight: 700; color: var(--mint-deep); margin-top: 2px; }
.m-bidlines { display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--line-strong); padding-top: 6px; }
.m-bidline { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; opacity: 0.6; }
.m-bidline.won { opacity: 1; }
.m-bidline-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-bidline-debt { display: flex; gap: 2px; --mm: 1.4px; }
.m-bidline-value { font-variant-numeric: tabular-nums; }
.m-bidline-flag { width: 36px; text-align: right; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.m-bidline.won .m-bidline-flag { color: var(--mint-ink); }

/* Market, then sell. */
.m-market { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff7ea; border: 1px solid var(--peach-line); border-radius: 12px; color: var(--peach-deep); }
.m-market .m-label { color: var(--peach-ink); margin: 0; }
.m-market-event { font-size: 1.15rem; }
.m-market-move { font-size: 0.9rem; color: var(--peach-ink); }
.m-market-move b { color: var(--peach-deep); }
.m-move { font-weight: 800; font-size: 1.1rem; color: var(--peach-deep); }
.m-move.up { color: var(--up); }
.m-move.down { color: var(--down); }
.m-sell-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.m-sell-panel .sell-rows { display: flex; flex-direction: column; }
.m-sell-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; height: 64px; padding: 4px 0; border-top: 1px solid var(--line); }
.m-sell-line .sell-what b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; }
.m-sell-line .sell-what .muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sell-btn { min-height: 40px; padding: 0 16px; }
.m-sell-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.m-sell-actions .btn { width: 100%; }

/* The menu and what is behind it. */
.m-menu-item .m-row-text b { font-size: 1rem; }
.m-leave { margin-top: 4px; }
.m-fundcards { display: flex; flex-direction: column; gap: 8px; }
.m-fundcard { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--pc); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 0.84rem; }
.m-fundcard.offline { opacity: 0.6; }
.m-fundcard-head { display: flex; align-items: center; gap: 6px; }
.m-fundcard-line { color: var(--ink-2); font-size: 0.8rem; line-height: 1.3; }
.m-fundcard-cos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.m-co { font-size: 0.74rem; padding: 2px 8px; border-radius: 999px; background: var(--mint); color: var(--mint-deep); }
.m-co-debt { color: var(--danger); font-weight: 700; }
.m-mat { width: 100%; }
.m-mat.zoomed { aspect-ratio: 1 / 1; overflow: auto; }
.m-zoom { display: flex; gap: 8px; }
.m-zoom .btn { flex: 1; }
.m-zoom .btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.m-sheet-body .log { font-size: 0.84rem; }
.m-sheet-body .refcard { font-size: 0.86rem; }

/* Short phones: the same screens, with less air, so the sit-out row is still on screen. */
@media (max-height: 700px) {
  .m-title p { display: none; }
  .m-title h1 { font-size: 1.15rem; }
  .m-lot { --mm: 0.8px; height: 78px; }
  .m-lot-ask { display: none; }
  .m-row { min-height: 52px; padding: 5px 10px; }
  .m-body { padding-top: 0; }
  .m-chip { height: 50px; }
  .m-market { padding: 8px 12px; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .m-market .m-label { flex-basis: 100%; }
  .m-market-event { font-size: 1rem; }
  .m-sell-panel { padding: 8px 12px; gap: 4px; }
  .m-sell-line { height: 56px; }
  .m-sell-line .sell-what b { font-size: 0.92rem; }
  .m-sell-line .sell-what .muted { display: none; }
  .m-sell-line .sell-math .value { font-size: 0.95rem; }
  .m-sell-actions { flex-direction: row; }
  .m-sell-actions .btn { flex: 1; width: auto; min-height: 44px; padding: 6px 8px; font-size: 0.9rem; white-space: normal; line-height: 1.15; }
  .m-yourplay > b { font-size: 1.1rem; }
  .m-change { margin-top: 4px; min-height: 40px; }
}

/* A phone held sideways: the bars shrink to one line each and the move screen is two columns, lots beside builds. */
@media (max-width: 1099px) and (max-height: 500px) {
  .mtable { max-width: none; }
  .m-top { min-height: 36px; padding: 4px 14px 2px; }
  .m-title h1 { font-size: 1.05rem; }
  .m-title p { display: none; }
  .m-move { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 4px 12px; }
  .m-move .m-title, .m-move .m-keep { grid-column: 1 / -1; }
  .m-move > .m-label:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .m-move > .m-lots { grid-column: 1; grid-row: 3; align-self: start; }
  .m-move > .m-label:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .m-move > .m-rows { grid-column: 2; grid-row: 3; align-self: start; }
  .m-lot { height: 72px; --mm: 0.7px; }
  .m-lot-ask { display: none; }
  .m-row { min-height: 48px; padding: 4px 10px; }
  .m-bar { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .m-bar .m-primary { min-height: 44px; font-size: 1rem; }
  .m-bar-text { min-height: 36px; }
  .m-sheet { max-height: 100dvh; border-radius: 0; }
  .m-chips { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
  .m-chip { height: 46px; }
  .m-chip b { font-size: 0.9rem; }
  .m-total b { font-size: 1.5rem; }
  .m-lines { display: none; }
  .m-placed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
  .m-placed .m-yourplay { grid-row: 1 / span 3; }
  .m-yourplay > b { font-size: 1.05rem; }
  .m-reveal { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 12px; }
  .m-reveal .m-title, .m-reveal .m-note { grid-column: 1 / -1; }
  .m-sell { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 12px; align-items: start; }
  .m-market { flex-direction: column; }
  .tutorial { max-height: 100dvh; }
}

/* ---------- Tutorial and dialogs on a phone: sheets from the bottom, big buttons ---------- */
@media (max-width: 1099px) {
  .tutorial-backdrop { align-items: flex-end; padding: 0; }
  .tutorial { width: 100%; max-height: 74dvh; border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
  .tutorial-actions .btn.tiny { min-height: 44px; font-size: 0.95rem; padding: 6px 16px; }
  .tutorial-bar { left: 8px; right: 8px; bottom: calc(var(--hostbar-h) + 8px); }
  /* While a sheet is open the sheet is what the prompt asked for; the prompt would only cover it. */
  .mtable:has(.m-sheet-backdrop) .tutorial-bar { display: none; }
  .drawer { max-height: 80dvh; }
}

/* ---------- The landing page and the lobby on a phone: one screen, no scroll ---------- */
@media (max-width: 1099px) {
  .landing { min-height: 100dvh; box-sizing: border-box; justify-content: center; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); gap: 14px; }
  .landing .howto, .landing .landing-note { display: none; }
  .landing h1 { font-size: 1.75rem; margin-top: 0; }
  .lede { font-size: 0.95rem; }
  .landing-links { display: flex; gap: 8px; justify-content: center; }
  .landing-links .btn { flex: 1; }
  .lobby-invite > .muted.small, .lobby-bots > .muted.small { display: none; }
  .lobby-foot .buildid, .lobby-foot .lobby-rules { display: none; }
  .lobby-foot .btn.big { min-height: 48px; }
  .lobby-bot-row .btn { white-space: normal; line-height: 1.15; font-size: 0.9rem; }
  /* The final count: the ranking takes the room, the statement sits under it, and the buttons are one grid. */
  .over-left { grid-template-rows: minmax(0, 1fr); }
  .over-bill, .over-head .eyebrow { display: none; }
  .over-results { min-height: 0; }
  .over-table-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .over-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .over-foot > .btn.primary, .over-foot > .muted, .over-foot > a.btn { grid-column: 1 / -1; }
  .over-foot .btn { min-width: 0; padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1099px) and (max-height: 700px) {
  .landing { gap: 10px; }
  .landing h1 { font-size: 1.4rem; }
  .lede { font-size: 0.88rem; }
  .landing .foot { display: none; }
}

/* ---------- How to play: nine screens, one idea each, the same on a phone and a desk ---------- */
.guide { position: fixed; inset: 0; z-index: 70; background: var(--bg); box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.guide > * { width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; }
.guide-head { display: flex; align-items: center; gap: 8px; }
.guide-dots { display: flex; gap: 6px; justify-content: center; }
.guide-dot { all: unset; box-sizing: border-box; width: 22px; height: 6px; border-radius: 3px; background: var(--line-strong); cursor: pointer; }
.guide-dot.on { background: var(--ink); }
.guide-dot.done { background: var(--ink-2); opacity: 0.45; }
.guide-body { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 6px 0; scrollbar-width: none; }
.guide-body::-webkit-scrollbar { display: none; }
.guide-body > * { flex: none; }
.guide-body h1 { font-size: 1.7rem; }
.guide-lead { font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.guide-p { font-size: 0.95rem; color: var(--ink-2); line-height: 1.45; }
.guide-fig { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.g-fig { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.g-cards { --mm: 1.4px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px; }
/* The pictures are the cards themselves, minus the flavour line: the caption under each says what to look at. */
.g-cards .card-flavor { display: none; }
.g-cards .card-growth, .g-cards .card-debt { bottom: calc(var(--mm) * 5); }
.g-row { --mm: 1.15px; }
.g-card-fig { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--muted); text-align: center; max-width: 140px; }
.g-chip { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.g-chip-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.g-chip b { font-size: 1.1rem; }
.g-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.g-chip.cube { background: var(--peach); border-color: var(--peach-line); } .g-chip.cube b { color: var(--peach-deep); }
.g-chip.sector { background: var(--mint); border-color: var(--mint-line); } .g-chip.sector b { color: var(--mint-deep); }
.g-chip.debt b { color: var(--danger); }
.g-track, .g-cubes { display: flex; gap: 4px; width: 100%; }
.g-track { padding-bottom: 12px; }
.g-round, .g-cube { flex: 1; min-width: 0; position: relative; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-weight: 700; font-size: 0.85rem; color: var(--ink-2); }
.g-round.ipo { background: var(--mint); border-color: var(--mint-line); color: var(--mint-deep); }
.g-round i { position: absolute; left: 0; right: 0; bottom: -13px; text-align: center; font-style: normal; font-size: 0.5rem; letter-spacing: 0.06em; color: var(--mint-ink); font-weight: 800; }
.g-round.on, .g-cube.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); color: var(--ink); }
.g-cube { background: var(--peach); border-color: var(--peach-line); color: var(--peach-ink); }
.g-sum { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 0.9rem; color: var(--ink-2); }
.g-sum b { font-size: 1.1rem; color: var(--ink); }
.g-sum .g-total { font-size: 1.5rem; }
.g-ok { color: var(--mint-ink); font-weight: 700; font-size: 0.8rem; }
.g-bad { color: var(--danger); }
.g-note { font-size: 0.78rem; color: var(--muted); text-align: center; line-height: 1.3; }
.g-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.g-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.g-row .card { flex: none; }
.g-arrow { font-size: 1.4rem; color: var(--muted); }
.g-tokens { display: flex; gap: 6px; --mm: 2px; }
.g-btn-demo { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 700; font-size: 1.05rem; }
.guide-actions { display: flex; gap: 8px; }
.guide-actions .grow { flex: 1; }
@media (min-width: 1100px) {
  .g-cards { --mm: 1.9px; gap: 24px; }
  .g-row { --mm: 1.5px; }
  .g-card-fig { max-width: 180px; font-size: 0.85rem; }
  .guide-body h1 { font-size: 2rem; }
  .guide-lead { font-size: 1.25rem; }
  .guide-p { font-size: 1.05rem; }
}
@media (max-height: 700px) {
  .guide { gap: 4px; padding-top: 8px; }
  .guide-body { gap: 8px; }
  .guide-body h1 { font-size: 1.35rem; }
  .guide-lead { font-size: 1rem; }
  .guide-p { font-size: 0.88rem; }
  .guide-fig { padding: 10px 10px; }
  .g-cards { --mm: 1.15px; }
}