:root {
  --night: #170b38;
  --deep: #25104f;
  --plum: #4c1f79;
  --ink: #fff9ee;
  --muted: #d8caec;
  --gold: #ffd96a;
  --gold-deep: #e99324;
  --pink: #ff5f94;
  --berry: #c93472;
  --aqua: #59ead7;
  --blue: #5eb7ff;
  --lime: #a9ef69;
  --cream: #fff9e9;
  --glass: rgba(37, 16, 79, .78);
  --glass-light: rgba(255, 255, 255, .11);
  --edge: rgba(255, 255, 255, .22);
  --shadow: 0 24px 60px rgba(10, 3, 34, .46);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--night);
  font-family: ui-rounded, "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

body { min-height: 100vh; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

.app-shell {
  min-height: 100vh;
  isolation: isolate;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.world {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 7, 55, .05), rgba(18, 7, 55, .55)),
    url("assets/worlds/monster-candy-kingdom.webp") center / cover no-repeat,
    radial-gradient(circle at 50% 20%, #9950b4 0, #3b1a6d 45%, #14092f 100%);
}

.world::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 28%, transparent 0 25%, rgba(17, 5, 42, .18) 62%, rgba(9, 2, 26, .65) 100%),
    linear-gradient(90deg, rgba(15, 4, 38, .35), transparent 24%, transparent 76%, rgba(15, 4, 38, .35));
}

.world::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background:
    repeating-linear-gradient(117deg, transparent 0 7px, rgba(255,255,255,.025) 7px 8px),
    repeating-linear-gradient(23deg, transparent 0 13px, rgba(22,4,51,.04) 13px 14px);
  mix-blend-mode: soft-light;
}

.ambient-sparkles {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-sparkles i {
  position: absolute;
  width: var(--s);
  height: var(--s);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #fff2a8 26%, rgba(255,217,106,.15) 62%, transparent 72%);
  filter: drop-shadow(0 0 8px #ffe56f);
  animation: twinkle var(--d) ease-in-out var(--delay) infinite alternate;
}

@keyframes twinkle {
  0% { opacity: .18; transform: scale(.55) translateY(0); }
  100% { opacity: 1; transform: scale(1.2) translateY(-16px); }
}

.hud {
  position: relative;
  z-index: 20;
  min-height: 78px;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(20,8,51,.9), rgba(28,9,62,.68));
  box-shadow: 0 10px 30px rgba(13,4,34,.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.logo-gem {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 3px solid #ffe89a;
  border-radius: 18px 22px 17px 23px;
  color: #442060;
  background: linear-gradient(145deg, #fff6a7, #f7b534 70%);
  box-shadow: inset 0 4px 8px rgba(255,255,255,.7), 0 6px 0 #a8591d, 0 10px 20px rgba(6,2,22,.35);
  font-size: 28px;
  font-weight: 1000;
  transform: rotate(-4deg);
}

.logo-gem::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 13px 17px 12px 18px;
}

.logo-copy strong,
.logo-copy small { display: block; }
.logo-copy strong {
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -.04em;
  line-height: .95;
}
.logo-copy small {
  margin-top: 5px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hud-right,
.hud-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.glass-pill {
  min-height: 44px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 900;
}

button.glass-pill { cursor: pointer; }
button.glass-pill:hover { background: rgba(255,255,255,.18); }

.spark-total {
  color: #442060;
  background: linear-gradient(145deg, #fff0a0, #ffc441);
  border-color: #fff4b5;
  box-shadow: inset 0 2px rgba(255,255,255,.5), 0 5px 0 #b76522;
}

.spark-total b { font-size: 17px; }

.scene {
  position: relative;
  z-index: 5;
  width: min(1500px, calc(100% - 64px));
  min-height: calc(100vh - 78px);
  margin: 0 auto;
}

.landing {
  height: calc(100vh - 78px);
  min-height: 760px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 24px;
}

.landing-copy {
  position: relative;
  z-index: 4;
  align-self: center;
  max-width: 680px;
  padding: 0 0 120px 26px;
  text-shadow: 0 4px 20px rgba(22,5,50,.6);
}

.kicker {
  margin: 0 0 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffec98;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 5px;
  background: linear-gradient(90deg, #ffce4c, #ff6b9c);
  box-shadow: 0 0 12px #ffdc62;
}

.landing h1 {
  margin: 0;
  max-width: 660px;
  font-size: clamp(74px, 6.3vw, 108px);
  font-weight: 1000;
  letter-spacing: -.075em;
  line-height: .78;
  text-transform: uppercase;
}

.title-candy {
  display: block;
  color: transparent;
  background: linear-gradient(180deg, #fff9d5 0%, #ffd85f 45%, #f98a43 72%, #c73a73 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 7px 0 #6a2577) drop-shadow(0 12px 12px rgba(23,5,45,.55));
}

.title-climb {
  display: block;
  padding-left: 68px;
  color: transparent;
  background: linear-gradient(180deg, #b9fff1 0%, #50ddcf 55%, #2692bb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 7px 0 #214f83) drop-shadow(0 12px 12px rgba(23,5,45,.55));
}

.landing-copy .lede {
  max-width: 560px;
  margin: 34px 0 26px;
  color: #fff9ee;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.45;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.primary-action,
.secondary-action {
  position: relative;
  min-height: 58px;
  padding: 13px 24px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  font-weight: 1000;
  letter-spacing: .01em;
  transition: transform .16s var(--ease), filter .16s;
}

.primary-action {
  min-width: 210px;
  color: #3a1957;
  background: linear-gradient(180deg, #fff49c 0%, #ffd348 55%, #f6a32e 100%);
  box-shadow: inset 0 3px rgba(255,255,255,.65), 0 7px 0 #a65125, 0 15px 26px rgba(21,5,43,.34);
  font-size: 18px;
}

.primary-action::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 14px;
  pointer-events: none;
}

.primary-action:hover { filter: brightness(1.08) saturate(1.06); transform: translateY(-2px); }
.primary-action:active { transform: translateY(5px); box-shadow: inset 0 3px rgba(255,255,255,.55), 0 2px 0 #a65125; }
.primary-action:disabled { cursor: wait; opacity: .7; filter: grayscale(.2); }

.secondary-action {
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(36,14,77,.64);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 9px 20px rgba(10,2,28,.25);
  backdrop-filter: blur(12px);
}
.secondary-action:hover { background: rgba(69,29,114,.76); transform: translateY(-2px); }

.hero-character {
  position: relative;
  align-self: end;
  height: calc(100vh - 100px);
  min-height: 720px;
  display: flex;
  align-items: end;
  justify-content: center;
}

.hero-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  left: 50%;
  bottom: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,101,.48), rgba(244,93,169,.21) 44%, transparent 70%);
  filter: blur(8px);
  transform: translateX(-50%);
  animation: heroGlow 3.6s ease-in-out infinite alternate;
}

@keyframes heroGlow { to { transform: translateX(-50%) scale(1.08); opacity: .72; } }

.hero-character img {
  position: relative;
  z-index: 3;
  width: min(620px, 85%);
  height: 88%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 30px 25px rgba(14,3,34,.55));
  animation: heroFloat 4.5s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-13px) rotate(1deg); }
}

.hero-bubble {
  position: absolute;
  z-index: 5;
  right: 4%;
  top: 24%;
  max-width: 210px;
  padding: 15px 18px;
  border: 3px solid #fff0ad;
  border-radius: 25px 25px 25px 7px;
  color: #462050;
  background: linear-gradient(150deg, #fffdf1, #ffeaa5);
  box-shadow: 0 13px 30px rgba(28,7,52,.35);
  font-size: 15px;
  font-weight: 1000;
  transform: rotate(3deg);
}

.roster-dock {
  position: absolute;
  z-index: 10;
  left: 24px;
  right: 24px;
  bottom: 18px;
  min-height: 122px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 175px repeat(6, minmax(120px, 1fr));
  align-items: stretch;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 27px;
  background: linear-gradient(180deg, rgba(42,15,83,.8), rgba(25,9,57,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 22px 45px rgba(9,2,26,.4);
  backdrop-filter: blur(20px) saturate(1.25);
}

.roster-title {
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.roster-title small {
  color: var(--gold);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.roster-title strong {
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.05;
}

.roster-button {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  cursor: pointer;
  color: white;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  box-shadow: inset 0 1px rgba(255,255,255,.17);
  transition: transform .18s var(--ease), background .18s, border .18s;
}
.roster-button:hover,
.roster-button.selected {
  z-index: 2;
  border-color: #ffe47a;
  background: linear-gradient(145deg, rgba(255,226,111,.28), rgba(255,104,161,.15));
  transform: translateY(-9px) scale(1.035);
  box-shadow: 0 14px 25px rgba(8,2,24,.32), inset 0 1px rgba(255,255,255,.3);
}
.roster-button img {
  position: absolute;
  width: 70px;
  height: 96px;
  left: 2px;
  bottom: -5px;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px rgba(12,3,31,.45));
}
.roster-button span {
  position: absolute;
  left: 67px;
  right: 5px;
  top: 29px;
  text-align: left;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.05;
}
.roster-button small {
  position: absolute;
  left: 67px;
  right: 5px;
  top: 59px;
  color: #d9c9eb;
  text-align: left;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.1;
}

/* Team setup */
.setup-scene {
  min-height: calc(100vh - 78px);
  padding: 30px 0 38px;
  display: grid;
  grid-template-columns: minmax(680px, 1.12fr) minmax(410px, .72fr);
  gap: 22px;
  align-items: stretch;
}

.glass-panel {
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(48,18,91,.87), rgba(25,9,59,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.2), var(--shadow);
  backdrop-filter: blur(22px) saturate(1.2);
}

.setup-gallery {
  padding: 26px;
}

.panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.eyebrow {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.panel-heading h1,
.panel-heading h2,
.team-panel h2 {
  margin: 0;
  font-size: 37px;
  font-weight: 1000;
  letter-spacing: -.045em;
  line-height: 1;
}
.panel-heading p { max-width: 320px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }

.character-gallery {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.character-pick {
  position: relative;
  min-height: 258px;
  overflow: hidden;
  padding: 0;
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 24px;
  cursor: pointer;
  color: white;
  background:
    radial-gradient(circle at 50% 30%, var(--char-glow), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 10px 22px rgba(9,2,27,.22);
  transition: transform .2s var(--ease), border .2s, filter .2s;
}
.character-pick:hover { transform: translateY(-6px); border-color: rgba(255,231,128,.7); }
.character-pick.selected {
  border-color: #ffe47a;
  box-shadow: 0 0 0 4px rgba(255,219,92,.2), 0 18px 30px rgba(8,2,26,.35);
  transform: translateY(-5px);
}
.character-pick.unavailable { opacity: .5; filter: grayscale(.45); }
.character-pick img {
  position: absolute;
  width: 90%;
  height: 202px;
  left: 5%;
  top: 2px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 13px 10px rgba(8,2,26,.38));
  transition: transform .24s var(--ease);
}
.character-pick:hover img { transform: scale(1.045) rotate(-1deg); }
.character-pick footer {
  position: absolute;
  inset: auto 0 0;
  min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(19,6,45,.88) 24%);
}
.character-pick footer strong,
.character-pick footer small { display: block; }
.character-pick footer strong { font-size: 15px; }
.character-pick footer small { margin-top: 3px; color: #dbcdec; font-size: 10px; font-weight: 800; }
.assigned-chip {
  position: absolute;
  z-index: 4;
  right: 10px;
  top: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  color: #412052;
  background: var(--gold);
  font-size: 9px;
  font-weight: 1000;
}

.team-panel {
  padding: 26px;
  display: flex;
  flex-direction: column;
}

.count-control {
  margin: 18px 0;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  background: rgba(7,2,25,.28);
}
.count-control button {
  min-height: 43px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  color: #cfc0e3;
  background: transparent;
  font-size: 13px;
  font-weight: 1000;
}
.count-control button.selected {
  color: #402052;
  background: linear-gradient(180deg, #fff1a2, #ffc347);
  box-shadow: inset 0 2px rgba(255,255,255,.5), 0 3px 0 #9d5424;
}

.player-drafts {
  display: grid;
  gap: 9px;
}
.draft-row {
  position: relative;
  min-height: 92px;
  padding: 8px 8px 8px 76px;
  display: grid;
  grid-template-columns: 1fr 44px;
  grid-template-rows: 43px 31px;
  align-items: center;
  gap: 4px 7px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  transition: border .17s, background .17s;
}
.draft-row.active {
  border-color: #ffe378;
  background: rgba(255,221,98,.13);
}
.draft-avatar {
  position: absolute;
  left: 7px;
  bottom: 4px;
  width: 62px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: radial-gradient(circle, var(--token-color), rgba(255,255,255,.06) 68%);
}
.draft-avatar img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(5,1,20,.4)); }
.draft-row input {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-height: 43px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 9px 12px;
  color: #fff;
  background: rgba(12,3,35,.32);
  font-size: 15px;
  font-weight: 900;
}
.draft-row input::placeholder { color: #b7a9c9; }
.random-mini {
  grid-column: 2;
  grid-row: 1;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255,255,255,.1);
  font-size: 19px;
}
.random-mini:hover { background: rgba(255,255,255,.2); }

.draft-math-picker {
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #ffe88f;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.draft-math-picker select {
  width: 100%;
  min-height: 31px;
  padding: 2px 27px 2px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  color: #fff;
  background: #3c2161;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.setup-options {
  margin-top: auto;
  padding-top: 16px;
}
.math-guide {
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}
.math-guide strong,
.math-guide small { display: block; }
.math-guide strong { font-size: 13px; }
.math-guide small { margin-top: 3px; color: #c9b9db; font-size: 10px; line-height: 1.3; }
.math-guide-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid #fff2a2;
  border-radius: 50%;
  color: #3e1b54;
  background: linear-gradient(145deg, #fff8b4, #ffc348);
  box-shadow: inset 0 2px rgba(255,255,255,.6), 0 4px 0 #9b4f25;
  font-size: 21px;
  font-weight: 1000;
}
.setup-buttons { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.setup-buttons .primary-action { width: 100%; }

/* Game board */
.game-world { height: 100vh; min-height: 780px; }
.game-world .hud { height: 82px; min-height: 82px; padding-block: 8px; }
.game-world .scene { height: calc(100vh - 82px); min-height: 698px; width: calc(100% - 20px); max-width: none; }

.turn-display {
  min-width: 260px;
  padding: 7px 15px 7px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(11,3,33,.35);
}
.turn-avatar {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 4px solid var(--player-color);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.52), var(--player-color));
  box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 0 22px color-mix(in srgb, var(--player-color) 55%, transparent);
}
.turn-avatar img { width: 115%; height: 115%; object-fit: contain; }
.turn-copy small,
.turn-copy strong { display: block; }
.turn-copy small { color: var(--gold); font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.turn-copy strong { margin-top: 2px; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }

.game-layout {
  position: relative;
  height: 100%;
  padding: 14px 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-rows: minmax(0, 1fr) 118px;
  gap: 12px;
}

.players-rail,
.dice-rail {
  position: relative;
  z-index: 9;
}

.players-rail { grid-column: 1; grid-row: 2; min-width: 0; }
.dice-rail { grid-column: 2; grid-row: 1 / 3; align-self: center; }

.rail-panel {
  padding: 15px;
  border: 2px solid rgba(255,235,153,.34);
  border-radius: 25px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), transparent 34%),
    linear-gradient(150deg, rgba(48,17,91,.9), rgba(21,7,52,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 13px 0 rgba(70,27,84,.6), 0 22px 42px rgba(7,2,24,.42);
  backdrop-filter: blur(20px);
}
.players-rail .rail-panel {
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  display: grid;
  align-items: center;
  gap: 8px;
  border-radius: 22px;
}
.rail-heading {
  margin: 0;
  padding: 0 8px;
  color: #ffeca0;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .11em;
  line-height: 1.1;
  text-transform: uppercase;
}
.rail-heading span { display: block; margin-bottom: 4px; color: white; font-size: 17px; letter-spacing: -.02em; text-transform: none; }
.player-score {
  position: relative;
  width: 100%;
  max-width: 260px;
  min-height: 92px;
  height: 100%;
  margin: 0;
  padding: 9px 8px 9px 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.065);
}
.player-score.active {
  border-color: var(--player-color);
  background: rgba(255,255,255,.13);
  box-shadow: inset 4px 0 var(--player-color), 0 0 18px color-mix(in srgb, var(--player-color) 28%, transparent);
}
.score-avatar {
  position: absolute;
  left: 5px;
  bottom: 2px;
  width: 80px;
  height: 92px;
}
.score-avatar img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(0,0,0,.4)); }
.player-score.active .score-avatar { width: 91px; height: 104px; left: -1px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--player-color) 72%, transparent)); }
.player-score strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.player-score small { margin-top: 3px; display: flex; gap: 8px; color: #d5c4e5; font-size: 9px; font-weight: 900; }
.badge-row { height: 14px; margin-top: 3px; display: flex; gap: 2px; font-size: 12px; }
.roster-turn-badge {
  position: absolute;
  z-index: 3;
  left: 7px;
  top: 5px;
  padding: 3px 6px;
  border: 2px solid #fff8bf;
  border-radius: 999px;
  color: #421b51;
  background: linear-gradient(180deg, #fff9a9, #ffc643);
  box-shadow: 0 3px 0 #9d4e36;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.board-stage {
  position: relative;
  z-index: 5;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.board-aura {
  position: absolute;
  width: 98%;
  height: 94%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,229,124,.32), rgba(245,89,163,.13) 48%, transparent 72%);
  filter: blur(15px);
}

.board-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 6px solid rgba(255,246,195,.82);
  border-radius: 46px;
  background:
    linear-gradient(145deg, rgba(255,245,180,.38), rgba(255,255,255,.04) 24%, rgba(37,11,75,.72) 76%),
    linear-gradient(rgba(33,8,64,.48), rgba(33,8,64,.62)),
    url("assets/worlds/monster-candy-kingdom.webp") center / cover no-repeat,
    rgba(39,12,78,.74);
  box-shadow:
    inset 0 4px 12px rgba(255,255,255,.52),
    inset 0 -14px 24px rgba(44,12,70,.5),
    0 10px 0 #793370,
    0 18px 0 #421d58,
    0 31px 55px rgba(10,2,29,.58);
  transform: rotateX(2deg);
  transform-style: preserve-3d;
}

.board-frame::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 34px;
  pointer-events: none;
}

.board-frame::after {
  content: "";
  position: absolute;
  z-index: 14;
  inset: 13px;
  border-radius: 29px;
  pointer-events: none;
  box-shadow: inset 0 0 34px rgba(255,224,128,.15), inset 0 0 4px rgba(255,255,255,.38);
}

.board-grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
}

.board-scenery {
  position: absolute;
  z-index: 0;
  inset: 20px;
  overflow: hidden;
  border-radius: 25px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 82%, rgba(82,221,191,.36), transparent 19%),
    radial-gradient(ellipse at 70% 20%, rgba(255,206,94,.28), transparent 21%),
    linear-gradient(120deg, rgba(55,22,92,.12), rgba(255,134,181,.11));
  box-shadow: inset 0 0 50px rgba(31,8,62,.48);
}
.board-scenery::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 17%, rgba(255,255,220,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 9%, rgba(255,244,166,.78) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 67%, rgba(255,255,224,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 40%, rgba(255,236,154,.7) 0 2px, transparent 3px);
  animation: sceneryTwinkle 2.4s ease-in-out infinite alternate;
}
@keyframes sceneryTwinkle { to { opacity: .42; filter: brightness(1.35); } }

.scenery-cloud,
.scenery-hill,
.scenery-tree,
.scenery-river,
.scenery-castle,
.scenery-sign { position: absolute; display: block; }
.scenery-cloud {
  width: 120px;
  height: 35px;
  border-radius: 50%;
  background: rgba(255,247,223,.3);
  filter: blur(1px);
  box-shadow: 35px -13px 0 rgba(255,247,223,.24), 70px 1px 0 rgba(255,247,223,.2);
  animation: cloudFloat 6s ease-in-out infinite alternate;
}
.cloud-a { left: 3%; top: 27%; }
.cloud-b { right: 17%; top: 49%; animation-delay: -2.6s; transform: scale(.75); }
@keyframes cloudFloat { to { translate: 22px -5px; } }
.scenery-hill {
  width: 205px;
  height: 105px;
  bottom: -50px;
  border-radius: 55% 55% 0 0;
  background: radial-gradient(circle at 50% 20%, #b8f084, #4aaf88 72%);
  box-shadow: inset 0 8px rgba(255,255,255,.25), 0 -5px 18px rgba(16,70,74,.22);
  opacity: .68;
}
.hill-a { left: 4%; }
.hill-b { right: 5%; width: 270px; height: 130px; background: radial-gradient(circle at 50% 20%, #ff99bd, #b84c91 72%); }
.scenery-river {
  left: 18%;
  top: 43%;
  width: 72%;
  height: 14%;
  border: 4px solid rgba(255,255,255,.34);
  border-radius: 50% 44% 50% 46%;
  background: linear-gradient(180deg, rgba(111,245,232,.62), rgba(104,103,225,.54));
  box-shadow: inset 0 7px rgba(255,255,255,.25), 0 6px 14px rgba(22,23,98,.25);
  transform: rotate(-8deg);
  opacity: .7;
}
.scenery-river::after {
  content: "";
  position: absolute;
  inset: 23% 6%;
  border-top: 3px dashed rgba(255,255,255,.45);
  border-radius: 50%;
}
.scenery-tree {
  width: 22px;
  height: 50px;
  border-radius: 46% 54% 42% 58%;
  background: linear-gradient(145deg, #fff49a, #ff769e 55%, #b94794);
  box-shadow: inset 5px 4px rgba(255,255,255,.32), 0 5px 0 #7a375d, 0 10px 12px rgba(37,10,56,.22);
  transform-origin: bottom;
  animation: treeSway 2.8s ease-in-out infinite alternate;
}
.scenery-tree::after { content:""; position:absolute; width:7px; height:25px; left:8px; top:39px; border-radius:5px; background:#8e4e54; }
.tree-a { left: 2%; top: 8%; }
.tree-b { left: 43%; bottom: 3%; scale: .78; animation-delay: -1.1s; }
.tree-c { right: 2%; top: 39%; scale: 1.18; animation-delay: -2s; }
@keyframes treeSway { to { transform: rotate(5deg); } }
.scenery-castle { right: 1.4%; top: 0; width: 100px; height: 76px; filter: drop-shadow(0 8px 5px rgba(42,11,64,.38)); opacity: .9; }
.scenery-castle i { position:absolute; bottom:0; width:28px; height:54px; border-radius:14px 14px 5px 5px; background:linear-gradient(145deg,#fff4a4,#ff85ae 54%,#9951bb); box-shadow:inset 4px 3px rgba(255,255,255,.35); }
.scenery-castle i::before { content:""; position:absolute; left:5px; top:-13px; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:18px solid #ffe36d; }
.scenery-castle i:nth-child(1) { left:3px; height:43px; }
.scenery-castle i:nth-child(2) { left:36px; height:64px; width:32px; }
.scenery-castle i:nth-child(3) { right:1px; height:46px; }
.scenery-sign { right: 2%; top: 15%; padding:5px 8px; border:2px solid #fff0a1; border-radius:8px; color:#fff6b4; background:#6b2e67; box-shadow:0 4px 0 #3a183f; font-size:6px; font-weight:900; line-height:1.05; text-align:center; transform:rotate(4deg); }
.scenery-sign b { font-size:8px; }

.board-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.tile-piece {
  --tile-a: #ffcc5c;
  --tile-b: #ef8b37;
  position: absolute;
  z-index: 2;
  inset: 5px;
  border: 3px solid rgba(255,255,255,.74);
  border-radius: 21% 25% 20% 24%;
  background:
    radial-gradient(circle at 30% 17%, rgba(255,255,255,.78), transparent 8%),
    linear-gradient(145deg, rgba(255,255,255,.42), transparent 38%),
    linear-gradient(160deg, var(--tile-a), var(--tile-b));
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,.43),
    inset -5px -7px 9px rgba(81,21,81,.13),
    0 7px 0 color-mix(in srgb, var(--tile-b) 72%, #602252),
    0 10px 12px rgba(27,7,48,.2);
  transform: translateZ(5px) rotate(var(--wiggle));
  transform-origin: 50% 55%;
  transition: filter .2s ease, transform .2s var(--ease);
  animation: tileBreathe 2.8s ease-in-out infinite alternate;
}
.board-cell:nth-child(3n+1) .tile-piece { animation-delay: -.7s; }
.board-cell:nth-child(3n+2) .tile-piece { animation-delay: -1.5s; }
@keyframes tileBreathe { to { translate: 0 -2px; filter: brightness(1.035); } }
.tile-piece::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.21);
  border-radius: 18% 22% 17% 21%;
  background:
    radial-gradient(circle at 79% 78%, rgba(255,255,255,.14) 0 4%, transparent 5%),
    linear-gradient(135deg, transparent 54%, rgba(255,255,255,.07) 55% 57%, transparent 58%);
  pointer-events: none;
}
.tile-cookie .tile-piece {
  inset: 7px 13px 9px;
  border-radius: 50%;
  --tile-a: #ffd57b;
  --tile-b: #d67a3d;
  background:
    radial-gradient(circle at 28% 30%, #864a46 0 3px, transparent 4px),
    radial-gradient(circle at 62% 65%, #75404a 0 3px, transparent 4px),
    radial-gradient(circle at 70% 27%, #9a4e45 0 2px, transparent 3px),
    radial-gradient(circle at 39% 74%, #8e4850 0 2px, transparent 3px),
    radial-gradient(circle at 32% 18%, rgba(255,255,255,.72), transparent 9%),
    linear-gradient(145deg, var(--tile-a), var(--tile-b));
  box-shadow: inset 0 4px 7px rgba(255,255,255,.4), inset -7px -8px 12px rgba(105,44,55,.2), 0 8px 0 #89485a, 0 12px 14px rgba(25,7,45,.24);
}
.tile-gumdrop .tile-piece {
  inset: 3px 16px 11px;
  border-radius: 52% 48% 25% 25% / 62% 62% 28% 28%;
  --tile-a: #ff88bd;
  --tile-b: #c93682;
  background:
    radial-gradient(circle at 30% 19%, rgba(255,255,255,.82), transparent 11%),
    repeating-radial-gradient(circle at 50% 60%, rgba(255,255,255,.17) 0 1px, transparent 2px 5px),
    linear-gradient(160deg, var(--tile-a), var(--tile-b));
  box-shadow: inset 0 6px 9px rgba(255,255,255,.37), inset 0 -9px 9px rgba(103,23,85,.2), 0 9px 0 #7e2c72, 0 13px 16px rgba(25,7,45,.26);
}
.tile-taffy .tile-piece {
  inset: 9px 4px 8px;
  border-radius: 44% 56% 38% 62% / 55% 37% 63% 45%;
  --tile-a: #7cf5de;
  --tile-b: #279bb8;
  background: radial-gradient(circle at 29% 21%, rgba(255,255,255,.78), transparent 9%), repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 6px, transparent 7px 16px), linear-gradient(150deg, var(--tile-a), var(--tile-b));
}
.tile-crystal .tile-piece {
  inset: 2px 13px 7px;
  border: 0;
  border-radius: 16px;
  clip-path: polygon(50% 0, 92% 20%, 84% 86%, 50% 100%, 14% 86%, 7% 20%);
  --tile-a: #c1a5ff;
  --tile-b: #6844bb;
  background: linear-gradient(115deg, rgba(255,255,255,.62), transparent 28%), linear-gradient(70deg, transparent 48%, rgba(255,255,255,.17) 49% 52%, transparent 53%), linear-gradient(155deg, var(--tile-a), var(--tile-b));
  box-shadow: none;
  filter: drop-shadow(0 9px 0 #492767) drop-shadow(0 13px 8px rgba(22,5,42,.3));
}
.tile-macaroon .tile-piece {
  inset: 15px 3px 13px;
  border-radius: 999px;
  --tile-a: #ffe17b;
  --tile-b: #f29b40;
  background: linear-gradient(180deg, rgba(255,255,255,.65), transparent 27%), linear-gradient(180deg, var(--tile-a) 0 42%, #fff2cc 43% 57%, var(--tile-b) 58% 100%);
  box-shadow: inset 0 3px rgba(255,255,255,.6), inset 0 -6px 7px rgba(115,47,60,.18), 0 7px 0 #9d4e53, 0 11px 14px rgba(25,7,45,.25);
}
.tile-frosting .tile-piece {
  inset: 4px 8px 11px;
  border-radius: 64% 36% 61% 39% / 43% 62% 38% 57%;
  --tile-a: #fff2a0;
  --tile-b: #f07393;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.9), transparent 10%), radial-gradient(circle at 50% 40%, #ffeda1, transparent 58%), linear-gradient(145deg, var(--tile-a), var(--tile-b));
}
.tile-wafer .tile-piece {
  inset: 11px 3px 10px;
  border-radius: 15px 30px 14px 29px;
  --tile-a: #b494ff;
  --tile-b: #6a45c0;
  background: linear-gradient(145deg, rgba(255,255,255,.5), transparent 30%), repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,255,255,.2) 14px 18px), linear-gradient(160deg, var(--tile-a), var(--tile-b));
  transform: translateZ(5px) rotate(calc(var(--wiggle) - 1.5deg)) skewX(-3deg);
}
.board-cell.special .tile-piece { --tile-a: #fff497; --tile-b: #ffad35; filter: saturate(1.12); }
.board-cell.start-cell .tile-piece { --tile-a: #aef77c; --tile-b: #45b979; border-radius: 42% 58% 47% 53%; }
.board-cell.finish-cell .tile-piece { --tile-a: #fff3a3; --tile-b: #ff759e; animation: finishGlow 1.4s ease-in-out infinite alternate; }
.board-cell.occupied { z-index: 12; }
.board-cell.current-space .tile-piece {
  z-index: 10;
  filter: brightness(1.16) saturate(1.15) drop-shadow(0 0 12px #fff3a1);
  animation: currentTilePulse .7s var(--ease) infinite alternate;
}
.board-cell.current-space .tile-piece::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 4px solid #fff6a4;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(255,102,160,.72), 0 0 25px #fff2a0;
  animation: currentRing 1.1s ease-out infinite;
}
@keyframes currentTilePulse { to { transform: translateZ(12px) translateY(-4px) rotate(var(--wiggle)) scale(1.05); } }
@keyframes currentRing { to { opacity: 0; transform: scale(1.16); } }
@keyframes finishGlow { to { filter: brightness(1.18) drop-shadow(0 0 14px #ffe57a); box-shadow: inset 0 3px 5px rgba(255,255,255,.65), 0 7px 0 #bd4f70, 0 0 28px #ffe57a; } }

.cell-number {
  position: absolute;
  z-index: 13;
  left: 7px;
  top: 6px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  color: rgba(56,24,80,.72);
  background: rgba(255,255,255,.26);
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 2px 4px rgba(74,28,83,.14);
  font-size: 11px;
  font-weight: 1000;
}
.cell-symbol {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.65);
  font-size: 21px;
  text-shadow: 0 2px rgba(66,28,84,.25);
}
.finish-cell .cell-symbol { font-size: 29px; }
.special .cell-symbol { font-size: 29px; color: #fff7a4; text-shadow: 0 0 12px rgba(255,236,94,.84), 0 3px rgba(104,46,85,.3); }

.landmark-art { position:absolute; z-index:1; inset:14% 13% 8%; display:grid; place-items:center; filter:drop-shadow(0 6px 4px rgba(81,31,68,.25)); pointer-events:none; }
.landmark-art svg { width:100%; height:100%; overflow:visible; }
.art-cookie { fill:#d98a4a; stroke:#fff0a5; stroke-width:4; }
.art-chip { fill:#713d4d; }
.art-stick { fill:none; stroke:#fff1bf; stroke-width:7; stroke-linecap:round; paint-order:stroke; filter:drop-shadow(0 3px 0 #9a4d5d); }
.art-lolly-rim { fill:#fff2b5; stroke:#f36a9c; stroke-width:4; }
.art-lolly { fill:none; stroke:#7ae7dc; stroke-width:7; stroke-linecap:round; }
.art-crystal { stroke:#fff3c0; stroke-width:3; stroke-linejoin:round; }
.crystal-a { fill:#55d9d2; }.crystal-b { fill:#a678f0; }.crystal-c { fill:#ff72ad; }
.art-donut { fill:#c56d45; }.art-icing { fill:#ff87b7; stroke:#fff0ba; stroke-width:3; }.art-hole { fill:#8e5165; }
.art-sprinkles { fill:none; stroke:#fff070; stroke-width:3; stroke-linecap:round; }
.art-chest { fill:#bd5a42; stroke:#682c50; stroke-width:3; }.art-chest-lid { fill:#ffbd4d; stroke:#682c50; stroke-width:3; }.art-chest-band { fill:#ffe270; }.art-lock { fill:#fff4aa; stroke:#7b3f52; stroke-width:2; }
.art-wrapper { fill:#7ce5d8; stroke:#fff1b0; stroke-width:4; stroke-linejoin:round; }.art-candy { fill:#ff6fa6; stroke:#fff1b0; stroke-width:4; }.art-candy-stripe { fill:none; stroke:#7ce5d8; stroke-width:6; }
.art-crown { fill:#ffe266; stroke:#fff7bd; stroke-width:4; stroke-linejoin:round; }.art-crown-band { fill:#ee7d55; }.art-jewel { fill:#6ee3d5; stroke:#fff6c0; stroke-width:2; }

.token-stack {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}
.board-token {
  position: absolute;
  z-index: calc(20 + var(--token-index));
  left: var(--token-x);
  bottom: var(--token-y);
  width: 76px;
  height: 90px;
  display: grid;
  place-items: end center;
  transform: translateX(-50%);
  filter: drop-shadow(0 7px 4px rgba(25,5,45,.42));
}
.board-token::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 55px;
  height: 20px;
  bottom: -1px;
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: var(--player-color);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--player-color) 65%, #3c174f);
}
.board-token img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.board-token.current {
  z-index: 40;
  width: 98px;
  height: 116px;
  filter: drop-shadow(0 0 7px #fff8c9) drop-shadow(0 0 16px var(--player-color)) drop-shadow(0 12px 6px rgba(25,5,45,.55));
  animation: tokenBounce .65s var(--ease) infinite alternate;
}
.board-token.current::before { width: 70px; height: 25px; border-width: 4px; box-shadow: 0 5px 0 color-mix(in srgb, var(--player-color) 62%, #3c174f), 0 0 22px var(--player-color); }
.board-token.moving { animation: tokenHop .24s var(--ease); }
.board-token.route-hidden { opacity: 0; }
@keyframes tokenBounce { to { transform: translate(-50%, -9px) scale(1.035); } }
@keyframes tokenHop { 50% { transform: translate(-50%, -22px) scale(1.08); } }

.route-layer {
  position: absolute;
  z-index: 8;
  inset: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 8px 5px rgba(25,6,42,.38));
}
.route-layer .ladder-rail-shadow { stroke: #542447; stroke-width: 12; stroke-linecap: round; }
.route-layer .ladder-rail { stroke: #9a482d; stroke-width: 8; stroke-linecap: round; }
.route-layer .ladder-highlight { stroke: #ffd478; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 20; animation: ladderGlint 1.1s linear infinite; }
.route-layer .ladder-rung-shadow { stroke: #70334a; stroke-width: 10; stroke-linecap: round; }
.route-layer .ladder-rung { stroke: #ffe06c; stroke-width: 6; stroke-linecap: round; }
.route-layer .slide-shadow { fill:none; stroke:#401b59; stroke-width:31; stroke-linecap:round; transform:translateY(7px); opacity:.78; }
.route-layer .slide-outline { fill: none; stroke: rgba(255,248,204,.92); stroke-width: 28; stroke-linecap: round; }
.route-layer .slide-main { fill: none; stroke: url(#slideCandy); stroke-width: 20; stroke-linecap: round; }
.route-layer .slide-edge { fill:none; stroke:url(#slideEdge); stroke-width:4; stroke-linecap:round; transform:translateX(5px); opacity:.75; }
.route-layer .slide-shine { fill: none; stroke: rgba(255,255,255,.78); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 11 21; animation: slideSugarFlow .75s linear infinite; }
.route-layer .route-gem { filter: drop-shadow(0 0 8px #fff2a0); animation: routeGemPulse .75s ease-in-out infinite alternate; }
.route-layer .route-gem-shadow { fill:#4a1e5c; stroke:none; filter:none; animation:none; opacity:.75; }
@keyframes ladderGlint { to { stroke-dashoffset: -34; } }
@keyframes slideSugarFlow { to { stroke-dashoffset: -32; } }
@keyframes routeGemPulse { to { r: 12px; filter:drop-shadow(0 0 14px #fff6b0); } }

.route-travel-layer {
  position: absolute;
  z-index: 22;
  inset: 20px;
  overflow: visible;
  pointer-events: none;
}
.route-traveler {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 114px;
  transform: translate(-50%, -58%);
  transform-origin: 50% 70%;
  filter: drop-shadow(0 13px 7px rgba(25,4,43,.5));
  will-change: left, top, transform;
}
.travel-standee {
  position: absolute;
  z-index: 3;
  inset: 0 4px 10px;
  display: grid;
  place-items: end center;
  transform-origin: 50% 88%;
  animation: travelerWiggle .22s ease-in-out infinite alternate;
}
.travel-standee img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 4px 2px rgba(43,11,55,.32)); }
.travel-base {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 20px;
  border: 4px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 20%, white, var(--player-color) 35%, color-mix(in srgb, var(--player-color) 64%, #3a154f));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--player-color) 54%, #32143f), 0 9px 10px rgba(26,5,45,.35);
}
.travel-spark {
  position: absolute;
  z-index: 4;
  right: -5px;
  top: 8px;
  color: #fff399;
  font-size: 24px;
  text-shadow: 0 0 10px #ffed72, -24px 18px 0 rgba(255,255,255,.72), -10px 48px 0 rgba(255,222,96,.58);
  animation: travelSpark .4s linear infinite;
}
.travel-slide .travel-standee { animation: slideRider .3s ease-in-out infinite alternate; }
.travel-ladder .travel-standee { animation: ladderRider .22s ease-in-out infinite alternate; }
.route-traveler.arrived { animation: arrivalPop .09s ease-out forwards; }
@keyframes travelerWiggle { to { transform:rotate(3deg) translateY(-3px); } }
@keyframes slideRider { to { transform:rotate(-7deg) translateY(-5px) scale(1.06); } }
@keyframes ladderRider { to { transform:rotate(4deg) translateY(-4px); } }
@keyframes travelSpark { to { opacity:.25; transform:rotate(90deg) scale(.7); } }
@keyframes arrivalPop { to { transform:translate(-50%,-63%) scale(1.15); filter:drop-shadow(0 0 18px #fff1a0); } }

.dice-rail .rail-panel { width: 100%; padding: 15px 14px; text-align: center; }
.dice-label {
  margin: 0;
  color: #fff1a5;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dice-name {
  margin: 3px 0 0;
  font-size: 23px;
  font-weight: 1000;
}
.current-turn-hero {
  position: relative;
  height: 142px;
  margin: 1px 0 0;
  display: grid;
  place-items: end center;
  isolation: isolate;
}
.current-turn-halo {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 142px;
  height: 105px;
  border: 3px solid color-mix(in srgb, var(--player-color) 75%, white);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.78), color-mix(in srgb, var(--player-color) 72%, transparent) 46%, transparent 70%);
  box-shadow: 0 0 34px color-mix(in srgb, var(--player-color) 64%, transparent);
  transform: translate(-50%, -40%);
  animation: turnHalo 1.35s ease-in-out infinite alternate;
}
.current-turn-hero img {
  width: 160px;
  height: 148px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 7px rgba(5,1,21,.56));
  animation: currentHeroFloat 1.2s var(--ease) infinite alternate;
}
.current-turn-ribbon {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  min-width: 112px;
  padding: 6px 12px 5px;
  border: 2px solid #fff8bb;
  border-radius: 999px;
  color: #42174e;
  background: linear-gradient(180deg, #fff8a6, #ffc442);
  box-shadow: 0 4px 0 #9e4a34, 0 8px 16px rgba(8,2,27,.35);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
  transform: translateX(-50%);
}
@keyframes currentHeroFloat { to { transform: translateY(-7px) rotate(-1deg); } }
@keyframes turnHalo { to { opacity:.62; transform:translate(-50%, -40%) scale(1.1); } }
.math-status-button {
  position: relative;
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  padding: 7px 38px 7px 11px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1px 7px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  cursor: pointer;
  color: #f8f0ff;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  box-shadow: inset 0 1px rgba(255,255,255,.17);
  text-align: left;
}
.math-status-button:hover { border-color: #ffe889; background: rgba(255,255,255,.15); }
.math-status-button > span {
  grid-column: 1;
  grid-row: 1 / 3;
  color: #d0c1df;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.math-status-button strong { font-size: 13px; line-height: 1; }
.math-status-button small { color: #ffeba1; font-size: 9px; font-weight: 900; }
.math-status-button b {
  position: absolute;
  right: 10px;
  top: 50%;
  color: #ffeba1;
  font-size: 17px;
  transform: translateY(-50%);
}
.die-pedestal {
  position: relative;
  width: 145px;
  height: 140px;
  margin: 14px auto 9px;
  display: grid;
  place-items: start center;
}
.die-pedestal::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 126px;
  height: 36px;
  bottom: 3px;
  border: 4px solid #f6cb5b;
  border-radius: 50%;
  background: linear-gradient(180deg, #a5587b, #502453);
  box-shadow: 0 7px 0 #321439, 0 15px 22px rgba(5,1,19,.42);
}
.die {
  position: relative;
  z-index: 2;
  width: 100px;
  height: 100px;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 5px solid #fff8d8;
  border-radius: 27px;
  background:
    radial-gradient(circle at 27% 18%, rgba(255,255,255,.95), transparent 10%),
    linear-gradient(145deg, #fff6bd, #f6ad43 68%, #df6d48);
  box-shadow: inset -8px -9px 12px rgba(137,46,65,.22), 0 8px 0 #8c3c58, 0 14px 20px rgba(8,2,24,.44);
  transform: rotate(-4deg);
}
.die.rolling { animation: diceRoll .18s linear infinite; }
@keyframes diceRoll {
  0% { transform: rotate(-7deg) translateY(0) scale(1); }
  50% { transform: rotate(9deg) translateY(-18px) scale(1.06); }
  100% { transform: rotate(-7deg) translateY(0) scale(1); }
}
.pip-dot {
  width: 15px;
  height: 15px;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ff82a6, #692261 70%);
  box-shadow: inset 0 2px rgba(255,255,255,.35), 0 2px 0 #431549;
}

.roll-button {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  color: #32164d;
  background: linear-gradient(180deg, #fff38c, #ffc43e 58%, #f18f2c);
  box-shadow: inset 0 3px rgba(255,255,255,.65), 0 7px 0 #9e4a27, 0 13px 22px rgba(8,2,26,.4);
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .04em;
}
.roll-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.roll-button:active { transform: translateY(5px); box-shadow: inset 0 3px rgba(255,255,255,.6), 0 2px 0 #9e4a27; }
.roll-button:disabled { cursor: wait; opacity: .65; transform: none; }
.status-bubble {
  min-height: 74px;
  margin-top: 14px;
  padding: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  color: #ebddf5;
  background: rgba(9,2,28,.29);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.rules-strip {
  margin-top: 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.rule-chip {
  padding: 7px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: #d6c4e5;
  font-size: 9px;
  font-weight: 900;
}
.rule-chip b { display: block; margin-bottom: 2px; color: white; font-size: 15px; }

/* Modals and celebrations */
.overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: radial-gradient(circle at 50% 40%, rgba(107,39,125,.48), rgba(11,3,31,.86));
  backdrop-filter: blur(12px) saturate(1.1);
}

.modal {
  position: relative;
  width: min(620px, 92vw);
  overflow: hidden;
  padding: 34px;
  border: 4px solid #ffe993;
  border-radius: 36px;
  color: #482051;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,218,99,.8), transparent 44%),
    linear-gradient(155deg, #fffdf0, #ffe3ac 70%, #ffc078);
  box-shadow: inset 0 2px rgba(255,255,255,.85), 0 13px 0 #a95647, 0 35px 80px rgba(8,2,25,.6);
  text-align: center;
  animation: modalIn .4s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(35px) scale(.88) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}
.modal::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(143,65,75,.18);
  border-radius: 25px;
  pointer-events: none;
}
.modal .eyebrow { color: #a54d53; }
.modal h2 {
  margin: 5px 0 9px;
  color: #4b2055;
  font-size: 38px;
  font-weight: 1000;
  letter-spacing: -.05em;
  line-height: 1;
}
.modal p { margin: 0 auto 22px; max-width: 460px; color: #765166; font-size: 14px; font-weight: 800; line-height: 1.4; }
.math-icon { font-size: 54px; filter: drop-shadow(0 5px 4px rgba(117,54,72,.18)); }
.math-equation { margin: 14px 0 20px; color: #57235d; font-size: 66px; font-weight: 1000; letter-spacing: -.04em; }
.answer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.answer-button {
  min-height: 66px;
  border: 3px solid rgba(116,50,83,.13);
  border-radius: 19px;
  cursor: pointer;
  color: #4b2055;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 2px white, 0 5px 0 rgba(142,72,79,.28);
  font-size: 26px;
  font-weight: 1000;
}
.answer-button:hover { border-color: #d66083; background: white; transform: translateY(-3px); }
.answer-button.wrong { animation: wrongShake .3s linear; background: #ffd0d6; }
@keyframes wrongShake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.math-equation.equivalence { font-size: 54px; }
.math-change-link {
  min-height: 48px;
  margin-top: 21px;
  padding: 9px 16px;
  border: 1px solid rgba(92,41,80,.22);
  border-radius: 999px;
  cursor: pointer;
  color: #63325e;
  background: rgba(255,255,255,.42);
  font-size: 12px;
  font-weight: 1000;
}
.math-change-link:hover { background: white; transform: translateY(-2px); }

.settings-overlay { padding: 18px; overflow-y: auto; }
.math-settings-modal {
  width: min(980px, 96vw);
  max-height: min(850px, 94vh);
  padding: 28px;
  overflow-y: auto;
}
.math-settings-modal > p { margin-bottom: 16px; }
.math-settings-list { display: grid; gap: 9px; text-align: left; }
.math-settings-player {
  position: relative;
  min-height: 82px;
  padding: 8px 10px 8px 80px;
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 2px solid rgba(101,46,80,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.42);
  box-shadow: inset 0 2px rgba(255,255,255,.66);
}
.math-settings-player.current {
  border-color: var(--player-color);
  box-shadow: inset 5px 0 var(--player-color), inset 0 2px rgba(255,255,255,.7), 0 0 18px color-mix(in srgb, var(--player-color) 22%, transparent);
}
.math-settings-avatar {
  position: absolute;
  left: 9px;
  bottom: 4px;
  width: 65px;
  height: 74px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle, color-mix(in srgb, var(--player-color) 62%, white), color-mix(in srgb, var(--player-color) 55%, transparent) 68%, transparent 69%);
}
.math-settings-avatar img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(62,22,66,.25)); }
.math-settings-name small,
.math-settings-name strong,
.math-settings-name span { display: block; }
.math-settings-name small { color: #9a5261; font-size: 8px; font-weight: 1000; letter-spacing: .11em; text-transform: uppercase; }
.math-settings-name strong { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.math-settings-name span { margin-top: 3px; color: #805a6d; font-size: 9px; font-weight: 850; }
.math-level-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.math-level-button {
  min-height: 58px;
  padding: 6px 5px;
  border: 2px solid rgba(100,47,81,.13);
  border-radius: 14px;
  cursor: pointer;
  color: #63315f;
  background: rgba(255,255,255,.54);
  box-shadow: inset 0 2px white, 0 3px 0 rgba(142,72,79,.18);
}
.math-level-button strong,
.math-level-button small { display: block; }
.math-level-button strong { font-size: 12px; }
.math-level-button small { margin-top: 3px; color: #876173; font-size: 8px; font-weight: 850; }
.math-level-button:hover { border-color: #d76c8b; background: white; transform: translateY(-2px); }
.math-level-button.selected {
  border-color: #a8566d;
  color: #3f1e51;
  background: linear-gradient(145deg, #fff9b5, #ffc858);
  box-shadow: inset 0 2px rgba(255,255,255,.7), 0 4px 0 #a9574d;
}
.math-level-button.level-off.selected { background: linear-gradient(145deg, #f6f1f7, #d7cadd); }
.math-level-button.level-medium.selected { background: linear-gradient(145deg, #c5fff3, #64dfce); }
.math-level-button.level-hard.selected { color: white; background: linear-gradient(145deg, #995be6, #592b98); }
.math-level-button.level-hard.selected small { color: #f3e7ff; }
.math-settings-done { min-width: 210px; min-height: 52px; margin-top: 18px; }

.reward-modal {
  width: min(840px, 94vw);
  min-height: 470px;
  padding-left: 340px;
  text-align: left;
}
.reward-character {
  position: absolute;
  width: 330px;
  height: 430px;
  left: 2px;
  bottom: -18px;
  object-fit: contain;
  filter: drop-shadow(0 20px 15px rgba(93,39,74,.3));
  animation: rewardCharacter .8s var(--ease) infinite alternate;
}
@keyframes rewardCharacter { to { transform: translateY(-10px) rotate(-2deg); } }
.reward-modal h2 { font-size: 50px; }
.reward-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.reward-pick {
  min-height: 105px;
  padding: 10px;
  border: 3px solid rgba(112,48,77,.12);
  border-radius: 22px;
  cursor: pointer;
  color: #522359;
  background: rgba(255,255,255,.5);
  box-shadow: inset 0 2px white, 0 6px 0 rgba(140,66,72,.24);
}
.reward-pick:hover { background: white; transform: translateY(-5px) rotate(-1deg); }
.reward-pick b { display: block; font-size: 34px; }
.reward-pick span { display: block; margin-top: 4px; font-size: 10px; font-weight: 1000; }

.winner-modal {
  width: min(880px, 94vw);
  min-height: 530px;
  padding-left: 370px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,236,122,.8), transparent 39%),
    linear-gradient(155deg, #fffdf0, #ffd28d 68%, #ff8d93);
}
.winner-character {
  position: absolute;
  left: 10px;
  bottom: -15px;
  width: 360px;
  height: 500px;
  object-fit: contain;
  filter: drop-shadow(0 20px 16px rgba(91,35,67,.34));
}
.winner-modal h2 { font-size: 60px; }
.winner-actions { display: flex; gap: 10px; }

.burst-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.burst-field i {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 12px;
  height: 20px;
  border-radius: 4px;
  background: var(--c);
  animation: burst 1.2s var(--ease) var(--delay) forwards;
}
@keyframes burst {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 118px;
  min-width: 320px;
  padding: 14px 20px;
  border: 2px solid #fff2a7;
  border-radius: 999px;
  color: #4c2257;
  background: linear-gradient(180deg, #fff7bb, #ffc955);
  box-shadow: 0 8px 0 #9d4d36, 0 18px 40px rgba(7,2,22,.42);
  text-align: center;
  font-size: 13px;
  font-weight: 1000;
  transform: translateX(-50%);
  animation: toastIn .3s var(--ease);
}
@keyframes toastIn { from { opacity:0; transform:translate(-50%, 25px) scale(.9); } }

.screen-wipe {
  position: fixed;
  z-index: 200;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, transparent 0, #2b0e5b 0);
  animation: wipe .55s var(--ease) forwards;
}
@keyframes wipe { from { opacity:1; } to { opacity:0; } }

/* Device-local resume */
.resume-modal {
  width: min(760px, 94vw);
  padding: 36px;
  background:
    radial-gradient(circle at 14% 2%, rgba(255,255,255,.94), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(111,238,215,.42), transparent 28%),
    linear-gradient(155deg, #fffdf0, #ffe1a4 64%, #ff9e83);
}
.resume-lede { margin-bottom: 16px !important; }
.resume-team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  text-align: left;
}
.resume-player {
  position: relative;
  min-height: 82px;
  padding: 10px 10px 10px 82px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(86,35,78,.12);
  border-radius: 19px;
  background: rgba(255,255,255,.52);
  box-shadow: inset 0 2px rgba(255,255,255,.8), 0 5px 12px rgba(99,41,73,.1);
}
.resume-player.current {
  border-color: var(--player-color);
  background: rgba(255,255,255,.78);
  box-shadow: inset 5px 0 var(--player-color), 0 0 20px color-mix(in srgb, var(--player-color) 35%, transparent);
}
.resume-avatar {
  position: absolute;
  left: 6px;
  bottom: 2px;
  width: 70px;
  height: 78px;
  display: grid;
  place-items: end center;
}
.resume-avatar img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 3px rgba(70,27,70,.25)); }
.resume-player-copy { min-width: 0; width: 100%; }
.resume-player-copy small,
.resume-player-copy strong { display:block; }
.resume-player-copy small { color:#9d5060; font-size:8px; font-weight:1000; letter-spacing:.11em; }
.resume-player-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#532556; font-size:15px; }
.resume-player-copy i {
  height: 7px;
  margin-top: 7px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(85,35,79,.13);
}
.resume-player-copy i b { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg, var(--player-color), #ffd955); }
.resume-meta {
  margin: 13px 0 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  color: #795266;
  font-size: 10px;
  font-weight: 900;
}
.resume-meta span { padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.43); }
.resume-actions { display:flex; justify-content:center; gap:10px; }
.resume-new-button { min-width:150px; color:#51245b; background:rgba(255,255,255,.56); }
.device-privacy { margin:15px auto 0 !important; font-size:10px !important; opacity:.8; }

@media (max-width: 1350px) {
  .players-rail .rail-panel {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .rail-heading { flex: 0 0 140px; }
  .player-score { flex: 0 0 190px; }
}

@media (max-width: 1100px) {
  .hud { padding-inline: 14px; gap: 10px; }
  .scene { width: calc(100% - 24px); }
  .setup-scene { grid-template-columns: minmax(0, 1fr); }
  .team-panel { min-height: 680px; }
  .game-world .hud-right { gap: 6px; }
  .game-world .glass-pill { flex:0 0 auto; min-width:44px; padding-inline:10px; justify-content:center; font-size:11px; }
  .game-world .logo-copy { display: none; }
  .game-layout { grid-template-columns: minmax(0, 1fr) 244px; }
  .current-turn-hero img { width: 146px; }
  .dice-name { font-size: 20px; }
  .player-score { flex-basis: 182px; }

  .landing {
    height: auto;
    min-height: 0;
    padding: 36px 0 28px;
    grid-template-columns: minmax(0, 1fr);
  }
  .landing-copy { max-width: 760px; padding: 30px 24px 0; text-align: center; justify-self: center; }
  .landing-copy .kicker, .landing-copy .cta-row { justify-content: center; }
  .landing-copy .lede { margin-inline: auto; }
  .hero-character { height: 560px; min-height: 0; }
  .hero-glow { width:500px; height:500px; }
  .roster-dock {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 128px;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .roster-title { flex:0 0 165px; }
  .roster-button { flex:0 0 170px; min-height:100px; }
}

@media (max-width: 820px) {
  .game-world { height:auto; min-height:100dvh; overflow:visible; }
  .game-world .hud {
    height:auto;
    min-height:0;
    padding:8px 10px 9px;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:7px 10px;
  }
  .game-world .logo-gem { width:48px; height:48px; border-radius:16px; font-size:24px; }
  .game-world .hud-center { min-width:0; justify-self:end; }
  .turn-display { width:min(100%, 285px); min-width:0; padding:5px 12px 5px 6px; }
  .turn-avatar { flex:0 0 auto; width:54px; height:54px; }
  .turn-copy { min-width:0; }
  .turn-copy strong { max-width:170px; }
  .game-world .hud-right { grid-column:1 / -1; justify-content:center; }
  .game-world .scene { width:100%; height:auto; min-height:0; }
  .game-layout {
    height:auto;
    padding:10px;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto auto auto;
    gap:13px;
  }
  .board-stage {
    grid-column:1;
    grid-row:1;
    width:100%;
    height:448px;
    display:block;
    place-items:initial;
    justify-items:start;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-color:#ffd866 rgba(29,8,59,.45);
    scrollbar-width:thin;
  }
  .board-aura { display:none; }
  .board-frame {
    width:740px;
    height:430px;
    margin:0;
    justify-self:start;
    padding:18px;
    border-width:5px;
    border-radius:38px;
    transform:none;
    scroll-snap-align:center;
  }
  .board-grid { gap:8px; }
  .board-scenery, .route-layer, .route-travel-layer { inset:18px; }
  .route-layer { width:calc(100% - 36px); height:calc(100% - 36px); }
  .dice-rail { grid-column:1; grid-row:2; align-self:auto; }
  .dice-rail .rail-panel {
    padding:12px;
    display:grid;
    grid-template-columns:150px minmax(150px, 1fr) 145px;
    grid-template-rows:auto auto auto auto;
    align-items:center;
    gap:7px 10px;
  }
  .dice-label { grid-column:2; grid-row:1; }
  .current-turn-hero { grid-column:1; grid-row:1 / 4; height:150px; }
  .current-turn-hero img { width:150px; height:150px; }
  .dice-name { grid-column:2; grid-row:2; margin:0; }
  .math-status-button { grid-column:2; grid-row:3; margin:0; }
  .die-pedestal { grid-column:3; grid-row:1 / 4; margin:0 auto; }
  .roll-button { grid-column:3; grid-row:4; min-height:58px; }
  .status-bubble { grid-column:1 / 3; grid-row:4; min-height:58px; margin:0; }
  .rules-strip { grid-column:1 / -1; grid-row:5; margin:0; }
  .players-rail { grid-column:1; grid-row:3; }
  .players-rail .rail-panel { height:118px; padding:8px; }
  .player-score { flex-basis:180px; }
  .toast { bottom:20px; }
}

@media (max-width: 600px) {
  .hud { padding:8px 10px; }
  .logo-gem { width:44px; height:44px; font-size:23px; }
  .logo-copy strong { font-size:18px; }
  .logo-copy small { font-size:8px; }
  .hud-right { gap:6px; }
  .glass-pill { min-height:44px; padding:7px 10px; }
  .game-world .hud-right .control-label { display:none; }
  .game-world .hud-right button.glass-pill { width:44px; padding:0; justify-content:center; font-size:17px; }
  .game-world .hud-right .spark-total { min-width:58px; justify-content:center; }
  .turn-display { max-width:245px; }
  .turn-copy strong { max-width:145px; font-size:16px; }
  .turn-copy small { font-size:8px; }

  .landing { padding-top:18px; }
  .landing-copy { padding:20px 10px 0; }
  .landing h1 { font-size:clamp(56px, 19vw, 76px); }
  .title-climb { padding-left:25px; }
  .landing-copy .lede { margin:24px auto 20px; font-size:15px; }
  .cta-row { flex-direction:column; }
  .cta-row .primary-action, .cta-row .secondary-action { width:100%; }
  .hero-character { height:380px; }
  .hero-glow { width:330px; height:330px; bottom:30px; }
  .hero-bubble { right:2%; top:10%; max-width:150px; padding:10px; font-size:11px; }
  .roster-dock { margin-top:4px; padding:10px; border-radius:20px; }
  .roster-title { flex-basis:130px; }
  .roster-button { flex-basis:145px; }

  .setup-scene { width:calc(100% - 16px); padding:12px 0 24px; gap:12px; }
  .setup-gallery, .team-panel { padding:14px; border-radius:23px; }
  .panel-heading { align-items:start; flex-direction:column; }
  .panel-heading h1, .team-panel h2 { font-size:30px; }
  .character-gallery { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; }
  .character-pick { min-height:210px; }
  .character-pick img { height:164px; }
  .count-control button { min-width:0; padding:3px; font-size:10px; }
  .setup-buttons { grid-template-columns:1fr; }
  .team-panel { min-height:0; }

  .game-layout { padding:8px 0 16px; }
  .board-stage { height:414px; border-radius:0; }
  .board-frame { width:680px; height:398px; padding:14px; border-width:4px; border-radius:30px; }
  .board-scenery, .route-layer, .route-travel-layer { inset:14px; }
  .route-layer { width:calc(100% - 28px); height:calc(100% - 28px); }
  .board-grid { gap:7px; }
  .board-token { width:74px; height:88px; }
  .board-token.current { width:96px; height:114px; }
  .dice-rail, .players-rail { padding-inline:8px; }
  .dice-rail .rail-panel {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto auto auto auto auto auto;
    padding:12px;
  }
  .dice-label { grid-column:1 / -1; grid-row:1; }
  .current-turn-hero { grid-column:1; grid-row:2 / 4; height:138px; }
  .current-turn-hero img { width:145px; height:140px; }
  .die-pedestal { grid-column:2; grid-row:2 / 4; transform:scale(.88); }
  .dice-name { grid-column:1 / -1; grid-row:4; font-size:22px; }
  .math-status-button { grid-column:1 / -1; grid-row:5; min-height:52px; }
  .roll-button { grid-column:1 / -1; grid-row:6; min-height:60px; }
  .status-bubble { grid-column:1 / -1; grid-row:7; min-height:62px; }
  .rules-strip { grid-column:1 / -1; grid-row:8; }
  .players-rail .rail-panel { height:122px; border-radius:18px; }
  .rail-heading { flex-basis:112px; }
  .player-score { flex-basis:174px; }
  .toast { width:calc(100% - 24px); min-width:0; font-size:11px; }

  .resume-overlay { padding:10px; }
  .resume-modal { width:100%; max-height:calc(100dvh - 20px); overflow-y:auto; padding:25px 14px; border-radius:27px; }
  .resume-modal h2 { font-size:34px; }
  .resume-team { grid-template-columns:1fr; }
  .resume-player { min-height:72px; }
  .resume-avatar { height:70px; }
  .resume-meta { flex-wrap:wrap; }
  .resume-actions { flex-direction:column; }
  .resume-actions > * { width:100%; }
}

@media (max-width: 720px) {
  .settings-overlay { padding: 10px; place-items: start center; }
  .math-settings-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 22px 14px;
    border-width: 3px;
    border-radius: 27px;
  }
  .math-settings-modal h2 { font-size: 31px; }
  .math-settings-modal > p { font-size: 12px; }
  .math-settings-player {
    min-height: 130px;
    padding: 9px 8px 9px 72px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .math-settings-avatar { width: 58px; height: 70px; top: 7px; bottom: auto; }
  .math-settings-name { min-height: 52px; }
  .math-level-buttons { grid-column: 1 / -1; margin-left: -64px; }
  .math-level-button { min-height: 52px; }
  .math-level-button strong { font-size: 10px; }
  .math-level-button small { font-size: 7px; }
  .math-settings-done { width: 100%; min-height: 54px; }
  .math-equation { font-size: 52px; }
  .math-equation.equivalence { font-size: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}