.board{display:grid;grid-template-columns:16px repeat(8,minmax(0,1fr));grid-template-rows:16px repeat(8,minmax(0,1fr));gap:3px;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto;user-select:none;-webkit-user-select:none;container-type:inline-size}.board__head{display:grid;place-items:center;font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-ink-muted)}.cell{position:relative;min-width:0;padding:0;border:0;border-radius:var(--radius-sm);font:inherit;display:grid;place-items:center}.cell--land{background:var(--land);color:var(--color-ink-muted)}.cell--land.is-owned{background:color-mix(in srgb,var(--seat-color) 28%,var(--color-surface));color:var(--color-ink-secondary)}.cell--park{background:var(--board-park);color:var(--board-park-ink)}.cell__tree{width:44%;height:auto}.cell--site{background:repeating-linear-gradient(135deg,var(--board-site) 0 3px,transparent 3px 7px);box-shadow:inset 0 0 0 1px var(--board-line)}.cell--landmark{background:var(--board-landmark);color:var(--board-landmark-ink);--icon-bg: var(--board-landmark)}.cell__lm{width:56%;height:auto}.cell__price{position:absolute;top:3px;left:4px;font-size:clamp(8px,2cqi,12px);font-weight:var(--weight-bold);line-height:1;font-variant-numeric:tabular-nums}.cell__price.is-boosted{color:var(--board-boost)}button.cell{cursor:pointer}button.cell:hover{box-shadow:inset 0 0 0 2px var(--color-ink-muted)}.cell.is-dim{opacity:.35}.tile{--icon-bg: var(--seat-color);position:relative;z-index:1;min-width:0;padding:0;border:0;border-radius:var(--radius-sm);background:var(--seat-color);color:var(--seat-ink);font:inherit;display:grid;place-items:center}button.tile{cursor:pointer}.tile.is-selected{outline:var(--focus-ring-width) solid var(--color-ink);outline-offset:2px;z-index:2}.tile.is-dim{opacity:.25}.tile__icon{width:52%;max-width:30px;height:auto}.tile.is-wide .tile__icon{width:26%}.tile__seat,.tile__floors{position:absolute;font-size:clamp(8px,2cqi,12px);font-weight:var(--weight-bold);line-height:1;font-variant-numeric:tabular-nums}.tile__seat{top:3px;left:4px}.tile__floors{right:4px;bottom:3px}.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:var(--text-sm)}.legend li{display:inline-flex;align-items:center;gap:var(--space-2)}.legend__tile,.legend__lm,.legend__park{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-sm)}.legend__tile{background:var(--color-ink);color:var(--color-surface);--icon-bg: var(--color-ink)}.legend__lm{background:var(--board-landmark);color:var(--board-landmark-ink);--icon-bg: var(--board-landmark)}.legend__park{background:var(--board-park);color:var(--board-park-ink)}.legend__park svg{width:16px;height:16px}.legend__tile svg,.legend__lm svg{width:16px;height:16px}.legend__note{flex-basis:100%;color:var(--color-ink-muted);font-size:var(--text-xs)}.board.is-marking .tile:not(.is-lit),.board.is-marking .cell--land:not(.is-lit){opacity:.28;transition:opacity var(--duration-slow) var(--ease-standard)}.board.is-marking .tile.is-lit{z-index:3;box-shadow:0 0 0 3px var(--color-surface),0 0 0 5px var(--seat-color)}.mark{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);padding:2px 6px;border-radius:var(--radius-full);background:var(--color-surface-raised);color:var(--color-good-ink);box-shadow:0 1px 4px #00000040;font-size:clamp(10px,2.6cqi,18px);font-weight:var(--weight-bold);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;animation:mark-pop .6s var(--ease-standard) both}.mark.is-neg{color:var(--color-critical-ink)}@keyframes mark-pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}60%{transform:translate(-50%,-50%) scale(1.15)}}.cell__coord{font-size:clamp(11px,3.4cqi,22px);font-weight:var(--weight-bold);line-height:1;color:var(--color-ink);letter-spacing:.02em}.cell--land:not(.is-owned) .cell__coord{color:var(--color-ink-muted);font-weight:var(--weight-medium)}.cell.is-outlined{box-shadow:inset 0 0 0 3px var(--color-ink);z-index:2}
