/* ── Boss arena room (full-screen vignette) ── */ .boss-arena-room{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;transition:opacity 1.2s ease;background:radial-gradient(ellipse 72% 65% at center,transparent 45%,rgba(0,6,20,.68) 100%)} .boss-arena-room--visible{opacity:1} /* Quest block hidden during boss fight */ .boss-fight-active #hud2-quest-block{visibility:hidden!important} /* ── Boss entity / fragment / telegraph ── */ .boss-entity { position: fixed; pointer-events: none; z-index: 600; } .boss-hp-arc { position: absolute; overflow: visible; pointer-events: none; z-index: 2; } .boss1 { position: fixed; pointer-events: none; z-index: 600; transition: none; } .boss1-fragment { position: fixed; pointer-events: none; z-index: 599; } .boss1-telegraph-line { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 598; overflow: visible; } .boss1-telegraph-line__path { stroke: rgba(232, 80, 0, 0.88); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 9; filter: drop-shadow(0 0 8px rgba(232, 80, 0, 0.8)); } .boss1-telegraph-line__target { fill: rgba(232, 80, 0, 0.08); stroke: rgba(255, 190, 110, 0.95); stroke-width: 2; filter: drop-shadow(0 0 10px rgba(232, 80, 0, 0.75)); } .boss1-weak-shard { position: fixed; width: 14px; height: 14px; pointer-events: none; z-index: 602; transition: opacity 0.18s linear; } /* ── Boss 1 "Convergence" — layered sprite stack ── .boss1 left/top are JS-driven every frame (collision). Children use transform safely. */ .boss1-sprite { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; will-change: transform, filter; transition: filter 0.12s ease-out; } .boss1-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: -webkit-optimize-contrast; transform-origin: 50% 50%; pointer-events: none; user-select: none; } /* Paint order: outer_glow → petals → body_horns → cracks */ .boss1-layer--outer_glow { z-index: 1; } .boss1-layer--petals { z-index: 2; transition: transform 0.18s ease-out; } .boss1-layer--body_horns { z-index: 3; } .boss1-layer--cracks { z-index: 4; transition: opacity 0.15s ease-out, filter 0.15s ease-out; } /* Phase-transition ghost: clone of outgoing layer dissolves during instant src-swap */ .boss1-layer-ghost { animation: boss1-layer-ghost-fade 0.34s ease-out forwards; pointer-events: none; } @keyframes boss1-layer-ghost-fade { 0% { opacity: 1; } 100% { opacity: 0; } } /* Charge/Telegraph wind-up */ .boss1-sprite--charging { transition: transform 0.16s ease-in; } .boss1-sprite--charging .boss1-layer--body_horns { filter: brightness(1.6) saturate(1.25); transition: filter 0.16s ease-in; } /* Damage flash on every hit */ .boss1-sprite--hit { animation: boss1-damage-flash 0.26s ease-out; } @keyframes boss1-damage-flash { 0% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 30% { filter: brightness(2.4) drop-shadow(0 0 22px #ffffff) saturate(0.4); } 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } } /* ── Runtime FX (appended to , positioned at snapshot coords, self-removing) ── */ .boss1-fx { position: fixed; pointer-events: none; transform: translate(-50%, -50%); } /* phase_shift_ripple */ .boss1-phase-ripple { --fx-color: #4499ff; width: 90px; height: 90px; z-index: 599; border-radius: 50%; border: 2px solid var(--fx-color); box-shadow: 0 0 18px var(--fx-color), inset 0 0 14px var(--fx-color); animation: boss1-phase-ripple-life 0.6s ease-out forwards; } @keyframes boss1-phase-ripple-life { 0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } } /* charge_pulse */ .boss1-charge-pulse { --fx-color: #ff6644; --fx-life: 600ms; width: 70px; height: 70px; z-index: 599; border-radius: 50%; background: radial-gradient(circle, var(--fx-color) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; animation: boss1-charge-pulse-life var(--fx-life) ease-in forwards; } @keyframes boss1-charge-pulse-life { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); filter: brightness(1); } 70% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.1); filter: brightness(1.3); } 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.35); filter: brightness(1.7); } } /* lunge_trail — echo afterimages along the lunge vector */ .boss1-lunge-echo { --fx-color: #ff6644; --fx-delay: 0s; --fx-scale: 1; width: 70px; height: 70px; z-index: 597; border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%; background: radial-gradient(circle, var(--fx-color) 0%, rgba(255, 255, 255, 0) 72%); opacity: 0; animation: boss1-lunge-echo-life 0.5s ease-out forwards; animation-delay: var(--fx-delay); } @keyframes boss1-lunge-echo-life { 0% { opacity: 0.55; transform: translate(-50%, -50%) scale(var(--fx-scale)); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--fx-scale) * 0.7)); } } /* defeat_burst — final shockwave + radiating shards */ .boss1-defeat-burst { --fx-color: #ff6600; width: 4px; height: 4px; z-index: 603; filter: drop-shadow(0 0 16px var(--fx-color)); } .boss1-defeat-burst__ring, .boss1-defeat-burst__core, .boss1-defeat-burst__shard { position: absolute; left: 0; top: 0; } .boss1-defeat-burst__ring { width: 16px; height: 16px; border-radius: 999px; border: 3px solid var(--fx-color); transform: translate(-50%, -50%); animation: boss1-defeat-ring 0.85s ease-out forwards; } .boss1-defeat-burst__core { width: 22px; height: 22px; border-radius: 999px; transform: translate(-50%, -50%); background: radial-gradient(circle, #ffffff 0%, var(--fx-color) 45%, rgba(255, 255, 255, 0) 75%); animation: boss1-defeat-core 0.7s ease-out forwards; } .boss1-defeat-burst__shard { width: var(--shard-len, 50px); height: 3px; border-radius: 999px; transform-origin: 0 50%; transform: translate(0, -50%) rotate(var(--shard-angle, 0deg)); background: linear-gradient(90deg, var(--fx-color) 0%, rgba(255, 255, 255, 0.25) 65%, rgba(255, 255, 255, 0) 100%); opacity: 0; animation: boss1-defeat-shard 0.9s ease-out forwards; animation-delay: var(--shard-delay, 0s); } @keyframes boss1-defeat-ring { 0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(7.5); } } @keyframes boss1-defeat-core { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4); } 45% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } } @keyframes boss1-defeat-shard { 0% { opacity: 0; transform: translate(0, -50%) rotate(var(--shard-angle, 0deg)) scaleX(0.15); } 20% { opacity: 1; transform: translate(0, -50%) rotate(var(--shard-angle, 0deg)) scaleX(1); } 100% { opacity: 0; transform: translate(0, -50%) rotate(var(--shard-angle, 0deg)) scaleX(1.3); } }