/* ZONE STRIKE — announcement plates (2026-10-01)
   Frames are cut from the UI stock set (assets/ui/*.webp, recoloured, text removed); every word on them is live text.
   Plates that grow with their text are sliced: caps keep their size, the thin uniform strips between them stretch.
   Driven by js/fx/announce-plates.js (StrikePlates). Loaded after interface.css / story-interface.css. */
:root{--fxp-font:var(--disp);--fxp-red:#ef4b3f;--fxp-red-ink:#ffe4dc;--fxp-red-sub:#f6b5a8;--fxp-orange:#ed713d;--fxp-ink:#f0ede2;--fxp-sub:#e3d5c2;--fxp-ease:cubic-bezier(.2,.85,.25,1)}
.fxp i,#fxAlert i{display:block;font-style:normal;background-repeat:no-repeat;background-size:100% 100%}

/* ---------- banner: shared ---------- */
#banner.fxp{opacity:0;transform:none;transition:none}
#banner.fxp.show{opacity:1}
#banner.fxp .w{display:inline-flex;flex-direction:column;align-items:center;max-width:none;padding:0;background:none;font-size:inherit;line-height:1;text-shadow:none}
#banner.fxp .banner-en{font-family:var(--fxp-font);font-weight:500;letter-spacing:.14em;line-height:1;white-space:nowrap;text-shadow:0 1px 2px rgba(5,10,12,.7)}
#banner.fxp .banner-ja{font-family:var(--body);font-size:clamp(10px,.85vw,12px);font-weight:600;letter-spacing:.24em;line-height:1.4;margin-top:9px;white-space:nowrap;text-shadow:0 1px 3px #0b1214,0 0 10px rgba(11,18,20,.9)}
#banner.fxp.out .w{opacity:0;transform:translateY(-5px);transition:opacity .32s ease,transform .32s ease}

/* ---------- banner: notice (orange wings either side of the line) ---------- */
#banner.fxp .fxp-row{position:relative;display:inline-flex;align-items:center;gap:clamp(10px,1.3vw,18px);padding:8px 0}
#banner.fxp .fxp-row:before{content:"";position:absolute;inset:-6px -12%;background:radial-gradient(closest-side,rgba(8,14,16,.62),rgba(8,14,16,.32) 55%,transparent);z-index:-1}
#banner.fxp .fxp-wing{--wh:clamp(20px,2.15vw,32px);height:var(--wh);flex:0 1 auto;min-width:0;background-size:auto 100%}
#banner.fxp .fxp-wing.l{width:min(calc(var(--wh)*3.93),17vw);background-image:url(../assets/ui/wing-0.webp);background-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%)}
#banner.fxp .fxp-wing.r{width:min(calc(var(--wh)*4.03),17vw);background-image:url(../assets/ui/wing-2.webp);background-position:left center;-webkit-mask-image:linear-gradient(270deg,transparent,#000 55%);mask-image:linear-gradient(270deg,transparent,#000 55%)}
#banner.fxp.notice .banner-en{font-size:clamp(23px,2.55vw,37px);color:var(--fxp-ink)}
#banner.fxp.notice .banner-ja{color:var(--fxp-sub)}
#banner.fxp.notice.in .fxp-wing.l{animation:fxpWingL .42s var(--fxp-ease) both}
#banner.fxp.notice.in .fxp-wing.r{animation:fxpWingR .42s var(--fxp-ease) both}
#banner.fxp.in .banner-en{animation:fxpWipe .3s var(--fxp-ease) both}
#banner.fxp.in .banner-ja{animation:fxpRise .36s .12s var(--fxp-ease) both}
@keyframes fxpWingL{from{opacity:0;transform:translateX(42%)}to{opacity:1;transform:none}}
@keyframes fxpWingR{from{opacity:0;transform:translateX(-42%)}to{opacity:1;transform:none}}
@keyframes fxpWipe{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 -2% 0 -2%)}}
@keyframes fxpRise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- banner: warning (red chevron plate, five slices) ---------- */
/* slice widths in plate heights: 244 / ~9 / 226 / ~8 / 248 px at 160 px */
.fxp-plate{--h:clamp(48px,5.2vw,74px);display:inline-grid;grid-template-columns:calc(var(--h)*1.525) minmax(calc(var(--h)*.08),1fr) calc(var(--h)*1.4125) minmax(calc(var(--h)*.08),1fr) calc(var(--h)*1.55);height:var(--h);align-items:stretch}
.fxp-plate>i{grid-row:1}
.fxp-plate>.p0{grid-column:1;background-image:url(../assets/ui/warn-0.webp)}
.fxp-plate>.p1{grid-column:2;background-image:url(../assets/ui/warn-1.webp)}
.fxp-plate>.p2{grid-column:3;background-image:url(../assets/ui/warn-2.webp)}
.fxp-plate>.p3{grid-column:4;background-image:url(../assets/ui/warn-3.webp)}
.fxp-plate>.p4{grid-column:5;background-image:url(../assets/ui/warn-4.webp)}
.fxp-plate>.banner-en{grid-row:1;grid-column:2/5;align-self:center;justify-self:center;padding:0 calc(var(--h)*.12);position:relative}
#banner.fxp.warn .banner-en{font-size:calc(var(--h)*.43);font-weight:500;color:var(--fxp-red-ink);letter-spacing:.12em}
#banner.fxp.warn .banner-ja{color:var(--fxp-red-sub);margin-top:7px}
#banner.fxp.warn.in .fxp-plate{animation:fxpOpen .3s var(--fxp-ease) both}
#banner.fxp.warn.in .p0{animation:fxpCapL .4s var(--fxp-ease) both}
#banner.fxp.warn.in .p4{animation:fxpCapR .4s var(--fxp-ease) both}
#banner.fxp.warn.in .banner-en{animation:fxpBlink .5s .1s steps(1,end) both}
@keyframes fxpOpen{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes fxpCapL{from{transform:translateX(22%)}to{transform:none}}
@keyframes fxpCapR{from{transform:translateX(-22%)}to{transform:none}}
@keyframes fxpBlink{0%{opacity:0}20%{opacity:1}40%{opacity:.15}60%{opacity:1}80%{opacity:.4}100%{opacity:1}}

/* ---------- boss arrival / fight end strip ---------- */
#fxAlert{--sw:clamp(520px,min(100vw,150vh),940px);position:fixed;left:50%;top:calc(8vh + clamp(18px,6vh,64px));z-index:23;width:var(--sw);transform:translateX(-50%);pointer-events:none;visibility:hidden;text-align:center}
#fxAlert.on{visibility:visible}
#fxAlert .band{position:absolute;left:50%;top:0;bottom:0;width:100vw;margin-left:-50vw}
#fxAlert .band:before,#fxAlert .band:after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(239,75,63,.55) 20%,rgba(239,75,63,.55) 80%,transparent)}
#fxAlert .band:before{top:12%}#fxAlert .band:after{bottom:12%}
#fxAlert .band{background:linear-gradient(90deg,transparent,rgba(30,6,10,.42) 18%,rgba(30,6,10,.42) 82%,transparent)}
#fxAlert .strip{position:relative;display:flex;width:100%;aspect-ratio:1681/200}
#fxAlert .strip>i{height:100%}
#fxAlert .a0{width:34.98%;background-image:url(../assets/ui/alert-0.webp)}
#fxAlert .a1{width:29.92%;background-image:url(../assets/ui/alert-1.webp);display:flex!important;align-items:center;justify-content:center}
#fxAlert .a2{width:35.1%;background-image:url(../assets/ui/alert-2.webp)}
#fxAlert .a1>b{font-family:var(--fxp-font);font-weight:500;font-size:calc(var(--sw)*.0428);letter-spacing:.2em;padding-left:.2em;color:var(--fxp-red-ink);line-height:1;white-space:nowrap}
#fxAlert p{margin-top:calc(var(--sw)*.008);font-size:clamp(10px,.9vw,12px);font-weight:600;letter-spacing:.32em;color:var(--fxp-red-sub);text-shadow:0 1px 3px #0b1214,0 0 10px rgba(11,18,20,.9)}
#fxAlert.orange .band{background:linear-gradient(90deg,transparent,rgba(26,14,8,.42) 18%,rgba(26,14,8,.42) 82%,transparent)}
#fxAlert.orange .band:before,#fxAlert.orange .band:after{background:linear-gradient(90deg,transparent,rgba(237,113,61,.55) 20%,rgba(237,113,61,.55) 80%,transparent)}
#fxAlert.orange .a0{background-image:url(../assets/ui/alert-o-0.webp)}
#fxAlert.orange .a1{background-image:url(../assets/ui/alert-o-1.webp)}
#fxAlert.orange .a2{background-image:url(../assets/ui/alert-o-2.webp)}
#fxAlert.orange .a1>b{color:#fff1e6;font-size:calc(var(--sw)*.0357);letter-spacing:.14em;padding-left:.14em}
#fxAlert.orange p{color:#f3c9a6}
#fxAlert.in .band{animation:fxpBand .28s var(--fxp-ease) both}
#fxAlert.in .a0{animation:fxpFromL .5s .06s var(--fxp-ease) both}
#fxAlert.in .a2{animation:fxpFromR .5s .06s var(--fxp-ease) both}
#fxAlert.in .a1{animation:fxpPlate .32s .16s var(--fxp-ease) both}
#fxAlert.in .a1>b{animation:fxpBlink3 1s .3s linear both}
#fxAlert.in p{animation:fxpRise .4s .45s var(--fxp-ease) both}
#fxAlert.out{visibility:visible}
#fxAlert.out .strip,#fxAlert.out p{opacity:0;transition:opacity .3s ease}
#fxAlert.out .band{opacity:0;transition:opacity .35s ease}
#fxAlert.out .a0{transform:translateX(-14%);transition:transform .35s ease}
#fxAlert.out .a2{transform:translateX(14%);transition:transform .35s ease}
@keyframes fxpBand{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
@keyframes fxpFromL{from{opacity:0;transform:translateX(-55%)}to{opacity:1;transform:none}}
@keyframes fxpFromR{from{opacity:0;transform:translateX(55%)}to{opacity:1;transform:none}}
@keyframes fxpPlate{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes fxpBlink3{0%,10%{opacity:0}11%,26%{opacity:1}27%,38%{opacity:.12}39%,56%{opacity:1}57%,66%{opacity:.25}67%,100%{opacity:1}}

/* ---------- title card for the operation start and boss names (int2 frame, three slices) ---------- */
/* slices 437 / 3 / 581 px at 300 px; rows add up to one frame height so the frame never stretches vertically.
   The text rules carry .fxp twice to outrank `.cinematic.arrival #cineTitle strong` in story-interface.css. */
#cineTitle.fxp{--h:clamp(92px,11vw,164px);display:grid;grid-template-columns:calc(var(--h)*1.4567) minmax(0,1fr) calc(var(--h)*1.9367);grid-template-rows:calc(var(--h)*.15) calc(var(--h)*.12) calc(var(--h)*.31) calc(var(--h)*.17) 1fr;height:var(--h);text-shadow:none;color:var(--fxp-ink)}
#cineTitle.fxp>i{grid-row:1/-1}
#cineTitle.fxp>.c0{grid-column:1;background-image:url(../assets/ui/card-0.webp)}
#cineTitle.fxp>.c1{grid-column:2;background-image:url(../assets/ui/card-1.webp)}
#cineTitle.fxp>.c2{grid-column:3;background-image:url(../assets/ui/card-2.webp)}
#cineTitle.fxp.boss>.c0{background-image:url(../assets/ui/card-r-0.webp)}
#cineTitle.fxp.boss>.c1{background-image:url(../assets/ui/card-r-1.webp)}
#cineTitle.fxp.boss>.c2{background-image:url(../assets/ui/card-r-2.webp)}
#cineTitle.fxp.fxp>small,#cineTitle.fxp.fxp>strong,#cineTitle.fxp.fxp>span{grid-column:1/-1;position:relative;z-index:1;padding-left:calc(var(--h)*.52);padding-right:calc(var(--h)*.66);margin:0;white-space:nowrap}
#cineTitle.fxp.fxp>small{grid-row:2;align-self:center;font-size:clamp(7px,.62vw,9px);font-weight:650;letter-spacing:.2em;color:#f4a77c;line-height:1}
#cineTitle.fxp.fxp>strong{grid-row:3;align-self:center;font-family:var(--fxp-font);font-weight:500;font-size:calc(var(--h)*.27);letter-spacing:.08em;line-height:1}
#cineTitle.fxp.fxp>span{grid-row:4;align-self:center;font-size:clamp(10px,.86vw,13px);font-weight:600;letter-spacing:.3em;line-height:1;color:var(--fxp-sub)}
#cineTitle.fxp.boss>small{color:#f5998c}
#cineTitle.fxp.boss>span{color:#efc3b8}
/* hex centre in the frame: (.214, .587) of the frame height */
#cineTitle.fxp:before{content:attr(data-num);position:absolute;left:calc(var(--h)*.014);top:calc(var(--h)*.507);width:calc(var(--h)*.4);height:calc(var(--h)*.16);z-index:1;font-family:var(--fxp-font);font-weight:500;font-size:calc(var(--h)*.16);letter-spacing:.04em;text-align:center;color:#ffd9c2;line-height:calc(var(--h)*.16)}
#cineTitle.fxp.boss:before{color:#ffd5cc}
#cineTitle.fxp.on>i{animation:fxpReveal .55s var(--fxp-ease) both}
#cineTitle.fxp.on>.c1{animation-delay:.05s}#cineTitle.fxp.on>.c2{animation-delay:.1s}
#cineTitle.fxp.on>small{animation:fxpSlide .45s .18s var(--fxp-ease) both}
#cineTitle.fxp.on>strong{animation:fxpSlide .5s .24s var(--fxp-ease) both}
#cineTitle.fxp.on>span{animation:fxpSlide .5s .34s var(--fxp-ease) both}
#cineTitle.fxp.on:before{animation:fxpRise .4s .2s var(--fxp-ease) both}
@keyframes fxpReveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes fxpSlide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@media(max-width:700px){#cineTitle.fxp{left:16px;--h:clamp(84px,24vw,104px)}#cineTitle.fxp.fxp>small{font-size:7px;letter-spacing:.1em}#cineTitle.fxp.fxp>span{font-size:10px;letter-spacing:.2em}}
@media(max-height:530px) and (orientation:landscape){#cineTitle.fxp{--h:clamp(78px,20vh,100px)}}

/* ---------- signal lost ---------- */
#signalLoss.fxp strong{display:flex;align-items:center;justify-content:center;width:min(640px,92vw,130vh);aspect-ratio:749/256;background:url(../assets/ui/danger.webp) center/100% 100% no-repeat;font-family:var(--fxp-font);font-size:min(36px,5.4vw,11vh);font-weight:500;letter-spacing:.2em;padding-left:.2em;color:var(--fxp-red-ink)}
#signalLoss.fxp span{margin-top:14px;color:var(--fxp-red-sub);font-weight:600}

/* ---------- perfect evade ---------- */
#evadeCall.fxp{color:var(--fxp-ink);text-shadow:0 1px 3px rgba(6,12,14,.9),0 0 14px rgba(6,12,14,.6)}
#evadeCall.fxp b{position:relative;font-family:var(--fxp-font);font-weight:500;font-size:clamp(22px,2.7vw,36px);letter-spacing:.2em;padding-left:.2em}
#evadeCall.fxp b:before,#evadeCall.fxp b:after{content:"";position:absolute;top:50%;height:clamp(34px,4vw,54px);transform:translateY(-50%);background-repeat:no-repeat;background-size:100% 100%}
#evadeCall.fxp b:before{right:calc(100% + 4px);width:calc(clamp(34px,4vw,54px)*2.083);background-image:url(../assets/ui/evade-0.webp);-webkit-mask-image:linear-gradient(90deg,transparent,#000 50%);mask-image:linear-gradient(90deg,transparent,#000 50%)}
#evadeCall.fxp b:after{left:calc(100% + 4px);width:calc(clamp(34px,4vw,54px)*2.008);background-image:url(../assets/ui/evade-2.webp);-webkit-mask-image:linear-gradient(270deg,transparent,#000 50%);mask-image:linear-gradient(270deg,transparent,#000 50%)}
#evadeCall.fxp span{color:#e7e2d4;letter-spacing:.24em;margin-top:8px}
#evadeCall.fxp.on b:before{animation:fxpClampL .5s var(--fxp-ease) both}
#evadeCall.fxp.on b:after{animation:fxpClampR .5s var(--fxp-ease) both}
@keyframes fxpClampL{from{opacity:0;transform:translate(-40%,-50%)}to{opacity:1;transform:translateY(-50%)}}
@keyframes fxpClampR{from{opacity:0;transform:translate(40%,-50%)}to{opacity:1;transform:translateY(-50%)}}
@media(max-width:700px){#evadeCall.fxp b:before,#evadeCall.fxp b:after{height:30px}#evadeCall.fxp b:before{width:62px}#evadeCall.fxp b:after{width:60px}}

/* ---------- hazard tag over the frame (overheat = orange, threat cue = red) ---------- */
/* caps 24 / 27 px and a 6 px fill strip at 96 px */
#heatWarning.fxp{--th:24px;height:var(--th);padding:0 calc(var(--th)*.42) 0 calc(var(--th)*.4);gap:6px;border:0;box-shadow:none;background:url(../assets/ui/tag-o-0.webp) left center/auto 100% no-repeat,url(../assets/ui/tag-o-3.webp) right center/auto 100% no-repeat,url(../assets/ui/tag-o-1.webp) center/100% 100% no-repeat;color:#ffd7bc}
#heatWarning.fxp.evade{background:url(../assets/ui/tag-0.webp) left center/auto 100% no-repeat,url(../assets/ui/tag-3.webp) right center/auto 100% no-repeat,url(../assets/ui/tag-1.webp) center/100% 100% no-repeat;color:var(--fxp-red-ink)}
#heatWarning.fxp>span{font-family:var(--fxp-font);font-size:12px;font-weight:500;letter-spacing:.12em;line-height:1}
#heatWarning.fxp>svg{stroke:currentColor}
#heatWarning.fxp:after{bottom:-3px;width:5px;height:5px;background:none;border-color:currentColor;opacity:.75}
@media(max-width:700px){#heatWarning.fxp{--th:21px}#heatWarning.fxp>span{font-size:11px}}

@media(prefers-reduced-motion:reduce){
 #banner.fxp.in *,#fxAlert.in *,#cineTitle.fxp.on>*,#cineTitle.fxp.on:before,#evadeCall.fxp.on b:before,#evadeCall.fxp.on b:after{animation-duration:.01s!important;animation-delay:0s!important}
}
body.bg #fxAlert{display:none}