/* Matrix E.V.E. — self-contained, presentation-only encounter viewport. */
/* Matrix is a scene plus encounter notes, rather than the regular 110px portrait. */
main:has(.boss-area.matrix-boss){container-type:inline-size;container-name:matrix-combat}
.boss-area.matrix-boss{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:20px;padding:16px;min-width:0;isolation:isolate}
.boss-area.matrix-boss::after{display:none}
.boss-area.matrix-boss>#matrix-scene-host{position:relative;z-index:2;display:block;grid-column:auto;grid-row:auto;align-self:stretch;width:100%;max-width:100%;min-width:0;min-height:420px;margin:0;padding:0;border:0;background:none;box-shadow:none;overflow:hidden}
.boss-area.matrix-boss>.boss-info{position:relative;z-index:2;width:100%;min-width:0;align-self:center}
.boss-area.matrix-boss>#matrix-scene-host>.matrix-scene{width:100%;height:100%;min-height:420px}
.boss-area.matrix-boss>#matrix-scene-host .matrix-portrait{max-width:none;max-height:none;object-fit:contain;object-position:50% 48%;transform:scale(1.08)}
.boss-area.matrix-boss .boss-head{flex-wrap:wrap;gap:4px 14px}
@container matrix-combat (max-width:1100px){
 .boss-area.matrix-boss{grid-template-columns:minmax(0,1fr);gap:16px}
 .boss-area.matrix-boss>#matrix-scene-host,.boss-area.matrix-boss>.boss-info{grid-column:1;grid-row:auto}
 .boss-area.matrix-boss>#matrix-scene-host>.matrix-scene{height:440px;min-height:420px}
}
@supports not (container-type:inline-size){
 @media(max-width:1600px){.boss-area.matrix-boss{grid-template-columns:minmax(0,1fr)}.boss-area.matrix-boss>#matrix-scene-host,.boss-area.matrix-boss>.boss-info{grid-column:1;grid-row:auto}}
}
.matrix-scene{--matrix-color:#74e6ff;position:relative;isolation:isolate;display:block;width:100%;height:clamp(320px,47vw,490px);min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--matrix-color) 54%,#283744);border-radius:13px;background:#0b101a;box-shadow:inset 0 0 55px #0008,0 0 22px color-mix(in srgb,var(--matrix-color) 10%,transparent);contain:layout paint;color:#eff8ff}
.matrix-scene *{box-sizing:border-box}
.matrix-camera,.matrix-art,.matrix-form,.matrix-fx{position:absolute;inset:0}
.matrix-camera{transform-origin:50% 43%;will-change:auto}
.matrix-running .matrix-camera{will-change:transform}
.matrix-form{opacity:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,#223347,#07111d 80%)}
.matrix-form.matrix-current{opacity:1;z-index:2}
.matrix-form.matrix-outgoing{z-index:3}
.matrix-art-backdrop{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;object-position:50% 38%;filter:blur(9px) brightness(.47) saturate(.75);opacity:.8;pointer-events:none}
.matrix-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 48%;pointer-events:none;user-select:none;image-rendering:auto}
.matrix-art-missing::after{position:absolute;inset:28% 20%;display:grid;place-items:center;content:'MATRIX E.V.E.';color:var(--matrix-color);font:700 clamp(18px,5vw,36px)/1.3 monospace;letter-spacing:.14em;border:1px solid currentColor;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,#11192e,#182a38)}
.matrix-depth{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.33;background:linear-gradient(90deg,#02050c85,transparent 25%,transparent 75%,#02050c85),linear-gradient(0deg,#050813a6,transparent 32%)}
.matrix-depth i{position:absolute;bottom:-38%;width:1px;height:65%;background:linear-gradient(transparent,var(--matrix-color));transform-origin:50% 100%;opacity:.5}
.matrix-depth i:nth-child(1){left:8%;transform:rotate(43deg)}
.matrix-depth i:nth-child(2){left:34%;transform:rotate(20deg)}
.matrix-depth i:nth-child(3){right:34%;transform:rotate(-20deg)}
.matrix-depth i:nth-child(4){right:8%;transform:rotate(-43deg)}
.matrix-sight{position:absolute;inset:0;z-index:5;opacity:.65;pointer-events:none}
.matrix-sight i{position:absolute;width:15px;height:15px;border-color:var(--matrix-color);border-style:solid}
.matrix-sight i:nth-child(1){left:12px;top:12px;border-width:1px 0 0 1px}
.matrix-sight i:nth-child(2){right:12px;top:12px;border-width:1px 1px 0 0}
.matrix-sight i:nth-child(3){left:12px;bottom:12px;border-width:0 0 1px 1px}
.matrix-sight i:nth-child(4){right:12px;bottom:12px;border-width:0 1px 1px 0}
.matrix-caption{position:absolute;z-index:7;left:15px;right:15px;bottom:13px;display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:end;pointer-events:none;text-shadow:0 2px 4px #000}
.matrix-caption::before{content:'';position:absolute;z-index:-1;inset:-20px -15px -14px;background:linear-gradient(transparent,#030813d9)}
.matrix-identity{font:700 10px/1.3 monospace;letter-spacing:.2em;color:#e0ecfa}
.matrix-phase-name{grid-column:1;font-size:clamp(13px,1.6vw,17px);font-weight:700;line-height:1.3;letter-spacing:.07em;color:var(--matrix-color)}
.matrix-phase-pips{grid-column:2;grid-row:1/3;display:flex;gap:5px;margin-bottom:3px}
.matrix-phase-pips i{display:block;width:22px;height:3px;background:#495364}
.matrix-phase-pips .matrix-pip-active{background:var(--matrix-color);box-shadow:0 0 6px color-mix(in srgb,var(--matrix-color) 50%,transparent)}
.matrix-action-status{position:absolute;z-index:8;left:50%;top:17px;max-width:calc(100% - 36px);transform:translateX(-50%);padding:6px 11px;white-space:normal;text-align:center;font-size:12px;font-weight:800;letter-spacing:.08em;line-height:1.45;border:1px solid color-mix(in srgb,var(--matrix-color) 45%,#475666);border-radius:4px;color:#f3f7ff;background:#09111be8;pointer-events:none;opacity:0}
.matrix-running .matrix-action-status{opacity:1}
.matrix-scene .matrix-skip{position:absolute;right:13px;top:56px;z-index:10;min-height:36px;padding:7px 10px;font-family:inherit;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.03em;color:#f4f7ff;border:1px solid #8396a7;border-radius:5px;background:#101e2aed;cursor:pointer;box-shadow:0 2px 5px #0008}
.matrix-scene .matrix-skip:hover,.matrix-scene .matrix-skip:focus-visible{color:#fff;border-color:var(--matrix-color);outline:2px solid var(--matrix-color);outline-offset:3px}
.matrix-scene .matrix-skip[hidden]{display:none!important}
.matrix-fx{z-index:6;pointer-events:none;overflow:hidden;perspective:500px}
.matrix-fx>i{display:block;position:absolute;pointer-events:none}
.matrix-pixel{left:50%;top:43%;width:var(--size,4px);height:var(--size,4px);opacity:0;background:var(--matrix-color);box-shadow:0 0 5px var(--matrix-color);animation:matrix-pixel-flight .44s var(--delay,250ms) cubic-bezier(.15,.7,.35,1) both}
@keyframes matrix-pixel-flight{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rotation)) scale(.2)}}
.matrix-prism-core{left:50%;top:43%;width:38px;height:38px;margin:-19px;background:linear-gradient(135deg,#d8fbff,var(--matrix-color) 60%,transparent);clip-path:polygon(50% 0,100% 85%,0 85%);opacity:0;animation:matrix-prism-charge .64s ease-out both}
@keyframes matrix-prism-charge{0%{opacity:0;transform:scale(.2) rotate(-14deg)}32%{opacity:.9;transform:scale(1) rotate(0)}50%{opacity:.6;transform:scale(3.5) rotate(8deg)}100%{opacity:0;transform:scale(8) rotate(15deg)}}
.matrix-prism-ray{left:calc(50% - 5px);top:43%;height:100%;width:10px;transform-origin:50% 0;opacity:0;background:linear-gradient(90deg,transparent,var(--matrix-color) 27%,#dffaff 50%,var(--matrix-color) 73%,transparent);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);animation:matrix-prism-release .4s var(--delay) cubic-bezier(.2,.75,.2,1) both}
@keyframes matrix-prism-release{0%{opacity:0;transform:rotate(var(--angle)) scaleX(.08) scaleY(.15)}17%{opacity:.85}55%{opacity:.7;transform:rotate(var(--angle)) scaleX(11) scaleY(2.1)}100%{opacity:0;transform:rotate(var(--angle)) scaleX(16) scaleY(2.7)}}
.matrix-calibration-grid{inset:0;opacity:0;background:linear-gradient(90deg,transparent 49.8%,#8beaff80 50%,transparent 50.2%),linear-gradient(transparent 42.8%,#8beaff80 43%,transparent 43.2%);animation:matrix-grid-sweep .68s both}
@keyframes matrix-grid-sweep{0%{opacity:0;transform:scale(1.1)}32%{opacity:.8;transform:scale(1)}54%{opacity:.25}100%{opacity:0}}
.matrix-lunge-warning{left:50%;top:43%;width:140px;height:140px;margin:-70px;border:1px solid var(--matrix-color);transform:rotate(45deg);opacity:0;animation:matrix-lock-on .36s ease-out both}
@keyframes matrix-lock-on{0%{opacity:0;transform:rotate(45deg) scale(1.5)}65%{opacity:.8;transform:rotate(45deg) scale(.46)}100%{opacity:0;transform:rotate(45deg) scale(.2)}}
.matrix-cut{left:-25%;top:45%;width:150%;height:4px;background:linear-gradient(90deg,transparent,var(--matrix-color) 20%,#ffe5e9 50%,var(--matrix-color) 80%,transparent);box-shadow:0 0 10px var(--matrix-color);opacity:0;transform-origin:center;animation:matrix-cut-strike .31s var(--delay) cubic-bezier(.1,.7,.25,1) both}
@keyframes matrix-cut-strike{0%{opacity:0;transform:rotate(var(--angle)) translateX(-65%) scaleX(.2)}26%{opacity:.9;transform:rotate(var(--angle)) translateX(0) scaleX(1)}44%{opacity:.75;transform:rotate(var(--angle)) translateX(0) scaleX(1)}100%{opacity:0;transform:rotate(var(--angle)) translateX(20%) scaleX(1.05)}}
.matrix-pierce{left:50%;top:42%;width:110%;height:110%;transform-origin:0 0;opacity:0;clip-path:polygon(0 0,100% 100%,52% 100%);background:linear-gradient(135deg,#ffafbd88,transparent 70%);animation:matrix-pierce-strike .4s .24s ease-out both}
@keyframes matrix-pierce-strike{0%{opacity:0;transform:scale(.1)}24%{opacity:.75;transform:scale(1.05)}100%{opacity:0;transform:scale(1.6)}}
.matrix-orbit{left:50%;top:44%;width:var(--size);aspect-ratio:1;opacity:0;border:2px solid var(--matrix-color);border-radius:50%;box-shadow:0 0 9px color-mix(in srgb,var(--matrix-color) 45%,transparent);animation:matrix-orbit-collapse .8s var(--delay) cubic-bezier(.2,.7,.2,1) both}
@keyframes matrix-orbit-collapse{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rotation)) rotateX(66deg) scale(.3)}35%{opacity:.72;transform:translate(-50%,-50%) rotate(var(--rotation)) rotateX(49deg) scale(1)}62%{opacity:.6;transform:translate(-50%,-50%) rotate(var(--rotation)) rotateX(27deg) scale(1.3)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rotation)) rotateX(0deg) scale(2.3)}}
.matrix-pressure-line{left:var(--x);top:-20%;height:140%;width:3px;background:linear-gradient(transparent,var(--matrix-color),#f2e9ff,var(--matrix-color),transparent);opacity:0;animation:matrix-pressure-strike .43s var(--delay) ease-out both}
@keyframes matrix-pressure-strike{0%{opacity:0;transform:scaleY(.05) scaleX(.3)}24%{opacity:.8;transform:scaleY(1) scaleX(1)}46%{opacity:.62;transform:scaleY(1) scaleX(2)}100%{opacity:0;transform:scaleY(1.2) scaleX(7)}}
.matrix-pressure-frame{inset:3%;border:1px solid var(--matrix-color);opacity:0;box-shadow:inset 0 0 35px #9568ce80;animation:matrix-pressure-close .9s ease-out both}
@keyframes matrix-pressure-close{0%{opacity:0;transform:scale(1.2)}38%{opacity:.62;transform:scale(.75)}60%{opacity:.46;transform:scale(.79)}100%{opacity:0;transform:scale(.98)}}
.matrix-mutation-ring{left:50%;top:44%;width:45%;aspect-ratio:1;opacity:0;border:2px solid var(--matrix-color);border-radius:50%;box-shadow:0 0 14px color-mix(in srgb,var(--matrix-color) 35%,transparent);animation:matrix-mutation-open 1.15s cubic-bezier(.15,.7,.2,1) both}
.matrix-mutation-ring-b{animation-delay:.12s;animation-duration:1.03s;border-style:dashed;border-width:1px}
@keyframes matrix-mutation-open{0%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(-22deg)}26%{opacity:.8;transform:translate(-50%,-50%) scale(.8) rotate(0)}70%{opacity:.55;transform:translate(-50%,-50%) scale(2.2) rotate(22deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.1) rotate(40deg)}}
.matrix-reconstruction{inset:0;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 22px,color-mix(in srgb,var(--matrix-color) 20%,transparent) 23px 24px);animation:matrix-rebuild 1.15s ease-in-out both}
@keyframes matrix-rebuild{0%{opacity:0;clip-path:inset(50% 0)}25%{opacity:.7;clip-path:inset(20% 0)}55%{opacity:.5;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
.matrix-mutation-line{left:0;right:0;top:-3%;height:2px;background:var(--matrix-color);box-shadow:0 0 16px var(--matrix-color);opacity:0;animation:matrix-mutation-scan 1.08s .1s ease-in-out both}
@keyframes matrix-mutation-scan{0%{opacity:0;top:0}20%{opacity:.8}80%{opacity:.55}100%{opacity:0;top:101%}}
@media(max-width:640px){
 .boss-area.matrix-boss{grid-template-columns:minmax(0,1fr);padding:10px;gap:14px}
 .boss-area.matrix-boss>#matrix-scene-host{min-height:300px}
 .boss-area.matrix-boss>#matrix-scene-host>.matrix-scene{height:355px;max-height:none;min-height:300px}
 .boss-area.matrix-boss>#matrix-scene-host,.boss-area.matrix-boss>.boss-info{grid-column:1;grid-row:auto}
 .matrix-scene{height:355px;max-height:65svh;min-height:270px;border-radius:10px}
 .matrix-portrait{object-position:50% 45%}
 .matrix-caption{left:12px;right:12px;bottom:12px}
 .matrix-phase-pips i{width:16px}
 .matrix-action-status{top:12px;font-size:11px;padding:5px 9px}
 .matrix-scene .matrix-skip{top:48px;right:12px;min-height:36px}
 .matrix-pixel{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
 .matrix-scene *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .matrix-camera,.matrix-form{transform:none!important}
 .matrix-fx,.matrix-skip{display:none!important}
 .matrix-running .matrix-action-status{opacity:1}
}