/* scenes.css — per-fighter accent hues + CSS-only arena venue "scenes".
   Each hue stays within the dusk palette family (navy / steel / orange / gold). */

/* ---- fighter card accent hues (distinct, tasteful, dusk-family) ---- */
.hue-mt    { --hue: #c8542a; } /* muay thai — ember red-orange */
.hue-bjj   { --hue: #3a5da8; } /* bjj — royal steel blue */
.hue-box   { --hue: #b23b34; } /* boxing — glove crimson */
.hue-wr    { --hue: #4a6ea0; } /* wrestling — singlet blue */
.hue-judo  { --hue: #7d8aa0; } /* judo — cool white-steel */
.hue-kar   { --hue: #d98a2b; } /* kyokushin — amber */
.hue-tkd   { --hue: #4f8fb0; } /* taekwondo — cyan steel */
.hue-kf    { --hue: #b8863a; } /* kung fu — bronze */
.hue-capo  { --hue: #d9a648; } /* capoeira — sunset gold */
.hue-silat { --hue: #8a6fb0; } /* silat — dusk violet */

/* ---- arena CSS scenes: layered gradients suggesting each venue's light.
   These sit UNDER the real .scene image (z-index -3) as a loading/fallback
   background, so a card is never blank while its photo streams in. ---- */
.scene-grad { position: absolute; inset: 0; z-index: -3; }

/* Rio rooftop — warm dusk over the city */
.scene-rio {
  background:
    radial-gradient(80% 50% at 70% 12%, rgba(244,140,60,0.55), transparent 60%),
    linear-gradient(to top, #1a1420 0%, #3a2740 40%, #7a4a4a 72%, #d98a3f 100%);
}
.scene-rio::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,0.25) 22px 24px);
  mask-image: linear-gradient(to top, #000 0 42%, transparent 55%);
  opacity: 0.6;
}

/* Boxing gym — hard cold overhead light on dark */
.scene-gym {
  background:
    radial-gradient(45% 30% at 50% -5%, rgba(220,230,255,0.65), transparent 65%),
    linear-gradient(to bottom, #10141f, #1b2130 60%, #0c0f16);
}

/* Wrestling field house — clean fluorescent navy */
.scene-fieldhouse {
  background:
    linear-gradient(115deg, rgba(90,140,200,0.28), transparent 55%),
    linear-gradient(to bottom, #182338, #223554 55%, #101724);
}
.scene-fieldhouse::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 40px, rgba(255,255,255,0.04) 40px 41px);
}

/* Kodokan hall — quiet warm wood + tatami */
.scene-kodokan {
  background:
    radial-gradient(70% 40% at 50% 8%, rgba(255,210,150,0.3), transparent 60%),
    linear-gradient(to bottom, #241a12, #3a2a1c 55%, #14100c);
}

/* Mountain dojo — cold blue dawn mist */
.scene-mountain {
  background:
    linear-gradient(to top, #0e141f 0%, #26364f 45%, #5b7aa0 78%, #aec3dd 100%);
}
.scene-mountain::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 45%, rgba(20,28,44,0.9) 46% 50%, transparent 51%),
    linear-gradient(-135deg, transparent 55%, rgba(20,28,44,0.85) 56% 62%, transparent 63%);
  mask-image: linear-gradient(to top, transparent 30%, #000 60%);
}

/* Seoul plaza — neon-cool night city */
.scene-seoul {
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(90,180,220,0.4), transparent 60%),
    radial-gradient(50% 40% at 80% 30%, rgba(217,90,150,0.35), transparent 60%),
    linear-gradient(to top, #0c101a, #1a2540 60%, #2b3a5e);
}

/* China temple courtyard — bronze lantern glow */
.scene-china {
  background:
    radial-gradient(50% 40% at 50% 15%, rgba(230,150,50,0.5), transparent 60%),
    linear-gradient(to bottom, #1a1410, #3a2618 50%, #120d0a);
}
.scene-china::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 30%, rgba(255,170,60,0.5) 0 4px, transparent 5px),
              radial-gradient(circle at 75% 24%, rgba(255,170,60,0.5) 0 4px, transparent 5px),
              radial-gradient(circle at 50% 40%, rgba(255,170,60,0.4) 0 3px, transparent 4px);
}

/* Salvador roda — hot sunset over the bay */
.scene-salvador {
  background:
    radial-gradient(70% 60% at 50% 90%, rgba(255,120,40,0.6), transparent 60%),
    linear-gradient(to top, #d9622a 0%, #b0405a 35%, #5a3a6a 70%, #2a2440 100%);
}

/* Indonesian kampung — humid green-gold dusk */
.scene-kampung {
  background:
    radial-gradient(60% 40% at 50% 10%, rgba(217,166,72,0.4), transparent 60%),
    linear-gradient(to bottom, #14201a, #23382a 50%, #0e1410);
}
.scene-kampung::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(120,150,90,0.25) 60%, transparent 75%);
}