/* Open-table presentation. Game geometry and motion remain in style.css. */
:root { --panel:#24213c; --line:#46405e; --muted:#a7a2c0; --accent:#cbf582; color:#f4f1ff; background:#111222; --clay:#ff9c83; --sage:#cbf582; --gold:#ffcf70; --blue:#77d9ff; --purple:#bc9aff; --pink:#ff97cb; }
body { background:radial-gradient(ellipse at 50% 36%,#1c1b33 0%,#111222 68%); }
#game { grid-template-columns:minmax(190px,1fr) minmax(0, min( calc(100dvh - 32px), 1100px)) minmax(220px,1fr); gap:22px; padding:16px 22px; align-items:start; }
.game-shell { grid-column:2; grid-row:1; align-self:start; width:100%; }
.activity-rail,.player-rail { height:calc(100dvh - 32px); gap:16px; }
.activity-rail { grid-column:1; grid-row:1; }
.player-rail { grid-column:3; grid-row:1; }
.activity-rail > .brand { font-size:34px; letter-spacing:-1.8px; line-height:1.2; margin-top:6px; }
.activity-rail #connection { margin:0 0 10px; font-size:10px; color:#bbb5d2; }
.side-panel { border:1px solid #a797e010; border-radius:15px; background:linear-gradient(135deg,#28243f,#211f35); box-shadow:none; }
.panel-heading { padding:16px; }
.panel-heading h2 { font-size:13px; color:#d5cee9; }
.panel-heading > span { color:#b4aacd; font-size:10px; }
.room-card { padding-bottom:14px; }
.room-card .panel-heading { padding-bottom:8px; }
.room-card > p { margin:0 16px 18px; font-size:11px; color:var(--muted); }
.room-tools { display:flex; gap:8px; padding:0 12px; }
.room-tools #invite { flex:1; font-size:11px; padding:10px 5px; background:#38304f; border:1px solid #8971b62b; color:#eee6ff; }
.room-tools #history { width:36px; font-size:23px; background:#171526; border:0; }
.activity-rail .chat-panel { position:static; margin-top:auto; width:100%; max-height:none; }
.chat-panel summary { padding:16px; color:#d5cee9; font-size:13px; }
.chat-content { height:clamp(170px,36dvh,430px); }
#chat-messages:empty::after { content:'Your next great rivalry starts with hello.'; display:block; margin:25px auto; text-align:center; max-width:160px; font-size:12px; line-height:1.7; color:#9c92b7; }
input,select,#chat-input { background:#171626; border-color:#49405f; color:#f4f1ff; }
#chat-form { padding:12px; gap:8px; }
#chat-input { border-radius:10px; }
#chat-send { width:36px; border-radius:10px; }
.player-rail .players-panel { flex-shrink:0; }
.player-rail #players { max-height:min(360px,35dvh); padding:0 9px 9px; }
.players-panel .player { grid-template-columns:36px minmax(0,1fr) auto; gap:10px; padding:13px 9px; min-height:62px; background:transparent; border-radius:9px; }
.players-panel .player .token { width:34px; height:37px; border-radius:12px; }
.players-panel .player > span:nth-child(2) { font-size:13px; color:#e7e1f4; }
.players-panel .player strong { font-size:13px; color:#fff; }
.players-panel .player.active { border-color:transparent; background:color-mix(in srgb,var(--player-color) 8%,#171626); box-shadow:none; }
.player-rail .trade-inbox { position:static; margin:0; height:auto; min-height:112px; max-height:24dvh; flex-shrink:0; }
.trade-inbox .panel-heading { padding:10px 12px; }
.trade-inbox h2 { padding:0; }
#trade { min-height:32px; padding:6px 10px; background:#8054d7; color:white; border:0; font-size:11px; }
#trade:disabled { background:#40364f; color:#b2a6c6; }
#trade-list { overflow:auto; padding:0 9px 9px; }
.trade-empty { font-size:11px; color:#a49ab9; padding:4px; }
.collection-panel { min-height:0; flex:1; display:flex; flex-direction:column; }
.collection-panel .panel-heading { padding:12px 14px 4px; }
.collection-panel h2 span { color:#b4a4d2; font-size:11px; margin-left:5px; }
#assets { width:28px; min-height:28px; font-size:18px; border:0; }
.collection-caption { color:#a79bbd; font-size:10px; margin:2px 14px 12px; }
#property-collection { overflow:auto; scrollbar-width:thin; padding:0 14px 14px; }
.collection-country { padding:11px 0; border-top:1px solid #c2b5ed13; }
.collection-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.collection-heading strong { font-size:11px; font-weight:600; color:#ddd6ed; }
.collection-heading > span { color:#afa3c5; font-size:10px; }
.collection-progress { display:flex; gap:4px; margin-top:9px; }
.collection-progress span { flex:1; height:5px; background:color-mix(in srgb,var(--district) 14%,#171626); border-radius:3px; }
.collection-progress .collected { background:var(--district); box-shadow:0 0 7px color-mix(in srgb,var(--district) 22%,transparent); }
.collection-complete { display:block; margin-top:8px; color:var(--district); font-size:10px; }
.collection-property { display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px; padding:9px 8px; margin-top:7px; min-height:34px; background:#ffffff06; border-left:2px solid transparent; border-radius:5px; color:#e7e1f4; font-size:11px; font-weight:500; text-align:left; }
.collection-property small { font-size:9px; color:#b8adc9; }
#board { padding:0; gap:5px; border:0; border-radius:0; background:none; box-shadow:none; }
#board .board-center { position:relative; display:flex; flex-direction:column; padding:3cqw; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
#board .center-play { flex:none; height:auto; min-height:0; grid-template-rows:32px 140px 44px 56px; gap:8px; padding:0; margin:auto 0; align-content:center; }
#board .center-play h2 { font-size:clamp(16px,3.2cqw,29px); font-weight:600; letter-spacing:-.5px; color:#e3dcf6; }
#roll-dice .dice-shell { --die-size:clamp(32px,9.5cqw,80px); }
#board .center-dice { gap:5cqw; }
#board .center-play .decision-summary { height:44px; color:#bcb2ce; font-size:12px; align-items:center; padding:0; }
#board .center-play #actions button { font-size:13px; min-height:42px; padding:10px 18px; box-shadow:none; border-radius:9px; }
#board .center-play #actions :is([data-action="buy"],[data-action="pass"],[data-action="end"]) { font-size:14px; min-height:42px; padding:10px 18px; }
#actions button + button { background:#39304f; color:#eae2fc; box-shadow:none; }
#board .event-panel { flex:none; width:100%; height:80px; max-height:80px; margin:0 0 30px; overflow:hidden; text-align:center; }
#board .event-panel #event-feed { height:80px; max-height:80px; padding:0; overflow:hidden; mask-image:linear-gradient(#000 45%,transparent); }
#board .event { padding:4px 0; border:0; }
#board .event p { font-size:10px; line-height:1.5; }
#board .event.latest { background:none; }
#board .event.latest::before { display:none; }
#board .event-dice { font-size:16px; }
.money-results { bottom:1cqw; }
.money-result { font-size:12px; }
.group-0 { --district:#bb98ff; }.group-1 { --district:#69d6eb; }.group-2 { --district:#ff95c4; }.group-3 { --district:#ffd078; }.group-4 { --district:#ff9b7c; }.group-5 { --district:#9ddb9f; }
#board .tile { border:1px solid #c3b9e31c; border-top:3px solid var(--district); border-radius:9px; box-shadow:none; padding:4px 3px; gap:1px; grid-template-rows:minmax(18px,1fr) auto 22px 15px; transition:filter .2s,box-shadow .2s,opacity .2s; }
#board .tile.property { background:linear-gradient(160deg,color-mix(in srgb,var(--district) 28%,#24213b),color-mix(in srgb,var(--district) 10%,#24213b)); }
#board .tile > .tile-symbol.landmark { display:block!important; width:clamp(22px,6.5cqw,62px); height:100%; max-height:56px; max-width:62px; color:var(--district); opacity:1; }
#board .tile > strong { font-size:clamp(8px,1.45cqw,12px); color:#f7f2ff; font-weight:650; white-space:normal; letter-spacing:0; }
#board .tile > small { font-size:clamp(7px,1.2cqw,10px); line-height:1.3; background:#0c0b2038; border-radius:4px; padding:1px 5px; color:#ddd6ef; }
#board .country-badge { position:absolute; top:4px; left:5px; font-size:clamp(10px,1.8cqw,16px); line-height:1; filter:saturate(.85); pointer-events:none; }
#board .tile.start { background:linear-gradient(150deg,#3f5141,#252c35); border-color:#cbf58255; }
#board .tile.tax { background:linear-gradient(150deg,#4c3045,#30243e); }
#board .tile.event { background:linear-gradient(150deg,#514073,#30284b); border-top-color:#ba96f5; }
#board .tile.event .tile-symbol { color:#d7b7ff; width:clamp(18px,4cqw,34px); height:clamp(18px,4cqw,34px); }
#board .tile.event > strong { color:#e4d1ff; }
#board .tile.event > small { color:#c6afe8; letter-spacing:0; }
#board .tile.selected { outline:2px solid #fff; outline-offset:-2px; box-shadow:0 0 18px #ab83ff30; }
#board .tile.current-space { box-shadow:inset 0 0 0 1px #ffffff85; }
#board .tile .owner { inset:auto 2px 2px; height:14px; line-height:14px; font-size:9px; border-radius:4px; }
#board .tile .tokens .token { width:clamp(12px,3cqw,26px); height:clamp(13px,3.4cqw,29px); }
#board .tile .tokens:has(.token:nth-child(4)) { grid-template-rows:repeat(2,10px); gap:1px 3px; }
#board .tile .tokens:has(.token:nth-child(4)) .token { width:12px; height:10px; }
#board .board-center > .tile-popover { background:#28223e; border-color:#8e74b888; box-shadow:0 16px 50px #0009; }
#trade-dialog { background:#242039; border-color:#665181; }
#trade-dialog .trade-panel { background:radial-gradient(ellipse at top left,#65458633,transparent 70%); }
#trade-dialog .trade-side { background:#171525aa; }
#room-form { background:linear-gradient(145deg,#2b2542,#1b1b30); border-color:#8971b632; }
#room-form .intro { color:#b7a9ce; }
@media(min-width:901px) and (max-width:1150px) {
  #game { grid-template-columns:180px minmax(0,1fr) 200px; gap:14px; padding:16px 14px; }
  .players-panel .player { grid-template-columns:28px minmax(0,1fr) auto; gap:6px; padding:10px 5px; }
  .players-panel .player .token { width:27px; height:30px; }
  .players-panel .player > span:nth-child(2),.players-panel .player strong { font-size:11px; }
}
@container(max-width:600px) {
  #board .center-play { grid-template-rows:26px 90px 34px 44px; gap:4px; }
  #board .center-play .decision-summary { height:34px; font-size:10px; }
  #board .event-panel,#board .event-panel #event-feed { height:50px; max-height:50px; }
  #board .event-panel { margin-bottom:22px; }
  #board .event p { font-size:9px; }
  #board .tile { grid-template-rows:minmax(12px,1fr) auto 16px 12px; padding:2px; }
  #board .tile .tokens .token { width:14px; height:16px; }
  #board .tile .tokens:has(.token:nth-child(4)) { grid-template-rows:repeat(2,7px); }
  #board .tile .tokens:has(.token:nth-child(4)) .token { width:9px; height:7px; }
}
@media(max-width:900px) and (min-height:501px) {
  #game { grid-template-columns:1fr 1fr; gap:14px; padding:14px 12px 80px; }
  .activity-rail { grid-column:1; grid-row:1; height:auto; gap:5px; }
  .activity-rail > .brand { font-size:27px; }
  .activity-rail #connection { font-size:9px; margin:0 0 5px; }
  .room-card .panel-heading,.room-card > p { display:none; }
  .room-card { padding:6px 0; background:none; border:0; }
  .room-tools { padding:0; gap:5px; }
  .room-tools #invite { font-size:10px; min-height:34px; }
  .player-rail { display:contents; }
  .player-rail .players-panel { grid-column:2; grid-row:1; }
  .players-panel .panel-heading { padding:8px 10px; }
  .player-rail #players { max-height:106px; padding:0 5px 5px; }
  .players-panel .player { grid-template-columns:22px minmax(0,1fr) auto; min-height:34px; padding:5px; gap:5px; }
  .players-panel .player .token { width:21px; height:24px; }
  .players-panel .player > span:nth-child(2),.players-panel .player strong { font-size:10px; }
  .game-shell { grid-column:1 / -1; grid-row:2; }
  .player-rail .trade-inbox { grid-column:1 / -1; grid-row:3; max-height:180px; min-height:100px; }
  .collection-panel { grid-column:1 / -1; grid-row:4; min-height:260px; }
  #property-collection { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; max-height:400px; }
  .activity-rail .chat-panel { position:fixed; z-index:12; bottom:12px; right:12px; width:130px; background:#29213f; border-color:#715990; }
  .activity-rail .chat-panel[open] { width:min(350px,calc(100% - 24px)); }
  .chat-content { height:240px; }
}
@container(max-width:450px) {
  #board .board-center { padding:1cqw; }
  #board .center-play { grid-template-rows:22px 62px 26px 34px; gap:2px; margin:auto 0; }
  #board .center-play h2 { font-size:14px; letter-spacing:-.2px; }
  #board .center-play .decision-summary { height:26px; font-size:9px; }
  #board .center-play #actions button,#board .center-play #actions :is([data-action="buy"],[data-action="pass"],[data-action="end"]) { min-height:30px; padding:6px 8px; font-size:10px; }
  #board .event-panel,#board .event-panel #event-feed { height:28px; max-height:28px; }
  #board .event-panel { margin:0 0 20px; }
  #board .event p { font-size:8px; }
  #board .tile { border-top-width:2px; border-radius:5px; grid-template-rows:minmax(8px,1fr) 14px 9px 8px; padding:1px; gap:0; }
  #board .tile > .tile-symbol.landmark { min-height:8px; width:24px; max-height:20px; }
  #board .country-badge { top:2px; left:2px; font-size:8px; }
  #board .tile > strong { font-size:7px; line-height:1; }
  #board .tile > small { font-size:6px; padding:0 2px; line-height:8px; }
  #board .tile .owner { font-size:6px; height:8px; line-height:8px; inset:auto 1px 1px; padding:0; }
  #board .tile .tokens .token { width:9px; height:10px; }
  #board .tile .tokens:has(.token:nth-child(4)) { grid-template-rows:repeat(2,4px); gap:0 2px; }
  #board .tile .tokens:has(.token:nth-child(4)) .token { width:7px; height:4px; }
  .money-result { font-size:9px; }
  #board .tile.event > .tile-symbol,#board .tile.start > .tile-symbol,#board .tile.tax > .tile-symbol { display:block!important; width:15px; height:15px; }
}
@media(max-height:500px) and (min-width:621px) {
  #game { grid-template-columns:160px minmax(0,1fr) 180px; gap:12px; padding:10px; }
  .activity-rail,.player-rail { height:calc(100dvh - 20px); gap:8px; }
  .activity-rail > .brand { font-size:24px; margin:0; }
  .activity-rail #connection { margin:0; }
  .room-card .panel-heading,.room-card > p { display:none; }
  .room-card { padding:6px; }.room-tools { padding:0; }
  .chat-content { height:140px; min-height:80px; }
  .chat-panel summary { padding:9px; }
  .panel-heading { padding:8px 10px; }
  .player-rail #players { max-height:96px; }
  .players-panel .player { grid-template-columns:24px minmax(0,1fr) auto; min-height:34px; padding:4px; gap:4px; }
  .players-panel .player .token { width:23px; height:25px; }
  .players-panel .player > span:nth-child(2),.players-panel .player strong { font-size:10px; }
  .player-rail .trade-inbox { min-height:78px; max-height:90px; }
  .collection-caption { display:none; }.collection-panel .panel-heading { padding:5px 10px; }
  .collection-country { padding:8px 0; }
}
@media(prefers-reduced-motion:reduce) { #board .tile { transition:none; } }
#board .board-center::before,#board .board-center::after { content:none; }
.player-rail .trade-inbox { width:100%; }
@container(max-width:350px) {
  #board .tile { grid-template-rows:minmax(0,1fr) 12px 10px 8px; padding:0 1px; }
  #board .tile > .tile-symbol.landmark { min-height:0; max-height:10px; width:18px; }
  #board .tile > strong { font-size:6px; }
  #board .tile > small { font-size:5px; line-height:7px; }
  #board .tile .tokens .token { width:7px; height:7px; }
  #board .tile .owner { height:7px; line-height:7px; font-size:5px; }
  #board .tile.event > .tile-symbol,#board .tile.start > .tile-symbol,#board .tile.tax > .tile-symbol { width:10px; height:10px; }
}

/* Stable panel budgets: content scrolls without resizing the surrounding table. */
#game { --players-height:174px; --trades-height:180px; --chat-height:clamp(230px,40dvh,420px); }
.player-rail { display:grid; grid-template-rows:var(--players-height) var(--trades-height) minmax(0,1fr); }
.player-rail .players-panel,.player-rail .trade-inbox,.collection-panel { width:100%; height:100%; min-height:0; max-height:none; display:flex; flex-direction:column; overflow:hidden; }
.panel-heading { flex:0 0 42px; height:42px; padding:8px 12px; }
.player-rail #players,#trade-list,#property-collection { flex:1; height:0; min-height:0; max-height:none; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; }
.players-panel .player { flex:none; width:100%; height:36px; min-height:36px; grid-template-columns:24px minmax(0,1fr) auto; gap:7px; padding:4px 7px; }
.players-panel .player .token { width:23px; height:25px; border-radius:8px; grid-row:auto; }
.players-panel .player > span:nth-child(2),.players-panel .player strong { font-size:11px; grid-column:auto; }
.player-rail #players { gap:4px; padding:0 7px 7px; }
.room-card { flex:none; width:100%; height:128px; overflow:auto; }
.activity-rail .chat-panel { flex:none; height:var(--chat-height); max-height:none; }
.activity-rail .chat-panel:not([open]) { height:48px; }
.chat-panel summary { box-sizing:border-box; height:48px; }
.chat-content { height:calc(var(--chat-height) - 50px); min-height:0; }
#chat-messages { overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; }
#chat-form { flex:0 0 58px; height:58px; }
.collection-caption { flex:none; height:24px; margin:0 14px; overflow:auto; }
.collection-country { min-width:0; }
.collection-property { height:36px; min-height:36px; }
.collection-property span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trade-inbox-item { height:66px; min-height:66px; overflow:auto; }
#trade-dialog { width:min(760px,calc(100vw - 28px)); height:min(660px,calc(100dvh - 28px)); }
#trade-dialog .trade-panel { height:100%; max-height:100%; }
#trade-dialog .trade-body { flex:1; scrollbar-gutter:stable; }
#trade-dialog .trade-side { height:420px; overflow:auto; scrollbar-gutter:stable; }
#history-dialog { width:min(480px,calc(100vw - 28px)); height:min(560px,calc(100dvh - 28px)); overflow:hidden; }
#history-dialog .dialog-heading { height:38px; }
#history-dialog #log { height:calc(100% - 62px); overflow:auto; scrollbar-gutter:stable; }
.tile-popover .board-property-body { overflow:auto; scrollbar-gutter:stable; }
#room-form { height:460px; overflow:auto; }
:where(#players,#trade-list,#property-collection,#event-feed,#chat-messages,.trade-body,.trade-side,#log,.board-property-body) { scrollbar-width:thin; scrollbar-color:#75618f #171526; }
/* A fixed turn area and a larger, independently scrollable activity window. */
#board .board-center { display:grid; grid-template-rows:52% 38% 10%; gap:0; align-content:stretch; padding:2cqw; }
#board .center-play { width:100%; height:100%; margin:0; grid-template-rows:20% 38% 16% 26%; gap:0; align-content:stretch; }
#board .center-play .decision-summary { height:100%; overflow:auto; padding:2px 4px; }
#board .center-play h2 { width:100%; max-height:100%; overflow:auto; }
#board .center-play #turn-panel { height:100%; overflow:auto; scrollbar-gutter:stable; }
#board #actions { height:100%; align-content:center; }
#board .event-panel { width:100%; height:100%; max-height:none; margin:0; align-self:stretch; border-radius:8px; overflow:hidden; text-align:center; }
#board .event-panel #event-feed { height:100%; max-height:none; overflow:auto; mask-image:none; padding:3px 10px; scrollbar-gutter:stable; overscroll-behavior:contain; }
#board .event { padding:6px 0; }
#board .event p { font-size:12px; line-height:1.5; }
.money-results { position:static; grid-row:3; width:100%; height:100%; overflow:auto; align-content:center; margin:0; pointer-events:auto; }
/* Every seat owns a stable square slot. Occupants use the illustration area. */
#board .tile { --piece-size:clamp(8px,2.7cqw,26px); --piece-gap:2px; --flag-size:clamp(14px,3.2cqw,28px); grid-template-rows:minmax(0,1fr) 16px 20px; gap:2px; padding:4px; overflow:hidden; }
#board .tile > strong { grid-row:2; align-self:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:16px; }
#board .tile > small { grid-row:3; font-size:clamp(9px,1.8cqw,15px); line-height:18px; padding:0 5px; font-weight:650; }
#board .country-badge { top:5px; left:4px; font-size:var(--flag-size); z-index:1; }
#board .tile > .tile-symbol { grid-row:1; }
#board .tile > .tile-symbol.landmark { margin-left:var(--flag-size); width:calc(100% - var(--flag-size)); max-width:62px; max-height:100%; }
#board .tile:has(.tokens:not(:empty)) > .tile-symbol { visibility:hidden; }
#board .tile .tokens,#board .tile .tokens:has(.token:nth-child(4)) { grid-row:1; grid-column:1; width:100%; height:100%; min-height:0; padding-left:calc(var(--flag-size) + 2px); display:grid; grid-template-columns:repeat(3,var(--piece-size)); grid-template-rows:repeat(2,var(--piece-size)); gap:var(--piece-gap); justify-content:center; align-content:center; }
#board .tile:not(.property) .tokens { padding-left:0; }
#board .tile .tokens .token,#board .tile .tokens:has(.token:nth-child(4)) .token { width:var(--piece-size); height:var(--piece-size); min-width:0; margin:0!important; border-radius:35%; border:1px solid #ffffffaa; box-shadow:0 1px 2px #0006; }
#board .tile .tokens .token svg { width:100%; height:100%; }
#board .tile .owner { height:18px; line-height:18px; font-size:10px; inset:auto 3px 4px; }
#board .tile:has(.tile-symbol[data-level]:not([data-level="base"])) > strong { padding-right:0; }
@media(max-width:900px) and (min-height:501px) {
  #game { --players-height:122px; --trades-height:170px; --chat-height:300px; grid-template-rows:122px auto 170px 340px; }
  .activity-rail { height:122px; }
  .player-rail { display:contents; }
  .player-rail .players-panel { height:122px; }
  .players-panel .player { grid-template-columns:20px minmax(0,1fr) auto; height:32px; min-height:32px; padding:3px; gap:4px; }
  .players-panel .player .token { width:19px; height:21px; }
  .players-panel .player > span:nth-child(2),.players-panel .player strong { font-size:10px; }
  .room-card { height:46px; padding:4px 0; }
  .player-rail .trade-inbox { height:170px; }
  .collection-panel { height:340px; }
  #property-collection { display:block; }
  .activity-rail .chat-panel { width:min(350px,calc(100vw - 24px)); height:300px; }
  .activity-rail .chat-panel:not([open]) { width:130px; height:48px; }
}
@media(max-height:500px) and (min-width:621px) {
  #game { --players-height:106px; --trades-height:90px; --chat-height:180px; }
  .room-card { height:54px; }
  .players-panel .player { height:30px; min-height:30px; padding:2px; grid-template-columns:21px minmax(0,1fr) auto; }
  .players-panel .player .token { width:20px; height:22px; }
  .panel-heading { flex-basis:34px; height:34px; padding:5px 9px; }
  .collection-caption { display:none; }
  .chat-panel summary { height:36px; }
  .chat-content { height:calc(var(--chat-height) - 38px); }
  #chat-form { padding:6px; flex-basis:46px; height:46px; }
}
@container(max-width:600px) {
  #board .event p { font-size:10px; }
  #board .event { padding:4px 0; }
  #board .tile { --piece-gap:1px; grid-template-rows:minmax(0,1fr) 12px 15px; padding:2px; gap:1px; }
  #board .tile > strong { font-size:8px; line-height:12px; }
  #board .tile > small { font-size:10px; line-height:14px; }
  #board .tile .owner { height:14px; line-height:14px; bottom:2px; font-size:8px; }
  #board .country-badge { top:3px; left:2px; }
}
@container(max-width:450px) {
  #board .board-center { padding:1cqw; grid-template-rows:60% 30% 10%; }
  #board .center-play { grid-template-rows:20% 35% 19% 26%; }
  #board .event p { font-size:8px; line-height:1.4; }
  #board .event-panel #event-feed { padding:0 4px; }
  #board .event { padding:3px 0; }
  #board .tile { --flag-size:12px; --piece-size:8px; --piece-gap:1px; grid-template-rows:minmax(0,1fr) 9px 11px; padding:1px; gap:0; }
  #board .country-badge { font-size:14px; top:2px; left:1px; }
  #board .tile > strong { font-size:7px; line-height:9px; }
  #board .tile > small { font-size:8px; line-height:11px; padding:0 2px; }
  #board .tile .owner { font-size:7px; height:10px; line-height:10px; bottom:1px; inset-inline:1px; }
  #board .tile > .tile-symbol.landmark { min-height:0; max-height:100%; }
  #board .tile .tokens,#board .tile .tokens:has(.token:nth-child(4)) { padding-left:13px; }
  #board .tile:not(.property) .tokens { padding-left:0; }
  #board .tile.event > small { font-size:7px; }
  #board .tile.event > small::after { content:none; }
  #board .tile.event > small { font-size:0; }
  #board .tile.event > small::after { content:'EVENT'; font-size:7px; }
}
#board .tile { grid-template-columns:minmax(0,1fr); }
#board .tile > .tile-symbol,#board .tile > strong,#board .tile > small { grid-column:1; }
.player-rail > .players-panel { grid-area:1 / 1; }
.player-rail > .trade-inbox { grid-area:2 / 1; }
.player-rail > .collection-panel { grid-area:3 / 1; }
#board .center-play { grid-area:1 / 1; }
#board .event-panel { grid-area:2 / 1; }
#board .money-results { grid-area:3 / 1; }
@media(max-width:900px) and (min-height:501px) {
  .player-rail > .players-panel { grid-area:1 / 2; }
  .player-rail > .trade-inbox { grid-area:3 / 1 / 4 / -1; }
  .player-rail > .collection-panel { grid-area:4 / 1 / 5 / -1; }
}
#board .country-badge { display:block; width:var(--flag-size); height:calc(var(--flag-size) * 2 / 3); border-radius:2px; overflow:hidden; filter:none; box-shadow:0 1px 3px #0003; }
.country-badge svg { display:block; width:100%; height:100%; }
@container(max-width:450px) {
  #board .tile { --flag-size:14px; }
  #board .tile .tokens,#board .tile .tokens:has(.token:nth-child(4)) { padding-left:16px; }
  #board .tile:not(.property) .tokens { padding-left:0; }
}
@container(max-width:350px) {
  #board .tile { --flag-size:13px; --piece-size:7px; --piece-gap:0px; }
  #board .tile .tokens,#board .tile .tokens:has(.token:nth-child(4)) { padding-left:14px; }
  #board .tile:not(.property) .tokens { padding-left:0; }
}
#board .center-play #actions { flex-wrap:nowrap; align-items:center; }
#board .center-play #actions button { min-height:0; height:38px; max-height:100%; overflow:auto; }
@container(max-width:450px) {
  #board .center-play #actions button,#board .center-play #actions :is([data-action="buy"],[data-action="pass"],[data-action="end"]) { min-height:0; height:28px; max-height:100%; padding:4px 6px; font-size:10px; }
}

.money-neutral { color:var(--muted); }

/* Compact turn controls; the surrounding slots keep their fixed dimensions. */
#board .center-play #actions :is([data-action="buy"],[data-action="pass"],[data-action="end"]) { flex:0 0 auto; min-width:0; width:auto; height:30px; padding:5px 12px; font-size:12px; border-radius:7px; }
.collection-empty { margin:14px 0; color:var(--muted); font-size:12px; }
@container(min-width:451px) and (max-width:600px) { #board .tile { --piece-size:clamp(8px,2.1cqw,12px); } }
@container(max-width:450px) {
  #board .center-play #actions :is([data-action="buy"],[data-action="pass"],[data-action="end"]) { height:24px; padding:4px 8px; font-size:10px; }
}
@media(max-width:374px) { #board { gap:3px; } }

/* City cards: permanent architecture above a separate visitor promenade. */
#board { gap:6px; }
#board .tile { --piece-size:clamp(7px,2.45cqw,22px); --piece-gap:2px; --flag-size:clamp(14px,2.8cqw,25px); grid-template-rows:minmax(0,1fr) 14px calc(var(--piece-size) * 2 + var(--piece-gap) + 2px) 18px; padding:3px; gap:1px; border:1px solid color-mix(in srgb,var(--district) 32%,#322d46); border-top:3px solid var(--district); border-radius:10px; background:linear-gradient(160deg,color-mix(in srgb,var(--district) 20%,#29233e),#211f34); box-shadow:inset 0 1px #ffffff12,0 2px 5px #0002; }
#board .tile.property { background:linear-gradient(160deg,color-mix(in srgb,var(--district) 24%,#28243c),#211f34 85%); }
#board .tile > .tile-symbol,#board .tile > .tile-symbol.landmark { grid-row:1; grid-column:1; visibility:visible!important; position:static; display:block!important; justify-self:center; align-self:center; width:100%; height:100%; max-height:60px; max-width:70px; min-height:0; margin:0; padding:0; opacity:1; }
#board .tile > .tile-symbol.landmark { padding-left:10px; }
#board .tile > strong { grid-row:2; line-height:14px; font-size:clamp(8px,1.55cqw,12px); font-weight:700; letter-spacing:.1px; }
#board .tile > small { grid-row:4; height:18px; line-height:18px; font-size:clamp(9px,1.7cqw,14px); border-radius:5px; background:#100d2166; padding-inline:6px; }
#board .country-badge { top:5px; left:5px; }
#board .tile .tokens,#board .tile .tokens:has(.token:nth-child(4)) { grid-row:3; grid-column:1; padding:1px 0; width:100%; height:100%; grid-template-columns:repeat(3,var(--piece-size)); grid-template-rows:repeat(2,var(--piece-size)); gap:var(--piece-gap); align-content:center; justify-content:center; background:#100d212b; border-radius:6px; }
#board .tile .tokens:empty { background:transparent; }
#board .tile .tokens .token,#board .tile .tokens:has(.token:nth-child(4)) .token { width:var(--piece-size); height:var(--piece-size); border-radius:35%; box-shadow:0 1px 3px #0008,inset 0 1px #ffffff66; }
#board .tile .owner { inset:auto 3px 3px; height:18px; line-height:18px; border-radius:5px; font-size:9px; }
#board .tile.start { border-color:#b7e77888; background:linear-gradient(150deg,#344338,#202a31); }
#board .tile.start::after { content:'→'; top:5px; right:7px; left:auto; font-size:18px; }
#board .tile.event { border-top-color:#bd9bf4; background:linear-gradient(145deg,#403056,#252238); }
#board .tile.tax { border-top-color:#f49b83; background:linear-gradient(145deg,#49333d,#282233); }
#board .tile:not(.property) > .tile-symbol { max-width:36px; }
#board .tile.current-space { border-color:#f2e7ff; box-shadow:inset 0 0 0 1px #f5eaff26,0 0 14px #bc9aff15; }
#board .tile.selected { outline:2px solid var(--accent); outline-offset:-2px; }
@container(max-width:600px) {
  #board .tile { --piece-size:clamp(7px,2cqw,12px); --piece-gap:1px; grid-template-rows:minmax(0,1fr) 11px calc(var(--piece-size) * 2 + 2px) 14px; padding:2px; border-radius:7px; border-top-width:2px; }
  #board .tile > strong { line-height:11px; font-size:8px; }
  #board .tile > small { height:14px; line-height:14px; font-size:10px; }
  #board .tile .owner { inset:auto 2px 2px; height:14px; line-height:14px; font-size:8px; }
  #board .country-badge { top:3px; left:3px; }
}
@container(max-width:450px) {
  #board .tile { --piece-size:7px; --piece-gap:1px; --flag-size:12px; grid-template-rows:minmax(0,1fr) 8px 16px 10px; padding:0 1px; gap:0; border-radius:5px; }
  #board .tile > strong { line-height:8px; font-size:7px; }
  #board .tile > small { height:10px; line-height:10px; font-size:8px; padding:0 2px; }
  #board .tile .owner { inset:auto 1px 1px; height:9px; line-height:9px; font-size:6px; }
  #board .tile > .tile-symbol,#board .tile > .tile-symbol.landmark { max-height:100%; width:100%; height:100%; padding-left:9px; }
  #board .country-badge { top:2px; left:2px; }
  #board .tile:not(.property) > .tile-symbol { padding-left:0; }
  #board .tile.start::after { top:1px; right:2px; font-size:10px; }
}
@media(max-width:600px) { #board { gap:3px; } }
@container(max-width:350px) {
  #board .tile { --piece-size:6px; --piece-gap:1px; --flag-size:11px; grid-template-rows:minmax(0,1fr) 7px 14px 9px; }
  #board .tile > strong { font-size:6px; line-height:7px; }
  #board .tile > small { font-size:7px; height:9px; line-height:9px; }
  #board .tile .owner { height:8px; line-height:8px; font-size:6px; }
}
/* A split illustration/visitor area gives architecture room to breathe. */
#board .tile { --piece-size:clamp(7px,2.25cqw,21px); grid-template-rows:minmax(0,1fr) 14px 18px; }
#board .tile > .tile-symbol,#board .tile > .tile-symbol.landmark { width:calc(100% - var(--piece-size) * 2 - 7px); max-width:none; max-height:none; justify-self:start; padding:calc(var(--flag-size) * 2 / 3 + 1px) 0 0; }
#board .tile:not(.property) > .tile-symbol { width:calc(100% - var(--piece-size) * 2 - 7px); max-width:none; padding:5px; }
#board .tile .tokens,#board .tile .tokens:has(.token:nth-child(4)) { grid-row:1; width:calc(var(--piece-size) * 2 + var(--piece-gap) + 4px); justify-self:end; grid-template-columns:repeat(2,var(--piece-size)); grid-template-rows:repeat(3,var(--piece-size)); padding:0; background:linear-gradient(180deg,#17132415,#17132455); }
#board .tile > small { grid-row:3; }
#board .tile.start::after { content:none; }
@container(max-width:600px) {
  #board .tile { --piece-size:clamp(7px,1.85cqw,11px); grid-template-rows:minmax(0,1fr) 11px 14px; }
}
@container(max-width:450px) {
  #board .tile { --piece-size:7px; grid-template-rows:minmax(0,1fr) 8px 10px; }
}
@container(max-width:350px) {
  #board .tile { --piece-size:6px; grid-template-rows:minmax(0,1fr) 7px 9px; }
}
#board .tile { --piece-size:clamp(6px,2.6cqw,24px); --piece-gap:1px; grid-template-rows:minmax(var(--piece-size),1fr) 15% 19%; padding:2px; }

#board .tile > .tile-symbol[data-level]:not([data-level="base"]) { position:static; width:calc(100% - var(--piece-size) * 2 - 7px); height:100%; max-width:none; max-height:none; padding:calc(var(--flag-size) * 2 / 3 + 1px) 0 0; justify-self:start; }

/* Keep pieces in their original seats and preserve their animation geometry. */
#board .tile .tokens .token {
  background:var(--player-color);
  color:#171324;
  border-color:#ffffffd9;
}
#board .tile .tokens .token svg,.moving-token svg { width:100%; height:100%; stroke-width:1.9; }
#board .tile .tokens .token.active-piece,#board .tile .tokens:has(.token:nth-child(4)) .token.active-piece {
  box-shadow:inset 0 0 0 1px #fff,0 1px 3px #0008;
}
#board .tile.located-player { outline:2px solid var(--accent); outline-offset:-2px; }
#board .tile .tokens .token.located-piece,#board .tile .tokens:has(.token:nth-child(4)) .token.located-piece {
  box-shadow:inset 0 0 0 1px #fff,0 0 5px var(--player-color);
}

/* Photographs blend into the city cards; player docks retain their geometry. */
#board .tile.property > .tile-symbol.landmark,
#board .tile.property > .tile-symbol.landmark[data-level] {
  position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  padding:0; margin:0; pointer-events:none; overflow:hidden; border-radius:inherit;
}
.city-photo {
  display:block; width:100%; height:100%; object-fit:cover; object-position:center 40%;
  opacity:.86; filter:saturate(.78);
  mask-image:linear-gradient(to bottom,#000 0%,#000 34%,#0009 62%,transparent 87%);
}
#board .tile.property > strong,#board .tile.property > small { position:relative; z-index:1; text-shadow:0 1px 3px #080716; }
#board .tile.property .tokens { position:relative; inset:auto; z-index:1; background:linear-gradient(90deg,transparent,#14112477); }
#board .tile.property .tokens:empty { background:transparent; }
#board .tile.property .country-badge { z-index:1; filter:drop-shadow(0 1px 2px #0009); }
#board .tile.property .owner { z-index:1; }
.development-badge {
  position:absolute; left:3px; bottom:34%; max-width:calc(100% - var(--piece-size) * 2 - 9px);
  padding:1px 3px; border:1px solid #c8f57877; border-radius:4px;
  background:#19261bea; color:#d6ffa1; font-size:clamp(5px,1.1cqw,9px); font-weight:800;
  line-height:1.2; white-space:nowrap; text-shadow:none;
}
[data-level="hotel"] .development-badge { color:#ffe39e; border-color:#ffe39e88; background:#342817ed; }
[data-level="set"] .development-badge { color:#e3cfff; border-color:#e3cfff66; background:#29203bed; }
.photo-credit-link { color:var(--muted); text-underline-offset:3px; }
.photo-credit-link:hover { color:#fff; }
.photo-credits-page main { width:min(900px,100%); margin:auto; padding:32px 20px; }
.photo-credits-page h1 { font-size:28px; }
.photo-credits-page p { line-height:1.6; color:var(--muted); }
.photo-credits-page a { color:var(--accent); }
.photo-credits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:28px; }
.photo-credit { padding:14px; border:1px solid var(--line); border-radius:12px; }
.photo-credit img { width:100%; height:140px; object-fit:cover; border-radius:6px; }
.photo-credit h2 { margin:12px 0 6px; font-size:17px; }
.photo-credit p { font-size:12px; margin:6px 0; overflow-wrap:anywhere; }
@container(max-width:450px) { .development-badge { left:1px; padding:0 1px; border-radius:2px; } }

.city-photo[data-city="Tokyo"],.city-photo[data-city="Yokohama"],.city-photo[data-city="Utrecht"] { object-position:center top; }
.city-photo[data-city="Florence"] { object-position:68% center; }
.city-photo[data-city="Kyoto"] { object-position:center 90%; }

/* Dedicated corner destinations and event squares. */
#board .tile { --piece-size:clamp(6px,2cqw,20px); }
#board .special-tile { --special:#bda0f5; border-color:color-mix(in srgb,var(--special) 50%,#262239); border-top-color:var(--special); background:radial-gradient(ellipse at 35% 20%,color-mix(in srgb,var(--special) 23%,#242139),#1d1c30 85%); }
#board .special-tile.start { --special:#c5ed86; }
#board .special-tile.prison { --special:#edb879; }
#board .special-tile.goToPrison { --special:#ff9586; }
#board .special-tile.holiday { --special:#7cddd0; }
#board .special-tile.tax { --special:#e5c887; }
#board .tile.special-tile > .special-symbol { display:grid!important; place-items:center; position:static; width:calc(100% - var(--piece-size) * 2 - 7px); height:100%; max-width:none; max-height:none; color:var(--special); padding:3px; }
#board .special-tile > .special-symbol svg { width:100%; height:100%; max-width:42px; max-height:42px; filter:drop-shadow(0 2px 3px #0004); }
#board .tile.special-tile:not(:has(.token)) > .special-symbol { width:100%; max-width:none; }
#board .special-tile > small { padding:0 2px; font-size:clamp(4px,1cqw,9px); color:var(--special); font-weight:750; letter-spacing:.15px; }
#board .special-tile > strong { letter-spacing:0; }
#board .tile.goToPrison > strong { font-size:clamp(5px,1.25cqw,11px); white-space:nowrap; }
#board .tile .token[data-detained="true"]::after { content:''; position:absolute; inset:1px; border-radius:inherit; background:repeating-linear-gradient(90deg,transparent 0 22%,#141525aa 22% 29%); pointer-events:none; }
#board .tile .token[data-holiday="true"] { border-color:#83e8d8; }
.player-state { display:block; margin-top:2px; color:var(--muted); font-size:8px; font-weight:500; line-height:1.2; }
@container(max-width:600px) { #board .tile { --piece-size:clamp(6px,1.5cqw,9px); } }
@container(max-width:450px) { #board .tile { --piece-size:5px; } #board .tile.special-tile > .special-symbol { padding:1px; } }
@container(max-width:350px) { #board .tile { --piece-size:4px; } }

/* Fit the complete board in the available view, retaining the larger piece proportions. */
#game { grid-template-columns:184px minmax(0,1fr) 224px; gap:14px; padding:12px; }
.game-shell { min-width:0; align-self:start; }
.game-layout { display:block; width:100%; height:var(--board-display-size,calc(100dvh - 24px)); overflow:hidden; overflow-anchor:none; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#75638f #171526; border-radius:12px; }
#board { width:var(--board-size,800px); max-width:none; min-width:0; margin-inline:auto; zoom:var(--board-scale,1); }
.activity-rail,.player-rail { height:calc(100dvh - 24px); }
#board .tile { --piece-size:clamp(18px,2.5cqw,32px); --piece-gap:2px; --flag-size:clamp(18px,2.6cqw,28px); grid-template-rows:minmax(0,1fr) 14px 18px; padding:2px; gap:1px; }
#board .tile .tokens,#board .tile .tokens:has(.token:nth-child(4)) { width:calc(var(--piece-size) * 3 + var(--piece-gap) * 2 + 2px); grid-template-columns:repeat(3,var(--piece-size)); grid-template-rows:repeat(2,var(--piece-size)); }
#board .tile > .tile-symbol:not(.landmark),#board .tile.special-tile > .special-symbol { width:calc(100% - var(--piece-size) * 3 - 8px); }
#board .tile.special-tile:not(:has(.token)) > .special-symbol { width:100%; }
#board .tile > strong { line-height:14px; }
#board .tile > small { height:18px; line-height:18px; }
#board .tile .owner { height:18px; line-height:18px; }
#board .tile.goToPrison > small,#board .tile.holiday > small { display:none; }
#board .tile.goToPrison,#board .tile.holiday { grid-template-rows:minmax(0,1fr) 20px; }

#board .tile.goToPrison > strong,#board .tile.holiday > strong { line-height:20px; }
.development-badge { max-width:calc(100% - var(--piece-size) * 3 - 9px); }
/* The square cell is reserved for detained players; visitors occupy the L around it. */
#board .tile.prison { display:block; padding:0; }
#board .tile.prison > small { position:absolute; top:0; left:3px; padding:0; height:10%; line-height:1; font-size:clamp(5px,.8cqw,9px); background:none; }
.prison-cell { position:absolute; right:2px; bottom:2px; width:64%; aspect-ratio:1; overflow:hidden; border:1px solid #edb879b3; border-radius:5px; background:repeating-linear-gradient(90deg,transparent 0 15%,#e3b17612 15% 18%),#221c29; box-shadow:inset 0 0 10px #0006; }
#board .prison-cell > strong { display:block; position:absolute; top:2px; left:0; width:100%; text-align:center; line-height:11px; font-size:clamp(8px,1.2cqw,12px); color:#f4d2a7; }
#board .tile.prison .tokens.prison-inmates { --piece-size:clamp(15px,2.15cqw,28px); position:absolute; inset:14px 2px 2px; width:auto; height:auto; padding:0; gap:1px; justify-self:auto; justify-content:center; align-content:center; background:none; }
#board .tile.prison .tokens.prison-visitors { --piece-size:clamp(18px,2.3cqw,30px); position:absolute; inset:0; width:100%; height:100%; display:block; background:none; padding:0; }
#board .tile .tokens.prison-visitors .token { position:absolute; }
#board .prison-visitors .token[data-seat="0"] { top:10%; left:3px; }
#board .prison-visitors .token[data-seat="1"] { top:10%; left:calc(50% - var(--piece-size)/2); }
#board .prison-visitors .token[data-seat="2"] { top:10%; right:3px; }
#board .prison-visitors .token[data-seat="3"] { top:36%; left:3px; }
#board .prison-visitors .token[data-seat="4"] { top:calc(68% - var(--piece-size)/2 - 1px); left:3px; }
#board .prison-visitors .token[data-seat="5"] { bottom:2px; left:3px; }
#board .tile .token[data-detained="true"]::after { content:none; }
.prison-waypoint { position:absolute; top:10%; left:calc(50% - var(--piece-size)/2); width:var(--piece-size); height:var(--piece-size); pointer-events:none; visibility:hidden; }
@media(max-width:900px) and (min-height:501px) {
  #game { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px 10px 60px; grid-template-rows:122px auto 170px 340px; }
  .activity-rail { height:122px; }
  .player-rail { height:auto; }
  .game-layout { height:var(--board-display-size,300px); }
}
@media(max-height:500px) and (min-width:621px) {
  #game { grid-template-columns:150px minmax(0,1fr) 180px; gap:10px; padding:10px; }
  .game-layout { height:var(--board-display-size,calc(100dvh - 24px)); }
  .activity-rail,.player-rail { height:calc(100dvh - 20px); }
  #board .tile { --piece-gap:1px; }
}

#board .country-badge { left:4px; top:4px; }
.development-badge { top:calc(var(--flag-size) * 2 / 3 + 12px); bottom:auto; max-width:calc(100% - var(--piece-size) * 3 - 12px); padding:1px 2px; font-size:clamp(6px,.85cqw,10px); }
#board .center-play #actions [data-action="payBail"] { flex:0 0 auto; width:auto; min-width:0; height:30px; padding:5px 12px; font-size:12px; border-radius:7px; }

/* Account controls occupy existing label/tool rows; details stay off the board. */
.player-name-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }
#room-form .player-name-heading label { margin:0; min-width:0; }
#room-form .account-link { min-height:28px; width:auto; padding:3px 0 3px 8px; border:0; background:transparent; color:#c6b4ff; font-size:11px; box-shadow:none; transform:none; }
.room-tools .account-trigger { flex:0 0 36px; width:36px; min-width:36px; min-height:36px; padding:8px; display:grid; place-items:center; background:#171526; color:#c5bddc; border:1px solid #8971b62b; border-radius:9px; }
.account-trigger svg { display:block; width:18px; height:18px; }
.room-tools .account-trigger[data-signed-in="true"] { color:#d1f58d; }
#account-dialog { width:min(360px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); height:fit-content; padding:22px; border:1px solid #8971b64d; border-radius:20px; background:#242038; color:#f1edfc; overflow:auto; }
#account-dialog::backdrop { background:#0c0b18ad; backdrop-filter:blur(4px); }
#account-dialog .dialog-heading { gap:12px; margin-bottom:20px; }
#account-dialog h2 { margin:0; font-size:18px; letter-spacing:-.4px; }
#account-dialog .dialog-heading button { flex:none; }
.account-eyebrow { margin:0 0 6px; font-size:10px; font-weight:700; letter-spacing:.12em; color:#afa2c7; }
.account-name { margin:0 0 24px; font-size:20px; font-weight:700; overflow-wrap:anywhere; }
.account-description { margin:0 0 20px; color:#c0b7d4; line-height:1.6; font-size:13px; }
.account-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-manage { color:#d4c3ff; font-size:13px; text-decoration:none; }
.account-manage:hover { text-decoration:underline; }
.account-signin { width:100%; }
.account-status { margin:12px 0 0; font-size:12px; line-height:1.5; color:#efb8c5; }
.account-status:empty { display:none; }
@media(max-width:900px) {
  .room-tools { gap:4px; }
  .room-tools .account-trigger { flex-basis:30px; width:30px; min-width:30px; min-height:34px; padding:6px; }
  .room-tools #history { flex:0 0 30px; width:30px; }
}

.room-tools #invite { height:36px; min-height:36px; padding:6px 3px; white-space:nowrap; }
@media(max-width:900px) {
  .room-tools { align-items:center; }
  .room-tools #invite { min-height:34px; height:34px; padding:6px 3px; white-space:nowrap; }
  .room-tools #history { min-height:34px; height:34px; padding:0; }
}

/* Readable side panels with six visible seats and one shared asset workspace. */
#game { grid-template-columns:240px minmax(0,1fr) 300px; --players-height:258px; }
.activity-rail { display:grid; grid-template-rows:44px 20px 170px minmax(0,1fr); gap:12px; }
.activity-rail > .brand { margin:0; align-self:center; }
.activity-rail #connection { margin:0; font-size:13px; }
.player-rail { grid-template-rows:var(--players-height) minmax(0,1fr); gap:14px; }
.panel-heading { height:44px; flex-basis:44px; }
.panel-heading h2 { font-size:16px; }
.panel-heading > span { font-size:13px; }
.room-card { height:170px; padding:12px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.room-card .panel-heading { display:flex; align-items:flex-start; flex-direction:column; gap:6px; padding:0; height:62px; flex:0 0 62px; }
#room-code-label { font-size:20px; letter-spacing:2px; color:#eee7ff; font-variant-numeric:tabular-nums; }
.room-card > p { margin:0; font-size:12px; }
.room-card .room-tools { padding:0; margin-top:auto; }
.room-tools #invite { font-size:14px; height:40px; min-height:40px; }
.activity-rail .chat-panel { height:100%; margin:0; min-height:0; }
.chat-panel summary { height:50px; font-size:16px; }
.chat-content { height:calc(100% - 50px); }
#chat-messages { font-size:14px; line-height:1.6; }
#chat-messages:empty::after { font-size:14px; max-width:200px; }
#chat-input { font-size:14px; }
#chat-form { height:60px; flex-basis:60px; padding:10px; }
.player-rail #players { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,62px); grid-auto-flow:column; align-content:start; gap:6px; padding:0 8px 2px; overflow:hidden; scrollbar-gutter:auto; }
.players-panel .player { display:grid; height:62px; min-height:62px; min-width:0; grid-template-columns:26px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 18px; gap:2px 6px; padding:5px; }
.players-panel .player .token { grid-column:1; grid-row:1 / 3; width:25px; height:28px; align-self:center; }
.players-panel .player > span:nth-child(2) { grid-column:2; grid-row:1; font-size:13px; align-self:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.players-panel .player strong { grid-column:2; grid-row:2; font-size:14px; text-align:left; }
.player-state { font-size:10px; overflow:hidden; text-overflow:ellipsis; }
.players-panel .player:has(.remove-bot) { padding-right:16px; }
.players-panel .player .remove-bot { right:1px; top:0; width:16px; }
.assets-panel { grid-area:2 / 1; display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; }
.asset-tabs { flex:0 0 52px; display:flex; gap:4px; padding:8px; border-bottom:1px solid #ffffff12; }
.asset-tabs [role="tab"] { flex:1; min-width:0; padding:6px; min-height:36px; border:0; background:transparent; color:#b9afcc; font-size:14px; box-shadow:none; }
.asset-tabs [aria-selected="true"] { background:#403354; color:#fff; }
.asset-tabs [data-incoming="true"] span { background:#cbf582; color:#1e2420; }
.asset-tabs span:not(:empty) { padding:2px 5px; border-radius:6px; font-size:12px; background:#ffffff12; }
.player-rail .assets-panel > :is(.trade-inbox,.collection-panel) { flex:1; height:0; min-height:0; width:100%; max-height:none; display:flex; flex-direction:column; overflow:hidden; }
.player-rail .assets-panel > [hidden] { display:none; }
.assets-panel .panel-heading { flex:0 0 52px; height:52px; padding:10px 12px; }
.collection-caption { font-size:12px; height:30px; }
.collection-property { font-size:14px; min-height:44px; height:44px; }
.collection-property small { font-size:12px; }
.collection-empty,.trade-empty { font-size:14px; }
#trade { font-size:13px; min-height:36px; }
.trade-inbox-item { height:78px; min-height:78px; font-size:13px; }
.offer-title,.offer-preview { font-size:13px; }
#board .center-play h2 { font-size:clamp(26px,4.3cqw,40px); }
#board .center-play .decision-summary { font-size:17px; line-height:1.45; }
#board .event p { font-size:16px; line-height:1.5; }
#board .event { padding:7px 0; }
#board .money-result { position:relative; font-size:19px; gap:9px; }
.money-value-old { position:absolute; pointer-events:none; color:var(--muted); }
#board .money-result > .money-value-old { max-width:none; overflow:visible; }
#board .center-play #actions :is([data-action="start"],[data-action="addBot"]) { flex:0 1 150px; width:150px; min-width:0; height:56px; min-height:56px; padding:8px 12px; font-size:17px; border-radius:10px; }
#board .center-play #actions { justify-content:center; gap:12px; }
@media(min-width:901px) and (max-width:1150px) { #game { grid-template-columns:210px minmax(0,1fr) 280px; } }
@media(max-width:900px) and (min-height:501px) {
  #game { grid-template-columns:minmax(0,1fr); grid-template-rows:132px auto 258px 420px; }
  .activity-rail { grid-area:1 / 1; height:132px; grid-template-rows:40px 80px; gap:12px; }
  .activity-rail > .brand { font-size:30px; }
  .activity-rail #connection { display:none; }
  .room-card { height:80px; display:grid; grid-template-columns:1fr 1.2fr; gap:8px; padding:10px; background:#24213c; border:1px solid #ffffff0d; }
  .room-card .panel-heading { display:flex; height:58px; gap:4px; justify-content:center; }
  .room-card .panel-heading h2 { font-size:13px; }
  #room-code-label { font-size:17px; letter-spacing:1px; }
  .room-card > p { display:none; }
  .room-card .room-tools { margin:0; align-items:center; }
  .room-tools #invite { font-size:12px; }
  .game-shell { grid-area:2 / 1; }
  .player-rail { display:contents; }
  .player-rail > .players-panel { grid-area:3 / 1; height:258px; }
  .assets-panel { grid-area:4 / 1; height:420px; }
  .activity-rail .chat-panel { position:fixed; right:12px; bottom:12px; width:min(420px,calc(100vw - 24px)); height:min(440px,75dvh); }
  .activity-rail .chat-panel:not([open]) { width:150px; height:50px; }
  .activity-rail .chat-panel[open] { width:min(420px,calc(100vw - 24px)); }
}
@media(max-height:500px) and (min-width:621px) {
  #game { grid-template-columns:190px minmax(0,1fr) 280px; --players-height:216px; }
  .activity-rail { grid-template-rows:32px 16px 120px minmax(0,1fr); gap:8px; }
  .activity-rail > .brand { font-size:28px; }
  .room-card { height:120px; gap:6px; padding:8px; }
  .room-card .panel-heading { height:48px; flex-basis:48px; gap:2px; }
  .room-card > p { display:none; }
  .players-panel .panel-heading { height:38px; flex-basis:38px; }
  .player-rail #players { grid-template-rows:repeat(3,52px); gap:4px; }
  .players-panel .player { height:52px; min-height:52px; }
  .players-panel .player strong { font-size:13px; }
  .chat-panel summary { height:38px; padding:8px 12px; }
  .chat-content { height:calc(100% - 38px); }
  #chat-form { height:44px; flex-basis:44px; padding:4px; }
  .asset-tabs { flex-basis:44px; padding:4px; }
  .assets-panel .panel-heading { flex-basis:44px; height:44px; padding:4px 8px; }
}
#game { --chat-height:calc(100dvh - 294px); }
.chat-content { height:calc(var(--chat-height) - 52px); }
#board .tile { --piece-gap:1px; }
@media(max-width:900px) and (min-height:501px) { #game { --chat-height:min(440px,75dvh); } }
@media(max-height:500px) and (min-width:621px) {
  #game { --chat-height:calc(100dvh - 212px); }
  .chat-content { height:calc(var(--chat-height) - 40px); }
}
@media(max-height:500px) and (min-width:621px) {
  .assets-panel .panel-heading { flex-basis:36px; height:36px; padding:2px 8px; }
  #trade { min-height:30px; padding:4px 8px; }
  .trade-inbox-item { height:52px; min-height:52px; padding:5px 8px; }
  .offer-title,.offer-preview { font-size:12px; }
}

/* Compact, fixed-height activity viewport: four rows with scrollback. */
#board .board-center { --event-row-height:36px; grid-template-rows:52% calc(4 * var(--event-row-height)) minmax(0,1fr); }
#board .event-panel { height:calc(4 * var(--event-row-height)); max-height:calc(4 * var(--event-row-height)); }
#board .event-panel #event-feed { display:block; height:100%; max-height:none; overflow:auto; overflow-anchor:none; padding:0 10px; scrollbar-gutter:stable both-edges; }
#board #event-feed .event { display:flex; align-items:center; justify-content:center; height:var(--event-row-height); min-height:var(--event-row-height); padding:0; margin:0; overflow:hidden; }
#board #event-feed .event p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:18px; overflow:hidden; }

/* Every space shares the same square grid cell; stacks stay on the map. */
#board {
  --map-piece-size:clamp(28px,3.65cqw,46px);
  --flag-strip-thickness:18px;
  grid-template-columns:repeat(var(--board-side,8),minmax(0,1fr));
  grid-template-rows:repeat(var(--board-side,8),minmax(0,1fr));
}
#board > .moving-token { position:absolute; top:0; left:0; margin:0; }
#board .tile { --piece-size:var(--map-piece-size); grid-template-rows:minmax(0,1fr) 14px 16px; padding:2px; overflow:hidden; }
#board .tile > strong { line-height:14px; }
#board .tile > small,#board .tile .owner { height:16px; line-height:16px; }
#board .tile.property > strong { padding:0 1px; overflow:hidden; text-overflow:clip; white-space:nowrap; letter-spacing:0; font-size:14px; }
#board .tile.property .full-name { display:block; }
#board .tile.property .short-name { display:none; }
#board > .tile-flag {
  position:relative; inset:auto; z-index:3; display:grid; place-items:center;
  width:80%; height:var(--flag-strip-thickness); padding:0;
  box-sizing:border-box; border:1px solid #ffffff20; border-radius:4px;
  background:#252039; box-shadow:0 2px 5px #08071666; pointer-events:none;
}
#board > .tile-flag svg { width:100%; height:100%; border-radius:3px; }
#board.holdings-focus > .tile-flag { opacity:.3; filter:brightness(.7); }
#board.holdings-focus > .tile-flag.holding-match { opacity:1; filter:brightness(1.15); }
#board > .tile-flag[data-edge="top"] { align-self:end; justify-self:center; transform:translateY(calc(100% + 1px)); }
#board > .tile-flag[data-edge="right"] { align-self:center; justify-self:start; transform:translateX(calc(-100% - 1px)); }
#board > .tile-flag[data-edge="bottom"] { align-self:start; justify-self:center; transform:translateY(calc(-100% - 1px)); }
#board > .tile-flag:is([data-edge="left"],[data-edge="right"]) { width:var(--flag-strip-thickness); height:80%; }
#board > .tile-flag[data-edge="left"] { align-self:center; justify-self:end; transform:translateX(calc(100% + 1px)); }
/* Keep taller strips clear where two board edges meet. */
#board > .tile-flag:is([data-edge="left"],[data-edge="right"])[data-edge-slot="1"] { translate:0 9px; }
#board > .tile-flag:is([data-edge="left"],[data-edge="right"])[data-edge-slot="7"] { translate:0 -9px; }
#board .tile.property .development-badge { top:2px; left:4px; max-width:calc(100% - 8px); font-size:clamp(6px,.8cqw,9px); line-height:1; padding:0 2px; border:0; }
#board .tile:not(.prison) > .tile-symbol:not(.landmark),#board .tile.special-tile:not(.prison) > .special-symbol { width:100%; }
#board .tile .tokens,#board .tile .tokens:has(.token:nth-child(4)) {
  --piece-size:var(--map-piece-size); --stack-x:.66; --stack-y:.45;
  position:relative; inset:auto; transform:none; z-index:3; grid-area:1 / 1;
  display:block; align-self:end; justify-self:center; padding:0; margin:0 0 2px;
  width:calc(var(--piece-size) * (1 + (var(--dock-columns,1) - 1) * var(--stack-x)));
  height:calc(var(--piece-size) * (1 + (var(--dock-rows,1) - 1) * var(--stack-y)));
  background:none; border-radius:0; overflow:visible;
}
#board .tile .tokens::before { content:none; }
#board .tile .tokens:empty { visibility:hidden; }
#board .tile .tokens .board-avatar {
  position:absolute; left:calc(var(--stack-column) * var(--piece-size) * var(--stack-x));
  top:calc(var(--stack-row) * var(--piece-size) * var(--stack-y));
  z-index:var(--stack-order); width:var(--map-piece-size); height:var(--map-piece-size);
}
#board .tile :is(.tokens,.tokens:has(.token:nth-child(4))) .board-avatar,.moving-token.board-avatar {
  box-sizing:border-box; background:#171526; padding:2px; border:1.5px solid var(--player-color);
  border-radius:32%; color:#171324;
  box-shadow:0 2px 5px #000a,0 0 0 1px #080712;
}
#board .tile :is(.tokens,.tokens:has(.token:nth-child(4))) .board-avatar svg,.moving-token.board-avatar svg { display:block; width:100%; height:100%; border-radius:27%; background:var(--player-color); stroke-width:1.9; }
#board .tile :is(.tokens,.tokens:has(.token:nth-child(4))) .board-avatar.active-piece,.moving-token.board-avatar.active-piece {
  border-color:#fff3d9; box-shadow:0 0 0 1.5px #fff3d9,0 0 12px var(--player-color),0 3px 5px #000a;
}
#board .tile :is(.tokens,.tokens:has(.token:nth-child(4))) .board-avatar.located-piece,.moving-token.board-avatar.located-piece {
  border-color:#fff; box-shadow:0 0 0 2px #fff,0 0 18px var(--player-color),0 3px 5px #000a;
}
#board .tile.located-player { outline:2px solid #fff9; outline-offset:-2px; }

#board .tile :is(.tokens,.tokens:has(.token:nth-child(4))) .board-avatar.active-piece { z-index:10; }
#board .tile :is(.tokens,.tokens:has(.token:nth-child(4))) .board-avatar.located-piece { z-index:20; }
#board .tile.special-tile:has(.token) > .special-symbol { opacity:.22; }
/* All prisoners and visitors use the same avatar size as the rest of the map. */
#board .tile.prison { overflow:hidden; }
#board .tile.prison .prison-cell { width:auto; height:56%; aspect-ratio:1; }
#board .prison-cell > strong { top:1px; line-height:8px; font-size:clamp(6px,.9cqw,10px); }
#board .tile.prison .tokens.prison-inmates {
  --piece-size:var(--map-piece-size); --stack-x:.36; --stack-y:.34;
  position:absolute; inset:auto; bottom:3px; left:50%; transform:translateX(-50%);
  width:calc(var(--piece-size) * (1 + (var(--dock-columns,1) - 1) * var(--stack-x)));
  height:calc(var(--piece-size) * (1 + (var(--dock-rows,1) - 1) * var(--stack-y)));
  background:none; padding:0; margin:0;
}
#board .tile.prison .tokens.prison-visitors { --piece-size:var(--map-piece-size); position:absolute; inset:0; transform:none; width:100%; height:100%; background:none; }
#board .tile.prison .prison-visitors :is(.board-avatar,.board-avatar[data-slot]) { inset:auto; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="0"] { top:9%; left:3px; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="1"] { top:9%; left:calc(50% - var(--piece-size)/2); }
#board .tile.prison .prison-visitors .board-avatar[data-slot="2"] { top:9%; right:3px; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="3"] { top:36%; left:3px; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="4"] { top:51%; left:calc(var(--piece-size) * .15 + 3px); }
#board .tile.prison .prison-visitors .board-avatar[data-slot="5"] { bottom:3px; left:3px; }
#board .tile.prison > small { height:8%; font-size:clamp(5px,.75cqw,8px); }
#board .tile.prison .prison-waypoint { top:9%; left:3px; width:var(--map-piece-size); height:var(--map-piece-size); }
/* Controls get enough room to fit without scrollbars; activity retains scrollback. */
#board .board-center { padding:calc(var(--flag-strip-thickness) + 28px) calc(var(--flag-strip-thickness) + 28px) 32px; grid-template-rows:248px 20px calc(4 * var(--event-row-height)) minmax(0,1fr) 64px; align-content:stretch; }
#board .board-center::before { content:''; position:absolute; inset:calc(var(--flag-strip-thickness) + 12px) calc(var(--flag-strip-thickness) + 12px); border:1px solid #b5a1df22; border-radius:14px; background:linear-gradient(145deg,#ffffff03,#110f1c10); box-shadow:inset 0 1px #ffffff03; pointer-events:none; z-index:0; }
#board .center-play { position:relative; z-index:1; grid-template-rows:72px 112px 56px; gap:4px; }
#board .event-panel { position:relative; z-index:1; grid-area:3 / 1; }
#board .center-play h2 { font-size:clamp(26px,3.6cqw,32px); line-height:1.1; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; margin:0; }
#board .center-play #turn-panel { overflow:visible; scrollbar-gutter:auto; }
#board .center-play #actions { overflow:visible; }
#board .center-play #actions button { overflow:hidden; transform:none; transition:background .18s,filter .18s,box-shadow .18s; }
#board .money-results { position:relative; inset:auto; z-index:1; grid-area:5 / 1; height:64px; overflow:hidden; align-content:center; gap:4px 12px; }
#board .money-result { font-size:17px; line-height:24px; }
#board #event-feed p[data-money-tone="bank"] .event-money-value { color:#ff9b88; }
/* A single invitation sits at the midpoint of the two dice. */
#board .dice-cue { top:calc(50% - 14px); left:calc(50% - 14px); right:auto; bottom:auto; width:28px; height:28px; transform:none; z-index:2; }
#board #roll-dice::after { inset:calc(50% - 18px) calc(50% - 18px); width:36px; height:36px; border-radius:50%; background:radial-gradient(circle,#c8f57838,transparent 70%); }
/* Relevant offers keep a visible invitation until the player reads Trades. */
.asset-tabs #trades-tab { position:relative; }
.asset-tabs #trades-tab .trade-unread { position:absolute; right:5px; top:-5px; height:18px; min-width:30px; padding:1px 5px; margin:0; border-radius:6px; background:#c8f578; color:#172416; font-size:10px; font-weight:800; line-height:16px; }
.asset-tabs #trades-tab[data-unread="true"] { color:#efffd2; background:#35422a; box-shadow:inset 0 0 0 1px #c8f57899; animation:trade-attention 1.8s ease-in-out infinite; }
@keyframes trade-attention { 50% { box-shadow:inset 0 0 0 1px #c8f578,0 0 10px #c8f57855; } }
@media(prefers-reduced-motion:reduce) { .asset-tabs #trades-tab[data-unread="true"] { animation:none; } }

/* A clearer turn invitation, carried by the controls rather than the pointer. */
#board[data-your-turn="true"] .center-play h2 { color:#d1f5a5; text-shadow:0 0 24px #c8f57824; }
#board[data-your-turn="true"] .board-center::before { border-color:#c8f5783a; }
#board .dice-cue svg { filter:drop-shadow(0 2px 3px #0009); animation:turn-orbit 2.4s linear infinite; animation-play-state:paused; }
#board .dice-display:has(.roll-ready) .dice-cue svg { animation-play-state:running; }
@keyframes turn-orbit {
  from { transform:rotate(0deg) translateY(-7px) rotate(-10deg); }
  to { transform:rotate(360deg) translateY(-7px) rotate(-370deg); }
}
@media(prefers-reduced-motion:reduce) { #board .dice-cue svg { animation:none; } }

/* Shared flags keep every city reference recognizable. */
.estate-flag { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; padding:6px; background:#ffffff07; border:1px solid #ffffff12; border-radius:9px; }
.estate-flag svg { display:block; width:100%; height:auto; aspect-ratio:3 / 2; border-radius:2px; }

/* Property collection: one quiet list, with country and current income. */
#property-collection { padding:0 10px 10px; }
.collection-panel .collection-caption { padding:0 14px; margin:0 0 12px; color:#b2a8c7; font-size:12px; }
.collection-property { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; height:64px; min-height:64px; padding:10px; margin:0 0 7px; border:1px solid #ffffff0f; border-radius:11px; background:#ffffff03; color:#efeaf9; text-align:left; }
.collection-property:hover,.collection-property.selected { background:#ffffff08; border-color:#b8a3ed55; }
.collection-identity,.collection-income { display:flex; flex-direction:column; gap:5px; min-width:0; }
.collection-identity strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eee8f8; }
.collection-property .collection-identity small { color:#b4a8c8; font-size:11px; }
.collection-income { align-items:flex-end; }
.collection-income strong { color:#c8f578; font-size:15px; font-variant-numeric:tabular-nums; }
.collection-property .collection-income small { color:#b4a8c8; font-size:10px; }
.collection-empty { margin:16px 8px; padding:20px 12px; text-align:center; border:1px dashed #ffffff18; border-radius:12px; }

/* A fixed deed with ownership, an uncluttered rent grid, and useful actions. */
#board .board-center > .tile-popover { width:min(480px,calc(100cqw - 24px)); height:390px; max-height:none; padding:20px; overflow:hidden; border:1px solid #a896c345; border-radius:18px; background:#252039; box-shadow:0 18px 70px #090614bb; display:flex; flex-direction:column; gap:14px; }
#board .tile-popover[data-closing] { pointer-events:none; z-index:9; }
.deed-photo { position:absolute; inset:0 0 auto; height:150px; pointer-events:none; opacity:.17; mask-image:linear-gradient(#000,transparent); }
.deed-photo .city-photo { position:static; width:100%; height:100%; object-fit:cover; object-position:center; opacity:1; mask:none; }
#board .tile-popover .board-property-heading { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; flex:0 0 50px; }
.deed-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.deed-identity .estate-flag { width:42px; height:42px; padding:7px; background:#201a32aa; }
.deed-country { display:block; color:#c4b5d9; font-size:12px; margin-bottom:4px; }
#board .tile-popover .board-property-heading h3 { margin:0; color:#faf6ff; font-size:24px; line-height:1.1; letter-spacing:-.4px; }
#board .tile-popover .board-property-heading > .icon-button { width:32px; height:32px; min-height:32px; padding:0; border-radius:9px; background:#ffffff08; color:#d3c6e8; flex:0 0 auto; }
#board .tile-popover .board-property-body { position:relative; display:flex; flex-direction:column; flex:1; min-height:0; gap:12px; padding:0; overflow:hidden; }
.deed-facts { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; height:60px; min-height:60px; padding:10px 14px; background:#16132480; border:1px solid #ffffff0b; border-radius:11px; }
.deed-label { display:block; color:#b6a9cc; font-size:11px; margin-bottom:5px; }
#board .tile-popover .header-owner { display:block; color:#eee5fb; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deed-owner { min-width:0; }
.deed-value { text-align:right; }
#board .tile-popover .current-rent { color:#c8f578; font-size:24px; line-height:1; }
.deed-section-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#dcd2ef; font-size:12px; }
.deed-section-heading > span { color:#a99abc; font-size:11px; }
#board .tile-popover .rent-schedule { flex:0 0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:0; margin:0; overflow:hidden; }
#board .tile-popover .rent-schedule > div { height:42px; padding:6px 2px; border:1px solid #ffffff0c; border-radius:8px; background:#ffffff03; text-align:center; }
#board .tile-popover .rent-schedule > div:last-child { grid-column:span 2; }
#board .tile-popover .rent-schedule .current-level { border-color:#c8f57855; background:#c8f5780c; }
#board .tile-popover .rent-schedule dt { font-size:10px; color:#b8aacd; line-height:1; }
#board .tile-popover .rent-schedule dd { color:#eee8f8; font-size:14px; line-height:1; margin:5px 0 0; }
#board .tile-popover .rent-label-full { display:inline; }
#board .tile-popover .rent-label-short { display:none; }
.deed-footer { margin-top:auto; min-height:66px; }
#board .tile-popover .property-development { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
#board .tile-popover .deed-footer button { min-height:36px; height:36px; padding:6px 12px; border-radius:9px; font-size:12px; box-shadow:none; }
#board .tile-popover .sell-house,#board .tile-popover .deed-trade { background:#ffffff08; border-color:#ffffff20; color:#dcd0ef; }
#board .tile-popover .deed-note { margin:8px 0 0; color:#b5a5c9; font-size:11px; line-height:1.4; }
#board .tile-popover .deed-special-symbol { margin:18px auto 0; flex:0 0 84px; width:84px; height:84px; color:#c8b5e9; }
.deed-description { color:#d5c8e8; font-size:16px; line-height:1.65; text-align:center; padding:0 18px; }

/* Trading uses a stable canvas and a restrained pair of offer cards. */
#trade-dialog { width:min(620px,calc(100vw - 40px)); height:min(560px,80dvh); max-height:none; border:1px solid #a18ac63b; border-radius:20px; background:#262138; }
#trade-dialog:has(.trade-panel[data-mode="review"]) { height:min(430px,80dvh); }
#trade-dialog .trade-panel { height:100%; max-height:none; padding:20px; background:none; }
#trade-dialog .trade-heading { margin:0 0 18px; }
.trade-titles { flex:1; min-width:0; }
.trade-eyebrow { display:block; color:#b3a4c9; font-size:12px; margin-bottom:5px; }
#trade-dialog .trade-heading h3 { color:#f3ecff; font-size:25px; letter-spacing:-.5px; }
#trade-dialog .icon-button { border-radius:9px; background:#ffffff08; color:#d3c6e8; }
#trade-dialog .trade-body { flex:1; min-height:0; padding:0 2px 0 0; overflow:auto; scrollbar-gutter:auto; }
#trade-dialog .trade-body > label { font-size:12px; color:#b9aacd; margin:0 0 6px; }
#trade-dialog #trade-partner { width:100%; max-width:none; padding:9px 12px; font-size:14px; background:#1a1728; border:1px solid #ffffff18; border-radius:9px; }
#trade-dialog .trade-sides { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; align-items:stretch; }
#trade-dialog .trade-side,#trade-dialog .trade-side:last-child { height:auto; min-height:230px; overflow:visible; scrollbar-gutter:auto; min-width:0; padding:14px; border:1px solid #ffffff12; border-radius:13px; background:#191625; }
#trade-dialog .trade-side legend { color:#c7b9db; font-size:12px; font-weight:600; padding:0 6px; }
#trade-dialog .trade-person { gap:9px; margin:0 0 12px; }
#trade-dialog .trade-person .token { width:28px; height:28px; padding:0; background:none; box-shadow:none; border:0; flex:0 0 auto; }
#trade-dialog .trade-person .token svg { width:100%; height:100%; background:var(--player-color); border-radius:9px; }
#trade-dialog .trade-person strong { font-size:14px; color:#ede4fa; }
#trade-dialog .trade-wallet { border:1px solid #ffffff0c; border-radius:10px; padding:8px 12px; background:#ffffff03; }
#trade-dialog .trade-wallet > label,#trade-dialog .trade-cash-label { color:#ae9fc1; font-size:11px; }
#trade-dialog .trade-cash-input { font-size:22px; color:#c8f578; }
#trade-dialog .trade-cash-input input { font-size:26px; color:#f2ecfb; padding:6px 0; }
#trade-dialog .trade-wallet small { font-size:11px; color:#aa9bbd; }
#trade-dialog .trade-selection { margin-top:12px; font-size:12px; color:#d5c6e7; }
#trade-dialog .trade-selection > span { font-size:10px; color:#ab9bbd; }
#trade-dialog .trade-properties { gap:6px; margin:9px 0 0; }
#trade-dialog .trade-choice,#trade-dialog .trade-properties li { display:flex; flex-direction:row; align-items:center; gap:8px; min-height:52px; padding:8px; border:1px solid #ffffff0c; border-radius:9px; background:#ffffff02; margin:0; }
#trade-dialog .trade-choice .estate-flag,#trade-dialog .trade-properties li .estate-flag { width:28px; height:28px; padding:4px; border-radius:7px; }
#trade-dialog .trade-choice:has(:checked) { border-color:#c8f57866; background:#c8f5780a; }
#trade-dialog .trade-choice:has(:disabled) { opacity:.55; }
#trade-dialog .trade-estate-info strong { color:#eee5fa; font-size:13px; line-height:1.25; }
#trade-dialog .trade-estate-info small { color:#a99abc; font-size:10px; line-height:1.3; }
#trade-dialog .trade-cash { font-size:32px; color:#c8f578; margin:6px 0 16px; }
#trade-dialog .trade-panel[data-mode="review"] .trade-side { min-height:200px; padding:12px; }
#trade-dialog .trade-panel[data-mode="review"] .trade-sides { margin-top:6px; }
#trade-dialog .trade-properties .trade-empty-estates { min-height:90px; justify-content:center; border:1px dashed #ffffff15; color:#a99abc; text-align:center; font-size:12px; }
#trade-dialog .trade-status { flex:0 0 auto; font-size:12px; line-height:1.4; margin:14px 0 0; color:#bcaed0; }
#trade-dialog .trade-actions { margin-top:14px; padding-top:14px; border-top:1px solid #ffffff12; gap:8px; min-height:58px; }
#trade-dialog .trade-actions button { font-size:14px; min-height:42px; border-radius:10px; }
#trade-dialog .trade-actions .trade-reject { --action-fg:#ffd0c9; --action-bg:#512e35; --action-border:#9d5961; --action-hover:#693b43; }
#trade-dialog .trade-actions .trade-withdraw { --action-fg:#d9cde8; --action-bg:#ffffff06; --action-border:#ffffff20; --action-hover:#ffffff0e; }
#trade-dialog .trade-actions .trade-counter { --action-fg:#e0d3f4; --action-bg:#3b304e; --action-border:#8670a544; --action-hover:#493c5d; }

#trade-list { padding:0 10px 10px; }
.trade-inbox-item { display:flex; gap:8px; height:112px; min-height:112px; padding:11px; margin-bottom:8px; border:1px solid #ffffff10; border-radius:11px; background:#ffffff03; }
.trade-inbox-item.incoming { border-color:#c8f57833; background:#c8f57804; }
.trade-inbox-item .offer-title { display:flex; align-items:center; gap:7px; width:100%; }
.trade-inbox-item .offer-title .token { flex:0 0 auto; width:22px; height:22px; background:none; padding:0; box-shadow:none; }
.trade-inbox-item .offer-title .token svg { background:var(--player-color); border-radius:7px; }
.trade-inbox-item .offer-title strong,.trade-inbox-item.incoming strong { font-size:12px; color:#eee5f8; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.offer-preview { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; font-size:11px; color:#bcaed0; width:100%; }
.offer-preview > span:last-child { text-align:right; }
.offer-exchange { color:#a28ebc; }
.offer-estates { display:flex; gap:6px; align-items:center; width:100%; min-height:24px; overflow:hidden; }
.offer-estate { display:flex; align-items:center; gap:4px; min-width:0; color:#bfb0d1; font-size:10px; }
.offer-estate > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.offer-estate .estate-flag { width:22px; height:22px; padding:3px; border-radius:5px; }
.offer-meta { color:#b4a2cb; font-size:11px; }
.trade-empty { padding:24px 10px; border:1px dashed #ffffff18; border-radius:11px; text-align:center; }
@media(max-width:540px) {
  #trade-dialog .trade-panel { padding:16px; }
  #trade-dialog .trade-heading { margin-bottom:12px; }
  #trade-dialog .trade-heading h3 { font-size:23px; }
  #trade-dialog .trade-sides { grid-template-columns:1fr; gap:14px; }
  #trade-dialog .trade-side { padding:12px; }
  #trade-dialog .trade-actions button { padding:8px; font-size:12px; }
}
@media(max-height:500px) and (min-width:541px) {
  #trade-dialog .trade-panel { padding:14px 18px; }
  #trade-dialog .trade-heading { margin-bottom:10px; }
  #trade-dialog .trade-status { margin-top:8px; }
  #trade-dialog .trade-actions { margin-top:8px; padding-top:8px; }
}

/* Detention stays at bottom left; visitors follow the top and right rim. */
#board .tile.prison .prison-cell { inset:auto auto 2px 2px; width:58%; height:61%; aspect-ratio:auto; border-radius:6px; border-color:#e6af7780; background:repeating-linear-gradient(90deg,transparent 0 18%,#edb87909 18% 21%),#211b2d; }
#board .tile.prison .tokens.prison-inmates { --stack-x:.52; --stack-y:.4; bottom:3px; }
#board .prison-cell > strong { line-height:8px; font-size:8px; color:#edc49a; }
#board .tile.prison .prison-cell:has(.prison-inmates:is([data-count="4"],[data-count="5"],[data-count="6"])) { width:calc(100% - 4px); }
#board .tile.prison .prison-inmates:is([data-count="4"],[data-count="5"]) { --stack-x:.6; --stack-y:.43; }
#board .tile.prison .prison-inmates[data-count="6"] { --stack-x:.6; --stack-y:.6; }
#board .tile.prison .prison-cell:has(.prison-inmates[data-count="6"]) { height:76%; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="0"] { top:0; left:3px; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="1"] { top:0; left:calc(50% - var(--piece-size)/2); }
#board .tile.prison .prison-visitors .board-avatar[data-slot="2"] { top:0; right:3px; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="3"] { top:32%; right:3px; left:auto; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="4"] { top:54%; right:3px; left:auto; }
#board .tile.prison .prison-visitors .board-avatar[data-slot="5"] { bottom:3px; right:3px; left:auto; }
#board .tile.prison .prison-visitors:is([data-count="1"],[data-count="2"]) .board-avatar[data-slot="0"] { right:3px; left:auto; }
#board .tile.prison .prison-visitors[data-count="2"] .board-avatar[data-slot="1"] { left:3px; }
#board .tile.prison:has(.prison-visitors[data-count="6"]) .prison-cell { height:20%; }
#board .tile.prison .prison-visitors[data-count="6"] .board-avatar[data-slot="3"] { top:37%; left:3px; right:auto; }
#board .tile.prison .prison-visitors[data-count="6"] .board-avatar[data-slot="4"] { top:37%; left:calc(50% - var(--piece-size)/2); right:auto; }
#board .tile.prison .prison-visitors[data-count="6"] .board-avatar[data-slot="5"] { top:37%; right:3px; bottom:auto; }
#board .tile.prison .prison-waypoint { top:0; right:3px; left:auto; }
#board .tile.prison :is(.tokens,.tokens:has(.token:nth-child(4))) .board-avatar.active-piece { z-index:var(--stack-order); }
#board .tile.prison:has(.board-avatar) > small { visibility:hidden; height:0; }
.prison-avatar-number { position:absolute; top:-2px; left:-2px; display:grid; place-items:center; width:11px; height:11px; border-radius:4px; background:var(--player-color); color:#191322; border:1px solid #191322; font-size:7px; font-weight:900; line-height:1; pointer-events:none; z-index:2; }
.players-panel .token:has(.prison-avatar-number) { position:relative; }
#board .dice-cue { color:#e2ffbe; }
#trade-dialog .trade-wallet > label { margin:0 0 4px; }
#trade-dialog .trade-cash-input input { line-height:1.2; }
/* A crowded tile prioritizes portraits; development remains in its deed and collection. */

@media(max-height:500px) and (min-width:621px) {
  .trade-inbox-item { height:48px; min-height:48px; padding:5px 8px; gap:3px; }
  .trade-inbox-item .offer-title .token { width:16px; height:16px; }
  .trade-inbox-item .offer-title strong { font-size:11px; line-height:16px; }
  .offer-preview { font-size:10px; line-height:12px; }
  .offer-estates { display:none; }
  .collection-panel .collection-caption { display:none; }
  .collection-property { height:48px; min-height:48px; padding:6px 8px; gap:8px; }
  .collection-property .estate-flag { width:28px; height:28px; padding:4px; }
  .collection-property { grid-template-columns:28px minmax(0,1fr) auto; }
  .collection-identity,.collection-income { gap:3px; }
}

/* The same dice mark identifies the table and browser tab. */
.brand-lockup { display:inline-flex; align-items:center; gap:10px; }
.brand-icon { width:34px; height:34px; flex:0 0 auto; }
@media(max-width:620px) { .brand-icon { width:28px; height:28px; } }

#room-form h1 .brand-wordmark,.brand .brand-wordmark { color:#eee7fa; }

/* Clear development levels, mortgages, and debt recovery. */
#board .tile.property > .development-badge {
  display:grid; place-items:center; position:absolute; top:3px; left:3px; bottom:auto;
  width:18px; height:18px; max-width:none; padding:0; z-index:4;
  font-size:14px; font-weight:750; line-height:1; color:#f5eccf;
  border:0; border-radius:5px; background:#171526e8; box-shadow:0 1px 3px #0005;
}
#board .tile.mortgaged .city-photo { opacity:.13; filter:grayscale(.9); }
#board .tile.mortgaged > .owner { color:#c6bdd5; background:#302a3a; }
.collection-property.mortgaged .collection-income strong { color:#b6a5ca; }
.players-panel .player.negative-balance > strong { color:#ff9b88; }
.players-panel .panel-heading { gap:8px; }
#bankrupt { margin-left:auto; flex:0 0 auto; min-height:28px; height:28px; padding:3px 8px; border:1px solid #ff9b8833; border-radius:7px; background:#ff9b880b; color:#ffb2a3; font-size:10px; box-shadow:none; }
#bankrupt:not(:disabled):hover { background:#ff9b8822; border-color:#ff9b8877; }
#bankrupt:disabled { opacity:.4; }
#board .board-center > .tile-popover { height:430px; }
#board .tile-popover .property-mortgage { width:100%; margin-top:7px; }
#board .tile-popover .deed-footer { flex:0 0 auto; min-height:66px; }
#board .tile-popover .deed-holiday-pot { text-align:center; color:#c8f578; font-size:32px; }
#board .tile.holiday { grid-template-rows:minmax(0,1fr) 14px 16px; }
#board .tile.holiday > strong { line-height:14px; }
#board .tile.holiday > small { display:block; color:#c8f578; font-size:clamp(10px,1.3cqw,16px); font-weight:700; }

.deed-building-costs { display:flex; justify-content:space-between; gap:12px; padding:8px 0; color:#c9bddb; font-size:12px; border-top:1px solid #ffffff0c; margin-bottom:8px; }
#board .tile-popover .deed-footer:not(:has(button)) { min-height:0; }
.trade-tile-glow { position:absolute; inset:1px; z-index:5; border:2px solid var(--owner-color); border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 20px color-mix(in srgb,var(--owner-color) 35%,transparent),0 0 14px var(--owner-color); }

#board.holdings-focus .tile:has(.trade-tile-glow) { opacity:1; filter:none; transition:none; }

/* Give the perimeter more presence while keeping every tile equally square. */
#board { padding:3px; }
#board .tile { width:calc(100% + 4px); height:calc(100% + 4px); justify-self:center; align-self:center; }
#board .board-center { padding-inline:calc(var(--flag-strip-thickness) + 36px); }
#board .board-center::before { inset:calc(var(--flag-strip-thickness) + 20px); }
#board .tile.start > small { font-size:9px; letter-spacing:0; white-space:nowrap; }
#board .tile.prison > small,
#board .tile.prison:has(.board-avatar) > small { visibility:visible; height:9px; inset:auto 2px 1px auto; width:calc(42% - 4px); text-align:center; line-height:9px; font-size:7px; color:#e1d5f4; z-index:4; pointer-events:none; }
#board .tile.prison:has(.prison-inmates:is([data-count="4"],[data-count="5"],[data-count="6"])) > small { inset:1px auto auto calc(50% - 14px); width:28px; }

/* A city deed: clear valuation, one rent ladder, and a compact country overview. */
#board .board-center > .tile-popover { width:min(480px,calc(100cqw - 24px)); height:450px; padding:18px; gap:12px; background:linear-gradient(160deg,#302641,#201b30 65%); border-color:#bba3dc50; box-shadow:0 20px 50px #08061199; }
.deed-photo { height:140px; opacity:.32; mask-image:linear-gradient(#000b,#0005 50%,transparent); }
#board .tile-popover .board-property-heading { flex-basis:54px; }
#board .tile-popover .board-property-heading h3 { font-size:28px; letter-spacing:-.7px; }
.deed-identity .estate-flag { width:42px; height:30px; padding:0; border:0; border-radius:4px; background:none; }
.deed-identity .estate-flag svg { height:100%; width:100%; }
.deed-country { font-size:12px; letter-spacing:.4px; color:#dac8f0; }
#board .tile-popover .board-property-body { gap:8px; }
.deed-facts { min-height:56px; height:56px; padding:8px 12px; background:#15102166; border:0; border-radius:10px; }
.deed-facts .deed-label { margin-bottom:4px; }
#board .tile-popover .header-owner { font-size:15px; }
#board .tile-popover .current-rent { font-size:27px; }
.deed-valuation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-height:32px; font-variant-numeric:tabular-nums; }
.deed-valuation > div { display:flex; flex-direction:column; gap:3px; }
.deed-valuation > div:nth-child(2) { text-align:center; }
.deed-valuation > div:last-child { text-align:right; }
.deed-valuation .deed-label { margin:0; font-size:10px; }
.deed-valuation strong { font-size:14px; color:#e7dcf2; }
.deed-section-heading { min-height:14px; }
#board .tile-popover .rent-schedule { grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
#board .tile-popover .rent-schedule > div { height:56px; padding:8px 1px; border:0; background:#ffffff05; border-radius:6px; }
#board .tile-popover .rent-schedule > div:last-child { grid-column:auto; background:#bd91f012; }
#board .tile-popover .rent-schedule .current-level { background:#c8f57812; box-shadow:inset 0 0 0 1px #c8f57860; }
#board .tile-popover .rent-schedule dt { height:20px; font-size:9px; line-height:12px; }
#board .tile-popover .rent-schedule dd { margin-top:4px; font-size:12px; }
.deed-district { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; min-height:42px; }
#board .tile-popover .deed-city { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; height:42px; min-height:42px; padding:4px; gap:4px; background:#ffffff04; color:#e4d8f2; border:1px solid #ffffff09; border-radius:7px; box-shadow:none; }
#board .tile-popover .deed-city[data-selected="true"] { border-color:#baa0e444; background:#bd91f012; }
.deed-city strong { max-width:100%; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deed-city span { max-width:100%; font-size:9px; color:#afa0c2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#board .tile-popover .deed-footer { min-height:0; }
#board .tile-popover .deed-footer button { min-height:34px; height:34px; font-size:12px; }
.deed-building-costs { padding:7px 0; margin-bottom:7px; }
#board .tile-popover .deed-note { margin-top:7px; font-size:10px; line-height:14px; }
#board .tile-popover button[aria-busy="true"] { cursor:progress; }
#board .tile-popover button[aria-busy="true"]::after { content:''; width:10px; height:10px; margin-left:6px; display:inline-block; vertical-align:middle; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:deed-pending .65s linear infinite; }
@keyframes deed-pending { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { #board .tile-popover button[aria-busy="true"]::after { animation:none; } }

/* A live clock updates its text without rebuilding the board. */
#board .turn-clock { position:absolute; top:58px; left:0; width:100%; height:24px; display:flex; align-items:center; justify-content:center; gap:9px; color:#b9afcc; font-size:12px; line-height:1; z-index:2; }
#board .turn-clock[hidden] { display:none; }
.turn-clock-label { max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#board .turn-clock-time { font-size:16px; font-variant-numeric:tabular-nums; color:#eee7ff; }
#board .turn-clock[data-urgent="true"] .turn-clock-time { color:#ff9a9a; }
#board .turn-time-gift { flex:none; width:auto; height:23px; min-height:0; padding:3px 7px; border:1px solid #c8f57840; border-radius:6px; font-size:11px; color:#d1f5a5; background:#c8f5780d; box-shadow:none; }
#board .turn-time-gift:disabled { color:#a59ab8; border-color:#ffffff12; background:transparent; opacity:.6; }
.players-panel .player { position:relative; }
.players-panel .player > span:nth-child(2) { padding-right:12px; }
.players-panel .player .player-vote { position:absolute; right:2px; top:1px; width:20px; height:20px; min-height:0; padding:0; border:0; border-radius:5px; background:transparent; box-shadow:none; color:#b9afcc; font-size:17px; line-height:1; }
.players-panel .player .player-vote[hidden] { display:none; }
.players-panel .player .player-vote[data-voting="true"] { color:#ffadad; background:#ee777724; }
.players-panel .player .player-presence { position:absolute; bottom:4px; right:4px; max-width:52%; font-size:8px; line-height:1.1; text-align:right; color:#d7bc80; background:#211b2b; border-radius:3px; pointer-events:none; }
.players-panel .player .player-presence[data-offline="true"] { color:#ee9a9a; }
.players-panel .player:has(.player-presence:not(:empty)) > strong { max-width:48%; font-size:12px; }
#kick-dialog { width:400px; max-width:calc(100vw - 24px); height:360px; max-height:calc(100dvh - 32px); padding:22px; border:1px solid #ffffff18; border-radius:16px; background:#211b2b; color:#eee7ff; box-shadow:0 24px 80px #0008; overflow:auto; }
#kick-dialog::backdrop { background:#0908109c; }
#kick-dialog .dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#kick-dialog h2 { margin:0; font-size:19px; }
#kick-dialog .kick-player-name { font-size:23px; font-weight:650; margin:20px 0 10px; overflow-wrap:anywhere; }
#kick-dialog .kick-explanation { font-size:13px; color:#b9afcc; line-height:1.5; margin:0; }
#kick-dialog .kick-progress { margin:20px 0 10px; font-size:15px; font-weight:600; }
#kick-dialog .kick-voters { display:flex; flex-wrap:wrap; gap:6px; }
#kick-dialog .kick-voters span { max-width:100%; overflow-wrap:anywhere; background:#ffffff07; padding:6px 9px; border-radius:6px; font-size:12px; }
#kick-dialog .kick-actions { margin-top:22px; }
#kick-dialog .kick-actions button { width:100%; height:40px; min-height:40px; font-size:14px; }
#kick-dialog .kick-confirm { background:#883e4b; border-color:#b65b6b; color:#fff; }

.players-panel .player .player-vote[data-voting="true"] { font-size:9px; font-variant-numeric:tabular-nums; }

#board #actions [data-action="addBot"] { position:relative; }
#board #actions [data-action="addBot"][aria-busy="true"] { cursor:progress; }
#board #actions [data-action="addBot"][aria-busy="true"]::after { content:''; position:absolute; right:11px; top:calc(50% - 5px); width:10px; height:10px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:deed-pending .65s linear infinite; }
@media(prefers-reduced-motion:reduce) { #board #actions [data-action="addBot"][aria-busy="true"]::after { animation:none; } }
.bot-tag { display:inline-block; margin-right:5px; padding:1px 4px; border:1px solid var(--line); border-radius:4px; color:var(--accent); font-size:8px; font-weight:700; letter-spacing:.06em; line-height:1.3; vertical-align:1px; }

/* ---- Viewport-fit fixes (old look preserved) ----
   Phones in portrait (640px tall and up) previously stacked to ~1290px and scrolled;
   the rows below the board now share the remaining height and the board leaves room
   for them. Shorter phones keep the original scrolling layout. */
@media(max-width:900px) and (min-height:640px) {
  #game { height:100dvh; min-height:0; overflow:hidden; padding:8px; gap:8px; align-content:stretch;
    --fit-top:52px; --fit-players:200px; --fit-assets:170px;
    grid-template-rows:var(--fit-top) auto var(--fit-players) minmax(0,1fr); }
  .activity-rail { height:var(--fit-top); grid-template-columns:auto minmax(0,1fr); grid-template-rows:var(--fit-top); gap:10px; align-items:center; }
  .activity-rail > .brand { font-size:24px; }
  .activity-rail > .brand .brand-icon { width:28px; height:28px; }
  .room-card { height:var(--fit-top); grid-template-columns:auto auto; justify-content:end; align-items:center; gap:8px; padding:4px 6px 4px 12px; }
  .room-card .panel-heading { height:auto; flex-direction:column; align-items:flex-start; gap:0; }
  .room-card .panel-heading h2 { font-size:10px; }
  #room-code-label { font-size:15px; }
  .room-card .room-tools { gap:6px; }
  .player-rail > .players-panel { height:var(--fit-players); }
  .player-rail #players { grid-template-rows:repeat(3,44px); gap:4px; }
  .players-panel .player { height:44px; min-height:44px; padding:3px 5px; }
  .assets-panel { height:100%; }
  .activity-rail .chat-panel:not([open]) { width:112px; height:44px; }
  .collection-panel #property-collection, .trade-inbox #trade-list { padding-bottom:52px; }
}
@media(max-width:900px) and (min-height:640px) {
  .asset-tabs { flex-basis:46px; padding:5px 8px; }
  .assets-panel .panel-heading { flex-basis:40px; height:40px; padding:4px 12px; }
}
/* Touch screens: controls keep their look but get at least ~32px hit areas, including
   controls drawn inside the scaled board. */
@media(pointer:coarse) {
  .activity-rail > .brand { min-height:32px; }
  #bankrupt { min-height:32px; }
  #assets, .room-tools #history { min-width:32px; min-height:32px; }
  .players-panel .player .player-vote::after { content:''; position:absolute; inset:-7px; }
  #game #board #actions button { min-height:calc(32px / var(--board-scale, 1)); }
  #game #board #actions button:not([data-action="start"],[data-action="addBot"]) { font-size:max(1em, calc(12px / var(--board-scale, 1))); }
  #game #board #actions button:not([data-action="start"],[data-action="addBot"]) { padding-inline:calc(12px / var(--board-scale, 1)); }
  #game #board .tile-popover .icon-button { min-width:calc(32px / var(--board-scale, 1)); min-height:calc(32px / var(--board-scale, 1)); }
}
/* Small touch boards: deeds are drawn 1.5x so their text and buttons stay usable. */
@media(pointer:coarse) and (max-width:900px) {
  #game #board .board-center > .tile-popover { zoom:1.5; width:min(480px,calc((100cqw - 24px) / 1.5)); }
}
/* Landscape phones: slimmer rails give the board the full height, and the room card and
   chat shrink to fit instead of overflowing. */
@media(max-height:500px) and (min-width:621px) {
  #game { grid-template-columns:132px minmax(0,1fr) 280px; gap:10px; padding:8px; }
  .activity-rail { grid-template-rows:32px 16px 112px minmax(0,1fr); }
  .activity-rail > .brand { font-size:20px; }
  .room-card { height:112px; }
  .room-card .panel-heading h2 { font-size:11px; }
  #room-code-label { font-size:14px; letter-spacing:1px; }
  .room-tools #invite { min-height:32px; padding:4px 8px; font-size:12px; }
  #chat-messages:empty::after { margin:8px auto; }
  .chat-content { min-height:0; overflow:hidden; }
  .players-panel .panel-heading h2 { font-size:15px; }
}
@media(max-height:500px) and (min-width:621px) {
  #chat-messages:empty::after { display:none; }
  .party-identity { min-width:0; }
  .party-game .party-identity input:not([type=color]) { width:58px; }
  .party-game .party-identity input[type=color] { flex:none; }
}
/* In a Play party the frame already shows the game name: keep only the icon link. */
.party-game .activity-rail > .brand .brand-wordmark { display:none; }
@media(pointer:coarse) {
  .party-game .party-identity input:not([type=color]) { min-height:32px; }
  .party-game .party-identity input[type=color] { width:32px; height:32px; }
  .party-game .activity-rail > .brand { min-width:32px; min-height:32px; }
}
/* The turn heading sat over the clock row, so descenders (g, y) touched the clock. */
#board .center-play h2 { align-items:flex-start; padding-top:8px; line-height:1.2; }
@media(pointer:coarse) {
  #board .turn-time-gift { position:relative; }
  #board .turn-time-gift::after { content:''; position:absolute; inset:calc(-9px / var(--board-scale, 1)) calc(-6px / var(--board-scale, 1)); }
}
/* Short landscape screens: the fixed-height welcome card no longer pushes "Create a room" off-screen. */
@media(max-height:500px) {
  .welcome { min-height:100dvh; padding:8px; }
  #room-form { height:auto; max-height:calc(100dvh - 16px); padding:14px 28px; }
  #room-form .lobby-dice { display:none; }
  #room-form h1 { font-size:30px; margin:0 0 2px; }
  #room-form .intro { margin:0 0 6px; }
}
/* Compact phone seats: prison/visiting status shares the name line instead of
   overlapping the balance. */
@media(max-width:900px) and (min-height:640px) {
  .players-panel .player > span:nth-child(2) .player-state { display:inline; margin-left:6px; }
}
@media(max-width:420px) and (min-height:640px) {
  .room-card .panel-heading h2 { display:none; }
}
@media(max-width:360px) and (min-height:640px) {
  #room-code-label { font-size:13px; letter-spacing:0; }
  .room-card { padding-left:8px; gap:6px; }
}
/* An offline or inactive note shares the balance line beside the balance instead of
   covering it ("$615.50" ran under "Offline 17s · 1/2"); a long note wraps to two lines. */
.players-panel .player:has(.player-presence:not(:empty)) { grid-template-columns:26px auto minmax(0,1fr); }
.players-panel .player:has(.player-presence:not(:empty)) > span:nth-child(2) { grid-column:2 / 4; }
.players-panel .player:has(.player-presence:not(:empty)) > strong { grid-column:2; max-width:none; }
.players-panel .player .player-presence:not(:empty) { position:static; grid-column:3; grid-row:2; justify-self:end; align-self:center; max-width:none; min-width:0; }
/* Touch screens: at least 40px hit areas for the side controls, drawn as transparent boxes
   so nothing on screen moves or changes. */
@media(pointer:coarse) {
  #history, #assets, #bankrupt, #chat-send, .asset-tabs [role="tab"], .activity-rail > .brand { position:relative; }
  #history::after, #assets::after { content:''; position:absolute; inset:-4px; }
  #bankrupt::after, .activity-rail > .brand::after { content:''; position:absolute; inset:-5px 0; }
  #chat-send::after { content:''; position:absolute; inset:0 -2px; }
  .asset-tabs [role="tab"]::after { content:''; position:absolute; inset:-2px 0; }
  .players-panel .player .player-vote::after { inset:-10px; }
}