@font-face{font-family:Corpid;src:url("../assets/My Collection/CorpidOffice Bold.ttf")}
@font-face{font-family:Matisse;src:url("../assets/My Collection/Fonts/MatissePro B.otf")}
:root{
  --gold:#f3d98a;
  --gold-hot:#fff1af;
  --blue:#59c9ff;
  --quick:#42d28a;
  --arts:#4b92ff;
  --buster:#e94145;
  --apex:#ff4ebd;
  --ink:#070510;
  --panel:rgba(8,7,20,.82);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#020108}
body{
  display:grid;
  place-items:center;
  color:#fff;
  font-family:Corpid,Arial,sans-serif;
  background:radial-gradient(circle at 50% 40%,#211231 0,#05030b 60%,#000 100%);
}
button,a{font:inherit}
button{color:inherit}
[hidden]{display:none!important}
.battle-shell{
  width:min(calc(100vw - 12px),calc((100vh - 36px)*16/9));
  max-width:1600px;
}
.battle-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  isolation:isolate;
  background:#07030f;
  border:1px solid #b69355;
  box-shadow:0 0 0 2px #27162f,0 22px 70px #000;
}
.cosmos-video,.cosmos-vignette{
  position:absolute;
  z-index:-5;
  inset:0;
  width:100%;
  height:100%;
}
.cosmos-video{object-fit:cover}
.cosmos-vignette{
  z-index:-4;
  background:
    linear-gradient(180deg,rgba(2,1,8,.48),transparent 22%,transparent 64%,rgba(2,1,7,.82)),
    radial-gradient(ellipse at center,transparent 38%,rgba(0,0,5,.56) 100%);
  pointer-events:none;
}
.stage-flash{
  position:absolute;
  z-index:25;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:#fff;
}
.stage-flash.fire{animation:stage-flash .42s ease-out}
.slash-flash{
  position:absolute;
  z-index:13;
  left:12%;
  top:19%;
  width:35%;
  height:50%;
  opacity:0;
  pointer-events:none;
  transform:rotate(-22deg);
  background:linear-gradient(100deg,transparent 42%,#fff 47%,#ffe7a7 49%,#fff 51%,transparent 56%);
  filter:drop-shadow(0 0 14px #ffed9d);
}
.slash-flash.fire{animation:slash .42s ease-out}
.battle-header{
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  right:0;
  height:7.8%;
  display:grid;
  grid-template-columns:16% 1fr 18% 9%;
  align-items:center;
  gap:.7%;
  padding:0 1%;
  color:#e9d9f0;
  background:linear-gradient(180deg,rgba(3,2,10,.94),rgba(7,4,16,.72) 74%,transparent);
  text-shadow:1px 2px 2px #000;
}
.battle-back{
  justify-self:start;
  padding:.45em .9em;
  border:1px solid #947eac;
  color:#fff;
  background:linear-gradient(#3a1f55,#160c28);
  text-decoration:none;
  font-size:clamp(7px,.72vw,12px);
  letter-spacing:.12em;
}
.battle-title{text-align:center}
.battle-title small,.battle-title strong{display:block}
.battle-title small{color:#9d81b8;font-size:clamp(5px,.5vw,8px);letter-spacing:.28em}
.battle-title strong{margin-top:.2em;font:clamp(11px,1.2vw,20px) Matisse,serif;letter-spacing:.12em}
.turn-record{display:grid;grid-template-columns:1fr 1fr;gap:.4em;font-size:clamp(6px,.58vw,10px);letter-spacing:.1em}
.turn-record span{padding:.4em;background:linear-gradient(90deg,transparent,#1d0d2cb8,transparent);text-align:center}
.turn-record b{color:var(--gold-hot);font-size:1.4em}
.sound-toggle,.help-toggle{
  position:absolute;
  top:14%;
  width:8%;
  border:1px solid #806690;
  padding:.55em .2em;
  background:#120a1ecf;
  font-size:clamp(6px,.55vw,9px);
  cursor:pointer;
}
.sound-toggle{right:17.8%}
.help-toggle{right:26.3%;color:#d9c7e8}
.help-toggle:hover,.help-toggle[aria-expanded=true]{border-color:#e9cb75;color:#ffe58e}
.sound-toggle[aria-pressed=true]{border-color:#e9cb75;color:#ffe58e}
.boss-hud{
  position:absolute;
  z-index:12;
  top:8.2%;
  left:1.4%;
  width:48%;
  min-height:13%;
  pointer-events:none;
  filter:drop-shadow(0 5px 5px #000);
}
.boss-identity{display:flex;align-items:center;gap:1%;padding-left:1.5%}
.boss-class-mark{
  display:grid;
  place-items:center;
  width:6.5%;
  aspect-ratio:1;
  color:#ffe4a0;
  border:1px solid #ae8b54;
  transform:rotate(45deg);
  background:radial-gradient(circle,#632f60,#13091e 68%);
  font:clamp(9px,1vw,17px) Matisse,serif;
}
.boss-class-mark span{display:inline-grid;transform:rotate(-45deg)}
.boss-identity small,.boss-identity strong{display:block}
.boss-identity small{color:#c49abe;font-size:clamp(5px,.47vw,8px);letter-spacing:.13em}
.boss-identity strong{color:#fff1dc;font:clamp(10px,1.15vw,19px) Matisse,serif;letter-spacing:.05em}
.boss-bars{position:relative;width:82%;margin:.3% 0 0 4.5%}
.grand-foreigner-emblem{
  position:absolute;
  z-index:7;
  left:5.4%;
  bottom:-5%;
  width:12%;
  aspect-ratio:1;
  object-fit:contain;
  transform:translateX(-50%);
  filter:drop-shadow(0 0 6px #fff0b8) drop-shadow(0 3px 4px #000);
}
.boss-hp-frame{position:relative;width:100%;aspect-ratio:494/56}
.boss-hp-frame>img{position:absolute;z-index:3;inset:0;width:100%;height:100%}
.boss-hp-fill{
  position:absolute;
  z-index:1;
  left:10.7%;
  top:40%;
  width:85.2%;
  height:24%;
  transform-origin:left;
  background:linear-gradient(90deg,#c11558,#ff4a88 56%,#ffbed7);
  box-shadow:0 0 7px #ff58a4;
  transition:width .45s ease-out,background .3s;
}
.boss-hp-frame>b{
  position:absolute;
  z-index:4;
  top:37%;
  left:45%;
  color:#fff;
  font:clamp(7px,.7vw,12px) Arial,sans-serif;
  text-shadow:1px 1px 2px #000;
}
.break-pips{position:absolute;z-index:5;left:10.0%;top:70%;display:flex;gap:clamp(1px,.16vw,3px)}
.break-pips span{
  position:relative;
  width:clamp(13px,1.75vw,28px);
  aspect-ratio:1;
  background:var(--pip-color,#ff4f9f);
  -webkit-mask:url("../assets/games/apex-final/battle_ui/break_bar_mask.png") center/contain no-repeat;
  mask:url("../assets/games/apex-final/battle_ui/break_bar_mask.png") center/contain no-repeat;
  filter:drop-shadow(0 0 4px var(--pip-color,#ff4f9f));
  transition:.35s;
}
.break-pips span::after{
  content:"";
  position:absolute;
  inset:0;
  background:url("../assets/games/apex-final/battle_ui/break_bar.png") center/contain no-repeat;
  mix-blend-mode:screen;
}
.break-pips span.broken{opacity:.18;filter:grayscale(1)}
.boss-charge{position:absolute;left:17%;top:110%;display:flex;gap:2px}
.boss-charge span{
  width:clamp(10px,1.4vw,23px);
  aspect-ratio:23/20;
  background:url("../assets/games/apex-final/battle_ui/boss_empty_np_tick.png") center/contain no-repeat;
}
.boss-charge span.filling{background-image:url("../assets/games/apex-final/battle_ui/boss_filling_np_tick.png")}
.boss-charge span.full{background-image:url("../assets/games/apex-final/battle_ui/boss_full_np_tick.png");filter:drop-shadow(0 0 5px #ff305d)}
.boss-status-rail{
  display:flex;
  gap:.35em;
  height:clamp(18px,2.3vw,36px);
  margin:4% 0 0 13%;
  overflow:visible;
  pointer-events:auto;
}
.status-icon{
  position:relative;
  width:clamp(17px,2vw,32px);
  aspect-ratio:1;
  border:1px solid #e6d08e;
  background:#180c20;
  box-shadow:0 2px 4px #000;
  cursor:help;
  touch-action:manipulation;
}
.status-icon img{width:100%;height:100%;object-fit:cover}
.status-icon::before{
  content:attr(data-tooltip);
  position:absolute;
  z-index:120;
  left:50%;
  width:max-content;
  max-width:min(280px,68vw);
  padding:8px 10px;
  border:1px solid #e5c881;
  border-radius:3px;
  color:#fff5d4;
  background:linear-gradient(135deg,#120817f5,#2b0e2cf5);
  box-shadow:0 7px 20px #000c,0 0 12px #d4379a66;
  font:10px/1.35 Arial,sans-serif;
  letter-spacing:.02em;
  text-align:left;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.boss-status-rail .status-icon::before{top:calc(100% + 7px)}
.player-status-rail .status-icon::before{bottom:calc(100% + 7px);transform:translateX(-50%) translateY(-4px)}
.status-icon:hover,.status-icon:focus-visible{z-index:121;outline:1px solid #fff1a8;outline-offset:2px}
.status-icon:hover::before,.status-icon:focus-visible::before,.status-icon.tooltip-open::before{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.boss-status-rail .status-icon:nth-child(-n+2)::before{
  left:0;
  right:auto;
  transform:translateY(4px);
}
.boss-status-rail .status-icon:nth-child(-n+2):hover::before,
.boss-status-rail .status-icon:nth-child(-n+2):focus-visible::before,
.boss-status-rail .status-icon:nth-child(-n+2).tooltip-open::before{transform:translateY(0)}
.boss-status-rail .status-icon:last-child::before{left:auto;right:0;transform:translateY(4px)}
.boss-status-rail .status-icon:last-child:hover::before,
.boss-status-rail .status-icon:last-child:focus-visible::before,
.boss-status-rail .status-icon:last-child.tooltip-open::before{transform:translateY(0)}
.boss-status-rail .status-icon:first-child:last-child::before{
  left:0;
  right:auto;
  transform:translateY(4px);
}
.boss-status-rail .status-icon:first-child:last-child:hover::before,
.boss-status-rail .status-icon:first-child:last-child:focus-visible::before,
.boss-status-rail .status-icon:first-child:last-child.tooltip-open::before{transform:translateY(0)}
.status-icon b{
  position:absolute;
  right:-2px;
  bottom:-3px;
  min-width:1.2em;
  padding:0 .15em;
  color:#fff;
  background:#17091d;
  font-size:clamp(5px,.45vw,8px);
  text-align:center;
}
.combatants{position:absolute;z-index:2;inset:15% 0 24%;pointer-events:none}
.combatant{position:absolute;bottom:-4%;transition:opacity .3s,transform .35s,filter .2s}
.combatant video{display:block;width:100%;height:100%;object-fit:contain}
.kiara-combatant{left:1%;width:47%;height:112%;bottom:-16%}
.kasumi-combatant{right:11%;width:28%;height:82%;bottom:-4%}
.kiara-aura,.kasumi-aura{
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:0;
  width:72%;
  aspect-ratio:1;
  transform:translateX(-50%) scaleY(.2);
  transform-origin:50% 100%;
  border-radius:50%;
  opacity:.5;
}
.kiara-aura{background:radial-gradient(circle,#ff4cce99,transparent 67%);box-shadow:0 0 45px #d337a4}
.kasumi-aura{background:radial-gradient(circle,#fff2a5a6,transparent 67%);box-shadow:0 0 34px #79bfff}
.kasumi-combatant video{transition:opacity .12s}
.kasumi-combatant.action-hidden video{opacity:.08}
.kiara-combatant video{transition:opacity .12s}
.kiara-combatant.action-hidden video{opacity:.08}
.kiara-action-vfx,.kiara-damage-vfx{
  position:absolute;
  z-index:6;
  left:1%;
  bottom:-16%;
  width:47%;
  height:112%;
  object-fit:contain;
  object-position:center bottom;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 15px #ff59c7) drop-shadow(0 5px 8px #000);
}
.kiara-action-vfx.active{animation:kiara-spell-pop 1.788s cubic-bezier(.16,.7,.3,1) both}
.kiara-damage-vfx.active{animation:kiara-damage-pop .66s ease-out both}
.kasumi-action-vfx,.kasumi-damage-vfx{
  position:absolute;
  z-index:6;
  right:4%;
  bottom:-5%;
  width:40%;
  height:108%;
  object-fit:contain;
  object-position:center bottom;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 12px #fff2a5) drop-shadow(0 5px 7px #000);
}
.kasumi-action-vfx.active{animation:kasumi-action-pop .58s cubic-bezier(.16,.7,.3,1) both}
.kasumi-action-vfx.extra{animation:kasumi-extra-pop .8s cubic-bezier(.16,.7,.3,1) both}
.kasumi-damage-vfx.active{animation:kasumi-damage-pop .72s ease-out both}
.kiara-skill-pulse{
  position:absolute;
  z-index:4;
  left:50%;
  top:48%;
  width:72%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(0 0 18px #ff3fbd);
}
.kiara-skill-pulse::before{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 3%,#ff78d9 9%,#e92aab7d 22%,transparent 62%);
  animation:kiara-skill-core 1.788s ease-out both;
}
.kiara-skill-pulse i{
  position:absolute;
  inset:25%;
  border:clamp(2px,.22vw,4px) solid #ff86df;
  border-radius:50%;
  box-shadow:0 0 14px #ff45be,inset 0 0 18px #ff45be;
  animation:kiara-skill-ring 1.788s cubic-bezier(.16,.7,.24,1) both;
}
.kiara-skill-pulse i:nth-child(2){animation-delay:.12s}
.kiara-skill-pulse i:nth-child(3){animation-delay:.24s}
.kiara-skill-pulse strong{
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:2%;
  color:#fff0c8;
  font:clamp(8px,.8vw,14px) Matisse,serif;
  letter-spacing:.1em;
  text-align:center;
  text-shadow:0 0 5px #16000e,0 0 15px #ff3fbd;
  animation:kiara-skill-label 1.788s ease both;
}
.combatant.hit{animation:target-hit .38s}
.combatant.hurt{animation:player-hit .42s}
.target-marker{
  position:absolute;
  z-index:7;
  top:24%;
  left:19%;
  display:grid;
  place-items:center;
  color:#92dfff;
  filter:drop-shadow(0 0 7px #4fbaff);
  animation:target-bob 1s ease-in-out infinite;
}
.target-marker i{width:1.3em;height:1.3em;border:3px solid;transform:rotate(45deg)}
.target-marker span{margin-top:.5em;font-size:clamp(6px,.6vw,10px);letter-spacing:.12em}
.damage-layer{position:absolute;z-index:24;inset:0;pointer-events:none}
.damage-number{
  position:absolute;
  font:bold clamp(15px,2.25vw,38px) Arial,sans-serif;
  color:#fff;
  -webkit-text-stroke:1px #7b1a49;
  text-shadow:0 3px 0 #64143b,0 0 10px #ffcaef;
  animation:damage-bounce .82s ease-out forwards;
}
.damage-number.critical{color:#fff0a0;-webkit-text-stroke-color:#a33b12;text-shadow:0 3px #7a250b,0 0 12px #ffdf42}
.damage-number.player{color:#ffb5ca}
.shield-burst{
  position:absolute;
  right:10%;
  top:25%;
  width:30%;
  height:54%;
  object-fit:contain;
  filter:drop-shadow(0 0 24px #78dfff);
  animation:shield-burst .65s ease-out forwards;
}
.player-interface{
  position:absolute;
  z-index:15;
  left:0;
  right:0;
  bottom:0;
  height:25%;
  display:grid;
  grid-template-columns:23% 37% 1fr;
  align-items:end;
  gap:1%;
  padding:.6% 1.1% 1%;
  background:linear-gradient(180deg,transparent,#07050bd9 12%,#07050bef 100%);
  transition:opacity .2s,transform .25s;
}
.skills-panel{align-self:center}
.skill-title{display:flex;justify-content:space-between;margin:0 3% 2%;font-size:clamp(5px,.48vw,8px);letter-spacing:.14em;color:#b6a7c1}
.skill-title b{color:#ffe39a}
.skill-buttons{display:flex;gap:3%}
.skill-buttons button{
  position:relative;
  width:30%;
  aspect-ratio:1;
  padding:0;
  overflow:visible;
  border:2px solid #d9c280;
  border-radius:7%;
  background:#14101e;
  box-shadow:0 3px 7px #000;
  cursor:pointer;
}
.skill-buttons button::after{
  content:"";
  position:absolute;
  inset:-6%;
  border:1px solid #695577;
  pointer-events:none;
}
.skill-buttons button::before{
  content:attr(data-tooltip);
  position:absolute;
  z-index:130;
  left:50%;
  bottom:calc(100% + 12px);
  width:max-content;
  max-width:min(310px,72vw);
  padding:9px 11px;
  border:1px solid #e6cb84;
  border-radius:3px;
  color:#fff5d8;
  background:linear-gradient(135deg,#100815f7,#321337f7);
  box-shadow:0 8px 22px #000d,0 0 13px #7fcaff55;
  font:10px/1.4 Arial,sans-serif;
  letter-spacing:.015em;
  text-align:left;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) translateY(5px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.skill-buttons button:hover,.skill-buttons button:focus-visible{z-index:131}
.skill-buttons button:hover::before,.skill-buttons button:focus-visible::before{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.skill-buttons button:first-child::before{
  left:0;
  transform:translateY(5px);
}
.skill-buttons button:first-child:hover::before,
.skill-buttons button:first-child:focus-visible::before{transform:translateY(0)}
.skill-buttons button:focus-visible{outline:2px solid #fff1a8;outline-offset:4px}
.skill-buttons button>img{display:block;width:100%;height:100%;object-fit:cover}
.skill-buttons button>span{
  position:absolute;
  left:2px;
  top:1px;
  padding:.1em .3em;
  background:#10091cde;
  color:#ffe28a;
  font-size:clamp(6px,.55vw,10px);
}
.skill-buttons button>i{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:#07050bc9;
  font-style:normal;
  font-size:clamp(14px,1.7vw,27px);
}
.skill-buttons button>i:empty{display:none}
.skill-buttons button>em{
  position:absolute;
  left:50%;
  bottom:-12%;
  transform:translateX(-50%);
  padding:.15em .45em;
  color:#fff5bb;
  border:1px solid #e3bc65;
  background:#442164;
  font-size:clamp(4px,.37vw,6px);
  font-style:normal;
  letter-spacing:.1em;
  white-space:nowrap;
}
.skill-buttons button:not(:disabled):hover{filter:brightness(1.2);transform:translateY(-2px)}
.skill-buttons button:disabled{filter:grayscale(.82);cursor:not-allowed}
.skill-buttons button.devotion-skill{
  border-color:#fff0a7;
  box-shadow:0 0 0 1px #6c3f87,0 0 12px #68cfff99,0 3px 7px #000;
}
.servant-status{display:grid;grid-template-columns:24% 1fr 20%;align-items:end;min-width:0}
.servant-face{
  position:relative;
  align-self:end;
  aspect-ratio:1;
  overflow:hidden;
  border:2px solid #e5cd83;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:#17336b;
}
.servant-face img{width:100%;height:100%;object-fit:cover}
.servant-face.grand-ruler-mark{
  display:grid;
  place-items:center;
  overflow:visible;
  border:0;
  clip-path:none;
  background:transparent;
}
.servant-face.grand-ruler-mark::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:12%;
  border-radius:50%;
  background:radial-gradient(circle,#fff6b9b8 0,#59d8ff70 35%,transparent 72%);
  filter:blur(5px);
  animation:grand-ruler-aura 2.8s ease-in-out infinite;
}
.servant-face.grand-ruler-mark img{
  width:92%;
  height:92%;
  object-fit:contain;
  filter:drop-shadow(0 0 4px #fff6bd) drop-shadow(0 0 8px #48cfff);
  animation:grand-ruler-pulse 2.8s ease-in-out infinite;
}
.servant-face span{
  position:absolute;
  left:0;
  right:0;
  bottom:16%;
  padding:.15em;
  color:#fff;
  background:#112d79c7;
  text-align:center;
  font-size:clamp(5px,.46vw,8px);
}
.servant-copy{padding:0 1.5% 1.5%;min-width:0}
.servant-name{display:flex;justify-content:space-between;align-items:end;margin-bottom:1%}
.servant-name small{color:#d5bb76;font-size:clamp(5px,.47vw,8px)}
.servant-name strong{font:clamp(11px,1.25vw,20px) Matisse,serif;letter-spacing:.08em}
.compact-gauge{display:grid;grid-template-columns:8% 1fr 20%;align-items:center;margin:.1em 0}
.compact-gauge>span{font-size:clamp(5px,.48vw,8px);color:#dac780}
.compact-gauge>div{position:relative;aspect-ratio:146/30}
.compact-gauge img{position:absolute;z-index:2;inset:0;width:100%;height:100%}
.compact-gauge i{
  position:absolute;
  z-index:1;
  left:13%;
  top:42%;
  width:76%;
  height:30%;
  transform-origin:left;
  transition:width .35s;
}
.hp-gauge i{background:linear-gradient(90deg,#3cc658,#93ee4c)}
.np-gauge i{background:linear-gradient(90deg,#2376d9,#70dcff)}
.compact-gauge>b{text-align:right;font:clamp(6px,.58vw,10px) Arial,sans-serif}
.player-status-rail{display:flex;gap:3px;height:clamp(17px,2vw,30px);margin-top:1%}
.critical-box{position:relative;align-self:end}
.critical-box img{width:100%;display:block}
.critical-box b{
  position:absolute;
  right:7%;
  top:15%;
  font:clamp(12px,1.65vw,27px) Arial,sans-serif;
  color:#fff6ac;
  text-shadow:1px 2px #000;
}
.command-zone{display:flex;align-items:center;justify-content:flex-end;gap:4%;height:100%}
.battle-message{
  width:54%;
  min-height:46%;
  padding:3% 4%;
  border-left:2px solid #b5965b;
  background:linear-gradient(90deg,#0d0817dd,transparent);
}
.battle-message small{color:#e6bd73;font-size:clamp(5px,.46vw,8px);letter-spacing:.14em}
.battle-message p{margin:.35em 0 0;font:clamp(8px,.75vw,12px)/1.25 Georgia,serif;color:#e6ddea}
.attack-button{
  position:relative;
  width:36%;
  max-width:160px;
  aspect-ratio:1;
  border:5px solid #e1ddc2;
  border-radius:50%;
  background:
    radial-gradient(circle at 42% 37%,#d2ffff 0,#3ad6ff 25%,#157fc9 57%,#083b73 71%,#05132e 72%);
  box-shadow:0 0 0 4px #2d303b,0 0 0 7px #e0c66f,0 4px 18px #000,inset 0 0 24px #fff8;
  cursor:pointer;
  text-shadow:1px 2px #173860;
}
.attack-button::before,.attack-button::after{
  content:"";
  position:absolute;
  inset:-15%;
  z-index:-1;
  border:3px solid #c4a964;
  border-radius:50%;
}
.attack-button::after{inset:-25%;border-color:#535967;border-width:7px;border-left-color:#d6c277;transform:rotate(-28deg)}
.attack-button>span{display:none}
.attack-button>b{display:block;font:italic clamp(17px,2.2vw,37px) Georgia,serif}
.attack-button small{display:block;font-size:clamp(4px,.4vw,7px);letter-spacing:.08em}
.attack-button:hover:not(:disabled){filter:brightness(1.16);transform:scale(1.03)}
.attack-button:disabled{filter:grayscale(1);opacity:.6}
.master-console{
  position:absolute;
  z-index:23;
  top:0;
  right:0;
  width:17%;
  display:block;
  pointer-events:auto;
  filter:drop-shadow(0 6px 8px #000);
}
.master-frame{position:relative;width:100%;aspect-ratio:219/154}
.master-frame-art{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.master-portrait{
  position:absolute;
  z-index:4;
  left:30%;
  top:11%;
  width:52%;
  height:78%;
  overflow:hidden;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:radial-gradient(circle at 50% 28%,#41506a,#111522 72%);
}
.master-portrait img{
  display:block;
  width:82%;
  height:82%;
  margin:9%;
  object-fit:contain;
  object-position:50% 38%;
  filter:brightness(3.4) contrast(1.04) sepia(.12) saturate(1.25);
}
.master-frame>span{position:absolute;z-index:5;left:0;bottom:2%;color:#d5edff;font-size:clamp(4px,.39vw,7px);letter-spacing:.08em}
.master-controls{
  position:absolute;
  z-index:6;
  top:88%;
  right:4%;
  width:76%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5%;
  align-items:start;
}
.master-skill,.command-spell-trigger{
  position:relative;
  width:100%;
  aspect-ratio:1;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.master-skill{grid-column:2;grid-row:1}
.command-spell-trigger{grid-column:1;grid-row:1;transform:scale(1.15);transform-origin:100% 0}
.master-skill>img,.command-spell-trigger>.spell-frame{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain}
.master-skill>span{
  position:relative;
  z-index:3;
  display:block;
  margin-top:78%;
  color:#ffe49a;
  font-size:clamp(6px,.5vw,9px);
  letter-spacing:.04em;
  white-space:nowrap;
}
.command-emblem{position:absolute;z-index:4;inset:16%;filter:drop-shadow(0 0 4px #ff405e)}
.command-emblem img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:filter .3s,opacity .3s}
.command-emblem img.used{filter:grayscale(1) brightness(.22);opacity:.28}
.command-spell-trigger>b{
  position:absolute;
  z-index:5;
  right:7%;
  top:4%;
  display:grid;
  place-items:center;
  width:1.4em;
  aspect-ratio:1;
  border-radius:50%;
  color:#29020a;
  background:#fff0aa;
  font-size:clamp(6px,.6vw,10px);
}
.command-spell-trigger>small{
  position:absolute;
  z-index:5;
  left:-10%;
  right:-10%;
  bottom:1%;
  color:#fff;
  font-size:clamp(6px,.48vw,9px);
  letter-spacing:.04em;
  white-space:nowrap;
}
.master-skill:hover,.command-spell-trigger:hover{filter:brightness(1.28)}
.master-skill[aria-expanded=true],.command-spell-trigger[aria-expanded=true]{filter:brightness(1.3) drop-shadow(0 0 7px #ffe395)}
.devotion-lock{
  position:absolute;
  z-index:5;
  top:145%;
  right:3%;
  padding:.25em .65em;
  color:#9fdfff;
  border:1px solid #6f75a7;
  background:#0a0a1ddd;
  font-size:clamp(3px,.3vw,5px);
  letter-spacing:.1em;
}
.master-utility-menu{
  position:absolute;
  z-index:10;
  top:158%;
  right:0;
  width:220%;
  padding:3%;
  border:1px solid #d8bd72;
  background:linear-gradient(145deg,rgba(13,8,25,.98),rgba(36,15,47,.97));
  box-shadow:0 12px 28px #000;
}
.master-utility-menu header{margin-bottom:2%;padding:0 1% 2%;border-bottom:1px solid #655071}
.master-utility-menu header small,.master-utility-menu header strong{display:block}
.master-utility-menu header small{color:#ad96bd;font-size:clamp(7px,.55vw,10px);letter-spacing:.18em}
.master-utility-menu header strong{color:#ffe8a6;font:clamp(12px,1vw,18px) Matisse,serif;letter-spacing:.08em}
.master-utility-menu>div{display:grid;grid-template-columns:repeat(3,1fr);gap:2%}
.master-utility-menu button{
  position:relative;
  min-width:0;
  min-height:96px;
  padding:5%;
  border:1px solid #775f86;
  color:#fff;
  background:linear-gradient(#24162e,#0e0a16);
  cursor:pointer;
}
.master-utility-menu button.cooldown::after{
  content:attr(data-cooldown);
  position:absolute;
  z-index:5;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff2b0;
  background:#090611c9;
  font:bold clamp(9px,1vw,16px) Arial,sans-serif;
  text-shadow:0 0 8px #000;
}
.master-utility-menu button.cooldown{filter:grayscale(.65);opacity:.72}
.master-utility-menu button>img{display:block;width:42%;aspect-ratio:1;margin:0 auto 4%;object-fit:contain;border:1px solid #c7af75}
.master-utility-menu button>span:not(.spell-piece){display:block;text-align:center}
.master-utility-menu button b,.master-utility-menu button small{display:block}
.master-utility-menu button b{color:#ffe89f;font-size:clamp(8px,.68vw,12px);letter-spacing:.04em}
.master-utility-menu button small{margin-top:.35em;color:#d2c5d9;font-size:clamp(7px,.54vw,10px);line-height:1.3}
.master-utility-menu button:hover:not(.used){border-color:#ffe08b;filter:brightness(1.2)}
.master-utility-menu button.used{filter:grayscale(1);opacity:.32;pointer-events:none}
.spell-piece{position:relative;display:block;width:54%;aspect-ratio:99/102;margin:0 auto 2%}
.spell-piece .spell-frame,.spell-piece .spell-sigil{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.spell-piece .spell-sigil{z-index:3;inset:13%;width:74%;height:74%;filter:drop-shadow(0 0 4px #ff405e)}
.spell-piece .spell-frame{z-index:2}
.command-spell-menu{top:158%}
.command-cards{
  position:absolute;
  z-index:22;
  inset:46% 9% 2%;
  padding:1% 1.5%;
  background:linear-gradient(180deg,transparent,#05040be8 14%,#05030af5);
}
.command-cards header{height:14%;display:flex;align-items:center;justify-content:space-between}
.command-cards header small,.command-cards header strong{display:block}
.command-cards header small{color:#c7a6db;font-size:clamp(5px,.5vw,8px);letter-spacing:.18em}
.command-cards header strong{color:#ffe9a0;font:clamp(12px,1.4vw,23px) Matisse,serif}
.command-cards header button{padding:.5em 1.2em;border:1px solid #8d7898;background:#1e1229;color:#ddd;font-size:clamp(6px,.55vw,9px)}
.card-row{height:86%;display:flex;align-items:end;justify-content:center;gap:1.5%}
.command-card{
  position:relative;
  width:15%;
  max-width:150px;
  aspect-ratio:133/170;
  padding:0;
  overflow:hidden;
  border:0;
  background:transparent center/100% 100% no-repeat;
  filter:drop-shadow(0 6px 5px #000);
  cursor:pointer;
  transition:transform .16s,filter .16s;
}
.command-card.quick{background-image:url("../assets/atlas/quick_bg.webp")}
.command-card.arts{background-image:url("../assets/atlas/arts_bg.webp")}
.command-card.buster{background-image:url("../assets/atlas/buster_bg.webp")}
.command-card.np{background:linear-gradient(145deg,#bdeeff,#3155bb 45%,#551267);border:3px solid #ffe694;clip-path:polygon(50% 0,96% 15%,100% 84%,50% 100%,0 84%,4% 15%)}
.command-card .card-face{
  position:absolute;
  z-index:1;
  left:8%;
  top:4%;
  width:84%;
  height:87%;
  object-fit:cover;
  object-position:center 25%;
  clip-path:polygon(50% 0,100% 13%,93% 85%,50% 100%,7% 85%,0 13%);
}
.command-card .card-type{
  position:absolute;
  z-index:2;
  left:-7%;
  right:-7%;
  bottom:4%;
  height:42%;
  object-fit:contain;
}
.command-card .card-order{
  position:absolute;
  z-index:5;
  left:50%;
  top:7%;
  transform:translateX(-50%);
  display:none;
  width:2em;
  aspect-ratio:1;
  place-items:center;
  border-radius:50%;
  color:#1a1120;
  background:#fff1a5;
  border:2px solid #9e7731;
  font-size:clamp(9px,1vw,16px);
}
.command-card .crit-rate{
  position:absolute;
  z-index:4;
  right:7%;
  top:10%;
  color:#fff19b;
  font-size:clamp(6px,.65vw,11px);
  text-shadow:1px 2px #000;
}
.command-card.np .np-copy{position:absolute;z-index:3;inset:0;display:grid;place-items:center;align-content:center;text-shadow:0 2px 5px #000}
.command-card.np .np-copy small{font-size:clamp(5px,.45vw,8px);letter-spacing:.1em}
.command-card.np .np-copy b{font:clamp(10px,1.1vw,18px) Matisse,serif;color:#fff4b0}
.command-card.np .np-copy span{font-size:clamp(4px,.38vw,6px)}
.command-card:hover:not(:disabled){transform:translateY(-6%) scale(1.04);filter:drop-shadow(0 7px 8px #000) brightness(1.14)}
.command-card.selected{transform:translateY(-10%);filter:drop-shadow(0 0 10px #fff3a2)}
.command-card.selected .card-order{display:grid}
.command-card:disabled:not(.selected){filter:grayscale(.8) brightness(.5);cursor:not-allowed}
.dodge-phase{
  position:absolute;
  z-index:21;
  left:50%;
  top:52%;
  width:43%;
  transform:translate(-50%,-50%);
  padding:1%;
  border:2px solid #cfb86e;
  background:rgba(3,2,10,.79);
  box-shadow:0 0 0 2px #603075,0 0 45px #000;
}
.dodge-heading{display:flex;justify-content:space-between;align-items:center;padding:0 1% .6%;color:#ffd98b;letter-spacing:.12em;font-size:clamp(6px,.58vw,10px)}
.dodge-heading b{font-size:1.55em}
#bullet-canvas{display:block;width:100%;aspect-ratio:720/430;background:rgba(3,1,9,.65);border:1px solid #866b91;outline:0}
.dodge-instruction{display:flex;justify-content:space-around;padding:.6% 1% 0;color:#bcaec3;font-size:clamp(4px,.4vw,7px);letter-spacing:.08em}
.dodge-instruction b{color:#fff0ac}
.touch-pad{display:none;position:absolute;right:3%;bottom:4%;width:80px;aspect-ratio:1;border:1px solid #bb9dd0;border-radius:50%;background:#24122e99;touch-action:none}
.touch-knob{position:absolute;left:50%;top:50%;width:32px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff1a5bb;box-shadow:0 0 12px #d56cff}
.touch-focus{
  display:none;
  position:absolute;
  right:4%;
  bottom:28%;
  width:68px;
  aspect-ratio:1;
  border:1px solid #ffe69b;
  border-radius:50%;
  color:#fff1b0;
  background:#24122ed9;
  font-size:9px;
  letter-spacing:.08em;
  touch-action:none;
}
.touch-focus.held{background:#fff1a5;color:#28162f;box-shadow:0 0 18px #fff2a1}
.mode-dodge .player-interface{opacity:.5;transform:translateY(45%);pointer-events:none}
.mode-dodge .master-console{opacity:.25;pointer-events:none}
.mode-dodge .target-marker{display:none}
.mode-dodge .kasumi-combatant{opacity:.15}
.mode-dodge .kiara-combatant{opacity:.7;transform:translate(18%,-5%) scale(1.08)}
.mode-np .cosmos-video{filter:brightness(.08)}
.mode-np .combatants{opacity:0}
.watashimori-command-cutin{
  position:absolute;
  z-index:46;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 0 12%,#08070ed9 13% 70%,transparent 71%);
}
.watashimori-cutin-band{
  position:absolute;
  z-index:1;
  left:-12%;
  top:20%;
  width:124%;
  height:58%;
  transform:skewX(-18deg);
  border-top:2px solid #ff435f;
  border-bottom:2px solid #ff435f;
  background:
    repeating-linear-gradient(165deg,transparent 0 7%,#ff314b44 7.4% 8%,transparent 8.4% 13%),
    linear-gradient(90deg,#05050bea,#240811e8 55%,#05050bea);
  box-shadow:0 0 24px #ff2948aa;
}
.watashimori-cutin-portrait{
  position:absolute;
  z-index:3;
  right:8%;
  bottom:-13%;
  width:36%;
  height:116%;
  object-fit:contain;
  filter:brightness(1.35) contrast(1.08) drop-shadow(0 0 14px #ff314f);
}
.watashimori-cutin-sigil{
  position:absolute;
  z-index:5;
  left:17%;
  top:30%;
  width:15%;
  aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 0 14px #ff2f4b);
}
.watashimori-cutin-copy{
  position:absolute;
  z-index:6;
  left:7%;
  bottom:17%;
  width:50%;
  text-shadow:0 0 12px #ff2948;
}
.watashimori-cutin-copy small,.watashimori-cutin-copy strong{display:block}
.watashimori-cutin-copy small{color:#ff9ba8;font-size:clamp(5px,.55vw,9px);letter-spacing:.24em}
.watashimori-cutin-copy strong{color:#fff1d2;font:clamp(20px,3vw,50px) Matisse,serif;letter-spacing:.06em}
.watashimori-command-cutin.active{animation:watashimori-cutin-shell 1.36s ease both}
.watashimori-command-cutin.active .watashimori-cutin-band{animation:watashimori-cutin-band 1.36s cubic-bezier(.16,.75,.24,1) both}
.watashimori-command-cutin.active .watashimori-cutin-portrait{animation:watashimori-cutin-portrait 1.36s cubic-bezier(.16,.75,.24,1) both}
.watashimori-command-cutin.active .watashimori-cutin-sigil{animation:watashimori-sigil-pulse 1.36s ease both}
.watashimori-command-cutin.opening .watashimori-cutin-portrait{animation:watashimori-opening-pulse 1.36s ease both}
.kasumi-np-cutin{
  position:absolute;
  z-index:36;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,.92),rgba(255,225,121,.7) 15%,rgba(63,9,28,.92) 42%,rgba(4,2,12,.98) 80%),
    #08030c;
}
.kasumi-np-cutin::before,.kasumi-np-cutin::after{
  content:"";
  position:absolute;
  z-index:1;
  left:-10%;
  right:-10%;
  height:22%;
  transform:skewX(-28deg);
  background:linear-gradient(90deg,transparent,#fff5b4 22%,#8d183b 23% 76%,transparent 77%);
  filter:drop-shadow(0 0 14px #ffe19b);
}
.kasumi-np-cutin::before{top:7%}
.kasumi-np-cutin::after{bottom:8%;transform:skewX(28deg)}
.kasumi-np-cutin>img{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:105%;
  height:105%;
  object-fit:contain;
  transform:translate(-44%,-50%);
  filter:drop-shadow(0 0 10px #fff3ba);
}
.np-cutin-streak{
  position:absolute;
  z-index:2;
  inset:0;
  opacity:.75;
  background:repeating-linear-gradient(165deg,transparent 0 5%,#fff3ad 5.3% 5.8%,transparent 6.1% 11%);
}
.kasumi-np-cutin>div:last-child{
  position:absolute;
  z-index:5;
  right:3%;
  bottom:8%;
  width:48%;
  padding:1.2% 2%;
  text-align:right;
  background:linear-gradient(90deg,transparent,#07030ce8 28%);
  text-shadow:0 0 13px #ffbd61;
}
.kasumi-np-cutin small,.kasumi-np-cutin strong,.kasumi-np-cutin span{display:block}
.kasumi-np-cutin small{color:#ffd893;font-size:clamp(5px,.5vw,9px);letter-spacing:.28em}
.kasumi-np-cutin strong{color:#fff4c7;font:clamp(22px,3.4vw,56px) Matisse,serif;letter-spacing:.06em}
.kasumi-np-cutin span{font-size:clamp(7px,.75vw,12px);letter-spacing:.16em}
.kasumi-np-cutin.fire{animation:np-cutin-shell 1.35s ease both}
.kasumi-np-cutin.fire>img{animation:np-cutin-image 1.35s cubic-bezier(.16,.74,.28,1) both}
.kiara-np-cutin{
  position:absolute;
  z-index:37;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:#030107;
}
.kiara-np-cutin::after{
  content:"";
  position:absolute;
  z-index:4;
  inset:0;
  background:linear-gradient(100deg,transparent 30%,#ff45bd24 52%,#fff3 54%,transparent 57%);
  mix-blend-mode:screen;
}
.kiara-np-cutin>img{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.kiara-cutin-streak{
  position:absolute;
  z-index:3;
  inset:0;
  background:repeating-linear-gradient(168deg,transparent 0 7%,#ff4cc555 7.3% 7.8%,transparent 8.1% 13%);
  mix-blend-mode:screen;
}
.kiara-np-cutin>div:last-child{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:5%;
  padding:1.1% 4%;
  text-align:left;
  background:linear-gradient(90deg,#050109ed 8%,#1b0311c4 55%,transparent);
  text-shadow:0 0 16px #ff49bf;
}
.kiara-np-cutin small,.kiara-np-cutin strong,.kiara-np-cutin span{display:block}
.kiara-np-cutin small{color:#f9a8dd;font-size:clamp(5px,.5vw,9px);letter-spacing:.28em}
.kiara-np-cutin strong{color:#fff0d5;font:clamp(22px,3.2vw,54px) Matisse,serif;letter-spacing:.05em}
.kiara-np-cutin span{font-size:clamp(7px,.75vw,12px);letter-spacing:.14em}
.kiara-np-cutin.fire{animation:kiara-cutin-shell 1.65s ease both}
.kiara-np-cutin.fire>img{animation:kiara-cutin-image 1.65s cubic-bezier(.16,.74,.28,1) both}
.np-cinematic{
  position:absolute;
  z-index:30;
  inset:0;
  overflow:hidden;
  background:radial-gradient(circle,#2d0929,#000 60%);
}
.np-cinematic>video{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:-8%;
  width:38%;
  height:86%;
  object-fit:contain;
  transform:translateX(-50%);
  filter:drop-shadow(0 0 24px #ff4cb9);
}
.heavens-hole-portal{
  position:absolute;
  z-index:1;
  left:50%;
  top:43%;
  width:43%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  animation:portal-spin 8s linear infinite;
  filter:drop-shadow(0 0 42px #e930a7);
}
.heavens-hole-portal img{width:100%;height:100%;object-fit:contain}
.np-title{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:7%;
  padding:1.2% 0;
  text-align:center;
  background:linear-gradient(90deg,transparent,#09020bd9 20% 80%,transparent);
  text-shadow:0 0 14px #ff49bf;
}
.np-title small,.np-title strong,.np-title span{display:block}
.np-title small{font-size:clamp(5px,.5vw,9px);letter-spacing:.3em;color:#f1acd7}
.np-title strong{font:clamp(18px,2.4vw,40px) Matisse,serif;color:#fff2d2;letter-spacing:.08em}
.np-title span{font-size:clamp(7px,.75vw,13px);letter-spacing:.16em}
.phase-banner{
  position:absolute;
  z-index:32;
  left:0;
  right:0;
  top:38%;
  padding:1.8% 0;
  text-align:center;
  background:linear-gradient(90deg,transparent,#09030ded 18% 82%,transparent);
  border-top:1px solid #ffda82;
  border-bottom:1px solid #ffda82;
  animation:banner-in 1.9s ease both;
}
.phase-banner small,.phase-banner strong,.phase-banner span{display:block}
.phase-banner small{color:#dd9dd4;font-size:clamp(5px,.5vw,9px);letter-spacing:.35em}
.phase-banner strong{font:clamp(20px,2.8vw,46px) Matisse,serif;color:#fff1b5;text-shadow:0 0 18px #fa45c5}
.phase-banner span{font-size:clamp(6px,.6vw,10px);letter-spacing:.17em}
.opening-sequence,.result-overlay{
  position:absolute;
  z-index:50;
  inset:0;
  display:grid;
  place-items:center;
  padding:4%;
  opacity:0;
  visibility:hidden;
  transition:.5s;
  background:
    linear-gradient(90deg,rgba(3,2,9,.98),rgba(13,6,22,.91),rgba(3,2,9,.98)),
    radial-gradient(circle,#402060,transparent);
}
.opening-sequence.visible{opacity:1;visibility:visible}
.opening-cutscene{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(140,57,154,.18),transparent 34%),
    linear-gradient(90deg,#030209f5,#10071ae8 48%,#05020bf5);
}
.cutscene-field{position:absolute;inset:0 0 25%}
.cutscene-abyss{
  position:absolute;
  left:50%;
  top:44%;
  width:32%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid #ad72c366;
  border-radius:50%;
  background:radial-gradient(circle,#000 0 18%,#3b0d4a 19% 21%,transparent 22% 38%,#6c277133 39% 40%,transparent 41%);
  box-shadow:0 0 70px #b733c044,inset 0 0 45px #000;
  animation:cutscene-abyss-pulse 4s ease-in-out infinite;
}
.cutscene-actor{
  position:absolute;
  z-index:2;
  bottom:-7%;
  width:38%;
  height:112%;
  opacity:.42;
  filter:saturate(.65) brightness(.65);
  transition:opacity .35s,filter .35s,transform .35s;
}
.cutscene-actor video{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 20px #000)}
.cutscene-actor span{
  position:absolute;
  bottom:8%;
  color:#ad9bb8;
  font-size:clamp(6px,.58vw,10px);
  letter-spacing:.25em;
}
.cutscene-actor.kasumi{right:5%;transform:translateX(2%)}
.cutscene-actor.kasumi span{right:14%}
.cutscene-actor.kiara{left:4%;transform:translateX(-2%)}
.cutscene-actor.kiara span{left:14%}
.cutscene-actor.speaking{opacity:1;filter:saturate(1.12) brightness(1.08);transform:translateX(0) scale(1.025)}
.cutscene-actor.kasumi.speaking video{filter:drop-shadow(0 0 22px #66d5ff88)}
.cutscene-actor.kiara.speaking video{filter:drop-shadow(0 0 24px #ef53cb99)}
.cutscene-dialogue{
  position:absolute;
  z-index:4;
  left:7%;
  right:7%;
  bottom:5%;
  min-height:24%;
  padding:1.5% 2%;
  border:1px solid #c3a564;
  background:linear-gradient(100deg,rgba(7,7,18,.97),rgba(27,12,37,.94));
  box-shadow:0 12px 40px #000,0 0 0 4px #24152eaa;
}
.cutscene-dialogue::before{content:"";position:absolute;left:0;top:0;width:22%;height:2px;background:linear-gradient(90deg,#69d5ff,transparent)}
.cutscene-meta{display:flex;align-items:center;justify-content:space-between}
.cutscene-meta strong{color:#ffe8a2;font:clamp(12px,1.4vw,23px) Matisse,serif;letter-spacing:.12em}
.cutscene-meta small{color:#8d7b9a;font-size:clamp(6px,.55vw,9px);letter-spacing:.15em}
.cutscene-dialogue p{margin:.7em 12% .3em 0;min-height:2.8em;color:#eee8f1;font:clamp(11px,1.25vw,21px)/1.4 Georgia,serif;text-shadow:0 2px 5px #000}
.cutscene-dialogue.line-change p{animation:cutscene-line-in .32s ease both}
.cutscene-actions{position:absolute;right:2%;bottom:12%;display:flex;gap:8px}
.cutscene-actions button{
  padding:.65em 1.1em;
  border:1px solid #806d8b;
  color:#c8bacf;
  background:#160d20dd;
  cursor:pointer;
  font-size:clamp(7px,.62vw,10px);
  letter-spacing:.1em;
}
.cutscene-actions #cutscene-next{border-color:#d4ba74;color:#fff0b2;background:linear-gradient(135deg,#273967,#67275e)}
.cutscene-actions span{font-size:1.4em;line-height:0}
.opening-contract{width:min(82%,970px);text-align:center}
.opening-sigil{
  position:relative;
  width:clamp(62px,8vw,130px);
  aspect-ratio:1;
  margin:0 auto 1%;
  overflow:hidden;
  transform:rotate(45deg);
  border:2px solid #ffe59c;
  box-shadow:0 0 0 6px #341b48,0 0 30px #5ad4ff;
}
.opening-sigil img{width:145%;height:145%;object-fit:cover;transform:rotate(-45deg) translate(-8%,-8%)}
.opening-contract>small{color:#9fdfff;font-size:clamp(6px,.62vw,11px);letter-spacing:.35em}
.opening-contract h1{margin:.35em 0;color:#fff1b2;font:clamp(28px,4.2vw,70px)/.88 Matisse,serif;letter-spacing:.04em;text-shadow:0 0 28px #467dff}
.opening-effects{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5%;margin:2.4% 0}
.opening-effects span{display:grid;grid-template-columns:20% 1fr;align-items:center;padding:3%;text-align:left;border:1px solid #795d8e;background:#0b0713bf;color:#cfc2d8;font-size:clamp(5px,.5vw,9px);letter-spacing:.08em}
.opening-effects img{grid-row:1/3;width:85%;border:1px solid #d2bb79}
.opening-effects b{color:#fff0a2;font-size:1.05em}
.opening-contract p{margin:0 auto 2%;max-width:720px;color:#d7c9dd;font:clamp(9px,.9vw,15px)/1.4 Georgia,serif}
.opening-contract button,.result-actions button,.result-actions a{
  min-width:230px;
  padding:.85em 1.8em;
  color:#fff6cc;
  border:2px solid #efd887;
  background:linear-gradient(135deg,#173e6c,#4b2673 50%,#a02d79);
  text-decoration:none;
  cursor:pointer;
}
.result-overlay{opacity:1;visibility:visible;background:rgba(2,1,7,.9)}
.victory-epilogue{
  position:absolute;
  z-index:2;
  inset:0;
  overflow:hidden;
  background:#000;
  cursor:pointer;
}
.epilogue-void{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 52%,#270b2438 0 22%,transparent 52%),
    #000;
}
.epilogue-sprite{
  position:absolute;
  left:50%;
  bottom:-15%;
  width:auto;
  height:108%;
  aspect-ratio:1145/1262;
  transform:translateX(-50%);
  animation:epilogue-kiara-enter 1.6s ease both;
}
.epilogue-kiara{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 24px #d42c9a66) brightness(.84);
  transition:filter .8s ease;
}
.epilogue-dialogue{
  position:absolute;
  z-index:2;
  left:7%;
  right:2%;
  bottom:0;
  height:23%;
  padding:0;
  background:url("../assets/My Collection/dialogue_box.webp") center/100% 100% no-repeat;
  filter:drop-shadow(0 4px 9px #000);
  cursor:pointer;
}
.epilogue-dialogue>div{position:static}
.epilogue-dialogue strong{position:absolute;left:5%;top:18%;color:#fff;font:clamp(12px,1.25vw,21px) Corpid,Arial,sans-serif;letter-spacing:.04em;text-shadow:0 2px #000}
.epilogue-dialogue small{position:absolute;left:5%;bottom:8%;color:#aeeeff;font-size:clamp(6px,.52vw,9px);letter-spacing:.1em}
.epilogue-dialogue p{position:absolute;left:8%;right:18%;top:38%;margin:0;color:#fff;font:clamp(10px,1.15vw,19px)/1.35 Corpid,Arial,sans-serif;text-shadow:0 2px 2px #000}
.epilogue-dialogue.line-change p{animation:cutscene-line-in .35s ease both}
.epilogue-dialogue button{
  position:absolute;
  right:3%;
  bottom:7%;
  min-width:150px;
  padding:.75em 1.2em;
  border:1px solid #bd4a98;
  color:#ffd3ed;
  background:linear-gradient(135deg,#1a0715,#551341);
  cursor:pointer;
  font-size:clamp(7px,.62vw,10px);
  letter-spacing:.11em;
}
.epilogue-dialogue button:disabled{opacity:.45;cursor:default}
.epilogue-dialogue button span{font-size:1.35em;line-height:0}
.victory-epilogue.laughing .epilogue-kiara{filter:drop-shadow(0 0 38px #ff24b299) brightness(.96) saturate(1.22) contrast(1.08)}
.victory-epilogue.laughing .epilogue-dialogue strong{color:#fff;text-shadow:0 0 9px #ff2aa8,0 0 22px #ff2aa8}
.victory-epilogue::after{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  background:#000;
  opacity:0;
}
.victory-epilogue.fade-to-black::after{animation:epilogue-blackout 1.45s ease forwards}
.result-card{width:min(78%,900px);max-height:88%;overflow:auto;padding:3.5%;text-align:center;border:1px solid #d6bd76;background:linear-gradient(145deg,#151020ee,#08050cee);box-shadow:0 0 40px #813579}
.result-card small{color:#d5a2ce;letter-spacing:.3em}
.result-card h2{margin:.25em 0;color:#fff0aa;font:clamp(25px,3.3vw,55px) Matisse,serif}
.result-card p{color:#d8ccd9;font:clamp(10px,1vw,17px) Georgia,serif}
.victory-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1%;margin-top:3%}
.victory-stats>div{
  grid-column:span 2;
  min-height:98px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:7%;
  border:1px solid #624b69;
  background:linear-gradient(145deg,#150a1ddd,#07050bdd);
  box-shadow:inset 0 0 18px #000;
}
.victory-stats>div:nth-last-child(-n+2){grid-column:span 3}
.victory-stats small{color:#d694c7;font-size:clamp(6px,.55vw,9px);letter-spacing:.17em}
.victory-stats strong{display:block;margin:.08em 0;color:#fff0aa;font:clamp(22px,2.6vw,43px) Matisse,serif;letter-spacing:.04em;text-shadow:0 0 14px #c2469a88}
.victory-stats span{color:#89768e;font-size:clamp(5px,.5vw,8px);letter-spacing:.08em}
.result-actions{display:flex;justify-content:center;gap:2%;margin-top:4%}
.result-actions a{display:grid;place-items:center;background:linear-gradient(#372245,#160d20)}
.help-overlay{
  position:absolute;
  z-index:75;
  inset:0;
  display:grid;
  place-items:center;
  padding:3.5%;
  background:rgba(2,1,8,.9);
  backdrop-filter:blur(5px);
}
.help-card{
  width:min(92%,1060px);
  max-height:92%;
  overflow:auto;
  padding:2.3%;
  border:2px solid #d9bd71;
  background:
    linear-gradient(145deg,rgba(22,10,32,.98),rgba(7,4,14,.98)),
    radial-gradient(circle at 70% 20%,#6c286755,transparent 42%);
  box-shadow:0 0 0 3px #43244f,0 24px 70px #000,0 0 32px #9a3f9255;
}
.help-card>header{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #72577d;padding-bottom:1.2%}
.help-card>header small{color:#aa91bc;font-size:clamp(6px,.55vw,9px);letter-spacing:.24em}
.help-card h2{margin:.2em 0 0;color:#fff0af;font:clamp(18px,2.2vw,36px) Matisse,serif;letter-spacing:.06em}
.help-card>header button{
  width:clamp(28px,3vw,48px);
  aspect-ratio:1;
  border:1px solid #9e7eaa;
  color:#ffe9b0;
  background:#25122f;
  font-size:clamp(18px,2vw,32px);
  cursor:pointer;
}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2%;margin-top:1.4%}
.help-grid section{padding:3%;border:1px solid #594365;background:#090611b8}
.help-grid h3{margin:0 0 .55em;color:#f4d787;font-size:clamp(9px,.85vw,14px);letter-spacing:.12em}
.help-grid p,.help-grid li{color:#d6cadb;font:clamp(7px,.7vw,12px)/1.45 Arial,sans-serif}
.help-grid p{margin:.45em 0}
.help-grid ul{margin:.4em 0 0;padding-left:1.25em}
.help-grid li+li{margin-top:.35em}
.help-grid b{color:#fff0b6}
.help-card>footer{display:flex;justify-content:space-between;align-items:center;margin-top:1.8%;color:#907c9d;font-size:clamp(6px,.58vw,10px);letter-spacing:.1em}
.help-card>footer button{
  padding:.75em 1.5em;
  border:1px solid #d7ba70;
  color:#fff1b4;
  background:linear-gradient(#4b2b58,#211329);
  cursor:pointer;
}
.pause-overlay{
  position:absolute;
  z-index:60;
  inset:0;
  display:grid;
  place-items:center;
  color:#ffe9a1;
  background:#030107d9;
  font:clamp(28px,4vw,65px) Matisse,serif;
  letter-spacing:.25em;
}
.battle-footer{display:flex;justify-content:space-between;padding:7px 4px 0;color:#7e6a91;font-size:clamp(5px,.48vw,8px);letter-spacing:.12em}
@keyframes stage-flash{0%{opacity:.88}100%{opacity:0}}
@keyframes slash{0%{opacity:0;transform:translate(-18%,18%) rotate(-22deg) scale(.5)}38%{opacity:1}100%{opacity:0;transform:translate(14%,-8%) rotate(-22deg) scale(1.25)}}
@keyframes target-hit{0%,100%{transform:translateX(0);filter:none}20%{transform:translateX(-3%);filter:brightness(2)}40%{transform:translateX(2%)}}
@keyframes player-hit{0%,100%{transform:translateX(0);filter:none}20%{transform:translateX(4%);filter:brightness(1.8) saturate(.5)}45%{transform:translateX(-2%)}}
@keyframes target-bob{50%{transform:translateY(-7px)}}
@keyframes damage-bounce{0%{opacity:0;transform:translateY(24px) scale(.55)}20%{opacity:1;transform:translateY(-12px) scale(1.22)}60%{opacity:1;transform:translateY(-25px) scale(1)}100%{opacity:0;transform:translateY(-40px) scale(.82)}}
@keyframes shield-burst{0%{opacity:0;transform:scale(.35) rotate(-18deg)}30%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:0;transform:scale(1.3) rotate(8deg)}}
@keyframes portal-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes banner-in{0%{opacity:0;transform:scaleX(.2)}16%,75%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.1)}}
@keyframes np-cutin-shell{0%{opacity:0;clip-path:inset(46% 0)}12%,78%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(46% 0)}}
@keyframes np-cutin-image{0%{transform:translate(-18%,-50%) scale(1.45);filter:brightness(4)}28%,78%{transform:translate(-44%,-50%) scale(1);filter:brightness(1)}100%{transform:translate(-52%,-50%) scale(1.06);filter:brightness(2)}}
@keyframes kiara-skill-core{0%{opacity:0;transform:scale(.1)}14%{opacity:1;transform:scale(1.15)}55%{opacity:.72;transform:scale(.92)}100%{opacity:0;transform:scale(2.2)}}
@keyframes kiara-skill-ring{0%{opacity:0;transform:scale(.1) rotate(0)}16%{opacity:1}100%{opacity:0;transform:scale(2.2) rotate(210deg);border-width:1px}}
@keyframes kiara-skill-label{0%,12%{opacity:0;transform:translateY(12px)}24%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes kiara-cutin-shell{0%{opacity:0;clip-path:inset(48% 0)}12%,82%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(48% 0)}}
@keyframes kiara-cutin-image{0%{transform:scale(1.16) translateX(8%);filter:brightness(3)}28%,82%{transform:scale(1);filter:brightness(1)}100%{transform:scale(1.04) translateX(-2%);filter:brightness(1.8)}}
@keyframes kasumi-action-pop{0%{opacity:0;transform:translateX(10%) scale(.76);filter:brightness(2.8)}18%,68%{opacity:1;transform:translateX(0) scale(1);filter:brightness(1.05) drop-shadow(0 0 18px #fff0a1)}100%{opacity:0;transform:translateX(-5%) scale(1.05)}}
@keyframes kasumi-extra-pop{0%{opacity:0;transform:scale(.6) rotate(-4deg);filter:brightness(3.2)}18%,66%{opacity:1;transform:scale(1.08) rotate(0);filter:brightness(1.2) drop-shadow(0 0 26px #ffe66f)}100%{opacity:0;transform:scale(1.18) translateX(-8%)}}
@keyframes kasumi-damage-pop{0%{opacity:0;transform:translateX(8%) scale(.82);filter:brightness(2.6)}20%,62%{opacity:1;transform:translateX(0) scale(1);filter:brightness(1)}100%{opacity:0;transform:translateX(5%) scale(.96)}}
@keyframes kiara-spell-pop{0%{opacity:0;transform:translateX(-8%) scale(.78);filter:brightness(3)}14%,76%{opacity:1;transform:translateX(0) scale(1);filter:brightness(1.08) drop-shadow(0 0 22px #ff56c7)}100%{opacity:0;transform:translateX(5%) scale(1.04)}}
@keyframes kiara-damage-pop{0%{opacity:0;transform:translateX(-6%) scale(.86);filter:brightness(2.7)}18%,64%{opacity:1;transform:translateX(0) scale(1);filter:brightness(1)}100%{opacity:0;transform:translateX(-4%) scale(.96)}}
@keyframes watashimori-cutin-shell{0%{opacity:0;clip-path:polygon(100% 0,100% 0,78% 100%,78% 100%)}12%,80%{opacity:1;clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}100%{opacity:0;clip-path:polygon(0 0,22% 0,0 100%,0 100%)}}
@keyframes watashimori-cutin-band{0%{transform:translateX(90%) skewX(-18deg)}18%,78%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(-90%) skewX(-18deg)}}
@keyframes watashimori-cutin-portrait{0%{opacity:0;transform:translate(42%,-22%) scale(.72)}22%,78%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(-20%,12%) scale(1.05)}}
@keyframes watashimori-sigil-pulse{0%,100%{opacity:0;transform:scale(.35) rotate(-18deg)}20%{opacity:1;transform:scale(1.18) rotate(4deg)}42%,70%{opacity:1;transform:scale(.94) rotate(0);filter:brightness(1.4) drop-shadow(0 0 22px #ff2747)}}
@keyframes watashimori-opening-pulse{0%{opacity:0;transform:translate(42%,-22%) scale(.72);filter:brightness(3)}20%{opacity:1;transform:translate(0,0) scale(1.12);filter:brightness(1.8) drop-shadow(0 0 30px #ff304e)}45%,76%{opacity:1;transform:scale(1);filter:brightness(1.15)}100%{opacity:0;transform:translate(-20%,12%) scale(1.06)}}
@keyframes cutscene-abyss-pulse{50%{transform:translate(-50%,-50%) scale(1.07) rotate(4deg);filter:brightness(1.3)}}
@keyframes cutscene-line-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes epilogue-kiara-enter{from{opacity:0;transform:translateX(-50%) scale(.94);filter:brightness(0)}to{opacity:1;transform:translateX(-50%) scale(1);filter:drop-shadow(0 0 24px #d42c9a66) brightness(.84)}}
@keyframes epilogue-blackout{0%{opacity:0}100%{opacity:1}}
@keyframes grand-ruler-pulse{0%,100%{transform:scale(.98);filter:brightness(1) drop-shadow(0 0 4px #fff6bd) drop-shadow(0 0 8px #48cfff)}50%{transform:scale(1.035);filter:brightness(1.16) drop-shadow(0 0 7px #fff7c4) drop-shadow(0 0 14px #54ddff)}}
@keyframes grand-ruler-aura{0%,100%{opacity:.42;transform:scale(.9)}50%{opacity:.78;transform:scale(1.08)}}
@media(max-width:900px),(pointer:coarse){
  .battle-shell{width:100vw}
  .battle-stage{border:0}
  .battle-footer{display:none}
  .master-console{width:20%}
  .player-interface{grid-template-columns:25% 38% 1fr}
  .battle-message{display:none}
  .attack-button{width:48%}
  .dodge-phase{width:54%}
  .touch-pad,.touch-focus{display:block}
  .dodge-instruction{justify-content:flex-start;gap:5%}
  .dodge-instruction span:nth-child(-n+2){display:none}
  .help-grid{grid-template-columns:1fr}
  .help-card{max-height:88%;padding:3%}
  .cutscene-actor{width:46%}
  .cutscene-dialogue{left:3%;right:3%;bottom:3%;min-height:28%;padding:2.5%}
  .cutscene-dialogue p{margin-right:20%;font-size:clamp(10px,2vw,16px)}
  .epilogue-sprite{height:112%;bottom:-18%}
  .epilogue-dialogue{left:3%;right:1%;height:28%}
  .epilogue-dialogue p{right:22%;font-size:clamp(10px,1.8vw,15px)}
  .result-card{width:90%;padding:3%}
  .victory-stats>div{min-height:70px;padding:4%}
}
@media(max-height:620px){
  .battle-shell{width:min(100vw,calc(100vh*16/9))}
  .battle-header{height:7%}
  .boss-hud{top:7.2%}
  .master-console{top:0}
  .opening-contract h1{font-size:8vh}
}
@media(prefers-reduced-motion:reduce){
  .target-marker,.heavens-hole-portal{animation:none}
}