/* 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.
     JS tightens this from measured chrome/help/footer; keep a 16:9-safe fallback. */
  --board-size: min(85vw, calc(100vh - 240px));
  --ball-scale: 1;
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html,
body {
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

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);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: 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%;
  /* Do not force stage to board height — that pushes help/footer off-screen. */
  min-height: 0;
  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 1 auto;
  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: none;
}

/*
 * Board sandwich (classic + futuristic):
 *   cast-shadow — black silhouette masked to board PNG alpha, then blurred
 *   base        — full art under balls (cups visible through lid holes)
 *   cells       — balls
 *   lid         — same art with cup holes so swaps travel “under” the surface
 *
 * Never box-shadow the board box (rectangular fill in the 45° chamfers).
 * Never filter:drop-shadow on a CSS background layer either — some GPUs
 * rasterize that as an opaque white rectangle behind the alpha cutouts.
 */
.board-cast-shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #000;
  -webkit-mask-image: var(--board-image, none);
  mask-image: var(--board-image, none);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.4;
  filter: blur(18px);
  transform: translate(3px, 16px);
}

.board.has-board-lid {
  background-image: none;
  box-shadow: none !important;
  filter: none;
  overflow: visible;
}

.board.has-board-lid.lid-mask-fallback {
  background-image: none;
}

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

.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: 1;
  filter: none;
}

.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: 2;
}

@media (hover: none), (max-width: 900px) {
  /* Flat board: keep cast-shadow + base art; hide only the cup lid. */
  .board.has-board-lid,
  .board.has-board-lid.lid-mask-fallback {
    background-image: none !important;
    box-shadow: none !important;
    filter: none;
  }

  .board.has-board-lid .board-base,
  .board.has-board-lid.lid-mask-fallback .board-base {
    display: block !important;
    filter: none;
  }

  .board.has-board-lid .board-lid,
  .board.has-board-lid.lid-mask-fallback .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;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding:
    max(12rem, env(safe-area-inset-top))
    max(16rem, env(safe-area-inset-right))
    max(20rem, env(safe-area-inset-bottom))
    max(16rem, env(safe-area-inset-left));
}

.chrome {
  flex-shrink: 0;
  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-flex;
  align-items: center;
  align-self: center;
  justify-self: start;
  grid-column: 1;
  /* Keep clear of hud edge ornaments (classic diamonds / futuristic chamfer). */
  margin: 0 0 0 22rem;
  padding: 0 14rem 0 0;
  font-family: var(--font-ui);
  font-size: clamp(12rem, 2.4vh, 14rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.depot-link:hover {
  color: var(--ink);
}

/* —— 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;
  grid-column: 3;
  justify-self: end;
  /* Mirror depot inset so Moves clears the right-side ornament. */
  margin: 0 22rem 0 0;
  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"] .depot-link {
  /* Diamond sits at left:8rem with ~10rem bounding box — clear it + gap. */
  margin-left: 28rem;
  padding-left: 4rem;
  padding-right: 14rem;
  border-right: 1rem solid rgba(201, 162, 74, 0.28);
}

html[data-theme="classic"] .stat {
  border-left: 1rem solid rgba(201, 162, 74, 0.28);
  margin-right: 28rem;
  padding-left: 14rem;
  padding-right: 4rem;
}

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"] .depot-link {
  margin-left: 22rem;
  border-right: 1rem solid rgba(40, 48, 62, 0.14);
}

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

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 1 auto;
  min-height: 0;
  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: none;
  box-shadow: none !important;
  filter: none;
  overflow: visible;
  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 {
  flex-shrink: 0;
  max-width: 448rem;
  margin-top: clamp(10rem, 1.8vh, 18rem);
  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 {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 10rem;
  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) {
  .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,
  html[data-theme="classic"] .depot-link {
    margin: 0;
    padding: 0 8rem 0 0;
    font-size: 11rem;
    letter-spacing: 0.1em;
    border-right: 1rem solid color-mix(in srgb, var(--ui-border) 70%, transparent);
  }

  /* 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,
  html[data-theme="classic"] .stat {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0 0 0 auto;
    padding: 0 0 0 8rem;
    gap: 1rem;
    border-left: 1rem solid color-mix(in srgb, var(--ui-border) 70%, transparent) !important;
    border-right: none !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;
  }

  .depot-link {
    padding-right: 6rem;
    font-size: 10rem;
  }

  .stat {
    padding-left: 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;
  }
}