:root {
  --primary: #FF1744;
  --accent: #FFEB3B;
  --bg: #0b0d10;
  --bg-elev: #161a1f;
  --bg-pump: #1a0f08;
  --text: #ffffff;
  --text-dim: #c9ced6;
  --stop: #e10600;
  --stop-pressed: #b30500;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  --radius: 16px;
  --stop-h: 76px;
  --transport-h: 60px;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute should always win over our CSS display
   rules (.game-empty, .on-deck-card, .in-the-hole-card, .header-btn etc.
   all set display:flex, which would otherwise re-show a hidden element). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Fredoka', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--stop-h) + var(--transport-h) + env(safe-area-inset-bottom, 0px) + 16px);
  /* === LISA FRANK MODE BACKGROUND === */
  /* Layer 1: full-saturation rainbow flow (slow 60s cycle, more neon). */
  background:
    linear-gradient(135deg,
      #FF80B5 0%,
      #B388FF 18%,
      #6EC1FF 36%,
      #69F0AE 54%,
      #FFEE58 72%,
      #FF7AC6 90%,
      #FF80B5 100%);
  background-size: 400% 400%;
  animation: rainbowFlow 60s linear infinite;
}

@keyframes rainbowFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Layer 2: iridescent soap-bubble radial gradients overlaid. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 200, 240, 0.45), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(180, 220, 255, 0.45), transparent 42%),
    radial-gradient(circle at 50% 65%, rgba(220, 200, 255, 0.40), transparent 48%),
    radial-gradient(circle at 24% 88%, rgba(255, 220, 200, 0.42), transparent 40%),
    radial-gradient(circle at 90% 78%, rgba(200, 255, 220, 0.42), transparent 42%);
  animation: bubblesShift 28s ease-in-out infinite alternate;
}

/* Layer 3: faint diagonal light rays sweeping across. */
body::after {
  content: '';
  position: fixed;
  inset: -10% -20%;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    62deg,
    transparent 0,
    transparent 90px,
    rgba(255, 255, 255, 0.07) 90px,
    rgba(255, 255, 255, 0.07) 130px,
    transparent 130px,
    transparent 180px,
    rgba(255, 200, 255, 0.05) 180px,
    rgba(255, 200, 255, 0.05) 220px
  );
  animation: raysSlide 28s linear infinite;
  mix-blend-mode: screen;
}

@keyframes bubblesShift {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-2%, 3%); }
}
@keyframes raysSlide {
  0%   { transform: translate3d(-15%, 0, 0); }
  100% { transform: translate3d(15%, 0, 0); }
}

/* Make sure header/main/cards sit above the body pseudos. */
.header, .content, .modal, .toast, .transport-bar, .stop-btn, .sparkles, .confetti {
  position: relative;
  z-index: 2;
}
.sparkles { z-index: 1; }

.header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px)) 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, var(--primary), color-mix(in oklab, var(--primary) 60%, black));
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.header h1 {
  margin: 0;
  font-size: clamp(18px, 5vw, 28px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-left, .header-right {
  display: flex;
  gap: 6px;
  align-items: center;
}

.header-btn {
  appearance: none;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 6px 10px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease, background-color 120ms ease;
}

.header-btn:active { transform: scale(0.94); }
.header-btn:hover { background: rgba(0, 0, 0, 0.4); }

.header-btn.active {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}

.content {
  padding: 16px 12px 8px;
  max-width: 720px;
  margin: 0 auto;
}

.section + .section { margin-top: 18px; }

.section-heading {
  margin: 6px 4px 12px;
  font-size: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pumpup-section {
  background: var(--bg-pump);
  border: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
  border-radius: var(--radius);
  padding: 12px;
  /* Lives outside the per-mode view (so it shows in both modes), so the
     usual ".section + .section" sibling-margin doesn't catch it. Apply
     spacing here so it doesn't butt up against the section above. */
  margin-top: 18px;
}

.pumpup-heading {
  color: var(--accent);
  text-align: center;
  font-size: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pumpup-grid { gap: 10px; }

.btn {
  position: relative;
  appearance: none;
  border: 3px solid transparent;
  background:
    linear-gradient(160deg, #1a0826 0%, #0d1330 60%, #260a3a 100%);
  color: var(--text);
  border-radius: var(--radius);
  padding: 14px 12px 12px;
  min-height: 190px;
  will-change: transform;
  cursor: pointer;
  font: inherit;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Neon rainbow glow */
  box-shadow:
    0 0 0 2px rgba(255, 105, 180, 0.55),
    0 0 14px rgba(255, 105, 180, 0.45),
    0 0 26px rgba(180, 100, 255, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Holographic foil overlay — animated rainbow shift */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 200, 0.22) 0%,
    rgba(0, 200, 255, 0.18) 25%,
    rgba(200, 0, 255, 0.18) 50%,
    rgba(255, 200, 0, 0.22) 75%,
    rgba(255, 0, 200, 0.22) 100%
  );
  background-size: 250% 250%;
  animation: holoShift 8s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.btn:active::before {
  animation-duration: 1.5s;
  background-position: 100% 100%;
}

@keyframes holoShift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

/* Each in-card item sits above the holo overlay */
.btn > * { position: relative; z-index: 1; }

.btn .number {
  font-family: 'Bagel Fat One', 'Lilita One', system-ui, sans-serif;
  font-size: clamp(40px, 11vw, 60px);
  line-height: 1;
  color: var(--accent);
  text-shadow:
    0 0 8px rgba(255, 235, 59, 0.7),
    0 0 18px rgba(255, 105, 180, 0.5),
    0 3px 0 rgba(0, 0, 0, 0.4);
  letter-spacing: 0;
  font-weight: 400;
}

.btn .name {
  font-size: clamp(15px, 4vw, 20px);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE0F4 40%, #E0F0FF 70%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.pumpup-grid .btn {
  min-height: 90px;
  background: #2a1207;
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}

.pumpup-grid .btn .label {
  font-size: clamp(20px, 6vw, 28px);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
}

.btn.playing {
  background: color-mix(in oklab, var(--primary) 28%, var(--bg-elev));
  border-color: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}

.pumpup-grid .btn.playing {
  background: color-mix(in oklab, var(--accent) 24%, #2a1207);
  border-color: var(--primary);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent), var(--shadow); }
  50%      { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 0%, transparent), var(--shadow); }
}

.progress-ring {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.btn.playing .progress-ring { opacity: 1; }

.progress-ring .ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.10);
  stroke-width: 4;
}

.progress-ring .ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 80ms linear;
}

.shake { animation: shake 420ms cubic-bezier(.36,.07,.19,.97) both; }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--stop-h) + var(--transport-h) + env(safe-area-inset-bottom, 0px) + 12px);
  transform: translate(-50%, 20px);
  background: #111418;
  color: #fff;
  border: 2px solid var(--primary);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 20;
  max-width: 90vw;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.transport-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--stop-h) + env(safe-area-inset-bottom, 0px));
  height: var(--transport-h);
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(11, 13, 16, 0.94);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 9;
}

.transport-btn {
  appearance: none;
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 6px 10px;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  transition: transform 80ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.transport-btn:active { transform: scale(0.96); }

.transport-btn.shuffle {
  flex: 2;
  background: color-mix(in oklab, var(--accent) 18%, var(--bg-elev));
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  color: var(--accent);
  font-size: 16px;
}

.transport-btn:not(.shuffle) {
  flex: 1;
  font-size: 22px;
  letter-spacing: 0;
  padding: 6px;
}

.transport-btn.shuffle.active {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
  animation: shufflePulse 1.6s ease-in-out infinite;
}

@keyframes shufflePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 0%, transparent); }
}

.transport-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stop-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--stop-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--stop);
  color: #fff;
  border: 0;
  font: inherit;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 4px;
  text-transform: uppercase;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 10;
  transition: background-color 100ms ease, transform 80ms ease;
}

.stop-btn:active {
  background: var(--stop-pressed);
  transform: scale(0.995);
}

.stop-btn.armed {
  animation: stopGlow 1s ease-in-out infinite;
}

@keyframes stopGlow {
  0%, 100% { box-shadow: 0 -6px 18px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0.0) inset; }
  50%      { box-shadow: 0 -6px 18px rgba(0,0,0,0.5), 0 0 60px rgba(255,255,255,0.18) inset; }
}

.empty {
  padding: 24px 12px;
  color: var(--text-dim);
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* =========================================================================
   GAME MODE — lineup-driven view
   ========================================================================= */

.view[hidden] { display: none; }

.game-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: var(--text-dim);
}

.game-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.game-empty p {
  font-size: 18px;
  margin: 0 0 20px;
}

.primary-btn {
  appearance: none;
  background: var(--accent);
  color: #111;
  border: 0;
  border-radius: 12px;
  padding: 14px 24px;
  font: inherit;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 50px;
  transition: transform 80ms ease, box-shadow 120ms ease;
  box-shadow: var(--shadow);
}

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

.secondary-btn {
  appearance: none;
  background: var(--bg-elev);
  color: var(--text);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  transition: transform 80ms ease, background-color 120ms ease;
}

.secondary-btn:active { transform: scale(0.96); }

.now-batting-container {
  position: relative;
}

/* NOW BATTING card — the big tappable one */
.batter-card {
  position: relative;
  appearance: none;
  border: 0;
  width: 100%;
  background: linear-gradient(160deg, var(--primary), color-mix(in oklab, var(--primary) 60%, black));
  color: var(--text);
  border-radius: var(--radius);
  padding: 24px 20px 30px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 3px color-mix(in oklab, var(--accent) 70%, transparent) inset;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 100ms ease, box-shadow 150ms ease;
  min-height: 38vh;
  margin-bottom: 14px;
}

.batter-card:active { transform: scale(0.98); }

.now-batting-label {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(13px, 3.5vw, 16px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.95;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.batter-card .batter-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.batter-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 22px);
}

.batter-card .mascot-icon {
  width: clamp(72px, 20vw, 144px);
  height: clamp(72px, 20vw, 144px);
  border-radius: 22%;
  flex-shrink: 0;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.batter-card .batter-number {
  font-size: clamp(96px, 26vw, 180px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -4px;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
  font-weight: 900;
}

.batter-card .batter-name {
  font-size: clamp(36px, 9vw, 64px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  font-weight: 900;
  margin-top: 4px;
}

.now-batting-card.playing {
  animation: nowBattingPulse 1.4s ease-in-out infinite;
}

@keyframes nowBattingPulse {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 3px var(--accent) inset; }
  50%      { box-shadow: var(--shadow), 0 0 0 6px var(--accent) inset, 0 0 30px color-mix(in oklab, var(--accent) 30%, transparent); }
}

.card-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 150ms ease;
}

.now-batting-card.playing .card-progress { opacity: 1; }

.card-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 80ms linear;
}

.skip-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 14px;
  z-index: 2;
  transition: transform 80ms ease, background-color 100ms ease;
  min-height: 36px;
}

.skip-btn:active { transform: scale(0.92); }
.skip-btn:hover { background: rgba(0, 0, 0, 0.65); }

/* ON DECK card */
.on-deck-card {
  position: relative;
  background: linear-gradient(135deg, #FFB300, #FF6F00);
  color: #1a0d00;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: onDeckGlow 2.2s ease-in-out infinite;
}

@keyframes onDeckGlow {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(255, 179, 0, 0); }
  50%      { box-shadow: var(--shadow), 0 0 0 6px rgba(255, 179, 0, 0.35); }
}

.on-deck-label {
  font-size: clamp(13px, 3.2vw, 16px);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #1a0d00;
  font-weight: 900;
  opacity: 0.85;
}

/* IN THE HOLE card */
.in-the-hole-card {
  position: relative;
  background: linear-gradient(135deg, #7B1FA2, #4A148C);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.in-the-hole-label {
  font-size: clamp(13px, 3.2vw, 16px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFE082;
  font-weight: 900;
  opacity: 0.95;
}

.batter-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.on-deck-card .batter-number,
.in-the-hole-card .batter-number {
  font-size: clamp(36px, 9vw, 56px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
}

.on-deck-card .batter-name,
.in-the-hole-card .batter-name {
  font-size: clamp(22px, 6vw, 32px);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  flex: 1;
  text-align: right;
  line-height: 1.1;
}

/* UP NEXT list */
.up-next-section {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 10px 14px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.up-next-label {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.up-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 30vh;
  overflow-y: auto;
}

.up-next-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
}

.up-next-list li:last-child { border-bottom: 0; }

.up-next-list .seq {
  color: var(--text-dim);
  font-size: 13px;
  width: 22px;
}

.up-next-list .num {
  color: var(--accent);
  font-weight: 900;
  width: 36px;
}

.up-next-list .name {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.pumpup-game { margin-top: 18px; }

/* Animations for rotation */
.batter-card.rotating-out {
  animation: rotateOut 280ms ease forwards;
}

@keyframes rotateOut {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(0.95); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

/* =========================================================================
   LINEUP MANAGEMENT MODAL
   ========================================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] { display: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  animation: fadeIn 180ms ease;
}

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

.modal-content {
  position: relative;
  background: var(--bg-elev);
  border-radius: var(--radius);
  width: min(540px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  animation: slideUp 220ms ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.modal-close {
  appearance: none;
  background: transparent;
  color: var(--text);
  border: 0;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  font-weight: 900;
}

.modal-body {
  padding: 12px 14px;
  overflow-y: auto;
  flex: 1;
}

.lineup-section {
  margin-bottom: 16px;
}

.lineup-section h3 {
  margin: 8px 4px;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lineup-active-list,
.lineup-bench-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lineup-row {
  display: grid;
  grid-template-columns: 28px 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #1f242b;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.lineup-row .position {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  font-weight: 700;
}

.lineup-row .num {
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}

.lineup-row .name {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.lineup-row .row-actions {
  display: flex;
  gap: 4px;
}

.lineup-row .row-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.lineup-row .row-btn:active { transform: scale(0.92); }
.lineup-row .row-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.lineup-row .row-btn.remove {
  background: rgba(225, 6, 0, 0.2);
  border-color: rgba(225, 6, 0, 0.5);
  color: #ff6b66;
}

.lineup-row .row-btn.add {
  background: rgba(255, 235, 59, 0.18);
  border-color: rgba(255, 235, 59, 0.5);
  color: var(--accent);
}

.lineup-empty-row {
  padding: 14px 10px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-actions button { flex: 1; }
.modal-actions .primary-btn { flex: 1.4; }

/* Game-mode background tint hint when active */
body.game-mode {
  background: #0d0608;
}

/* =========================================================================
   ✨ SPARKLE THEME — Lisa Frank notebook from the 90s
   ========================================================================= */

/* Bouncy tap feedback on everything tappable. */
.btn, .transport-btn, .header-btn, .primary-btn, .secondary-btn,
.skip-btn, .batter-card, .modal-close, .row-btn, .lineup-row .row-btn {
  transition:
    transform 260ms cubic-bezier(0.34, 1.7, 0.64, 1),
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 150ms ease,
    color 120ms ease;
}

.btn:active,
.transport-btn:active,
.header-btn:active,
.primary-btn:active,
.secondary-btn:active,
.modal-close:active {
  transform: scale(0.92);
  transition-duration: 80ms;
}

.batter-card:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}

/* --- Floating sparkle particles (Lisa Frank density) --- */
.sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.sparkle-on) .sparkles { display: none; }

.sparkle {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
  transform: scale(var(--sparkle-scale, 1));
}

.sparkle svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7))
          drop-shadow(0 0 12px rgba(255, 100, 200, 0.4));
}

/* Drift = slow vertical float */
.sparkle-drift { animation-name: sparkleDrift; }
@keyframes sparkleDrift {
  0%   { transform: translate3d(0, 30px, 0) scale(calc(var(--sparkle-scale) * 0.6));  opacity: 0; }
  15%  { opacity: var(--sparkle-opacity, 0.7); }
  85%  { opacity: var(--sparkle-opacity, 0.7); }
  100% { transform: translate3d(0, -100px, 0) scale(var(--sparkle-scale));            opacity: 0; }
}

/* Twinkle = quick scale + opacity pulse */
.sparkle-twinkle { animation-name: sparkleTwinkle; }
@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(calc(var(--sparkle-scale) * 0.4)); opacity: 0; }
  50%      { transform: scale(var(--sparkle-scale));             opacity: var(--sparkle-opacity, 0.85); }
}

/* Spin = continuous rotation while drifting */
.sparkle-spin { animation-name: sparkleSpin; }
@keyframes sparkleSpin {
  0%   { transform: translate3d(0, 20px, 0) scale(calc(var(--sparkle-scale) * 0.7)) rotate(0deg);   opacity: 0; }
  20%  { opacity: var(--sparkle-opacity, 0.7); }
  80%  { opacity: var(--sparkle-opacity, 0.7); }
  100% { transform: translate3d(0, -80px, 0) scale(var(--sparkle-scale)) rotate(720deg);            opacity: 0; }
}

/* Pulse = breath in / breath out */
.sparkle-pulse { animation-name: sparklePulse; }
@keyframes sparklePulse {
  0%, 100% { transform: scale(calc(var(--sparkle-scale) * 0.6)) rotate(0deg);   opacity: var(--sparkle-opacity, 0.5); }
  50%      { transform: scale(calc(var(--sparkle-scale) * 1.3)) rotate(180deg); opacity: var(--sparkle-opacity, 0.95); }
}

/* --- Iridescent shimmer over the NOW BATTING card --- */
.now-batting-card {
  position: relative;
  isolation: isolate;
}

body.sparkle-on .now-batting-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      120deg,
      transparent 18%,
      rgba(255, 200, 240, 0.4) 38%,
      rgba(200, 230, 255, 0.55) 48%,
      rgba(255, 220, 180, 0.45) 58%,
      rgba(200, 180, 255, 0.45) 68%,
      transparent 88%
    );
  background-size: 250% 100%;
  background-position: 150% 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: shimmer 3.5s ease-in-out infinite;
  z-index: 1;
}

body.sparkle-on .now-batting-card.playing::before {
  animation-duration: 1.6s;
  background:
    linear-gradient(
      120deg,
      transparent 10%,
      rgba(255, 100, 255, 0.5) 30%,
      rgba(100, 220, 255, 0.7) 45%,
      rgba(255, 200, 100, 0.6) 60%,
      rgba(180, 100, 255, 0.55) 75%,
      transparent 95%
    );
  background-size: 250% 100%;
}

@keyframes shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

/* Rotating rainbow ring around the unicorn when the song is playing */
body.sparkle-on .now-batting-card.playing .batter-headline {
  position: relative;
}
body.sparkle-on .now-batting-card.playing .batter-headline::before {
  content: '';
  position: absolute;
  width: clamp(140px, 42vw, 250px);
  height: clamp(140px, 42vw, 250px);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #FF1493, #FFEB3B, #00E5FF, #B388FF, #69F0AE, #FF6F00, #FF1493
  );
  filter: blur(8px);
  opacity: 0.6;
  animation: rainbowRingSpin 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes rainbowRingSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Make sure the card content sits above the shimmer overlay. */
.batter-card > * { position: relative; z-index: 2; }

/* --- Confetti burst (massive, from tapped card outward) --- */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 30;
}

.confetti-piece {
  position: absolute;
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  text-shadow:
    0 0 6px currentColor,
    0 0 14px rgba(255, 255, 255, 0.4);
  will-change: transform, opacity;
  animation: confettiBurst 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes confettiBurst {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); opacity: 0; }
  8%   { transform: translate3d(calc(var(--cx, 0px) * 0.12), calc(var(--cy, 0px) * 0.05), 0)
                      rotate(calc(var(--cr, 540deg) * 0.15)) scale(1.3);
         opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0)
                      rotate(var(--cr, 540deg)) scale(0.85);
         opacity: 0; }
}

/* =========================================================================
   🦄 INTENTIONAL UNICORN CHARACTERS
   Each variant has a distinct personality, not just a recolored rainbow.
   - 5 body coat shades (lightest → darkest)
   - 14 mane colors (one per original master color group, preserving
     within-region shading for full artistic control)
   Uniform (helmet/jersey/bat), horn gold, cheek pink, pants white,
   outlines, highlights stay CONSTANT — the team is the Pink Unicorns.

   Mane var positions (these map to the master's hue progression):
   1-2  pinks    | 3-4  mauves | 5-7  purples
   8-12 blues    | 13-14 teals
   ========================================================================= */

/* 🌌 Rainbow Stardust — original master art, pixel-identical. */
.unicorn-lavender {
  --u-body-1: #e2dde3; --u-body-2: #d6bbed; --u-body-3: #c9ade2;
  --u-body-4: #bb9cdd; --u-body-5: #d38ccb;
  --u-mane-1: #df2c85; --u-mane-2: #ce2b77;
  --u-mane-3: #da6397; --u-mane-4: #c2699a;
  --u-mane-5: #714fae; --u-mane-6: #60399f; --u-mane-7: #5f69bf;
  --u-mane-8: #2f88d6; --u-mane-9: #3480d6; --u-mane-10: #289cd0;
  --u-mane-11: #26a4cf; --u-mane-12: #23a9ca;
  --u-mane-13: #1eb0c2; --u-mane-14: #1db4b9;
  --u-mane-accent: #fdc827;
}

/* 🌹 Rose Petal — soft pink unicorn with a magenta/coral/gold mane.
   Sweet, classic, the girliest of the variants. */
.unicorn-rose {
  --u-body-1: #F4E8ED; --u-body-2: #FCC4DA; --u-body-3: #FFB6D1;
  --u-body-4: #E594B6; --u-body-5: #B8678A;
  --u-mane-1: #FF1493; --u-mane-2: #C2185B;
  --u-mane-3: #F06292; --u-mane-4: #EC407A;
  --u-mane-5: #FF80AB; --u-mane-6: #E91E63; --u-mane-7: #AD1457;
  --u-mane-8: #FF6F00; --u-mane-9: #FFAB91; --u-mane-10: #FFCA28;
  --u-mane-11: #FFD180; --u-mane-12: #FFE082;
  --u-mane-13: #FFEB3B; --u-mane-14: #FFF59D;
  --u-mane-accent: #FFCA28;
}

/* 🌿 Spring Meadow — mint-green body with an earthy green-teal-yellow
   mane. Fresh, nature-themed. */
.unicorn-mint {
  --u-body-1: #E5EFEA; --u-body-2: #B6EAD3; --u-body-3: #A8E6CF;
  --u-body-4: #7DC2A6; --u-body-5: #4F8A6E;
  --u-mane-1: #FFEB3B; --u-mane-2: #C0CA33;
  --u-mane-3: #9CCC65; --u-mane-4: #66BB6A;
  --u-mane-5: #43A047; --u-mane-6: #2E7D32; --u-mane-7: #1B5E20;
  --u-mane-8: #00897B; --u-mane-9: #00796B; --u-mane-10: #00838F;
  --u-mane-11: #0097A7; --u-mane-12: #00ACC1;
  --u-mane-13: #26C6DA; --u-mane-14: #80CBC4;
  --u-mane-accent: #FFEB3B;
}

/* ❄️ Ice Princess — pale icy body, frost-white mane shifting through
   silver, ice-blue, and lavender. Cold, regal, otherworldly. */
.unicorn-sky {
  --u-body-1: #EAEEF5; --u-body-2: #D6E5F2; --u-body-3: #B8D4ED;
  --u-body-4: #7CB8E8; --u-body-5: #4378A8;
  --u-mane-1: #FFFFFF; --u-mane-2: #F0F8FF;
  --u-mane-3: #E3F2FD; --u-mane-4: #BBDEFB;
  --u-mane-5: #90CAF9; --u-mane-6: #64B5F6; --u-mane-7: #42A5F5;
  --u-mane-8: #5C6BC0; --u-mane-9: #7986CB; --u-mane-10: #9FA8DA;
  --u-mane-11: #B3E5FC; --u-mane-12: #B2EBF2;
  --u-mane-13: #80DEEA; --u-mane-14: #B3DDFF;
  --u-mane-accent: #F8BBD0;
}

/* ☀️ Solar Flare — bright yellow body with a fiery yellow-orange-pink
   mane. Sunshine girl, full of energy. */
.unicorn-sunshine {
  --u-body-1: #EFEAE0; --u-body-2: #FFEAA4; --u-body-3: #FFE082;
  --u-body-4: #E6BB55; --u-body-5: #A87E33;
  --u-mane-1: #FF1493; --u-mane-2: #F06292;
  --u-mane-3: #FFB300; --u-mane-4: #FF6F00;
  --u-mane-5: #FF8F00; --u-mane-6: #FFA000; --u-mane-7: #FFCA28;
  --u-mane-8: #FFC107; --u-mane-9: #FFD54F; --u-mane-10: #FFEB3B;
  --u-mane-11: #FFEE58; --u-mane-12: #FFF176;
  --u-mane-13: #FFF176; --u-mane-14: #FFCA28;
  --u-mane-accent: #FF1493;
}

/* 🌊 Deep Ocean — teal body with an ocean-deep mane (navy, cyan,
   seafoam). Cool, mysterious, mermaid-coded. */
.unicorn-ocean {
  --u-body-1: #E5ECEE; --u-body-2: #95D8E2; --u-body-3: #4DD0E1;
  --u-body-4: #00ACC1; --u-body-5: #006064;
  --u-mane-1: #FF80AB; --u-mane-2: #F06292;
  --u-mane-3: #80DEEA; --u-mane-4: #4DD0E1;
  --u-mane-5: #00BCD4; --u-mane-6: #00838F; --u-mane-7: #006064;
  --u-mane-8: #0D47A1; --u-mane-9: #1565C0; --u-mane-10: #1976D2;
  --u-mane-11: #1E88E5; --u-mane-12: #00ACC1;
  --u-mane-13: #00897B; --u-mane-14: #26A69A;
  --u-mane-accent: #FFD54F;
}

/* 🖤 Midnight Berry — deep magenta body with a punk-rock plum, black,
   and electric-magenta mane. Edgy. The one with attitude. */
.unicorn-berry {
  --u-body-1: #F8BBD0; --u-body-2: #C2185B; --u-body-3: #880E4F;
  --u-body-4: #4A148C; --u-body-5: #1A0033;
  --u-mane-1: #FF1493; --u-mane-2: #C2185B;
  --u-mane-3: #AD1457; --u-mane-4: #880E4F;
  --u-mane-5: #6A1B6E; --u-mane-6: #4A148C; --u-mane-7: #311B92;
  --u-mane-8: #1A0033; --u-mane-9: #0D0020; --u-mane-10: #212121;
  --u-mane-11: #424242; --u-mane-12: #4A148C;
  --u-mane-13: #6A1B9A; --u-mane-14: #7B1FA2;
  --u-mane-accent: #FF1493;
}

/* 🍑 Peach Sorbet — peach body with a soft warm-pastel mane (peach,
   pink, pale yellow). Sweet, dreamy, summer-ice-cream-coded. */
.unicorn-peach {
  --u-body-1: #EDE9E2; --u-body-2: #FFD8A8; --u-body-3: #FFCC80;
  --u-body-4: #E0A86E; --u-body-5: #8C5E2A;
  --u-mane-1: #F06292; --u-mane-2: #EC407A;
  --u-mane-3: #FFAB91; --u-mane-4: #FF8A65;
  --u-mane-5: #FFCC80; --u-mane-6: #FFB74D; --u-mane-7: #FFA726;
  --u-mane-8: #FFCA28; --u-mane-9: #FFD54F; --u-mane-10: #FFE0B2;
  --u-mane-11: #FFD180; --u-mane-12: #FFCA28;
  --u-mane-13: #F48FB1; --u-mane-14: #F06292;
  --u-mane-accent: #FFCA28;
}

/* 🪸 Coral Reef — coral body with a tropical fire mane (red, orange,
   gold). Warm, intense, sunset-on-the-beach. */
.unicorn-coral {
  --u-body-1: #EFE5E2; --u-body-2: #FFAA8F; --u-body-3: #FF8A65;
  --u-body-4: #E0734E; --u-body-5: #8E3A1F;
  --u-mane-1: #E91E63; --u-mane-2: #C2185B;
  --u-mane-3: #F44336; --u-mane-4: #E64A19;
  --u-mane-5: #FF5722; --u-mane-6: #FF7043; --u-mane-7: #FF8A65;
  --u-mane-8: #FF6F00; --u-mane-9: #FF8F00; --u-mane-10: #FFA000;
  --u-mane-11: #FFB300; --u-mane-12: #FFCA28;
  --u-mane-13: #FFD54F; --u-mane-14: #FFEB3B;
  --u-mane-accent: #FFEB3B;
}

/* 🌳 Forest Friend — sage body with an earthy woodland mane (deep
   greens, teal, autumn gold). Quiet, grounded, woodsy. */
.unicorn-fern {
  --u-body-1: #EAECE3; --u-body-2: #D5E9BC; --u-body-3: #C5E1A5;
  --u-body-4: #A5D178; --u-body-5: #558B2F;
  --u-mane-1: #FFD54F; --u-mane-2: #FFC107;
  --u-mane-3: #AED581; --u-mane-4: #9CCC65;
  --u-mane-5: #7CB342; --u-mane-6: #689F38; --u-mane-7: #558B2F;
  --u-mane-8: #33691E; --u-mane-9: #2E7D32; --u-mane-10: #388E3C;
  --u-mane-11: #43A047; --u-mane-12: #00897B;
  --u-mane-13: #009688; --u-mane-14: #80CBC4;
  --u-mane-accent: #FFD54F;
}

/* 💜 Lilac Cloud — pale lilac body with a dreamy pastel mane (lavender,
   pink, soft blue, mint). Soft, gentle, like a sunset cloud. */
.unicorn-lilac {
  --u-body-1: #E8E5EC; --u-body-2: #DCD0EC; --u-body-3: #BFAFD8;
  --u-body-4: #9C7CB8; --u-body-5: #5E3B7A;
  --u-mane-1: #F8BBD0; --u-mane-2: #F48FB1;
  --u-mane-3: #CE93D8; --u-mane-4: #BA68C8;
  --u-mane-5: #B388FF; --u-mane-6: #9575CD; --u-mane-7: #7E57C2;
  --u-mane-8: #9FA8DA; --u-mane-9: #90CAF9; --u-mane-10: #B3DDFF;
  --u-mane-11: #B2EBF2; --u-mane-12: #80DEEA;
  --u-mane-13: #C5CAE9; --u-mane-14: #D1C4E9;
  --u-mane-accent: #FFE082;
}

/* 🌅 Sunrise Glow — warm-orange body with a full sunrise mane (purple
   to magenta to orange to gold). Dramatic, bold, dawn-breaking. */
.unicorn-sunrise {
  --u-body-1: #ECE5E1; --u-body-2: #FFC4B0; --u-body-3: #FFAB91;
  --u-body-4: #FF7043; --u-body-5: #8A2D08;
  --u-mane-1: #C2185B; --u-mane-2: #AD1457;
  --u-mane-3: #E91E63; --u-mane-4: #EC407A;
  --u-mane-5: #9C27B0; --u-mane-6: #7B1FA2; --u-mane-7: #5E35B1;
  --u-mane-8: #FF6F00; --u-mane-9: #F4511E; --u-mane-10: #FF8A65;
  --u-mane-11: #FFA726; --u-mane-12: #FFCA28;
  --u-mane-13: #FFD54F; --u-mane-14: #FFEB3B;
  --u-mane-accent: #FFCA28;
}

/* --- Unicorn avatar slot --- */
.unicorn-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.unicorn-slot .unicorn-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

/* Now Batting (huge, prominent) */
.batter-headline .unicorn-slot {
  width: clamp(120px, 36vw, 220px);
  height: clamp(120px, 36vw, 220px);
}

/* On Deck (medium) */
.on-deck-card .unicorn-slot.unicorn-md {
  width: clamp(60px, 16vw, 96px);
  height: clamp(60px, 16vw, 96px);
}

/* In The Hole (small) */
.in-the-hole-card .unicorn-slot.unicorn-sm {
  width: clamp(50px, 13vw, 76px);
  height: clamp(50px, 13vw, 76px);
}

/* Up Next list (tiny) */
.up-next-list .unicorn-slot {
  width: 38px;
  height: 38px;
}
.up-next-list .unicorn-slot .unicorn-svg { filter: none; }

/* Free Play player buttons (prominent — fills most of the card) */
.btn .unicorn-slot {
  width: clamp(96px, 28vw, 130px);
  height: clamp(96px, 28vw, 130px);
  margin-bottom: 2px;
}

/* Lineup modal rows */
.lineup-row .unicorn-slot {
  width: 40px;
  height: 40px;
}
.lineup-row .unicorn-slot .unicorn-svg { filter: none; }

/* --- Sparkle Mode toggle (in the lineup modal) --- */
.sparkle-toggle-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.sparkle-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
}

.sparkle-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.sparkle-toggle-track {
  position: relative;
  width: 52px;
  height: 30px;
  background: #2a2f37;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.sparkle-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 180ms ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.sparkle-toggle input:checked ~ .sparkle-toggle-track {
  background: linear-gradient(135deg, #FF80AB, #B388FF, #80D8FF);
  border-color: rgba(255, 255, 255, 0.5);
}

.sparkle-toggle input:checked ~ .sparkle-toggle-track .sparkle-toggle-thumb {
  transform: translateX(22px);
  background: #FFF9E0;
}

.sparkle-toggle-label {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}

.sparkle-toggle-label small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Soften card edges & give them a slight glow when sparkle is on — pastel
   background pairs well with a thin light border. */
body.sparkle-on .btn,
body.sparkle-on .stop-btn,
body.sparkle-on .pumpup-section,
body.sparkle-on .modal-content {
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 24px rgba(255, 255, 255, 0.06);
}

/* Chunky display-font headings with rainbow gradient text */
.header h1,
.section-heading,
.modal-header h2,
.now-batting-label,
.on-deck-label,
.in-the-hole-label,
.up-next-label {
  font-family: 'Bagel Fat One', 'Lilita One', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 2px;
}

.header h1 {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE5F1 30%, #E5F5FF 60%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 14px rgba(255, 200, 255, 0.6),
    0 2px 0 rgba(0, 0, 0, 0.25);
  letter-spacing: 3px;
}

.batter-card .batter-name {
  font-family: 'Bagel Fat One', 'Lilita One', system-ui, sans-serif;
  font-weight: 400;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFE5F1 30%, #E5F5FF 65%, #FFF5C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

.batter-card .batter-number {
  font-family: 'Bagel Fat One', 'Lilita One', system-ui, sans-serif;
  font-weight: 400;
}

/* === NEON CONTROLS === */
.transport-btn {
  background: linear-gradient(135deg, #1a0826, #260a3a);
  color: #fff;
  font-family: 'Bagel Fat One', 'Lilita One', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 1.5px;
  box-shadow:
    0 0 0 1.5px rgba(255, 105, 180, 0.55),
    0 0 12px rgba(255, 105, 180, 0.35),
    0 0 20px rgba(180, 100, 255, 0.25);
}

.transport-btn.shuffle {
  background: linear-gradient(135deg, #FF1493 0%, #B388FF 50%, #00E5FF 100%);
  color: white;
  border-color: white;
  box-shadow:
    0 0 0 2px rgba(255, 235, 59, 0.65),
    0 0 18px rgba(255, 100, 200, 0.6),
    0 0 28px rgba(100, 200, 255, 0.5);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.transport-btn.shuffle.active {
  background: linear-gradient(135deg, #FFEB3B, #FF1493, #B388FF);
  color: #1a0826;
}

.stop-btn {
  font-family: 'Bagel Fat One', 'Lilita One', system-ui, sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 6px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.45),
    0 0 22px rgba(255, 0, 100, 0.6),
    0 -6px 18px rgba(0, 0, 0, 0.5);
  animation: stopGlowSparkle 2.5s ease-in-out infinite;
}

@keyframes stopGlowSparkle {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.35),
      0 0 18px rgba(255, 0, 100, 0.45),
      0 -6px 18px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.75),
      0 0 32px rgba(255, 0, 130, 0.75),
      0 -6px 18px rgba(0, 0, 0, 0.5);
  }
}

.stop-btn.armed {
  animation: stopGlowArmed 0.9s ease-in-out infinite;
}

@keyframes stopGlowArmed {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.55),
      0 0 22px rgba(255, 30, 100, 0.7),
      0 -6px 18px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 1),
      0 0 50px rgba(255, 30, 100, 1),
      0 -6px 18px rgba(0, 0, 0, 0.5);
  }
}

/* Header gets a more vibrant gradient + sparkle accent */
.header {
  background:
    linear-gradient(
      135deg,
      #FF1493 0%,
      #B388FF 35%,
      #00BCD4 70%,
      #FF80AB 100%
    );
  background-size: 300% 100%;
  animation: headerShift 18s ease-in-out infinite;
  box-shadow:
    0 0 28px rgba(255, 100, 200, 0.5),
    var(--shadow);
}

@keyframes headerShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Section headings get a soft rainbow tint */
.section-heading,
.up-next-label {
  color: #FFFFFF;
  background: linear-gradient(135deg, #FF80AB, #B388FF, #80D8FF, #FFEB3B);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .btn.playing { animation: none; }
  .stop-btn.armed { animation: none; }
  .transport-btn.shuffle.active { animation: none; }
  .progress-ring .ring-fill { transition: none; }
  .now-batting-card.playing { animation: none; }
  .on-deck-card { animation: none; }
  .batter-card.rotating-out { animation: none; }
  .modal-overlay, .modal-content { animation: none; }
  body { animation: none; }
  .sparkle { animation: none; display: none; }
  .now-batting-card::before { animation: none; }
  .confetti-piece { animation: none; display: none; }
}