/* UI 017.4.17 SAFE CANARY — Cinematic Finish v6 / Final Shot Director's Cut.
   This is a presentation-only refinement of the proven v5 DOM contract.
   Battle/A6/final-hit/HP/reward ownership stays unchanged. */

html.arena-result0174-canary.arena-result0174-cine-v5-live body.arena-battle014-active #battle014-root .b173a6-terminal-stage{
  visibility:hidden!important;
}

/* Keep the accepted Premium Result prepared underneath Final Shot. During the
   final 720ms both layers crossfade at once — no opaque interstitial frame. */
html.arena-result0174-canary.arena-result0174-cine-v5-live:not(.arena-result0174-cine-v5-dissolve)
body.arena-battle014-active #battle014-root > .battle014-finished.b174-ready{
  visibility:visible!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.arena-result0174-canary.arena-result0174-cine-v5-live.arena-result0174-cine-v5-dissolve
body.arena-battle014-active #battle014-root > .battle014-finished.b174-ready{
  visibility:visible!important;
  pointer-events:auto!important;
  animation:b174V6ResultBridge .72s cubic-bezier(.18,.72,.18,1) both!important;
}

/* The old Stage-3 arrival curtain would recreate a dark gap underneath the
   crossfade. Keep the card/element cascade, but remove only that opaque curtain. */
html.arena-result0174-canary.arena-result0174-cine-v5-dissolve.arena-result0174-cine-arrival
body.arena-battle014-active #battle014-root > .battle014-finished.b174-ready::before{
  opacity:0!important;
  animation:none!important;
}

html.arena-result0174-canary body.arena-battle014-active .b174-cine-v5{
  --b174-v6-accent:#f3ca63;
  --b174-v6-accent-hi:#fff1bd;
  --b174-v6-accent-soft:rgba(238,187,76,.29);
  --b174-v6-bg:#020207;
  --b174-v6-pan:-2.2vw;
  --b174-v6-recoil:-2px;
  position:fixed;
  z-index:2147482000;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  background:var(--b174-v6-bg);
  color:#fff4d4;
  opacity:1;
}
html.arena-result0174-canary body.arena-battle014-active .b174-cine-v5.is-loss{
  --b174-v6-accent:#b85e70;
  --b174-v6-accent-hi:#edcbd1;
  --b174-v6-accent-soft:rgba(154,59,78,.27);
  --b174-v6-bg:#070206;
  --b174-v6-pan:2.2vw;
  --b174-v6-recoil:2px;
  color:#ead9dd;
}

/* Slim cinematic matte. The fighters remain the visual subject, not the bars. */
.b174-cine-v5::before,
.b174-cine-v5::after{
  content:"";
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  height:6vh;
  min-height:22px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,rgba(0,0,2,.94),rgba(0,0,2,.42),transparent);
}
.b174-cine-v5::before{top:0}
.b174-cine-v5::after{bottom:0;rotate:180deg}
.b174-cine-v5.is-live::before,
.b174-cine-v5.is-live::after{animation:b174V6BarsIn .30s ease-out both}

.b174-v5-backdrop{
  position:absolute;
  z-index:0;
  inset:0;
  opacity:0;
  background:
    radial-gradient(ellipse at 50% 43%,rgba(80,41,99,.15) 0 22%,rgba(17,9,26,.36) 52%,rgba(2,2,6,.96) 100%),
    linear-gradient(180deg,#07040d 0,#020207 64%,#000 100%);
}
.b174-cine-v5.is-live .b174-v5-backdrop{animation:b174V6BackdropIn .28s ease-out both}

/* Full-viewport camera stage. There is no visible card frame. */
.b174-v5-stage-shell{
  position:absolute;
  z-index:3;
  inset:0;
  overflow:hidden;
  opacity:0;
  transform:translate3d(0,0,0);
  transform-origin:50% 50%;
}
.b174-cine-v5.is-live .b174-v5-stage-shell{animation:b174V6StageIn .20s ease-out both}

/* V6 moves from the 1.42x v5 shot to a 1.72x final crop. On an iPhone this
   makes the two fighters occupy the frame instead of floating inside empty UI. */
.b174-v5-scene.b14-scene{
  position:absolute!important;
  left:50%!important;
  top:45%!important;
  width:min(100vw,720px)!important;
  height:385px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform-origin:50% 48%!important;
  transform:translate(-50%,-50%) scale(1.24)!important;
  filter:brightness(.97) saturate(.94) contrast(1.03)!important;
  transition:
    transform .62s cubic-bezier(.12,.80,.16,1),
    filter .50s ease-out!important;
}
.b174-v5-scene.b14-scene::before{display:none!important}
.b174-v5-scene.b14-scene::after{opacity:.13!important}
.b174-v5-scene *,
.b174-v5-scene *::before,
.b174-v5-scene *::after{animation-play-state:paused!important}

/* HP remains readable just long enough to confirm zero, then cleanly leaves the
   film frame before the verdict appears. */
.b174-v5-scene .b14-health{
  transition:opacity .25s ease-out,transform .28s ease-out,filter .28s ease-out!important;
}
.b174-v5-scene .b14-fighter{
  transition:opacity .46s ease-out,filter .46s ease-out!important;
}

.b174-cine-v5.is-focus .b174-v5-scene{
  transform:translate(calc(-50% + var(--b174-v6-pan)),-50%) scale(1.72)!important;
  filter:brightness(.84) saturate(.82) contrast(1.08)!important;
}
.b174-cine-v5.is-focus .b174-v5-scene .b14-health{
  opacity:0!important;
  transform:translateY(-9px) scale(.965)!important;
  filter:blur(1.2px)!important;
}

/* The defeated fighter still reads as a character, not a black silhouette. */
.b174-v5-scene .b174-v5-loser img{
  transition:opacity .46s ease-out,filter .46s ease-out!important;
}
.b174-v5-scene .b174-v5-winner img{
  transition:filter .46s ease-out!important;
}
.b174-cine-v5.is-focus .b174-v5-scene .b174-v5-loser img{
  opacity:.84!important;
  filter:
    brightness(.73) saturate(.62) contrast(1.06)
    drop-shadow(0 18px 13px rgba(0,0,0,.92))!important;
}
.b174-cine-v5.is-focus .b174-v5-scene .b174-v5-winner img{
  filter:
    brightness(1.10) saturate(1.03)
    drop-shadow(0 18px 13px rgba(0,0,0,.92))
    drop-shadow(0 0 12px var(--b174-v6-accent-soft))!important;
}

/* Local death-confirmation strike — short and directional, never a giant ring. */
.b174-v5-slash,
.b174-v5-bloom{
  position:absolute;
  z-index:9;
  left:var(--b174-v5-impact-x,72%);
  top:var(--b174-v5-impact-y,49%);
  translate:-50% -50%;
  pointer-events:none;
  opacity:0;
}
.b174-v5-slash{
  width:152px;
  height:2px;
  rotate:-13deg;
  scale:.06 1;
  background:linear-gradient(90deg,transparent 0,var(--b174-v6-accent-hi) 44%,#fff 50%,var(--b174-v6-accent) 57%,transparent 100%);
  box-shadow:0 0 9px var(--b174-v6-accent),0 0 20px var(--b174-v6-accent-soft);
}
.b174-cine-v5.is-loss .b174-v5-slash{rotate:13deg}
.b174-v5-bloom{
  width:116px;
  height:116px;
  border-radius:50%;
  background:radial-gradient(circle,var(--b174-v6-accent-soft) 0 7%,rgba(255,255,255,.03) 28%,transparent 69%);
  filter:blur(5px);
}
.b174-cine-v5.is-focus .b174-v5-slash{animation:b174V6Slash .32s .01s cubic-bezier(.12,.82,.16,1) both}
.b174-cine-v5.is-focus .b174-v5-bloom{animation:b174V6Bloom .58s ease-out both}

.b174-v5-sparks{
  position:absolute;
  z-index:10;
  left:var(--b174-v5-impact-x,72%);
  top:var(--b174-v5-impact-y,49%);
  width:1px;
  height:1px;
  pointer-events:none;
}
.b174-v5-sparks i{
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:8px;
  border-radius:2px;
  opacity:0;
  background:linear-gradient(180deg,var(--b174-v6-accent-hi),transparent);
  box-shadow:0 0 5px var(--b174-v6-accent-soft);
  transform-origin:50% 100%;
}
.b174-cine-v5.is-focus .b174-v5-sparks i{animation:b174V6Spark .50s ease-out both}
.b174-v5-sparks i:nth-child(1){--dx:-29px;--dy:-32px;--rot:-42deg;animation-delay:.01s!important}
.b174-v5-sparks i:nth-child(2){--dx:-9px;--dy:-43px;--rot:-15deg;animation-delay:.04s!important}
.b174-v5-sparks i:nth-child(3){--dx:12px;--dy:-42px;--rot:18deg;animation-delay:.00s!important}
.b174-v5-sparks i:nth-child(4){--dx:30px;--dy:-29px;--rot:43deg;animation-delay:.03s!important}
.b174-v5-sparks i:nth-child(5){--dx:35px;--dy:-11px;--rot:65deg;animation-delay:.06s!important}

/* Verdict is lifted into the lower-middle third of the viewport. */
.b174-v5-flash{
  position:absolute;
  z-index:13;
  left:50%;
  top:66.5%;
  width:min(82vw,590px);
  height:2px;
  translate:-50% -50%;
  scale:.03 1;
  opacity:0;
  background:linear-gradient(90deg,transparent 0,var(--b174-v6-accent-soft) 22%,var(--b174-v6-accent-hi) 50%,var(--b174-v6-accent-soft) 78%,transparent 100%);
  box-shadow:0 0 9px var(--b174-v6-accent-soft),0 0 22px color-mix(in srgb,var(--b174-v6-accent) 20%,transparent);
}
.b174-cine-v5.is-title .b174-v5-flash{animation:b174V6Flash .40s ease-out both}

.b174-v5-title{
  position:absolute;
  z-index:14;
  left:50%;
  top:66.5%;
  width:min(95vw,690px);
  translate:-50% -50%;
  text-align:center;
  opacity:0;
  pointer-events:none;
}
.b174-v5-title small{
  display:block;
  margin-bottom:9px;
  color:rgba(239,226,201,.80);
  font:700 clamp(9px,2.4vw,12px)/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.b174-v5-title-row{
  display:grid;
  grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);
  align-items:center;
  gap:13px;
}
.b174-v5-title-line{
  display:block;
  height:1px;
  opacity:.74;
  background:linear-gradient(90deg,transparent,var(--b174-v6-accent));
}
.b174-v5-title-line:last-child{scale:-1 1}
.b174-v5-title strong{
  display:block;
  color:var(--b174-v6-accent-hi);
  font:700 clamp(46px,14vw,82px)/.93 Georgia,"Times New Roman",serif;
  letter-spacing:.01em;
  text-shadow:
    0 3px 0 rgba(67,35,9,.76),
    0 0 16px var(--b174-v6-accent-soft),
    0 16px 38px rgba(0,0,0,.72);
}
.b174-cine-v5.is-loss .b174-v5-title strong{
  text-shadow:0 3px 0 rgba(52,18,25,.74),0 0 15px var(--b174-v6-accent-soft),0 16px 38px rgba(0,0,0,.75);
}
.b174-cine-v5.is-title .b174-v5-title{animation:b174V6TitleIn .56s .015s cubic-bezier(.10,.84,.15,1) both}

/* Micro camera recoil makes the title feel attached to the finishing impact. */
.b174-cine-v5.is-title .b174-v5-stage-shell{
  animation:b174V6StageRecoil .22s cubic-bezier(.12,.78,.16,1) both;
}

/* The legacy dissolve node is intentionally neutral in v6. The whole cinematic
   layer itself fades out while Premium Result fades in underneath. */
.b174-v5-dissolve{display:none!important}
.b174-cine-v5.is-dissolving{
  animation:b174V6CinematicOut .72s cubic-bezier(.22,.66,.18,1) both!important;
}
.b174-cine-v5.is-dissolving .b174-v5-stage-shell{
  animation:b174V6SceneOut .72s cubic-bezier(.18,.72,.18,1) both!important;
}
.b174-cine-v5.is-dissolving .b174-v5-title{
  animation:b174V6TitleOut .50s ease-in both!important;
}
.b174-cine-v5.is-dissolving .b174-v5-backdrop{
  animation:b174V6BackdropOut .72s ease-in both!important;
}
.b174-cine-v5.is-dissolving::before,
.b174-cine-v5.is-dissolving::after{animation:b174V6BarsOut .52s ease-in both!important}

@keyframes b174V6BarsIn{from{opacity:0;transform:scaleY(.50)}to{opacity:1;transform:scaleY(1)}}
@keyframes b174V6BarsOut{from{opacity:1}to{opacity:0}}
@keyframes b174V6BackdropIn{from{opacity:0}to{opacity:1}}
@keyframes b174V6BackdropOut{from{opacity:1}to{opacity:0}}
@keyframes b174V6StageIn{from{opacity:0;filter:brightness(.92)}to{opacity:1;filter:brightness(1)}}
@keyframes b174V6Slash{
  0%{opacity:0;scale:.06 1;filter:brightness(1.7)}
  20%{opacity:1;scale:.68 1;filter:brightness(1.36)}
  55%{opacity:.82;scale:1.04 1;filter:brightness(1.08)}
  100%{opacity:0;scale:1.12 1;filter:brightness(1)}
}
@keyframes b174V6Bloom{0%{opacity:0;scale:.46}26%{opacity:.68;scale:.84}100%{opacity:0;scale:1.30}}
@keyframes b174V6Spark{
  0%{opacity:0;transform:translate(0,0) rotate(var(--rot)) scaleY(.5)}
  17%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scaleY(1.12)}
}
@keyframes b174V6Flash{
  0%{opacity:0;scale:.03 1;filter:brightness(1.5)}
  20%{opacity:1;scale:.56 1;filter:brightness(1.28)}
  50%{opacity:.82;scale:1.02 1;filter:brightness(1.05)}
  100%{opacity:0;scale:1.08 1;filter:brightness(1)}
}
@keyframes b174V6TitleIn{
  0%{opacity:0;transform:translateY(12px) scale(.91);filter:blur(4px) brightness(1.45)}
  32%{opacity:1;transform:translateY(-3px) scale(1.035);filter:blur(0) brightness(1.13)}
  58%{opacity:1;transform:translateY(1px) scale(.994);filter:blur(0) brightness(1.04)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0) brightness(1)}
}
@keyframes b174V6StageRecoil{
  0%{opacity:1;transform:translate3d(0,0,0)}
  24%{opacity:1;transform:translate3d(var(--b174-v6-recoil),1px,0)}
  52%{opacity:1;transform:translate3d(calc(var(--b174-v6-recoil) * -.45),-1px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes b174V6SceneOut{
  0%{opacity:1;filter:blur(0) brightness(1)}
  55%{opacity:.52;filter:blur(3px) brightness(.76)}
  100%{opacity:0;filter:blur(8px) brightness(.56);transform:scale(1.018)}
}
@keyframes b174V6TitleOut{
  0%{opacity:1;filter:blur(0)}
  60%{opacity:.52;filter:blur(1.5px)}
  100%{opacity:0;filter:blur(4px)}
}
@keyframes b174V6CinematicOut{from{opacity:1}to{opacity:0}}
@keyframes b174V6ResultBridge{
  0%{opacity:0;transform:translateY(5px) scale(.994);filter:blur(3px) brightness(.82)}
  42%{opacity:.70;transform:translateY(1px) scale(.998);filter:blur(1px) brightness(.96)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0) brightness(1)}
}

@media(max-height:720px){
  .b174-v5-scene.b14-scene{top:43%!important}
  .b174-cine-v5.is-focus .b174-v5-scene{transform:translate(calc(-50% + var(--b174-v6-pan)),-50%) scale(1.62)!important}
  .b174-v5-title,.b174-v5-flash{top:68.5%}
}

@media(prefers-reduced-motion:reduce){
  .b174-v5-scene.b14-scene{
    transform:translate(-50%,-50%) scale(1.30)!important;
    transition:filter .38s ease-out!important;
  }
  .b174-cine-v5.is-focus .b174-v5-scene{
    transform:translate(-50%,-50%) scale(1.46)!important;
  }
  .b174-cine-v5.is-title .b174-v5-stage-shell{animation:none!important;opacity:1!important}
  .b174-cine-v5.is-title .b174-v5-title{animation:b174V6ReducedTitle .40s ease-out both}
}
@keyframes b174V6ReducedTitle{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}