/* Tapu — art direction: "Turkey edition of a printed board game".
   A green felt table, the classic mint board, heavy black print lines, hard offset
   shadows (like die-cut cardboard), one condensed display face, flat bold colours.
   Monopoly red for the logo and the main action, orange Şans and blue Kamu Fonu decks,
   green houses, red hotels. No images: CSS + inline SVG only, hard shadows (cheap on phones). */
:root {
  --felt: #173f33;
  --felt-2: #1f5543;
  --board: #d2e8d4;          /* classic board mint */
  --card: #fffaf0;           /* cream card stock */
  --card-2: #f3ead6;
  --ink: #161616;
  --ink-2: #3b3b3b;
  --muted: #7a7466;
  --red: #e2342b;
  --red-d: #a51d16;
  --chance: #f39324;
  --chest: #3f9fd8;
  --green: #2d9b4e;
  --good: #1f8a48;
  --danger: #d4362b;
  --gold: #f4c542;
  --line: 2px solid var(--ink);
  --pop: 0 3px 0 var(--ink);
  --pop-lg: 0 5px 0 var(--ink);
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(130% 80% at 50% 0%, var(--felt-2), var(--felt) 70%) fixed, var(--felt);
  color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  font-feature-settings: "tnum" 1;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }
.gly { width: 1.3em; height: 1.3em; flex: none; }
i[data-icon], i[data-glyph] { display: inline-flex; font-style: normal; }

/* ---------------------------------------------------------------- buttons */
.btn {
  min-height: 50px; padding: 0 16px; border: var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); box-shadow: var(--pop);
  font: 700 15px/1.1 system-ui, sans-serif; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .06s, box-shadow .06s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .4; cursor: default; box-shadow: none; transform: translateY(3px); }
.btn.primary { background: var(--red); color: #fff; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; }
.btn.primary small { font-family: system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.btn.go { background: var(--green); color: #fff; }
.btn.quiet { background: transparent; box-shadow: none; border-color: transparent; }
.btn.quiet:active { transform: none; }
.btn.danger { color: var(--danger); }
.btn.primary.danger { color: #fff; }
.btn.small { min-height: 40px; font-size: 14px; padding: 0 12px; }
.btn.wide { width: 100%; }
.btn.big { min-height: 60px; font-size: 24px; box-shadow: var(--pop-lg); }
.btn.big:active { transform: translateY(5px); }
.btn .col { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.btn small { font-size: 12px; font-weight: 700; opacity: .85; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; color: var(--ink); flex: none; }
.icon-btn .ico { width: 24px; height: 24px; stroke-width: 2.2; }
.link { background: none; border: 0; color: #e9f2ea; font-size: 14px; font-weight: 700; padding: 10px 6px; min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; opacity: .9; }

/* ------------------------------------------------------------- the logo */
.banner {
  display: inline-grid; place-items: center; margin: 0; padding: 2px; background: var(--red); border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink); border-radius: 6px;
}
.banner span {
  display: block; padding: 4px 22px 2px; border: 2px solid #fff; border-radius: 3px;
  font: 800 52px/1 var(--display); letter-spacing: .08em; color: #fff; text-shadow: 0 3px 0 var(--red-d);
}

/* ------------------------------------------------------------------ menus */
.screen { min-height: 100%; }
#menu, #lobby { padding: calc(var(--safe-t) + 8px) 16px calc(var(--safe-b) + 24px); }
.topnav { display: flex; align-items: center; justify-content: space-between; max-width: 440px; margin: 0 auto; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; color: #e9f2ea; text-decoration: none; background: none; border: 0; font-size: 15px; font-weight: 700; padding: 0 4px; }
.lang { display: flex; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.25); }
.lang button { min-width: 46px; min-height: 38px; border: 0; border-radius: 9px; background: transparent; font: 800 16px var(--display); letter-spacing: .06em; color: #cfe0d4; }
.lang button.on { background: var(--card); color: var(--ink); }
.menu-inner { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.hero { position: relative; display: grid; place-items: center; padding: 26px 0 6px; }
.hero .banner { transform: rotate(-6deg); animation: drop .5s cubic-bezier(.3,1.5,.5,1) backwards; position: relative; z-index: 1; }
.hero .banner span { font-size: 64px; }
.hero.small { padding: 14px 0 4px; } .hero.small .banner span { font-size: 40px; }
.hero-deck {
  position: absolute; top: 20px; width: 64px; height: 88px; border-radius: 8px; border: var(--line); box-shadow: 4px 4px 0 var(--ink);
  display: grid; place-items: center; color: #fff;
}
.hero-deck.chest { left: calc(50% - 150px); background: var(--chest); transform: rotate(-14deg); }
.hero-deck.chance { right: calc(50% - 150px); background: var(--chance); transform: rotate(12deg); }
.hero-deck .gly { width: 38px; height: 38px; }
.hero-deck b { font: 800 56px/1 var(--display); text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.edition { margin: 14px 0 0; font: 800 15px var(--display); letter-spacing: .3em; color: var(--gold); }
@keyframes drop { from { transform: translateY(-24px) rotate(-14deg); opacity: 0; } }
.tagline { text-align: center; color: #cfe0d4; margin: -6px 0 4px; font-size: 15px; font-weight: 600; }
.card-form { background: var(--card); border: var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--pop-lg); }
.field { display: flex; flex-direction: column; gap: 8px; }
.label { font: 800 15px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.input {
  width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; border: var(--line);
  background: #fff; color: var(--ink); font-size: 17px; font-weight: 700; outline: none;
  -webkit-user-select: text; user-select: text;
}
.input:focus { box-shadow: 0 0 0 3px var(--gold); }
.input.code { letter-spacing: .4em; text-align: center; font-size: 24px; font-family: var(--display); }
.row { display: flex; gap: 10px; }
.row .input { flex: 1; min-width: 0; }
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; min-height: 50px; border-radius: 12px; border: var(--line); background: #fff; color: var(--ink-2);
  font: 800 20px/1 var(--display); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: var(--pop); transition: transform .06s;
}
.seg button small { font: 600 11.5px system-ui, sans-serif; color: var(--muted); }
.seg button.on { background: var(--ink); color: #fff; transform: translateY(3px); box-shadow: none; }
.seg button.on small { color: #cfcfcf; }
.seg button:disabled { opacity: .35; }
.piece-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.piece-pick button {
  min-height: 78px; border-radius: 12px; border: var(--line); background: #fff; padding: 6px 2px 5px; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: var(--pop);
  font: 800 13px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; transition: transform .1s;
}
.piece-pick button .fig { width: 44px; height: 44px; filter: drop-shadow(0 2px 0 var(--ink)); }
.piece-pick button.on { background: color-mix(in srgb, var(--pc) 22%, #fff); transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--pc); }
.resume {
  display: flex; align-items: center; gap: 10px; justify-content: center; min-height: 54px; border-radius: 12px;
  border: 2px dashed var(--gold); background: rgba(0,0,0,.2); color: var(--gold); font: 800 18px var(--display); letter-spacing: .04em;
}
.menu-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 14px; }
.menu-links .ico { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: var(--card-2); }
.room-code { display: flex; align-items: center; gap: 12px; }
.room-code span { color: var(--muted); font: 800 14px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.room-code b { font: 800 40px/1 var(--display); letter-spacing: .18em; flex: 1; }
.room-players { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.room-players li { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 12px; border-radius: 12px; border: var(--line); background: #fff; }
.room-players li.empty { opacity: .55; border-style: dashed; }
.room-players .nm { flex: 1; font-weight: 800; }
.room-players .tag { font: 800 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#roomSettings { display: flex; flex-direction: column; gap: 14px; }
.hint { color: var(--muted); text-align: center; font-size: 14px; margin: 0; }
#lobby .hint.pulse { color: var(--ink-2); }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.lobby-msg { min-height: 20px; text-align: center; color: var(--gold); font-size: 15px; font-weight: 700; margin: 0; }
#lobby.busy .btn { opacity: .5; pointer-events: none; }

/* a player's badge: their figurine standing on a cream coin with a rim in their colour */
.tk {
  width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--card); color: var(--ink);
  display: inline-grid; place-items: center; font: 800 15px/1 var(--display); border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--pc, #888); overflow: hidden;
}
.tk .fig { width: 82%; height: 82%; margin-top: 4%; }
.tk.sm { width: 26px; height: 26px; border-width: 1.5px; box-shadow: inset 0 0 0 2px var(--pc, #888); }
.tk.bank { background: var(--gold); }
.pn { font-weight: 800; }

/* ------------------------------------------------------------------- game */
#game { height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding-top: var(--safe-t); overflow: hidden; max-width: 100vw; }
.side { display: contents; }
.players-wrap { order: -1; padding: 10px 8px 0; }
.players { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 7px; }
.pchip {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 5px 9px 5px 6px;
  border-radius: 12px; border: var(--line); background: var(--card); text-align: left; box-shadow: var(--pop);
  transition: transform .2s, box-shadow .2s, opacity .3s, background .2s;
}
.pchip.turn { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 var(--pc); }
.pchip.out { opacity: .45; filter: grayscale(1); }
.pchip .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; flex: 1; }
.pchip .nm { font: 700 15px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip .mn { font: 800 19px/1.05 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip .me { position: absolute; left: 8px; top: -9px; font: 800 11px/1 var(--display); letter-spacing: .1em; padding: 3px 6px 2px; border-radius: 5px; background: var(--ink); color: #fff; font-style: normal; }
.pchip .badges { position: absolute; top: -9px; right: -5px; display: flex; gap: 3px; }
.pchip .badges i { display: inline-flex; align-items: center; gap: 1px; font-style: normal; font: 800 12px var(--display); background: var(--chance); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 7px; padding: 1px 4px; }
.pchip .badges .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.pchip.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: translateY(-2px) scale(1.05); } }
.pchip.hurt { animation: hurt .45s; }
@keyframes hurt { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.board-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px 8px 12px; container-type: size; }
.board {
  position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1;
  display: grid; grid-template-columns: 2fr repeat(9, 1fr) 2fr; grid-template-rows: 2fr repeat(9, 1fr) 2fr;
  gap: .3cqw; background: var(--ink); border: .9cqw solid var(--ink); border-radius: 1.6cqw;
  container-type: inline-size; box-shadow: 0 1.4cqw 0 #0b231c, 0 3cqw 5cqw rgba(0,0,0,.35);
}
.tile {
  position: relative; background: var(--board); color: var(--ink); overflow: hidden;
  font: 700 1.95cqw/1 var(--display); text-transform: uppercase; letter-spacing: .01em; cursor: pointer;
}
/* every square, from the inner edge out: colour band 16% | stand-pad 36% (landmark, pieces) | name + price */
.tile .band, .tile .pad, .tile .txt { position: absolute; }
.tile .band { background: var(--g); display: flex; align-items: center; justify-content: center; gap: .3cqw; }
.tile .pad { display: grid; place-items: center; }
.tile .txt { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .35cqw; padding: 0 2px; }
.tile.b .band { top: 0; left: 0; right: 0; height: 16%; border-bottom: .3cqw solid var(--ink); }
.tile.b .pad { top: 16%; left: 0; right: 0; height: 36%; }
.tile.b .txt { top: 52%; left: 0; right: 0; bottom: 8%; }
.tile.t .band { bottom: 0; left: 0; right: 0; height: 16%; border-top: .3cqw solid var(--ink); }
.tile.t .pad { bottom: 16%; left: 0; right: 0; height: 36%; }
.tile.t .txt { bottom: 52%; left: 0; right: 0; top: 8%; }
.tile.l .band { right: 0; top: 0; bottom: 0; width: 16%; border-left: .3cqw solid var(--ink); flex-direction: column; }
.tile.l .pad { right: 16%; top: 0; bottom: 0; width: 36%; }
.tile.l .txt { right: 52%; top: 0; bottom: 0; left: 8%; }
.tile.r .band { left: 0; top: 0; bottom: 0; width: 16%; border-right: .3cqw solid var(--ink); flex-direction: column; }
.tile.r .pad { left: 16%; top: 0; bottom: 0; width: 36%; }
.tile.r .txt { left: 52%; top: 0; bottom: 0; right: 8%; }
.tile .nm { hyphens: manual; -webkit-hyphens: manual; max-width: 100%; line-height: 1.02; }
.tile .pr { font-weight: 600; font-size: .92em; color: var(--ink-2); }
/* the landmark: one-colour line art in the group colour, the pieces stand on it */
.tile .pad .art { width: 100%; height: 100%; max-width: 7cqw; max-height: 7cqw; }
.tile .pad::before { content: ""; position: absolute; inset: 10% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); }
.tile .pad > * { position: relative; }
.tile .pad .ic { width: 4.4cqw; height: 4.4cqw; stroke-width: 2.1; color: var(--ink); }
.tile.chest .pad .ic { color: var(--chest); }
.tile .q { font: 800 5.4cqw/1 var(--display); color: var(--chance); -webkit-text-stroke: .28cqw var(--ink); paint-order: stroke; }
/* owner: a flag in the owner's colour on the outer edge */
.tile .own { position: absolute; background: repeating-linear-gradient(45deg, var(--oc) 0 .8cqw, #fff .8cqw 1.3cqw); transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.tile.owned .own { transform: scale(1); }
.tile.b .own { left: 0; right: 0; bottom: 0; height: 7%; border-top: .25cqw solid var(--ink); }
.tile.t .own { left: 0; right: 0; top: 0; height: 7%; border-bottom: .25cqw solid var(--ink); }
.tile.l .own { left: 0; top: 0; bottom: 0; width: 7%; border-right: .25cqw solid var(--ink); }
.tile.r .own { right: 0; top: 0; bottom: 0; width: 7%; border-left: .25cqw solid var(--ink); }
/* houses green, hotel red — like the real thing */
.h { display: inline-block; width: 1.75cqw; height: 1.6cqw; background: var(--ink); clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); position: relative; }
.h::after { content: ""; position: absolute; inset: .25cqw; background: #34b85a; clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%); }
.h.hotel { width: 3cqw; height: 1.8cqw; clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%); }
.h.hotel::after { background: #e5352c; clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%); }
.h.pop { animation: popin .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes popin { from { transform: scale(0); } }
.tile.mort::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(212,54,43,.28) 0 .35cqw, transparent .35cqw 1.1cqw); }
.tile.mort .nm, .tile.mort .pr, .tile.mort .art { opacity: .4; }
.tile.flash { animation: flash .8s; }
@keyframes flash { 25% { background: #fff8c9; } }

/* corners: art on the diagonal, like the printed board */
.tile.corner { display: grid; place-items: center; }
.tile.corner .dia { display: flex; flex-direction: column; align-items: center; transform: rotate(-45deg); gap: .2cqw; }
.tile.gotojail .dia { transform: rotate(45deg); }
.tile.corner .big { font: 800 2.9cqw/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.tile.corner .sm { font: 700 1.6cqw/1.1 var(--display); white-space: nowrap; }
.tile.go { background: #fff4d6; }
.tile.go .big { font-size: 4.2cqw; color: var(--red); -webkit-text-stroke: .2cqw var(--ink); paint-order: stroke; }
.tile.go .arrow { width: 8cqw; height: 4cqw; color: var(--red); display: grid; }
.tile.go .arrow .ico { width: 100%; height: 100%; stroke-width: 3; }
.tile.parking .big, .tile.gotojail .big { white-space: normal; max-width: 13cqw; text-align: center; line-height: .95; }
.tile.parking .gly, .tile.gotojail .gly { width: 5.6cqw; height: 5.6cqw; }
.tile.parking .gly { color: var(--red); }
.tile.gotojail .gly { color: #2a4f9a; }
/* jail: the cell sits in the inner part of the corner; "just visiting" runs along the outer L */
.tile.jail .cell {
  position: absolute; top: 0; right: 0; width: 64%; height: 64%; background: var(--chance); border-left: .35cqw solid var(--ink); border-bottom: .35cqw solid var(--ink);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: .5cqw;
}
.tile.jail .cell::before { content: ""; position: absolute; inset: 12% 12% 34%; background: repeating-linear-gradient(90deg, var(--ink) 0 .45cqw, transparent .45cqw 1.6cqw); border-top: .45cqw solid var(--ink); border-bottom: .45cqw solid var(--ink); opacity: .8; }
.tile.jail .cell b { position: relative; font: 800 1.75cqw/1 var(--display); background: var(--ink); color: #fff; padding: .25cqw .5cqw; border-radius: .4cqw; letter-spacing: .04em; }
.tile.jail .vis { position: absolute; font: 800 1.75cqw/1 var(--display); letter-spacing: .06em; }
.tile.jail .vis.v1 { left: 18%; top: 26%; transform: translate(-50%, -50%) rotate(-90deg); }
.tile.jail .vis.v2 { left: 68%; bottom: 18%; transform: translate(-50%, 50%); }

/* board centre: the decks, the logo, the dice */
.center { grid-area: 2 / 2 / 11 / 11; position: relative; background: var(--board); }
.center::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.4), transparent 62%); pointer-events: none; }
.board-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); border-width: .55cqw; padding: .3cqw; box-shadow: 0 .8cqw 0 var(--ink); border-radius: .8cqw; transition: opacity .25s; }
.board-banner span { font-size: 7.6cqw; padding: .7cqw 3.2cqw .3cqw; border-width: .4cqw; text-shadow: 0 .6cqw 0 var(--red-d); }
.deck { position: absolute; width: 19cqw; height: 12.2cqw; transform: translate(-50%, -50%) rotate(45deg); }
.deck.chest { left: 31%; top: 31%; --dc: var(--chest); }
.deck.chance { left: 69%; top: 69%; --dc: var(--chance); }
.deck .card-back, .deck::before, .deck::after { position: absolute; inset: 0; border-radius: 1.2cqw; border: .45cqw solid var(--ink); background: var(--dc); }
.deck::before, .deck::after { content: ""; }
.deck::after { transform: translate(.9cqw, .9cqw); background: #fff; z-index: -1; }
.deck::before { transform: translate(1.8cqw, 1.8cqw); background: var(--ink); z-index: -2; }
.deck .card-back { display: flex; align-items: center; justify-content: center; gap: 1cqw; color: #fff; box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.35); }
.deck .card-back b { font: 800 2.6cqw/1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 .25cqw 0 rgba(0,0,0,.25); max-width: 12cqw; text-align: center; overflow-wrap: anywhere; }
.deck .card-back .gly { width: 5.6cqw; height: 5.6cqw; }
.deck .card-back .q { font: 800 7.6cqw/1 var(--display); font-style: normal; text-shadow: 0 .4cqw 0 rgba(0,0,0,.25); }
.deck.draw { animation: deckdraw .5s; }
@keyframes deckdraw { 30% { transform: translate(-50%, -50%) rotate(45deg) scale(1.08); } }
.dice { position: absolute; left: 30%; top: 71%; transform: translate(-50%, -50%) rotate(-8deg); display: flex; gap: 2.4cqw; transition: opacity .3s; }
.dice i { width: 8.6cqw; height: 8.6cqw; border-radius: 1.8cqw; background: #fff; position: relative; display: block; border: .45cqw solid var(--ink); box-shadow: 0 .8cqw 0 var(--ink); }
.dice i:last-child { transform: rotate(14deg) translateY(-1.2cqw); }
.dice i b { position: absolute; width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.dice.dbl i { background: var(--gold); }
.dice.dim { opacity: .6; }
.ctr { position: absolute; right: 4cqw; top: 4cqw; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.cbtn { width: max(42px, 10cqw); height: max(42px, 10cqw); border-radius: 50%; border: .45cqw solid var(--ink); background: var(--card); display: grid; place-items: center; color: var(--ink); box-shadow: 0 .7cqw 0 var(--ink); }
.cbtn .ico { width: 52%; height: 52%; stroke-width: 2.4; }
.round { order: 2; font: 800 max(13px, 2.9cqw)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: opacity .25s; }
.board.staged .dice, .board.staged .board-banner, .board.staged .round { opacity: .2; }
.stage { position: absolute; inset: 0; display: grid; place-items: center; z-index: 6; pointer-events: none; }
.stage > * { pointer-events: auto; }

/* paper things on the board: deed, cards, panels */
.deed { width: min(52cqw, 240px); background: var(--card); color: var(--ink); border-radius: 10px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-size: 13px; text-align: center; }
.deed .dh { position: relative; overflow: hidden; background: var(--g); color: #fff; padding: 7px 6px 8px; border-bottom: 2.5px solid var(--ink); }
.deed .dh > :not(.dart) { position: relative; }
.dimg { display: grid; place-items: center; padding: 8px 0 2px; background: radial-gradient(closest-side, #fff, transparent); }
.dimg .art { width: 64px; height: 64px; }
.deed .dh small { display: block; font: 800 11px var(--display); letter-spacing: .2em; opacity: .95; }
.deed .dh b { font: 800 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.deed.light .dh { color: var(--ink); }
.deed table { width: 100%; border-collapse: collapse; margin: 5px 0 2px; }
.deed td { padding: 2px 12px; font-size: 12.5px; color: var(--ink-2); text-align: left; }
.deed td:last-child { text-align: right; font-weight: 800; color: var(--ink); }
.deed tr.cur td { background: #fff1a8; }
.deed .foot { font-size: 11.5px; color: var(--muted); padding: 5px 8px 7px; border-top: 1.5px dashed var(--card-2); }
.deed .owner { display: flex; align-items: center; justify-content: center; gap: 6px; font: 800 15px var(--display); letter-spacing: .04em; text-transform: uppercase; padding: 7px; background: var(--card-2); border-top: 2px solid var(--ink); }
.card {
  width: min(58cqw, 270px); min-height: min(38cqw, 170px); border-radius: 12px; padding: 12px 16px; background: var(--card); color: var(--ink); text-align: center;
  border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  font-size: 15.5px; font-weight: 650; line-height: 1.35; position: relative; overflow: hidden;
}
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; background: var(--cc); border-bottom: 3px solid var(--ink); }
.card > * { position: relative; }
.card.chance { --cc: var(--chance); } .card.chest { --cc: var(--chest); }
.card .ct { font: 800 22px/1 var(--display); letter-spacing: .12em; color: #fff; text-transform: uppercase; margin: -2px 0 10px; display: flex; align-items: center; gap: 6px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.card .ct .gly { width: 22px; height: 22px; }
.panel { width: min(64cqw, 290px); background: var(--card); border-radius: 12px; padding: 12px; text-align: center; border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); font-size: 14px; }
.panel h3 { margin: 0 0 4px; font: 800 17px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; }
.panel h3 .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.panel.ok h3 { color: var(--good); }
.panel .big { font: 800 38px/1.05 var(--display); }
.panel .sub { color: var(--ink-2); font-size: 13.5px; margin-top: 6px; }
.panel .rowp { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.panel .rowp > span:not(.chip) { padding: 3px 8px; border-radius: 8px; border: 1.5px solid var(--ink); background: #fff; font-size: 12.5px; font-weight: 800; box-shadow: inset 4px 0 0 var(--pc); }
.panel .rowp > span.x { text-decoration: line-through; opacity: .4; }
.panel .rowp > span.lead { background: #fff1a8; }
.bigico { width: 44px; height: 44px; color: var(--ink); stroke-width: 2; }
.gly.bigico { color: var(--ink-2); }
.callout {
  display: grid; grid-template-columns: auto auto auto; align-items: center; justify-items: center; gap: 4px 8px;
  background: var(--card); border-radius: 14px; padding: 10px 18px 8px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.callout .tk { width: 34px; height: 34px; }
.callout .arrow { color: var(--ink); display: grid; } .callout .arrow .ico { stroke-width: 2.6; }
.callout b { grid-column: 1 / -1; font: 800 34px/1 var(--display); }
.callout small { grid-column: 1 / -1; color: var(--ink-2); font: 700 15px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.buybox { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.buybox .deed { width: min(50cqw, 225px); }
.buybox .deed .dh b { font-size: 21px; }
.buybox .deed td { padding: 1px 10px; font-size: 11.5px; } .buybox .deed .foot { font-size: 10.5px; padding: 4px 6px 5px; }
.buybox .deed .owner { padding: 5px; font-size: 14px; }
.gline { display: flex; align-items: center; gap: 6px; background: var(--card); border: 2px solid var(--ink); border-radius: 9px; padding: 5px 10px; font-size: 12.5px; font-weight: 800; color: var(--ink); box-shadow: 0 3px 0 var(--ink); max-width: min(64cqw, 290px); }
.gline i { width: 11px; height: 11px; border-radius: 3px; flex: none; border: 1.5px solid var(--ink); }
.popin { animation: popin2 .3s cubic-bezier(.2,1.3,.5,1); }
@keyframes popin2 { from { transform: scale(.8) rotate(-3deg); opacity: 0; } }
.fadeout { animation: fadeout .22s forwards; }
@keyframes fadeout { to { opacity: 0; transform: scale(.92); } }

/* pieces: figurines in the player's colour, black print outline, a shadow under their feet */
.fig { display: block; overflow: visible; }
.fig .b { fill: var(--pc, #888); stroke: var(--ink); stroke-width: 1.9; stroke-linejoin: round; paint-order: stroke; }
.fig .d { fill: var(--ink); }
.fig .w { fill: #fff; }
.fig .hl { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: .75; }
.fig .ln { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.fig .t { fill: #8f2a14; }
.fig .l { fill: #2d9b4e; stroke: var(--ink); stroke-width: 1.4; paint-order: stroke; }
.fig .o { fill: #f39324; stroke: var(--ink); stroke-width: 1.2; paint-order: stroke; }
.fig .cord { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.token {
  position: absolute; left: 0; top: 0; z-index: 4; width: 5.6cqw; height: 5.6cqw; margin: -2.9cqw 0 0 -2.8cqw;
  pointer-events: none; will-change: transform; transition: opacity .3s;
}
.token::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -6%; height: 22%; border-radius: 50%; background: rgba(0,0,0,.32); }
.token .fig { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 .3cqw 0 var(--ink)); }
.token.small { width: 4.5cqw; height: 4.5cqw; margin: -2.35cqw 0 0 -2.25cqw; }
.token.active { z-index: 5; }
.token.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14%; height: 40%; border-radius: 50%; border: .45cqw solid var(--pc); animation: ring 1.3s ease-out infinite; }
@keyframes ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.token.jailed .fig { filter: drop-shadow(0 .3cqw 0 var(--ink)) grayscale(.3); }
.token.out { opacity: 0; }

/* the latest event, a tab sitting on top of the dock */
.dock-wrap { display: flex; flex-direction: column; }
.feed {
  align-self: center; max-width: calc(100% - 28px); margin: 0 0 -2.5px; border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: var(--card); padding: 6px 14px 4px; display: flex; text-align: center; cursor: pointer; min-height: 32px; position: relative; z-index: 1;
}
.feed span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .prev { display: none; }
.feed .cur { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.feed .cur .pn { color: var(--ink); }
.feed .cur.new { animation: tick .35s; }
@keyframes tick { from { transform: translateY(6px); opacity: 0; } }
.dock {
  background: var(--card); border-top: 2.5px solid var(--ink); border-radius: 20px 20px 0 0;
  padding: 10px 10px calc(var(--safe-b) + 12px); display: flex; flex-direction: column; gap: 10px; min-height: 122px;
}
.dock .msg { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; font-size: 14.5px; color: var(--ink-2); text-align: center; line-height: 1.25; }
.dock .msg b, .dock .msg .pn { color: var(--ink); }
.dock .msg.warn { color: var(--danger); font-weight: 600; }
.dock .msg .ico { width: 18px; height: 18px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 30% { transform: translateY(-3px); opacity: 1; } 0%, 60%, 100% { opacity: .3; } }
.dock .btns { display: flex; gap: 8px; align-items: stretch; }
.dock .btns .btn { flex: 1; min-width: 0; padding: 0 8px; min-height: 56px; }
.dock .btns .btn.sq { flex: 0 0 64px; flex-direction: column; gap: 2px; padding: 0; font: 800 14px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.dock .btns .btn.sq .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.dock .btns .btn.primary, .dock .btns [data-primary] { flex: 2; }
.dock .btns .btn.primary .ico { width: 24px; height: 24px; stroke-width: 2.4; }
.dock .btns.idle .btn { min-height: 48px; font: 800 17px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.dock .btns.idle .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.dock.mine { animation: dockin .3s; }
.dock.mine [data-act="roll"] { animation: nudge 2.4s ease-in-out 1.4s infinite; }
@keyframes dockin { from { transform: translateY(10px); } }
@keyframes nudge { 0%, 80%, 100% { transform: none; } 87% { transform: translateY(-4px) rotate(-1deg); } 94% { transform: translateY(1px); } }

.emotes { display: flex; justify-content: center; gap: 6px; padding: 2px 8px 8px; }
.emotes button { width: 44px; height: 40px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); font-size: 19px; box-shadow: 0 2px 0 var(--ink); }
.bubble { position: fixed; z-index: 60; font-size: 32px; pointer-events: none; animation: bubble 1.6s forwards; }
@keyframes bubble { 0% { transform: translate(-50%, 0) scale(.4); opacity: 0; } 15% { transform: translate(-50%, 6px) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, 34px) scale(1); opacity: 0; } }
.net-status { position: fixed; top: calc(var(--safe-t) + 66px); left: 50%; transform: translateX(-50%); z-index: 70; background: var(--danger); color: #fff; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--ink); font-size: 13px; font-weight: 700; }

/* --------------------------------------------------------------- sheets */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(8, 24, 18, .5); display: flex; align-items: flex-end; justify-content: center; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.sheet-panel {
  width: 100%; max-width: 560px; max-height: 86dvh; overflow: auto; overscroll-behavior: contain;
  background: var(--card); border: 3px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 4px 16px calc(var(--safe-b) + 14px);
  animation: sheetup .3s cubic-bezier(.2,1,.3,1);
}
.sheet-panel::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--card-2); margin: 6px auto 0; }
@keyframes sheetup { from { transform: translateY(30%); } }
.sheet-head { position: sticky; top: -4px; z-index: 2; background: var(--card); display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.sheet-head h2 { flex: 1; margin: 0; font: 800 26px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sheet-foot { position: sticky; bottom: calc(-14px - var(--safe-b)); background: var(--card); padding: 12px 0 6px; display: flex; gap: 8px; }
.sheet-foot .btn { flex: 1; }
.sec { margin: 16px 0 6px; font: 800 15px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; }
.sec span { display: flex; align-items: center; gap: 7px; }
.sec .full { color: #fff; background: var(--good); border: 1.5px solid var(--ink); border-radius: 6px; padding: 1px 6px; }
.gdot { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); }
.stats { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; font-size: 14px; color: var(--ink-2); }
.stats b { color: var(--ink); font: 800 19px var(--display); }
.empty-note { color: var(--muted); font-size: 14px; margin: 8px 0; }
.empty-note.small { font-size: 12px; }
.note { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; margin-bottom: 10px; font-size: 13.5px; border: 2px solid var(--ink); }
.note.warn { background: #ffe1da; color: #6e1d14; }
.note b { display: flex; align-items: center; gap: 6px; font: 800 19px var(--display); letter-spacing: .03em; text-transform: uppercase; }
/* my properties: a spread of title-deed cards */
.deeds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dcard { border: 2px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 3px 0 var(--ink); display: flex; flex-direction: column; }
.dcard .dh { position: relative; overflow: hidden; background: var(--g); color: #fff; border: 0; border-bottom: 2px solid var(--ink); padding: 6px 8px 5px; text-align: center; font: 800 18px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; width: 100%; min-height: 40px; }
.dcard.light .dh { color: var(--ink); }
.dcard .dh span { position: relative; }
.dcard .rent .art { width: 30px; height: 30px; flex: none; }
.dcard .db { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dcard .rent { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-2); min-height: 20px; }
.dcard .rent b { color: var(--ink); font: 800 18px var(--display); }
.dcard .hs { display: inline-flex; gap: 2px; }
.dcard .hs .h { width: 13px; height: 12px; } .dcard .hs .h::after { inset: 2px; }
.dcard .hs .h.hotel { width: 20px; height: 13px; }
.dcard .acts { display: flex; gap: 6px; margin-top: auto; }
.dcard .acts .btn { flex: 1; min-height: 44px; min-width: 0; padding: 0 4px; font-size: 13px; border-radius: 10px; box-shadow: 0 2px 0 var(--ink); }
.dcard .acts .btn.primary { font-size: 16px; }
.dcard.mortd { background: repeating-linear-gradient(-45deg, #fff 0 6px, #fbe7e3 6px 12px); }
.dcard.mortd .dh { filter: grayscale(.8); opacity: .7; }
.dcard .stamp { align-self: center; font: 800 16px var(--display); letter-spacing: .12em; color: var(--danger); border: 2px solid var(--danger); border-radius: 6px; padding: 1px 8px; transform: rotate(-6deg); background: #fff; }
.deedwrap { display: grid; place-items: center; padding: 6px 0 4px; }
.lotbtns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.lotbtns .btn { min-width: 96px; }
.info { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 10px 0 6px; font-size: 15.5px; color: var(--ink-2); }
.info p { margin: 0; }

/* trade */
.who-pick { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
.who-pick button { flex: none; min-height: 50px; padding: 0 14px 0 6px; border-radius: 26px; border: var(--line); background: #fff; display: flex; align-items: center; gap: 8px; font: 800 18px var(--display); letter-spacing: .03em; text-transform: uppercase; box-shadow: var(--pop); }
.who-pick button.on { background: var(--ink); color: #fff; transform: translateY(3px); box-shadow: none; }
.tside { background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 12px; margin-top: 10px; }
.tside h3 { margin: 0 0 10px; font: 800 18px var(--display); letter-spacing: .04em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tside h3 small { color: var(--muted); font: 700 13px system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 44px; padding: 0 12px 0 0; border-radius: 9px; border: 2px solid var(--ink); background: var(--card);
  display: inline-flex; align-items: center; gap: 8px; font: 800 16px var(--display); letter-spacing: .03em; text-transform: uppercase; overflow: hidden; color: var(--ink);
}
.chip::before { content: ""; width: 9px; align-self: stretch; background: var(--g); border-right: 2px solid var(--ink); }
.chip.on { background: var(--gold); }
.chip.on::after { content: "✓"; font-weight: 900; }
.chip.ro { min-height: 32px; font-size: 14.5px; padding-right: 10px; }
.chip.cash { padding-left: 10px; }
.chip.cash::before { display: none; }
.chip i { font: 600 11px system-ui, sans-serif; text-transform: none; color: var(--muted); font-style: normal; }
.chip .ico { width: 16px; height: 16px; }
.money-step { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.money-step .btn { min-width: 58px; padding: 0 8px; min-height: 48px; }
.cashin { flex: 1; min-width: 0; position: relative; display: flex; }
.cashin span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 800; }
.cashin .input { text-align: center; min-height: 48px; font: 800 22px var(--display); }
.mood { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); padding: 12px 2px 0; }
.mood.muted { color: var(--muted); }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 9px; height: 20px; border-radius: 3px; background: var(--card-2); border: 1.5px solid var(--ink); }
.mood.m1 .meter i:nth-child(-n+1) { background: var(--danger); }
.mood.m2 .meter i:nth-child(-n+2) { background: var(--chance); }
.mood.m3 .meter i:nth-child(-n+3) { background: #7cc36e; }
.mood.m4 .meter i:nth-child(-n+4) { background: var(--good); }
.offer-view { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.offer-view .tside { margin-top: 0; }
.offer-view .money { font: 800 28px var(--display); margin-bottom: 6px; }
.after { font-size: 14px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.after b { color: var(--ink); }

.log { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.log li { padding: 9px 2px; border-bottom: 1.5px dashed var(--card-2); color: var(--ink-2); }
.rules { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.rules h3 { font: 800 20px var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 16px 0 4px; color: var(--ink); }
.rules p, .rules ul { margin: 0 0 6px; }
.rules ul { padding-left: 20px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; border-bottom: 1.5px dashed var(--card-2); font-weight: 700; }
.setting small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.setting .seg { flex: 0 0 auto; width: 180px; }
.setting .seg button { min-height: 42px; font-size: 17px; }
.menu-list { display: grid; gap: 10px; margin-top: 16px; }

/* result */
.result { text-align: center; padding: 6px 0; }
.crown { width: 84px; height: 84px; margin: 10px auto 8px; border-radius: 50%; background: var(--pc); color: #fff; display: grid; place-items: center; border: 3px solid var(--ink); box-shadow: 0 0 0 5px var(--gold), 0 0 0 8px var(--ink), 0 8px 0 8px var(--ink); animation: popin .6s cubic-bezier(.3,1.6,.5,1); }
.crown .gly { width: 64%; height: 64%; }
.result h2 { margin: 18px 0 2px; font: 800 36px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.result .why { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.rank { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; text-align: left; }
.rank li { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; }
.rank li:first-child { background: #fff1a8; box-shadow: 0 3px 0 var(--ink); }
.rank .pos { width: 18px; font: 800 20px var(--display); }
.rank .nm { flex: 1; font: 800 19px var(--display); letter-spacing: .03em; text-transform: uppercase; }
.rank .w { font: 800 21px var(--display); }

/* fx: banknotes, flying deeds and cards, floating amounts */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.bill {
  position: absolute; left: 0; top: 0; width: 28px; height: 16px; margin: -8px 0 0 -14px; border-radius: 2px;
  background: #b9e3b0; border: 1.5px solid var(--ink); display: grid; place-items: center;
  font: 800 11px/1 var(--display); color: #1d5a2a;
}
.bill.gold { background: #f7d48b; color: #6a4300; }
.float { position: absolute; transform: translate(-50%, -50%); font: 800 20px var(--display); white-space: nowrap; padding: 2px 8px; border-radius: 8px; border: 2px solid var(--ink); background: var(--card); box-shadow: 0 2px 0 var(--ink); }
.float.plus { color: var(--good); } .float.minus { color: var(--danger); }
.flydeed { position: absolute; left: 0; top: 0; width: 30px; height: 40px; margin: -20px 0 0 -15px; border-radius: 4px; background: #fff; border: 2px solid var(--ink); border-top: 11px solid var(--g); box-shadow: 0 3px 0 var(--ink); }
.flycard { position: absolute; left: 0; top: 0; border-radius: 8px; border: 2.5px solid var(--ink); background: var(--dc); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; color: #fff; }
.flycard .gly { width: 40%; height: 60%; }
.flycard b { font: 800 34px/1 var(--display); }
.toast {
  position: fixed; left: 50%; top: 42%; z-index: 80; transform: translate(-50%, -50%) scale(.9) rotate(-2deg); opacity: 0; pointer-events: none;
  background: var(--gold); color: var(--ink); font: 800 26px var(--display); letter-spacing: .04em; text-transform: uppercase; padding: 10px 22px 8px; border-radius: 12px;
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: opacity .2s, transform .25s cubic-bezier(.3,1.5,.5,1); text-align: center; max-width: 84vw;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }

/* phones: 3–4 players sit in a 2×2 grid so names and money stay readable */
@media (max-width: 819px) and (min-height: 560px) {
  .players.n4, .players.n3 { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 8px; }
  .players.n3 .pchip:first-child { grid-column: span 2; }
  .players .pchip .who { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 6px; }
  .players .pchip .mn { flex: none; }
}
@media (max-height: 640px) and (max-width: 819px) {
  .dock { min-height: 106px; gap: 8px; padding-top: 8px; }
  .dock .btns .btn { min-height: 50px; }
  .feed { min-height: 28px; padding: 4px 12px 3px; }
}
/* wide screens: board left, everything else in a side column */
@media (min-width: 820px) and (min-aspect-ratio: 5/4) {
  #game { flex-direction: row; padding: 18px; gap: 20px; }
  .board-wrap { padding: 0; }
  .side { display: flex; flex-direction: column; width: 350px; flex: none; gap: 12px; }
  .players-wrap { padding: 0; }
  .players { grid-auto-flow: row; gap: 10px; }
  .pchip { min-height: 62px; padding: 8px 12px; }
  .pchip .tk { width: 40px; height: 40px; }
  .pchip .nm { font-size: 17px; }
  .pchip .mn { font-size: 24px; }
  .dock-wrap { margin-top: auto; }
  .dock { border: 2.5px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: var(--pop-lg); }
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 22px; border-bottom: 3px solid var(--ink); max-height: 88vh; box-shadow: 0 6px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.buybox .dimg { padding: 4px 0 0; } .buybox .dimg .art { width: 40px; height: 40px; }