:root {
  --bg-dark: #0f2a22;
  --bg-mid: #1d4d3c;
  --panel-bg: rgba(255, 255, 255, 0.94);
  --panel-border: rgba(255, 255, 255, 0.45);
  --text-main: #1f2937;
  --text-muted: #5b6472;
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.2);
  --shadow-strong: 0 16px 36px rgba(0, 0, 0, 0.3);
  --board-zoom: 1;
  --log-height-scale: 1;
  --board-corner-base: 80px;
  --board-cell-base: 56px;
  --log-height-base: 220px;
  --corner-size: calc(var(--board-corner-base) * var(--board-zoom));
  --cell-size: calc(var(--board-cell-base) * var(--board-zoom));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background:
    radial-gradient(circle at 20% 10%, #2d6b54 0%, transparent 35%),
    radial-gradient(circle at 80% 0%, #255b49 0%, transparent 32%),
    linear-gradient(160deg, var(--bg-mid), var(--bg-dark));
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

h1 {
  color: #f8fafc;
  font-size: 1.9rem;
  margin-bottom: 16px;
  letter-spacing: 3px;
  text-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

#game-container {
  width: min(100%, 1300px);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── BOARD ─────────────────────────────────────────────── */
#board {
  position: relative;
  display: grid;
  grid-template-columns: var(--corner-size) repeat(9, var(--cell-size)) var(--corner-size);
  grid-template-rows: var(--corner-size) repeat(9, var(--cell-size)) var(--corner-size);
  border: 2px solid #1f3a32;
  border-radius: 10px;
  background: #d7f0dc;
  box-shadow: var(--shadow-strong);
  overflow: hidden;
}

#board-peek-chip {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 18;
  max-width: min(94%, 430px);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.65);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.2;
  padding: 4px 9px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#board-peek-chip .peek-title {
  color: #0f172a;
}

#board-peek-chip .peek-owner {
  border-radius: 999px;
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #166534;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.2px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#board-peek-chip .peek-owner.player {
  border-color: color-mix(in srgb, var(--peek-owner, #3b82f6) 42%, white);
  background: color-mix(in srgb, var(--peek-owner, #3b82f6) 16%, white);
  color: #0f172a;
}

#board-peek-chip .peek-owner .peek-owner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--peek-owner, #3b82f6);
  border: 1px solid rgba(15, 23, 42, 0.45);
}

#board-peek-chip .peek-owner.bank {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

#board-peek-chip .peek-detail {
  color: #334155;
  font-size: 0.6rem;
}

#board-peek-chip .peek-occupants {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.58rem;
  color: #0f172a;
  margin-left: 2px;
}

#board-peek-chip .peek-occupant {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--occupant-color, #475569) 45%, white);
  background: color-mix(in srgb, var(--occupant-color, #475569) 18%, white);
  padding: 1px 6px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

#board-peek-chip[data-tile-type="property"] {
  border-color: rgba(34, 197, 94, 0.46);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.96));
}

#board-peek-chip[data-tile-type="railroad"] {
  border-color: rgba(71, 85, 105, 0.5);
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.96), rgba(255, 255, 255, 0.96));
}

#board-peek-chip[data-tile-type="utility"] {
  border-color: rgba(217, 119, 6, 0.48);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.96));
}

#board-peek-chip[data-tile-type="chance"],
#board-peek-chip[data-tile-type="community"] {
  border-color: rgba(124, 58, 237, 0.44);
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.96), rgba(255, 255, 255, 0.96));
}

#board-peek-chip[data-tile-type="tax"] {
  border-color: rgba(220, 38, 38, 0.5);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.96));
}

#board-peek-chip[data-tile-type="corner"],
#board-peek-chip[data-tile-type="jail"],
#board-peek-chip[data-tile-type="free"],
#board-peek-chip[data-tile-type="go-jail"] {
  border-color: rgba(59, 130, 246, 0.42);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.96));
}

#board-peek-chip.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tile {
  border: 1px solid rgba(33, 65, 55, 0.38);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 2px;
  font-size: 7px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #edf7ef;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.tile:hover {
  border-color: #60a5fa;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}

.tile.tile-current {
  border-color: #38bdf8;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
}

.tile.tile-inspected {
  border-color: #6366f1;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.32);
}

.tile.tile-group-peer {
  border-color: color-mix(in srgb, var(--group-color, #6366f1) 45%, #818cf8);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.26);
  background: linear-gradient(180deg, #f8faff, #eef2ff);
}

.tile.tile-threat-low {
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25);
}

.tile.tile-threat-med {
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.38);
}

.tile.tile-threat-high {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.55), inset 0 0 16px rgba(239, 68, 68, 0.12);
}

.tile.tile-roll-preview {
  outline: 1px dashed rgba(59, 130, 246, 0.28);
  outline-offset: -2px;
}

.tile.tile-roll-w1 { background-color: rgba(219, 234, 254, 0.18); }
.tile.tile-roll-w2 { background-color: rgba(191, 219, 254, 0.2); }
.tile.tile-roll-w3 { background-color: rgba(147, 197, 253, 0.2); }
.tile.tile-roll-w4 { background-color: rgba(125, 211, 252, 0.2); }
.tile.tile-roll-w5 { background-color: rgba(96, 165, 250, 0.2); }
.tile.tile-roll-w6 { background-color: rgba(59, 130, 246, 0.24); }

.tile .roll-chance-badge {
  position: absolute;
  top: 13px;
  left: 2px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.55);
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.1;
  padding: 1px 4px;
  box-shadow: 0 1px 3px rgba(30, 64, 175, 0.18);
}

.tile.tile-owned {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--owner-color, #94a3b8) 48%, white);
}

#board.owner-preview-active .tile {
  filter: saturate(0.72) brightness(0.96);
}

#board.focus-spotlight .tile {
  opacity: 0.58;
  filter: saturate(0.72) brightness(0.96);
}

#board.focus-spotlight .tile.tile-focus,
#board.focus-spotlight .tile.tile-current,
#board.focus-spotlight .tile.tile-inspected,
#board.focus-spotlight .tile.tile-peek {
  opacity: 1;
  filter: none;
}

#board.owner-preview-active .tile.tile-owner-preview,
#board.owner-preview-active .tile.tile-current,
#board.owner-preview-active .tile.tile-focus,
#board.owner-preview-active .tile.tile-inspected {
  filter: none;
}

.tile.tile-owner-preview {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--owner-color, #3b82f6) 68%, white), inset 0 0 14px color-mix(in srgb, var(--owner-color, #3b82f6) 22%, transparent);
  transform: translateY(-1px);
}

.tile .owner-ribbon {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.tile .improvement-badge {
  position: absolute;
  left: 2px;
  bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  padding: 1px 4px;
  border: 1px solid rgba(15, 23, 42, 0.35);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
  max-width: calc(100% - 18px);
}

.tile .improvement-badge.houses {
  border-color: rgba(22, 163, 74, 0.45);
  background: linear-gradient(180deg, #ecfdf5, #dcfce7);
}

.tile .improvement-badge.hotel {
  border-color: rgba(220, 38, 38, 0.45);
  background: linear-gradient(180deg, #fef2f2, #fee2e2);
}

.tile .improvement-badge .imp-house {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #16a34a;
  border: 1px solid rgba(21, 128, 61, 0.7);
}

.tile .improvement-badge .imp-hotel {
  font-size: 7px;
  line-height: 1;
}

.tile .improvement-badge .imp-label {
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #334155;
}

.tile.tile-focus {
  border-color: #f59e0b;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.4), 0 0 0 2px rgba(245, 158, 11, 0.18);
  transform: translateY(-1px);
  animation: tile-pulse 680ms ease-in-out 2;
}

.tile.tile-peek {
  border-color: #38bdf8;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.48), 0 0 0 2px rgba(56, 189, 248, 0.2);
  transform: translateY(-1px);
}

.tile.tile-mortgaged {
  background: repeating-linear-gradient(
    -45deg,
    #edf2f7 0px,
    #edf2f7 8px,
    #e2e8f0 8px,
    #e2e8f0 16px
  );
  border-color: rgba(148, 163, 184, 0.8);
}

.tile.tile-mortgaged .color-bar {
  filter: grayscale(0.65) saturate(0.6);
  opacity: 0.72;
}

.tile.tile-mortgaged .tile-name {
  color: #475569;
}

.tile .mortgage-badge {
  position: absolute;
  top: 12px;
  right: 2px;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.35px;
  color: #7f1d1d;
  background: rgba(254, 242, 242, 0.95);
  border: 1px solid rgba(248, 113, 113, 0.65);
  border-radius: 999px;
  padding: 1px 4px;
  line-height: 1.1;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.2);
}

.tile .tile-index-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 12px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(248, 250, 252, 0.95);
  color: #475569;
  font-size: 6px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.tile.tile-watched {
  outline: 1px dashed rgba(251, 191, 36, 0.8);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.4);
}

.tile .tile-watch-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(251, 191, 36, 0.8);
  background: rgba(254, 243, 199, 0.95);
  color: #92400e;
  font-size: 0.55rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(120, 53, 15, 0.25);
}

.tile .tile-name {
  line-height: 1.1;
  word-break: break-word;
  hyphens: auto;
  width: 100%;
}

.tile .color-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12px;
}

.tile.corner {
  font-size: 8px;
  font-weight: bold;
  background: #a5d6a7;
}

.tile.chance    { background: #fff9c4; }
.tile.community { background: #bbdefb; }
.tile.tax       { background: #ffcdd2; }
.tile.railroad  { background: #d7ccc8; }
.tile.utility   { background: #f3e5f5; }
.tile.go-jail   { background: #ffe082; }
.tile.jail      { background: #ffe082; }
.tile.free      { background: #c8e6c9; }

/* center panel fills the 9×9 middle */
#board-center {
  grid-column: 2 / 11;
  grid-row: 2 / 11;
  background: radial-gradient(circle at 30% 20%, #dff3e3, #c9e7d1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #1f513d;
  border: 1px dashed rgba(41, 95, 74, 0.4);
  padding: 10px;
}

#board-center .center-title {
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 2px 5px rgba(0,0,0,0.18);
}

#board-center .center-sub {
  margin-top: 3px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.9px;
  color: #14532d;
}

#board-center .center-metrics {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  width: min(86%, 510px);
}

#board-center .center-metric {
  font-size: 0.62rem;
  font-weight: 700;
  color: #334155;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  padding: 2px 7px;
}

#board-center .center-metric.center-metric-risk {
  color: #9a3412;
  border-color: rgba(251, 146, 60, 0.48);
  background: rgba(255, 237, 213, 0.9);
}

#board-center .center-turn-queue {
  margin-top: 6px;
  width: min(82%, 500px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

#board-center .center-turn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--turn-color, #94a3b8) 40%, white);
  background: rgba(255, 255, 255, 0.5);
  color: #334155;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 7px;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
}

#board-center .center-turn-chip:hover {
  border-color: color-mix(in srgb, var(--turn-color, #3b82f6) 58%, white);
  background: color-mix(in srgb, var(--turn-color, #3b82f6) 12%, white);
}

#board-center .center-turn-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--turn-color, #3b82f6) 58%, white);
  outline-offset: 1px;
}

#board-center .center-turn-chip.current {
  border-color: color-mix(in srgb, var(--turn-color, #3b82f6) 70%, white);
  background: color-mix(in srgb, var(--turn-color, #3b82f6) 16%, white);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--turn-color, #3b82f6) 20%, transparent);
}

#board-center .center-turn-chip .turn-chip-token {
  line-height: 1;
  font-size: 0.68rem;
}

#board-center .center-turn-chip .turn-chip-name {
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#board-center .center-risk-rail {
  margin-top: 6px;
  width: min(84%, 520px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

#board-center .center-risk-chip {
  border-radius: 999px;
  border: 1px solid #fdba74;
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
  color: #9a3412;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 7px;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
}

#board-center .center-risk-chip:hover {
  border-color: #fb923c;
  box-shadow: 0 2px 7px rgba(251, 146, 60, 0.22);
}

#board-center .center-risk-chip:focus-visible {
  outline: 2px solid #fdba74;
  outline-offset: 1px;
}

#board-center .center-phase-rail {
  margin-top: 8px;
  width: min(80%, 470px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

#board-center .center-phase-step {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.5);
  padding: 3px 2px;
}

#board-center .center-phase-step.active {
  color: #0f172a;
  border-color: rgba(59, 130, 246, 0.55);
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.18);
}

#board-center .center-phase-step.done {
  color: #065f46;
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
}

#board-center .center-event {
  margin-top: 8px;
  max-width: min(74%, 420px);
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 600;
  color: #1e3a2f;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(20, 83, 45, 0.18);
  border-radius: 8px;
  padding: 6px 8px;
  animation: center-event-pulse 240ms ease;
}

/* token dots on tiles */
.token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 2px;
  border-radius: 8px;
  border: 1px solid #333;
  margin: 1px;
  background: linear-gradient(180deg, #ffffff, #eef2f7);
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}

.token.active-token {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--token-player-color, #3b82f6) 45%, white), 0 3px 8px rgba(37, 99, 235, 0.3);
  animation: active-token-pulse 1s ease-in-out infinite;
}

.tokens-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
}

/* tile rotation for sides */
.tile.top    { writing-mode: horizontal-tb; flex-direction: column-reverse; justify-content: flex-start; }
.tile.right  { writing-mode: vertical-rl;  transform: rotate(180deg); }
.tile.left   { writing-mode: vertical-lr; }
.tile.bottom { writing-mode: horizontal-tb; }

/* ─── SIDE PANEL ─────────────────────────────────────────── */
#side-panel {
  width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-box {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-soft);
}

.panel-box h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--text-muted);
  margin-bottom: 8px;
  border-bottom: 1px solid #e9edf2;
  padding-bottom: 5px;
}

#status-area { font-size: 0.9rem; }
#status-area #table-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

#status-area #table-meta .meta-chip {
  border: 1px solid #d8e3ef;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15px;
  padding: 2px 7px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

#status-area #table-meta .meta-chip.meta-chip-warn {
  color: #9a3412;
  border-color: #fdba74;
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
}

#status-area #table-meta .meta-chip.meta-chip-action {
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}

#status-area #table-meta .meta-chip.meta-chip-action:hover {
  border-color: #fb923c;
  box-shadow: 0 2px 6px rgba(251, 146, 60, 0.2);
}

#status-area #table-meta .meta-chip.meta-chip-action:focus-visible {
  outline: 2px solid #fdba74;
  outline-offset: 1px;
}

#status-area #player-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#status-area .player-row {
  border: 1px solid #e5ebf3;
  border-radius: 10px;
  padding: 7px 8px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
}

#status-area .player-row:hover {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
}
#status-area .player-row .player-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
#status-area .player-row .standing-badge {
  min-width: 30px;
  height: 18px;
  border-radius: 999px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #1e3a8a;
  background: #e0e7ff;
  border: 1px solid #bfdbfe;
}

#status-area .player-row .standing-trend {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 900;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
  color: #64748b;
}

#status-area .player-row .standing-trend.trend-up {
  color: #065f46;
  background: #ecfdf5;
  border-color: #86efac;
}

#status-area .player-row .standing-trend.trend-down {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fca5a5;
}

#status-area .player-row .standing-trend.trend-new {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

#status-area .player-row .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid #1f2937;
  flex-shrink: 0;
}
#status-area .player-row .player-name {
  font-weight: 700;
  color: #0f172a;
  flex: 1;
  min-width: 0;
}
#status-area .player-row .player-cash-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#status-area .player-row .player-cash {
  font-weight: 800;
  color: #065f46;
  font-size: 0.82rem;
}

#status-area .player-row .cash-delta {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 1px 5px;
  line-height: 1.2;
}

#status-area .player-row .cash-delta.cash-up {
  color: #065f46;
  background: #ecfdf5;
  border-color: #86efac;
}

#status-area .player-row .cash-delta.cash-down {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fca5a5;
}

#status-area .player-row .cash-delta.cash-new {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

#status-area .player-row .player-sub {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.68rem;
  color: #475569;
}

#status-area .player-row .turn-order-chip {
  border-radius: 999px;
  padding: 1px 6px;
  border: 1px solid #cbd5e1;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
}

#status-area .player-row .turn-order-chip.turn-now {
  color: #1e3a8a;
  border-color: #93c5fd;
  background: #eff6ff;
}

#status-area .player-row .turn-order-chip.turn-next {
  color: #065f46;
  border-color: #86efac;
  background: #ecfdf5;
}

#status-area .player-row .turn-order-chip.turn-future {
  color: #4338ca;
  border-color: #c7d2fe;
  background: #eef2ff;
}

#status-area .player-row .turn-order-chip.turn-out {
  color: #6b7280;
  border-color: #d1d5db;
  background: #f3f4f6;
}

#status-area .player-row .risk-chip {
  border-radius: 999px;
  padding: 1px 6px;
  border: 1px solid #cbd5e1;
  font-weight: 700;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
}

#status-area .player-row .risk-chip:hover,
#status-area .player-row .risk-chip:focus-visible {
  box-shadow: 0 1px 5px rgba(30, 64, 175, 0.18);
}

#status-area .player-row .risk-chip.risk-low {
  color: #065f46;
  background: #ecfdf5;
  border-color: #86efac;
}

#status-area .player-row .risk-chip.risk-med {
  color: #92400e;
  background: #fffbeb;
  border-color: #fcd34d;
}

#status-area .player-row .risk-chip.risk-high {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fca5a5;
}
#status-area .player-row .player-color-progress {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

#status-area .player-row .color-progress-chip {
  width: 12px;
  height: 8px;
  border-radius: 999px;
  background: var(--chip-color, #94a3b8);
  border: 1px solid rgba(15, 23, 42, 0.35);
  opacity: 0.78;
}

#status-area .player-row .color-progress-chip.full {
  width: 15px;
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.26);
}

#status-area .player-row .color-progress-empty {
  font-size: 0.62rem;
  color: #94a3b8;
}

#status-area .player-row .worth-track {
  margin-top: 5px;
  height: 5px;
  border-radius: 999px;
  background: #e7edf5;
  overflow: hidden;
}
#status-area .player-row .worth-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #22c55e);
}
#status-area .player-row.active {
  border-color: #93c5fd;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.25), 0 6px 12px rgba(37,99,235,0.14);
}

#status-area .player-row.turn-shift-flash {
  animation: current-turn-flash 620ms ease;
}

#status-area .player-row.flash-from-command {
  animation: command-focus-glow 720ms ease;
}

#status-area .player-row.rank-updated-up {
  animation: rank-rise-glow 520ms ease;
}

#status-area .player-row.rank-updated-down {
  animation: rank-drop-glow 520ms ease;
}

#status-area .player-row.cash-updated-up .cash-delta.cash-up {
  animation: cash-bump-up 520ms ease;
}

#status-area .player-row.cash-updated-down .cash-delta.cash-down {
  animation: cash-bump-down 520ms ease;
}

#status-area .player-row.rank-1 {
  border-color: #fcd34d;
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.28), 0 8px 14px rgba(217, 119, 6, 0.16);
}

#status-area .player-row.rank-1 .standing-badge {
  color: #78350f;
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  border-color: #fbbf24;
}

#status-area .player-row.rank-2 .standing-badge {
  color: #334155;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0);
  border-color: #cbd5e1;
}

#status-area .player-row.rank-3 .standing-badge {
  color: #7c2d12;
  background: linear-gradient(180deg, #ffedd5, #fed7aa);
  border-color: #fdba74;
}

#status-area .player-row:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}
#status-area .player-row.bankrupt {
  opacity: 0.45;
}
#status-area .player-row.bankrupt .player-name,
#status-area .player-row.bankrupt .player-cash,
#status-area .player-row.bankrupt .player-sub {
  text-decoration: line-through;
}

#status-area .player-row.bankrupt .standing-badge {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
}

#dice-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#dice-history {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
}

.dice-history-empty {
  font-size: 0.68rem;
  color: #94a3b8;
}

.dice-chip {
  border-radius: 999px;
  border: 1px solid #dbe3ee;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #334155;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 2px 7px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  animation: dice-chip-in 220ms ease;
  font-family: inherit;
}

button.dice-chip {
  appearance: none;
  cursor: default;
}

button.dice-chip.actionable {
  cursor: pointer;
}

button.dice-chip.actionable:hover {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

button.dice-chip.actionable:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

#dice-probability {
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

#dice-probability .dice-prob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#dice-probability .dice-prob-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
}

#dice-probability .dice-prob-sort {
  display: inline-flex;
  gap: 4px;
}

#dice-probability .dice-prob-sort-btn {
  border: 1px solid #d6deea;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15px;
  padding: 2px 7px;
}

#dice-probability .dice-prob-sort-btn:hover,
#dice-probability .dice-prob-sort-btn:focus-visible {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: #eff6ff;
}

#dice-probability .dice-prob-sort-btn.active {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1e3a8a;
}

#dice-probability .dice-prob-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dice-prob-row {
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  padding: 4px 6px;
  background: rgba(248, 250, 252, 0.8);
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}

.dice-prob-row:hover,
.dice-prob-row:focus-visible {
  border-color: #93c5fd;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.dice-prob-row .dice-prob-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #0f172a;
  font-weight: 700;
}

.dice-prob-row .dice-prob-bar {
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.dice-prob-row .dice-prob-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
}

.dice-prob-row .dice-prob-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.64rem;
  color: #475569;
  gap: 6px;
}

.dice-prob-row .dice-prob-tile {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dice-prob-row .dice-prob-risk {
  font-weight: 700;
}

.dice-prob-row .dice-prob-watch {
  color: #b45309;
  font-weight: 900;
}

.dice-prob-row.risk-low .dice-prob-bar span {
  background: linear-gradient(90deg, #34d399, #10b981);
}

.dice-prob-row.risk-med .dice-prob-bar span {
  background: linear-gradient(90deg, #f97316, #ea580c);
}

.dice-prob-row.risk-high .dice-prob-bar span {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.dice-prob-row.risk-high {
  border-color: rgba(239, 68, 68, 0.5);
}

.dice-prob-empty {
  font-size: 0.68rem;
  color: #94a3b8;
}

.dice-chip.double {
  color: #065f46;
  border-color: #86efac;
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
}

.die {
  width: 42px; height: 42px;
  background: linear-gradient(180deg, #ffffff, #f4f7fb);
  border: 1px solid #c9d4e1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: #1f2937;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.die.rolling {
  animation: die-roll-jitter 120ms linear infinite;
  border-color: #93c5fd;
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.22);
}

.die.doubles {
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 8px 20px rgba(34, 197, 94, 0.28);
  transform: translateY(-1px);
}

#actions-box {
  position: sticky;
  top: 12px;
  z-index: 35;
  border-color: rgba(147, 197, 253, 0.38);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

#actions-box.turn-human {
  border-color: rgba(34, 197, 94, 0.4);
}

#actions-box.turn-cpu {
  border-color: rgba(59, 130, 246, 0.42);
}

#actions-box.phase-roll {
  box-shadow: 0 12px 26px rgba(16, 185, 129, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

#actions-box.phase-manage,
#actions-box.phase-end {
  box-shadow: 0 12px 26px rgba(59, 130, 246, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

#actions-box.phase-resolve,
#actions-box.phase-move {
  box-shadow: 0 12px 26px rgba(124, 58, 237, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

#actions-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff, #eff6ff);
}

#actions-context .actions-now {
  font-size: 0.68rem;
  font-weight: 800;
  color: #1e3a8a;
  letter-spacing: 0.2px;
}

#actions-context .actions-next {
  font-size: 0.64rem;
  font-weight: 700;
  color: #475569;
}

#actions-context .actions-phase {
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 1px 6px;
  white-space: nowrap;
}

#actions-context .actions-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#actions-context .actions-chip {
  border-radius: 999px;
  border: 1px solid #dbe7f3;
  background: #ffffff;
  color: #334155;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 6px;
  max-width: 132px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#actions-context .actions-chip.cash {
  color: #166534;
  border-color: #bbf7d0;
  background: #ecfdf5;
}

#actions-context .actions-event {
  flex: 1 1 100%;
  min-width: 0;
  border-top: 1px dashed #dbe7f3;
  padding-top: 4px;
  margin-top: 1px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 180ms ease, transform 180ms ease;
}

#actions-context .actions-event .actions-event-icon {
  margin-right: 4px;
}

#actions-context .actions-event.tone-positive { color: #166534; }
#actions-context .actions-event.tone-warn { color: #9a3412; }
#actions-context .actions-event.tone-danger { color: #991b1b; }
#actions-context .actions-event.tone-info { color: #1d4ed8; }

#actions-context.actions-event-updated .actions-event {
  color: #1d4ed8;
  transform: translateX(1px);
  animation: actions-event-pulse 620ms ease;
}

#actions-progress {
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
  border: 1px solid #d5deea;
  margin-bottom: 8px;
  overflow: hidden;
  opacity: 0;
  transform: scaleY(0.8);
  transition: opacity 180ms ease, transform 180ms ease;
}

#actions-progress > span {
  display: block;
  height: 100%;
  width: var(--actions-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  transition: width 220ms ease;
}

#actions-box.turn-cpu #actions-progress {
  opacity: 1;
  transform: scaleY(1);
}

#actions-box.turn-cpu #actions-progress > span {
  background: linear-gradient(90deg, #3b82f6, #22c55e, #3b82f6);
  background-size: 180% 100%;
  animation: actions-progress-scan 1.1s linear infinite;
}

#controls { display: grid; gap: 8px; }

#turn-msg {
  margin-top: 6px;
  min-height: 18px;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 600;
}

#turn-msg[data-state="cpu"] {
  color: #1d4ed8;
}

#turn-msg[data-state="cpu"]::after {
  content: '...';
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: turn-msg-dots 1.1s steps(4, end) infinite;
}

#turn-msg[data-state="human"] {
  color: #065f46;
}

#action-hint {
  margin-top: 4px;
  min-height: 16px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
}

#action-hint.hint-next {
  color: #1d4ed8;
}

#action-hint.hint-wait {
  color: #7c3aed;
}

#action-hint.hint-cpu {
  color: #0f766e;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.control-item button {
  flex: 1;
}

.help-tip {
  position: relative;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #1e40af;
  background: #e0ecff;
  border: 1px solid #b8cdf8;
  cursor: help;
  user-select: none;
}

.help-tip.inline {
  width: 16px;
  height: 16px;
  font-size: 0.62rem;
  vertical-align: middle;
  margin-left: 4px;
}

.help-tip:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

.help-bubble {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  min-width: 180px;
  max-width: 230px;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 0.68rem;
  line-height: 1.35;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 40;
}

.help-tip:hover .help-bubble,
.help-tip:focus .help-bubble,
.help-tip:focus-within .help-bubble {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14);
}

button .click-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.34;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.22) 48%, rgba(255,255,255,0) 74%);
  animation: button-ripple 540ms ease-out forwards;
  z-index: 0;
}

.kbd-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(15, 23, 42, 0.16);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

button.is-busy {
  opacity: 0.9;
}

button .busy-dots {
  display: inline-block;
  min-width: 12px;
  margin-left: 5px;
  letter-spacing: 1px;
}

button .busy-dots::after {
  content: '...';
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: turn-msg-dots 1s steps(4, end) infinite;
}
#btn-roll { background: linear-gradient(180deg, #2f9b5f, #237a4b); color: #fff; }
#btn-roll:hover:not(:disabled) { background: linear-gradient(180deg, #2ca663, #216f45); }
#btn-trade { background: linear-gradient(180deg, #8b5cf6, #6f45d6); color: #fff; }
#btn-manage { background: linear-gradient(180deg, #f59e0b, #d97706); color: #fff; }
#btn-end  { background: linear-gradient(180deg, #2d7de0, #1f63b8); color: #fff; }
#btn-end:hover:not(:disabled)  { background: linear-gradient(180deg, #2f8af2, #1d5fae); }

button.recommended-action {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.24), 0 8px 18px rgba(37, 99, 235, 0.28);
  transform: translateY(-1px);
  animation: recommended-action-pulse 1.25s ease-in-out infinite;
}

#turn-phase {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.phase-step {
  border: 1px solid #dbe3ee;
  background: linear-gradient(180deg, #f8fafd, #f1f5f9);
  color: #64748b;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 7px 4px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.phase-step.active {
  color: #0f172a;
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25), 0 5px 14px rgba(37, 99, 235, 0.16);
  transform: translateY(-1px);
}

.phase-step.complete {
  color: #065f46;
  border-color: #86efac;
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
}

#tile-inspector {
  font-size: 0.78rem;
  line-height: 1.45;
  background: rgba(248, 250, 252, 0.72);
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  padding: 8px;
  min-height: 86px;
}

#tile-inspector .inspector-title {
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

#tile-inspector .inspector-meta {
  color: #475569;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

#tile-inspector .inspector-row {
  color: #334155;
}

#tile-inspector .inspector-row.inspector-row-chance {
  color: #1d4ed8;
  font-weight: 700;
}

#tile-inspector .inspector-group-ownership {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

#tile-inspector .inspector-set-pressure {
  margin-top: 6px;
  display: grid;
  gap: 4px;
}

#tile-inspector .set-pressure-row {
  display: grid;
  grid-template-columns: minmax(0, 90px) 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 0.64rem;
  color: #334155;
}

#tile-inspector .set-pressure-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tile-inspector .set-pressure-track {
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

#tile-inspector .set-pressure-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pressure-color, #3b82f6) 80%, white), var(--pressure-color, #3b82f6));
}

#tile-inspector .set-pressure-value {
  font-weight: 700;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

#tile-inspector .inspector-group-ownership .group-cell {
  border: 1px solid #dde5ef;
  border-radius: 7px;
  background: #f8fafc;
  padding: 3px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
}

#tile-inspector .inspector-group-ownership .group-cell:hover,
#tile-inspector .inspector-group-ownership .group-cell:focus-visible {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

#tile-inspector .inspector-group-ownership .group-cell-name {
  font-size: 0.64rem;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tile-inspector .inspector-group-ownership .owner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.5);
  flex: 0 0 auto;
}

#tile-inspector .inspector-group-ownership .owner-dot.owner-dot-unowned {
  background: #e2e8f0;
  border-style: dashed;
}

#tile-inspector .inspector-rent-ladder {
  margin-top: 7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

#tile-inspector .inspector-rent-ladder .rent-step {
  border: 1px solid #dbe4ee;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 4px 5px;
  font-size: 0.66rem;
  color: #475569;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#tile-inspector .inspector-watch-controls {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 10px;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

#tile-inspector .watch-toggle {
  align-self: flex-start;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #f8fafc;
  color: #92400e;
  cursor: pointer;
}

#tile-inspector .watch-toggle.is-watched {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

#tile-inspector .inspector-watchlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tile-inspector .inspector-watchlist .watchlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #475569;
}

#tile-inspector .inspector-watchlist .watchlist-header button {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 6px;
  background: #f8fafc;
  font-size: 0.65rem;
  padding: 2px 6px;
}

#tile-inspector .watchlist-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#tile-inspector .watch-chip {
  border: 1px solid rgba(251, 191, 36, 0.7);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.68rem;
  background: rgba(254, 243, 199, 0.8);
  color: #92400e;
  cursor: pointer;
}

#tile-inspector .watch-chip.active {
  background: #fcd34d;
  border-color: #f59e0b;
  color: #7c2d12;
}

#tile-inspector .watchlist-empty {
  font-size: 0.68rem;
  color: #94a3b8;
}

#tile-inspector .inspector-rent-ladder .rent-step strong {
  color: #0f172a;
  font-size: 0.68rem;
}

#tile-inspector .inspector-rent-ladder .rent-step.active {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22);
}

#inspector-controls {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#inspector-controls button {
  padding: 6px 8px;
  font-size: 0.7rem;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0);
  color: #1e293b;
  border: 1px solid #cfd8e3;
  box-shadow: none;
}

#inspector-controls button:hover:not(:disabled) {
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

#inspector-player-controls {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#inspector-player-controls button {
  padding: 6px 8px;
  font-size: 0.68rem;
  background: linear-gradient(180deg, #eef2ff, #e0e7ff);
  color: #3730a3;
  border: 1px solid #c7d2fe;
  box-shadow: none;
}

#inspector-player-controls button:hover:not(:disabled) {
  background: linear-gradient(180deg, #e0e7ff, #c7d2fe);
}

#inspector-jump {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

#inspector-quick-jumps {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#inspector-quick-jumps .inspector-quick-jump {
  border-radius: 999px;
  border: 1px solid #d4deea;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
}

#inspector-quick-jumps .inspector-quick-jump:hover,
#inspector-quick-jumps .inspector-quick-jump:focus-visible {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

#inspector-type-jumps {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#inspector-type-jumps .inspector-type-jump {
  border-radius: 999px;
  border: 1px solid #d8b4fe;
  background: linear-gradient(180deg, #faf5ff, #f3e8ff);
  color: #6b21a8;
  font-size: 0.61rem;
  font-weight: 700;
  padding: 2px 7px;
}

#inspector-type-jumps .inspector-type-jump:hover,
#inspector-type-jumps .inspector-type-jump:focus-visible {
  border-color: #c084fc;
  background: linear-gradient(180deg, #f3e8ff, #e9d5ff);
}

#inspector-jump-input {
  min-width: 0;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
  color: #1e293b;
  background: #fff;
}

#inspector-jump-input:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

#btn-inspector-jump {
  padding: 6px 10px;
  font-size: 0.7rem;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  color: #0f172a;
  border: 1px solid #bfdbfe;
  box-shadow: none;
}

#inspector-follow-wrap {
  margin-top: 6px;
}

#btn-inspector-follow {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.68rem;
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
  color: #065f46;
  border: 1px solid #86efac;
  box-shadow: none;
}

#btn-inspector-follow.follow-off {
  background: linear-gradient(180deg, #f8fafc, #e2e8f0);
  color: #334155;
  border-color: #cfd8e3;
}

#inspector-shortcuts {
  margin-top: 5px;
  font-size: 0.62rem;
  color: #64748b;
}

#legend-details summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
  padding: 4px 0;
}

#legend-details summary::-webkit-details-marker {
  display: none;
}

#legend-details summary::after {
  content: '▾';
  margin-left: 6px;
  color: #64748b;
}

#legend-details:not([open]) summary::after {
  content: '▸';
}

.legend-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.67rem;
  color: #475569;
}

.legend-swatch {
  width: 16px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  flex-shrink: 0;
}

.legend-swatch.owned {
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.55);
}

.legend-swatch.mortgaged {
  background: repeating-linear-gradient(-45deg, #edf2f7 0, #edf2f7 4px, #e2e8f0 4px, #e2e8f0 8px);
}

.legend-swatch.group {
  background: linear-gradient(180deg, #f8faff, #eef2ff);
  border-color: #a5b4fc;
}

.legend-swatch.threat-low { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35); }
.legend-swatch.threat-med { box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.5); }
.legend-swatch.threat-high { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.7); }

.legend-swatch.roll-low {
  outline: 1px dashed rgba(59, 130, 246, 0.28);
  background: rgba(191, 219, 254, 0.24);
}

.legend-swatch.roll-high {
  outline: 1px dashed rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.24);
}

#legend-quick-toggles {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.legend-toggle-pill {
  border-radius: 999px;
  border: 1px solid #d4deea;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #475569;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 3px 8px;
}

.legend-toggle-pill.is-on {
  color: #065f46;
  border-color: #86efac;
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
}

.legend-toggle-pill.is-off {
  color: #9a3412;
  border-color: #fdba74;
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
}

#log-panel h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}

.log-panel-actions {
  display: inline-flex;
  gap: 6px;
}

#log-jump-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  border-radius: 10px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
  z-index: 50;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}

#log-jump-menu.active {
  display: flex;
}

#log-jump-menu button {
  border: 1px solid rgba(248, 250, 252, 0.2);
  background: rgba(248, 250, 252, 0.12);
  color: inherit;
  padding: 4px 6px;
  font-size: 0.62rem;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}

#log-jump-menu button:hover:not(:disabled) {
  background: rgba(248, 250, 252, 0.2);
}

#log-jump-menu button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#btn-log-collapse {
  border-radius: 999px;
  border: 1px solid #d4deea;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
}

#log-panel.log-collapsed #log-filters,
#log-panel.log-collapsed #log-search-wrap,
#log-panel.log-collapsed #log-quick-queries,
#log-panel.log-collapsed #log-box {
  display: none;
}

#log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

#log-filters .log-filter {
  padding: 4px 8px;
  font-size: 0.66rem;
  border-radius: 999px;
  border: 1px solid #d4deea;
  background: linear-gradient(180deg, #ffffff, #f5f8fc);
  color: #475569;
  box-shadow: none;
}

#log-filters .log-filter.active {
  color: #0f172a;
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

#log-search-wrap {
  margin-bottom: 7px;
}

#log-search {
  width: 100%;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
  color: #334155;
  background: #f8fbff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#log-search::placeholder {
  color: #94a3b8;
}

#log-search:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.25);
  background: #ffffff;
}

#log-quick-queries {
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#log-quick-queries .quick-query {
  border-radius: 999px;
  border: 1px solid #d4deea;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
}

#log-quick-queries .quick-query.active {
  color: #1d4ed8;
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

#log-scope-wrap {
  margin-bottom: 6px;
}

#btn-log-scope-turn,
#btn-log-prev-turn,
#btn-log-next-turn {
  border-radius: 999px;
  border: 1px solid #d4deea;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
}

#btn-log-scope-turn.active {
  color: #1d4ed8;
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

#log-summary {
  margin-bottom: 4px;
  font-size: 0.66rem;
  color: #64748b;
  font-weight: 700;
}

#log-pin {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-size: 0.62rem;
  color: #475569;
  margin-bottom: 6px;
}

#log-pin .log-pin-content {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px dashed #cbd5e1;
  background: rgba(248, 250, 252, 0.9);
}

#log-pin .log-pin-content .pin-icon {
  font-size: 0.7rem;
}

#log-pin button {
  padding: 2px 8px;
  font-size: 0.6rem;
  border-radius: 999px;
  border: 1px solid #dbe3ee;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #475569;
  cursor: pointer;
}

#log-pin .log-pin-empty {
  font-size: 0.6rem;
  color: #94a3b8;
}

#log-pin .log-pin-content.tone-positive { border-color: rgba(34, 197, 94, 0.5); }
#log-pin .log-pin-content.tone-warn { border-color: rgba(234, 179, 8, 0.6); }
#log-pin .log-pin-content.tone-danger { border-color: rgba(248, 113, 113, 0.7); }
#log-pin .log-pin-content.tone-info { border-color: rgba(96, 165, 250, 0.7); }

#log-scroll-progress {
  height: 4px;
  border-radius: 999px;
  border: 1px solid #dbe3ee;
  background: #eef2f7;
  margin-bottom: 6px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 140ms ease;
  cursor: pointer;
}

#log-scroll-progress:hover {
  border-color: #93c5fd;
}

#log-scroll-progress > span {
  display: block;
  height: 100%;
  width: var(--log-scroll-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #0ea5e9);
  transition: width 140ms ease;
}

#log-scroll-progress.active {
  opacity: 1;
}

#log-scroll-progress:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

#btn-log-latest {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-bottom: 6px;
  border-radius: 999px;
  border: 1px solid #93c5fd;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 3px 9px;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.16);
}

#btn-log-latest.has-unseen {
  animation: latest-catcher-pulse 1.1s ease-in-out infinite;
}

#log-summary .summary-query {
  color: #1d4ed8;
}

#log-box {
  position: relative;
  max-height: calc(var(--log-height-base) * var(--log-height-scale));
  overflow-y: auto;
  font-size: 0.76rem;
  line-height: 1.55;
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  padding: 6px 8px;
}

#log-box::before,
#log-box::after {
  content: '';
  position: sticky;
  left: 0;
  right: 0;
  display: block;
  height: 12px;
  margin-left: -8px;
  margin-right: -8px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

#log-box::before {
  top: 0;
  margin-top: -6px;
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.92), rgba(226, 232, 240, 0));
}

#log-box::after {
  bottom: 0;
  margin-bottom: -6px;
  background: linear-gradient(0deg, rgba(226, 232, 240, 0.92), rgba(226, 232, 240, 0));
}

#log-box.log-has-overflow:not(.log-at-top)::before {
  opacity: 1;
}

#log-box.log-has-overflow:not(.log-at-bottom)::after {
  opacity: 1;
}
#log-box .log-entry {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 5px 6px;
  border-bottom: 1px solid #edf1f5;
  border-radius: 6px;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

#log-box .log-entry::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

#log-box .log-entry:nth-child(odd):not(.turn-divider) {
  background: rgba(255, 255, 255, 0.52);
}

#log-box .log-entry:hover:not(.turn-divider) {
  background: rgba(239, 246, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.2);
}

#log-box .log-time {
  color: #475569;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 0 4px;
  line-height: 1.3;
}
#log-box .log-icon {
  font-size: 0.72rem;
  line-height: 1.2;
  margin-top: 1px;
}
#log-box .log-text {
  color: #334155;
}

#log-box .log-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}

#log-box .log-text .log-hit {
  background: #fef3c7;
  color: #92400e;
  border-radius: 3px;
  padding: 0 2px;
}

#log-box .log-entry.highlight .log-text { color: #1d4ed8; font-weight: 700; }
#log-box .log-entry.tone-positive .log-icon { color: #16a34a; }
#log-box .log-entry.tone-warn .log-icon { color: #d97706; }
#log-box .log-entry.tone-danger .log-icon { color: #dc2626; }
#log-box .log-entry.tone-info .log-icon { color: #2563eb; }

#log-box .log-entry.tone-positive::before { background: rgba(22, 163, 74, 0.7); }
#log-box .log-entry.tone-warn::before { background: rgba(217, 119, 6, 0.72); }
#log-box .log-entry.tone-danger::before { background: rgba(220, 38, 38, 0.78); }
#log-box .log-entry.tone-info::before,
#log-box .log-entry.highlight::before { background: rgba(37, 99, 235, 0.72); }

#log-box .log-entry.turn-divider {
  grid-template-columns: auto auto 1fr;
  border-bottom: 1px dashed #cbd5e1;
  background: linear-gradient(180deg, rgba(219, 234, 254, 0.35), rgba(239, 246, 255, 0));
  border-radius: 6px;
}

#log-box .log-entry.turn-divider .log-text {
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: 0.2px;
}

#log-box .log-jump {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid #d4deea;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #475569;
  font-size: 0.68rem;
  line-height: 1;
  padding: 0;
}

#log-box .log-jump:hover {
  border-color: #93c5fd;
  color: #1d4ed8;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

#log-box .log-jump:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

#log-box .log-pin-btn {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid #d4deea;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #475569;
  font-size: 0.68rem;
  padding: 0;
  cursor: pointer;
}

#log-box .log-pin-btn:hover {
  border-color: #f97316;
  color: #c2410c;
}

#log-box .log-pin-btn:focus-visible {
  outline: 2px solid #fb923c;
  outline-offset: 1px;
}

#log-box .log-empty {
  text-align: center;
  color: #64748b;
  font-size: 0.72rem;
  padding: 10px 4px;
}

.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: #334155;
}

.setting-item select {
  border: 1px solid #d1dbe8;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.78rem;
  background: #fff;
  color: #1f2937;
}

.setting-range {
  align-items: flex-start;
}

.setting-range-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.setting-range-control input[type="range"] {
  width: 132px;
  accent-color: #2563eb;
}

#setting-board-zoom-value,
#setting-log-height-value {
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #1e3a8a;
  font-weight: 700;
  font-size: 0.76rem;
}

.setting-presets {
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 10px;
  padding: 8px;
  background: rgba(248, 250, 252, 0.7);
}

.setting-presets-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}

.setting-presets-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.setting-preset {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.setting-preset:hover,
.setting-preset:focus-visible {
  border-color: #93c5fd;
  background: #eff6ff;
}

.setting-preset.active {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1e3a8a;
}

.setting-toggle {
  justify-content: flex-start;
}

.setting-toggle input {
  width: 15px;
  height: 15px;
}

.settings-note {
  margin-top: 10px;
  font-size: 0.78rem;
  color: #475569;
  background: rgba(148, 163, 184, 0.18);
  border: 1px dashed rgba(148, 163, 184, 0.6);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.35;
}

.settings-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

#btn-reset-ui-settings {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 5px 10px;
}

#btn-reset-ui-settings:hover,
#btn-reset-ui-settings:focus-visible {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1e3a8a;
}

#setup-overlay,
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#setup-overlay.active,
#overlay.active { display: flex; }

#ui-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 120;
  align-items: center;
  justify-content: center;
}

#ui-modal-overlay.active {
  display: flex;
}

#shortcuts-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.58);
  z-index: 125;
  align-items: center;
  justify-content: center;
}

#shortcuts-overlay.active {
  display: flex;
}

#command-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.62);
  z-index: 126;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

#command-overlay.active {
  display: flex;
}

#command-box {
  width: min(92vw, 520px);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.82));
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.6);
  color: #f1f5f9;
}

.command-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.command-header h3 {
  font-size: 1rem;
  letter-spacing: 0.4px;
  color: #f8fafc;
}

#btn-command-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5f5;
  font-size: 0.88rem;
}

.command-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#command-search {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.7);
  color: #f8fafc;
  font-size: 0.92rem;
}

#command-search::placeholder {
  color: rgba(226, 232, 240, 0.6);
}

#command-search:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

#command-hint {
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.9);
}

.command-utilities {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

#btn-command-clear-recent {
  border: 1px solid rgba(148, 163, 184, 0.6);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 9px;
}

#btn-command-clear-recent:hover,
#btn-command-clear-recent:focus-visible {
  border-color: rgba(125, 211, 252, 0.9);
  background: rgba(8, 47, 73, 0.55);
  color: #e0f2fe;
}

#btn-command-clear-recent:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#command-list {
  margin-top: 12px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.command-section-header {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.9);
  padding: 2px 4px 0;
}

.command-item {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.6);
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.command-item .command-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.command-item .command-label {
  font-size: 0.9rem;
  font-weight: 700;
}

.command-item .command-recent-badge {
  border: 1px solid rgba(56, 189, 248, 0.65);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.16);
  white-space: nowrap;
}

.command-item.recent {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.6));
}

.command-item .command-meta {
  font-size: 0.74rem;
  color: rgba(226, 232, 240, 0.8);
}

.command-item .command-hit {
  background: rgba(125, 211, 252, 0.25);
  color: #e0f2fe;
  border-radius: 4px;
  padding: 0 2px;
}

.command-item.active {
  border-color: #38bdf8;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.15), rgba(8, 145, 178, 0.2));
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.command-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#command-empty {
  margin-top: 16px;
  font-size: 0.82rem;
  color: rgba(226, 232, 240, 0.85);
  text-align: center;
}

#command-list::-webkit-scrollbar {
  width: 6px;
}

#command-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.6);
  border-radius: 999px;
}

#shortcuts-box {
  width: min(92vw, 540px);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid #d8e3ef;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.36);
}

#shortcuts-box h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #0f172a;
}

#shortcuts-box .shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-bottom: 12px;
}

#shortcuts-box .shortcuts-grid > div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  color: #334155;
}

#shortcuts-box kbd {
  display: inline-block;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 5px;
  font-size: 0.66rem;
  font-weight: 800;
  color: #1e293b;
  background: #f8fafc;
}

#btn-close-shortcuts {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
}

#ui-modal {
  width: min(92vw, 440px);
  background: linear-gradient(180deg, #ffffff, #f7fafc);
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}

#ui-modal-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #dbe3ff;
  border-radius: 999px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

#ui-modal-title {
  font-size: 1.06rem;
  margin-bottom: 8px;
  color: #111827;
}

#ui-modal-message {
  font-size: 0.92rem;
  line-height: 1.45;
  margin-bottom: 10px;
  color: #374151;
  white-space: pre-wrap;
}

#ui-modal-input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 9px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
#ui-modal-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}

#ui-modal-hint {
  font-size: 0.74rem;
  color: #6b7280;
  margin-bottom: 10px;
}

#ui-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#ui-modal-cancel { background: #e5e7eb; color: #1f2937; }
#ui-modal-ok { background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; }

#toast-stack {
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 130;
  pointer-events: none;
  max-width: min(360px, 92vw);
}

.toast {
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.35);
  font-size: 0.78rem;
  line-height: 1.35;
  transform: translateY(-8px);
  opacity: 0;
  animation: toast-in 200ms ease forwards;
}

.toast.toast-out {
  animation: toast-out 180ms ease forwards;
}

.toast.toast-positive { border-left: 3px solid #22c55e; }
.toast.toast-warn { border-left: 3px solid #f59e0b; }
.toast.toast-danger { border-left: 3px solid #ef4444; }
.toast.toast-info { border-left: 3px solid #60a5fa; }

@keyframes toast-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes tile-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.4), 0 0 0 2px rgba(245, 158, 11, 0.18);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.6), 0 0 0 4px rgba(245, 158, 11, 0.24);
  }
}

@keyframes command-focus-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
  40% {
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.28);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
}

@keyframes die-roll-jitter {
  0% { transform: translate(-1px, -1px) rotate(-2deg); }
  25% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(1px, 1px) rotate(2deg); }
  75% { transform: translate(-1px, 1px) rotate(-1deg); }
  100% { transform: translate(-1px, -1px) rotate(-2deg); }
}

@keyframes center-event-pulse {
  from {
    transform: translateY(2px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes recommended-action-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22), 0 8px 18px rgba(37, 99, 235, 0.26);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30), 0 10px 20px rgba(37, 99, 235, 0.34);
  }
}

@keyframes active-token-pulse {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

@keyframes turn-msg-dots {
  from { width: 0; }
  to { width: 1.5em; }
}

#setup-box,
#overlay-box {
  background: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  text-align: center;
  max-width: 420px;
}

#setup-box h2,
#overlay-box h2 { font-size: 1.6rem; margin-bottom: 10px; }
#setup-box p,
#overlay-box p { margin-bottom: 16px; color: #555; }

.endgame-summary {
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

.endgame-table-wrap {
  max-height: 220px;
  overflow: auto;
}

.endgame-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.endgame-table th,
.endgame-table td {
  border: 1px solid #e5e5e5;
  padding: 4px 6px;
  text-align: left;
}

.endgame-table th {
  background: #f6f6f6;
  font-weight: 700;
}

#token-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.token-option {
  border: 2px solid #d7d7d7;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  padding: 8px 4px;
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.token-option:hover { border-color: #6aa84f; }
.token-option.selected { border-color: #2e7d32; background: #ecf8ee; }
.token-option.remembered {
  border-color: #0284c7;
  background: linear-gradient(180deg, #e0f2fe, #f0f9ff);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
}
.token-option.remembered::after {
  content: 'Last used';
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #0f172a;
  border-radius: 999px;
  background: rgba(191, 219, 254, 0.85);
  border: 1px solid rgba(59, 130, 246, 0.4);
  padding: 1px 6px;
}
.token-glyph { display: block; font-size: 1.3rem; margin-bottom: 2px; }

.setup-remembered-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #0369a1;
  background: rgba(191, 219, 254, 0.7);
  border: 1px solid rgba(3, 105, 161, 0.3);
  border-radius: 999px;
  padding: 2px 8px;
}
.setup-remembered-badge::before {
  content: '★';
  font-size: 0.65rem;
  color: #0284c7;
}

#setup-memory-controls {
  margin-bottom: 10px;
}

#setup-memory-controls .ghost {
  font-size: 0.74rem;
  color: #0f172a;
  background: rgba(248, 250, 252, 0.9);
  border: 1px dashed rgba(30, 64, 175, 0.4);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

#setup-memory-controls .ghost:hover:not([disabled]) {
  border-color: rgba(30, 64, 175, 0.7);
  color: #1d4ed8;
}

#setup-memory-controls .ghost[hidden] {
  display: none;
}

#setup-hotkey-hint {
  font-size: 0.75rem;
  color: #1d4ed8;
  margin-bottom: 10px;
  font-weight: 600;
}

#setup-selected {
  font-size: 0.82rem;
  color: #444;
  margin-bottom: 12px;
}

#btn-start-game,
#overlay-box button { background: #2e7d32; color: #fff; font-size: 1rem; padding: 10px 18px; }

#overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

#overlay-box button.secondary {
  background: #475569;
}

body.compact-mode {
  --board-corner-base: 68px;
  --board-cell-base: 46px;
}

body.compact-mode #game-container {
  gap: 14px;
}

body.compact-mode .panel-box {
  padding: 9px 10px;
}

body.compact-mode .panel-box h2 {
  font-size: 0.72rem;
  margin-bottom: 6px;
}

body.compact-mode #controls button {
  padding: 6px 9px;
  font-size: 0.73rem;
}

body.compact-mode {
  --log-height-base: 170px;
}

body.compact-mode #log-box {
  font-size: 0.72rem;
}

body.reduce-motion .tile,
body.reduce-motion .phase-step,
body.reduce-motion .toast,
body.reduce-motion .toast.toast-out,
body.reduce-motion #board-center .center-event,
body.reduce-motion #board-center .center-phase-step,
body.reduce-motion .die,
body.reduce-motion .dice-chip,
body.reduce-motion button.recommended-action,
body.reduce-motion .token.active-token,
body.reduce-motion #turn-msg::after,
body.reduce-motion #status-area .player-row.rank-updated-up,
body.reduce-motion #status-area .player-row.rank-updated-down,
body.reduce-motion #status-area .player-row.turn-shift-flash,
body.reduce-motion #status-area .player-row.flash-from-command,
body.reduce-motion #status-area .player-row.cash-updated-up .cash-delta.cash-up,
body.reduce-motion #status-area .player-row.cash-updated-down .cash-delta.cash-down,
body.reduce-motion button .click-ripple,
body.reduce-motion #btn-log-latest.has-unseen,
body.reduce-motion #actions-box.turn-cpu #actions-progress > span,
body.reduce-motion #board-peek-chip,
body.reduce-motion #actions-context.actions-event-updated .actions-event,
body.reduce-motion button .busy-dots::after {
  transition: none !important;
  animation: none !important;
}

/* property ownership chips */
.owned-chip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin: 0 1px;
}

@media (max-width: 1180px) {
  :root {
    --board-corner-base: 72px;
    --board-cell-base: 50px;
  }

  #game-container {
    flex-direction: column;
    align-items: center;
  }

  #side-panel {
    width: min(100%, 900px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #side-panel .panel-box:last-child {
    grid-column: 1 / -1;
  }

  #actions-box {
    position: static;
  }

  :root {
    --log-height-base: 180px;
  }
}

@media (max-width: 760px) {
  body {
    padding: 12px;
  }

  :root {
    --board-corner-base: 56px;
    --board-cell-base: 38px;
  }

  h1 {
    font-size: 1.4rem;
    letter-spacing: 2px;
  }

  #board-center .center-title {
    font-size: 1.22rem;
    letter-spacing: 2px;
  }

  #board-center .center-sub {
    font-size: 0.62rem;
  }

  #board-center .center-phase-rail {
    margin-top: 6px;
    width: 92%;
    gap: 4px;
  }

  #board-center .center-phase-step {
    font-size: 0.52rem;
    padding: 3px 1px;
  }

  #board-center .center-event {
    margin-top: 6px;
    font-size: 0.66rem;
    max-width: 90%;
    padding: 5px 6px;
  }

  .tile {
    font-size: 6px;
  }

  .tile.corner {
    font-size: 7px;
  }

  .tile .color-bar {
    height: 9px;
  }

  .token {
    min-width: 12px;
    height: 12px;
    font-size: 8px;
  }

  #status-area .player-row {
    padding: 6px;
  }

  #status-area .player-row .player-sub {
    gap: 6px;
    font-size: 0.64rem;
  }

  #side-panel {
    grid-template-columns: 1fr;
    width: 100%;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  #actions-box {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    top: auto;
    z-index: 60;
    background: color-mix(in srgb, var(--panel-bg) 92%, #ffffff);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.24), 0 2px 0 rgba(255,255,255,0.45) inset;
  }

  #actions-context {
    padding: 5px 6px;
    gap: 4px;
    flex-wrap: wrap;
  }

  #actions-context .actions-now,
  #actions-context .actions-next {
    font-size: 0.62rem;
  }

  #controls {
    gap: 6px;
  }

  .help-bubble {
    right: auto;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-3px);
    min-width: 150px;
    max-width: min(220px, 80vw);
  }

  .help-tip:hover .help-bubble,
  .help-tip:focus .help-bubble,
  .help-tip:focus-within .help-bubble {
    transform: translateX(-50%) translateY(0);
  }

  button {
    padding: 8px 10px;
    font-size: 0.76rem;
  }

  #turn-phase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .phase-step {
    font-size: 0.62rem;
    padding: 6px 3px;
  }

  #toast-stack {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .toast {
    font-size: 0.74rem;
  }
}
@keyframes rank-rise-glow {
  0% { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.34), 0 0 0 rgba(16, 185, 129, 0); }
  45% { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.46), 0 10px 16px rgba(16, 185, 129, 0.24); }
  100% { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0), 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes rank-drop-glow {
  0% { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.34), 0 0 0 rgba(239, 68, 68, 0); }
  45% { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.46), 0 10px 16px rgba(239, 68, 68, 0.2); }
  100% { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0), 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes cash-bump-up {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  45% { transform: scale(1.08); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.28); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes cash-bump-down {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
  45% { transform: scale(1.08); box-shadow: 0 4px 10px rgba(239, 68, 68, 0.24); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes dice-chip-in {
  0% { transform: translateY(3px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes button-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.34;
  }
  100% {
    transform: translate(-50%, -50%) scale(14);
    opacity: 0;
  }
}

@keyframes latest-catcher-pulse {
  0% { box-shadow: 0 4px 10px rgba(37, 99, 235, 0.16), 0 0 0 0 rgba(37, 99, 235, 0.35); }
  65% { box-shadow: 0 6px 14px rgba(37, 99, 235, 0.2), 0 0 0 7px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 4px 10px rgba(37, 99, 235, 0.16), 0 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes actions-progress-scan {
  0% { background-position: 0% 0%; }
  100% { background-position: 180% 0%; }
}

@keyframes actions-event-pulse {
  0% { text-shadow: 0 0 0 rgba(37, 99, 235, 0); }
  45% { text-shadow: 0 0 8px rgba(59, 130, 246, 0.34); }
  100% { text-shadow: 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes current-turn-flash {
  0% { box-shadow: inset 0 0 0 1px rgba(59,130,246,0.22), 0 0 0 rgba(37,99,235,0); }
  45% { box-shadow: inset 0 0 0 1px rgba(59,130,246,0.35), 0 10px 18px rgba(37,99,235,0.22); }
  100% { box-shadow: inset 0 0 0 1px rgba(59,130,246,0.22), 0 0 0 rgba(37,99,235,0); }
}