[hidden] { display: none !important; }
/* Night mode only. Felt-green game table on near-black. */
:root {
  color-scheme: dark;
  --bg: #07090c;
  --felt: #070a14;
  --felt-edge: #1a2140;
  --tile: #161c24;
  --tile-2: #1e2533;
  --tile-line: #262f3b;
  --fg: #e8ebf0;
  --muted: #8a93a3;
  --gold: #e6c25a;
  --good: #7fe0ae;
  --bad: #ff8a7a;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
button { font-family: inherit; }

.table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
  padding-block: 20px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (max-width: 960px) { .table { grid-template-columns: 1fr; } }

/* ---- Board ---- */
.play { display: grid; gap: 12px; min-width: 0; }
.board-wrap { position: relative; width: 100%; max-width: 860px; }
.board {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr repeat(9, 1fr) 1.6fr;
  grid-template-rows: 1.6fr repeat(9, 1fr) 1.6fr;
  aspect-ratio: 1;
  width: 100%;
  background: var(--felt);
  border: 6px solid var(--felt-edge);
  border-radius: 14px;
  gap: 2px;
  padding: 2px;
}
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; }

.space {
  position: relative;
  background: var(--tile);
  border: 1px solid var(--tile-line);
  border-radius: 3px;
  padding: 3px;
  font-size: clamp(6px, 0.9vw, 10.5px);
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}
.space:hover { filter: brightness(1.25); }
.space:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; z-index: 2; }
.space .band { height: 18%; min-height: 4px; border-radius: 2px; flex-shrink: 0; }
.space .name { font-weight: 600; }
.space .code { display: block; font-family: var(--font-mono); font-size: 0.85em; color: var(--muted); font-weight: 500; }
.space .owner { font-size: 0.85em; font-weight: 600; }
.space .lvl { display: block; color: var(--gold); font-family: var(--font-mono); letter-spacing: 1px; }
.space .price { font-family: var(--font-mono); color: var(--muted); margin-top: auto; }
.space.owned .price { display: none; }
.space.corner { background: #1b2230; justify-content: center; text-align: center; }
.space.corner .name { color: var(--gold); font-size: 1.2em; }
.space.start { background: #2a2414; }
.space.start .price { margin-bottom: 18px; }
.space.news .name { color: #a7b8ff; }
.space.tax .name { color: var(--bad); }
.space.religion { background: #1d1a2b; }
.space.religion .name { color: #d9c8ff; }
.space.company { background: #14222b; }
.space.company .name { color: #9fd8ff; }
.space.casino { background: #2a1620; }
.space.casino .name { color: #ff9fbf; }
.space.stock { background: #12261f; }
.space.stock .name { color: var(--good); }
.religion-band { background: linear-gradient(90deg, #b38cff, var(--gold)); }
.company-band { background: linear-gradient(90deg, #5fb8d9, #9fd8ff); }

.tokens { position: absolute; inset: auto 2px 2px 2px; display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; pointer-events: none; }
.token {
  display: inline-block;
  width: clamp(8px, 1.4vw, 16px); height: clamp(8px, 1.4vw, 16px);
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px #ffffff55;
  flex-shrink: 0;
}
.token.now { box-shadow: 0 0 0 2px var(--fg), 0 0 10px var(--gold); }

/* ---- Center: globe, dice, controls ---- */
.center {
  grid-column: 2 / 11;
  grid-row: 2 / 11;
  position: relative;
  overflow: hidden;
  perspective: 900px;
  touch-action: none;
  border-radius: 6px;
  background: #04060d;
}
.center h1 {
  position: absolute; top: 2.5%; left: 0; right: 0; margin: 0;
  text-align: center; font-family: var(--font-display);
  font-size: clamp(14px, 2.6vw, 26px); line-height: 1.1; pointer-events: none;
  text-shadow: 0 2px 8px #000;
}
.center h1 span { color: var(--gold); }
.globe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.place {
  position: absolute; top: 61%; left: 0; right: 0; margin: 0; text-align: center;
  font: 600 clamp(11px, 1.4vw, 14px) var(--font-body); color: var(--gold); pointer-events: none;
}
.controls {
  position: absolute; left: 0; right: 0; bottom: 3%;
  display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none;
}
.controls > * { pointer-events: auto; }
.roll-text { font-family: var(--font-mono); margin: 0; min-height: 1.3em; font-size: clamp(11px, 1.4vw, 14px); }
.turn-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.roll-btn, .end-btn, .side-btn {
  font: 600 clamp(12px, 1.5vw, 15px) var(--font-body);
  border-radius: 999px; padding: 8px 18px; cursor: pointer; border: 1px solid transparent;
}
.roll-btn { background: var(--gold); color: #1a1406; }
.end-btn { background: var(--tile-2); color: var(--fg); border-color: var(--fg); }
.side-btn { background: var(--tile-2); color: var(--gold); border-color: var(--gold); }
.roll-btn:disabled, .end-btn:disabled, .side-btn:disabled { opacity: 0.35; cursor: default; }
.roll-btn:focus-visible, .end-btn:focus-visible, .side-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.meta { margin: 0; font-size: 12px; color: var(--muted); }
.meta b { font-family: var(--font-mono); color: var(--fg); font-weight: 500; }
#timer.urgent { color: var(--bad); font-weight: 600; }
.status { color: var(--muted); font-size: 12px; margin: 0; }

/* ---- 3D dice ---- */
.die3d {
  position: absolute; left: 0; top: 0;
  width: var(--dsize, 54px); height: var(--dsize, 54px);
  transform-style: preserve-3d; z-index: 5; cursor: grab; touch-action: none;
}
.center.grabbing .die3d { cursor: grabbing; }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.face {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #fbf8ef, #e2dccb);
  border-radius: 16%;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 13%;
  box-shadow: inset 0 0 0 1px #c9c1aa, inset -3px -4px 8px rgba(0,0,0,0.12);
  backface-visibility: hidden;
}
.face i { width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a3f48, #0e1014); place-self: center; }
.die-shadow {
  position: absolute; left: 8%; top: 0; width: 84%; height: 30%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%);
  transform-origin: center; pointer-events: none;
}

/* ---- Toast and quip ---- */
.toast {
  position: absolute; left: 50%; top: 13%;
  transform: translate(-50%, -10px);
  width: min(70%, 460px);
  background: var(--tile-2); border: 1px solid var(--tile-line); border-radius: 12px;
  padding: 12px 16px; font-size: 14px; text-align: center;
  box-shadow: 0 12px 30px #000a;
  opacity: 0; pointer-events: none; z-index: 12;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.roast { border-color: var(--gold); background: #2a2414; color: #f5e3a8; font-weight: 600; }
.quip {
  position: absolute; left: 50%; top: 66%;
  transform: translate(-50%, 8px) scale(0.96);
  width: min(86%, 440px);
  background: #241b33; border: 1px solid #b38cff; color: #eadfff;
  border-radius: 14px; padding: 9px 14px; font-size: 13px; text-align: center; font-style: italic;
  box-shadow: 0 10px 24px #000a;
  opacity: 0; pointer-events: none; z-index: 11;
  transition: opacity 0.25s, transform 0.25s;
}
.quip.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---- Dialogs ---- */
.modal { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; padding: 16px; z-index: 20; overflow-y: auto; }
.modal[hidden] { display: none; }
.sheet {
  background: var(--tile); border: 1px solid var(--tile-line); border-radius: 14px;
  padding: 20px; max-width: 460px; width: 100%; display: grid; gap: 12px;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.sheet h3 { font: 600 18px var(--font-display); margin: 0; text-wrap: balance; }
.sheet h4 { font: 600 14px var(--font-body); margin: 0 0 6px; color: var(--muted); }
.sheet p { margin: 0; color: var(--muted); line-height: 1.5; }
.sheet small { display: block; margin-top: 8px; font-size: 12px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  font: 600 14px var(--font-body); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--tile-line); background: var(--tile-2); color: var(--fg); text-align: left;
}
.choice.primary { background: var(--gold); color: #1a1406; border-color: var(--gold); }
.choice:disabled { opacity: 0.4; cursor: default; }
.choice:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.muted { color: var(--muted); font-size: 13px; }

/* Info card */
.info-sheet { max-width: 380px; }
.deed-band { margin: -20px -20px 0; padding: 10px 20px; border-radius: 14px 14px 0 0; font: 600 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #0b0e12; }
.deed-band.plain { background: var(--tile-2); color: var(--muted); }
.deed-price { font-family: var(--font-mono); font-size: 13px; }
.rent-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.rent-table td { padding: 5px 4px; border-bottom: 1px solid var(--tile-line); }
.rent-table td:last-child { text-align: right; font-family: var(--font-mono); }
.rent-table tr.now td { color: var(--gold); font-weight: 600; }
.fact { background: var(--tile-2); border-radius: 10px; padding: 10px 12px; color: var(--fg) !important; font-size: 13px; }

/* Trade */
.trade-sheet { max-width: 620px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .trade-cols { grid-template-columns: 1fr; } }
.trade-cols > div { min-width: 0; background: var(--tile-2); border-radius: 10px; padding: 10px; display: grid; gap: 6px; align-content: start; }
.asset { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.asset small { margin: 0; font-family: var(--font-mono); color: var(--muted); }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.field input, .field select, .setup-sheet select, .radio input[type="number"] {
  background: var(--bg); color: var(--fg); border: 1px solid var(--tile-line); border-radius: 8px;
  padding: 7px 9px; font: 14px var(--font-mono); min-width: 0;
}
.radio input[type="number"] { width: 80px; padding: 4px 6px; }

/* Setup */
.setup-sheet { max-width: 560px; }
.setup-sheet fieldset { border: 1px solid var(--tile-line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; }
.setup-sheet legend { padding: 0 6px; color: var(--gold); font-weight: 600; font-size: 13px; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.radio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ranking { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ranking li { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); }

/* Roulette */
.roulette-sheet { justify-items: center; text-align: center; max-width: 440px; }
.roulette-sheet canvas { width: min(100%, 340px); height: auto; aspect-ratio: 1; }
.roulette-result { font: 600 16px var(--font-body); color: var(--fg) !important; min-height: 1.4em; }
.roulette-result.win { color: var(--good) !important; }
.roulette-result.lose { color: var(--bad) !important; }
.pill-red, .pill-black, .pill-green { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--font-mono); color: #fff; margin-right: 6px; }
.pill-red { background: #c8232c; } .pill-black { background: #111418; border: 1px solid #555; } .pill-green { background: #1f8a4c; }

/* ---- Side panel ---- */
.side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.panel { background: var(--tile); border: 1px solid var(--tile-line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.panel h2 { font: 500 15px var(--font-display); margin: 0 0 10px; }
.players, .log, .regions { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.players li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.players li .token { margin-top: 3px; }
.players li.turn .pname { color: var(--gold); }
.players li.out { opacity: 0.45; }
.players .pname small { display: block; color: var(--muted); font-size: 11.5px; }
.players .cash { font-family: var(--font-mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.players .cash small { display: block; color: var(--muted); font-size: 11px; }
.players .cash.low { color: var(--bad); }
.log { max-height: 320px; overflow-y: auto; font-size: 13px; color: var(--muted); }
.log li:first-child { color: var(--fg); }
.regions li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 13px; }
.regions .swatch { width: 12px; height: 12px; border-radius: 3px; margin-top: 3px; }
.regions b { font-weight: 600; }
.regions small { display: block; color: var(--muted); font-size: 11.5px; }
.regions .range { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* Practice tools */
.dev-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dev-row + .dev-row { margin-top: 8px; }
.dev-row select, .dev-row input { flex: 1; min-width: 0; background: var(--tile-2); color: var(--fg); border: 1px solid var(--tile-line); border-radius: 8px; padding: 6px 8px; font: 14px var(--font-body); }
.dev-row input { font-family: var(--font-mono); width: 90px; }
.dev-row button { font: 600 13px var(--font-body); background: var(--tile-2); color: var(--fg); border: 1px solid var(--tile-line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.dev-row button:focus-visible, .dev-row select:focus-visible, .dev-row input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dev-label { align-self: center; font-size: 13px; color: var(--muted); }
.dev-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) { .toast, .quip { transition: none; } }

/* ---- Small screens: a tighter center ---- */
@media (max-width: 640px) {
  .center h1 { font-size: 12px; top: 2%; }
  .globe { top: 8%; height: 40%; }
  .place { top: 47%; font-size: 10px; }
  .status, .roll-text { display: none; }
  .controls { gap: 4px; bottom: 2%; }
  .roll-btn, .end-btn, .side-btn { padding: 5px 10px; font-size: 11px; }
  .turn-buttons { gap: 5px; }
  .meta { font-size: 10px; }
  .quip { top: 52%; font-size: 11px; padding: 6px 10px; }
  .toast { font-size: 12px; padding: 8px 10px; width: 80%; }
}

/* ================= Update 3 ================= */
/* Logs above the board */
.logs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 860px; }
@media (max-width: 640px) { .logs { grid-template-columns: 1fr; } }
.logbox { padding: 10px 14px; }
.logbox h2 { margin-bottom: 6px; }
.logbox .log { max-height: 108px; }
.trades li { font-size: 12.5px; }
.trades li span { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: 11px; }
.trades li.yes span { background: #16392a; color: var(--good); }
.trades li.no span { background: #3a1d1d; color: var(--bad); }
.logbox .empty { margin: 0; }

/* Country boxes filled with their flag; name in a strip at the bottom */
.space.country { padding: 0; border-top: 3px solid var(--region); }
.space .flagfill { position: absolute; inset: 0; }
.space .flagfill svg { width: 100%; height: 100%; display: block; }
.space .strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(5,8,14,0.92) 28%);
  padding: 8px 3px 3px; display: grid; gap: 1px;
}
.space.country .name, .space .strip .name { color: #fff; text-shadow: 0 1px 2px #000; font-weight: 700; }
.space.country .price { margin-top: 0; color: #d4dae4; }
.space .strip .owner, .space .strip .followers, .space .strip .sub { font-size: 0.85em; font-weight: 600; text-shadow: 0 1px 2px #000; }
.space .strip .followers { color: #d9c8ff; }
.space .strip .sub { color: var(--gold); font-weight: 500; }
.space.country.owned { border-width: 2px; border-top-width: 3px; }

/* Art boxes: religions, Prison, ICJ */
.space .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.space.religion, .space[data-name="Prison"], .space[data-name="Go to Court"] { padding: 0; }
.space.religion .name, .space[data-name="Prison"] .name, .space[data-name="Go to Court"] .name { color: #fff; font-size: 1em; }
.space[data-name="Prison"] .strip .name, .space[data-name="Go to Court"] .strip .name { font-size: 1.15em; color: var(--gold); text-align: center; }
.space[data-name="Go to Court"] .strip .sub { text-align: center; }
.space[data-name="Prison"] .strip { background: linear-gradient(transparent, rgba(5,8,14,0.85) 40%); }

/* Billionaire figures on the board */
.tokens-layer { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.figure {
  position: absolute; transition: left 0.14s ease, top 0.14s ease, transform 0.25s ease, filter 0.25s;
  transform-origin: 50% 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7));
}
.figure svg { width: 100%; height: 100%; display: block; }
.figure.now {
  transform: scale(1.5); z-index: 2;
  filter: drop-shadow(0 0 4px var(--pc)) drop-shadow(0 0 10px var(--pc)) drop-shadow(0 2px 2px rgba(0,0,0,0.7));
  animation: bob 1.4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: scale(1.5) translateY(0); } 50% { transform: scale(1.5) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .figure.now { animation: none; } }

.players li { grid-template-columns: 30px minmax(0, 1fr) auto; }
.players .mini { width: 30px; height: 48px; display: block; }
.players .mini svg { width: 100%; height: 100%; }
.players li.turn .mini { filter: drop-shadow(0 0 6px var(--pc)); }

/* Notices: stay until closed */
.notices {
  position: absolute; top: 12%; right: 3%; width: min(56%, 360px);
  display: grid; gap: 6px; z-index: 12; pointer-events: none; justify-items: end;
}
.notice {
  pointer-events: auto; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start;
  background: rgba(22, 28, 36, 0.94); border: 1px solid var(--tile-line); border-left: 3px solid var(--muted);
  border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 8px 20px #000a; animation: pop 0.25s ease;
}
.notice[hidden] { display: none; }
.notice b { color: var(--gold); }
.notice.quip { border-left-color: #b38cff; font-style: italic; color: #eadfff; }
.notice.roast { border-left-color: var(--gold); background: rgba(42, 36, 20, 0.95); color: #f5e3a8; font-weight: 600; }
.notice.good { border-left-color: var(--good); }
.notice.bad { border-left-color: var(--bad); }
.nclose { font: 600 11px var(--font-body); background: var(--tile-2); color: var(--fg); border: 1px solid var(--tile-line); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.nclose:focus-visible, .nmore:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nmore { pointer-events: auto; font: 600 11px var(--font-body); background: rgba(22,28,36,0.94); color: var(--muted); border: 1px solid var(--tile-line); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .notice { animation: none; } }

/* Important News (trades) */
.news-sheet { max-width: 560px; }
.news-band { margin: -20px -20px 0; padding: 10px 20px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, #b8521c, #e6c25a); color: #1a1406; font: 700 13px var(--font-mono); letter-spacing: 0.06em; }
.news-status { font-weight: 600; color: var(--fg) !important; }
.news-status.yes { color: var(--good) !important; }
.news-status.no { color: var(--bad) !important; }

/* Info cards */
.deed-flag { margin: -20px -20px 0; height: 110px; position: relative; border-radius: 14px 14px 0 0; overflow: hidden; }
.deed-flag svg { width: 100%; height: 100%; display: block; }
.deed-flag span { position: absolute; left: 12px; bottom: 8px; background: rgba(5,8,14,0.8); color: var(--fg); padding: 3px 10px; border-radius: 999px; font: 600 12px var(--font-mono); }
.deed-art { margin: -20px -20px 0; height: 150px; border-radius: 14px 14px 0 0; overflow: hidden; }
.deed-art .art { width: 100%; height: 100%; display: block; }
.sheet h3 small { display: block; font: 500 12px var(--font-body); color: var(--gold); margin-top: 2px; }

/* Character pick */
.pick-sheet { max-width: 720px; }
.pick-layout { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 560px) { .pick-layout { grid-template-columns: 1fr; } .preview { justify-self: center; } }
.preview { width: 130px; height: 208px; background: radial-gradient(circle at 50% 40%, #243049, var(--tile-2)); border-radius: 12px; padding: 8px; }
.preview svg { width: 100%; height: 100%; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.preset { background: var(--tile-2); border: 2px solid transparent; border-radius: 10px; padding: 4px; cursor: pointer; display: grid; justify-items: center; gap: 2px; color: var(--muted); font: 600 10px var(--font-body); }
.preset svg { width: 46px; height: 74px; }
.preset.on { border-color: var(--gold); color: var(--gold); }
.preset:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.builder { border: 1px solid var(--tile-line); border-radius: 10px; padding: 8px 12px; }
.builder summary { cursor: pointer; font-weight: 600; color: var(--gold); }
.builder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.builder select { background: var(--bg); color: var(--fg); border: 1px solid var(--tile-line); border-radius: 8px; padding: 6px 8px; font: 14px var(--font-body); }
.swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tile-line); cursor: pointer; padding: 0; }
.sw.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--gold); }
.sw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.winner { width: 90px; height: 144px; justify-self: center; filter: drop-shadow(0 0 12px var(--gold)); }
.winner svg { width: 100%; height: 100%; }

/* Center layout tweaks for the galaxy */
.center h1 span { color: var(--gold); }
.place { top: 11%; text-shadow: 0 1px 4px #000; }
.notices { top: 17%; }
.status, .meta, .roll-text { text-shadow: 0 1px 3px #000; }
@media (max-width: 640px) { .notices { width: 70%; top: 10%; } .notice { font-size: 11px; padding: 6px 8px; } }

/* ================= Phone layout (iPhone and small screens) ================= */
button, .space, .sw, .preset { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.modal { padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.sheet { max-height: calc(100dvh - 32px); }

@media (max-width: 640px) {
  .table { padding-block: 8px 24px; gap: 12px; padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); }
  .play { display: flex; flex-direction: column; gap: 10px; }
  .board-wrap { order: 1; max-width: none; }
  .logs { order: 2; }
  .board { border-width: 3px; border-radius: 10px; gap: 1px; padding: 1px; grid-template-columns: 1.35fr repeat(9, 1fr) 1.35fr; grid-template-rows: 1.35fr repeat(9, 1fr) 1.35fr; }
  .space { font-size: 6.4px; padding: 1px; border-radius: 2px; }
  .space .price, .space .strip .price, .space .lvl, .space .strip .sub, .space .code { display: none; }
  .space .strip { padding: 4px 1px 1px; }
  .space .strip .owner, .space .strip .followers { font-size: 6px; }
  .space.corner .name { font-size: 7px; }
  .space[data-name="Prison"] .strip .name, .space[data-name="Go to Court"] .strip .name { font-size: 7px; }
  .center h1 { font-size: 12px; top: 1.5%; }
  .place { top: 8%; font-size: 10px; }
  .notices { top: 13%; right: 2%; left: 2%; width: auto; }
  .notice { font-size: 10.5px; padding: 5px 7px; gap: 6px; }
  .nclose { padding: 2px 7px; font-size: 10px; }
  .controls { bottom: 1.5%; gap: 3px; }
  .roll-btn, .end-btn, .side-btn { padding: 6px 11px; font-size: 12px; }
  .meta { font-size: 10px; }
  .status, .roll-text { display: none; }
  .logbox .log { max-height: 84px; font-size: 12px; }
  .logbox { padding: 8px 12px; }
  .panel { padding: 12px; }
  .side { gap: 12px; }
  .sheet { padding: 16px; gap: 10px; }
  .deed-flag, .deed-art, .news-band, .deed-band { margin: -16px -16px 0; }
  .choice { padding: 10px 14px; font-size: 14px; }
  .trade-cols { grid-template-columns: 1fr; }
  .players li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; }
  .players .mini { width: 26px; height: 42px; }
}

/* ================= Physics dice: tilted table, gold dice ================= */
.dice-table { position: absolute; transform-style: preserve-3d; transform-origin: 50% 50%; pointer-events: none; z-index: 5; }
.die3d {
  position: absolute; left: 0; top: 0; width: var(--dsize, 50px); height: var(--dsize, 50px);
  transform-style: preserve-3d; pointer-events: auto; cursor: grab; touch-action: none; z-index: auto;
}
.center.grabbing .die3d { cursor: grabbing; }
.die3d .cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.die3d .face {
  position: absolute; inset: 0; border-radius: 18%;
  background: radial-gradient(circle at 30% 25%, #fff3c4 0%, #f2cf6a 38%, #d6a93c 72%, #a87d1f 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 85, 15, 0.6), inset -2px -3px 6px rgba(90, 60, 10, 0.35), inset 2px 2px 5px rgba(255, 245, 210, 0.5);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%;
  backface-visibility: hidden;
}
.die3d .face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--shade, 0); pointer-events: none; }
.die3d .face i {
  width: 70%; aspect-ratio: 1; border-radius: 50%; place-self: center;
  background: radial-gradient(circle at 40% 35%, #3a2c10 0%, #0d0904 70%);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 240, 190, 0.5);
}
.die3d .core { position: absolute; inset: 1px; background: #a87d1f; backface-visibility: hidden; }
.die-shadow {
  position: absolute; left: 0; top: 0; width: calc(var(--dsize, 50px) * 1.2); height: calc(var(--dsize, 50px) * 1.2);
  border-radius: 30%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); pointer-events: none;
  transform-origin: 50% 50%;
}
.icon-btn { font: 600 12px var(--font-body); background: rgba(22, 28, 36, 0.8); color: var(--fg); border: 1px solid var(--tile-line); border-radius: 999px; padding: 2px 9px; cursor: pointer; margin-left: 6px; }
.icon-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }



/* ===================== Update 4: host setup ===================== */
.setup-sheet { max-width: 640px; }
.setup-sheet fieldset { border: 1px solid var(--tile-line); border-radius: 12px; padding: 10px 12px 12px; display: grid; gap: 8px; margin: 0; }
.setup-sheet legend { padding: 0 6px; font: 600 13px var(--font-body); color: var(--gold); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--gold); width: 18px; height: 18px; flex: none; }
.size-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.size-card { position: relative; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--tile-line); border-radius: 10px; cursor: pointer; background: var(--tile-2); font-size: 12px; color: var(--muted); }
.size-card b { font: 600 15px var(--font-display); color: var(--fg); }
.size-card small { margin: 0; font-size: 11px; }
.size-card input { position: absolute; opacity: 0; pointer-events: none; }
.size-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: #2a2414; }
.size-card .suggest { font-style: normal; font-size: 10px; color: #1a1406; background: var(--gold); border-radius: 999px; padding: 1px 7px; justify-self: start; margin-top: 4px; }
.size-card .suggest[hidden] { display: none; }
@media (max-width: 480px) { .size-cards { grid-template-columns: 1fr; } }
.bot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bot-chip { display: flex; align-items: center; gap: 6px; background: var(--tile-2); border: 1px solid var(--tile-line); border-radius: 10px; padding: 4px 10px 4px 4px; font-size: 12px; }
.bot-chip svg { width: 26px; height: 44px; }
.bot-chip small { margin: 0; color: #6fd29a; font-size: 10px; }
.preset { position: relative; }
.taken-tag { position: absolute; top: 2px; left: 2px; right: 2px; font-style: normal; font-size: 9px; line-height: 1.2; background: #000c; color: #ffcf6e; border-radius: 6px; padding: 2px 3px; }
.taken-tag[hidden] { display: none; }
.taken-msg { background: #3a1f24; border: 1px solid #e05252; color: #ffd0d0 !important; border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.taken-msg[hidden] { display: none; }
.builder summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-weight: 600; }
.random-look { font: 600 12px var(--font-body); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--gold); cursor: pointer; }
.sw.none { display: grid; place-items: center; background: var(--tile-2); color: var(--muted); font-size: 12px; }
.sticky-go { position: sticky; bottom: -20px; background: linear-gradient(transparent, var(--tile) 35%); padding: 14px 0 4px; margin-bottom: -6px; z-index: 2; }
.sticky-go .choice { flex: 1; }
.preview svg { width: 100%; height: 100%; }

/* ===================== Update 4: the game show ===================== */
.show-stage { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden; opacity: 0; transition: opacity .35s;
  background: radial-gradient(ellipse at 50% 30%, #3a1d52 0%, #150b22 45%, #05040a 100%); color: var(--fg);
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
.show-stage.on { opacity: 1; }
.show-stage.off { opacity: 0; }
.show-lights { position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 200deg at 15% -10%, transparent 0 20deg, #ffe7a01c 20deg 34deg, transparent 34deg 360deg),
              conic-gradient(from 130deg at 85% -10%, transparent 0 22deg, #ff8ad81a 22deg 36deg, transparent 36deg 360deg);
  animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { to { transform: translateX(3%) rotate(1deg); } }
.show-title { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); left: 0; right: 0; text-align: center; }
.show-title span { font: 700 11px var(--font-mono); letter-spacing: 3px; color: #ff6fae; }
.show-title h2 { margin: 2px 0; font: 700 clamp(22px, 5vw, 40px) var(--font-display); text-shadow: 0 0 18px #e6c25a55; }
.show-title em { font-style: normal; color: var(--gold); }
.show-title small { color: var(--muted); font-size: 12px; }
.show-host { position: absolute; left: max(2%, 8px); bottom: 4%; width: min(38vw, 300px); text-align: center; }
.show-host .pearl { width: 100%; height: auto; animation: bob 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-1deg); } }
.pearl-arm { transform-origin: 100px 98px; animation: micwave 2.4s ease-in-out infinite; }
@keyframes micwave { 50% { transform: rotate(-6deg); } }
.talking .beak-low { transform: translateY(2.6px); transition: transform .08s; animation: chat .18s steps(2) infinite; }
@keyframes chat { 50% { transform: translateY(0); } }
.host-name { font: 700 14px var(--font-display); color: var(--gold); margin-top: -6px; }
.host-name small { display: block; font: 500 11px var(--font-body); color: #ff9ccc; }
.bubble { position: absolute; left: min(40vw, 320px); right: 4%; bottom: 30%; background: #fffdf6; color: #1c1626; border-radius: 22px; padding: 16px 20px;
  font: 600 clamp(15px, 2.4vw, 22px)/1.35 var(--font-body); box-shadow: 0 10px 40px #0008; min-height: 3em; }
.bubble::before { content: ""; position: absolute; left: -16px; bottom: 26px; border: 12px solid transparent; border-right: 18px solid #fffdf6; border-left: 0; }
.bubble-text.pop { animation: popin .3s cubic-bezier(.2, 1.4, .4, 1); }
.bubble-text b { font-weight: 800; }
.bubble-text i { color: #7a6a8a; font-weight: 500; }
@keyframes popin { from { transform: scale(.92); opacity: 0; } }
.contestant { position: absolute; right: 6%; bottom: 4%; display: flex; align-items: flex-end; gap: 10px; opacity: 0; transform: translateX(40px); }
.contestant.in { opacity: 1; transform: none; transition: all .35s cubic-bezier(.2, 1.2, .4, 1); }
.c-av svg { width: clamp(70px, 14vw, 120px); height: auto; filter: drop-shadow(0 0 14px #e6c25a55); }
.c-name { font: 700 clamp(16px, 3vw, 24px) var(--font-display); padding-bottom: 14px; }
.show-skip { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; font: 600 13px var(--font-body); background: #ffffff1a; color: var(--fg); border: 1px solid #ffffff33; border-radius: 999px; padding: 8px 14px; cursor: pointer; z-index: 2; }
.show-skip[hidden] { display: none; }
@media (max-width: 640px) {
  .show-host { width: 44vw; bottom: 22%; left: 2%; }
  .bubble { left: 4%; right: 4%; bottom: auto; top: 22%; font-size: 16px; padding: 14px 16px; }
  .bubble::before { left: 40px; bottom: -16px; border: 12px solid transparent; border-top: 18px solid #fffdf6; border-bottom: 0; }
  .contestant { right: 4%; bottom: 22%; flex-direction: column; align-items: center; gap: 0; }
  .c-name { padding: 0; font-size: 15px; }
}

/* Slot machine */
.slot-machine { position: relative; width: min(680px, 100%); background: linear-gradient(#5a1830, #2a0c18); border: 3px solid var(--gold); border-radius: 24px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 0 0 6px #2a0c18, 0 0 60px #e6c25a44; }
.slot-top { text-align: center; font: 700 clamp(18px, 4vw, 28px) var(--font-display); color: var(--gold); letter-spacing: 2px; text-shadow: 0 0 12px #ffcf6e88; }
.slot-windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.slot { background: #fffdf6; border-radius: 12px; padding: 6px 4px; display: grid; gap: 2px; justify-items: center; box-shadow: inset 0 6px 10px #0005, inset 0 -6px 10px #0005; }
.slot-face { height: 96px; display: grid; justify-items: center; align-content: end; overflow: hidden; width: 100%; }
.slot-face svg { width: 48px; height: 80px; }
.slot-face.blur svg { filter: blur(1.4px); transform: translateY(4px); }
.slot-face span { font: 700 11px var(--font-body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-place { font: 700 12px var(--font-mono); color: #5a1830; }
.slot.done { animation: slotstop .35s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 0 2px var(--gold), inset 0 6px 10px #0003; }
@keyframes slotstop { from { transform: translateY(-6px); } }
.slot-note { text-align: center; color: #f3c4d4; font-size: 12px; margin: 0; }
.slot-result { text-align: center; font: 700 20px var(--font-display); }
.slot-machine .choices { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .show-lights, .show-host .pearl, .pearl-arm { animation: none; } }
.show-host .pearl { filter: drop-shadow(0 0 18px #b48cff55) drop-shadow(0 0 2px #ffffff40); }

/* ===================== Update 4: decisions, jokes, auctions, assets, votes ===================== */
.sheet.decision { position: relative; }
.peek { justify-self: end; margin: -6px -6px -4px 0; font: 600 12px var(--font-body); background: var(--tile-2); color: var(--fg); border: 1px solid var(--tile-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.peek:hover { border-color: var(--gold); color: var(--gold); }
.sheet.plain .choice { background: var(--tile-2); color: var(--fg); border-color: var(--tile-line); text-align: left; }
.sheet.plain .choice:hover, .sheet.plain .choice:focus-visible { background: #2a2414; border-color: var(--gold); color: var(--gold); }
.sheet.plain .choices { flex-direction: column; }
.end-btn.decide { background: #e05252; color: #fff; border-color: #e05252; position: relative; animation: nudge 1.4s ease-in-out infinite; }
.end-btn .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-left: 4px; box-shadow: 0 0 0 2px #e05252, 0 0 8px #fff; vertical-align: middle; }
@keyframes nudge { 50% { transform: scale(1.05); } }
.notice { position: relative; overflow: hidden; }
.notice .nbar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold); opacity: .6; transform-origin: left; animation: shrinkbar linear forwards; }
@keyframes shrinkbar { to { transform: scaleX(0); } }
.mini-flag { display: inline-block; width: 22px; height: 15px; vertical-align: -2px; margin-right: 6px; border-radius: 2px; overflow: hidden; }
.mini-flag svg { width: 100%; height: 100%; display: block; }
.auction-band { background: linear-gradient(90deg, #e05252, #e6c25a); color: #1a1406; }
.auction-now { display: grid; justify-items: center; gap: 2px; padding: 8px; background: var(--tile-2); border-radius: 12px; }
.auction-now span { font: 700 34px var(--font-display); color: var(--gold); }
.auction-now small { margin: 0; color: var(--muted); }
.auction-now.bump span { animation: bump .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { from { transform: scale(1.25); } }
.auction-timer { height: 8px; background: var(--tile-2); border-radius: 999px; overflow: hidden; }
.auction-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e05252, #e6c25a); transition: width .1s linear; }
.auction-btns .choice { flex: 1; min-width: 80px; font-size: 16px; padding: 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-head .x { background: var(--tile-2); border: 1px solid var(--tile-line); color: var(--fg); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 14px; }
.assets-sheet { max-width: 520px; }
.assets-sheet .neg { color: #ff8a8a; }
.money-bar { background: var(--tile-2); border: 1px solid #e05252; border-radius: 12px; padding: 10px; display: grid; gap: 6px; }
.mb-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mb-track { height: 12px; background: #000a; border-radius: 999px; overflow: hidden; }
.mb-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e05252, #e6c25a); transition: width .25s; }
.mb-track i.full { background: linear-gradient(90deg, #4fb67a, #9be37f); }
.asset-list { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.asset-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--tile-2); border: 1px solid var(--tile-line); border-radius: 10px; font-size: 14px; cursor: pointer; }
.asset-row input { width: 18px; height: 18px; accent-color: var(--gold); }
.asset-row small { display: block; margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.asset-row.off { opacity: .55; cursor: not-allowed; }
.asset-row:has(input:checked) { border-color: var(--gold); background: #2a2414; }
.asset-row .plus { color: #6fd29a; font-family: var(--font-mono); }
.asset-row .minus { color: #ff9a8a; font-family: var(--font-mono); }
.resigned-row { border-style: dashed; }
.warn { color: #ffb4b4 !important; font-weight: 600; }
.choice.danger { background: #3a1f24; color: #ffd0d0; border-color: #e05252; }
.side-btn.alert { background: #e05252; color: #fff; border-color: #e05252; animation: nudge 1.4s ease-in-out infinite; }
.space.resigned::after { content: "RESIGNED"; position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #0009 0 6px, #0005 6px 12px); color: #ffd36e; font: 700 9px var(--font-mono); letter-spacing: 1px; pointer-events: none; z-index: 3; }
.vote-btn { display: block; margin-top: 6px; font: 600 11px var(--font-body); background: #3a1f24; color: #ffd0d0; border: 1px solid #e05252; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.vote-panel { position: fixed; right: 12px; bottom: 12px; z-index: 40; width: min(340px, calc(100vw - 24px)); background: var(--tile); border: 2px solid #e05252; border-radius: 14px; padding: 14px; display: grid; gap: 8px; box-shadow: 0 10px 40px #000a; }
.vote-panel h4 { margin: 0; font: 600 15px var(--font-display); }
.vote-panel p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.vote-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.vote-panel li { display: flex; justify-content: space-between; }

/* Update 4: flags fit their box (whole flag visible). Tall boxes turn the flag sideways. */
.space.country { display: flex; flex-direction: column; gap: 0; }
.space.country .flagfill { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; container: flag / size; background: #0d1118; overflow: hidden; }
.space.country .flagfill svg.f { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; translate: -50% -50%; }
@container flag (orientation: portrait) {
  .space.country .flagfill svg.f { width: 100cqh; height: 100cqw; rotate: 90deg; }
}
.space.country .strip { position: static; background: #05080ee6; }
/* No double-tap zoom when tapping the board on phones */
html { touch-action: manipulation; }
.space.country .strip { padding: 2px 3px 3px; }
@media (min-width: 641px) {
  .space.country.lane-side { flex-direction: row; }
  .space.country.lane-side .flagfill { flex: 1 1 52%; }
  .space.country.lane-side .strip { flex: 0 0 48%; display: flex; flex-direction: column; justify-content: center; padding: 2px 4px; }
}
/* Phones: keep pop-ups above the Roll / End turn buttons (max 2 visible, short text) */
@media (max-width: 640px) {
  .notices { max-height: 50%; overflow: hidden; align-content: start; }
  .notices .notice:nth-of-type(n+3) { display: none; }
  .notice .ntext { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ===================== Update 5: gold dice cup (press Roll dice; shake, slam, reveal) ===================== */
.dice-stage { position: absolute; left: 50%; top: var(--dice-y, 47%); translate: -50% -50%; display: flex; gap: calc(var(--dsize, 60px) * 0.5);
  align-items: center; justify-content: center; z-index: 5; pointer-events: none; perspective: 800px; }
.dice-stage .die3d { position: relative; left: auto; top: auto; cursor: default; pointer-events: none; touch-action: auto; transition: opacity .15s; }
.dice-stage .die3d.under { opacity: 0; }
.dice-stage .die3d.reveal { animation: dreveal .7s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes dreveal { 0% { transform: scale(.55) translateY(14%); } 55% { transform: scale(1.14); } 78% { transform: scale(.96) rotate(-4deg); } 100% { transform: none; } }
.dice-stage .die-shadow { position: absolute; left: -8%; top: 78%; width: 116%; height: 42%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); transform: none; opacity: .85; }
.dice-cup { position: absolute; left: 50%; top: 50%; width: calc(var(--dsize, 60px) * 3.1); translate: -50% -60%; pointer-events: none; z-index: 6; transform-origin: 50% 92%; }
.dice-cup svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .65)); }
.dice-cup.gone { visibility: hidden; opacity: 0; }
.dice-cup.drop { animation: cupdrop .38s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes cupdrop { from { transform: translateY(-130%) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
.dice-cup.shake { animation: cupshake .26s ease-in-out infinite; }
@keyframes cupshake { 0% { transform: none; } 25% { transform: translate(-7%, -5%) rotate(-12deg); } 50% { transform: translateY(-10%); } 75% { transform: translate(7%, -5%) rotate(12deg); } 100% { transform: none; } }
.dice-cup.slam { animation: cupslam .16s ease-in both; }
@keyframes cupslam { from { transform: translateY(-16%); } to { transform: scaleY(.95); } }
.dice-cup.lift { animation: cuplift .7s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes cuplift { 0% { transform: none; opacity: 1; } 40% { transform: translateY(-45%) rotate(-24deg); opacity: 1; } 100% { transform: translate(80%, -150%) rotate(-75deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dice-cup.shake { animation: none; } }

/* ===================== Update 5: pop-ups (one at a time, center of the board) ===================== */
.pops { position: absolute; left: 4%; right: 4%; top: 50%; translate: 0 -50%; z-index: 14; display: grid; place-items: center; pointer-events: none; }
.pop { pointer-events: auto; cursor: pointer; width: 100%; max-width: 560px; grid-area: 1 / 1; animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.pop.out { animation: popOut .7s ease forwards; pointer-events: none; }
@keyframes popIn { from { opacity: 0; scale: .85; } }
@keyframes popOut { to { opacity: 0; translate: 0 -14%; filter: blur(3px); } }
/* Gold glass card: personal news */
.pop-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), rgba(14, 16, 24, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 2px solid var(--gold); box-shadow: 0 0 0 1px #0008, 0 18px 50px #000b, 0 0 30px rgba(230, 194, 90, .25); }
.pop-card:not(:has(.pop-av)) { grid-template-columns: minmax(0, 1fr); }
.pop-av svg { width: clamp(44px, 9vw, 72px); height: auto; aspect-ratio: 40 / 68; display: block; filter: drop-shadow(0 4px 8px #0009); }
.pg-who { font: 800 13px var(--font-display); color: var(--gold); letter-spacing: .03em; }
.pg-txt { font: 700 clamp(14px, 1.9vw, 18px)/1.3 var(--font-body); color: #fff; text-shadow: 0 1px 3px #000; }
.pg-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.pg-bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; animation: shrinkbar linear forwards; }
/* Breaking news banner: big and global events */
.pop-news { max-width: none; width: 108%; animation: newsIn .4s ease both; }
.pop-news.out { animation: newsOut .7s ease forwards; }
@keyframes newsIn { from { opacity: 0; translate: -60% 0; } }
@keyframes newsOut { to { opacity: 0; translate: 60% 0; } }
.pn-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); background: #0d1320; border-top: 3px solid #e8343a; border-bottom: 3px solid #e8343a; box-shadow: 0 12px 40px #000c; }
.pn-tag { background: #e8343a; color: #fff; font: 800 clamp(11px, 1.6vw, 14px) var(--font-display); letter-spacing: .08em; padding: 10px 12px; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.pn-tag small { display: block; margin: 0; font: 700 9px var(--font-body); letter-spacing: .2em; opacity: .85; }
.pn-head { overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.pn-head span { display: inline-block; padding-left: 100%; font: 800 clamp(14px, 2.2vw, 19px) var(--font-body); color: #fff; animation: ticker 8s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.pn-sub { background: var(--gold); color: #1a1406; font: 800 11px var(--font-body); letter-spacing: .04em; padding: 4px 12px; display: flex; justify-content: space-between; gap: 8px; }
/* Comic bubble: the character's own jokes */
.pop-comic { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px; }
.pop-comic .pop-av svg { width: clamp(52px, 10vw, 84px); }
.pc-bub { position: relative; background: #fff; color: #111; border: 4px solid #111; border-radius: 24px; padding: 12px 14px; margin-bottom: 24%;
  font: 400 clamp(16px, 2.4vw, 22px)/1.15 "Bangers", "Impact", "Arial Black", sans-serif; letter-spacing: .03em; box-shadow: 6px 6px 0 #111; }
.pc-bub b { display: block; font: 800 12px var(--font-body); letter-spacing: 0; margin-bottom: 2px; }
.pc-bub::after { content: ""; position: absolute; left: -26px; bottom: 14px; border: 12px solid transparent; border-right: 22px solid #111; border-left: 0; }
.pc-bub::before { content: ""; position: absolute; left: -17px; bottom: 18px; border: 8px solid transparent; border-right: 16px solid #fff; border-left: 0; z-index: 1; }
.pc-pow { position: absolute; right: 2%; top: -18%; font: 400 26px "Bangers", Impact, sans-serif; color: #ffd23f; -webkit-text-stroke: 2px #b3122e; rotate: 10deg; }
.pop-comic:not(:has(.pop-av)) { grid-template-columns: minmax(0, 1fr); }
.pop-comic:not(:has(.pop-av)) .pc-bub { margin-bottom: 0; }
.pop-comic:not(:has(.pop-av)) .pc-bub::after, .pop-comic:not(:has(.pop-av)) .pc-bub::before { display: none; }
@media (max-width: 640px) {
  .pops { left: 2%; right: 2%; }
  .pop-card { padding: 8px 10px; gap: 8px; border-radius: 12px; }
  .pg-txt { font-size: 12px; }
  .pg-who { font-size: 10px; }
  .pc-bub { font-size: 14px; padding: 7px 9px; border-width: 3px; box-shadow: 3px 3px 0 #111; }
  .pn-head span { font-size: 12px; }
  .pn-tag { padding: 6px 7px; font-size: 10px; }
  .pn-sub { font-size: 9px; padding: 2px 8px; }
}
@media (prefers-reduced-motion: reduce) { .pn-head span { animation: none; padding-left: 0; white-space: normal; } .pn-head { white-space: normal; } }
/* Funny moves log */
.log.fun li { display: block; }
.fun-ic { margin-right: 6px; }
.log.fun .fun-news { color: #ffd0d0; }
.log.fun .fun-comic { color: #e8f0ff; }

/* ===================== Update 5: leaving, host tools, spectators ===================== */
.quit-btn { border-color: #e05252; color: #ffb4b4; background: #2a1418; }
.host-btn { border-color: var(--gold); color: var(--gold); }
.host-sheet { max-width: 560px; }
.host-group { border: 1px solid var(--tile-line); border-radius: 12px; padding: 10px 12px 12px; display: grid; gap: 8px; margin: 0; }
.host-group legend { padding: 0 6px; font: 600 13px var(--font-body); color: var(--gold); }
.host-players { display: grid; gap: 6px; }
.hp-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.hp-row .mini svg { width: 22px; height: 38px; }
.choice.small { font-size: 12px; padding: 6px 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--tile-line); background: var(--tile-2); font-size: 13px; }
.seg input:checked + span { border-color: var(--gold); color: var(--gold); background: #2a2414; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pause-veil { position: absolute; inset: 0; z-index: 13; display: grid; place-content: center; gap: 6px; text-align: center; background: rgba(4, 6, 12, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pause-veil b { font: 800 clamp(18px, 3vw, 28px) var(--font-display); color: var(--gold); }
.pause-veil span { color: var(--muted); font-size: 13px; padding: 0 12px; }
.react-bar { display: flex; align-items: center; justify-content: center; gap: 6px; }
.react-bar span { font: 700 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.react-bar button { font-size: 20px; line-height: 1; background: rgba(22, 28, 36, .8); border: 1px solid var(--tile-line); border-radius: 999px; padding: 4px 8px; cursor: pointer; }
.react-bar button:active { transform: scale(1.2); }
.reactions { position: absolute; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
.reactions span { position: absolute; bottom: 8%; font-size: clamp(26px, 4vw, 40px); animation: floatUp 2.6s ease-out forwards; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-10%) scale(1.1); } 100% { transform: translateY(-420%) scale(1); opacity: 0; } }

/* ===================== Update 5: the movie-trailer intro ===================== */
.trailer-stage { background: #000; }
.tr-room { position: absolute; inset: 0; transition: opacity .8s; }
.tr-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: radial-gradient(ellipse at 50% 0%, #1b1c24 0%, #07070a 70%); }
.tr-door { position: absolute; left: 50%; top: 12%; translate: -50% 0; width: clamp(84px, 15vw, 160px); aspect-ratio: 1 / 1.9; perspective: 600px;
  border: 6px solid #22242d; border-bottom: 0; background: #000; box-shadow: 0 0 0 2px #0b0b0f; z-index: 1; }
.tr-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, #fffef5 0%, #fff3c4 45%, #ffd36e 100%); opacity: 0; transition: opacity 1s, box-shadow 1.2s; }
.tr-panel { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, #2a1d12, #3c2a1a 60%, #24180e); box-shadow: inset 0 0 0 2px #120c07, 1px 0 0 #fff4 ; transition: transform 1.4s cubic-bezier(.5, 0, .2, 1); }
.tr-panel::after { content: ""; position: absolute; right: 12%; top: 52%; width: 7px; height: 7px; border-radius: 50%; background: #c9a24a; }
.trailer-stage .tr-door::before { content: ""; position: absolute; inset: -2px; box-shadow: 0 0 10px 1px #fff3c455; pointer-events: none; }
.door-open .tr-light { opacity: 1; box-shadow: 0 0 80px 30px #fff1b866, 0 0 240px 120px #ffd36e33; }
.door-open .tr-panel { transform: rotateY(-105deg); }
.door-open .tr-floor::before { content: ""; position: absolute; left: 50%; top: -2px; width: clamp(84px, 15vw, 160px); height: 100%; translate: -50% 0;
  background: linear-gradient(#fff3c455, transparent 80%); clip-path: polygon(0 0, 100% 0, 200% 100%, -100% 100%); animation: beam 1s ease both; }
@keyframes beam { from { opacity: 0; } }
.tr-crowd { position: absolute; left: 0; right: 0; bottom: 22%; height: 40%; z-index: 2; --sp: clamp(52px, 10vw, 120px); }
.tr-person { position: absolute; bottom: 0; left: calc(50% + (var(--i) - (var(--n) - 1) / 2) * var(--sp) * .85); width: clamp(60px, 11vw, 132px); translate: -50% 0;
  filter: brightness(.08) blur(.4px); transition: filter 1.4s; display: grid; justify-items: center; }
.tr-person:nth-child(odd) { z-index: 2; } .tr-person:nth-child(even) { bottom: 9%; z-index: 1; }
.tr-person svg { width: 100%; height: auto; display: block; }
.tr-person span { font: 700 clamp(10px, 1.6vw, 14px) var(--font-display); opacity: 0; white-space: nowrap; text-shadow: 0 2px 6px #000; }
.lit-crowd .tr-person { filter: brightness(.45) saturate(.6); }
.tr-person.walk { animation: walkIn 1.6s cubic-bezier(.45, 0, .55, 1) forwards; }
.tr-person.walk span { animation: nameFlash 1.6s ease forwards; }
@keyframes walkIn {
  0% { filter: brightness(.6); }
  15% { filter: brightness(1.1); transform: translateY(-2%) rotate(-2deg); }
  30% { transform: translateY(-1%) rotate(2deg); }
  100% { filter: brightness(4) blur(2px); opacity: 0; transform: translate(calc(((var(--n) - 1) / 2 - var(--i)) * var(--sp) * .85), -46vh) scale(.32); }
}
@keyframes nameFlash { 0%, 10% { opacity: 0; } 25%, 60% { opacity: 1; } 100% { opacity: 0; } }
.tr-flash { position: absolute; inset: 0; background: #fffdf0; opacity: 0; pointer-events: none; z-index: 5; }
.flash .tr-flash { animation: flash 1.6s ease forwards; }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.flash .tr-room { opacity: 0; transition-delay: .35s; }
.tr-title { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; opacity: 0; pointer-events: none; z-index: 4; padding: 0 16px; }
.tr-title small { font: 600 clamp(11px, 1.6vw, 14px) var(--font-body); letter-spacing: .25em; text-transform: uppercase; color: #b7a26a; }
.tr-title h2 { margin: 0; font: 800 clamp(30px, 7vw, 76px)/1.05 var(--font-display); color: #fff; text-wrap: balance; text-shadow: 0 0 30px #e6c25a66; }
.tr-title em { font-style: normal; background: linear-gradient(100deg, #b8892a 20%, #fff3c4 45%, #e6c25a 55%, #b8892a 80%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 2.2s ease infinite; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.titled .tr-title { opacity: 1; animation: slam .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slam { from { transform: scale(2.2); opacity: 0; filter: blur(8px); } }
.trailer .tr-room, .ending .tr-room { opacity: 0; }
.tr-scene { position: absolute; inset: 12% 4% 26%; display: grid; place-items: center; z-index: 3; }
.tr-card { display: grid; justify-items: center; gap: 14px; animation: cardIn .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes cardIn { from { opacity: 0; transform: scale(.8) translateY(20px); } }
.tr-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 28px); flex-wrap: wrap; }
.tr-flag { width: clamp(80px, 16vw, 160px); aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px #000a, 0 0 0 2px #fff3; animation: flagFlip .6s ease both; }
.tr-flag:nth-child(2) { animation-delay: .15s; } .tr-flag:nth-child(3) { animation-delay: .3s; }
.tr-flag svg { width: 100%; height: 100%; display: block; }
@keyframes flagFlip { from { transform: rotateY(90deg); opacity: 0; } }
.tr-stamp { font: 800 clamp(20px, 4vw, 40px) var(--font-display); color: var(--gold); border: 4px solid var(--gold); padding: 4px 16px; border-radius: 8px; rotate: -8deg; animation: stamp .45s .5s cubic-bezier(.2, 1.8, .4, 1) both; letter-spacing: .08em; }
.tr-stamp.red { color: #ff5a5a; border-color: #ff5a5a; }
@keyframes stamp { from { transform: scale(2.6); opacity: 0; } }
.tr-emoji { font-size: clamp(26px, 5vw, 46px); letter-spacing: .1em; }
.tr-emoji.big { font-size: clamp(36px, 7vw, 64px); position: relative; }
.tr-emoji.big b { position: absolute; inset: 0; display: grid; place-items: center; animation: breakIn .5s 1.1s both; }
@keyframes breakIn { from { opacity: 0; transform: scale(.4); } }
.tr-sky { display: flex; align-items: flex-end; gap: 6px; height: clamp(120px, 24vw, 220px); }
.tr-sky i { display: block; width: clamp(16px, 3vw, 30px); height: var(--h); background: linear-gradient(#ffe8a0, #b8892a); border-radius: 3px 3px 0 0; box-shadow: inset 0 0 0 1px #6e4f12; animation: grow .9s var(--d) cubic-bezier(.2, 1.3, .4, 1) both;
  background-image: linear-gradient(#ffe8a0, #b8892a), repeating-linear-gradient(#0003 0 3px, transparent 3px 9px); }
@keyframes grow { from { height: 0; } }
.tr-rent { font: 800 clamp(20px, 4vw, 36px) var(--font-mono); color: #9be37f; animation: stamp .4s 1s both; }
.tr-art { width: clamp(150px, 30vw, 300px); aspect-ratio: 4 / 3; position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 10px 40px #000a; }
.tr-art.sm { width: clamp(120px, 24vw, 230px); }
.tr-art > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-art.bars { animation: cardIn .5s .8s both; }
.tr-coins { font-size: clamp(20px, 4vw, 34px); letter-spacing: .3em; animation: coinsFall 1.4s ease-in infinite; }
@keyframes coinsFall { from { transform: translateY(-30px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(30px); opacity: 0; } }
.tr-wheel { width: clamp(100px, 20vw, 180px); aspect-ratio: 1; border-radius: 50%; border: 6px solid #c9a85a;
  background: conic-gradient(#1f8a4c 0 10deg, #c8232c 10deg 20deg, #111418 20deg 30deg, #c8232c 30deg 40deg, #111418 40deg 50deg, #c8232c 50deg 60deg, #111418 60deg 70deg, #c8232c 70deg 80deg, #111418 80deg 90deg, #c8232c 90deg 100deg, #111418 100deg 110deg, #c8232c 110deg 120deg, #111418 120deg 130deg, #c8232c 130deg 140deg, #111418 140deg 150deg, #c8232c 150deg 160deg, #111418 160deg 170deg, #c8232c 170deg 180deg, #111418 180deg 190deg, #c8232c 190deg 200deg, #111418 200deg 210deg, #c8232c 210deg 220deg, #111418 220deg 230deg, #c8232c 230deg 240deg, #111418 240deg 250deg, #c8232c 250deg 260deg, #111418 260deg 270deg, #c8232c 270deg 280deg, #111418 280deg 290deg, #c8232c 290deg 300deg, #111418 300deg 310deg, #c8232c 310deg 320deg, #111418 320deg 330deg, #c8232c 330deg 340deg, #111418 340deg 350deg, #c8232c 350deg 360deg);
  animation: spin 1.2s linear infinite; box-shadow: 0 10px 30px #000a; }
@keyframes spin { to { rotate: 360deg; } }
.tr-chart { width: clamp(140px, 26vw, 240px); }
.tr-chart polyline { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 2.2s ease forwards; }
@keyframes draw { 70% { stroke: #9be37f; } 85%, 100% { stroke: #ff5a5a; stroke-dashoffset: 0; } }
.tr-av svg { width: clamp(70px, 13vw, 130px); height: auto; display: block; }
.tr-av.flip { transform: scaleX(-1); }
.tr-av.dim svg { filter: grayscale(.6) brightness(.8); }
.tr-die { width: clamp(70px, 13vw, 120px); aspect-ratio: 1; border-radius: 18%; padding: 14%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  background: radial-gradient(circle at 30% 25%, #fff3c4 0%, #f2cf6a 38%, #d6a93c 72%, #a87d1f 100%); box-shadow: 0 12px 30px #000a, inset 0 0 0 2px #6e4f12; animation: diceTumble .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.tr-die:nth-child(2) { animation-delay: .15s; }
.tr-die i { width: 70%; aspect-ratio: 1; border-radius: 50%; place-self: center; background: #120d05; }
@keyframes diceTumble { from { transform: translateY(-60px) rotate(-200deg) scale(.5); opacity: 0; } }
.tr-votes { font-size: clamp(22px, 4vw, 38px); letter-spacing: .15em; }
.tr-sub { position: absolute; left: 0; right: 0; bottom: max(8%, calc(env(safe-area-inset-bottom, 0px) + 24px)); margin: 0 auto; max-width: 900px; padding: 0 20px; text-align: center; z-index: 6;
  font: 800 clamp(18px, 3.2vw, 32px)/1.25 var(--font-display); color: #fff; text-shadow: 0 2px 0 #000, 0 0 18px #000; text-wrap: balance; }
.tr-sub.in { animation: subIn .4s ease both; }
@keyframes subIn { from { opacity: 0; transform: translateY(10px); } }
.tr-end { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; padding: 0 20px; z-index: 4; pointer-events: none; }
.tr-end p { margin: 0; animation: subIn .6s ease both; }
.tr-end .e1 { font: 600 clamp(16px, 2.6vw, 24px) var(--font-body); color: #cfd5e1; }
.tr-end .e2 { font: 800 clamp(28px, 6vw, 60px)/1.1 var(--font-display); color: var(--gold); text-shadow: 0 0 30px #e6c25a55; text-wrap: balance; }
.tr-end .e3 { font: 600 italic clamp(14px, 2vw, 18px) var(--font-body); color: #ff9a9a; }
.show-skip small { font-size: 10px; opacity: .7; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .tr-person.walk, .tr-wheel, .tr-coins, .tr-title em { animation-duration: .01s; animation-iteration-count: 1; } }
/* Buttons always stay on top of pop-ups and the pause screen */
.controls { z-index: 16; }
.pause-veil { pointer-events: none; }
@media (max-width: 640px) { .pops { top: 36%; } }

/* ===================== Update 5b: trailer v2 ===================== */
.tr2 { background: #000; overflow: hidden; }
.tr2 .tr-world { position: absolute; inset: 0; transform-origin: 50% 30%; transition: transform 1.1s cubic-bezier(.6, 0, .9, .45); }
.tr2.fly .tr-world { transform: scale(8); }
.tr2 .tr-room { position: absolute; inset: 0; background: #000; }
.tr2 .tr-room::before { content: ""; position: absolute; left: 50%; top: 0; width: 70vw; height: 100%; translate: -50% 0; pointer-events: none;
  background: linear-gradient(rgba(255, 244, 214, .16), rgba(255, 244, 214, .03) 85%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); transition: opacity 1s; }
.tr2.cracks .tr-room::before, .tr2.open .tr-room::before { opacity: .25; }
.tr2 .tr-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 240, 210, .07), transparent 70%); }
.tr2 .dust { position: absolute; inset: 0; pointer-events: none; }
.tr2 .dust i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%; background: rgba(255, 245, 220, .5); animation: dust var(--s) linear var(--d) infinite; }
@keyframes dust { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate(18px, -60px); opacity: 0; } }
/* The gold vault door */
.tr2 .vault { position: absolute; left: 50%; top: 30%; width: min(30vw, 32vh); aspect-ratio: 1; translate: -50% -50%; perspective: 900px; border-radius: 50%; }
.tr2 .vault::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, #1a1408 62%, #0a0805 70%); box-shadow: inset 0 0 0 4px #2a2010; }
.tr2 .v-light { position: absolute; inset: 0; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .6s, box-shadow 1.2s; }
.tr2 .v-door { position: absolute; inset: 0; border-radius: 50%; transform-origin: left center; transition: transform 1.6s cubic-bezier(.5, 0, .25, 1), box-shadow 1.4s;
  background: radial-gradient(circle at 35% 30%, #fff1b8 0%, #e2b84c 22%, #b8892a 50%, #7a5814 78%, #5a3e0c 100%);
  box-shadow: inset 0 0 0 8px #6e4f12, inset 0 0 30px rgba(0, 0, 0, .6), 0 0 0 0 rgba(255, 255, 255, 0); }
.tr2 .v-ring { position: absolute; inset: 16%; border-radius: 50%; border: 4px solid #6e4f12; box-shadow: inset 0 0 0 3px #f6dc8a55; }
.tr2 .v-wheel { position: absolute; inset: 34%; border-radius: 50%; border: 5px solid #5a3e0c; transition: transform 1.3s cubic-bezier(.5, 0, .3, 1); }
.tr2 .v-wheel i { position: absolute; left: 50%; top: -30%; width: 8%; height: 160%; translate: -50% 0; background: #5a3e0c; border-radius: 4px; }
.tr2 .v-wheel i:nth-child(2) { rotate: 60deg; } .tr2 .v-wheel i:nth-child(3) { rotate: -60deg; }
.tr2 .v-door b { position: absolute; left: 50%; top: 50%; width: 9%; height: 5%; background: #4a320a; border-radius: 2px; transform: rotate(var(--a)) translateX(430%); transition: transform .9s .2s; }
.tr2.cracks .v-wheel { transform: rotate(540deg); }
.tr2.cracks .v-door b { transform: rotate(var(--a)) translateX(340%); }
.tr2.cracks .v-door { box-shadow: inset 0 0 0 8px #6e4f12, inset 0 0 30px rgba(0, 0, 0, .6), 0 0 18px 6px rgba(255, 255, 255, .85), 0 0 60px 20px rgba(255, 255, 255, .35); }
.tr2.open .v-door { transform: rotateY(-115deg); }
.tr2.open .v-light { opacity: 1; box-shadow: 0 0 120px 60px #fff, 0 0 420px 220px rgba(255, 255, 255, .55); }
/* The crowd walking together */
.tr2 .crowd { --walk: 0; position: absolute; left: 50%; bottom: 8%; width: min(92vw, 900px); height: 44vh; translate: -50% 0; transform-origin: 50% 100%;
  transform: translateY(calc(var(--walk) * -24vh)) scale(calc(1 - var(--walk) * .5)); }
.tr2 .cr-p { position: absolute; left: calc(50% + var(--dx)); bottom: var(--dy); width: clamp(56px, 10vw, 118px); translate: -50% 0; filter: brightness(.45) saturate(.7); transition: filter 1s, transform 1.3s ease-in, opacity 1.3s; }
.tr2 .cr-p svg { width: 100%; height: auto; display: block; }
.tr2 .cr-p .b { position: absolute; inset: 0; opacity: 0; }
.tr2.walking .cr-p .a, .tr2.walking .cr-p .b { animation: step .42s ease-in-out var(--delay) infinite alternate; }
@keyframes step { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-3%) rotate(1.5deg); } }
.tr2 .spot { position: absolute; left: 50%; bottom: -8%; width: 120%; height: 40%; translate: -50% 0; background: radial-gradient(ellipse at 50% 50%, rgba(255, 240, 205, .22), transparent 65%); pointer-events: none; z-index: -1; }
.tr2.open .cr-p { filter: brightness(1.25) saturate(1); }
.tr2.shield .cr-p .b { opacity: 1; }
.tr2.shield .cr-p .a { opacity: 0; }
.tr2.shield .cr-p { transform: rotate(-5deg) translateY(2%); }
.tr2.enter .cr-p { transform: translateY(-14vh) scale(.35); opacity: 0; filter: brightness(4) blur(1px); }
.tr2 .tr-white { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .9s; z-index: 3; }
.tr2.fly .tr-white { opacity: 1; }
.tr2.title .tr-white { opacity: 0; transition-duration: 1.2s; }
/* Title rising from coins */
.tr2 .tr-title { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 50% 55%, #2a1e08 0%, #000 70%); transition: opacity .5s; }
.tr2.title .tr-title { opacity: 1; }
.tr2 .tr-title .rays { position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; translate: -50% -50%; opacity: 0; transition: opacity 1s;
  background: repeating-conic-gradient(rgba(255, 214, 110, .14) 0 5deg, transparent 5deg 15deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 45%); mask: radial-gradient(circle, #000 0%, transparent 45%); animation: spin 40s linear infinite; }
.tr2.locked .tr-title .rays { opacity: 1; }
.tr2 .coins { position: absolute; left: 50%; top: 80%; width: 0; height: 0; }
.tr2 .coins::before { content: ""; position: absolute; left: -70px; top: -20px; width: 140px; height: 40px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #fff1b8, #d9ac3e 50%, #7a5814); box-shadow: 0 -10px 0 -4px #e2b84c, 0 -18px 0 -8px #f6dc8a; opacity: 0; }
.tr2.title .coins::before { animation: pile 1s ease forwards; }
@keyframes pile { 0% { opacity: 1; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.4); } }
.tr2 .coins i { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff6d0, #e6c25a 45%, #9a7020); box-shadow: inset 0 0 0 2px #7a5814; }
.tr2.title .coins i { animation: burst 2.2s cubic-bezier(.2, .8, .4, 1) var(--d) forwards; }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 45% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--tx) * 1.1), calc(var(--ty) + 70vh)) rotate(calc(var(--r) * 2)) scale(.9); } }
.tr2 .sparkles i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; background: #fff3c4; rotate: 45deg; opacity: 0; box-shadow: 0 0 10px #ffd36e;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.tr2.locked .sparkles i { animation: twinkle 2s ease-in-out var(--d) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.4); } }
.tr2 .tr-title h2 { position: relative; display: grid; justify-items: center; gap: .1em; margin: 0; text-align: center; transform: translateY(45vh) scale(.5); opacity: 0; padding: 0 12px; }
.tr2.title .tr-title h2 { animation: rise 1s cubic-bezier(.2, 1.1, .3, 1) .15s forwards; }
@keyframes rise { to { transform: none; opacity: 1; } }
.tr2 .t-small { font: 700 clamp(18px, 4vw, 40px) var(--font-display); color: #f6e7bd; letter-spacing: .04em; text-shadow: 0 2px 0 #6e4f12, 0 6px 14px #000; }
.tr2 .past .tr-world, .tr2.past .tr-world { display: none; }
/* Gold 3D title: the letters themselves are the dark extrusion; a gold gradient copy sits on top */
.tr2 .t-big { position: relative; font: 800 clamp(46px, 12vw, 150px)/1 var(--font-display); letter-spacing: .01em; color: #5a3e0c;
  text-shadow: 0 1px 0 #7a5814, 0 2px 0 #6e4f12, 0 3px 0 #634610, 0 4px 0 #5a3e0c, 0 5px 0 #52390b, 0 6px 0 #4a330a, 0 7px 0 #422d09, 0 10px 4px rgba(0, 0, 0, .5), 0 18px 30px rgba(0, 0, 0, .7); }
.tr2 .t-big::after { content: attr(data-text); position: absolute; inset: 0; text-shadow: none;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe9a0 22%, #e6b84a 45%, #a87a1e 58%, #f2d27a 70%, #b8892a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr2 .flare { position: absolute; left: -10%; top: 55%; width: 26%; height: 8px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse, #fff 0%, rgba(255, 240, 200, .6) 30%, transparent 70%); box-shadow: 0 0 40px 18px rgba(255, 255, 255, .45); }
.tr2.locked .flare { animation: flare 2.2s ease-in-out .2s forwards; }
@keyframes flare { 0% { left: -10%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 85%; opacity: 0; } }
.tr2.locked .tr-title h2 { animation: rise 1s cubic-bezier(.2, 1.1, .3, 1) forwards, thud .25s ease; }
/* Scenes: the players act them out */
.tr2 .tr-scenes { position: absolute; inset: 8% 3% 24%; z-index: 2; pointer-events: none; display: none; }
.tr2.scenes .tr-scenes { display: block; }
.tr2 .tr-shot { position: absolute; inset: 0; transition: transform .65s cubic-bezier(.6, 0, .25, 1), opacity .65s; }
.tr2 .tr-shot.enter { transform: translateX(110%); }
.tr2 .tr-shot.leave { transform: translateX(-110%); opacity: 0; }
.tr2 .tr-star { position: absolute; left: 50%; bottom: 0; width: clamp(110px, 22vw, 230px); translate: -50% 0; z-index: 2; }
.tr2 .tr-star > svg, .tr2 .tr-star .alt svg, .tr2 .tr-star .shrug svg { width: 100%; height: auto; display: block; }
.tr2 .tr-star .alt { position: absolute; inset: 0; opacity: 0; }
.tr2 .tr-star .alt.on { opacity: 1; }
.tr2 .tr-star:has(> .alt.on) > svg, .tr2 .tr-star:has(> .alt.on) > .shrug { opacity: 0; }
.tr2 .tr-star .alt.on:has(~ .alt.on) { opacity: 0; }
.tr2 .tr-star.left { left: 30%; } .tr2 .tr-star.right { left: 70%; }
.tr2 .tr-star.flip > svg, .tr2 .tr-star.flip .alt svg { transform: scaleX(-1); }
.tr2 [data-ph] { opacity: 0; transition: opacity .35s, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.tr2 [data-ph].on { opacity: 1; }
.tr2 .tr-star .alt[data-ph] { transition: opacity .15s; }
/* scene 1: flag */
.tr2 .p-pole { position: absolute; left: 16%; bottom: 0; height: 78%; width: clamp(90px, 18vw, 180px); transform: translateY(-120%); }
.tr2 .p-pole.on { transform: none; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1), opacity .2s; }
.tr2 .p-pole > i { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(90deg, #cfd5de, #7d8794); border-radius: 3px; }
.tr2 .cloth { position: absolute; left: 5px; top: 2%; width: 100%; aspect-ratio: 3 / 2; animation: wave 1.6s ease-in-out infinite; transform-origin: left center; }
@keyframes wave { 50% { transform: skewY(-4deg) scaleX(.96); } }
.tr2 .cloth .c1 svg { width: 100%; height: 100%; display: block; }
.tr2 .cloth .c1, .tr2 .cloth .c2 { position: absolute; inset: 0; border-radius: 3px; overflow: hidden; }
.tr2 .cloth .c2 { background: #ff8ab8; display: grid; place-content: center; text-align: center; transform: rotateY(90deg); }
.tr2 .cloth .c2.on { transform: none; }
.tr2 .cloth .c2 b { font-size: clamp(26px, 5vw, 48px); line-height: 1; }
.tr2 .cloth .c2 small { margin: 0; font: 800 clamp(8px, 1.3vw, 12px) var(--font-display); color: #5a1030; letter-spacing: .1em; }
.tr2 .p-sign { position: absolute; right: 8%; top: 12%; padding: 10px 14px; border: 3px solid var(--gold); border-radius: 10px; background: #1a1406; color: #f6e7bd; text-align: center;
  font: 700 clamp(11px, 1.8vw, 16px)/1.3 var(--font-body); transform: scale(.4) rotate(-12deg); }
.tr2 .p-sign b { font: 800 clamp(16px, 3vw, 28px) var(--font-display); color: var(--gold); }
.tr2 .p-sign.on { transform: rotate(6deg); }
.tr2 .p-sign.spin.on { animation: signspin .8s ease; }
@keyframes signspin { from { transform: rotateY(360deg) scale(.4); } }
/* scene 2: city */
.tr2 .p-sky { position: absolute; left: 4%; right: 4%; bottom: 0; height: 90%; display: flex; align-items: flex-end; justify-content: center; gap: 1.5%; z-index: 1; }
.tr2 .p-sky i { flex: 0 0 7%; height: 0; background: linear-gradient(#ffe8a0, #b8892a); border-radius: 3px 3px 0 0; box-shadow: inset 0 0 0 1px #6e4f12; transition: height .9s cubic-bezier(.2, 1.3, .4, 1) var(--d);
  background-image: linear-gradient(#ffe8a055, #b8892a55), repeating-linear-gradient(#0004 0 3px, transparent 3px 9px), linear-gradient(#ffe8a0, #b8892a); opacity: .85; }
.tr2 .p-sky.on i { height: var(--h); }
.tr2 .p-tourist { position: absolute; right: 10%; bottom: 0; width: clamp(50px, 9vw, 90px); z-index: 2; transform: translateX(60%); }
.tr2 .p-tourist.on { transform: none; }
.tr2 .p-tourist svg { width: 100%; height: auto; display: block; filter: grayscale(.3); }
.tr2 .p-tourist span { position: absolute; top: -18%; right: -10%; font-size: clamp(20px, 3.5vw, 34px); animation: bob 1s ease-in-out infinite; }
/* scene 3: god */
.tr2 .p-beam { position: absolute; left: 50%; top: -12%; bottom: 0; width: clamp(140px, 30vw, 300px); translate: -50% 0; background: linear-gradient(rgba(255, 246, 210, .45), rgba(255, 246, 210, .05)); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); }
.tr2 .p-halo { position: absolute; left: 50%; top: -6%; width: 48%; height: 8%; translate: -50% 0; border-radius: 50%; border: 4px solid #ffe08a; box-shadow: 0 0 18px #ffd36e, inset 0 0 8px #ffd36e; z-index: 3; transform: translateY(-40px); }
.tr2 .p-halo.on { transform: none; animation: halo 2s ease-in-out infinite; }
@keyframes halo { 50% { translate: -50% -6px; } }
.tr2 .p-invoice { position: absolute; right: 8%; top: 18%; display: grid; gap: 2px; padding: 10px 14px; background: #fffdf4; color: #222; border-radius: 4px; font: 600 clamp(10px, 1.6vw, 14px) var(--font-body); box-shadow: 0 10px 24px #0008; transform: translateY(40px) rotate(-8deg); }
.tr2 .p-invoice b { font: 800 clamp(13px, 2vw, 18px) var(--font-display); color: #b3122e; }
.tr2 .p-invoice.on { transform: rotate(5deg); animation: toheaven 3s ease-in .8s forwards; }
@keyframes toheaven { to { transform: translateY(-50vh) rotate(25deg); opacity: 0; } }
/* scene 4: casino */
.tr2 .p-chart { position: absolute; right: 4%; top: 6%; width: clamp(150px, 32vw, 320px); z-index: 1; }
.tr2 .p-chart polyline { stroke: #9be37f; stroke-dasharray: 300; stroke-dashoffset: 300; }
.tr2 .p-chart.on polyline { animation: crash 1.6s ease forwards; }
@keyframes crash { 60% { stroke: #9be37f; } 75%, 100% { stroke: #ff5a5a; stroke-dashoffset: 0; } }
.tr2 .p-wheel { position: absolute; left: 10%; bottom: 14%; display: grid; justify-items: center; gap: 6px; transform: scale(.5); }
.tr2 .p-wheel.on { transform: none; }
.tr2 .p-wheel .wheel { width: clamp(90px, 17vw, 170px); aspect-ratio: 1; border-radius: 50%; border: 6px solid #c9a85a; background: repeating-conic-gradient(#c8232c 0 10deg, #111418 10deg 20deg); animation: spin 1.1s linear infinite; }
.tr2 .p-wheel b { font: 800 clamp(16px, 3vw, 28px) var(--font-display); color: #ff5a5a; }
.tr2 .s-casino.ph1 .shrug { animation: shrug 1s ease .6s; }
@keyframes shrug { 30% { transform: rotate(-6deg) translateY(-3%); } 60% { transform: rotate(6deg) translateY(-3%); } }
/* scene 5: prison */
.tr2 .p-letters { position: absolute; inset: 0; z-index: 3; }
.tr2 .p-letters i { position: absolute; right: -10%; top: 40%; font-size: clamp(24px, 4vw, 40px); font-style: normal; }
.tr2 .p-letters.on i { animation: throw 1s ease-in forwards; }
.tr2 .p-letters.on i:nth-child(2) { animation-delay: .25s; top: 55%; } .tr2 .p-letters.on i:nth-child(3) { animation-delay: .5s; top: 30%; }
@keyframes throw { to { right: 110%; rotate: -720deg; } }
.tr2 .s-prison.ph0:not(.ph1) .tr-star.dodge { animation: dodge 1.4s ease; }
@keyframes dodge { 25% { translate: -80% 0; } 50% { translate: -20% 0; } 75% { translate: -80% 0; } }
.tr2 .p-gavel { position: absolute; left: 10%; top: 10%; font-size: clamp(34px, 6vw, 60px); display: grid; justify-items: center; transform: rotate(-40deg); }
.tr2 .p-gavel.on { transform: none; }
.tr2 .p-gavel b { font: 800 clamp(14px, 2.4vw, 22px) var(--font-display); color: #ff5a5a; }
.tr2 .p-bars { position: absolute; left: 50%; bottom: 0; width: clamp(140px, 28vw, 280px); height: 92%; translate: -50% 0; z-index: 4;
  background: repeating-linear-gradient(90deg, transparent 0 12%, #9aa3ad 12% 16%); border-top: 8px solid #9aa3ad; transform: translateY(-120%); }
.tr2 .p-bars.on { transform: none; transition: transform .35s cubic-bezier(.6, 0, 1, .4); }
.tr2 .p-view { position: absolute; right: 8%; top: 10%; display: grid; justify-items: center; padding: 8px; border: 4px solid #9aa3ad; background: #1b4d7a; font-size: clamp(30px, 5vw, 50px); }
.tr2 .p-view small { margin: 0; font: 600 clamp(9px, 1.4vw, 12px) var(--font-body); color: #fff; }
/* scene 6: betray */
.tr2 .p-shake { position: absolute; left: 50%; bottom: 30%; translate: -50% 0; font-size: clamp(40px, 7vw, 70px); transform: scale(.3); }
.tr2 .p-shake.on { transform: none; }
.tr2 .p-knife { position: absolute; left: -26%; bottom: 30%; font-size: clamp(28px, 5vw, 48px); display: grid; justify-items: center; transform: rotate(-30deg) scale(.4); }
.tr2 .p-knife small { margin: 0; font: 700 10px var(--font-body); color: #ff9a9a; }
.tr2 .p-knife.on { transform: rotate(10deg); }
.tr2 .p-cash { position: absolute; inset: 0; z-index: 3; }
.tr2 .p-cash i { position: absolute; left: 70%; bottom: 45%; font-style: normal; font-size: clamp(22px, 4vw, 36px); }
.tr2 .p-cash.on i { animation: cashfly 1.2s ease-in-out forwards; }
.tr2 .p-cash.on i:nth-child(2) { animation-delay: .2s; } .tr2 .p-cash.on i:nth-child(3) { animation-delay: .4s; }
@keyframes cashfly { to { left: 26%; bottom: 60%; rotate: -30deg; } }
/* scene 7: dice */
.tr2 .p-dice { position: absolute; left: 8%; bottom: 18%; width: clamp(150px, 30vw, 280px); height: 50%; }
.tr2 .p-dice > div { position: absolute; inset: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; align-content: center; }
.tr2 .p-dice span { flex-basis: 100%; text-align: center; font: 800 clamp(16px, 3vw, 26px) var(--font-display); color: var(--gold); }
.tr2 .p-dice .d11 span { color: #ff5a5a; }
.tr2 .p-dice:has(.d11.on) .d66 { opacity: 0; }
.tr2 .p-dice .tr-die { width: clamp(52px, 10vw, 92px); }
.tr2 .p-dice .on .tr-die { animation: diceTumble .8s cubic-bezier(.2, 1.4, .4, 1) both; }
/* scene 8: vote */
.tr2 .p-clock { position: absolute; left: 14%; top: 14%; font-size: clamp(36px, 6vw, 60px); }
.tr2 .p-clock.on { animation: tick 1s steps(2) infinite; }
@keyframes tick { 50% { rotate: 180deg; } }
.tr2 .p-votes { position: absolute; inset: 0; z-index: 3; }
.tr2 .p-votes i { position: absolute; font-style: normal; font-size: clamp(26px, 4.5vw, 44px); transform: scale(0); }
.tr2 .p-votes i:nth-child(1) { left: 22%; top: 20%; } .tr2 .p-votes i:nth-child(2) { left: 68%; top: 14%; } .tr2 .p-votes i:nth-child(3) { left: 28%; top: 50%; } .tr2 .p-votes i:nth-child(4) { left: 72%; top: 46%; }
.tr2 .p-votes.on i { animation: stamp .4s cubic-bezier(.2, 1.8, .4, 1) forwards; }
.tr2 .p-votes.on i:nth-child(2) { animation-delay: .15s; } .tr2 .p-votes.on i:nth-child(3) { animation-delay: .3s; } .tr2 .p-votes.on i:nth-child(4) { animation-delay: .45s; }
@keyframes stamp { from { transform: scale(2.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tr2 .p-cane { position: absolute; right: -40%; bottom: 46%; width: 60%; height: 16px; border-radius: 8px; background: linear-gradient(#c8102e, #8a0a1f); z-index: 4; }
.tr2 .p-cane::before { content: ""; position: absolute; left: -30px; top: -40px; width: 50px; height: 50px; border: 16px solid #c8102e; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; rotate: -45deg; }
.tr2 .p-cane.on { animation: cane 2.2s ease-in-out .9s forwards; }
@keyframes cane { 30% { right: 22%; } 50% { right: 22%; } 100% { right: -90%; } }
.tr2 .s-vote.ph1 .tr-star.yank { animation: yank 2.2s ease-in-out .9s forwards; }
@keyframes yank { 0%, 50% { transform: none; } 100% { transform: translateX(160%) rotate(28deg); } }
/* Finale: the line-up */
.tr2 .tr-finale { position: absolute; inset: 0; display: none; grid-template-rows: auto auto 1fr auto; justify-items: center; align-content: start; padding: 10vh 16px 6vh; gap: 10px; z-index: 2; text-align: center;
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 240, 205, .14), transparent 55%), #000; }
.tr2.finale .tr-finale { display: grid; }
.tr2 .tr-finale p { margin: 0; }
.tr2 .f1 { font: 600 clamp(16px, 2.6vw, 24px) var(--font-body); color: #cfd5e1; animation: subIn .6s ease both; }
.tr2 .f2:not(:empty) { font: 800 clamp(28px, 6vw, 62px)/1.1 var(--font-display); color: var(--gold); text-shadow: 0 0 30px #e6c25a55; text-wrap: balance; animation: subIn .6s ease both; }
.tr2 .lineup { align-self: end; display: flex; justify-content: center; align-items: flex-end; width: min(96vw, 1000px); }
.tr2 .lu { width: clamp(54px, 11vw, 120px); margin: 0 -1%; transition: filter 1s, opacity 1s; animation: subIn .5s ease both; animation-delay: calc(var(--i) * 80ms); }
.tr2 .lu svg { width: 100%; height: auto; display: block; }
.tr2 .lu.gone { filter: brightness(0); opacity: .35; }
.tr2 .f3 { font: 800 italic clamp(18px, 3.4vw, 32px) var(--font-display); color: #ff8ab8; opacity: 0; }
.tr2.spoiled .f3 { animation: spoil .35s cubic-bezier(.2, 1.8, .4, 1) forwards; }
@keyframes spoil { from { opacity: 0; transform: scale(2) rotate(-6deg); } to { opacity: 1; transform: rotate(-3deg); } }
/* Word-by-word subtitles */
.tr2 .tr-sub .w { color: rgba(255, 255, 255, .28); transition: color .15s, text-shadow .15s; }
.tr2 .tr-sub .w.on { color: #fff; }
.tr2.title .tr-sub { opacity: 0; }
@media (max-width: 640px) {
  .tr2 .tr-scenes { inset: 10% 2% 30%; }
  .tr2 .vault { width: min(46vw, 30vh); top: 28%; }
}
@media (prefers-reduced-motion: reduce) { .tr2 .cloth, .tr2 .p-wheel .wheel, .tr2 .tr-title .rays, .tr2.walking .cr-p .a, .tr2.walking .cr-p .b { animation: none; } }
@keyframes thud { 50% { scale: 1.06; } }
.tr2.finale .tr-sub { display: none; }
.tr2 .p-pole { z-index: 2; }
/* Scene 1 v3: the selfie */
.tr2 .s-flag .p-pole { left: auto; right: 22%; }
.tr2 .s-flag .tr-star { left: 42%; }
.tr2 .p-phone { position: absolute; right: -14%; top: 22%; font-size: clamp(26px, 5vw, 48px); transform: translateY(40%) rotate(20deg); }
.tr2 .p-phone.on { transform: rotate(-10deg); }
.tr2 .p-flash { position: absolute; inset: -20%; background: #fff; pointer-events: none; z-index: 5; }
.tr2 .p-flash.on { animation: camflash .6s ease .35s both; }
@keyframes camflash { 0% { opacity: 0; } 10% { opacity: .95; } 100% { opacity: 0; } }
.tr2 .p-likes { position: absolute; left: 6%; top: 10%; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: #fff; color: #e0245e; font: 800 clamp(14px, 2.6vw, 24px) var(--font-display); box-shadow: 0 10px 24px #0008; transform: scale(.3); }
.tr2 .p-likes small { margin: 0; font: 600 clamp(9px, 1.4vw, 12px) var(--font-body); color: #1d6fd8; }
.tr2 .p-likes.on { transform: none; transition-delay: .6s; }
.tr2 .tr-star .alt.bored { opacity: 0; }
.tr2 .s-flag.ph1 .tr-star .alt.bored { animation: showLate 2.4s steps(1) forwards; }
@keyframes showLate { 0%, 55% { opacity: 0; } 56%, 100% { opacity: 1; } }
.tr2 .s-flag.ph1 .tr-star.selfie { animation: walkOff 2.6s ease-in forwards; }
@keyframes walkOff { 0%, 60% { transform: none; } 66% { transform: scaleX(-1); } 100% { transform: scaleX(-1) translateX(240%); } }
.tr2 .p-bored { position: absolute; left: 50%; bottom: 82%; translate: -50% 0; z-index: 3; white-space: nowrap; font: 700 italic clamp(14px, 2.4vw, 22px) var(--font-display); color: #cfd5e1; opacity: 0; }
.tr2 .p-bored.on { animation: showLate 2.4s steps(1) forwards; }
.side-btn.host-btn { background: #2a2414; color: var(--gold); border-color: var(--gold); font-weight: 800; box-shadow: 0 0 12px rgba(230, 194, 90, .35); }

/* ===================== Update 6: PC layout (logs left, board centered and as big as the screen allows) ===================== */
.log .lp { font-weight: 800; }
.log .lm { color: var(--gold); font-weight: 800; }
.log .lm.in { color: #4fd18b; }
.log .lm.out { color: #ff6b6b; }
.log .ls { color: #fff; font-weight: 600; }
.log li { line-height: 1.4; }
.lucky-band { background: linear-gradient(90deg, #2bb673, #7be0a8); }
.deed-band.lucky-band { color: #05301b; }
.board { --corner: 1.9fr; }
@media (max-width: 640px) { .board { --corner: 1.7fr; } }
.space.lucky { background: linear-gradient(180deg, #10291c, var(--tile)); }

@media (min-width: 1100px) {
  .table {
    grid-template-columns: minmax(200px, 1fr) auto minmax(230px, 1fr);
    grid-template-areas: "logs board side";
    max-width: none; height: 100dvh; padding-block: 14px; gap: 16px; align-items: stretch;
  }
  .play { display: contents; }
  .logs { grid-area: logs; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; max-width: 340px; width: 100%; justify-self: end; min-height: 0; }
  .logs .logbox { display: flex; flex-direction: column; min-height: 0; }
  .logs .logbox .log { max-height: none; flex: 1; min-height: 0; }
  .board-wrap { grid-area: board; width: min(calc(100dvh - 24px), calc(100vw - 520px)); max-width: none; align-self: start; }
  .side { grid-area: side; max-width: 340px; width: 100%; overflow-y: auto; min-height: 0; max-height: calc(100dvh - 28px); }
  .side .logbox .log { max-height: 140px; }
  /* bigger boxes: corners take less room so every edge box grows */
  .board { --corner: 1.9fr; }
  .space { font-size: clamp(8.5px, 1.3dvh, 14px); }
}

/* ===================== Update 6: trailer v3 (drop-in room) ===================== */
.tr3 .tr3-room { background: radial-gradient(ellipse at 50% 120%, #0d0b08 0%, #000 60%); }
.tr3 .tr3-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(#0b0a08, #050505); border-top: 1px solid #1a1712; }
.tr3 .drops { position: absolute; inset: 0; }
.tr3 .dp { position: absolute; left: var(--x); bottom: 30%; width: clamp(48px, 9vw, 112px); translate: -50% 0; }
.tr3 .dp-idle { position: relative; transform-origin: 50% 100%; }
.tr3 .dp-body { position: relative; transform-origin: 50% 100%; will-change: transform; filter: brightness(.35); }
.tr3 .dp:not(.falling):not(.landed) .dp-body { visibility: hidden; }
.tr3 .dp.lit .dp-body { filter: none; }
.tr3 .dp-body > svg, .tr3 .dp-body .alt svg { width: 100%; height: auto; display: block; }
.tr3 .dp-body .alt { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; }
.tr3 .dp.stare .dp-body .alt.stare { opacity: 1; }
.tr3 .dp.stare .dp-body > svg { opacity: 0; }
/* each player's own spotlight: snaps on when they land */
.tr3 .dp-spot { position: absolute; left: 50%; bottom: -10%; width: 210%; height: 100vh; translate: -50% 0; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(255, 240, 205, .03), rgba(255, 240, 205, .2)); clip-path: polygon(46% 0, 54% 0, 96% 100%, 4% 100%); }
.tr3 .dp-spot::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 205, .35), transparent); }
.tr3 .dp.lit .dp-spot { opacity: 1; }
.tr3.dark .dp-spot { opacity: 0 !important; }
.tr3.dark .dp-body { filter: brightness(.08) !important; }
/* crash hole (and the cracked floor for the superhero landing) */
.tr3 .dp-hole { position: absolute; left: 50%; bottom: -5%; width: 130%; height: 12%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, #000 60%, #2a2418 75%, transparent); transform: scale(0); }
.tr3 .dp.hole .dp-hole { transform: scale(1); transition: transform .12s; }
.tr3 .dp.hole .dp-idle { clip-path: inset(-300vh -200% 0 -200%); }
.tr3 .dp.landed .dp-hole { transform: scale(0); transition: transform .6s .3s; }
.tr3 .ls-superhero.impact .dp-hole, .tr3 .ls-statue.impact .dp-hole { transform: scale(1.3, .7); background: repeating-conic-gradient(from 10deg, #6b5a3a 0 3deg, transparent 3deg 30deg); opacity: .8; mask: radial-gradient(closest-side, #000 50%, transparent); transition: none; }
.tr3 .ls-superhero.landed .dp-hole, .tr3 .ls-statue.landed .dp-hole { transform: scale(1.3, .7); transition: none; }
/* bodyguard catch */
.tr3 .dp-guard { position: absolute; left: 50%; bottom: 0; width: 125%; translate: -50% 0; transform: translateX(-70vw); visibility: hidden; }
.tr3 .dp-guard svg { width: 100%; height: auto; display: block; }
.tr3 .dp.guard-in .dp-guard { visibility: visible; transform: translateX(-12%); transition: transform .45s cubic-bezier(.3, 1.2, .5, 1); }
.tr3 .dp.landed.guard-in .dp-guard { animation: guardOut 1s ease-in 1.1s forwards; }
@keyframes guardOut { 0% { transform: translateX(-12%); } 20% { transform: translateX(-12%) scaleX(-1); } 100% { transform: translateX(-80vw) scaleX(-1); } }
/* money parachute */
.tr3 .dp-chute { position: absolute; left: 50%; bottom: 96%; translate: -50% 0; font-size: clamp(30px, 6vw, 70px); line-height: 1; opacity: 0; transform: scale(.2); transform-origin: 50% 100%; }
.tr3 .dp-chute::before { content: "💵💵💵"; position: absolute; left: 50%; top: -55%; translate: -50% 0; font-size: .55em; white-space: nowrap; }
.tr3 .dp-chute i { position: absolute; left: 20%; right: 20%; top: 80%; height: 70%; border-left: 1px solid #ccc8; border-right: 1px solid #ccc8; }
.tr3 .dp.chute .dp-chute { opacity: 1; transform: none; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .1s; }
.tr3 .dp.chute.landed .dp-chute { animation: chuteAway 1.4s ease-in .2s forwards; }
@keyframes chuteAway { to { transform: translate(60%, -60vh) rotate(25deg); opacity: 0; } }
/* little effects per landing */
.tr3 .dp-fx { position: absolute; inset: -20% -30% 0; pointer-events: none; }
.tr3 .ls-faceplant.landed .dp-fx::before { content: "💫"; position: absolute; left: 50%; top: 0; translate: -50% 0; font-size: clamp(16px, 3vw, 30px); animation: dizzy 1s linear 2; opacity: 0; }
@keyframes dizzy { 0% { opacity: 1; transform: translateX(-30%) rotate(0); } 50% { transform: translateX(30%) rotate(180deg); } 100% { opacity: 1; transform: translateX(-30%) rotate(360deg); } }
.tr3 .ls-catflip.landed .dp-fx::before, .tr3 .ls-spin.landed .dp-fx::before, .tr3 .dp.alive .dp-fx::before { content: "✨"; position: absolute; right: 0; top: 10%; font-size: clamp(16px, 3vw, 30px); animation: pingOut .9s ease forwards; }
.tr3 .dp.alive .dp-fx::after { content: "✨ ✨"; position: absolute; left: 0; top: 30%; font-size: clamp(14px, 2.6vw, 26px); animation: pingOut 1.1s ease .1s forwards; }
@keyframes pingOut { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1) translateY(-40%); } }
.tr3 .dp.fix .dp-fx::before { content: "✨"; position: absolute; left: 40%; top: 45%; font-size: clamp(12px, 2.2vw, 22px); animation: pingOut .8s ease forwards; }
/* host: the gold statue that comes alive */
.tr3 .ls-statue .dp-body > svg { filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1) contrast(1.15) drop-shadow(0 0 10px #ffd36e88); transition: filter .9s; }
.tr3 .ls-statue.alive .dp-body > svg { filter: none; }
.tr3 .dp-late { position: absolute; left: 50%; bottom: 104%; translate: -50% 0; white-space: nowrap; font: 700 italic clamp(10px, 1.6vw, 15px) var(--font-display); color: var(--gold); opacity: 0; }
.tr3 .dp.alive .dp-late { opacity: 1; transition: opacity .4s .3s; }
/* idle: look around, fix the outfit, stare at the camera */
.tr3 .dp.look .dp-idle { animation: lookAround 1.1s ease-in-out; }
@keyframes lookAround { 0%, 100% { transform: none; } 22%, 48% { transform: scaleX(-1); } 70% { transform: rotate(-3deg); } }
.tr3 .dp.fix .dp-idle { animation: fixOutfit .9s ease-in-out; }
@keyframes fixOutfit { 20% { transform: rotate(-4deg); } 45% { transform: rotate(4deg) translateY(-2%); } 70% { transform: rotate(-2deg); } }
.tr3 .dp.stare .dp-idle { transform: scale(1.07); transition: transform .5s; }
/* screen shake on heavy landings */
.tr3.quake .tr-world { animation: quake .55s ease; }
.tr3.quake-s .tr-world { animation: quakeS .35s ease; }
@keyframes quake { 10% { transform: translate(-14px, 8px); } 25% { transform: translate(12px, -10px); } 40% { transform: translate(-9px, 6px); } 60% { transform: translate(6px, -4px); } 80% { transform: translate(-3px, 2px); } }
@keyframes quakeS { 20% { transform: translate(-5px, 4px); } 45% { transform: translate(4px, -3px); } 70% { transform: translate(-2px, 1px); } }
.tr3.title .tr-world { display: none; }

/* Scene: God's invoice + lightning reply */
.tr3 .p-bolt { position: absolute; left: 50%; top: -14%; height: 46%; translate: -30% 0; opacity: 0; z-index: 4; }
.tr3 .p-bolt svg { height: 100%; width: auto; filter: drop-shadow(0 0 12px #fff3a0); }
.tr3 .zap .p-bolt { animation: bolt .5s steps(2) 2; }
@keyframes bolt { 0% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 1; } }
.tr3 .zap .p-halo { animation: none; transform: rotate(28deg) translate(18%, 30%); transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.tr3 .zap .tr-star .zapface { opacity: 1; }
.tr3 .zap .tr-star > svg { opacity: 0; }
.tr3 .zap .tr-star { animation: zapped .4s steps(4); }
@keyframes zapped { 25% { filter: brightness(3); } 50% { filter: invert(1); } 75% { filter: brightness(3); } }
.tr3 .p-reply { position: absolute; left: 6%; top: 14%; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: #fff; color: #222; font: 800 clamp(12px, 2vw, 18px) var(--font-display); box-shadow: 0 10px 24px #0008; opacity: 0; transform: scale(.4) rotate(-4deg); }
.tr3 .p-reply small { margin: 0; font: 600 clamp(10px, 1.6vw, 14px) var(--font-body); color: #b3122e; }
.tr3 .zap .p-reply { opacity: 1; transform: rotate(-4deg); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) .35s, opacity .2s .35s; }
/* Scene: legend → regular person (crowd cheers, then walks away; suit → plain tee, briefcase → lunchbox) */
.tr3 .p-crowd { position: absolute; right: 2%; bottom: 0; width: 36%; display: flex; align-items: flex-end; justify-content: center; gap: 2%; z-index: 1; }
.tr3 .p-crowd i { position: relative; flex: 0 0 14%; font-style: normal; }
.tr3 .p-crowd svg { width: 100%; height: auto; display: block; opacity: .8; }
.tr3 .p-crowd b { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; font-size: clamp(12px, 2.4vw, 24px); }
.tr3 .p-crowd.on i { animation: cheer .45s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 70ms); }
@keyframes cheer { to { transform: translateY(-14%); } }
.tr3 .s-dice.ph2 .p-crowd i { animation: walkAway 1.8s ease-in forwards; animation-delay: calc(.3s + var(--i) * 120ms); }
.tr3 .s-dice.ph2 .p-crowd b { opacity: 0; transition: opacity .2s; }
@keyframes walkAway { 0% { transform: none; } 15% { transform: scaleX(-1); } 100% { transform: scaleX(-1) translateX(-220%); opacity: 0; } }
/* Scene: voted out → trapdoor */
.tr3 .s-vote { clip-path: inset(-60% -60% 0 -60%); }
.tr3 .p-trap { position: absolute; left: 50%; bottom: 0; width: clamp(130px, 26vw, 260px); height: 10px; translate: -50% 0; z-index: 3; }
.tr3 .p-trap::before { content: ""; position: absolute; inset: 0; background: #000; box-shadow: 0 0 0 2px #2a2418; }
.tr3 .p-trap i { position: absolute; top: 0; width: 50%; height: 100%; background: linear-gradient(#7a5a20, #4a320a); }
.tr3 .p-trap i:first-child { left: 0; transform-origin: 0 50%; } .tr3 .p-trap i:last-child { right: 0; transform-origin: 100% 50%; }
.tr3 .trapdoor .p-trap i:first-child { transform: rotate(80deg); transition: transform .25s ease-in; }
.tr3 .trapdoor .p-trap i:last-child { transform: rotate(-80deg); transition: transform .25s ease-in; }
.tr3 .trapdoor .tr-star.fallguy { animation: fallThrough .8s cubic-bezier(.55, 0, 1, .45) .12s forwards; }
@keyframes fallThrough { 0% { transform: none; } 15% { transform: translateY(-6%); } 100% { transform: translateY(130%) rotate(8deg); } }
@media (max-width: 640px) { .tr3 .dp { width: clamp(40px, 11vw, 70px); } .tr3 .p-crowd { width: 44%; } }
@media (prefers-reduced-motion: reduce) { .tr3 .dp-idle, .tr3 .p-crowd i { animation: none !important; } }
.tr2 .p-dice .tr-die { grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); padding: clamp(6px, 1.4vw, 13px); }
.tr2 .p-dice .tr-die span { flex-basis: auto; font-size: 0; }
.tr2 .p-dice .tr-die i { width: 100%; height: 100%; aspect-ratio: auto; transform: scale(.72); }
/* Bigger boxes on tablets / small laptops too */
@media (min-width: 641px) and (max-width: 1099px) { .board-wrap { max-width: none; } .space { font-size: clamp(7.5px, 1.15vw, 12px); } }
@media (max-width: 640px) { .space { font-size: 7.6px; } .space.corner .name { font-size: 8px; } }

/* ===================== Update 7: diamond dice + the billionaire's hand ===================== */
.dice-stage .die3d .face {
  background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(205, 238, 255, .9) 30%, rgba(150, 205, 240, .85) 55%, rgba(225, 245, 255, .95) 75%, rgba(170, 215, 245, .9) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset -2px -3px 6px rgba(60, 120, 170, .35), inset 2px 2px 4px #fff, 0 0 6px rgba(190, 235, 255, .55);
}
.dice-stage .die3d .face i { background: radial-gradient(circle at 40% 35%, #fff3c4 0%, #e6c25a 45%, #8a6416 100%); box-shadow: 0 0 2px rgba(120, 85, 15, .7); }
.dice-stage .die3d .core { background: #cfeaf8; }
.dice-stage .die3d .face::before { content: ""; position: absolute; left: 10%; top: 8%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, .85); filter: blur(1px); pointer-events: none; }
.dice-stage { transition: left .6s cubic-bezier(.3, 1, .4, 1), top .6s cubic-bezier(.3, 1, .4, 1), scale .6s; }
.dice-stage.aside { left: 13%; top: 24%; scale: .9; }
.dice-stage .die3d.inhand { opacity: 0; }
.dice-stage .die3d.flying { animation: dtoss .9s cubic-bezier(.3, .6, .4, 1) both; }
.dice-stage .die3d.flying + .die3d.flying { animation-delay: .05s; }
@keyframes dtoss {
  0% { transform: translate(calc(var(--dsize) * 1.8), calc(var(--dsize) * -1.3)) scale(.55); opacity: 1; }
  55% { transform: translate(calc(var(--dsize) * .4), calc(var(--dsize) * -1.1)) scale(1.05); }
  75% { transform: translate(0, 0) scale(1); }
  86% { transform: translate(0, calc(var(--dsize) * -.28)); }
  100% { transform: none; }
}
.dice-stage .die3d.landed { animation: dsettle .3s ease; }
@keyframes dsettle { 40% { transform: scale(1.08, .92); } }
.dice-hand { position: absolute; left: 50%; top: 50%; width: calc(var(--dsize, 40px) * 3.6); translate: -10% -70%; pointer-events: none; z-index: 7; opacity: 0;
  transform: translate(60%, 90%) rotate(20deg); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .3s; }
.dice-hand svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55)); }
.dice-hand.in, .dice-hand.shake, .dice-hand.blow, .dice-hand.toss { opacity: 1; transform: none; }
.dice-hand.shake { animation: handshake .22s ease-in-out infinite; }
@keyframes handshake { 0%, 100% { transform: none; } 25% { transform: translate(-6%, -4%) rotate(-8deg); } 75% { transform: translate(6%, 3%) rotate(8deg); } }
.dice-hand.blow { transform: translate(-6%, -14%) rotate(-14deg) scale(1.05); }
.dice-hand.toss { transform: translate(-14%, -6%) rotate(-28deg); transition-duration: .2s; }
.dice-hand.out { opacity: 0; transform: translate(70%, 100%) rotate(25deg); transition-duration: .5s; }
.dice-puff { position: absolute; left: 50%; top: 50%; font-size: calc(var(--dsize, 40px) * .8); translate: -60% -140%; opacity: 0; pointer-events: none; z-index: 8; }
.dice-puff.on { animation: puff .55s ease-out forwards; }
@keyframes puff { 0% { opacity: 0; transform: scale(.4) translateX(30%); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) translateX(-40%); } }
.dice-cup { display: none; }
@media (prefers-reduced-motion: reduce) { .dice-hand.shake { animation: none; } .dice-stage .die3d.flying { animation-duration: .2s; } }

/* ===================== Update 7: buttons, chat, practice tab, player card ===================== */
/* End turn now looks like Roll dice; Trade / Assets / Build / Bankruptcy / Host look like the old End turn */
.end-btn { background: var(--gold); color: #1a1406; border-color: var(--gold); }
.side-btn, .side-btn.host-btn { background: var(--tile-2); color: var(--fg); border-color: var(--fg); box-shadow: none; font-weight: 700; }
.quit-btn { background: var(--tile-2); color: var(--fg); border-color: var(--fg); }
.roll-btn.glow, .end-btn.glow { animation: btnGlow 1.3s ease-in-out infinite; }
@keyframes btnGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 194, 90, .7), 0 0 10px rgba(230, 194, 90, .4); } 50% { box-shadow: 0 0 0 6px rgba(230, 194, 90, 0), 0 0 22px rgba(255, 220, 120, .85); } }
@media (prefers-reduced-motion: reduce) { .roll-btn.glow, .end-btn.glow { animation: none; box-shadow: 0 0 14px rgba(255, 220, 120, .8); } }
/* Practice tools: a closed tab */
.practice-tab > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.practice-tab > summary::-webkit-details-marker { display: none; }
.practice-tab > summary h2 { margin: 0; }
.practice-tab > summary::after { content: "▾"; color: var(--muted); transition: rotate .2s; }
.practice-tab[open] > summary::after { rotate: 180deg; }
.practice-tab[open] > summary { margin-bottom: 10px; }
/* Emoji chat */
.chatbox h2 small { font: 600 11px var(--font-body); color: var(--muted); margin-left: 6px; }
.chat-feed { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; max-height: 120px; overflow-y: auto; font-size: 13px; }
.chat-feed li { display: flex; gap: 8px; align-items: center; }
.chat-feed li span { font-size: 20px; line-height: 1; }
.chat-feed:empty::before { content: "Say it with emojis. Words are for millionaires."; color: var(--muted); font-size: 12px; }
.chat-bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.chat-bar button { font-size: 18px; line-height: 1; padding: 6px 0; border-radius: 8px; border: 1px solid var(--tile-line); background: var(--tile-2); cursor: pointer; }
.chat-bar button:hover { border-color: var(--gold); }
.chat-bar button.sent { animation: chatPop .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes chatPop { 50% { transform: scale(1.35); } }
/* Players: hover lights up the character on the board; click opens their card */
.players li[data-pid] { cursor: pointer; border-radius: 10px; transition: background .15s; }
.players li[data-pid]:hover, .players li[data-pid]:focus-visible { background: color-mix(in srgb, var(--pc) 16%, transparent); outline: none; }
.players li[data-pid]:hover .mini svg { filter: drop-shadow(0 0 6px var(--pc)); }
.figure.spot { z-index: 30; filter: drop-shadow(0 0 6px var(--pc)) drop-shadow(0 0 14px var(--pc)) brightness(1.2); transform: scale(1.35); transition: transform .2s; }
.pcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.pcard-av { border-radius: 14px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pc) 35%, #111), #0b0e12); padding: 6px; box-shadow: 0 0 0 2px var(--pc); }
.pcard-av svg { width: 100%; height: auto; display: block; }
.pcard-info h3 { margin: 0 0 2px; }
.pcard-cash { margin: 0; font: 800 24px var(--font-display); color: var(--gold); }
.pcard-cash small { font: 600 12px var(--font-body); color: var(--muted); }
.player-sheet h4 { margin: 12px 0 6px; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 180px; overflow-y: auto; }
.pc-own { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.pc-own small { color: var(--muted); }
.pc-dot { width: 10px; height: 10px; border-radius: 50%; }
.pc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-stats span { display: grid; padding: 8px 10px; border-radius: 10px; background: var(--tile-2); font-size: 12px; color: var(--muted); }
.pc-stats b { font: 800 16px var(--font-display); color: var(--fg); }
.space.travel, .space.paparazzi, .space.family { background: var(--tile); }
.hn { font-weight: 800; }

/* ===================== Update 7b: classic 3D throw, black dice with gold pips, result badge ===================== */
.dice-hand, .dice-puff { display: none !important; }
.dice-stage, .dice-stage.aside { left: 50%; top: var(--dice-y, 47%); scale: 1; transition: opacity .35s, scale .4s cubic-bezier(.5, 0, .7, .4), top .4s cubic-bezier(.5, 0, .7, .4); }
.dice-stage.shrink { top: 18%; scale: .25; opacity: 0; }
.dice-stage.throwing { transition: none; }
.dice-stage .die3d { will-change: transform; }
.dice-stage .die3d .face {
  background: radial-gradient(circle at 30% 25%, #4a4a52 0%, #1c1c22 45%, #050507 100%);
  box-shadow: inset 0 0 0 1px rgba(230, 194, 90, .55), inset -2px -3px 6px rgba(0, 0, 0, .7), inset 2px 2px 4px rgba(255, 255, 255, .18);
}
.dice-stage .die3d .face::before { content: ""; position: absolute; left: 12%; top: 8%; width: 34%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, .18); filter: blur(1px); pointer-events: none; }
.dice-stage .die3d .face i { background: radial-gradient(circle at 40% 35%, #fff3c4 0%, #e6c25a 45%, #8a6416 100%); box-shadow: 0 0 2px rgba(230, 194, 90, .6); }
.dice-stage .die3d .core { background: #0a0a0d; }
.dice-stage .die-shadow { transition: none; }
.dice-badge { position: absolute; left: 50%; top: 16.5%; translate: -50% 0; display: flex; gap: 6px; align-items: center; padding: 4px 10px 4px 6px; border-radius: 999px;
  background: rgba(10, 10, 14, .78); border: 1px solid rgba(230, 194, 90, .55); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); z-index: 6; pointer-events: none;
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dice-badge.on { opacity: 1; transform: none; }
.mini-die { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 20px; height: 20px; padding: 3px; border-radius: 5px; background: #121216; box-shadow: inset 0 0 0 1px rgba(230, 194, 90, .6); }
.mini-die i { width: 100%; height: 100%; border-radius: 50%; background: #e6c25a; transform: scale(.8); }
.mini-die b { display: block; }
.badge-total { font: 800 15px var(--font-display); color: var(--gold); }
@media (max-width: 640px) { .dice-badge { top: 13.5%; padding: 2px 8px 2px 4px; } .mini-die { width: 15px; height: 15px; padding: 2px; border-radius: 4px; } .badge-total { font-size: 12px; } }

/* ===================== Update 8: pop-ups stay until closed (80% size); new trade window ===================== */
.pops .pop { zoom: .8; }
.pop-hint { grid-column: 1 / -1; justify-self: end; margin-top: 4px; font: 700 11px var(--font-body); color: #cfd5e1; background: rgba(0, 0, 0, .55); padding: 3px 9px; border-radius: 999px; animation: hintPulse 1.6s ease-in-out infinite; }
.pop-news .pop-hint { position: absolute; right: 8px; bottom: -22px; }
@keyframes hintPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pop-hint { animation: none; } }
.trade-sheet { max-width: 720px; }
.t-top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.t-who { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--tile-2); box-shadow: inset 0 0 0 1px var(--pc, #444); min-width: 0; }
.t-who .mini { width: 30px; flex: none; } .t-who .mini svg { width: 100%; height: auto; display: block; }
.t-who b { display: block; color: var(--pc); font-size: 14px; } .t-who small { color: var(--gold); font: 700 12px var(--font-mono, monospace); }
.t-vs { font-size: 22px; color: var(--muted); }
.t-list { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; padding-right: 2px; }
.t-item { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; padding: 6px 8px; border-radius: 10px; background: var(--tile-2); }
.t-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.t-flag { display: inline-block; width: 20px; height: 13px; overflow: hidden; border-radius: 2px; flex: none; }
.t-flag svg { width: 100%; height: 100%; display: block; }
.t-reg { font: 700 10px var(--font-body); color: var(--rc); border: 1px solid var(--rc); border-radius: 999px; padding: 0 6px; line-height: 16px; }
.t-rec { flex-basis: 100%; font: 700 10px var(--font-body); color: #1a1406; background: var(--gold); border-radius: 6px; padding: 1px 6px; width: fit-content; }
.t-cash { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px auto; gap: 6px; align-items: center; margin-top: 4px; }
.t-cash input[type=range] { width: 100%; accent-color: var(--gold); }
.t-step { height: 28px; border-radius: 8px; border: 1px solid var(--tile-line); background: var(--tile-2); color: var(--fg); font-weight: 800; cursor: pointer; }
.t-cash output { font: 700 12px var(--font-mono, monospace); color: var(--gold); min-width: 54px; text-align: right; }
.t-meter { display: grid; gap: 6px; }
.t-bar { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #e05252 0%, #e6c25a 40%, #4fd18b 50%, #e6c25a 60%, #4fd18b 100%); }
.t-bar { background: linear-gradient(90deg, #e05252, #7a5a3a 38%, #4fd18b 46% 54%, #3a7a5a 62%, #4fd18b); }
.t-bar i { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #111, 0 2px 8px #000; translate: -50% -50%; transition: left .3s cubic-bezier(.3, 1.4, .5, 1); }
.t-fair { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.t-fair b { color: var(--fg); }
.t-fair.fair { color: #4fd18b; } .t-fair.you { color: #9fe0b8; } .t-fair.them { color: #ff9a9a; }
.sandbox-bar { margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; background: #1d2a1d; border: 1px dashed #7be0a8; color: #c9f5da; font-size: 12px; display: grid; gap: 6px; }
.sandbox-bar button { justify-self: start; border-radius: 999px; border: 1px solid #7be0a8; background: transparent; color: #7be0a8; padding: 4px 10px; font-weight: 700; cursor: pointer; }
body.sandboxing .board { box-shadow: 0 0 0 3px #7be0a8, 0 0 24px rgba(123, 224, 168, .35); }
body.sandboxing .end-btn:not(:disabled)::after { content: " (undo practice)"; font-weight: 600; font-size: .8em; }

/* ===================== Update 9: online lobby ===================== */
.invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.invite input { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--tile-line); background: var(--tile-2); color: var(--fg); font: 600 13px var(--font-mono, monospace); }
.lobby-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lobby-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--tile-2); }
.lobby-list .mini svg { width: 100%; height: auto; display: block; }
.lobby-list small { color: var(--muted); }
.lobby-list .choice { padding: 6px 10px; font-size: 13px; }
.net-veil { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0, 0, 0, .78); padding: 24px; text-align: center; }
.net-veil div { max-width: 360px; padding: 18px 20px; border-radius: 16px; background: var(--tile); border: 1px solid var(--gold); font: 700 16px var(--font-body); color: var(--fg); }

/* Trailer scene: the deal (hug + wallet swap) */
.tr3 .s-deal .tr-star.deal-a { left: 36%; transition: transform .6s cubic-bezier(.3, 1.2, .5, 1); }
.tr3 .s-deal .tr-star.deal-b { left: 64%; transition: transform .6s cubic-bezier(.3, 1.2, .5, 1); }
.tr3 .s-deal.ph0:not(.ph2) .tr-star.deal-a { transform: translateX(48%) rotate(8deg); }
.tr3 .s-deal.ph0:not(.ph2) .tr-star.deal-b { transform: translateX(-48%) rotate(-8deg); }
.tr3 .p-hearts { position: absolute; left: 50%; bottom: 80%; translate: -50% 0; display: flex; gap: 6px; font-size: clamp(18px, 3.4vw, 32px); z-index: 3; }
.tr3 .p-hearts i { font-style: normal; }
.tr3 .p-hearts.on i { animation: heartUp 1.6s ease-out forwards; }
.tr3 .p-hearts.on i:nth-child(2) { animation-delay: .15s; } .tr3 .p-hearts.on i:nth-child(3) { animation-delay: .3s; }
@keyframes heartUp { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 100% { transform: translateY(-120%); opacity: 0; } }
.tr3 .p-deal { position: absolute; left: 50%; top: 8%; translate: -50% 0; display: grid; justify-items: center; padding: 8px 16px; background: #fffdf4; color: #222; border-radius: 4px; box-shadow: 0 10px 24px #0008; transform: rotate(-4deg) scale(.4); z-index: 3; }
.tr3 .p-deal b { font: 800 clamp(16px, 3vw, 26px) var(--font-display); color: #2a8a4a; }
.tr3 .p-deal span { font: 600 clamp(10px, 1.6vw, 14px) var(--font-body); }
.tr3 .p-deal.on { transform: rotate(-4deg); }
.tr3 .s-deal.ph2 .tr-star.deal-b { transform: translateX(14%); }
.tr3 .s-deal.ph2 .tr-star.deal-a { transform: translateX(-10%); }
.tr3 .p-wallet { position: absolute; left: -22%; top: 42%; font-size: clamp(30px, 5.5vw, 56px); transform: scale(.3) rotate(-20deg); z-index: 3; }
.tr3 .p-wallet.on { transform: rotate(-10deg); animation: walletWiggle .5s ease-in-out .3s 3; }
@keyframes walletWiggle { 50% { transform: rotate(10deg) translateY(-6%); } }
.tr3 .p-count { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tr3 .p-count i { position: absolute; left: 60%; top: 50%; font-style: normal; font-size: clamp(18px, 3vw, 30px); opacity: 0; }
.tr3 .p-count.on i { animation: billFlick 1s ease-out forwards; }
.tr3 .p-count.on i:nth-child(2) { animation-delay: .25s; } .tr3 .p-count.on i:nth-child(3) { animation-delay: .5s; }
@keyframes billFlick { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(40%, -160%) rotate(40deg); } }
.tr3 .p-whistle { position: absolute; right: -10%; top: -6%; font-size: clamp(18px, 3vw, 30px); }
.tr3 .p-whistle.on { animation: bob 0.8s ease-in-out infinite; }
.tr3 .s-deal.walkaway .tr-star.deal-b { transform: translateX(260%) !important; transition: transform 1.1s ease-in; }