:root {
  --bg: #101418;
  --panel: #1a2026;
  --panel-2: #222a32;
  --text: #f4f6f8;
  --muted: #8a96a3;
  --accent: #2e7d32;
  --danger: #e0001b;
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}
.hidden { display: none !important; }

.screen { max-width: 720px; margin: 0 auto; padding: 16px 0 40px; }
.title { font-size: 2rem; margin: 12px 0 4px; text-align: center; }
.subtitle { color: var(--muted); text-align: center; margin: 0 0 20px; }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--danger); min-height: 1.2em; }

.card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0;
}
.card h2 { margin: 0 0 12px; font-size: 1.15rem; }

.field { display: block; margin: 10px 0; }
.field > span { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
input, select {
  width: 100%; padding: 12px; font-size: 1rem; border-radius: 10px;
  border: 1px solid #2c343c; background: var(--panel-2); color: var(--text);
}

button {
  min-height: 44px; padding: 10px 16px; font-size: 1rem; cursor: pointer;
  border: 1px solid #2c343c; border-radius: 10px; background: var(--panel-2); color: var(--text);
}
button:hover { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; }
button.ghost { background: transparent; }
.actions button { margin: 4px 6px 4px 0; }

.code { font-family: ui-monospace, monospace; letter-spacing: 2px; font-size: 1.3rem; }

.player-list { list-style: none; padding: 0; margin: 12px 0; }
.player-list li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: var(--panel-2); margin-bottom: 6px; }

.banner {
  position: sticky; top: 0; z-index: 50; text-align: center;
  padding: 8px; background: var(--danger); color: #fff; border-radius: 0 0 10px 10px;
}
.banner.update { background: #b58900; }

/* ---- per-player transaction toasts (yours, made prominent) ---- */
.toasts {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
  min-width: 220px; padding: 12px 20px; border-radius: 14px; text-align: center;
  background: var(--panel-2); box-shadow: 0 10px 34px #000b; border-left: 7px solid var(--muted);
  animation: toastIn .3s ease-out;
}
.toast.gain { border-color: #36d36a; }
.toast.loss { border-color: var(--danger); }
.toast .amt { font-size: 1.5rem; font-weight: 800; letter-spacing: .5px; }
.toast.gain .amt { color: #36d36a; }
.toast.loss .amt { color: #ff6b6b; }
.toast .why { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.toast.out { animation: toastOut .4s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-14px); } }

/* highlight your balance chip when it changes (outline keeps the seat stripe intact) */
.pchip.flash-gain { animation: chipGain .9s ease-out; }
.pchip.flash-loss { animation: chipLoss .9s ease-out; }
@keyframes chipGain { 0%,100% { outline: 0 solid transparent; } 30% { outline: 3px solid #36d36a; outline-offset: 2px; } }
@keyframes chipLoss { 0%,100% { outline: 0 solid transparent; } 30% { outline: 3px solid #ff6b6b; outline-offset: 2px; } }

/* ---------- game ---------- */
.game-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px; gap: 10px; }
.header-right { display: flex; align-items: center; gap: 10px; }
button.small { min-height: 32px; padding: 4px 12px; font-size: .85rem; }
.turn { font-weight: 600; }
.conn { font-size: 1.4rem; color: var(--muted); }
.conn.live { color: #36d36a; }

.board-wrap { width: 100%; position: relative; }
.board {
  display: grid; width: 100%; aspect-ratio: 1 / 1; gap: 2px;
  background: #0a0d10; border-radius: 10px; padding: 2px;
}
.tile {
  position: relative; background: var(--panel); border-radius: 4px; overflow: hidden;
  font-size: clamp(6px, 1.4vw, 11px); line-height: 1.1; padding: 2px; cursor: default;
  display: flex; flex-direction: column; min-width: 0;
}
.tile.own { cursor: pointer; }
.tile.own:hover { outline: 1px solid var(--accent); }
.tile .strip { height: 6px; margin: -2px -2px 2px; }
.tile .nm { font-weight: 600; overflow: hidden; position: relative; z-index: 2; }
.tile .pr { margin-top: auto; color: var(--muted); position: relative; z-index: 2; }
.tile .corner { font-size: clamp(8px, 2vw, 14px); }

/* faint thematic vector glyph behind the label */
.tile .icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .22; z-index: 1; }
.tile .icon svg { width: 62%; height: 62%; }
/* chest / chance are made unmistakable: full-opacity centered glyph + tinted frame */
.tile.draw .icon { opacity: 1; }
.tile.draw .icon svg { width: 70%; height: 70%; }
.tile.draw-chance { box-shadow: inset 0 0 0 2px #f0a000aa; }
.tile.draw-chest  { box-shadow: inset 0 0 0 2px #3aa0ffaa; }

/* GO / Start marker */
.tile.go { box-shadow: inset 0 0 0 2px var(--accent); }
.tile.go .nm { color: #36d36a; }
.tile .startflag { position: absolute; top: 1px; left: 2px; font-size: clamp(8px, 2vw, 14px); z-index: 2; }

.tile .ownerdot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; z-index: 3; box-shadow: 0 0 0 1px #0008; }
.tile .houses { position: absolute; top: 1px; right: 12px; font-size: 8px; z-index: 3; }
.tile .rent { position: absolute; bottom: 1px; right: 2px; font-size: clamp(6px, 1.5vw, 10px); color: #ffd166; font-weight: 700; z-index: 3; }
.tile .mort { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #0007, #0007 4px, transparent 4px, transparent 8px); z-index: 2; }

.board .center {
  background: var(--panel); border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 8px;
}
.dice { display: flex; gap: 10px; }
.dice .die { font-size: clamp(26px, 7vw, 52px); line-height: 1; display: inline-block; }
.dice.rolling .die { animation: diceRoll .28s infinite; }
@keyframes diceRoll {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-6px) rotate(-18deg); }
  50%  { transform: translateY(0) rotate(0deg); }
  75%  { transform: translateY(-6px) rotate(18deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.pot { color: var(--muted); font-size: .85rem; }

/* ---- centre-board card reveal ---- */
.card-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #0008; backdrop-filter: blur(1px); z-index: 20; cursor: pointer; padding: 6%;
}
.game-card {
  width: min(62%, 320px); background: var(--panel-2); border-radius: 14px;
  border-top: 8px solid var(--accent); padding: 18px 16px; text-align: center;
  box-shadow: 0 12px 40px #000a; animation: cardPop .28s ease-out;
}
.game-card.chance { border-top-color: #f0a000; }
.game-card.chest  { border-top-color: #3aa0ff; }
.game-card-deck { font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.game-card-text { font-size: clamp(1rem, 2.6vw, 1.25rem); font-weight: 600; line-height: 1.3; }
.game-card-hint { margin-top: 14px; font-size: .75rem; color: var(--muted); }
@keyframes cardPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- token overlay: bigger, animated ---- */
.tokens-layer { position: absolute; inset: 0; pointer-events: none; }
.token {
  position: absolute; transform: translate(-50%, -50%);
  font-size: clamp(20px, 5vw, 40px); line-height: 1;
  filter: drop-shadow(0 2px 2px #000a);
  transition: left .14s linear, top .14s linear;
  will-change: left, top; z-index: 5;
}
.token.hop { animation: tokenHop .14s; }
@keyframes tokenHop { 50% { transform: translate(-50%, -68%); } }

.players-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pchip { display: flex; align-items: center; gap: 6px; background: var(--panel); padding: 6px 10px; border-radius: 20px; font-size: .9rem; border: 2px solid transparent; }
.pchip.active { border-color: var(--accent); }
.pchip.bankrupt { opacity: .45; text-decoration: line-through; }

/* ---- my-properties panel grouped by colour ---- */
.property-panel { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pg-group { background: var(--panel); border-radius: 10px; padding: 6px 8px; min-width: 90px; border-top: 4px solid #888; }
.pg-group h4 { margin: 0 0 4px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.pg-item { font-size: .85rem; padding: 2px 0; display: flex; gap: 4px; align-items: center; }
.pg-item .b { font-size: .75rem; }
.pg-empty { color: var(--muted); font-size: .85rem; padding: 6px; }

/* ---- visual action menu ---- */
.overlay { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.menu-card { background: var(--panel); border-radius: 14px; padding: 18px; width: min(420px, 100%); }
.menu-card h3 { margin: 0 0 12px; }
.menu-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.menu-options button { width: 100%; text-align: left; }
.menu-options .cost { color: var(--muted); float: right; }

.prompt { min-height: 1.5em; margin: 6px 0; color: #ffd166; }
.log { list-style: none; padding: 8px; margin: 10px 0; max-height: 160px; overflow-y: auto; background: var(--panel); border-radius: 10px; font-size: .85rem; }
.log li { padding: 2px 0; border-bottom: 1px solid #ffffff10; color: var(--muted); }