/* Slowpoly v2: the boxed game on a wooden table.
   Materials: walnut table, cream card stock with black rules, white title deeds, pastel bank notes,
   the board's pale green and the red of the banner. Type: Jost (the face painted on the board) for
   everything, a book serif for the small print. */

@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url('/vendor/fontsource/jost/files/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url('/vendor/fontsource/jost/files/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url('/vendor/fontsource/jost/files/jost-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-display: swap; src: url('/vendor/fontsource/jost/files/jost-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 800; font-display: swap; src: url('/vendor/fontsource/jost/files/jost-latin-800-normal.woff2') format('woff2'); }

:root {
  --table: #140e09;
  --table-2: #21160d;
  --table-3: #33220f;
  --card: #f6efdc;
  --card-2: #ebe1c6;
  --paper: #fffdf5;
  --ink: #16130e;
  --ink-2: #4a4336;
  --ink-3: #7b7363;
  --line: rgba(22, 19, 14, 0.16);
  --red: #d9252b;
  --red-2: #a8171c;
  --board: #c4e4ca;
  --board-2: #9fd0a9;
  --felt: #0e4632;
  --felt-2: #0a3526;
  --gold: #e6b450;
  --chance: #e6c4cb; /* Rumours: blush */
  --chest: #efe2c0; /* Invites: ivory card */
  --good: #1d7a46;
  --bad: #b3261e;
  --font: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --top: 54px;
  --tray: 122px;
  --rail: 360px; /* the right-hand rail once the tray has a column of its own */
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 10px 24px -8px rgba(0, 0, 0, 0.65), 0 2px 5px rgba(0, 0, 0, 0.4);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); font: 500 16px/1.4 var(--font);
  background:
    repeating-linear-gradient(91deg, rgba(255, 220, 160, 0.025) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 190px),
    radial-gradient(120% 90% at 50% 0%, #3a2715 0%, var(--table-2) 45%, var(--table) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
body[data-page='game'] { overflow-x: hidden; }
body.sheet-open { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
small { font-size: 0.8em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ------------------------------------------------------------------ small parts */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 44px; padding: 0.45em 1.05em;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink);
  font-weight: 700; letter-spacing: 0.02em; text-decoration: none; box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--red); border-color: var(--red-2); color: #fff; box-shadow: 0 3px 0 var(--red-2); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.btn.primary:hover { background: #e6353a; }
.btn.primary:active { box-shadow: 0 1px 0 var(--red-2); }
.btn.danger { background: var(--ink); border-color: #000; color: #fff; box-shadow: 0 3px 0 #000; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; font-weight: 600; color: var(--ink-2); }
.btn.ghost:hover { background: rgba(22, 19, 14, 0.07); }
.btn.big { min-height: 56px; font-size: 1.12rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding-inline: 1.4em; flex: 1 1 auto; }
.btn.small { min-height: 36px; font-size: 0.86rem; padding: 0.3em 0.8em; border-width: 1.5px; box-shadow: 0 2px 0 var(--ink); border-radius: 8px; }
.btn.small.ghost, .btn.small.primary { box-shadow: none; }
.btn.small.primary { box-shadow: 0 2px 0 var(--red-2); }
.btn:disabled { opacity: 0.45; box-shadow: none; transform: none; filter: grayscale(0.4); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sheet .btns.sticky { position: sticky; bottom: -1px; padding: 12px 0 4px; margin-top: 14px; background: linear-gradient(transparent, var(--card) 28%); z-index: 2; }
.hint { color: var(--ink-3); font-size: 0.86rem; line-height: 1.35; }
.empty { color: var(--ink-3); font-size: 0.9rem; font-style: italic; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 800; box-shadow: 0 0 0 2px var(--paper); }

.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 9px; overflow: hidden; background: var(--paper); }
.seg button { border: 0; background: transparent; padding: 0.4em 0.9em; min-height: 38px; font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.3em; text-transform: capitalize; }
.seg button + button { border-left: 1.5px solid var(--ink); }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--card); }
.seg.small button { min-height: 32px; padding: 0.2em 0.6em; font-size: 0.8rem; }

.moneyfield { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 9px; background: #fff; overflow: hidden; min-height: 44px; }
.moneyfield > span { padding: 0 0.1em 0 0.6em; font-weight: 800; color: var(--good); }
.moneyfield input { border: 0; outline: 0; background: transparent; width: 6.2em; padding: 0.4em 0.5em; font-weight: 700; font-size: 1.05rem; min-width: 0; }

.tok { display: inline-block; flex: none; line-height: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.tok svg { height: 100%; width: auto; display: block; }
.tok-sm { height: 22px; } .tok-md { height: 36px; } .tok-lg { height: 56px; } .tok-xl { height: 84px; }
/* The ownership marker is a band of ribbon laid along a lot, roughly 3.5 : 1: the chip beside a name is the
   same object at chip size, so it is a short length of that band, not a square. */
.ribbon { display: inline-block; width: 26px; height: 10px; flex: none; line-height: 0; vertical-align: 0; margin-right: 6px; }
.ribbon svg { width: 100%; height: 100%; display: block; }
.ribbon.plain { height: 9px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55) inset; }
.bot { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 4px; border-radius: 99px; background: var(--ink); color: var(--card); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6; }
.bot .ic { width: 12px; height: 12px; }
/* Silver houses and gold hotels (round 10, the owner), with a hairline of ink so they show on paper and on felt. */
i.house, i.hotel { display: inline-block; vertical-align: -1px; background: linear-gradient(#ffffff, #d6dbe2 55%, #959ea9); width: 11px; height: 10px; clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 100%, 0 100%); margin: 0 1px; filter: drop-shadow(0 0 0.6px #000) drop-shadow(0 0 0.6px #000); }
i.hotel { background: linear-gradient(#ffe9a6, #e9b934 55%, #b88514); width: 17px; height: 11px; clip-path: polygon(0 35%, 22% 0, 44% 35%, 100% 35%, 100% 100%, 0 100%); }

/* ------------------------------------------------------------------ bank notes */

.bills { display: inline-flex; gap: 12px; align-items: flex-end; flex-wrap: nowrap; }
.stack { position: relative; display: inline-block; width: 50px; height: 34px; }
.stack em { position: absolute; right: -7px; top: -8px; font: 800 0.62rem var(--font); background: var(--ink); color: #fff; border-radius: 8px; padding: 0 4px; line-height: 1.5; z-index: 5; }
.note { position: absolute; left: 0; bottom: 0; width: 46px; height: 26px; border-radius: 2.5px; border: 1px solid rgba(0, 0, 0, 0.55); background: var(--n, #eee); transform: translate(calc(var(--k) * 1.6px), calc(var(--k) * -2.2px)); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); display: grid; place-items: center; }
.note::before { content: ''; position: absolute; inset: 2.5px; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 1px; }
.note b { font: 700 0.72rem var(--serif); color: rgba(0, 0, 0, 0.78); }
.n1 { --n: #f5f2e7; } .n5 { --n: #f4bccb; } .n10 { --n: #f5e37c; } .n20 { --n: #a9dba2; } .n50 { --n: #a3cdea; } .n100 { --n: #ecd8a2; } .n500 { --n: #f2a73f; }
.bills.compact .stack { width: 36px; height: 24px; }
.bills.compact .note { width: 33px; height: 19px; }
.bills.compact .note b { font-size: 0.56rem; }
.broke { font-size: 0.8rem; color: #f3c3c0; font-style: italic; }

/* ------------------------------------------------------------------ title deeds */

.mini {
  position: relative; display: inline-flex; flex-direction: column; width: 62px; height: 78px; padding: 0; flex: none; text-align: center;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; color: var(--ink);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); transition: transform 0.16s var(--ease), box-shadow 0.16s;
}
.mini:hover { transform: translateY(-4px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.45); z-index: 3; }
.mini .band { height: 19px; background: var(--band); border-bottom: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; gap: 1px; color: #fff; flex: none; }
.mini.light .band { color: var(--ink); }
.mini .band .ic { width: 13px; height: 13px; }
.mini .nm { flex: 1; display: grid; place-items: center; padding: 1px 2px; font-size: 0.55rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: 0; }
.mini .pr { font-size: 0.6rem; font-weight: 600; color: var(--ink-2); padding-bottom: 3px; }
.mini .pips i.house { width: 8px; height: 8px; background: #fff; box-shadow: none; outline: 0; }
.mini .pips i.house, .mini .pips i.hotel { filter: drop-shadow(0 0 0.6px #000) drop-shadow(0 0 0.6px #000); }
.mini .pips i.house { background: linear-gradient(#ffffff, #d6dbe2 55%, #959ea9); }
.mini .pips i.hotel { width: 15px; height: 9px; }
.mini.mortgaged { background: #e7dfd0; color: var(--ink-3); }
.mini.mortgaged .band { filter: saturate(0.25) brightness(0.92); }
.mini.mortgaged .pr { color: var(--bad); font-weight: 800; font-size: 0.5rem; letter-spacing: 0.02em; }
.mini.mortgaged::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(179, 38, 30, 0.13) 6px 8px); pointer-events: none; }
.mini.locked { opacity: 0.5; }
.mini .tick { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; }
.mini .tick .ic { width: 11px; height: 11px; }

.fam { display: inline-flex; align-items: flex-end; gap: 4px; padding: 0 2px; }
.fam-cards { display: inline-flex; gap: 3px; }
.fam-cards .mini:hover { z-index: 4; }
.fam-count { font-size: 0.68rem; font-weight: 800; color: var(--card); background: rgba(0, 0, 0, 0.45); border-radius: 99px; padding: 0 6px; line-height: 1.6; border: 1px solid rgba(255, 255, 255, 0.2); }
.fam.complete .fam-count { background: var(--gold); color: var(--ink); border-color: transparent; }

.pip { width: 14px; height: 18px; padding: 0; border: 1.2px solid var(--ink); border-radius: 2px; background: linear-gradient(var(--band) 0 38%, var(--paper) 38%); position: relative; flex: none; }
.pip::before { content: ''; position: absolute; inset: -6px -3px; }
.pip.m { background: linear-gradient(#a9a294 0 38%, #ddd5c4 38%); border-color: var(--ink-3); }
.pip.h::after, .pip.h5::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; transform: translateX(-50%); background: #19a04b; clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 100%, 0 100%); }
.pip.h5::after { background: var(--red); }
.nopips { font-size: 0.74rem; color: var(--ink-3); font-style: italic; }

.deed { position: relative; width: min(100%, 300px); margin-inline: auto; background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: 9px; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.55); font-size: 0.95rem; }
.deed::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--ink); border-radius: 3px; pointer-events: none; }
.deed-band { background: var(--band); color: #fff; border: 2px solid var(--ink); text-align: center; padding: 8px 8px 10px; margin-bottom: 8px; }
.deed-band.light { color: var(--ink); }
.deed-band small { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.deed h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; }
.deed-plain { text-align: center; padding: 6px 6px 10px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.deed-glyph .ic { width: 46px; height: 46px; stroke-width: 1.4; }
.rents { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.rents td { padding: 2.5px 6px; }
.rents td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rents tr.now td { background: #ffe9a8; font-weight: 800; }
.rents tr.now td:first-child { border-radius: 4px 0 0 4px; } .rents tr.now td:last-child { border-radius: 0 4px 4px 0; }
.pointer { color: var(--red); margin-right: 3px; }
.deed-line { display: flex; justify-content: space-between; padding: 2px 6px; font-size: 0.88rem; }
.deed-line b { font-weight: 700; }
.deed-note { font: italic 0.72rem/1.3 var(--serif); color: var(--ink-2); padding: 5px 8px 0; text-align: center; }
.deed-price { text-align: center; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); padding-top: 6px; }
.stamp { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-16deg); border: 3px double var(--bad); color: var(--bad); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 12px; border-radius: 6px; opacity: 0.78; background: rgba(255, 253, 245, 0.6); pointer-events: none; }

/* ------------------------------------------------------------------ Chance / Community Chest */

.drawn { width: min(86vw, 400px); aspect-ratio: 7 / 4.4; display: flex; flex-direction: column; text-align: center; color: var(--ink); background: var(--chance); border: 3px solid var(--ink); border-radius: 12px; padding: 12px 16px 12px; box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(255, 255, 255, 0.08); position: relative; }
.drawn.chest { background: var(--chest); }
.drawn::before { content: ''; position: absolute; inset: 5px; border: 1.5px solid var(--ink); border-radius: 7px; pointer-events: none; }
.drawn header { display: flex; align-items: center; justify-content: center; gap: 10px; }
.drawn h2 { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; }
.drawn-mark { font: 800 1.7rem/1 var(--serif); display: inline-grid; place-items: center; }
.drawn-mark .ic { width: 26px; height: 26px; }
.drawn-text { flex: 1; display: grid; place-items: center; font-size: clamp(1rem, 3.9vw, 1.28rem); font-weight: 600; line-height: 1.25; padding: 6px 4px; overflow: hidden; }
.drawn footer { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.86rem; text-align: left; }
.drawn footer span { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.drawn footer b { font-weight: 800; text-align: right; }
.drawn-who { position: absolute; left: 0; right: 0; bottom: -28px; color: var(--card); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.drawn.small { width: 100%; max-width: 300px; aspect-ratio: auto; min-height: 150px; border-width: 2px; border-radius: 9px; padding: 8px 10px; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.5); }
.drawn.small::before { inset: 3px; border-width: 1px; }
.drawn.small h2 { font-size: 0.68rem; } .drawn.small .drawn-mark { font-size: 1.1rem; } .drawn.small .drawn-mark .ic { width: 16px; height: 16px; }
.drawn.small .drawn-text { font-size: 0.86rem; }
.drawn.small footer { font-size: 0.74rem; padding: 2px 7px; }

.cardlayer { position: fixed; inset: 0; z-index: 70; display: none; }
.cardlayer.show { display: block; }
.cardveil { position: absolute; inset: 0; border: 0; display: grid; place-items: center; align-content: center; gap: 44px; background: radial-gradient(closest-side, rgba(10, 6, 2, 0.6), rgba(10, 6, 2, 0.82)); animation: fade 0.25s both; }
.cardveil .drawn { animation: deal 0.55s var(--ease) both; }
.tapnote { color: rgba(246, 239, 220, 0.7); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
@keyframes deal { from { transform: translateY(60px) rotateX(70deg) rotate(-8deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } }

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

/* The board is square and is now looked at from straight above, so the stage has to be square too or the
   window's extra width turns into bare table. The stage column is therefore capped at its OWN HEIGHT and
   the leftover width is spent on furniture: the rail widens here, and from 1200px up the tray moves out of
   the bottom bar into a column of its own on the left (see the block further down).

   THE CAP IS EXACTLY 1, NOT A LITTLE OVER. It used to be 1.15 here and 1.04 on wide desktops, and that
   surplus was pure loss: the board is square, so the camera fits it to the SHORTER side of the stage and
   centres it, which means every pixel the stage is wider than it is tall turns into bare table split
   between the left and right margins on top of the mat the camera already leaves. At 1366x768 that was
   29px, and the mat came out 33.4px at the sides against 21.0 top and bottom — the board sitting in a
   letterbox of table. With the cap at 1 the stage is square, the board is exactly the size it was (the fit
   was never width-bound), and the mat is the same number on all four sides. The 29px goes to the tray,
   which is the flexible column.

   Rows: top bar, camera presets, opponents (as tall as their cards, no taller), the dock, which takes the
   rest so there is never a slab of bare panel between the last player card and the action buttons, and —
   below 1200px — the tray. */
.game {
  position: fixed; inset: 0; display: grid;
  grid-template-columns: minmax(0, calc(100dvh - var(--top) - var(--tray))) minmax(320px, 1fr);
  grid-template-rows: var(--top) auto minmax(0, auto) minmax(240px, 1fr) var(--tray);
}
.topbar { grid-row: 1; grid-column: 1 / -1; z-index: 30; }
.stage-wrap { grid-row: 2 / 5; grid-column: 1; position: relative; min-height: 0; min-width: 0; }
.stage { position: absolute; inset: 0; touch-action: none; }
.stage canvas { display: block; }
.tray { grid-row: 5; grid-column: 1 / -1; z-index: 25; }
/* The side rail: camera presets at its head, opponents under them, my action dock below. */
.cam, .opps, .dock { grid-column: 2; border-left: 1px solid #000; background: linear-gradient(90deg, #1d130a, #2a1c0f 12px, #24180d); box-shadow: 1px 0 0 rgba(230, 180, 80, 0.18) inset; }
.cam { grid-row: 2; }
.opps { grid-row: 3; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 6px 13px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
/* The "more below" fade that appears when they overflow lives in /ui/game.css.
   The dock takes whatever the opponents leave, so the rail never ends in a slab of bare panel. */
.dock { grid-row: 4; display: flex; flex-direction: column; padding: 6px 12px 12px 13px; min-height: 0; }
/* "Reset view": appears over the board's corner once the camera has been moved, one tap back to the whole board. */
.cam-home { position: absolute; z-index: 16; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px 0 11px; border-radius: 99px; border: 1px solid rgba(230, 180, 80, 0.6); background: rgba(24, 17, 11, 0.86); color: var(--gold); font: inherit; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.03em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38); cursor: pointer; opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; }
.cam-home.show { opacity: 1; transform: none; pointer-events: auto; }
.cam-home:hover { background: rgba(44, 31, 18, 0.94); }
.cam-home .ic { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .cam-home { transition: none; } }
/* Trades between other players, over the board as they happen (ui/deals.js). */
.deals { position: absolute; z-index: 15; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100% - 28px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.deal { pointer-events: auto; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); padding: 10px 12px; color: var(--ink); animation: dealIn 0.34s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
.deal.out { animation: dealOut 0.3s ease both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes dealOut { to { opacity: 0; transform: translateY(-10px) scale(0.97); } }
.deal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.deal-kind { flex: none; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.deal-pair { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.86rem; }
.deal-pair b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7em; }
.deal-pair i { font-style: normal; font-weight: 800; color: var(--ink-3); margin: 0 1px; }
.deal-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deal-side { min-width: 0; background: rgba(22, 19, 14, 0.05); border: 1px solid var(--line); border-radius: 10px; padding: 6px 7px 7px; }
.deal-who { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; font-size: 0.8rem; min-width: 0; }
.deal-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-who small { flex: none; color: var(--ink-3); font-size: 0.7rem; }
.deal-items { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.deal .mini { width: 50px; height: 63px; }
.deal .mini .band { height: 15px; }
.deal .mini .nm { font-size: 0.5rem; }
.deal .mini .pr { font-size: 0.52rem; padding-bottom: 2px; }
.deal-cash { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 99px; background: #e3f2e7; border: 1.5px solid var(--good); color: var(--good); font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.deal-none { font-size: 0.78rem; color: var(--ink-3); font-style: italic; }
.deal-text { margin: 0; font-size: 0.86rem; line-height: 1.35; }
.deal-stamp { margin: 9px 0 0; padding: 5px; border-radius: 8px; text-align: center; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.deal[data-state='offer'] .deal-stamp { color: var(--ink-3); animation: dealWait 1.2s ease-in-out infinite; }
.deal[data-state='done'] .deal-stamp { background: var(--good); color: #fff; }
.deal[data-state='declined'] .deal-stamp { background: var(--bad); color: #fff; }
.deal[data-state='withdrawn'] .deal-stamp, .deal[data-state='lapsed'] .deal-stamp { background: rgba(22, 19, 14, 0.12); color: var(--ink-2); }
.deal[data-state='countered'] .deal-stamp { background: var(--gold); color: var(--ink); }
/* A countered offer folds to one line over the counter-offer: the haggle reads top to bottom. */
.deal-line { display: none; }
.deal.folded { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 11px; }
.deal.folded .deal-head, .deal.folded .deal-sides, .deal.folded .deal-text { display: none; }
.deal.folded .deal-line { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; margin: 0; font-size: 0.8rem; }
.deal-line b { white-space: nowrap; }
.deal-line i { font-style: normal; font-weight: 800; color: var(--ink-3); }
.deal-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); margin-left: 3px; }
.deal.folded .deal-stamp { flex: none; margin: 0; padding: 3px 8px; font-size: 0.64rem; }
@keyframes dealWait { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .deal, .deal.out, .deal[data-state='offer'] .deal-stamp { animation: none; } }
.stage-note { position: absolute; inset: auto 0 45% 0; text-align: center; color: rgba(246, 239, 220, 0.75); font-size: 0.95rem; letter-spacing: 0.06em; pointer-events: none; padding: 0 20px; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 12px; padding: 0 12px; color: var(--card); background: linear-gradient(#2b1d10, #1b1209); border-bottom: 1px solid rgba(0, 0, 0, 0.8); box-shadow: 0 1px 0 rgba(230, 180, 80, 0.35), 0 6px 16px rgba(0, 0, 0, 0.5); }
.tb-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 9px; background: transparent; color: inherit; text-decoration: none; }
.tb-btn:hover { background: rgba(255, 255, 255, 0.1); }
.tb-btn.dark:hover { background: rgba(0, 0, 0, 0.08); }
.tb-btn .ic { width: 21px; height: 21px; }
.tb-btn[aria-pressed='true'] { color: var(--gold); }
.tb-btn .badge { position: absolute; right: 0; top: 1px; box-shadow: 0 0 0 2px #22170c; }
.tb-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 0 1 auto; }
.banner { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--red); color: #fff; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.92rem; padding: 3px 14px 4px; border: 1.5px solid #fff; outline: 1.5px solid var(--ink); border-radius: 2px; }
.tb-round { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 239, 220, 0.62); white-space: nowrap; }
.watching { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--gold); color: var(--ink); border-radius: 99px; padding: 1px 9px; }
.tb-move { margin-inline: auto; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 4px 14px 4px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; }
.tb-move.mine { background: var(--red); border-color: #fff; color: #fff; animation: nudge 2.4s ease-in-out infinite; }
.tb-move.over { background: var(--gold); color: var(--ink); }
.tb-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; padding: 1px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-move.mine .timer { background: rgba(0, 0, 0, 0.3); color: #fff; }
.tb-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.tb-bank { width: auto; padding: 0 8px; }
.bank-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bank-chip i.hotel { margin-left: 7px; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 37, 43, 0.7); } 50% { box-shadow: 0 0 0 7px rgba(217, 37, 43, 0); } }

/* camera presets */
/* camera presets
   These used to be a pill floating over the bottom of the stage. That worked while the board was leaning
   away with bare table under it; from straight above the board fills its stage, so the pill covered four
   real spaces. They are furniture now: the head of the rail on a desktop, a bar under the board on a
   phone. Same three controls, same order, nothing hidden behind an icon. */
.cam { z-index: 12; display: flex; gap: 0; align-items: stretch; padding: 7px 12px 7px 13px; }
.cam button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.045); color: var(--card); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; min-width: 0; }
.cam button:first-child { border-radius: 99px 0 0 99px; }
.cam button:last-child { border-radius: 0 99px 99px 0; }
.cam button:only-child { border-radius: 99px; }
.cam button + button { border-left: 0; }
.cam button span { overflow: hidden; text-overflow: ellipsis; }
.cam button:hover { background: rgba(255, 255, 255, 0.13); }
.cam button[aria-pressed='true'] { color: var(--gold); background: rgba(230, 180, 80, 0.14); border-color: rgba(230, 180, 80, 0.4); }
.cam button[aria-pressed='false'] { color: rgba(246, 239, 220, 0.5); }

/* opponents */
.opp { position: relative; background: var(--card); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 10px 8px 14px; overflow: hidden; flex: none; }
.opp::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); border-right: 1.5px solid var(--ink); }
.opp.turn { box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
.opp.out { opacity: 0.62; filter: grayscale(0.7); }
.opp-main { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; min-height: 44px; }
.opp-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opp-name { display: flex; align-items: baseline; min-width: 0; } /* a name and its small caps sit on one line of type */
.opp-name .ribbon { align-self: center; }
.opp-name b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-name .you { font-size: 0.66rem; font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 6px; color: var(--ink-3); }
.opp-sub { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.74rem; color: var(--ink-3); }
.opp-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 0 rgba(230, 180, 80, 0.8); animation: ping 1.6s infinite; border: 1px solid rgba(0, 0, 0, 0.4); }
@keyframes ping { to { box-shadow: 0 0 0 8px rgba(230, 180, 80, 0); } }
.opp-money { text-align: right; flex: none; }
.opp-money b { display: block; font-size: 1.12rem; font-weight: 800; color: var(--good); font-variant-numeric: tabular-nums; line-height: 1.1; }
.opp-money small { color: var(--ink-3); font-size: 0.7rem; white-space: nowrap; }
.opp-row { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.opp-pips { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; min-height: 18px; align-items: center; }
.opp-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 0; padding-top: 5px; }
.opp-foot:empty { display: none; }
/* The turn order on the cards, and the throw for who goes first while it is being decided (round 8, the owner). */
.opp-n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--card); font-size: 0.72rem; font-weight: 800; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1; }
.opp.turn .opp-n { background: var(--gold); color: var(--ink); }
.opp.mine { background: #fff8e4; }
.opp-thrown { display: flex; align-items: center; gap: 4px; }
.opp-thrown .die { width: 21px; height: 21px; fill: #fffdf6; stroke: var(--ink); stroke-width: 1.6; }
.opp-thrown .die circle { fill: var(--ink); stroke: none; }
.opp-thrown b { min-width: 1.5em; font-size: 1.15rem; font-weight: 800; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.opp.first .opp-thrown b { color: var(--good); }
.opp-thrown .tie { font-size: 0.66rem; font-weight: 800; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-2); margin-right: 2px; }
.opp-thrown.fresh .die { animation: dieIn 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.opp-thrown.fresh .die + .die { animation-delay: 0.06s; }
.opp-thrown.fresh b { animation: dieIn 0.42s 0.12s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
@keyframes dieIn { from { opacity: 0; transform: scale(0.4) rotate(-35deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .opp-thrown.fresh .die, .opp-thrown.fresh b { animation: none; } }
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 5px; padding: 1px 6px; border: 1.2px solid var(--ink); background: var(--paper); }
.tag .ic { width: 12px; height: 12px; }
.tag.jail { background: var(--ink); color: #fff; } .tag.debt { background: var(--bad); color: #fff; border-color: var(--bad); } .tag.out { background: transparent; } .tag.key { background: var(--chance); }
.chip-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--paper); font-size: 0.78rem; font-weight: 700; }
.chip-btn:hover { background: var(--ink); color: var(--card); }

/* dock */
.dock > * { background: var(--card); border-inline: 2px solid var(--ink); }
.dock > :first-child { border-top: 2px solid var(--ink); border-radius: 14px 14px 0 0; }
.dock > :last-child { border-bottom: 2px solid var(--ink); border-radius: 0 0 14px 14px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.65); }
.dock.busy { pointer-events: none; }
.dock.busy .dock-body { opacity: 0.6; }
.dock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--felt); color: var(--card); border-bottom: 2px solid var(--ink); }
.dock-head h2 { font-size: 1rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.dock-head.mine { background: var(--red); color: #fff; }
.dock-head.debt { background: var(--ink); color: #fff; }
.dock-head.over { background: var(--gold); color: var(--ink); }
.dock-head.watch { background: #3b3327; }
.dock-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.dock-body .btns .btn:not(.big) { flex: 1 1 0; white-space: nowrap; padding-inline: 0.5em; }
.dock-foot { display: flex; gap: 8px; padding: 9px 14px 11px; border-top: 1.5px dashed var(--line); background: var(--card-2); }
.dock-foot .trade-btn { flex: 1; position: relative; }
.trade-btn .badge { position: absolute; right: -7px; top: -9px; }
.lead { font-size: 1rem; line-height: 1.35; }
.lead.doubles { background: #ffe9a8; border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.lead.doubles small { display: block; font-weight: 500; }
.waiting-on { display: flex; align-items: center; gap: 8px; }
.buy-lot, .auction-lot { display: flex; gap: 12px; align-items: center; }
.buy-lot > div, .auction-lot > div { display: flex; flex-direction: column; min-width: 0; }
.buy-lot small, .auction-lot small { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.buy-lot b, .auction-lot b { font-size: 1.1rem; font-weight: 800; line-height: 1.15; }
.buy-lot span, .auction-lot span { font-size: 0.84rem; color: var(--ink-2); }
.queue { color: var(--bad) !important; font-weight: 700; }
.auction { display: flex; flex-direction: column; gap: 9px; }
.explain { font: italic 0.95rem/1.35 var(--serif); background: var(--paper); border-left: 4px solid var(--gold); padding: 7px 10px; border-radius: 0 6px 6px 0; }
.bidrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bidrow .moneyfield { flex: 1 1 110px; } .bidrow .moneyfield input { width: 100%; }
.mybid { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 9px; padding: 6px 8px 6px 12px; }
.mybid span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.mybid b { font-size: 1.3rem; font-weight: 800; color: var(--good); flex: 1; }
.bidders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bidders small { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.bidder { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 4px; border-radius: 99px; border: 1.2px solid var(--line); opacity: 0.6; }
.bidder.in { opacity: 1; border-color: var(--good); background: #e2f3e6; color: var(--good); }
.bidder .ic { width: 13px; height: 13px; stroke-width: 3; } .dots { font-style: normal; font-weight: 800; letter-spacing: 1px; }
.result { display: flex; gap: 8px; align-items: flex-start; background: var(--paper); border: 1.5px dashed var(--ink-3); border-radius: 8px; padding: 6px 10px; font-size: 0.86rem; }
.debts li { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.debts b { font-size: 1.15rem; color: var(--bad); } .debts small { margin-left: auto; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem; }
.owe-line .short { color: var(--bad); }
.offer { border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; }
.offer.incoming { box-shadow: 0 0 0 3px var(--gold); animation: offer-in 0.5s var(--ease); }
.offer.lift .offer-head svg { width: 18px; height: 18px; flex: none; }
.offer.lift .hint { margin: 0; font-size: 0.84rem; }
@keyframes offer-in { from { transform: translateX(30px); opacity: 0; } }
.offer-head { display: flex; align-items: center; gap: 7px; font-size: 0.95rem; }
.offer-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.86rem; }
.offer-sides small { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.offer-sides > div { background: var(--card); border-radius: 6px; padding: 4px 8px; border: 1px solid var(--line); }
.offer .btn { min-height: 38px; padding: 0.2em 0.8em; font-size: 0.9rem; }
.pending { font-size: 0.8rem; color: var(--ink-3); font-style: italic; }
.sent summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; padding: 4px 0; }
.sent .offer { margin-top: 6px; }
/* The offer the whole table is waiting on me to answer: the only thing in the panel. */
.offer.gate { padding: 10px; gap: 9px; }
.offer.gate .offer-sides { font-size: 0.95rem; }
.offer.gate .offer-sides > div { padding: 6px 10px; }
.offer.gate .btns.answer { flex-wrap: nowrap; gap: 8px; }
.offer.gate .btns.answer .btn { flex: 1 1 0; min-height: 46px; padding-inline: 0.3em; font-size: 1rem; }
.offer.gate .btns.answer .btn.primary { flex-grow: 1.4; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.linkish { display: inline; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lead.hopeless { font-weight: 800; font-size: 1.08rem; line-height: 1.3; }
.ledger-list li.ledger-more { justify-content: center; align-items: center; gap: 10px; padding: 8px 16px 10px; color: var(--ink-3); font-size: 0.8rem; border-bottom: 1px dashed var(--line); }
.ledger-list li.ledger-more > span { flex: 0 1 auto; }
.note { display: flex; gap: 7px; align-items: flex-start; font-size: 0.84rem; line-height: 1.3; padding: 6px 9px; border-radius: 7px; background: #fff3cf; border: 1px solid #e3c35e; }
.note .ic { margin-top: 1px; }
.note.bad { background: #fbe0de; border-color: #e1a09b; color: #7d1712; }
.note.good { background: #e0f2e5; border-color: #9ccfab; color: #14532f; }
.note.info { background: #e8eef5; border-color: #b4c5da; color: #26425f; }

/* tray */
.tray { display: flex; align-items: stretch; gap: 0; color: var(--card); background: linear-gradient(#3a2614, #1d130a); border-top: 1px solid #000; box-shadow: 0 -1px 0 rgba(230, 180, 80, 0.3) inset, 0 -8px 20px rgba(0, 0, 0, 0.5); padding: 9px 12px; }
.tray > div { background: radial-gradient(120% 140% at 50% 0%, var(--felt) 0%, var(--felt-2) 100%); border: 1px solid #000; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08); border-radius: 8px; margin-right: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.tray > div:last-child { margin-right: 0; }
.tray-me { flex: none; }
.tray-token { border: 0; background: transparent; padding: 0; line-height: 0; }
.tray-name { display: flex; align-items: center; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.03em; white-space: nowrap; }
.tray-worth { display: block; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246, 239, 220, 0.62); white-space: nowrap; }
.tray-worth b { color: var(--card); font-size: 0.9rem; }
.tray-cash { flex: none; }
.cash-num { font-size: 1.7rem; font-weight: 800; letter-spacing: 0.01em; color: #d8f3c8; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.tray-cash.in-debt .cash-num { color: #ffb3ad; }
.tray-deeds { flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; gap: 14px !important; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; align-items: flex-end !important; padding-top: 12px !important; }
.tray-deeds .empty { color: rgba(246, 239, 220, 0.55); align-self: center; }
.tray-deeds .fam { flex: none; }
.tray-jail { flex: none; }
.jailcard { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 62px; height: 40px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--chance); color: var(--ink); text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.jailcard.chest { background: var(--chest); }
.jailcard small { font-size: 0.46rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.jailcard .ic { width: 14px; height: 14px; }
.tray-watch { flex: 1; color: var(--card); }
.tray-watch .ic { width: 30px; height: 30px; color: var(--gold); }
.tray-watch b { display: block; } .tray-watch span { font-size: 0.86rem; color: rgba(246, 239, 220, 0.7); }

/* ledger */
.ledger { position: absolute; z-index: 40; top: var(--top); right: 0; bottom: 0; width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--paper); border-left: 2px solid var(--ink); box-shadow: -16px 0 40px rgba(0, 0, 0, 0.55); transform: translateX(105%); transition: transform 0.32s var(--ease); visibility: hidden; }
.ledger-open .ledger { transform: none; visibility: visible; }
.ledger-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 2px solid var(--ink); background: var(--card); }
.ledger-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-right: auto; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ink-2); cursor: pointer; }
.ledger-list { flex: 1; overflow-y: auto; padding: 4px 0 10px; background: repeating-linear-gradient(transparent 0 31px, rgba(31, 95, 168, 0.1) 31px 32px); }
.ledger-list li { display: flex; gap: 10px; align-items: baseline; padding: 4px 16px; font-size: 0.9rem; line-height: 1.35; }
.ledger-list li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ledger-list time { flex: none; font-size: 0.68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.turn-row { margin-top: 8px; padding-top: 7px !important; border-top: 1.5px solid var(--ink); align-items: center !important; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem !important; }
.turn-row b { flex: 1; }
.chat-row { align-items: flex-start !important; }
.chat-row b { flex: none; color: var(--ink); border-bottom: 3px solid var(--c); line-height: 1.2; }
.chat-row > span { background: var(--card); border: 1px solid var(--line); border-radius: 3px 10px 10px 10px; padding: 3px 9px; }
.chat-row.mine > span { background: #e2f0e5; }
.ev-pay span, .ev-move span, .ev-bid span { color: var(--ink-2); }
.ev-bankrupt span, .ev-win span, .ev-auctionEnd span, .ev-tradeDone span, .ev-card span { font-weight: 700; }
.unread-mark { justify-content: center; padding: 8px 16px 2px !important; }
.unread-mark span { flex: none !important; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--red); border-radius: 99px; padding: 1px 10px; }
.chatbox { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); background: var(--card); }
.chatbox input { flex: 1; min-width: 0; border: 2px solid var(--ink); border-radius: 9px; padding: 0 12px; min-height: 44px; background: #fff; }
.chatbox .btn { padding-inline: 0.8em; }
.chat-off { padding: 10px 16px; font-size: 0.84rem; color: var(--ink-3); border-top: 1px solid var(--line); }

/* replay */
.replay { position: absolute; z-index: 15; top: 12px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 24px)); pointer-events: none; display: flex; justify-content: center; }
.replay > * { pointer-events: auto; }
.ticker { max-width: 100%; background: rgba(20, 14, 9, 0.82); color: var(--card); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 99px; padding: 5px 16px; font-size: 0.88rem; text-align: center; backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); animation: fade 0.3s both; }
.away { width: 100%; background: rgba(20, 14, 9, 0.9); color: var(--card); border: 1px solid rgba(230, 180, 80, 0.5); border-radius: 14px; padding: 10px 14px 12px; backdrop-filter: blur(8px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); animation: drop 0.4s var(--ease) both; }
@keyframes drop { from { transform: translateY(-20px); opacity: 0; } }
.away-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.away-top b { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.86rem; color: var(--gold); }
.away-top span { font-size: 0.76rem; color: rgba(246, 239, 220, 0.7); font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); margin: 8px 0; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; transition: width 0.4s linear; }
.away-caption { font-size: 0.92rem; min-height: 2.6em; line-height: 1.3; }
.away-ctl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; margin-top: 8px; }
.away.summary .away-ctl { justify-content: flex-start; }
.away .seg { border-color: rgba(255, 255, 255, 0.35); background: transparent; }
.away .seg button { color: var(--card); min-height: 34px; } .away .seg button + button { border-color: rgba(255, 255, 255, 0.35); }
.away .seg button[aria-pressed='true'] { background: var(--gold); color: var(--ink); }
.away .btn.small { background: var(--card); }
.away .btn.small.ghost { background: transparent; color: var(--card); }

/* toasts */
#toasts { position: fixed; z-index: 90; top: calc(var(--top) + 10px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
body[data-page='home'] #toasts { top: 14px; }
.toast { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: 8px 14px; font-size: 0.92rem; font-weight: 600; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); animation: drop 0.35s var(--ease) both; transition: opacity 0.35s, transform 0.35s; max-width: 100%; }
.toast.gone { opacity: 0; transform: translateY(-10px); }
.toast.bad { background: #fbe0de; border-color: var(--bad); } .toast.good { background: #e0f2e5; border-color: var(--good); } .toast.offer { background: #fff3cf; border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold), 0 10px 24px rgba(0, 0, 0, 0.5); }

/* ------------------------------------------------------------------ sheets */

.scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(10, 6, 2, 0.55); animation: fade 0.2s both; overflow-y: auto; }
.sheet { position: relative; width: min(100%, 460px); min-width: 0; max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 20px 20px 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); animation: rise 0.32s var(--ease) both; }
.sheet.wide { width: min(100%, 900px); }
.sheet-deed { width: min(100%, 660px); }
.sheet-over { width: min(100%, 780px); }
@keyframes rise { from { transform: translateY(30px) scale(0.97); opacity: 0; } }
.grab { display: none; }
/* It floats over the sheet body once that scrolls, so it carries its own opaque backing: without the halo
   it sits straight on top of whatever line happens to be under it and eats a word. */
.sheet-x { position: sticky; float: right; top: 0; margin: -8px -8px 0 8px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; box-shadow: 0 0 0 7px var(--card), 0 3px 10px rgba(0, 0, 0, 0.28); }
.sheet-x:hover { background: var(--ink); color: var(--card); }
.sheet-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; padding-right: 40px; }
.sheet-title small { font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--ink-3); }
.sheet > p { margin-bottom: 12px; }

.deed-wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; clear: both; }
.deed-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.deed-owner { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; padding: 8px 12px; line-height: 1.25; }
.deed-owner small { color: var(--ink-3); } .deed-owner.free .ic { width: 24px; height: 24px; color: var(--good); }
.deed-acts { display: flex; flex-direction: column; gap: 9px; }
.deed-act .btn { width: 100%; justify-content: space-between; text-align: left; }
.deed-act .btn b { font-variant-numeric: tabular-nums; }
.deed-act.off .btn { border-style: dashed; }
.why { display: flex; align-items: center; gap: 5px; padding: 3px 4px 0; font-size: 0.78rem; font-style: italic; color: var(--bad); }
.why .ic { width: 12px; height: 12px; }
.bankline { text-align: center; }
.deed-nav { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; border-top: 1.5px dashed var(--line); padding-top: 8px; }
.deed-nav .btn { max-width: 38%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; line-height: 2; }
.space-card { clear: both; text-align: center; background: var(--board); border: 2px solid var(--ink); border-radius: 8px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.space-card.chance { background: var(--chance); } .space-card.chest { background: var(--chest); }
.space-glyph .ic { width: 52px; height: 52px; stroke-width: 1.5; }
.space-card h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.space-card p { font: 1rem/1.45 var(--serif); }
.space-card .pot, .space-card .here { font-family: var(--font); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.space-card .pot b { font-size: 1.4rem; }

/* trade builder */
.partners { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.partner { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 3px 12px 3px 8px; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); font-weight: 700; }
.partner[aria-pressed='true'] { background: var(--ink); color: var(--card); box-shadow: 0 0 0 3px var(--c); }
.partner .bot { padding: 1px 4px; }
.trade-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; margin: 10px 0; align-items: stretch; }
.trade-cols.review { grid-template-columns: 1fr 1fr; }
.trade-mid { display: grid; place-items: center; color: var(--ink-3); }
.trade-mid .ic { width: 28px; height: 28px; }
.trade-side { display: flex; flex-direction: column; gap: 9px; min-width: 0; border: 2px solid var(--ink); border-radius: 12px; padding: 10px; background: var(--card-2); }
.trade-side h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.trade-side h3 small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.pile { min-height: 96px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-content: center; padding: 9px; border-radius: 8px; background: radial-gradient(120% 140% at 50% 0%, var(--felt), var(--felt-2)); border: 1.5px solid var(--ink); box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.55); }
.pile.empty { justify-content: center; color: rgba(246, 239, 220, 0.55); font-style: italic; font-size: 0.86rem; }
.pile .mini { animation: slide-in 0.3s var(--ease) both; }
.trade-side.take .pile .mini { animation-name: slide-in-r; }
@keyframes slide-in { from { transform: translate(-30px, 30px) rotate(-8deg); opacity: 0; } }
@keyframes slide-in-r { from { transform: translate(30px, 30px) rotate(8deg); opacity: 0; } }
.pile-cash { display: inline-flex; align-items: center; gap: 10px; color: #d8f3c8; font-weight: 800; font-size: 1.1rem; padding-left: 4px; }
.cashrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cashrow small { color: var(--ink-3); font-size: 0.78rem; margin-left: auto; }
.cashrow .moneyfield { min-height: 40px; } .cashrow .moneyfield input { width: 4.6em; }
.note-btn { min-width: 44px; min-height: 40px; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--n, var(--paper)); font: 700 0.84rem var(--serif); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.note-btn:active { transform: translateY(1px); box-shadow: none; }
.jail-step { display: inline-flex; align-items: center; gap: 5px; font-size: 0.86rem; font-weight: 700; }
.rack { display: flex; flex-wrap: wrap; gap: 10px 8px; padding: 12px 4px 2px; max-height: 250px; overflow-y: auto; }
.rack.solo { max-height: none; padding-top: 14px; }
.rack .fam-count { color: var(--card); background: var(--ink); }

.trade-foot { position: sticky; bottom: -17px; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 14px; margin-bottom: -14px; background: linear-gradient(transparent, var(--card) 14px); }

/* bank, rules, help, settings, menu, links */
.stock { display: grid; gap: 10px; margin-bottom: 10px; }
.stock > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; background: var(--felt); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 12px; color: var(--card); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5); }
.stock-row { display: flex; flex-wrap: wrap; gap: 3px; grid-row: span 2; }
.stock-row i.house { width: 14px; height: 13px; background: linear-gradient(#ffffff, #d6dbe2 55%, #959ea9); } .stock-row i.hotel { width: 24px; height: 15px; background: linear-gradient(#ffe9a6, #e9b934 55%, #b88514); }
.stock b { font-size: 1.6rem; font-weight: 800; line-height: 1; text-align: right; } .stock small { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; text-align: right; }
.potline { margin: 10px 0; font-size: 1rem; }
.rule-h { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); }
.rules li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.rules li::before { content: '✓'; grid-row: span 2; font-weight: 800; color: var(--good); }
.rules li.off::before { content: '–'; color: var(--ink-3); }
.rules li b { font-weight: 700; } .rules li span { grid-column: 2; font-size: 0.86rem; color: var(--ink-2); }
.help li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.help .ic { width: 26px; height: 26px; color: var(--red); margin-top: 2px; }
.help b { font-weight: 800; letter-spacing: 0.03em; } .help p { font: 0.95rem/1.45 var(--serif); color: var(--ink-2); margin-top: 2px; }
.settings li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.settings small { display: block; color: var(--ink-3); }
.menu li + li { border-top: 1px dashed var(--line); }
.menu button, .menu a { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 6px 4px; border: 0; background: transparent; text-align: left; text-decoration: none; border-radius: 8px; }
.menu button:hover, .menu a:hover { background: rgba(22, 19, 14, 0.06); }
.menu span { flex: 1; display: flex; flex-direction: column; } .menu small { color: var(--ink-3); }
.menu .ic:first-child { width: 24px; height: 24px; } .menu .ic:last-child { color: var(--ink-3); }
.menu .danger { color: var(--bad); }
.links li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.links code { grid-column: 1; font: 0.72rem/1.3 ui-monospace, Consolas, monospace; color: var(--ink-2); overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; user-select: all; }
.links li > span { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.links .botline { display: flex; gap: 8px; color: var(--ink-2); font-size: 0.9rem; }

/* game over */
.over-eyebrow { text-align: center; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); clear: both; }
.over-title { text-align: center; font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); line-height: 1.05; margin: 4px 0 14px; text-shadow: 2px 2px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); justify-content: center; align-items: end; gap: 6px; margin-bottom: 8px; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px 6px 0; }
.step b { font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .step span { font-size: 0.84rem; color: var(--ink-2); }
.step i { display: grid; place-items: center; width: 100%; margin-top: 6px; font: 800 1.6rem var(--font); font-style: normal; color: #fff; background: var(--c); border: 2px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.place-1 i { height: 92px; } .place-2 i { height: 62px; } .place-3 i { height: 40px; }
.place-1 .tok { animation: hop 1.4s var(--ease) infinite; }
@keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-12px); } }
.holdings { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.holdings th { text-align: left; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 4px 6px; border-bottom: 2px solid var(--ink); }
.holdings td { padding: 7px 6px; border-bottom: 1px dashed var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.hold-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.holdings .opp-pips { padding: 0; }

.chart { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 10px 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.84rem; color: var(--ink); padding: 0 4px 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i, .tip i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.chart-box { position: relative; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart .grid { stroke: rgba(22, 19, 14, 0.12); stroke-width: 1; }
.chart .tick { font: 500 11px var(--font); fill: var(--ink-3); }
.chart .end { font: 600 12px var(--font); fill: var(--ink); }
.chart .line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--paper); stroke-width: 2; }
.chart .leader { stroke: rgba(22, 19, 14, 0.3); stroke-width: 1; }
.chart .cross { stroke: var(--ink-3); stroke-width: 1; }
.tip { position: absolute; top: 6px; z-index: 2; pointer-events: none; background: var(--ink); color: var(--card); border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.tip[hidden] { display: none; }
.tip b { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.tip span { display: flex; align-items: center; gap: 6px; } .tip strong { font-variant-numeric: tabular-nums; min-width: 4.5em; }

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

.home { width: min(100% - 28px, 860px); margin: 0 auto; padding: 34px 0 60px; display: flex; flex-direction: column; gap: 22px; }
.lid { position: relative; text-align: center; background: linear-gradient(var(--board) 0 62%, var(--board-2)); border: 3px solid var(--ink); border-radius: 10px; padding: 26px 20px 0; box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px var(--ink), 0 30px 60px -10px rgba(0, 0, 0, 0.75); overflow: hidden; margin: 8px; }
.lid.small { padding-bottom: 18px; }
.lid-eyebrow { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.lid-banner { display: inline-block; background: var(--red); border: 3px solid #fff; outline: 3px solid var(--ink); padding: 4px 34px 8px; transform: rotate(-1.2deg); box-shadow: 0 8px 0 -2px rgba(0, 0, 0, 0.25); }
.lid-banner h1 { color: #fff; font-size: clamp(2.4rem, 11vw, 5.2rem); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; text-shadow: 3px 3px 0 var(--ink); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.lid.small .lid-banner h1 { font-size: clamp(1.8rem, 8vw, 3rem); }
.lid-tag { font: italic 1.08rem/1.4 var(--serif); color: var(--ink); max-width: 34em; margin: 20px auto 0; }
.lid-tokens { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 18px); margin-top: 16px; padding: 0 6px 14px; height: 92px; box-sizing: content-box; }
.lid-tokens span { height: 76px; line-height: 0; animation: stand 0.7s var(--ease) both; animation-delay: calc(var(--d) * 70ms + 150ms); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.35)); min-width: 0; }
.lid-tokens svg { height: 100%; width: auto; max-width: 100%; }
@keyframes stand { from { transform: translateY(90px) rotate(10deg); opacity: 0; } }

.panel, .setup { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.panel h2, .setup h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }
.gamelist li { display: flex; align-items: center; gap: 10px; border-top: 1px dashed var(--line); }
.gamelist li:first-child { border-top: 0; }
.gamelist a { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 9px 4px; text-decoration: none; min-height: 52px; justify-content: center; }
.gamelist a b { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gamelist a span { font-size: 0.8rem; color: var(--ink-3); }
.gamelist a:hover b { color: var(--red); }
.gamelist em { font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 99px; padding: 2px 10px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.yourmove { background: var(--red); color: #fff; animation: nudge 2.4s infinite; } em.over { background: var(--gold); } em.watch { border: 1.2px solid var(--ink-3); color: var(--ink-2); }
.setup { display: flex; flex-direction: column; gap: 18px; }
.setup-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.setup-head h2 { margin: 0; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.presets > span { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
fieldset { border: 0; border-top: 2px solid var(--ink); padding: 12px 0 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
legend { padding: 0 10px 0 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
legend small { font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--ink-3); margin-left: 6px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 0.86rem; font-weight: 600; } .field small { display: block; font-weight: 400; color: var(--ink-3); }
.field input, .seat input, .variant textarea { border: 2px solid var(--ink); border-radius: 9px; background: #fff; padding: 0 12px; min-height: 44px; width: 100%; min-width: 0; }
.seats { display: flex; flex-direction: column; gap: 8px; }
.seat { display: grid; grid-template-columns: 58px minmax(0, 1fr) 40px; gap: 10px; align-items: center; background: var(--paper); border: 1.5px solid var(--ink); border-left: 8px solid var(--c); border-radius: 10px; padding: 8px 8px 8px 10px; }
.seat.is-bot { background: #ece7d8; }
.seat-token { height: 60px; border: 1.5px dashed var(--ink-3); border-radius: 8px; background: var(--card); padding: 4px; line-height: 0; display: grid; place-items: center; }
.seat-token svg { height: 48px; width: auto; }
.seat-token:hover, .seat-token[aria-expanded='true'] { border-style: solid; border-color: var(--ink); background: #fff; }
.seat-main { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.seat-main input { flex: 1 1 150px; min-height: 40px; }
.seat-main .discord { flex-basis: 100%; font-size: 0.86rem; min-height: 36px; }
.token-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding-top: 4px; }
.token-strip button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); min-width: 0; }
.token-strip svg { height: 46px; width: auto; max-width: 100%; }
.token-strip span { font-size: 0.6rem; font-weight: 600; line-height: 1.1; text-align: center; }
.token-strip button[aria-selected='true'] { border-color: var(--ink); background: #fff; box-shadow: 0 0 0 2px var(--c); }
.token-strip button:disabled { opacity: 0.35; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 22px; }
.toggle { display: flex; gap: 12px; align-items: center; cursor: pointer; padding: 4px 0; min-height: 48px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.knob { position: relative; flex: none; width: 46px; height: 26px; border-radius: 13px; border: 2px solid var(--ink); background: var(--card-2); transition: background 0.2s; }
.knob::after { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform 0.2s var(--ease); }
.toggle input:checked + .knob { background: #19a04b; } .toggle input:checked + .knob::after { transform: translateX(20px); background: #fff; }
.toggle input:focus-visible + .knob { outline: 3px solid var(--gold); outline-offset: 2px; }
.toggle small { display: block; color: var(--ink-3); line-height: 1.25; }
.field.num { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.field.num .moneyfield input { width: 5.2em; min-height: 0; border: 0; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pack { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); min-height: 64px; }
.pack b { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .pack span { font-size: 0.84rem; color: var(--ink-2); line-height: 1.3; }
.pack.on { background: var(--ink); color: var(--card); box-shadow: 0 0 0 3px var(--gold); } .pack.on span { color: rgba(246, 239, 220, 0.8); }
.pack-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; justify-items: center; padding: 6px 0; }
.filebtn { cursor: pointer; }
.cheat { display: flex; flex-direction: column; gap: 3px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; padding: 9px 12px; font-size: 0.84rem; margin-bottom: 10px; clear: both; }
.cheat code { font: 700 0.84rem ui-monospace, Consolas, monospace; background: #ffe9a8; border-radius: 4px; padding: 0 4px; }
.cardlist { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cardrow { border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); padding: 10px; }
.cardrow.edited { box-shadow: 0 0 0 3px var(--gold); }
.cardrow-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.effect { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; background: var(--ink); color: var(--card); border-radius: 6px; padding: 2px 10px; font-size: 0.88rem; }
.cardrow-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: start; }
.variants { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.variant { display: flex; gap: 4px; width: 100%; align-items: flex-start; }
.variant textarea { padding: 7px 10px; font-size: 0.9rem; line-height: 1.3; resize: vertical; min-height: 56px; border-width: 1.5px; }
.home-foot { text-align: center; font-size: 0.74rem; color: rgba(246, 239, 220, 0.45); letter-spacing: 0.06em; }

/* ------------------------------------------------------------------ wide desktops: the tray moves to a column

   A square board looked at from above can only ever fill 59% of a 1.7:1 stage. Widening the rail alone is
   not enough to square it up, so above 1200px the tray — my token, my cash, my deeds — leaves the bottom
   bar and stands up as a column on the left. The stage then keeps the whole height under the top bar and a
   width capped AT that height, so it is square and the mat of table the camera leaves is the same on all
   four sides; the tray, the flexible column, takes whatever width that frees.
   Nothing is dropped or hidden: the same four blocks, stacked instead of laid out in a row. */

@media (min-width: 1200px) {
  .game {
    grid-template-columns: minmax(232px, 1fr) minmax(0, calc(100dvh - var(--top))) var(--rail);
    grid-template-rows: var(--top) auto minmax(0, auto) minmax(260px, 1fr);
  }
  .stage-wrap { grid-row: 2 / 5; grid-column: 2; }
  .cam, .opps, .dock { grid-column: 3; }

  .tray {
    grid-row: 2 / 5; grid-column: 1; min-height: 0;
    flex-direction: column; align-items: stretch; gap: 9px; padding: 12px 12px 14px; overflow: hidden;
    border-top: 0; border-right: 1px solid #000;
    box-shadow: -1px 0 0 rgba(230, 180, 80, 0.3) inset, 8px 0 20px rgba(0, 0, 0, 0.5);
  }
  .tray > div { margin-right: 0; flex-wrap: wrap; } /* no `flex` here: it would out-specify .tray-deeds below */
  .tray-me { align-items: flex-start; }
  /* A row of five note stacks is 300px wide and the column is not: they wrap under the figure, a size down. */
  .tray-cash { flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 10px; }
  .tray-cash .bills { flex-wrap: wrap; gap: 11px 13px; }
  .tray-cash .stack { width: 42px; height: 28px; }
  .tray-cash .note { width: 38px; height: 22px; }
  .tray-cash .note b { font-size: 0.64rem; }
  /* The shelf becomes a rack: the deeds wrap down the column and it scrolls, so the widest family still
     fits and the fade in /ui/game.css points down instead of right. It reaches the foot of the column however
     few deeds are on it (round 8, the owner: "it looks good"; it used to stop under the last card); the deeds
     sit on a grid of columns across it (/ui/game.css). */
  .tray-deeds {
    flex: 1 1 auto; min-height: 0; max-height: 100%; align-items: flex-start !important; align-content: flex-start;
    flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; gap: 14px 8px !important; padding-top: 24px !important; /* room over the first row (round 8, the owner) */
  }
  .tray-watch { flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
  .tray-watch .ic { margin-top: 2px; }
}

/* Past ~1700px the rail can afford the room the stage does not need. */
@media (min-width: 1700px) { :root { --rail: 400px; } }

@media (min-width: 900px) and (max-width: 1099px) {
  .tb-round { display: none; }
}

/* ------------------------------------------------------------------ phones: board on top, dock and tray below */

@media (max-width: 899px) {
  :root { --top: 50px; }
  .game { position: static; display: flex; flex-direction: column; min-height: 100dvh; }
  .topbar { position: sticky; top: 0; flex-wrap: wrap; gap: 0 4px; padding: 5px 6px 0; height: auto; order: 0; }
  .tb-title { flex: 1; gap: 6px; }
  .banner { font-size: 0.78rem; padding: 2px 8px 3px; max-width: 100%; letter-spacing: 0.06em; }
  .tb-round, .tb-bank { display: none; }
  /* Thumb bar: .tb-btn keeps its full 40px on a phone too. It used to shrink to 38 here, which also shrank
     the ledger's close button and every trash button in the card editor. The top bar has the room: .tb-round
     and .tb-bank are hidden above, and it wraps rather than overflows. */
  .tb-move { order: 9; flex: 1 0 100%; margin: 3px -6px 0; border-radius: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); justify-content: center; padding: 4px 10px; font-size: 0.9rem; min-height: 32px; }
  .opps { order: 1; border: 0; box-shadow: none; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 8px 10px; scrollbar-width: none; background: rgba(0, 0, 0, 0.25); }
  .opps::-webkit-scrollbar { display: none; }
  .opp { padding: 4px 10px 4px 14px; border-radius: 9px; min-width: 150px; }
  .opp .opp-row, .opp .opp-foot, .opp .opp-sub .opp-where { display: none; }
  .opp.full { min-width: 0; padding: 8px 10px 8px 14px; clear: both; }
  .opp.full .opp-row { display: flex; } .opp.full .opp-foot { display: flex; } .opp.full .opp-sub .opp-where { display: inline; }
  .opp-main { min-height: 40px; gap: 7px; }
  .opp .tok-md { height: 28px; }
  .opp-n { width: 16px; height: 16px; font-size: 0.62rem; }
  .opp-money b { font-size: 0.98rem; } .opp-money small { display: none; } .opp.full .opp-money small { display: block; }
  .stage-wrap { order: 2; width: 100%; height: min(100vw, 58dvh); flex: none; }
  .dock { order: 4; max-height: none; padding: 0; margin: 10px 10px 0; border: 0; background: none; box-shadow: none; }
  .dock-body { overflow: visible; }
  .tray { order: 5; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #000; flex: 1 0 auto; align-content: flex-start; }
  .tray > div { margin: 0; }
  .tray-me { flex: 1 1 auto; } .tray-cash { flex: 1 1 auto; justify-content: space-between; }
  .tray-deeds { flex: 1 0 100%; flex-wrap: wrap; overflow: visible; row-gap: 16px !important; min-height: 96px; }
  .tray-me .tok-lg { height: 44px; }
  .cash-num { font-size: 1.45rem; }
  /* The presets were icon-only squares pinned over the top-right of the board; the board now fills its
     square, so they get a bar of their own between the board and the dock — and their words back. */
  .cam { order: 3; padding: 9px 10px 0; border: 0; background: none; box-shadow: none; }
  .cam button { min-height: 44px; }
  /* A phone board is 375px square: a 180px panel pinned over it hides the whole top row for the length of
     the replay, and the replay is the one thing you came back to watch. It sits under the board instead. */
  .replay { position: fixed; z-index: 45; inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; top: auto; transform: none; width: auto; }
  .replay .ticker { position: static; font-size: 0.8rem; }
  .replay .away { margin-top: 0; }
  .away { padding: 8px 10px 10px; } .away-caption { font-size: 0.84rem; min-height: 2.4em; }
  .ledger { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 86dvh; border-left: 0; border-top: 2px solid var(--ink); border-radius: 16px 16px 0 0; transform: translateY(105%); box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.6); overflow: hidden; z-index: 55; }
  .ledger-open .ledger { transform: none; }
  #toasts { top: 96px; }
  .dock-foot .lbl { display: none; }

  /* Thumbs, not mice: nothing you have to hit is shorter than 40px, and the three trade answers — the
     irreversible ones, side by side — get the full 44. Widths were already fine; this is all vertical. */
  .seg button { min-height: 44px; }
  .seg.small button { min-height: 40px; padding: 0.25em 0.7em; }
  .btn.small { min-height: 40px; }
  .away .seg button { min-height: 40px; }
  .offer .btn { min-height: 44px; }
  .moneyfield, .cashrow .moneyfield { min-height: 44px; }
  .moneyfield input { align-self: stretch; } /* the box is 44px: the field inside it has to be too */
  .note-btn { min-height: 44px; }
  .chip-btn { min-height: 38px; }

  .scrim { padding: 0; place-items: end center; }
  .sheet, .sheet.wide, .sheet-deed, .sheet-over { width: 100%; max-height: 90dvh; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 22px 14px calc(16px + env(safe-area-inset-bottom)); animation-name: sheet-up; }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  .grab { display: block; position: absolute; top: 7px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(22, 19, 14, 0.3); }
  .deed-wrap { grid-template-columns: 1fr; gap: 14px; }
  .trade-cols, .trade-cols.review { grid-template-columns: 1fr; }
  .trade-mid { transform: rotate(90deg); height: 22px; }
  .rack { max-height: none; }
  .cardrow-body { grid-template-columns: 1fr; }
  .token-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seat { grid-template-columns: 52px minmax(0, 1fr) 36px; gap: 8px; }
  .home { padding-top: 18px; gap: 16px; }
  .panel, .setup { padding: 14px; }
  .lid-tokens { height: 56px; padding-bottom: 12px; } .lid-tokens span { height: 50px; }
  /* The podium's first line is centred across the whole sheet, so on a 375px screen its last word ran under
     the sticky X ("…the richest playeR"). `clear` cannot help: sticky moves the X off its static position. */
  .over-eyebrow { padding: 0 46px; }
  .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tok-xl { height: 60px; }
  .holdings th:nth-child(2), .holdings td:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* ------------------------------------------------------------------ notices clear of the board

   The board is square, looked at from straight above, and it now fills its stage: there is no bare table
   left at the top of it for a notice to sit on. A toast or the catch-up ticker pinned under the top bar
   covered the whole far row — nine lots, their owners' ribbons and anyone standing on them. Both drop into
   the clear centre field instead, where the only thing underneath is the board's own printed banner. */
@media (min-width: 900px) {
  #toasts { top: 30vh; }
  .replay { top: 27%; }
}

/* Between 1200 and 1366 the window is not wide enough to give the stage the square it wants: at 1280 the
   tray (232) and the rail (360) leave it 688 across a 746-tall column, so the board fits to the narrow way
   and 92px of the stage stays bare. Both neighbours give up a little there — the rail still holds a 304px
   player card, the tray still holds a three-lot family — and the board gets it.

   The tray gives up 22px more than it used to. 1280 - 198 - 336 is 746, which is exactly the height of the
   stage at an 800px window, so the column comes out square instead of 22px short, and the mat of table
   round the board is the same on all four sides here as it is at 1366 and 1920. The board is not made
   smaller by this: it was already fitting to the 724px narrow way, and it now fits to 746. */
@media (min-width: 1200px) and (max-width: 1365px) {
  :root { --rail: 336px; }
  .game { grid-template-columns: minmax(198px, 1fr) minmax(0, calc(100dvh - var(--top))) var(--rail); }
}

/* ------------------------------------------------------------------ the flow of play: turn flag, money pops, cards */

/* A turn boundary: whose turn it is now, in the middle of the board for a moment (game.js turnFlag). */
.turnflag { position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; pointer-events: none; }
.turnflag .tf { display: flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border: 2px solid var(--ink); border-radius: 14px;
  background: var(--paper); box-shadow: 0 0 0 5px var(--c, var(--gold)), var(--shadow); opacity: 0; transform: scale(0.9); }
.turnflag .tf > span { display: flex; flex-direction: column; line-height: 1.1; }
.turnflag .tf small { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.turnflag .tf b { font-size: 1.5rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.turnflag .tf.mine { background: #fff6d8; }
.turnflag .tf.mine b { color: var(--red-2); }
.turnflag.show .tf { animation: turnflag 1.15s var(--ease) both; }
@keyframes turnflag { 0% { opacity: 0; transform: scale(0.85); } 16%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }

/* Money that moves on screen floats off the number that changed (game.js moneyPops). */
.pops { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.pops .pop { position: absolute; transform: translate(-50%, -100%); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; padding: 1px 8px;
  border-radius: 8px; border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); white-space: nowrap; animation: pop-up 1.8s var(--ease) both; }
.pops .pop.gain { background: #c9f2cf; color: #0f5a2c; }
.pops .pop.loss { background: #ffd5d0; color: var(--bad); }
@keyframes pop-up { 0% { opacity: 0; margin-top: 8px; } 12% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: -26px; } }
.cash-num.bump, .opp-money b.bump { display: inline-block; animation: bump 0.5s var(--ease); }
.opp-money b.bump { display: block; }
@keyframes bump { 30% { transform: scale(1.18); } }

/* While the board is moving the dock has nothing to press at all (game.js stillDock): who and what, calmly. */
.dock-body.still .lead { display: flex; align-items: center; gap: 10px; }
.dock-body.still .lead small { color: var(--ink-3); font-size: 0.85rem; }
.dock-body.still .lead b { font-size: 1.1rem; }

/* A card of mine waits for me; anybody else's shows how long it has left. */
.cardveil.hold .tapnote { color: #fff6d8; font-size: 0.95rem; font-weight: 700; padding: 8px 16px; border: 1.5px solid rgba(255, 246, 216, 0.6); border-radius: 999px; animation: nudge-light 1.6s ease-in-out 1s infinite; }
@keyframes nudge-light { 50% { background: rgba(255, 246, 216, 0.14); } }
.cardveil .cardclock { position: absolute; left: 50%; bottom: 18%; width: 160px; height: 3px; margin-left: -80px; background: rgba(246, 239, 220, 0.25); border-radius: 2px; overflow: hidden; }
.cardveil .cardclock::after { content: ''; position: absolute; inset: 0; background: rgba(246, 239, 220, 0.8); transform-origin: left; animation: cardclock var(--ms, 4s) linear both; }
@keyframes cardclock { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .turnflag.show .tf { animation: none; opacity: 1; transform: none; }
  .pops .pop { animation: none; }
}