/* rem-design:1px */
html {
  font-size: 1px;
}

:root {
  --felt-deep: #062816;
  --felt-mid: #0a3d24;
  --felt-lit: #145c36;
  --felt-rail: #1a120c;
  --ink: #f4f0e6;
  --ink-dim: rgba(244, 240, 230, 0.72);
  --shadow: rgba(0, 0, 0, 0.45);
  --yellow: #f0c400;
  --blue: #1e4fd8;
  --purple: #6b2d9b;
  --green: #1a7a3c;
  --orange: #e07010;
  --red: #c41e2a;
  --maroon: #7a1f2e;
  --brass: #c9a24a;
  --brass-lit: #e8c878;
  --ui-surface: rgba(0, 0, 0, 0.32);
  --ui-border: rgba(201, 162, 74, 0.45);
  --ui-radius: 6rem;
  --font-display: "Playfair Display", "Libre Baskerville", Georgia, serif;
  --font-body: "Libre Baskerville", Georgia, serif;
  --font-ui: "Libre Baskerville", Georgia, serif;
  /* Board geometry stays in px (not rem) so size isn't coupled to UI scale */
  --board-size: min(85vw, calc(100vh - 150px));
  --ball-scale: 1;
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
  min-height: 100%;
  height: 100%;
}

body {
  /* Explicit size — with html font-size:1px, inheritance would leave bare <p> at ~1px */
  font-size: 16rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--felt-deep);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.felt {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 35%, var(--felt-lit) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 100%, #04180e 0%, transparent 50%),
    linear-gradient(165deg, var(--felt-mid) 0%, var(--felt-deep) 70%);
}

.felt::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  /* Static grain tile — avoids live SVG feTurbulence paint cost. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 128rem 128rem;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* —— Page backdrops —— */
html.has-page-backdrop .felt {
  background: var(--page-backdrop) center / var(--page-backdrop-size, cover) no-repeat;
}

html.has-page-backdrop .felt::before {
  opacity: 0;
}

html[data-theme="futuristic"].has-page-backdrop .felt {
  overflow: hidden;
  background: #c8ccd4;
}

html[data-theme="futuristic"].has-page-backdrop .felt::after {
  content: "";
  position: absolute;
  /* Expand past the viewport so blur soft edges don't show. */
  inset: -24rem;
  z-index: 0;
  background: var(--page-backdrop) center / var(--page-backdrop-size, cover)
    no-repeat;
  filter: blur(2rem);
  pointer-events: none;
}

html[data-theme="futuristic"].has-page-backdrop .felt::before {
  z-index: 1;
  opacity: 1;
  background-image: none;
  /* Lighten the top, let dark climb higher, slight extra dark at bottom. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 28%,
    rgba(0, 0, 0, 0.06) 55%,
    rgba(0, 0, 0, 0.16) 100%
  );
  mix-blend-mode: normal;
}

html.has-page-backdrop .stage {
  width: 100%;
  min-height: var(--frame-board-size, var(--board-size));
  animation: none;
}

html.has-page-backdrop.board-frame-fixed .board {
  position: fixed;
  left: var(--frame-board-left, 0);
  top: var(--frame-board-top, 0);
  width: var(--frame-board-size, var(--board-size));
  height: var(--frame-board-size, var(--board-size));
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;
  z-index: 1;
}

html.has-page-backdrop:not(.board-frame-fixed) .stage {
  min-height: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.has-page-backdrop:not(.board-frame-fixed) .board {
  position: relative;
  left: auto;
  top: auto;
  width: var(--board-size);
  height: var(--board-size);
  margin: 0;
  box-shadow: 0 18rem 40rem var(--shadow);
}

/*
 * Board sandwich (classic + futuristic):
 *   base  — full art under balls (cups visible through lid holes)
 *   cells — balls
 *   lid   — same art with cup holes so swaps travel “under” the surface
 */
.board.has-board-lid {
  background-image: none;
  box-shadow: none;
  overflow: visible;
}

.board.has-board-lid.lid-mask-fallback {
  background-image: var(--board-image, none);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.board.has-board-lid.lid-mask-fallback .board-base,
.board.has-board-lid.lid-mask-fallback .board-lid {
  display: none;
}

.board.has-board-lid .board-base,
.board.has-board-lid .board-lid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: transparent;
  background-image: var(--board-image, none);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.board.has-board-lid .board-base {
  z-index: 0;
  /* drop-shadow follows board PNG alpha (incl. 45° cuts); box-shadow would not. */
  filter: drop-shadow(0 18rem 30rem rgba(0, 0, 0, 0.5));
}

.board.has-board-lid .board-lid {
  z-index: 4;
  opacity: 0;
  -webkit-mask: url(#rackedCupMask) no-repeat center / 100% 100%;
  mask: url(#rackedCupMask) no-repeat center / 100% 100%;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.board.has-board-lid.cup-mask-ready:not(.lid-mask-fallback) .board-lid {
  opacity: 1;
}

.board.has-board-lid .cell {
  z-index: 1;
}

@media (hover: none), (max-width: 900px) {
  .board.has-board-lid.lid-mask-fallback,
  .board.has-board-lid {
    background-image: var(--board-image, none);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 18rem 40rem var(--shadow);
  }

  .board.has-board-lid .board-base,
  .board.has-board-lid .board-lid {
    display: none !important;
  }

  .board.has-board-lid .cell {
    z-index: 2;
  }
}

/* Futuristic edge LEDs + pin lights (layout markers). */
.board-lights {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.board-lights svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.board-lights .board-light.strip {
  opacity: 0.14;
  transition: opacity 0.22s ease;
}

.board-lights .board-light.strip .strip-bloom,
.board-lights .board-light.strip .strip-edge,
.board-lights .board-light.strip .strip-core {
  fill: none;
  stroke-linecap: round;
  transition:
    stroke 0.22s ease,
    opacity 0.22s ease,
    filter 0.22s ease;
}

/* Dim idle stubs. */
.board-lights .board-light.strip .strip-bloom {
  stroke: #b0b6c0;
  opacity: 0;
  filter: none;
}

.board-lights .board-light.strip .strip-edge {
  stroke: #9aa3b2;
  opacity: 0.4;
}

.board-lights .board-light.strip .strip-core {
  stroke: rgba(255, 255, 255, 0.3);
  opacity: 0.55;
}

/*
 * Lit: soft blurred color bloom (actual glow) + thin colored edge + white core.
 * The bloom must stay translucent + blurred or it reads as a solid pill.
 */
.board-lights .board-light.strip.is-lit {
  opacity: 1;
}

.board-lights .board-light.strip.is-lit .strip-bloom {
  stroke: var(--light-color, #fff);
  opacity: 0.45;
  filter: blur(5rem);
}

.board-lights .board-light.strip.is-lit .strip-edge {
  stroke: color-mix(in srgb, var(--light-color, #fff) 70%, white);
  opacity: 0.9;
  filter: none;
}

.board-lights .board-light.strip.is-lit .strip-core {
  stroke: #ffffff;
  opacity: 1;
  filter: none;
}

.board-lights .board-light.pin {
  fill: var(--light-color, #9aa3b2);
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
}

.board-lights .board-light.pin.pulse-top,
.board-lights .board-light.pin.pulse-bottom {
  animation: boardPinPulse 2.4s ease-in-out infinite;
}

.board-lights .board-light.pin.pulse-side {
  animation: boardSidePinWash 7.5s ease-in-out infinite;
}

@keyframes boardPinPulse {
  0%,
  100% {
    opacity: 0.15;
    filter: drop-shadow(0 0 1rem var(--light-color, #fff));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 3rem var(--light-color, #fff))
      drop-shadow(0 0 7rem color-mix(in srgb, var(--light-color, #fff) 65%, transparent));
  }
}

@keyframes boardSidePinWash {
  0%,
  100% {
    fill: #22c55e;
    opacity: 0.35;
    filter: drop-shadow(0 0 3rem #22c55e);
  }
  25% {
    fill: #ef4444;
    opacity: 0.95;
    filter: drop-shadow(0 0 6rem #ef4444);
  }
  50% {
    fill: #3b82f6;
    opacity: 0.45;
    filter: drop-shadow(0 0 4rem #3b82f6);
  }
  75% {
    fill: #eab308;
    opacity: 1;
    filter: drop-shadow(0 0 6rem #eab308);
  }
}

html:not(.has-page-backdrop) .board {
  position: relative;
}

html:not(.has-page-backdrop) .stage {
  animation: boardIn 0.8s var(--ease-snap) 0.12s both;
}

html.has-page-backdrop .chrome {
  position: relative;
  z-index: 10;
}

/* —— App shell —— */
.app {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(12rem, env(safe-area-inset-top))
    max(16rem, env(safe-area-inset-right))
    max(16rem, env(safe-area-inset-bottom))
    max(16rem, env(safe-area-inset-left));
}

.chrome {
  width: min(100%, 672rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(10rem, 1.8vh, 16rem);
  margin-top: clamp(6rem, 1.5vh, 14rem);
  margin-bottom: clamp(10rem, 2vh, 18rem);
  animation: brandIn 0.7s var(--ease-snap) both;
}

.brand {
  text-align: center;
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38.4rem, 10vh, 64rem);
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow:
    0 2rem 0 rgba(0, 0, 0, 0.35),
    0 8rem 24rem rgba(0, 0, 0, 0.35);
}

.logo span {
  display: inline-block;
  transition: transform 0.25s var(--ease-snap);
}

.logo:hover span {
  transform: translateY(-2rem);
}

.c-yellow { color: var(--yellow); }
.c-blue { color: #4a7fff; }
.c-purple { color: #a855f7; }
.c-green { color: #3ecf6e; }
.c-orange { color: #ff9a2e; }
.c-red { color: #ff4d57; }

.tagline {
  margin-top: 4.8rem;
  font-style: italic;
  font-size: clamp(12.8rem, 3vh, 16.8rem);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.depot-link {
  display: inline-block;
  margin-top: 10rem;
  font-size: clamp(11rem, 2.4vh, 13rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s ease;
}

.depot-link:hover {
  color: rgba(255, 255, 255, 0.92);
}

/* —— HUD —— */
.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12rem;
  padding: 10.4rem 13.6rem;
  animation: brandIn 0.7s var(--ease-snap) 0.08s both;
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  min-width: 72rem;
  justify-self: start;
  text-align: center;
}

.stat-label {
  font-family: var(--font-ui);
  font-size: 10.4rem;
  letter-spacing: 0.14em;
  /* Cancel trailing letter-spacing so the word centers over the value */
  margin-right: -0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 29.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
  width: 100%;
}

.hud-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8rem 10rem;
  grid-column: 2;
  justify-self: center;
}

.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.field-label {
  font-family: var(--font-ui);
  font-size: 9.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.field-select {
  appearance: none;
  border: 1rem solid var(--ui-border);
  background-color: var(--ui-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e8c878' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10.4rem center;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.12rem;
  padding: 7.68rem 28rem 7.68rem 12rem;
  border-radius: var(--ui-radius);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.field-select:hover {
  border-color: var(--brass-lit);
}

.field-select:focus {
  outline: 2rem solid color-mix(in srgb, var(--brass) 65%, transparent);
  outline-offset: 2rem;
}

.hud-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8rem;
}

.btn {
  appearance: none;
  border: 1rem solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 8.32rem 15.2rem;
  border-radius: var(--ui-radius);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, color 0.2s;
}

.btn:hover {
  border-color: var(--brass-lit);
  background: color-mix(in srgb, var(--ui-surface) 70%, black);
}

.btn:active {
  transform: scale(0.97);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}

.btn-ghost:hover {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}

.btn-primary {
  background: linear-gradient(180deg, var(--brass-lit) 0%, var(--brass) 100%);
  color: #1a1208;
  border-color: transparent;
  font-weight: 700;
  padding: 12rem 22.4rem;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #f0d48a 0%, #d4ad55 100%);
}

/* —— Classic chrome: club-house rail —— */
html[data-theme="classic"] {
  --ink: #f4f0e6;
  --ink-dim: rgba(244, 240, 230, 0.72);
  --ui-surface: rgba(18, 10, 6, 0.55);
  --ui-border: rgba(201, 162, 74, 0.5);
  --ui-radius: 5rem;
  --font-display: "Playfair Display", "Libre Baskerville", Georgia, serif;
  --font-body: "Libre Baskerville", Georgia, serif;
  --font-ui: "Libre Baskerville", Georgia, serif;
}

html[data-theme="classic"] .hud {
  background:
    linear-gradient(180deg, rgba(80, 48, 22, 0.55) 0%, rgba(28, 16, 8, 0.72) 100%);
  border: 1rem solid rgba(201, 162, 74, 0.4);
  box-shadow:
    inset 0 1rem 0 rgba(232, 200, 120, 0.18),
    inset 0 -1rem 0 rgba(0, 0, 0, 0.35),
    0 8rem 22rem rgba(0, 0, 0, 0.35);
  border-radius: 4rem;
  position: relative;
}

html[data-theme="classic"] .hud::before,
html[data-theme="classic"] .hud::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7rem;
  height: 7rem;
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(145deg, #f0e0b0, #b8923a);
  box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

html[data-theme="classic"] .hud::before { left: 8rem; }
html[data-theme="classic"] .hud::after { right: 8rem; }

html[data-theme="classic"] .stat {
  border-right: 1rem solid rgba(201, 162, 74, 0.28);
  /* Clearance past the left brass diamond */
  margin-left: 13.6rem;
  padding-left: 10.4rem;
  padding-right: 12rem;
}

html[data-theme="classic"] .overlay {
  background: rgba(8, 16, 10, 0.68);
}

html[data-theme="classic"] .overlay-card {
  background:
    linear-gradient(160deg, rgba(232, 200, 120, 0.1), transparent 45%),
    #1a120c;
  border: 1rem solid rgba(201, 162, 74, 0.45);
  border-radius: 8rem;
}

html[data-theme="classic"] .overlay-card h2 {
  font-family: var(--font-display);
  color: var(--brass-lit);
}

html[data-theme="classic"] .foot {
  color: rgba(244, 240, 230, 0.38);
}

/* —— Futuristic chrome: console panel —— */
html[data-theme="futuristic"] {
  --ink: #1a1e26;
  --ink-dim: rgba(26, 30, 38, 0.65);
  --ui-surface: rgba(255, 255, 255, 0.62);
  --ui-border: rgba(40, 48, 62, 0.28);
  --ui-radius: 2rem;
  --brass: #3a6ea5;
  --brass-lit: #5b8fd4;
  --font-display: "Orbitron", "Rajdhani", sans-serif;
  --font-body: "Rajdhani", "Segoe UI", sans-serif;
  --font-ui: "Rajdhani", "Segoe UI", sans-serif;
}

html[data-theme="futuristic"] body {
  background: #d8dce4;
  color: var(--ink);
}

html[data-theme="futuristic"] .logo {
  letter-spacing: 0.08em;
  text-shadow:
    0 1rem 0 rgba(255, 255, 255, 0.65),
    0 2rem 10rem rgba(0, 0, 0, 0.12);
}

html[data-theme="futuristic"] .tagline {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: clamp(10.88rem, 2.4vh, 13.12rem);
}

html[data-theme="futuristic"] .hud {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(220, 226, 234, 0.88) 100%);
  border: 1rem solid rgba(50, 58, 72, 0.22);
  box-shadow:
    inset 0 1rem 0 rgba(255, 255, 255, 0.9),
    inset 0 -1rem 0 rgba(0, 0, 0, 0.06),
    0 10rem 28rem rgba(30, 36, 48, 0.12);
  clip-path: polygon(
    0 8rem,
    8rem 0,
    calc(100% - 8rem) 0,
    100% 8rem,
    100% calc(100% - 8rem),
    calc(100% - 8rem) 100%,
    8rem 100%,
    0 calc(100% - 8rem)
  );
  position: relative;
}

html[data-theme="futuristic"] .hud::before {
  content: "";
  position: absolute;
  left: 12rem;
  right: 12rem;
  top: 0;
  height: 2rem;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91, 143, 212, 0.85) 30%,
    rgba(91, 143, 212, 0.85) 70%,
    transparent
  );
  animation: scanPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

html[data-theme="futuristic"] .stat {
  border-right: 1rem solid rgba(40, 48, 62, 0.14);
}

html[data-theme="futuristic"] .stat-value {
  letter-spacing: 0.04em;
}

html[data-theme="futuristic"] .field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%233a6ea5' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12.48rem;
}

html[data-theme="futuristic"] .btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 12.48rem;
}

html[data-theme="futuristic"] .btn:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(58, 110, 165, 0.55);
}

html[data-theme="futuristic"] .btn-primary {
  background: linear-gradient(180deg, #6a9ad8 0%, #3a6ea5 100%);
  color: #f4f7fb;
}

html[data-theme="futuristic"] .btn-primary:hover {
  background: linear-gradient(180deg, #7eace6 0%, #4a7eb8 100%);
}

html[data-theme="futuristic"] .help {
  font-weight: 500;
  letter-spacing: 0.02em;
}

html[data-theme="futuristic"] .foot {
  color: rgba(26, 30, 38, 0.4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

html[data-theme="futuristic"] .overlay {
  background: rgba(20, 24, 32, 0.48);
}

html[data-theme="futuristic"] .overlay-card {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), transparent 50%),
    #e8ecf2;
  border: 1rem solid rgba(40, 48, 62, 0.2);
  border-radius: 2rem;
  clip-path: polygon(
    0 12rem,
    12rem 0,
    calc(100% - 12rem) 0,
    100% 12rem,
    100% calc(100% - 12rem),
    calc(100% - 12rem) 100%,
    12rem 100%,
    0 calc(100% - 12rem)
  );
  color: #1a1e26;
}

html[data-theme="futuristic"] .overlay-card h2 {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3a6ea5;
}

html[data-theme="futuristic"] .overlay-card p,
html[data-theme="futuristic"] .overlay-card strong {
  color: #1a1e26;
}

html[data-theme="futuristic"] .overlay-card p {
  opacity: 0.75;
}

/* —— Board / stage —— */
.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  animation: boardIn 0.8s var(--ease-snap) 0.12s both;
}

.board {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  aspect-ratio: 1;
  border-radius: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  background-image: var(--board-image, none);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 18rem 40rem var(--shadow);
  touch-action: none;
}

.cell {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  aspect-ratio: 1;
}

.cell-rect {
  aspect-ratio: auto;
  box-sizing: border-box;
}

.board:not(.is-rect-layout) .cell .ball {
  width: 88%;
  height: 88%;
  max-width: 88%;
  max-height: 88%;
  aspect-ratio: 1;
}

.board.is-rect-layout .cell-rect .ball {
  /* px size from JS when available; % fallback if layout not measured yet */
  width: 88%;
  height: 88%;
  max-width: 88%;
  max-height: 88%;
  aspect-ratio: 1;
}

.ball {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% * var(--ball-scale));
  height: calc(100% * var(--ball-scale));
  margin: 0;
  border: none;
  padding: 0;
  line-height: 0;
  font-size: 0;
  background: transparent;
  cursor: grab;
  border-radius: 50%;
  overflow: visible;
  box-shadow: 3rem 5rem 6rem rgba(0, 0, 0, 0.45);
  transition: transform 0.2s var(--ease-snap), box-shadow 0.2s;
  -webkit-user-drag: none;
}

.ball:active {
  cursor: grabbing;
}

.ball-face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Classic: brass rim catch-light + deeper lamp shadow */
[data-theme="classic"] .ball.is-selected {
  animation: none;
  box-shadow:
    5rem 9rem 10rem rgba(0, 0, 0, 0.5),
    2rem 4rem 4rem rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: box-shadow 0.25s ease;
}

[data-theme="classic"] .cell.is-selected-cup::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 150deg,
    rgba(255, 236, 190, 0) 158deg,
    rgba(255, 230, 170, 0.55) 172deg,
    rgba(255, 220, 140, 0.95) 186deg,
    rgba(212, 168, 80, 0.85) 198deg,
    rgba(255, 230, 170, 0.45) 210deg,
    rgba(255, 236, 190, 0) 222deg,
    transparent 230deg 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3.5rem),
    #000 calc(100% - 2rem),
    #000 100%
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3.5rem),
    #000 calc(100% - 2rem),
    #000 100%
  );
  animation: brassCatchLight 2.8s linear infinite;
}

[data-theme="classic"] .cell.is-selected-cup .ball {
  position: relative;
  z-index: 2;
}

/* Hide brass rim while balls are traveling under the lid. */
[data-theme="classic"] .cell.is-selected-cup:has(.ball.is-under-swap)::after {
  display: none;
}

/* Futuristic select + both themes during under-table travel: press into cup */
[data-theme="futuristic"] .ball.is-selected,
.ball.is-under-swap {
  animation: none;
  transform: scale(0.93) translateY(1.5%);
  box-shadow: 2rem 3rem 5rem rgba(0, 0, 0, 0.38);
  z-index: 2;
}

.ball.is-swapping.is-under-swap {
  transition: transform 0.42s var(--ease-snap);
  z-index: 2;
  will-change: transform;
}

.ball.is-hint {
  animation: hintPulse 1.1s ease-in-out infinite;
}

.ball.is-swapping {
  transition: transform 0.28s var(--ease-snap);
  z-index: 3;
  will-change: transform;
}

.ball.is-invalid {
  animation: shake 0.35s ease;
}

.ball.is-paired .pair-ring {
  opacity: 1;
}

.pair-ring {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  border: 2rem solid transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s, border-color 0.3s;
}

.board.is-solved .ball .pair-ring {
  opacity: 1;
  border-color: rgba(255, 220, 120, 0.65);
}

.help {
  max-width: 448rem;
  margin-top: clamp(14rem, 2.5vh, 24rem);
  text-align: center;
  font-size: clamp(11.52rem, 2.6vh, 13.6rem);
  line-height: 1.45;
  color: var(--ink-dim);
  animation: brandIn 0.7s var(--ease-snap) 0.2s both;
  position: relative;
  z-index: 10;
}

.wild-mark {
  font-weight: 700;
  color: var(--ink);
}

.foot {
  margin-top: auto;
  padding-top: 16rem;
  font-size: 10.4rem;
  letter-spacing: 0.04em;
  color: rgba(244, 240, 230, 0.4);
  text-align: center;
  position: relative;
  z-index: 10;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rem;
  background: rgba(4, 20, 12, 0.72);
  animation: fadeIn 0.35s ease both;
}

.overlay.hidden {
  display: none;
}

.overlay-card {
  text-align: center;
  padding: 32rem 35.2rem;
  border-radius: 16rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 50%),
    #0c2e1c;
  border: 1rem solid rgba(244, 240, 230, 0.18);
  box-shadow: 0 24rem 60rem rgba(0, 0, 0, 0.5);
  animation: popIn 0.45s var(--ease-snap) both;
}

.overlay-card h2 {
  font-family: var(--font-display);
  font-size: clamp(32rem, 8vh, 44.8rem);
  color: var(--yellow);
  margin-bottom: 8rem;
}

.overlay-card p {
  font-size: 16rem;
  line-height: 1.45;
  color: var(--ink-dim);
  margin-bottom: 22.4rem;
}

.overlay-card strong {
  color: var(--ink);
}

@keyframes brandIn {
  from {
    opacity: 0;
    transform: translateY(-10rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes boardIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ballPopIn {
  from {
    transform: scale(0.93) translateY(1.5%);
    box-shadow: 2rem 3rem 5rem rgba(0, 0, 0, 0.38);
  }
  to {
    transform: none;
    box-shadow: 3rem 5rem 6rem rgba(0, 0, 0, 0.45);
  }
}

@keyframes brassCatchLight {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes scanPulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes hintPulse {
  0%,
  100% {
    box-shadow: 3rem 5rem 6rem rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow:
      3rem 5rem 6rem rgba(0, 0, 0, 0.45),
      0 0 14rem rgba(255, 200, 80, 0.75);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6rem);
  }
  40% {
    transform: translateX(6rem);
  }
  60% {
    transform: translateX(-4rem);
  }
  80% {
    transform: translateX(4rem);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  body {
    overflow-y: auto;
  }

  .app {
    min-height: 100%;
    padding:
      max(8rem, env(safe-area-inset-top))
      max(12rem, env(safe-area-inset-right))
      max(12rem, env(safe-area-inset-bottom))
      max(12rem, env(safe-area-inset-left));
  }

  .chrome {
    width: 100%;
    margin-top: 0;
    margin-bottom: 8rem;
    gap: 8rem;
  }

  .brand .tagline {
    display: none;
  }

  .logo {
    font-size: clamp(28rem, 8vw, 44rem);
  }

  .depot-link {
    margin-top: 4rem;
    font-size: 10rem;
  }

  /* Keep a single compact HUD row — don't stack into a tall card. */
  .hud {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 7rem 8rem;
    gap: 8rem;
  }

  .stat {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0 8rem 0 0;
    gap: 1rem;
    border-right: 1rem solid color-mix(in srgb, var(--ui-border) 70%, transparent) !important;
    border-bottom: none !important;
  }

  .stat-label {
    font-size: 8.5rem;
  }

  .stat-value {
    font-size: 20rem;
  }

  .hud-rail {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 6rem;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  .field {
    min-width: 0;
  }

  .field-label {
    font-size: 8rem;
  }

  .field-select,
  .hud-actions .btn {
    width: auto;
    max-width: 100%;
    font-size: 11rem;
    padding: 6rem 10rem;
  }

  .field-select {
    padding-right: 22rem;
    background-position: right 7rem center;
  }

  .hud-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6rem;
  }

  .help,
  .foot {
    display: none;
  }

  .stage {
    width: 100%;
    min-height: 0;
    flex: 1;
  }
}

@media (max-width: 560px) {
  /* Still one row — just tighter type/padding on narrow phones. */
  .hud {
    padding: 6rem 6rem;
    gap: 5rem;
  }

  .stat {
    padding-right: 6rem;
  }

  .stat-value {
    font-size: 18rem;
  }

  .field-select,
  .hud-actions .btn {
    font-size: 10rem;
    padding: 5rem 8rem;
  }

  .field-select {
    padding-right: 18rem;
    background-position: right 5rem center;
  }

  .hud-rail {
    gap: 4rem;
  }

  .hud-actions {
    gap: 4rem;
  }
}

@media (max-height: 700px) {
  .help {
    display: none;
  }

  .chrome {
    margin-top: 4rem;
    margin-bottom: 8rem;
    gap: 8rem;
  }

  .logo {
    font-size: clamp(30.4rem, 8vh, 48rem);
  }

  .tagline {
    font-size: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chrome,
  .hud,
  .stage,
  .help,
  .overlay,
  .overlay-card {
    animation: none;
  }

  html[data-theme="futuristic"] .hud::before {
    animation: none;
  }

  [data-theme="classic"] .cell.is-selected-cup::after {
    animation: none;
  }

  .board-lights .board-light.pin.pulse-top,
  .board-lights .board-light.pin.pulse-bottom,
  .board-lights .board-light.pin.pulse-side {
    animation: none;
    opacity: 0.55;
  }
}