/* ==========================================================
   EASTER THEME
   - Overrides tokens + adds light, springy vibe.
   - Keep most layout in base.css.
   ========================================================== */

:root {
  /* Palette */
  --bg: #f7fbff;                 /* very light blue-white */
  --surface: rgba(255,255,255,.92);
  --text: #122033;
  --muted: rgba(18,32,51,.65);
  --border: rgba(18,32,51,.12);

  /* Easter primary (soft sky) */
  --primary: #6cc6ff;
  --primary-hover: #46b7ff;

  /* Softer corners */
  --radius: 18px;

  /* Slightly softer shadows */
  --shadow: 0 16px 35px rgba(18, 32, 51, 0.10);

  /* Chips look a bit “candy” */
  --chip-bg: rgba(255,255,255,.65);
}

/* --- Background vibe (no assets required) --- */
/* Two layers: gentle gradient + faint eggy dots */
body {
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 196, 223, 0.35), transparent 40%),
    radial-gradient(circle at 80% 15%, rgba(180, 235, 255, 0.45), transparent 45%),
    radial-gradient(circle at 30% 90%, rgba(200, 255, 212, 0.35), transparent 40%),
    linear-gradient(180deg, #f7fbff 0%, #f9f7ff 55%, #fff7fb 100%);
}

/* Optional: a tiny bit more “lift” on key surfaces */
.card,
.tv-clue,
.tv-qr,
.tv-side-card,
.tv-codebox,
.topbar {
  backdrop-filter: blur(6px);
}

/* Buttons a bit more playful */
.btn.primary {
  box-shadow: 0 10px 20px rgba(108, 198, 255, 0.28);
}

.btn.primary:hover {
  box-shadow: 0 14px 26px rgba(108, 198, 255, 0.35);
}

/* Subnav active feels more “spring” */
.subnav-link.active {
  border-color: var(--primary);
  color: #1b6fb2;
}

/* --- TV tweaks: slightly bigger + calmer --- */
.tv-title {
  letter-spacing: -0.03em;
}

/* Easter “sparkle” animation on status (subtle) */
@keyframes easterGlow {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

.tv-status {
  animation: easterGlow 2.2s ease-in-out infinite;
}

/* Optional: soften the leaderboard rows */
.tv-side-row {
  background: rgba(255,255,255,.55);
}

/* Easter clue highlight */
.tv-clue{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,196,223,.35), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(200,255,212,.28), transparent 45%),
    var(--surface);
}

/* Subtle egg dots over the stage */
.tv-stage{
  background:
    radial-gradient(circle, rgba(255,255,255,.28) 20%, transparent 22%) 0 0/38px 38px,
    radial-gradient(circle at 20% 20%, rgba(108,198,255,.22), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(255,196,223,.20), transparent 40%),
    radial-gradient(circle at 40% 85%, rgba(200,255,212,.18), transparent 40%),
    linear-gradient(180deg, #f7fbff 0%, #f9f7ff 55%, #fff7fb 100%);
  opacity: 1;
}

/* Full-screen wrapper already exists: .fx-layer */

.fx-bunny-hop{
  position:absolute;
  inset:0;
}

/* Track moves left->right; bunny inside does the hops */
.fx-bunny-track{
  position:absolute;
  left:0;
  bottom: 14vh;                 /* hop lane */
  width: 100%;
  height: 220px;
  transform: translateX(-35vw);
  animation: fxTrack var(--fxDur, 5200ms) linear forwards;
}

/* The bunny itself */
.fx-bunny{
  position:absolute;
  left:0;
  bottom:0;
  width: min(22vw, 220px);
  transform-origin: 50% 90%;
  animation: fxHop var(--fxDur, 5200ms) ease-in-out forwards;
}

/* Shadow sells the hop */
.fx-bunny-shadow{
  position:absolute;
  left: 40px;
  bottom: 10px;
  width: 120px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  filter: blur(2px);
  transform-origin: center center;
  animation: fxShadow var(--fxDur, 5200ms) ease-in-out forwards;
}

/* SVG styling */
.fx-bunny svg{ display:block; }

/* Colors via classes (easy to theme later) */
.fx-bunny .fur{ fill:#ffffff; }
.fx-bunny .fur2{ fill:#f6f6f6; }
.fx-bunny .ear{ fill:#ffffff; }
.fx-bunny .ear-inner{ fill:#ffb7c8; opacity:.95; }
.fx-bunny .eye{ fill:#2d2d2d; }
.fx-bunny .eye-shine{ fill:#ffffff; opacity:.9; }
.fx-bunny .nose{ fill:#ff7e93; }
.fx-bunny .line{ fill:none; stroke:#2d2d2d; stroke-width:3.5; stroke-linecap:round; opacity:.8; }
.fx-bunny .whisker{ fill:none; stroke:#2d2d2d; stroke-width:3; stroke-linecap:round; opacity:.35; }
.fx-bunny .tail{ fill:#f0f0f0; }

/* Ear flop (subtle) */
.fx-bunny .ear.front{
  transform-origin: 130px 30px;
  animation: fxEarFront var(--fxDur, 5200ms) ease-in-out forwards;
}
.fx-bunny .ear.back{
  transform-origin: 100px 30px;
  animation: fxEarBack var(--fxDur, 5200ms) ease-in-out forwards;
}
.fx-bunny .ear-inner.front,
.fx-bunny .ear-inner.back{
  /* inner parts should follow ear transform */
}

/* Track moves across screen */
@keyframes fxTrack{
  from { transform: translateX(-35vw); }
  to   { transform: translateX(120vw); }
}

/* Hop timing: three hops with believable arcs + slight forward lean */
@keyframes fxHop{
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  10%  { transform: translateY(-65px) rotate(-3deg) scale(1.02, .98); }
  20%  { transform: translateY(0) rotate(1deg)  scale(1.06, .92); }

  35%  { transform: translateY(-58px) rotate(-2deg) scale(1.02, .98); }
  45%  { transform: translateY(0) rotate(1deg)  scale(1.06, .92); }

  62%  { transform: translateY(-52px) rotate(-2deg) scale(1.02, .98); }
  72%  { transform: translateY(0) rotate(1deg)  scale(1.06, .92); }

  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Shadow squashes on landings and shrinks in air */
@keyframes fxShadow{
  0%   { transform: scale(1); opacity:.22; }
  10%  { transform: scale(.65); opacity:.12; }
  20%  { transform: scale(1.05, .9); opacity:.24; }

  35%  { transform: scale(.7); opacity:.13; }
  45%  { transform: scale(1.05, .9); opacity:.24; }

  62%  { transform: scale(.75); opacity:.14; }
  72%  { transform: scale(1.05, .9); opacity:.24; }

  100% { transform: scale(1); opacity:.22; }
}

/* Ears lag behind the hop (flop) */
@keyframes fxEarFront{
  0%, 20%, 45%, 72%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(10deg); }
  35% { transform: rotate(8deg); }
  62% { transform: rotate(6deg); }
}
@keyframes fxEarBack{
  0%, 20%, 45%, 72%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(7deg); }
  35% { transform: rotate(6deg); }
  62% { transform: rotate(5deg); }
}

:root{
  --tv-progress-track: rgba(255,255,255,.22);
  --tv-progress-fill: rgba(255,196,223,.95); /* pastel pink */
  --tv-progress-glow: 0 0 18px rgba(255,196,223,.35);
}

:root{
  --fx-bunny-ear-inner: #ffb7c8;
  --fx-bunny-nose: #ff7e93;
}

:root{
  /* progress */
  --tv-progress-track: rgba(255,255,255,.22);
  --tv-progress-fill: rgba(255,196,223,.95);
  --tv-progress-glow: 0 0 18px rgba(255,196,223,.35);

  /* sparkles */
  --fx-sparkle: rgba(255,196,223,.95);
  --fx-sparkle-glow: 0 0 18px rgba(255,196,223,.35);

  /* bunny (optional tweaks) */
  --fx-bunny-ear-inner: #ffb7c8;
  --fx-bunny-nose: #ff7e93;
  --fx-shadow: rgba(0,0,0,.22);
}