:root {
  --animation-speed: 1;
  color-scheme: dark;
  --bg: #070a12;
  --bg-soft: #0d1322;
  --panel: rgba(17, 24, 39, 0.82);
  --panel-strong: rgba(20, 28, 45, 0.96);
  --card: rgba(255, 255, 255, 0.065);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f8fafc;
  --muted: #a7b3c7;
  --muted-2: #78869d;
  --accent: #38bdf8;
  --accent-2: #a78bfa;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --radius: 24px;
  --radius-sm: 16px;
  --shadow: 0 24px 80px rgba(0,0,0,.46);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 8%, rgba(56,189,248,.25), transparent 30rem),
    radial-gradient(circle at 85% 2%, rgba(167,139,250,.22), transparent 28rem),
    linear-gradient(135deg, #060814 0%, #111827 50%, #0f172a 100%);
  overflow-x: hidden;
}

button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.backdrop-orb {
  position: fixed;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  filter: blur(55px);
  pointer-events: none;
  z-index: -1;
  opacity: .6;
}
.orb-one { background: #38bdf8; top: 10%; left: -7rem; }
.orb-two { background: #a78bfa; bottom: 5%; right: -8rem; }

.shell { width: min(1180px, calc(100% - 28px)); margin-inline: auto; }
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0 .8rem;
}
.brand-lockup { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.brand-mark {
  width: 3.25rem; height: 3.25rem; flex: 0 0 auto;
  border-radius: 1.1rem;
  display: grid; place-items: center;
  font-weight: 950;
  letter-spacing: -.07em;
  color: #05111d;
  background: linear-gradient(135deg, #38bdf8, #a7f3d0 50%, #fef08a);
  box-shadow: 0 14px 40px rgba(56,189,248,.24);
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .15rem; font-size: clamp(1.35rem, 5vw, 2.3rem); line-height: 1; letter-spacing: -.04em; }
h2 { margin-bottom: .65rem; font-size: clamp(1.35rem, 4.3vw, 2.2rem); line-height: 1.05; letter-spacing: -.035em; }
h3 { margin-bottom: .45rem; }
.subtle { color: var(--muted); line-height: 1.5; }
.eyebrow { color: #a7f3d0; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 850; margin-bottom: .38rem; }

.panel, .card {
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.045));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.panel { padding: clamp(1rem, 2.4vw, 1.35rem); }
.small-card { padding: .75rem 1rem; border-radius: 999px; }

.connection-banner {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  color: var(--muted);
}
.status-dot { width: .7rem; height: .7rem; border-radius: 999px; background: var(--warning); box-shadow: 0 0 0 4px rgba(251,191,36,.12); }
.status-dot.online { background: var(--success); box-shadow: 0 0 0 4px rgba(52,211,153,.12); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 0 4px rgba(251,113,133,.12); }

.view-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .6fr);
  gap: 1rem;
  align-items: stretch;
}
.hero-card { grid-row: span 2; position: relative; overflow: hidden; min-height: 31rem; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 60% 12%, rgba(56,189,248,.16), transparent 22rem);
  pointer-events: none;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-art { position: absolute; inset: 1rem 1rem auto 1rem; height: 18rem; display: grid; place-items: center; }
.mini-board {
  width: min(21rem, 78vw);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: .55rem;
  transform: rotate(-6deg);
}
.mini-board span, .mini-board strong {
  min-height: 4.2rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.15rem;
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.04));
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.mini-board strong {
  grid-column: span 2;
  display: grid; place-items: center;
  color: #dffcff;
  font-size: 5rem;
  background: radial-gradient(circle, rgba(56,189,248,.45), rgba(167,139,250,.16));
}
.stacked-card { display: flex; flex-direction: column; gap: .9rem; justify-content: center; }

.btn {
  border: 0;
  border-radius: 999px;
  min-height: 2.85rem;
  padding: .78rem 1rem;
  color: var(--text);
  font-weight: 850;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .13s ease, opacity .13s ease, border-color .13s ease, filter .13s ease;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.24); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { color: #04101b; background: linear-gradient(135deg, #38bdf8, #a7f3d0); border-color: transparent; }
.btn.secondary { color: #07111e; background: linear-gradient(135deg, #fef08a, #fdba74); border-color: transparent; }
.btn.ghost { background: rgba(255,255,255,.045); }
.btn.danger { background: rgba(251,113,133,.12); color: #fecdd3; border-color: rgba(251,113,133,.36); }
.btn.full { width: 100%; }
.header-actions, .button-row, .section-title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.header-actions { justify-content: flex-end; }
.section-title { justify-content: space-between; margin-bottom: 1rem; }
.section-title.compact { margin-bottom: .7rem; }

input, textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(6,10,20,.76);
  color: var(--text);
  border-radius: 16px;
  padding: .85rem .95rem;
  outline: none;
}
input:focus, textarea:focus { border-color: rgba(56,189,248,.7); box-shadow: 0 0 0 4px rgba(56,189,248,.13); }
textarea { min-height: 17rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.48; }
.field-label { color: var(--muted); display: block; font-size: .88rem; font-weight: 720; margin-bottom: .35rem; }
.hidden { display: none !important; }

.url-list { display: grid; gap: .55rem; margin-top: .85rem; }
.url-chip {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .65rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  color: #dbeafe;
  overflow: hidden;
}
.url-chip code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; }
.url-chip button { min-height: 2rem; padding: .35rem .6rem; }

.lobby-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.room-code { font-size: clamp(3rem, 14vw, 5.3rem); line-height: .95; font-weight: 950; letter-spacing: -.07em; margin-bottom: .8rem; }
.player-list { display: grid; gap: .65rem; }
.player-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
}
.token { width: 1.05rem; height: 1.05rem; border-radius: 999px; box-shadow: 0 0 0 4px rgba(255,255,255,.08); background: var(--accent); }
.player-main strong { display: block; }
.player-main span { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.pill { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.065); color: var(--muted); padding: .38rem .64rem; border-radius: 999px; font-size: .8rem; font-weight: 760; }
.host-setup { margin-bottom: 1.2rem; }
.rules-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.rule-field label { color: var(--muted); font-size: .78rem; font-weight: 720; display: block; margin-bottom: .3rem; }
.rule-field input[type="checkbox"] { width: auto; min-height: auto; transform: scale(1.12); margin-right: .45rem; }
.rule-check { display: flex; align-items: center; gap: .45rem; min-height: 3rem; padding: 0 .15rem; color: var(--muted); font-size: .84rem; }
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.game-top-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .75fr); gap: 1rem; margin-bottom: 1rem; }
.turn-panel { background: linear-gradient(135deg, rgba(56,189,248,.17), rgba(167,139,250,.13)); }
.turn-panel h2 { margin-bottom: .4rem; }
.dice-display { display: flex; align-items: center; gap: .45rem; min-height: 3rem; margin: .6rem 0 .75rem; }
.die {
  width: 2.45rem; height: 2.45rem;
  border-radius: .72rem;
  display: grid; place-items: center;
  color: #08111d;
  font-weight: 950;
  background: linear-gradient(135deg, #f8fafc, #bae6fd);
  box-shadow: 0 12px 22px rgba(0,0,0,.2);
}
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.stat-grid div { padding: .85rem; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.stat-grid strong { display: block; font-size: 1.25rem; }
.stat-grid span { display: block; margin-top: .15rem; color: var(--muted); font-size: .78rem; }
.compact-actions { margin-top: .85rem; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.board-shell { overflow: hidden; }
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .75rem;
}
.space-card {
  position: relative;
  min-height: 148px;
  border-radius: 20px;
  overflow: hidden;
  padding: .78rem;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
}
.space-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: .42rem; background: var(--space-color, #38bdf8); }
.space-index { color: var(--muted-2); font-size: .72rem; font-weight: 850; margin-top: .25rem; }
.space-name { font-weight: 950; line-height: 1.1; margin: .25rem 0 .35rem; }
.space-meta { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.tokens-on-space { display: flex; flex-wrap: wrap; gap: .32rem; position: absolute; left: .7rem; right: .7rem; bottom: .7rem; }
.board-token { width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; color: #020617; font-weight: 950; font-size: .7rem; border: 2px solid rgba(255,255,255,.65); }
.space-card.current { outline: 3px solid rgba(56,189,248,.65); box-shadow: 0 0 0 7px rgba(56,189,248,.12); }
.space-card.owned { background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }

.side-stack { display: grid; gap: 1rem; }
.compact-list .player-row { padding: .68rem; }
.player-money { font-weight: 920; }
.bankrupt { opacity: .48; filter: grayscale(.4); }
.property-list { display: grid; gap: .55rem; max-height: 28rem; overflow: auto; padding-right: .2rem; }
.property-card {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.055);
  border-radius: 16px;
  padding: .7rem;
  display: grid;
  gap: .35rem;
}
.property-card strong { display: block; }
.property-card small { color: var(--muted); line-height: 1.35; }
.property-card button { min-height: 2.2rem; padding: .42rem .65rem; justify-self: start; }
.log-list { display: grid; gap: .55rem; max-height: 26rem; overflow: auto; padding-right: .2rem; }
.log-item { color: var(--muted); border-left: 3px solid rgba(56,189,248,.45); padding-left: .65rem; font-size: .88rem; line-height: 1.4; }
.log-time { display: block; color: var(--muted-2); font-size: .72rem; margin-top: .15rem; }

.modal { border: 0; padding: 0; background: transparent; color: var(--text); width: min(92vw, 520px); }
.modal::backdrop { background: rgba(2,6,23,.76); backdrop-filter: blur(8px); }
.modal-card { background: var(--panel-strong); border: 1px solid var(--line-strong); border-radius: 24px; padding: 1rem; box-shadow: var(--shadow); }
.modal-card.wide { width: min(92vw, 720px); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; padding: 0; margin: 1rem 0 0; }
.bid-fields { display: grid; gap: .65rem; margin-top: .8rem; }
.bid-row { display: grid; grid-template-columns: 1fr 120px; gap: .65rem; align-items: center; }
.toast {
  position: fixed; left: 50%; bottom: calc(1rem + var(--safe-bottom)); transform: translateX(-50%);
  z-index: 10; width: min(92vw, 520px);
  background: rgba(15,23,42,.96); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: .85rem 1rem; text-align: center; color: #e0f2fe; box-shadow: var(--shadow);
}

@media (max-width: 940px) {
  .view-grid, .lobby-layout, .game-top-grid, .game-layout, .editor-grid { grid-template-columns: 1fr; }
  .hero-card { min-height: 28rem; }
  .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-stack { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 20px, 1180px); }
  .app-header { align-items: flex-start; }
  .header-actions { width: 100%; }
  .header-actions .btn { flex: 1; }
  .brand-mark { width: 2.9rem; height: 2.9rem; }
  .subtle { font-size: .94rem; }
  .hero-card { min-height: 26rem; }
  .hero-art { height: 15rem; }
  .mini-board span, .mini-board strong { min-height: 3.2rem; border-radius: .9rem; }
  .mini-board strong { font-size: 3.9rem; }
  .rules-grid { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .space-card { min-height: 136px; border-radius: 18px; padding: .67rem; }
  .action-buttons .btn { flex: 1 1 calc(50% - .5rem); }
  .stat-grid { grid-template-columns: 1fr; }
  .url-chip { border-radius: 16px; align-items: flex-start; }
  .url-chip code { white-space: normal; overflow-wrap: anywhere; }
}

/* v1.1 game-board upgrade */
.token-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .45rem;
  margin: -.1rem 0 .25rem;
}
.token-choice {
  min-height: 3rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 1.35rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.token-choice.active {
  border-color: rgba(56,189,248,.78);
  background: linear-gradient(135deg, rgba(56,189,248,.28), rgba(167,139,250,.22));
  box-shadow: 0 0 0 4px rgba(56,189,248,.13);
}
.character-token {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(226,232,240,.86));
  border: 3px solid var(--player-colour, var(--accent));
  box-shadow: 0 10px 20px rgba(0,0,0,.24), 0 0 0 4px rgba(255,255,255,.07);
  font-size: 1.05rem;
}
.board-shell {
  overflow: auto;
  background:
    linear-gradient(135deg, rgba(20,184,166,.12), transparent 45%),
    linear-gradient(315deg, rgba(251,191,36,.10), transparent 38%),
    var(--panel);
}
.board-grid {
  --board-size: 7;
  display: grid;
  grid-template-columns: repeat(var(--board-size), minmax(86px, 1fr));
  grid-template-rows: repeat(var(--board-size), minmax(86px, 1fr));
  gap: .42rem;
  min-width: calc(var(--board-size) * 90px);
  aspect-ratio: 1 / 1;
  padding: .75rem;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 50% 50%, rgba(20,184,166,.16), transparent 35%),
    linear-gradient(135deg, rgba(15,23,42,.94), rgba(6,10,20,.96));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04), 0 22px 65px rgba(0,0,0,.28);
}
.board-centre {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .9rem;
  text-align: center;
  border-radius: 28px;
  border: 1px dashed rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 30%, rgba(56,189,248,.20), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  padding: 1rem;
}
.board-centre-logo {
  font-size: clamp(1.8rem, 5vw, 4.2rem);
  line-height: .88;
  font-weight: 1000;
  letter-spacing: -.08em;
  text-transform: uppercase;
  text-shadow: 0 18px 35px rgba(0,0,0,.34);
}
.board-centre-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.board-centre-stats span {
  padding: .5rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.11);
  color: var(--muted);
  font-size: .8rem;
}
.board-centre p {
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}
.space-card.board-space {
  min-height: 0;
  height: 100%;
  border-radius: 15px;
  padding: .48rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background:
    linear-gradient(180deg, var(--space-color, #38bdf8) 0 .45rem, transparent .45rem),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
}
.space-card.board-space::before { display: none; }
.space-card.board-space.current {
  outline: 3px solid rgba(251,191,36,.85);
  box-shadow: 0 0 0 7px rgba(251,191,36,.16), inset 0 0 0 1px rgba(255,255,255,.08);
}
.space-card.board-space.owned {
  background:
    linear-gradient(180deg, var(--space-color, #38bdf8) 0 .45rem, transparent .45rem),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
}
.board-space .space-index {
  margin-top: .36rem;
  font-size: .62rem;
}
.board-space .space-name {
  font-size: clamp(.68rem, 1.1vw, .86rem);
  line-height: 1.04;
  margin: .17rem 0;
}
.board-space .space-meta {
  font-size: .62rem;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.board-space .tokens-on-space {
  margin-top: auto;
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding-top: .25rem;
}
.board-token {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(226,232,240,.86));
  border: 3px solid var(--player-colour, var(--accent));
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  font-size: .98rem;
}
.edge-left .space-name,
.edge-right .space-name { font-size: clamp(.62rem, 1vw, .8rem); }

@media (max-width: 940px) {
  .board-grid {
    grid-template-columns: repeat(var(--board-size), minmax(82px, 1fr));
    grid-template-rows: repeat(var(--board-size), minmax(82px, 1fr));
    min-width: calc(var(--board-size) * 86px);
  }
}

@media (max-width: 640px) {
  .token-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .board-grid {
    grid-template-columns: repeat(var(--board-size), minmax(78px, 1fr));
    grid-template-rows: repeat(var(--board-size), minmax(78px, 1fr));
    min-width: calc(var(--board-size) * 82px);
    gap: .34rem;
    padding: .55rem;
  }
  .board-centre { border-radius: 20px; padding: .7rem; }
  .board-centre-logo { font-size: 2rem; }
  .board-centre p { display: none; }
  .board-centre-stats span { font-size: .7rem; padding: .36rem .48rem; }
  .space-card.board-space { min-height: 0; border-radius: 12px; padding: .4rem; }
  .board-space .space-meta { -webkit-line-clamp: 2; }
  .board-token { width: 1.55rem; height: 1.55rem; font-size: .82rem; border-width: 2px; }
}


/* v1.2 phone play upgrade */
#gameView { padding-bottom: calc(.75rem + var(--safe-bottom)); }
#endGameBtn { white-space: nowrap; }

@media (max-width: 640px) {
  body.is-game-screen .app-header,
  body.is-game-screen #connectionBanner,
  body:has(#gameView:not(.hidden)) .app-header,
  body:has(#gameView:not(.hidden)) #connectionBanner {
    display: none;
  }

  body.is-game-screen main.shell,
  body:has(#gameView:not(.hidden)) main.shell {
    width: 100%;
  }

  #gameView {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .45rem .45rem calc(.55rem + var(--safe-bottom));
  }

  #gameView.hidden { display: none !important; }

  #gameView .game-layout {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-height: 0;
  }

  #gameView .game-top-grid {
    order: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    margin: 0;
  }

  #gameView .board-shell {
    padding: .45rem;
    border-radius: 18px;
    overflow: visible;
  }

  #gameView .board-shell .section-title {
    display: none;
  }

  #gameView .board-grid {
    width: 100%;
    min-width: 0;
    max-width: min(100%, calc(100dvh - 12.2rem));
    margin-inline: auto;
    grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
    grid-template-rows: repeat(var(--board-size), minmax(0, 1fr));
    gap: .18rem;
    padding: .3rem;
    border-radius: 18px;
    aspect-ratio: 1 / 1;
  }

  #gameView .board-centre {
    border-radius: 14px;
    padding: .35rem;
    gap: .35rem;
  }

  #gameView .board-centre-logo {
    font-size: clamp(1rem, 7vw, 1.85rem);
    letter-spacing: -.06em;
  }

  #gameView .board-centre-stats { gap: .25rem; }
  #gameView .board-centre-stats span {
    font-size: .58rem;
    padding: .22rem .32rem;
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #gameView .space-card.board-space {
    border-radius: 7px;
    padding: .16rem;
    background:
      linear-gradient(180deg, var(--space-color, #38bdf8) 0 .22rem, transparent .22rem),
      linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
  }

  #gameView .board-space .space-index,
  #gameView .board-space .space-meta {
    display: none;
  }

  #gameView .board-space .space-name,
  #gameView .edge-left .space-name,
  #gameView .edge-right .space-name {
    font-size: clamp(.43rem, 1.65vw, .58rem);
    line-height: .92;
    margin: .24rem .02rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  #gameView .board-space .tokens-on-space {
    gap: .06rem;
    padding-top: .08rem;
    align-items: flex-end;
  }

  #gameView .board-token {
    width: clamp(.72rem, 4vw, 1rem);
    height: clamp(.72rem, 4vw, 1rem);
    font-size: clamp(.42rem, 2.5vw, .62rem);
    border-width: 1px;
    box-shadow: 0 3px 8px rgba(0,0,0,.32);
  }

  #gameView .turn-panel {
    padding: .55rem;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "turn dice"
      "status actions";
    gap: .35rem .5rem;
    align-items: center;
  }

  #gameView .turn-panel .eyebrow { display: none; }
  #gameView .turn-panel h2 {
    grid-area: turn;
    margin: 0;
    font-size: 1rem;
    line-height: 1.05;
  }
  #gameView #turnStatus {
    grid-area: status;
    margin: 0;
    font-size: .72rem;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #gameView #diceDisplay {
    grid-area: dice;
    min-height: 0;
    margin: 0;
    justify-content: flex-end;
  }
  #gameView .die {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .55rem;
    font-size: .95rem;
  }
  #gameView .action-buttons {
    grid-area: actions;
    justify-content: flex-end;
    gap: .28rem;
  }
  #gameView .action-buttons .btn {
    min-height: 2.2rem;
    padding: .43rem .58rem;
    font-size: .74rem;
    flex: 0 0 auto;
  }
  #gameView .action-buttons .btn.hidden { display: none !important; }

  #gameView .stats-panel {
    padding: .5rem;
    border-radius: 18px;
  }
  #gameView .stats-panel .eyebrow { display: none; }
  #gameView .stat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: .32rem;
  }
  #gameView .stat-grid div {
    padding: .45rem .35rem;
    border-radius: 13px;
  }
  #gameView .stat-grid strong { font-size: .84rem; }
  #gameView .stat-grid span { font-size: .6rem; }
  #gameView .compact-actions {
    margin-top: .38rem;
    gap: .32rem;
  }
  #gameView .compact-actions .btn {
    min-height: 2.05rem;
    padding: .38rem .55rem;
    font-size: .7rem;
    flex: 1;
  }

  #gameView .side-stack {
    order: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
  }
  #gameView .side-stack .panel {
    border-radius: 18px;
    padding: .65rem;
    box-shadow: none;
  }
  #gameView .side-stack .panel:nth-child(2),
  #gameView .side-stack .panel:nth-child(3) {
    display: none;
  }
  #gameView .compact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
  }
  #gameView .compact-list .player-row {
    padding: .38rem;
    border-radius: 13px;
    grid-template-columns: auto 1fr auto;
    gap: .35rem;
  }
  #gameView .character-token {
    width: 1.55rem;
    height: 1.55rem;
    font-size: .78rem;
    border-width: 2px;
  }
  #gameView .player-main strong { font-size: .78rem; }
  #gameView .player-main span { font-size: .62rem; }
  #gameView .player-money { font-size: .74rem; }
}

@media (max-width: 390px) {
  #gameView .board-grid {
    max-width: min(100%, calc(100dvh - 11.6rem));
    gap: .14rem;
    padding: .24rem;
  }
  #gameView .turn-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "turn"
      "dice"
      "actions"
      "status";
  }
  #gameView #diceDisplay { justify-content: flex-start; }
  #gameView .action-buttons { justify-content: flex-start; }
}

/* v1.3 no-code board editor */
select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(6,10,20,.76);
  color: var(--text);
  border-radius: 16px;
  padding: .85rem .95rem;
  outline: none;
}
select:focus { border-color: rgba(56,189,248,.7); box-shadow: 0 0 0 4px rgba(56,189,248,.13); }

.friendly-editor {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.028));
}

.builder-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: .75rem;
  align-items: end;
  margin-bottom: 1rem;
}
.inline-field { margin: 0; }

.board-builder-list,
.cards-builder-list {
  display: grid;
  gap: .75rem;
}

.builder-card,
.card-builder-row {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.115);
  border-radius: 20px;
  background: rgba(6,10,20,.42);
  padding: .85rem;
}
.builder-card::before,
.card-builder-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .45rem;
  background: var(--space-color, rgba(56,189,248,.85));
}
.card-builder-row::before { background: linear-gradient(180deg, #a78bfa, #38bdf8); }

.builder-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: center;
  margin-bottom: .85rem;
  padding-left: .25rem;
}
.builder-card-head strong { display: block; font-size: 1rem; }
.builder-card-head span { display: block; color: var(--muted); font-size: .82rem; margin-top: .08rem; }

.builder-number {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #03111f;
  font-weight: 950;
  background: linear-gradient(135deg, #f8fafc, #bae6fd);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.builder-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .35rem;
}

.icon-btn {
  min-height: 2.05rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,.06);
  padding: .38rem .6rem;
  font-weight: 800;
  cursor: pointer;
}
.icon-btn.danger { color: #fecdd3; border-color: rgba(251,113,133,.34); background: rgba(251,113,133,.10); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }

.builder-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}
.builder-form-grid label {
  display: grid;
  gap: .3rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 760;
}
.builder-form-grid input,
.builder-form-grid select {
  min-height: 2.75rem;
  border-radius: 14px;
  padding: .65rem .75rem;
}
.builder-form-grid input[type="color"] {
  padding: .24rem;
  cursor: pointer;
}
.builder-form-grid .wide-field { grid-column: span 2; }
.is-muted { opacity: .42; }
.locked-space { border-color: rgba(52,211,153,.34); }
.locked-space::after {
  content: "Start is always first";
  position: absolute;
  top: .65rem;
  right: .65rem;
  border: 1px solid rgba(52,211,153,.25);
  background: rgba(52,211,153,.10);
  color: #bbf7d0;
  border-radius: 999px;
  padding: .25rem .48rem;
  font-size: .68rem;
  font-weight: 850;
}

.advanced-editors {
  margin-top: 1rem;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 20px;
  padding: .9rem;
  background: rgba(255,255,255,.035);
}
.advanced-editors summary {
  cursor: pointer;
  color: #dbeafe;
  font-weight: 900;
  margin: -.2rem 0 .5rem;
}
.advanced-editors[open] summary { margin-bottom: .8rem; }

@media (max-width: 940px) {
  .builder-toolbar { grid-template-columns: 1fr; }
  .builder-toolbar .btn { width: 100%; }
  .builder-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .friendly-editor { padding: .75rem; border-radius: 19px; }
  .builder-card,
  .card-builder-row { padding: .7rem; border-radius: 17px; }
  .builder-card-head {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .builder-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .builder-actions .icon-btn,
  .card-builder-row .icon-btn { flex: 1; }
  .builder-form-grid { grid-template-columns: 1fr; }
  .builder-form-grid .wide-field { grid-column: auto; }
  .locked-space::after { display: none; }
}

/* v1.4 visual board builder */
.board-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 1rem;
  align-items: start;
}
.visual-toolbar {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}
.builder-preview-panel,
.builder-edit-panel {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(6,10,20,.36);
  padding: .85rem;
  min-width: 0;
}
.builder-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: .75rem;
}
.builder-mini-header strong {
  display: block;
  font-size: 1rem;
  color: #f8fafc;
}
.builder-mini-header span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
  margin-top: .08rem;
}
.builder-board-preview {
  --builder-board-size: 7;
  display: grid;
  grid-template-columns: repeat(var(--builder-board-size), minmax(40px, 1fr));
  grid-template-rows: repeat(var(--builder-board-size), minmax(40px, 1fr));
  gap: .28rem;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  padding: .55rem;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.14), transparent 37%),
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(2,6,23,.96));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04), 0 20px 48px rgba(0,0,0,.24);
}
.builder-board-centre {
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  min-width: 0;
  min-height: 0;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  color: var(--muted);
  padding: .6rem;
}
.builder-board-centre strong {
  color: #f8fafc;
  font-size: clamp(1.8rem, 6vw, 4.2rem);
  line-height: .9;
  font-weight: 950;
}
.builder-board-centre span { font-weight: 900; color: #dbeafe; }
.builder-board-centre small { color: var(--muted-2); margin-top: .2rem; }
.builder-board-space {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .08rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  color: var(--text);
  padding: .38rem .36rem;
  cursor: pointer;
  touch-action: manipulation;
}
.builder-board-space::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: .24rem;
  background: var(--space-color, #38bdf8);
}
.builder-board-space strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.05;
  font-size: clamp(.5rem, 1.1vw, .78rem);
  font-weight: 950;
  align-self: center;
}
.builder-board-space small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: clamp(.45rem, .9vw, .64rem);
}
.builder-space-no {
  color: var(--muted-2);
  font-size: clamp(.45rem, .9vw, .62rem);
  font-weight: 900;
  margin-top: .12rem;
}
.builder-board-space.selected {
  border-color: rgba(56,189,248,.9);
  outline: 3px solid rgba(56,189,248,.2);
  background: linear-gradient(145deg, rgba(56,189,248,.18), rgba(255,255,255,.055));
}
.builder-board-space.dragging { opacity: .45; }
.builder-board-space.drop-target {
  border-color: rgba(52,211,153,.95);
  outline: 3px solid rgba(52,211,153,.22);
}
.selected-space-editor .builder-card { margin: 0; }
.selected-space-editor .builder-card-head {
  grid-template-columns: auto 1fr;
}
.selected-space-editor .builder-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.board-list-details {
  margin-top: 1rem;
  border: 1px dashed rgba(255,255,255,.17);
  border-radius: 18px;
  padding: .8rem;
  background: rgba(255,255,255,.035);
}
.board-list-details summary {
  cursor: pointer;
  font-weight: 900;
  color: #dbeafe;
}
.compact-board-list {
  margin-top: .8rem;
}
.compact-board-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: .7rem;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(6,10,20,.36);
  color: var(--text);
  padding: .55rem .65rem;
  cursor: pointer;
  border-left: .42rem solid var(--space-color, #38bdf8);
}
.compact-board-row span {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #03111f;
  font-weight: 950;
  background: #e0f2fe;
}
.compact-board-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-board-row small { color: var(--muted); white-space: nowrap; }
.compact-board-row.selected {
  border-color: rgba(56,189,248,.75);
  box-shadow: 0 0 0 3px rgba(56,189,248,.12);
}

@media (max-width: 980px) {
  .board-builder-layout { grid-template-columns: 1fr; }
  .builder-board-preview { max-width: 100%; }
}

@media (max-width: 640px) {
  .visual-toolbar { grid-template-columns: 1fr; }
  .visual-toolbar .btn { width: 100%; }
  .builder-preview-panel,
  .builder-edit-panel { padding: .65rem; border-radius: 18px; }
  .builder-board-preview {
    gap: .18rem;
    padding: .38rem;
    border-radius: 20px;
    grid-template-columns: repeat(var(--builder-board-size), minmax(24px, 1fr));
    grid-template-rows: repeat(var(--builder-board-size), minmax(24px, 1fr));
  }
  .builder-board-space {
    border-radius: 8px;
    padding: .25rem .2rem;
  }
  .builder-board-space::before { height: .18rem; }
  .builder-board-space strong { font-size: clamp(.42rem, 1.8vw, .62rem); }
  .builder-board-space small { display: none; }
  .builder-space-no { font-size: .48rem; }
  .builder-board-centre { border-radius: 14px; padding: .25rem; }
  .builder-board-centre small { display: none; }
  .selected-space-editor .builder-actions .icon-btn { flex: 1 1 calc(50% - .35rem); }
  .compact-board-row { grid-template-columns: 1.9rem 1fr; }
  .compact-board-row small { grid-column: 2; white-space: normal; }
}


/* v1.6 setup preset manager */
.preset-panel {
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(167,139,250,.075));
}
.preset-grid {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.2fr);
  gap: .75rem;
  align-items: end;
}
.preset-grid .field-label {
  margin: 0;
  display: grid;
  gap: .35rem;
}
.preset-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.preset-actions .btn { min-height: 2.55rem; padding: .64rem .85rem; }
.preset-details { margin: .75rem 0 0; }
@media (max-width: 740px) {
  .preset-grid { grid-template-columns: 1fr; }
  .preset-actions .btn { flex: 1 1 145px; }
}

/* v1.7 adaptive board labels and tokens */
.board-grid {
  gap: calc(.42rem * var(--board-gap-scale, 1));
  padding: calc(.75rem * var(--board-gap-scale, 1));
}
.space-card.board-space {
  border-radius: max(6px, calc(15px * var(--board-font-scale, 1)));
  padding: max(.12rem, calc(.48rem * var(--board-font-scale, 1)));
  background:
    linear-gradient(180deg, var(--space-color, #38bdf8) 0 max(.16rem, calc(.45rem * var(--board-font-scale, 1))), transparent max(.16rem, calc(.45rem * var(--board-font-scale, 1)))),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
}
.space-card.board-space.owned {
  background:
    linear-gradient(180deg, var(--space-color, #38bdf8) 0 max(.16rem, calc(.45rem * var(--board-font-scale, 1))), transparent max(.16rem, calc(.45rem * var(--board-font-scale, 1)))),
    linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
}
.board-space .space-index {
  margin-top: max(.08rem, calc(.36rem * var(--board-font-scale, 1)));
  font-size: clamp(.34rem, calc(.62rem * var(--board-font-scale, 1)), .62rem);
}
.board-space .space-name,
.edge-left .space-name,
.edge-right .space-name {
  font-size: clamp(.34rem, calc(.86rem * var(--board-font-scale, 1)), .86rem);
  line-height: .96;
  margin: max(.04rem, calc(.17rem * var(--board-font-scale, 1))) 0;
  overflow-wrap: anywhere;
}
.board-space .space-meta {
  font-size: clamp(.31rem, calc(.62rem * var(--board-font-scale, 1)), .62rem);
  line-height: 1.08;
}
.board-token {
  width: clamp(.55rem, calc(1.8rem * var(--board-token-scale, 1)), 1.8rem);
  height: clamp(.55rem, calc(1.8rem * var(--board-token-scale, 1)), 1.8rem);
  font-size: clamp(.34rem, calc(.98rem * var(--board-token-scale, 1)), .98rem);
  border-width: max(1px, calc(3px * var(--board-token-scale, 1)));
}
.tokens-on-space {
  gap: calc(.32rem * var(--board-gap-scale, 1));
}
.board-grid.dense-board .board-space .space-meta {
  -webkit-line-clamp: 2;
}
.board-grid.dense-board .board-centre p {
  display: none;
}
.board-grid.very-dense-board .board-space .space-meta {
  display: none;
}
.board-grid.very-dense-board .board-space .space-name {
  -webkit-line-clamp: 3;
}

.builder-board-preview {
  gap: calc(.28rem * var(--builder-gap-scale, 1));
  padding: calc(.55rem * var(--builder-gap-scale, 1));
}
.builder-board-space {
  border-radius: max(6px, calc(12px * var(--builder-font-scale, 1)));
  padding: max(.12rem, calc(.38rem * var(--builder-font-scale, 1)));
}
.builder-board-space::before {
  height: max(.12rem, calc(.24rem * var(--builder-font-scale, 1)));
}
.builder-board-space strong {
  font-size: clamp(.34rem, calc(.78rem * var(--builder-font-scale, 1)), .78rem);
  overflow-wrap: anywhere;
}
.builder-board-space small,
.builder-space-no {
  font-size: clamp(.3rem, calc(.62rem * var(--builder-font-scale, 1)), .62rem);
}
.builder-board-preview.dense-board .builder-board-space small {
  display: none;
}

@media (max-width: 640px) {
  #gameView .board-grid {
    gap: calc(.18rem * var(--board-gap-scale, 1));
    padding: calc(.3rem * var(--board-gap-scale, 1));
  }
  #gameView .space-card.board-space {
    border-radius: max(4px, calc(7px * var(--board-font-scale, 1)));
    padding: max(.06rem, calc(.16rem * var(--board-font-scale, 1)));
    background:
      linear-gradient(180deg, var(--space-color, #38bdf8) 0 max(.09rem, calc(.22rem * var(--board-font-scale, 1))), transparent max(.09rem, calc(.22rem * var(--board-font-scale, 1)))),
      linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
  }
  #gameView .board-space .space-name,
  #gameView .edge-left .space-name,
  #gameView .edge-right .space-name {
    font-size: clamp(.27rem, calc(.58rem * var(--board-font-scale, 1)), .58rem);
    line-height: .9;
    margin: max(.03rem, calc(.24rem * var(--board-font-scale, 1))) .01rem 0;
    -webkit-line-clamp: 3;
  }
  #gameView .board-token {
    width: clamp(.42rem, calc(1rem * var(--board-token-scale, 1)), 1rem);
    height: clamp(.42rem, calc(1rem * var(--board-token-scale, 1)), 1rem);
    font-size: clamp(.25rem, calc(.62rem * var(--board-token-scale, 1)), .62rem);
    border-width: 1px;
  }
  #gameView .board-space .tokens-on-space {
    gap: calc(.06rem * var(--board-gap-scale, 1));
    padding-top: calc(.08rem * var(--board-gap-scale, 1));
  }
  .builder-board-preview {
    gap: calc(.18rem * var(--builder-gap-scale, 1));
    padding: calc(.38rem * var(--builder-gap-scale, 1));
  }
  .builder-board-space strong {
    font-size: clamp(.28rem, calc(.62rem * var(--builder-font-scale, 1)), .62rem);
  }
  .builder-space-no {
    font-size: clamp(.26rem, calc(.48rem * var(--builder-font-scale, 1)), .48rem);
  }
}

/* v1.8 gameplay animations and centre-board actions */
.mobile-owned-panel { display: none; }

.board-centre-live {
  width: min(92%, 30rem);
  display: grid;
  place-items: center;
  gap: .65rem;
}
.centre-dice-tray {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  font-weight: 900;
}
.centre-die {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .62rem;
  animation-delay: var(--die-delay, 0ms);
}
.empty-dice { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.rolling-die {
  animation: dieWobble calc(.7s * var(--animation-speed, 1)) cubic-bezier(.2,.9,.2,1.1) both;
  animation-delay: var(--die-delay, 0ms);
}
.dice-fly-in .centre-die {
  animation: diceRollIntoBoard calc(.9s * var(--animation-speed, 1)) cubic-bezier(.2,.9,.2,1.05) both;
  animation-delay: var(--die-delay, 0ms);
}
.chance-card-on-board,
.rent-card-on-board,
.centre-notice-card {
  width: min(100%, 24rem);
  border-radius: 24px;
  padding: 1rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
  display: grid;
  gap: .4rem;
  place-items: center;
  text-align: center;
}
.chance-card-on-board {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(145deg, rgba(167,139,250,.38), rgba(56,189,248,.16));
  animation: cardFlipIn calc(.55s * var(--animation-speed, 1)) cubic-bezier(.2,.85,.25,1.15) both;
}
.rent-card-on-board {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.25), transparent 34%),
    linear-gradient(145deg, rgba(253,186,116,.32), rgba(248,113,113,.14));
  animation: noticePop calc(.42s * var(--animation-speed, 1)) cubic-bezier(.2,.8,.2,1.15) both;
}
.centre-notice-card.notice-pop { animation: noticePop calc(.42s * var(--animation-speed, 1)) cubic-bezier(.2,.8,.2,1.15) both; }
.card-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .26rem .52rem;
  background: rgba(2,6,23,.38);
  border: 1px solid rgba(255,255,255,.15);
  color: #e0f2fe;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .64rem;
  font-weight: 950;
}
.chance-card-on-board strong,
.rent-card-on-board strong { font-size: 1.05rem; }
.chance-card-on-board p,
.rent-card-on-board p,
.centre-notice-card p { margin: 0; color: #eef6ff; font-weight: 800; line-height: 1.25; }
.centre-action { min-height: 2.35rem; padding: .52rem .85rem; margin-top: .2rem; }
.move-path-space::after {
  content: "";
  position: absolute;
  inset: .12rem;
  border-radius: inherit;
  border: 2px solid rgba(254,240,138,.9);
  box-shadow: 0 0 18px rgba(254,240,138,.38);
  pointer-events: none;
  opacity: 0;
  animation: pathPulse calc(.55s * var(--animation-speed, 1)) ease-out both;
  animation-delay: var(--path-delay, 0ms);
}
.board-token.token-jump {
  animation: tokenJump calc(.72s * var(--animation-speed, 1)) cubic-bezier(.2,.85,.25,1.25) both;
  animation-delay: var(--jump-delay, 0ms);
}
.property-card.owned-by-me {
  border-color: rgba(56,189,248,.32);
  background: linear-gradient(145deg, rgba(56,189,248,.13), rgba(255,255,255,.055));
}
.my-property-section,
.property-subsection { display: grid; gap: .55rem; }
.my-property-section h3,
.property-subsection h3 {
  margin: .15rem 0 0;
  font-size: .88rem;
  color: #e0f2fe;
}
.all-property-details {
  margin-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .65rem;
}
.all-property-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 850;
  margin-bottom: .6rem;
}

@keyframes dieWobble {
  0% { transform: translateY(-.65rem) rotate(-22deg) scale(.92); opacity: .25; }
  40% { transform: translateY(.15rem) rotate(19deg) scale(1.12); opacity: 1; }
  68% { transform: translateY(-.08rem) rotate(-9deg) scale(.98); }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
@keyframes diceRollIntoBoard {
  0% { transform: translateY(-8rem) rotate(-160deg) scale(.65); opacity: 0; }
  44% { transform: translateY(.4rem) rotate(45deg) scale(1.15); opacity: 1; }
  68% { transform: translateY(-.25rem) rotate(-15deg) scale(.96); }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
@keyframes tokenJump {
  0% { transform: translateY(0) scale(1); }
  28% { transform: translateY(-.9rem) scale(1.12); }
  58% { transform: translateY(.08rem) scale(.94); }
  78% { transform: translateY(-.25rem) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes pathPulse {
  0% { opacity: 0; transform: scale(.82); }
  22% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes cardFlipIn {
  0% { opacity: 0; transform: perspective(800px) rotateY(-72deg) translateY(.6rem) scale(.86); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0) translateY(0) scale(1); }
}
@keyframes noticePop {
  0% { opacity: 0; transform: translateY(.4rem) scale(.86); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  #gameView .mobile-owned-panel {
    display: block;
    order: 3;
    margin: 0 .45rem;
    border-radius: 18px;
    padding: .65rem;
  }
  #gameView .mobile-owned-panel .property-list {
    max-height: none;
    overflow: visible;
  }
  #gameView .mobile-owned-panel .property-card {
    border-radius: 14px;
    padding: .62rem;
  }
  #gameView .mobile-owned-panel .property-card small { font-size: .72rem; }
  #gameView .board-centre-live { width: 100%; gap: .25rem; }
  #gameView .centre-dice-tray { min-height: 1.4rem; padding: .16rem .28rem; gap: .16rem; }
  #gameView .centre-die { width: 1.05rem; height: 1.05rem; border-radius: .28rem; font-size: .55rem; }
  #gameView .chance-card-on-board,
  #gameView .rent-card-on-board,
  #gameView .centre-notice-card {
    width: 100%;
    border-radius: 12px;
    padding: .35rem;
    gap: .18rem;
  }
  #gameView .card-label { font-size: .42rem; padding: .12rem .25rem; letter-spacing: .06em; }
  #gameView .chance-card-on-board strong,
  #gameView .rent-card-on-board strong { font-size: .62rem; }
  #gameView .chance-card-on-board p,
  #gameView .rent-card-on-board p,
  #gameView .centre-notice-card p {
    font-size: .54rem;
    line-height: 1.05;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #gameView .centre-action {
    min-height: 1.6rem;
    padding: .18rem .38rem;
    font-size: .52rem;
  }
}


/* v1.9 settings, home and room-code join */
.join-code-help { margin-top: -.2rem; font-size: .82rem; }
#joinRoomCode { text-transform: uppercase; letter-spacing: .18em; font-weight: 950; text-align: center; }
#gameSettingsBtn { white-space: nowrap; }
.speed-scale-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  margin: .65rem 0 1rem;
  color: var(--muted);
  font-size: .82rem;
}
.speed-scale-row strong {
  color: #e0f2fe;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  padding: .35rem .7rem;
  min-width: 4.4rem;
  text-align: center;
}
.speed-scale-row span:last-child { text-align: right; }
#animationSpeedRange {
  width: 100%;
  accent-color: #38bdf8;
}
@media (max-width: 640px) {
  #gameView .compact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #gameView .compact-actions .btn { min-width: 0; }
}

/* v1.10 smoother own-turn movement and desktop fit */
.board-token.route-token {
  opacity: 0;
  transform-origin: center bottom;
  animation: routeTokenStep var(--route-duration, calc(.62s * var(--animation-speed, 1))) cubic-bezier(.2,.85,.25,1.2) both;
  animation-delay: var(--step-delay, 0ms);
  z-index: 3;
}

@keyframes routeTokenStep {
  0% { opacity: 0; transform: translateY(.2rem) scale(.7); }
  18% { opacity: 1; transform: translateY(-.7rem) scale(1.12); }
  58% { opacity: 1; transform: translateY(-.15rem) scale(1); }
  100% { opacity: 0; transform: translateY(.1rem) scale(.78); }
}

@media (min-width: 941px) {
  body.is-game-screen .app-header,
  body.is-game-screen #connectionBanner,
  body:has(#gameView:not(.hidden)) .app-header,
  body:has(#gameView:not(.hidden)) #connectionBanner {
    display: none;
  }

  body.is-game-screen main.shell,
  body:has(#gameView:not(.hidden)) main.shell {
    width: min(100% - 16px, 1680px);
  }

  #gameView:not(.hidden) {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .55rem;
    padding: .5rem 0;
    overflow: hidden;
  }

  #gameView .game-top-grid {
    margin: 0;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .54fr);
  }

  #gameView .turn-panel,
  #gameView .stats-panel,
  #gameView .board-shell,
  #gameView .side-stack .panel {
    border-radius: 18px;
    padding: .62rem;
  }

  #gameView .turn-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "label dice actions"
      "turn dice actions"
      "status dice actions";
    gap: .16rem .7rem;
    align-items: center;
  }

  #gameView .turn-panel .eyebrow { grid-area: label; margin: 0; }
  #gameView .turn-panel h2 { grid-area: turn; margin: 0; font-size: 1.22rem; line-height: 1.05; }
  #gameView #turnStatus { grid-area: status; margin: 0; font-size: .82rem; line-height: 1.2; }
  #gameView #diceDisplay { grid-area: dice; min-height: 0; margin: 0; }
  #gameView .action-buttons { grid-area: actions; justify-content: flex-end; gap: .36rem; max-width: 44rem; }
  #gameView .action-buttons .btn { min-height: 2.15rem; padding: .42rem .68rem; font-size: .78rem; }
  #gameView .die { width: 2.05rem; height: 2.05rem; border-radius: .55rem; }

  #gameView .stat-grid { gap: .38rem; }
  #gameView .stat-grid div { padding: .52rem .58rem; border-radius: 14px; }
  #gameView .stat-grid strong { font-size: 1rem; }
  #gameView .stat-grid span { font-size: .68rem; }
  #gameView .compact-actions { margin-top: .45rem; gap: .35rem; }
  #gameView .compact-actions .btn { min-height: 2.05rem; padding: .38rem .62rem; font-size: .72rem; flex: 1 1 auto; }

  #gameView .game-layout {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: .55rem;
  }

  #gameView .board-shell {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #gameView .board-shell .section-title {
    margin-bottom: .35rem;
  }

  #gameView .board-shell .section-title h2 { font-size: 1.02rem; }
  #gameView #youAreBadge { font-size: .72rem; padding: .32rem .52rem; }

  #gameView .board-grid {
    width: min(100%, calc(100dvh - 9.4rem), calc(100vw - 380px));
    max-width: 100%;
    min-width: 0;
    max-height: calc(100dvh - 9.4rem);
    margin: auto;
    grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
    grid-template-rows: repeat(var(--board-size), minmax(0, 1fr));
    gap: calc(.32rem * var(--board-gap-scale, 1));
    padding: calc(.55rem * var(--board-gap-scale, 1));
  }

  #gameView .board-centre { border-radius: 20px; padding: .55rem; gap: .35rem; }
  #gameView .board-centre-logo { font-size: clamp(1.35rem, 3.4vw, 3rem); }
  #gameView .board-centre p { font-size: .72rem; }
  #gameView .board-centre-stats span { font-size: .66rem; padding: .32rem .44rem; }
  #gameView .centre-dice-tray { min-height: 2rem; padding: .25rem .42rem; }
  #gameView .centre-die { width: 1.65rem; height: 1.65rem; border-radius: .44rem; font-size: .82rem; }

  #gameView .space-card.board-space {
    border-radius: max(5px, calc(12px * var(--board-font-scale, 1)));
    padding: max(.08rem, calc(.28rem * var(--board-font-scale, 1)));
  }
  #gameView .board-space .space-index { display: none; }
  #gameView .board-space .space-name,
  #gameView .edge-left .space-name,
  #gameView .edge-right .space-name {
    font-size: clamp(.28rem, calc(.72rem * var(--board-font-scale, 1)), .72rem);
    line-height: .9;
    margin: max(.03rem, calc(.18rem * var(--board-font-scale, 1))) 0 0;
    -webkit-line-clamp: 3;
  }
  #gameView .board-space .space-meta { font-size: clamp(.26rem, calc(.48rem * var(--board-font-scale, 1)), .48rem); }
  #gameView .board-grid.dense-board .board-space .space-meta,
  #gameView .board-grid.very-dense-board .board-space .space-meta { display: none; }
  #gameView .board-token {
    width: clamp(.45rem, calc(1.22rem * var(--board-token-scale, 1)), 1.22rem);
    height: clamp(.45rem, calc(1.22rem * var(--board-token-scale, 1)), 1.22rem);
    font-size: clamp(.26rem, calc(.7rem * var(--board-token-scale, 1)), .7rem);
    border-width: max(1px, calc(2px * var(--board-token-scale, 1)));
  }

  #gameView .side-stack {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, .78fr);
    gap: .55rem;
  }

  #gameView .side-stack .panel {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #gameView .side-stack .panel > .eyebrow,
  #gameView .side-stack .section-title { margin-bottom: .35rem; }
  #gameView .compact-list { gap: .35rem; }
  #gameView .compact-list .player-row { padding: .45rem; border-radius: 12px; gap: .38rem; }
  #gameView .character-token { width: 1.55rem; height: 1.55rem; font-size: .78rem; border-width: 2px; }
  #gameView .player-main strong { font-size: .78rem; }
  #gameView .player-main span { font-size: .62rem; }
  #gameView .player-money { font-size: .78rem; }
  #gameView .property-list,
  #gameView .log-list {
    max-height: none;
    overflow: auto;
    min-height: 0;
  }
  #gameView .property-card { padding: .48rem; border-radius: 12px; gap: .22rem; }
  #gameView .property-card small { font-size: .68rem; line-height: 1.18; }
  #gameView .log-item { font-size: .72rem; line-height: 1.24; }
}


/* v1.11 desktop overflow safety and better PC fit
   The v1.10 desktop view tried to lock the whole play screen to one viewport.
   On shorter PC displays this could cut the bottom of the board and prevent scrolling.
   These overrides keep the compact desktop dashboard, but allow the page to scroll if needed. */
@media (min-width: 941px) {
  body.is-game-screen,
  body:has(#gameView:not(.hidden)) {
    overflow-y: auto;
  }

  #gameView:not(.hidden) {
    min-height: 100svh;
    height: auto;
    overflow: visible;
    grid-template-rows: auto auto;
    align-content: start;
    padding-bottom: 1rem;
  }

  #gameView .game-top-grid {
    align-items: stretch;
  }

  #gameView .game-layout {
    min-height: 0;
    align-items: start;
  }

  #gameView .board-shell {
    min-height: 0;
    overflow: visible;
  }

  #gameView .board-grid {
    /* Shrinks earlier than v1.10 so the board title + controls do not push it off-screen. */
    width: min(100%, calc(100svh - 13rem), calc(100vw - 390px));
    min-width: 0;
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  #gameView .side-stack {
    min-height: 0;
    overflow: visible;
    grid-template-rows: auto auto auto;
    align-self: start;
  }

  #gameView .side-stack .panel {
    min-height: 0;
    overflow: visible;
  }

  #gameView .property-list,
  #gameView .log-list {
    max-height: min(24rem, 34svh);
    overflow: auto;
  }
}

@media (min-width: 941px) and (max-height: 760px) {
  body.is-game-screen main.shell,
  body:has(#gameView:not(.hidden)) main.shell {
    width: min(100% - 10px, 1680px);
  }

  #gameView:not(.hidden) {
    gap: .4rem;
    padding: .35rem 0 .7rem;
  }

  #gameView .game-top-grid,
  #gameView .game-layout,
  #gameView .side-stack {
    gap: .42rem;
  }

  #gameView .turn-panel,
  #gameView .stats-panel,
  #gameView .board-shell,
  #gameView .side-stack .panel {
    border-radius: 15px;
    padding: .45rem;
  }

  #gameView .turn-panel h2 {
    font-size: 1.02rem;
  }

  #gameView #turnStatus {
    font-size: .72rem;
  }

  #gameView .action-buttons .btn,
  #gameView .compact-actions .btn {
    min-height: 1.8rem;
    padding: .3rem .5rem;
    font-size: .68rem;
  }

  #gameView .die {
    width: 1.78rem;
    height: 1.78rem;
    font-size: .88rem;
  }

  #gameView .stat-grid div {
    padding: .38rem .42rem;
  }

  #gameView .stat-grid strong {
    font-size: .86rem;
  }

  #gameView .stat-grid span {
    font-size: .58rem;
  }

  #gameView .board-shell .section-title {
    margin-bottom: .2rem;
  }

  #gameView .board-shell .section-title h2 {
    font-size: .86rem;
  }

  #gameView .board-grid {
    width: min(100%, calc(100svh - 11.25rem), calc(100vw - 365px));
    gap: calc(.25rem * var(--board-gap-scale, 1));
    padding: calc(.42rem * var(--board-gap-scale, 1));
  }

  #gameView .side-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  #gameView .property-list,
  #gameView .log-list {
    max-height: 8.5rem;
  }
}

@media (min-width: 941px) and (max-height: 620px) {
  #gameView .game-top-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr);
  }

  #gameView .game-layout {
    grid-template-columns: minmax(0, 1fr) minmax(255px, 290px);
  }

  #gameView .board-grid {
    width: min(100%, calc(100svh - 10.25rem), calc(100vw - 340px));
  }

  #gameView .board-centre p,
  #gameView .board-centre-stats {
    display: none;
  }

  #gameView .property-list,
  #gameView .log-list {
    max-height: 6.8rem;
  }
}