/* =====================================================================
   The Champion level-up (src/arena/levelup.mjs; designed in mock/champion-levelup.html).
   The Champion never leaves its slot. It lifts and glows as its meter fills; a gold seam draws across the screen from
   above it and opens into a letterboxed splash of its level-2 art and name; the splash closes back down onto it, and
   the card flips to level 2 where it stands. The board stays in view above and below the splash.
   The splash plays the first time this player sees each Champion level up; after that, the in-place part only.
   It sits over the board's fx layer (9000) and under the particle canvas (9550).
   ===================================================================== */
.lu{position:fixed;inset:0;z-index:9500;cursor:pointer;font-family:var(--cond);color:#fff;--bh:clamp(220px,34vh,360px);--spd:1}
/* The board dims, except around the Champion. */
.lu-scrim{position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse var(--hw,120px) var(--hh,160px) at var(--hx,50%) var(--hy,75%),transparent 55%,rgba(3,5,7,.62) 100%)}
.lu-band{position:absolute;left:0;right:0;top:47%;height:var(--bh);translate:0 -50%}
.lu--slash .lu-band{left:-15vw;right:-15vw;rotate:-4deg}
.lu-fill{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,36px);clip-path:inset(50% 0 50% 0)}
.lu--opp .lu-fill{flex-direction:row-reverse}
/* Behind everything: the same painting, blurred and darkened, so the band reads as one wide image. */
.lu-bg{position:absolute;inset:-40px;background:center 18%/cover no-repeat;filter:blur(22px) brightness(.42) saturate(1.15)}
.lu-tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,8,.9) 0,rgba(4,6,8,.62) 32%,color-mix(in srgb,var(--fc) 22%,rgba(4,6,8,.25)) 62%,rgba(4,6,8,.55) 100%)}
.lu--opp .lu-tint{scale:-1 1}
/* The painting itself, cropped to the Champion's face, feathered into the band at both sides. */
.lu-art{position:relative;order:2;flex:none;width:min(46vw,780px);height:100%;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.lu-art img{display:block;width:100%;height:100%;object-fit:cover}
.lu-text{position:relative;order:1;flex:none;width:min(30vw,460px);display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.lu--opp .lu-text{align-items:flex-end;text-align:right}
.lu-text>*{opacity:0}
.lu.is-open .lu-text>*{animation:luIn calc(.42s / var(--spd)) cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--i) * 80ms / var(--spd))}
.lu--opp.is-open .lu-text>*{animation-name:luInR}
@keyframes luIn{from{opacity:0;translate:-24px 0}to{opacity:1;translate:0 0}}
@keyframes luInR{from{opacity:0;translate:24px 0}to{opacity:1;translate:0 0}}
/* Two stars (level 2), the second lighting as the name lands; the same star as the Champion's crest on the board. */
.lu-kicker{display:flex;align-items:center;gap:9px;font:700 clamp(12px,1.1vw,15px)/1 var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--gold1);text-shadow:0 1px 3px #000}
.lu-kicker em{padding:4px 7px 3px;border-radius:3px;background:rgba(170,34,24,.9);font-style:normal;font-size:.82em;letter-spacing:.18em;color:#fff}
.lu-stars{display:flex;gap:2px}
.lu-stars i{display:block;width:1.3em;height:1.3em;color:var(--gold1);filter:drop-shadow(0 0 4px rgba(255,200,110,.8))}
.lu-stars svg{display:block;width:100%;height:100%}
.lu-stars .lu-star2{opacity:.22;filter:none}
.lu-name{font:700 clamp(44px,6.2vw,104px)/.9 var(--cond);letter-spacing:.02em;text-transform:uppercase;color:#fff;
  -webkit-text-stroke:.03em #0d0703;paint-order:stroke fill;text-shadow:0 .05em 0 #0d0703,0 0 .5em color-mix(in srgb,var(--ft) 40%,transparent)}
.lu-epithet{font:600 clamp(13px,1.3vw,18px)/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:#f0e2bf;text-shadow:0 1px 3px #000}
/* One quiet line: the new stats, any new keywords, and what it now does. */
.lu-line{margin-top:9px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;max-width:100%;font:500 clamp(13px,1.15vw,16px)/1.3 var(--cond);color:#dcd2bb;text-shadow:0 1px 2px #000}
.lu--opp .lu-line{justify-content:flex-end}
.lu-line b{color:#fff;font-weight:700}
.lu-line .lu-tag{color:var(--gold1)}
.lu-stat{padding:2px 9px;border-radius:999px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(251,231,176,.35);letter-spacing:.06em}
.lu-stat i{margin:0 3px;font-style:normal;color:var(--gold2)}
.lu-dot{font-style:normal;color:var(--gold2)}
/* The voice line, as it's spoken. */
.lu-quote{max-width:100%;font:italic 500 clamp(14px,1.3vw,19px)/1.3 var(--cond);color:#fff4dc;text-shadow:0 1px 3px #000}
.lu-quote::before{content:"\201C"}.lu-quote::after{content:"\201D"}
/* One faint pass of light across the band once it has opened. */
.lu-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.13) 50%,transparent 60%) 0 0/250% 100% no-repeat}
/* The gold seams: one line drawn out from above the Champion, splitting into the band's top and bottom edges. */
.lu-seam{position:absolute;left:0;right:0;display:block;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--gold3) 10%,var(--gold1) 50%,var(--gold3) 90%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--ft) 80%,transparent),0 0 2px #fff8e0}
.lu-seam--top{top:-1px}.lu-seam--bot{bottom:-1px}
/* Just under the band, clear of the hand. */
.lu-hint{position:absolute;left:50%;top:calc(47% + var(--bh) / 2 + 14px);translate:-50% 0;font:600 12px/1 var(--cond);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.6);text-shadow:0 1px 3px #000;opacity:0;transition:opacity .4s}
.lu.is-hint .lu-hint{opacity:1}
/* Reduced motion: the splash fades in whole and out again; nothing slides, drifts or flips. */
.lu.is-still .lu-fill{clip-path:none}
.lu.is-still .lu-seam{opacity:1}
.lu.is-still .lu-text>*{opacity:1;animation:none}
.lu.is-still .lu-stars .lu-star2{opacity:1;filter:drop-shadow(0 0 4px rgba(255,200,110,.8))}
@media (max-width:760px){
  .lu{--bh:clamp(210px,36vh,300px)}
  .lu-art{position:absolute;inset:0;width:auto;-webkit-mask:none;mask:none}
  .lu-tint,.lu--opp .lu-tint{scale:1;background:linear-gradient(0deg,rgba(4,6,8,.96) 0,rgba(4,6,8,.78) 38%,rgba(4,6,8,.3) 62%,transparent 82%)}
  .lu-text{position:absolute;left:18px;right:18px;bottom:16px;width:auto;gap:5px}
  .lu-name{font-size:clamp(34px,11vw,54px)}
}
/* Phones held sideways: a shorter band and name, so the board still shows above and below. */
@media (max-height:500px) and (orientation:landscape){
  .lu{--bh:clamp(140px,44vh,200px)}
  .lu-name{font-size:clamp(30px,9vh,48px)}
  .lu-line{display:none}
}