/* ==========================================================================
   TIER LOOK — the battle arena changes with the difficulty tier. Extreme
   (tiers 6-10) turns the field ember-lit: a warm wash over the world art, a
   dark red vignette that breathes, embers rising off the ground, a glowing
   frame, an ember foe bar and a flame beside the stage label. applyTierLook()
   in js/17-stars.js sets .tl-ext on the arena (and builds the embers); this
   file is only the look. Normal and Hard keep the plain arena. Pure CSS, no
   raster art. Nightmare (tier 11 and up) gets its own look later.
   ========================================================================== */
.tierfx{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden}
.arena.tl-ext .tierfx{display:block}
.tierfx>i{position:absolute;display:block;pointer-events:none;z-index:1}

/* a warm wash over everything below it, hottest at the ground */
.tfWash{inset:0;background:linear-gradient(0deg,#ff4a08 0%,#ff7a1a 38%,#ffb347 100%);mix-blend-mode:soft-light;opacity:.62}
/* a glow where the fighters stand, and a dark red edge that breathes */
.tfVig{inset:0;background:
  radial-gradient(ellipse 85% 34% at 50% 96%,rgba(255,106,26,.42),transparent 72%),
  radial-gradient(ellipse 120% 95% at 50% 46%,transparent 54%,rgba(74,8,0,.62) 100%);
  animation:tlBreathe 4.6s ease-in-out infinite}
/* the frame: a thin ember line with a glow just inside it */
.tfFrame{inset:0;z-index:2;box-shadow:inset 0 0 0 2px rgba(255,138,43,.88),inset 0 0 16px 2px rgba(255,90,26,.55),inset 0 -22px 26px -14px rgba(255,74,8,.5)}

/* embers: applyTierLook() puts in a fixed set of <i>, each with its own --x
   (across), --s (size), --t (seconds to rise), --d (delay) and --r (how far
   up it climbs, in px) */
.tfEmbers{inset:0}
.tfEmbers>i{position:absolute;left:var(--x);bottom:6%;width:var(--s);height:var(--s);border-radius:50%;
  background:#ffd089;box-shadow:0 0 7px 2px #ff6a1a;
  animation:tlRise var(--t) linear var(--d) infinite}

/* the HUD: an ember foe bar, ember lettering on the label, and a flame either
   side of the stage number (the label itself runs under the idle-reward button) */
.arena.tl-ext .hpseg.foe>i{background:linear-gradient(180deg,#ffc069,#e8480f);box-shadow:0 0 8px rgba(255,122,34,.75)}
.arena.tl-ext .stagemid span{color:#ffb066;text-shadow:0 0 8px #ff5a1a,0 1px 4px #2a0a02}
.arena.tl-ext .stagemid b::before,.arena.tl-ext .stagemid b::after{content:"";display:inline-block;width:.78em;height:.78em;vertical-align:-.06em;
  background:var(--tlFlame) center/contain no-repeat;filter:drop-shadow(0 0 4px #ff6a1a)}
.arena.tl-ext .stagemid b::before{margin-right:.2em}
.arena.tl-ext .stagemid b::after{margin-left:.2em}
:root{
  --tlFlame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd25a'/%3E%3Cstop offset='.55' stop-color='%23ff7a1a'/%3E%3Cstop offset='1' stop-color='%23d8300a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12.6 1.5C13.2 6 19 8.6 19 14.8A7 7 0 0 1 5 14.8C5 12.2 6.2 10.3 7.8 8.7C8.2 10.4 9 11.2 10 11.6C9.4 7.6 10.8 4 12.6 1.5Z' fill='url(%23o)' stroke='%23601504' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M12 12.5C12.4 15 15 15.8 15 18.2A3 3 0 0 1 9 18.2C9 16.6 10.9 15.6 12 12.5Z' fill='%23fff0b0'/%3E%3C/svg%3E")}

@keyframes tlBreathe{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes tlRise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}65%{opacity:.85}100%{transform:translate(14px,calc(var(--r) * -1px));opacity:0}}
/* reduced motion: the same look, standing still */
@media (prefers-reduced-motion:reduce){.tfVig,.tfEmbers>i{animation:none!important}.tfEmbers>i{opacity:.8;transform:translateY(calc(var(--r) * -.5px))}}