/* Liar's Dice, Tavern direction with the Captain's Cabin wood skin: real aged hardwood, brass, bone dice.
   Rules this file keeps (enforced by tests/unit/style-contract.test.js and dom-contract.test.js):
   - hex colours appear only inside :root;
   - no clip-path on a focusable element (brass bevels are box-shadow and border-radius);
   - every hover rule lives in the one (hover: hover) and (pointer: fine) block (ui-ux rule 12);
   - interactive controls are at least 44px tall (rule 5); no native title tooltips (rule 9). */

/* ---- 1. tokens (docs/design/DIRECTION.md, plus aliases the forked rules still name) ---- */
:root {
  --bg: #1a100a;  --panel: #241911;  --panel-2: #33241a;  --line: #6b4d2e;
  --text: #f4ead6;  --muted: #e0cfad;  --ink: #1c1100;
  --signal: #e0a23c;  --signal-d: #7d5a22;  --on-signal: #1c1100;
  --safe: #8fcb86;    --safe-d: #3d7a38;    --on-safe: #0d2208;
  --select: #ffd978;  --on-select: #241800;
  --bad: #ff7a6a;     --bad-d: #ffb0a6;     --on-bad: #2a0602;
  --bad-dd: #8c2417;  --select-d: #e6c000;  --text-d: #e6d3b0;
  --disabled-bg: #2a1c14;  --disabled-text: #c9b698;
  /* result bands (.moment): dark bands take light text, light bands take dark text, both >= 7:1 */
  --band-bad: #8a1f14;  --band-bad-2: #6b150c;  --on-band-bad: #fff6ea;
  --band-good: #2a6226;  --band-good-2: #1f4d1c;  --on-band-good: #f4ffec;
  --band-hot: #f0b44c;  --band-hot-2: #dc9a2c;  --band-steal-2: #f0c84a;
  --lift: 0 -10px 22px rgba(0, 0, 0, 0.5), 0 10px 22px rgba(0, 0, 0, 0.5); /* shadow lift for raised panels */
  --option-bg: #2b170a;  --option-text: #fbeed4;  --option-on-bg: #a8741f;  --option-on-text: #fff8e6;
  --wood: #3a2616;  --wood-l: #5a3a20;  --brass: #c79a45;  --brass-l: #f3d58f;  --brass-d: #6e4e1c;
  --slate: #1b2723;  --plank: #2a1b10;  --plank-gap: #1f140b;  --night: #0c0805;
  --cup-a: #5a321a; --cup-b: #9a6234; --cup-top: #2a170a; --cup-band: #e0a23c;
  --pip-on: #f2e9cf; --pip-off: #c9b698;
  --baize: #1d3a22; --baize-l: #2b4f2c;
  --seat-0: #f2c14e; --seat-1: #6fb1ff; --seat-2: #ff7f6b; --seat-3: #7fd69a;
  --seat-4: #c39bff; --seat-5: #ffa94d; --seat-6: #4fd0d0; --seat-7: #f58ac8;
  --fx-coin-hi: #fff3b0;
  --display: "Alegreya SC", "Palatino Linotype", Georgia, serif;
  --body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;  --cut: 12px;  --slant: 10px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);  --ease-spring: cubic-bezier(0.2, 1.4, 0.4, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Captain's Cabin wood (docs/design/DIRECTION.md): textures are CC0, see textures/CREDITS.txt */
  /* the wood library: one texture, many shades (each use multiplies its own tint over it) */
  --tex-wall: url("textures/wood_cabinet_worn_long.webp");     /* worn vertical planks: the room */
  --tex-beam: url("textures/dark_wood.webp");                  /* mahogany: header beam, frames, rims */
  --tex-panel: url("textures/wood077.webp");                   /* dark walnut: card and control panels */
  --tex-table: url("textures/wood_table_worn.webp");           /* the worn tabletop */
  --tex-plaque: url("textures/stained_pine.webp");             /* stained pine: seat plaques, chips */
  --tex-honey: url("textures/teak_veneer.webp");               /* honey teak: primary buttons */
  --tex-oak: url("textures/oak_veneer_01.webp");               /* light oak: face tiles, stepper */
  --tex-cherry: url("textures/lacquered_cherry_wood.webp");    /* near-black cherry: modals, inputs */
  --tex-red: url("textures/wood060.webp");                     /* aged red wood: Call Liar */
  --tex-wainscot: url("textures/wooden_panels.webp");          /* raised panels: the footer */

  --brass-dd: #3a2709;
  --lamp: #ffc46a;  --burn: #2a1606;  --cream: #f6ecd6;

  /* aged brass hardware (generated by scripts/make-brass-assets.mjs): four slotted screws, each with its own
     slot angle, and a scratched, tarnished plate texture for the logo nameplate */
  --pin-0: url("textures/pin-brass-0.svg");  --pin-1: url("textures/pin-brass-1.svg");
  --pin-2: url("textures/pin-brass-2.svg");  --pin-3: url("textures/pin-brass-3.svg");
  --tex-brass-plate: url("textures/brass-plate.svg");
  --ps: 15px;   /* screw art box; the head is about half of it */
  /* top-lit bevel for any raised wooden piece */
  --bevel: inset 0 1px 0 rgba(255, 228, 180, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  --metal: linear-gradient(180deg, var(--brass-l), var(--brass) 45%, var(--brass-d) 100%);

}

/* four brass screws, one per corner, centred --sc from each edge. Declared on each user so --sc and --ps resolve
   per element (a :root declaration would freeze them at the root values). Each user sets --sc (and --ps if not 15px). */
.brand::before, .card::before, .controls, .reveal-panel, .modal-box, .place-1 .place-block, .bid-panel {
  --screws:
    var(--pin-0) left calc(var(--sc) - var(--ps) / 2) top calc(var(--sc) - var(--ps) / 2) / var(--ps) var(--ps) no-repeat,
    var(--pin-1) right calc(var(--sc) - var(--ps) / 2) top calc(var(--sc) - var(--ps) / 2) / var(--ps) var(--ps) no-repeat,
    var(--pin-2) left calc(var(--sc) - var(--ps) / 2) bottom calc(var(--sc) - var(--ps) / 2) / var(--ps) var(--ps) no-repeat,
    var(--pin-3) right calc(var(--sc) - var(--ps) / 2) bottom calc(var(--sc) - var(--ps) / 2) / var(--ps) var(--ps) no-repeat;
}

/* ---- 2. fonts (self-hosted, OFL-1.1; the CSP allows font-src 'self' only) ---- */
@font-face {
  font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/alegreya-sc-700.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya SC"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/alegreya-sc-800.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/alegreya-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/alegreya-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/alegreya-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/alegreya-sans-800.woff2") format("woff2");
}

/* ---- 3. base ---- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 55% at 50% 18%, rgba(255, 196, 96, 0.16), transparent 70%),
    var(--grain),
    repeating-linear-gradient(180deg, var(--plank) 0 62px, var(--plank-gap) 62px 64px),
    var(--bg);
  background-size: auto, 220px, auto, auto;
  color: var(--text);
  font-family: var(--body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip; /* a die thrown in from the side never scrolls the page */
}

body.modal-open { overflow: hidden; }

a { color: var(--select); }

:focus-visible { outline: 3px solid var(--select); outline-offset: 3px; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--select); color: var(--on-select);
  padding: 0.5rem 1rem; z-index: 100; font-weight: 800;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- 4. header ---- */
.site-header {
  display: flex; align-items: center; padding: 6px var(--gutter) 6px 0;
  background: linear-gradient(180deg, var(--wood-l), var(--wood)); border-bottom: 3px solid var(--brass-d);
}
.brand {
  position: relative; isolation: isolate; align-self: stretch; margin: -6px 0;
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 6px 28px 6px var(--gutter); text-decoration: none; color: var(--on-signal);
}
.brand::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); border-radius: 0 10px 10px 0;
}
.brand-name {
  font-family: var(--display); font-weight: 900; font-size: 1.7rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.brand-dice { display: inline-flex; gap: 6px; }

/* ---- 5. layout ---- */
main { flex: 1 0 auto; width: 100%; max-width: 720px; margin: 0 auto; padding: 24px var(--gutter) 40px; }
@media (min-width: 900px) { main:has(.screen-wide:not([hidden])) { max-width: 1040px; } }

.loading { text-align: center; color: var(--muted); padding: 3rem 0; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
#results-continue[hidden] { display: none; }
.btn-continue { flex: 1 1 8rem; }

/* ---- 6. typography ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 1; margin: 0 0 0.5rem; }
h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); letter-spacing: -0.01em; }
h2, .panel-title { font-size: 1.4rem; letter-spacing: 0.02em; }
.panel-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--display); font-weight: 900; text-transform: uppercase; }
.card > h2::before, .panel-title::before {
  content: ""; display: inline-block; width: 6px; height: 1em; margin-right: 8px; vertical-align: -0.1em;
  background: var(--signal); transform: skewX(-14deg);
}
.panel-title::before { margin-right: 0; }
.lede {
  color: var(--muted); font-size: 1.05rem; margin: 14px 0 20px; max-width: 46ch;
  padding-left: 12px; border-left: 4px solid var(--signal);
}
.hint { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0; }
.count { color: var(--muted); font: 700 0.9rem var(--body); text-transform: none; }
.field-label, .share-label, .set-aside-title {
  display: block; font-family: var(--body); font-weight: 800; font-size: 0.72rem; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 6px;
}

/* ---- 7. panels ---- */
.card {
  position: relative; isolation: isolate; background: none; padding: 18px; margin: 0 0 16px;
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--panel); border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.notice {
  background: var(--panel-2); box-shadow: inset 4px 0 0 var(--select); padding: 12px 14px 12px 18px; margin: 0 0 16px;
}
.notice p { margin: 0 0 8px; }
.notice-error { box-shadow: inset 4px 0 0 var(--bad); }
.conn-banner { position: sticky; top: 0; z-index: 70; margin: 0; text-align: center; }

/* ---- 8. forms ---- */
.field { display: block; margin: 0 0 12px; }

.form-input {
  width: 100%; min-height: 44px; padding: 8px 14px; font: inherit; font-size: 1.05rem; color: var(--text);
  background: var(--panel-2); border: 0; border-bottom: 3px solid var(--line); border-radius: 0;
}
.form-input::placeholder { color: var(--muted); opacity: 0.8; }
select.form-input { cursor: pointer; }
.bot-level { width: auto; min-width: 7.5rem; }
/* The bot-level select and the Remove button sit in one row. This span had no style, so the
   two controls touched and the button's edge overlapped the select's border. */
.seat-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* The open dropdown list is drawn by the browser. Without an explicit colour pair it paints the
   field's cream text on the OS's white list, so unselected rows (Easy, Hard) were unreadable. */
select.form-input { color-scheme: dark; }
select.form-input option { background: var(--option-bg); color: var(--option-text); }
select.form-input option:checked { background: var(--option-on-bg); color: var(--option-on-text); }
textarea.form-input { min-height: 110px; resize: vertical; }
.form-input:focus-visible { border-bottom-color: var(--select); outline: none; background: var(--panel); }
.form-input[readonly] { color: var(--muted); }
#join-code { font-family: var(--display); font-weight: 900; font-size: 1.5rem; letter-spacing: 0.24em; }
#join-code::placeholder { font-family: var(--body); font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--signal); }

.inline-field { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-field .form-input { flex: 1 1 160px; width: auto; }

.form-error, .form-status.status-bad { color: var(--bad); font-weight: 700; margin: 8px 0 0; font-size: 0.92rem; }
.form-status.status-ok { color: var(--safe); margin: 8px 0 0; font-weight: 700; }
.form-status { margin: 8px 0; }

.customize summary, .preset-picker summary, .fullstats summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-family: var(--display); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.02em;
}

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- 9. buttons (the slant is a ::before layer, so the focus ring is never clipped) ---- */
.btn {
  --btn-bg: var(--panel-2); --sheen: rgba(255, 255, 255, 0.4);
  position: relative; isolation: isolate; background: none; border: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 8px 24px; cursor: pointer; text-decoration: none;
  --sheen: rgba(255, 255, 255, 0.35);
  font-family: var(--display); font-weight: 900; font-size: 1.1rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text);
  transition: transform 0.18s var(--ease-spring), filter 0.15s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px;
  background: linear-gradient(105deg, transparent 35%, var(--sheen) 50%, transparent 65%) no-repeat -120% 0 / 55% 100%, var(--btn-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 0 var(--brass-d);
}
.btn-primary { --btn-bg: var(--signal); color: var(--on-signal); }
.btn-secondary { --btn-bg: var(--panel-2); color: var(--text); }
.btn-secondary::before { box-shadow: inset 0 0 0 2px var(--brass-d), 0 4px 0 var(--brass-d); }
.btn-quiet { --btn-bg: var(--panel-2); color: var(--text); }
.btn-danger { --btn-bg: var(--bad); color: var(--on-bad); }
.btn-small { padding: 4px 18px; font-size: 0.95rem; }
.btn-large { font-size: 1.3rem; padding: 10px 32px; }
.btn:active:not(:disabled) { transform: translateY(2px) scale(0.98); transition-duration: 0.06s; }
.btn:disabled { --btn-bg: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; }

.ic { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 10. chips (slanted tags; the text is skewed too, and chips are never focusable) ---- */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; transform: skewX(-12deg);
  font: 800 0.72rem/1.6 var(--body); text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--panel-2); color: var(--text);
}
.chip-host, .chip-pot, .chip-odd { background: var(--select); color: var(--on-select); }
.chip-me { background: var(--safe); color: var(--on-safe); }
.chip-bot { background: var(--panel-2); color: var(--text); }
.chip-away, .chip-chaos { background: var(--bad-d); color: var(--on-bad); }
.chip-chaos { margin-left: 8px; }
.chip-final { background: var(--signal); color: var(--on-signal); }
.chip-board { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.chip-ones { background: var(--panel-2); color: var(--text); }
.chip-short { display: none; } /* the phone scoreboard's key chip shows it instead of .chip-full */
.chip-watching { background: transparent; box-shadow: inset 0 0 0 1px var(--select); color: var(--select); }
.chip-timer { background: var(--panel-2); color: var(--text); font-variant-numeric: tabular-nums; }
.chip-timer-urgent { background: var(--bad-d); color: var(--on-bad); }
@keyframes timer-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: no-preference) {
  .chip-timer-urgent { animation: timer-pulse 1s ease-in-out infinite; }
}
.bot-icon circle { fill: var(--panel-2); }

/* ---- 11. room code and share ---- */
.room-code {
  display: inline-block; font-family: var(--display); font-weight: 900; letter-spacing: 0.14em; color: var(--select);
  background: rgb(0, 0, 0); padding: 0 14px; transform: skewX(-8deg); font-size: 1em; line-height: 1.3;
}
.lobby-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lobby-head .room-code { font-size: 2.6rem; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.share-label { margin: 0; }
.share-link { margin-bottom: 16px; padding: 4px 10px; font-size: 0.85rem; color: var(--muted); }
.seat-more { justify-content: center; min-height: 44px; padding: 6px 12px; background: transparent; border: 2px dashed var(--line); color: var(--muted); font-weight: 600; }

/* ---- home hero ---- */
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.hero-copy { flex: 1 1 22rem; min-width: 0; }
.hero h1 { font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 0.9; }
.hero-dice { display: flex; gap: 10px; align-items: center; padding: 0 6px 12px; }
.hero-dice .die-hero { --s: 64px; rotate: -6deg; animation: toss-in 0.6s var(--ease-spring) both; }
.die-hero:nth-child(even) { rotate: 5deg; translate: 0 8px; }
.die-hero:nth-child(2) { animation-delay: 80ms; }
.die-hero:nth-child(3) { animation-delay: 160ms; }
.die-hero:nth-child(4) { animation-delay: 240ms; }
.die-hero:nth-child(5) { animation-delay: 320ms; }
@keyframes toss-in { from { translate: -40px -30px; rotate: -180deg; opacity: 0; } }
@media (max-width: 819px) { .hero-dice .die-hero { --s: 48px; } .hero-dice { gap: 6px; } }

.lobby-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .lobby-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.lobby-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; padding: 14px 0; border-top: 3px solid var(--line); position: sticky; bottom: 0; z-index: 5; background: var(--bg); }
.rules-summary { margin: 0 0 8px; }
.rules-summary-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; }
.rules-summary-facts { margin: 2px 0 8px; color: var(--muted); }
.rules-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip-rule { background: var(--panel-2); color: var(--text); }
.chip-more { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.rules-all > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-family: var(--display); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.02em;
}
.lobby-foot .hint { flex: 1 1 200px; margin: 0; }
#btn-start { font-size: 1.7rem; }

/* ---- How to play ---- */
.cheat-sheet { display: grid; gap: 16px; }
.cheat-sheet ol { margin: 0; padding-inline-start: 1.4rem; }
.cheat-sheet li + li { margin-top: 6px; }
.cheat-sheet h3 { margin: 0 0 6px; color: var(--select); }
.cheat-sheet p { margin: 4px 0; }

/* ---- 12. seats ---- */
.seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.seat {
  --seat: var(--text);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 52px; min-width: 0; padding: 6px 12px 6px 0;
  background: var(--panel-2); border-radius: 10px;
}
.seat-avatar {
  --avk-size: 44px;
  flex: none; align-self: stretch; height: auto; min-height: 44px; display: grid; place-items: center;
  border-radius: 8px;
}
/* The avatar block (vendor/avatar-kit): the player's animal on Liar's Dice's own shapes, in the player's kit
   colour; the seat colour stays on the row edge, bar, feed and podium (PLAYER_AVATARS_PLAN D1). */
.seat-avatar, .hist-avatar, .place .avatar {
  border-radius: 0; box-shadow: none; background: linear-gradient(160deg, var(--avk-a), var(--avk-b));
}
.seat-name { font-family: var(--display); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.03em; overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto; }
.seat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.seat-score { margin-left: auto; font-family: var(--display); font-weight: 900; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.seat .btn { margin-left: auto; }
.seat-dimmed { opacity: 0.6; }
.house-group { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.house-group-title { font-weight: 800; padding: 4px 0; display: flex; align-items: center; }
.streak { display: inline-flex; gap: 4px; align-items: center; }
.pip { width: 10px; height: 10px; box-shadow: inset 0 0 0 2px var(--bad); transform: skewX(-12deg); }
.pip-on { background: var(--bad); }

/* ---- 13. rules card and customize ---- */
.rules-list { margin: 0; display: grid; gap: 2px; }
.rules-row { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rules-row:last-child { border-bottom: none; }
.rules-row dt { color: var(--muted); }
.rules-row dd { margin: 0; font-weight: 600; }
#lobby-rules-controls { margin-bottom: 14px; }
.customize, .preset-picker { margin: 0 0 8px; }
.customize-grid { display: grid; gap: 4px 12px; grid-template-columns: 1fr; }
.rule-group { border: 0; margin: 8px 0 0; padding: 0; min-width: 0; }
.rule-group-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; padding: 4px 0; }
.rule-block { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.preset-card {
  display: block; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 8px 12px; text-align: left;
  background: var(--panel-2); color: var(--text); border: 0; border-bottom: 3px solid var(--line); cursor: pointer; font: inherit;
}
.preset-card.is-on { border-bottom-color: var(--select); }
.preset-card-name { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; }
.preset-card-rules { margin: 6px 0 0; padding-left: 1.1rem; color: var(--muted); }
.lives-hearts { color: var(--bad); letter-spacing: 0.08em; }
.odds-panel { margin: 4px 0 0; color: var(--select); font-weight: 700; overflow-wrap: anywhere; }
#last-die-banner { margin: 6px 0 0; }
@media (min-width: 500px) { .customize-grid { grid-template-columns: 1fr 1fr; } }

/* ---- 14. modal ---- */
#modal-root { position: relative; z-index: 60; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.75);
  display: flex; align-items: center; justify-content: center; padding: var(--gutter);
}
.modal-box {
  width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--panel); border-top: 4px solid var(--signal); padding: 22px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
.modal-box.modal-wide { max-width: 640px; }
.modal-box:focus { outline: none; }
.modal-title { font-size: 1.8rem; color: var(--text); }
.modal-message { margin: 0 0 4px; }
.modal-body { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sysinfo-box { margin: 0 0 12px; }
.sysinfo { font-size: 0.72rem; color: var(--muted); white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow-y: auto; }
.feedback-form .btn { width: 100%; }

/* the in-game Host menu (modal body) */
.host-section + .host-section { margin-top: 20px; }
.host-heading {
  margin: 0 0 8px; font: 900 1rem / 1.2 var(--display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.host-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.host-player {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; background: var(--panel-2);
}
.host-player-name { flex: 1 1 8rem; min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.host-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.host-row + .host-row { margin-top: 14px; }
.host-row .hint { flex: 1 1 14rem; margin: 0; }
.host-request {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; background: var(--panel-2);
  box-shadow: inset 4px 0 0 var(--select);
}
.host-request-warning { flex: 1 1 100%; margin: 0; }
/* count of pending seat requests on the Host button */
.badge {
  display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 0 6px; text-align: center;
  font: 800 0.75rem / 1.5 var(--body); background: var(--signal); color: var(--on-signal);
}

/* join screen: ask for a seat that already exists */
.rejoin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rejoin-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rejoin-item .btn { min-width: 0; overflow-wrap: anywhere; }

/* ---- 15. toast (not focusable, so clip-path is allowed here) ---- */
.toast-region {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 80;
  display: grid; gap: 8px; width: min(92vw, 460px); pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer; padding: 12px 16px 12px 22px; color: var(--ink);
  background: var(--text); font-weight: 800; box-shadow: inset 6px 0 0 var(--safe), 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: wipe 0.3s var(--ease-out) both;
}
.toast-error { box-shadow: inset 6px 0 0 var(--bad), 0 12px 30px rgba(0, 0, 0, 0.5); }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* ---- 16. inline spinner (async buttons) ---- */
.inline-spinner {
  display: inline-block; vertical-align: middle; width: 1.1em; height: 1.1em;
  border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 17. suite footer ---- */
.site-footer { flex: none; background: var(--night); border-top: 3px solid var(--brass-d); padding: 24px var(--gutter); }
.site-footer__inner { max-width: 1040px; margin: 0 auto; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-footer__heading { font-family: var(--body); font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.site-footer__link[aria-current="page"] { color: var(--signal); font-weight: 800; }
.site-footer__home-link { color: var(--text); text-decoration: none; font-weight: 800; display: inline-flex; min-height: 44px; align-items: center; }
.site-footer__copyright { color: var(--muted); font-size: 0.85rem; margin: 4px 0 0; }

/* ---- 18. game ---- */
.game-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.game-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; color: var(--muted);
  font-family: var(--display); font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.game-meta .meta-item + .meta-item::before { content: "/"; margin-right: 14px; color: var(--line); }
.meta-turn {
  padding: 2px 12px; background: var(--seat, var(--select)); color: var(--ink); font-weight: 900; font-size: 1.05rem;
  letter-spacing: 0.08em; transform: skewX(-12deg);
}
.meta-turn-mine { background: var(--select); color: var(--on-select); }
.game-meta .meta-turn::before { content: none; }
.game-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sound-control { position: relative; z-index: 8; display: inline-flex; }
/* Transparent overlap so the pointer can travel from the button onto the slider without a gap.
   The painted slate is .volume-panel, so this overlap does not cover the Sound label. */
.volume-pop {
  position: absolute; top: calc(100% - 8px); left: 50%; z-index: 1; transform: translateX(-50%);
  padding-top: 8px; opacity: 0; visibility: hidden; pointer-events: none;
}
.sound-control:focus-within .volume-pop { opacity: 1; visibility: visible; pointer-events: auto; }
.volume-panel {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 12px 12px; background: var(--panel-2);
  box-shadow: inset 0 3px 0 var(--signal), 0 0 0 1px var(--line), 0 16px 32px rgba(0, 0, 0, 0.55);
}
.volume-readout {
  min-width: 4ch; text-align: center; font-family: var(--display); font-weight: 900; font-size: 1.15rem;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); user-select: none;
}
.volume-rotator { position: relative; width: 44px; height: 116px; }
.volume-slider {
  --vol: 100%;
  position: absolute; left: 50%; top: 50%; width: 104px; height: 28px; margin: 0; padding: 0;
  transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center;
  -webkit-appearance: none; appearance: none; background: transparent; border: 0; cursor: ns-resize;
  touch-action: none;
}
.volume-slider:focus { outline: none; }
.volume-slider:focus-visible { outline: 3px solid var(--select); outline-offset: 4px; }
.volume-slider::-webkit-slider-runnable-track {
  height: 10px; border: 0;
  background: linear-gradient(to right, var(--signal) var(--vol), color-mix(in srgb, var(--text) 28%, var(--line)) var(--vol));
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 18px; height: 28px; margin-top: -9px; border: 2px solid var(--signal); border-radius: 0;
  background: var(--text); cursor: ns-resize;
}
.volume-slider::-moz-range-track { height: 10px; border: 0; background: color-mix(in srgb, var(--text) 28%, var(--line)); }
.volume-slider::-moz-range-progress { height: 10px; background: var(--signal); }
.volume-slider::-moz-range-thumb {
  box-sizing: border-box; width: 18px; height: 28px; border: 2px solid var(--signal); border-radius: 0;
  background: var(--text); cursor: ns-resize;
}
@media (pointer: coarse) {
  .volume-rotator { width: 52px; }
  .volume-slider { height: 44px; }
}
.game-head-actions #btn-mute[aria-pressed="false"] { color: var(--muted); }
.game-head-actions #btn-mute .ic-sound-off { display: none; }
.game-head-actions #btn-mute[aria-pressed="false"] .ic-sound-off { display: inline-block; }
.game-head-actions #btn-mute[aria-pressed="false"] .ic-sound-on { display: none; }
@media (max-width: 560px) {
  .volume-rotator { height: 96px; }
  .volume-slider { width: 84px; }
  .game-head-actions .ic-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .game-head-actions .btn { min-width: 44px; min-height: 44px; width: auto; height: auto; padding: 0 8px; }
  .game-head-actions .badge { position: absolute; top: -4px; right: -4px; margin: 0; }
}

/* the layout grid, the HUD, the table, the decision buttons and the feed (the screen's skeleton) */
.game-layout {
  display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "players" "stage" "feed";
}
.game-players { grid-area: players; min-width: 0; }
.stage { grid-area: stage; }
.game-feed-wrap { grid-area: feed; min-width: 0; }
@media (min-width: 820px) {
  .game-layout {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "players stage" "feed stage";
  }
}
.stage { display: grid; gap: 12px; min-width: 0; align-content: start; }
.stage > * { margin: 0; }

.hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgb(0, 0, 0); }
.hud-cell { padding: 10px 14px; border-right: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.hud-cell:last-child { border-right: 0; }
.hud-label { font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.hud-value { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.hud-risk { box-shadow: inset 0 -4px 0 var(--signal); }
.hud-risk .hud-value { color: var(--signal); }
.hud-sel .hud-value { color: var(--select); }
.hud-bank { box-shadow: inset 0 -4px 0 var(--safe); }
.hud-bank .hud-value { color: var(--safe); }

.banner {
  min-height: 2.6rem; margin: 0; padding: 6px 22px 6px 24px; font-family: var(--display); font-weight: 900; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: 0.04em; text-align: left; overflow-wrap: anywhere;
  display: flex; align-items: center; justify-content: flex-start;
  background: var(--text); color: var(--ink); box-shadow: inset 8px 0 0 var(--signal); border-radius: 8px;
}
.banner-in { animation: wipe 0.35s var(--ease-out) both; }
.banner-empty { visibility: hidden; }
.banner-bad { background: var(--bad-d); color: var(--on-bad); box-shadow: inset 8px 0 0 rgb(0, 0, 0); }
.banner-hot, .banner-steal { background: var(--signal); color: var(--on-signal); box-shadow: inset 8px 0 0 rgb(0, 0, 0); }
.banner-good { background: var(--safe); color: var(--on-safe); box-shadow: inset 8px 0 0 rgb(0, 0, 0); }
.banner-turn { box-shadow: inset 10px 0 0 var(--seat, var(--signal)); }

.table {
  position: relative; padding: 22px 14px 14px; border-top: 3px solid var(--line); border-bottom: 3px solid var(--line);
  background:
    linear-gradient(135deg, transparent 49.5%, rgba(255, 255, 255, 0.03) 50%, transparent 50.5%) 0 0 / 22px 22px,
    var(--panel);
}

.preview { min-height: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sel-chip { padding: 4px 10px; background: var(--panel-2); border-left: 3px solid var(--select); font-weight: 600; font-size: 0.92rem; }
.sel-chip b { color: var(--select); }
.sel-op { color: var(--muted); font-family: var(--display); font-weight: 900; font-size: 1.2rem; }
.sel-total { font-family: var(--display); font-weight: 900; font-size: 1.8rem; line-height: 1; color: var(--select); }

.decision { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.decision > .btn { width: 100%; }
.btn-decision { flex-direction: column; gap: 2px; min-height: 64px; padding: 8px 14px; }
.btn-risk { --btn-bg: var(--signal); color: var(--on-signal); }
.btn-safe { --btn-bg: var(--safe); color: var(--on-safe); }
.btn-main { font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.btn-sub { font-family: var(--body); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.btn-sub:empty { display: none; }
.btn-decision:disabled .btn-sub { opacity: 1; }
.turn-controls { display: grid; gap: 8px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }

.target-note { margin: 8px 0 0; color: var(--muted); font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.feed:empty::after { content: "Nothing yet"; color: var(--muted); font-size: 0.92rem; }

.scoreboard .seat {
  position: relative; display: grid; align-items: center; min-height: 56px; padding: 6px 12px 10px 0;
  grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; background: var(--panel);
  grid-template-areas: "av nm sc" "av ch sc" ". bar bar";
}
.scoreboard .seat-avatar { grid-area: av; --avk-size: 44px; }
.scoreboard .seat-name { grid-area: nm; align-self: end; font-size: 1.2rem; line-height: 1; }
.scoreboard .seat-chips { grid-area: ch; margin: 0; min-width: 0; align-self: start; }
.scoreboard .seat-score { grid-area: sc; margin: 0; font-size: 1.8rem; }
.scoreboard .bar { grid-area: bar; margin-top: 4px; }
.scoreboard .seat-current, .scoreboard .is-live { background: var(--panel-2); box-shadow: inset 4px 0 0 var(--seat, var(--select)); }
/* The avatar is clipped to a slant, so nothing may be drawn as a ring or shadow on it (the clip cut it
   off along the slant). The turn is shown by pulsing the avatar's own brightness instead. */
.scoreboard .is-live .seat-avatar { animation: turn-pulse 1.6s ease-in-out infinite; }
.scoreboard .is-live .seat-score { margin-right: 38px; }
.scoreboard .is-next .seat-score { margin-right: 46px; }
.scoreboard .is-live::after {
  content: "LIVE"; position: absolute; top: 6px; right: -2px; padding: 0 6px; background: var(--bad-d); color: var(--on-bad);
  font: 900 0.7rem/1.5 var(--display); letter-spacing: 0.14em; transform: skewX(-12deg);
  animation: live-in 0.3s var(--ease-out) both;
}
.scoreboard .is-next::after {
  content: "NEXT"; position: absolute; top: 6px; right: -2px; padding: 0 6px; background: var(--panel-2); color: var(--muted);
  font: 900 0.7rem/1.5 var(--display); letter-spacing: 0.14em; transform: skewX(-12deg); box-shadow: inset 0 0 0 1px var(--line);
}
.leader-mark { display: inline-flex; margin-left: 6px; vertical-align: -2px; color: var(--select); }

.bar { position: relative; height: 4px; overflow: hidden; background: var(--disabled-bg); }
.bar-fill, .bar-ghost { position: absolute; top: 0; bottom: 0; transition: width 0.6s var(--ease-out), left 0.6s var(--ease-out); }
.bar-fill { left: 0; width: calc(var(--p, 0) * 100%); background: var(--seat, var(--text)); }
.bar-ghost { left: calc(var(--p0, 0) * 100%); width: calc((var(--p, 0) - var(--p0, 0)) * 100%); background: var(--safe); opacity: 0.55; }

/* the Play-by-play feed */
.feed-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px 6px 14px; background: var(--panel); box-shadow: inset 4px 0 0 var(--seat, var(--line)); font-size: 0.92rem;
}
.feed-dice { display: inline-flex; gap: 3px; }
.feed-dice .die-mini { --s: 18px; }
.feed-dead .die-mini { opacity: 0.4; }
.feed-call { font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--text); }
.feed-pts { margin-left: auto; font-family: var(--display); }
.feed-who { font-family: var(--display); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; color: var(--seat, var(--text)); }
.feed-new { animation: wipe 0.35s var(--ease-out) both; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.feed-head .panel-title { margin: 0; }

/* the All plays modal: one section per turn, one row per roll */
.chip-safe { background: var(--safe); color: var(--on-safe); }
.chip-bad { background: var(--bad-d); color: var(--on-bad); }
.hist-list { max-height: min(70vh, 640px); overflow-y: auto; display: grid; gap: 8px; align-content: start; padding-right: 4px; }
.hist-list:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }
.hist-round {
  display: flex; align-items: center; gap: 10px; line-height: 1.1;
  margin: 10px 0 0; font-family: var(--display); font-weight: 900; font-size: 1rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.hist-turn {
  content-visibility: auto; contain-intrinsic-size: auto 96px;
  display: grid; gap: 6px; padding: 8px 10px 8px 16px; background: var(--panel-2); box-shadow: inset 4px 0 0 var(--seat, var(--line));
}
.hist-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-avatar { --avk-size: 24px; flex: none; }
.hist-name { font-family: var(--display); font-weight: 900; text-transform: uppercase; color: var(--seat, var(--text)); }
.hist-head .chip { margin-left: auto; }
.hist-roll { display: flex; align-items: center; gap: 10px; }
.hist-dice { display: inline-flex; gap: 3px; }
.hist-roll .die-mini { --s: 18px; }
.hist-roll .is-faded { opacity: 0.35; }
.hist-roll .is-kept { box-shadow: var(--face-ring), 0 2px 0 var(--select); }
.hist-pts { margin-left: auto; font-family: var(--display); }
.hist-roll-dead .hist-pts { color: var(--muted); }
.hist-note, .hist-partial { margin: 0; font-size: 0.85rem; color: var(--muted); }
.hist-more { display: flex; justify-content: center; }

/* ---- moments: a stamped band wipes across the table with the title slammed on it ----
   Layered over .table and never focusable or interactive (pointer-events: none), so D8 does not
   apply; the band's clip-path lives only inside @keyframes. The stripes are painted by .moment-stamp
   itself, so the band is exactly as tall as its text (a percentage of the table clipped it). */
.moment {
  --band: var(--text); --band-2: var(--text-d); --fg: var(--ink);
  --fg-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center stretch;
  overflow-x: clip; overflow-y: visible; pointer-events: none; text-align: center;
}
.moment[hidden] { display: none; }
.moment-stamp {
  position: relative; margin: 0 -10%; padding: 14px 10%; transform: skewY(-6deg);
  /* The two stripe colours blend over 4px instead of switching at a hard stop: a hard stop on a skewed
     diagonal is aliased into stair-steps. The last stop equals the first, so the repeat is seamless. */
  background: repeating-linear-gradient(-60deg, var(--band) 0, var(--band) 24px, var(--band-2) 28px, var(--band-2) 52px, var(--band) 56px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 10px 40px rgba(0, 0, 0, 0.6);
  animation: band 0.4s var(--ease-out) both;
}
.moment-title {
  margin: 0; font: 900 clamp(3rem, 12vw, 6.5rem) / 0.85 var(--display); font-style: italic; text-transform: uppercase;
  overflow-wrap: anywhere; color: var(--fg); text-shadow: var(--fg-shadow);
  animation: slam 0.45s 0.12s var(--ease-spring) both;
}
.moment-sub {
  margin: 8px 0 0; font: 900 1.3rem / 1.15 var(--display); text-transform: uppercase; letter-spacing: 0.14em;
  overflow-wrap: anywhere; color: var(--fg); text-shadow: var(--fg-shadow);
}
/* Dark bands (bad, good) carry light text and light bands (hot, steal, info) carry dark text, so every
   stripe of every band clears 7:1 against its lettering. */
.m-bad, .m-good { --fg-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 0, 0, 0.45); }
.m-bad { --band: var(--band-bad); --band-2: var(--band-bad-2); --fg: var(--on-band-bad); }
.m-good { --band: var(--band-good); --band-2: var(--band-good-2); --fg: var(--on-band-good); }
.m-hot { --band: var(--band-hot); --band-2: var(--band-hot-2); --fg: var(--on-signal); }
.m-steal { --band: var(--select); --band-2: var(--band-steal-2); --fg: var(--on-select); }
.m-info { --band: var(--text); --band-2: var(--text-d); --fg: var(--ink); }

/* screen shake, scaled to the moment (intensity is data) */
.shake-s { animation: shake-s 0.25s ease; }
.shake-m { animation: shake-m 0.4s ease; }
.shake-l { animation: shake-l 0.55s ease; }

/* a one-shot bump when a score changes */
.score-bump { display: inline-block; transform-origin: right center; animation: score-bump 0.35s var(--ease-out) both; }

@keyframes band { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes slam { from { transform: translateX(-60%); opacity: 0; } }
@keyframes shake-s { 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 0); } }
@keyframes shake-m { 15% { transform: translate(-6px, 2px); } 35% { transform: translate(5px, -3px); } 55% { transform: translate(-4px, 2px); } 75% { transform: translate(2px, -1px); } }
@keyframes shake-l { 15% { transform: translate(-8px, 3px) rotate(-1deg); } 35% { transform: translate(7px, -4px) rotate(1deg); } 55% { transform: translate(-5px, 3px); } 75% { transform: translate(3px, -1px); } }
@keyframes turn-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}
@keyframes live-in { from { transform: skewX(-12deg) scale(1.4); } to { transform: skewX(-12deg) scale(1); } }
@keyframes score-bump { from { transform: scale(1.15); } to { transform: scale(1); } }
/* the results podium's blocks (Session 5) grow up from the floor */
@keyframes rise { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }

/* phone: the players become a horizontal strip and the decision buttons stick to the bottom */
@media (max-width: 819px) {
  .hud-cell { padding: 10px 10px; }
  .hud-label { letter-spacing: 0.08em; }
  .scoreboard { grid-auto-flow: column; grid-auto-columns: minmax(136px, 1fr); overflow-x: auto; padding-bottom: 4px; }
  .scoreboard .seat {
    grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; min-height: 60px; padding: 4px 8px 8px 0;
    grid-template-areas: "av nm" "av ch" "av sc" "bar bar";
  }
  .scoreboard { scroll-snap-type: x proximity; }
  .scoreboard .seat { scroll-snap-align: start; }
  .scoreboard[data-more-right] { mask-image: linear-gradient(to right, black calc(100% - 28px), transparent); }
  .scoreboard[data-more-left] { mask-image: linear-gradient(to left, black calc(100% - 28px), transparent); }
  .scoreboard[data-more-left][data-more-right] { mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent); }
  .scoreboard .seat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .scoreboard .seat-avatar { --avk-size: 36px; }
  .scoreboard .seat-chips { min-width: 0; overflow: hidden; flex-wrap: nowrap; }
  .scoreboard .seat-chips > :not(.chip-key) { display: none; }
  .scoreboard .seat-chips:not(:has(.chip-key)) { display: none; }
  .scoreboard .chip-key { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scoreboard .chip-key { padding: 1px 6px; letter-spacing: 0.04em; }
  .scoreboard .chip-key .chip-short { display: inline; }
  .scoreboard .chip-key .chip-full {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .target-note { display: none; }
  .scoreboard .seat-score { font-size: 1.5rem; }
  .scoreboard .bar { margin-top: 2px; }
  .scoreboard .is-live .seat-score, .scoreboard .is-next .seat-score { margin-right: 0; }
  .scoreboard .is-live .seat-name { padding-right: 34px; }
  .scoreboard .is-next .seat-name { padding-right: 40px; }
  .scoreboard .is-live::after, .scoreboard .is-next::after { top: 4px; }
  .turn-controls, .stage > .decision {
    position: sticky; bottom: 0; z-index: 3; padding: 14px 0 8px;
    background: linear-gradient(to top, var(--bg) 70%, transparent);
  }
}

/* ---- 19. results ---- */
.eyebrow { font: 800 0.8rem/1.2 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.winner-banner { overflow-wrap: anywhere; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 10vw, 5.6rem); line-height: 0.95; color: var(--select); margin: 0 0 20px; }

/* the stats desk: podium blocks rise, awards wipe in */
.podium { list-style: none; margin: 0 0 20px; padding: 0; display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.place { --seat: var(--text); flex: 1 1 0; max-width: 220px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.place .avatar { --avk-size: 44px; transform: skewX(-8deg); }
.place .avatar > .avk-glyph { transform: skewX(8deg); }
.place.is-winner .avatar { --avk-size: 64px; }
.place-name { font-family: var(--display); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; overflow-wrap: anywhere; line-height: 1.05; }
.place-score { font-family: var(--display); font-weight: 900; font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.place-block {
  align-self: stretch; display: grid; place-items: center; height: 60px; background: var(--panel-2); border-top: 4px solid var(--seat);
  transform-origin: bottom; animation: rise 0.5s var(--ease-spring) 0.5s both;
}
.place-1 .place-block { height: 120px; background: var(--select); color: var(--on-select); animation-delay: 0.35s; }
.place-2 .place-block { height: 84px; animation-delay: 0.15s; }
.place-num { font-family: var(--display); font-weight: 900; font-size: 2.6rem; line-height: 1; }
.awards { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.award { --seat: var(--text); display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--panel-2); border-left: 4px solid var(--seat); animation: wipe 0.4s var(--ease-out) 0.6s both; }
.award:nth-child(2) { animation-delay: 0.75s; }
.award:nth-child(3) { animation-delay: 0.9s; }
.award-title { font: 800 0.72rem var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.award-value { font-family: var(--display); font-weight: 900; font-size: 1.8rem; line-height: 1; color: var(--select); }
.award-who { font-weight: 600; }
.fullstats { margin-bottom: 16px; }
/* Results page rhythm: every block is separated by a clear gap so nothing touches its neighbour. */
#screen-results .podium { margin-bottom: 28px; }
#screen-results .button-row { margin: 0 0 20px; }
#screen-results .hint { margin: 4px 0 20px; }
#screen-results .notice { margin-bottom: 20px; }
#screen-results .button-row:last-child { margin-bottom: 0; }
.results-card { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.results-table th, .results-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.results-table th:nth-child(2), .results-table td:nth-child(2) { text-align: left; }
.results-table th { font: 800 0.72rem var(--body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); border-bottom: 2px solid var(--line); }
.results-table .cell-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.result-name { font-family: var(--display); font-weight: 900; font-size: 1.15rem; text-transform: uppercase; }
.row-winner td { color: var(--select); font-weight: 800; }
.row-left td { opacity: 0.6; }
@media (max-width: 640px) {
  .results-table thead { position: absolute; left: -9999px; }
  .results-table, .results-table tbody, .results-table tr, .results-table td { display: block; width: 100%; }
  .results-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .results-table td { display: flex; justify-content: space-between; border: 0; padding: 3px 4px; text-align: right; }
  .results-table td::before { content: attr(data-label); color: var(--muted); text-align: left; }
}

/* ---- 19b. rule tooltips, info buttons and the lobby QR ---- */
.field-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.field-head .field-label { margin-bottom: 0; }
.rules-row dt { display: flex; align-items: center; gap: 6px; }
.info-btn {
  position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer;
  display: inline-grid; place-items: center;
}
.info-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.info-btn .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.info-btn[aria-expanded="true"] { color: var(--select); box-shadow: inset 0 0 0 2px var(--select); }
.tip {
  position: fixed; z-index: 70; max-width: min(340px, calc(100vw - 24px)); background: var(--panel-2); color: var(--text);
  box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, 0.5); padding: 12px 14px; font-size: 0.92rem; line-height: 1.4;
}
.tip[hidden] { display: none; }
.tip-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.tip-body { color: var(--text); }
.tip-options { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.tip-options li { padding: 4px 0 4px 10px; color: var(--muted); }
.tip-options li b { color: var(--text); }
.tip-options .is-current { box-shadow: inset 3px 0 0 var(--select); color: var(--text); }
.tip-current { margin-left: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--select); }
.tip-arrow { position: absolute; width: 12px; height: 12px; background: var(--panel-2); transform: translateX(-50%) rotate(45deg); }
.tip[data-placement="top"] .tip-arrow { bottom: -6px; }
.tip[data-placement="bottom"] .tip-arrow { top: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .tip:not([hidden]) { animation: tip-in 120ms ease-out; }
  @keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }
}
.qr { display: block; width: min(72vw, 280px); height: auto; margin: 0 auto 12px; }
.qr rect { fill: var(--text); }
.qr path { fill: var(--ink); }
.qr-code { text-align: center; margin: 0 0 8px; }
.qr-link { word-break: break-all; color: var(--muted); font-size: 0.9rem; text-align: center; user-select: all; }
.qr-hint { text-align: center; margin: 8px 0 0; }

/* ---- 19c. tutorial coach marks (non-blocking: the ring never takes a click) ---- */
.lobby-title-row { display: flex; align-items: center; gap: 12px; }
.coach-ring {
  position: fixed; z-index: 50; pointer-events: none; box-shadow: 0 0 0 2px var(--select), 0 0 0 9999px rgba(0, 0, 0, 0.45);
}
.coach-ring[hidden] { display: none; }
.coach-card {
  position: fixed; z-index: 51; max-width: min(360px, calc(100vw - 24px)); background: var(--panel-2); color: var(--text);
  box-shadow: 0 0 0 2px var(--select), 0 16px 40px rgba(0, 0, 0, 0.6); padding: 14px 16px;
}
.coach-card[hidden] { display: none; }
.coach-count { margin: 0 0 4px; color: var(--muted); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; }
.coach-title { margin: 0 0 6px; font-size: 1.3rem; }
.coach-body { margin: 0 0 12px; line-height: 1.4; }
.coach-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.coach-actions .btn { min-height: 44px; }
.coach-actions .coach-off { margin-right: auto; }

/* ---- avatar picker (PLAYER_AVATARS_PLAN D13): native radios; rings live on the label via :has(), tiles are never clipped ---- */
.avatar-preview-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
.avatar-preview { --avk-size: 88px; align-self: auto; min-height: 88px; width: 104px; }
.avatar-icons, .avatar-colors { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.avatar-icons legend, .avatar-colors legend { font-weight: 800; padding: 0 0 6px; }
.avatar-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.avatar-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.avatar-icons legend, .avatar-colors legend { grid-column: 1 / -1; }
.avatar-option { position: relative; display: grid; place-items: center; min-width: 44px; min-height: 44px; aspect-ratio: 1; cursor: pointer; }
.avatar-tile { --avk-size: 40px; border-radius: 0; box-shadow: none; background: linear-gradient(160deg, var(--avk-a), var(--avk-b)); }
.avatar-swatch {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--avk-a), var(--avk-b)); color: var(--avk-fg);
}
.avatar-check { visibility: hidden; font-weight: 900; font-size: 1.4rem; }
.avatar-option:has(input:checked) .avatar-check { visibility: visible; }
.avatar-option:has(input:checked) { box-shadow: inset 0 0 0 3px var(--select); }
.avatar-option:has(input:focus-visible) { outline: 3px solid var(--select); outline-offset: 2px; }
.avatar-option:has(input:disabled) { opacity: 0.35; cursor: not-allowed; }
.avatar-forget-row { margin-top: 8px; }
.avatar-forget { min-height: 44px; font-size: 0.85rem; }
@media (min-width: 520px) {
  .avatar-icons { grid-template-columns: repeat(8, 1fr); }
  .avatar-colors { grid-template-columns: repeat(12, 1fr); }
}

/* ---- avatar entry points (PLAYER_AVATARS_PLAN Task 5.1, 5.2) ----
   The buttons never carry a clip-path: the slanted block is their child, and the pencil badge and the
   focus ring are drawn on the button, so neither is clipped (H3). */
.name-row { display: flex; gap: 12px; align-items: flex-end; }
.name-row .field { flex: 1 1 auto; min-width: 0; }
.avatar-pick, .seat-avatar-btn {
  position: relative; flex: none; display: flex; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.avatar-pick { width: 60px; height: 52px; margin: 0 0 12px; }
.avatar-pick .seat-avatar { --avk-size: 52px; align-self: stretch; min-height: 52px; width: 100%; }
.seat-avatar-btn { align-self: stretch; }
.seat-avatar-btn .seat-avatar { align-self: stretch; }
.avatar-pick::after, .seat-avatar-btn::after {
  content: ""; position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px;
  border-radius: 50%; background-color: var(--panel); border: 2px solid var(--select);
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  /* A pencil drawn as an SVG, so no font has to supply the glyph. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffd978' d='M11.9 1.6a1.5 1.5 0 0 1 2.1 0l.4.4a1.5 1.5 0 0 1 0 2.1L5.6 12.9 1.5 14.5l1.6-4.1z'/%3E%3C/svg%3E");
  pointer-events: none;
}
.avatar-pick:focus-visible, .seat-avatar-btn:focus-visible { outline: 3px solid var(--select); outline-offset: 3px; }

/* ---- 20. the table (seats round an oval on a wide screen, two columns on a phone) ---- */
.board { position: relative; min-width: 0; }
.seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.table-seat {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center;
  min-width: 0; padding: 8px 10px; border-radius: 12px;
  background: linear-gradient(180deg, var(--wood), var(--panel));
  box-shadow: inset 0 0 0 1px var(--line), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.table-seat.is-turn { box-shadow: inset 0 0 0 2px var(--select), 0 0 16px rgba(255, 217, 120, 0.35); }
.table-seat.is-out { opacity: 0.72; }
.table-seat:has(.taunt-bubble) { z-index: 1; }
.taunt-bubble {
  position: absolute; z-index: 1; inset-inline: 4px; bottom: calc(100% - 8px);
  padding: 4px 8px; border-radius: 8px; background: var(--select); color: var(--on-select);
  text-align: center; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; pointer-events: none;
}
.taunt-mute { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.taunt-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.table-seat .seat-cup { grid-row: span 3; width: 40px; height: 46px; }
.table-seat-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.table-seat .seat-avatar { --avk-size: 28px; width: 28px; min-height: 28px; height: 28px; flex: none; }
.table-seat .nm {
  flex: 1 1 4rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: 0.02em;
}
.table-seat.is-me .nm { color: var(--select); }
.table-seat .seat-chips { margin: 0; }
.table-seat .chip { min-height: 0; padding: 0 7px; font-size: 0.68rem; }
.chip-turn { background: var(--select); color: var(--on-select); }
.pips-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.seat-bid { grid-column: 2; font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.seat-exposed { grid-column: 2; display: inline-flex; gap: 3px; }
.count-pips { display: inline-flex; gap: 3px; align-items: center; }
.count-pip { width: 9px; height: 9px; border-radius: 2px; background: var(--pip-on); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); }
.count-pip.is-lost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pip-off); }
.pip-count { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.cup-wrap { display: block; width: 48px; height: 54px; }
.cup-wrap .cup { display: block; width: 100%; height: 100%; overflow: visible; }
.my-cup .cup-wrap.is-up .cup { transform: translateY(-12px); }
.my-cup { display: flex; justify-content: center; }
.my-cup .cup-wrap { width: 72px; height: 82px; }

.bid-panel {
  display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 0; overflow: hidden;
  margin-top: 10px; padding: 14px 16px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, var(--panel-2), var(--slate) 72%);
  border: 5px solid var(--wood-l);
  box-shadow: 0 0 0 2px var(--brass-d), inset 0 0 24px rgba(0, 0, 0, 0.45);
}
.bid-label { margin: 0; }
.bid-now { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1; color: var(--text); }
.bid-face { margin: 0; min-height: 0; }
.bid-face:empty { display: none; }
.bid-who { margin: 0; font-weight: 800; }
.bid-plain { margin: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--muted); }
.round-tide { width: min(100%, 300px); margin: 0 auto 10px; }
.tide-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--brass); border-radius: 8px; text-align: left;
  background: var(--grain), linear-gradient(145deg, var(--wood-l), var(--panel));
  box-shadow: inset 0 0 0 2px var(--panel), 0 2px 5px rgba(0, 0, 0, 0.45);
}
.tide-mark { color: var(--select); font-size: 1.4rem; }
.tide-copy { display: grid; min-width: 0; }
.tide-label { color: var(--brass-l); font-size: 0.64rem; }
.tide-name { font-family: var(--display); font-size: 1.15rem; line-height: 1.1; }
.tide-rule { margin: 2px 0 0; color: var(--text); line-height: 1.15; }
@media (prefers-reduced-motion: no-preference) {
  .tide-card { animation: tide-turn 420ms ease-out; }
  @keyframes tide-turn {
    from { transform: perspective(480px) rotateY(-90deg); opacity: 0; }
    to { transform: perspective(480px) rotateY(0); opacity: 1; }
  }
}
.timer { width: 100%; max-width: 240px; display: grid; gap: 4px; justify-items: center; }
.timer-bar { display: block; width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.timer-bar::after { content: ""; display: block; height: 100%; width: calc(var(--pct, 0) * 1%); background: var(--select); border-radius: inherit; }
.timer-text { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--select); }

.hand { display: grid; gap: 8px; margin-top: 16px; min-width: 0; }
.hand-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hand-stage { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.hand-tray {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-end;
  width: 100%; min-width: 0; min-height: 88px; padding: 14px 10px 12px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, var(--baize-l), var(--baize) 78%);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.55), 0 0 0 3px var(--wood), 0 0 0 4px var(--brass-d);
}
.cover-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--muted); cursor: pointer; }
.cover-toggle input { width: 22px; height: 22px; margin: 0; }
.tray-empty { margin: 0; color: var(--muted); }

.controls { display: grid; gap: 12px; margin-top: 14px; min-width: 0; padding: 12px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.step-btn {
  min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--brass-d);
  font: 800 1.4rem/1 var(--body); cursor: pointer;
}
.step-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.step-out { min-width: 3ch; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--select); }
.faces { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 6px; flex: 1 1 294px; min-width: 0; }
.face-wrap { position: relative; min-width: 0; }
.face-btn {
  width: 100%; min-width: 44px; min-height: 44px; padding: 4px 2px; border: 0; border-radius: 10px;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  background: var(--panel-2); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer;
}
.face-btn[aria-pressed="true"], .face-btn.is-on { color: var(--select); box-shadow: inset 0 0 0 3px var(--select); }
.face-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.face-btn .die-mini { --s: 40px; }
.face-min { font-size: 0.72rem; line-height: 1; }
.face-tip {
  position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  width: max-content; max-width: 180px; padding: 6px 8px; border-radius: 8px;
  background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line);
  font-size: 0.75rem; line-height: 1.3; text-align: center; visibility: hidden;
}
.face-wrap:focus-within .face-tip { visibility: visible; }
.bid-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bid-actions .btn { flex: 1 1 140px; }
.exact-wrap { flex: 1 1 140px; display: flex; }
.exact-wrap .btn { width: 100%; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.expose-note { margin: 0; color: var(--muted); font-size: 0.85rem; min-width: 0; overflow-wrap: anywhere; }
.expose-note.is-warning { color: var(--signal); font-weight: 700; }
.bid-preview { margin: 8px 0 0; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.keg-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; color: var(--signal); font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.keg-toggle input { flex: none; width: 22px; height: 22px; margin: 0; }
.keg-toggle input:disabled + .keg-text { color: var(--muted); font-weight: 400; }

.trick-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; min-width: 0; }
.trick-bar[hidden] { display: none; }
.trick-wrap { flex: 1 1 120px; display: flex; }
.trick-btn { width: 100%; min-height: 44px; }
.spyglass-list { display: grid; gap: 8px; margin-top: 10px; }
.spyglass-target { min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-peeked { grid-column: 2; display: inline-flex; align-items: center; gap: 3px; color: var(--select); font-size: 0.72rem; font-weight: 700; }
.peek-label { margin-right: 2px; }
.seat-tokens { grid-column: 2; font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.reveal-panel {
  display: grid; gap: 10px; margin-top: 14px; min-width: 0; padding: 12px;
  border-radius: 14px; background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.reveal-panel[hidden] { display: none; }
.reveal-seats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reveal-seat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0;
  padding: 8px; border-radius: 10px; background: var(--panel-2);
}
.reveal-name { font-family: var(--display); font-weight: 800; min-width: 4rem; }
.reveal-seat .cup-wrap { width: 36px; height: 42px; flex: none; }
.reveal-seat .cup-wrap.is-up .cup { transform: translateY(-10px) rotate(4deg); }
/* The match/wild outline (3px + 2px offset) paints 5px outside the die, so the label gap and the
   die-to-die gap must clear it or the ring covers the mark text and touches its neighbour. */
.reveal-dice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 20px 16px; padding: 8px 8px 12px; }
.reveal-dice[hidden] { display: none; }
.reveal-die { position: relative; display: inline-flex; }
.reveal-die .die-mini { --s: 36px; }
/* The WILD tag straddles the bottom of the ring so it adds no height: rows stay the height of the dice. */
.die-mark {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); border-radius: 4px;
  background: var(--select); color: var(--on-select); white-space: nowrap; pointer-events: none;
  font: 800 0.68rem/1 var(--body); letter-spacing: 0.07em; text-transform: uppercase;
  /* Caps sit high in a line box (the space under the baseline is reserved for descenders), so
     equal padding looked top-aligned. The extra top padding centres the capitals in the tag. */
  padding: 4px 5px 2px;
}
@supports (text-box: trim-both cap alphabetic) {
  /* Where supported, trim the line box to the capitals so equal padding is exactly centred. */
  .die-mark { text-box: trim-both cap alphabetic; padding: 3px 5px; }
}
.reveal-count {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: 2.4rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--select);
}
.reveal-verdict { margin: 0; font-family: var(--display); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; }
.reveal-explanation { margin: 0; overflow-wrap: anywhere; }
.reveal-hold { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.reveal-hold[hidden] { display: none; }
.reveal-ready, .reveal-clock { margin: 0; font-weight: 800; }
.reveal-delta { color: var(--muted); font-weight: 700; }
@media (max-width: 480px) {
  .reveal-seat { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .reveal-name { min-width: 0; overflow-wrap: anywhere; }
  .reveal-dice, .reveal-delta { grid-column: 1 / -1; }
  .reveal-dice { gap: 14px 14px; }
}
.hist-reveal { display: grid; gap: 6px; }
.hist-reveal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Smaller dice here. The 3px ring + 2px offset paints 5px outside a die, so the gap clears two rings
   (10px) with room to spare, and the padding keeps the outer rings inside the row. */
.hist-reveal .reveal-die .die-mini { --s: 26px; }
.hist-reveal .hist-dice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px 14px; padding: 8px 7px 10px; }
.hist-reveal .hist-name { min-width: 4rem; }
.hist-bid { margin: 0; }
.reason { margin: 0; }

@media (max-width: 560px) {
  .hand-tray { --die-tray: 46px; gap: 8px; }
}
@media (min-width: 900px) {
  #screen-game .board { height: 540px; }
  #screen-game .board::before {
    content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; pointer-events: none;
    background: var(--grain), radial-gradient(ellipse at 50% 40%, var(--wood-l), var(--wood) 72%);
    background-size: 220px, auto;
    box-shadow: 0 0 0 5px var(--brass-d), 0 0 0 9px var(--night), inset 0 0 50px rgba(0, 0, 0, 0.45);
  }
  #screen-game .seats { position: absolute; inset: 0; display: block; }
  #screen-game .table-seat {
    position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
    width: 210px; transform: translate(-50%, -50%);
  }
  #screen-game .bid-panel {
    position: absolute; left: 50%; top: 50%; width: min(340px, 46%); margin: 0;
    transform: translate(-50%, -50%); z-index: 1;
  }
}

/* ---- 20b. Captain's Cabin wood skin (docs/design/DIRECTION.md) ----
   Real CC0 wood (src/textures/, credits in textures/CREDITS.txt) painted over the structure above:
   frame-and-panel cards, a mahogany-rimmed table, teak and oak buttons with burnt lettering, brass
   screws. This section restyles the paint of the rules before it; layout stays in those rules. */
/* ---- the room: plank wall, a warm lamp overhead, dark corners ---- */
body {
  background:
    radial-gradient(ellipse 60% 42% at 50% 6%, rgba(255, 186, 92, 0.26), transparent 72%) fixed,
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.62) 100%) fixed,
    linear-gradient(rgba(26, 13, 5, 0.64), rgba(26, 13, 5, 0.64)),
    var(--tex-wall) 0 0 / 560px auto,
    var(--bg);
}
/* the lamp breathes a little (one fixed layer, behind the content, never takes a click) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 34% at 50% 4%, rgba(255, 200, 110, 0.14), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: lamp 5.5s ease-in-out infinite; }
  @keyframes lamp { 0%, 100% { opacity: 1; } 38% { opacity: 0.72; } 44% { opacity: 0.95; } 70% { opacity: 0.82; } }
}

/* ---- the beam (header) and the brass nameplate ---- */
.site-header {
  position: relative; padding-top: 8px; padding-bottom: 8px; border-bottom: 0;
  background: linear-gradient(180deg, rgba(255, 210, 160, 0.10), transparent 40%, rgba(0, 0, 0, 0.45)), var(--tex-beam) 0 0 / 420px auto;
  box-shadow: inset 0 -4px 0 var(--brass-d), inset 0 -5px 0 rgba(0, 0, 0, 0.6), 0 8px 18px rgba(0, 0, 0, 0.55);
}
.brand { margin: 0 0 0 var(--gutter); padding: 6px 30px; color: var(--burn); }
.brand::before {
  border-radius: 6px;
  /* screws, then scratched/tarnished brass grain, then a soft sheen, over the brass gradient */
  background: var(--screws), var(--tex-brass-plate) 0 0 / 360px 120px, linear-gradient(100deg, transparent 30%, rgba(255, 255, 240, 0.32) 46%, transparent 60%), var(--metal);
  --sc: 13px; --ps: 14px;
  box-shadow: inset 0 0 0 1px var(--brass-dd), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(70, 40, 6, 0.5), 0 3px 0 var(--brass-dd), 0 6px 12px rgba(0, 0, 0, 0.6);
}
.brand-name { font-weight: 800; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55), 0 -1px 0 rgba(60, 30, 0, 0.35); }

/* ---- headings: brass inlay instead of the slanted bar ---- */
h1, .winner-banner { color: var(--cream); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 180, 80, 0.18); }
.hero h1 { color: var(--brass-l); text-shadow: 0 3px 0 var(--brass-dd), 0 6px 14px rgba(0, 0, 0, 0.7); }
.card > h2::before, .panel-title::before {
  width: 10px; height: 10px; border-radius: 50%; vertical-align: 0.05em;
  background: var(--pin-0) center / contain no-repeat; background-color: transparent;
  box-shadow: none; transform: scale(1.6);
}
.card > h2, .panel-title { color: var(--brass-l); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }
.lede { border-left: 0; padding-left: 16px; position: relative; color: var(--cream); }
.lede::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px; border-radius: 3px; background: var(--metal); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

/* ---- frame-and-panel: a walnut panel in a mahogany frame, brass in the corners ---- */
.card::before, .controls, .reveal-panel, .modal-box {
  border: 10px solid transparent; border-radius: 12px;
  background:
    var(--screws),
    linear-gradient(180deg, rgba(255, 220, 170, 0.07), transparent 30%, rgba(0, 0, 0, 0.18)) padding-box,
    linear-gradient(rgba(18, 9, 4, 0.42), rgba(18, 9, 4, 0.42)) padding-box,
    var(--tex-panel) 0 0 / 300px auto padding-box,
    linear-gradient(180deg, rgba(255, 210, 160, 0.16), transparent 35%, rgba(0, 0, 0, 0.45)) border-box,
    var(--tex-beam) 0 0 / 260px auto border-box;
  --sc: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.6), var(--lift);
}
.card { padding: 26px; }
.controls, .reveal-panel { padding: 16px; }
.modal-box { border-top-width: 10px; border-radius: 14px; padding: 26px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 6px 14px rgba(0, 0, 0, 0.5), 0 30px 60px rgba(0, 0, 0, 0.75); }
.modal-backdrop { background: radial-gradient(ellipse at 50% 30%, rgba(30, 14, 4, 0.6), rgba(0, 0, 0, 0.85)); }

/* recessed fields: a groove routed into the panel */
.form-input {
  border-radius: 6px; border-bottom: 0;
  background: linear-gradient(rgba(8, 4, 2, 0.55), rgba(8, 4, 2, 0.55)), var(--tex-cherry) 0 0 / 220px auto;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 220, 170, 0.12), 0 1px 0 rgba(255, 220, 170, 0.10);
}
.form-input:focus-visible { background: linear-gradient(rgba(8, 4, 2, 0.4), rgba(8, 4, 2, 0.4)), var(--tex-cherry) 0 0 / 220px auto; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 0 2px var(--brass), 0 0 14px rgba(255, 196, 106, 0.35); }

/* ---- buttons: real wood, lettering burnt in, a visible thickness that presses down ---- */
.btn { --edge: rgba(70, 38, 12, 1); --thick: 5px; border-radius: 9px; font-weight: 800; transition: transform 0.18s var(--ease-spring), filter 0.15s ease; }
.btn::before {
  border-radius: 9px;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 245, 220, 0.38) 50%, transparent 65%) no-repeat -120% 0 / 55% 100%,
    linear-gradient(180deg, rgba(255, 236, 200, 0.22), transparent 42%, rgba(0, 0, 0, 0.22)),
    var(--wood-tint, linear-gradient(transparent, transparent)),
    var(--wood, var(--tex-plaque)) var(--wood-pos, 0 0) / var(--wood-size, 240px auto);
  box-shadow: var(--bevel), inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 var(--thick) 0 var(--edge), 0 calc(var(--thick) + 4px) 10px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.12s ease;
}
.btn-primary { --wood: var(--tex-honey); --wood-tint: linear-gradient(rgba(255, 234, 196, 0.34), rgba(255, 216, 150, 0.22)); --edge: rgba(110, 60, 18, 1); --thick: 3px; color: var(--burn); text-shadow: 0 1px 0 rgba(255, 236, 190, 0.6); }
/* Light wood has no hard brown lip under it: the button is the wood itself, with a soft shadow. --thick
   stays only as the distance the button sinks when pressed. */
.btn-primary::before { box-shadow: var(--bevel), inset 0 0 0 1px rgba(80, 40, 6, 0.55), inset 0 0 0 3px rgba(255, 220, 150, 0.18), 0 4px 10px rgba(0, 0, 0, 0.5); }
.btn-primary:active:not(:disabled)::before { box-shadow: var(--bevel), inset 0 0 0 1px rgba(80, 40, 6, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5); }
.btn-secondary, .btn-quiet { --wood: var(--tex-plaque); --wood-tint: linear-gradient(rgba(20, 8, 2, 0.30), rgba(20, 8, 2, 0.45)); --edge: rgba(36, 18, 6, 1); color: var(--cream); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); }
.btn-secondary::before { box-shadow: var(--bevel), inset 0 0 0 2px var(--brass-d), inset 0 0 0 3px rgba(0, 0, 0, 0.35), 0 var(--thick) 0 var(--edge), 0 calc(var(--thick) + 4px) 10px rgba(0, 0, 0, 0.55); }
.btn-quiet { --wood: var(--tex-beam); --wood-size: 200px auto; --thick: 4px; }
.btn-danger { --wood: var(--tex-red); --wood-tint: linear-gradient(rgba(150, 18, 8, 0.55), rgba(90, 8, 4, 0.62)); --edge: rgba(60, 6, 2, 1); color: var(--cream); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75); }
.btn-danger::before { box-shadow: var(--bevel), inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(255, 170, 130, 0.16), 0 var(--thick) 0 var(--edge), 0 calc(var(--thick) + 4px) 10px rgba(0, 0, 0, 0.55); }
.btn-small { --thick: 3px; }
.btn-large { --thick: 6px; }
.btn:active:not(:disabled) { transform: translateY(calc(var(--thick) - 1px)); }
.btn:active:not(:disabled)::before { box-shadow: var(--bevel), inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 var(--edge), 0 2px 4px rgba(0, 0, 0, 0.5); }
.btn:disabled, .btn[aria-disabled="true"] { color: rgba(246, 236, 214, 0.55); text-shadow: none; }
.btn:disabled::before, .btn[aria-disabled="true"]::before { filter: saturate(0.25) brightness(0.55); }

/* stepper and face buttons: little oak tiles */
.step-btn, .face-btn {
  border-radius: 8px; color: var(--burn);
  background: linear-gradient(180deg, rgba(255, 245, 220, 0.30), transparent 45%, rgba(60, 30, 0, 0.16)), linear-gradient(rgba(255, 238, 205, 0.46), rgba(255, 238, 205, 0.46)), var(--tex-oak) 0 0 / 260px auto;
  box-shadow: var(--bevel), inset 0 0 0 1px rgba(90, 50, 10, 0.55), 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s var(--ease-spring), box-shadow 0.12s ease, filter 0.15s ease;
}
.face-btn { color: var(--burn); font-weight: 800; }
.face-btn .face-min { color: var(--burn); font-weight: 800; text-shadow: 0 0 3px rgba(255, 244, 220, 0.95); }
.step-btn:active, .face-btn:active:not([aria-disabled="true"]) { transform: translateY(2px); box-shadow: var(--bevel), inset 0 0 0 1px rgba(90, 50, 10, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5); }
.face-btn[aria-pressed="true"], .face-btn.is-on {
  color: var(--burn); transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255, 238, 186, 0.66), rgba(255, 220, 150, 0.52)), var(--tex-oak) 0 0 / 260px auto;
  box-shadow: var(--bevel), inset 0 0 0 3px var(--brass), 0 0 0 2px var(--lamp), 0 6px 10px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 196, 106, 0.6);
}
.face-btn[aria-disabled="true"], .step-btn[aria-disabled="true"] { filter: saturate(0.3) brightness(0.55); opacity: 1; }
.step-out { color: var(--brass-l); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }

/* ---- chips: small brass-edged tags ---- */
.chip { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.chip-host, .chip-turn, .chip-pot, .chip-odd { background: var(--metal); color: var(--burn); }

/* ---- the table: worn top, mahogany rim, brass inlay, the lamp's pool of light ---- */
@media (min-width: 900px) {
  #screen-game .board { height: 600px; }
  #screen-game .bid-panel { width: min(330px, 44%); }
  #screen-game .board::before {
    inset: 6% 4%; border: 22px solid transparent;
    background:
      radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 200, 120, 0.22), transparent 70%) padding-box,
      radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5) 100%) padding-box,
      var(--tex-table) 50% 50% / 520px auto padding-box,
      linear-gradient(180deg, rgba(255, 210, 160, 0.22), transparent 30%, rgba(0, 0, 0, 0.55)) border-box,
      var(--tex-beam) 0 0 / 300px auto border-box;
    box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 4px rgba(0, 0, 0, 0.55), inset 0 10px 40px rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(0, 0, 0, 0.8), 0 -14px 28px rgba(0, 0, 0, 0.55), 0 26px 50px rgba(0, 0, 0, 0.7), 0 60px 90px rgba(0, 0, 0, 0.4);
  }
}
@media (max-width: 899px) {
  #screen-game .board {
    padding: 14px; border-radius: 22px; border: 12px solid transparent;
    background:
      radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 200, 120, 0.18), transparent 70%) padding-box,
      var(--tex-table) 50% 50% / 420px auto padding-box,
      linear-gradient(180deg, rgba(255, 210, 160, 0.2), transparent 30%, rgba(0, 0, 0, 0.5)) border-box,
      var(--tex-beam) 0 0 / 260px auto border-box;
    box-shadow: inset 0 0 0 2px var(--brass), inset 0 8px 24px rgba(0, 0, 0, 0.55), 0 -12px 24px rgba(0, 0, 0, 0.5), 0 16px 30px rgba(0, 0, 0, 0.6);
  }
}

/* seat plaques: stained pine with a brass screw at each end */
.table-seat {
  border-radius: 10px;
  background:
    var(--pin-1) left calc(9px - var(--ps) / 2) center / var(--ps) var(--ps) no-repeat,
    var(--pin-2) right calc(9px - var(--ps) / 2) center / var(--ps) var(--ps) no-repeat,
    linear-gradient(180deg, rgba(255, 220, 170, 0.14), transparent 40%, rgba(0, 0, 0, 0.32)),
    linear-gradient(rgba(25, 10, 3, 0.42), rgba(25, 10, 3, 0.42)),
    var(--tex-plaque) 0 0 / 260px auto;
  padding-left: 18px; padding-right: 14px;
  box-shadow: var(--bevel), inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 4px 0 rgba(30, 14, 4, 1), 0 8px 14px rgba(0, 0, 0, 0.6);
}
@media (max-width: 899px) {
  /* phone: the two-column grid has no room for end screws or a thick rim */
  #screen-game .board { padding: 8px; border-width: 8px; }
  .table-seat {
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(255, 220, 170, 0.14), transparent 40%, rgba(0, 0, 0, 0.32)), linear-gradient(rgba(25, 10, 3, 0.42), rgba(25, 10, 3, 0.42)), var(--tex-plaque) 0 0 / 260px auto;
  }
}
.table-seat.is-turn {
  box-shadow: var(--bevel), inset 0 0 0 2px var(--lamp), 0 4px 0 rgba(30, 14, 4, 1), 0 0 0 2px var(--brass-d), 0 0 26px rgba(255, 196, 106, 0.55);
}
.table-seat .nm { color: var(--cream); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }
.table-seat.is-me .nm { color: var(--brass-l); }
.count-pip { background: var(--cream); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.5); }

/* the standing bid: a slate chalkboard in a light oak frame */
.bid-panel {
  border: 10px solid transparent; border-radius: 12px;
  background:
    var(--screws),
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255, 255, 255, 0.06), transparent 70%) padding-box,
    radial-gradient(ellipse 50% 30% at 75% 75%, rgba(255, 255, 255, 0.045), transparent 70%) padding-box,
    radial-gradient(ellipse at 50% 0%, rgba(60, 84, 74, 1), rgba(24, 36, 31, 1) 75%) padding-box,
    linear-gradient(180deg, rgba(255, 240, 210, 0.3), transparent 40%, rgba(60, 30, 0, 0.35)) border-box,
    var(--tex-oak) 0 0 / 200px auto border-box;
  --sc: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(60, 30, 0, 0.8), var(--lift);
}
.bid-now { color: var(--cream); text-shadow: 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 0 rgba(0, 0, 0, 0.5); letter-spacing: 0.02em; }
.bid-who { color: rgba(240, 236, 220, 0.92); }
.bid-plain { color: rgba(214, 224, 214, 0.9); }
.bid-label { color: rgba(220, 226, 214, 0.75); }
.timer-bar { height: 12px; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.08); }
.timer-bar::after { background: linear-gradient(180deg, var(--brass-l), var(--lamp) 50%, var(--brass)); box-shadow: 0 0 10px rgba(255, 196, 106, 0.7); }

/* the dice tray: green baize, a mahogany rim with a brass line */
.hand-tray {
  border: 12px solid transparent; border-radius: 16px;
  background:
    var(--grain) 0 0 / 160px padding-box,
    radial-gradient(ellipse at 50% 30%, var(--baize-l), var(--baize) 80%) padding-box,
    linear-gradient(180deg, rgba(255, 210, 160, 0.2), transparent 35%, rgba(0, 0, 0, 0.5)) border-box,
    var(--tex-beam) 0 0 / 260px auto border-box;
  box-shadow: inset 0 0 0 2px var(--brass-d), inset 0 6px 16px rgba(0, 0, 0, 0.7), var(--lift);
}

/* trick bar, feed and reveal rows: inlaid strips */
.feed-item, .reveal-seat, .hist-turn, .award, .host-player, .lobby-seat, .seat-list .seat {
  background: linear-gradient(90deg, rgba(255, 220, 170, 0.05), transparent), linear-gradient(rgba(16, 7, 2, 0.5), rgba(16, 7, 2, 0.5)), var(--tex-panel) 0 0 / 260px auto;
  border-radius: 6px;
}
.feed-item { box-shadow: inset 4px 0 0 var(--seat, var(--brass-d)), inset 0 1px 0 rgba(255, 220, 170, 0.08), 0 2px 4px rgba(0, 0, 0, 0.4); }

/* ---- results: wooden blocks on the podium, the winner's in honey teak ---- */
.place-block {
  border-top: 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.16), transparent 35%, rgba(0, 0, 0, 0.35)), linear-gradient(rgba(25, 10, 3, 0.35), rgba(25, 10, 3, 0.35)), var(--tex-plaque) 0 0 / 220px auto;
  box-shadow: inset 0 4px 0 var(--seat), var(--bevel), 0 10px 18px rgba(0, 0, 0, 0.55);
}
.place-1 .place-block { background: var(--screws), linear-gradient(180deg, rgba(255, 240, 200, 0.3), transparent 40%, rgba(80, 40, 0, 0.2)), linear-gradient(rgba(255, 234, 196, 0.3), rgba(255, 234, 196, 0.3)), var(--tex-honey) 0 0 / 220px auto; color: var(--burn); --sc: 11px; --ps: 18px; }
.place-num { text-shadow: 0 1px 0 rgba(255, 236, 190, 0.35), 0 -1px 0 rgba(0, 0, 0, 0.4); }
.award-value { color: var(--brass-l); }

/* ---- small surfaces ---- */
.room-code { background: var(--metal); color: var(--burn); transform: none; border-radius: 6px; padding: 0 16px; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); box-shadow: inset 0 0 0 1px var(--brass-dd), 0 3px 0 var(--brass-dd), 0 6px 10px rgba(0, 0, 0, 0.5); }
.tide-card { background: linear-gradient(180deg, rgba(255, 220, 170, 0.14), rgba(0, 0, 0, 0.3)), var(--tex-plaque) 0 0 / 220px auto; border-color: var(--brass); box-shadow: var(--lift); }
.banner { background: linear-gradient(180deg, rgba(255, 245, 220, 0.4), rgba(255, 245, 220, 0.1)), var(--tex-oak) 0 0 / 200px auto; color: var(--burn); }
.lobby-foot { background: linear-gradient(180deg, rgba(255, 210, 160, 0.14), transparent 40%, rgba(0, 0, 0, 0.5)), var(--tex-beam) 0 0 / 300px auto; border-top: 3px solid var(--brass-d); padding-left: 14px; padding-right: 14px; border-radius: 12px;
  /* Shadow lift: a dark shadow above and below plus a faint top highlight, so the bar floats off the floorboards. */
  box-shadow: 0 -14px 26px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 222, 160, 0.35); }
.volume-panel, .tip, .coach-card { background: linear-gradient(rgba(16, 7, 2, 0.4), rgba(16, 7, 2, 0.4)), var(--tex-panel) 0 0 / 240px auto; }
.info-btn { background: var(--metal); color: var(--burn); box-shadow: 0 1px 0 var(--brass-dd), 0 2px 4px rgba(0, 0, 0, 0.5); }
.cover-toggle, .keg-toggle { color: var(--cream); }

/* ---- the footer: raised wainscot panels under a brass rail ---- */
.site-footer {
  border-top: 0;
  background: linear-gradient(rgba(10, 5, 2, 0.74), rgba(10, 5, 2, 0.84)), var(--tex-wainscot) 0 0 / 520px auto;
  box-shadow: inset 0 4px 0 var(--brass-d), inset 0 6px 0 rgba(0, 0, 0, 0.5), inset 0 20px 30px rgba(0, 0, 0, 0.5);
}
.site-footer__link { color: var(--cream); }

/* ---- 21. hover (the one block; ui-ux rule 12) ---- */
@media (hover: hover) and (pointer: fine) {
  .face-wrap:hover .face-tip { visibility: visible; }
  .avatar-pick:hover, .seat-avatar-btn:hover { filter: brightness(1.12); }
  .customize summary:hover, .fullstats summary:hover, .rules-all > summary:hover { color: var(--select); }
  .site-footer__link:hover { color: var(--select); text-decoration: underline; }
  .toast:hover { filter: brightness(1.1); }
  .info-btn:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--muted); }
  .sound-control:hover .volume-pop { opacity: 1; visibility: visible; pointer-events: auto; }
  .btn:hover:not(:disabled) { filter: brightness(1.1) saturate(1.05); }
  .face-btn:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) { box-shadow: var(--bevel), inset 0 0 0 2px var(--brass), 0 4px 10px rgba(0, 0, 0, 0.5); filter: brightness(1.08); }
  .step-btn:hover { filter: brightness(1.12); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover:not(:disabled) { transform: translateY(-2px); }
  .btn:hover:not(:disabled)::before { background-position: 220% 0, 0 0, 0 0, var(--wood-pos, 0 0); transition: background-position 0.55s var(--ease-out), box-shadow 0.12s ease; }
  .btn:hover:active:not(:disabled) { transform: translateY(calc(var(--thick) - 1px)); }
  .face-btn:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) { transform: translateY(-2px); }
}

/* ---- police lights: a red/blue edge wash for the 1.4 s of a steal (STAKE_STOLEN) ----
   Below the coach (50) and modals (60); never takes a click. game.js toggles .cop-on. */
.cop-wash { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.cop-wash i { position: absolute; top: 0; bottom: 0; width: 26%; opacity: 0; mix-blend-mode: screen; }
.cop-r { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cop-red) 50%, transparent), transparent); }
.cop-b { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--cop-blue) 55%, transparent), transparent); }
.cop-on .cop-r { animation: cop-r 1.4s steps(1, end) both; }
.cop-on .cop-b { animation: cop-b 1.4s steps(1, end) both; }
@keyframes cop-r { 0% { opacity: 0.9; } 12% { opacity: 0.3; } 25% { opacity: 0; } 50% { opacity: 0.9; } 62% { opacity: 0.3; } 75%, 100% { opacity: 0; } }
@keyframes cop-b { 0%, 24% { opacity: 0; } 25% { opacity: 0.9; } 37% { opacity: 0.3; } 50% { opacity: 0; } 75% { opacity: 0.9; } 87% { opacity: 0.3; } 100% { opacity: 0; } }

/* ---- public rule effects, positioned and timed by ui/fx.js ---- */
.fx-layer { position: fixed; inset: 0; z-index: 41; pointer-events: none; overflow: hidden; }
.fx-layer > * { position: absolute; }
.fx-anchored { translate: -50% -50%; }
.fx-icon, .fx-rattle { width: 76px; height: 76px; color: var(--select); filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.8)); }
.fx-icon svg, .fx-rattle .cup-wrap { display: block; width: 100%; height: 100%; }
.fx-rattle { width: 50px; height: 57px; }
.fx-spark { width: 16px; height: 16px; border-radius: 50%; background: var(--select); box-shadow: 0 0 16px var(--signal); }
.fx-flash { width: 134px; height: 134px; border-radius: 50%; background: radial-gradient(circle, var(--text), var(--signal) 31%, transparent 70%); }
.fx-ember { width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle, var(--bad), transparent 68%); }
.fx-label, .fx-rail {
  padding: 4px 12px; border: 1px solid var(--brass); border-radius: 8px; background: var(--panel);
  color: var(--text); font: 800 1rem var(--display); white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}
.fx-rail { display: flex; align-items: center; gap: 4px; border-bottom-width: 4px; }
.fx-rail .die-mini { width: 24px; height: 24px; }
.fx-coin, .fx-verdict {
  display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%;
  box-shadow: 0 0 18px color-mix(in srgb, currentColor 44%, transparent);
}
.fx-coin {
  width: 34px; height: 34px; background: radial-gradient(circle at 35% 30%, var(--fx-coin-hi), var(--signal) 68%, var(--brass-d));
  color: var(--on-select); font-size: 1.2rem;
}
.fx-verdict { width: 64px; height: 64px; background: var(--panel); font: 800 2.8rem/1 var(--body); }
.fx-right { color: var(--safe); }
.fx-wrong { color: var(--bad); }
.fx-wave { width: 64px; height: 64px; color: var(--seat-1); }
.fx-dim { inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.75)); }
.fx-tide {
  --tide-ink: var(--brass-l);
  width: min(250px, calc(100% - 32px)); padding: 12px 16px; display: grid; gap: 2px;
  text-align: center; color: var(--text); background: var(--slate); border: 2px solid var(--tide-ink);
  border-radius: 12px; box-shadow: inset 0 0 0 4px var(--panel), 0 8px 24px rgba(0, 0, 0, 0.64);
}
.fx-tide strong { font: 800 1.4rem var(--display); color: var(--tide-ink); }
.fx-tide-mark { color: var(--tide-ink); font: 800 2rem/1 var(--body); }
.fx-tide[data-tide="tideCalm"], .fx-tide[data-tide="tideHighTide"] { --tide-ink: var(--seat-1); }
.fx-tide[data-tide="tideSixesWild"] { --tide-ink: var(--seat-4); }
.fx-tide[data-tide="tideNoWilds"] { --tide-ink: var(--muted); }
.fx-tide[data-tide="tideDoubleLosses"] { --tide-ink: var(--bad); }
.fx-tide[data-tide="tideSpotlight"] { --tide-ink: var(--text); }
.fx-tide[data-tide="tideReverseCurrent"] { --tide-ink: var(--seat-6); }


/* ---- 21. reduced motion: no tumble/shake, no sliding toasts or wipes, a calm spinner ---- */
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .face-btn[aria-pressed="true"] { transform: none; }
  .btn::before, .step-btn, .face-btn { transition: none; }
  * { scroll-behavior: auto !important; }
  .toast, .banner-in, .feed-new, .score-bump, .scoreboard .is-live::after, .scoreboard .is-live .seat-avatar { animation: none; }
  .shake-s, .shake-m, .shake-l, .moment-stamp, .moment-title, .die-hero, .place-block, .award { animation: none; }
  .moment { display: none; }
  .cop-wash { display: none; }
  .fx-layer { display: none; }
  .bar-fill, .bar-ghost { transition: none; }
  .btn { transition: none; }
  .tip { animation: none; }
  .inline-spinner { animation: pulse 1.4s ease-in-out infinite; border-radius: 50%; border-right-color: currentColor; }
  @keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}

/* Reconnecting banner spinner: shows the user something is happening. */
.reconnect-spinner {
  display: inline-block; flex: none; vertical-align: middle; width: 1em; height: 1em;
  margin-right: 0.5rem; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: reconnect-spin 0.8s linear infinite;
}
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
@keyframes reconnect-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reconnect-spinner { animation: reconnect-pulse 1.4s ease-in-out infinite; border-right-color: currentColor; }
}