:root {
  --ink: #20263d;
  --muted: #70778d;
  --paper: #f6f1e7;
  --panel: #fffdf8;
  --board: #dca95f;
  --board-dark: #9b6530;
  --red: #ef654f;
  --red-dark: #b9362b;
  --blue: #4a56b8;
  --blue-dark: #26318f;
  --gold: #f4bb45;
  --hole-darkness: .46;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 15%, rgba(239, 101, 79, .09), transparent 25%),
    radial-gradient(circle at 88% 82%, rgba(74, 86, 184, .11), transparent 28%),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.dragging-board-json::after {
  content: "Drop board JSON to load";
  position: fixed;
  z-index: 40;
  inset: 1rem;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(244, 187, 69, .95);
  border-radius: 14px;
  color: white;
  background: rgba(32, 38, 61, .72);
  font-size: clamp(1.1rem, 4vw, 2rem);
  font-weight: 850;
  pointer-events: none;
}

button, select { font: inherit; }

.game-shell {
  width: min(1180px, 94vw);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: 3rem 0;
}

.intro { max-width: 390px; }
.eyebrow {
  margin: 0 0 .65rem;
  color: var(--red-dark);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.6rem, 7vw, 6.7rem);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .76;
}

h1 span { color: var(--red); font-style: italic; }
.lede { margin: 2rem 0; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }

.controls { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.controls label,
.settings-content label { grid-column: 1 / -1; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.settings-panel {
  display: grid;
  grid-column: 1 / -1;
}
.settings-panel > summary {
  min-height: 48px;
  display: grid;
  align-items: center;
  padding: 0 1.2rem;
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #ded7c9;
  font-weight: 800;
  cursor: pointer;
  list-style-position: inside;
}
.settings-panel > summary:hover { transform: translateY(-1px); }
.settings-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
  margin-top: .85rem;
}
.settings-search {
  display: grid;
  gap: .35rem;
  padding: .65rem;
  border: 1px solid rgba(217, 208, 191, .88);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
}
.settings-search span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.settings-search input {
  min-width: 0;
  min-height: 42px;
  border: 1px solid #ded7c9;
  border-radius: 10px;
  padding: 0 .85rem;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.settings-search input:focus {
  outline: 3px solid rgba(241, 175, 48, .28);
  border-color: #c9891a;
}
.settings-filter-hidden {
  display: none !important;
}
.settings-group {
  display: grid;
  grid-column: 1 / -1;
  border: 1px solid #d9d0bf;
  border-radius: 8px;
  background: rgba(255, 255, 255, .66);
  overflow: hidden;
}
.settings-group[hidden] {
  display: none;
}
.settings-group[open] {
  grid-template-columns: 1fr;
  align-items: stretch;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 20px rgba(40, 31, 17, .08);
}
.settings-group > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .85rem 0 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .74);
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
  border-left: 5px solid transparent;
  list-style-position: inside;
}
.settings-group[open] > summary {
  min-height: 42px;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  border-left-color: var(--gold);
  border-right: 0;
  border-bottom: 1px solid #d9d0bf;
  background: #fff8e8;
  box-shadow: inset 0 -8px 14px rgba(102, 69, 24, .04);
}
.settings-group > summary:hover {
  background: rgba(255, 255, 255, .92);
}
.settings-group[open] > summary:hover {
  background: #fff8e8;
}
.settings-group[open] > :not(summary) {
  grid-column: 1;
  grid-row: auto;
}
.settings-group-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  padding: .75rem;
}
.settings-group-content > button,
.settings-group-content > select,
.settings-group-content .difficulty-row select {
  width: 100%;
}
.difficulty-row { grid-column: 1 / -1; display: grid; gap: .45rem; }
.difficulty-row[hidden] { display: none; }
.setting-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 40px;
  padding: .2rem .1rem;
  color: var(--ink) !important;
  font-size: .84rem !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
.setting-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}
.free-placement-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  padding: .7rem;
  border: 1px solid #ded7c9;
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}
.free-placement-controls[hidden] { display: none; }
.free-placement-controls label {
  grid-column: 1 / -1;
}
.free-placement-controls select,
.free-placement-controls #start-custom-jumps {
  grid-column: 1 / -1;
}
.free-placement-controls button,
.free-placement-controls select {
  min-height: 42px;
}
.color-setting {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .35rem .75rem;
  border: 1px solid #ded7c9;
  border-radius: 999px;
  background: #fff;
}
.color-setting label {
  grid-column: auto;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.color-setting input {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.range-setting {
  grid-column: 1 / -1;
  display: grid;
  gap: .45rem;
  min-height: 54px;
  padding: .55rem .75rem;
  border: 1px solid #ded7c9;
  border-radius: 8px;
  background: #fff;
}
.range-setting label {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.range-setting input {
  width: 100%;
  accent-color: var(--ink);
  cursor: pointer;
}
.save-setting {
  grid-column: 1 / -1;
  display: grid;
  gap: .55rem;
  padding: .75rem;
}
.save-subsection > summary {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 .65rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, .78);
  border-left: 4px solid transparent;
}
.save-subsection {
  display: grid;
  gap: .55rem;
  min-width: 0;
  padding: .5rem;
  border: 1px solid rgba(222, 215, 201, .86);
  border-radius: 8px;
  background: rgba(255, 255, 255, .62);
  overflow: hidden;
}
.save-subsection[open] > summary {
  border-left-color: var(--ink);
  background: #fff;
}
.save-subsection[open] {
  padding-bottom: .65rem;
}
.save-subsection button,
.save-subsection select,
.save-subsection input[type="number"],
.save-subsection textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.save-subsection textarea {
  resize: vertical;
  min-height: 142px;
  border: 1px solid #ded7c9;
  border-radius: 8px;
  padding: .75rem;
  color: var(--ink);
  background: #fff;
  font: 700 .82rem/1.4 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
  text-transform: none;
}
.save-subsection textarea:focus {
  outline: 3px solid rgba(241, 175, 48, .28);
  border-color: #c9891a;
}
.save-subsection select {
  display: block;
  min-height: 46px;
  padding-right: 2.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.save-subsection small {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.json-export-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 34px;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.json-export-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--ink);
}
.json-move-limit {
  display: grid;
  gap: .35rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.json-move-limit input {
  min-height: 42px;
  border: 1px solid #ded7c9;
  border-radius: 999px;
  padding: 0 .9rem;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 750;
}
.json-move-limit input:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.animation-setting {
  grid-column: 1 / -1;
  display: grid;
}
.animation-setting[hidden] { display: none; }
.animation-setting span {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
}
.animation-setting small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}
.animation-setting button {
  width: 100%;
}
.animation-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 32px;
}
.animation-delay-setting,
.animation-progress-setting {
  display: grid;
  gap: .35rem;
}
.animation-delay-setting span,
.animation-progress-setting span {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}
.animation-delay-setting b,
.animation-progress-setting b {
  color: var(--muted);
  font-size: .76rem;
}
.animation-delay-setting input:disabled,
.animation-progress-setting input:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.move-export-setting label {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.move-export-setting .move-export-filter {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 34px;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.move-export-filter input {
  width: 17px;
  height: 17px;
  accent-color: var(--ink);
}
.move-export-setting input {
  min-height: 42px;
  border: 1px solid #ded7c9;
  border-radius: 999px;
  padding: 0 .9rem;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 750;
}
.online-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  padding: .7rem;
  border: 1px solid #ded7c9;
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}
.online-controls span {
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
}
.online-controls input {
  min-height: 42px;
  border: 1px solid #ded7c9;
  border-radius: 999px;
  padding: 0 .9rem;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 750;
}
.online-controls #google-login,
.online-controls #google-logout,
.online-controls #play-online-now,
.online-controls #leave-online-room {
  grid-column: 1 / -1;
}
.schedule-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  padding: .7rem;
  border: 1px solid #ded7c9;
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}
.schedule-controls span,
.schedule-controls button {
  grid-column: 1 / -1;
}
.schedule-controls span {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
}
.schedule-controls input {
  min-height: 42px;
  border: 1px solid #ded7c9;
  border-radius: 999px;
  padding: 0 .9rem;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 750;
}
select,
button {
  min-height: 48px;
  height: auto;
  padding: .72rem 1.15rem;
  font-weight: 750;
  line-height: 1.15;
}
button {
  position: relative;
  border: 1px solid rgba(32, 38, 61, .18);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: .01em;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
button:disabled {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
  box-shadow: none;
}
select {
  color: var(--ink);
  background: #fff;
  border: 1px solid #ded7c9;
  border-radius: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.primary {
  color: white;
  background: linear-gradient(180deg, #2d344f 0%, #171d32 100%);
  border-color: #0f1426;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 0 #0d1222,
    0 10px 18px rgba(32, 38, 61, .18);
}
.secondary {
  color: var(--ink);
  background: linear-gradient(180deg, #ffd36d 0%, #f1af30 100%);
  border-color: #c9891a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 4px 0 #bd7c12,
    0 9px 16px rgba(122, 81, 22, .18);
}
button:not(:disabled):hover {
  transform: translateY(-2px);
  filter: saturate(1.04);
}
button:not(:disabled):active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 1px 0 rgba(32, 38, 61, .25),
    0 4px 10px rgba(32, 38, 61, .12);
}

.color-choices { display: grid; gap: .55rem; margin-top: 1.25rem; }
.color-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.15fr); align-items: center; gap: .75rem; }
.color-choice label { color: var(--muted); font-size: .82rem; font-weight: 750; }
.color-choice select { min-height: 40px; padding: 0 .8rem; }

.legend { display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; margin-top: 1.5rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
.legend span { display: flex; align-items: center; gap: .45rem; }
.legend i { width: 11px; height: 11px; border-radius: 50%; }

.board-panel {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  padding-bottom: 4.75rem;
}
.status-card {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(440px, 100%);
  min-width: 0;
  margin-bottom: 2rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(32, 38, 61, .08);
  border-radius: 15px;
  background: rgba(255, 253, 248, .88);
  box-shadow: 0 10px 35px rgba(54, 44, 24, .1);
  backdrop-filter: blur(8px);
}
.status-card small { display: block; margin-bottom: .12rem; color: var(--muted); }
.status-card strong { font-size: .9rem; }
.turn-count {
  display: block;
  margin-top: .2rem;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 800;
}
.race-progress {
  display: block;
  margin-top: .18rem;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 750;
}
.turn-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(0,0,0,.05); }
.turn-dot.red { background: var(--red); }
.turn-dot.blue { background: var(--blue); }

.board {
  position: relative;
  width: min(680px, 90vw);
  aspect-ratio: 1 / 1.04;
  filter: drop-shadow(0 26px 30px rgba(76, 50, 20, .22));
  --star-shape: polygon(50% .8%, 64.6% 24.4%, 99.7% 24.4%, 82.7% 49.5%, 99.7% 74.6%, 64.6% 74.6%, 50% 99.2%, 35.4% 74.6%, .3% 74.6%, 17.3% 49.5%, .3% 24.4%, 35.4% 24.4%);
}
.finish-jump-board {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  z-index: 6;
  min-width: 180px;
  margin: 0;
  transform: translateX(-50%);
  box-shadow: 0 9px 22px rgba(122, 81, 22, .22);
}
.finish-jump-board:not(:disabled):hover {
  transform: translateX(-50%) translateY(-2px);
}
.finish-jump-board:not(:disabled):active {
  transform: translateX(-50%) translateY(2px);
}
.import-info-bar {
  width: min(620px, 96vw);
  min-height: 36px;
  margin-top: .85rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(32, 38, 61, .12);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 253, 248, .9);
  box-shadow: 0 8px 22px rgba(54, 44, 24, .08);
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
}
.import-info-bar[hidden] { display: none; }
.board::before {
  content: "";
  position: absolute;
  inset: -3.8% -4.8%;
  background:
    linear-gradient(rgba(246, 214, 151, .18), rgba(148, 88, 34, .12)),
    var(--board-texture-url, url("chineseCheckers.jpg")) center / cover;
  clip-path: var(--star-shape);
}
.board::after {
  content: "";
  position: absolute;
  inset: -3.8% -4.8%;
  clip-path: var(--star-shape);
  border: 1px solid rgba(91, 55, 18, .18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -18px 26px rgba(89, 55, 20, .08);
  pointer-events: none;
}

.hole {
  position: absolute;
  z-index: 2;
  width: clamp(19px, 3.85vw, 31px);
  aspect-ratio: 1;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 38% 30%, rgba(188, 132, 64, .5) 0 24%, rgba(111, 69, 28, .58) 72%, rgba(66, 39, 15, .78) 100%),
    linear-gradient(rgba(80, 47, 18, var(--hole-darkness)), rgba(80, 47, 18, var(--hole-darkness))),
    var(--board-texture-url, url("chineseCheckers.jpg")) center / 280%;
  box-shadow:
    inset 0 4px 7px rgba(67, 37, 10, .52),
    inset 0 -2px 3px rgba(255, 226, 166, .18),
    0 1px 0 rgba(255,255,255,.45);
  transition: transform .14s ease, box-shadow .14s ease;
}
button.hole:disabled {
  opacity: 1;
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 4px 7px rgba(67, 37, 10, .52),
    inset 0 -2px 3px rgba(255, 226, 166, .18),
    0 1px 0 rgba(255,255,255,.45);
}
button.hole:not(:disabled):hover,
.hole:hover {
  transform: translate(-50%, -50%) scale(1.08);
  filter: none;
}
button.hole:not(:disabled):active {
  transform: translate(-50%, -50%) scale(1.02);
}
.hole.piece {
  width: clamp(21px, 4.25vw, 34px);
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.9) 0 7%, transparent 8%),
    radial-gradient(circle at 38% 30%, var(--piece-light) 0 18%, var(--piece-color) 46%, var(--piece-dark) 100%);
  box-shadow:
    inset 0 4px 5px rgba(255,255,255,.26),
    inset 0 -7px 10px rgba(0,0,0,.28),
    0 0 0 1px rgba(32,38,61,.2),
    0 7px 10px rgba(48, 31, 12, .28);
}
.hole.piece-red { background: radial-gradient(circle at 36% 29%, #ffb0a0 0 8%, var(--red) 35%, var(--red-dark) 100%); }
.hole.piece-blue { background: radial-gradient(circle at 36% 29%, #a8b0ff 0 8%, var(--blue) 35%, var(--blue-dark) 100%); }
.hole.piece-red,
.hole.piece-blue {
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.88) 0 7%, transparent 8%),
    radial-gradient(circle at 38% 30%, var(--piece-light) 0 18%, var(--piece-color) 46%, var(--piece-dark) 100%);
}
.hole.piece-in-motion {
  width: clamp(19px, 3.85vw, 31px);
  background:
    radial-gradient(circle at 38% 30%, rgba(188, 132, 64, .5) 0 24%, rgba(111, 69, 28, .58) 72%, rgba(66, 39, 15, .78) 100%),
    linear-gradient(rgba(80, 47, 18, var(--hole-darkness)), rgba(80, 47, 18, var(--hole-darkness))),
    var(--board-texture-url, url("chineseCheckers.jpg")) center / 280%;
  box-shadow: inset 0 4px 7px rgba(67, 37, 10, .52), 0 1px 0 rgba(255,255,255,.45);
}
.placement-ghost {
  position: fixed;
  z-index: 30;
  width: clamp(24px, 4vw, 36px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: .9;
  transform: translate(12px, 12px);
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.9) 0 7%, transparent 8%),
    radial-gradient(circle at 38% 30%, var(--piece-light) 0 18%, var(--piece-color) 46%, var(--piece-dark) 100%);
  box-shadow:
    inset 0 4px 5px rgba(255,255,255,.26),
    inset 0 -7px 10px rgba(0,0,0,.28),
    0 0 0 1px rgba(32,38,61,.18),
    0 8px 14px rgba(48, 31, 12, .24);
}
.placement-ghost[hidden] { display: none; }
.hole.selected { z-index: 3; transform: translate(-50%, -50%) scale(1.17); outline: 4px solid rgba(255,255,255,.85); }
.hole.legal {
  box-shadow:
    0 0 0 6px rgba(255,255,255,.95),
    0 0 0 12px rgba(255,255,255,.22),
    inset 0 4px 7px rgba(67, 37, 10, .52),
    inset 0 -2px 3px rgba(255, 226, 166, .18);
  animation: legal-ring-pulse 1.15s ease-in-out infinite;
}
@keyframes legal-ring-pulse {
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
      0 0 0 8px rgba(255,255,255,1),
      0 0 0 16px rgba(255,255,255,.14),
      inset 0 4px 7px rgba(67, 37, 10, .52),
      inset 0 -2px 3px rgba(255, 226, 166, .18);
  }
}

.moving-piece {
  position: absolute;
  z-index: 10;
  width: clamp(21px, 4.25vw, 34px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left var(--travel-time) cubic-bezier(.35, .05, .3, 1), top var(--travel-time) cubic-bezier(.35, .05, .3, 1);
  pointer-events: none;
}
.moving-marble {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.9) 0 7%, transparent 8%),
    radial-gradient(circle at 38% 30%, var(--piece-light, #a8b0ff) 0 18%, var(--piece-color, var(--blue)) 46%, var(--piece-dark, var(--blue-dark)) 100%);
  box-shadow: inset 0 4px 5px rgba(255,255,255,.26), inset 0 -7px 10px rgba(0,0,0,.28), 0 10px 14px rgba(48, 43, 94, .34);
  animation: marble-jump var(--travel-time) ease-in-out both;
}
.moving-marble.short-hop { animation-name: marble-hop; }
@keyframes marble-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-38px) scale(1.12); box-shadow: inset 0 5px 6px rgba(255,255,255,.34), inset 0 -5px 8px rgba(0,0,0,.24), 0 24px 18px rgba(48, 43, 94, .22); }
  82% { transform: translateY(-5px) scale(1.03); }
}
@keyframes marble-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .moving-piece { transition-duration: 180ms; }
  .moving-marble { animation-duration: 180ms; }
}

.hint { margin: -.4rem 0 0; color: var(--muted); font-size: .8rem; }
.modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: rgba(32,38,61,.48); backdrop-filter: blur(8px); }
.modal[hidden] { display: none; }
.modal-card { width: min(410px, 100%); padding: 3rem; text-align: center; border-radius: 28px; background: var(--panel); box-shadow: 0 25px 80px rgba(0,0,0,.25); }
.modal-card h2 { margin: .5rem 0; font: 500 2.5rem Georgia, serif; }
.modal-card p:not(.eyebrow) { margin: 0 0 1.5rem; color: var(--muted); }
.matchmaking-card h2 { font-size: 2.15rem; }
.matchmaking-card #matchmaking-elapsed {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 850;
}

@media (max-width: 850px) {
  .game-shell { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
  .intro { max-width: none; text-align: center; }
  h1 { font-size: clamp(3.5rem, 15vw, 5.8rem); }
  .lede { max-width: 560px; margin: 1.5rem auto; }
  .controls { max-width: 460px; margin: auto; }
  .legend { justify-content: center; }
  .board { width: min(680px, 96vw); }
  .status-card { width: min(440px, 96vw); }
}