/* Connection Studio — Winner Team Takeover.
   Full-page celebratory reskin of leaderboard.html for whichever Team
   Battles team is currently leading this week's XP race. Paired with
   assets/takeover.js, which decides WHICH team (if any) is winning and
   toggles the `body.theme-{fire,water,earth,wind}` class this file keys
   off of — see that file's own top comment for the "live leader, not a
   frozen weekly winner" rule and the "animate only on change" rule.

   Layout pieces, each namespaced cs-takeover-*:
   - a dismissible banner injected at the top of <main>
   - a large, faded crest watermark fixed in the bottom-right corner
   - a themed leaderboard table header (color only, via CSS vars)
   - a highlighted winning row in the Team Battles side-card
   - a field of ~14 small ambient particles per theme (embers/waves/
     leaves/feathers) — JS only randomizes each particle's starting
     position and animation timing inline; every bit of the actual motion
     is a plain CSS @keyframes animation defined below, nothing is driven
     by a JS timer/rAF loop. */

body.theme-fire{ --cs-primary:#D08A3C; --cs-accent:#E8B04A; --cs-bg-tint:rgba(208,138,60,0.08); }
body.theme-water{ --cs-primary:#1F6E82; --cs-accent:#5FA8BD; --cs-bg-tint:rgba(31,110,130,0.08); }
body.theme-earth{ --cs-primary:#7A5230; --cs-accent:#A97C4F; --cs-bg-tint:rgba(122,82,48,0.08); }
body.theme-wind{ --cs-primary:#5B8FB0; --cs-accent:#9CC2DB; --cs-bg-tint:rgba(91,143,176,0.08); }

/* Soft page-wide wash behind everything, not a flat recolor — the site's
   cards stay their normal white/dark selves on top of it, this just
   tints the margins/gaps around them. */
body[class*="theme-"]::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(ellipse at top, var(--cs-bg-tint), transparent 60%);
}

/* ---------- Banner ---------- */
.cs-takeover-banner{
  display:flex; align-items:center; gap:14px; border-radius:20px;
  padding:16px 18px; margin-bottom:20px; color:#fff; position:relative;
}
.cs-takeover-banner-icon{ width:36px; height:36px; object-fit:contain; flex-shrink:0; }
.cs-takeover-banner-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-takeover-banner-title{ font-family:'Bodoni Moda', Georgia, serif; font-weight:400; font-size:17px; line-height:1.25; }
.cs-takeover-banner-sub{ font-size:12.5px; opacity:0.85; }
.cs-takeover-banner-close{
  background:rgba(255,255,255,0.18); border:none; color:#fff; width:26px; height:26px;
  border-radius:50%; font-size:16px; line-height:1; cursor:pointer; flex-shrink:0;
}
.cs-takeover-banner-close:hover{ background:rgba(255,255,255,0.3); }
.cs-takeover-banner-fire{ background:linear-gradient(120deg,#D08A3C,#A8532E); }
.cs-takeover-banner-water{ background:linear-gradient(120deg,#1F6E82,#123E4A); }
.cs-takeover-banner-earth{ background:linear-gradient(120deg,#7A5230,#4E341F); }
.cs-takeover-banner-wind{ background:linear-gradient(120deg,#5B8FB0,#33586F); }
.cs-takeover-banner-enter{ animation:cs-banner-in 0.6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes cs-banner-in{ from{ opacity:0; transform:translateY(-14px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- Watermark ---------- */
/* 0.08 opacity (step 72) — bumped up slightly from 0.05 now that this
   shows the mascot art (TAKEOVER_CREST in takeover.js) rather than the
   old crests; the mascots read as a bit too faint at the old value. */
.cs-takeover-watermark{
  position:fixed; right:0; bottom:0; width:400px; height:400px;
  object-fit:contain; opacity:0.08; z-index:-1; pointer-events:none;
}
.cs-watermark-enter{ animation:cs-watermark-in 0.8s ease-out; }
@keyframes cs-watermark-in{ from{ opacity:0; transform:scale(0.7);} to{ opacity:0.08; transform:scale(1);} }

/* ---------- Themed table header ---------- */
body[class*="theme-"] .lb-table th{ color:var(--cs-primary); border-bottom:2px solid var(--cs-accent); }

/* ---------- Winning row highlight (Team Battles side-card) ----------
   Step 72: the side-card's rows are now the mascot race's `.racer`
   elements (leaderboard.html's #mascot-race) rather than horizontal bar
   rows, but each racer still carries this same `.house-team-row` class
   (see takeover.js's own updated top comment), so `.cs-winner`/
   `.cs-winner-enter` still land correctly with no JS changes. The old
   `.house-team-bar-fill` glow doesn't apply to a mascot image, so it's
   replaced by a crown over the leading racer's head plus a soft glow on
   the mascot art itself. */
.house-team-row.cs-winner{ position:relative; font-weight:700; }
.house-team-row.cs-winner .house-team-bar-fill{ background:var(--cs-primary) !important; box-shadow:0 0 8px var(--cs-primary); }
.racer.cs-winner .racer-img{ filter:drop-shadow(0 0 6px var(--cs-primary)); }
.racer.cs-winner::before{
  content:'👑'; position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  font-size:14px; line-height:1;
}
.house-team-row.cs-winner-enter{ animation:cs-row-pulse 1.1s ease; }
@keyframes cs-row-pulse{
  0%{ transform:scale(1); filter:brightness(1);}
  30%{ transform:scale(1.03); filter:brightness(1.4);}
  100%{ transform:scale(1); filter:brightness(1);}
}
.racer.cs-winner-enter::before{ animation:cs-crown-in 0.6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes cs-crown-in{ from{ opacity:0; transform:translateX(-50%) translateY(6px) scale(0.5);} to{ opacity:1; transform:translateX(-50%) translateY(0) scale(1);} }

/* ---------- Confetti burst (step 72) — fires once on an actual lead
   change (takeoverConfetti() in takeover.js), same trigger as the row-
   pulse/banner-slide-in/watermark-scale-up above. Pure CSS falling
   motion; JS only randomizes each piece's start position/color/timing,
   same split as the ambient particle field below. ---------- */
.cs-confetti-field{ position:fixed; inset:0; z-index:20; overflow:hidden; pointer-events:none; }
.cs-confetti-piece{
  position:absolute; top:-8%; width:8px; height:12px; opacity:0.9;
  animation-name:cs-confetti-fall; animation-timing-function:ease-in; animation-fill-mode:forwards;
}
@keyframes cs-confetti-fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:0.95;}
  100%{ transform:translateY(100vh) rotate(360deg); opacity:0;}
}

/* ---------- Ambient particle field ---------- */
.cs-takeover-particles{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.cs-particle{ position:absolute; top:-6%; will-change:transform, opacity; }

/* Fire — rising embers */
.cs-particles-fire .cs-particle{
  top:auto; bottom:-4%; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, #FFD79A, #E8843C 70%, transparent);
  box-shadow:0 0 6px 1px rgba(232,132,60,0.6);
  animation-name:cs-ember-rise; animation-iteration-count:infinite; animation-timing-function:ease-in;
}
@keyframes cs-ember-rise{
  0%{ transform:translate(0,0) scale(0.6); opacity:0;}
  10%{ opacity:0.9;} 90%{ opacity:0.35;}
  100%{ transform:translate(14px,-100vh) scale(1); opacity:0;}
}

/* Water — shimmering wave streaks */
.cs-particles-water .cs-particle{
  top:auto; bottom:0; width:120px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(160,220,235,0.6), transparent);
  animation-name:cs-wave-drift; animation-iteration-count:infinite; animation-timing-function:ease-in-out;
}
@keyframes cs-wave-drift{
  0%{ transform:translateX(-30vw) translateY(0); opacity:0;}
  15%{ opacity:0.7;} 50%{ transform:translateX(30vw) translateY(-42vh);}
  85%{ opacity:0.35;} 100%{ transform:translateX(72vw) translateY(-96vh); opacity:0;}
}

/* Earth — falling leaves */
.cs-particles-earth .cs-particle{
  width:10px; height:10px; background:var(--cs-primary, #7A5230);
  border-radius:0 60% 0 60%; opacity:0.55;
  animation-name:cs-leaf-fall; animation-iteration-count:infinite; animation-timing-function:linear;
}
@keyframes cs-leaf-fall{
  0%{ transform:translate(0,-10vh) rotate(0deg); opacity:0;}
  10%{ opacity:0.6;} 50%{ transform:translate(30px,45vh) rotate(180deg);}
  90%{ opacity:0.35;} 100%{ transform:translate(-20px,105vh) rotate(360deg); opacity:0;}
}

/* Wind — floating feathers */
.cs-particles-wind .cs-particle{
  width:14px; height:6px; background:rgba(255,255,255,0.65); border-radius:50%; opacity:0.5;
  animation-name:cs-feather-drift; animation-iteration-count:infinite; animation-timing-function:ease-in-out;
}
@keyframes cs-feather-drift{
  0%{ transform:translate(-10vw,-5vh) rotate(-10deg); opacity:0;}
  15%{ opacity:0.6;} 50%{ transform:translate(40vw,50vh) rotate(15deg);}
  85%{ opacity:0.3;} 100%{ transform:translate(90vw,105vh) rotate(-5deg); opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .cs-particle{ animation:none !important; opacity:0.12; }
  .cs-takeover-banner-enter, .house-team-row.cs-winner-enter, .cs-watermark-enter, .racer.cs-winner-enter::before{ animation:none !important; }
  .cs-confetti-piece{ animation:none !important; display:none; }
}

@media (max-width:480px){
  .cs-takeover-watermark{ width:220px; height:220px; }
}