/* ==========================================================================
   ⚔️ 투기장(PVP): 전투 화면 버튼 / 모달 / 결과 / AI 챔피언 유닛
   ========================================================================== */
.btn-arena-pvp-circle {
  position: absolute; top: 110px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
  border: 1.5px solid #fca5a5; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; z-index: 25; padding: 0; user-select: none; transition: transform 0.15s ease;
}
.btn-arena-pvp-circle:hover { transform: scale(1.1); }
.btn-arena-pvp-circle:active { transform: scale(0.92); }
.pvp-circle-icon { font-size: 0.75rem; line-height: 1; }
.pvp-circle-txt { font-size: 0.42rem; font-weight: 900; color: #fff; line-height: 1; margin-top: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.mobile-frame.dungeon-running #btn-open-pvp { display: none; }

/* AI 챔피언 유닛 (몬스터 자리에 등장): 영웅 쪽을 바라보도록 좌우 반전 */
.monster-combat-unit.pvp-opp .monster-img { height: 70px; transform: scaleX(-1); }
.pvp-opp-badge { white-space: nowrap; font-size: 9px; font-weight: 800; color: #fecaca; }
.pvp-vs { font-size: 11px; font-weight: 900; color: #fca5a5; letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }

#pvp-modal { z-index: 1212; }
#pvp-result-modal { z-index: 1260; }
.pvp-sheet { max-height: 90%; display: flex; flex-direction: column; }
.pvp-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.pvp-section-title { font-size: 12px; font-weight: 900; color: #e2e8f0; margin-top: 4px; }
.pvp-section-title small { font-size: 10px; font-weight: 600; color: #94a3b8; }

.pvp-league { border: 1.5px solid var(--lg); border-radius: 12px; padding: 9px 10px; background: rgba(15, 23, 42, 0.8); box-shadow: 0 0 10px color-mix(in srgb, var(--lg) 30%, transparent); display: flex; flex-direction: column; gap: 5px; }
.pvp-league-top { display: flex; justify-content: space-between; align-items: baseline; }
.pvp-league-name { font-size: 15px; color: var(--lg); }
.pvp-rating { font-size: 15px; font-weight: 900; color: #fde68a; }
.pvp-league-bar { height: 7px; background: #1e293b; border-radius: 4px; overflow: hidden; }
.pvp-league-bar > div { height: 100%; background: linear-gradient(90deg, var(--lg), #fff); }
.pvp-league-sub { display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; }

.pvp-ticket-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: #e2e8f0; background: rgba(30, 41, 59, 0.7); border-radius: 10px; padding: 7px 9px; }
.pvp-ticket-row small { flex: 1; font-size: 10px; font-weight: 600; color: #94a3b8; }

.pvp-cand { display: grid; grid-template-columns: 44px 1fr auto; gap: 6px 8px; align-items: center; background: rgba(15, 23, 42, 0.75); border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 8px; }
.pvp-cand.weak { border-color: rgba(74, 222, 128, 0.45); }
.pvp-cand.even { border-color: rgba(56, 189, 248, 0.45); }
.pvp-cand.strong { border-color: rgba(248, 113, 113, 0.55); }
.pvp-cand-img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; background: rgba(0, 0, 0, 0.3); border-radius: 8px; }
.pvp-cand-main { display: flex; flex-direction: column; min-width: 0; }
.pvp-cand-main b { font-size: 12px; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvp-cand-main small, .pvp-cand-info small { font-size: 10px; color: #94a3b8; }
.pvp-diff { font-weight: 800; color: #e2e8f0; }
.pvp-cand-info { grid-column: 2 / 3; display: flex; flex-direction: column; gap: 1px; }
.pvp-cand .lab-btn { grid-row: 1 / 3; grid-column: 3 / 4; min-width: 54px; }
.pvp-winpct { font-size: 12px; font-weight: 900; }
.pvp-winpct.good { color: #4ade80; }
.pvp-winpct.mid { color: #fbbf24; }
.pvp-winpct.bad { color: #f87171; }

.pvp-season-reward { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(15, 23, 42, 0.85)); border: 1.5px solid #fbbf24; border-radius: 12px; padding: 8px 10px; }
.pvp-season-reward b { font-size: 12px; color: #fde68a; display: block; }
.pvp-season-reward small { font-size: 10px; color: #e2e8f0; }

.pvp-hist, .pvp-rank { display: flex; flex-direction: column; gap: 3px; }
.pvp-hist-row, .pvp-rank-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px; align-items: center; font-size: 11px; background: rgba(30, 41, 59, 0.6); border-radius: 8px; padding: 5px 8px; color: #cbd5e1; }
.pvp-hist-row.win b { color: #4ade80; }
.pvp-hist-row.lose b { color: #f87171; }
.pvp-hist-row em, .pvp-rank-row em { font-style: normal; font-weight: 800; color: #fde68a; }
.pvp-rank-row.me { box-shadow: inset 0 0 0 1.5px #fbbf24; color: #fff; }
.pvp-rank-gap { text-align: center; color: #64748b; font-size: 12px; line-height: 8px; }
.pvp-empty { font-size: 11px; color: #64748b; text-align: center; padding: 8px; }

.pvp-result { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pvp-result.win { box-shadow: 0 0 24px rgba(74, 222, 128, 0.45); }
.pvp-result.lose { box-shadow: 0 0 24px rgba(248, 113, 113, 0.4); }
.pvp-result-title { font-size: 22px; font-weight: 900; color: #fde68a; }
.pvp-result-sub { font-size: 12px; color: #cbd5e1; }
.pvp-result-delta { font-size: 20px; font-weight: 900; }
.pvp-result-delta small { font-size: 11px; font-weight: 600; color: #94a3b8; }
.pvp-result-delta.up { color: #4ade80; }
.pvp-result-delta.down { color: #f87171; }
.pvp-result-note { font-size: 12px; font-weight: 900; }
.pvp-result-note.up { color: #fbbf24; }
.pvp-result-note.down { color: #94a3b8; }
.pvp-result-rewards { font-size: 13px; font-weight: 800; color: #e2e8f0; display: block; line-height: 1.6; }
.pvp-result-rewards small { display: block; margin-top: 2px; font-size: 10px; color: #fbbf24; font-weight: 700; }
.pvp-result-rewards.none { color: #94a3b8; font-weight: 600; font-size: 12px; }
.pvp-result-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }

.pvp-circle-img { display: block; width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }


/* ==========================================================================
   🎬 투기장 다시보기 / 공유
   ========================================================================== */
#pvp-replay-modal { z-index: 1270; }
.pvp-replay-sheet { max-height: 94%; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
/* 실제 전투 화면(410x210)과 같은 구조를 그대로 쓰고 창 너비에 맞춰 크기만 조절 */
.pr-viewport-wrap { position: relative; width: 100%; height: 210px; overflow: hidden; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.12); flex-shrink: 0; background: #0b1220; }
.pr-scene { position: absolute; left: 0; top: 0; width: 410px; height: 210px; min-height: 210px; margin: 0; padding: 0; transform-origin: top left; border-radius: 0; }
.pr-hero-badge { white-space: nowrap; font-size: 9px; font-weight: 800; color: #bbf7d0; }
.pr-banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 26px; font-weight: 900; opacity: 0; transform: scale(0.6); transition: all 0.3s; text-shadow: 0 3px 8px #000; }
.pr-banner.show { opacity: 1; transform: scale(1); }
.pr-banner.win { color: #fde68a; }
.pr-banner.lose { color: #fca5a5; }
.pr-timeline { height: 5px; background: #1e293b; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.pr-timeline > div { height: 100%; width: 0; background: linear-gradient(90deg, #38bdf8, #a78bfa); }
.pr-controls { display: flex; gap: 6px; flex-shrink: 0; }
.pr-controls .lab-btn { flex: 1; padding: 6px 4px; }
.pr-speed.on { background: #38bdf8; color: #0f172a; border-color: #38bdf8; }
.pr-info { font-size: 11px; color: #cbd5e1; text-align: center; flex-shrink: 0; }
.pr-share { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex-shrink: 0; }

.pvp-hist-row { flex-wrap: wrap; }
.pvp-hist-btns { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 2px; }
.pvp-hist-btns .lab-btn { flex: 1; padding: 4px 4px; font-size: 10px; }
.pvp-code-row { display: flex; gap: 6px; align-items: stretch; }
.pvp-code-input { flex: 1; min-width: 0; background: rgba(30, 41, 59, 0.8); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 6px 8px; font-size: 11px; resize: none; user-select: text; }
.pvp-result-share { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.chat-replay-btn { margin-left: 6px; padding: 1px 7px; font-size: 10px; font-weight: 800; color: #0f172a; background: #fbbf24; border: none; border-radius: 9999px; cursor: pointer; }

/* 펫 투기장: 내 펫(오른쪽을 보도록 반전) / 상대 펫(원래 왼쪽을 봄) */
.pr-pet-me { height: 84px !important; transform: scaleX(-1); }
.pr-pet-opp { height: 84px !important; }
.pr-controls .lab-btn { white-space: nowrap; font-size: 11px; padding-left: 2px; padding-right: 2px; }
.hero-sprite-box.melee-strike .hero-img.pr-pet-me { animation-name: prPetLunge; }
.hero-sprite-box.hit .hero-img.pr-pet-me { animation-name: prPetHit; }
@keyframes prPetLunge {
  0% { transform: scaleX(-1) scale(1) translateX(0); }
  40% { transform: scaleX(-1) scale(1.24) translateX(-28px); filter: drop-shadow(0 0 16px #fbbf24) brightness(1.2); }
  100% { transform: scaleX(-1) scale(1) translateX(0); }
}
@keyframes prPetHit {
  0% { transform: scaleX(-1) translateX(0); filter: brightness(2.2) drop-shadow(0 0 12px #ef4444); }
  35% { transform: scaleX(-1) translateX(8px) rotate(5deg); filter: brightness(1.8) drop-shadow(0 0 8px #ef4444); }
  100% { transform: scaleX(-1) translateX(0); filter: none; }
}
.pet-sprite-box.pet-casting, .hero-sprite-box.pet-casting, .monster-sprite-box.pet-casting { animation: petCastJump 0.35s ease-out; }

/* 🐾 펫 투기장 */
.pvp-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.pvp-mode-tabs button { padding: 7px 4px; font-size: 12px; font-weight: 800; color: #cbd5e1; background: rgba(30, 41, 59, 0.8); border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: 10px; cursor: pointer; }
.pvp-mode-tabs button.on { color: #0f172a; background: linear-gradient(180deg, #fbbf24, #f59e0b); border-color: #fbbf24; }
.pp-medal-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; color: #fde68a; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 8px; margin-top: 6px; }
.pp-medal-row b { color: #fbbf24; }
.pp-medal-row small { margin-left: auto; font-size: 10px; color: #94a3b8; }
.pp-mypet { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px; background: rgba(15, 23, 42, 0.7); border: 1.5px solid var(--rc, #64748b); border-radius: 10px; }
.pp-mypet-img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; transform: scaleX(-1); }
.pp-mypet-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-mypet-main b { font-size: 13px; color: #fff; }
.pp-mypet-main small { font-size: 10px; color: #cbd5e1; }
.pp-picker { display: flex; flex-shrink: 0; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px; min-height: 66px; }
.pp-pick { flex: 0 0 auto; height: 58px; justify-content: center; display: flex; flex-direction: column; align-items: center; width: 50px; padding: 3px; background: rgba(30, 41, 59, 0.8); border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: 8px; cursor: pointer; }
.pp-pick img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.pp-pick small { font-size: 9px; color: #cbd5e1; }
.pp-pick.on { border-color: var(--rc, #fbbf24); box-shadow: 0 0 8px var(--rc, #fbbf24); }
.pp-cand-img { object-fit: contain; image-rendering: pixelated; border: 1.5px solid; background: rgba(15, 23, 42, 0.7); }

/* 🤖 투기장 AI 챔피언의 펫 (상대 뒤쪽에 서서 함께 이동, js/pvp-ai.js) */
.pvp-opp-pets { position: absolute; left: 50%; bottom: 0; width: 0; height: 0; pointer-events: none; }
.pvp-opp-pet { position: absolute; bottom: var(--py, 0px); left: 0; display: flex; flex-direction: column; align-items: center;
  transform: translateX(calc(-50% + var(--px, 40px))) scale(var(--ps, 0.75)); transform-origin: 50% 100%; }
.pvp-opp-pet .pet-sprite-box { height: 48px; width: 48px; }
.pvp-opp-pet-img { height: 42px; width: auto; image-rendering: pixelated; }
.pvp-opp-pet .pet-name-tag { font-size: 0.5rem; padding: 0 3px; }
.monster-combat-unit.dead .pvp-opp-pets { opacity: 0.4; }
.pvp-cand-pets { display: flex; gap: 3px; margin-top: 2px; }
.pvp-cand-pet { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); }
.pvp-cand-pet img { height: 18px; width: auto; }
.pvp-cand-pet.tier-2 { border-color: #22c55e; } .pvp-cand-pet.tier-3 { border-color: #a855f7; } .pvp-cand-pet.tier-4 { border-color: #f59e0b; }
.pvp-cand-pet.tier-5 { border-color: #ef4444; } .pvp-cand-pet.tier-6 { border-color: #22d3ee; }
.pvp-real-badge { font-size: 9px; font-weight: 800; color: #86efac; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 6px; padding: 0 5px; margin-left: 3px; vertical-align: middle; }