.battle-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;opacity:0;transition:opacity .7s;pointer-events:none}.battle-video.is-loaded{opacity:1}.battle-vfx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;opacity:0}.battle-vfx.is-playing{opacity:1}.spell-ring{position:absolute;left:53%;top:53%;width:140px;height:140px;border:2px solid var(--element);border-radius:50%;box-shadow:0 0 25px var(--element),inset 0 0 25px var(--element);transform:translate(-50%,-50%) scale(.1);opacity:0}.spell-ring:after{content:'';position:absolute;inset:13px;border:1px dashed var(--element);border-radius:50%}.spell-slash{position:absolute;left:27%;top:48%;width:50%;height:3px;background:var(--element);box-shadow:0 0 18px 7px var(--element);transform:rotate(-28deg) scaleX(0);opacity:0}.spell-particle{position:absolute;left:53%;top:53%;width:5px;height:5px;border-radius:1px;background:var(--element);box-shadow:0 0 12px var(--element);opacity:0}.is-playing .spell-ring{animation:spell-ring .75s ease-out both}.is-playing .spell-slash{animation:spell-slash .45s .08s ease-out both}.is-playing .spell-particle{animation:spell-particle .8s var(--delay) ease-out both}.powerful .spell-ring{width:220px;height:220px}.powerful .spell-slash{height:5px}.skill-cutin{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;opacity:0;background:linear-gradient(100deg,#090f10e6 5%,#0c1618e6 60%,color-mix(in srgb,var(--element) 27%,#091416) 100%);border-block:1px solid var(--element)}.skill-cutin.is-playing{animation:skill-cutin 1s ease-in-out both}.skill-cutin:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-22deg,transparent 0,transparent 35px,#ffffff04 36px,#ffffff04 37px);opacity:.6}.skill-cutin-portrait{position:absolute;left:0;top:-25%;height:155%;width:46%;background-image:url('./assets/heroes.png');background-size:500% 100%;background-position:calc(var(--portrait) * 25%) center;mask-image:linear-gradient(90deg,#000 60%,transparent);filter:contrast(1.07)}.skill-cutin-rune{position:absolute;right:8%;top:8%;font:200px/1 var(--serif);color:var(--element);opacity:.07;transform:rotate(-10deg)}.skill-cutin-copy{position:absolute;left:43%;top:50%;transform:translateY(-50%);z-index:1;white-space:nowrap}.skill-cutin-copy span{font-size:8px;letter-spacing:2.5px;color:var(--element)}.skill-cutin-copy strong{display:block;font:600 clamp(24px,3vw,39px)/1.8 var(--serif);letter-spacing:5px;color:#fff3dc;text-shadow:0 0 25px color-mix(in srgb,var(--element) 45%,transparent)}.skill-cutin-copy small{font-size:11px;letter-spacing:3px;color:#b9c3b4}.wave-intro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;z-index:5;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,#081317ed 30%,#081317ed 70%,transparent);text-align:center}.wave-intro.is-playing{animation:wave-intro 1.5s ease-in-out both}.wave-intro span{font-size:9px;letter-spacing:4px;color:var(--gold)}.wave-intro strong{font:500 clamp(21px,3vw,34px)/1.5 var(--serif);letter-spacing:4px}.wave-intro i{font-style:normal;font-size:10px;letter-spacing:3px;color:#b1b8a7}.hero-card.is-attacking{animation:hero-charge .7s ease-out}.hero-card.is-attacking:before{content:'';position:absolute;inset:0;border:2px solid var(--element);z-index:2;box-shadow:inset 0 0 25px color-mix(in srgb,var(--element) 50%,transparent)}.enemy-intent.attacking{color:var(--fire);animation:intent-strike .4s ease-out}.active-buffs{display:flex;gap:5px}.buff-tag{font-size:8px;padding:3px 6px;border:1px solid currentColor;border-radius:3px;background:#0002;letter-spacing:.5px}.board-panel.player-hit{animation:player-hit .4s ease-in-out}.damage-breakdown{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap;font:10px Arial,sans-serif;letter-spacing:1px}.damage-breakdown>span{white-space:nowrap}
@keyframes spell-ring{0%{transform:translate(-50%,-50%) scale(.15);opacity:.8}70%{opacity:.5}100%{transform:translate(-50%,-50%) scale(2.8);opacity:0}}@keyframes spell-slash{15%{opacity:1;transform:rotate(-28deg) scaleX(1)}100%{opacity:0;transform:rotate(-28deg) scaleX(1.2)}}@keyframes spell-particle{10%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) rotate(100deg)}}@keyframes skill-cutin{0%{opacity:0;transform:translateX(-8%)}15%,70%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(7%)}}@keyframes wave-intro{0%{opacity:0;transform:scale(.97)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}@keyframes hero-charge{25%{transform:translateY(-5px);filter:brightness(1.3)}100%{transform:translateY(0)}}@keyframes intent-strike{50%{transform:scale(1.13);filter:brightness(1.8)}}@keyframes player-hit{30%{box-shadow:inset 0 0 50px #d9715555;border-color:#d97155;transform:translateX(-3px)}65%{transform:translateX(3px)}}
@media(max-width:650px){.skill-cutin-copy{left:41%}.skill-cutin-copy span{font-size:6px;letter-spacing:1.6px}.skill-cutin-copy strong{font-size:23px;letter-spacing:3px}.skill-cutin-copy small{font-size:9px;letter-spacing:2px}.skill-cutin-rune{font-size:120px}.wave-intro{gap:7px}.wave-intro span{font-size:7px;letter-spacing:2px}.wave-intro strong{font-size:22px}.wave-intro i{font-size:9px}.damage-breakdown{font-size:8px;gap:5px}}
@media(prefers-reduced-motion:reduce){.battle-video,.battle-vfx,.skill-cutin,.wave-intro{display:none}.hero-card.is-attacking,.enemy-intent.attacking,.board-panel.player-hit{animation:none}}
.opening-modal{width:min(1000px,calc(100vw - 24px));padding:28px;background:#11191d}.opening-modal h2{font-size:24px;margin:10px 0 20px}.opening-modal video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#070c11;border:1px solid #d0ad7633;border-radius:3px}.opening-modal>p{font-size:10px;letter-spacing:1px;margin:14px 0 0}#opening-button{color:var(--gold);white-space:nowrap}.skill-cutin-portrait{background-size:500% auto;background-position:calc(var(--portrait) * 25%) 20%}
.hero-portrait{background-size:500% auto;background-position:calc(var(--portrait) * 25%) 20%}
.battle-vfx.fire .spell-particle{width:9px;height:17px;clip-path:polygon(50% 0,100% 70%,50% 100%,0 70%)}
.battle-vfx.water .spell-ring{border-width:5px;box-shadow:0 0 35px var(--element),inset 0 0 22px var(--element)}
.battle-vfx.water .spell-slash{border-radius:50%;height:30px;background:transparent;border-top:3px solid var(--element);box-shadow:0 -7px 16px -6px var(--element)}
.battle-vfx.wood .spell-particle{width:12px;height:8px;border-radius:100% 0 100% 0}
.battle-vfx.wood .spell-ring{border-radius:30%;transform:rotate(45deg)}
.battle-vfx.light .spell-slash:after{content:'';position:absolute;inset:0;transform:rotate(90deg);background:inherit;box-shadow:inherit}
.battle-vfx.dark.is-playing .spell-ring{animation:shadow-ring .8s ease-out both;border-width:8px}
.battle-vfx.dark .spell-particle{width:9px;height:9px;border-radius:50%;filter:blur(2px)}
@keyframes shadow-ring{0%{transform:translate(-50%,-50%) scale(2);opacity:0}30%{opacity:.8}100%{transform:translate(-50%,-50%) scale(.1);opacity:0}}
@media(max-width:650px){.skill-cutin-portrait{top:0;height:100%}.opening-modal{padding:20px 12px 12px}.opening-modal h2{font-size:18px}.opening-modal .eyebrow{font-size:7px;letter-spacing:1px}.page-footer{flex-wrap:wrap;column-gap:14px}.page-footer .element-legend{order:3;flex-basis:100%;justify-content:center}.page-footer>span{margin-right:auto}}
/* Prologue (gear menu → 序章) on desktop: carved stone tablet + gold medal close, no English kicker; the mobile dialog is untouched. */
body.desktop-game #opening-dialog.opening-modal{--op-b:clamp(22px,2.6vh,36px);box-sizing:border-box;width:min(1400px,calc(100vw - 64px),calc((100vh - 250px)*16/9 + 2*var(--op-b) + 48px));max-width:none;max-height:none;overflow:visible;padding:calc(var(--op-b)*.2 + 6px) 24px 14px;border:var(--op-b) solid transparent;border-radius:0;border-image:url("./assets/pages/_kit/panel.webp") 200 fill / var(--op-b) stretch;background:none;box-shadow:none;filter:drop-shadow(0 18px 36px #000c);color:var(--uk-text)}
body.desktop-game #opening-dialog.opening-modal::backdrop{background:radial-gradient(ellipse at 50% 46%,#0a1420cc,#03070cf2 72%);backdrop-filter:blur(4px)}
body.desktop-game #opening-dialog.opening-modal>.eyebrow{display:none}
body.desktop-game #opening-dialog.opening-modal>h2{margin:4px 64px 14px;text-align:center;font:700 clamp(20px,2.6vh,32px)/1.3 var(--uk-serif);letter-spacing:.14em;color:var(--uk-gold-hi,#f3dfae);text-shadow:0 2px 3px #000,0 0 12px #e5ba5244}
body.desktop-game #opening-dialog.opening-modal>video{border:0;border-radius:2px;box-shadow:0 0 0 2px #8a6a32,0 0 0 4px #2a1d0e,0 0 0 5px #d4b47766,0 8px 18px #000b}
body.desktop-game #opening-dialog.opening-modal>p{margin:16px 0 0;text-align:center;font:400 max(var(--uk-min,14px),1.5vh)/1.5 var(--uk-sans);letter-spacing:.08em;color:#e6dcc0;text-shadow:0 1px 2px #000}
body.desktop-game #opening-dialog.opening-modal>.modal-close{position:absolute;right:2px;top:-4px;width:clamp(40px,5vh,56px);height:clamp(40px,5vh,56px);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:url("./assets/pages/_kit/icon-medal.webp") center/contain no-repeat;color:var(--uk-gold-hi,#f3dfae);font:700 clamp(20px,2.6vh,30px)/1 var(--uk-serif);text-shadow:0 1px 2px #000;filter:drop-shadow(0 3px 5px #000b);transition:transform .16s,filter .16s}
body.desktop-game #opening-dialog.opening-modal>.modal-close:hover{transform:scale(1.06);filter:brightness(1.12) drop-shadow(0 0 8px #ffd27a99)}
body.desktop-game #opening-dialog.opening-modal>.modal-close:focus-visible{outline:2px solid #f1d896;outline-offset:3px}
@media (prefers-reduced-motion:reduce){body.desktop-game #opening-dialog.opening-modal>.modal-close{transition:none}}
/* Never show the 1920-wide prologue film above its native pixels on high-DPR screens. */
@media (min-resolution:1.5dppx){body.desktop-game #opening-dialog.opening-modal{width:min(calc(1276px + 2*var(--op-b) + 48px),calc(100vw - 64px),calc((100vh - 250px)*16/9 + 2*var(--op-b) + 48px))}}
@media (min-resolution:2dppx){body.desktop-game #opening-dialog.opening-modal{width:min(calc(956px + 2*var(--op-b) + 48px),calc(100vw - 64px),calc((100vh - 250px)*16/9 + 2*var(--op-b) + 48px))}}