/* ═══════════ RESET & TOKENS ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #1b1a20;
  --bg-deep:     #141319;
  --panel:       #24232b;
  --panel-2:     #2c2b35;
  --border:      #343341;
  --text:        #e8e6f0;
  --text-dim:    #9c99ad;
  --accent:      #7c5cff;
  --accent-glow: rgba(124, 92, 255, .45);
  --green:       #3ddc84;
  --red:         #ff5a5a;
  --gold:        #ffc93c;
  /* Buildings: gold houses, silver hotels. Every surface that draws a house or
     hotel (board pips, property chips, bank supply, scoreboard) reads these, so
     the palette changes in one place. The silver sits on cream .tile faces, so
     it needs the outline below to stay visible — don't drop the drop-shadow. */
  --house-hi:  #ffe98a;
  --house-mid: #f7c948;
  --house-lo:  #a9741a;
  --house-win: rgba(60, 42, 8, .75);
  --hotel-hi:  #ffffff;
  --hotel-mid: #dbe3ee;
  --hotel-lo:  #8f9bad;
  --hotel-win: rgba(45, 55, 72, .8);
  --build-outline: drop-shadow(0 0 .6px rgba(18, 22, 32, .95));
  /* Board-derived sizing. Overridden per breakpoint so pawns, buildings and
     modals all shrink together instead of each guessing its own floor. */
  --token-size: clamp(18px, 2.3vw, 32px);
  --token-border: 3px;
  --modal-gutter: 24px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow:    0 8px 28px rgba(0,0,0,.45);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
}

html, body { height: 100%; }
body {
  background: radial-gradient(1200px 800px at 50% -10%, #262430 0%, var(--bg) 55%, var(--bg-deep) 100%);
  color: var(--text);
  font: 14px/1.5 'Poppins', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button, input, select { font-family: inherit; }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3b3a48; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4a4959; }

/* ═══════════ SHARED ═══════════ */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.panel-title { font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-dim); }
.turn-hint {
  font-size: 10px; padding: 3px 9px; border-radius: 20px;
  background: rgba(255,90,90,.14); color: #ffb4b4;
}

.btn {
  border: 0; border-radius: var(--r-sm);
  padding: 10px 18px; font-size: 13px; font-weight: 600;
  color: #fff; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, #8a6bff, var(--accent));
  box-shadow: 0 4px 14px var(--accent-glow); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-buy { background: linear-gradient(180deg, #4ee89a, var(--green)); color: #07301c;
  box-shadow: 0 4px 14px rgba(61,220,132,.35); }
.btn-buy:hover:not(:disabled) { filter: brightness(1.08); }
.btn-danger { background: linear-gradient(180deg, #ff7676, var(--red)); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost { background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background: #35333f; color: var(--text); }
.btn-block { width: 100%; }
.btn-icon { background: var(--accent); padding: 0 14px; font-size: 14px; }
.btn-sm { padding: 7px 10px; font-size: 11px; }

.btn.pulse:not(:disabled) { animation: btnPulse 1.6s ease-in-out infinite; }
@keyframes btnPulse {
  0%,100% { box-shadow: 0 4px 14px var(--accent-glow); }
  50%     { box-shadow: 0 4px 22px var(--accent), 0 0 0 4px rgba(124,92,255,.22); }
}

.input {
  width: 100%; padding: 11px 14px;
  background: var(--bg-deep); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #5e5c6e; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ═══════════ LOBBY ═══════════ */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: radial-gradient(900px 600px at 50% 0%, #2a2735, var(--bg-deep));
  overflow-y: auto; padding: 24px;
}
.lobby-card { width: 380px; padding: 30px; text-align: center; }
.logo { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.logo span, .center-logo span { color: var(--accent); }
.sub { color: var(--text-dim); font-size: 13px; margin-bottom: 22px; }

.resume-box {
  background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.4);
  border-radius: var(--r-md); padding: 12px; margin-bottom: 18px;
}
.resume-text { font-size: 12px; color: #cfc4ff; margin-bottom: 9px; }
.resume-actions { display: flex; gap: 8px; justify-content: center; }

.field-label {
  display: block; text-align: left; margin: 16px 0 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.picker { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-start; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.16); transform: scale(1.12); }

.avatar-picker .swatch {
  background: var(--panel-2); border: 2px solid var(--border);
  display: grid; place-items: center; font-size: 18px;
  width: 40px; height: 40px; border-radius: var(--r-sm);
}
.avatar-picker .swatch.sel { border-color: var(--accent); background: #33304a; }

.preview {
  display: flex; align-items: center; gap: 11px;
  margin: 20px 0; padding: 11px 14px;
  background: var(--bg-deep); border-radius: var(--r-md);
}
.token-preview {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
  background: var(--accent); box-shadow: var(--shadow-sm);
  transition: background .15s;
}
.preview-name { font-weight: 600; }

.divider { position: relative; margin: 20px 0; color: var(--text-dim); font-size: 12px; }
.divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.divider span { position: relative; background: var(--panel); padding: 0 12px; }

.join-row { display: flex; gap: 9px; }
.code-input { text-transform: uppercase; letter-spacing: .22em; text-align: center; font-weight: 600; }
.err { color: var(--red); font-size: 12px; min-height: 16px; margin-top: 12px; }

/* Reconnect overlay */
.reconnect { z-index: 200; background: rgba(10,9,14,.88); }
.reconnect-card { padding: 30px 40px; text-align: center; }
.reconnect-text { margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.spinner {
  width: 34px; height: 34px; margin: 0 auto;
  border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════ APP LAYOUT ═══════════ */
.app {
  height: 100vh; padding: 16px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 330px;
  gap: 16px;
}
.col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.col-center { align-items: center; justify-content: center; }
.col-right { overflow-y: auto; }

/* ═══════════ BOARD ═══════════ */
.board-wrap {
  flex: 1; width: 100%;
  display: grid; place-items: center;
  min-height: 0;
}
.board {
  width: min(100%, calc(100vh - 200px));
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: 1.3fr repeat(9, 1fr) 1.3fr;
  grid-template-rows:    1.3fr repeat(9, 1fr) 1.3fr;
  gap: 2px;
  padding: 2px;
  background: #0f1f18;
  border: 3px solid #0a1712;
  border-radius: var(--r-md);
  box-shadow: var(--shadow), inset 0 0 60px rgba(0,0,0,.5);
}

.board-center {
  position: relative;
  grid-column: 2 / 11;
  grid-row:    2 / 11;
  background: linear-gradient(160deg, #1e1d25, #141319);
  border-radius: var(--r-sm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  padding: 10px;
}
.center-logo {
  font-size: clamp(16px, 2.2vw, 30px); font-weight: 700;
  letter-spacing: -.02em; opacity: .9;
  transform: rotate(-8deg);
}
.turn-banner {
  font-size: 12px; font-weight: 500; color: var(--text-dim);
  padding: 6px 16px; background: rgba(0,0,0,.3); border-radius: 20px;
  text-align: center;
}
.turn-banner.mine { color: var(--accent); background: rgba(124,92,255,.15); }

.pot-display {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 20px; border-radius: var(--r-md);
  background: rgba(255,201,60,.09);
  border: 1px solid rgba(255,201,60,.3);
}
/* ── Bank building stock ── */
.bank-supply {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px; border-radius: 20px;
  background: rgba(0,0,0,.28); border: 1px solid var(--border);
}
.bank-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: clamp(11px, 1.15vw, 14px); font-weight: 700;
  color: var(--text); transition: color .2s;
}
.bank-ico { font-size: clamp(11px, 1.2vw, 15px); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.bank-n { min-width: 1.4em; text-align: left; font-variant-numeric: tabular-nums; }
.bank-div { width: 1px; height: 14px; background: var(--border); }
/* Running low — warn before the shortage bites. */
.bank-item.low  { color: var(--gold); }
.bank-item.out  { color: var(--red); }
.bank-item.out .bank-ico { filter: grayscale(1) drop-shadow(0 1px 1px rgba(0,0,0,.5)); opacity: .65; }
.bank-item.bump { animation: bankBump .45s ease-out; }
@keyframes bankBump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.28); } }

.pot-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.pot-amount { font-size: clamp(16px, 2vw, 26px); font-weight: 700; color: var(--gold); }
.pot-amount.bump { animation: potBump .4s ease-out; }
@keyframes potBump {
  0% { transform: scale(1); } 45% { transform: scale(1.3); color: #fff; } 100% { transform: scale(1); }
}

/* ── Tiles ── */
.tile {
  position: relative;
  background: #f4f1e6;
  color: #14130f;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  cursor: pointer;
  min-width: 0; min-height: 0;
  transition: filter .1s, box-shadow .1s;
}
.tile:hover { filter: brightness(1.07); box-shadow: inset 0 0 0 2px var(--accent); }

.tile.bottom { flex-direction: column; }
.tile.top    { flex-direction: column-reverse; }
.tile.left   { flex-direction: row-reverse; }
.tile.right  { flex-direction: row; }
.tile.corner { flex-direction: column; align-items: center; justify-content: center; }

.tile-band { flex: 0 0 14%; }
.tile.bottom .tile-band, .tile.top .tile-band { min-height: 7px; width: 100%; }
.tile.left .tile-band, .tile.right .tile-band { min-width: 7px; height: 100%; flex-basis: 14%; }

.tile-body {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2px; gap: 1px; text-align: center; overflow: hidden;
}
.tile-name {
  font-size: clamp(5px, .58vw, 9px);
  font-weight: 600; line-height: 1.06;
  overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.tile-price { font-size: clamp(5px, .5vw, 8px); font-weight: 500; opacity: .68; }
.tile-icon  { font-size: clamp(10px, 1.3vw, 18px); line-height: 1; }
.corner .tile-name { font-size: clamp(6px, .66vw, 10px); margin-top: 3px; }
.corner .tile-icon { font-size: clamp(14px, 1.9vw, 26px); }
.tile.left .tile-name, .tile.right .tile-name { -webkit-line-clamp: 4; line-clamp: 4; }
.tile.left .tile-icon, .tile.right .tile-icon { font-size: clamp(9px, 1.1vw, 15px); }

.tile-pot {
  font-size: clamp(6px, .8vw, 12px); font-weight: 700;
  color: #9a7400; margin-top: 2px;
}

.tile.pending-buy {
  box-shadow: inset 0 0 0 3px var(--gold);
  animation: pendingGlow 1.4s ease-in-out infinite;
}
@keyframes pendingGlow {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}

/* Ownership bars */
.owner-bar { position: absolute; z-index: 2; }
.tile.bottom .owner-bar { inset: auto 0 0 0; height: 11px; }
.tile.top    .owner-bar { inset: 0 0 auto 0; height: 11px; }
.tile.left   .owner-bar { inset: 0 auto 0 0; width: 11px; }
.tile.right  .owner-bar { inset: 0 0 0 auto; width: 11px; }
.tile.corner .owner-bar { display: none !important; }

.tile.mortgaged::after {
  /* Generated content can't read JS, so applyLocale() writes the translated
     label into this custom property. The fallback only shows if that never ran. */
  content: var(--label-mortgaged, 'MORTGAGED');
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: rgba(20,19,25,.72); color: #ffb4b4;
  font-size: clamp(5px, .55vw, 8px); font-weight: 700; letter-spacing: .05em;
  pointer-events: none;
}

/* ── Houses & hotels ───────────────────────────────────────────────
   Drawn as clip-path pentagons: the pitched roof is part of the element's
   own box, so it adds no horizontal overhang. That matters because .tile
   has overflow:hidden and four houses have to fit a ~34px tile on a small
   screen (4x7px + 3x2px gap = 34px, exactly). */
.houses {
  position: absolute; z-index: 3;
  display: flex; gap: 2px; align-items: center; justify-content: center;
  pointer-events: none;
}
.tile.bottom .houses { top: 2px; left: 0; right: 0; }
.tile.top    .houses { bottom: 2px; left: 0; right: 0; }
.tile.left   .houses { right: 2px; top: 0; bottom: 0; flex-direction: column; gap: 1px; }
.tile.right  .houses { left: 2px; top: 0; bottom: 0; flex-direction: column; gap: 1px; }

.house-pip {
  position: relative;
  width: 7px; height: 9px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--house-hi) 0%, var(--house-mid) 45%, var(--house-lo) 100%);
  clip-path: polygon(50% 0%, 100% 42%, 100% 100%, 0% 100%, 0% 42%);
  /* drop-shadow follows the clipped alpha, so a 0-offset dark shadow acts as an
     outline the clip-path would otherwise make impossible with border. */
  filter: var(--build-outline) drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
  animation: buildPop .28s cubic-bezier(.34,1.56,.64,1);
}
/* Window — clipped to the house silhouette by the parent's clip-path. Dark,
   because the gold facade is too light for the old white window to read. */
.house-pip::after {
  content: ''; position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 1.5px; width: 2.5px; height: 2.5px;
  background: var(--house-win);
}

.house-pip.hotel {
  width: 16px; height: 11px;
  background: linear-gradient(180deg, var(--hotel-hi) 0%, var(--hotel-mid) 45%, var(--hotel-lo) 100%);
  clip-path: polygon(50% 0%, 100% 32%, 100% 100%, 0% 100%, 0% 32%);
}
/* Row of windows across the hotel facade. */
.house-pip.hotel::after {
  left: 2px; right: 2px; bottom: 2px;
  width: auto; height: 4px; transform: none;
  background: repeating-linear-gradient(90deg,
    var(--hotel-win) 0 2px, transparent 2px 4px);
}

/* Inline house/hotel glyphs for the bank supply and the scoreboard, so those
   read the same palette as the board instead of emoji we can't recolor. */
.ico-house, .ico-hotel {
  display: inline-block; vertical-align: -1px;
  filter: var(--build-outline) drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
.ico-house {
  width: 9px; height: 11px;
  background: linear-gradient(180deg, var(--house-hi) 0%, var(--house-mid) 45%, var(--house-lo) 100%);
  clip-path: polygon(50% 0%, 100% 42%, 100% 100%, 0% 100%, 0% 42%);
}
.ico-hotel {
  width: 15px; height: 11px;
  background: linear-gradient(180deg, var(--hotel-hi) 0%, var(--hotel-mid) 45%, var(--hotel-lo) 100%);
  clip-path: polygon(50% 0%, 100% 32%, 100% 100%, 0% 100%, 0% 32%);
}
/* On phones the board drops to ~92vw, which can put a tile near 28px wide —
   four full-size houses (34px) would overflow and get clipped. Scale down. */
@media (max-width: 1000px) {
  .houses { gap: 1px; }
  .house-pip { width: 5px; height: 7px; }          /* 4x5 + 3x1 = 23px */
  .house-pip::after { bottom: 1px; width: 2px; height: 2px; }
  .house-pip.hotel { width: 12px; height: 9px; }
  .house-pip.hotel::after { left: 1.5px; right: 1.5px; bottom: 1.5px; height: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .house-pip { animation: none; }
}
@keyframes buildPop {
  from { transform: translateY(-3px) scale(.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Tokens */
.tokens {
  position: absolute; inset: 0;
  display: flex; flex-wrap: wrap; gap: 2px;
  align-items: center; justify-content: center;
  pointer-events: none; z-index: 5;
}
/* Token size tracks the board, never a fixed pixel floor. The board is 11 tiles
   across, so --tile-w is the real budget; a token must stay well inside it or
   two pawns on one tile overflow. The old `clamp(20px, …)` floor was larger
   than a whole tile on a phone, which is what made pawns look enormous. */
.token {
  width: var(--token-size); height: var(--token-size);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: calc(var(--token-size) * .58);
  border: var(--token-border) solid rgba(255,255,255,.95);
  box-shadow: 0 3px 9px rgba(0,0,0,.6);
  animation: tokenPop .22s ease-out;
  position: relative;
}
.token.is-me { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 3px 9px rgba(0,0,0,.6); }
.token.jailed { border-color: #ff8a8a; filter: grayscale(.35); }
.token.offline { opacity: .45; border-style: dashed; }
@keyframes tokenPop {
  from { transform: scale(.3); opacity: 0; }
  70%  { transform: scale(1.18); }
  to   { transform: scale(1); opacity: 1; }
}

/* Dice */
.dice-area { display: flex; align-items: center; gap: 14px; }
.dice-sum {
  min-width: 34px; padding: 4px 12px;
  background: rgba(124,92,255,.18); border: 1px solid var(--accent);
  border-radius: 20px; font-size: clamp(16px, 2vw, 24px); font-weight: 800;
  color: #cfc4ff; display: grid; place-items: center;
  opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s;
}
.dice-sum.show { opacity: 1; transform: scale(1); }
.dice-sum.doubles { background: rgba(255,201,60,.2); border-color: var(--gold); color: var(--gold); }
.die {
  width: clamp(38px, 4.6vw, 58px); height: clamp(38px, 4.6vw, 58px);
  background: linear-gradient(160deg, #fff, #dcdae6);
  color: #17161c; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: clamp(20px, 2.6vw, 32px); font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 -3px 0 rgba(0,0,0,.13);
}
.die.rolling { animation: tumble .42s linear infinite; }
@keyframes tumble {
  0%   { transform: rotate(0deg)   scale(1);    }
  25%  { transform: rotate(90deg)  scale(1.14); }
  50%  { transform: rotate(180deg) scale(.94);  }
  75%  { transform: rotate(270deg) scale(1.14); }
  100% { transform: rotate(360deg) scale(1);    }
}
.die.settled { animation: settle .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes settle {
  0%   { transform: scale(1.3) rotate(12deg); }
  100% { transform: scale(1)   rotate(0deg);  }
}

/* ═══════════ CHAT ═══════════ */
.chat-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.badge {
  background: var(--accent); color: #fff;
  padding: 3px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  cursor: pointer; user-select: none;
}
.badge:active { transform: scale(.94); }

.chat-log { flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.msg { animation: fadeUp .18s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.msg-av { width: 19px; height: 19px; border-radius: 50%; display: grid;
  place-items: center; font-size: 10px; flex: 0 0 auto; }
.msg-name { font-size: 12px; font-weight: 600; }
.msg-text { font-size: 13px; color: #cfccdd; padding-left: 25px; word-break: break-word; }
.msg-sys { font-size: 12px; color: var(--text-dim); font-style: italic; text-align: center; }

.chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-input { padding: 9px 12px; font-size: 13px; }

.log-panel { height: 172px; display: flex; flex-direction: column; }
.event-log { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex;
  flex-direction: column; gap: 5px; }
.event-log div { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.event-log div:last-child { color: var(--text); }

/* ═══════════ PLAYERS ═══════════ */
.player-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.prow {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.prow.active { border-color: var(--accent); background: #302c46;
  box-shadow: 0 0 0 3px var(--accent-glow); }
.prow.dead { opacity: .4; filter: grayscale(1); }
.prow.offline { opacity: .55; }
.p-av {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  border: 2px solid rgba(255,255,255,.85); flex: 0 0 auto;
}
.p-info { flex: 1; min-width: 0; }
.p-name { font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.p-meta { font-size: 11px; color: var(--text-dim); }
.p-cash { font-size: 14px; font-weight: 700; color: var(--green); white-space: nowrap; }
.p-cash.neg { color: var(--red); }

/* ═══════════ PROPERTY CHIPS ═══════════ */
.my-props-panel { max-height: 190px; display: flex; flex-direction: column; }
.my-props { overflow-y: auto; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.prop-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 20px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11px; font-weight: 500; user-select: none;
  transition: border-color .12s, transform .12s, background .12s;
}
.prop-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.prop-chip.mort { opacity: .5; text-decoration: line-through; }
.prop-chip.sel {
  background: rgba(124,92,255,.22); border-color: var(--accent);
  color: #fff; box-shadow: 0 0 0 2px var(--accent-glow);
}
.prop-chip.locked { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.prop-chip.static { cursor: default; }
.prop-chip.static:hover { transform: none; border-color: var(--border); }
.chip-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.chip-build {
  display: inline-flex; align-items: center; gap: 1px;
  margin-left: 3px; padding: 1px 4px; border-radius: 8px;
  font-size: 9px; font-weight: 700; line-height: 1.4;
  background: rgba(247,201,72,.18); border: 1px solid rgba(247,201,72,.45);
  color: #ffde8a;
}
.chip-build.hotel {
  background: rgba(219,227,238,.16); border-color: rgba(219,227,238,.45); color: #eef2f8;
}
.my-props .empty, .chip-empty { font-size: 12px; color: var(--text-dim); padding: 4px; }

/* ═══════════ TRADE SIDEBAR ═══════════ */
.trade-panel { display: flex; flex-direction: column; min-height: 0; }
.trade-locked {
  padding: 16px; font-size: 12px; color: var(--text-dim); text-align: center;
}
.trade-inbox { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.trade-inbox:not(:empty) { padding: 12px; }

.trade-notice {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(255,201,60,.14), rgba(255,201,60,.05));
  border: 1px solid rgba(255,201,60,.4);
  border-radius: var(--r-md); padding: 10px 12px;
  animation: fadeUp .2s ease-out;
}
.notice-av {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 15px;
  border: 2px solid rgba(255,255,255,.85);
}
.notice-info { flex: 1; min-width: 0; }
.notice-title { font-size: 12px; font-weight: 600; }
.notice-sub { font-size: 11px; color: var(--text-dim); }
.notice-btn {
  background: var(--gold); color: #3a2a00; border: 0;
  border-radius: var(--r-sm); padding: 7px 11px;
  font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: filter .12s, transform .12s;
}
.notice-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

.trade-builder { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tb-label {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.tb-partners { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-partner {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11px; font-weight: 500; transition: all .12s;
}
.tb-partner:hover { border-color: var(--accent); }
.tb-partner.sel { background: rgba(124,92,255,.22); border-color: var(--accent); color: #fff; }
.tb-partner.locked { opacity: .4; cursor: not-allowed; }
.tb-partner .p-dot { width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; }

.tb-section {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px;
}
.tb-section.give { border-left: 3px solid var(--red); }
.tb-section.get  { border-left: 3px solid var(--green); }
.tb-cash-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 9px; }
.tb-cash-row span { font-size: 12px; color: var(--text-dim); }
.tb-cash-row input {
  flex: 1; padding: 7px 10px; font-size: 12px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); outline: none;
}
.tb-cash-row input:focus { border-color: var(--accent); }
.tb-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 108px; overflow-y: auto; }
.tb-actions { display: flex; gap: 8px; }
.tb-actions .btn { flex: 1; }
.tb-counter-flag {
  font-size: 11px; color: var(--gold); text-align: center;
  padding: 6px; background: rgba(255,201,60,.1);
  border: 1px solid rgba(255,201,60,.3); border-radius: var(--r-sm);
}
.tb-note { font-size: 11px; color: var(--text-dim); text-align: center; }

/* ═══════════ MODALS ═══════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10,9,14,.72);
  display: grid; place-items: center; padding: 20px;
  animation: fadeIn .14s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Widths must never exceed the viewport minus the backdrop gutter, or the
   header (and with it the close button) is pushed off-screen with no way back.
   dvh rather than vh so mobile browser chrome does not clip the bottom. */
.modal {
  width: min(360px, calc(100vw - var(--modal-gutter)));
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto;
  animation: popIn .18s cubic-bezier(.34,1.4,.64,1);
}
.modal-wide { width: min(620px, calc(100vw - var(--modal-gutter))); }
@keyframes popIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Sticky so the close button stays reachable while a long property scrolls. */
.prop-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 8px solid transparent;
  position: sticky; top: 0; z-index: 2;
  background: var(--panel);
}
.prop-name { font-size: 17px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.modal-close {
  background: none; border: 0; color: var(--text-dim);
  font-size: 17px; cursor: pointer;
  flex: 0 0 auto;
  /* 44px is the minimum comfortable touch target; the old 17px glyph with 4px
     padding was roughly 25px and easy to miss. */
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  margin: -10px -6px -10px 0;
}
.modal-close:hover { color: var(--text); }
.modal-close:active { background: rgba(255,255,255,.08); }

.prop-body { padding: 14px 18px; }
.rent-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: 13px;
  border-bottom: 1px solid rgba(52,51,65,.5);
}
.rent-row:last-child { border-bottom: 0; }
.rent-row span:first-child { color: var(--text-dim); }
.rent-row span:last-child { font-weight: 600; }
.rent-row.current { background: rgba(124,92,255,.14); margin: 0 -8px; padding: 6px 8px;
  border-radius: var(--r-sm); }
.rent-row.current span:first-child { color: var(--text); }

.prop-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.meta-pill {
  font-size: 11px; padding: 4px 10px; border-radius: 20px;
  background: var(--panel-2); color: var(--text-dim);
}
.meta-pill.owned { background: rgba(61,220,132,.15); color: var(--green); }
.meta-pill.mort  { background: rgba(255,90,90,.15); color: var(--red); }

.prop-actions {
  padding: 14px 18px; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.prop-actions .note {
  grid-column: 1 / -1; font-size: 11px; color: var(--text-dim); text-align: center;
}

/* Trade modal */
.trade-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.tm-title { font-size: 18px; font-weight: 700; }
.tm-from { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.tm-columns {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 14px; padding: 20px 22px; align-items: stretch;
}
.tm-col {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px; min-height: 150px;
}
.tm-give { border-top: 3px solid var(--red); }
.tm-get  { border-top: 3px solid var(--green); }
.tm-col-head {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px;
}
.tm-cash { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.tm-give .tm-cash { color: var(--red); }
.tm-get  .tm-cash { color: var(--green); }
.tm-cash.zero { color: var(--text-dim); opacity: .5; }
.tm-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-arrow { display: grid; place-items: center; font-size: 26px; color: var(--text-dim); }

.tm-balance {
  margin: 0 22px 16px; padding: 10px 14px;
  background: var(--panel-2); border-radius: var(--r-md);
  font-size: 12px; color: var(--text-dim); text-align: center;
}
.tm-actions {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--border);
}
/* Spectator / sender views show fewer buttons — let them span the row. */
.tm-actions.one-action { grid-template-columns: 1fr; }

.tm-spectate {
  margin: 0 22px 16px; padding: 9px 14px;
  background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.35);
  border-radius: var(--r-md); color: #cfc4ff;
  font-size: 12px; text-align: center;
}

/* Card popup */
.card-modal {
  width: 330px; padding: 26px; text-align: center;
  background: linear-gradient(160deg, #2f2c3d, #201f28);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  animation: cardIn .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes cardIn {
  from { transform: scale(.7) rotate(-6deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.card-deck {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: var(--accent); margin-bottom: 14px;
}
.card-deck.chest { color: var(--gold); }
.card-text { font-size: 15px; line-height: 1.5; margin-bottom: 22px; }

/* ═══════════ ACTION BAR / JAIL / HINTS ═══════════ */
.action-bar {
  display: flex; gap: 10px; justify-content: center;
  padding: 12px 16px; width: 100%; flex-wrap: wrap;
}

.jail-panel {
  width: 100%; padding: 14px 18px;
  border-color: rgba(255,90,90,.45);
  background: linear-gradient(160deg, #2e2229, var(--panel));
  animation: fadeUp .2s ease-out;
}
.jail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.jail-icon { font-size: 26px; }
.jail-title { font-size: 14px; font-weight: 700; }
.jail-sub { font-size: 11px; color: var(--text-dim); }
.jail-warn {
  font-size: 11px; color: #ffd08a; text-align: center;
  background: rgba(255,201,60,.1); border: 1px solid rgba(255,201,60,.3);
  border-radius: var(--r-sm); padding: 7px; margin-bottom: 10px;
}
.jail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.hint-bar {
  width: 100%; margin-top: -6px;
  background: rgba(124,92,255,.1); border: 1px solid rgba(124,92,255,.35);
  color: #cfc4ff; border-radius: var(--r-md);
  padding: 9px 16px; font-size: 12px; font-weight: 500; text-align: center;
  animation: fadeUp .2s ease-out;
}
.debt-bar {
  width: 100%; margin-top: -6px;
  background: rgba(255,90,90,.12); border: 1px solid rgba(255,90,90,.4);
  color: #ffb4b4; border-radius: var(--r-md);
  padding: 10px 16px; font-size: 12px; font-weight: 500; text-align: center;
  animation: fadeUp .2s ease-out;
}

/* ═══════════ TOOLTIP + TOASTS ═══════════ */
.tooltip {
  position: fixed; z-index: 100; pointer-events: none;
  background: #141319; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 13px;
  font-size: 12px; box-shadow: var(--shadow); max-width: 210px;
}
.tt-name { font-weight: 600; margin-bottom: 3px; }
.tt-row { color: var(--text-dim); font-size: 11px; }

.toasts {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  padding: 10px 18px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 500;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: fadeUp .18s ease-out;
}
.toast.error { border-color: rgba(255,90,90,.5); color: #ffb4b4; }
.toast.info  { border-color: rgba(124,92,255,.5); color: #cfc4ff; }
.trade-toast {
  border-color: rgba(255,201,60,.5); color: var(--gold);
  max-width: 420px; text-align: center;
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1280px) {
  .app { grid-template-columns: 250px minmax(0,1fr) 290px; gap: 12px; padding: 12px; }
  .modal-wide { width: 92vw; }
}
@media (max-width: 1000px) {
  body { overflow-y: auto; }
  .app { height: auto; grid-template-columns: 1fr; }
  .col-left { order: 3; } .col-center { order: 1; } .col-right { order: 2; }
  .board { width: min(100%, 92vw); }
  .chat-panel { height: 300px; }
  .tm-columns { grid-template-columns: 1fr; }
  .tm-arrow { transform: rotate(90deg); }
}

/* ═══════════ MOBILE ═══════════
   At this width the board is 92vw across 11 tiles, so one tile is ~8.4vw —
   about 33px on a 390px phone. Everything drawn inside a tile has to fit that
   budget, and every fixed-width panel has to become viewport-relative. */
@media (max-width: 620px) {
  :root {
    --token-size: clamp(11px, 4.2vw, 20px);
    --token-border: 2px;
    --modal-gutter: 16px;
  }
  .app { padding: 8px; gap: 10px; }
  .board { width: min(100%, 96vw); }
  .modal-backdrop { padding: 8px; }

  /* Tokens: tighter packing so 4+ pawns on one tile still fit. */
  .tokens { gap: 1px; }
  .token { box-shadow: 0 2px 5px rgba(0,0,0,.6); }
  .token.is-me { box-shadow: 0 0 0 1.5px var(--gold), 0 2px 5px rgba(0,0,0,.6); }

  /* Property modal: full-width sheet, body padding trimmed. */
  .prop-header { padding: 12px 12px; border-top-width: 6px; }
  .prop-name { font-size: 15px; }
  .prop-body { padding: 10px 12px; }
  .rent-row { font-size: 12px; padding: 5px 0; }
  .prop-actions { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* Trade modal: single column already at 1000px; shrink the type and make
     both action buttons full-width thumb targets. */
  .tm-title { font-size: 15px; }
  .tm-cash { font-size: 18px; margin-bottom: 8px; }
  .tm-col { padding: 10px; }
  .tm-arrow { font-size: 20px; }
  .tm-actions { grid-template-columns: 1fr; gap: 8px; }
  .tm-actions .btn { min-height: 46px; }
  .tm-balance { font-size: 12px; }

  /* Trade sidebar + property chips. */
  .my-props-panel { max-height: 150px; }
  .my-props { gap: 5px; padding: 8px; }
  .chat-panel { height: 220px; }

  /* Anything the thumb must hit gets a real target. */
  .action-bar .btn { min-height: 46px; }
  .btn { min-height: 42px; }
  .btn-refresh { width: 34px; height: 34px; }

  .over-card { width: 94vw; padding: 20px 14px 16px; }
  .quit-modal, .settings-modal { width: min(96vw, 420px); }
}

/* Very narrow phones (iPhone SE and similar). */
@media (max-width: 380px) {
  :root { --token-size: clamp(10px, 4vw, 16px); }
  .tile-name { font-size: 5.5px; }
  .prop-actions { grid-template-columns: 1fr; }
  .over-stats { grid-template-columns: 1fr; }
}
/* ═══════════ AFK / VOTEKICK ═══════════ */
.afk-bar {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; padding: 8px 12px;
  border-radius: var(--r-md);
  background: rgba(255,201,60,.10); border: 1px solid rgba(255,201,60,.38);
  font-size: 12px; color: var(--gold);
}
.afk-bar.urgent {
  background: rgba(255,90,90,.12); border-color: rgba(255,90,90,.5); color: #ffb4b4;
}
.afk-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.afk-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afk-dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  flex: 0 0 auto; animation: afkPulse 1.1s ease-in-out infinite;
}
@keyframes afkPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .afk-dot { animation: none; } }
.afk-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.btn-sm { padding: 5px 12px; font-size: 12px; min-height: 32px; }
@media (max-width: 620px) {
  .afk-bar { font-size: 11px; padding: 7px 9px; flex-wrap: wrap; }
  .afk-actions { width: 100%; }
  .afk-actions .btn { width: 100%; min-height: 42px; }
}

/* ═══════════ SURRENDER ═══════════ */
.btn-quit {
  background: transparent; color: #8d8a9c;
  border: 1px solid var(--border);
}
.btn-quit:hover:not(:disabled) {
  background: rgba(255,90,90,.14); border-color: rgba(255,90,90,.5); color: #ffb4b4;
}
.quit-modal { width: 400px; }
.quit-text { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.quit-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.quit-list li {
  font-size: 12px; color: var(--text); padding-left: 18px; position: relative; line-height: 1.4;
}
.quit-list li::before {
  content: '›'; position: absolute; left: 4px; color: var(--red); font-weight: 700;
}
.quit-debt {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(255,90,90,.12); border: 1px solid rgba(255,90,90,.4);
  border-radius: var(--r-sm); font-size: 12px; color: #ffb4b4;
}

/* ═══════════ BOTS ═══════════ */
.bot-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  background: rgba(124,92,255,.22); color: #cfc4ff;
  padding: 1px 6px; border-radius: 10px; margin-left: 5px;
}
.prow.thinking { animation: botThink 1.4s ease-in-out infinite; }
@keyframes botThink {
  0%,100% { box-shadow: 0 0 0 3px var(--accent-glow); }
  50%     { box-shadow: 0 0 0 6px rgba(124,92,255,.18); }
}
.prow .btn-kick {
  background: none; border: 0; color: var(--text-dim);
  font-size: 13px; cursor: pointer; padding: 0 3px;
}
.prow .btn-kick:hover { color: var(--red); }

.token.bot { border-style: solid; border-color: #b9a9ff; }

/* Winner banner */
.win-bar {
  width: 100%;
  background: linear-gradient(135deg, rgba(255,201,60,.2), rgba(255,201,60,.06));
  border: 1px solid rgba(255,201,60,.5); color: var(--gold);
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: 14px; font-weight: 700; text-align: center;
  animation: fadeUp .2s ease-out;
}
.out-bar {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: var(--r-md);
  padding: 10px 16px; font-size: 12px; text-align: center;
}

/* ═══════════ GAME OVER ═══════════ */
.over-overlay {
  z-index: 150;
  background: radial-gradient(900px 700px at 50% 10%, rgba(124,92,255,.18), rgba(10,9,14,.94) 60%);
  backdrop-filter: blur(4px);
}
.over-card {
  position: relative;
  width: 440px; max-height: 92vh; overflow-y: auto;
  padding: 34px 30px 26px;
  background: linear-gradient(165deg, #2b2838, #1a1922);
  border: 1px solid rgba(255,201,60,.35);
  border-radius: 22px;
  box-shadow: 0 20px 70px rgba(0,0,0,.65), 0 0 90px rgba(255,201,60,.09);
  text-align: center;
  animation: overIn .5s cubic-bezier(.2,1.1,.4,1);
}
@keyframes overIn {
  from { transform: translateY(28px) scale(.92); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.over-crown {
  font-size: 52px; line-height: 1;
  animation: crownDrop .7s cubic-bezier(.3,1.5,.5,1) both;
  filter: drop-shadow(0 6px 18px rgba(255,201,60,.5));
}
@keyframes crownDrop {
  0%   { transform: translateY(-40px) rotate(-25deg); opacity: 0; }
  60%  { transform: translateY(4px) rotate(6deg); opacity: 1; }
  100% { transform: none; }
}
.over-label {
  margin-top: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim);
}

.over-winner { margin: 20px 0 24px; }
.over-avatar {
  width: 76px; height: 76px; margin: 0 auto 12px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 38px; border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(255,201,60,.12), 0 8px 24px rgba(0,0,0,.5);
  animation: winPulse 2.4s ease-in-out infinite;
}
@keyframes winPulse {
  0%,100% { box-shadow: 0 0 0 6px rgba(255,201,60,.12), 0 8px 24px rgba(0,0,0,.5); }
  50%     { box-shadow: 0 0 0 12px rgba(255,201,60,.05), 0 8px 24px rgba(0,0,0,.5); }
}
.over-name {
  font-size: 26px; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(95deg, #fff, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.over-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.over-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.stat-tile {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 10px;
  animation: statIn .4s ease-out both;
}
.stat-tile:nth-child(1) { animation-delay: .18s; }
.stat-tile:nth-child(2) { animation-delay: .26s; }
.stat-tile:nth-child(3) { animation-delay: .34s; }
.stat-tile:nth-child(4) { animation-delay: .42s; }
@keyframes statIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.stat-val {
  font-size: 21px; font-weight: 700; color: var(--gold);
  line-height: 1.15;
}
.stat-key {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 3px;
}

.over-board { text-align: left; margin-bottom: 18px; }
.over-board summary {
  cursor: pointer; font-size: 12px; color: var(--text-dim);
  padding: 9px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.03); list-style: none;
  transition: color .12s;
}
.over-board summary::-webkit-details-marker { display: none; }
.over-board summary::after { content: ' ▾'; }
.over-board[open] summary::after { content: ' ▴'; }
.over-board summary:hover { color: var(--text); }

.over-scores { display: flex; flex-direction: column; gap: 6px; padding: 10px 2px 0; }
.score-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--panel-2); font-size: 12px;
}
.score-row.is-winner {
  background: rgba(255,201,60,.12);
  border: 1px solid rgba(255,201,60,.35);
}
.score-row.is-out { opacity: .45; }
.score-av {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px;
  border: 2px solid rgba(255,255,255,.75);
}
.score-info { flex: 1; min-width: 0; }
.score-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-meta { font-size: 10px; color: var(--text-dim); }
.score-worth { font-weight: 700; color: var(--green); white-space: nowrap; }
.score-row.is-out .score-worth { color: var(--text-dim); }

.over-btn { padding: 13px; font-size: 14px; }

/* Confetti */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 22px; }
.confetti i {
  position: absolute; top: -12px;
  width: 7px; height: 12px; opacity: .9;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(560px) rotate(760deg); opacity: 0; }
}

@media (max-width: 520px) {
  .over-card { width: 92vw; padding: 26px 20px 20px; }
  .over-stats { grid-template-columns: 1fr 1fr; }
}

/* ═══════════ LOBBY: PUBLIC BROWSER + CREATE ═══════════ */
.create-row { display: flex; gap: 8px; }
.create-row .btn { flex: 1; }

.public-section { margin-top: 20px; text-align: left; }
.public-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.btn-refresh {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  width: 26px; height: 26px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px;
  transition: transform .3s, color .12s;
}
.btn-refresh:hover { color: var(--accent); }
.btn-refresh:active { transform: rotate(360deg); }
.public-games { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.pg-empty { font-size: 12px; color: var(--text-dim); text-align: center; padding: 14px; }
.pg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .12s, transform .12s;
}
.pg-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.pg-code { font-weight: 700; letter-spacing: .12em; color: var(--accent); font-size: 13px; }
.pg-info { flex: 1; min-width: 0; }
.pg-host { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-meta { font-size: 11px; color: var(--text-dim); }
.pg-count {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: rgba(61,220,132,.15); color: var(--green);
}
.pg-count.full { background: rgba(255,90,90,.15); color: var(--red); }

.bot-level-badge {
  font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 8px; margin-left: 4px;
}
.bot-level-badge.easy   { background: rgba(61,220,132,.2); color: var(--green); }
.bot-level-badge.normal { background: rgba(124,92,255,.2); color: #cfc4ff; }
.bot-level-badge.hard   { background: rgba(255,90,90,.2); color: #ffb4b4; }

/* ═══════════ MONEY ANIMATIONS (Epic 4) ═══════════ */
.money-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: visible; }
.money-float {
  position: absolute;
  font-size: clamp(14px, 1.6vw, 22px); font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  white-space: nowrap;
  animation: moneyRise 1.6s cubic-bezier(.25,.9,.3,1) forwards;
}
.money-float.pos { color: #4ee89a; }
.money-float.neg { color: #ff7676; }
.money-float.big { font-size: clamp(20px, 2.4vw, 34px); }
@keyframes moneyRise {
  0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  18%  { transform: translate(-50%, -8px) scale(1.12); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(-50%, -70px) scale(1); opacity: 0; }
}

/* Money flash on the player row's cash figure */
.p-cash.flash-pos { animation: cashPop .5s ease-out; color: #4ee89a; }
.p-cash.flash-neg { animation: cashPop .5s ease-out; color: #ff7676; }
@keyframes cashPop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.22); } }

/* ═══════════ WAIT-FOR-HOST LABEL ═══════════ */
.wait-host {
  font-size: 12px; color: var(--text-dim); font-style: italic;
  padding: 8px 14px;
}

/* ═══════════ SETTINGS MODAL ═══════════ */
.settings-modal {
  width: 480px; max-width: 94vw; max-height: 88vh;
  display: flex; flex-direction: column; padding: 0;
}
.settings-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.settings-title { font-size: 18px; font-weight: 700; }
.settings-sub2 { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.settings-scroll {
  padding: 6px 22px 12px; overflow-y: auto; flex: 1; min-height: 0;
}
.settings-group { padding: 14px 0; border-bottom: 1px solid rgba(52,51,65,.5); }
.settings-group:last-child { border-bottom: 0; }
.sg-title {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.sg-count {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: var(--panel-2); color: var(--text);
}

.setting-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 9px 0;
}
.sl-text { display: flex; flex-direction: column; gap: 2px; }
.sl-text > span { font-size: 13px; font-weight: 500; }
.sl-text em { font-style: normal; font-size: 11px; color: var(--text-dim); }
.sl-ctrl { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.sl-ctrl input[type=range] { flex: 1; accent-color: var(--accent); }
.sl-val { font-size: 14px; font-weight: 700; color: var(--gold); min-width: 60px; text-align: right; }
.sl-select {
  background: var(--bg-deep); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; outline: none; cursor: pointer;
}
.sl-select:focus { border-color: var(--accent); }

/* Player list inside settings */
.settings-players { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: var(--r-sm); background: var(--panel-2);
}
.sp-av {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 14px; border: 2px solid rgba(255,255,255,.8);
}
.sp-name { flex: 1; font-size: 13px; font-weight: 500; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 8px; }
.sp-tag.host { background: rgba(255,201,60,.2); color: var(--gold); }
.sp-tag.easy { background: rgba(61,220,132,.2); color: var(--green); }
.sp-tag.normal { background: rgba(124,92,255,.2); color: #cfc4ff; }
.sp-tag.hard { background: rgba(255,90,90,.2); color: #ffb4b4; }
.sp-kick {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font-size: 15px; padding: 0 4px; transition: color .12s;
}
.sp-kick:hover { color: var(--red); }

.bot-add-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding-top: 4px;
}
.bot-add-label { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.botlvl {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 20px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.botlvl:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.botlvl:disabled { opacity: .4; cursor: not-allowed; }

.settings-foot { padding: 16px 22px; border-top: 1px solid var(--border); }

/* Toggle switch (shared) */
.toggle { display: inline-flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.toggle input { display: none; }
.toggle-track {
  width: 40px; height: 22px; border-radius: 20px; background: var(--panel-2);
  border: 1px solid var(--border); position: relative; transition: background .15s, border-color .15s;
}
.toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim);
  transition: transform .16s, background .15s;
}
.toggle input:checked + .toggle-track { background: rgba(124,92,255,.4); border-color: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(18px); background: var(--accent); }

@media (max-width: 520px) {
  .settings-modal { width: 96vw; }
  .sl-ctrl { min-width: 150px; }
}

/* ═══════════ LANGUAGE PICKER ═══════════ */
.lang-select {
  width: auto; margin: 0 0 18px; padding: 6px 10px;
  font-size: 12px; cursor: pointer;
}