:root {
  color-scheme: dark;
  --bg: #15181c; --fg: #e4e6e9; --muted: #9aa1a9;
  --card: #20242a; --raised: #2a2f36; --line: #353b43; --line-soft: #2b3037;
  --accent: #4a8fd9; --danger: #d64545; --warn: #f0a13a;
  --board: #cfe5cf; --cell: #fbfbf7; --cell-fg: #222; --cell-muted: #555; --cell-line: #4a5058; --mort: #ddd;
  --radius: 4px; /* every box and button, matching the turn list */
  --money: #9be89b; --build: #1a7f37; --hotel: #c53030; --chance: #ee8a43; --chest: #4482c6;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 Georgia, "Times New Roman", serif; background: var(--bg) url("images/dark-wood-darker.webp") center / cover fixed; color: var(--fg); }
/* Firelight from an unseen fireplace off the top right corner, behind everything */
#hearth { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#hearth .glow { position: absolute; top: -18vmax; right: -18vmax; width: 45vmax; height: 45vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,80,30,.09), rgba(230,40,15,.04) 45%, transparent);
  animation: flicker 4.3s infinite; }
#hearth .glow + .glow { width: 32vmax; height: 32vmax; top: -13vmax; right: -13vmax; background: radial-gradient(closest-side, rgba(255,110,40,.07), transparent); animation-duration: 2.9s; animation-direction: reverse; }
@keyframes flicker { 0%, 100% { opacity: .85; } 12% { opacity: 1; } 21% { opacity: .7; } 33% { opacity: .95; } 47% { opacity: .75; } 58% { opacity: 1; } 71% { opacity: .8; } 84% { opacity: .92; } }
#hearth .ember { position: absolute; top: 0; right: 0; width: 3px; height: 3px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px 2px rgba(255,120,30,.6); }
@media (prefers-reduced-motion: reduce) { #hearth .glow { animation: none; } }
h1 { margin: 16px 0; text-align: center; letter-spacing: 2px; }
h2 { font-size: 16px; margin: 0 0 8px; }
h3 { font-size: 14px; margin: 0 0 6px; }
button { font: inherit; padding: 6px 12px; margin: 2px; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; }
button.secondary { background: var(--raised); color: var(--fg); }
button.plain { background: none; color: var(--fg); }
button.danger { background: var(--danger); }
button.accept { background: var(--build); }
button.counter, button.warn { background: #e0b81f; color: #222; }
button:disabled { opacity: .45; cursor: default; }
input, select { font: inherit; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--fg); }
input[type=number] { width: 90px; }
label { display: block; margin: 4px 0; }
.card { background: var(--card); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.money { color: var(--money); }
#center .money, .face .money { color: var(--build); } /* light green would vanish on the pale board and card faces */
button:not(.secondary) .money { color: inherit; } /* and on the colored buttons */
.cash-delta { margin-left: .3em; font-size: 2em; font-weight: 700; line-height: 0; vertical-align: -.15em; } /* line-height 0 so it overflows its row rather than growing it */
.money.short { color: var(--danger); } /* cash net of an unpaid debt */
.cash-delta.down { color: var(--danger); }
.cash-delta.up { color: var(--money); }
/* In the player list and your own box it hangs past the right edge of the side column. #side, not the clipped
   list or row, is its containing block, so it escapes their overflow; with top auto it stays level with its own row. */
#turns .cash-delta, #me .cash-delta { position: absolute; left: 100%; margin-left: 12px; white-space: nowrap; pointer-events: none; }
.hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.plain { list-style: none; margin: 0; padding: 0; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(255,255,255,.35); }
.chip { display: inline-block; width: 10px; height: 14px; margin-right: 2px; border: 1px solid rgba(255,255,255,.25); vertical-align: middle; }
.chip.m { opacity: .35; }
.swatches { margin: 8px 0; }
.swatches label { display: inline-block; margin: 0 4px 0 0; }
.swatches input { display: none; }
.swatches span { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.swatches input:checked + span { border-color: var(--fg); }
.swatches input:disabled + span { opacity: .15; cursor: default; }

#lobby { max-width: 520px; margin: 0 auto; padding: 0 16px 16px; }
#lobby-players li { padding: 4px 0; }

#game { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; align-items: flex-start; justify-content: center; }
#board { --B: min(96vw, 94vh, 860px); position: relative; display: grid; grid-template-columns: 1.4fr repeat(9, 1fr) 1.4fr; grid-template-rows: 1.4fr repeat(9, 1fr) 1.4fr;
  width: var(--B); aspect-ratio: 1; background: var(--board); border: 2px solid var(--cell-line); }
#game-acts { margin-top: auto; }
#game-acts .row { display: flex; align-items: center; justify-content: flex-end; }
#game-acts button.small { padding: 3px 8px; font-size: 13px; }
#game-acts:not(:empty) { margin-bottom: 8px; }
#trade-act h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#trade-act .handshake { height: 1.6em; aspect-ratio: 600 / 172; object-fit: cover; } /* cropped to the art's middle band */
#trade-act li { margin: 4px 0; }
#trade-act li:last-child { margin-bottom: 0; }
#trade-act button { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 6px 10px; text-align: left; }
#trade-act .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#turns { font-size: 20px; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
#turns li { height: 64px; overflow: hidden; padding: 6px 12px; line-height: 1.25; border-bottom: 1px solid var(--line); } /* a stats line and one row of chips */
#turns .who { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#turns .who .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#turns li button { padding: 1px 8px; margin: 0; font-size: 15px; }
#turns .who .dot { width: 20px; height: 20px; flex: none; }
#turns li .hint { font-size: 15px; margin: 0; }
#turns .chip { width: 8px; height: 15px; margin-right: 1px; vertical-align: top; } /* narrow enough that all 28 properties fit in one row */
#turns .chips { height: 17px; margin-top: 5px; line-height: 17px; white-space: nowrap; }
#turns li:last-child { border-bottom: 0; }
#turns li[data-act] { cursor: pointer; }
#turns li[data-act]:hover { background: var(--raised); }
#turns li.turn[data-act]:hover { background: #4a4220; }
#turns li.turn { background: #3b3518; box-shadow: inset 4px 0 0 #f6c90e; }
#turns li.turn .who { font-weight: 700; }
#turns li.out { opacity: .45; }
#turns li.out .who { text-decoration: line-through; }
#side { position: relative; width: 360px; max-width: 100%; align-self: stretch; display: flex; flex-direction: column; } /* as tall as the board, so the turn list sits level with its bottom */
.modal > .card, #side .card, #turns { border: 6px double #5c636b; } /* every popup and side box gets a double rule */
#side #trade-act .card, .modal > .card.offer, .modal > .card.trade-card { border-color: #8b5a2b; } /* the trade box and popups' double rule in brown */
.cell { position: relative; border: 1px solid var(--cell-line); background: var(--cell); color: var(--cell-fg); overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; text-align: center; font-size: clamp(7px, 1.05vw, 11px); line-height: 1.1; cursor: pointer; }
.cell:hover { outline: 2px solid var(--accent); z-index: 2; }
.cell .strip { width: 100%; height: 22%; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cell .nm { padding: 1px 3px; max-width: 100%; box-sizing: border-box; font-weight: 600; }
.cell:not(.corner) > .nm:first-child { margin-top: .6em; } /* no colour strip above, so keep the label off the edge */
.cell .pr { color: var(--cell-muted); }
.cell.corner { justify-content: center; font-weight: 800; font-size: clamp(8px, 1.2vw, 13px); }
.cell.corner .nm { font-weight: inherit; }
.cell.go { background: #2e9e4f; }
.cell.go { color: #fff; }
.cell.chance { background: var(--chance); color: #fff; }
.cell.chest { background: var(--chest); color: #fff; }
.cell.parking { background: #bfe3f5; }
.cell.gotojail { background: #868b93; }
.cell.station, .prop-head.station, .tprop.station { background: #b8d8d6; } /* light tint of the sign's teal (#01726e) */
.cell.power, .prop-head.power, .tprop.power { background: #fbf1c2; } /* light tint of the bulb's yellow */
.cell.water, .prop-head.water, .tprop.water { background: #d4e9f7; } /* light tint of the drop's blue */
.cell.tax { background: #eba59d; } /* light red */
.cell .icon { width: 55%; height: auto; max-height: 50%; margin: auto 0; transform: translateY(-15%); flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cell .icon .fill { fill: currentColor; stroke: none; }
.cell img.icon { flex: 1 1 0; min-height: 0; width: 70%; max-height: none; margin: 2px 0 6px; object-fit: contain; transform: none; } /* fills what the label leaves, so short side squares don't squash it */
.cell.side img.icon { flex: none; height: 42%; margin: auto 0; }
.cell.side img.station { flex: 1 1 0; height: auto; margin: 1px 0 3px; } /* as big as fits between name and price */
.cell img.station + .pr, .cell img.tax + .pr { margin-bottom: 1em; } /* lift the price off the bottom edge */
.cell.side img.station + .pr, .cell.side img.power + .pr, .cell.side img.water + .pr { margin-bottom: calc(.4em + 5px); } /* clear the owner bar too */
.cell.go .nm { font-size: clamp(11px, 1.8vw, 20px); letter-spacing: 1px; }
.cell.parking .nm, .cell.gotojail .nm { font-size: clamp(9px, 1.4vw, 16px); letter-spacing: 1px; text-transform: uppercase; } /* GO's size would overflow PARKING */
.cell.gotojail .nm { font-size: calc(var(--B) * .0125); white-space: nowrap; } /* scales with the board so GO TO JAIL keeps to one line */
.cell.parking .nm { font-size: clamp(8px, 1.25vw, 14px); }
.cell.parking .nm, .cell.gotojail .nm { margin-top: .6em; } /* the picture fills the rest, so the label would sit on the top edge */
.cell.go .arrow { width: 50%; height: auto; margin-top: 12%; transform: translateY(-10%); flex: none; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cell.jail .jailbox { position: absolute; top: 0; right: 0; width: 76%; height: 76%; box-sizing: border-box; background: #868b93;
  border-left: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); }
.cell.jail .inmates { position: absolute; inset: 0; overflow: hidden; }
.cell.jail .inmates .dot { position: absolute; margin: 0; transform: translate(-50%, -50%); }
.cell.jail .bars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; fill: none; stroke: #1a1a1a; stroke-width: 3; }
.cell.jail .bars .lock { fill: #1a1a1a; stroke: none; }
.cell.jail .bars .keyhole { fill: #c8ccd2; stroke: none; }
.cell.jail .toks { bottom: 3px; left: 3px; justify-content: flex-start; flex-wrap: wrap-reverse; z-index: 3; } /* visitors in the L, in front of the box */
.cell .owner { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.cell.mort { background: repeating-linear-gradient(45deg, var(--cell), var(--cell) 5px, var(--mort) 5px, var(--mort) 10px); }
.cell .bld, .tprop .bld, .prop-head .bld { color: var(--build); font-weight: 700; letter-spacing: -1px; line-height: 1; white-space: nowrap;
  text-shadow: -1px 0 #1a1a1a, 1px 0 #1a1a1a, 0 -1px #1a1a1a, 0 1px #1a1a1a; } /* outlined so it shows on any strip colour, green and red included */
.cell .bld:not(.hotel), .tprop .bld:not(.hotel) { font-size: 1.4em; }
.cell .bld.hotel, .tprop .bld.hotel, .prop-head .bld.hotel { width: 50%; height: 65%; box-sizing: border-box; background: var(--hotel); border: 1px solid #1a1a1a; } /* a big red block, drawn rather than spelled out */
.cell .toks { position: absolute; bottom: 5px; left: 0; right: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.cell .toks .dot, .cell .inmates .dot { width: clamp(12px, 2vw, 20px); height: clamp(12px, 2vw, 20px); box-sizing: border-box; border: 3px solid #1a1a1a; margin: 0 -2px;
  box-shadow: 0 2px 5px rgba(0,0,0,.55); }
#mover { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; width: clamp(14px, 2.4vw, 26px); height: clamp(14px, 2.4vw, 26px);
  border: 3px solid #1a1a1a; box-sizing: border-box; box-shadow: 0 3px 8px rgba(0,0,0,.45), 0 0 12px 3px rgba(246,201,14,.8); }
#mover[hidden] { display: none; }
#center { grid-column: 2 / 11; grid-row: 2 / 11; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; color: var(--cell-fg); }
#center .dice { display: flex; justify-content: center; gap: .2em; font-size: clamp(30px, 6vw, 64px); height: 1em; margin: 8px 0 14px; transition: font-size .2s ease-out; }
#center .dice.big { font-size: clamp(60px, 13vw, 140px); }
#center .die { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 1em; height: 1em; padding: .12em;
  box-sizing: border-box; background: linear-gradient(145deg, #fff, #e9e9e4); border: 1px solid #bbb; border-radius: .2em;
  box-shadow: 0 .05em .12em rgba(0,0,0,.35), inset 0 -.03em .05em rgba(0,0,0,.12); }
#center .die[hidden] { display: none; }
#center .die i { width: .17em; height: .17em; place-self: center; border-radius: 50%; visibility: hidden; }
#center .die i.on { visibility: visible; background: #222; box-shadow: inset 0 .02em .03em rgba(255,255,255,.25); }
#center .dice.ready { cursor: pointer; }
#center .dice.ready .die { animation: dice-ready 1.4s ease-in-out infinite; }
#center .dice.ready:hover .die, #center .dice.ready:focus-visible .die { transform: scale(1.08); }
#center .dice:focus-visible { outline: none; }
@keyframes dice-ready {
  0%, 100% { box-shadow: 0 .05em .12em rgba(0,0,0,.35), inset 0 -.03em .05em rgba(0,0,0,.12), 0 0 0 0 rgba(246,201,14,0); }
  50% { box-shadow: 0 .05em .12em rgba(0,0,0,.35), inset 0 -.03em .05em rgba(0,0,0,.12), 0 0 .12em .06em rgba(246,201,14,.9); }
}
@media (prefers-reduced-motion: reduce) {
  #center .dice { transition: none; }
  #center .dice.ready .die { animation: none; box-shadow: 0 .05em .12em rgba(0,0,0,.35), 0 0 .1em .05em rgba(246,201,14,.9); }
}
#dev-dice { display: flex; gap: 6px; margin: -6px 0 10px; }
#dev-dice[hidden] { display: none; }
#dice-box { position: relative; }
#status { max-width: 70%; font-size: clamp(12px, 1.6vw, 15px); }
#status:empty { display: none; }
#status .notice { text-align: left; color: var(--fg); }
#status .hint { margin: 4px 0; }
#center .dice.spent .die { filter: grayscale(1) brightness(.7); opacity: .45; }
#center .end-turn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#center .end-turn button { margin: 0; padding: 8px 18px; white-space: nowrap; font-size: clamp(13px, 1.7vw, 16px); animation: end-turn-pulse 1.4s ease-in-out infinite; }
@keyframes end-turn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { #center .end-turn button { animation: none; } }
#center .deck { position: relative; flex: none; width: calc(var(--B) * .25); height: calc(var(--B) * .15); margin: calc(var(--B) * .01) 0; }
#center .deck.chance { margin-bottom: auto; }
#center .deck.chest { margin-top: auto; }
.deck .back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5em; border-radius: calc(var(--B) * .012);
  border: calc(var(--B) * .004) solid #fff; color: #fff; font-weight: 800; letter-spacing: 1px;
  font-size: calc(var(--B) * .018); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.deck .back span { font-size: 1.8em; }
.deck.chest .back { flex-direction: column; gap: .2em; }
.deck.chest .back img { height: 55%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.deck.chance .back { background: var(--chance); }
.deck.chest .back { background: var(--chest); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #fffdf6; color: var(--cell-fg);
  border-radius: calc(var(--B) * .012); font-size: calc(var(--B) * .0135); }
.face .hd { padding: .3em; color: #fff; font-weight: 800; letter-spacing: 1px; text-align: center; }
.face.chance .hd { background: var(--chance); }
.face.chest .hd { background: var(--chest); }
.face .hd img { height: 1.6em; margin: -.3em .3em -.3em 0; vertical-align: middle; }
.face .tx { flex: 1; display: flex; align-items: center; justify-content: center; padding: .3em .6em; text-align: center; line-height: 1.25; }
.face .tx p { margin: 0; } /* one flex item, so the tinted amounts flow inline with the text */
#buy-offer { grid-column: 2 / 11; grid-row: 2 / 11; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8%;
  background: rgba(0,0,0,.55); } /* covers the middle of the board, dice and decks included */
#buy-cash { margin-bottom: 10px; color: #fff; font-size: clamp(15px, 2.2vw, 22px); font-weight: 700; text-shadow: 0 0 4px #000; } /* the buyer's cash, over the dimmed board above the deed */
#buy-cash .money { color: var(--money); }
#buy-offer > .card { width: 100%; max-width: 340px; margin: 0; font-size: clamp(13px, 1.7vw, 16px); }
/* a title deed: the buy offer and the property info share this look */
.deed { text-align: center; }
.deed .price { font-size: 2em; font-weight: 700; }
.deed .mortgage, .deed .mortgage .money { color: var(--danger); }
.deed table.rent { text-align: left; font-size: .9em; }
.deed .acts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.deed .acts button { margin: 0; padding: 8px 18px; }
.deed .acts button.go, .jail-card .acts button.go { background: var(--build); }
#buy-offer .acts button.danger { background: none; color: var(--danger); }
.deed .acts .line { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } /* one row of buttons */
.steady { display: inline-grid; justify-items: center; } /* both words share one cell, sized to the wider */
.steady > span { grid-area: 1 / 1; }
.steady > span + span { visibility: hidden; }
#flyer { inset: auto; left: 0; top: 0; z-index: 8; pointer-events: none; transform-origin: 0 0; width: calc(var(--B) * .25); height: calc(var(--B) * .15); }
#money { position: absolute; left: 0; right: 0; top: 50%; z-index: 7; width: fit-content; margin: 0 auto; transform: translateY(-50%); max-width: calc(var(--B) * .7); pointer-events: none; /* centered by the auto margins, sized to its rows */
  display: grid; grid-template-columns: minmax(0, max-content) auto minmax(0, max-content); align-items: center; gap: .5em .8em; padding: .7em .9em; border-radius: calc(var(--B) * .012); background: var(--card); color: var(--fg);
  box-shadow: 0 4px 14px rgba(0,0,0,.55); font-size: clamp(11px, 1.9vw, 18px); }
#money[hidden] { display: none; }
#money.fine { border: 6px double var(--danger); }
#money.gain { border: 6px double var(--money); }
#money.below-card { top: 61%; transform: none; } /* under the raised card */
#money .flow { display: contents; } /* its cells join the box's grid, so every row shares the name columns, each as wide as its longest name */
#money .party { display: flex; align-items: center; gap: .35em; min-width: 0; }
#money .party:last-child { justify-content: flex-end; }
#money .party b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#money .party .dot { flex: none; width: 1em; height: 1em; }
#money .party .cash { flex: none; margin-left: .2em; }
#money .track { position: relative; width: calc(var(--amt-w) * 2 + 6em); height: 1.6em; }
#money .track i { position: absolute; left: var(--amt-w); right: var(--amt-w); top: 50%; aspect-ratio: 600 / 59; transform: translateY(-50%) scaleX(-1); opacity: .5; background: var(--fg);
  -webkit-mask: url("images/arrow.png") center / contain no-repeat; mask: url("images/arrow.png") center / contain no-repeat; } /* inset by the amount's width so it fits either side; the art points left, so mirrored */
#money .rtl .track i { transform: translateY(-50%); } /* points at the receiver */
#money .amt { position: absolute; top: 0; padding: 0 .3em; font-weight: 800; font-size: 1.15em; line-height: 1.4; white-space: nowrap; }
#money .money { color: var(--money); } /* the light green, now that the box is dark */
#money .change { grid-column: 2 / -1; font-weight: 800; font-size: 1.4em; line-height: 1; } /* no arrow or bank, so it takes the rest of the row */
#money .change.down { color: var(--danger); }

#me .me-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } /* cash in the top right corner */
#me .cash { font-size: 22px; font-weight: 700; line-height: 1; white-space: nowrap; }
#me .trade-props { margin: 8px 0 2px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } /* five to a row */
#me .tprop { font-size: 10px; }
#status .notice, .player-card .notice { background: #3a2c16; border-left: 4px solid var(--warn); padding: 6px 8px; margin: 8px 0; }
#status .notice.bad, .player-card .notice.bad { background: #3d1c1e; border-left-color: var(--danger); }
#log { max-height: 220px; overflow-y: auto; font-size: 12px; }
#log li { padding: 2px 0; border-bottom: 1px solid var(--line-soft); }
#log-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; }
#log-toggle .log-icon { height: 2.2em; margin: -.4em 0 -.4em auto; order: 1; }
#log-toggle::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(.1em) rotate(-135deg); }
#log-card.collapsed #log-toggle::after { transform: translateY(-.15em) rotate(45deg); }
#log-card.collapsed #log li:not(:first-child) { display: none; }
#log-card.collapsed #log li { border-bottom: none; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
.modal[hidden] { display: none; }
.modal > .card { max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal > .card.deed { max-width: 340px; }
.modal > .card.deed.set { max-width: 1000px; width: fit-content; } /* hug the deeds, no dead space beside them */
.modal > .card.deed.set > .hint { contain: inline-size; } /* wrap to the deeds' width rather than widen the card */
/* a whole color set: its deeds side by side, the one clicked ringed */
.deeds { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.deeds > .deed { flex: 0 1 300px; width: 300px; display: flex; flex-direction: column; background: var(--raised); border: 2px solid transparent; border-radius: var(--radius); padding: 8px; }
.deeds > .deed .acts { margin-top: auto; padding-top: 12px; }
.deed.m { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,.07) 5px 10px); } /* mortgaged: striped like its board space */
.modal > .card.offer, .modal > .card.trade-card { max-width: clamp(560px, 100vw - 2 * 292px, 860px); text-align: center; } /* narrowed to leave room for the hovered deed on its left */
.offer h2 { margin-top: 0; }
/* the auction popup: the property's card beside the current bid and the bid buttons */
.modal > .card.auction-card { max-width: 640px; display: flex; flex-wrap: wrap; gap: 16px; border-color: var(--warn); }
.auction-card > .deed { flex: 1 1 240px; display: flex; flex-direction: column; }
.auction-card > .deed > table.rent { flex: 1; margin-bottom: 0; } /* the rent rows spread to the bid side's height, no gap below */
#auction-bid { flex: 1 1 240px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
/* the gavel is a black silhouette, so it's used as a mask and tinted to match the label */
#auction-bid .gavel { align-self: center; width: 96px; aspect-ratio: 591 / 351; margin-bottom: 8px; background: var(--warn);
  -webkit-mask: url("images/gavel.png") center / contain no-repeat; mask: url("images/gavel.png") center / contain no-repeat; }
#auction.done .gavel { background: var(--money); }
#auction-info .label { color: var(--warn); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
#auction.done .card { border-color: var(--money); }
#auction.done #auction-info .label { color: var(--money); }
#auction-info .lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; margin-bottom: 6px; } /* the bidder beside the bid */
#auction-info .high { font-size: 3.4em; font-weight: 700; line-height: 1.1; color: var(--money); }
#auction-info .by { font-size: 1.3em; font-weight: 700; }
#auction-info .by .dot { width: 16px; height: 16px; }
#auction-info .hint { margin-top: 4px; }
#auction-info .still-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; } /* the players still bidding, side by side */
#auction-controls { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
#auction-controls .line { display: flex; gap: 8px; }
#auction-controls .line > * { flex: 1; min-width: 0; margin: 0; }
#auction-controls button { margin: 0; padding: 8px 12px; }
#auction-controls #bid-amount { width: auto; margin: 0; } /* the amount spans the row of buttons below it */
#auction-controls [data-inc] { background: none; color: var(--accent); }
#auction-controls #bid-btn { background: var(--warn); color: #222; } /* matches the popup's outline */
#auction-controls #pass-btn { align-self: center; background: none; color: var(--danger); }
@media (max-width: 560px) { #auction-bid { order: -1; } } /* stacked on a phone, the bid comes before the card */
.modal > .card.player-card { max-width: 480px; }
.player-card h2 { margin-top: 0; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 6px; }
.pstat { background: var(--raised); border-radius: var(--radius); padding: 6px 10px; font-size: 18px; font-weight: 700; }
.pstat .hint { margin: 0; font-size: 12px; font-weight: 400; }
.player-card .trade-props { margin-top: 10px; }
.player-card .acts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.player-card .acts button { margin: 0; }
@media (max-width: 400px) { .pstats { grid-template-columns: repeat(2, 1fr); } }
.modal > .card.debt-card { border-color: var(--danger); }
.debt-card .short { color: var(--danger); }
.modal > .card.jail-card { max-width: 380px; text-align: center; }
.jail-card .cuffs { display: block; height: 96px; margin: 4px auto 8px; filter: invert(1) brightness(.9); } /* black artwork, lightened for the dark card */
.jail-card h2 { justify-content: center; }
.debt-cash { font-size: 40px; font-weight: 700; text-align: center; line-height: 1.2; margin: 6px 0; }
.offer .acts, .trade-card .acts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.offer .acts button, .trade-card .acts button { margin: 0; }
.prop-head { padding: 10px; border-radius: var(--radius); color: #fff; font-weight: 700; margin-bottom: 8px; text-shadow: 0 0 3px #000; }
.prop-head .bld { height: 1em; margin-top: 4px; font-size: 1.9em; letter-spacing: 1px; } /* a fixed height, so an empty row holds the same room */
.prop-head .bld.hotel { width: 1.26em; height: .6em; margin: calc(4px + .2em) auto .2em; } /* same overall height as a row of houses */
.prop-head.station, .prop-head.power, .prop-head.water { color: var(--cell-fg); text-shadow: none; } /* light tints, so dark text */
table.rent { border-collapse: collapse; width: 100%; margin: 6px 0; }
table.rent td { padding: 2px 4px; border-bottom: 1px solid var(--line-soft); }
table.rent td:last-child { text-align: right; white-space: nowrap; }
table.rent td.note { text-align: left; white-space: nowrap; }
table.rent tr.cur td { background: #3b3518; font-weight: 700; }
.trade-view { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; text-align: left; }
.trade-side { display: flex; flex-direction: column; min-width: 0; background: var(--raised); border-radius: var(--radius); padding: 10px; }
.trade-arrow { align-self: center; width: 110px; aspect-ratio: 600 / 172; object-fit: cover; } /* cropped to the art, which fills only the middle band of its square image */
.trade-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.trade-view .trade-props { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; } /* smaller tiles in a trade, more to a row */
.trade-view .tprop { font-size: 9.5px; }
/* a property in a trade: a little title deed, ringed once picked */
.tprop { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; background: var(--cell); color: var(--cell-fg);
  border: 2px solid transparent; border-radius: var(--radius); font-size: 11px; line-height: 1.15; text-align: center; aspect-ratio: 5 / 7; } /* upright, like a deed */
button.tprop { cursor: pointer; }
button.tprop:hover:not(:disabled) { border-color: var(--accent); }
.tprop .strip { height: 22%; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tprop .nm { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px 3px; overflow-wrap: anywhere; }
.tprop.m .nm { background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--mort) 5px, var(--mort) 10px); }
.tprop.on, button.tprop.on:hover { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn); }
.tprop.on::after { content: "✓"; position: absolute; top: 0; right: 3px; color: #fff; font-weight: 700; text-shadow: 0 0 3px #000; }
.trade-view.ro .tprop:not(.on) { opacity: .35; }
/* a whole set owned (colors, stations or utilities): one deed with the rest of the set peeking out behind it */
.tprop.stack { overflow: visible; margin: 0 6px 6px 0; border-color: #1a1a1a66; }
/* --face is the tint of the cards behind; behind Power Company sits Water Works */
.tprop.stack { --face: var(--cell); }
.tprop.stack.station { --face: #b8d8d6; }
.tprop.stack.power { --face: #d4e9f7; }
.tprop.stack.s2 { margin: 0 3px 3px 0; box-shadow: 3px 3px 0 -1px var(--face), 3px 3px 0 0 #1a1a1a99; }
.tprop.stack.s3 { box-shadow: 3px 3px 0 -1px var(--face), 3px 3px 0 0 #1a1a1a99, 6px 6px 0 -1px var(--face), 6px 6px 0 0 #1a1a1a99; }
.tprop.stack.s4 { box-shadow: 2px 2px 0 -1px var(--face), 2px 2px 0 0 #1a1a1a99, 4px 4px 0 -1px var(--face), 4px 4px 0 0 #1a1a1a99,
  6px 6px 0 -1px var(--face), 6px 6px 0 0 #1a1a1a99; } /* four deeds in the same room as three */
.tprop.stack .strip { border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
.tprop.stack .nm { border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); }
.tprop.stack:not(:has(.strip)) .nm { border-radius: calc(var(--radius) - 2px); }
.tprop .cnt { position: absolute; right: 3px; bottom: 2px; font-size: .9em; font-weight: 700; opacity: .6; }
/* the deed (or a set's deeds) of the property hovered in a trade, a player's details or your own box, floated left of that card */
#hover-deed { position: fixed; z-index: 11; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; pointer-events: none; }
#hover-deed[hidden] { display: none; }
#hover-deed > .card { flex: none; width: 260px; margin: 0; border: 6px double #5c636b; }
#hover-deed table.rent td.note { white-space: normal; } /* the long note wraps in this narrower deed */
.trade-cash { margin-top: auto; padding-top: 10px; } /* pinned to the bottom, level across both sides */
.trade-cash input.money, .trade-cash input.money:disabled { color: var(--money); -webkit-text-fill-color: var(--money); }
.trade-cash input[type=range] { display: block; width: 100%; margin: 4px 0 0; accent-color: var(--money); }
.trade-side input:disabled { opacity: 1; color: var(--fg); } /* a received offer's amounts stay readable */
.trade-view.ro input[type=number] { appearance: textfield; } /* no spinner arrows on a received offer */
.trade-view.ro input[type=number]::-webkit-inner-spin-button, .trade-view.ro input[type=number]::-webkit-outer-spin-button { appearance: none; margin: 0; }
@media (max-width: 640px) {
  .trade-view { grid-template-columns: 1fr; }
  .trade-arrow { justify-self: center; width: 90px; }
}

#toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: var(--danger); color: #fff; padding: 8px 14px; border-radius: var(--radius); z-index: 20; max-width: 90vw; }
#toast[hidden] { display: none; }
[hidden] { display: none !important; }