.container { padding: 8px 12px 20px; gap: 10px; }
.status { font-size: 0.65em; color: #888; display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 4px; position: relative; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.live { background: #2ecc71; animation: pulse 2s ease-in-out infinite; }
.status-dot.offline { background: #e74c3c; }

/* Dice roll flash */
@keyframes rollFade {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.7); }
  15%  { opacity:1; transform:translate(-50%,-50%) scale(1.05); }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1); }
}
.roll-flash {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 2em; font-weight: bold; color: #fff; text-shadow: 0 0 20px rgba(255,200,0,0.9);
  background: rgba(0,0,0,0.75); padding: 10px 22px; border-radius: 12px;
  animation: rollFade 2.5s ease forwards; pointer-events: none; z-index: 99; white-space: nowrap;
}

/* Last-event square pulse */
@keyframes sqPulse {
  0%   { box-shadow: inset 0 0 0 0 rgba(255,220,0,0.8); }
  40%  { box-shadow: inset 0 0 0 3px rgba(255,220,0,0.8); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,220,0,0); }
}
.sq-pulse { animation: sqPulse 1.5s ease forwards; }

/* Square hover tooltip */
.rent-tip {
  display: none; position: absolute; z-index: 100; bottom: 105%; left: 50%;
  transform: translateX(-50%); background: #1a1a2e; border: 1px solid #555;
  border-radius: 6px; padding: 10px 14px; font-size: 1.05em; white-space: nowrap;
  color: #eee; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
.tip-down .rent-tip { bottom: auto; top: 105%; }
.has-tip:hover { z-index: 200 !important; overflow: visible !important; }
.has-tip:hover .rent-tip { display: block; }
.rent-tip hr { margin: 3px 0; border-color: #444; }
.rent-tip hr.wide { margin: 4px 0; }
.rent-tip .tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rent-tip .tip-price { color: #bbb; font-size: 0.85em; }
.rent-tip .tip-hl { color: #FFD700; }
.rent-tip .tip-mortgaged { color: #e74c3c; margin-top: 3px; }
.rent-tip .tip-here { color: #aaa; font-size: 1em; }
.rent-tip .tip-jailed { color: #e74c3c; font-size: 1em; }

/* Board layout */
.board-wrapper { position: relative; width: min(90vw, 780px); height: min(90vw, 780px); }
.board { position: absolute; inset: 0; }

/* Squares */
.square {
  position: absolute;
  border: 1px solid #333;
  background: #16213e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.55em;
  cursor: default;
  transition: background 0.2s;
}
.square:hover { background: #1a2a50; z-index: 10; }
.square .name { text-align: center; line-height: 1.1; padding: 1px 2px; font-weight: 500; }
.square .color-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
}
/* The bar sits on the square's inner edge, facing the board center. */
.square .color-bar.bar-bottom { top: auto; bottom: 0; }
.square .color-bar.bar-right { left: auto; right: 0; width: 6px; height: 100%; flex-direction: column; }
.square .color-bar.bar-left { right: auto; width: 6px; height: 100%; flex-direction: column; }
.square .players-here {
  display: flex; flex-wrap: wrap; gap: 1px; margin-top: 2px;
}
.player-token {
  width: 26px; height: 26px; border-radius: 50%; overflow: visible;
  border: 2px solid rgba(255,255,255,0.5); flex-shrink: 0;
  background: #1a1a2e; position: relative; z-index: 4;
}
.player-token img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.token-initial {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: bold; color: #fff; text-shadow: 0 0 3px #000;
  border-radius: 3px; padding: 0 2px; line-height: 9px; white-space: nowrap;
}
.house { width: 5px; height: 5px; background: #27ae60; border: 1px solid rgba(0,0,0,0.4); flex-shrink: 0; }
.hotel { width: 8px; height: 8px; background: #e74c3c; border-radius: 2px 2px 0 0; border: 1px solid rgba(0,0,0,0.4); flex-shrink: 0; }
/* Houses on the green bar and hotels on the red one vanish without a hard edge. */
.house.dark-edge, .hotel.dark-edge { border: 1.5px solid #000; }
.color-bar { display: flex; align-items: center; justify-content: center; gap: 1px; overflow: visible; }
.crown {
  position: absolute; bottom: 0; font-size: 7px; line-height: 1; color: #FFD700;
  text-shadow: 0 0 3px rgba(0,0,0,0.9); z-index: 5; pointer-events: none;
}
.crown.crown-h { right: 1px; }
.crown.crown-v { left: 50%; transform: translateX(-50%); }
.mortgaged .mortgage-overlay { position:absolute; inset:0; background:rgba(15,15,30,0.65); z-index:3; pointer-events:none; }
.mortgaged .player-token, .mortgaged .owner-indicator { position:relative; z-index:4; }
.owner-indicator { font-size: 0.7em; color: #ffd700; }

/* Jail / Just Visiting corner. The clip-path lives on the jail box, not the
   square, because clipping the square would also clip its hover tooltip. */
.jail-box {
  position: absolute; bottom: 0; left: 0; width: 55%; height: 55%;
  background: #c0392b; display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: 0.55em; font-weight: bold; color: #fff;
  clip-path: polygon(0 0,100% 100%,0 100%);
}
.jail-box span { transform: rotate(-45deg) translate(-8px,8px); font-size: 0.9em; }
.jail-tokens { position: absolute; bottom: 4px; left: 4px; display: flex; flex-wrap: wrap; gap: 1px; max-width: 45%; z-index: 5; }
.visit-label { position: absolute; bottom: 4px; right: 4px; font-size: 0.55em; color: #aaa; text-align: right; line-height: 1.2; }

/* Player info panel */
/* The board and both player columns share one container so the cards can
   sit below the board on narrow screens and flank it on wide ones with the
   same DOM. Below the wide breakpoint the columns dissolve (display: contents)
   into a card grid under the board. */
.board-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 780px; width: 100%; }
.board-row .board-wrapper { grid-column: 1 / -1; order: -1; justify-self: center; }
.players-side { display: contents; }
.player-panel {
  background: #16213e; border: 2px solid #333; border-radius: 8px;
  padding: 12px; min-width: 0; overflow: hidden;
}
.player-panel.empty { opacity: 0.4; border-style: dashed; }
.player-panel.placeholder { opacity: 0.6; border-style: dashed; }
.player-panel.bankrupt { opacity: 0.45; border-color: #e74c3c; border-style: dashed; }
.player-panel h3 { font-size: 1em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.player-panel .avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #555; margin-right: 8px; }
.player-panel.placeholder .avatar { opacity: 0.5; }
.player-panel.bankrupt .avatar { opacity: 0.4; }
.player-panel .struck { text-decoration: line-through; color: #888; }
.player-panel .note { font-size: 0.9em; }
.player-panel .note.waiting { color: #555; }
.player-panel .note.registering { color: #888; }
.player-panel .note.ready { font-size: 0.8em; margin-top: 4px; color: #888; }
.player-panel .note.bankrupt { color: #e74c3c; font-weight: bold; }
.player-panel .turn-timer { font-size: 0.7em; color: #888; margin: -4px 0 2px; padding-left: 56px; }
.player-panel .money { font-size: 1.2em; color: #2ecc71; font-weight: bold; }
.player-panel .money.negative { color: #e74c3c; }
.player-panel .gojf { font-size: 0.65em; margin-left: 8px; vertical-align: middle; opacity: 0.85; }
.player-panel .worth-bar { margin: 4px 0 6px; height: 4px; background: #333; border-radius: 2px; overflow: hidden; }
.player-panel .worth-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }
.player-panel .jail-note { font-size: 0.8em; color: #e74c3c; margin-top: 4px; }
.player-panel .loc-note { font-size: 0.8em; margin-top: 4px; color: #aaa; }
.player-panel .props { font-size: 0.8em; margin-top: 6px; column-count: 2; column-gap: 10px; }
.player-panel .prop-group { break-inside: avoid; margin-bottom: 5px; }
.player-panel .prop-item { padding: 1px 0; display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.player-panel .prop-item.is-mortgaged { opacity: 0.45; }
.player-panel .prop-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-panel .prop-suffix { flex-shrink: 0; white-space: nowrap; margin-left: auto; }
.player-panel .mini-house { display: inline-block; width: 7px; height: 7px; background: #2ecc71; margin-left: 1px; vertical-align: middle; }
.player-panel .mini-hotel { display: inline-block; width: 9px; height: 10px; background: #e74c3c; border-radius: 2px 2px 0 0; vertical-align: middle; }
.prop-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.current-turn { border-color: #ffd700 !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }

/* Game log */
.game-log {
  padding: 12px; max-width: 780px; width: 100%; max-height: 200px;
  overflow-y: auto; font-size: 0.85em;
}
.game-log h3 { margin-bottom: 8px; }
.log-entry { padding: 2px 0; border-bottom: 1px solid #1a1a2e; color: #ccc; }
.log-entry .log-player { color: #ffd700; font-weight: 500; }
.log-entry .log-time { color: #666; font-size: 0.8em; }

/* Center area of board */
.board-center {
  position: absolute;
  top: calc(100% / 8.5);
  left: calc(100% / 8.5);
  right: calc(100% / 8.5);
  bottom: calc(100% / 8.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #0f3460;
  border: 2px solid #333;
  font-size: 1.8em;
  font-weight: bold;
  color: #e74c3c;
  text-align: center;
  letter-spacing: 3px;
}
.board-center .subtitle { font-size: 0.35em; color: #888; letter-spacing: 0; margin-top: 8px; font-weight: normal; }

/* ===== ZERO STATE ===== */
.zero-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 80vh; text-align: center; gap: 20px; padding: 40px;
}
.zero-state .dice { font-size: 5em; animation: dice-bounce 2s ease-in-out infinite; }
@keyframes dice-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(15deg); }
}
.zero-state h2 { color: #fff; font-size: 2em; }
.zero-state p { color: #888; font-size: 1.1em; max-width: 400px; line-height: 1.5; }
.zero-state .poll-note { color: #555; font-size: 0.85em; }
.zero-state .stats-note { margin-top: 10px; font-size: 0.85em; }

/* ===== DISCONNECTED BANNER ===== */
.disconnected-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(40, 20, 20, 0.92); border-bottom: 1px solid #e74c3c;
  padding: 8px 20px; text-align: center; font-size: 0.85em; color: #ccc;
  display: none; backdrop-filter: blur(2px);
  animation: stale-fade-in 0.3s ease-out;
}
.disconnected-banner .icon { margin-right: 6px; }
.disconnected-banner .retry-text { color: #e74c3c; font-weight: 500; }
body.greyed-out .container { filter: grayscale(60%) brightness(0.6); }

/* ===== STALE STATE ===== */
.stale-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  background: rgba(30, 30, 50, 0.92); border-bottom: 1px solid #444;
  padding: 8px 20px; text-align: center; font-size: 0.85em; color: #aaa;
  display: none; backdrop-filter: blur(2px);
  animation: stale-fade-in 0.3s ease-out;
}
@keyframes stale-fade-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
.stale-banner .icon { margin-right: 6px; }
.stale-banner .age { color: #f39c12; font-weight: 500; }
body.stale .container { filter: brightness(0.8) saturate(0.7); }

/* ===== GAME OVER ===== */
.game-over-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e; text-align: center; padding: 20px;
  font-size: 1.5em; font-weight: bold; z-index: 500;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
  animation: banner-slide 0.5s ease-out;
}
@keyframes banner-slide { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.game-over-banner .winner { font-size: 1.4em; }
.game-over-banner .sub { font-size: 0.5em; font-weight: normal; color: #333; }
body.game-over .container { padding-top: 100px; }

#confetti-canvas {
  position: fixed; inset: 0; z-index: 499; pointer-events: none;
}

/* ===== DEBUG PANEL ===== */
.debug-panel {
  position: absolute; top: 100%; left: 0; margin-top: 4px; background: #0d1117;
  border: 1px solid #30363d; border-radius: 8px; padding: 12px;
  font-size: 0.75em; z-index: 2000; display: none; white-space: nowrap;
}
.debug-panel.visible { display: block; }
.debug-panel h4 { color: #58a6ff; margin-bottom: 8px; }
.debug-panel button {
  display: block; width: 100%; margin: 4px 0; padding: 6px 10px;
  background: #21262d; border: 1px solid #30363d; color: #c9d1d9;
  border-radius: 4px; cursor: pointer; text-align: left; font-size: 1em;
}
.debug-panel button:hover { background: #30363d; }

/* ===== REPLAY MODE ===== */
/* Only visible with ?replay=<id> (body gets the "replay" class). */
.replay-bar {
  padding: 10px 12px; max-width: 780px; width: 100%;
  display: none; flex-direction: column; gap: 8px;
}
body.replay .replay-bar { display: flex; }
.replay-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.replay-row button {
  background: #21262d; border: 1px solid #30363d; color: #c9d1d9;
  border-radius: 4px; cursor: pointer; padding: 4px 12px; font-size: 0.9em;
  line-height: 1.4;
}
.replay-row button:hover { background: #30363d; }
.replay-row select {
  background: #21262d; border: 1px solid #30363d; color: #c9d1d9;
  border-radius: 4px; padding: 4px 6px; font-size: 0.9em;
}
.replay-pos {
  margin-left: auto; font-size: 0.8em; color: #aaa;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rp-scrub-wrap { position: relative; padding-top: 11px; }
#rp-chapters { position: absolute; top: 0; left: 0; right: 0; height: 9px; }
.rp-tick {
  position: absolute; top: 0; width: 3px; height: 9px; border-radius: 1px;
  cursor: pointer; transform: translateX(-50%);
}
.rp-tick:hover { width: 5px; }
#rp-scrub { width: 100%; display: block; accent-color: #ffd700; margin: 0; }
#rp-spark { display: block; width: 100%; height: 48px; }

/* Wide desktop: player cards flank the board instead of stacking below it.
   The board gives up width before the side columns drop below ~280px. */
@media (min-width: 1200px) {
  .board-row {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 16px; max-width: 1652px;
  }
  .board-row .board-wrapper {
    order: 0; flex: 0 0 auto;
    width: min(780px, 100vw - 620px); height: min(780px, 100vw - 620px);
  }
  .players-side {
    display: flex; flex-direction: column; gap: 12px;
    flex: 1 1 0; min-width: 0; max-width: 420px;
  }
  .player-panel { padding: 16px; font-size: 1.1em; }
  /* Same width as the board so the log sits directly beneath it. */
  .game-log, .replay-bar { max-width: min(780px, 100vw - 620px); }
}

/* Tablet: 2-column player cards */
@media (max-width: 700px) {
  .board-wrapper { width: 95vw; height: 95vw; }
  .board-row { grid-template-columns: 1fr 1fr; max-width: 95vw; }
  .game-log { max-width: 95vw; }
  .replay-bar { max-width: 95vw; }
}

/* Mobile: single column, tight layout */
@media (max-width: 480px) {
  .container { padding: 6px 8px 16px; gap: 8px; }
  .board-wrapper { width: 98vw; height: 98vw; }
  .square { font-size: 0.38em; }
  .player-token { width: 14px; height: 14px; }
  .board-row { grid-template-columns: 1fr; max-width: 98vw; gap: 8px; }
  .player-panel { padding: 8px 10px; }
  .player-panel h3 { font-size: 0.9em; }
  .player-panel .money { font-size: 1em; }
  .game-log { max-width: 98vw; padding: 10px; font-size: 0.78em; }
  .replay-bar { max-width: 98vw; padding: 8px; }
  .status { font-size: 0.6em; }
  .debug-panel { max-width: calc(100vw - 16px); font-size: 0.8em; }
}