:root {
  --felt: #0b3d2a; --felt2: #12573c; --panel: #fdfaf2; --ink: #1d1d1b; --muted: #6d6a62; --line: #d9d2c0;
  --red: #c8102e; --green: #1f8a4c; --gold: #f2c200;
  --side: 380px;
  --board: min(calc(100vh - 24px), calc(100vw - var(--side) - 36px));
  font-family: "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: radial-gradient(circle at 40% 30%, var(--felt2), var(--felt) 70%); color: var(--ink); }
body { overflow-x: hidden; cursor: url(../assets/misc/default_cursor.png) 2 2, auto; }
button:not(:disabled), .cell, .mprop .nm { cursor: url(../assets/misc/action_cursor.png) 2 2, pointer; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700;
  background: linear-gradient(#f8e7b9, #e8c977); color: #3b2a07; box-shadow: 0 2px 0 #a8863a, 0 3px 8px rgba(0,0,0,.25); }
button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
button.big { font-size: 18px; padding: 14px 26px; }
button.ghost { background: rgba(255,255,255,.12); color: inherit; box-shadow: none; border: 1px solid rgba(0,0,0,.18); }
button.red { background: linear-gradient(#e8505f, #b5122a); color: #fff; box-shadow: 0 2px 0 #7a0c1d; }
button.green { background: linear-gradient(#4cc27b, #1f8a4c); color: #fff; box-shadow: 0 2px 0 #135d32; }
input, select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
[hidden] { display: none !important; }
.screen { min-height: 100vh; }

/* ---------- Menu & setup ---------- */
#menu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px;
  background: url(../assets/ui/mainmenu/bg.png) center / cover no-repeat; }
.menu-logo { width: min(420px, 80vw); filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; width: min(320px, 90vw); }
.menu-buttons .ghost { background: rgba(255,255,255,.75); }
.fine { font-size: 12px; color: #2f3a33; background: rgba(255,255,255,.7); padding: 4px 10px; border-radius: 6px; text-align: center; }
#setup { display: flex; align-items: center; justify-content: center; padding: 16px; background: url(../assets/ui/loading_bg.png) center / cover; }
.panel { background: var(--panel); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35); padding: 18px; }
.setup-panel { width: min(620px, 100%); }
.setup-panel h2 { margin: 0 0 12px; }
.setup-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; margin-bottom: 8px; background: #fff; border: 2px solid transparent; }
.setup-row.off { opacity: .5; }
.setup-row .who { display: flex; gap: 4px; }
.setup-row .who button { padding: 6px; background: #eee; box-shadow: none; border: 2px solid transparent; }
.setup-row .who button.on { border-color: var(--ink); background: #fff7dc; }
.setup-row .who img { width: 26px; height: 32px; object-fit: contain; display: block; }
.setup-row input { width: 100%; }
.tokens { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.tokens button { padding: 4px; background: #f4f1e8; box-shadow: none; border: 2px solid transparent; border-radius: 10px; }
.tokens button.on { border-color: var(--ink); background: #fff3c4; }
.tokens button:disabled { opacity: .25; }
.tokens img { width: 44px; height: 36px; object-fit: contain; display: block; }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.25); }
.check { display: flex; gap: 8px; align-items: center; margin: 10px 4px; }
.row-btns { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }

/* ---------- Game layout ---------- */
#game { display: grid; grid-template-columns: auto var(--side); gap: 12px; padding: 12px; align-items: start; align-content: start; justify-content: center; }
.board-wrap { position: sticky; top: 12px; }
.board { position: relative; width: var(--board); height: var(--board); user-select: none; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden; }
.board-img { width: 100%; height: 100%; display: block; }
#board-layer { position: absolute; inset: 0; }
.cell { position: absolute; cursor: pointer; }
.cell:hover { background: rgba(255,255,160,.22); outline: 2px solid rgba(255,220,0,.7); }
.cell.flash { animation: flash 1s ease-out 2; }
@keyframes flash { 50% { background: rgba(255,230,60,.5); } }
.owner-tag { position: absolute; width: 28%; height: 9%; border-radius: 3px; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }
.houses { position: absolute; display: flex; justify-content: center; align-items: center; gap: 1px; pointer-events: none; }
.houses img { width: 22%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.houses.vert { flex-direction: column; }
.houses.vert img { width: auto; height: 22%; }
.houses .hotel { width: 34%; }
.houses.vert .hotel { width: auto; height: 34%; }
.mort { position: absolute; background: url(../assets/ui/trade/mortgagedstamp.png) center / 70% no-repeat; opacity: .8; pointer-events: none; }
.token { position: absolute; width: 5.4%; height: 5.4%; margin: -2.7% 0 0 -2.7%; transition: left .16s ease-in-out, top .16s ease-in-out; pointer-events: none; z-index: 5; }
.token img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)); }
.token i { position: absolute; left: 50%; bottom: -8%; width: 40%; height: 16%; margin-left: -20%; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.token.active img { animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12%); } }
.board-center { position: absolute; left: 16%; top: 63%; width: 34%; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.dice { display: flex; gap: 6%; width: 50%; justify-content: center; }
.die { width: 44%; aspect-ratio: 1; border-radius: 16%; background: url(../assets/textures/dice.png) 0 0 / 400% 200% #f7f7f7;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.4); transition: transform .3s; }
.die.rolling { background: url(../assets/ui/animations/dieroll_000.png) center / 100% 100% no-repeat transparent; box-shadow: none; }
.die.empty { opacity: .35; }
#center-msg { font-weight: 800; color: #1d1d1b; background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 8px; font-size: clamp(11px, 1.6vw, 15px); text-align: center; }
#center-msg:empty { display: none; }

/* ---------- Side panel ---------- */
.side { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 24px); position: sticky; top: 12px; }
#players { display: grid; gap: 6px; }
.pcard { background: var(--panel); border-radius: 12px; padding: 8px 10px; display: grid; grid-template-columns: 46px 1fr auto; gap: 2px 10px; align-items: center;
  border: 3px solid transparent; box-shadow: 0 3px 10px rgba(0,0,0,.25); position: relative; }
.pcard.cur { border-color: var(--gold); }
.pcard.out { opacity: .45; filter: grayscale(1); }
.pcard img.tok { width: 46px; height: 40px; object-fit: contain; grid-row: span 2; }
.pcard .nm { font-weight: 800; display: flex; align-items: center; gap: 6px; }
.pcard .nm small { font-weight: 600; color: var(--muted); font-size: 11px; }
.pcard .cash { font-weight: 800; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.pcard .props { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 2px; min-height: 10px; }
.pcard .props span { width: 10px; height: 14px; border-radius: 2px; border: 1px solid rgba(0,0,0,.25); }
.pcard .props span.m { opacity: .35; }
.pcard .badges { position: absolute; right: 8px; bottom: 6px; display: flex; gap: 4px; font-size: 11px; }
.badge { background: #222; color: #fff; border-radius: 6px; padding: 1px 6px; }
.float { position: absolute; right: 10px; top: -6px; font-weight: 900; animation: floatUp 1.4s ease-out forwards; pointer-events: none; }
.float.plus { color: var(--green); } .float.minus { color: var(--red); }
@keyframes floatUp { to { transform: translateY(-26px); opacity: 0; } }

.actions { background: var(--panel); border-radius: 12px; padding: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.actions .status { font-weight: 700; margin-bottom: 8px; }
.actions .status small { display: block; font-weight: 500; color: var(--muted); }
.abtns { display: flex; flex-wrap: wrap; gap: 6px; }
.abtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px 6px; min-width: 74px; background: #fff; box-shadow: 0 2px 0 #cfc6ad; border: 1px solid #e3dccb; font-size: 12px; color: var(--ink); }
.abtn img { height: 40px; }
.abtn.primary { background: linear-gradient(#fff6d6, #f5dd8f); }
.log-wrap { background: rgba(253,250,242,.96); border-radius: 12px; display: flex; flex-direction: column; min-height: 140px; flex: 1; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-weight: 800; border-bottom: 1px solid var(--line); }
.icon-btn { padding: 2px 10px; font-size: 18px; background: transparent; box-shadow: none; color: var(--ink); }
#log { list-style: none; margin: 0; padding: 6px 10px; overflow-y: auto; font-size: 13px; flex: 1; }
#log li { padding: 3px 0; border-bottom: 1px dashed #e5dfcf; }
#log li .n { color: var(--muted); font-size: 11px; margin-right: 4px; }

/* ---------- Modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 12px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--panel); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 16px; width: min(520px, 100%); max-height: 92vh; overflow: auto; animation: pop .2s ease-out; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.modal h3 { margin: 0 0 8px; }
.modal .row-btns { margin-top: 12px; }
.deed { width: min(300px, 70vw); display: block; margin: 0 auto; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.center { text-align: center; }
.cardface { position: relative; width: min(440px, 88vw); aspect-ratio: 456/300; margin: 0 auto; background: #fff url(../assets/textures/cards/commchest_chance_blank.png) center / 100% 100%;
  border-radius: 12px; display: grid; grid-template-columns: 38% 1fr; align-items: center; padding: 6% 6% 6% 3%; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.cardface.chance { background-color: #fbd9b4; }
.cardface.chest { background-color: #cfe7f7; }
.cardface img { width: 100%; max-height: 100%; object-fit: contain; }
.cardface .txt { font-weight: 800; font-size: clamp(13px, 2.2vw, 17px); text-align: center; text-transform: uppercase; line-height: 1.3; }
.cardface .kind { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 2px 12px; border-radius: 8px; font-weight: 800; letter-spacing: .1em; font-size: 12px; }
.auction-bid { font-size: 28px; font-weight: 900; text-align: center; margin: 6px 0; }
.auction-bid small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.bidders { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.bidders span { padding: 3px 8px; border-radius: 8px; background: #eee; font-size: 13px; }
.bidders span.turn { background: var(--gold); font-weight: 800; }
.bidders span.out { text-decoration: line-through; opacity: .5; }
.bidrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bidrow input { width: 110px; }
.mgroup { border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; overflow: hidden; background: #fff; }
.mgroup h4 { margin: 0; padding: 6px 10px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-size: 14px; }
.mprop { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px 10px; border-top: 1px solid #eee; align-items: center; }
.mprop .nm { font-weight: 700; cursor: pointer; }
.mprop .nm small { display: block; color: var(--muted); font-weight: 500; }
.mprop .b { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.mprop .b button { padding: 6px 8px; font-size: 12px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-col { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.trade-col h4 { margin: 0 0 6px; }
.trade-col label { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; }
.trade-col label i { width: 10px; height: 14px; border-radius: 2px; flex-shrink: 0; }
.trade-col input[type=number] { width: 100%; margin-top: 6px; }
.offer-box { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 6px 0; }
.settings label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.win-banner { text-align: center; }
.win-banner img { width: 140px; }
.jailcop { width: 160px; display: block; margin: 0 auto; }

#toasts { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: rgba(20,20,20,.92); color: #fff; padding: 8px 14px; border-radius: 10px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.4); animation: fade .2s; max-width: 92vw; text-align: center; }
.toast img { height: 28px; vertical-align: middle; margin-right: 6px; }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  :root { --board: calc(100vw - 16px); }
  #game { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
  .board-wrap { position: static; }
  .side { position: static; max-height: none; }
  .actions { position: sticky; bottom: 0; z-index: 20; }
  #players { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pcard { grid-template-columns: 32px 1fr; padding: 6px 8px; gap: 0 8px; }
  .pcard .nm { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pcard .nm small { display: none; }
  .pcard .cash { grid-column: 2; text-align: left; }
  .pcard .props { grid-column: 1 / -1; }
  .pcard img.tok { width: 32px; height: 30px; }
  .pcard .cash { font-size: 15px; }
  .log-wrap { max-height: 260px; }
  .abtn { min-width: 64px; }
  .abtn img { height: 32px; }
  .trade-cols { grid-template-columns: 1fr; }
}

/* ---------- Effects (js/fx.js) ---------- */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.fx { position: fixed; transform: translate(-50%, -50%); will-change: transform, opacity; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.fx-banner { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 900 clamp(26px, 6vw, 64px) "Trebuchet MS", Arial, sans-serif;
  color: #fff; text-align: center; white-space: nowrap; letter-spacing: .04em; padding: 10px 28px; border-radius: 16px;
  background: linear-gradient(#e8505f, #b5122a); box-shadow: 0 10px 40px rgba(0,0,0,.45); text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.fx-banner.gold { background: linear-gradient(#ffe27a, #d79b00); color: #3b2a07; text-shadow: 0 2px 0 rgba(255,255,255,.4); }
.fx-banner.red { background: linear-gradient(#444, #111); }

/* Card draw: flies from its deck and flips over */
.card-overlay { flex-direction: column; gap: 14px; background: rgba(0,0,0,.35); }
.card3d { width: min(440px, 88vw); aspect-ratio: 456/300; perspective: 1200px; }
.card3d .flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.card3d .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.card3d .face.back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card3d .face.front { transform: rotateY(180deg); width: auto; margin: 0; overflow: visible; }
.card-ok button { min-width: 140px; }

/* Free Parking jackpot */
/* A pile of bills over the MONOPOLY logo (pot_pile_1..6.png) with a gold plaque showing the amount. */
#pot { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; z-index: 1; }
#pot[hidden] { display: none; }
#pot .pot-pile { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); transform-origin: 50% 85%; }
#pot .pot-plaque { margin-top: -4%; background: linear-gradient(#fff6d6, #f3d77a); border: 2px solid #b88a00; border-radius: 999px;
  padding: .15em .9em .2em; text-align: center; color: #3b2a07; line-height: 1.05; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  font-size: clamp(9px, 1.9vw, 17px); white-space: nowrap; }
#pot .pot-plaque small { display: block; font-size: .62em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a5b00; }
#pot .pot-plaque b { font-size: 1.25em; font-weight: 900; }
#pot.empty .pot-plaque { opacity: .72; }
#pot.bump .pot-pile { animation: pot-bump .55s cubic-bezier(.3,1.6,.5,1); }
#pot.bump .pot-plaque { animation: pot-glow .9s ease-out; }
@keyframes pot-bump { 0% { transform: scale(1); } 35% { transform: scale(1.08, .94); } 100% { transform: scale(1); } }
@keyframes pot-glow { 0% { box-shadow: 0 0 0 0 rgba(255,200,0,.9), 0 2px 6px rgba(0,0,0,.3); } 100% { box-shadow: 0 0 0 14px rgba(255,200,0,0), 0 2px 6px rgba(0,0,0,.3); } }
@media (prefers-reduced-motion: reduce) { #pot.bump .pot-pile, #pot.bump .pot-plaque { animation: none; } }

/* Jail bars over a jailed token */
.token .bars { position: absolute; inset: -10% -15%; background: url(../assets/ui/bubble_jailbars.png) center / contain no-repeat; display: none; }
.token.jailed .bars { display: block; }

/* Setup rules + How to play */
.rules-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.rules-box summary { font-weight: 800; cursor: pointer; }
.rules-box small { color: var(--muted); }
.row-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 4px; }
.modal.rules { width: min(640px, 100%); }
.modal.rules li { margin: 6px 0; }
#center-msg small { display: block; font-weight: 600; font-size: .8em; color: var(--muted); }
#manage-pid, #trade-from, #trade-to { font-weight: 700; }

/* ---------- iPhone ---------- */
html { -webkit-text-size-adjust: 100%; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
.screen { min-height: 100dvh; }
.board, .board * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button, .cell { touch-action: manipulation; }
input, select, textarea { font-size: 16px; } /* 16px stops iOS zooming into fields */
#toasts { top: calc(14px + env(safe-area-inset-top)); }
.overlay { padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  .actions { bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(0,0,0,.25); }
  .abtn { min-height: 64px; }
  .modal { max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

/* ---------- Messages games ---------- */
.mode-pick { display: grid; gap: 6px; margin-bottom: 10px; }
.mode-pick label { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; }
.mode-pick label:has(input:checked) { border-color: var(--green); background: #f1fbf4; }
.mode-pick small { grid-column: 2; color: var(--muted); }
.mode-pick input { width: 20px; height: 20px; grid-row: span 2; }
.modal.send p { color: var(--ink); }
.modal .warn { font-size: 13px; color: #8a5300; background: #fff4dc; padding: 6px 10px; border-radius: 8px; }
.seat-list { display: grid; gap: 8px; }
.seat-list button { display: flex; align-items: center; gap: 12px; justify-content: flex-start; }
.seat-list img { height: 36px; }
.game-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; background: #fff; }
.game-row small { display: block; color: var(--muted); }
.game-row .b { display: flex; gap: 6px; }
.settings label span { display: flex; gap: 8px; align-items: center; }

/* ---------- Chance / Community Chest piles on the board ---------- */
.deck { position: absolute; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; z-index: 2;
  transform: translate(-50%, -50%) rotate(var(--rot)); border-radius: 7%; }
.deck .deck-face { position: absolute; inset: 0; border-radius: 7%; background: #fff center / cover no-repeat;
  border: 2px solid #fff;
  /* a pile of cards: offset layers of card edges, then a soft shadow on the board */
  box-shadow: 1.5px 1.5px 0 #e9e4d6, 3px 3px 0 #fff, 4.5px 4.5px 0 #ddd6c4, 6px 6px 0 #fff, 7.5px 7.5px 0 #d6cfbc,
    9px 9px 0 #fbf8f0, 10px 10px 8px rgba(0,0,0,.35); }
.deck:hover .deck-face { filter: brightness(1.06); }
.deck:active { filter: brightness(.95); }
@media (max-width: 900px) {
  .deck .deck-face { border-width: 1px; box-shadow: 1px 1px 0 #e9e4d6, 2px 2px 0 #fff, 3px 3px 0 #ddd6c4, 4px 4px 0 #fff, 5px 5px 4px rgba(0,0,0,.35); }
}

/* ---------- Player cards are tappable; player profile sheet ---------- */
.pcard { cursor: pointer; transition: transform .1s; }
.pcard:hover { box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.pcard:active { transform: scale(.98); }
.pcard .nm .swatch, .phead .swatch { margin-left: 3px; flex-shrink: 0; } /* keep the ring from being clipped */
.pcard::after { content: '›'; position: absolute; right: 8px; top: 6px; color: var(--muted); font-weight: 900; }
.player-sheet { width: min(560px, 100%); display: flex; flex-direction: column; }
.phead { display: flex; gap: 12px; align-items: center; border-left: 8px solid; padding-left: 10px; margin-bottom: 10px; }
.phead img { width: 64px; height: 56px; object-fit: contain; }
.phead h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.phead h3 small { color: var(--muted); font-weight: 600; font-size: 12px; }
.pstatus { color: var(--muted); font-weight: 700; }
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.pstats div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.pstats small { display: block; color: var(--muted); font-size: 11px; }
.pstats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.plist { overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 52dvh; padding-right: 2px; }
.plist .mgroup h4 { display: flex; justify-content: space-between; }
.plist .mgroup h4 span { font-weight: 600; font-size: 12px; }
.prow { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left;
  background: #fff; color: var(--ink); border-radius: 0; border-top: 1px solid #eee; box-shadow: none; padding: 8px 10px; font-weight: 500; }
.prow img { width: 44px; height: 44px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid #ddd; }
.prow small { display: block; color: var(--muted); font-size: 12px; }
.prow i { font-style: normal; font-size: 22px; color: var(--muted); }
.prow .mortgaged { color: var(--red); }
#center-msg.colored { box-shadow: 0 2px 8px rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.85); }
#center-msg.colored small { color: inherit; opacity: .85; }
@media (max-width: 900px) { .pstats { grid-template-columns: repeat(2, 1fr); } .plist { max-height: 46dvh; } }

/* ---------- Colour-coded, collapsible game log ---------- */
.log-head { gap: 6px; }
.log-toggle { background: none; box-shadow: none; color: var(--ink); padding: 2px 4px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.log-toggle .chev { display: inline-block; transition: transform .2s; }
.log-wrap.collapsed { flex: 0 0 auto; min-height: 0; }
.log-wrap.collapsed .chev { transform: rotate(-90deg); }
.log-wrap.collapsed #log, .log-wrap.collapsed .log-filters { display: none; }
.log-filters { display: flex; gap: 4px; padding: 6px 8px 2px; overflow-x: auto; scrollbar-width: none; }
.chip { padding: 4px 10px; font-size: 12px; border-radius: 999px; background: #efe9da; color: var(--ink); box-shadow: none; font-weight: 700; white-space: nowrap; }
.chip.on { background: var(--ink); color: #fff; }
#log li, .log-latest li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; padding: 4px 6px 4px 8px;
  border-bottom: 1px solid #ece6d6; border-left: 3px solid var(--stripe, transparent); line-height: 1.35; }
.li-ic { width: 22px; height: 18px; object-fit: contain; margin-top: 1px; }
.li-t { min-width: 0; overflow-wrap: anywhere; }
#log li.sep { display: block; border: 0; padding: 6px 0 2px; text-align: center; }
#log li.sep span { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
#log li.empty { display: block; color: var(--muted); border: 0; }
.lp, .lprop { white-space: nowrap; }
.lp i, .lprop i { display: inline-block; vertical-align: -1px; margin-right: 3px; }
.lp i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.lprop { font-weight: 700; }
.lprop i { width: 8px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.amt { font-variant-numeric: tabular-nums; }
.amt.in { color: #17733d; }
.amt.out { color: #b3261e; }
#log li.k-win { background: #fff7d6; }
#log li.k-bankrupt { background: #fde9e7; }
#log li.k-jail { background: #f3f0ea; }
.log-latest { padding: 0 4px 4px; }
.log-latest ol { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.log-latest li { border-bottom: 0; }

/* ---------- Profile stats + assets chart ---------- */
.pmore { margin: 4px 0 8px; }
.pmore summary { font-weight: 800; cursor: pointer; padding: 4px 0; }
.pstats.small b { font-size: 15px; }
.pstats.small { grid-template-columns: repeat(4, 1fr); }
.plist-title { margin: 6px 0 4px; }
.achart { position: relative; }
.achart .lgs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin: 2px 0 4px; }
.achart .lg { display: inline-flex; align-items: center; gap: 5px; }
.achart .lg i, .atable td i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.achart .lg.dim { opacity: .55; }
.aplot { position: relative; }
.achart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.achart .grid { stroke: #e6e0d0; stroke-width: 1; }
.achart .tick { font-size: 11px; fill: var(--muted); }
.achart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.achart .ln.dim, .achart .end.dim { opacity: .35; }
.achart .end { stroke: var(--panel); stroke-width: 2; }
.achart .xh { stroke: #9a9384; stroke-width: 1; }
.atip { position: absolute; top: 4px; transform: translateX(-50%); background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; min-width: 120px; }
.atip .th { font-weight: 800; color: var(--muted); margin-bottom: 2px; }
.atip div { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.atip i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.atable { font-size: 13px; margin-top: 4px; }
.atable table { width: 100%; border-collapse: collapse; }
.atable th, .atable td { text-align: right; padding: 3px 4px; border-bottom: 1px solid #eee; }
.atable th:first-child, .atable td:first-child { text-align: left; }
.atable td i { margin-right: 5px; vertical-align: middle; }
.muted { color: var(--muted); }
.buildrow { float: right; padding: 2px 8px; font-size: 11px; margin-top: -1px; }
@media (max-width: 900px) { .pstats.small { grid-template-columns: repeat(2, 1fr); } }
.log-head, .log-filters, .log-latest { flex-shrink: 0; }
.chip { min-height: 26px; }
/* the profile scrolls as one page (no scroll-inside-scroll on phones) */
.player-sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.player-sheet .plist { max-height: none; overflow: visible; }
.player-sheet .row-btns { position: sticky; bottom: -16px; background: var(--panel); padding: 8px 0 4px; margin-bottom: -4px; }

/* ---------- Privacy ---------- */
.locked { color: var(--muted); font-weight: 700; white-space: nowrap; }
.pstats .locked { font-size: 14px; }
.pcard .cash .locked { font-size: 15px; }
.private-note { background: #f3efe4; border: 1px dashed #cfc6ad; border-radius: 10px; padding: 8px 10px; color: var(--muted); font-weight: 600; }
details.privacy { background: #fff; border: 2px solid #e3dccb; border-radius: 12px; padding: 6px 10px; margin: 0 0 10px; }
details.privacy[open] { border-color: var(--ink); }
details.privacy summary { font-weight: 800; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pv-count { font-weight: 600; font-size: 12px; color: var(--muted); }
details.privacy p { margin: 6px 0; font-size: 13px; }
.pv-quick { display: flex; gap: 6px; margin-bottom: 4px; }
.pv-quick button { padding: 6px 10px; font-size: 13px; }
.pv-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #eee; cursor: pointer; }
.pv-row small { display: block; color: var(--muted); font-size: 12px; }
.pv-switch { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.pv-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.pv-switch i { width: 44px; height: 26px; border-radius: 13px; background: #cfe9d6; position: relative; transition: background .15s; flex-shrink: 0; }
.pv-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.pv-switch input:checked + i { background: #6d6a62; }
.pv-switch input:checked + i::after { transform: translateX(18px); }
.pv-switch input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.pv-switch em { font-style: normal; font-size: 12px; font-weight: 700; min-width: 46px; }

/* ====================================================================
   Layouts (body.layout-classic / layout-compact / layout-board)
   ==================================================================== */
.layout-btn { position: fixed; z-index: 45; top: calc(6px + env(safe-area-inset-top)); right: calc(6px + env(safe-area-inset-right));
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px;
  background: rgba(253,250,242,.92); color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.layout-btn .lb-ic { font-size: 17px; line-height: 1; }
#game[hidden] + * .layout-btn, #menu:not([hidden]) ~ .layout-btn { display: none; }
@media (max-width: 600px) { .layout-btn { padding: 0; width: 38px; height: 38px; justify-content: center; } .layout-btn .lb-name { display: none; } }

/* Settings: layout picker */
.layout-pick { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lp-opt { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left; background: #fff; color: var(--ink);
  box-shadow: none; border: 2px solid var(--line); padding: 8px 10px; font-weight: 500; }
.lp-opt.on { border-color: var(--green); background: #f1fbf4; }
.lp-opt .lp-ic { font-size: 24px; text-align: center; }
.lp-opt small { display: block; color: var(--muted); font-size: 12px; }
.log-modal { width: min(560px, 100%); display: flex; flex-direction: column; }
.modal-log { list-style: none; margin: 6px 0; padding: 0; overflow-y: auto; max-height: 60dvh; font-size: 14px; }
.modal-log li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 4px 6px 4px 8px; border-bottom: 1px solid #ece6d6; border-left: 3px solid var(--stripe, transparent); }
.modal-log li.sep { display: block; border: 0; text-align: center; padding: 6px 0 2px; }
.modal-log li.sep span { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.log-filters.in-modal { padding: 0 0 4px; }

/* ---------- Compact: everything on one screen ---------- */
body.layout-compact .pcard .props, body.layout-compact .pcard .badges, body.layout-compact .pcard::after,
body.layout-compact .pcard .nm small, body.layout-compact .actions .status small { display: none; }
body.layout-compact .pcard { grid-template-columns: 24px 1fr; gap: 0 6px; padding: 4px 8px; border-width: 2px; }
body.layout-compact .pcard img.tok { width: 24px; height: 22px; grid-row: span 2; }
body.layout-compact .pcard .nm { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.layout-compact .pcard .cash { font-size: 14px; grid-column: 2; text-align: left; }
body.layout-compact .actions { padding: 6px 8px; }
body.layout-compact .actions .status { font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.layout-compact .abtns { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; }
body.layout-compact .abtn { min-width: 0; flex: 1 0 auto; min-height: 0; padding: 3px 8px 4px; font-size: 11px; }
body.layout-compact .abtn img { height: 24px; }
body.layout-compact .log-wrap { min-height: 0; flex: 0 0 auto; }
body.layout-compact .log-latest { cursor: pointer; }
body.layout-compact .log-head { padding: 3px 8px; }
body.layout-compact { --side: 300px; }
@media (max-width: 900px) {
  body.layout-compact { --board: min(calc(100vw - 8px), calc(100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  body.layout-compact #game { padding: 4px; gap: 4px; justify-items: center; }
  body.layout-compact .side { width: 100%; gap: 4px; }
  body.layout-compact #players { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  body.layout-compact .actions { position: static; }
}

/* ---------- Board only: the board fills the screen; controls float inside it ---------- */
body.layout-board { --board: min(calc(100vw - 8px - env(safe-area-inset-left) - env(safe-area-inset-right)),
  calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
body.layout-board #game { display: block; position: relative; padding: 0; height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 0; overflow: hidden; }
body.layout-board .board-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
body.layout-board .side { position: absolute; left: 50%; top: 50%; width: var(--board); height: var(--board); transform: translate(-50%, -50%);
  max-height: none; display: block; pointer-events: none; z-index: 6; }
body.layout-board .log-wrap { display: none; }
/* players: the open area in the upper right of the board's centre */
body.layout-board #players { position: absolute; left: 51%; top: 15%; width: 35%; display: flex; flex-direction: column; gap: calc(var(--board) * .006); pointer-events: auto; }
body.layout-board .pcard { display: grid; grid-template-columns: calc(var(--board) * .04) 1fr auto; gap: 0 calc(var(--board) * .008); align-items: center;
  padding: calc(var(--board) * .006) calc(var(--board) * .012); border-width: 2px; border-radius: 9px; background: rgba(253,250,242,.93); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
body.layout-board .pcard img.tok { width: calc(var(--board) * .04); height: calc(var(--board) * .034); grid-row: auto; }
body.layout-board .pcard .nm { font-size: calc(var(--board) * .021); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; gap: 4px; }
body.layout-board .pcard .nm .swatch { width: calc(var(--board) * .016); height: calc(var(--board) * .016); }
body.layout-board .pcard .cash { font-size: calc(var(--board) * .023); grid-column: 3; text-align: right; }
body.layout-board .pcard .nm small, body.layout-board .pcard .props, body.layout-board .pcard .badges, body.layout-board .pcard::after { display: none; }
/* actions: the open area in the lower left of the board's centre */
body.layout-board .actions { position: absolute; left: 14.5%; top: 54%; width: 36%; pointer-events: auto; padding: calc(var(--board) * .01);
  background: rgba(253,250,242,.93); border-radius: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
body.layout-board .actions .status { font-size: calc(var(--board) * .022); margin-bottom: calc(var(--board) * .008); line-height: 1.2; }
body.layout-board .actions .status small { display: none; }
body.layout-board .abtns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--board) * .006); }
body.layout-board .abtn { min-width: 0; min-height: 0; padding: calc(var(--board) * .004) 2px; font-size: calc(var(--board) * .018); line-height: 1.1; gap: 0; }
body.layout-board .abtn img { height: calc(var(--board) * .045); }
/* dice and the turn label sit just right of centre */
body.layout-board .board-center { left: 50%; top: 47%; width: 24%; gap: 3px; }
body.layout-board #center-msg { font-size: calc(var(--board) * .02); padding: 2px 8px; }
/* ...so the jackpot pile moves up to the top half of the logo */
@media (min-aspect-ratio: 4/5) { body.layout-board #pot { left: 34% !important; top: 15% !important; width: 32% !important; height: 27% !important; } }
body.layout-board .layout-btn { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
/* layout button: floating only in Board only; in Classic/Compact it lives in the log header */
body:not(.layout-board) .layout-btn { display: none; }
body.layout-board .layout-btn { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); right: calc(8px + env(safe-area-inset-right)); }
#btn-layout2 { font-size: 17px; }
/* compact player row: equal columns for however many players, name gets the room */
@media (max-width: 900px) {
  body.layout-compact #players { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
body.layout-compact .pcard .nm .swatch { display: none; }
body.layout-compact .pcard { grid-template-columns: 22px minmax(0, 1fr); padding: 4px 6px; }
body.layout-compact .pcard img.tok { width: 22px; }
@media (max-width: 900px) { body.layout-compact #game { align-content: center; } }
/* Board only, wide screens: tighter 3-column button panel that stays inside the board's centre */
body.layout-board .abtns { grid-template-columns: repeat(3, 1fr); }
body.layout-board .abtn { font-size: calc(var(--board) * .016); }
body.layout-board .abtn img { height: calc(var(--board) * .038); }
body.layout-board .actions { max-height: 32%; overflow-y: auto; }

/* Board only, upright phones: the board is width-limited, so keep it completely clear and float the
   players above it and the buttons below it in the spare space. */
@media (max-aspect-ratio: 4/5) {
  body.layout-board .side { position: fixed; inset: 0; width: auto; height: auto; transform: none; }
  body.layout-board #players { left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top)); width: auto; flex-direction: row; gap: 6px; }
  body.layout-board .pcard { flex: 1 1 0; min-width: 0; grid-template-columns: 22px minmax(0, 1fr); padding: 5px 8px; }
  body.layout-board .pcard img.tok { width: 22px; height: 20px; grid-row: span 2; }
  body.layout-board .pcard .nm { font-size: 12px; }
  body.layout-board .pcard .nm .swatch { display: none; }
  body.layout-board .pcard .cash { font-size: 14px; grid-column: 2; text-align: left; }
  body.layout-board .actions { left: 8px; right: 56px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: none; padding: 8px; }
  body.layout-board .actions .status { font-size: 14px; }
  body.layout-board .abtns { display: flex; flex-wrap: wrap; gap: 5px; }
  body.layout-board .abtn { flex: 1 0 auto; min-width: 64px; font-size: 11px; padding: 3px 6px; }
  body.layout-board .abtn img { height: 26px; }
  body.layout-board .board-center { left: 16%; top: 63%; width: 34%; }
  body.layout-board #center-msg { font-size: 14px; }
}
@media (max-aspect-ratio: 4/5) { body.layout-board #toasts { top: calc(70px + env(safe-area-inset-top)); } }

/* ---------- Dice fairness (Settings) ---------- */
.dice-fair { padding: 8px 0; border-bottom: 1px solid var(--line); }
.dice-fair summary { font-weight: 800; cursor: pointer; }
.dice-fair p { font-size: 13px; margin: 6px 0; }
.fair-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.fair-table th { text-align: right; color: var(--muted); font-weight: 600; font-size: 12px; }
.fair-table th:first-child { text-align: left; }
.fair-table td { padding: 3px 4px; text-align: right; }
.fair-table td:first-child { text-align: left; width: 30px; }
.fair-table td.bar { width: 55%; text-align: left; }
.fair-table td.bar i { display: block; height: 10px; border-radius: 0 4px 4px 0; background: #2a7a52; min-width: 2px; }
.mini-die { display: inline-block; width: 22px; height: 22px; border-radius: 5px; background: url(../assets/textures/dice.png) 0 0 / 400% 200% #f7f7f7; box-shadow: 0 0 0 1px #ccc; vertical-align: middle; }
.settings .dice-fair { display: block; }

/* ====================================================================
   Property tiles + trade screens + property overview + resume prompt
   ==================================================================== */
.trade2, .props-sheet { width: min(760px, 100%); }
.trade2 h3, .props-sheet h3 { display: flex; align-items: center; gap: 8px; }
.parties { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.parties small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.swap { font-size: 22px; font-weight: 900; color: var(--muted); text-align: center; }
.swap.big { font-size: 26px; margin: 2px 0; }
.pick { display: flex; flex-wrap: wrap; gap: 4px; }
.pick-btn { display: flex; align-items: center; gap: 5px; padding: 4px 9px 4px 4px; border-radius: 999px; background: #fff; color: var(--ink);
  box-shadow: none; border: 2px solid #e3dccb; font-size: 13px; }
.pick-btn img { width: 26px; height: 22px; object-fit: contain; }
.pick-btn.on { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, #fff); }
.pchip { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; padding: 1px 8px 1px 2px; border-radius: 999px;
  border: 2px solid var(--pc); background: #fff; vertical-align: middle; white-space: nowrap; }
.pchip img { width: 22px; height: 18px; object-fit: contain; }
.tap-hint { font-size: 13px; margin: 4px 0 6px; }
.tside { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin: 6px 0; }
.tside h4 { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; }
.tsum { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.dgrid.big { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

.dtile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0 0 6px; margin: 0; text-align: left;
  background: #fff; color: var(--ink); border: 2px solid #e6e0d0; border-top: 6px solid var(--gc); border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12); font-weight: 600; overflow: hidden; transition: transform .1s, box-shadow .1s, border-color .1s; }
.dtile:not(:disabled):hover { box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.dtile:not(:disabled):active { transform: scale(.97); }
.dtile .dt-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f1e8; }
.dtile .dt-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.dtile.jailcard .dt-img img { object-fit: contain; object-position: center; padding: 6px; }
.dtile .dt-name { padding: 0 7px; font-size: 13px; font-weight: 800; line-height: 1.15; }
.dtile .dt-price { padding: 0 7px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dtile .dt-tags { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 6px 0; }
.tg { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: #efe9da; color: var(--ink); }
.tg.mort { background: #fde9e7; color: #b3261e; }
.tg.warn { background: #fff1d6; color: #8a5300; }
.tg.set { background: #e3f6ea; color: #17733d; }
.dtile.is-mort .dt-img img { filter: grayscale(.7); opacity: .75; }
.dtile.sel { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,138,76,.25), 0 4px 12px rgba(0,0,0,.18); transform: translateY(-2px); }
.dtile .dt-check { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; font-weight: 900; font-size: 15px; box-shadow: 0 0 0 2px #fff; }
.dtile:disabled { opacity: .55; cursor: not-allowed; }
.cashrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cashrow label { display: flex; align-items: center; gap: 4px; font-weight: 800; }
.cashrow input { width: 110px; }
.cash-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.cash-quick button { padding: 6px 9px; font-size: 12px; }
.cash-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed #cfe0c9; border-radius: 10px; padding: 8px; background: #f6fbf3; }
.cash-tile img { width: 90%; max-width: 120px; }
.cash-tile b { font-size: 18px; color: #17733d; }
.cash-tile span { font-size: 11px; color: var(--muted); }
.deal .tside h4 { font-size: 14px; }
.note { font-size: 13px; background: #f6f2e7; border-radius: 8px; padding: 6px 10px; }
.trade-err { color: var(--red); font-weight: 700; min-height: 1em; margin: 4px 0; }
.trade2 .tbar { position: sticky; bottom: -16px; background: var(--panel); display: flex; justify-content: space-between; gap: 8px;
  padding: 10px 0 6px; margin-bottom: -6px; border-top: 1px solid var(--line); }
.trade2 .tbar.three button { flex: 1; }
.trade2 { overflow-y: auto; }

/* property overview */
.props-sheet { overflow-y: auto; }
.in-props { padding: 0 0 6px; flex-wrap: nowrap; }
.pgroup { margin: 8px 0 12px; }
.pgroup h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pgroup h4 i { width: 14px; height: 14px; border-radius: 3px; background: var(--gc); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.pgroup h4 span { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.for-sale { font-size: 10px; font-weight: 800; background: #e3f6ea; color: #17733d; padding: 1px 6px; border-radius: 999px; }
.owner-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--ink);
  border: 2px solid var(--pc); border-radius: 999px; padding: 0 6px 0 1px; }
.owner-chip img { width: 18px; height: 14px; object-fit: contain; }

/* "Continue your game?" */
.resume { width: min(420px, 100%); }
.resume-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin: 6px 0 12px; }
.resume-card .toks { display: flex; justify-content: center; gap: 6px; margin-bottom: 4px; }
.resume-card .toks img { width: 40px; height: 34px; object-fit: contain; }
.resume-card .toks img.out { opacity: .3; filter: grayscale(1); }
.resume-card small { display: block; color: var(--muted); margin-top: 3px; }
@media (max-width: 600px) {
  .parties { grid-template-columns: 1fr; }
  .parties .swap { display: none; }
  .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dgrid.big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtile .dt-name { font-size: 12px; }
}
.link-label { display: inline-flex; flex-direction: column; align-items: center; background: #fff; border: 2px solid var(--green); border-radius: 12px; padding: 6px 16px; margin: 4px auto 2px; }
.link-label span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.link-label b { font-size: 18px; }

/* Messages games: phone numbers, sending to the right person */
.setup-hint { background: #eef6ff; border: 1px solid #b9d6f5; border-radius: 10px; padding: 8px 10px; font-size: 13px; margin: 6px 0 10px; }
.setup-row .pphone { grid-column: 1 / -1; font-size: 15px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; }
.seat-list button.meant { outline: 3px solid var(--gold); background: #fff7dc; }
.seat-list button small { font-weight: 600; opacity: .7; }
button.text-to { display: flex; flex-direction: column; align-items: center; }
button.text-to small { font-weight: 600; opacity: .85; font-size: 12px; }
.add-contact { display: flex; gap: 8px; align-items: flex-end; margin: 8px 0 2px; }
.add-contact label { flex: 1; display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.add-contact input { font-size: 16px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; width: 100%; }
.small-tip { font-size: 12px; margin: 4px 0 10px; }
.settings details.contacts { margin: 6px 0; }
.settings details.contacts summary { font-weight: 700; cursor: pointer; padding: 6px 0; }
.settings details.contacts input { font-size: 16px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 8px; max-width: 60%; }

/* Opening roll: who goes first */
.order-list { list-style: none; padding: 0; margin: 10px auto; display: grid; gap: 6px; max-width: 340px; text-align: left; }
.order-list li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 8px; align-items: center; background: #fff; border-radius: 10px; padding: 6px 10px; border-left: 6px solid #888; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.order-list li img { height: 30px; justify-self: center; }
.order-list li .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-list li .tot { font-size: 22px; min-width: 28px; text-align: right; }
.order-list li small { opacity: .7; min-width: 54px; text-align: right; }
.order-list li.turn { background: #fff7dc; }
.order-list li.lead .tot { color: #1b7d3a; }
.order-list li.out { opacity: .45; }

/* Shared games: invite + notifications */
.seat-list button.taken { opacity: .6; }
.notify .steps { text-align: left; margin: 8px auto; padding-left: 22px; max-width: 320px; line-height: 1.45; }
.notify .steps li { margin: 4px 0; }
.notify .ios-share { display: inline-block; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px; font-size: 13px; }

/* Instant replay of the other players' moves */
#replay-bar { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: rgba(20,20,20,.88); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: 14px; max-width: calc(100vw - 24px); }
#replay-bar[hidden] { display: none; }
#replay-bar .rp-dot { width: 10px; height: 10px; border-radius: 50%; background: #e2231a; flex: none; animation: rp-blink 1.2s infinite; }
#replay-bar .rp-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; padding-right: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#replay-bar .rp-txt small { opacity: .75; font-size: 11px; }
#replay-bar button { display: inline-flex; flex-direction: row; align-items: center; white-space: nowrap; line-height: 1; min-width: 0; width: auto; padding: 8px 12px; min-height: 0; font-size: 13px; border-radius: 999px; background: #333; color: #fff; border: 1px solid #555; box-shadow: none; }
#replay-bar button.on { background: #b88a00; border-color: #b88a00; }
@keyframes rp-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #replay-bar .rp-dot { animation: none; } }

/* ---------- Game over: podium, awards ---------- */
.gameover { position: relative; overflow: hidden; }
.gameover h2 { margin: 4px 0 2px; }
.gameover > .muted { margin: 0 0 10px; }
.win-banner .podium img { width: 48px; height: 48px; object-fit: contain; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 6px auto 10px; max-width: 420px; }
.podium .step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.podium .step b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .step small { font-size: 11px; color: var(--muted); line-height: 1.2; min-height: 2.4em; }
.podium .block { width: 100%; border-radius: 8px 8px 0 0; border-top: 5px solid #888; background: linear-gradient(#efe6cf, #dccfa9);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; color: #5a4512; }
.podium .p1 .block { height: 74px; background: linear-gradient(#ffe58a, #e9bf2e); }
.podium .p2 .block { height: 52px; }
.podium .p3 .block { height: 38px; }
.podium .p1 img { width: 64px; height: 64px; animation: winner-bob 1.6s ease-in-out infinite; }
@keyframes winner-bob { 50% { transform: translateY(-6px); } }
.gameover .rest { text-align: left; margin: 0 auto 8px; max-width: 360px; font-size: 14px; }
.aw-h { margin: 10px 0 6px; text-align: left; }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; text-align: left; }
.award { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.award .ic { font-size: 24px; flex: none; }
.award b { display: block; font-size: 13px; }
.award small { display: block; font-size: 12px; color: var(--muted); line-height: 1.25; }
.go-chart { text-align: left; margin: 10px 0 4px; }
.go-chart summary { cursor: pointer; font-weight: 700; }
.go-btns { flex-wrap: wrap; justify-content: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .podium .p1 img { animation: none; } }

/* ---------- Leaderboard ---------- */
.leaders { max-width: 560px; }
.lb-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.lb-tabs button { flex: 1; padding: 8px 6px; background: #eee; box-shadow: none; font-size: 14px; }
.lb-tabs button.on { background: linear-gradient(#f8e7b9, #e8c977); box-shadow: 0 2px 0 #a8863a; }
table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lb th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 4px; border-bottom: 1px solid var(--line); }
table.lb td { padding: 6px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.lb tr.lead td { background: #fff6d6; }
table.lb td.nm { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
table.lb td.nm img { width: 24px; height: 24px; object-fit: contain; }
.streak { font-size: 12px; font-weight: 800; color: #b14a00; }
.recent { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
.recent .rg { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 14px; }
.recent .rg img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.recent .rg small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 420px) { table.lb th:nth-child(6), table.lb td:nth-child(6) { display: none; } }