/* Independent viewport layer: never changes the fitted tabletop dimensions. */
.battleVignette{position:fixed;inset:0;z-index:10000;overflow:hidden;background:rgba(8,8,13,.36);color:#f7ebd2;isolation:isolate;touch-action:manipulation;cursor:pointer;outline:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.vignettePlaying #fxLayer,.vignettePlaying #hoverTip{visibility:hidden!important}
.techniqueFocus{position:absolute;z-index:5;box-sizing:border-box;padding:20px;border:1px solid #bc9658;border-radius:14px;background:linear-gradient(145deg,#30291f,#16191b 85%);box-shadow:0 16px 55px #0008,inset 0 0 0 3px #c79b4d12;overflow:auto;transition:opacity .22s,transform .3s;transform:translateY(0);cursor:pointer}
.vignetteActor{display:flex;align-items:center;gap:10px;border-bottom:1px solid #bca77342;padding-bottom:12px;margin-bottom:13px}
.vignettePortrait{flex:0 0 40px;height:40px;background-size:cover;background-position:center 18%;border:1px solid #c5a264;border-radius:8px}
.vignetteWho{font-size:13px;line-height:1.4;color:#eed9b1;font-weight:700}
.vignetteEyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#ccb883}
.vignetteTitle{font:600 25px/1.13 Georgia,serif;color:#fff0ce;margin:8px 0 12px;text-wrap:balance}
.vignetteEffect{font-size:13px;line-height:1.5;color:#e2d6be;margin:0 0 14px}
.vignetteTargets{font-size:12px;line-height:1.45;color:#dbc59d;border-top:1px solid #bca77342;padding-top:10px}
.vignetteResults{display:grid;gap:8px;margin-top:12px;max-height:230px;overflow:auto}
.vignetteResults:empty{display:none}
.vignetteResult{border-left:2px solid #d8b574;padding:5px 0 5px 9px;display:grid;gap:4px;font-size:11px;line-height:1.35}
.vignetteResult strong{font-size:15px;font-weight:750;color:#f1d5a1}
.vignetteResult.damage{border-color:#d9968c}.vignetteResult.damage strong{color:#ffc0b5}
.vignetteResult.heal{border-color:#a0c8a5}.vignetteResult.heal strong{color:#c1efc7}
.vignetteHint{margin-top:14px;font-size:10px;letter-spacing:.03em;color:#b8ac94}
.vignetteMark{position:absolute;z-index:2;border:2px solid #c3a466;border-radius:10px;box-shadow:0 0 0 2px #18130b88,0 0 22px #e0b76b44;pointer-events:none;transition:opacity .2s,box-shadow .2s}
.vignetteMark.isActor{border-color:#ffe2a0;box-shadow:0 0 0 3px #dfba6433,0 0 30px #e0b76b66;animation:vignetteActor .35s ease-out}
.vignetteMark.isTarget{opacity:0;border-color:#b7bcd6}.vignetteMark.damage{border-color:#e8aaa1}.vignetteMark.heal{border-color:#bad7ac}
.vignetteBadge{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);padding:5px 9px;background:#181b20f5;border:1px solid currentColor;border-radius:7px;max-width:calc(100vw - 24px);width:max-content;font-size:13px;font-weight:750;line-height:1.25;text-align:center;box-shadow:0 3px 12px #0006}
.isActor .vignetteBadge{bottom:auto;top:5px;color:#ffe2a0;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.vignetteRay{position:absolute;z-index:1;height:2px;transform-origin:left center;background:linear-gradient(90deg,transparent,#e9c98fbb,transparent);opacity:0;pointer-events:none}
.vignetteRay.heal{background:linear-gradient(90deg,transparent,#bbd9aabb,transparent)}
[data-phase=target] .isTarget,[data-phase=effect] .isTarget,[data-phase=result] .isTarget{opacity:1}
[data-phase=effect] .vignetteRay{animation:vignetteStreak .95s ease-out}
[data-phase=effect] .isTarget{animation:vignettePulse .4s ease-out}
[data-phase=return] .techniqueFocus,[data-phase=return] .vignetteMark{opacity:0;transform:translateY(3px)}
@keyframes vignetteActor{from{opacity:.4;scale:.985}to{opacity:1;scale:1}}
@keyframes vignetteStreak{0%{opacity:0;clip-path:inset(0 100% 0 0)}45%{opacity:1}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes vignettePulse{50%{box-shadow:0 0 0 5px #dec49344,0 0 28px #f1d69d66}}
@media(max-width:999px){.techniqueFocus{padding:14px}.vignetteTitle{font-size:22px;margin:6px 0 8px}.vignetteEffect{font-size:12px;margin-bottom:8px}.vignetteActor{padding-bottom:8px;margin-bottom:8px}.vignettePortrait{height:30px;flex-basis:30px}.vignetteResults{max-height:130px;gap:4px}.vignetteResult strong{font-size:13px}.vignetteBadge{font-size:11px}.vignetteHint{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.battleVignette *{animation:none!important;transition:none!important}.vignetteRay{display:none}[data-phase=return] .techniqueFocus,[data-phase=return] .vignetteMark{transform:none}}


/* === FIX36 rail-fit action card === */
@media (min-width:1000px){
  .battleVignette .techniqueFocus.railCard{
    overflow:hidden!important;
    border-radius:12px!important;
  }

  .battleVignette .techniqueFocus.railCard .vignetteResults{
    max-height:none!important;
    overflow:visible!important;
  }

  .battleVignette .techniqueFocus.railCard.railCompact{
    padding:14px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteActor{
    gap:7px!important;
    padding-bottom:8px!important;
    margin-bottom:8px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignettePortrait{
    flex-basis:32px!important;
    height:32px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteWho{
    font-size:11px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteEyebrow{
    font-size:8px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteTitle{
    font-size:21px!important;
    margin:6px 0 8px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteEffect{
    font-size:11px!important;
    line-height:1.38!important;
    margin-bottom:9px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteTargets{
    font-size:10px!important;
    line-height:1.35!important;
    padding-top:7px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteResults{
    gap:5px!important;
    margin-top:8px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteResult{
    padding:3px 0 3px 7px!important;
    gap:2px!important;
    font-size:9.5px!important;
    line-height:1.28!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteResult strong{
    font-size:12.5px!important;
  }
  .battleVignette .techniqueFocus.railCard.railCompact .vignetteHint{
    margin-top:8px!important;
    font-size:8.5px!important;
  }

  .battleVignette .techniqueFocus.railCard.railDense{
    padding:10px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignetteActor{
    padding-bottom:6px!important;
    margin-bottom:6px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignettePortrait{
    flex-basis:28px!important;
    height:28px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignetteWho{font-size:10px!important}
  .battleVignette .techniqueFocus.railCard.railDense .vignetteEyebrow{font-size:7px!important}
  .battleVignette .techniqueFocus.railCard.railDense .vignetteTitle{
    font-size:18px!important;
    margin:4px 0 6px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignetteEffect{
    font-size:10px!important;
    line-height:1.3!important;
    margin-bottom:6px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignetteTargets{
    font-size:9px!important;
    padding-top:5px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignetteResults{
    gap:3px!important;
    margin-top:5px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignetteResult{
    padding:2px 0 2px 6px!important;
    font-size:8.5px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignetteResult strong{
    font-size:11px!important;
  }
  .battleVignette .techniqueFocus.railCard.railDense .vignetteHint{
    margin-top:5px!important;
    font-size:8px!important;
  }
}


/* === FIX36 action details fill the permanent right-rail card === */
@media (min-width:1000px){
  .battleVignette .techniqueFocus.railCard{
    box-sizing:border-box!important;
    overflow:hidden!important;
    border-radius:22px!important;
    border:1px solid rgba(203,155,70,.52)!important;
    background:linear-gradient(180deg,rgba(25,43,29,.995),rgba(18,31,22,.995))!important;
    box-shadow:0 12px 32px rgba(0,0,0,.38)!important;
  }

  .battleVignette .techniqueFocus.railCard .vignetteResults{
    max-height:none!important;
    overflow:visible!important;
  }

  .battleVignette .techniqueFocus.railCard.railTight{
    padding:8px!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignetteActor{
    gap:5px!important;padding-bottom:5px!important;margin-bottom:5px!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignettePortrait{
    flex-basis:26px!important;height:26px!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignetteWho{font-size:9px!important;line-height:1.2!important}
  .battleVignette .techniqueFocus.railCard.railTight .vignetteEyebrow{font-size:7px!important}
  .battleVignette .techniqueFocus.railCard.railTight .vignetteTitle{
    font-size:16px!important;line-height:1.08!important;margin:3px 0 5px!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignetteEffect{
    font-size:9px!important;line-height:1.24!important;margin-bottom:5px!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignetteTargets{
    font-size:8px!important;line-height:1.22!important;padding-top:4px!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignetteResults{
    gap:2px!important;margin-top:4px!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignetteResult{
    padding:2px 0 2px 5px!important;gap:1px!important;font-size:8px!important;line-height:1.2!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignetteResult strong{
    font-size:10px!important;
  }
  .battleVignette .techniqueFocus.railCard.railTight .vignetteHint{
    margin-top:4px!important;font-size:7.5px!important;
  }
}


/* FIX44 — attack travel clearly runs from the acting Hero along the line, then resolves on the opponent card. */
.battleSpriteTrail{position:fixed;z-index:3;height:4px;pointer-events:none;opacity:0;transform-origin:left center;background:linear-gradient(90deg,rgba(255,235,189,0),rgba(255,225,139,.9) 20%,rgba(255,241,201,.98) 50%,rgba(255,221,128,.82) 78%,rgba(255,235,189,0));box-shadow:0 0 10px rgba(247,205,116,.55),0 0 22px rgba(247,205,116,.35);border-radius:999px;transition:transform .76s cubic-bezier(.2,.72,.26,.98),opacity .18s linear}
.battleSpriteTrail.isVisible{opacity:1}
.battleSpriteTrail.isFading{opacity:0}
.battleSpriteFx{--fx-flip:1;position:fixed;z-index:4;pointer-events:none;user-select:none;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(162,114,255,.28));opacity:0;will-change:left,top,transform,opacity;transform-origin:center center;transform:scaleX(var(--fx-flip,1))}
.battleSpriteFx.runFrame,.battleSpriteFx.runTravel{transition:left .82s cubic-bezier(.2,.72,.26,.98),top .82s cubic-bezier(.2,.72,.26,.98),opacity .16s linear,transform .82s cubic-bezier(.2,.72,.26,.98)}
.battleSpriteFx.isVisible{opacity:1}
.battleSpriteFx.slashFrame{filter:drop-shadow(0 14px 24px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(193,131,255,.45));animation:vignetteSlashBurst .34s ease-out forwards}
.fxSpriteTargetShake{animation:vignetteTargetShake .44s cubic-bezier(.36,.07,.19,.97) both}
@keyframes vignetteSlashBurst{0%{opacity:0;transform:scaleX(var(--fx-flip,1)) scale(.72)}20%{opacity:1;transform:scaleX(var(--fx-flip,1)) scale(1)}70%{opacity:1;transform:scaleX(var(--fx-flip,1)) scale(1.08)}100%{opacity:0;transform:scaleX(var(--fx-flip,1)) scale(1.16)}}
@keyframes vignetteTargetShake{0%,100%{transform:translate3d(0,0,0)}16%{transform:translate3d(-8px,0,0)}33%{transform:translate3d(7px,0,0)}50%{transform:translate3d(-6px,0,0)}66%{transform:translate3d(5px,0,0)}83%{transform:translate3d(-2px,0,0)}}
@media(max-width:999px){.battleSpriteTrail{height:3px;box-shadow:0 0 8px rgba(247,205,116,.48),0 0 14px rgba(247,205,116,.28)}.battleSpriteFx{filter:drop-shadow(0 8px 12px rgba(0,0,0,.38)) drop-shadow(0 0 14px rgba(162,114,255,.26))}}
@media(prefers-reduced-motion:reduce){.battleSpriteTrail,.battleSpriteFx,.battleSpriteFx.runFrame,.battleSpriteFx.slashFrame,.fxSpriteTargetShake{animation:none!important;transition:none!important}}

/* FIX45 — support/heal/guard techniques now use Hero-specific support sprites. */
.battleSupportSprite{position:fixed;z-index:4;pointer-events:none;user-select:none;object-fit:contain;opacity:0;transform:translateY(8px) scale(.92);transform-origin:center center;filter:drop-shadow(0 10px 18px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(255,226,160,.32));transition:opacity .18s linear,transform .34s ease-out}
.battleSupportSprite.isVisible{opacity:1;transform:translateY(0) scale(1)}
.battleSupportHalo{position:fixed;z-index:3;pointer-events:none;opacity:0;border-radius:999px;background:radial-gradient(circle,rgba(255,245,205,.28) 0%,rgba(255,228,147,.14) 35%,rgba(255,228,147,.02) 72%,rgba(255,228,147,0) 100%);box-shadow:0 0 18px rgba(255,226,159,.28),0 0 42px rgba(255,226,159,.18);transform:scale(.78);transition:opacity .18s linear,transform .36s ease-out}
.battleSupportHalo.isVisible{opacity:1;transform:scale(1)}
.battleSupportBeam{position:fixed;z-index:2;height:4px;pointer-events:none;opacity:0;transform-origin:left center;border-radius:999px;background:linear-gradient(90deg,rgba(255,240,187,0),rgba(255,229,143,.92) 18%,rgba(255,248,224,.98) 50%,rgba(188,255,207,.82) 82%,rgba(188,255,207,0));box-shadow:0 0 10px rgba(255,225,129,.45),0 0 22px rgba(190,255,208,.28);transition:transform .28s ease-out,opacity .16s linear}
.battleSupportBeam.isVisible{opacity:1}
.battleSupportBeam.isFading{opacity:0}
.fxSupportActorGlow{animation:vignetteSupportActorGlow .55s ease-out infinite alternate}
.fxSupportTargetPulse{animation:vignetteSupportTargetPulse .5s ease-out}
@keyframes vignetteSupportActorGlow{from{box-shadow:0 0 0 0 rgba(255,226,159,.08),0 0 0 0 rgba(198,255,219,.05)}to{box-shadow:0 0 0 3px rgba(255,226,159,.18),0 0 22px rgba(198,255,219,.18)}}
@keyframes vignetteSupportTargetPulse{0%{box-shadow:0 0 0 0 rgba(196,255,214,0),0 0 0 0 rgba(255,228,147,0)}35%{box-shadow:0 0 0 2px rgba(196,255,214,.55),0 0 18px rgba(255,228,147,.32)}100%{box-shadow:0 0 0 0 rgba(196,255,214,0),0 0 0 0 rgba(255,228,147,0)}}
@media(max-width:999px){.battleSupportBeam{height:3px}.battleSupportSprite{filter:drop-shadow(0 8px 12px rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(255,226,160,.26))}}
@media(prefers-reduced-motion:reduce){.battleSupportSprite,.battleSupportHalo,.battleSupportBeam,.fxSupportActorGlow,.fxSupportTargetPulse{animation:none!important;transition:none!important}}


/* FIX52 — Level 2 techniques replay a cinematic path-form burst before the normal action animation. */
.battleLevel2Backdrop{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(var(--l2-rgb,245,208,106),.18) 0%,rgba(var(--l2-rgb,245,208,106),.12) 18%,rgba(9,8,18,.46) 36%,rgba(4,4,10,.78) 100%);transition:opacity .22s linear}
.battleLevel2Backdrop.isVisible{opacity:1}
.battleLevel2Flare{position:absolute;z-index:3;width:300px;height:300px;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.14);background:radial-gradient(circle,rgba(255,255,255,.99) 0%,rgba(var(--l2-rgb,245,208,106),.98) 22%,rgba(var(--l2-rgb,245,208,106),.34) 54%,transparent 76%);filter:blur(1px);animation:battleLevel2Flare 1.34s cubic-bezier(.18,.86,.22,1) forwards}
.battleLevel2Flare.isVisible{opacity:1}
.battleLevel2Sprite{position:absolute;z-index:4;pointer-events:none;user-select:none;object-fit:contain;opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(var(--l2-rotate,-2deg));transform-origin:50% 62%;filter:drop-shadow(0 28px 54px rgba(0,0,0,.56)) drop-shadow(0 0 38px rgba(var(--l2-rgb,245,208,106),.62)) drop-shadow(0 0 78px rgba(var(--l2-rgb,245,208,106),.26));transition:left .68s cubic-bezier(.16,.86,.22,1),top .68s cubic-bezier(.16,.86,.22,1),width .68s cubic-bezier(.16,.86,.22,1),height .68s cubic-bezier(.16,.86,.22,1),opacity .34s linear,transform .52s cubic-bezier(.16,.86,.22,1),filter .46s ease}
.battleLevel2Sprite.isSlam{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(var(--l2-rotate,-2deg))}
.battleLevel2Sprite.isSnap{opacity:0;transform:translate(-50%,-50%) scale(.66) rotate(var(--l2-rotate,-2deg));filter:drop-shadow(0 14px 28px rgba(0,0,0,.26)) drop-shadow(0 0 20px rgba(var(--l2-rgb,245,208,106),.34))}
.battleLevel2ImpactRing{position:absolute;z-index:4;width:184px;height:184px;border-radius:50%;pointer-events:none;border:5px solid rgba(var(--l2-rgb,245,208,106),.96);box-shadow:0 0 28px rgba(var(--l2-rgb,245,208,106),.58),0 0 58px rgba(var(--l2-rgb,245,208,106),.24),inset 0 0 26px rgba(255,255,255,.24);transform:translate(-50%,-50%) scale(.26);animation:battleLevel2ImpactRing .84s ease-out forwards}
.battleLevel2ImpactFlash{position:absolute;z-index:3;width:248px;height:248px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(var(--l2-rgb,245,208,106),.62) 32%,rgba(var(--l2-rgb,245,208,106),.12) 54%,rgba(var(--l2-rgb,245,208,106),0) 76%);transform:translate(-50%,-50%) scale(.18);animation:battleLevel2ImpactFlash .74s ease-out forwards}
.fxLevel2Replay{animation:battleLevel2CardPulse 1.56s cubic-bezier(.18,.88,.22,1)}
@keyframes battleLevel2Flare{0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.42)}54%{opacity:.96;transform:translate(-50%,-50%) scale(1.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.06)}}
@keyframes battleLevel2ImpactRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.22)}16%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.56)}}
@keyframes battleLevel2ImpactFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.14)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.36)}}
@keyframes battleLevel2CardPulse{0%,100%{transform:scale(1);box-shadow:none}12%{transform:scale(.982)}26%{transform:scale(1.055);box-shadow:0 0 0 2px rgba(var(--l2-rgb,245,208,106),1),0 0 56px rgba(var(--l2-rgb,245,208,106),.56),0 0 96px rgba(var(--l2-rgb,245,208,106),.18),0 18px 40px rgba(0,0,0,.34)}42%{transform:scale(1.018);box-shadow:0 0 0 4px rgba(var(--l2-rgb,245,208,106),.78),0 0 48px rgba(var(--l2-rgb,245,208,106),.44)}62%{transform:scale(.996);box-shadow:0 0 0 2px rgba(var(--l2-rgb,245,208,106),.58),0 0 30px rgba(var(--l2-rgb,245,208,106),.3)}82%{transform:scale(1.024);box-shadow:0 0 0 1px rgba(var(--l2-rgb,245,208,106),.44),0 0 22px rgba(var(--l2-rgb,245,208,106),.22)}}
@media(max-width:999px){.battleLevel2Sprite{filter:drop-shadow(0 18px 34px rgba(0,0,0,.48)) drop-shadow(0 0 28px rgba(var(--l2-rgb,245,208,106),.44))}.battleLevel2ImpactRing{width:152px;height:152px}.battleLevel2ImpactFlash{width:204px;height:204px}}
@media(prefers-reduced-motion:reduce){.battleLevel2Backdrop,.battleLevel2Flare,.battleLevel2Sprite,.battleLevel2ImpactRing,.battleLevel2ImpactFlash,.fxLevel2Replay{animation:none!important;transition:none!important}}