:root {
  color-scheme: light;
  --bg: #f5f7f2;
  --panel: #ffffff;
  --ink: #172026;
  --muted: #66727d;
  --line: #d9e0da;
  --green: #168a57;
  --red: #c94134;
  --yellow: #d69b16;
  --blue: #2367b1;
  --accent: #0f6f72;
  --shadow: 0 16px 40px rgba(20, 31, 36, 0.12);
  /* Replaced by full-width layout on mobile */
  /* --game-board-size: min(86vw, 340px, max(220px, calc(100svh - 470px))); */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(22, 138, 87, 0.12), transparent 28rem),
    linear-gradient(180deg, #f9faf6 0%, var(--bg) 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.game-active {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 224, 112, 0.28), transparent 18rem),
    linear-gradient(180deg, #0d7d5f 0%, #075241 100%);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 14px 28px;
}

.topbar,
.section-head,
.account-strip,
.player-row,
.room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar {
  margin-bottom: 14px;
}

body.game-active .topbar {
  display: none;
}

body.game-active .shell {
  padding-top: 10px;
  /* A little more board width in-game. Kept at 10px (>= the board frame's 9px
     shadow) so the rounded frame never clips against the screen edge. */
  padding-left: 10px;
  padding-right: 10px;
}

.eyebrow,
.muted {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

h1,
h2 {
  margin: 0;
  line-height: 1.15;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 17px;
}

.panel,
.account-strip,
.notice {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel {
  padding: 14px;
  margin-top: 12px;
}

#gamePanel.playing {
  display: grid;
  gap: 10px;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #ffffff;
  box-shadow: none;
  padding: 0;
}

#gamePanel.playing .section-head,
#gamePanel.playing #gameMeta,
#gamePanel.playing #gameStatus {
  display: none;
}

#gamePanel.playing .muted {
  color: rgba(255, 255, 255, 0.76);
}

.game-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.hud-item,
.hud-state {
  min-width: 0;
  min-height: 44px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(3, 41, 34, 0.34);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hud-label {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hud-item strong,
.hud-state {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-state {
  grid-column: 1 / -1;
  justify-content: center;
  text-transform: uppercase;
}

.hud-state.phase-awaiting-roll {
  color: #ffe373;
}

.hud-state.phase-awaiting-move {
  color: #ffffff;
  box-shadow:
    0 0 0 2px rgba(255, 227, 115, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hud-state.phase-completed {
  color: #9df3bd;
}

.notice {
  padding: 10px 12px;
  margin-bottom: 12px;
  color: #203039;
  font-size: 13px;
}

.notice.error {
  border-color: rgba(201, 65, 52, 0.45);
  background: #fff6f4;
}

.account-strip {
  padding: 12px;
  margin: 10px 0 12px;
}

body.game-active .account-strip {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(3, 41, 34, 0.34);
  color: #ffffff;
  box-shadow: none;
}

body.game-active .account-strip .muted,
body.game-active .account-strip .locked {
  color: rgba(255, 255, 255, 0.72);
}

.locked {
  color: var(--muted);
  font-weight: 600;
}

.tabs,
.segmented {
  display: grid;
  gap: 6px;
  padding: 4px;
  background: #edf1ed;
  border-radius: 8px;
}

.tabs {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}

.segmented {
  grid-template-columns: repeat(3, 1fr);
}

.tab,
.segment,
.stake-option {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.tab.active,
.segment.active,
.stake-option.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 8px rgba(30, 41, 45, 0.08);
}

.stack {
  display: grid;
  gap: 13px;
}

label,
.field-title {
  display: grid;
  gap: 7px;
  color: #2b363d;
  font-size: 13px;
  font-weight: 700;
}

/* Bigger form labels (Players / Pawns to win / Stake) for readability; the plain
   auth <label>s stay 13px. */
.field-title {
  font-size: 16px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  color: #69757c;
  font-size: 13px;
}

input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  background: #fbfcfb;
  color: var(--ink);
}

input:focus {
  outline: 2px solid rgba(15, 111, 114, 0.24);
  border-color: var(--accent);
}

.stake-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.stake-option {
  border: 1px solid var(--line);
  background: #fbfcfb;
  color: #26343c;
}

.primary,
.small-button,
.text-button,
.icon-button {
  border: 0;
  border-radius: 7px;
  font-weight: 800;
}

.primary {
  min-height: 46px;
  padding: 0 16px;
  color: #ffffff;
  background: var(--accent);
}

.primary:disabled,
.small-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.primary.compact {
  min-height: 40px;
  min-width: 92px;
}

.small-button,
.text-button,
.icon-button {
  min-height: 36px;
  padding: 0 12px;
  background: #edf1ed;
  color: #253139;
}

.icon-button {
  width: 40px;
  padding: 0;
}

.text-button {
  color: var(--red);
}

.pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  background: #edf1ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.status-pill.active {
  background: rgba(22, 138, 87, 0.12);
  color: var(--green);
}

#gamePanel.playing .status-pill.active {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.room-list,
.players-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.room-row,
.player-row,
.start-gate {
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.start-gate {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  background:
    linear-gradient(135deg, rgba(255, 218, 82, 0.32), rgba(255, 255, 255, 0.92)),
    #fbfcfb;
  border-color: rgba(15, 111, 114, 0.26);
}

.result-card {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 4px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.room-title,
.player-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
}

.board-wrap {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 0 0 8px;
}

#gamePanel.playing .board-wrap {
  margin-top: 2px;
  border-radius: 0;
  background: transparent;
}

.board-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 24px rgba(3, 28, 23, 0.34));
  pointer-events: auto;
}

.ludo-board {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  display: block;
  overflow: visible;
  border: 1px solid rgba(11, 25, 29, 0.9);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  touch-action: manipulation;
}

.svg-board-bg,
.svg-board-rim,
.svg-base,
.svg-base-inner,
.svg-cell,
.svg-home-slot,
.svg-safe-mark,
.svg-center {
  pointer-events: none;
}

.svg-board-bg {
  fill: #fff8ea;
  stroke: #161d22;
  stroke-width: 1.2;
}

.svg-board-rim {
  display: none;
}

.svg-base {
  stroke: rgba(15, 22, 26, 0.84);
  stroke-width: 0.65;
}

.svg-base.active-base {
  stroke: #fff1a5;
  stroke-width: 1.65;
}

.svg-base-inner {
  fill: #fffef8;
  stroke: rgba(23, 32, 38, 0.34);
  stroke-width: 0.75;
}

.svg-cell {
  fill: #fffef8;
  stroke: rgba(31, 37, 41, 0.68);
  stroke-width: 0.46;
}

.svg-cell.red,
.svg-base.red,
.svg-home-slot.red,
.svg-finish-cell.red,
.svg-center.red {
  fill: #e3232f;
}

.svg-cell.green,
.svg-base.green,
.svg-home-slot.green,
.svg-finish-cell.green,
.svg-center.green {
  fill: #10a650;
}

.svg-cell.yellow,
.svg-base.yellow,
.svg-home-slot.yellow,
.svg-finish-cell.yellow,
.svg-center.yellow {
  fill: #f5c91f;
}

.svg-cell.blue,
.svg-base.blue,
.svg-home-slot.blue,
.svg-finish-cell.blue,
.svg-center.blue {
  fill: #236bd2;
}

.svg-home-slot {
  stroke: #ffffff;
  stroke-width: 1.45;
}

.svg-safe-mark {
  fill: rgba(23, 32, 38, 0.42);
}

.svg-center {
  stroke: #172026;
  stroke-width: 0.52;
}

.svg-pawn {
  filter:
    drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.24))
    drop-shadow(0 1.8px 1px rgba(0, 0, 0, 0.12));
  cursor: default;
  pointer-events: visiblePainted;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.svg-pawn.movable {
  --pawn-glow: rgba(255, 226, 76, 0.82);
  --pawn-glow-strong: rgba(255, 242, 129, 1);
  cursor: pointer;
}

.svg-pawn.red.movable {
  --pawn-glow: rgba(255, 63, 75, 0.86);
  --pawn-glow-strong: rgba(255, 145, 153, 1);
}

.svg-pawn.green.movable {
  --pawn-glow: rgba(59, 226, 119, 0.86);
  --pawn-glow-strong: rgba(132, 255, 174, 1);
}

.svg-pawn.yellow.movable {
  --pawn-glow: rgba(255, 224, 45, 0.9);
  --pawn-glow-strong: rgba(255, 247, 139, 1);
}

.svg-pawn.blue.movable {
  --pawn-glow: rgba(82, 161, 255, 0.86);
  --pawn-glow-strong: rgba(158, 204, 255, 1);
}

.svg-pawn.movable .svg-pawn-sprite {
  transform-box: fill-box;
  transform-origin: center;
  animation: movablePawnPulse 1000ms ease-in-out infinite;
}

.svg-pawn.movable:hover .svg-pawn-sprite,
.svg-pawn.movable:focus-visible .svg-pawn-sprite {
  filter:
    drop-shadow(0 4px 3px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 14px var(--pawn-glow-strong))
    drop-shadow(0 0 24px var(--pawn-glow));
}

.svg-pawn.hopping {
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.28))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.18));
}

.svg-pawn:focus {
  outline: none;
}

.svg-pawn-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.svg-pawn-sprite {
  pointer-events: none;
}

.svg-pawn-image {
  pointer-events: none;
}

@keyframes movablePawnPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 2px 2px rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 6px var(--pawn-glow));
  }

  50% {
    transform: translateY(-2px) scale(1.08);
    filter:
      drop-shadow(0 5px 4px rgba(0, 0, 0, 0.38))
      drop-shadow(0 0 14px var(--pawn-glow-strong))
      drop-shadow(0 0 24px var(--pawn-glow));
  }
}

/* Rotating dashed ring around a movable pawn's base — the loud "you can move this"
   cue. A circle is radially symmetric, so spinning the element just sweeps the dash
   pattern around the ring. Rendered behind the sprite (see renderTokens) so it reads
   as a marker on the floor. cx/cy = 0 and transform-box: fill-box keep the pivot dead
   centre on the pawn base regardless of the parent stack transform. */
.svg-pawn-ring {
  fill: none;
  stroke: rgba(17, 20, 27, 0.82);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 1.4 1.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: pawnRingSpin 3.2s linear infinite;
}

@keyframes pawnRingSpin {
  to {
    transform: rotate(360deg);
  }
}

.player-areas {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
}

.player-area {
  width: min(168px, calc(50% - 4px));
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: rgba(7, 52, 43, 0.58);
  color: #ffffff;
  pointer-events: auto;
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.player-area.active {
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(255, 207, 49, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.player-area.seat-1,
.player-area.seat-2 {
  flex-direction: row-reverse;
  text-align: right;
}

.player-dice {
  --dice-edge: 44px;
  --dice-half: calc(var(--dice-edge) / 2);
  width: var(--dice-edge);
  height: var(--dice-edge);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  perspective: 520px;
  perspective-origin: 50% 50%;
  transition: filter 140ms ease;
  touch-action: manipulation;
  pointer-events: auto;
}

.player-area.red.active {
  border-color: #ff8b91;
}

.player-area.green.active {
  border-color: #72df9e;
}

.player-area.yellow.active {
  border-color: #ffe671;
}

.player-area.blue.active {
  border-color: #8dbdff;
}

.player-dice.ready {
  cursor: pointer;
}

.player-dice.ready:active {
  filter: brightness(0.94);
}

.player-dice.rolling {
  cursor: wait;
}

.player-label {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dice-cube {
  width: var(--dice-edge);
  height: var(--dice-edge);
  position: relative;
  display: block;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 150ms ease-out;
}

.dice-face {
  position: absolute;
  inset: 0;
  width: var(--dice-edge);
  height: var(--dice-edge);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  backface-visibility: hidden;
  background-color: #fffdf8;
  border: 1px solid rgba(24, 31, 36, 0.28);
  border-radius: 7px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.92),
    inset 0 -2px 4px rgba(24, 31, 36, 0.12);
}

.dice-face-1 {
  transform: translateZ(var(--dice-half));
}

.dice-face-6 {
  transform: rotateY(180deg) translateZ(var(--dice-half));
}

.dice-face-2 {
  transform: rotateY(90deg) translateZ(var(--dice-half));
}

.dice-face-5 {
  transform: rotateY(-90deg) translateZ(var(--dice-half));
}

.dice-face-3 {
  transform: rotateX(90deg) translateZ(var(--dice-half));
}

.dice-face-4 {
  transform: rotateX(-90deg) translateZ(var(--dice-half));
}

.player-dice.face-1 .dice-cube {
  transform: rotateX(0deg) rotateY(0deg);
}

.player-dice.face-2 .dice-cube {
  transform: rotateY(-90deg);
}

.player-dice.face-3 .dice-cube {
  transform: rotateX(-90deg);
}

.player-dice.face-4 .dice-cube {
  transform: rotateX(90deg);
}

.player-dice.face-5 .dice-cube {
  transform: rotateY(90deg);
}

.player-dice.face-6 .dice-cube {
  transform: rotateY(180deg);
}

.player-dice.rolling .dice-cube {
  transition: none;
  animation: diceCubeTumble 680ms linear infinite;
}

@keyframes diceCubeTumble {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  25% {
    transform: rotateX(190deg) rotateY(130deg);
  }

  50% {
    transform: rotateX(380deg) rotateY(270deg);
  }

  75% {
    transform: rotateX(570deg) rotateY(410deg);
  }

  100% {
    transform: rotateX(720deg) rotateY(720deg);
  }
}

.event-dock {
  width: 100%;
  display: grid;
  gap: 6px;
  margin: 0;
}

.event-row,
.event-empty {
  min-height: 32px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(3, 41, 34, 0.34);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.event-type {
  min-width: 42px;
  color: #ffe373;
  font-size: 11px;
  text-transform: uppercase;
}

.event-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-empty {
  justify-content: center;
  color: rgba(255, 255, 255, 0.68);
}

.quit-button {
  width: 100%;
  margin-top: 12px;
}

.leave-room-button {
  width: 100%;
  margin-top: 12px;
}

#gamePanel.playing .player-row {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#gamePanel.playing .quit-button {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #ffe4df;
}

.empty-state {
  margin: 0;
  padding: 16px 4px 2px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.hidden {
  display: none !important;
}

@media (min-width: 700px) {
  .shell {
    padding-top: 28px;
  }
}

@media (min-width: 420px) {
  .game-hud {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hud-state {
    grid-column: auto;
  }
}

/* ============================================================
   Game-like UI polish (lobby + transitions + animations)
   ============================================================ */
:root {
  --radius: 16px;
  --radius-sm: 11px;
}

/* Playful lobby backdrop with the four ludo colours blooming in the corners */
body:not(.game-active) {
  background:
    radial-gradient(circle at 12% 6%, rgba(201, 65, 52, 0.16), transparent 28%),
    radial-gradient(circle at 88% 5%, rgba(35, 103, 178, 0.16), transparent 28%),
    radial-gradient(circle at 92% 95%, rgba(214, 155, 22, 0.18), transparent 30%),
    radial-gradient(circle at 8% 96%, rgba(22, 138, 87, 0.16), transparent 30%),
    linear-gradient(165deg, #21c3f0 0%, #28d49f 52%, #1bc36b 100%);
  background-attachment: fixed;
}

/* Brand mark: a tiny four-quadrant ludo board next to the wordmark */
.topbar .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar .eyebrow::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: conic-gradient(#e3232f 0 25%, #10a650 0 50%, #236bd2 0 75%, #f5c91f 0 100%);
  box-shadow: 0 2px 5px rgba(20, 40, 36, 0.28), inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}

#screenTitle {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.icon-button {
  background: linear-gradient(180deg, #ffffff, #eef3ee);
  box-shadow: 0 4px 10px rgba(16, 40, 34, 0.12);
  transition: transform 120ms ease, box-shadow 160ms ease;
}

.icon-button:active {
  transform: scale(0.94);
}

/* Cards: rounder, layered depth, and a colourful ludo stripe on top */
.panel,
.account-strip,
.notice {
  border-radius: var(--radius);
  border-color: rgba(20, 44, 38, 0.08);
  box-shadow: 0 12px 30px rgba(16, 40, 34, 0.1), 0 2px 6px rgba(16, 40, 34, 0.05);
}

.panel {
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #e3232f 0 25%, #f5c91f 0 50%, #10a650 0 75%, #236bd2 0 100%);
  opacity: 0.92;
}

#gamePanel::before {
  display: none;
}

/* Entrance motion for the screens */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

#authPanel,
#lobbyPanel,
#roomsPanel,
#waitingPanel,
#resultPanel,
.account-strip {
  animation: riseIn 380ms cubic-bezier(0.22, 0.7, 0.25, 1) both;
}

/* Buttons feel tactile */
.primary {
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #149a8e, var(--accent));
  box-shadow: 0 9px 20px rgba(15, 111, 114, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  letter-spacing: 0.01em;
  transition: transform 120ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(15, 111, 114, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.primary:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 5px 12px rgba(15, 111, 114, 0.3);
}

.tab,
.segment,
.stake-option,
.small-button {
  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.tab.active {
  background: linear-gradient(180deg, #ffffff, #eef5f1);
  box-shadow: 0 4px 10px rgba(16, 40, 34, 0.12), inset 0 0 0 1.5px rgba(15, 111, 114, 0.24);
}

.segment.active {
  background: linear-gradient(180deg, rgba(15, 111, 114, 0.14), rgba(15, 111, 114, 0.05));
  color: var(--accent);
  box-shadow: 0 5px 12px rgba(15, 111, 114, 0.16), inset 0 0 0 1.5px var(--accent);
}

.segment:active,
.stake-option:active,
.tab:active {
  transform: scale(0.95);
}

.stake-option.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(15, 111, 114, 0.14), rgba(15, 111, 114, 0.05));
  color: var(--accent);
  box-shadow: 0 5px 12px rgba(15, 111, 114, 0.16);
}

/* Open-room cards */
.room-row {
  position: relative;
  overflow: hidden;
  padding-left: 16px;
  border-radius: var(--radius-sm);
  transition: transform 150ms ease, box-shadow 180ms ease, border-color 160ms ease;
}

.room-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #e3232f, #f5c91f 50%, #236bd2);
}

.room-row:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 111, 114, 0.35);
  box-shadow: 0 12px 24px rgba(16, 40, 34, 0.16);
}

.room-row .small-button {
  background: linear-gradient(180deg, #149a8e, var(--accent));
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(15, 111, 114, 0.3);
}

.room-row .small-button:active {
  transform: scale(0.95);
}

/* Coin balance reads like a game resource */
.account-strip strong {
  font-size: 16px;
}

/* Celebratory result card */
.result-card {
  border: 0;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 214, 82, 0.35), transparent 60%),
    linear-gradient(180deg, #ffffff, #f3f8f3);
  box-shadow: 0 14px 30px rgba(16, 40, 34, 0.12);
  text-align: center;
}

#resultTitle {
  font-size: 20px;
}

/* Active player's seat softly pulses on the board */
@keyframes seatPulse {
  0%, 100% {
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(255, 207, 49, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.26), 0 0 0 4px rgba(255, 207, 49, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

.player-area.active {
  animation: seatPulse 1600ms ease-in-out infinite;
}

/* Ready-to-roll dice invites a tap */
@keyframes diceReadyBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Bob the whole dice button (not .dice-cube, whose transform holds the face rotation). */
.player-dice.ready {
  animation: diceReadyBob 1400ms ease-in-out infinite;
}

/* A pawn being knocked home casts a longer travelling shadow */
.svg-pawn.captured {
  filter:
    drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3))
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.22));
}

@media (prefers-reduced-motion: reduce) {
  #authPanel,
  #lobbyPanel,
  #roomsPanel,
  #waitingPanel,
  #resultPanel,
  .account-strip,
  .player-area.active,
  .player-dice.ready,
  .svg-pawn-ring {
    animation: none;
  }
}

/* ============================================================
   In-game screen: lean top bar + dice outside the board
   ============================================================ */

/* The lobby account strip is hidden in-game; the top bar carries only the essentials. */
body.game-active .account-strip {
  display: none;
}

/* Top bar: Coins | Pot | red power quit button (overrides the base grid). */
.game-hud {
  display: flex;
  align-items: stretch;
  grid-template-columns: none;
  gap: 8px;
}

.game-hud .hud-item {
  flex: 1;
  padding: 9px 13px;
}

.game-hud .hud-label {
  font-size: 11px;
}

.game-hud .hud-item strong {
  font-size: 21px;
  font-weight: 900;
}

.game-hud .game-quit {
  flex: 0 0 auto;
  width: 52px;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 130, 120, 0.55);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #e2483c, #bf342a);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(176, 36, 28, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.game-hud .game-quit svg {
  width: 23px;
  height: 23px;
}

.game-hud .game-quit:active {
  transform: scale(0.94);
}

/* Dice live OUTSIDE the board (in the strips above and below it). Each die sits
   on the same side as its own home box, no matter how many players are in. */
#gamePanel.playing .player-areas {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
}

#gamePanel.playing .player-area {
  width: auto;
  min-width: 0;
  min-height: 0;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 12px;
  background: rgba(6, 38, 31, 0.66);
  pointer-events: auto;
}

/* Left-column homes (red top-left, blue bottom-left) hug the left edge;
   right-column homes (green top-right, yellow bottom-right) hug the right edge. */
#gamePanel.playing .player-area.seat-0,
#gamePanel.playing .player-area.seat-3 {
  margin-right: auto;
}

#gamePanel.playing .player-area.seat-1,
#gamePanel.playing .player-area.seat-2 {
  margin-left: auto;
}

#gamePanel.playing .player-area .player-dice {
  --dice-edge: 50px;
}

#gamePanel.playing .player-area .player-label {
  max-width: 120px;
  font-size: 15px;
  font-weight: 900;
}

/* Keep the whole match on a single screen — no scrolling while playing. */
body.game-active {
  overflow: hidden;
}

body.game-active .shell {
  height: 100vh;
  height: 100svh;
  min-height: 0;
}

/* Cap the board so the top bar + both dice rows + board always fit the viewport.
   On normal phones this doesn't bite (board stays full width); on short screens
   it shrinks the board instead of introducing a scrollbar. */
#gamePanel.playing .board-shell {
  max-width: min(100%, calc(100svh - 238px));
}

/* ============================================================
   BRIGHT-CASUAL THEME — in-game screen + turn clock.
   Scoped to body.game-active so the lobby rules don't leak in, and
   additive only: it never alters the dice/pawn transforms or the
   board's fit-on-one-screen sizing (the board frame is box-shadow,
   which adds no layout size).
   ============================================================ */

/* Echo the lobby gradient, kept deep for board + pawn contrast. */
body.game-active {
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 224, 112, 0.30), transparent 17rem),
    linear-gradient(165deg, #14a7b0 0%, #0c8f72 45%, #0a6b50 100%);
}

/* HUD chips: rounder + glassier, echoing the lobby cards. */
body.game-active .game-hud .hud-item {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px rgba(4, 40, 34, 0.28);
}

body.game-active .game-hud .hud-item:first-child .hud-label::before { content: "🪙 "; }
body.game-active .game-hud .hud-item:nth-child(2) .hud-label::before { content: "🏆 "; }
body.game-active .game-hud .hud-item:first-child strong { color: #ffe27a; }
body.game-active .game-hud .game-quit { border-radius: 15px; }

/* Seats: rounder; positioned so the ring + pips can overlay safely. */
body.game-active .player-area {
  position: relative;
  border-radius: 14px;
}

/* Frame the board to match the rounded cards. box-shadow only → adds no
   layout size, so the tight board sizing is untouched. */
#gamePanel.playing .board-shell {
  border-radius: 14px;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(255, 210, 64, 0.85),
    0 0 0 9px rgba(4, 40, 34, 0.25);
}

/* ---- Turn clock: a depleting ring around the active player's dice.
   It is a sibling of .dice-cube (never the cube itself, whose transform
   holds the face rotation) and is purely decorative (pointer-events:none). */
body.game-active .player-dice {
  position: relative;
}

.turn-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from -90deg,
    var(--ring-col, #37d27f) calc(var(--turn-frac, 1) * 360deg),
    rgba(0, 0, 0, 0.34) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: background 180ms linear;
}

.turn-ring.low {
  animation: turnRingPulse 700ms ease-in-out infinite;
}

@keyframes turnRingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---- Strike pips: telegraph the forfeit-at-3 rule. Kept on the label
   side of each seat so they never sit under the dice ring. ---- */
.strike-pips {
  position: absolute;
  top: 4px;
  right: 6px;
  display: flex;
  gap: 3px;
  pointer-events: none;
}

.player-area.seat-1 .strike-pips,
.player-area.seat-2 .strike-pips {
  right: auto;
  left: 6px;
}

.strike-pips .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.strike-pips .pip.on {
  background: #ff5a48;
  box-shadow: 0 0 6px rgba(255, 90, 72, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .turn-ring.low { animation: none; }
}

/* Floating mute toggle — fixed so it works on every screen (lobby + in-game)
   without touching any existing layout. */
.sound-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(8, 50, 70, 0.3);
  z-index: 60;
  transition: transform 120ms ease;
}

.sound-toggle:active {
  transform: scale(0.9);
}

.sound-toggle[aria-pressed="false"] {
  background: rgba(255, 255, 255, 0.72);
  opacity: 0.85;
}

/* ============================================================
   BRIGHT-CASUAL GAME THEME — lobby + login (Ludo King vibe).
   Scoped to :not(.game-active) so the in-game board is untouched.
   ============================================================ */
:root {
  --cta: #ff8a2b;
  --cta-dark: #f26a00;
  --gold: #f7b500;
  --gold-deep: #e08a00;
  --go: #18c172;
  --go-dark: #0fa75f;
}

body:not(.game-active) {
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body:not(.game-active) h1,
body:not(.game-active) h2,
body:not(.game-active) .eyebrow,
body:not(.game-active) .primary,
body:not(.game-active) .segment,
body:not(.game-active) .stake-option,
body:not(.game-active) .tab,
body:not(.game-active) .coin-balance-text strong,
body:not(.game-active) .avatar,
body:not(.game-active) .auth-tagline {
  font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, sans-serif;
}

body:not(.game-active) h1 {
  font-size: 34px;
  font-weight: 700;
  color: #082b3c;
  letter-spacing: -0.01em;
}

body:not(.game-active) h2 {
  font-size: 19px;
  font-weight: 700;
  color: #0c2230;
}

/* Brand eyebrow → frosted chip so it reads on the vivid gradient. */
body:not(.game-active) .topbar .eyebrow {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0, 40, 60, 0.28);
}

/* Chunky, bouncy cards with a bold four-colour brand rail. */
body:not(.game-active) .panel {
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

body:not(.game-active) .panel::before {
  display: none;
}

body:not(.game-active) #lobbyPanel,
body:not(.game-active) #roomsPanel,
body:not(.game-active) #waitingPanel,
body:not(.game-active) #resultPanel,
body:not(.game-active) .auth-card {
  padding-top: 22px;
}

/* ---- Login: a real title screen ---- */
#authPanel.auth-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-height: calc(100vh - 140px);
  animation: riseIn 380ms cubic-bezier(0.22, 0.7, 0.25, 1) both;
}

.auth-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.brand-disc {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--red) 0 25%, var(--green) 0 50%, var(--blue) 0 75%, var(--yellow) 0 100%);
  /* A raised coin: deep drop shadow + a domed top-highlight and bottom-shade.
     No white ring or inner box — just the four colours and the die on top. */
  box-shadow:
    0 18px 32px rgba(8, 50, 70, 0.42),
    inset 0 10px 16px rgba(255, 255, 255, 0.28),
    inset 0 -12px 18px rgba(0, 0, 0, 0.22);
  animation: brandBob 3s ease-in-out infinite;
}

.brand-dice {
  font-size: 72px;
  line-height: 1;
  /* The die pops out of the square — a strong shadow cast below it, no box. */
  filter: drop-shadow(0 12px 12px rgba(6, 36, 54, 0.55));
}

/* Two pawns flanking the die, vertically centred and tilted OUTWARD (tops leaning
   away from the die). z-index keeps them ON TOP of the die. Natural proportions
   (width auto — no stretching). Red on the left (over the yellow/blue side) and
   yellow on the right (over the red/green side) so neither blends in. */
.brand-pawn {
  position: absolute;
  top: 60%;
  height: 62px;
  width: auto;
  z-index: 2;
  filter: drop-shadow(0 4px 5px rgba(6, 36, 54, 0.5));
  pointer-events: none;
}
.brand-pawn.left { left: -18px; transform: translateY(-50%) rotate(-22deg); }
.brand-pawn.right { right: -18px; transform: translateY(-50%) rotate(22deg); }

.brand-name {
  margin: 0;
  font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0, 40, 60, 0.38), 0 2px 0 rgba(0, 0, 0, 0.12);
}

.auth-tagline {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 40, 60, 0.3);
}

.auth-tagline b {
  color: #fff3c4;
}

/* ---- Player card + coins as treasure ---- */
body:not(.game-active) .account-strip {
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  padding: 12px 14px;
}

.player-id {
  display: flex;
  align-items: center;
  gap: 11px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(150deg, #3aa0ff, #2f6bff);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 5px 12px rgba(47, 107, 255, 0.4);
}

.coin-balance {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(247, 181, 0, 0.45);
  background: rgba(247, 181, 0, 0.12);
  border-radius: 999px;
  padding: 4px 13px 4px 9px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.coin-balance:hover { background: rgba(247, 181, 0, 0.2); }
.coin-balance:active { transform: scale(0.96); }

.coin-ico {
  font-size: 33px;
  filter: drop-shadow(0 2px 3px rgba(180, 120, 0, 0.4));
}

.coin-balance-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
}

.coin-balance-text strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-deep);
}

.staked {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

/* ---- Candy-glossy primary CTA with a 3D lip + press bounce ---- */
body:not(.game-active) .primary {
  min-height: 54px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #ffa64d, var(--cta) 55%, var(--cta-dark));
  box-shadow: 0 6px 0 var(--cta-dark), 0 14px 24px rgba(242, 106, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 90ms ease, box-shadow 120ms ease, filter 150ms ease;
}

body:not(.game-active) .primary:hover:not(:disabled) {
  filter: brightness(1.04);
}

body:not(.game-active) .primary:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--cta-dark), 0 6px 12px rgba(242, 106, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body:not(.game-active) .primary:disabled {
  background: linear-gradient(180deg, #cfd8dc, #b6c2c7);
  box-shadow: 0 5px 0 #9aa7ac;
  color: #f3f6f7;
}

/* ---- Segmented choices: a soft track with a solid "chosen" pill ---- */
body:not(.game-active) .segmented {
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 9px;
}

body:not(.game-active) #tokensToWinGroup {
  grid-template-columns: repeat(4, 1fr);
}

body:not(.game-active) .segment {
  min-height: 50px;
  border-radius: 14px;
  border: 2px solid #e6ece9;
  background: #fbfdfc;
  font-size: 20px;
  font-weight: 700;
  color: #2a3a42;
}

body:not(.game-active) .segment.active {
  color: #6a4a00;
  border-color: var(--gold);
  background: radial-gradient(circle at 50% 30%, #ffe589, #ffd23d 70%, #f7b500);
  box-shadow: 0 4px 0 var(--gold-deep), 0 9px 16px rgba(224, 138, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body:not(.game-active) .segment:active {
  transform: translateY(2px);
}

/* ---- Stake chips read like coins; the picked one turns gold ---- */
body:not(.game-active) .stake-grid {
  gap: 9px;
}

body:not(.game-active) .stake-option {
  min-height: 50px;
  border-radius: 14px;
  border: 2px solid #e6ece9;
  background: #fbfdfc;
  font-size: 20px;
  font-weight: 700;
  color: #2a3a42;
  transition: transform 90ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

body:not(.game-active) .stake-option.active {
  color: #6a4a00;
  border-color: var(--gold);
  background: radial-gradient(circle at 50% 30%, #ffe589, #ffd23d 70%, #f7b500);
  box-shadow: 0 5px 0 var(--gold-deep), 0 10px 18px rgba(224, 138, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body:not(.game-active) .stake-option:active {
  transform: translateY(2px);
}

/* ---- Auth tabs ---- */
body:not(.game-active) .tabs {
  background: #eef3f1;
  border-radius: 16px;
  padding: 6px;
}

body:not(.game-active) .tab {
  min-height: 44px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #5b6b73;
  background: transparent;
  box-shadow: none;
}

body:not(.game-active) .tab.active {
  color: var(--go-dark);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(8, 50, 70, 0.12);
}

/* ---- Inputs ---- */
body:not(.game-active) input {
  min-height: 50px;
  border: 2px solid #e6ece9;
  border-radius: 14px;
  background: #fbfdfc;
}

body:not(.game-active) input:focus {
  border-color: var(--go);
  outline: 3px solid rgba(24, 193, 114, 0.2);
}

/* ---- Small chrome: pill, round refresh, logout ---- */
body:not(.game-active) .pill {
  background: #eaf6ef;
  color: var(--go-dark);
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 12px;
}

body:not(.game-active) .icon-button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 22px;
  color: #0c2230;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(8, 50, 70, 0.22);
  display: grid;
  place-items: center;
}

body:not(.game-active) .icon-button:active {
  transform: rotate(-90deg) scale(0.92);
  transition: transform 200ms ease;
}

body:not(.game-active) .text-button#logoutButton {
  color: var(--red);
  font-weight: 700;
}

/* ---- Motion ---- */
@keyframes brandBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-disc {
    animation: none;
  }
}

.disclosure { margin-top: 12px; display: grid; gap: 6px; }
.disclosure-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #e3e8ec; }
.disclosure-row span { font-size: 14px; }

/* ---- Colourful page, no white container cards (v=colorful-6): panel/section
   text reads light on the gradient; the light control + list surfaces (inputs,
   stake tiles, room rows, start gate) keep their dark text. ---- */
body:not(.game-active) .panel,
body:not(.game-active) .account-strip {
  color: #ffffff;
}
body:not(.game-active) h2,
body:not(.game-active) label,
body:not(.game-active) .field-title {
  color: #ffffff;
}
body:not(.game-active) .field-hint,
body:not(.game-active) .panel .muted,
body:not(.game-active) .account-strip .muted,
body:not(.game-active) .account-strip .staked {
  color: rgba(255, 255, 255, 0.85);
}
/* Re-assert dark text on the light control + list surfaces (after the rules above). */
body:not(.game-active) .room-row,
body:not(.game-active) .player-row,
body:not(.game-active) .start-gate {
  color: var(--ink);
}
body:not(.game-active) .room-row .muted,
body:not(.game-active) .player-row .muted,
body:not(.game-active) .start-gate .muted {
  color: var(--muted);
}
/* Subtle shadow so the light panel text stays legible on the bright gradient. */
body:not(.game-active) h2,
body:not(.game-active) label,
body:not(.game-active) .field-title,
body:not(.game-active) .field-hint,
body:not(.game-active) .account-strip,
body:not(.game-active) .panel .muted {
  text-shadow: 0 1px 3px rgba(0, 40, 60, 0.30);
}

/* --- Admin console -------------------------------------------------------- */
/* The admin console is a full screen within the app shell (like the lobby),
   not a floating modal — it renders under the shared top bar with #appPanel
   hidden, and the top-bar back arrow exits it. */
.admin-overlay { margin-top: 12px; }
.admin-overlay.hidden { display: none; }

.admin-modal {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  color: var(--ink);
  overflow: hidden;
}

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.admin-head h2 { font-size: 18px; }
.admin-head-actions { display: flex; align-items: center; gap: 8px; }

.admin-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.admin-tab {
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f4f7f4;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}
.admin-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.admin-body { padding: 14px 16px 20px; }
.admin-h3 { margin: 18px 0 6px; font-size: 14px; }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.admin-stat { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.admin-stat-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.admin-stat strong { font-size: 18px; }
.admin-stat strong.ok { color: var(--green); }
.admin-stat strong.bad { color: var(--red); }

.admin-halt {
  margin-top: 12px;
  border: 1px solid var(--red);
  background: #fbecea;
  border-radius: 8px;
  padding: 12px;
}
.admin-halt p { margin: 0 0 8px; }

.admin-table-wrap { overflow-x: auto; margin-top: 6px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: top;
}
.admin-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-act {
  padding: 4px 9px;
  margin: 0 4px 4px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f4f7f4;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.admin-act.danger { border-color: #e6b0aa; background: #fbecea; color: var(--red); }

.admin-empty, .admin-error { color: var(--muted); font-style: italic; padding: 8px 0; }
.admin-error { color: var(--red); font-style: normal; }

/* --- Two-level lobby navigation: Lobby | Rooms, then Open rooms | My rooms --- */
.lobby-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}
body:not(.game-active) #lobbyPanel { margin-top: 2px; padding-top: 10px; }
.lobby-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  background: transparent;
  color: #ffffff;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  font-size: 19px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.lobby-tab .lobby-tab-ico { font-size: 23px; line-height: 1; }
.lobby-tab .lobby-tab-ico svg { width: 26px; height: 26px; display: block; }
.lobby-tab:not(.active):hover { background: rgba(255, 255, 255, 0.14); }
.lobby-tab:active { transform: scale(0.97); }
.lobby-tab.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #1bc36b 0%, #168a57 100%);
  box-shadow: 0 6px 16px rgba(22, 138, 87, 0.34);
}

.rooms-subnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.rooms-subtab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 13px;
  background: transparent;
  color: #ffffff;
  font-weight: 800;
  font-size: 17px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.rooms-subtab .rooms-subtab-ico { font-size: 19px; line-height: 1; }
.rooms-subtab:not(.active):hover { background: rgba(255, 255, 255, 0.14); }
.rooms-subtab:active { transform: scale(0.97); }
.rooms-subtab.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #2aa0d6 0%, #2367b1 100%);
  box-shadow: 0 5px 14px rgba(35, 103, 177, 0.30);
}

/* The Lobby/Rooms tabs already name the screen — drop the duplicate top title. */
#screenTitle { display: none; }

/* Pawns-to-win: real pawn assets, no card container; selection shown by emphasis
   (the chosen set is full-strength + lifted with a green underline; others dim). */
body:not(.game-active) #tokensToWinGroup { gap: 10px; }
body:not(.game-active) #tokensToWinGroup .segment {
  position: relative;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 94px;
  padding: 2px;
  opacity: 0.82;
  transition: opacity 140ms ease, transform 140ms ease;
}
body:not(.game-active) #tokensToWinGroup .segment.active {
  border: 2.5px solid var(--gold);
  border-radius: 14px;
  background: rgba(247, 181, 0, 0.16);
  box-shadow: 0 4px 12px rgba(224, 138, 0, 0.22);
  opacity: 1;
  transform: translateY(-1px) scale(1.05);
}
body:not(.game-active) #tokensToWinGroup .segment:active { transform: scale(0.95); }
.pawn-set { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.pawn-row { display: flex; justify-content: center; gap: 2px; }
.pawn-asset {
  width: 29px;
  height: 41px;
  background-repeat: no-repeat;
  background-position: center 52%;
  background-size: 168% auto;
}
.pawn-asset.red { background-image: url("/static/assets/pawns/red.png"); }
.pawn-asset.blue { background-image: url("/static/assets/pawns/blue.png"); }
.pawn-asset.yellow { background-image: url("/static/assets/pawns/yellow.png"); }
.pawn-asset.green { background-image: url("/static/assets/pawns/green.png"); }
/* Graduated sizes: 3 and 4 share the base size above; 2 is bigger, 1 is biggest. */
#tokensToWinGroup [data-tokens="2"] .pawn-asset { width: 33px; height: 47px; }
#tokensToWinGroup [data-tokens="1"] .pawn-asset { width: 40px; height: 57px; }

/* The top bar (just the logo now) was bulky — keep it compact. Scoped to the
   lobby/auth (not the game). */
body:not(.game-active) .shell { padding-top: 6px; }
body:not(.game-active) .topbar { margin-bottom: 6px; }

/* --- Wallet overlay: coin chip -> hub (Deposit/Withdraw/History) -> sub-views - */
body.wallet-open { overflow: hidden; }
.wallet-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 22, 18, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.wallet-overlay.hidden { display: none; }
.wallet-modal {
  width: 100%;
  max-width: 460px;
  margin: 12px 0 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--ink);
  overflow: hidden;
}
.wallet-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.wallet-head h2 { text-align: center; font-size: 18px; }
.wallet-head .icon-button { font-size: 18px; }
.wallet-head .wallet-back { background: var(--accent); color: #ffffff; font-size: 26px; font-weight: 700; line-height: 1; }
.wallet-head #walletCloseButton { background: var(--red); color: #ffffff; }
.wallet-back { justify-self: start; }
.wallet-back-hidden { visibility: hidden; }
.wallet-balance {
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.wallet-balance strong { font-size: 22px; color: var(--gold-deep); }
.wallet-coin-ico { font-size: 30px; vertical-align: middle; line-height: 1; filter: drop-shadow(0 2px 3px rgba(180, 120, 0, 0.4)); }
.wallet-body { padding: 16px; }
/* These overlays sit on white modals, so the green-background heading rules (white
   text + shadow) make titles invisible. Force dark, shadow-free text. Prefixed with
   body:not(.game-active) to outrank those rules. */
body:not(.game-active) .wallet-modal h2, body:not(.game-active) .wallet-modal h3, body:not(.game-active) .wallet-modal label,
body:not(.game-active) .admin-modal h2, body:not(.game-active) .admin-modal h3, body:not(.game-active) .admin-modal label,
body:not(.game-active) .settings-modal h2, body:not(.game-active) .settings-modal h3, body:not(.game-active) .settings-modal label {
  text-shadow: none;
  color: var(--ink);
}

.wallet-hub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wallet-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 124px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  color: #ffffff;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(16, 40, 34, 0.18);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.wallet-tile:hover { filter: brightness(1.05); }
.wallet-tile:active { transform: scale(0.97); }
.wallet-tile-ico { font-size: 42px; line-height: 1; }
.wallet-tile.deposit { background: linear-gradient(150deg, #2fd084, #16a85f); }
.wallet-tile.withdraw { background: linear-gradient(150deg, #ffd23d, #f7b500); color: #6a4a00; }
.wallet-tile.history {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 7px);
  background: linear-gradient(150deg, #3aa0ff, #2367b1);
}

.wallet-section { display: flex; flex-direction: column; gap: 12px; }
.wallet-lead { margin: 0; font-size: 15px; font-weight: 700; }
.wallet-muted { margin: 0; font-size: 13px; color: var(--muted); }
.wallet-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px dashed var(--line);
}
.wallet-callout-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.wallet-callout-value { font-size: 26px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); }
.wallet-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #2b363d; }
.wallet-h3 { margin: 12px 0 2px; font-size: 14px; }
.wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.wallet-row-label { font-weight: 600; }
.wallet-amt { font-weight: 800; }
.wallet-amt.pos { color: var(--green); }
.wallet-amt.neg { color: var(--red); }
.wallet-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: capitalize; }
.wallet-status.requested { background: #fef0d4; color: #8a5a00; }
.wallet-status.paid { background: #def3e4; color: #176b3a; }
.wallet-status.rejected { background: #fbe3e0; color: #a3342a; }
.wallet-note { margin: 0; font-size: 12px; color: var(--muted); }
.wallet-error { color: var(--red); font-size: 13px; }

/* --- Top app-bar buttons (back + settings) + a generic visibility helper ----- */
.is-invisible { visibility: hidden; }
.topbar-btn {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: #0e4a43;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(16, 40, 34, 0.28);
  transition: transform 0.12s ease, background 0.12s ease;
}
.topbar-btn:active { transform: scale(0.94); }
.topbar-back { font-size: 28px; font-weight: 700; padding-bottom: 3px; }

/* --- Settings overlay: gear -> a menu of rows ------------------------------- */
body.settings-open { overflow: hidden; }
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 22, 18, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.settings-overlay.hidden { display: none; }
.settings-modal {
  width: 100%;
  max-width: 440px;
  margin: 12px 0 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--ink);
  overflow: hidden;
}
.settings-head {
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--line);
}
.settings-head h2 { font-size: 18px; }
.settings-head #settingsCloseButton { background: var(--red); color: #ffffff; justify-self: end; }
.settings-body { padding: 8px 10px 14px; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.settings-row:last-of-type { border-bottom: 0; }
.settings-row:active { background: var(--bg); }
.settings-ico { font-size: 22px; line-height: 1; width: 26px; text-align: center; }
.settings-ico svg { width: 23px; height: 23px; display: inline-block; vertical-align: middle; }
.settings-label { flex: 1; }
.settings-value { color: var(--muted); font-size: 14px; font-weight: 700; }
.settings-chev { color: var(--muted); font-size: 20px; }
.settings-row.danger { color: var(--red); }
.settings-note { margin: 10px 12px 4px; font-size: 13px; color: var(--muted); min-height: 18px; }
/* Settings sub-views (language picker, about us) */
.settings-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 4px;
  padding: 6px 12px 6px 6px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.settings-back:active { opacity: 0.65; }
.settings-check { color: var(--green); font-size: 19px; font-weight: 900; }
.about-block { padding: 2px 4px 6px; }
.about-block p { margin: 0 0 9px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.about-block h3 { margin: 14px 0 5px; font-size: 14px; font-weight: 800; color: var(--ink); }
.about-block ul { margin: 0 0 9px; padding-left: 18px; }
.about-block li { margin: 0 0 5px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.about-block a { color: var(--accent); font-weight: 700; word-break: break-word; }

/* Admin payout helpers: a copyable block (contacts list / pending-payout batch) the
   operator selects and pastes into telebirr, plus a small caption above it. */
.admin-sub { color: #65717b; font-size: 13px; margin: 12px 0 4px; }
.admin-copy { margin: 4px 0 10px; }
.admin-copy-area {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  resize: vertical;
  border: 1px solid #c9d2d9;
  border-radius: 6px;
  padding: 8px;
  background: #fbfdff;
  color: #172026;
}
.admin-copy .admin-act { margin-top: 6px; }

/* --- Confirmation dialog: on-brand, localized replacement for window.confirm()
   on money / destructive actions. Built dynamically by confirmModal() in app.js;
   sits above every other overlay (z-index 200). Explicit dark text + no shadow so
   it stays legible even when it pops over the green game board (.game-active). - */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 22, 18, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-modal {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 20px 18px;
  text-align: center;
}
.confirm-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  text-shadow: none;
}
.confirm-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  text-shadow: none;
}
.confirm-actions {
  display: flex;
  gap: 10px;
}
.confirm-actions button {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line);
}
.confirm-cancel {
  background: var(--panel);
  color: var(--ink);
}
.confirm-cancel:hover { background: #eef1ec; }
.confirm-ok {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.confirm-ok--danger {
  background: var(--red);
  border-color: var(--red);
}
.confirm-ok:hover { filter: brightness(1.06); }