/* v6.1 연출 CSS: 코드로만 만든 효과. 모든 연출 레이어는 클릭을 가리지 않음. */
.fx61-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 84; }
.fx61-ov, .fx61-pop, .fx61-cap, .fx61-rip { position: fixed; pointer-events: none !important; }
.fx61-ov *, .fx61-pop *, .fx61-cap * { pointer-events: none !important; }
.fx61-flash { inset: 0; z-index: 88; background: rgb(var(--fc, 255,255,255)); opacity: 0; animation: fx61-flash var(--fd, 420ms) ease-out both; }
@keyframes fx61-flash { 0% { opacity: var(--fa, .5); } 100% { opacity: 0; } }
.fx61-vig { inset: 0; z-index: 87; box-shadow: inset 0 0 90px 30px rgba(var(--fc, 255,70,70), .55); opacity: 0; animation: fx61-vig var(--fd, 600ms) ease-out both; }
@keyframes fx61-vig { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.fx61-pop { z-index: 89; transform: translate(-50%, -50%); font-weight: 900; font-size: 22px; letter-spacing: .04em; color: var(--pc, #fff); text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 14px var(--pc, #fff); animation: fx61-pop 1s cubic-bezier(.2,1.4,.4,1) both; white-space: nowrap; }
.fx61-pop.crit { color: #ffe27a; font-size: 30px; --pc: #ffcf3a; }
.fx61-pop.weak { color: #ff9a9a; --pc: #ff5a5a; }
.fx61-pop.st { font-size: 15px; }
@keyframes fx61-pop { 0% { transform: translate(-50%, -30%) scale(.3); opacity: 0; } 20% { transform: translate(-50%, -60%) scale(1.3); opacity: 1; } 70% { transform: translate(-50%, -90%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -130%) scale(.9); opacity: 0; } }
/* 몹 예고 동작 */
.fx61-cap { z-index: 88; transform: translateX(-50%); padding: 4px 10px; border-radius: 99px; background: rgba(10,8,16,.86); border: 1px solid #ffb35a; color: #ffe2b0; font-size: 12px; font-weight: 800; max-width: 86vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fx61-cap .5s ease-out both; }
.fx61-cap.is-boss { border-color: #ff5a5a; color: #ffd0d0; font-size: 14px; box-shadow: 0 0 14px rgba(255,70,70,.6); animation: fx61-cap .5s ease-out both, fx61-blink .3s .3s steps(2) 2; }
@keyframes fx61-cap { from { opacity: 0; transform: translate(-50%, 10px) scale(.8); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes fx61-blink { 50% { opacity: .4; } }
.mob.fx61-tele .mob-body { animation: fx61-wind .42s ease-in-out both !important; filter: drop-shadow(0 0 10px var(--tc, #ffb35a)) brightness(1.25); }
@keyframes fx61-wind { 0% { transform: scale(1); } 40% { transform: translateY(8%) scale(1.14, .88); } 100% { transform: translateY(-6%) scale(.94, 1.12); } }
/* 드롭: 전설 광선 / 신화 오로라 */
.fx61-rays { inset: 0; z-index: 82; background: repeating-conic-gradient(from 0deg at 50% 32%, rgba(255,214,110,.28) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle at 50% 32%, #000 0, transparent 70%); mask: radial-gradient(circle at 50% 32%, #000 0, transparent 70%); animation: fx61-rays 1.4s ease-out both; }
@keyframes fx61-rays { 0% { opacity: 0; transform: rotate(0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(40deg) scale(1.3); } }
.fx61-aurora { inset: 0; z-index: 82; background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.35), transparent 40%), conic-gradient(from 0deg at 50% 32%, #ff5f6d, #ffc371, #67e8a5, #5ab4ff, #b07cff, #ff5f6d); mix-blend-mode: screen; opacity: 0; animation: fx61-aurora 1.6s ease-in-out both; }
@keyframes fx61-aurora { 0% { opacity: 0; filter: hue-rotate(0); } 20% { opacity: .55; } 70% { opacity: .4; filter: hue-rotate(160deg); } 100% { opacity: 0; filter: hue-rotate(300deg); } }
/* 화면 전환 */
.fx61-in { animation: fx61-in .42s cubic-bezier(.2,.8,.2,1) both; }
#run-view.fx61-in { animation-name: fx61-wipe; }
#battle-view.fx61-in { animation-name: fx61-iris; }
#world-view.fx61-in { animation-name: fx61-zoom; }
#result-view.fx61-in { animation-name: fx61-rise; }
@keyframes fx61-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes fx61-wipe { from { clip-path: inset(0 0 0 100%); opacity: .4; } to { clip-path: inset(0); opacity: 1; } }
@keyframes fx61-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes fx61-zoom { from { opacity: 0; transform: scale(.94); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fx61-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
html[data-fx="low"] .fx61-in { animation-duration: .12s; animation-name: fx61-in; }
/* 마이크로 인터랙션 */
.fx61-rip { z-index: 86; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--rc, rgba(255,255,255,.8)); animation: fx61-rip .5s ease-out both; }
@keyframes fx61-rip { from { transform: scale(.4); opacity: .9; } to { transform: scale(6); opacity: 0; } }
.seed-btn:not(:disabled):active, .set-chip:active, .map-card:active { transform: scale(.95); transition: transform .06s; }
.seed-btn, .set-chip { transition: transform .15s cubic-bezier(.2,1.6,.4,1), box-shadow .2s; }
@media (hover: hover) { .draft-card:hover, .run-card:not(:disabled):hover { box-shadow: 0 0 18px rgba(255,255,255,.28); background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 55%); } }
@media (prefers-reduced-motion: reduce) { .fx61-in, .fx61-flash, .fx61-vig, .fx61-rays, .fx61-aurora { animation-duration: .01ms !important; } }