/* ==========================================================================
   Dice & Deeds — board, game layout and in-game UI.
   Sizes inside the board use cqw so everything scales with the board.
   ========================================================================== */

/* ---------------------------------------------------------------- layout */
.game-page { min-height: calc(100dvh - var(--header-h)); }
.game-topbar { display: flex; align-items: center; gap: 10px; max-width: 1500px; margin: 0 auto; padding: 12px 16px; }
.round-info { padding: 4px 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font-size: 0.85rem; font-weight: 800; white-space: nowrap; transform: rotate(-1.5deg); }
.tb-group { display: flex; overflow: hidden; border: var(--bd); border-radius: 12px; background: var(--card); box-shadow: var(--sh-sm); }
.tb-group .btn { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.tb-group .btn + .btn { border-left: 2.5px solid var(--ink); }
.tb-group .btn:hover { background: var(--yellow); box-shadow: none; transform: none; }
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 16px 20px;
}
.board-col { display: flex; justify-content: center; min-width: 0; }
/* the tray the board sits in */
.board-wrap {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc(100dvh - var(--header-h) - 84px));
  min-width: min(320px, 100%);
  padding: 10px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.6px) 0 0 / 12px 12px, #2b2822;
  box-shadow: 10px 10px 0 rgba(29, 27, 22, 0.28);
}
.side-col {
  position: sticky;
  top: calc(var(--header-h) + 10px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100dvh - var(--header-h) - 76px);
  min-height: 0;
}
.side-col .panel { padding: 14px; border-radius: 18px; }
.side-col h3 { align-self: flex-start; display: inline-block; margin-bottom: 12px; padding: 2px 10px; border: 2.5px solid var(--ink); border-radius: 8px; background: var(--yellow); font-family: var(--font-display); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-1.5deg); }
.log-panel { flex: 1; min-height: 160px; display: flex; flex-direction: column; overflow: hidden; }
.log { flex: 1; overflow-y: auto; font-size: 0.84rem; margin: 0 -6px; }

/* ---------------------------------------------------------------- board grid */
.board {
  --edge: 1.55fr;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: var(--edge) repeat(9, 1fr) var(--edge);
  grid-template-rows: var(--edge) repeat(9, 1fr) var(--edge);
  gap: var(--b-gap, max(1px, 0.18cqw));
  padding: var(--b-gap, max(1px, 0.18cqw));
  background: var(--b-line);
  border-radius: var(--b-radius, 1.4cqw);
  overflow: hidden;
  box-shadow: var(--b-shadow);
  color: var(--b-text);
  font-family: var(--b-font);
  user-select: none;
  -webkit-user-select: none;
}

.space {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: var(--b-space);
  cursor: pointer;
  transition: filter 0.15s, background-color 0.3s;
}
.space:hover { filter: brightness(1.08); }
.space.bottom { flex-direction: column; }
.space.top { flex-direction: column-reverse; }
.space.left { flex-direction: row-reverse; }
.space.right { flex-direction: row; }
.space.owned { background-color: color-mix(in srgb, var(--oc) 24%, var(--b-space)); }

.space .band {
  flex: 0 0 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gc);
  box-shadow: var(--b-band-shadow, none);
}
.space.left .band, .space.right .band { flex-direction: column; }
/* ---------------------------------------------------------------- 3D houses & hotels
   One CSS model used on the board, in lists and in the drop animation.
   --hu is the size unit; every measurement below is a multiple of it. */
:root { --hu: 7px; }
.m3d {
  --w: calc(var(--hu) * 2.1);
  --d: calc(var(--hu) * 2.1);
  --h: calc(var(--hu) * 1.55);
  --bw: max(1px, calc(var(--hu) * 0.17));
  --front: #3cc46d;
  --side: #26a356;
  --back: #1f8a48;
  --roof: #0f6b34;
  --roof2: #0b5428;
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(var(--hu) * 2.2);
  height: calc(var(--hu) * 3.1);
  perspective: calc(var(--hu) * 30);
  vertical-align: bottom;
}
.m3d.hotel {
  --w: calc(var(--hu) * 3.7);
  --d: calc(var(--hu) * 2.2);
  --h: calc(var(--hu) * 1.9);
  --front: #ee4a3b;
  --side: #cf3527;
  --back: #b52b1f;
  --roof: #8f1f15;
  --roof2: #6e160f;
  width: calc(var(--hu) * 4);
}
/* soft contact shadow under each building */
.m3d::before { content: ''; position: absolute; left: 50%; bottom: calc(var(--hu) * 0.15); width: calc(var(--w) * 1.35); height: calc(var(--hu) * 0.95); border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 27, 22, 0.42), transparent); transform: translateX(-46%); }
.m3d-in { position: absolute; left: 50%; bottom: calc(var(--hu) * 0.5); width: 0; height: 0; transform: rotateX(-26deg) rotateY(-28deg); transform-style: preserve-3d; }
.m3d-in i { position: absolute; display: block; box-sizing: border-box; border: var(--bw) solid #1d1b16; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.m3d-in .f, .m3d-in .b { left: calc(var(--w) / -2); top: calc(var(--h) * -1); width: var(--w); height: var(--h); }
.m3d-in .f {
  background: linear-gradient(#6b4423, #6b4423) 50% 100% / 26% 58% no-repeat, linear-gradient(#cdeffc, #cdeffc) 14% 28% / 18% 26% no-repeat, linear-gradient(#cdeffc, #cdeffc) 86% 28% / 18% 26% no-repeat, var(--front);
  transform: translateZ(calc(var(--d) / 2));
}
.m3d.hotel .m3d-in .f {
  background: linear-gradient(#5b2a1e, #5b2a1e) 50% 100% / 18% 54% no-repeat, repeating-linear-gradient(90deg, transparent 0 9%, #ffe7a0 9% 19%, transparent 19% 27%) 0 22% / 100% 24% no-repeat, var(--front);
}
.m3d-in .b { background: var(--back); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.m3d-in .l, .m3d-in .r { left: calc(var(--d) / -2); top: calc(var(--h) * -1); width: var(--d); height: var(--h); background: linear-gradient(#cdeffc, #cdeffc) 50% 35% / 30% 30% no-repeat, var(--side); }
.m3d-in .r { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.m3d-in .l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.m3d-in .gl, .m3d-in .gr { left: calc(var(--d) / -2); top: calc(var(--h) * -1 - var(--d) / 2 + var(--bw) * 0.5); width: var(--d); height: calc(var(--d) / 2); border: 0; background: #1d1b16; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.m3d-in .gl::after, .m3d-in .gr::after { content: ''; position: absolute; inset: calc(var(--bw) * 1.6) calc(var(--bw) * 2.2) 0; background: var(--side); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.m3d-in .gr { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.m3d-in .gl { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.m3d-in .rf, .m3d-in .rb { left: calc(var(--w) * -0.56); top: calc(var(--h) * -1 - var(--d) / 4 - var(--d) * 0.4); width: calc(var(--w) * 1.12); height: calc(var(--d) * 0.8); border-radius: calc(var(--hu) * 0.12); }
.m3d-in .rf { background: repeating-linear-gradient(0deg, transparent 0 calc(var(--hu) * 0.42), rgba(0, 0, 0, 0.2) calc(var(--hu) * 0.42) calc(var(--hu) * 0.52)), var(--roof); transform: translateZ(calc(var(--d) / 4)) rotateX(45deg); }
.m3d-in .rb { background: var(--roof2); transform: rotateY(180deg) translateZ(calc(var(--d) / 4)) rotateX(45deg); }

/* buildings standing on the color band */
.board .houses { --hu: 1.15cqw; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
.board .space.bottom .houses .m3d, .board .space.top .houses .m3d { width: calc(var(--hu) * 1.75); }
.board .space.bottom .houses .m3d.hotel, .board .space.top .houses .m3d.hotel { width: calc(var(--hu) * 4); }
.board .space.left .houses, .board .space.right .houses { --hu: 0.95cqw; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding-bottom: 0.2cqw; }
.board .space.left .houses .m3d, .board .space.right .houses .m3d { height: calc(var(--hu) * 1.6); }
.board .space.left .houses .m3d.hotel, .board .space.right .houses .m3d.hotel { --hu: 0.85cqw; height: calc(var(--hu) * 3.1); }
.space.pending-build .houses .m3d:last-child { visibility: hidden; }

/* owner badge: replaces the price once a property is owned */
.space .own { display: none; align-items: center; justify-content: center; gap: 0.3cqw; }
.space.owned .pr { display: none; }
.space.owned .own { display: flex; }
.own .token-chip { --ts: 2.5cqw; }
.own .token-chip svg.i { stroke-width: 2.8; filter: none; }
.own b { padding: 0 0.35cqw; border-radius: 0.4cqw; background: rgba(255, 255, 255, 0.75); color: #1d1b16; font-size: 1.05cqw; font-weight: 800; line-height: 1.5; font-variant-numeric: tabular-nums; }
.space.left .own, .space.right .own { flex-direction: row; }

.space .info {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.2cqw;
  padding: 0.5cqw 0.3cqw;
  text-align: center;
}
.space.left .info, .space.right .info { justify-content: center; padding: 0.3cqw 0.6cqw; }
.space .nm {
  font-size: var(--b-nm, 1.1cqw);
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.space .nmw { display: flex; flex-direction: column; align-items: center; gap: 0.2cqw; }
.space .ct { font-size: calc(var(--b-nm, 1.1cqw) * 0.8); font-weight: 500; line-height: 1.1; color: var(--b-muted); }
.space .pr { font-size: var(--b-pr, 1.1cqw); font-weight: 600; color: var(--b-muted); }
.space .ic { font-size: 2.3cqw; line-height: 1; }
.space .ic.big { font-size: 3.4cqw; }
.card-space.fortune .ic { filter: drop-shadow(0 0 0.4cqw var(--fortune-bg)); }
.card-space.fund .ic { filter: drop-shadow(0 0 0.4cqw var(--fund-bg)); }

.owner-mark { position: absolute; pointer-events: none; background: var(--oc); opacity: 0; transition: opacity 0.25s; }
.space.owned .owner-mark { opacity: 1; }
.space.bottom .owner-mark { left: 0; right: 0; bottom: 0; height: 1.1cqw; }
.space.top .owner-mark { left: 0; right: 0; top: 0; height: 1.1cqw; }
.space.left .owner-mark { top: 0; bottom: 0; left: 0; width: 1.1cqw; }
.space.right .owner-mark { top: 0; bottom: 0; right: 0; width: 1.1cqw; }
/* keep text clear of the owner stripe */
.space.owned.top .info { padding-top: 1.35cqw; }
.space.owned.bottom .info { padding-bottom: 1.35cqw; }
.space.owned.left .info { padding-left: 1.5cqw; }
.space.owned.right .info { padding-right: 1.5cqw; }

.space.mortgaged .info, .space.mortgaged .band { opacity: 0.35; }
.space.mortgaged::after {
  content: 'MORTGAGED';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  padding: 0.1cqw 0.4cqw;
  border: 0.15cqw solid #dc2626;
  border-radius: 0.3cqw;
  background: rgba(255, 255, 255, 0.9);
  color: #dc2626;
  font: 800 0.85cqw/1.2 'Outfit', sans-serif;
  white-space: nowrap;
}
.space.focus { z-index: 2; animation: focus-pulse 1.2s ease-in-out infinite; }
.space { transition: filter 0.2s, background-color 0.3s, opacity 0.2s; }
.board.spot .space:not(.hl) { opacity: 0.4; filter: saturate(0.3); }
.board.spot .space.hl { z-index: 3; box-shadow: inset 0 0 0 0.45cqw var(--oc), 0 0 0 0.3cqw #1d1b16; }
.board.spot .token { opacity: 0.3; transition: opacity 0.2s, transform 0.17s ease-out; }
.board.spot .token.hl { z-index: 3; opacity: 1; }
@keyframes focus-pulse { 50% { box-shadow: inset 0 0 0 0.45cqw var(--b-accent); } }

/* corners */
.space.corner { display: block; }
.corner-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3cqw;
  padding: 0.6cqw;
  text-align: center;
  background: var(--b-corner);
}
.corner-inner b { font-family: var(--b-title-font); font-size: var(--b-corner-title, 1.7cqw); font-weight: 800; line-height: 1.05; letter-spacing: 0.02em; }
.corner-inner small { font-size: 1cqw; line-height: 1.15; color: var(--b-muted); }
.ci-icon { font-size: 4.2cqw; line-height: 1; }
.corner-inner.go b { font-size: calc(var(--b-corner-title, 1.7cqw) * 1.6); color: var(--b-accent); }
.go-arrow { font-size: 3.6cqw; line-height: 1; color: var(--b-accent); }
.corner-inner.jail { display: block; padding: 0; }
.cell-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 64%;
  height: 64%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2cqw;
  background: repeating-linear-gradient(90deg, transparent 0 17%, rgba(0, 0, 0, 0.5) 17% 21%), var(--b-jail, #f59e0b);
  border-left: 0.2cqw solid var(--b-line);
  border-bottom: 0.2cqw solid var(--b-line);
}
.cell-box span { font-size: 2.4cqw; line-height: 1; }
.cell-box b { font-size: 1.3cqw; color: #1a1a1a; background: rgba(255, 255, 255, 0.88); padding: 0 0.4cqw; border-radius: 0.3cqw; }
.visiting { position: absolute; left: 0.6cqw; bottom: 0.5cqw; font-weight: 700; text-transform: uppercase; }
.parking .pot { font-weight: 800; color: var(--b-accent); }

/* board icons */
.board .i-train-front, .mini-board .i-train-front { color: var(--b-text); }
.board .i-zap { color: #f5a524; }
.board .i-droplet { color: #3b9eea; }
.board .i-circle-help, .mini-board .i-circle-help { color: var(--fortune-bg); }
.board .i-landmark, .mini-board .i-landmark { color: var(--fund-bg); }
.board .i-receipt-text, .board .space .i-gem { color: var(--b-muted); }
.board .i-trees, .mini-board .i-trees { color: var(--g-green); }
.board .i-siren, .mini-board .i-siren { color: var(--b-accent); }
.mini-board .i-lock { color: var(--b-jail, #f59e0b); }
.mini-board .i-arrow-left { color: var(--b-accent); }
.board .deck .i { color: #fff; }
.space .ic svg.i { stroke-width: 2.1; }

/* ---------------------------------------------------------------- center */
.center {
  grid-row: 2 / 11;
  grid-column: 2 / 11;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--b-center);
  background-image: var(--b-center-pattern, none);
}
.center-stack {
  position: relative;
  z-index: 2;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  text-align: center;
}
.board-logo {
  display: flex;
  align-items: baseline;
  gap: 1cqw;
  font-family: var(--b-title-font);
  font-size: var(--b-logo-size, 6cqw);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--b-logo, var(--b-accent));
  text-shadow: var(--b-logo-shadow, none);
  transform: rotate(-4deg);
}
.board-logo i { font-style: normal; font-size: 0.7em; color: var(--b-logo-2, var(--b-text)); }
.turn-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.5cqw 1.6cqw 0.5cqw 0.6cqw;
  border: 0.25cqw solid var(--pc);
  border-radius: 999px;
  background: var(--b-chip-bg);
  color: var(--b-chip-text);
  font-family: 'Outfit', sans-serif;
  font-size: clamp(11px, 1.7cqw, 16px);
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.18);
}
.turn-banner .token-chip { --ts: clamp(18px, 3cqw, 28px); border-width: 2px; }

.actions {
  width: 100%;
  min-height: 9cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(11px, 1.6cqw, 15px);
}
.actions .btn { font-size: clamp(11px, 1.6cqw, 15px); }
.actions .btn-lg { font-size: clamp(12px, 2cqw, 18px); padding: 0.75em 1.4em; }
.actions .btn-sm { font-size: clamp(10px, 1.4cqw, 13px); }
.center .btn:not(.btn-primary):not(.btn-gold):not(.btn-danger) { background: var(--b-btn-bg); color: var(--b-btn-text); border-color: transparent; }
.center .btn-ghost { opacity: 0.92; }
.center .input { background: var(--b-chip-bg); color: var(--b-chip-text); border-color: rgba(0, 0, 0, 0.2); width: 9em; }
.act-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8cqw; }
.act-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4em; font-size: clamp(12px, 2cqw, 18px); font-weight: 800; color: var(--b-text); }
.act-title.warn { color: #dc2626; }
.act-sub { max-width: 46ch; font-size: clamp(10px, 1.45cqw, 14px); color: var(--b-muted); }
.act-sub.warn { color: #dc2626; font-weight: 600; }
.act-wait { min-height: 3em; display: flex; align-items: center; gap: 0.8em; font-weight: 600; color: var(--b-muted); }
.spinner { width: 1.1em; height: 1.1em; border: 0.18em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.auction-bid { display: flex; flex-direction: column; align-items: center; padding: 0.6cqw 2.4cqw; border-radius: 1cqw; background: var(--b-chip-bg); color: var(--b-chip-text); line-height: 1.2; }
.auction-bid span { font-size: 0.8em; opacity: 0.7; }
.auction-bid b { font-size: 1.6em; }
.auction-bid small { opacity: 0.7; }

.deck {
  --deck-bg: var(--fortune-bg);
  position: absolute;
  z-index: 1;
  width: 15cqw;
  height: 9.5cqw;
  transform: rotate(-40deg);
  /* a little stack of cards underneath the top one */
  box-shadow: 0.35cqw 0.35cqw 0 -0.05cqw #fffdf6, 0.5cqw 0.5cqw 0 0 rgba(29, 27, 22, 0.75), 0.85cqw 0.85cqw 0 -0.05cqw #fffdf6, 1cqw 1cqw 0 0 rgba(29, 27, 22, 0.75);
  border-radius: 1cqw;
}
.deck-fortune { left: 3%; top: 8%; }
.deck-fund { --deck-bg: var(--fund-bg); right: 3%; bottom: 8%; }
.deck.lift { animation: deck-lift 0.35s ease-out; }
@keyframes deck-lift { 40% { transform: rotate(-40deg) translateY(-6%) scale(1.04); } }

/* card back art, shared by the decks and the back of a drawn card */
.deck, .cf-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3cqw;
  border: 0.35cqw solid #1d1b16;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 0.8cqw, transparent 0.8cqw 1.6cqw), var(--deck-bg);
  color: #fff;
  font-family: var(--b-title-font);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0.15cqw 0.15cqw 0 rgba(29, 27, 22, 0.7);
}
.deck { font-size: 1.3cqw; }
.deck span, .cf-back span { display: grid; place-items: center; border: 0.3cqw solid #1d1b16; border-radius: 50%; background: #fffdf6; color: var(--deck-bg); }
.deck span { width: 4.4cqw; height: 4.4cqw; font-size: 2.6cqw; }
.board .deck .i { color: var(--deck-bg); }
.board .cf-front .cp-head .i { color: #fff; }

/* drawn card: a two-sided card that flips in 3D */
.card-layer { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; perspective: 140cqw; transition: background 0.25s; }
.card-layer.on { pointer-events: auto; cursor: pointer; background: rgba(29, 27, 22, 0.28); }
.card3d { --deck-bg: var(--fortune-bg); position: relative; width: min(92%, max(52cqw, 210px)); transform: rotateY(180deg); transform-style: preserve-3d; will-change: transform; }
.card3d.fund { --deck-bg: var(--fund-bg); }
.cf { border-radius: 1.6cqw; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cf-back { position: absolute; inset: 0; gap: 0.8cqw; font-size: clamp(12px, 2.6cqw, 22px); }
.cf-back span { width: clamp(36px, 9cqw, 70px); height: clamp(36px, 9cqw, 70px); font-size: clamp(20px, 5.4cqw, 42px); }
.cf-front {
  position: relative;
  aspect-ratio: 1.58;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1cqw;
  overflow: hidden;
  padding: 0 2.4cqw 1.8cqw;
  border: 0.45cqw solid #1d1b16;
  background: #fffdf6;
  color: #1a1a1a;
  font-family: 'Rubik', 'Outfit', sans-serif;
  text-align: center;
  transform: rotateY(180deg);
  box-shadow: 0.9cqw 0.9cqw 0 rgba(29, 27, 22, 0.45);
}
.cf-front .cp-head {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  margin: 0 -2.4cqw 0.4cqw;
  padding: 1cqw;
  border-bottom: 0.45cqw solid #1d1b16;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 0.8cqw, transparent 0.8cqw 1.6cqw), var(--deck-bg);
  color: #fff;
  font-family: var(--b-title-font);
  font-size: clamp(13px, 2.3cqw, 21px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0.15cqw 0.15cqw 0 rgba(29, 27, 22, 0.7);
}
.cf-front p { flex: 1; display: grid; place-items: center; margin: 0; font-size: clamp(12px, 2cqw, 19px); font-weight: 600; line-height: 1.35; }
.cf-front small { color: #7a7364; font-size: clamp(10px, 1.3cqw, 12px); font-weight: 600; }

/* ---------------------------------------------------------------- dice (3D) */
.dice-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.dice { --ds: 6.4cqw; display: flex; gap: calc(var(--ds) * 0.4); }
.dice.big { --ds: 54px; }
.dice.tiny { --ds: 22px; }
.board-dice { margin: 0.6cqw 0 1cqw; }
.die-slot { position: relative; width: var(--ds); height: var(--ds); perspective: calc(var(--ds) * 9); }
.die-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -18%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--d-glow, rgba(0, 0, 0, 0.42)), transparent 70%);
  pointer-events: none;
}
.die-body, .cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 14%;
  border-radius: 17%;
  background: var(--d-bg);
  box-shadow: inset 0 0 0 calc(var(--ds) * 0.03) var(--d-border), inset 0 calc(var(--ds) * -0.06) calc(var(--ds) * 0.14) rgba(0, 0, 0, 0.14);
  backface-visibility: hidden;
}
.face span { width: 74%; height: 74%; margin: auto; border-radius: 50%; background: var(--d-pip); box-shadow: var(--d-pip-shadow, inset 0 0.1em 0.12em rgba(0, 0, 0, 0.45)); opacity: 0; }
.face span.on { opacity: 1; }
.f1 { transform: translateZ(calc(var(--ds) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.f3 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.f2 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); }
.f5 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
/* inner planes fill the gaps behind the rounded corners */
.core { position: absolute; inset: 2%; border-radius: 10%; background: var(--d-core, #dcdce6); }
.core.cx { transform: rotateX(90deg); }
.core.cy { transform: rotateY(90deg); }
.dice.doubles .face { box-shadow: inset 0 0 0 calc(var(--ds) * 0.07) var(--gold), inset 0 calc(var(--ds) * -0.06) calc(var(--ds) * 0.14) rgba(0, 0, 0, 0.14); }
.dice.doubles .die-shadow { background: radial-gradient(ellipse at center, rgba(255, 200, 74, 0.75), transparent 70%); }

.dice-badge {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 1.6cqw;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--b-chip-bg);
  color: var(--b-chip-text);
  font: 800 clamp(11px, 1.8cqw, 18px)/1.1 'Outfit', sans-serif;
  white-space: nowrap;
  box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.5);
  pointer-events: none;
}
.dice-badge.show { opacity: 1; transform: translateY(-50%) scale(1); }
.dice-badge.dbl { background: linear-gradient(135deg, #ffd96e, #f5a524); color: #2a1a00; }

/* ---------------------------------------------------------------- 3D build animation */
.fx3d-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.h3d-wrap { display: none; }
.m3d-drop { position: absolute; z-index: 2; pointer-events: none; }
.m3d-drop::before { display: none; }
.drop-shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(29, 27, 22, 0.5), transparent); pointer-events: none; }
.drop-target { position: absolute; border: 0.35cqw dashed #1d1b16; border-radius: 50%; background: rgba(255, 210, 63, 0.35); pointer-events: none; }
.dust { position: absolute; border: 0.2cqw solid rgba(29, 27, 22, 0.5); border-radius: 50%; background: #f1e7cf; pointer-events: none; }
.dust-ring { position: absolute; border: 0.35cqw solid rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 0 0 0.2cqw rgba(29, 27, 22, 0.35); pointer-events: none; }
.spark { position: absolute; width: 1.6cqw; height: 1.6cqw; background: #ffd23f; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); pointer-events: none; }

/* ---------------------------------------------------------------- 3D buildings on the board
   The .m3d models (see "3D houses & hotels" above) stand on each city's color band in an
   overlay, so roofs are never clipped by the space. Positions come from view.js. */
.bld-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bld-group { position: absolute; left: 0; top: 0; }
.bld-layer .m3d { position: absolute; }
.bld-layer .m3d.pending { visibility: hidden; }
.board.spot .bld-group:not(.hl) .m3d-in i, .board.spot .bld-group:not(.hl) .m3d::before { opacity: 0.22; }

/* ---------------------------------------------------------------- tokens on the board
   Each player is a 3D pewter piece (R.figureHTML, drawn by js/pieces.js). A .token sits at the
   middle of where the piece shows; its feet are --feet lower (--pf token sizes, set from view.js
   to match the 3D camera). --tok is the space a token takes up. */
.token-layer {
  --tok: 4.4cqw;
  --pf: 0.29;
  --feet: calc(var(--tok) * var(--pf));
  --gsq: 0.79; /* how flat a circle on the board looks from the camera: sin(52deg) */
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.token { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform 0.17s ease-out; }
.token.jump { transition: transform 0.6s cubic-bezier(0.5, -0.4, 0.5, 1.4); }
.token-layer.no-anim .token { transition: none !important; }

/* shadow under the feet; it also carries the token's aura and the current player's ring */
.fig-ground {
  position: absolute;
  left: calc(var(--tok) * -0.42);
  top: calc(var(--feet) - var(--tok) * 0.42);
  width: calc(var(--tok) * 0.84);
  height: calc(var(--tok) * 0.84);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29, 27, 22, 0.5), rgba(29, 27, 22, 0.3) 60%, transparent);
  transform: scaleY(var(--gsq));
}
.fig-ground::before { content: ''; position: absolute; inset: -22%; border-radius: 50%; pointer-events: none; }
.token.current .fig-ground::after {
  content: '';
  position: absolute;
  inset: -12%;
  border: calc(var(--tok) * 0.07) solid var(--pc);
  border-radius: 50%;
  box-shadow: 0 0 0 max(1px, calc(var(--tok) * 0.025)) #1d1b16, inset 0 0 0 max(1px, calc(var(--tok) * 0.025)) #1d1b16;
  animation: ground-ring 1.4s ease-in-out infinite;
}
@keyframes ground-ring { 50% { transform: scale(1.12); opacity: 0.75; } }

.fig { position: absolute; left: calc(var(--tok) / -2); top: var(--feet); width: var(--tok); height: 0; transform-origin: 50% 0; }
/* the canvas is 2 tokens square (FIG_CANVAS in view.js), centred on the token, so the piece's
   feet land on .fig */
.fig > .piece3d {
  position: absolute;
  left: calc(var(--tok) * -0.5);
  top: calc(var(--tok) * (-1 - var(--pf)));
  width: calc(var(--tok) * 2);
  height: calc(var(--tok) * 2);
  transform-origin: 50% calc(50% + var(--tok) * var(--pf));
}
.fig > .token-chip { --ts: var(--tok); position: absolute; left: 0; top: calc(var(--tok) * (-0.5 - var(--pf))); }

/* moving: a hop per space with a little waddle; a big leap into jail */
.token.hop .fig { animation: fig-hop 0.18s ease-out; }
.token.hop .fig-ground { animation: ground-hop 0.18s ease-out; }
.token.walk .piece3d { animation: waddle 0.18s ease-in-out infinite alternate; }
.token.jump .fig { animation: fig-jump 0.6s ease-in-out; }
.token.jump .fig-ground { animation: ground-jump 0.6s ease-in-out; }
@keyframes fig-hop { 45% { transform: translateY(calc(var(--tok) * -0.32)) scale(0.94, 1.08); } 85% { transform: scale(1.08, 0.9); } }
@keyframes ground-hop { 45% { transform: scaleY(var(--gsq)) scale(0.7); opacity: 0.6; } }
@keyframes waddle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes fig-jump {
  0% { transform: scale(1.12, 0.85); }
  15% { transform: translateY(calc(var(--tok) * -0.3)) scale(0.9, 1.15); }
  50% { transform: translateY(calc(var(--tok) * -1.3)) scale(1); }
  88% { transform: scale(1.12, 0.86); }
}
@keyframes ground-jump { 50% { transform: scaleY(var(--gsq)) scale(0.5); opacity: 0.4; } }

/* ---------------------------------------------------------------- 3D jail cell
   A barred cell around each jailed character, seen from high above so you look down through
   the roof at them. It comes in two halves so the character is inside: the floor and far walls
   are drawn behind the character, the near walls, roof and padlock in front. Its floor is
   under the character's feet. Sizes are multiples of --tok; CAGE and CAGE_ROT in view.js
   must match. */
.cage { position: absolute; left: 0; top: var(--feet); width: 0; height: 0; perspective: calc(var(--tok) * 16); }
.cage-ghost { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cage-in {
  --w: calc(var(--tok) * 1.2);
  --h: calc(var(--tok) * 1.55);
  --bw: max(1px, calc(var(--tok) * 0.045));
  --bar: #a3adbb;
  --bar-hi: #dfe5ec;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: rotateX(-58deg) rotateY(-22deg);
  transform-style: preserve-3d;
}
.cage-in i { position: absolute; display: block; box-sizing: border-box; border: var(--bw) solid #1d1b16; }
.cg-f, .cg-b, .cg-l, .cg-r {
  left: calc(var(--w) / -2);
  top: calc(var(--h) * -1);
  width: var(--w);
  height: var(--h);
  background:
    linear-gradient(var(--bar-hi), var(--bar) 75%, #1d1b16 75%) top / 100% 15% no-repeat,
    linear-gradient(#1d1b16 25%, var(--bar) 25%) bottom / 100% 15% no-repeat,
    linear-gradient(#1d1b16 0 25%, var(--bar) 25% 75%, #1d1b16 75%) 0 58% / 100% 8% no-repeat,
    linear-gradient(90deg, transparent 0 35%, #1d1b16 35% 43%, var(--bar-hi) 43% 52%, var(--bar) 52% 57%, #1d1b16 57% 65%, transparent 65%) 0 0 / 25% 100% repeat-x;
}
/* faces turned away from the light are darker */
.cg-r { --bar: #77818f; --bar-hi: #a3adbb; transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.cg-f { transform: translateZ(calc(var(--w) / 2)); }
.cg-b { --bar: #5d6673; --bar-hi: #848e9b; transform: translateZ(calc(var(--w) / -2)); }
.cg-l { --bar: #5d6673; --bar-hi: #848e9b; transform: rotateY(90deg) translateZ(calc(var(--w) / -2)); }
.cg-floor, .cg-top { left: calc(var(--w) / -2); top: calc(var(--w) / -2); width: var(--w); height: var(--w); }
.cg-floor { background: rgba(29, 27, 22, 0.34); transform: rotateX(90deg); }
.cg-top {
  --bar: #c1c9d4;
  background:
    linear-gradient(90deg, transparent 0 40%, #1d1b16 40% 60%, transparent 60%) 0 0 / 33.4% 100%,
    linear-gradient(transparent 0 40%, #1d1b16 40% 60%, transparent 60%) 0 0 / 100% 33.4%;
  box-shadow: inset 0 0 0 calc(var(--tok) * 0.07) var(--bar), inset 0 0 0 calc(var(--tok) * 0.095) #1d1b16;
  transform: translateY(calc(var(--h) * -1)) rotateX(90deg);
}
/* padlock on the door */
.cage-in .cg-lock {
  left: calc(var(--w) * -0.42);
  top: calc(var(--h) * -0.5);
  width: calc(var(--tok) * 0.26);
  height: calc(var(--tok) * 0.22);
  border-radius: calc(var(--tok) * 0.05);
  background: radial-gradient(circle at 50% 42%, #1d1b16 0 18%, transparent 19%), linear-gradient(#ffe27a, #f5a524);
  transform: translateZ(calc(var(--w) / 2 + 1px));
}
.cg-lock::before {
  content: '';
  position: absolute;
  left: 18%;
  bottom: 100%;
  width: 64%;
  height: 80%;
  box-sizing: border-box;
  border: var(--bw) solid #1d1b16;
  border-bottom: 0;
  border-radius: calc(var(--tok) * 0.1) calc(var(--tok) * 0.1) 0 0;
}
@keyframes token-glow { 50% { box-shadow: 0 0 0 0.5cqw color-mix(in srgb, var(--pc) 55%, transparent), 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.4); } }

/* ---------------------------------------------------------------- players & log */
.players { display: flex; flex-direction: column; gap: 8px; }
.pcard {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-left: 18px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(90deg, var(--pc) 0 8px, #fff 8px);
  box-shadow: 2px 2px 0 var(--ink);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.pcard.active {
  background: linear-gradient(90deg, var(--pc) 0 8px, color-mix(in srgb, var(--pc) 20%, #fff) 8px);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translate(-2px, -2px) rotate(-0.8deg);
}
.pcard.out { opacity: 0.45; filter: grayscale(0.8); }
.pcard { cursor: pointer; }
.pcard.peek:not(.active) { box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px, -1px); }

.player-pop {
  position: fixed;
  z-index: 800;
  max-height: min(72vh, 560px);
  overflow-y: auto;
  padding: 14px;
  border: 3px solid var(--ink);
  border-top: 10px solid var(--pc);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--sh-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px) rotate(0.6deg);
  transition: opacity 0.15s, transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.player-pop.on { opacity: 1; pointer-events: auto; transform: rotate(-0.6deg); }
.pp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pp-head b { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; line-height: 1.1; }
.pp-tags { display: flex; gap: 4px; margin-top: 4px; }
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; margin-bottom: 12px; }
.pp-stats span { display: flex; flex-direction: column; align-items: flex-start; padding: 5px 8px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-stats small { color: var(--muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.pp-group { margin-top: 8px; overflow: hidden; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.pp-gtitle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; border-bottom: 2px solid var(--ink); background: var(--gc); color: #fff; font-family: var(--font-display); font-size: 0.88rem; text-shadow: 1px 1px 0 var(--ink); }
.pp-gtitle small { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font); font-size: 0.75rem; font-weight: 800; }
.pp-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 5px 10px; font-size: 0.88rem; font-weight: 700; }
.pp-row + .pp-row { border-top: 1.5px dashed var(--line); }
.pp-row b { font-variant-numeric: tabular-nums; }
.pp-row.mort .pp-name { opacity: 0.55; text-decoration: line-through; }
.pp-m { color: var(--danger); font-size: 0.72rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.pp-h { display: flex; gap: 1px; }
.pp-h { --hu: 6px; }
.pc-token .token-chip { --ts: 36px; }
.pc-main { min-width: 0; }
.pc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; }
.pc-name .nm { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { padding: 1px 6px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper-2); color: var(--ink); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; }
.tag-jail { background: #ffd28a; }
.tag-out { background: #ffb3aa; }
.tag-card { display: inline-flex; align-items: center; gap: 1px; padding: 1px 5px; background: rgba(255, 201, 92, 0.15); color: var(--gold); font-size: 0.7rem; }
.tag-card svg.i { width: 12px; height: 12px; }
.pc-props { display: flex; flex-wrap: wrap; gap: 3px; min-height: 12px; margin-top: 4px; }
.chip { display: inline-block; flex: 0 0 auto; width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 3px; background: var(--gc); cursor: pointer; vertical-align: middle; }
.chip.mort { opacity: 0.3; }
.chip.built { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f9d57; }
.pc-cash { position: relative; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cash-delta { position: absolute; right: 0; top: -2px; white-space: nowrap; font-size: 0.85rem; font-weight: 800; pointer-events: none; animation: delta 1.4s ease-out forwards; }
.cash-delta.up { color: #11803f; }
.cash-delta.down { color: var(--danger); }
@keyframes delta { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }

.log-line { padding: 6px 8px; border-bottom: 1.5px dashed var(--line); color: var(--ink-2); line-height: 1.4; }
.log-line.turn { margin-top: 6px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper-2); color: var(--ink); font-weight: 800; }
.log-line.good { color: #11803f; }
.log-line.bad { color: #c22a1f; }
.log-line.buy { color: #1f4fc8; }
.log-line.card { color: #9a5b00; }
.log-line.trade { color: #6a2fc0; }
.log-line.build { color: #0b7a55; }
.log-line.pay { color: #b54708; }
.log-line.win { color: #b45309; font-weight: 800; }

/* ---------------------------------------------------------------- mini board previews */
.mini-board { container-type: inline-size; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: var(--b-shadow-sm, 0 8px 20px rgba(0, 0, 0, 0.35)); }
.mb-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr) 1.4fr;
  grid-template-rows: 1.4fr repeat(5, 1fr) 1.4fr;
  gap: max(1px, 0.8cqw);
  padding: max(1px, 0.8cqw);
  background: var(--b-line);
}
.mb-cell { position: relative; display: flex; background: var(--b-space); }
.mb-corner { display: grid; place-items: center; background: var(--b-corner); }
.mb-bottom { flex-direction: column; }
.mb-top { flex-direction: column-reverse; }
.mb-left { flex-direction: row-reverse; }
.mb-right { flex-direction: row; }
.mb-band { display: block; flex: 0 0 30%; }
.mb-icon { margin: auto; font-size: 6.5cqw; font-style: normal; line-height: 1; }
.mb-corner .mb-icon { font-size: 9cqw; }
.mb-center { grid-area: 2 / 2 / 7 / 7; display: grid; place-items: center; background-color: var(--b-center); background-image: var(--b-center-pattern, none); }
.mb-logo { font-family: var(--b-title-font); font-size: calc(var(--b-logo-size, 6cqw) * 1.6); font-weight: 800; line-height: 1; text-align: center; color: var(--b-logo, var(--b-accent)); text-shadow: var(--b-logo-shadow, none); transform: rotate(-8deg); }
.mb-logo i { font-style: normal; color: var(--b-logo-2, var(--b-text)); }

/* ---------------------------------------------------------------- in-game modals */
.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-list .btn { justify-content: flex-start; }
.menu-list .menu-danger { color: #b3261e; }
.rules h4 { margin: 16px 0 6px; }
.rules ul { margin: 0; padding-left: 20px; }
.rules li { margin-bottom: 4px; }

.style-row { margin-bottom: 18px; }
.style-row h4 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; }
.style-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.style-opt { width: 108px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: transform var(--lift), box-shadow var(--lift); }
.style-opt:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px, -1px); }
.style-opt.on { background: var(--yellow); }
.style-opt.locked { opacity: 0.6; }
.style-opt em { font-size: 0.7rem; font-style: normal; color: var(--gold); }
.opt-ic { color: var(--red); font-size: 1.5rem; line-height: 1.3; }
.swatch { display: block; width: 40px; height: 40px; border: 5px solid var(--b-space); border-radius: 10px; outline: 2px solid var(--b-line); background: conic-gradient(var(--g-red) 0 25%, var(--g-yellow) 0 50%, var(--g-green) 0 75%, var(--g-darkblue) 0); }

.mg-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--paper-2); }
.mg-head-row span { display: flex; align-items: center; gap: 8px; }
.mg-head-row .cash { color: #11803f; }
.mg-group { margin-top: 14px; overflow: hidden; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.mg-gtitle { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-bottom: 2.5px solid var(--ink); background: var(--gc); color: #fff; font-family: var(--font-display); font-weight: 400; text-shadow: 1.5px 1.5px 0 var(--ink); }
.mg-gtitle small { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font); font-weight: 700; }
.mg-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1.5px dashed var(--line); }
.mg-row.mort .mg-name { opacity: 0.6; }
.mg-name { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mg-name small { color: var(--muted); }
.mg-houses { display: flex; gap: 1px; min-width: 1em; }
.mg-houses { --hu: 7.5px; align-items: flex-end; }
.mg-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.side-sheet .mg-row { grid-template-columns: auto 1fr auto; }
.side-sheet .mg-btns { grid-column: 1 / -1; justify-content: flex-start; }

.modal-deed { max-width: 380px; }
.modal-deed .modal-body { padding-top: 20px; }
.deed { padding: 12px; border-radius: 12px; background: #fffdf6; color: #1b1b1b; box-shadow: inset 0 0 0 2px #1b1b1b; }
.deed-head { padding: 10px; border: 2px solid #1b1b1b; border-radius: 6px; background: var(--gc); color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.deed-head small { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.9; }
.deed-head h3 { margin: 2px 0 0; font-size: 1.3rem; text-transform: uppercase; }
.deed-rent { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 0.92rem; }
.deed-rent td { padding: 4px 8px; }
.deed-rent td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.deed-rent tr.on { background: #fde68a; }
.deed-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 8px; border-top: 1px solid #ddd; font-size: 0.82rem; color: #555; }
.deed-owner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 0.9rem; }
.deed-owner .warn { color: #c2410c; }
.deed-manage { margin-top: 10px; overflow: hidden; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); }
.deed-manage .mg-row { border-top: 0; }
.deed .modal-actions { justify-content: center; }
.deed .linkish { color: inherit; }
.deed-info { padding: 20px; text-align: center; }
.deed-icon { font-size: 3rem; }
.deed-big { font-size: 1.4rem; font-weight: 800; }

.trade-partners { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.partner { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.partner.on { background: color-mix(in srgb, var(--pc) 30%, #fff); box-shadow: 4px 4px 0 var(--ink); }
.partner small { color: var(--muted); font-size: 0.65rem; }
.trade-cols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; }
.trade-col { min-width: 0; padding: 12px; border: 2.5px solid var(--ink); border-top: 8px solid var(--pc); border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.trade-col h4 { font-size: 0.95rem; }
.trade-swap { align-self: center; font-size: 1.4rem; color: var(--muted); }
.tp-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; margin-bottom: 8px; }
.tp { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; }
.tp:hover { background: var(--paper-2); }
.tp.dis { opacity: 0.45; cursor: not-allowed; }
.tp input { accent-color: var(--red); }
.tp em { margin-left: auto; font-size: 0.7rem; font-style: normal; color: var(--muted); }
.tc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.88rem; font-weight: 600; }
.tc .input { width: 100px; }
.tc small { font-weight: 400; color: var(--muted); }
.tc select { padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); color: var(--text); }
.trade-msg { display: none; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 2.5px solid var(--ink); border-radius: 10px; background: #ffe0da; }
.trade-msg.show { display: flex; flex-wrap: wrap; }
.trade-confirm { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.trade-desc { padding: 12px; border: 2.5px dashed var(--ink); border-radius: 10px; background: var(--paper-2); }

.offer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.offer-col { padding: 12px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; }
.offer-col.good { border-top: 8px solid var(--green); }
.offer-col.bad { border-top: 8px solid var(--red); }
.offer-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.offer-list li { display: flex; align-items: center; gap: 8px; }
.offer-list em { font-size: 0.8rem; color: var(--muted); }

.modal-results { max-width: 480px; }
.results-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 14px; text-align: center; }
.results-hero h2 { margin: 8px 0 0; font-size: 2rem; }
.standings { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.standings li { display: grid; grid-template-columns: 28px auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; }
.standings li:first-child { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.standings li.out { opacity: 0.55; }
.standings .rk { font-weight: 800; color: var(--muted); }
.standings .nw { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 900px) {
  .game-layout { grid-template-columns: 1fr; padding: 0 10px 20px; }
  .board-wrap { width: 100%; max-width: 760px; }
  .side-col { position: static; max-height: none; }
  .log-panel { max-height: 280px; }
  .game-topbar { padding: 8px 10px; }
}
@media (max-width: 640px) {
  .game-topbar .tb-label { display: none; }
  .round-info { white-space: nowrap; }
  .mg-row { grid-template-columns: auto 1fr auto; }
  .mg-btns { grid-column: 1 / -1; justify-content: flex-start; }
  .trade-cols { grid-template-columns: 1fr; }
  .trade-swap { justify-self: center; transform: rotate(90deg); }
  .offer-cols { grid-template-columns: 1fr; }
}
@container (max-width: 560px) {
  .space .nm, .space .ct { display: none; }
  .space .pr { font-size: 1.7cqw; }
  .own .token-chip { --ts: 3.6cqw; }
  .own b { display: none; }
  .space .ic { font-size: 3.2cqw; }
  .corner-inner small, .visiting { display: none; }
  .corner-inner b { font-size: 2cqw; }
  .deck { display: none; }
  .center-stack { width: 92%; }
}
@container (max-width: 440px) {
  .board-logo { display: none; }
  .turn-banner { padding: 3px 10px 3px 4px; }
}