:root {
  --ink: #1f2533;
  --paper: #f6f0e1;
  --navy: #1d2b45;
  --gold: #d9b44a;
  --green: #1f8a4c;
  --blue: #2456b8;
  --red: #c0392b;
  --panel: rgba(20, 16, 13, 0.78);
  --panel-solid: #221b16;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f3ede0;
  --muted: #b9ae9a;
  --radius: 14px;
  --font: 'Avenir Next', 'Futura', 'Segoe UI', 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
  /* Text on the coloured deed bands and on the light pawn colours (white is under 3.8:1 on all of them). */
  --band-ink: #12151c;
  /* Native widgets (select lists, checkboxes, scrollbars, number spinners) follow the dark table. */
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* overscroll-behavior: a downward drag on a panel must not trigger the browser's pull-to-refresh mid-game. */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #17110d; color: var(--text); font-family: var(--font); }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
input[type='checkbox'] { accent-color: var(--gold); }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }

.overlay { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; }
#lobby { background: radial-gradient(ellipse at center, rgba(23, 17, 13, 0.25), rgba(10, 7, 5, 0.82)); padding: 16px; overflow-y: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 1.1; white-space: nowrap; color: var(--ink); background: var(--paper); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); transition: transform 0.08s, filter 0.15s, background 0.15s; }
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn .ico { flex-shrink: 0; }
.btn.primary { background: var(--gold); color: #2a1f05; }
.btn.secondary { background: rgba(255, 255, 255, 0.1); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.btn.secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); filter: none; }
.btn.green { background: var(--green); color: #fff; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.red { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); filter: none; }
.btn.danger { background: transparent; color: #ff9b8d; box-shadow: inset 0 0 0 1.5px rgba(192, 57, 43, 0.75); }
.btn.danger:hover:not(:disabled) { background: rgba(192, 57, 43, 0.16); filter: none; }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 5px; }
.btn.big { min-height: 52px; padding: 0 28px; font-size: 17px; }
kbd { font-family: inherit; font-size: 11.5px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-bottom-width: 2px; color: inherit; }
.btn.primary kbd { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.22); }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 16px; font-weight: 800; display: inline-grid; place-items: center; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
/* An action that has been sent and not answered yet. */
.btn.is-pending, .btn.is-pending:disabled { opacity: 0.6; cursor: progress; }
.btn.is-pending:hover:not(:disabled) { filter: none; }
.btn.is-pending:active:not(:disabled) { transform: none; }

/* ---------- keyboard focus ---------- */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, [role='button']:focus-visible, input[type='checkbox']:focus-visible,
.pcard:focus-visible, .prop-row .nm:focus-visible, .mini-deed:focus-visible, .deed-flip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Inside boxes that clip or scroll, the ring is drawn on the inside edge so it is never cut off. */
.tab:focus-visible, .tab-close:focus-visible, .seg button:focus-visible, .role-toggle button:focus-visible, .pcard:focus-visible { outline-offset: -2px; }
/* Where gold would blend in (the gold turn highlight, coloured or gold segments), the ring changes colour. */
.pcard:focus-visible, .role-toggle button.on:focus-visible { outline-color: var(--text); }
.seg button.on:focus-visible { outline-color: #2a1f05; }
/* Text fields show focus as a gold border with a soft ring. */
.input:focus-visible, #chat-form input:focus-visible, .link-box input:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 180, 74, 0.35); }
/* The dialog box itself only takes focus as a fallback (when it has nothing focusable): no ring around it. */
#modal-card:focus { outline: none; }

/* ---------- lobby ---------- */
.lobby-card { width: min(980px, 100%); background: var(--panel); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.brand { text-align: center; margin-bottom: 22px; }
.logo { display: inline-block; font-weight: 900; letter-spacing: 0.08em; font-size: clamp(30px, 6vw, 54px); color: var(--paper); background: var(--navy); padding: 8px 26px; border-radius: 14px; outline: 3px solid var(--gold); outline-offset: -9px; }
.tagline { color: var(--muted); margin-top: 12px; font-size: 15px; }
.lobby-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
@media (max-width: 760px) { .lobby-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.input { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 16px; outline: none; }
.input:focus { border-color: var(--gold); }
select.input option { background: var(--panel-solid); color: var(--text); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > .grow { flex: 1; min-width: 0; }
.panel { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.panel h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.room-code { font-size: 40px; font-weight: 900; letter-spacing: 0.25em; color: var(--gold); }
.lobby-players { display: flex; flex-direction: column; gap: 8px; }
.lp { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 9px 11px; }
.lp .name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp .tag { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.role-toggle { display: inline-flex; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.role-toggle button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; font-size: 12px; font-weight: 800; }
.role-toggle button.on.competitor { background: var(--green); color: #fff; }
.role-toggle button.on.monopolist { background: var(--blue); color: #fff; }
.role-toggle button:disabled { cursor: default; }
.seg { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; color: var(--text); padding: 8px 12px; font-size: 13px; font-weight: 700; }
.seg button.on { background: var(--gold); color: #2a1f05; }
.seg button:disabled { cursor: default; opacity: 0.7; }
.warn { color: #ffb4a6; font-size: 13px; margin-top: 10px; }
.ok { color: #9fe0b0; font-size: 13px; margin-top: 10px; }
.rules-mini { font-size: 13px; line-height: 1.5; color: var(--muted); }
/* A dialog body that shows a link to copy by hand (used when the clipboard is not available). */
.link-box { display: flex; flex-direction: column; gap: 8px; }
.link-box input { width: 100%; min-width: 0; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 11px 13px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace; font-size: 14px; text-overflow: ellipsis; }
.link-box .hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
#topbar > div { pointer-events: auto; display: flex; gap: 8px; align-items: center; background: var(--panel); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; }
.tb-logo { font-weight: 900; letter-spacing: 0.08em; font-size: 14px; color: var(--gold); padding: 0 6px; }
.chip { font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 5px 9px; color: var(--text); white-space: nowrap; }

#players { position: absolute; top: 64px; left: 10px; width: 250px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; }
.pcard { background: var(--panel); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 13px; padding: 9px 11px; display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 9px; align-items: center; transition: border-color 0.2s, box-shadow 0.2s; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.pcard.turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217, 180, 74, 0.35); }
.pcard.out { opacity: 0.45; }
.pawn-dot { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 900; }
/* The letter is dark on the three light pawn colours (matched by the colour in the inline style; .on-light does the same by class). */
.pawn-dot.on-light, .pawn-dot[style*='#2fa84f' i], .pawn-dot[style*='#7cc242' i], .pawn-dot[style*='#58a6ff' i] { color: var(--band-ink); }
.pcard .pname { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .pcash { font-weight: 900; font-size: 16px; color: #ffe08a; text-align: right; }
.pcard .pmeta { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.pcard .pprops { font-size: 11.5px; color: var(--muted); text-align: right; }
.status { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; }
.status.jail { background: #3c4658; }
.status.war { background: var(--red); }
.status.off { background: #6b5a3a; }
.role-badge { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; color: #fff; }
.role-badge.competitor { background: var(--green); }
.role-badge.monopolist { background: var(--blue); }

#actionbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(780px, calc(100vw - 20px)); background: var(--panel); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.ab { display: flex; gap: 14px; align-items: center; }
.ab-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ab-kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gold); margin-bottom: 3px; }
.ab-title { font-size: 18px; font-weight: 800; line-height: 1.2; display: flex; align-items: center; gap: 8px; }
.ab-sub { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.ab-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ab-primary { display: flex; gap: 8px; flex-wrap: wrap; }
.ab-primary:empty { display: none; }
.ab-tools { display: flex; gap: 6px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--line); }
.ab-primary:empty + .ab-tools { border-left: 0; padding-left: 0; }
/* A quiet one-line remark in the action bar, e.g. "Waiting for the host to start a new game". */
.ab-note { align-self: center; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-note .ico { vertical-align: -4px; margin-right: 6px; }
#actionbar .btn { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
#actionbar .btn.tool { padding: 0 12px; gap: 7px; }
.btn.tool { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.tool:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); filter: none; }
.btn.tool .ico { color: var(--muted); }
.btn.tool .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.btn.tool.on { background: rgba(217, 180, 74, 0.14); box-shadow: inset 0 0 0 1.5px rgba(217, 180, 74, 0.6); }
.btn.tool.on .ico { color: var(--gold); }
.btn.tool.attention { box-shadow: inset 0 0 0 1.5px rgba(255, 155, 141, 0.8); animation: nudge 1.6s ease-in-out infinite; }
.btn.tool.attention .count { background: var(--red); color: #fff; }
@keyframes nudge { 50% { box-shadow: inset 0 0 0 1.5px rgba(255, 155, 141, 0.8), 0 0 0 4px rgba(192, 57, 43, 0.25); } }
.pawn-dot.sm { width: 18px; height: 18px; grid-row: auto; flex-shrink: 0; }
.mini-deed { all: unset; box-sizing: border-box; cursor: pointer; width: 78px; height: 104px; border-radius: 8px; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; text-align: center; padding: 5px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); transition: transform 0.15s; }
.mini-deed:hover { transform: translateY(-3px) rotate(-1.5deg); }
.mini-deed .hd { display: flex; flex-direction: column; gap: 2px; color: var(--band-ink); border-radius: 4px; padding: 6px 3px; line-height: 1.12; border: 1.5px solid rgba(0, 0, 0, 0.5); }
/* Only the navy transport band is dark enough for white text. */
.mini-deed .hd.on-dark, .mini-deed .hd[style*='#1d2b45' i] { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.mini-deed .k { font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mini-deed .n { font-size: 11px; font-weight: 800; }
.mini-deed .pr { margin-top: auto; font-size: 15px; font-weight: 800; padding-bottom: 3px; }

/* ---------- camera button: one tap cycles Follow turn → My seat → Top view ---------- */
.cam-btn { height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 9px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.cam-btn:hover { background: rgba(255, 255, 255, 0.16); }
.cam-btn:active { transform: scale(0.96); }
.cam-btn .ico { color: var(--gold); flex: none; }
.cam-btn .cam-label { min-width: 68px; text-align: left; }
.cam-dots { display: inline-flex; gap: 3px; }
.cam-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: background 0.2s, transform 0.2s; }
.cam-dots i.on { background: var(--gold); transform: scale(1.2); }
.cam-btn.flash { animation: cam-flash 0.5s ease-out; }
@keyframes cam-flash { 0% { background: rgba(217, 180, 74, 0.38); } }

/* ---------- settings menu ---------- */
#btn-settings .ico { transition: transform 0.35s ease; }
#btn-settings.on { background: rgba(217, 180, 74, 0.2); color: var(--gold); }
#btn-settings.on .ico { transform: rotate(67.5deg); }
#settings-menu { position: absolute; top: 60px; right: 10px; width: 292px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.55); z-index: 6; transform-origin: top right; animation: menu-in 0.16s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.sm-title { font-weight: 800; font-size: 15px; padding: 4px 8px 6px; }
.sm-section { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); padding: 10px 8px 6px; }
.sm-views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sm-view { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 6px 9px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); font-weight: 700; font-size: 13px; }
.sm-view:hover { background: rgba(255, 255, 255, 0.1); }
.sm-view .ico { color: var(--muted); }
.sm-view.on { background: rgba(217, 180, 74, 0.16); border-color: rgba(217, 180, 74, 0.65); }
.sm-view.on .ico { color: var(--gold); }
.sm-view kbd { font-size: 10.5px; color: var(--muted); }
.sm-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 8px; border: 0; background: transparent; color: var(--text); border-radius: 10px; font-size: 14px; font-weight: 600; text-align: left; }
.sm-item:hover { background: rgba(255, 255, 255, 0.07); }
.sm-item .ico { color: var(--muted); flex-shrink: 0; }
.sm-label { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sm-label small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.sm-item.danger, .sm-item.danger .ico { color: #ff9b8d; }
.sm-sep { height: 1px; background: var(--line); margin: 8px 4px; }
.switch { width: 36px; height: 21px; border-radius: 11px; background: rgba(255, 255, 255, 0.18); position: relative; flex-shrink: 0; transition: background 0.2s; }
.switch::after { content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 0.2s; }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(15px); }

#sidepanel { position: absolute; top: 64px; right: 10px; width: 310px; height: min(46vh, 420px); background: var(--panel); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tab { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 9px; font-weight: 800; font-size: 12.5px; position: relative; }
.tab.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }
.badge { background: var(--red); color: #fff; border-radius: 9px; font-size: 10px; padding: 1px 6px; margin-left: 4px; }
.tabbody { flex: 1; overflow-y: auto; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; }
#tab-chat { display: flex; flex-direction: column; padding: 0; }
#chat-list { flex: 1; overflow-y: auto; padding: 8px 10px; }
#chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
#chat-form input { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 9px; }
#chat-form button { border: 0; border-radius: 8px; background: var(--gold); color: #2a1f05; font-weight: 800; padding: 0 12px; }
.log-line { padding: 3px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); }
.log-line.alert { color: #ffb4a6; }
.log-line.card { color: #ffe08a; }
.log-line.trade { color: #a8d5ff; }
.log-line.system { color: var(--gold); font-weight: 700; }
.chat-line .who { font-weight: 800; }
.chat-line.sys { color: var(--muted); font-style: italic; }

#propspanel { position: absolute; right: 10px; top: 64px; width: 360px; max-height: calc(100vh - 200px); min-height: 160px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; z-index: 2; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
@media (min-width: 1500px) {
  #propspanel { top: auto; bottom: 14px; max-height: calc(100vh - 560px); background: var(--panel); backdrop-filter: blur(10px); }
}
.pp-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 13px; }
.pp-body { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.prop-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; background: rgba(255, 255, 255, 0.05); border-radius: 9px; padding: 7px 8px; }
.prop-row .sw { width: 8px; align-self: stretch; border-radius: 4px; }
.prop-row .nm { font-weight: 700; font-size: 13px; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; font-family: inherit; text-align: left; }
.prop-row .nm:hover { text-decoration: underline; }
.prop-row .sub { font-size: 11px; color: var(--muted); }
.prop-row .acts { display: flex; gap: 4px; }
.prop-row.mort { opacity: 0.65; }
.lvl { letter-spacing: 1px; }

/* ---------- modal ---------- */
#modal { background: rgba(5, 3, 2, 0.6); z-index: 40; padding: 16px; }
.modal-card { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.modal-card.wide { width: min(860px, 100%); }
.modal-card h2 { margin: 0 0 12px; font-size: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* ---------- title deed: two-sided flip card ---------- */
.modal-card.narrow { width: min(400px, 100%); }
.modal-card.deed-modal { width: min(400px, 100%); padding: 18px; }
.modal-actions.center { justify-content: center; }
.modal-actions.spread { justify-content: space-between; margin-top: 12px; }
.deed-stage { perspective: 1400px; display: flex; justify-content: center; }
.deed-flip { position: relative; width: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1); cursor: pointer; outline: none; }
.deed-flip.flipped { transform: rotateY(180deg); }
.deed-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.deed-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; }
.dd-band { background: var(--c); color: var(--band-ink); border-radius: 8px; border: 2px solid rgba(0, 0, 0, 0.55); padding: 10px 12px 11px; text-align: center; }
.dd-band .dd-kicker, .dd-band .dd-city { opacity: 1; }
/* Only the navy transport band is dark enough for white text (matched by its colour in the inline style; .on-dark does the same by class). */
.dd-band.on-dark, .dd-band[style*='#1d2b45' i] { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.dd-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.dd-name { font-size: 23px; font-weight: 800; line-height: 1.15; margin-top: 2px; }
.dd-city { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.92; margin-top: 3px; }
.dd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.dd-stat { background: rgba(31, 37, 51, 0.06); border-radius: 8px; padding: 6px 8px; text-align: center; }
.dd-stat span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b6457; }
.dd-stat b { font-size: 17px; font-weight: 800; }
.dd-table { font-variant-numeric: tabular-nums; }
.dd-row { display: grid; grid-template-columns: 1fr 84px 88px; align-items: center; column-gap: 6px; padding: 5px 8px; font-size: 13.5px; border-bottom: 1px dashed rgba(31, 37, 51, 0.16); border-radius: 6px; }
.dd-row:last-child { border-bottom: 0; }
.dd-row .lbl { font-weight: 500; color: #3d3a33; }
.dd-row .v { text-align: right; font-weight: 700; }
.dd-row .v.c { color: #14703b; }
.dd-row .v.m { color: #1d47a0; }
.dd-row .na { font-weight: 500; color: rgba(31, 37, 51, 0.3); }
.dd-cols { border-bottom: 1.5px solid rgba(31, 37, 51, 0.25); padding-bottom: 6px; }
.dd-cols .v { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.dd-row.cur { background: rgba(217, 180, 74, 0.34); border-bottom-color: transparent; }
.dd-row.cur .v.own { text-decoration: underline 2px; text-underline-offset: 3px; }
.dd-note { font-size: 11.5px; line-height: 1.4; color: #6b6457; text-align: center; margin: 8px 4px 0; }
.dd-hint { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 600; color: #6b6457; margin-top: 6px; }
.deed-back { padding: 10px; }
.dd-back-frame { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 18px; overflow: hidden; border: 2.5px solid var(--c); border-radius: 9px; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(31, 37, 51, 0.03) 10px 20px); }
.dd-back-frame::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 9px; background: var(--c); }
.dd-back-frame .dd-kicker { color: #6b6457; opacity: 1; }
.dd-back-frame .dd-name { font-size: 22px; }
.dd-back-frame .dd-city { color: #6b6457; opacity: 1; }
.dd-mort { display: flex; flex-direction: column; align-items: center; margin: 22px 0 12px; }
.dd-mort span { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6457; }
.dd-mort b { font-size: 46px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.dd-mort small, .dd-redeem small { font-size: 12px; color: #6b6457; }
.dd-redeem { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; background: rgba(31, 37, 51, 0.06); border-radius: 8px; padding: 7px 12px; font-size: 13.5px; }
.dd-redeem b { font-size: 16px; }
.dd-back-frame p { font-size: 12px; line-height: 1.45; color: #4f4a40; margin: 16px 0 0; }
.dd-stamp { position: absolute; top: 14px; right: 10px; transform: rotate(12deg); border: 3px solid rgba(192, 57, 43, 0.8); color: rgba(192, 57, 43, 0.85); border-radius: 7px; padding: 3px 10px; font-size: 15px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; }
.deed-status { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ds-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ds-dot.empty { border: 2px solid var(--muted); }
.ds-right { margin-left: auto; color: var(--muted); text-align: right; }
.ds-right b { color: var(--text); }
.ds-right.bad { color: #ff9b8d; }
.deed-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.deed-actions .btn { width: 100%; padding: 0 12px; font-size: 14px; }
.deed-actions .btn.green, .deed-actions .btn:only-child, .deed-actions .btn.green + .btn:last-child { grid-column: 1 / -1; }

/* ---------- confirm ---------- */
.confirm { text-align: center; padding: 4px; }
.confirm-ico { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: rgba(192, 57, 43, 0.16); color: #ff9b8d; }
.confirm p { color: var(--muted); margin: 0; }

/* ---------- lobby roles panel ---------- */
.roles-panel { display: flex; flex-direction: column; gap: 10px; }
.roles-panel h3 { margin-bottom: 2px !important; }
.role-card { border-radius: 12px; padding: 12px 14px; border: 1px solid; }
.role-card.competitor { background: rgba(47, 168, 79, 0.1); border-color: rgba(47, 168, 79, 0.35); }
.role-card.monopolist { background: rgba(47, 111, 219, 0.12); border-color: rgba(47, 111, 219, 0.4); }
.rc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rc-name { font-weight: 800; font-size: 15.5px; }
.rc-sub { font-size: 12px; color: var(--muted); }
.role-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.role-card li { position: relative; padding-left: 16px; }
.role-card li::before { content: ''; position: absolute; left: 3px; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; }
.role-card.competitor li::before { background: #7fdc9c; }
.role-card.monopolist li::before { background: #8fb4ff; }
.rules-btn { margin-top: auto; width: 100%; background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1.5px rgba(217, 180, 74, 0.55); }
.rules-btn:hover:not(:disabled) { background: rgba(217, 180, 74, 0.12); filter: none; }

/* ---------- rules popup ---------- */
.modal-card.rules-modal { width: min(920px, 100%); height: min(700px, calc(100vh - 32px)); padding: 0; display: flex; overflow: hidden; }
.rules { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.rules-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(217, 180, 74, 0.09), transparent); }
.rules-kicker { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.rules-head h2 { margin: 4px 0 0 !important; font-size: 22px; }
.rules-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr; }
.rules-nav { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; border-right: 1px solid var(--line); overflow-y: auto; }
.rules-nav button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; padding: 9px 10px; border-radius: 9px; text-align: left; white-space: nowrap; }
.rules-nav button:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.rules-nav button.on { background: rgba(217, 180, 74, 0.15); color: var(--text); }
.rules-nav button.on .ico { color: var(--gold); }
.rules-content { overflow-y: auto; padding: 18px 24px 24px; font-size: 14.5px; line-height: 1.55; }
.rules-content h3 { margin: 0 0 12px; font-size: 19px; }
.rules-content h4 { margin: 0 0 3px; font-size: 15px; }
.rules-content p { margin: 0; }
.rules-content a { color: var(--gold); }
.rules-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.rules-count { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.r-lead { font-size: 15.5px; margin-bottom: 16px !important; }
.r-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.r-role { border-radius: 14px; padding: 14px 16px; border: 1px solid; }
.r-role.competitor { background: rgba(47, 168, 79, 0.1); border-color: rgba(47, 168, 79, 0.35); }
.r-role.monopolist { background: rgba(47, 111, 219, 0.12); border-color: rgba(47, 111, 219, 0.4); }
.r-role-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.r-role-name { font-weight: 800; font-size: 17px; }
.r-role-sub { font-size: 12.5px; color: var(--muted); }
.r-role ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.r-role li { position: relative; padding-left: 16px; }
.r-role li::before { content: ''; position: absolute; left: 3px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; }
.r-role.competitor li::before { background: #7fdc9c; }
.r-role.monopolist li::before { background: #8fb4ff; }
.r-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.r-fact { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.r-fact b { display: block; font-size: 20px; color: var(--gold); }
.r-fact span { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.r-note { margin-top: 14px !important; font-size: 13px; color: var(--muted); padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(217, 180, 74, 0.07); border-radius: 0 8px 8px 0; }
.r-note .ico { vertical-align: -2px; }
.r-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.r-steps li { display: flex; gap: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.r-steps p { color: #ddd3c0; font-size: 14px; }
.r-num { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #2a1f05; font-weight: 900; display: grid; place-items: center; flex-shrink: 0; }
.r-steps ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: #ddd3c0; font-size: 14px; }
.cmp { display: flex; flex-direction: column; gap: 6px; }
.cmp-row { display: grid; grid-template-columns: 172px 1fr 1fr; gap: 6px; }
.cmp-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; padding: 8px 4px; }
.cmp-label .ico { color: var(--muted); flex-shrink: 0; }
.cmp-cell { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; }
.cmp-cell.c { background: rgba(47, 168, 79, 0.1); }
.cmp-cell.m { background: rgba(47, 111, 219, 0.13); }
.cmp-cell small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.cmp-head .cmp-cell { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; background: transparent; font-weight: 800; font-size: 14px; padding-bottom: 2px; }
.cmp-head .cmp-cell.c { color: #7fdc9c; }
.cmp-head .cmp-cell.m { color: #8fb4ff; }
.houses { display: inline-flex; align-items: flex-end; gap: 2px; }
.houses .arrow { align-self: center; margin: 0 4px; font-weight: 700; color: var(--muted); }
.r-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r-tile { display: flex; gap: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.r-tile-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; flex-shrink: 0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.r-tile p { font-size: 13.5px; color: #ddd3c0; }
.r-callout { display: flex; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(192, 57, 43, 0.12); border: 1px solid rgba(192, 57, 43, 0.4); }
.r-callout > .ico { color: #ff9b8d; flex-shrink: 0; }
.r-callout p { font-size: 14px; color: #ddd3c0; }
.r-wins { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.r-win { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.r-win-badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; background: var(--navy); outline: 2px solid var(--gold); outline-offset: -5px; color: var(--gold); font-weight: 900; font-size: 18px; }
.r-win p { font-size: 13.5px; color: #ddd3c0; }
.r-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.r-key { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.r-key .k, .r-key kbd { min-width: 96px; text-align: center; flex-shrink: 0; }
.r-key .k { font-weight: 800; font-size: 12.5px; color: var(--gold); }

/* trade */
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .trade-grid { grid-template-columns: 1fr; } }
.trade-col { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px; }
.trade-col h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.check { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; }
.check .sw { width: 10px; height: 18px; border-radius: 3px; }
.check.disabled { opacity: 0.45; }
.offer { background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 12px; margin-bottom: 10px; font-size: 14px; }
.standings td, .standings th { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.standings { width: 100%; border-collapse: collapse; }
/* Wrap a wide table in this so it scrolls sideways inside the dialog instead of widening it. */
.table-scroll { max-width: 100%; overflow-x: auto; }

#tooltip { position: fixed; z-index: 30; pointer-events: none; background: rgba(15, 11, 8, 0.92); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; max-width: 260px; }
#tooltip b { font-size: 13.5px; }
#toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--panel-solid); border: 1px solid var(--line); border-left: 4px solid var(--gold); padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: toast-in 0.25s ease-out; }
.toast.error { border-left-color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
#conn { position: fixed; bottom: 14px; left: 14px; z-index: 60; background: var(--red); padding: 8px 14px; border-radius: 10px; font-weight: 800; }

@media (max-width: 1100px) {
  #sidepanel { height: 34vh; width: 270px; }
  #propspanel { width: 320px; }
}
@media (max-width: 860px) {
  .rules-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rules-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; }
  .rules-nav button { flex-shrink: 0; padding: 7px 10px; font-size: 13px; }
  .r-facts { grid-template-columns: 1fr 1fr; }
  .r-wins { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rules-content { padding: 16px; }
  .r-roles, .r-tiles, .r-keys { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-label { grid-column: 1 / -1; padding: 6px 2px 0; }
  .cmp-head .cmp-label { display: none; }
  .rules-count { display: none; }
  .rules-foot .btn { padding: 0 14px; font-size: 14px; }
  .modal-card.rules-modal { height: calc(100vh - 32px); }
}
/* ---------- shared bits for the phone layout ---------- */
.phone-only, .tab-close, .pjail { display: none; }
.btn.tool .count.alert { background: var(--red); color: #fff; }
.btn.tool .count[hidden] { display: none !important; }
#recenter { position: absolute; right: 12px; bottom: calc(var(--ab-h, 160px) + 12px); z-index: 1; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(217, 180, 74, 0.6); border-radius: 20px; background: var(--panel-solid); color: var(--gold); font-weight: 800; font-size: 13.5px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); animation: menu-in 0.2s ease-out; }
.cash-fx { position: fixed; z-index: 45; pointer-events: none; transform: translate(-100%, -50%); font-weight: 900; font-size: 15px; padding: 2px 8px; border-radius: 8px; animation: cash-float 1.5s ease-out forwards; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.cash-fx.up { color: #9ff0b8; background: rgba(31, 138, 76, 0.35); }
.cash-fx.down { color: #ffb4a6; background: rgba(192, 57, 43, 0.35); }
@keyframes cash-float { 0% { opacity: 0; transform: translate(-100%, -20%); } 15% { opacity: 1; transform: translate(-100%, -50%); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-100%, -160%); } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
button, .pcard, .mini-deed { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Touch screens: no hover tooltips or keyboard hints. */
@media (hover: none) {
  #tooltip { display: none !important; }
  .btn kbd, .sm-view kbd { display: none; }
}

/* ---------- phones (portrait) and small landscape screens ----------
   Everything here is sized in --u, a unit that follows the screen: 1px on a 390px-wide phone,
   smaller on narrow phones, larger on big ones (and kept compact when a phone is held sideways). */
@media (max-width: 760px), (max-height: 520px) {
  /* --tap: nothing you tap is smaller than this, however small --u gets.
     --top-gap: where the row under the top bar starts (the bar is at least one --tap button tall). */
  :root { --u: clamp(0.88px, min(0.2564vw, 0.2vh), 1.14px); --tap: 44px; --top-gap: calc(12px + max(52 * var(--u), var(--tap) + 12 * var(--u)) + env(safe-area-inset-top)); }
  .phone-only { display: inline-flex; }
  .tb-logo, #tb-mode { display: none; }
  #topbar { top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); }
  #topbar > div { padding: calc(5 * var(--u)) calc(6 * var(--u)); border-radius: calc(12 * var(--u)); }
  .chip { font-size: calc(13 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); }
  .icon-btn { width: max(var(--tap), calc(40 * var(--u))); height: max(var(--tap), calc(40 * var(--u))); }
  #btn-settings .ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  /* Phones: icon + dots. After a switch the mode's name pops up as a tag under the button, so the
     top bar never changes width (it is full on narrow phones in timed games). */
  #topbar { z-index: 5; }
  .cam-btn { position: relative; height: max(var(--tap), calc(40 * var(--u))); gap: calc(7 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(13 * var(--u)); }
  .cam-btn .ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .cam-btn .cam-label { display: none; position: absolute; top: calc(100% + 10 * var(--u)); right: calc(-6 * var(--u)); min-width: 0; padding: calc(7 * var(--u)) calc(11 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--panel-solid); border: 1px solid rgba(217, 180, 74, 0.55); color: var(--gold); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); pointer-events: none; }
  .cam-btn.flash .cam-label { display: block; animation: menu-in 0.16s ease-out; }
  .cam-dots { gap: calc(3.5 * var(--u)); }
  .cam-dots i { width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); }
  #settings-menu { top: var(--top-gap); right: 8px; width: min(calc(310 * var(--u)), calc(100vw - 16px)); max-height: calc(100dvh - var(--ab-h, 160px) - var(--top-gap) - 8px); overflow-y: auto; padding: calc(10 * var(--u)); }
  .sm-item[data-pref='log'] { display: none; } /* phones open the log from the action bar */
  .sm-title { font-size: calc(15 * var(--u)); }
  .sm-section { font-size: calc(11 * var(--u)); }
  .sm-view { font-size: calc(12.5 * var(--u)); padding: calc(10 * var(--u)) calc(4 * var(--u)) calc(9 * var(--u)); }
  .sm-item { min-height: max(var(--tap), calc(46 * var(--u))); font-size: calc(14 * var(--u)); }
  .sm-label small { font-size: calc(11.5 * var(--u)); }

  /* the game log & chat and the property list open as sheets above the action bar */
  #sidepanel { display: none; }
  #sidepanel.sheet-open { display: flex; position: fixed; left: 8px; right: 8px; top: auto; width: auto; bottom: calc(var(--ab-h, 160px) + 8px); height: min(52dvh, calc(440 * var(--u))); max-height: calc(100dvh - var(--ab-h, 160px) - var(--top-h, 110px) - 16px); z-index: 3; background: var(--panel-solid); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); animation: sheet-up 0.2s ease-out; }
  .tab-close { display: grid; place-items: center; width: max(var(--tap), calc(44 * var(--u))); border: 0; background: transparent; color: var(--muted); }
  .tab { min-height: var(--tap); padding: calc(12 * var(--u)) calc(9 * var(--u)); font-size: calc(13.5 * var(--u)); }
  .tabbody { font-size: calc(13.5 * var(--u)); }
  #chat-form input { font-size: 16px; padding: 9px 10px; } /* 16px stops iOS zooming in on focus */
  #chat-form button { min-height: var(--tap); font-size: calc(14 * var(--u)); }
  #propspanel { position: fixed; left: 8px; right: 8px; top: auto; width: auto; bottom: calc(var(--ab-h, 160px) + 8px); min-height: 0; max-height: calc(100dvh - var(--ab-h, 160px) - var(--top-h, 110px) - 16px); z-index: 3; background: var(--panel-solid); animation: sheet-up 0.2s ease-out; }
  .pp-head { padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
  .pp-body { gap: calc(6 * var(--u)); padding: calc(8 * var(--u)); }
  .prop-row { padding: calc(9 * var(--u)); gap: calc(8 * var(--u)); }
  .prop-row .nm { position: relative; font-size: calc(14 * var(--u)); }
  .prop-row .nm::after { content: ''; position: absolute; inset: -12px 0; } /* a taller tap area for the name, without moving anything */
  .prop-row .sub { font-size: calc(12 * var(--u)); }
  /* Sell, build and mortgage sit side by side and cost money when mis-tapped: full-size targets, wider gaps.
     On the narrowest phones the buttons wrap under each other instead of squeezing the name out. */
  .prop-row .acts { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .prop-row .btn.small { min-width: var(--tap); min-height: var(--tap); padding: 0 calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); }
  .rules-mini { font-size: calc(13 * var(--u)); }

  /* action bar: docked to the bottom, thumb-sized buttons, tools as icons in the corner */
  #actionbar { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; border-bottom: 0; padding: calc(12 * var(--u)) calc(14 * var(--u) + env(safe-area-inset-right)) calc(12 * var(--u) + env(safe-area-inset-bottom)) calc(14 * var(--u) + env(safe-area-inset-left)); }
  .ab { gap: calc(10 * var(--u)); align-items: flex-start; }
  .ab-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'text tools' 'primary primary'; gap: calc(10 * var(--u)); }
  .ab-main:has(.ab-primary:empty) { grid-template-areas: 'text tools'; }
  .ab-text { grid-area: text; min-width: 0; }
  .ab-row { display: contents; }
  .ab-primary { grid-area: primary; display: flex; gap: calc(8 * var(--u)); flex-wrap: nowrap; }
  .ab-primary .btn { flex: 1 1 0; min-width: 0; }
  .ab-primary .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ab-primary .btn.view-deed { flex: 0 0 max(var(--tap), calc(48 * var(--u))); padding: 0; }
  .ab-primary .btn.view-deed span { display: none; }
  .ab-primary .ab-note { flex: 1 1 0; }
  .ab-note { font-size: calc(13 * var(--u)); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ab-tools { grid-area: tools; align-self: start; margin: 0; padding: 0; border: 0; gap: calc(6 * var(--u)); }
  #actionbar .btn.tool { position: relative; width: max(var(--tap), calc(42 * var(--u))); min-height: max(var(--tap), calc(42 * var(--u))); padding: 0; }
  .ab-tools .lbl { display: none; }
  .ab-tools .count { position: absolute; top: calc(-6 * var(--u)); right: calc(-6 * var(--u)); min-width: calc(19 * var(--u)); height: calc(19 * var(--u)); padding: 0 calc(5 * var(--u)); font-size: calc(10.5 * var(--u)); box-shadow: 0 0 0 2px var(--panel-solid); }
  .ab-kicker { font-size: calc(10.5 * var(--u)); overflow-wrap: anywhere; }
  .ab-title { font-size: calc(17 * var(--u)); gap: calc(7 * var(--u)); }
  .ab-title > span { min-width: 0; overflow-wrap: anywhere; } /* a long name wraps instead of running under the tool buttons */
  .ab-sub { font-size: calc(13 * var(--u)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #actionbar .btn { min-height: max(var(--tap), calc(48 * var(--u))); padding: 0 calc(12 * var(--u)); font-size: calc(15 * var(--u)); border-radius: calc(12 * var(--u)); gap: calc(7 * var(--u)); }
  #actionbar .ico { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .mini-deed { width: calc(56 * var(--u)); height: calc(76 * var(--u)); padding: calc(4 * var(--u)); }
  .mini-deed .k { font-size: calc(7.5 * var(--u)); }
  .mini-deed .n { font-size: calc(9 * var(--u)); }
  .mini-deed .pr { font-size: calc(12.5 * var(--u)); }
  .btn { min-height: var(--tap); font-size: calc(15 * var(--u)); }
  .btn.big { min-height: max(var(--tap), calc(48 * var(--u))); padding: 0 calc(22 * var(--u)); font-size: calc(16 * var(--u)); }
  #recenter { min-height: max(var(--tap), calc(40 * var(--u))); font-size: calc(13.5 * var(--u)); padding: 0 calc(14 * var(--u)); }
  /* "Reconnecting…" sits just above the docked action bar instead of on top of its buttons, and never takes a tap. */
  #conn { left: calc(10px + env(safe-area-inset-left)); bottom: calc(var(--ab-h, env(safe-area-inset-bottom)) + 10px); padding: 6px 12px; font-size: calc(13 * var(--u)); pointer-events: none; }

  /* players: compact chips */
  .pcard { min-height: var(--tap); grid-template-columns: calc(20 * var(--u)) auto; gap: 0 calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(11 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(12 * var(--u)); }
  .pcard .pmeta, .pcard .pprops { display: none; }
  .pcard .pname { font-size: calc(12.5 * var(--u)); max-width: calc(104 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u)); }
  .pcard .pcash { font-size: calc(13.5 * var(--u)); text-align: left; }
  .pjail { display: inline-grid; place-items: center; color: #ffb4a6; flex-shrink: 0; }
  .pawn-dot { width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(10 * var(--u)); }
  .cash-fx { font-size: calc(15 * var(--u)); }

  /* dialogs slide up from the bottom like native sheets */
  #modal { place-items: end center; padding: 0; }
  .modal-card, .modal-card.wide, .modal-card.narrow, .modal-card.deed-modal { width: 100%; max-width: 560px; max-height: 92dvh; border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0; border-bottom: 0; padding: calc(18 * var(--u)) calc(16 * var(--u) + env(safe-area-inset-right)) calc(18 * var(--u) + env(safe-area-inset-bottom)) calc(16 * var(--u) + env(safe-area-inset-left)); font-size: calc(14.5 * var(--u)); animation: sheet-up 0.22s ease-out; }
  .modal-card h2 { font-size: calc(19 * var(--u)); }
  .modal-card.rules-modal { height: 92dvh; padding: 0; }
  .rules-head { padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u)); }
  .rules-head h2 { font-size: calc(20 * var(--u)); }
  .rules-content { font-size: calc(14 * var(--u)); }
  .rules-content h3 { font-size: calc(18 * var(--u)); }
  .rules-content h4 { font-size: calc(14.5 * var(--u)); }
  .rules-nav button { min-height: var(--tap); font-size: calc(13 * var(--u)); }
  .r-role li, .r-steps p, .r-steps ul, .r-tile p, .r-win p, .r-callout p, .cmp-cell, .cmp-label, .r-key { font-size: calc(13.5 * var(--u)); }
  .rules-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .modal-actions .btn { min-height: max(var(--tap), calc(46 * var(--u))); }
  .offer, .check { font-size: calc(14 * var(--u)); }
  /* trade lists: each property is a full-height row with a checkbox big enough to see */
  .check { min-height: var(--tap); padding: 2px 0; }
  .check input { flex: none; width: 20px; height: 20px; margin: 0; }
  .link-box input { min-height: var(--tap); font-size: 16px; }
  .link-box .hint { font-size: calc(13 * var(--u)); }

  /* the deed card scales as a whole with the screen */
  .deed-flip { max-width: calc(360 * var(--u)); margin: 0 auto; }
  .deed-face { padding: calc(12 * var(--u)); }
  .dd-band { padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u)); }
  .dd-kicker { font-size: calc(10 * var(--u)); }
  .dd-name { font-size: calc(22 * var(--u)); }
  .dd-city { font-size: calc(11.5 * var(--u)); }
  .dd-stats { gap: calc(8 * var(--u)); margin: calc(10 * var(--u)) 0 calc(8 * var(--u)); }
  .dd-stat span { font-size: calc(10 * var(--u)); }
  .dd-stat b { font-size: calc(16.5 * var(--u)); }
  .dd-row { grid-template-columns: 1fr calc(70 * var(--u)) calc(78 * var(--u)); padding: calc(5 * var(--u)) calc(6 * var(--u)); font-size: calc(13.5 * var(--u)); column-gap: calc(5 * var(--u)); }
  .dd-cols .v { font-size: calc(9.5 * var(--u)); }
  .dd-note { font-size: calc(11.5 * var(--u)); }
  .dd-hint { font-size: calc(11 * var(--u)); }
  .dd-back-frame { padding: calc(16 * var(--u)); }
  .dd-mort b { font-size: calc(44 * var(--u)); }
  .dd-back-frame p, .dd-redeem { font-size: calc(12.5 * var(--u)); }
  .deed-status { font-size: calc(13.5 * var(--u)); }
  .deed-actions .btn { font-size: calc(14 * var(--u)); }

  #toasts { top: calc(var(--top-h, 100px) + 8px); width: calc(100vw - 24px); }
  .toast { max-width: 100%; font-size: calc(13.5 * var(--u)); }

  /* lobby */
  .lobby-card { padding: calc(18 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); }
  .lobby-grid { gap: calc(14 * var(--u)); }
  .logo { font-size: calc(27 * var(--u)); letter-spacing: 0.05em; padding: calc(8 * var(--u)) calc(16 * var(--u)); outline-offset: calc(-7 * var(--u)); }
  .tagline { font-size: calc(13.5 * var(--u)); }
  .panel { padding: calc(14 * var(--u)); }
  .input { min-height: var(--tap); font-size: 16px; }
  #lobby .btn.small { min-height: 40px; }
  .field label, .panel h3 { font-size: calc(11.5 * var(--u)); }
  .rules-mini, .role-card ul { font-size: calc(13 * var(--u)); }
  .rc-name { font-size: calc(15 * var(--u)); }
  .room-code { font-size: calc(32 * var(--u)); }
  .lp { flex-wrap: wrap; }
  .lp .name { font-size: calc(14 * var(--u)); }
  .role-toggle button { min-height: var(--tap); padding: calc(9 * var(--u)) calc(11 * var(--u)); font-size: calc(12 * var(--u)); }
  .seg { flex-wrap: wrap; }
  .seg button { min-width: var(--tap); min-height: var(--tap); padding: calc(10 * var(--u)) calc(12 * var(--u)); font-size: calc(13 * var(--u)); }
}

/* portrait phones: players strip under the top bar */
@media (max-width: 760px) {
  #players { top: var(--top-gap); left: 8px; right: 8px; width: auto; max-height: none; flex-direction: row; gap: calc(6 * var(--u)); overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  #players::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .ab.has-thumb .mini-deed { display: none; }
  #lobby { padding: 10px; }
  /* Lobby player rows take two lines: pawn and name, then the role switch (and the host's remove button).
     On one line the switch and a full-size remove button leave no room for the name. */
  .lp .name { flex: 1 1 calc(100% - 48px); }
  .role-toggle, .role-toggle button { flex: 1; }
  /* Final standings: tighter cells, no Role column (third column, or any cell marked .col-role), names may break. */
  .standings th, .standings td { padding: 6px 4px; }
  .standings th:nth-child(3), .standings td:nth-child(3), .standings .col-role { display: none; }
  .standings td:nth-child(2) { overflow-wrap: anywhere; }
}
/* the narrowest phones: the top bar holds a room chip, a timer chip, the camera button and a full-size settings button */
@media (max-width: 340px) {
  #topbar { gap: 6px; }
  #topbar > div { gap: 5px; }
  .chip { padding-left: calc(7 * var(--u)); padding-right: calc(7 * var(--u)); }
}

/* small landscape screens (phones turned sideways): a compact column of players on the left */
@media (max-height: 520px) and (min-width: 761px) {
  #players { top: var(--top-gap); width: calc(170 * var(--u)); max-height: calc(100dvh - var(--ab-h, 120px) - var(--top-gap) - 8px); gap: 5px; }
  #actionbar { left: 50%; right: auto; width: min(640px, calc(100vw - 210px)); transform: translateX(-50%); padding-top: calc(10 * var(--u)); }
  .ab-sub { -webkit-line-clamp: 1; }
  .ab-kicker { display: none; }
  #actionbar .btn { min-height: max(var(--tap), calc(44 * var(--u))); }
}

/* ---------- reduced motion: no pulsing, sliding or flipping in the HUD ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .btn.tool.attention { animation: none !important; } /* the red ring stays; it just stops pulsing */
  .deed-flip { transition: none !important; } /* the deed still turns over, in one step */
  .mini-deed:hover { transform: none; }
  /* A money change still shows next to the player for its usual time; it does not float away. */
  .cash-fx { animation: none !important; opacity: 1; }
}

/* ---------- picked player (click a player chip): the chip's ring and the pill above the action bar ----------
   See UI.pickPlayer / UI.renderFocus in ui.js. The pill sits on the line of the "Follow turn" button
   (#recenter), centred, and like it stays clear of the action bar through --ab-h. */
.pcard.sel { border-color: #9fd8ff; box-shadow: 0 0 0 2px rgba(159, 216, 255, 0.6); background: linear-gradient(rgba(159, 216, 255, 0.13), rgba(159, 216, 255, 0.13)), var(--panel); }
.pcard.turn.sel { border-color: var(--gold); box-shadow: 0 0 0 2px #9fd8ff; }
/* left: centred, but on a narrow window never under the player list (250px wide, on the left). */
#focus-pill { position: absolute; left: max(50%, 440px); bottom: calc(var(--ab-h, 160px) + 12px); transform: translateX(-50%); z-index: 1; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 340px; min-height: 44px; padding: 4px 5px 4px 12px; border: 1px solid rgba(159, 216, 255, 0.45); border-radius: 23px; background: var(--panel-solid); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); animation: focus-in 0.2s ease-out; }
@keyframes focus-in { from { opacity: 0; transform: translate(-50%, 8px); } }
#focus-pill .fp-text { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; line-height: 1.2; }
#focus-pill .fp-text b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#focus-pill .fp-text small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#focus-pill .fp-btn { flex-shrink: 0; height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255, 255, 255, 0.08); color: var(--text); font-weight: 800; font-size: 13px; }
#focus-pill .fp-x { flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 14px; font-weight: 800; }
#focus-pill .fp-btn:hover, #focus-pill .fp-x:hover { background: rgba(255, 255, 255, 0.16); color: var(--text); }
@media (max-width: 760px), (max-height: 520px) {
  #focus-pill { max-width: calc(100vw - 16px); min-height: calc(var(--tap) + 8px); gap: calc(9 * var(--u)); padding-left: calc(12 * var(--u)); }
  #focus-pill .fp-text b { font-size: calc(14 * var(--u)); }
  #focus-pill .fp-text small { font-size: calc(11.5 * var(--u)); }
  #focus-pill .fp-btn { height: var(--tap); padding: 0 calc(14 * var(--u)); border-radius: calc(var(--tap) / 2); font-size: calc(13.5 * var(--u)); }
  #focus-pill .fp-x { width: var(--tap); height: var(--tap); }
}
@media (max-width: 760px) {
  /* Portrait phones: the player chips run along the top, so the pill is simply centred. It steps up
     when the "Follow turn" button is showing, which is on the same line at the right edge. */
  #focus-pill { left: 50%; }
  #recenter:not([hidden]) ~ #focus-pill { bottom: calc(var(--ab-h, 160px) + 20px + max(var(--tap), calc(40 * var(--u)))); }
}

/* ---------- Questions asked before something hard to take back (#confirm sits above an open dialog) ---------- */
#confirm { background: rgba(5, 3, 2, 0.66); z-index: 45; padding: 16px; }
.ask h2 { font-size: 19px; margin-bottom: 8px; }
.ask .ask-body { text-align: left; }
.ask .ask-body p { color: var(--text); font-size: 14.5px; line-height: 1.5; margin: 0 0 8px; }
.ask .ask-body p.warn { color: #ffb4a6; margin-top: 0; }
.ask .ask-body .ask-hint { color: var(--muted); font-size: 12px; margin-top: 10px; }
.ask.good .confirm-ico { background: rgba(217, 180, 74, 0.16); color: var(--gold); }
.ask .modal-actions .btn { flex: 1 1 auto; }
.ask-standings { list-style: none; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 13.5px; }
.ask-standings li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ask-standings li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Trading: steps, and "what leaves you / what comes to you" boxes ---------- */
.tr-with { font-size: 14px; font-weight: 600; color: var(--muted); }
.tr-steps { list-style: none; display: flex; gap: 6px; margin: 0 0 14px; padding: 0; }
.tr-steps li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.tr-steps li span { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); font-size: 11.5px; }
.tr-steps li.on { background: rgba(217, 180, 74, 0.18); color: var(--text); }
.tr-steps li.on span { background: var(--gold); color: #2a1f05; }
.tr-steps li.done span { background: var(--green); color: #fff; }
.tr-lead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15.5px; }
.tr-lead.out { color: #ffc9bf; }
.tr-lead.in { color: #b8ecc6; }
.tr-people { display: grid; gap: 8px; }
.tr-person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--text); text-align: left; font-family: inherit; }
.tr-person:hover, .tr-person.on { border-color: var(--gold); background: rgba(217, 180, 74, 0.1); }
.tr-person .who { display: grid; min-width: 0; }
.tr-person .who b { font-size: 15px; }
.tr-person .who small { color: var(--muted); font-size: 12.5px; }
.tr-pick { display: grid; gap: 2px; max-height: min(40vh, 320px); overflow-y: auto; padding: 4px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.tr-prop { min-height: 36px; cursor: pointer; }
.tr-prop.disabled { cursor: default; }
.tr-prop .nm { flex: 1 1 auto; min-width: 0; }
.tr-prop .nm small, .tr-list small { color: var(--muted); font-size: 11.5px; }
.tr-prop .pr { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tr-prop input { width: 18px; height: 18px; flex-shrink: 0; }
.tr-cash { margin-top: 12px; }
.tr-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-box { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); min-width: 0; }
.tr-box h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.tr-box h4 b { text-transform: none; letter-spacing: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-box.out { background: rgba(192, 57, 43, 0.13); border-color: rgba(255, 155, 141, 0.35); }
.tr-box.out h4 { color: #ffb4a6; }
.tr-box.in { background: rgba(31, 138, 76, 0.16); border-color: rgba(159, 224, 176, 0.35); }
.tr-box.in h4 { color: #9fe0b0; }
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.tr-list li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tr-list .sw { width: 9px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.tr-none { margin: 0; color: var(--muted); font-size: 13.5px; font-style: italic; }
.tr-after { display: grid; gap: 2px; margin-top: 10px; font-size: 13.5px; }
.tr-after small { color: var(--muted); }
.tr-fair { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 8px; padding: 9px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; }
.tr-fair .ico { flex-shrink: 0; margin-top: 1px; }
.tr-fair.good { background: rgba(31, 138, 76, 0.16); color: #b8ecc6; }
.tr-fair.bad { background: rgba(192, 57, 43, 0.16); color: #ffc9bf; }
.offer-head { margin-bottom: 8px; font-size: 14.5px; }
.offer .rules-mini { margin: 8px 0 0; }
.btn.tool.dim { opacity: 0.55; }

/* ---------- Cards a player keeps ---------- */
.status.cards { display: inline-flex; align-items: center; gap: 3px; background: #6a4bb0; }
.held { margin-bottom: 8px; padding: 8px 10px; border-radius: 10px; border: 1px dashed rgba(217, 180, 74, 0.5); background: rgba(217, 180, 74, 0.07); }
.held-title { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); margin-bottom: 4px; }
.held-card { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: 13px; }
.held-card .ico { flex-shrink: 0; margin-top: 2px; color: var(--gold); }
.held-card span { display: grid; }
.held-card small { color: var(--muted); font-size: 11.5px; }

/* ---------- Vote to end the game: a banner everyone sees while it is open ---------- */
#vote-bar { position: absolute; top: calc(var(--top-h, 60px) + 8px); left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: min(720px, calc(100vw - 20px)); padding: 10px 14px; border: 1px solid rgba(217, 180, 74, 0.7); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); animation: vote-in 0.2s ease-out; }
/* Its own animation: a shared one would animate `transform` and drop the centring translate. */
@keyframes vote-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
#vote-bar .vote-text { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
#vote-bar .vote-text .ico { color: var(--gold); flex-shrink: 0; }
#vote-bar .vote-side { display: flex; align-items: center; gap: 8px; }
#vote-bar .vote-tally { color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Start page: the way back to a game in progress ---------- */
.rejoin-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(217, 180, 74, 0.55); background: rgba(217, 180, 74, 0.09); }
.rejoin-box > div { display: grid; min-width: 0; font-size: 14px; }
.rejoin-box small { color: var(--muted); font-size: 12.5px; }

@media (max-width: 760px), (max-height: 520px) {
  .tr-flow { grid-template-columns: 1fr; }
  .tr-steps li { justify-content: center; padding: 6px 4px; font-size: 0; gap: 0; }
  .tr-steps li.on { font-size: 12.5px; gap: 6px; }
  .tr-prop { min-height: var(--tap); }
  .tr-person { min-height: calc(var(--tap) + 10px); }
  #vote-bar { top: calc(var(--top-h, 60px) + 6px); gap: 8px; padding: 9px 10px; }
  #vote-bar .btn.small { min-height: var(--tap); }
}