/* ============================================================================
   ⚔️ clan-raid.css - 클랜 레이드 30초 전투 화면 (js/clan-raid-battle.js)
   ============================================================================ */
.clan-raid-btns { display: flex; gap: 8px; width: 100%; }
.clan-raid-btns .clan-btn.wide { flex: 1; }
.clan-btn.ghost { color: #d4b882; background: rgba(15, 23, 42, 0.8); border-color: rgba(212, 184, 130, 0.45); }

.raid-fight {
  position: absolute; inset: 0; z-index: 900; display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 50% 30%, #1e2a4a 0%, #0b1020 60%, #05070b 100%);
  color: #e2e8f0; user-select: none; -webkit-user-select: none; touch-action: manipulation; overflow: hidden;
}
.raid-fight.shake { animation: rf-shake 0.28s; }
.raid-fight.hurt::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 40%, rgba(220, 38, 38, 0.45)); animation: rf-hurt 0.6s forwards; }
.raid-fight.fever::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(249, 115, 22, 0.55); animation: rf-glow 0.8s infinite alternate; z-index: 3; }
@keyframes rf-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, 3px); } 50% { transform: translate(5px, -4px); } 75% { transform: translate(-3px, 2px); } }
@keyframes rf-hurt { from { opacity: 1; } to { opacity: 0; } }
@keyframes rf-glow { from { opacity: 0.55; } to { opacity: 1; } }

.rf-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.rf-title { font-size: 14px; color: #cbd5e1; }
.rf-title b { color: #f5e6c8; font-size: 16px; }
.rf-timer { min-width: 52px; text-align: center; font-size: 22px; font-weight: 900; color: #f5e6c8; padding: 2px 10px; border-radius: 12px; border: 1px solid rgba(212, 184, 130, 0.5); background: rgba(15, 23, 42, 0.85); }
.rf-timer.low { color: #fca5a5; border-color: #ef4444; animation: rf-glow 0.5s infinite alternate; }
.rf-hp { position: relative; margin: 0 14px; height: 18px; border-radius: 9px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(212, 184, 130, 0.4); overflow: hidden; }
.rf-hp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #991b1b, #ef4444); transition: width 0.15s; }
.rf-hp span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 800; line-height: 18px; text-shadow: 0 1px 2px #000; }
.rf-cheer { margin: 6px 14px 0; font-size: 10.5px; color: #94a3b8; display: flex; gap: 8px; flex-wrap: wrap; }
.rf-cheer span { padding: 1px 6px; border-radius: 8px; background: rgba(212, 184, 130, 0.1); }
.rf-cheer b { color: #d4b882; }

.rf-arena { position: relative; flex: 1; margin: 8px 0 0; overflow: hidden;
  background: url('../assets/backgrounds/parallax_far_10.webp') center 30% / cover no-repeat; }
.rf-arena::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(5, 7, 11, 0.85)); pointer-events: none; }
.rf-boss { position: absolute; right: 4%; bottom: 14%; width: 62%; aspect-ratio: 1; cursor: pointer; z-index: 2; }
.rf-boss img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)); transform: scaleX(-1); }
.rf-boss.hit img { animation: rf-boss-hit 0.14s; }
@keyframes rf-boss-hit { 0% { filter: brightness(2.2) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)); transform: scaleX(-1) translateX(-6px); } 100% { transform: scaleX(-1); } }
.rf-weak { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: none; z-index: 4;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 18%, rgba(245, 230, 200, 0.85) 30%, rgba(212, 184, 130, 0.25) 60%, transparent 72%);
  box-shadow: 0 0 18px 6px rgba(245, 230, 200, 0.65); animation: rf-weak 0.5s infinite alternate; }
.rf-weak.on { display: block; }
@keyframes rf-weak { from { transform: scale(0.85); } to { transform: scale(1.12); } }
.rf-warn { position: absolute; left: 50%; top: 45%; width: 110%; aspect-ratio: 1; transform: translate(-50%, -50%); display: none; pointer-events: none; z-index: 3; }
.rf-warn.on { display: block; }
.rf-warn i { position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(239, 68, 68, 0.9); box-shadow: 0 0 24px rgba(239, 68, 68, 0.7); animation: rf-warn 1.3s linear forwards; }
.rf-warn b { position: absolute; left: 0; right: 0; top: -6%; text-align: center; font-size: 15px; font-weight: 900; color: #fecaca; text-shadow: 0 2px 4px #000; }
@keyframes rf-warn { from { transform: scale(1.25); opacity: 0.3; } to { transform: scale(0.35); opacity: 1; } }

.rf-hero { position: absolute; left: 4%; bottom: 14%; width: 30%; aspect-ratio: 1; z-index: 2; }
.rf-hero img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.rf-hero.atk img { animation: rf-lunge 0.28s; }
@keyframes rf-lunge { 40% { transform: translateX(18%); } }
.rf-stun { position: absolute; left: 0; right: 0; top: -14%; text-align: center; font-size: 13px; font-weight: 900; color: #fde68a; display: none; text-shadow: 0 2px 4px #000; }
.rf-stun.on { display: block; animation: rf-glow 0.3s infinite alternate; }
.rf-pets { position: absolute; left: 3%; bottom: 3%; display: flex; gap: 4px; z-index: 2; }
.rf-pet { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }
.rf-pet.cast { animation: rf-pet 0.6s; }
@keyframes rf-pet { 30% { transform: translate(40px, -24px) scale(1.25); filter: brightness(1.8) drop-shadow(0 0 10px #7dd3fc); } }

.rf-pops { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.rf-pop { position: absolute; transform: translate(-50%, -50%); font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 2px 3px #000, 0 0 6px rgba(0, 0, 0, 0.6); white-space: nowrap; animation: rf-pop 0.9s ease-out forwards; }
.rf-pop.big { font-size: 20px; }
.rf-pop.weak { color: #f5e6c8; font-size: 22px; }
.rf-pop.guard { color: #7dd3fc; }
.rf-pop.pet { color: #a5f3fc; }
.rf-pop.fever { color: #fdba74; }
.rf-pop.bad { color: #fca5a5; }
@keyframes rf-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }

.rf-combo { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); display: none; text-align: center; font-weight: 900; color: #f5e6c8; text-shadow: 0 2px 4px #000; z-index: 5; }
.rf-combo.on { display: block; }
.rf-combo b { font-size: 30px; }
.rf-combo small { display: block; font-size: 11px; color: #d4b882; }
.rf-combo.bump b { animation: rf-bump 0.15s; display: inline-block; }
@keyframes rf-bump { 50% { transform: scale(1.25); } }
.rf-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 900; color: #f5e6c8; text-shadow: 0 4px 10px #000; pointer-events: none; opacity: 0; z-index: 6; }
.rf-count.pop { animation: rf-count 0.7s forwards; }
.rf-count.go { font-size: 44px; }
@keyframes rf-count { 0% { opacity: 0; transform: scale(1.6); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.rf-fever { position: absolute; left: 0; right: 0; top: 20%; text-align: center; font-size: 16px; font-weight: 900; color: #fdba74; text-shadow: 0 2px 4px #000; display: none; z-index: 5; pointer-events: none; }
.raid-fight.fever .rf-fever { display: block; animation: rf-glow 0.5s infinite alternate; }

.rf-bottom { padding: 10px 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rf-hint { font-size: 12px; color: #94a3b8; min-height: 16px; }
.rf-guard { width: 70%; padding: 14px 0; border-radius: 14px; font-size: 17px; font-weight: 900; cursor: pointer;
  color: #cbd5e1; background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(148, 163, 184, 0.4); transition: transform 0.08s; }
.rf-guard.ready { color: #0b1020; background: linear-gradient(180deg, #f5e6c8, #c9a96e); border-color: #a8864f; box-shadow: 0 0 18px rgba(245, 230, 200, 0.7); animation: rf-glow 0.25s infinite alternate; }
.rf-guard.done { color: #fff; background: linear-gradient(180deg, #38bdf8, #0369a1); border-color: #7dd3fc; }
.rf-guard:active { transform: scale(0.96); }

.rf-result { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(5, 7, 11, 0.72); z-index: 10; }
.rf-result.show { display: flex; }
.rf-card { width: 84%; padding: 18px 16px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, #172036, #0b1020); border: 1px solid rgba(212, 184, 130, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.rf-card-title { font-size: 18px; font-weight: 900; color: #f5e6c8; margin-bottom: 10px; }
.rf-wait { font-size: 13px; color: #94a3b8; margin: 8px 0; }
.rf-dmg small { display: block; font-size: 11px; color: #94a3b8; }
.rf-dmg b { font-size: 28px; color: #fca5a5; }
.rf-mult { margin: 6px 0 10px; font-size: 13px; color: #cbd5e1; }
.rf-mult b { color: #f5e6c8; font-size: 16px; }
.rf-mult small { display: block; font-size: 10.5px; color: #8b93a7; }
.rf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.rf-stats div { padding: 6px; border-radius: 8px; background: rgba(212, 184, 130, 0.08); font-size: 11px; color: #94a3b8; display: flex; justify-content: space-between; }
.rf-stats b { color: #e2e8f0; }
.rf-kill { font-size: 12px; color: #f5e6c8; margin-bottom: 8px; }
.rf-left { font-size: 11px; color: #8b93a7; margin-bottom: 10px; }
.rf-close { width: 100%; padding: 11px 0; border-radius: 12px; font-size: 14px; font-weight: 900; cursor: pointer; color: #0b1020; background: linear-gradient(180deg, #f5e6c8, #c9a96e); border: 1px solid #a8864f; }