/* ═══ Monopoly board — readable on every side, drawn icons, pawns and dice ═══════════════════════════════════
   Loaded after main.css: it replaces the old rotated side text (which read upside down on the left) and the flat look. */
.board { --paper: #f7f3e6; --ink: #1d2230; border: 0; border-radius: 14px; background: #10261c; padding: 0;
  box-shadow: 0 0 0 6px #0d141f, 0 0 0 7px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.75); overflow: hidden; }
.board-center { background: radial-gradient(ellipse at 50% 40%, #2c8a62 0%, #1b6446 55%, #0f3d2b 100%); gap: calc(var(--board-size) * 0.018); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.board-center::before { content: ''; position: absolute; inset: 7%; border: 2px solid rgba(255,255,255,.07); border-radius: 10px; pointer-events: none; }
.board-logo { display: flex; align-items: center; gap: .5em; font-size: calc(var(--board-size) * 0.046); font-weight: 900; letter-spacing: .14em; color: #f4fff8; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.board-logo-ico { display: inline-flex; color: #ffd54f; }
.free-parking-pot { padding: 4px 12px; border-radius: 99px; background: rgba(0,0,0,.35); }
.pot-label { color: rgba(255,255,255,.7); } .pot-amount { color: #ffe082; }
.dice-display { gap: calc(var(--board-size) * 0.02); }
.die { width: auto; height: auto; border: 0; background: none; box-shadow: none; display: inline-flex; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.die-empty { display: block; width: 44px; height: 44px; border-radius: 10px; border: 2px dashed rgba(255,255,255,.25); }
.auction-center { color: #fff; } .auction-center h4 { color: #ffb4a8; }

.square { background: var(--paper); border: 1px solid rgba(20, 24, 36, .28); color: var(--ink); justify-content: center; padding: 2px 3px; font-size: calc(var(--board-size) * 0.0138); transition: filter .15s, transform .15s; }
@media (hover: hover) { .square.clickable:hover { filter: none; transform: scale(1.04); z-index: 5; box-shadow: 0 8px 18px rgba(0,0,0,.45); } }
.square.owned::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: calc(var(--board-size) * 0.012); background: var(--owner, #888); }
.square.owned { filter: none; }
.sq-inner { transform: none !important; writing-mode: horizontal-tb !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; max-width: 100%; }
.sq-name { font-size: calc(var(--board-size) * 0.0132); line-height: 1.12; font-weight: 700; letter-spacing: -.005em; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.sq-price { font-size: calc(var(--board-size) * 0.0125); color: #4a5266; font-weight: 600; }
.sq-ico { display: inline-flex; color: #3a4258; }
.sq-ico .gi { width: calc(var(--board-size) * 0.03); height: calc(var(--board-size) * 0.03); stroke-width: 2.2; }
.color-band { height: calc(var(--board-size) * 0.026); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.square.edge-left .color-band, .square.edge-right .color-band { width: calc(var(--board-size) * 0.026); height: auto; }
.square.edge-left .color-band { right: 0; left: auto; } .square.edge-right .color-band { left: 0; right: auto; }
.square.edge-left .sq-inner { padding-inline-end: calc(var(--board-size) * 0.02); }
.square.edge-right .sq-inner { padding-inline-start: calc(var(--board-size) * 0.02); }
.square.edge-bottom .sq-inner { padding-top: calc(var(--board-size) * 0.02); }
.square.edge-top .sq-inner { padding-bottom: calc(var(--board-size) * 0.02); }
.square.corner { font-weight: 800; background: linear-gradient(160deg, #fff, #ece6d2); }
.square.corner .sq-name { font-size: calc(var(--board-size) * 0.0148); letter-spacing: .02em; }
.square.corner .sq-ico .gi { width: calc(var(--board-size) * 0.05); height: calc(var(--board-size) * 0.05); }
.square.type-go .sq-ico { color: #c62828; } .square.type-go_to_jail .sq-ico, .square.type-jail .sq-ico { color: #b3261e; }
.square.type-free_parking .sq-ico { color: #2e7d32; } .square.type-chance .sq-ico { color: #ef6c00; } .square.type-community_chest .sq-ico { color: #1565c0; }
.square.type-tax .sq-ico { color: #6d4c41; } .square.type-railroad .sq-ico { color: #263238; }
.square.type-chance { background: linear-gradient(180deg, #fff6e0, #ffe9b8); } .square.type-community_chest { background: linear-gradient(180deg, #e6f1ff, #cfe2fa); }
.square.type-railroad { background: linear-gradient(180deg, #f4f5f7, #dfe3ea); } .square.type-utility { background: linear-gradient(180deg, #eef8ea, #d8eccf); }
.square.type-tax { background: linear-gradient(180deg, #fbefe6, #f1d9c8); }
.square.type-go_to_jail, .square.type-jail { background: linear-gradient(160deg, #fff0ef, #f6d3d0); } .square.type-free_parking { background: linear-gradient(160deg, #eaf7ec, #cdeacf); }
.ownership-dot { display: none !important; }
.buildings { top: calc(var(--board-size) * 0.03); gap: 1px; }
.house-dot { width: calc(var(--board-size) * 0.014); height: calc(var(--board-size) * 0.014); border-radius: 2px 2px 0 0; background: #2e9a4c; border: 1px solid #1b6a33; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.hotel-dot { width: calc(var(--board-size) * 0.024); height: calc(var(--board-size) * 0.016); border-radius: 3px; background: #d93a32; border: 1px solid #8f1d17; }
.tokens-container { bottom: calc(var(--board-size) * 0.006); gap: 1px; }
.player-token { width: calc(var(--board-size) * 0.036); height: calc(var(--board-size) * 0.036); font-size: calc(var(--board-size) * 0.0195); font-weight: 800; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.55);
  border: 2px solid #fff; box-shadow: 0 3px 6px rgba(0,0,0,.55), inset 0 -3px 5px rgba(0,0,0,.25); }
@media (max-width: 760px) {
  .board { --board-size: min(calc(100vw - 12px), calc(100dvh - 190px), 560px); border-radius: 8px; }
  .sq-name { font-size: max(5.6px, calc(var(--board-size) * 0.0128)); }
  .sq-price { font-size: max(5.4px, calc(var(--board-size) * 0.0118)); }
  .sq-ico .gi { width: calc(var(--board-size) * 0.034); height: calc(var(--board-size) * 0.034); }
}

/* phones: a zoom button turns the board big enough to read every name (the area around it scrolls) */
.mono-zoom-btn { display: none; }
@media (max-width: 760px) {
  .board-wrapper:has(.board) { position: relative; align-items: flex-start; }
  .mono-zoom-btn { display: inline-flex; align-items: center; gap: 6px; position: sticky; top: 6px; inset-inline-start: 6px; z-index: 30; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(10,14,22,.92); color: #e8ecf7; font: inherit; font-weight: 700; font-size: 13px; }
  .mono-zoomed .board { --board-size: 860px; }
  .mono-zoomed { flex-direction: column; }
}