@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap');

:root {
  --moon-white: #ECE8E8;
  --full-moon: #DFD9D9;
  --night-sky: #19191A;
  --peach: #F5AF94;
  --rose: #F5949D;
  --pink: #FF8AA8;
  --orchid: #F786C6;
  --mint: #90D79F;
  --teal: #6DD0A9;
  --sky: #7EAAD4;
  --cyan: #70BAD2;
  --bg: #0E0E0F;
  --card: #1C1C1E;
  --card2: #242426;
  --border: rgba(236,232,232,0.08);
  --text: #ECE8E8;
  --muted: #8A8480;
}

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

html, body {
  height: 100%;
}

body {
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* GRAIN OVERLAY */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}

/* LAYOUT */
.app { display: flex; min-height: 100vh; }

/* SIDEBAR */
.sidebar {
  width: 100%;
  height: 68px;
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 0 12px;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  gap: 0;
}

.logo-mark { display: none; }
.sidebar-bottom { display: none; }

.wallet-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
  animation: pulse 2s infinite;
}

.nav-item {
  flex: 1;
  max-width: 100px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  gap: 4px;
  position: relative;
}

.nav-item:hover {
  background: rgba(236,232,232,0.05);
}

.nav-item.active {
  background: rgba(245,175,148,0.12);
  border-color: rgba(245,175,148,0.25);
}

.nav-item svg {
  width: 20px;
  height: 20px;
  stroke: var(--muted);
  fill: none;
  transition: stroke 0.2s;
}

.nav-item.active svg { stroke: var(--peach); }
.nav-item:hover svg { stroke: var(--moon-white); }

.nav-label {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-item.active .nav-label { color: var(--peach); }

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.6; transform:scale(1.3); }
}

/* MAIN CONTENT */
.main {
  margin-left: 0;
  flex: 1;
  min-width: 0;
}

.page { display: none; padding: 20px 16px 88px; animation: fadeIn 0.3s ease; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* TOP BAR */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.page-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.chain-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(109,208,169,0.1);
  border: 1px solid rgba(109,208,169,0.2);
  padding: 6px 14px;
  border-radius: 100px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--teal);
}

.chain-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
}

/* ===== PLAY PAGE ===== */
.play-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

.board-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.board-title {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* LUDO BOARD */
.ludo-board {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  gap: 0;
  background: rgba(236,232,232,0.06);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

.cell {
  background: var(--card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  position: relative;
  transition: background 0.2s;
}

/* Home zones — outer ring only */
.cell.red-home    { background: rgba(225, 90, 120, 0.72); }
.cell.blue-home   { background: rgba(80, 140, 220, 0.72); }
.cell.green-home  { background: rgba(65, 190, 130, 0.72); }
.cell.yellow-home { background: rgba(235, 160, 75, 0.72); }
/* Yard interior — matches path tile (inherits base cell color) */
.cell.yard-inner  { background: var(--card2); }

/* Home column (colored lane leading to center) */
.cell.hc-red    { background: rgba(225, 90, 120, 0.72); }
.cell.hc-blue   { background: rgba(80, 140, 220, 0.72); }
.cell.hc-green  { background: rgba(65, 190, 130, 0.72); }
.cell.hc-yellow { background: rgba(235, 160, 75,  0.72); }

/* Yard token spot — colored circle behind each yard token */
.yard-spot {
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}
.yard-spot.red    { background: rgba(225, 90, 120, 0.28); border: 2px solid rgba(225, 90, 120, 0.75); }
.yard-spot.blue   { background: rgba(80, 140, 220, 0.28); border: 2px solid rgba(80, 140, 220, 0.75); }
.yard-spot.green  { background: rgba(65, 190, 130, 0.28); border: 2px solid rgba(65, 190, 130, 0.75); }
.yard-spot.yellow { background: rgba(235, 160, 75,  0.28); border: 2px solid rgba(235, 160, 75,  0.75); }

/* Safe cells */
.cell.safe {
  background: rgba(109,208,169,0.15);
}
.cell.safe::after {
  content: '★';
  font-size: 7px;
  color: var(--teal);
  opacity: 0.7;
}

/* Start cells — first path tile for each color (after safe so they win specificity race) */
.cell.start-blue   { background: rgba(80, 140, 220, 0.72); }
.cell.start-red    { background: rgba(225, 90, 120, 0.72); }
.cell.start-green  { background: rgba(65, 190, 130, 0.72); }
.cell.start-yellow { background: rgba(235, 160, 75,  0.72); }

/* Center — 4 triangles meeting at centre of the 3×3 block.
   Each cell gets conic-gradient(from 45deg) with the gradient origin
   positioned at the centre of the full 3×3 block in that cell's own
   coordinate space. Colour order: Yellow(right) Blue(bottom) Red(left) Green(top). */
.cell.center-g                          { background: conic-gradient(from 45deg at 150% 150%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }
.cell.center-mid[data-r="6"][data-c="7"]{ background: conic-gradient(from 45deg at  50% 150%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }
.cell.center-y                          { background: conic-gradient(from 45deg at -50% 150%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }
.cell.center-mid[data-r="7"][data-c="6"]{ background: conic-gradient(from 45deg at 150%  50%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }
.cell.center-mid[data-r="7"][data-c="7"]{ background: conic-gradient(from 45deg at  50%  50%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }
.cell.center-mid[data-r="7"][data-c="8"]{ background: conic-gradient(from 45deg at -50%  50%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }
.cell.center-r                          { background: conic-gradient(from 45deg at 150% -50%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }
.cell.center-mid[data-r="8"][data-c="7"]{ background: conic-gradient(from 45deg at  50% -50%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }
.cell.center-b                          { background: conic-gradient(from 45deg at -50% -50%, rgba(245,175,148,0.9) 0deg 90deg, rgba(126,170,212,0.9) 90deg 180deg, rgba(255,138,168,0.9) 180deg 270deg, rgba(144,215,159,0.9) 270deg 360deg); }

/* Tokens */
.token {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.token:hover { transform: scale(1.3) translate(-50%,-50%) !important; transform-origin: 0 0; }
.token.red { background: var(--pink); }
/* Movable token highlight (human turn) */
@keyframes lgPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.5); transform: translate(-50%,-50%) scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.5); transform: translate(-50%,-50%) scale(1.18); }
}
.token.lg-movable {
  animation: lgPulse 0.7s ease-in-out infinite;
  cursor: pointer !important;
  z-index: 10 !important;
}
.token.blue { background: var(--sky); }
.token.green { background: var(--mint); }
.token.yellow { background: var(--peach); }

/* Game Panel */
.game-panel { display: flex; flex-direction: column; gap: 16px; }

.panel-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}

.panel-card h3 {
  font-size: 12px;
  font-family: 'Space Mono', monospace;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

/* Player list */
.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.player-row:last-child { border-bottom: none; }

.player-color {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}

.player-info { flex: 1; }
.player-name { font-size: 14px; font-weight: 600; }
.player-wallet { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); }

.player-tokens {
  display: flex;
  gap: 4px;
}
.mini-token {
  width: 8px; height: 8px; border-radius: 50%;
  opacity: 0.4;
}
.mini-token.home { opacity: 1; }

.current-player { background: rgba(245,175,148,0.06); border-radius: 10px; padding: 10px; }

/* Dice */
.dice-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dice {
  width: 64px;
  height: 64px;
  background: var(--card2);
  border: 2px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 10px;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
.dice:hover { border-color: var(--peach); transform: scale(1.05); }
.dice.rolling { animation: rollDice 0.4s ease; }

@keyframes rollDice {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(15deg) scale(0.9); }
  50% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(5deg) scale(0.95); }
  100% { transform: rotate(0deg) scale(1); }
}

.dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
}
.dot.active { background: var(--moon-white); }
.dot.active.center { background: var(--peach); }

.roll-btn {
  background: linear-gradient(135deg, var(--peach), var(--rose));
  color: var(--night-sky);
  border: none;
  padding: 12px 28px;
  border-radius: 12px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}
.roll-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,148,157,0.3); }
.roll-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.dice-result {
  font-family: 'Space Mono', monospace;
  font-size: 32px;
  font-weight: 700;
  color: var(--peach);
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* Stake card */
.stake-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.stake-label { font-size: 13px; color: var(--muted); }
.stake-value { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--teal); }
.stake-total { font-family: 'Space Mono', monospace; font-size: 18px; color: var(--peach); font-weight: 700; }

.game-status {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(109,208,169,0.12);
  color: var(--teal);
  border: 1px solid rgba(109,208,169,0.2);
  text-align: center;
}

/* ===== LOBBY ===== */
.lobby-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: start;
}

.lobby-section-title {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

/* Create game card */
.create-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}

.stake-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.stake-input-label { font-size: 13px; color: var(--muted); flex: 1; }
.stake-input {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  width: 110px;
  outline: none;
  text-align: right;
  transition: border-color 0.2s;
}
.stake-input:focus { border-color: rgba(245,175,148,0.4); }

.player-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.player-count-label { font-size: 13px; color: var(--muted); flex: 1; }
.count-btn {
  width: 30px; height: 30px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.count-btn:hover { border-color: rgba(245,175,148,0.4); }
.count-val {
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
  color: var(--peach);
}

/* Opponent type toggle */
.opp-toggle {
  display: flex;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.opp-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.opp-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.opp-btn.active.pvp { color: var(--sky); }
.opp-btn.active.pve { color: var(--teal); }

/* Player count (2/3/4) pill row */
.count-pill-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.count-pill {
  flex: 1;
  padding: 9px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--muted);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.count-pill:hover { border-color: rgba(236,232,232,0.2); color: var(--text); }
.count-pill.selected {
  border-color: var(--peach);
  background: rgba(245,175,148,0.1);
  color: var(--peach);
}

/* Color picker row */
.color-pick-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.color-swatch {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 4px;
}
.color-swatch:hover { transform: scale(1.06); }
.color-swatch.selected { border-color: white; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
.color-swatch .swatch-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
}

/* Create card section labels */
.create-row-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

/* Available games list */
.available-games { display: flex; flex-direction: column; gap: 10px; }

.avail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.avail-card:hover { border-color: rgba(245,175,148,0.3); background: rgba(245,175,148,0.03); }

.avail-mode-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.avail-info h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.avail-meta { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); }

.avail-slots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.slot-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.slot-dot.filled { background: var(--peach); }
.slot-dot.empty { background: rgba(236,232,232,0.1); border: 1px solid var(--border); }

.join-btn {
  background: rgba(109,208,169,0.12);
  border: 1px solid rgba(109,208,169,0.25);
  color: var(--teal);
  padding: 7px 16px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.join-btn:hover { background: rgba(109,208,169,0.2); }

.avail-stake {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--peach);
}

.empty-games {
  background: var(--card);
  border: 1px dashed rgba(236,232,232,0.1);
  border-radius: 14px;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
}
.empty-games .empty-icon { font-size: 32px; margin-bottom: 10px; }

/* Waiting room */
.waiting-room {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-top: 14px;
  animation: fadeIn 0.3s ease;
}
.waiting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.player-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.player-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 0.2s;
}
.player-slot.filled { border-color: rgba(109,208,169,0.25); }
.player-slot.you { border-color: rgba(245,175,148,0.3); }
.player-slot.empty { opacity: 0.45; }
.slot-color-dot {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.slot-name { flex: 1; font-size: 13px; font-weight: 600; }
.slot-addr { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); }
.slot-badge {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.slot-badge.ready { background: rgba(109,208,169,0.15); color: var(--teal); }
.slot-badge.waiting { background: rgba(245,175,148,0.1); color: var(--peach); }
.slot-badge.empty-badge { color: var(--muted); }

.waiting-status {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 12px;
}
.ready-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--teal), var(--sky));
  color: var(--night-sky);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.ready-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(109,208,169,0.3); }
.ready-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.ready-btn.is-ready { background: linear-gradient(135deg, rgba(109,208,169,0.2), rgba(109,208,169,0.1)); color: var(--teal); border: 1px solid rgba(109,208,169,0.3); }

/* ===== LEAVE WARNING MODAL ===== */
.warn-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,14,15,0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6000;
  padding: 20px;
  animation: fadeIn 0.18s ease;
}
.warn-box {
  background: var(--card);
  border: 1px solid rgba(245,148,157,0.25);
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  animation: warnPop 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes warnPop {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.warn-icon {
  font-size: 36px;
  text-align: center;
  margin-bottom: 12px;
}
.warn-title {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
}
.warn-msg {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 22px;
}
.warn-host-badge {
  display: inline-block;
  background: rgba(245,148,157,0.12);
  border: 1px solid rgba(245,148,157,0.3);
  color: var(--rose);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.warn-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.warn-stay {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.warn-stay:hover { background: rgba(236,232,232,0.06); }
.warn-leave {
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #F5949D, #FF8AA8);
  color: var(--night-sky);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.warn-leave:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,148,157,0.35); }

/* Room disbanded banner */
.disbanded-banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid rgba(245,148,157,0.4);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4000;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  white-space: nowrap;
  animation: slideDown 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
@keyframes slideDown {
  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}
.disbanded-banner .db-icon { font-size: 16px; }
.disbanded-banner strong { color: var(--rose); display: block; font-size: 12px; margin-bottom: 2px; }

/* Countdown overlay */
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,14,15,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  animation: fadeIn 0.3s ease;
}
.countdown-num {
  font-size: 120px;
  font-weight: 800;
  color: var(--peach);
  line-height: 1;
  animation: countPop 1s ease;
}
@keyframes countPop {
  0% { transform: scale(1.4); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}
.countdown-label {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Live game view */
#live-game-view { display: none; }
#lobby-view { display: block; }

/* ===== HISTORY PAGE ===== */
.history-grid {
  display: grid;
  gap: 12px;
}

.history-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
  transition: border-color 0.2s;
  cursor: pointer;
}
.history-card:hover { border-color: rgba(236,232,232,0.15); }

.game-id {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.game-details h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.game-meta { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--muted); }

.game-players { display: flex; gap: -4px; }
.player-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--card);
  margin-left: -6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.player-avatar:first-child { margin-left: 0; }

.result-badge {
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.result-badge.win { background: rgba(109,208,169,0.15); color: var(--teal); border: 1px solid rgba(109,208,169,0.25); }
.result-badge.loss { background: rgba(255,138,168,0.1); color: var(--pink); border: 1px solid rgba(255,138,168,0.2); }

.pnl-value { font-family: 'Space Mono', monospace; font-size: 16px; font-weight: 700; }
.pnl-value.pos { color: var(--teal); }
.pnl-value.neg { color: var(--rose); }

/* Filter bar */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover { border-color: rgba(236,232,232,0.2); color: var(--text); }
.filter-btn.active {
  background: rgba(245,175,148,0.12);
  border-color: var(--peach);
  color: var(--peach);
}

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
.stat-num { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.stat-label { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

/* ===== LEADERBOARD PAGE ===== */
.leaderboard-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.lb-header {
  display: grid;
  grid-template-columns: 60px 1fr 120px 120px 100px 100px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lb-row {
  display: grid;
  grid-template-columns: 60px 1fr 120px 120px 100px 100px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background 0.2s;
  cursor: pointer;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: rgba(236,232,232,0.02); }

.lb-row.rank-1 { background: rgba(245,175,148,0.05); }
.lb-row.rank-2 { background: rgba(109,208,169,0.03); }
.lb-row.rank-3 { background: rgba(126,170,212,0.03); }

.rank-num {
  font-family: 'Space Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
}
.rank-1 .rank-num { color: var(--peach); }
.rank-2 .rank-num { color: var(--teal); }
.rank-3 .rank-num { color: var(--sky); }

.lb-player { display: flex; align-items: center; gap: 12px; }
.lb-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 800;
}

.lb-name { font-size: 14px; font-weight: 700; }
.lb-addr { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); }

.lb-num { font-family: 'Space Mono', monospace; font-size: 14px; }
.lb-earn { font-family: 'Space Mono', monospace; font-size: 14px; color: var(--teal); }

.wr-bar {
  height: 4px;
  background: rgba(236,232,232,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.wr-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--sky)); }

.trophy { font-size: 18px; }

/* Season card */
.season-banner {
  background: linear-gradient(135deg, rgba(245,175,148,0.15), rgba(109,208,169,0.1));
  border: 1px solid rgba(245,175,148,0.2);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.season-info h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.season-info p { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--muted); }
.season-prize {
  text-align: right;
}
.prize-amt { font-family: 'Space Mono', monospace; font-size: 28px; font-weight: 700; color: var(--peach); }
.prize-label { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); text-transform: uppercase; }

/* ===== PROFILE PAGE ===== */
.profile-hero {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.profile-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,175,148,0.12), transparent 70%);
  pointer-events: none;
}

.profile-avatar {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--peach), var(--rose));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  font-weight: 800;
  flex-shrink: 0;
  color: var(--night-sky);
}

.profile-main { flex: 1; }
.profile-username { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.profile-address { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.profile-tags { display: flex; gap: 8px; }

.tag {
  padding: 4px 12px;
  border-radius: 100px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  border: 1px solid;
}
.tag.gold { color: var(--peach); border-color: rgba(245,175,148,0.3); background: rgba(245,175,148,0.08); }
.tag.teal { color: var(--teal); border-color: rgba(109,208,169,0.3); background: rgba(109,208,169,0.08); }
.tag.sky { color: var(--sky); border-color: rgba(126,170,212,0.3); background: rgba(126,170,212,0.08); }

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-stats-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.p-stat {
  padding: 14px;
  background: var(--card2);
  border-radius: 10px;
}
.p-stat-val { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.p-stat-lbl { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--muted); text-transform: uppercase; }

/* NFT grid */
.nft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.nft-card {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
  background: var(--card2);
  position: relative;
  overflow: hidden;
}
.nft-card:hover { transform: scale(1.04); border-color: rgba(236,232,232,0.2); }

.nft-rarity {
  position: absolute;
  top: 6px; right: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(14,14,15,0.8);
}

/* Achievement list */
.achievement-list { display: flex; flex-direction: column; gap: 8px; }
.achievement {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card2);
  border-radius: 10px;
}
.ach-icon { font-size: 20px; }
.ach-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ach-desc { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); }
.ach-badge { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 10px; color: var(--peach); }

/* ===== SETTINGS PAGE ===== */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}

.settings-nav {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.settings-nav-item {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s;
  border-bottom: 1px solid var(--border);
}
.settings-nav-item:last-child { border-bottom: none; }
.settings-nav-item:hover { background: rgba(236,232,232,0.04); }
.settings-nav-item.active { background: rgba(245,175,148,0.08); color: var(--peach); }
.settings-nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }

.settings-content { display: flex; flex-direction: column; gap: 16px; }

.settings-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.settings-section-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }

.settings-row-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.settings-row-info p { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--muted); }

/* Toggle */
.toggle {
  width: 44px; height: 24px;
  background: rgba(236,232,232,0.1);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  flex-shrink: 0;
}
.toggle.on { background: var(--teal); }
.toggle::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  top: 3px; left: 3px;
  transition: transform 0.3s;
}
.toggle.on::after { transform: translateX(20px); }

/* Select */
.settings-select {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

/* Wallet section */
.wallet-card {
  background: var(--card2);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 22px;
}
.wallet-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(245,175,148,0.1); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.wallet-addr { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--text); font-weight: 700; }
.wallet-bal { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 2px; }
.disconnect-btn {
  margin-left: auto;
  background: rgba(255,138,168,0.1);
  border: 1px solid rgba(255,138,168,0.2);
  color: var(--pink);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.disconnect-btn:hover { background: rgba(255,138,168,0.2); }

/* Color theme selector */
.color-options { display: flex; gap: 10px; padding: 0 22px 16px; }
.color-opt {
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
}
.color-opt:hover { transform: scale(1.15); }
.color-opt.selected { border-color: white; }

/* Input */
.settings-input {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  outline: none;
  width: 180px;
  transition: border-color 0.2s;
}
.settings-input:focus { border-color: rgba(245,175,148,0.4); }

/* SHARED COMPONENTS */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.section-title {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover { border-color: rgba(236,232,232,0.2); color: var(--text); }

.mega-btn {
  background: linear-gradient(135deg, var(--peach), var(--rose));
  color: var(--night-sky);
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.mega-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245,148,157,0.25); }

/* Mode selector */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.mode-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.mode-card:hover { border-color: rgba(236,232,232,0.15); }
.mode-card.selected {
  border-color: var(--peach);
  background: rgba(245,175,148,0.08);
}
.mode-card .mode-icon { font-size: 22px; margin-bottom: 6px; }
.mode-card .mode-name { font-size: 12px; font-weight: 700; }
.mode-card .mode-stake { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 2px; }

/* TX notification */
.tx-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card);
  border: 1px solid rgba(109,208,169,0.3);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  animation: slideUp 0.3s ease;
  display: none;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.tx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: pulse 1s infinite; }
.tx-text { font-family: 'Space Mono', monospace; font-size: 11px; }
.tx-text strong { display: block; color: var(--teal); font-size: 12px; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(236,232,232,0.1); border-radius: 2px; }

/* ===== BOARD THEME PICKER ===== */
.board-theme-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 2px;
  flex-wrap: wrap;
  justify-content: center;
}
.board-theme-bar .bt-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  width: 100%;
  text-align: center;
  margin-bottom: 2px;
}
.bt-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--muted);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.bt-chip:hover { border-color: rgba(236,232,232,0.2); color: var(--text); }
.bt-chip.active {
  border-color: var(--peach);
  background: rgba(245,175,148,0.12);
  color: var(--peach);
}
.bt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.bt-theme-desc {
  width: 100%;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  margin-top: 6px;
  min-height: 13px;
  letter-spacing: 0.3px;
  transition: opacity 0.2s;
}

/* ===== BOARD THEMES ===== */

/* --- PASTEL theme --- */
.ludo-board.theme-pastel {
  background: #2D5965;
  border-color: #2D5965;
  gap: 0;
}
.ludo-board.theme-pastel .cell { background: #F5F0E8; }
.ludo-board.theme-pastel .cell.yard-inner { background: #F5F0E8; }
.ludo-board.theme-pastel .cell.red-home    { background: #F5A0A8; }
.ludo-board.theme-pastel .cell.blue-home   { background: #8DC8E0; }
.ludo-board.theme-pastel .cell.green-home  { background: #7DD5B0; }
.ludo-board.theme-pastel .cell.yellow-home { background: #F9A8D2; }
.ludo-board.theme-pastel .cell.safe        { background: #B8E8D0; }
.ludo-board.theme-pastel .cell.safe::after { color: #2D9969; }
.ludo-board.theme-pastel .cell.center-g                          { background: conic-gradient(from 45deg at 150% 150%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .cell.center-mid[data-r="6"][data-c="7"]{ background: conic-gradient(from 45deg at  50% 150%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .cell.center-y                          { background: conic-gradient(from 45deg at -50% 150%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .cell.center-mid[data-r="7"][data-c="6"]{ background: conic-gradient(from 45deg at 150%  50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .cell.center-mid[data-r="7"][data-c="7"]{ background: conic-gradient(from 45deg at  50%  50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .cell.center-mid[data-r="7"][data-c="8"]{ background: conic-gradient(from 45deg at -50%  50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .cell.center-r                          { background: conic-gradient(from 45deg at 150% -50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .cell.center-mid[data-r="8"][data-c="7"]{ background: conic-gradient(from 45deg at  50% -50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .cell.center-b                          { background: conic-gradient(from 45deg at -50% -50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-pastel .token.red    { background: #F5949D; border-color: rgba(255,255,255,0.6); }
.ludo-board.theme-pastel .token.blue   { background: #70BAD2; border-color: rgba(255,255,255,0.6); }
.ludo-board.theme-pastel .token.green  { background: #6DD0A9; border-color: rgba(255,255,255,0.6); }
.ludo-board.theme-pastel .token.yellow { background: #F786C6; border-color: rgba(255,255,255,0.6); }
.ludo-board.theme-pastel .cell.start-red    { background: #F5A0A8; }
.ludo-board.theme-pastel .cell.start-blue   { background: #8DC8E0; }
.ludo-board.theme-pastel .cell.start-green  { background: #7DD5B0; }
.ludo-board.theme-pastel .cell.start-yellow { background: #F9A8D2; }
.ludo-board.theme-pastel .cell.hc-red    { background: #F5A0A8; }
.ludo-board.theme-pastel .cell.hc-blue   { background: #8DC8E0; }
.ludo-board.theme-pastel .cell.hc-green  { background: #7DD5B0; }
.ludo-board.theme-pastel .cell.hc-yellow { background: #F9A8D2; }

/* --- SKETCH theme --- */
.ludo-board.theme-sketch {
  background: #2A586A;
  border: 3px solid #1E404F;
  gap: 0;
  border-radius: 6px;
}
.ludo-board.theme-sketch .cell { background: #EDE8E0; border-radius: 0; }
.ludo-board.theme-sketch .cell.yard-inner { background: #EDE8E0; }
.ludo-board.theme-sketch .cell.red-home    { background: rgba(245,148,157,0.38); }
.ludo-board.theme-sketch .cell.blue-home   { background: rgba(112,186,210,0.38); }
.ludo-board.theme-sketch .cell.green-home  { background: rgba(109,208,169,0.38); }
.ludo-board.theme-sketch .cell.yellow-home { background: rgba(247,134,198,0.38); }
.ludo-board.theme-sketch .cell.safe        { background: rgba(109,208,169,0.25); }
.ludo-board.theme-sketch .cell.safe::after { content: '★'; color: #2A8C6A; }
.ludo-board.theme-sketch .cell.center-g                          { background: conic-gradient(from 45deg at 150% 150%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .cell.center-mid[data-r="6"][data-c="7"]{ background: conic-gradient(from 45deg at  50% 150%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .cell.center-y                          { background: conic-gradient(from 45deg at -50% 150%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .cell.center-mid[data-r="7"][data-c="6"]{ background: conic-gradient(from 45deg at 150%  50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .cell.center-mid[data-r="7"][data-c="7"]{ background: conic-gradient(from 45deg at  50%  50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .cell.center-mid[data-r="7"][data-c="8"]{ background: conic-gradient(from 45deg at -50%  50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .cell.center-r                          { background: conic-gradient(from 45deg at 150% -50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .cell.center-mid[data-r="8"][data-c="7"]{ background: conic-gradient(from 45deg at  50% -50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .cell.center-b                          { background: conic-gradient(from 45deg at -50% -50%, #F786C6 0deg 90deg, #70BAD2 90deg 180deg, #F5949D 180deg 270deg, #6DD0A9 270deg 360deg); }
.ludo-board.theme-sketch .token.red    { background: #F5949D; border: 2px solid #c0505a; box-shadow: 1px 2px 0 rgba(0,0,0,0.3); }
.ludo-board.theme-sketch .token.blue   { background: #70BAD2; border: 2px solid #3a7fa0; box-shadow: 1px 2px 0 rgba(0,0,0,0.3); }
.ludo-board.theme-sketch .token.green  { background: #6DD0A9; border: 2px solid #3a9070; box-shadow: 1px 2px 0 rgba(0,0,0,0.3); }
.ludo-board.theme-sketch .token.yellow { background: #F786C6; border: 2px solid #c04898; box-shadow: 1px 2px 0 rgba(0,0,0,0.3); }
.ludo-board.theme-sketch .cell.start-red    { background: rgba(245,148,157,0.65); }
.ludo-board.theme-sketch .cell.start-blue   { background: rgba(112,186,210,0.65); }
.ludo-board.theme-sketch .cell.start-green  { background: rgba(109,208,169,0.65); }
.ludo-board.theme-sketch .cell.start-yellow { background: rgba(247,134,198,0.65); }
.ludo-board.theme-sketch .cell.hc-red    { background: rgba(245,148,157,0.65); }
.ludo-board.theme-sketch .cell.hc-blue   { background: rgba(112,186,210,0.65); }
.ludo-board.theme-sketch .cell.hc-green  { background: rgba(109,208,169,0.65); }
.ludo-board.theme-sketch .cell.hc-yellow { background: rgba(247,134,198,0.65); }

/* --- NEON theme --- */
.ludo-board.theme-neon {
  background: #080810;
  border: 1px solid rgba(255,255,255,0.05);
  gap: 0;
}
.ludo-board.theme-neon .cell { background: #0E0E1C; }
.ludo-board.theme-neon .cell.yard-inner { background: #0E0E1C; }
.ludo-board.theme-neon .cell.red-home    { background: #FF3250; box-shadow: inset 0 0 8px rgba(255,50,80,0.6); }
.ludo-board.theme-neon .cell.blue-home   { background: #3296FF; box-shadow: inset 0 0 8px rgba(50,150,255,0.6); }
.ludo-board.theme-neon .cell.green-home  { background: #32FF96; box-shadow: inset 0 0 8px rgba(50,255,150,0.6); }
.ludo-board.theme-neon .cell.yellow-home { background: #C832FF; box-shadow: inset 0 0 8px rgba(200,50,255,0.6); }
.ludo-board.theme-neon .cell.safe        { background: rgba(50,255,150,0.2); box-shadow: inset 0 0 10px rgba(50,255,150,0.2); }
.ludo-board.theme-neon .cell.safe::after { color: #32FF96; text-shadow: 0 0 6px #32FF96; }
.ludo-board.theme-neon .cell.center-g                          { background: conic-gradient(from 45deg at 150% 150%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .cell.center-mid[data-r="6"][data-c="7"]{ background: conic-gradient(from 45deg at  50% 150%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .cell.center-y                          { background: conic-gradient(from 45deg at -50% 150%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .cell.center-mid[data-r="7"][data-c="6"]{ background: conic-gradient(from 45deg at 150%  50%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .cell.center-mid[data-r="7"][data-c="7"]{ background: conic-gradient(from 45deg at  50%  50%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .cell.center-mid[data-r="7"][data-c="8"]{ background: conic-gradient(from 45deg at -50%  50%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .cell.center-r                          { background: conic-gradient(from 45deg at 150% -50%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .cell.center-mid[data-r="8"][data-c="7"]{ background: conic-gradient(from 45deg at  50% -50%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .cell.center-b                          { background: conic-gradient(from 45deg at -50% -50%, #C832FF 0deg 90deg, #3296FF 90deg 180deg, #FF3250 180deg 270deg, #32FF96 270deg 360deg); }
.ludo-board.theme-neon .token.red    { background: #FF3250; border-color: #FF3250; box-shadow: 0 0 10px #FF3250, 0 0 20px rgba(255,50,80,0.5); }
.ludo-board.theme-neon .token.blue   { background: #3296FF; border-color: #3296FF; box-shadow: 0 0 10px #3296FF, 0 0 20px rgba(50,150,255,0.5); }
.ludo-board.theme-neon .token.green  { background: #32FF96; border-color: #32FF96; box-shadow: 0 0 10px #32FF96, 0 0 20px rgba(50,255,150,0.5); }
.ludo-board.theme-neon .token.yellow { background: #C832FF; border-color: #C832FF; box-shadow: 0 0 10px #C832FF, 0 0 20px rgba(200,50,255,0.5); }
.ludo-board.theme-neon .cell.start-red    { background: rgba(255,50,80,0.55);   box-shadow: inset 0 0 10px rgba(255,50,80,0.4); }
.ludo-board.theme-neon .cell.start-blue   { background: rgba(50,150,255,0.55);  box-shadow: inset 0 0 10px rgba(50,150,255,0.4); }
.ludo-board.theme-neon .cell.start-green  { background: rgba(50,255,150,0.55);  box-shadow: inset 0 0 10px rgba(50,255,150,0.4); }
.ludo-board.theme-neon .cell.start-yellow { background: rgba(200,50,255,0.55);  box-shadow: inset 0 0 10px rgba(200,50,255,0.4); }
.ludo-board.theme-neon .cell.hc-red    { background: #FF3250; box-shadow: inset 0 0 10px rgba(255,50,80,0.6); }
.ludo-board.theme-neon .cell.hc-blue   { background: #3296FF; box-shadow: inset 0 0 10px rgba(50,150,255,0.6); }
.ludo-board.theme-neon .cell.hc-green  { background: #32FF96; box-shadow: inset 0 0 10px rgba(50,255,150,0.6); }
.ludo-board.theme-neon .cell.hc-yellow { background: #C832FF; box-shadow: inset 0 0 10px rgba(200,50,255,0.6); }

/* --- CLASSIC 3D theme --- */
.ludo-board.theme-classic {
  background: #1A2F4A;
  border: 2px solid #1A2F4A;
  gap: 0;
  border-radius: 8px;
}
.ludo-board.theme-classic .cell { background: #FFFFFF; }
.ludo-board.theme-classic .cell.yard-inner { background: #FFFFFF; }
.ludo-board.theme-classic .cell.red-home    { background: #E85555; }
.ludo-board.theme-classic .cell.blue-home   { background: #5B9BD5; }
.ludo-board.theme-classic .cell.green-home  { background: #6DBF73; }
.ludo-board.theme-classic .cell.yellow-home { background: #F0C040; }
.ludo-board.theme-classic .cell.safe        { background: #A8E6CF; }
.ludo-board.theme-classic .cell.safe::after { color: #1A6A4A; }
.ludo-board.theme-classic .cell.center-g                          { background: conic-gradient(from 45deg at 150% 150%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .cell.center-mid[data-r="6"][data-c="7"]{ background: conic-gradient(from 45deg at  50% 150%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .cell.center-y                          { background: conic-gradient(from 45deg at -50% 150%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .cell.center-mid[data-r="7"][data-c="6"]{ background: conic-gradient(from 45deg at 150%  50%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .cell.center-mid[data-r="7"][data-c="7"]{ background: conic-gradient(from 45deg at  50%  50%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .cell.center-mid[data-r="7"][data-c="8"]{ background: conic-gradient(from 45deg at -50%  50%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .cell.center-r                          { background: conic-gradient(from 45deg at 150% -50%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .cell.center-mid[data-r="8"][data-c="7"]{ background: conic-gradient(from 45deg at  50% -50%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .cell.center-b                          { background: conic-gradient(from 45deg at -50% -50%, #F0C040 0deg 90deg, #5B9BD5 90deg 180deg, #E85555 180deg 270deg, #6DBF73 270deg 360deg); }
.ludo-board.theme-classic .token.red    { background: #E85555; border-color: rgba(255,255,255,0.7); box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.ludo-board.theme-classic .token.blue   { background: #5B9BD5; border-color: rgba(255,255,255,0.7); box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.ludo-board.theme-classic .token.green  { background: #6DBF73; border-color: rgba(255,255,255,0.7); box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.ludo-board.theme-classic .token.yellow { background: #F0C040; border-color: rgba(255,255,255,0.7); box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
.ludo-board.theme-classic .cell.start-red    { background: #E85555; }
.ludo-board.theme-classic .cell.start-blue   { background: #5B9BD5; }
.ludo-board.theme-classic .cell.start-green  { background: #6DBF73; }
.ludo-board.theme-classic .cell.start-yellow { background: #F0C040; }
.ludo-board.theme-classic .cell.hc-red    { background: #E85555; }
.ludo-board.theme-classic .cell.hc-blue   { background: #5B9BD5; }
.ludo-board.theme-classic .cell.hc-green  { background: #6DBF73; }
.ludo-board.theme-classic .cell.hc-yellow { background: #F0C040; }

/* --- DEV (all-white wireframe) theme --- */
.ludo-board.theme-dev {
  background: #D0D0D0;
  border: 1.5px solid #B0B0B0;
  gap: 0;
  border-radius: 8px;
}
/* Base: every cell is white */
.ludo-board.theme-dev .cell,
.ludo-board.theme-dev .cell.red-home,
.ludo-board.theme-dev .cell.blue-home,
.ludo-board.theme-dev .cell.green-home,
.ludo-board.theme-dev .cell.yellow-home,
.ludo-board.theme-dev .cell.yard-inner,
.ludo-board.theme-dev .cell.hc-red,
.ludo-board.theme-dev .cell.hc-blue,
.ludo-board.theme-dev .cell.hc-green,
.ludo-board.theme-dev .cell.hc-yellow,
.ludo-board.theme-dev .cell.start-red,
.ludo-board.theme-dev .cell.start-blue,
.ludo-board.theme-dev .cell.start-green,
.ludo-board.theme-dev .cell.start-yellow,
.ludo-board.theme-dev .cell.safe,
.ludo-board.theme-dev .cell.center-r,
.ludo-board.theme-dev .cell.center-b,
.ludo-board.theme-dev .cell.center-g,
.ludo-board.theme-dev .cell.center-y,
.ludo-board.theme-dev .cell.center-mid  { background: #FFFFFF; border: none; box-shadow: none; }
/* Path cells — grid defined by board gap only (no extra outline) */
/* Safe star hidden in dev */
.ludo-board.theme-dev .cell.safe::after { color: #CCCCCC; }
/* Tokens: white fill, mid-grey ring */
.ludo-board.theme-dev .token            { background: #FFFFFF !important; border: 2px solid #999999 !important; box-shadow: none !important; }
/* Yard spots: invisible fill, grey ring */
.ludo-board.theme-dev .yard-spot        { background: transparent !important; border: 1.5px solid #CCCCCC !important; }
/* Overflow visible so annotation labels can extend outside board bounds */
.ludo-board.theme-dev                   { overflow: visible; }

/* ===== PATH & HOME-COLUMN CELL GRID LINES =====
   With gap:0 the board is fully seamless. Inset box-shadow on path/hc cells
   recreates the visible grid lines without affecting layout.
   Home yard and centre cells have NO inset → they appear as solid blocks.  */

/* Default theme — white tile grid */
.cell[data-path],
.cell.hc-red, .cell.hc-blue, .cell.hc-green, .cell.hc-yellow {
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.5);
}

/* Pastel */
.ludo-board.theme-pastel .cell[data-path],
.ludo-board.theme-pastel .cell.hc-red,
.ludo-board.theme-pastel .cell.hc-blue,
.ludo-board.theme-pastel .cell.hc-green,
.ludo-board.theme-pastel .cell.hc-yellow {
  box-shadow: inset 0 0 0 0.5px #2D5965;
}

/* Sketch */
.ludo-board.theme-sketch .cell[data-path],
.ludo-board.theme-sketch .cell.hc-red,
.ludo-board.theme-sketch .cell.hc-blue,
.ludo-board.theme-sketch .cell.hc-green,
.ludo-board.theme-sketch .cell.hc-yellow {
  box-shadow: inset 0 0 0 0.5px #2A586A;
}

/* Neon — glowing white grid */
.ludo-board.theme-neon .cell[data-path],
.ludo-board.theme-neon .cell.hc-red,
.ludo-board.theme-neon .cell.hc-blue,
.ludo-board.theme-neon .cell.hc-green,
.ludo-board.theme-neon .cell.hc-yellow {
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.55), inset 0 0 6px rgba(255,255,255,0.08);
}

/* Classic */
.ludo-board.theme-classic .cell[data-path],
.ludo-board.theme-classic .cell.hc-red,
.ludo-board.theme-classic .cell.hc-blue,
.ludo-board.theme-classic .cell.hc-green,
.ludo-board.theme-classic .cell.hc-yellow {
  box-shadow: inset 0 0 0 0.5px #1A2F4A;
}

/* Dev — white hairline grid */
.ludo-board.theme-dev .cell[data-path],
.ludo-board.theme-dev .cell.hc-red,
.ludo-board.theme-dev .cell.hc-blue,
.ludo-board.theme-dev .cell.hc-green,
.ludo-board.theme-dev .cell.hc-yellow {
  box-shadow: inset 0 0 0 0.5px rgba(150,150,150,0.6);
}

/* ===== HOME YARD OUTER BOUNDARY =====
   ::before  = horizontal edges (top / bottom)
   ::after   = vertical   edges (left / right)
   Corner cells match both selectors and naturally get two sides.
   All pseudo-elements are position:absolute inside position:relative .cell,
   so they are unaffected by border/box-shadow overrides and overflow:hidden. */

/* Shared style */
.ludo-board .cell.red-home[data-r="0"]::before,
.ludo-board .cell.green-home[data-r="0"]::before,
.ludo-board .cell.blue-home[data-r="9"]::before,
.ludo-board .cell.yellow-home[data-r="9"]::before,
.ludo-board .cell.red-home[data-r="5"]::before,
.ludo-board .cell.green-home[data-r="5"]::before,
.ludo-board .cell.blue-home[data-r="14"]::before,
.ludo-board .cell.yellow-home[data-r="14"]::before,
.ludo-board .cell.red-home[data-c="0"]::after,
.ludo-board .cell.blue-home[data-c="0"]::after,
.ludo-board .cell.red-home[data-c="5"]::after,
.ludo-board .cell.blue-home[data-c="5"]::after,
.ludo-board .cell.green-home[data-c="9"]::after,
.ludo-board .cell.yellow-home[data-c="9"]::after,
.ludo-board .cell.green-home[data-c="14"]::after,
.ludo-board .cell.yellow-home[data-c="14"]::after {
  content: '';
  position: absolute;
  background: rgba(0,0,0,0.65);
  z-index: 5;
  pointer-events: none;
}

/* Top edges */
.ludo-board .cell.red-home[data-r="0"]::before,
.ludo-board .cell.green-home[data-r="0"]::before,
.ludo-board .cell.blue-home[data-r="9"]::before,
.ludo-board .cell.yellow-home[data-r="9"]::before  { top: 0; left: 0; right: 0; height: 2px; }

/* Bottom edges */
.ludo-board .cell.red-home[data-r="5"]::before,
.ludo-board .cell.green-home[data-r="5"]::before,
.ludo-board .cell.blue-home[data-r="14"]::before,
.ludo-board .cell.yellow-home[data-r="14"]::before { bottom: 0; left: 0; right: 0; height: 2px; }

/* Left edges */
.ludo-board .cell.red-home[data-c="0"]::after,
.ludo-board .cell.blue-home[data-c="0"]::after,
.ludo-board .cell.green-home[data-c="9"]::after,
.ludo-board .cell.yellow-home[data-c="9"]::after   { top: 0; left: 0; bottom: 0; width: 2px; }

/* Right edges */
.ludo-board .cell.red-home[data-c="5"]::after,
.ludo-board .cell.blue-home[data-c="5"]::after,
.ludo-board .cell.green-home[data-c="14"]::after,
.ludo-board .cell.yellow-home[data-c="14"]::after  { top: 0; right: 0; bottom: 0; width: 2px; }

/* Default theme — white boundary */
.ludo-board:not([class*="theme-"]) .cell.red-home[data-r]::before,
.ludo-board:not([class*="theme-"]) .cell.green-home[data-r]::before,
.ludo-board:not([class*="theme-"]) .cell.blue-home[data-r]::before,
.ludo-board:not([class*="theme-"]) .cell.yellow-home[data-r]::before,
.ludo-board:not([class*="theme-"]) .cell.red-home[data-c]::after,
.ludo-board:not([class*="theme-"]) .cell.blue-home[data-c]::after,
.ludo-board:not([class*="theme-"]) .cell.green-home[data-c]::after,
.ludo-board:not([class*="theme-"]) .cell.yellow-home[data-c]::after {
  background: rgba(255,255,255,0.85);
}

/* Neon theme — glowing white boundary */
.ludo-board.theme-neon .cell.red-home[data-r]::before,
.ludo-board.theme-neon .cell.green-home[data-r]::before,
.ludo-board.theme-neon .cell.blue-home[data-r]::before,
.ludo-board.theme-neon .cell.yellow-home[data-r]::before,
.ludo-board.theme-neon .cell.red-home[data-c]::after,
.ludo-board.theme-neon .cell.blue-home[data-c]::after,
.ludo-board.theme-neon .cell.green-home[data-c]::after,
.ludo-board.theme-neon .cell.yellow-home[data-c]::after {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 12px rgba(255,255,255,0.4);
}


/* ===== DEV OVERLAY ===== */
.dev-label {
  position: absolute;
  font-family: 'Space Mono', monospace;
  pointer-events: none;
  z-index: 20;
  line-height: 1;
  text-align: center;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.dev-label.dev-path   { color: #FFD04A; font-size: 5.5px; }
.dev-label.dev-hc-red    { color: #FF8AA8; }
.dev-label.dev-hc-blue   { color: #7EAAD4; }
.dev-label.dev-hc-green  { color: #6DD0A9; }
.dev-label.dev-hc-yellow { color: #F5AF94; }
.dev-label.dev-coord  { color: rgba(236,232,232,0.5); font-size: 4.5px; font-weight: 400; }
.dev-label.dev-center { color: rgba(236,232,232,0.3); font-size: 7px; }

#devOverlayBtn { font-size: 10px; padding: 5px 10px; display: none; }
#devOverlayBtn.active {
  background: rgba(255,208,74,0.12);
  border-color: rgba(255,208,74,0.4);
  color: #FFD04A;
}

/* Connect Wallet button */
.connect-wallet-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(109,208,169,0.15), rgba(126,170,212,0.1));
  border: 1px solid rgba(109,208,169,0.3);
  color: var(--teal);
  padding: 9px 18px;
  border-radius: 12px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.connect-wallet-btn:hover {
  background: linear-gradient(135deg, rgba(109,208,169,0.25), rgba(126,170,212,0.18));
  border-color: rgba(109,208,169,0.5);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(109,208,169,0.2);
}
.connect-wallet-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* ===== DESKTOP OVERRIDE ===== */
@media (min-width: 769px) {
  .main {
    margin-left: 72px;
    height: 100vh;
    overflow-y: auto;
  }
  .page { padding: 28px 32px 88px; }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {

  /* Bottom nav height */
  .sidebar { height: 64px; }

  .main {
    margin-left: 0;
  }

  .page { padding: 16px 14px 84px; }

  /* Topbar */
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: flex-start;
  }
  .page-title { font-size: 20px; }
  .chain-badge { font-size: 9px; padding: 4px 10px; }
  .wallet-chip { display: none; } /* hide wallet address on mobile */

  /* Lobby: single column */
  .lobby-layout {
    grid-template-columns: 1fr;
  }

  /* Play layout (live): stack vertically */
  .play-layout {
    grid-template-columns: 1fr;
  }

  /* Board sizing on mobile */
  .board-container { padding: 14px; }
  .ludo-board { max-width: 100%; }

  /* Create card tighter on mobile */
  .create-card { padding: 12px; border-radius: 12px; }
  .lobby-section-title { margin-bottom: 8px; }
  .create-row-label { margin-bottom: 4px; }
  .opp-toggle { margin-bottom: 10px; }
  .count-pill-row { margin-bottom: 10px; }
  .color-pick-row { margin-bottom: 10px; }
  .stake-input-row { margin-bottom: 10px; }
  .create-preview-row { padding: 10px !important; margin-bottom: 10px !important; }
  .stake-row { margin-bottom: 6px; }
  .mega-btn { padding: 10px 24px; font-size: 14px; }
  .stake-input { padding: 6px 10px; }

  /* Color swatches: equal grid, no overflow */
  .color-pick-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .color-swatch { padding: 6px 4px; font-size: 8px; aspect-ratio: auto; }
  .color-swatch .swatch-dot { width: 16px; height: 16px; }

  /* Count pills */
  .count-pill { padding: 6px 0; font-size: 12px; }

  /* Opponent toggle */
  .opp-btn { font-size: 12px; padding: 6px 0; }

  /* Stats row: 2 columns */
  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stat-num { font-size: 22px; }

  /* History card */
  .history-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px 12px;
    padding: 14px;
  }
  .game-id { grid-row: 1 / 4; writing-mode: vertical-rl; }
  .game-details { grid-column: 2; grid-row: 1; }
  .game-players { grid-column: 2; grid-row: 2; }
  .result-badge { grid-column: 2; grid-row: 3; justify-self: start; }
  .pnl-value { display: none; }

  /* Leaderboard: compact */
  .lb-header,
  .lb-row {
    grid-template-columns: 36px 1fr 70px;
    padding: 12px 14px;
  }
  .lb-header span:nth-child(3),
  .lb-row > div:nth-child(3) { display: none; }
  .lb-header span:nth-child(5),
  .lb-row > div:nth-child(5),
  .lb-header span:last-child,
  .lb-row > div:last-child { display: none; }
  .lb-avatar { width: 30px; height: 30px; font-size: 13px; }
  .lb-name { font-size: 13px; }

  /* Season banner */
  .season-banner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 16px;
  }
  .season-prize { text-align: center; }
  .prize-amt { font-size: 22px; }

  /* Profile */
  /* Profile: compact row layout on mobile */
  .profile-hero {
    flex-direction: row;
    padding: 14px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
  }
  .profile-hero > div:last-child { text-align: right; flex-shrink: 0; }
  .profile-avatar { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
  .profile-username { font-size: 15px; margin-bottom: 3px; }
  .profile-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    margin-bottom: 6px;
    font-size: 10px;
  }
  .profile-tags { gap: 4px; flex-wrap: wrap; }
  .tag { padding: 2px 8px; font-size: 9px; }
  /* Balance in hero: compact */
  .profile-hero > div:last-child > div:nth-child(2) { font-size: 16px !important; }

  /* Profile grid: 2 columns on mobile too */
  .profile-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .profile-stats-card { padding: 12px; border-radius: 12px; }
  .profile-stats-grid { gap: 8px; }
  .p-stat { padding: 8px; }
  .p-stat-val { font-size: 16px; margin-bottom: 2px; }
  .p-stat-lbl { font-size: 8px; }

  /* Achievements: compact */
  .achievement { padding: 8px 10px; gap: 8px; }
  .achievement-list { gap: 5px; }
  .ach-icon { font-size: 16px; }
  .ach-name { font-size: 12px; margin-bottom: 1px; }
  .ach-desc { font-size: 9px; }

  /* Settings: horizontal tab strip */
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: 12px;
    gap: 0;
    -webkit-overflow-scrolling: touch;
  }
  .settings-nav-item {
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    font-size: 10px;
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid var(--border);
    white-space: nowrap;
  }
  .settings-nav-item:last-child { border-right: none; }
  .settings-nav-item svg { width: 16px; height: 16px; }
  .settings-row { flex-wrap: wrap; gap: 10px; }
  .settings-input { width: 100%; }
  .settings-select { font-size: 11px; }

  /* Available games card */
  .avail-card {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }
  .avail-slots { display: none; }

  /* TX notice */
  .tx-notice {
    bottom: 74px;
    right: 10px;
    left: 10px;
    font-size: 10px;
  }

  /* Waiting room player slot */
  .slot-addr { display: none; }
}