/* =====================================================================
   Monopoly Online — base layout (shared by every theme)
   Structure only: grid, sizing, positioning, the 3D board mechanics,
   responsive rules and transitions. Colours, fonts, borders, shadows,
   backgrounds and animations live in /css/themes/<theme>.css.
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --topbar-h: 62px; --safe-bottom: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-size: 14px; line-height: 1.45; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
.hidden { display: none !important; }
.money { white-space: nowrap; }
::-webkit-scrollbar { width: 8px; height: 8px; }
/* ------------------------------------------------------------ buttons & fields */
.btn { position: relative; overflow: hidden; padding: 9px 16px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .15s var(--ease), background .2s, box-shadow .25s, opacity .2s, border-color .2s, color .2s; }
.btn:active:not(:disabled) { transform: scale(.97); transition-duration: .08s; }
.btn:disabled { cursor: not-allowed; }
.btn-lg { padding: 14px 22px; font-size: 16px; width: 100%; }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-icon { padding: 8px 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
input, select { padding: 11px 13px; width: 100%; transition: border-color .2s, box-shadow .25s; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; text-align: left; }
.field > span { font-size: 11px; }
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch { width: 30px; height: 30px; cursor: pointer; position: relative; transition: transform .2s var(--spring), box-shadow .2s; }
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected { transform: scale(1.06); }
.color-swatch.taken { cursor: not-allowed; transform: none; }
/* ------------------------------------------------------------ home */
#home { height: 100%; overflow-y: auto; position: relative; }
.home-wrap { min-height: 100%; display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; padding: 32px 20px 120px; position: relative; z-index: 1; }
.logo-mark { width: 64px; height: 64px; display: grid; place-items: center; font-size: 30px; }
.logo { margin: 0; line-height: 1; }
.logo .neon { display: block; font-size: clamp(46px, 7vw, 82px); }
.logo .sub { display: block; font-size: clamp(13px, 1.6vw, 18px); margin-top: 14px; }
.tagline { margin: 22px 0 26px; font-size: 17px; max-width: 450px; line-height: 1.55; }
.feature-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.feature-chips li { padding: 7px 13px; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.home-card { padding: 30px; text-align: center; }
.divider { display: flex; align-items: center; gap: 10px; font-size: 12px; margin: 22px 0 14px; }
.divider::before, .divider::after { flex: 1; height: 1px; }
.join-row { display: flex; gap: 8px; }
/* ------------------------------------------------------------ room layout */
#room { height: 100%; display: grid; gap: 14px; padding: 0 14px 14px; grid-template-columns: clamp(260px, 20vw, 380px) minmax(0, 1fr) clamp(300px, 22vw, 420px); grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "top top top" "left board right"; }
#topbar { grid-area: top; }
#left { grid-area: left; }
#board-wrap { grid-area: board; }
#right { grid-area: right; }
.panel { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
#right { padding: 0; gap: 0; overflow: hidden; }
#left-extra { display: flex; flex-direction: column; gap: 18px; }
.panel h3, .section-title { margin: 0 0 10px; font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card { padding: 12px; }
/* topbar */
.topbar { display: flex; align-items: center; gap: 12px; padding: 0 4px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; cursor: pointer; }
.brand .logo-mark { width: 38px; height: 38px; font-size: 18px; margin: 0; }
.room-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; transition: background .2s, box-shadow .2s; }
.turn-pill { flex: 1; display: flex; justify-content: center; min-width: 0; }
.turn-pill > div { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; max-width: 100%; min-width: 0; }
.turn-pill .avatar { width: 30px; height: 30px; font-size: 12px; }
.turn-pill .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* turn timer: neutral by default, themes may restyle .turn-clock / .turn-clock.low */
.turn-clock { flex: none; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--muted, #aaa); white-space: nowrap; }
.turn-clock:empty { display: none; }
.turn-clock.low { color: var(--bad, #f55); }
.turn-pill.plain > div { padding-left: 18px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
/* players */
.players { display: flex; flex-direction: column; gap: 8px; }
.pcard { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; transition: border-color .3s, box-shadow .3s, opacity .3s, background .3s; }
.avatar { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 16px; }
.avatar .role-badge { position: absolute; right: -7px; bottom: -6px; width: 20px; height: 20px; font-size: 11px; display: grid; place-items: center; }
.pcard.current .avatar::after { position: absolute; inset: -5px; }
.pinfo { flex: 1; min-width: 0; }
.pname { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pname-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.you-tag { font-size: 9px; padding: 2px 6px; flex: none; }
.ptags { font-size: 11px; display: flex; gap: 6px; flex-wrap: wrap; }
.pdots { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 5px; }
.pdots i { width: 7px; height: 10px; }
.pcash { font-size: 17px; transition: color .4s, text-shadow .4s; }
.cash-delta { position: absolute; right: 12px; top: -6px; font-size: 15px; pointer-events: none; z-index: 2; }
.kick { cursor: pointer; font-size: 18px; padding: 0 6px; }
/* settings */
.settings { display: flex; flex-direction: column; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding: 11px 2px; }
.setting small { display: block; font-size: 11px; }
.setting select { width: auto; padding: 6px 10px; }
.toggle { position: relative; width: 44px; height: 24px; flex: none; }
.toggle input { width: 0; height: 0; position: absolute; }
.toggle span { position: absolute; inset: 0; cursor: pointer; transition: background .3s, box-shadow .3s, border-color .3s; }
.toggle span::after { position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; transition: transform .3s var(--spring), background .3s, box-shadow .3s; }
.toggle input:checked + span::after { transform: translateX(20px); }
.toggle input:disabled + span { cursor: default; }
/* ------------------------------------------------------------ tabs (right panel) */
.tabs { display: flex; gap: 4px; margin: 10px; padding: 4px; flex: none; }
.tab { flex: 1; position: relative; cursor: pointer; padding: 9px 8px; font-size: 13px; transition: color .2s, background .25s, border-color .25s, box-shadow .25s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; display: inline-grid; place-items: center; }
.tab-content { flex: 1; overflow-y: auto; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.empty { text-align: center; padding: 30px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty .big { font-size: 44px; }
.empty p { margin: 0; max-width: 240px; }
/* deals */
.deal-list { display: flex; flex-direction: column; gap: 8px; }
.deal { position: relative; overflow: hidden; padding: 12px 12px 12px 15px; font-size: 12.5px; display: flex; flex-direction: column; gap: 8px; }
.deal::before { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.deal-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.deal-head .icon { font-size: 18px; }
.deal .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deal .cols strong { display: block; font-size: 10px; margin-bottom: 3px; }
.deal ul { margin: 0; padding-left: 15px; }
.deal .btn-row { justify-content: flex-start; }
/* assets */
.net-worth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { padding: 11px 6px; text-align: center; }
.stat b { display: block; font-size: 17px; }
.stat span { font-size: 9.5px; }
.group-block { display: flex; flex-direction: column; gap: 5px; }
.group-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.group-head .dot { width: 12px; height: 12px; }
.group-head .count { margin-left: auto; }
.group-head .set-badge { font-size: 10px; padding: 2px 8px; }
.prop-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; font-size: 13px; transition: background .2s, box-shadow .2s; }
.prop-item .swatch { width: 4px; height: 22px; flex: none; }
.prop-item .pname { flex: 1; }
.prop-item .meta { font-size: 11px; text-align: right; }
/* chat */
.chat-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 4px 14px 14px; }
.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-right: 4px; }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.chat-msg .avatar { width: 28px; height: 28px; font-size: 11px; }
.chat-bubble { padding: 7px 12px; word-break: break-word; max-width: 80%; }
.chat-bubble b { display: block; font-size: 11px; }
.chat-msg.mine { flex-direction: row-reverse; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { padding: 10px 14px; }
/* characters, action cards */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-card { padding: 10px; cursor: pointer; font-size: 12px; display: flex; flex-direction: column; gap: 4px; transition: border-color .2s, background .2s, box-shadow .25s; }
.role-card.static { cursor: default; }
.role-card.taken { cursor: not-allowed; }
.role-top { display: flex; align-items: center; gap: 7px; }
.role-icon { font-size: 19px; }
.role-desc { font-size: 11px; line-height: 1.4; }
.role-taker { font-size: 11px; }
.hand { display: flex; flex-direction: column; gap: 8px; }
.action-card { position: relative; overflow: hidden; padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; transition: box-shadow .3s; }
.action-card .btn { align-self: flex-start; position: relative; z-index: 1; }
.picker { display: flex; flex-direction: column; gap: 6px; }
.picker-option { justify-content: flex-start; text-align: left; white-space: normal; }
/* ------------------------------------------------------------ board */
#board-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; container-type: size; perspective: 1700px; perspective-origin: 50% 30%; }
/* In 3D the board is laid out at 2x (--z: zoom) and shrunk back (scale), so the browser draws it at
   double resolution and tilted text stays sharp. 2D stays at 1x (a flat board is sharpest as is).
   Margins cancel the extra size; set visible gaps with --m-top / --m-bottom, never with margin. */
#board { --tilt: 0deg; --rot: 0deg; --bw: min(100cqw, 100cqh); position: relative; container-type: inline-size; flex: none; width: var(--bw); aspect-ratio: 1; min-height: 0; --z: 1; zoom: var(--z); scale: calc(1 / var(--z)); transform: translateZ(var(--push, 0px)) rotateX(var(--tilt)) rotateZ(var(--rot)); transform-style: preserve-3d; margin: calc((var(--m-top, 0px) - (var(--z) - 1) * var(--bw) / 2) / var(--z)) calc((var(--z) - 1) * var(--bw) / -2 / var(--z)) calc((var(--m-bottom, 0px) - (var(--z) - 1) * var(--bw) / 2) / var(--z)); transition: transform .9s var(--ease); display: grid; gap: calc(0.35 * var(--cq, 1cqw)); grid-template-columns: minmax(0, 13fr) repeat(9, minmax(0, 8fr)) minmax(0, 13fr); grid-template-rows: minmax(0, 13fr) repeat(9, minmax(0, 8fr)) minmax(0, 13fr); padding: calc(0.6 * var(--cq, 1cqw)); }
@media (min-width: 901px) {
  #room:not(.view-3d) #board { --bw: min(calc(100cqw - 3cqw), calc(100cqh - 52px)); --m-top: 46px; }
}
/* Wide enough for the camera buttons to sit beside the board: stack them on the right
   and let the board take the full height instead of leaving a strip above it. */
@container (min-aspect-ratio: 23 / 20) {
  #room:not(.view-3d) #board { --bw: min(calc(100cqw - 110px), calc(100cqh - 8px)); --m-top: 0px; }
  .view-controls { flex-direction: column; }
}
/* ---- 3D view: tilted board with thickness; buildings rise, tokens stand up */
/* --push moves the board back so its near edge sits at the screen plane: nothing is magnified, so text stays sharp */
#room.view-3d #board { --z: 2; --tilt: 32deg; --push: calc(var(--bw) * sin(var(--tilt)) * -0.5); --bw: min(94cqw, calc((100cqh - 20px) * 1.25)); --m-top: calc(var(--bw) * -0.14); --m-bottom: calc(var(--bw) * -0.05); }
.edge { display: none; position: absolute; pointer-events: none; }
#room.view-3d .edge { display: block; }
.e-bottom { left: calc(1 * var(--cq, 1cqw)); right: calc(1 * var(--cq, 1cqw)); bottom: 0; height: calc(2.6 * var(--cq, 1cqw)); transform-origin: 50% 100%; transform: rotateX(90deg); }
.e-top { left: calc(1 * var(--cq, 1cqw)); right: calc(1 * var(--cq, 1cqw)); top: 0; height: calc(2.6 * var(--cq, 1cqw)); transform-origin: 50% 0; transform: rotateX(-90deg); }
.e-left { top: calc(1 * var(--cq, 1cqw)); bottom: calc(1 * var(--cq, 1cqw)); left: 0; width: calc(2.6 * var(--cq, 1cqw)); transform-origin: 0 50%; transform: rotateY(90deg); }
.e-right { top: calc(1 * var(--cq, 1cqw)); bottom: calc(1 * var(--cq, 1cqw)); right: 0; width: calc(2.6 * var(--cq, 1cqw)); transform-origin: 100% 50%; transform: rotateY(-90deg); }
#room.view-3d .center-logo { font-size: calc(5.6 * var(--cq, 1cqw)); margin-top: calc(2 * var(--cq, 1cqw)); }
/* personal camera controls */
.view-controls { position: absolute; top: 4px; right: 4px; z-index: 15; display: flex; gap: 4px; padding: 4px; }
.cam-btn { min-width: 34px; height: 32px; padding: 0 9px; cursor: pointer; font-size: 13px; transition: background .2s, border-color .2s; }
.cam-btn:active { transform: scale(.9); }
/* tiles — dark glass blocks with neon trims */
.tile { position: relative; overflow: hidden; display: flex; cursor: pointer; font-size: calc(1.28 * var(--cqt, var(--cq, 1cqw))); line-height: 1.1; text-align: center; transition: transform .2s var(--ease), box-shadow .2s, background .5s; }
.tile:hover { transform: scale(1.07); z-index: 3; }
#room.view-3d .tile:hover { transform: translateZ(calc(1 * var(--cq, 1cqw))); }
.tile .band { flex: none; position: relative; display: flex; align-items: center; justify-content: center; }
/* shown as buildings instead */
.tile .body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(0.55 * var(--cq, 1cqw)) calc(0.3 * var(--cq, 1cqw)); min-width: 0; min-height: 0; }
.tile .tname { word-break: break-word; hyphens: auto; -webkit-hyphens: auto; }
.tile .icon { font-size: calc(2.4 * var(--cq, 1cqw)); line-height: 1; }
.tile .price { display: inline-flex; align-items: center; gap: calc(0.3 * var(--cq, 1cqw)); font-size: calc(1.15 * var(--cqt, var(--cq, 1cqw))); padding: calc(0.15 * var(--cq, 1cqw)) calc(0.55 * var(--cq, 1cqw)); white-space: nowrap; transition: background .4s; }
.tile.owned .price { padding-left: calc(0.2 * var(--cq, 1cqw)); }
.tile .price .oi { display: inline-grid; place-items: center; width: calc(1.45 * var(--cq, 1cqw)); height: calc(1.45 * var(--cq, 1cqw)); min-width: 9px; min-height: 9px; font-size: .85em; flex: none; }
.tile.just-bought { z-index: 3; }
.tile .land-glow { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tile.bottom { flex-direction: column; }
.tile.bottom .band { height: 18%; }
.tile.top { flex-direction: column-reverse; }
.tile.top .band { height: 18%; }
.tile.top .body { flex-direction: column-reverse; }
.tile.left { flex-direction: row-reverse; }
.tile.left .band { width: 18%; flex-direction: column; }
.tile.right { flex-direction: row; }
.tile.right .band { width: 18%; flex-direction: column; }
.tile.left .body, .tile.right .body { justify-content: center; gap: calc(0.4 * var(--cq, 1cqw)); }
/* text always faces the viewer, whichever way the board is turned */
.tile .body, .tile.corner { transition: rotate .9s var(--ease); }
#board[data-face="90"] .tile .body { writing-mode: vertical-rl; }
#board[data-face="180"] .tile .body { rotate: 180deg; }
#board[data-face="270"] .tile .body { writing-mode: vertical-rl; rotate: 180deg; }
#board[data-face="90"] .tile.corner { rotate: 90deg; }
#board[data-face="180"] .tile.corner { rotate: 180deg; }
#board[data-face="270"] .tile.corner { rotate: 270deg; }
/* corners — neon signs */
.tile.corner { align-items: center; justify-content: center; flex-direction: column; gap: calc(0.4 * var(--cq, 1cqw)); }
.tile.corner .icon { font-size: calc(4.2 * var(--cq, 1cqw)); }
.tile.corner .tname { font-size: calc(1.75 * var(--cqt, var(--cq, 1cqw))); }
.tile.corner .sub { font-size: calc(1.05 * var(--cqt, var(--cq, 1cqw))); }
.tile.visa::before { position: absolute; top: calc(0.2 * var(--cq, 1cqw)); right: calc(0.2 * var(--cq, 1cqw)); font-size: calc(1.3 * var(--cq, 1cqw)); z-index: 1; }
/* board center — neon sign over a grid floor */
#center { grid-area: 2 / 2 / var(--edge, 11) / var(--edge, 11); margin: calc(0.8 * var(--cq, 1cqw)); isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: calc(2 * var(--cq, 1cqw)) calc(3 * var(--cq, 1cqw)); gap: calc(1.5 * var(--cq, 1cqw)); min-height: 0; overflow: hidden; position: relative; transform: rotateZ(calc(var(--rot) * -1)); transition: transform .9s var(--ease); }
#center::after { position: absolute; z-index: -1; inset: 0; }
.center-logo { font-size: calc(4 * var(--cq, 1cqw)); line-height: 1; margin-top: calc(0.6 * var(--cq, 1cqw)); }
.action-box { width: 100%; max-width: calc(48 * var(--cq, 1cqw)); padding: calc(1.8 * var(--cq, 1cqw)); text-align: center; display: flex; flex-direction: column; gap: calc(1.2 * var(--cq, 1cqw)); align-items: center; font-size: max(12px, calc(1.3 * var(--cq, 1cqw))); }
.action-box h2 { margin: 0; font-size: max(16px, calc(2 * var(--cq, 1cqw))); }
.action-box p { margin: 0; }
.action-box .btn { font-size: max(12px, calc(1.3 * var(--cq, 1cqw))); }
.dice { display: flex; gap: calc(1.8 * var(--cq, 1cqw)); justify-content: center; }
.die { width: calc(6 * var(--cq, 1cqw)); height: calc(6 * var(--cq, 1cqw)); min-width: 36px; min-height: 36px; padding: 14%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.die i { width: 70%; aspect-ratio: 1; place-self: center; visibility: hidden; }
.die i.on { visibility: visible; }
.log { flex: 1; width: 100%; max-width: calc(54 * var(--cq, 1cqw)); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: calc(0.45 * var(--cq, 1cqw)); font-size: max(11px, calc(1.12 * var(--cq, 1cqw))); padding-right: calc(0.4 * var(--cq, 1cqw)); }
.log div { padding: calc(0.55 * var(--cq, 1cqw)) calc(1.1 * var(--cq, 1cqw)); }
.mini-card { width: 100%; max-width: calc(26 * var(--cq, 1cqw)); min-width: 180px; overflow: hidden; }
.mini-card .head { padding: calc(1 * var(--cq, 1cqw)); }
.mini-card .head small { display: block; font-size: .78em; }
.mini-card .content { padding: calc(1 * var(--cq, 1cqw)); font-size: .88em; }
.countdown { height: 6px; width: 100%; overflow: hidden; }
.countdown div { height: 100%; transition: width .25s linear; }
.bid-amount { font-size: max(26px, calc(3.4 * var(--cq, 1cqw))); }
.strike-banner { width: 100%; padding: calc(0.7 * var(--cq, 1cqw)) calc(1 * var(--cq, 1cqw)); font-size: max(11px, calc(1.1 * var(--cq, 1cqw))); }
.waiting { display: flex; align-items: center; gap: 10px; justify-content: center; }
.waiting .avatar { width: 30px; height: 30px; font-size: 12px; }
.dots::after { display: inline-block; width: 1.2em; text-align: left; overflow: hidden; vertical-align: bottom; }
.lobby-avatars { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
/* overlays on the board: cards, banners */
.board-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; }
.card-pop { pointer-events: auto; cursor: pointer; }
.card-pop .card { width: 70%; max-width: calc(40 * var(--cq, 1cqw)); min-width: 220px; padding: calc(2.8 * var(--cq, 1cqw)); text-align: center; }
.card-pop .card h3 { margin: 0 0 calc(1 * var(--cq, 1cqw)); font-size: max(16px, calc(2.1 * var(--cq, 1cqw))); }
.card-pop .card p { margin: 0; font-size: max(13px, calc(1.5 * var(--cq, 1cqw))); }
.turn-banner span { padding: calc(1.2 * var(--cq, 1cqw)) calc(3.4 * var(--cq, 1cqw)); font-size: max(22px, calc(3.8 * var(--cq, 1cqw))); white-space: nowrap; }
.winner { text-align: center; }
.winner .trophy { font-size: max(52px, calc(8.4 * var(--cq, 1cqw))); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 21; }
.confetti i { position: absolute; top: -4%; width: calc(0.9 * var(--cq, 1cqw)); height: calc(1.4 * var(--cq, 1cqw)); }
/* tokens — glowing orbs with light trails */
#tokens { position: absolute; inset: 0; pointer-events: none; z-index: 4; transform-style: preserve-3d; }
.token { position: absolute; width: calc(3.1 * var(--cq, 1cqw)); height: calc(3.1 * var(--cq, 1cqw)); min-width: 12px; min-height: 12px; transform: translate(-50%, -50%) rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)); transform-origin: 50% 50%; transition: left .17s var(--ease), top .17s var(--ease), transform .9s var(--ease); }
#room.view-3d .token { width: calc(3.9 * var(--cq, 1cqw)); height: calc(3.9 * var(--cq, 1cqw)); transform-origin: 50% 100%; transform: translate(-50%, -100%) rotateZ(calc(var(--rot) * -1)) rotateX(calc(var(--tilt) * -1)); }
#room.view-3d .token::before { position: absolute; left: 0; right: 0; bottom: -18%; height: 34%; }
.token-body { position: relative; width: 100%; height: 100%; display: grid; place-items: center; font-size: calc(1.35 * var(--cq, 1cqw)); }
.token.active { z-index: 5; }
/* dock: the action box under the board (phones and 3D view) */
.dock { display: none; width: 100%; flex: none; position: relative; z-index: 5; }
.dock .action-box { max-width: 560px; margin: 0 auto; font-size: 14px; padding: 16px 20px; gap: 10px; }
.dock .action-box h2 { font-size: 18px; }
.dock .action-box .btn { font-size: 14px; }
.dock .die { width: 44px; height: 44px; }
.dock .mini-card { max-width: 260px; }
.dock .mini-card .head, .dock .mini-card .content { padding: 10px 12px; }
.dock .strike-banner { font-size: 12px; padding: 8px 10px; }
.dock .bid-amount { font-size: 28px; }
.dock .btn-lg { padding: 12px 20px; }
/* ------------------------------------------------------------ modal */
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { width: 100%; max-width: 400px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal.wide { max-width: 740px; }
.modal-head { padding: 20px 22px; position: sticky; top: 0; z-index: 1; }
.modal-head h2 { margin: 0; font-size: 22px; }
.modal-head small { display: block; margin-top: 2px; }
.modal-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { padding: 0 22px 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.modal-foot .btn { flex: 1; }
.rent-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rent-table td { padding: 7px 0; }
.rent-table td:last-child { text-align: right; }
.owner-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; font-size: 12px; }
.chip .avatar { width: 22px; height: 22px; font-size: 10px; }
.note { font-size: 13px; padding: 10px 12px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trade-col { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.trade-col h4 { margin: 0; font-size: 14px; }
.check-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.check-list label { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 9px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.check-list label.disabled { cursor: not-allowed; }
.check-list input { width: auto; }
.check-list .swatch { width: 4px; height: 16px; flex: none; }
.sub-box { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sub-head { font-size: 13px; }
.sub-head small { display: block; font-size: 11px; }
.loan-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
/* ------------------------------------------------------------ toasts */
#toasts { position: fixed; top: 76px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; }
.toast { padding: 12px 16px; max-width: 340px; }
/* ------------------------------------------------------------ mobile nav */
.mobile-nav { display: none; }
/* ------------------------------------------------------------ theme picker (every theme)
   Neutral markup + tokens only; a theme may restyle .theme-card in its own file. */
.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px; min-width: 0; min-height: 44px;
  text-align: left; cursor: pointer; border-radius: var(--radius-sm, 10px);
  background: var(--surface-2, #1b1b1b); color: var(--text, #fff); border: 1.5px solid var(--line-2, #444);
  transition: border-color .2s, box-shadow .2s, transform .15s var(--ease);
}
.theme-card:hover { border-color: var(--accent, #888); }
.theme-card:active { transform: scale(.97); }
.theme-card:focus-visible { outline: 2px solid var(--accent, #888); outline-offset: 2px; }
.theme-card[aria-pressed="true"] { border-color: var(--accent, #fff); box-shadow: 0 0 0 1px var(--accent, #fff), 0 0 16px -4px var(--accent, #fff); }
.theme-swatches { display: flex; width: 100%; height: 14px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.theme-swatches i { flex: 1; }
.theme-name { font-weight: 800; font-size: 12px; line-height: 1.2; }
.theme-desc { font-size: 10.5px; line-height: 1.3; color: var(--muted, #aaa); }
#left .theme-picker { grid-template-columns: 1fr; }
#left .theme-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; }
#left .theme-swatches { width: 44px; }
#left .theme-desc { flex-basis: 100%; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1280px) {
  #room { grid-template-columns: 232px minmax(0, 1fr) 272px; }
  .top-actions .label { display: none; }
}
@media (max-width: 1150px) {
  #room { grid-template-columns: 210px minmax(0, 1fr) 250px; gap: 10px; }
  .pcard { padding: 9px 10px; gap: 9px; }
  .avatar { width: 34px; height: 34px; font-size: 14px; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 56px; }
  #room { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "top" "main"; padding: 0 8px calc(76px + var(--safe-bottom)); gap: 8px; }
  #left, #board-wrap, #right { grid-area: main; }
  #room[data-mtab="board"] #left, #room[data-mtab="board"] #right { display: none; }
  #room[data-mtab="players"] #board-wrap, #room[data-mtab="players"] #right { display: none; }
  #room[data-mtab="panel"] #board-wrap, #room[data-mtab="panel"] #left { display: none; }
  .tabs { display: none; }
  .tab-content, .chat-pane { padding-top: 14px; }
  #board-wrap { container-type: normal; justify-content: flex-start; overflow-y: auto; gap: 14px; padding-bottom: 8px; }
  #board { --bw: calc(100vw - 28px); --m-top: 6px; }
  #room.view-3d #board { --bw: calc(100vw - 24px); --tilt: 30deg; --m-top: calc(var(--bw) * -0.1); --m-bottom: calc(var(--bw) * -0.08); }
  #board-wrap { perspective: 1100px; padding-top: 44px; }
  .view-controls { top: 0; }
  #center .action-box { display: none; }
  #center { padding: calc(2.5 * var(--cq, 1cqw)); }
  .center-logo { font-size: calc(6.4 * var(--cq, 1cqw)); }
  .log { max-width: none; }
  .tile { font-size: calc(1.6 * var(--cqt, var(--cq, 1cqw))); }
  .tile .price { font-size: calc(1.45 * var(--cqt, var(--cq, 1cqw))); }
  .dock { display: block; }
  .dock .action-box { max-width: none; padding: 16px; gap: 12px; }
  .board-overlay { position: fixed; inset: 60px 0 80px; }
  .brand span, .room-chip small, .top-actions .desktop-only { display: none; }
  .turn-pill > div { padding-right: 12px; font-size: 13px; }
  .top-actions .btn { padding: 8px 10px; }
  .mobile-nav { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(8px + var(--safe-bottom)); z-index: 40; padding: 6px; gap: 4px; }
  .mnav { flex: 1; position: relative; cursor: pointer; padding: 7px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; transition: color .2s, background .25s, border-color .25s; }
  .mnav .ico { font-size: 20px; line-height: 1; }
  .mnav .badge { position: absolute; top: 2px; right: calc(50% - 24px); }
  .home-wrap { grid-template-columns: 1fr; gap: 26px; padding: 20px 16px 140px; }
  .home-hero { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .tagline { margin-left: auto; margin-right: auto; font-size: 15px; }
  .feature-chips { justify-content: center; }
  .home-card { padding: 24px 20px; }
  .color-picker { gap: 8px; }
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal, .modal.wide { max-width: none; max-height: 92dvh; padding-bottom: var(--safe-bottom); }
  .trade-cols, .loan-grid { grid-template-columns: 1fr; }
  #toasts { top: auto; bottom: calc(90px + var(--safe-bottom)); left: 12px; right: 12px; align-items: center; }
}
@media (max-width: 420px) {
  .top-actions .btn { padding: 7px 8px; font-size: 13px; }
  .room-chip { padding: 6px 9px; }
  .brand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}