/* pickup.css — 픽업 PV(pickup-show.js). 단계: s-open → s-slam → (s-card → s-game)×3, 궁극기 앞 s-ult → s-lock */
.pv { --pv-font: 'Black Han Sans', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  position: absolute; inset: 0; z-index: 50; overflow: hidden; background: #000; cursor: pointer; color: #fff; font-family: var(--pv-font); }
.pv > * { position: absolute; pointer-events: none; }
.pv-bg { inset: -6%; background: center/cover no-repeat; opacity: 0; transition: opacity .2s; }
.pv-bg.on { opacity: 1; animation: pvPan 4s linear forwards; }
@keyframes pvPan { from { transform: scale(1.14) translateX(2%); } to { transform: scale(1.02) translateX(-2%); } }
.pv-lines { inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; z-index: 1; }
.pv-flash { inset: 0; opacity: 0; z-index: 11; }
.pv-bars { inset: 0; z-index: 10; }
.pv-bars::before, .pv-bars::after { content: ''; position: absolute; left: 0; right: 0; height: 8%; background: #000; transition: height .25s; }
.pv-bars::before { top: 0; } .pv-bars::after { bottom: 0; }
.pv-slash { left: 50%; top: 50%; width: 130%; margin: -35% 0 0 -65%; opacity: 0; z-index: 9; mix-blend-mode: screen; }
.pv-burst { left: 50%; top: 50%; width: 95vmin; opacity: 0; z-index: 3; mix-blend-mode: screen; transform: translate(-50%, -50%); }
.pv-skip { pointer-events: auto; right: 14px; top: 10%; z-index: 12; padding: 5px 14px; font: 900 12px var(--pixel-font, sans-serif); color: #f5e6ba; background: rgba(0,0,0,.55); border: 2px solid #f5e6ba; cursor: pointer; }
.pv b, .pv em { font-family: var(--pv-font); font-weight: 900; }
/* 굵은 제목 글씨: 흰색→캐릭터색 그라데이션 + 검은 테두리 */
.pv-title b i, .pv-card-t b, .pv-up em, .pv-plate b {
  color: #fff; text-shadow: -2px -2px 0 #0a0610, 2px -2px 0 #0a0610, -2px 2px 0 #0a0610, 2px 2px 0 #0a0610, 5px 6px 0 color-mix(in srgb, var(--c) 75%, #000), 0 0 26px var(--c); }

/* ① 오프닝 · ② 등장 */
.pv-hero { inset: 0; z-index: 4; opacity: 0; }
.pv-act, .pv-ghost { position: absolute; right: 0; bottom: -3%; height: 100%; transform-origin: 50% 100%; }
.pv-act { filter: drop-shadow(0 0 26px var(--c)); }
.pv-ghost { opacity: 0; filter: brightness(2) saturate(0); mix-blend-mode: screen; }
.s-slam .pv-hero { opacity: 1; }
.s-slam .pv-act { animation: pvSlam .55s cubic-bezier(.15,1.4,.4,1) both, pvPush 2.6s .55s ease-out both; }
.s-slam .pv-ghost { animation: pvGhost .7s ease-out both; }
.s-slam .pv-ghost.g1 { animation-delay: .06s; } .s-slam .pv-ghost.g2 { animation-delay: .12s; } .s-slam .pv-ghost.g3 { animation-delay: .18s; }
@keyframes pvSlam { 0% { opacity: 0; transform: translateX(70%) scale(1.5) skewX(-12deg); filter: blur(10px); } 55% { opacity: 1; filter: blur(0) drop-shadow(0 0 26px var(--c)); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 0 26px var(--c)); } }
@keyframes pvGhost { 0% { opacity: .8; transform: translateX(60%) scale(1.4); } 100% { opacity: 0; transform: translateX(-10%) scale(1.05); } }
@keyframes pvPush { from { transform: none; } to { transform: scale(1.03) translateX(-1%); } }
.pv-title { left: 5%; bottom: 13%; z-index: 6; opacity: 0; max-width: 60%; }
.pv-title em { display: block; font-style: italic; font-size: clamp(14px, 3.2vh, 24px); letter-spacing: 6px; color: #fff; text-shadow: 0 0 12px var(--c), 2px 2px 0 #000; }
.pv-title b { position: relative; display: flex; align-items: flex-end; font-size: clamp(64px, 21vh, 170px); line-height: .95; font-style: italic; }
.pv-title b i { font-style: italic; display: inline-block; opacity: 0; padding-right: .04em; }
.pv-title small { display: inline-block; margin-top: 6px; padding: 3px 14px; font: 900 clamp(13px, 2.8vh, 20px) var(--pv-font); letter-spacing: 3px; background: var(--c); color: #0a0610; transform: skewX(-12deg); }
.pv-title p { margin: 8px 0 0; font: 700 clamp(12px, 2.3vh, 16px) var(--pv-font); color: #e8e0ff; text-shadow: 1px 1px 0 #000; opacity: 0; }
.pv-rar { align-self: center; margin-left: 14px; padding: 2px 14px; font: italic 900 clamp(24px, 6vh, 46px) var(--pv-font); color: #2a1a04; background: linear-gradient(#fff4b0, #ffb830); transform: rotate(-10deg) scale(0); box-shadow: 0 0 24px #ffc84a; }
.s-open .pv-title { opacity: 1; left: 50%; bottom: 44%; transform: translateX(-50%); text-align: center; max-width: none; }
.s-open .pv-title b, .s-open .pv-title small, .s-open .pv-title p { display: none; }
.s-open .pv-title em { font-size: clamp(22px, 6vh, 44px); letter-spacing: 10px; animation: pvGlitch .6s steps(6) both; }
.s-slam .pv-title { opacity: 1; }
.s-slam .pv-title em { animation: pvIn .3s both; }
.s-slam .pv-title b i { animation: pvStamp .3s calc(.3s + var(--i) * .1s) cubic-bezier(.2,1.6,.4,1) both; }
.s-slam .pv-rar { animation: pvRar .35s .85s cubic-bezier(.2,1.6,.4,1) both; }
.s-slam .pv-title small { animation: pvIn .3s 1s both; }
.s-slam .pv-title p { animation: pvIn .4s 1.3s both; }
@keyframes pvStamp { from { opacity: 0; transform: scale(3.2) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes pvRar { to { transform: rotate(-10deg) scale(1); } }
@keyframes pvIn { from { opacity: 0; transform: translateX(-30px) skewX(-12deg); } to { opacity: 1; transform: skewX(-12deg); } }
@keyframes pvGlitch { 0% { opacity: 0; transform: translateX(-40px); } 20% { opacity: 1; clip-path: inset(0 0 60% 0); } 40% { clip-path: inset(40% 0 0 0); transform: translateX(10px); } 60% { clip-path: inset(0 0 20% 0); transform: translateX(-5px); } 100% { opacity: 1; clip-path: none; transform: none; } }

/* ③ 스킬 타이틀 카드 */
.pv-card { inset: 0; z-index: 6; opacity: 0; }
.s-card .pv-card { opacity: 1; }
.pv-card-art { position: absolute; top: 2%; height: 115%; filter: drop-shadow(0 0 24px var(--c)); }
.s-card.k0 .pv-card-art { right: -10%; animation: pvCardR .75s ease-out both; }
.s-card.k1 .pv-card-art { left: -12%; animation: pvCardL .75s ease-out both; }
.s-card.k2 .pv-card-art { right: 0; top: 0; height: 110%; animation: pvCardZ .75s ease-out both; }
@keyframes pvCardR { from { transform: translateX(14%); } to { transform: translateX(0); } }
@keyframes pvCardL { from { transform: scaleX(-1) translateX(14%); } to { transform: scaleX(-1) translateX(0); } }
@keyframes pvCardZ { from { transform: scale(1.15); filter: brightness(2); } to { transform: none; } }
.pv-band { position: absolute; left: -10%; right: -10%; top: 50%; height: 34%; transform: translateY(-50%) rotate(-7deg); background: linear-gradient(90deg, rgba(0,0,0,.92) 20%, color-mix(in srgb, var(--c) 55%, transparent) 75%, transparent); box-shadow: 0 0 0 3px var(--c), 0 0 40px var(--c); }
.s-card.k1 .pv-band { background: linear-gradient(270deg, rgba(0,0,0,.92) 20%, color-mix(in srgb, var(--c) 55%, transparent) 75%, transparent); }
.s-card .pv-band { animation: pvBand .35s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes pvBand { from { transform: translateY(-50%) rotate(-7deg) scaleX(0); } to { transform: translateY(-50%) rotate(-7deg) scaleX(1); } }
.pv-card-t { position: absolute; left: 6%; top: 50%; transform: translateY(-50%) rotate(-7deg); max-width: 70%; }
.s-card.k1 .pv-card-t { left: auto; right: 6%; text-align: right; }
.pv-card-t small { display: block; font: italic 900 clamp(14px, 3vh, 22px) var(--pv-font); letter-spacing: 6px; color: var(--c); text-shadow: 0 0 10px var(--c); }
.s-card.k2 .pv-card-t small { color: #ffd060; }
.pv-card-t b { display: block; font-size: clamp(34px, 10vh, 88px); line-height: 1.05; font-style: italic; }
.pv-card-t p { margin: 4px 0 0; font: 700 clamp(12px, 2.6vh, 18px) var(--pv-font); text-shadow: 2px 2px 0 #000; }
.s-card .pv-card-t { animation: pvTitle .45s .1s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pvTitle { from { opacity: 0; transform: translateY(-50%) rotate(-7deg) translateX(-80px) scale(1.3); } to { opacity: 1; transform: translateY(-50%) rotate(-7deg); } }

/* ③ 전투 장면: 정수 배율 도트 화면 + 장면 태그 */
.pv-game { inset: 0; z-index: 5; opacity: 0; background: #000; display: grid; place-items: center; }
.s-game .pv-game { opacity: 1; }
.pv-screen { position: relative; line-height: 0; }
.pv-screen canvas { display: block; image-rendering: pixelated; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 60%, #000), 0 0 40px color-mix(in srgb, var(--c) 40%, transparent); }
.s-game .pv-screen { animation: pvScreen .5s ease-out both; }
@keyframes pvScreen { from { transform: scale(1.12); filter: brightness(2); } to { transform: none; filter: none; } }
.pv-tag { position: absolute; left: 4%; bottom: 11%; z-index: 7; padding: 5px 50px 7px 16px; background: linear-gradient(90deg, rgba(0,0,0,.88), color-mix(in srgb, var(--c) 40%, transparent) 80%, transparent); border-left: 4px solid var(--c); opacity: 0; }
.pv-tag small { display: block; font: 900 clamp(11px, 2.2vh, 15px) var(--pv-font); letter-spacing: 4px; color: var(--c); }
.pv-tag b { display: block; font-size: clamp(20px, 5vh, 38px); line-height: 1.1; text-shadow: 2px 2px 0 #000; }
.s-game .pv-tag { animation: pvIn .35s .15s both; }
.s-game .pv-bars::before, .s-game .pv-bars::after { height: 10%; }

/* 궁극기 일러스트 섬광 */
.pv-ult { left: 50%; top: 50%; height: 100%; z-index: 7; opacity: 0; transform: translate(-50%, -50%); filter: drop-shadow(0 0 40px var(--c)); }
.s-ult .pv-ult { animation: pvUlt .9s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes pvUlt { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); filter: brightness(3) drop-shadow(0 0 40px var(--c)); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); filter: drop-shadow(0 0 40px var(--c)); } }

/* ④ 마무리 */
.pv-lock { inset: 0; z-index: 6; opacity: 0; }
.s-lock .pv-lock { opacity: 1; }
.pv-lock-art { position: absolute; right: 3%; bottom: -3%; height: 97%; transform-origin: 50% 100%; filter: drop-shadow(0 0 30px var(--c)); }
.s-lock .pv-lock-art { animation: pvSlam .6s cubic-bezier(.15,1.3,.4,1) both, pvPush 3s .6s ease-out both; }
.pv-up { position: absolute; left: 5%; top: 12%; }
.pv-up em { display: block; font-style: italic; font-size: clamp(52px, 16vh, 128px); line-height: .95; }
.pv-up span { display: inline-block; margin-top: 8px; padding: 4px 16px; font: 900 clamp(14px, 3.2vh, 24px) var(--pv-font); background: #c01030; box-shadow: 0 0 18px #ff3050; transform: skewX(-12deg); }
.s-lock .pv-up { animation: pvGlitch .55s .1s steps(6) both; }
.pv-plate { position: absolute; left: 3%; bottom: 14%; width: min(560px, 58%); aspect-ratio: 3.4 / 1; background: center/contain no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pv-plate small { font: 900 clamp(11px, 2.4vh, 17px) var(--pv-font); color: #ffe08a; letter-spacing: 3px; }
.pv-plate b { font-size: clamp(34px, 10vh, 78px); line-height: 1; }
.s-lock .pv-plate { animation: pvStamp .45s .35s cubic-bezier(.2,1.5,.4,1) both; }
.pv-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pv-btn { padding: 5px 14px; font: 900 13px var(--pixel-font), sans-serif; color: #2a1a04; background: linear-gradient(#ffe07a, #e0a030); border: 2px solid #fff4c8; cursor: pointer; }
.pv-left { font-size: 12px; color: #ffd76a; }
@media (max-width: 720px) { .pv-act, .pv-ghost, .pv-lock-art { right: -22%; } .pv-plate { width: 72%; } .pv-title { max-width: 80%; } }

/* Readable editorial hierarchy: one name, one effect, then the actual result. */
.menu:not(.hide) > .pv { animation: none; }
.pv { cursor: default; }
.pv-title { max-width: 54%; bottom: 16%; }
.pv-title em { font: 700 12px 'Noto Sans KR',sans-serif; letter-spacing: .22em; color: #e6d7b8; text-shadow: 0 2px 4px #000; }
.pv-title b { font-size: clamp(38px,7vw,88px); line-height: 1.15; font-style: normal; gap: 12px; text-shadow: 0 3px 0 #102030,0 0 14px #0009; }
.pv-title b > span:first-child { white-space: nowrap; }
.pv-title small { font-size: clamp(13px,2vw,18px); letter-spacing: .05em; transform: none; padding: 5px 10px; }
.pv-title p { max-width: 34em; font: 400 14px/1.8 'Noto Sans KR',sans-serif; word-break: keep-all; }
.pv-rar { font: 700 18px 'Noto Sans KR',sans-serif; padding: 4px 8px; margin-left: 0; box-shadow: none; }
.s-open .pv-title em { font-size: clamp(15px,3vw,26px); letter-spacing: .16em; white-space: nowrap; animation: pvIn .3s both; }
.s-slam .pv-title small,.s-slam .pv-title p { animation: pvCopy .4s .3s both; }
@keyframes pvCopy { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.pv-card-t { left: 7%; max-width: 68%; transform: translateY(-50%); }
.pv-card-t small { font: 700 14px 'Noto Sans KR',sans-serif; letter-spacing: .1em; text-shadow: none; }
.pv-card-t b { font-size: clamp(28px,5vw,64px); font-style: normal; line-height: 1.2; text-shadow: 0 3px 0 #102030; word-break: keep-all; overflow-wrap: anywhere; margin: 8px 0; }
.pv-card-t p { font: 400 clamp(13px,1.7vw,18px)/1.7 'Noto Sans KR',sans-serif; max-width: 32em; word-break: keep-all; }
.s-card .pv-card-t { animation: pvCardCopy .28s .06s both; }
@keyframes pvCardCopy { from { opacity: 0; transform: translateY(-44%); } to { opacity: 1; transform: translateY(-50%); } }
.pv-band { height: 40%; rotate: 0deg; transform: translateY(-50%); box-shadow: none; border-top: 1px solid #ffffff44; border-bottom: 1px solid #ffffff22; }
.s-card .pv-band { animation: none; }
.pv-skip { top: 14px; right: 14px; min-height: 36px; }
.pv-game { padding: 130px 12px 130px; box-sizing: border-box; }
.pv-tag { top: 24px; bottom: auto; left: 5%; right: 110px; padding: 0 0 0 14px; background: none; opacity: 1; }
.pv-tag small { font: 700 12px 'Noto Sans KR',sans-serif; letter-spacing: .1em; }
.pv-tag b { font-size: clamp(22px,3.2vw,36px); margin: 5px 0; }
.pv-tag p { font: 400 13px/1.6 'Noto Sans KR',sans-serif; color: #d3e0e6; margin: 0; word-break: keep-all; }
.s-game .pv-tag { animation: pvCopy .25s both; }
.s-game .pv-bars { display: none; }
.s-game .pv-screen { animation: none; }
.pv-results { position: absolute; bottom: 16px; left: 5%; right: 5%; font: 400 12px 'Noto Sans KR',sans-serif; }
.pv-hp { --pv-hp-color: #e9a56e; display: flex; align-items: center; gap: 12px; color: #e8eee9; font-variant-numeric: tabular-nums; }
.pv-hp span { min-width: 200px; }
.pv-hp progress { width: 100%; height: 12px; appearance: none; border: 0; background: #263543; accent-color: var(--pv-hp-color); }
.pv-hp progress::-webkit-progress-bar { background: #263543; }
.pv-hp progress::-webkit-progress-value { background: var(--pv-hp-color); }
.pv-hp progress::-moz-progress-bar { background: var(--pv-hp-color); }
.pv-numbers { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 6px; }
.pv-numbers span { color: #a7bdc9; }
.pv-numbers b { color: #fce2a9; font: 700 22px 'Noto Sans KR',sans-serif; padding-left: 10px; font-variant-numeric: tabular-nums; }
.pv-results > small { display: block; color: #849ca9; font-size: 10px; }
.pv-game[data-scene="rescue"] .pv-hp { --pv-hp-color: #84d7a1; }
.pv-game[data-scene="rescue"][data-phase="before"] .pv-hp { --pv-hp-color: #ed6577; color: #ff9a9a; }
.pv-game[data-phase="after"] .pv-tag small { color: #9df0c0; }
.pv-up em { font-size: clamp(38px,7vw,80px); font-style: normal; text-shadow: 0 3px 0 #142434; }
.pv-up span { font: 700 clamp(12px,2vw,18px) 'Noto Sans KR',sans-serif; transform: none; background: #743548; box-shadow: none; }
.pv-plate b { font-size: clamp(24px,5vw,64px); text-shadow: 0 3px 0 #142434; }
@media (max-width: 720px) {
  .pv-title { max-width: 88%; left: 6%; bottom: 15%; }
  .pv-title b { font-size: clamp(36px,9vw,58px); }
  .pv-title p { max-width: 26em; padding: 5px 8px; background: #07111ddd; font-size: 12px; }
  .pv-card-t, .s-card.k1 .pv-card-t { left: 7%; right: 7%; max-width: none; text-align: left; }
  .pv-card-t b { font-size: clamp(26px,7vw,42px); }
  .pv-band { background: #0a152be8; }
  .s-card.k1 .pv-band { background: #0a152be8; }
  .pv-tag { top: 60px; right: 5%; }
  .pv-game { padding-top: 165px; padding-bottom: 145px; }
  .pv-numbers span { display: flex; flex-direction: column; }
  .pv-numbers b { padding: 2px 0 0; font-size: 18px; }
  .pv-hp { display: block; }
  .pv-hp span { display: block; margin-bottom: 4px; }
  .pv-plate { width: 88%; left: 6%; }
  .pv-plate b { font-size: clamp(28px,7vw,44px); }
}
@media (max-height: 500px) and (min-width: 600px) {
  .pv-tag { top: 12px; right: 110px; }
  .pv-tag b { font-size: 22px; margin: 2px 0; }
  .pv-tag p { font-size: 11px; }
  .pv-results { bottom: 6px; }
  .pv-numbers { margin: 4px 0; }
  .pv-numbers b { font-size: 16px; }
  .pv-game { padding-top: 85px; padding-bottom: 90px; }
}

/* 캐릭터 PV 영상(pickup-show.js playPickupVideo): 16:9 영상을 화면에 맞춰 검은 여백 위에 */
.pvv { background: #000; }
.pvv video { inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pvv-wait { inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.pvv.loading .pvv-wait { opacity: 1; }
.pvv-wait i { width: 34px; height: 34px; border: 3px solid rgba(245,230,186,.25); border-top-color: #f5e6ba; border-radius: 50%; animation: pvvSpin .8s linear infinite; }
@keyframes pvvSpin { to { transform: rotate(360deg); } }
.pvv-bar { left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); z-index: 12; }
.pvv-bar i { display: block; height: 100%; width: 0; background: #f5e6ba; }
.pvv-sound { pointer-events: auto; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 12; padding: 8px 18px; font: 900 13px var(--pixel-font, sans-serif); color: #2a1a04; background: linear-gradient(#ffe07a, #e0a030); border: 2px solid #fff4c8; cursor: pointer; }
.pvv-sound[hidden] { display: none; }