/* © 2026 Ruan Fernando Honorato · HONOTEC. Todos os direitos reservados. AURA MAX: proibido copiar, redistribuir ou modificar sem autorização (LICENSE.txt). */
/* neon23 super cut-in (#v_cutin in index.html; js/arena/ui.js ui.cutin/cutinTick, driven per frame by match.js).
   Style B's band and slam, style C "Aura Neon" lettering: a BLACK band with razor edges and a thin wash in the caster's
   palette, a tag chip, the move name with a black fill, a neon stroke and a two-colour offset shadow (A/B: the caster's
   own hues, never an RGB split). The name's fill stays BLACK at any size: paint-order draws the stroke first (twice the
   width, half of it hidden under the fill), so a phone's thin Teko glyphs keep a black core inside a clean palette outline
   instead of turning palette-coloured. Only transform/opacity change per frame; no blur shadows (phones). --ca/--cb = palette
   A/B (sRGB hex), --car/--cbr = the same as "r, g, b". Two placements: low across the hero's knees under the cut-in's
   camera shot (default), high and smaller over live play (.ci-high: online, groups, the victim's screen, Tremor off). */
.arena #v_cutin{position:absolute;inset:0;overflow:hidden;pointer-events:none;--ca:#ffcf6b;--cb:#ffe9b0;--car:255,207,107;--cbr:255,233,176;--y:70%;--bh:92px}
.arena #v_cutin[hidden]{display:none}
.arena #v_cutin .ci-band,.arena #v_cutin .ci-line,.arena #v_cutin .ci-txt{position:absolute;will-change:transform,opacity}
/* (the band and its line skew about the name's left end, ~6% of the width: they sit on --y right under the name) */
.arena #v_cutin .ci-band{left:-12%;right:-12%;top:var(--y);height:var(--bh);margin-top:calc(var(--bh) * -.5);transform-origin:15% 50%;transform:skewY(-6deg);
  background:linear-gradient(180deg,rgba(var(--car),.5) 0,rgba(var(--car),.14) 24%,rgba(4,5,10,0) 52%,rgba(var(--cbr),.16) 100%),rgba(4,5,10,.86);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
/* the razor edges: palette A on top, B underneath */
.arena #v_cutin .ci-band::before,.arena #v_cutin .ci-band::after{content:'';position:absolute;left:0;right:0;height:3px}
.arena #v_cutin .ci-band::before{top:0;background:var(--ca)}
.arena #v_cutin .ci-band::after{bottom:0;height:2px;background:var(--cb)}
/* a thin second line under the band, crossing the other way */
.arena #v_cutin .ci-line{left:-12%;right:-12%;top:var(--y);height:4px;margin-top:calc(var(--bh) * .5 + 9px);transform-origin:15% 50%;transform:skewY(-6deg);
  background:linear-gradient(90deg,transparent 0,var(--cb) 18%,var(--ca) 70%,transparent 100%)}
/* (the name block is centred on --y by its own height: one or two lines) */
.arena #v_cutin .ci-txt{left:calc(env(safe-area-inset-left,0px) + 6%);top:var(--y);transform-origin:0 50%;transform:skewY(-6deg);max-width:88vw;translate:0 -54%}
.arena #v_cutin .ci-tag{display:inline-block;font:600 20px/1 'Teko',var(--f-ui);letter-spacing:.34em;text-transform:uppercase;color:#05060a;background:var(--ca);
  padding:4px 16px 1px 10px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.arena #v_cutin .ci-tag[hidden]{display:none}
.arena #v_cutin .ci-nm{display:block;margin-top:4px;font:italic 700 clamp(40px,6.4vw,84px)/.86 'Teko',var(--f-ui);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  color:#05060a;-webkit-text-stroke:4px var(--ca);paint-order:stroke fill;text-shadow:4px 3px 0 var(--cb),7px 6px 0 rgba(0,0,0,.8)}
/* high: above the fighters' heads, a shorter band (its rising end stops short of the rival's life bar) and a smaller name */
.arena #v_cutin.ci-high{--y:28%;--bh:70px}
.arena #v_cutin.ci-high .ci-band,.arena #v_cutin.ci-high .ci-line{right:30%;transform-origin:20% 50%}
.arena #v_cutin.ci-high .ci-tag{font-size:16px}
.arena #v_cutin.ci-high .ci-nm{font-size:clamp(30px,4.4vw,58px);-webkit-text-stroke:3px var(--ca);text-shadow:3px 3px 0 var(--cb),5px 5px 0 rgba(0,0,0,.8)}
/* reduced motion: no slide or stretch, the whole layer fades (ui.js sets its opacity) */
.arena #v_cutin.ci-still .ci-band,.arena #v_cutin.ci-still .ci-line,.arena #v_cutin.ci-still .ci-txt{transform:skewY(-6deg)!important;will-change:auto}
/* phones in landscape: a slimmer band; low = under the fighters' knees (the thumb buttons stay on top of it) */
@media (pointer:coarse) and (orientation:landscape){
  .arena #v_cutin{--y:66%;--bh:70px}
  .arena #v_cutin .ci-tag{font-size:15px;letter-spacing:.3em}
  .arena #v_cutin .ci-nm{font-size:clamp(28px,5vw,48px);-webkit-text-stroke:3px var(--ca);text-shadow:3px 3px 0 var(--cb),5px 5px 0 rgba(0,0,0,.85)}
  .arena #v_cutin.ci-high{--y:36%;--bh:56px}
  .arena #v_cutin.ci-high .ci-tag{font-size:13px}
  .arena #v_cutin.ci-high .ci-nm{font-size:clamp(24px,4vw,38px)}
}
/* portrait: low = 64% (across the feet, above the thumb buttons), high = 22%; the name may wrap inside 86vw */
@media (max-aspect-ratio:1/1){
  .arena #v_cutin{--y:64%;--bh:100px}
  .arena #v_cutin .ci-txt{left:calc(env(safe-area-inset-left,0px) + 5%);max-width:86vw}
  .arena #v_cutin .ci-tag{font-size:15px;letter-spacing:.3em}
  .arena #v_cutin .ci-nm{font-size:34px;line-height:.9;white-space:normal;max-width:86vw;-webkit-text-stroke:3px var(--ca);text-shadow:3px 3px 0 var(--cb),5px 5px 0 rgba(0,0,0,.85)}
  .arena #v_cutin.ci-high{--y:22%;--bh:92px}
  .arena #v_cutin.ci-high .ci-band,.arena #v_cutin.ci-high .ci-line{right:-12%;transform-origin:15% 50%}
  .arena #v_cutin.ci-high .ci-tag{font-size:14px}
  .arena #v_cutin.ci-high .ci-nm{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.arena #v_cutin .ci-band,.arena #v_cutin .ci-line,.arena #v_cutin .ci-txt{will-change:auto}}