/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * PRIME ROYALE - PVP SPARRING ARENA STYLES v1.0
 * Risk-free ranked matchmaking UI
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS VARIABLES
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    --pvp-primary: #00d4ff;
    --pvp-primary-dark: #0099cc;
    --pvp-secondary: #6c5ce7;
    --pvp-success: #00b894;
    --pvp-danger: #ff6b6b;
    --pvp-warning: #ffd93d;
    --pvp-bg-dark: #0a0a0f;
    --pvp-bg-card: rgba(20, 20, 30, 0.9);
    --pvp-border: rgba(255, 255, 255, 0.1);
    --pvp-text: #ffffff;
    --pvp-text-muted: rgba(255, 255, 255, 0.6);

    /* League Colors */
    --pvp-bronze: #cd7f32;
    --pvp-silver: #c0c0c0;
    --pvp-gold: #ffd700;
    --pvp-diamond: #00d4ff;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OVERLAY & CONTAINER (Full Screen Mode)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-arena-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pvp-bg-dark);
    z-index: 9999;
    animation: pvp-fade-in 0.3s ease;
}

.pvp-arena {
    width: 100%;
    height: 100%;
    background: var(--pvp-bg-dark);
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 60px; /* Space for top navigation bar */
}

.pvp-arena__close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--pvp-border);
    border-radius: 50%;
    color: var(--pvp-text);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.pvp-arena__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pvp-btn--primary {
    background: linear-gradient(135deg, var(--pvp-primary), var(--pvp-secondary));
    color: white;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

.pvp-btn--primary:hover:not(.pvp-btn--disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 212, 255, 0.4);
}

.pvp-btn--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pvp-text);
    border: 1px solid var(--pvp-border);
}

.pvp-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.pvp-btn--large {
    padding: 16px 48px;
    font-size: 18px;
    border-radius: 16px;
}

.pvp-btn--small {
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 8px;
}

.pvp-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEAGUE BADGE
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-league-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    background: var(--pvp-bg-card);
    border-radius: 16px;
    border: 2px solid;
}

.pvp-league-badge--small {
    padding: 6px 12px;
    gap: 2px;
}

.pvp-league-badge--large {
    padding: 20px 32px;
    gap: 8px;
}

.pvp-league-badge__icon {
    font-size: 32px;
}

.pvp-league-badge--small .pvp-league-badge__icon {
    font-size: 20px;
}

.pvp-league-badge--large .pvp-league-badge__icon {
    font-size: 48px;
}

.pvp-league-badge__name {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pvp-league-badge--large .pvp-league-badge__name {
    font-size: 18px;
}

.pvp-league-badge__mmr {
    font-size: 12px;
    color: var(--pvp-text-muted);
}

.pvp-league-badge--large .pvp-league-badge__mmr {
    font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOBBY VIEW
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-lobby {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.pvp-lobby__header {
    text-align: center;
}

.pvp-lobby__title {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--pvp-primary), var(--pvp-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.pvp-lobby__subtitle {
    color: var(--pvp-text-muted);
    margin-top: 4px;
}

.pvp-lobby__tagline {
    color: var(--pvp-text-muted);
    font-size: 12px;
    margin-top: 8px;
    letter-spacing: 1px;
    opacity: 0.7;
}

.pvp-lobby__no-rg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(0, 184, 148, 0.2);
    border: 1px solid var(--pvp-success);
    border-radius: 20px;
    color: var(--pvp-success);
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
}

.pvp-lobby__stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.pvp-lobby__record {
    display: flex;
    gap: 32px;
}

.pvp-lobby__record-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pvp-lobby__record-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--pvp-text);
}

.pvp-lobby__record-label {
    font-size: 12px;
    color: var(--pvp-text-muted);
    text-transform: uppercase;
}

/* Win Streak Badge */
.pvp-lobby__streak {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255, 100, 0, 0.3), rgba(255, 50, 0, 0.2));
    border: 1px solid #ff6600;
    border-radius: 20px;
    animation: pvp-streak-pulse 1.5s ease infinite;
}

@keyframes pvp-streak-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

.pvp-lobby__streak-icon {
    font-size: 18px;
    animation: pvp-flame 0.3s ease infinite alternate;
}

@keyframes pvp-flame {
    from { transform: scale(1) rotate(-2deg); }
    to { transform: scale(1.1) rotate(2deg); }
}

.pvp-lobby__streak-text {
    font-size: 14px;
    font-weight: 700;
    color: #ff9900;
}

.pvp-lobby__decks {
    background: var(--pvp-bg-card);
    border-radius: 16px;
    padding: 20px;
}

.pvp-lobby__decks-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--pvp-text);
}

.pvp-lobby__decks-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pvp-lobby__no-decks {
    text-align: center;
    color: var(--pvp-text-muted);
    padding: 24px;
}

.pvp-lobby__error {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid var(--pvp-danger);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--pvp-danger);
    text-align: center;
    font-size: 14px;
}

.pvp-lobby__error--actionable {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pvp-lobby__error-message {
    flex: 1;
    min-width: 150px;
}

.pvp-lobby__error-action {
    flex-shrink: 0;
}

.pvp-lobby__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pvp-lobby__disabled-reason {
    font-size: 13px;
    color: var(--pvp-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOBBY VIEW v3 - Enhanced Design with Glow Effects
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-lobby-v3 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    flex: 1;
    max-width: 950px;
    margin: 0 auto;
    width: 100%;
}

/* 3-Panel Layout */
.pvp-lobby-panels-v3 {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 300px;
}

/* Panel Base */
.pvp-panel-v3 {
    background: linear-gradient(135deg, rgba(20, 40, 80, 0.6) 0%, rgba(15, 30, 60, 0.7) 100%);
    border: 1px solid rgba(80, 180, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Left Panel - Stats - HORIZONTAL ROW */
.pvp-panel-v3--stats {
    flex: 0 0 auto;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pvp-stats-row-v3 {
    display: flex;
    flex-direction: row !important;
    gap: 8px;
    justify-content: center;
    flex-wrap: nowrap !important;
}

.pvp-stat-item-v3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(20, 40, 70, 0.7);
    border: 1px solid rgba(80, 180, 255, 0.2);
    border-radius: 8px;
    min-width: 52px;
}

.pvp-stat-icon-v3 {
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.pvp-stat-value-v3 {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.pvp-stat-label-v3 {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Center Panel - League */
.pvp-panel-v3--league {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pvp-league-glow-v3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle,
        rgba(0, 200, 255, 0.5) 0%,
        rgba(80, 150, 255, 0.3) 30%,
        rgba(100, 100, 255, 0.15) 50%,
        transparent 70%);
    border-radius: 50%;
    animation: league-glow-pulse-v3 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes league-glow-pulse-v3 {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.pvp-league-content-v3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1;
    position: relative;
}

.pvp-league-medal-v3 {
    font-size: 72px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
    animation: medal-float-v3 3s ease-in-out infinite;
}

@keyframes medal-float-v3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.pvp-league-name-v3 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 4px;
    text-shadow: 0 2px 15px currentColor;
}

.pvp-mmr-section-v3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 200px;
}

.pvp-mmr-bar-v3 {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pvp-mmr-fill-v3 {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px currentColor;
}

.pvp-mmr-text-v3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
}

/* Right Panel - Deck */
.pvp-panel-v3--deck {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pvp-deck-header-v3 {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pvp-deck-select-v3 {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 180, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2380b4ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.pvp-deck-select-v3:focus {
    outline: none;
    border-color: rgba(80, 180, 255, 0.5);
}

.pvp-deck-select-v3 option {
    background: #1a2a40;
    color: #fff;
}

.pvp-deck-cards-v3 {
    display: flex;
    gap: 8px;
    flex: 1;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pvp-deck-card-v3 {
    width: 55px;
    height: 70px;
    background: linear-gradient(145deg, rgba(60, 80, 120, 0.8) 0%, rgba(40, 60, 100, 0.9) 100%);
    border: 1px solid rgba(80, 180, 255, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: all 0.2s;
}

.pvp-deck-card-v3:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 180, 255, 0.5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.pvp-deck-card-img-v3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pvp-deck-card-ticker-v3 {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.pvp-deck-power-v3 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: auto;
}

.pvp-deck-power-value-v3 {
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 200, 0, 0.5);
}

.pvp-no-deck-v3 {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    padding: 20px 10px;
}

/* Error */
.pvp-lobby-error-v3 {
    background: rgba(255, 80, 80, 0.15);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: 12px;
    padding: 12px 16px;
    color: #ff6b6b;
    text-align: center;
    font-size: 14px;
}

.pvp-lobby-error-v3--action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pvp-error-btn-v3 {
    padding: 8px 16px;
    background: rgba(255, 100, 100, 0.3);
    border: 1px solid rgba(255, 100, 100, 0.5);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Find Match Section */
.pvp-match-section-v3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pvp-match-glow-frame-v3 {
    position: relative;
    padding: 8px;
}

/* Outer hexagonal glow */
.pvp-match-glow-v3 {
    position: absolute;
    top: -30px;
    left: -40px;
    right: -40px;
    bottom: -30px;
    background:
        radial-gradient(ellipse 80% 60% at center, rgba(168, 85, 247, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse 100% 80% at center, rgba(236, 72, 153, 0.4) 0%, transparent 50%);
    filter: blur(20px);
    animation: match-glow-v3 2s ease-in-out infinite;
    pointer-events: none;
}

/* Add extra glow layers */
.pvp-match-glow-frame-v3::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -25px;
    right: -25px;
    bottom: -15px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.4), rgba(236, 72, 153, 0.3));
    filter: blur(10px);
    border-radius: 20px;
    animation: match-glow-inner-v3 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes match-glow-v3 {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes match-glow-inner-v3 {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

.pvp-match-btn-v3 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 60px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border: 2px solid rgba(168, 85, 247, 0.5);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    box-shadow:
        0 0 30px rgba(168, 85, 247, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.pvp-match-btn-v3::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-25deg);
    animation: match-shine-v3 3s ease-in-out infinite;
}

@keyframes match-shine-v3 {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

.pvp-match-btn-v3:hover:not(.pvp-match-btn-v3--disabled) {
    transform: translateY(-3px);
    box-shadow:
        0 0 50px rgba(168, 85, 247, 0.6),
        0 12px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pvp-match-btn-v3:active:not(.pvp-match-btn-v3--disabled) {
    transform: translateY(0);
}

.pvp-match-btn-v3--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.7);
}

.pvp-match-btn-v3--disabled::before {
    animation: none;
}

.pvp-match-text-v3 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.pvp-match-hint-v3 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* Mobile Responsive for v3 */
@media (max-width: 768px) {
    .pvp-lobby-panels-v3 {
        flex-direction: column;
        min-height: auto;
    }

    .pvp-panel-v3--stats {
        flex: 0 0 auto;
    }

    .pvp-stats-row-v3 {
        flex-direction: row;
        justify-content: center;
    }

    .pvp-panel-v3--league {
        padding: 30px 20px;
    }

    .pvp-panel-v3--deck {
        flex: 0 0 auto;
    }

    .pvp-deck-cards-v3 {
        justify-content: center;
    }

    .pvp-match-btn-v3 {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .pvp-lobby-v3 {
        padding: 16px;
        gap: 16px;
    }

    .pvp-stat-item-v3 {
        padding: 10px 12px;
        min-width: 60px;
    }

    .pvp-stat-value-v3 {
        font-size: 18px;
    }

    .pvp-league-medal-v3 {
        font-size: 56px;
    }

    .pvp-league-name-v3 {
        font-size: 18px;
    }

    .pvp-deck-card-v3 {
        width: 45px;
        height: 58px;
    }

    .pvp-match-btn-v3 {
        padding: 14px 40px;
    }

    .pvp-match-text-v3 {
        font-size: 16px;
        letter-spacing: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOBBY VIEW v2 - 3-Panel Glassmorphism Design (Legacy)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-lobby-v2 {
    display: none; /* Hidden - using v3 now */
    flex-direction: column;
    gap: 30px;
    padding: 30px;
    flex: 1;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

/* Hide back button - use tabs instead */
.pvp-lobby-header {
    display: none;
}

/* 3-Panel Layout */
.pvp-lobby-panels {
    display: flex;
    gap: 24px;
    flex: 1;
    min-height: 380px;
    max-width: 1100px;
    margin: 0 auto;
}

.pvp-lobby-panel {
    background: linear-gradient(135deg, rgba(30, 50, 80, 0.6) 0%, rgba(20, 35, 60, 0.7) 100%);
    border: 1px solid rgba(80, 180, 255, 0.25);
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(12px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(80, 180, 255, 0.1);
}

/* Left Panel - Stats */
.pvp-lobby-panel--stats {
    flex: 0 0 240px;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.pvp-lobby-panel--stats .pvp-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent !important;
    border: none;
}

.pvp-lobby-panel--stats .pvp-stat-value {
    font-size: 42px !important;
    font-weight: 800;
    color: #fff !important;
    text-shadow: 0 2px 20px rgba(80, 180, 255, 0.4);
    line-height: 1;
}

.pvp-lobby-panel--stats .pvp-stat-label {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}

.pvp-lobby-panel--stats .pvp-stat-streak {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255, 100, 0, 0.25), rgba(255, 50, 0, 0.2)) !important;
    border: 1px solid rgba(255, 140, 0, 0.5);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #ff9900;
}

.pvp-lobby-panel--stats .pvp-streak-fire {
    animation: pvp-flame 0.3s ease infinite alternate;
}

/* Center Panel - League */
.pvp-lobby-panel--center {
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.pvp-lobby-panel--center::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(80, 180, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: pvp-league-pulse 3s ease-in-out infinite;
}

@keyframes pvp-league-pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.pvp-league-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1;
}

.pvp-league-icon-large {
    font-size: 80px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
    animation: pvp-icon-float 3s ease-in-out infinite;
}

@keyframes pvp-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.pvp-league-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 2px 20px currentColor;
}

/* Hide avatar in this design */
.pvp-avatar-container {
    display: none;
}

.pvp-mmr-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 260px;
    z-index: 1;
}

.pvp-mmr-bar {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pvp-mmr-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
    box-shadow: 0 0 15px currentColor;
    background: linear-gradient(90deg, currentColor 0%, currentColor 100%);
}

.pvp-mmr-text {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1.5px;
}

/* Right Panel - Deck Selection */
.pvp-lobby-panel--deck {
    flex: 0 0 280px;
    gap: 18px;
    justify-content: flex-start;
}

.pvp-deck-header {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pvp-no-deck-msg {
    text-align: center;
    color: var(--pvp-text-muted);
    font-size: 13px;
    padding: 30px 10px;
}

.pvp-deck-selector {
    position: relative;
}

.pvp-deck-dropdown {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(80, 180, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2380b4ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.pvp-deck-dropdown:focus {
    outline: none;
    border-color: rgba(80, 180, 255, 0.5);
    box-shadow: 0 0 15px rgba(80, 180, 255, 0.2);
}

.pvp-deck-dropdown option {
    background: #1a2a40;
    color: #fff;
}

.pvp-deck-preview-cards {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex: 1;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pvp-deck-card-mini {
    width: 72px;
    height: 100px;
    background: linear-gradient(145deg, rgba(60, 80, 120, 0.8) 0%, rgba(40, 60, 100, 0.9) 100%);
    border: 1px solid rgba(80, 180, 255, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pvp-deck-card-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
    pointer-events: none;
}

.pvp-deck-card-mini:hover {
    transform: translateY(-4px);
    border-color: rgba(80, 180, 255, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.pvp-deck-card-ticker {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.pvp-deck-power {
    text-align: left;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: auto;
}

/* Error */
.pvp-lobby-error {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid var(--pvp-danger);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--pvp-danger);
    text-align: center;
    font-size: 14px;
}

.pvp-lobby-error--actionable {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pvp-lobby-error-msg {
    flex: 1;
}

/* Find Match Button - Cyberpunk Ellipse Style */
.pvp-lobby-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.pvp-find-match-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 60px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 30%, #6366f1 60%, #a855f7 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 30px rgba(0, 200, 255, 0.5),
        0 0 60px rgba(100, 100, 241, 0.3),
        0 8px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Glowing border effect */
.pvp-find-match-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(90deg, #00d4ff, #6366f1, #a855f7, #6366f1, #00d4ff);
    background-size: 300% 100%;
    border-radius: 52px;
    z-index: -1;
    animation: pvp-btn-glow 3s linear infinite;
    opacity: 0.8;
}

/* Shine effect */
.pvp-find-match-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-25deg);
    animation: pvp-btn-shine 4s ease-in-out infinite;
}

@keyframes pvp-btn-glow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes pvp-btn-shine {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

.pvp-find-match-btn:hover:not(.pvp-find-match-btn--disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 0 40px rgba(0, 200, 255, 0.7),
        0 0 80px rgba(100, 100, 241, 0.4),
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pvp-find-match-btn:active:not(.pvp-find-match-btn--disabled) {
    transform: translateY(0) scale(0.98);
}

.pvp-find-match-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.8);
}

.pvp-find-match-btn--disabled::before,
.pvp-find-match-btn--disabled::after {
    animation: none;
}

.pvp-find-match-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.pvp-find-match-text {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pvp-lobby-disabled-reason {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .pvp-lobby-panels {
        flex-direction: column;
        min-height: auto;
    }

    .pvp-lobby-panel--stats {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: space-around;
        padding: 16px;
    }

    .pvp-lobby-panel--center {
        padding: 24px 16px;
    }

    .pvp-lobby-panel--deck {
        flex: 0 0 auto;
    }

    .pvp-deck-preview-cards {
        justify-content: center;
    }

    .pvp-find-match-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .pvp-lobby-v2 {
        padding: 16px;
        gap: 16px;
    }

    .pvp-lobby-panel--stats .pvp-stat-value {
        font-size: 24px !important;
    }

    .pvp-deck-card-mini {
        width: 40px;
        height: 56px;
    }

    .pvp-find-match-btn {
        padding: 14px 32px;
    }

    .pvp-find-match-text {
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DECK PREVIEW
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-deck-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.pvp-deck-preview:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--pvp-border);
}

.pvp-deck-preview--selected {
    border-color: var(--pvp-primary);
    background: rgba(0, 212, 255, 0.1);
}

.pvp-deck-preview__name {
    flex: 1;
    font-weight: 600;
    color: var(--pvp-text);
}

.pvp-deck-preview__cards {
    display: flex;
    gap: 4px;
}

.pvp-deck-preview__card {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--pvp-secondary), var(--pvp-primary-dark));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.pvp-deck-preview__power {
    font-size: 12px;
    color: var(--pvp-text-muted);
    min-width: 80px;
    text-align: right;
}

.pvp-deck-preview__check {
    position: absolute;
    right: 16px;
    width: 24px;
    height: 24px;
    background: var(--pvp-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   QUEUE VIEW
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-queue {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    min-height: 100%;
}

.pvp-queue__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.pvp-queue__spinner {
    width: 100px;
    height: 100px;
    position: relative;
}

.pvp-queue__spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--pvp-primary);
    border-radius: 50%;
    animation: pvp-spin 1.5s linear infinite;
}

.pvp-queue__spinner-ring:nth-child(2) {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-top-color: var(--pvp-secondary);
    animation-duration: 2s;
    animation-direction: reverse;
}

.pvp-queue__spinner-ring:nth-child(3) {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-top-color: var(--pvp-gold);
    animation-duration: 2.5s;
}

.pvp-queue__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pvp-text);
    margin: 0;
}

.pvp-queue__timer {
    font-size: 48px;
    font-weight: 300;
    color: var(--pvp-primary);
    font-family: 'SF Mono', monospace;
}

.pvp-queue__no-rg-badge {
    padding: 8px 16px;
    background: rgba(0, 184, 148, 0.2);
    border: 1px solid var(--pvp-success);
    border-radius: 20px;
    color: var(--pvp-success);
    font-size: 14px;
    font-weight: 600;
}

.pvp-queue__status {
    color: var(--pvp-text-muted);
    font-size: 14px;
    margin-top: 8px;
    animation: pvp-fade-in 0.3s ease;
}

/* Queue Expired State */
.pvp-queue--expired .pvp-queue__content {
    animation: pvp-fade-in 0.3s ease;
}

.pvp-queue__expired-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: pvp-bounce 0.5s ease;
}

.pvp-queue__subtitle {
    color: var(--pvp-text-muted);
    font-size: 14px;
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH VIEW
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-match {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    min-height: 100%;
}

.pvp-match--vs {
    background: linear-gradient(180deg, rgba(108, 92, 231, 0.2) 0%, transparent 100%);
}

.pvp-match__vs-container {
    display: flex;
    align-items: center;
    gap: 32px;
    animation: pvp-scale-in 0.5s ease;
}

.pvp-match__player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: pvp-slide-in 0.6s ease;
}

.pvp-match__player--left {
    animation-name: pvp-slide-in-left;
}

.pvp-match__player--right {
    animation-name: pvp-slide-in-right;
}

.pvp-match__player-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--pvp-secondary), var(--pvp-primary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: white;
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.4);
}

.pvp-match__player-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--pvp-text);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pvp-match__vs-badge {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--pvp-danger), var(--pvp-warning));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    color: white;
    animation: pvp-pulse 1s ease infinite;
    box-shadow: 0 0 40px rgba(255, 107, 107, 0.5);
}

.pvp-match--battle .pvp-match__battle-content {
    text-align: center;
}

.pvp-match__battle-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--pvp-border);
    border-top-color: var(--pvp-primary);
    border-radius: 50%;
    margin: 0 auto 24px;
    animation: pvp-spin 1s linear infinite;
}

/* Match Slow/Stuck States */
.pvp-match__slow-warning {
    color: var(--pvp-warning);
    font-size: 14px;
    animation: pvp-fade-in 0.3s ease;
}

.pvp-match__stuck {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: pvp-fade-in 0.3s ease;
}

.pvp-match__stuck-text {
    color: var(--pvp-text-muted);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESULT VIEW
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-result {
    padding: 40px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.pvp-result--victory {
    background: linear-gradient(180deg, rgba(0, 184, 148, 0.2) 0%, transparent 50%);
}

.pvp-result--defeat {
    background: linear-gradient(180deg, rgba(255, 107, 107, 0.2) 0%, transparent 50%);
}

.pvp-result--draw {
    background: linear-gradient(180deg, rgba(255, 217, 61, 0.2) 0%, transparent 50%);
}

.pvp-result__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.pvp-result__banner {
    text-align: center;
    animation: pvp-scale-in 0.5s ease;
}

.pvp-result__emoji {
    font-size: 64px;
    display: block;
    margin-bottom: 8px;
}

.pvp-result__title {
    font-size: 48px;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.pvp-result--victory .pvp-result__title {
    background: linear-gradient(135deg, var(--pvp-success), #00d9a5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pvp-result--defeat .pvp-result__title {
    background: linear-gradient(135deg, var(--pvp-danger), #ff8787);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pvp-result--draw .pvp-result__title {
    background: linear-gradient(135deg, var(--pvp-warning), #ffe066);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pvp-result__mmr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.pvp-result__mmr--animate {
    opacity: 1;
    transform: translateY(0);
}

.pvp-result__mmr-change {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pvp-result__mmr-value {
    font-size: 48px;
    font-weight: 800;
}

.pvp-result__mmr-value.positive {
    color: var(--pvp-success);
}

.pvp-result__mmr-value.negative {
    color: var(--pvp-danger);
}

.pvp-result__mmr-label {
    font-size: 14px;
    color: var(--pvp-text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pvp-result__mmr-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
}

.pvp-result__mmr-old {
    color: var(--pvp-text-muted);
}

.pvp-result__mmr-arrow {
    color: var(--pvp-primary);
}

.pvp-result__mmr-new {
    color: var(--pvp-text);
    font-weight: 700;
}

/* Promotion celebration */
.pvp-result__promotion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2));
    border: 2px solid var(--pvp-gold);
    border-radius: 12px;
    animation: pvp-promotion-glow 2s ease infinite;
}

@keyframes pvp-promotion-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); }
}

.pvp-result__promotion-icon {
    font-size: 24px;
    animation: pvp-bounce 0.5s ease infinite alternate;
}

@keyframes pvp-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

.pvp-result__promotion-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--pvp-gold);
}

/* Promotion hint (close to next league) */
.pvp-result__promotion-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 14px;
    color: var(--pvp-warning);
}

.pvp-result__rounds {
    background: var(--pvp-bg-card);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 300px;
}

.pvp-result__rounds h3 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--pvp-text-muted);
    text-align: center;
}

.pvp-result__rounds-list {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pvp-result__round {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pvp-result__round-num {
    font-size: 12px;
    color: var(--pvp-text-muted);
}

.pvp-result__round-result {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

.pvp-result__round-result.win {
    background: rgba(0, 184, 148, 0.2);
    color: var(--pvp-success);
    border: 1px solid var(--pvp-success);
}

.pvp-result__round-result.loss {
    background: rgba(255, 107, 107, 0.2);
    color: var(--pvp-danger);
    border: 1px solid var(--pvp-danger);
}

.pvp-result__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

@keyframes pvp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pvp-scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pvp-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pvp-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pvp-spin {
    to { transform: rotate(360deg); }
}

@keyframes pvp-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes pvp-bounce {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .pvp-arena {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .pvp-lobby__title {
        font-size: 24px;
    }

    .pvp-lobby__record {
        gap: 20px;
    }

    .pvp-match__vs-container {
        gap: 16px;
    }

    .pvp-match__player-avatar {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .pvp-result__title {
        font-size: 36px;
    }

    .pvp-result__mmr-value {
        font-size: 36px;
    }

    .pvp-tabs {
        flex-wrap: wrap;
    }

    .pvp-leaderboard__tabs {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TAB NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 24px 0;
    border-bottom: 1px solid var(--pvp-border);
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.pvp-tabs__btn {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--pvp-text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pvp-tabs__btn:hover:not(:disabled) {
    color: var(--pvp-text);
    background: rgba(255, 255, 255, 0.05);
}

.pvp-tabs__btn--active {
    color: var(--pvp-primary);
    border-bottom-color: var(--pvp-primary);
}

.pvp-tabs__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEADERBOARD VIEW
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-leaderboard {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.pvp-leaderboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pvp-leaderboard__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pvp-text);
    margin: 0;
}

.pvp-leaderboard__status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pvp-leaderboard__updated {
    font-size: 12px;
    color: var(--pvp-text-muted);
}

.pvp-leaderboard__stale-badge {
    padding: 2px 8px;
    background: rgba(255, 217, 61, 0.2);
    border: 1px solid var(--pvp-warning);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--pvp-warning);
    animation: pvp-pulse 1.5s ease infinite;
}

.pvp-leaderboard__tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pvp-leaderboard__tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pvp-border);
    border-radius: 20px;
    color: var(--pvp-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.pvp-leaderboard__tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pvp-text);
}

.pvp-leaderboard__tab--active {
    background: var(--pvp-primary);
    border-color: var(--pvp-primary);
    color: white;
}

.pvp-leaderboard__my-rank {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid var(--pvp-primary);
    border-radius: 12px;
}

.pvp-leaderboard__my-rank-label {
    color: var(--pvp-text-muted);
    font-size: 13px;
}

.pvp-leaderboard__my-rank-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--pvp-primary);
}

.pvp-leaderboard__my-rank-mmr {
    color: var(--pvp-text-muted);
    font-size: 13px;
    margin-left: auto;
}

.pvp-leaderboard__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.pvp-leaderboard__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--pvp-bg-card);
    border-radius: 12px;
    transition: background 0.2s;
}

.pvp-leaderboard__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pvp-leaderboard__item--me {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid var(--pvp-primary);
}

.pvp-leaderboard__rank {
    min-width: 36px;
    font-size: 16px;
    font-weight: 700;
    color: var(--pvp-text);
    text-align: center;
}

.pvp-leaderboard__name {
    flex: 1;
    font-weight: 600;
    color: var(--pvp-text);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pvp-leaderboard__you-badge {
    padding: 2px 8px;
    background: var(--pvp-primary);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.pvp-leaderboard__mmr {
    min-width: 60px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pvp-text);
    text-align: right;
}

.pvp-leaderboard__record {
    min-width: 70px;
    font-size: 12px;
    color: var(--pvp-text-muted);
    text-align: right;
}

.pvp-leaderboard__empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--pvp-text-muted);
}

/* Skeleton loader */
.pvp-leaderboard__item--skeleton {
    background: var(--pvp-bg-card);
}

.pvp-leaderboard__skeleton-rank,
.pvp-leaderboard__skeleton-name,
.pvp-leaderboard__skeleton-mmr {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: pvp-skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

.pvp-leaderboard__skeleton-rank {
    width: 36px;
    height: 20px;
}

.pvp-leaderboard__skeleton-name {
    flex: 1;
    height: 20px;
    max-width: 150px;
}

.pvp-leaderboard__skeleton-mmr {
    width: 60px;
    height: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HISTORY VIEW
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-history {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.pvp-history__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pvp-text);
    margin: 0;
}

.pvp-history__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pvp-history__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--pvp-bg-card);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 4px solid transparent;
}

.pvp-history__item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.pvp-history__item--win {
    border-left-color: var(--pvp-success);
}

.pvp-history__item--loss {
    border-left-color: var(--pvp-danger);
}

.pvp-history__item--draw {
    border-left-color: var(--pvp-warning);
}

.pvp-history__result-badge {
    min-width: 50px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.pvp-history__item--win .pvp-history__result-badge {
    background: rgba(0, 184, 148, 0.2);
    color: var(--pvp-success);
}

.pvp-history__item--loss .pvp-history__result-badge {
    background: rgba(255, 107, 107, 0.2);
    color: var(--pvp-danger);
}

.pvp-history__item--draw .pvp-history__result-badge {
    background: rgba(255, 217, 61, 0.2);
    color: var(--pvp-warning);
}

.pvp-history__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.pvp-history__opponent {
    font-weight: 600;
    color: var(--pvp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pvp-history__time {
    font-size: 12px;
    color: var(--pvp-text-muted);
}

.pvp-history__mmr-change {
    font-size: 16px;
    font-weight: 700;
}

.pvp-history__mmr-change.positive {
    color: var(--pvp-success);
}

.pvp-history__mmr-change.negative {
    color: var(--pvp-danger);
}

.pvp-history__empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--pvp-text-muted);
}

.pvp-history__empty p {
    margin: 4px 0;
}

/* History skeleton */
.pvp-history__item--skeleton {
    background: var(--pvp-bg-card);
}

.pvp-history__skeleton-result,
.pvp-history__skeleton-info {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: pvp-skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

.pvp-history__skeleton-result {
    width: 50px;
    height: 24px;
}

.pvp-history__skeleton-info {
    flex: 1;
    height: 40px;
    max-width: 200px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HISTORY MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-history__modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: pvp-fade-in 0.2s ease;
}

.pvp-history__modal {
    background: var(--pvp-bg-dark);
    border: 1px solid var(--pvp-border);
    border-radius: 20px;
    padding: 24px;
    min-width: 320px;
    max-width: 90%;
    position: relative;
    animation: pvp-scale-in 0.3s ease;
}

.pvp-history__modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--pvp-text);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.pvp-history__modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pvp-history__modal h3 {
    margin: 0 0 20px;
    font-size: 20px;
    color: var(--pvp-text);
    text-align: center;
}

.pvp-history__modal-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.pvp-history__modal-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pvp-history__modal-player span:first-child {
    font-weight: 600;
    color: var(--pvp-text);
}

.pvp-history__modal-vs {
    font-size: 18px;
    font-weight: 900;
    color: var(--pvp-text-muted);
}

.pvp-history__modal-rounds {
    background: var(--pvp-bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.pvp-history__modal-rounds h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--pvp-text-muted);
    text-align: center;
}

.pvp-history__modal-round {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--pvp-border);
}

.pvp-history__modal-round:last-child {
    border-bottom: none;
}

.pvp-history__modal-round span:first-child {
    color: var(--pvp-text-muted);
}

.pvp-history__modal-round .win {
    color: var(--pvp-success);
    font-weight: 600;
}

.pvp-history__modal-round .loss {
    color: var(--pvp-danger);
    font-weight: 600;
}

.pvp-history__modal-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.pvp-history__modal-result span:first-child {
    color: var(--pvp-text-muted);
}

.pvp-history__modal-result .win {
    color: var(--pvp-success);
    font-weight: 700;
}

.pvp-history__modal-result .loss {
    color: var(--pvp-danger);
    font-weight: 700;
}

.pvp-history__modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    color: var(--pvp-text-muted);
}

.pvp-history__modal-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--pvp-border);
    border-top-color: var(--pvp-primary);
    border-radius: 50%;
    animation: pvp-spin 1s linear infinite;
}

.pvp-history__modal-error {
    text-align: center;
    padding: 32px;
    color: var(--pvp-text-muted);
}

/* Skeleton shimmer animation */
@keyframes pvp-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BATTLE LOBBY (Room List View - Redesigned)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-battle-lobby {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    max-width: 100%;
    width: 100%;
    flex: 1;
    min-height: calc(100vh - 80px);
    background: linear-gradient(180deg, #030810 0%, #0a1628 50%, #050b15 100%);
    overflow: hidden;
}

/* Header */
.pvp-battle-lobby__header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.pvp-battle-lobby__back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(30, 50, 80, 0.6);
    border: 1px solid rgba(80, 180, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.pvp-battle-lobby__back-btn:hover {
    background: rgba(40, 60, 100, 0.7);
    border-color: rgba(80, 180, 255, 0.5);
}

.pvp-battle-lobby__back-arrow {
    font-size: 14px;
}

.pvp-battle-lobby__title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 3px;
    text-shadow: 0 2px 15px rgba(80, 180, 255, 0.4);
    margin: 0;
    flex: 1;
    text-align: center;
}

.pvp-battle-lobby__refresh-btn {
    width: 42px;
    height: 42px;
    background: rgba(30, 50, 80, 0.6);
    border: 1px solid rgba(80, 180, 255, 0.3);
    border-radius: 8px;
    color: #80b4ff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pvp-battle-lobby__refresh-btn:hover {
    background: rgba(40, 60, 100, 0.7);
    border-color: rgba(80, 180, 255, 0.5);
}

.pvp-battle-lobby__refresh-btn .spinning {
    animation: spin-refresh 1s linear infinite;
}

@keyframes spin-refresh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Create Arena Button */
.pvp-create-arena-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(90deg, #00d4ff 0%, #0099ff 30%, #6366f1 70%, #a855f7 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    box-shadow:
        0 0 20px rgba(0, 200, 255, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

.pvp-create-arena-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-25deg);
    animation: create-btn-shine 3s ease-in-out infinite;
}

@keyframes create-btn-shine {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

.pvp-create-arena-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 0 30px rgba(0, 200, 255, 0.6),
        0 8px 25px rgba(0, 0, 0, 0.4);
}

.pvp-create-arena-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pvp-create-arena-btn__icon {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.pvp-create-arena-btn__text {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Error */
.pvp-battle-lobby__error {
    position: relative;
    z-index: 1;
    background: rgba(255, 80, 80, 0.15);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: 10px;
    padding: 12px 16px;
    color: #ff6b6b;
    text-align: center;
    font-size: 14px;
}

/* Radar Panel */
.pvp-radar-panel {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 250px;
    background: linear-gradient(135deg, rgba(20, 40, 70, 0.7) 0%, rgba(15, 30, 55, 0.8) 100%);
    border: 1px solid rgba(80, 180, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pvp-radar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: rgba(128, 180, 255, 0.7);
    font-size: 14px;
}

.pvp-radar-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(80, 180, 255, 0.2);
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: spin-refresh 1s linear infinite;
}

/* Radar Empty State */
.pvp-radar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 30px;
}

.pvp-radar-visual {
    position: relative;
    width: 140px;
    height: 140px;
}

.pvp-radar-circle {
    position: absolute;
    border: 1px solid rgba(0, 200, 255, 0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pvp-radar-circle--1 {
    width: 40px;
    height: 40px;
}

.pvp-radar-circle--2 {
    width: 80px;
    height: 80px;
}

.pvp-radar-circle--3 {
    width: 120px;
    height: 120px;
}

.pvp-radar-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff;
}

.pvp-radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #00d4ff, transparent);
    transform-origin: left center;
    animation: radar-sweep 3s linear infinite;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

@keyframes radar-sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.pvp-radar-text {
    text-align: center;
}

.pvp-radar-text__title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    margin: 0 0 8px 0;
}

.pvp-radar-text__subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* Arena Grid (when rooms exist) */
.pvp-arena-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
}

.pvp-arena-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(30, 50, 80, 0.5);
    border: 1px solid rgba(80, 180, 255, 0.2);
    border-radius: 12px;
    transition: all 0.2s;
}

.pvp-arena-card:hover {
    background: rgba(40, 60, 100, 0.6);
    border-color: rgba(80, 180, 255, 0.4);
    transform: translateX(4px);
}

.pvp-arena-card__avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #00d4ff, #6366f1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.pvp-arena-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pvp-arena-card__name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.pvp-arena-card__league {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.pvp-arena-card__join-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(100, 100, 241, 0.3));
    border: 1px solid rgba(80, 180, 255, 0.4);
    border-radius: 8px;
    color: #00d4ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.pvp-arena-card__join-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.5), rgba(100, 100, 241, 0.5));
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
}

.pvp-arena-card__join-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Footer Stats Bar */
.pvp-battle-lobby__footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(30, 50, 80, 0.6) 0%, rgba(20, 35, 60, 0.7) 100%);
    border: 1px solid rgba(80, 180, 255, 0.2);
    border-radius: 12px;
}

.pvp-battle-lobby__league {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pvp-battle-lobby__league-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.pvp-battle-lobby__league-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pvp-battle-lobby__league-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.pvp-battle-lobby__league-mmr {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.pvp-battle-lobby__power {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pvp-battle-lobby__power-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
}

.pvp-battle-lobby__power-value {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 200, 0, 0.5);
}

.pvp-battle-lobby__power-icon {
    font-size: 18px;
    color: #ffd700;
    filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.6));
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .pvp-battle-lobby {
        padding: 16px;
        gap: 12px;
    }

    .pvp-battle-lobby__title {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .pvp-battle-lobby__back-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .pvp-create-arena-btn {
        padding: 12px 20px;
    }

    .pvp-create-arena-btn__text {
        font-size: 12px;
    }

    .pvp-radar-visual {
        width: 100px;
        height: 100px;
    }

    .pvp-radar-circle--1 { width: 30px; height: 30px; }
    .pvp-radar-circle--2 { width: 60px; height: 60px; }
    .pvp-radar-circle--3 { width: 90px; height: 90px; }

    .pvp-radar-sweep {
        width: 45px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ARENA STAGING AREA (Room View - Redesigned)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-arena-staging {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}

/* Header */
.pvp-staging__header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    position: relative;
}

.pvp-staging__title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 4px;
    text-shadow: 0 2px 20px rgba(80, 180, 255, 0.5);
    margin: 0;
    text-align: center;
}

.pvp-staging__abort-btn {
    position: absolute;
    right: 0;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(220, 50, 50, 0.8), rgba(180, 30, 30, 0.9));
    border: 1px solid rgba(255, 100, 100, 0.5);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.pvp-staging__abort-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(240, 60, 60, 0.9), rgba(200, 40, 40, 1));
    box-shadow: 0 0 20px rgba(255, 80, 80, 0.4);
}

.pvp-staging__abort-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Player Cards Container */
.pvp-staging__players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Player Card Base */
.pvp-staging__player-card {
    width: 200px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s;
}

/* Host Card - Cyan/Teal */
.pvp-staging__player-card--host {
    background: linear-gradient(135deg, rgba(0, 180, 200, 0.15), rgba(0, 120, 140, 0.2));
    border: 2px solid rgba(0, 200, 220, 0.5);
    box-shadow:
        0 0 30px rgba(0, 200, 220, 0.3),
        inset 0 0 30px rgba(0, 200, 220, 0.1);
}

.pvp-staging__player-card--host.pvp-staging__player-card--ready {
    border-color: #22c55e;
    box-shadow:
        0 0 40px rgba(34, 197, 94, 0.4),
        inset 0 0 30px rgba(34, 197, 94, 0.1);
}

/* Guest Card - Red/Pink */
.pvp-staging__player-card--guest {
    background: linear-gradient(135deg, rgba(200, 50, 100, 0.15), rgba(140, 30, 80, 0.2));
    border: 2px solid rgba(220, 80, 120, 0.5);
    box-shadow:
        0 0 30px rgba(220, 80, 120, 0.3),
        inset 0 0 30px rgba(220, 80, 120, 0.1);
}

.pvp-staging__player-card--guest.pvp-staging__player-card--ready {
    border-color: #22c55e;
    box-shadow:
        0 0 40px rgba(34, 197, 94, 0.4),
        inset 0 0 30px rgba(34, 197, 94, 0.1);
}

/* Empty Card - Scanning */
.pvp-staging__player-card--empty {
    background: linear-gradient(135deg, rgba(200, 50, 100, 0.1), rgba(140, 30, 80, 0.15));
    border: 2px solid rgba(180, 60, 100, 0.4);
    box-shadow:
        0 0 20px rgba(180, 60, 100, 0.2),
        inset 0 0 30px rgba(180, 60, 100, 0.05);
}

/* Player Avatar */
.pvp-staging__player-avatar {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 200, 255, 0.4);
}

.pvp-staging__player-card--guest .pvp-staging__player-avatar {
    background: linear-gradient(135deg, #ff6b9d, #c44569);
    box-shadow: 0 4px 20px rgba(255, 107, 157, 0.4);
}

/* Player Name */
.pvp-staging__player-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.pvp-staging__you-tag {
    color: #ffd700;
    font-size: 12px;
    margin-left: 4px;
}

/* League Badge */
.pvp-staging__player-league {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

.pvp-staging__league-icon {
    font-size: 16px;
}

.pvp-staging__league-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Player Status */
.pvp-staging__player-status {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.pvp-staging__player-status--ready {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.4));
    color: #22c55e;
}

.pvp-staging__status-icon {
    margin-right: 4px;
}

/* VS Badge */
.pvp-staging__vs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pvp-staging__vs-text {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, #00d4ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
}

/* Scanning State (Empty slot) */
.pvp-staging__scan-icon {
    width: 70px;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pvp-staging__scan-crosshair {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(180, 60, 100, 0.6);
    border-radius: 8px;
    animation: scan-pulse 2s ease-in-out infinite;
}

.pvp-staging__scan-crosshair::before,
.pvp-staging__scan-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(180, 60, 100, 0.6);
}

.pvp-staging__scan-crosshair::before {
    width: 2px;
    height: 12px;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.pvp-staging__scan-crosshair::after {
    width: 12px;
    height: 2px;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes scan-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.pvp-staging__scan-person {
    font-size: 28px;
    opacity: 0.4;
}

.pvp-staging__scan-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(180, 100, 120, 0.8);
    letter-spacing: 1px;
    text-align: center;
}

.pvp-staging__scan-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

/* Deck Selection */
.pvp-staging__deck-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pvp-staging__deck-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
}

.pvp-staging__deck-dropdown {
    padding: 10px 16px;
    background: rgba(30, 50, 80, 0.6);
    border: 1px solid rgba(80, 180, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    min-width: 150px;
    cursor: pointer;
}

.pvp-staging__deck-dropdown:focus {
    outline: none;
    border-color: rgba(80, 180, 255, 0.6);
}

/* Error */
.pvp-staging__error {
    background: rgba(255, 80, 80, 0.15);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: 10px;
    padding: 12px 16px;
    color: #ff6b6b;
    text-align: center;
    font-size: 14px;
}

/* Bottom Section */
.pvp-staging__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: auto;
    padding-top: 20px;
}

/* Beacon Animation */
.pvp-staging__beacon {
    position: relative;
    width: 100px;
    height: 100px;
}

.pvp-staging__beacon-ring {
    position: absolute;
    border: 2px solid rgba(220, 80, 100, 0.4);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: beacon-expand 2s ease-out infinite;
}

.pvp-staging__beacon-ring--1 {
    width: 30px;
    height: 30px;
    animation-delay: 0s;
}

.pvp-staging__beacon-ring--2 {
    width: 60px;
    height: 60px;
    animation-delay: 0.5s;
}

.pvp-staging__beacon-ring--3 {
    width: 90px;
    height: 90px;
    animation-delay: 1s;
}

@keyframes beacon-expand {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

.pvp-staging__beacon-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #dc4864;
    border-radius: 50%;
    box-shadow: 0 0 15px #dc4864, 0 0 30px #dc4864;
    animation: beacon-glow 1s ease-in-out infinite alternate;
}

@keyframes beacon-glow {
    0% { box-shadow: 0 0 15px #dc4864, 0 0 30px #dc4864; }
    100% { box-shadow: 0 0 25px #dc4864, 0 0 50px #dc4864; }
}

.pvp-staging__beacon-text {
    text-align: center;
}

.pvp-staging__beacon-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    margin: 0 0 8px 0;
}

.pvp-staging__beacon-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* Ready Button */
.pvp-staging__ready-btn {
    padding: 16px 48px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
}

.pvp-staging__ready-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.6);
}

.pvp-staging__ready-btn--ready {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: none;
}

.pvp-staging__ready-btn--ready:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(100, 116, 139, 0.4);
}

.pvp-staging__ready-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Countdown Overlay */
.pvp-staging__countdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: pvp-fade-in 0.3s ease;
}

.pvp-staging__countdown {
    font-size: 140px;
    font-weight: 900;
    background: linear-gradient(135deg, #00d4ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.6));
    animation: staging-pulse 1s ease infinite;
}

.pvp-staging__countdown-text {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 4px;
    margin-top: 16px;
}

@keyframes staging-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .pvp-arena-staging {
        padding: 16px;
        gap: 16px;
    }

    .pvp-staging__title {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .pvp-staging__abort-btn {
        position: static;
        padding: 8px 14px;
        font-size: 10px;
    }

    .pvp-staging__header {
        flex-direction: column;
        gap: 12px;
    }

    .pvp-staging__players {
        flex-direction: column;
        gap: 16px;
    }

    .pvp-staging__player-card {
        width: 100%;
        max-width: 280px;
        min-height: 180px;
    }

    .pvp-staging__vs {
        transform: rotate(90deg);
    }

    .pvp-staging__vs-text {
        font-size: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BATTLE VIEW (Visual Combat Animation)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-battle {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: linear-gradient(180deg, rgba(10, 10, 20, 1) 0%, rgba(20, 15, 40, 1) 100%);
    position: relative;
    overflow: hidden;
}

.pvp-battle__arena {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
}

/* HP Bars Container */
.pvp-battle__hp-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.pvp-battle__hp-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pvp-battle__hp-bar--right {
    align-items: flex-end;
}

.pvp-battle__hp-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--pvp-text);
}

.pvp-battle__hp-bar--right .pvp-battle__hp-label {
    flex-direction: row-reverse;
}

.pvp-battle__hp-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pvp-battle__hp-value {
    color: var(--pvp-success);
    font-family: 'SF Mono', monospace;
}

.pvp-battle__hp-track {
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.pvp-battle__hp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pvp-success), #00ff88);
    border-radius: 8px;
    transition: width 0.5s ease;
    position: relative;
}

.pvp-battle__hp-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 8px 8px 0 0;
}

.pvp-battle__hp-fill--low {
    background: linear-gradient(90deg, var(--pvp-danger), #ff8888);
}

.pvp-battle__hp-fill--medium {
    background: linear-gradient(90deg, var(--pvp-warning), #ffdd66);
}

/* Battle Arena */
.pvp-battle__field {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    min-height: 300px;
}

/* Card Display */
.pvp-battle__card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}

.pvp-battle__card {
    width: 120px;
    height: 160px;
    background: linear-gradient(135deg, var(--pvp-secondary), var(--pvp-primary-dark));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.3s ease;
}

.pvp-battle__card--attacking {
    animation: pvp-card-attack 0.5s ease;
}

.pvp-battle__card--hit {
    animation: pvp-card-hit 0.3s ease;
}

.pvp-battle__card--left.pvp-battle__card--attacking {
    animation: pvp-card-attack-left 0.5s ease;
}

.pvp-battle__card--right.pvp-battle__card--attacking {
    animation: pvp-card-attack-right 0.5s ease;
}

@keyframes pvp-card-attack-left {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(50px) scale(1.1); }
}

@keyframes pvp-card-attack-right {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-50px) scale(1.1); }
}

@keyframes pvp-card-hit {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.pvp-battle__card-image {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 8px;
    overflow: hidden;
}

.pvp-battle__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pvp-battle__card-name {
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pvp-battle__card-stats {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    font-size: 10px;
}

.pvp-battle__card-stat {
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    color: white;
}

.pvp-battle__card-stat--atk {
    color: var(--pvp-danger);
}

.pvp-battle__card-stat--def {
    color: var(--pvp-primary);
}

/* Damage Number */
.pvp-battle__damage {
    position: absolute;
    top: 20%;
    font-size: 32px;
    font-weight: 800;
    color: var(--pvp-danger);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 107, 107, 0.5);
    animation: pvp-damage-pop 0.8s ease forwards;
    pointer-events: none;
    z-index: 20;
}

@keyframes pvp-damage-pop {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

/* VS Badge in battle */
.pvp-battle__vs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--pvp-danger), var(--pvp-warning));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: white;
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    z-index: 10;
}

/* Round Counter */
.pvp-battle__round {
    text-align: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--pvp-border);
}

.pvp-battle__round-label {
    font-size: 12px;
    color: var(--pvp-text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pvp-battle__round-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--pvp-primary);
    margin-top: 4px;
}

/* Battle Log */
.pvp-battle__log {
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--pvp-border);
    max-height: 80px;
    overflow-y: auto;
}

.pvp-battle__log-entry {
    font-size: 13px;
    color: var(--pvp-text-muted);
    padding: 4px 0;
    animation: pvp-fade-in 0.3s ease;
}

.pvp-battle__log-entry--highlight {
    color: var(--pvp-primary);
    font-weight: 600;
}

.pvp-battle__log-damage {
    color: var(--pvp-danger);
    font-weight: 700;
}

/* Battle Controls */
.pvp-battle__controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
}

/* Battle Intro */
.pvp-battle__intro {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pvp-bg-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: pvp-fade-in 0.3s ease;
}

.pvp-battle__intro-players {
    display: flex;
    align-items: center;
    gap: 40px;
}

.pvp-battle__intro-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pvp-battle__intro-player--left {
    animation: pvp-slide-in-left 0.6s ease;
}

.pvp-battle__intro-player--right {
    animation: pvp-slide-in-right 0.6s ease;
}

.pvp-battle__intro-avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--pvp-secondary), var(--pvp-primary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: white;
    box-shadow: 0 8px 32px rgba(108, 92, 231, 0.4);
}

.pvp-battle__intro-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--pvp-text);
}

.pvp-battle__intro-vs {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--pvp-danger), var(--pvp-warning));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    color: white;
    animation: pvp-scale-in 0.5s ease 0.3s both, pvp-battle-vs-pulse 1s ease 0.8s infinite;
    box-shadow: 0 0 50px rgba(255, 107, 107, 0.5);
}

@keyframes pvp-battle-vs-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.pvp-battle__intro-text {
    margin-top: 32px;
    font-size: 24px;
    font-weight: 300;
    color: var(--pvp-text-muted);
    animation: pvp-fade-in 0.5s ease 0.5s both;
}

/* Battle Finish */
.pvp-battle__finish {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: pvp-fade-in 0.3s ease;
}

.pvp-battle__finish-text {
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    animation: pvp-scale-in 0.5s ease;
}

.pvp-battle__finish-text--victory {
    background: linear-gradient(135deg, var(--pvp-success), #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pvp-battle__finish-text--defeat {
    background: linear-gradient(135deg, var(--pvp-danger), #ff8888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pvp-battle__finish-text--draw {
    background: linear-gradient(135deg, var(--pvp-warning), #ffee88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pvp-battle__finish-sub {
    font-size: 18px;
    color: var(--pvp-text-muted);
    margin-top: 16px;
    animation: pvp-fade-in 0.5s ease 0.3s both;
}

/* Skip Button */
.pvp-battle__skip {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 50;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD-BASED BATTLE VIEW (v2.0)
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-battle-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #0a0f1a 0%, #1a1f2e 100%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Intro Phase */
.pvp-battle-intro {
    text-align: center;
    animation: pvp-fade-in 0.5s ease;
}

.pvp-battle-intro-title {
    font-size: 36px;
    font-weight: 900;
    color: var(--pvp-gold);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 40px;
    animation: pvp-pulse 1s ease infinite;
}

.pvp-battle-intro-players {
    display: flex;
    align-items: center;
    gap: 40px;
}

.pvp-intro-player {
    text-align: center;
}

.pvp-intro-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--pvp-text);
    margin-bottom: 8px;
}

.pvp-intro-cards {
    font-size: 14px;
    color: var(--pvp-text-muted);
}

.pvp-intro-vs {
    font-size: 32px;
    font-weight: 900;
    color: var(--pvp-danger);
    animation: pvp-scale-in 0.5s ease;
}

/* Battle Arena */
.pvp-battle-arena {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.pvp-battle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pvp-battle-round {
    font-size: 18px;
    font-weight: 700;
    color: var(--pvp-primary);
}

.pvp-skip-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--pvp-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.pvp-skip-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--pvp-text);
}

.pvp-battle-players-bar {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 20px;
}

.pvp-player-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pvp-player-info.right {
    flex-direction: row-reverse;
}

.pvp-player-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--pvp-text);
}

.pvp-alive-count {
    font-size: 12px;
    color: var(--pvp-text-muted);
}

/* Battle Field */
.pvp-battle-field {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

.pvp-team {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    max-width: 200px;
}

.pvp-team-left {
    align-items: flex-start;
}

.pvp-team-right {
    align-items: flex-end;
}

.pvp-battle-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pvp-vs-icon {
    font-size: 32px;
    opacity: 0.5;
}

/* Battle Cards */
.pvp-battle-card {
    position: relative;
    padding: 12px 16px;
    background: var(--pvp-bg-card);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    min-width: 140px;
}

.pvp-battle-card-left {
    border-left: 4px solid var(--pvp-primary);
}

.pvp-battle-card-right {
    border-right: 4px solid var(--pvp-danger);
}

.pvp-battle-card.is-attacking {
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--pvp-primary);
    border-color: var(--pvp-primary);
    z-index: 10;
}

.pvp-battle-card.is-attacking.pvp-battle-card-right {
    box-shadow: 0 0 20px var(--pvp-danger);
    border-color: var(--pvp-danger);
}

.pvp-battle-card.is-hit {
    animation: pvp-card-hit 0.3s ease;
}

.pvp-battle-card.is-dead {
    opacity: 0.4;
    filter: grayscale(1);
}

@keyframes pvp-card-hit {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.pvp-battle-card-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pvp-battle-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--pvp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card HP Bar */
.pvp-card-hp-bar {
    position: relative;
    height: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.pvp-card-hp-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.pvp-card-hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Damage Number */
.pvp-damage-number {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--pvp-danger);
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    animation: pvp-damage-pop 0.5s ease forwards;
    z-index: 20;
}

@keyframes pvp-damage-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

/* Dead Overlay */
.pvp-card-dead-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    opacity: 0.8;
}

/* Battle Log */
.pvp-battle-log {
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    max-height: 120px;
    overflow-y: auto;
}

.pvp-log-entry {
    font-size: 13px;
    color: var(--pvp-text-muted);
    padding: 4px 0;
    animation: pvp-slide-in 0.3s ease;
}

.pvp-log-entry.is-kill {
    color: var(--pvp-danger);
    font-weight: 600;
}

@keyframes pvp-slide-in {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Finish Phase */
.pvp-battle-finish {
    text-align: center;
    animation: pvp-fade-in 0.5s ease;
}

.pvp-battle-result {
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 32px;
}

.pvp-battle-result.victory {
    color: var(--pvp-success);
    text-shadow: 0 0 30px rgba(0, 184, 148, 0.5);
}

.pvp-battle-result.defeat {
    color: var(--pvp-danger);
    text-shadow: 0 0 30px rgba(231, 76, 60, 0.5);
}

.pvp-battle-result.draw {
    color: var(--pvp-warning);
    text-shadow: 0 0 30px rgba(255, 184, 76, 0.5);
}

.pvp-battle-final-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.pvp-final-team {
    text-align: center;
}

.pvp-final-team > div:first-child {
    font-size: 18px;
    font-weight: 600;
    color: var(--pvp-text);
    margin-bottom: 8px;
}

.pvp-final-alive {
    font-size: 14px;
    color: var(--pvp-text-muted);
}

.pvp-final-vs {
    font-size: 18px;
    color: var(--pvp-text-muted);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .pvp-battle-intro-title {
        font-size: 24px;
    }

    .pvp-battle-intro-players {
        flex-direction: column;
        gap: 20px;
    }

    .pvp-battle-field {
        flex-direction: column;
        gap: 40px;
    }

    .pvp-team {
        flex-direction: row;
        max-width: 100%;
        justify-content: center;
    }

    .pvp-battle-card {
        min-width: 100px;
        padding: 8px 12px;
    }

    .pvp-battle-result {
        font-size: 32px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * TURN-BASED PVP BATTLE VIEW v3.0
 * Styles for interactive turn-based card battles
 * ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-battle-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 16px;
    gap: 12px;
    overflow: auto;
}

/* Header - Turn info */
.pvp-battle-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
}

.pvp-battle-turn-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pvp-turn-number {
    font-size: 14px;
    color: var(--pvp-text-muted);
}

.pvp-turn-indicator {
    font-size: 18px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    animation: pulse 1.5s ease infinite;
}

.pvp-turn-indicator.my-turn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.pvp-turn-indicator.opponent-turn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    opacity: 0.7;
}

/* Players Bar */
.pvp-battle-players-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.pvp-player-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pvp-player-info.right {
    flex-direction: row-reverse;
}

.pvp-player-name {
    font-weight: 600;
    color: #fff;
}

.pvp-alive-count {
    font-size: 12px;
    color: var(--pvp-text-muted);
}

/* Instructions */
.pvp-battle-instructions {
    text-align: center;
    padding: 8px 16px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    color: #ffd700;
    font-weight: 500;
}

/* Battle Field */
.pvp-battle-field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    gap: 20px;
    padding: 16px 0;
}

/* Team containers */
.pvp-team {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    max-width: 200px;
}

.pvp-team-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pvp-text-muted);
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pvp-team-left {
    align-items: flex-start;
}

.pvp-team-right {
    align-items: flex-end;
}

/* Battle Center */
.pvp-battle-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 20px;
}

.pvp-vs-icon {
    font-size: 48px;
    opacity: 0.5;
}

/* Action Animation */
.pvp-action-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: actionPulse 0.5s ease;
}

.pvp-action-text {
    font-weight: bold;
    color: #fff;
    font-size: 14px;
}

.pvp-action-arrow {
    font-size: 32px;
    animation: bounce 0.5s ease infinite;
}

.pvp-action-damage {
    font-size: 24px;
    font-weight: bold;
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

@keyframes actionPulse {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Battle Cards */
.pvp-battle-card {
    background: linear-gradient(135deg, #2a2a4a 0%, #1a1a3a 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    width: 160px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pvp-battle-card:hover:not(.is-dead):not(.is-disabled) {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.pvp-battle-card.is-selected {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
    transform: scale(1.05);
}

.pvp-battle-card.is-targetable {
    border-color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    animation: targetPulse 1s ease infinite;
}

.pvp-battle-card.is-dead {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: not-allowed;
}

.pvp-battle-card.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@keyframes targetPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.7); }
}

/* Card inner */
.pvp-battle-card-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pvp-battle-card-name {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pvp-battle-card-stats {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: var(--pvp-text-muted);
}

/* Card HP Bar */
.pvp-card-hp-bar {
    height: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.pvp-card-hp-bar-fill {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 10px;
}

.pvp-card-hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Card overlays */
.pvp-card-dead-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    opacity: 0.8;
}

.pvp-card-selected-indicator {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #22c55e;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.pvp-card-target-indicator {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Attack Button */
.pvp-battle-actions {
    display: flex;
    justify-content: center;
    padding: 12px;
}

.pvp-attack-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 14px 48px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.pvp-attack-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
}

.pvp-attack-btn:disabled {
    background: #666;
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

/* Waiting Overlay */
.pvp-waiting-overlay {
    text-align: center;
    padding: 20px;
}

.pvp-waiting-text {
    font-size: 18px;
    color: var(--pvp-text-muted);
    animation: pulse 1.5s ease infinite;
}

/* Action Log */
.pvp-battle-log {
    max-height: 100px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 8px;
}

.pvp-log-entry {
    font-size: 12px;
    color: var(--pvp-text-muted);
    padding: 4px 8px;
    border-radius: 4px;
}

.pvp-log-entry:nth-child(odd) {
    background: rgba(255, 255, 255, 0.03);
}

/* Battle Finish Screen */
.pvp-battle-finish {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 24px;
    animation: fadeIn 0.5s ease;
}

.pvp-battle-result {
    font-size: 48px;
    font-weight: bold;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.pvp-battle-result.victory {
    color: #22c55e;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}

.pvp-battle-result.defeat {
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

.pvp-battle-final-score {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pvp-final-team {
    text-align: center;
}

.pvp-final-team div:first-child {
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.pvp-final-alive {
    font-size: 14px;
    color: var(--pvp-text-muted);
}

.pvp-final-vs {
    font-size: 24px;
    color: var(--pvp-text-muted);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Mobile Responsive for Turn-Based Battle */
@media (max-width: 600px) {
    .pvp-battle-field {
        flex-direction: column;
        align-items: center;
    }

    .pvp-team {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    .pvp-battle-card {
        width: 130px;
        padding: 8px;
    }

    .pvp-battle-center {
        min-width: auto;
        padding: 10px;
    }

    .pvp-turn-indicator {
        font-size: 14px;
        padding: 4px 12px;
    }

    .pvp-attack-btn {
        padding: 12px 32px;
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PVP BATTLE VIEW V4.0 - PvE-Style Cosmic Arena
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-battle-view-v4 {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(125deg,
        #0a0015 0%,
        #1a0a2e 25%,
        #0d0620 50%,
        #1e0836 75%,
        #0a0015 100%
    );
    background-size: 400% 400%;
    animation: pvpGradientShift 15s ease infinite;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@keyframes pvpGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Cosmic Background - Stars */
.pvp-battle-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 160px 120px, #fff, transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 250px 150px, #fff, transparent),
        radial-gradient(2px 2px at 300px 100px, rgba(255,255,255,0.7), transparent);
    background-size: 550px 250px;
    background-repeat: repeat;
    animation: pvpTwinkle 4s ease-in-out infinite, pvpStarsMove 60s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes pvpTwinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes pvpStarsMove {
    from { background-position: 0 0; }
    to { background-position: 550px 250px; }
}

/* Cosmic Background - Nebula */
.pvp-battle-nebula {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 60% at 75% 20%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 25% 80%, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 60%);
    animation: pvpNebulaPulse 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes pvpNebulaPulse {
    0% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
    100% { opacity: 0.7; transform: scale(1.02); }
}

/* Floating Particles */
.pvp-battle-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.4) 0%, transparent 8%),
        radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.3) 0%, transparent 10%),
        radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.25) 0%, transparent 6%);
    animation: pvpFloatParticles 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

@keyframes pvpFloatParticles {
    0% { transform: translate(0, 0); }
    25% { transform: translate(2%, -1%); }
    50% { transform: translate(-1%, 2%); }
    75% { transform: translate(-2%, -2%); }
    100% { transform: translate(0, 0); }
}

/* HUD */
.pvp-battle-hud-v4 {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(10, 15, 30, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
}

.pvp-turn-badge-v4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    padding: 8px 16px;
}

.pvp-turn-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
}

.pvp-turn-number-v4 {
    font-size: 24px;
    font-weight: 900;
    color: #a78bfa;
}

/* Turn Timer */
.pvp-turn-timer-v4 {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pvp-timer-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
}

.pvp-timer-progress {
    transition: stroke-dasharray 0.3s ease, stroke 0.3s ease;
}

.pvp-timer-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.pvp-timer-seconds {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.pvp-timer-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
}

.pvp-turn-timer-v4.low .pvp-timer-seconds {
    color: #f59e0b;
}

.pvp-turn-timer-v4.critical .pvp-timer-seconds {
    color: #ef4444;
    animation: pvpTimerPulse 0.5s ease-in-out infinite;
}

@keyframes pvpTimerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.pvp-turn-indicator-v4 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pvp-turn-indicator-v4.my-turn {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.1));
    border: 2px solid #22c55e;
    color: #4ade80;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
}

.pvp-turn-indicator-v4.opponent-turn {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.1));
    border: 2px solid #ef4444;
    color: #f87171;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
}

.pvp-turn-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pvpDotPulse 1s ease-in-out infinite;
}

.pvp-turn-dot.green {
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
}

.pvp-turn-dot.red {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
}

@keyframes pvpDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Players Bar */
.pvp-players-bar-v4 {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.3);
}

.pvp-player-info-v4 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pvp-player-info-v4.right {
    flex-direction: row-reverse;
}

.pvp-player-avatar-v4 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.pvp-player-avatar-v4.enemy {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.pvp-player-details-v4 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pvp-player-name-v4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.pvp-player-alive-v4 {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.pvp-vs-badge-v4 {
    font-size: 20px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 4px;
}

/* Instructions */
.pvp-instructions-v4 {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 12px 20px;
    background: rgba(251, 191, 36, 0.15);
    border-top: 1px solid rgba(251, 191, 36, 0.3);
    border-bottom: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pvp-instructions-v4.urgent {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
    animation: pvpUrgentPulse 0.5s ease-in-out infinite;
}

.pvp-hurry {
    color: #ef4444;
    font-weight: 700;
    animation: pvpHurryBlink 0.3s ease-in-out infinite;
}

@keyframes pvpUrgentPulse {
    0%, 100% { background: rgba(239, 68, 68, 0.2); }
    50% { background: rgba(239, 68, 68, 0.3); }
}

@keyframes pvpHurryBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Battle Arena */
.pvp-battle-arena-v4 {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 10px 30px;
    min-height: 0;
    max-height: calc(100vh - 280px);
}

.pvp-team-v4 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.pvp-team-label-v4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
    text-align: center;
    font-weight: 700;
}

/* Staggered Card Layout - PvE Style */
.pvp-team-cards-v4 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* Left team cards - stagger to the right */
.pvp-team-left-v4 .pvp-team-cards-v4 {
    align-items: flex-end;
}

.pvp-team-left-v4 .pvp-team-cards-v4 > *:nth-child(1) {
    transform: translateX(-30px);
}

.pvp-team-left-v4 .pvp-team-cards-v4 > *:nth-child(2) {
    transform: translateX(0px);
}

.pvp-team-left-v4 .pvp-team-cards-v4 > *:nth-child(3) {
    transform: translateX(-30px);
}

/* Right team cards - stagger to the left */
.pvp-team-right-v4 .pvp-team-cards-v4 {
    align-items: flex-start;
}

.pvp-team-right-v4 .pvp-team-cards-v4 > *:nth-child(1) {
    transform: translateX(30px);
}

.pvp-team-right-v4 .pvp-team-cards-v4 > *:nth-child(2) {
    transform: translateX(0px);
}

.pvp-team-right-v4 .pvp-team-cards-v4 > *:nth-child(3) {
    transform: translateX(30px);
}

/* Battle Cards V4 */
.pvp-battle-card-v4 {
    position: relative;
    width: 180px;
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.95), rgba(15, 23, 42, 0.98));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pvp-battle-card-v4:hover:not(.is-dead):not(.is-disabled) {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(139, 92, 246, 0.2);
}

.pvp-battle-card-v4-left {
    border-left: 4px solid #6366f1;
}

.pvp-battle-card-v4-right {
    border-right: 4px solid #ef4444;
}

.pvp-battle-card-v4.is-selected {
    border-color: #fbbf24 !important;
    box-shadow:
        0 0 0 3px rgba(251, 191, 36, 0.3),
        0 0 50px rgba(251, 191, 36, 0.4),
        inset 0 0 30px rgba(251, 191, 36, 0.1);
    transform: translateY(-8px) scale(1.05);
}

.pvp-battle-card-v4.is-targetable {
    border-color: #ef4444 !important;
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.3),
        0 0 40px rgba(239, 68, 68, 0.5);
    animation: pvpTargetPulse 1.2s ease-in-out infinite;
}

@keyframes pvpTargetPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3), 0 0 40px rgba(239, 68, 68, 0.5);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.4), 0 0 60px rgba(239, 68, 68, 0.6);
    }
}

.pvp-battle-card-v4.is-dead {
    opacity: 0.4;
    filter: grayscale(0.8) brightness(0.7);
    transform: scale(0.95);
    cursor: not-allowed;
}

.pvp-battle-card-v4.is-disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.pvp-battle-card-v4.is-hit {
    animation: pvpCardHit 0.5s ease-out;
}

@keyframes pvpCardHit {
    0% { transform: scale(1); filter: brightness(1); }
    15% { transform: scale(0.92) translateX(-5px); filter: brightness(2); }
    30% { transform: scale(0.95) translateX(5px); filter: brightness(1.5); }
    45% { transform: scale(0.93) translateX(-3px); filter: brightness(0.8); }
    100% { transform: scale(1) translateX(0); filter: brightness(1); }
}

/* Card Glow */
.pvp-card-glow-v4 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rarity-color, #6b7280), transparent);
    opacity: 0.7;
}

/* Card Content */
.pvp-card-content-v4 {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pvp-card-header-v4 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pvp-card-name-v4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    flex: 1;
}

.pvp-card-ticker-v4 {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.pvp-card-stats-v4 {
    display: flex;
    gap: 12px;
}

.pvp-card-stat-v4 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}

.pvp-stat-atk {
    color: #f87171;
}

.pvp-stat-def {
    color: #60a5fa;
}

.pvp-stat-icon {
    font-size: 10px;
}

.pvp-stat-value {
    font-weight: 700;
}

/* HP Bar V4 */
.pvp-card-hp-bar-v4 {
    position: relative;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pvp-card-hp-bar-fill-v4 {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease, background 0.3s ease;
    box-shadow: 0 0 10px currentColor;
}

.pvp-card-hp-text-v4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Dead Overlay */
.pvp-card-dead-overlay-v4 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.pvp-dead-icon {
    font-size: 32px;
}

.pvp-dead-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Selection Indicators */
.pvp-card-selected-v4,
.pvp-card-targetable-v4 {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    animation: pvpBounce 0.5s ease;
}

.pvp-card-selected-v4 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.5);
}

.pvp-card-targetable-v4 {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
}

@keyframes pvpBounce {
    0% { transform: translateX(-50%) translateY(-10px); opacity: 0; }
    50% { transform: translateX(-50%) translateY(5px); }
    100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* Damage Popup */
.pvp-damage-popup-v4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 900;
    color: #ff4444;
    text-shadow:
        0 0 10px #ff0000,
        0 0 20px #ff4444,
        2px 2px 0 #000,
        -2px -2px 0 #000;
    animation: pvpDamagePopup 1s ease-out forwards;
    z-index: 100;
}

@keyframes pvpDamagePopup {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    100% { transform: translate(-50%, -100%) scale(1); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BATTLE CARDS V5 - PvE Style with Card Images
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-battle-card-v5 {
    position: relative;
    width: 160px;
    height: 220px;
    perspective: 1000px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pvp-battle-card-v5:hover:not(.is-dead):not(.is-disabled) {
    transform: translateY(-10px) scale(1.05);
}

.pvp-battle-card-v5-left:hover:not(.is-dead) {
    transform: translateY(-10px) scale(1.05) rotateY(5deg);
}

.pvp-battle-card-v5-right:hover:not(.is-dead) {
    transform: translateY(-10px) scale(1.05) rotateY(-5deg);
}

/* Card Frame */
.pvp-card-frame-v5 {
    width: 100%;
    height: 100%;
    background: var(--rarity-bg, linear-gradient(145deg, rgba(30, 27, 75, 0.95), rgba(15, 23, 42, 0.98)));
    border: 3px solid var(--rarity-color, #6b7280);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 30px var(--rarity-glow, rgba(100, 100, 100, 0.3)),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.pvp-battle-card-v5.is-selected .pvp-card-frame-v5 {
    border-color: #fbbf24 !important;
    box-shadow:
        0 0 0 4px rgba(251, 191, 36, 0.3),
        0 0 50px rgba(251, 191, 36, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(251, 191, 36, 0.1);
}

.pvp-battle-card-v5.is-targetable .pvp-card-frame-v5 {
    border-color: #ef4444 !important;
    box-shadow:
        0 0 0 4px rgba(239, 68, 68, 0.3),
        0 0 50px rgba(239, 68, 68, 0.6);
    animation: pvpTargetPulseV5 1.2s ease-in-out infinite;
}

@keyframes pvpTargetPulseV5 {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3), 0 0 50px rgba(239, 68, 68, 0.5);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.5), 0 0 70px rgba(239, 68, 68, 0.7);
    }
}

/* Card Image Area */
.pvp-card-image-v5 {
    position: relative;
    width: 100%;
    height: 110px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(20, 20, 40, 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pvp-card-image-v5 img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.pvp-battle-card-v5:hover .pvp-card-image-v5 img {
    transform: scale(1.1);
}

.pvp-card-ticker-fallback {
    font-size: 28px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
}

/* Category Badge */
.pvp-card-category-v5 {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Rarity Badge */
.pvp-card-rarity-v5 {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Card Name */
.pvp-card-name-v5 {
    padding: 8px 10px 4px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Audiowide', 'Orbitron', sans-serif;
}

/* Stats Row */
.pvp-card-stats-v5 {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 4px 10px;
}

.pvp-stat-v5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.pvp-stat-v5 .pvp-stat-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pvp-stat-v5 .pvp-stat-value {
    font-size: 16px;
    font-weight: 900;
    font-family: 'Orbitron', monospace;
}

.pvp-stat-v5.pvp-stat-atk .pvp-stat-value {
    color: #f87171;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

.pvp-stat-v5.pvp-stat-def .pvp-stat-value {
    color: #60a5fa;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

/* Dead State V5 */
.pvp-battle-card-v5.is-dead {
    opacity: 0.5;
    filter: grayscale(0.8) brightness(0.6);
    transform: scale(0.95);
    cursor: not-allowed;
}

.pvp-battle-card-v5.is-dead:hover {
    transform: scale(0.95);
}

.pvp-battle-card-v5.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.pvp-battle-card-v5.is-hit {
    animation: pvpCardHitV5 0.5s ease-out;
}

@keyframes pvpCardHitV5 {
    0% { transform: scale(1); filter: brightness(1); }
    15% { transform: scale(0.92) translateX(-8px); filter: brightness(2.5); }
    30% { transform: scale(0.95) translateX(8px); filter: brightness(1.5); }
    45% { transform: scale(0.93) translateX(-4px); filter: brightness(0.7); }
    100% { transform: scale(1) translateX(0); filter: brightness(1); }
}

/* Dead Overlay V5 */
.pvp-card-dead-overlay-v5 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pvp-card-dead-overlay-v5 .pvp-dead-icon {
    font-size: 40px;
    animation: pvpDeathPulse 2s ease-in-out infinite;
}

@keyframes pvpDeathPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.pvp-card-dead-overlay-v5 .pvp-dead-text {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Selection Indicators V5 */
.pvp-card-selected-v5,
.pvp-card-targetable-v5 {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    animation: pvpBounceV5 0.4s ease-out;
    z-index: 10;
}

.pvp-card-selected-v5 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.6);
}

.pvp-card-targetable-v5 {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.6);
}

@keyframes pvpBounceV5 {
    0% { transform: translateX(-50%) translateY(-15px); opacity: 0; }
    60% { transform: translateX(-50%) translateY(4px); }
    100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* Damage Popup V5 */
.pvp-damage-popup-v5 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 900;
    color: #ff3333;
    font-family: 'Orbitron', monospace;
    text-shadow:
        0 0 15px #ff0000,
        0 0 30px #ff4444,
        3px 3px 0 #000,
        -3px -3px 0 #000,
        3px -3px 0 #000,
        -3px 3px 0 #000;
    animation: pvpDamagePopupV5 1s ease-out forwards;
    z-index: 100;
}

@keyframes pvpDamagePopupV5 {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -120%) scale(1); opacity: 0; }
}

/* Responsive V5 Cards */
@media (max-width: 768px) {
    .pvp-battle-card-v5 {
        width: 130px;
        height: 180px;
    }

    .pvp-card-image-v5 {
        height: 85px;
    }

    .pvp-card-name-v5 {
        font-size: 11px;
        padding: 6px 8px 3px;
    }

    .pvp-stat-v5 .pvp-stat-value {
        font-size: 14px;
    }

    .pvp-card-category-v5,
    .pvp-card-rarity-v5 {
        font-size: 8px;
        padding: 2px 6px;
    }
}

@media (max-width: 480px) {
    .pvp-battle-card-v5 {
        width: 110px;
        height: 155px;
    }

    .pvp-card-image-v5 {
        height: 70px;
    }

    .pvp-card-name-v5 {
        font-size: 10px;
        padding: 4px 6px 2px;
    }

    .pvp-stat-v5 .pvp-stat-value {
        font-size: 12px;
    }

    .pvp-card-stats-v5 {
        gap: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BATTLE CARDS V6 - PvE Style with Full PNG Card Images
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Main Card Container */
.pvp-card-pve-style {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pvp-card-pve-style:hover:not(.is-dead):not(.is-disabled) {
    transform: translateY(-8px) scale(1.03);
}

.pvp-card-pve-style.is-dead {
    opacity: 0.5;
    filter: grayscale(0.8) brightness(0.6);
    transform: scale(0.95);
    cursor: not-allowed;
}

.pvp-card-pve-style.is-disabled {
    cursor: default;
    opacity: 0.5;
    filter: grayscale(0.3) brightness(0.8);
    transform: scale(0.95);
    pointer-events: none;
}

.pvp-card-pve-style.is-hit {
    animation: pvpCardHitPve 0.5s ease-out;
}

@keyframes pvpCardHitPve {
    0% { transform: scale(1); filter: brightness(1); }
    15% { transform: scale(0.92) translateX(-8px); filter: brightness(2.5); }
    30% { transform: scale(0.95) translateX(8px); filter: brightness(1.5); }
    45% { transform: scale(0.93) translateX(-4px); filter: brightness(0.7); }
    100% { transform: scale(1) translateX(0); filter: brightness(1); }
}

/* Active Attacker Card - Bigger, Brighter, Animated */
.pvp-card-pve-style.is-active-attacker {
    transform: scale(1.15);
    z-index: 100;
    animation: pvpActiveAttackerPulse 1.5s ease-in-out infinite;
    filter: brightness(1.2) saturate(1.2);
}

.pvp-card-pve-style.is-active-attacker .pvp-card-main {
    box-shadow:
        0 0 30px rgba(34, 197, 94, 0.8),
        0 0 60px rgba(34, 197, 94, 0.5),
        0 0 90px rgba(34, 197, 94, 0.3),
        inset 0 0 20px rgba(34, 197, 94, 0.2) !important;
    border-color: #22c55e !important;
    border-width: 3px;
}

/* Glowing border animation for active attacker */
.pvp-card-pve-style.is-active-attacker::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #22c55e, #4ade80, #86efac, #22c55e);
    background-size: 400% 400%;
    border-radius: 15px;
    z-index: -1;
    animation: pvpActiveGlowRotate 2s linear infinite;
    opacity: 0.7;
}

/* "YOUR TURN" indicator on active card */
.pvp-card-pve-style.is-active-attacker::after {
    content: '⚔️ ATTACK';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
    animation: pvpAttackLabelBounce 0.8s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.5);
    z-index: 101;
}

@keyframes pvpActiveAttackerPulse {
    0%, 100% {
        transform: scale(1.15) translateY(0);
        filter: brightness(1.2) saturate(1.2);
    }
    50% {
        transform: scale(1.18) translateY(-5px);
        filter: brightness(1.35) saturate(1.3);
    }
}

@keyframes pvpActiveGlowRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pvpAttackLabelBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
}

/* Main Card Body */
.pvp-card-main {
    position: relative;
    width: 130px;
    height: 185px;
    border-radius: 10px;
    border: 2px solid #a855f7;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a2e 0%, #0a0a15 100%);
    transition: all 0.3s ease;
}

.pvp-card-main:hover {
    transform: translateY(-3px);
}

/* PNG Card Image - Full Background */
.pvp-card-png {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Fallback Design */
.pvp-card-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

.pvp-fallback-ticker {
    font-size: 36px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

/* Category Badge - Top Left */
.pvp-card-category-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* Level Badge - Top Left, below category */
.pvp-card-level-badge {
    position: absolute;
    top: 26px;
    left: 6px;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 8px;
    font-weight: 700;
    color: #fbbf24;
    font-family: 'Orbitron', sans-serif;
    z-index: 10;
}

/* OVR Score Badge - Top Right */
.pvp-card-ovr-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: #000;
    font-family: 'Orbitron', sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    z-index: 10;
}

/* Card Name Overlay */
.pvp-card-name-overlay {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    padding: 5px 6px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 30%);
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    font-family: 'Audiowide', 'Orbitron', sans-serif;
    z-index: 5;
}

/* Stats Grid - 4 boxes at bottom */
.pvp-card-stats-grid {
    position: absolute;
    bottom: 20px;
    left: 4px;
    right: 4px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    z-index: 10;
}

.pvp-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 1px;
    border-radius: 3px;
    background: #fb923c;
}

.pvp-stat-box .pvp-stat-label {
    font-size: 6px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.pvp-stat-box .pvp-stat-value {
    font-size: 9px;
    font-weight: 900;
    color: #000;
    font-family: 'Orbitron', sans-serif;
}

/* Rarity Label - Very bottom */
.pvp-card-rarity-label {
    position: absolute;
    bottom: 3px;
    left: 4px;
    right: 4px;
    padding: 2px 0;
    border-radius: 3px;
    text-align: center;
    font-size: 7px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}

/* Dead Overlay */
.pvp-card-dead-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 20;
    border-radius: 12px;
}

.pvp-card-dead-overlay .pvp-dead-icon {
    font-size: 48px;
    animation: pvpDeathPulsePve 2s ease-in-out infinite;
}

@keyframes pvpDeathPulsePve {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.pvp-card-dead-overlay .pvp-dead-text {
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Selection Glow */
.pvp-card-selection-glow {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid #22c55e;
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.6), inset 0 0 20px rgba(34, 197, 94, 0.2);
    animation: pvpSelectionPulse 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 15;
}

.pvp-card-target-glow {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 4px solid #ef4444;
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.6), inset 0 0 20px rgba(239, 68, 68, 0.2);
    animation: pvpTargetPulse 1s ease-in-out infinite;
    pointer-events: none;
    z-index: 15;
}

@keyframes pvpSelectionPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.6), inset 0 0 20px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 50px rgba(34, 197, 94, 0.8), inset 0 0 30px rgba(34, 197, 94, 0.3); }
}

@keyframes pvpTargetPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.6), inset 0 0 20px rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 50px rgba(239, 68, 68, 0.9), inset 0 0 30px rgba(239, 68, 68, 0.4); }
}

/* HP Bar Container - Below Card */
.pvp-card-hp-container {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 130px;
}

.pvp-hp-icon,
.pvp-mana-icon {
    font-size: 10px;
    width: 14px;
    text-align: center;
}

.pvp-hp-bar,
.pvp-mana-bar {
    flex: 1;
    height: 12px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pvp-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    transition: width 0.5s ease;
    border-radius: 6px;
}

.pvp-mana-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    transition: width 0.5s ease;
    border-radius: 6px;
}

.pvp-hp-text,
.pvp-mana-text {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    min-width: 45px;
    text-align: right;
    font-family: 'Orbitron', sans-serif;
}

/* Mana Bar Container */
.pvp-card-mana-container {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 130px;
}

/* Damage Popup */
.pvp-damage-popup {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 900;
    color: #ff3333;
    font-family: 'Orbitron', monospace;
    text-shadow:
        0 0 20px #ff0000,
        0 0 40px #ff4444,
        3px 3px 0 #000,
        -3px -3px 0 #000,
        3px -3px 0 #000,
        -3px 3px 0 #000;
    animation: pvpDamagePopupPve 1s ease-out forwards;
    z-index: 100;
    pointer-events: none;
}

@keyframes pvpDamagePopupPve {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.8); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(1.3); }
    100% { transform: translate(-50%, -120%) scale(1); opacity: 0; }
}

/* Responsive PvE Style Cards */
@media (max-width: 768px) {
    .pvp-card-main {
        width: 150px;
        height: 220px;
    }

    .pvp-card-hp-container,
    .pvp-card-mana-container {
        width: 150px;
    }

    .pvp-card-name-overlay {
        font-size: 12px;
        bottom: 60px;
    }

    .pvp-card-stats-grid {
        bottom: 24px;
    }

    .pvp-stat-box .pvp-stat-value {
        font-size: 10px;
    }

    .pvp-card-ovr-badge {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .pvp-card-main {
        width: 120px;
        height: 180px;
    }

    .pvp-card-hp-container,
    .pvp-card-mana-container {
        width: 120px;
    }

    .pvp-card-name-overlay {
        font-size: 10px;
        bottom: 50px;
        padding: 6px 8px;
    }

    .pvp-card-stats-grid {
        bottom: 20px;
        gap: 2px;
    }

    .pvp-stat-box {
        padding: 2px 1px;
    }

    .pvp-stat-box .pvp-stat-label {
        font-size: 6px;
    }

    .pvp-stat-box .pvp-stat-value {
        font-size: 9px;
    }

    .pvp-card-category-badge {
        font-size: 8px;
        padding: 3px 6px;
    }

    .pvp-card-level-badge {
        font-size: 8px;
        top: 30px;
    }

    .pvp-card-ovr-badge {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .pvp-card-rarity-label {
        font-size: 7px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SKILL PANEL - PvE Style Action Selection
   ═══════════════════════════════════════════════════════════════════════════════ */

.pvp-skill-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(180deg, rgba(10, 10, 20, 0.95) 0%, rgba(20, 15, 40, 0.98) 100%);
    border-top: 2px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(20px);
    z-index: 100;
    animation: pvpSkillPanelSlide 0.3s ease-out;
}

@keyframes pvpSkillPanelSlide {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Selected Card Indicator */
.pvp-skill-card-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 10px;
    min-width: 70px;
}

.pvp-skill-card-ticker {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
}

.pvp-skill-card-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Skill Box */
.pvp-skill-box {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: rgba(30, 30, 50, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    min-width: 140px;
    max-width: 180px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pvp-skill-box:hover:not(.disabled) {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(40, 35, 70, 0.95);
    transform: translateY(-3px);
}

.pvp-skill-box.ready {
    border-color: #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.pvp-skill-box.ready:hover {
    border-color: #4ade80;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.5);
}

.pvp-skill-box.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pvp-skill-header {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pvp-skill-desc {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    margin-bottom: 8px;
}

.pvp-skill-status {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 8px;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
}

.pvp-skill-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

.pvp-skill-mana {
    font-size: 14px;
    font-weight: 900;
    color: #60a5fa;
    font-family: 'Orbitron', sans-serif;
}

.pvp-skill-mana-icon {
    font-size: 12px;
}

/* Skip Button */
.pvp-skill-skip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.8) 0%, rgba(60, 60, 60, 0.9) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pvp-skill-skip:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(120, 120, 120, 0.9) 0%, rgba(80, 80, 80, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.pvp-skill-skip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Select Hint */
.pvp-select-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: rgba(30, 30, 50, 0.8);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
}

/* Responsive Skill Panel */
@media (max-width: 768px) {
    .pvp-skill-panel {
        padding: 12px 16px;
        gap: 8px;
    }

    .pvp-skill-box {
        min-width: 100px;
        max-width: 130px;
        padding: 8px 10px;
    }

    .pvp-skill-header {
        font-size: 9px;
    }

    .pvp-skill-desc {
        font-size: 8px;
    }

    .pvp-skill-card-indicator {
        padding: 6px 12px;
        min-width: 50px;
    }

    .pvp-skill-card-ticker {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .pvp-skill-panel {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 6px;
    }

    .pvp-skill-box {
        min-width: 80px;
        max-width: 100px;
        padding: 6px 8px;
    }

    .pvp-skill-skip {
        padding: 8px 16px;
        font-size: 10px;
    }
}

/* Battle Center */
.pvp-battle-center-v4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 150px;
}

.pvp-vs-icon-v4 {
    font-size: 48px;
    opacity: 0.3;
}

/* Action Animation */
.pvp-action-animation-v4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 16px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    animation: pvpActionSlide 0.3s ease;
}

@keyframes pvpActionSlide {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.pvp-action-attacker-v4,
.pvp-action-target-v4 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.pvp-action-icon-v4 {
    font-size: 32px;
    animation: pvpSwordSlash 0.5s ease;
}

@keyframes pvpSwordSlash {
    0% { transform: rotate(-45deg) scale(0.5); }
    50% { transform: rotate(15deg) scale(1.3); }
    100% { transform: rotate(0deg) scale(1); }
}

.pvp-action-damage-v4 {
    font-size: 18px;
    font-weight: 900;
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.pvp-action-damage-v4.killed {
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
}

/* Attack Button */
.pvp-battle-actions-v4 {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.pvp-attack-btn-v4 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 48px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.pvp-attack-btn-v4:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}

.pvp-attack-btn-v4:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pvp-attack-btn-v4.ready {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
    animation: pvpReadyPulse 1.5s ease-in-out infinite;
}

@keyframes pvpReadyPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 4px 40px rgba(34, 197, 94, 0.6); }
}

.pvp-btn-icon {
    font-size: 24px;
}

.pvp-btn-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pvpSpin 0.8s linear infinite;
}

@keyframes pvpSpin {
    to { transform: rotate(360deg); }
}

/* Waiting Overlay */
.pvp-waiting-v4 {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    z-index: 10;
}

.pvp-waiting-v4 .pvp-turn-timer-v4 {
    width: 60px;
    height: 60px;
}

.pvp-waiting-v4 .pvp-timer-seconds {
    font-size: 18px;
}

.pvp-waiting-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: pvpSpin 1s linear infinite;
}

/* Battle Log V4 */
.pvp-battle-log-v4 {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 12px 16px;
    max-width: 300px;
    z-index: 10;
}

.pvp-log-entry-v4 {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pvp-log-entry-v4:last-child {
    border-bottom: none;
}

/* Battle Finish Screen */
.pvp-battle-finish-v4 {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 30px;
    animation: pvpFadeIn 0.5s ease;
}

@keyframes pvpFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.pvp-result-banner-v4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pvp-result-icon-v4 {
    font-size: 80px;
    animation: pvpIconBounce 1s ease;
}

@keyframes pvpIconBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.pvp-result-text-v4 {
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 8px;
}

.pvp-result-banner-v4.victory .pvp-result-text-v4 {
    color: #fbbf24;
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.5);
}

.pvp-result-banner-v4.defeat .pvp-result-text-v4 {
    color: #ef4444;
    text-shadow: 0 0 40px rgba(239, 68, 68, 0.5);
}

.pvp-final-score-v4 {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pvp-final-team-v4 {
    text-align: center;
}

.pvp-final-team-v4.left .pvp-final-name {
    color: #6366f1;
}

.pvp-final-team-v4.right .pvp-final-name {
    color: #ef4444;
}

.pvp-final-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pvp-final-alive {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.pvp-final-vs-v4 {
    font-size: 24px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
}

.pvp-result-loading-v4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Mobile Responsive V4 */
@media (max-width: 768px) {
    .pvp-battle-arena-v4 {
        flex-direction: column;
        gap: 20px;
        padding: 10px;
    }

    .pvp-team-cards-v4 {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pvp-battle-card-v4 {
        width: 140px;
    }

    .pvp-turn-indicator-v4 {
        font-size: 14px;
        padding: 10px 20px;
    }

    .pvp-attack-btn-v4 {
        padding: 14px 36px;
        font-size: 16px;
    }

    .pvp-result-text-v4 {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .pvp-battle-card-v4 {
        width: 120px;
    }

    .pvp-card-content-v4 {
        padding: 10px;
        gap: 6px;
    }

    .pvp-card-name-v4 {
        font-size: 12px;
    }

    .pvp-card-stats-v4 {
        gap: 8px;
    }

    .pvp-card-stat-v4 {
        font-size: 10px;
    }

    .pvp-battle-hud-v4 {
        padding: 15px;
        gap: 15px;
    }

    .pvp-players-bar-v4 {
        padding: 10px 15px;
    }

    .pvp-player-avatar-v4 {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .pvp-player-name-v4 {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRIME ROYALE LOBBY - GEMINI DESIGN v4
   Premium glassmorphism design with neon accents
   ═══════════════════════════════════════════════════════════════════════════════ */

/* CSS Variables for Gemini Design */
:root {
    --pr-cyan: #00fff2;
    --pr-purple: #bd00ff;
    --pr-orange: #ff9d00;
    --pr-bg-dark: #050b15;
    --pr-glass-bg: rgba(13, 24, 41, 0.5);
    --pr-glass-border: rgba(0, 255, 242, 0.2);
}

/* Main Lobby Container */
.pr-lobby {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 20px;
    gap: 30px;
    background: linear-gradient(180deg, #030810 0%, #0a1628 50%, #050b15 100%);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMATED BACKGROUND EFFECTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Grid Background */
.pr-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 255, 242, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 242, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    pointer-events: none;
    animation: prGridPulse 8s ease-in-out infinite;
}

@keyframes prGridPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Floating Particles */
.pr-bg-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.pr-particle {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height: 4px;
    background: var(--pr-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--pr-cyan), 0 0 20px var(--pr-cyan);
    animation: prParticleRise linear infinite;
    opacity: 0;
}

.pr-particle:nth-child(even) {
    background: var(--pr-purple);
    box-shadow: 0 0 10px var(--pr-purple), 0 0 20px var(--pr-purple);
    width: 3px;
    height: 3px;
}

.pr-particle:nth-child(3n) {
    width: 2px;
    height: 2px;
}

@keyframes prParticleRise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100vh) translateX(30px);
        opacity: 0;
    }
}

/* Background Glow Orbs */
.pr-bg-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    pointer-events: none;
    animation: prGlowFloat 10s ease-in-out infinite;
}

.pr-bg-glow--cyan {
    top: 10%;
    left: 10%;
    background: var(--pr-cyan);
    animation-delay: 0s;
}

.pr-bg-glow--purple {
    bottom: 10%;
    right: 10%;
    background: var(--pr-purple);
    animation-delay: -5s;
}

@keyframes prGlowFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -20px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 30px) scale(0.9);
    }
    75% {
        transform: translate(20px, 20px) scale(1.05);
    }
}

/* Panels Wrapper - 3 Panel Layout */
.pr-panels-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 25px;
    width: 100%;
    max-width: 1200px;
    justify-content: center;
    align-items: stretch;
    padding: 0 20px;
}

/* Base Glass Panel */
.pr-panel {
    display: flex;
    flex-direction: column;
    padding: 25px;
    min-width: 240px;
}

.pr-glass-panel {
    background: var(--pr-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pr-glass-border);
    border-radius: 16px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    cursor: pointer;
}

.pr-glass-panel:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 255, 242, 0.3),
                0 0 60px rgba(0, 255, 242, 0.1),
                0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 255, 242, 0.5);
    z-index: 10;
}

/* Panel-specific hover colors */
.pr-stats-panel:hover {
    box-shadow: 0 0 30px rgba(0, 255, 242, 0.4),
                0 0 60px rgba(0, 255, 242, 0.15),
                0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 255, 242, 0.6);
}

.pr-rank-panel:hover {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4),
                0 0 60px rgba(255, 215, 0, 0.15),
                0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6);
}

.pr-deck-panel:hover {
    box-shadow: 0 0 30px rgba(189, 0, 255, 0.4),
                0 0 60px rgba(189, 0, 255, 0.15),
                0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(189, 0, 255, 0.6);
}

.pr-glass-inner {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STATS PANEL - Left Side
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-stats-panel {
    flex: 1.2;
    flex-direction: row !important;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    min-height: 180px;
}

.pr-stat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
    min-width: 90px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 12px;
}

.pr-stat-box.pr-neon-cyan {
    border-color: rgba(0, 255, 242, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 242, 0.1), inset 0 0 10px rgba(0, 255, 242, 0.05);
}

.pr-stat-box.pr-neon-purple {
    border-color: rgba(189, 0, 255, 0.3);
    box-shadow: 0 0 15px rgba(189, 0, 255, 0.1), inset 0 0 10px rgba(189, 0, 255, 0.05);
}

.pr-stat-number {
    font-size: 36px;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 0 20px currentColor;
    line-height: 1;
    margin-bottom: 8px;
}

.pr-stat-box.pr-neon-cyan .pr-stat-number {
    color: var(--pr-cyan);
    text-shadow: 0 0 20px var(--pr-cyan);
}

.pr-stat-box.pr-neon-purple .pr-stat-number {
    color: var(--pr-purple);
    text-shadow: 0 0 20px var(--pr-purple);
}

.pr-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RANK PANEL - Center
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-rank-panel {
    flex: 1.5;
    align-items: center;
    justify-content: center;
    padding: 30px 25px;
    position: relative;
    min-height: 220px;
}

.pr-medal-container {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pr-medal-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: prMedalPulse 2s ease-in-out infinite;
}

@keyframes prMedalPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.pr-medal {
    font-size: 72px;
    z-index: 1;
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.6));
    animation: prMedalFloat 3s ease-in-out infinite;
}

@keyframes prMedalFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.pr-rank-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 5px;
    margin: 0 0 18px 0;
    text-transform: uppercase;
}

.pr-progress-container {
    width: 100%;
    max-width: 220px;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pr-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--pr-cyan), var(--pr-purple));
    border-radius: 10px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px var(--pr-cyan);
}

.pr-mmr-text {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DECK PANEL - Right Side
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-deck-panel {
    flex: 1.3;
    justify-content: flex-start;
    gap: 15px;
    min-height: 220px;
}

.pr-panel-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    margin: 0 0 10px 0;
    text-align: center;
}

.pr-no-deck {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 30px 15px;
}

.pr-deck-selection-row {
    width: 100%;
}

.pr-deck-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--pr-glass-border);
    border-radius: 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.pr-deck-input:hover,
.pr-deck-input:focus {
    border-color: var(--pr-cyan);
    box-shadow: 0 0 15px rgba(0, 255, 242, 0.2);
}

.pr-deck-input option {
    background: #0a1628;
    color: #ffffff;
}

/* Deck Cards Preview */
.pr-deck-cards-preview {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    flex: 1;
}

.pr-deck-card-mini {
    position: relative;
    width: 70px;
    height: 95px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(0, 255, 242, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 242, 0.2);
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.4);
}

.pr-deck-card-mini:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: var(--pr-cyan);
    box-shadow: 0 0 25px rgba(0, 255, 242, 0.4);
}

.pr-deck-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pr-deck-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pr-deck-card-ticker {
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
}

.pr-deck-card-power {
    font-size: 9px;
    font-weight: 600;
    color: var(--pr-orange);
}

/* Deck Total Power */
.pr-deck-total-power {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 157, 0, 0.2);
}

.pr-deck-power-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
}

.pr-deck-power-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--pr-orange);
    text-shadow: 0 0 15px rgba(255, 157, 0, 0.5);
}

/* Edit Deck Button */
.pr-edit-deck-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(189, 0, 255, 0.3), rgba(100, 0, 200, 0.4));
    border: 1px solid rgba(189, 0, 255, 0.5);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    margin-top: 5px;
}

.pr-edit-deck-btn:hover {
    background: linear-gradient(135deg, rgba(189, 0, 255, 0.5), rgba(100, 0, 200, 0.6));
    border-color: rgba(189, 0, 255, 0.8);
    box-shadow: 0 0 20px rgba(189, 0, 255, 0.4);
    transform: translateY(-2px);
}

.pr-edit-deck-btn:active {
    transform: translateY(0);
}

/* Legacy tags (keep for compatibility) */
.pr-deck-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pr-crypto-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.pr-tag {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.pr-tag-btc { border-color: #f7931a; color: #f7931a; }
.pr-tag-eth { border-color: #627eea; color: #627eea; }
.pr-tag-sol { border-color: #00ffa3; color: #00ffa3; }
.pr-tag-ada { border-color: #0033ad; color: #3b82f6; }
.pr-tag-bnb { border-color: #f3ba2f; color: #f3ba2f; }
.pr-tag-xrp { border-color: #23292f; color: #ffffff; }
.pr-tag-doge { border-color: #c2a633; color: #c2a633; }
.pr-tag-dot { border-color: #e6007a; color: #e6007a; }
.pr-tag-avax { border-color: #e84142; color: #e84142; }
.pr-tag-link { border-color: #2a5ada; color: #2a5ada; }

.pr-power-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--pr-orange);
    text-shadow: 0 0 10px rgba(255, 157, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ERROR & ACTION AREA
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-lobby-error {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 12px 20px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #fca5a5;
    font-size: 14px;
    max-width: 500px;
    text-align: center;
}

.pr-lobby-error--action {
    flex-direction: column;
    gap: 12px;
}

.pr-error-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.pr-error-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.pr-error-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pr-action-area {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIND MATCH BUTTON - Hexagonal Design
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-find-match-btn {
    position: relative;
    padding: 18px 50px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(90deg, var(--pr-cyan), var(--pr-purple));
    border: none;
    clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pr-find-match-btn::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: linear-gradient(90deg, #0a1628, #0f2040);
    clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
    z-index: -1;
}

.pr-find-match-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--pr-cyan), var(--pr-purple));
    clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -2;
}

.pr-find-match-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(0, 255, 242, 0.4), 0 0 60px rgba(189, 0, 255, 0.3);
}

.pr-find-match-btn:hover:not(:disabled)::after {
    opacity: 1;
}

.pr-find-match-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.pr-match-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .pr-panels-wrapper {
        flex-direction: column;
        max-width: 400px;
    }

    .pr-stats-panel {
        flex-direction: row !important;
    }

    .pr-panel {
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .pr-lobby {
        padding: 15px;
        gap: 20px;
    }

    .pr-panels-wrapper {
        gap: 15px;
    }

    .pr-stat-box {
        padding: 12px 8px;
    }

    .pr-stat-number {
        font-size: 22px;
    }

    .pr-stat-label {
        font-size: 9px;
    }

    .pr-medal {
        font-size: 48px;
    }

    .pr-medal-container {
        width: 80px;
        height: 80px;
    }

    .pr-rank-title {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .pr-find-match-btn {
        padding: 15px 40px;
        font-size: 16px;
        letter-spacing: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIVE MATCHES TICKER
   Scrolling recent match results at bottom of lobby
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: 40px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(5, 15, 30, 0.95) 50%, rgba(0, 0, 0, 0.95) 100%);
    border-top: 1px solid rgba(0, 255, 242, 0.3);
    overflow: hidden;
    pointer-events: none;
}

.pr-ticker-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 100%;
    background: linear-gradient(90deg, var(--pr-cyan), var(--pr-purple));
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pr-ticker-icon {
    font-size: 14px;
}

.pr-ticker-track {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}

.pr-ticker-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: prTickerScroll 30s linear infinite;
}

@keyframes prTickerScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.pr-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
}

.pr-ticker-item--empty {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.pr-ticker-winner {
    color: var(--pr-green);
    font-weight: 700;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.5);
}

.pr-ticker-vs {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.pr-ticker-loser {
    color: var(--pr-red);
    font-weight: 600;
    font-size: 13px;
}

.pr-ticker-mmr {
    color: var(--pr-cyan);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(0, 255, 242, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 242, 0.2);
}

.pr-ticker-divider {
    color: rgba(255, 255, 255, 0.2);
    font-size: 10px;
    margin: 0 5px;
}

/* Pause on hover */
.pr-ticker:hover .pr-ticker-content {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
    .pr-ticker {
        height: 40px;
    }

    .pr-ticker-label {
        padding: 0 12px;
        font-size: 10px;
    }

    .pr-ticker-winner,
    .pr-ticker-loser {
        font-size: 12px;
    }

    .pr-ticker-vs {
        font-size: 11px;
    }

    .pr-ticker-mmr {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRIME ROYALE LEADERBOARD - Premium Design v2
   Podium layout with holographic cards and data strips
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-leaderboard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
    padding: 20px;
    background: linear-gradient(180deg, #030810 0%, #0a1628 50%, #050b15 100%);
    overflow: hidden;
}

/* Header */
.pr-lb-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.pr-lb-title {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 6px;
    color: #ffffff;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    margin: 0;
}

.pr-lb-live {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

.pr-lb-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
}

.pr-lb-live--active .pr-lb-live-dot {
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: prLivePulse 1.5s ease-in-out infinite;
}

@keyframes prLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.pr-lb-live-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
}

.pr-lb-live--active .pr-lb-live-text {
    color: #22c55e;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE PODIUM - Top 3 Champions
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-lb-podium {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    padding: 30px 20px 40px;
    margin-bottom: 20px;
}

.pr-lb-podium-loading,
.pr-lb-podium-partial {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
}

.pr-lb-podium-skeleton {
    width: 140px;
    height: 180px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    animation: prSkeletonPulse 1.5s ease-in-out infinite;
}

.pr-lb-podium-skeleton--gold {
    width: 160px;
    height: 220px;
}

@keyframes prSkeletonPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.pr-lb-empty-podium {
    padding: 60px 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
}

/* Champion Card */
.pr-lb-champion {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 20px;
    background: var(--pr-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.pr-lb-champion:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Spotlight behind card */
.pr-lb-champion-spotlight {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 150px;
    background: linear-gradient(180deg, currentColor 0%, transparent 100%);
    opacity: 0.15;
    filter: blur(20px);
    pointer-events: none;
}

/* Gold Champion - 1st Place */
.pr-lb-champion--gold {
    width: 160px;
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.2), inset 0 0 30px rgba(255, 215, 0, 0.05);
    color: #ffd700;
    z-index: 2;
}

.pr-lb-champion--gold .pr-lb-champion-spotlight {
    color: #ffd700;
    opacity: 0.25;
}

/* Silver Champion - 2nd Place */
.pr-lb-champion--silver {
    width: 140px;
    border-color: rgba(0, 255, 242, 0.3);
    box-shadow: 0 0 30px rgba(0, 255, 242, 0.15), inset 0 0 20px rgba(0, 255, 242, 0.05);
    color: #00fff2;
    margin-bottom: 20px;
}

.pr-lb-champion--silver .pr-lb-champion-spotlight {
    color: #00fff2;
}

/* Bronze Champion - 3rd Place */
.pr-lb-champion--bronze {
    width: 140px;
    border-color: rgba(255, 157, 0, 0.3);
    box-shadow: 0 0 30px rgba(255, 157, 0, 0.15), inset 0 0 20px rgba(255, 157, 0, 0.05);
    color: #ff9d00;
    margin-bottom: 20px;
}

.pr-lb-champion--bronze .pr-lb-champion-spotlight {
    color: #ff9d00;
}

.pr-lb-champion-crown {
    position: absolute;
    top: -20px;
    font-size: 32px;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    animation: prCrownFloat 2s ease-in-out infinite;
}

@keyframes prCrownFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-5px) rotate(5deg); }
}

.pr-lb-champion-rank {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: currentColor;
    text-shadow: 0 0 10px currentColor;
    margin-bottom: 10px;
}

.pr-lb-champion-avatar {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid currentColor;
    border-radius: 8px;
    box-shadow: 0 0 20px currentColor;
    margin-bottom: 12px;
}

.pr-lb-champion--gold .pr-lb-champion-avatar {
    width: 70px;
    height: 70px;
    font-size: 32px;
}

.pr-lb-champion-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

.pr-lb-champion--gold .pr-lb-champion-name {
    font-size: 16px;
}

.pr-lb-champion-mmr {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FILTER TABS - Neon Toggle
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-lb-filters {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pr-lb-filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.pr-lb-filter:hover {
    border-color: rgba(0, 255, 242, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.pr-lb-filter--active {
    border-color: var(--pr-cyan);
    color: #ffffff;
    background: rgba(0, 255, 242, 0.1);
}

.pr-lb-filter-icon {
    font-size: 14px;
}

.pr-lb-filter-name {
    text-transform: capitalize;
}

.pr-lb-filter-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: var(--pr-cyan);
    box-shadow: 0 0 10px var(--pr-cyan), 0 0 20px var(--pr-cyan);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DATA STRIPS - Rank 4+
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-lb-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 80px;
}

.pr-lb-list::-webkit-scrollbar {
    width: 6px;
}

.pr-lb-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.pr-lb-list::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 242, 0.3);
    border-radius: 3px;
}

.pr-lb-empty-list {
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

/* Data Strip Row */
.pr-lb-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--pr-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pr-lb-strip:hover {
    border-color: rgba(0, 255, 242, 0.2);
    background: rgba(13, 24, 41, 0.7);
    transform: translateX(4px);
}

.pr-lb-strip--me {
    border-color: rgba(189, 0, 255, 0.4);
    background: rgba(189, 0, 255, 0.1);
}

.pr-lb-strip--skeleton {
    height: 56px;
}

.pr-lb-strip-skeleton-content {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    animation: prSkeletonPulse 1.5s ease-in-out infinite;
}

.pr-lb-strip-rank {
    font-size: 18px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Courier New', monospace;
    min-width: 45px;
}

.pr-lb-strip-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

.pr-lb-strip-name {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    min-width: 0;
}

.pr-lb-strip-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-lb-strip-you {
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--pr-purple);
    background: rgba(189, 0, 255, 0.2);
    border: 1px solid rgba(189, 0, 255, 0.4);
    border-radius: 10px;
}

.pr-lb-strip-badge {
    font-size: 18px;
    filter: drop-shadow(0 0 5px currentColor);
}

.pr-lb-strip-stats {
    display: flex;
    align-items: center;
    min-width: 120px;
}

.pr-lb-strip-winrate {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.pr-lb-strip-bar {
    width: 100%;
    height: 4px;
    background: rgba(239, 68, 68, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.pr-lb-strip-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.pr-lb-strip-record {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.pr-lb-strip-mmr {
    font-size: 14px;
    font-weight: 700;
    color: var(--pr-cyan);
    text-shadow: 0 0 10px rgba(0, 255, 242, 0.3);
    min-width: 80px;
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STICKY FOOTER - Your Rank
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-lb-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 15px 20px;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 11, 21, 0.95) 30%);
}

.pr-lb-footer-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(189, 0, 255, 0.15);
    border: 1px solid rgba(189, 0, 255, 0.4);
    border-radius: 14px;
    box-shadow: 0 0 30px rgba(189, 0, 255, 0.2);
}

.pr-lb-footer-rank {
    font-size: 22px;
    font-weight: 900;
    color: var(--pr-purple);
    text-shadow: 0 0 15px var(--pr-purple);
    min-width: 50px;
}

.pr-lb-footer-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(189, 0, 255, 0.3);
    border: 2px solid var(--pr-purple);
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(189, 0, 255, 0.4);
}

.pr-lb-footer-name {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.pr-lb-footer-mmr {
    font-size: 16px;
    font-weight: 700;
    color: var(--pr-purple);
    text-shadow: 0 0 10px rgba(189, 0, 255, 0.5);
}

.pr-lb-footer-target {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-left: 15px;
    border-left: 1px solid rgba(189, 0, 255, 0.3);
}

.pr-lb-footer-target-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
}

.pr-lb-footer-target-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--pr-orange);
    text-shadow: 0 0 8px rgba(255, 157, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEADERBOARD RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .pr-lb-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .pr-lb-title {
        font-size: 20px;
        letter-spacing: 4px;
    }

    .pr-lb-podium {
        flex-wrap: wrap;
        padding: 20px 10px 30px;
    }

    .pr-lb-champion {
        padding: 20px 15px;
    }

    .pr-lb-champion--gold {
        width: 140px;
        order: -1;
        flex-basis: 100%;
        margin-bottom: 15px;
    }

    .pr-lb-champion--silver,
    .pr-lb-champion--bronze {
        width: 120px;
        margin-bottom: 0;
    }

    .pr-lb-filters {
        gap: 6px;
    }

    .pr-lb-filter {
        padding: 8px 12px;
        font-size: 11px;
    }

    .pr-lb-strip {
        padding: 10px 12px;
        gap: 8px;
    }

    .pr-lb-strip-rank {
        font-size: 14px;
        min-width: 35px;
    }

    .pr-lb-strip-avatar {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .pr-lb-strip-stats {
        display: none;
    }

    .pr-lb-strip-mmr {
        font-size: 12px;
        min-width: 60px;
    }

    .pr-lb-footer-inner {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pr-lb-footer-target {
        flex-basis: 100%;
        align-items: center;
        padding-left: 0;
        padding-top: 10px;
        border-left: none;
        border-top: 1px solid rgba(189, 0, 255, 0.3);
    }
}

@media (max-width: 480px) {
    .pr-lb-champion--gold {
        width: 120px;
    }

    .pr-lb-champion--silver,
    .pr-lb-champion--bronze {
        width: 100px;
    }

    .pr-lb-champion-avatar {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .pr-lb-champion--gold .pr-lb-champion-avatar {
        width: 55px;
        height: 55px;
        font-size: 26px;
    }

    .pr-lb-champion-name {
        font-size: 12px;
    }

    .pr-lb-strip-name {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRIME ROYALE COMBAT LOG - History View v2
   Victory/Defeat styled match history with neon accents
   ═══════════════════════════════════════════════════════════════════════════════ */

/* CSS Variables for Combat Log */
:root {
    --pr-green: #00ff9d;
    --pr-red: #ff0055;
    --pr-blue: #00a2ff;
}

/* Main Container */
.pr-combat-log {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 80px);
    padding: 20px;
    background: linear-gradient(180deg, #030810 0%, #0a1628 50%, #050b15 100%);
    overflow: hidden;
}

/* Page Title */
.pr-cl-title {
    position: relative;
    z-index: 1;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 6px;
    color: var(--pr-blue);
    text-shadow: 0 0 20px var(--pr-blue), 0 0 40px var(--pr-blue);
    margin: 0 0 25px 0;
    text-transform: uppercase;
}

/* Main Panel */
.pr-cl-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    background: var(--pr-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pr-glass-border);
    border-radius: 16px;
    max-height: 70vh;
}

/* Panel Header */
.pr-cl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pr-cl-panel-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffffff;
    margin: 0;
}

/* Filter */
.pr-cl-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pr-cl-filter-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.pr-cl-filter-select {
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--pr-glass-border);
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.pr-cl-filter-select:hover,
.pr-cl-filter-select:focus {
    border-color: var(--pr-cyan);
}

.pr-cl-filter-select option {
    background: #0a1628;
    color: #ffffff;
}

/* Log List */
.pr-cl-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 10px;
}

.pr-cl-list::-webkit-scrollbar {
    width: 6px;
}

.pr-cl-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.pr-cl-list::-webkit-scrollbar-thumb {
    background: var(--pr-cyan);
    border-radius: 3px;
    box-shadow: 0 0 5px var(--pr-cyan);
}

/* Empty State */
.pr-cl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.pr-cl-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.pr-cl-empty p {
    margin: 0;
    font-size: 16px;
}

.pr-cl-empty-sub {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOG ITEM - Match Row
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-cl-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.pr-cl-item:hover {
    transform: scale(1.02);
}

/* Left accent border */
.pr-cl-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

/* Skeleton */
.pr-cl-item--skeleton {
    height: 70px;
    cursor: default;
}

.pr-cl-item--skeleton:hover {
    transform: none;
}

.pr-cl-skeleton-content {
    width: 100%;
    height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    animation: prSkeletonPulse 1.5s ease-in-out infinite;
}

/* Victory Style */
.pr-cl-item--victory {
    border-color: rgba(0, 255, 157, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 157, 0.08);
}

.pr-cl-item--victory:hover {
    box-shadow: 0 0 30px rgba(0, 255, 157, 0.2);
}

.pr-cl-item--victory::before {
    background: var(--pr-green);
    box-shadow: 0 0 15px var(--pr-green);
}

/* Defeat Style */
.pr-cl-item--defeat {
    border-color: rgba(255, 0, 85, 0.2);
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.08);
}

.pr-cl-item--defeat:hover {
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.2);
}

.pr-cl-item--defeat::before {
    background: var(--pr-red);
    box-shadow: 0 0 15px var(--pr-red);
}

/* Draw Style */
.pr-cl-item--draw {
    border-color: rgba(255, 200, 0, 0.2);
    box-shadow: 0 0 20px rgba(255, 200, 0, 0.08);
}

.pr-cl-item--draw::before {
    background: #ffc800;
    box-shadow: 0 0 15px #ffc800;
}

/* Item Layout */
.pr-cl-item-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 2;
}

.pr-cl-item-center {
    display: flex;
    justify-content: center;
    flex: 1;
}

.pr-cl-item-right {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

/* Status Icon */
.pr-cl-status-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid currentColor;
}

.pr-cl-status-icon--victory {
    color: var(--pr-green);
    box-shadow: 0 0 15px var(--pr-green);
}

.pr-cl-status-icon--defeat {
    color: var(--pr-red);
    box-shadow: 0 0 15px var(--pr-red);
}

.pr-cl-status-icon--draw {
    color: #ffc800;
    box-shadow: 0 0 15px #ffc800;
}

/* Status Text */
.pr-cl-status-text {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    min-width: 70px;
}

.pr-cl-item--victory .pr-cl-status-text {
    color: var(--pr-green);
    text-shadow: 0 0 10px var(--pr-green);
}

.pr-cl-item--defeat .pr-cl-status-text {
    color: var(--pr-red);
    text-shadow: 0 0 10px var(--pr-red);
}

.pr-cl-item--draw .pr-cl-status-text {
    color: #ffc800;
    text-shadow: 0 0 10px #ffc800;
}

/* Opponent Info */
.pr-cl-opponent {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pr-cl-vs {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.pr-cl-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.pr-cl-opponent-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
}

/* MMR Change */
.pr-cl-mmr-change {
    font-size: 20px;
    font-weight: 800;
}

.pr-cl-mmr-plus {
    color: var(--pr-green);
    text-shadow: 0 0 15px var(--pr-green);
}

.pr-cl-mmr-minus {
    color: var(--pr-red);
    text-shadow: 0 0 15px var(--pr-red);
}

/* Time */
.pr-cl-time {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DETAIL MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.pr-cl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: prModalFadeIn 0.2s ease;
}

@keyframes prModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pr-cl-modal {
    position: relative;
    width: 90%;
    max-width: 500px;
    padding: 30px;
    background: linear-gradient(180deg, #0a1628 0%, #050b15 100%);
    border: 1px solid var(--pr-glass-border);
    border-radius: 20px;
    box-shadow: 0 0 60px rgba(0, 255, 242, 0.1);
    animation: prModalSlideIn 0.3s ease;
}

@keyframes prModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pr-cl-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.pr-cl-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pr-cyan);
}

.pr-cl-modal-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--pr-cyan);
    text-shadow: 0 0 15px var(--pr-cyan);
    text-align: center;
    margin: 0 0 25px 0;
}

/* Modal Loading */
.pr-cl-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

.pr-cl-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 255, 242, 0.2);
    border-top-color: var(--pr-cyan);
    border-radius: 50%;
    animation: prSpinnerRotate 1s linear infinite;
}

@keyframes prSpinnerRotate {
    to { transform: rotate(360deg); }
}

/* Modal Players */
.pr-cl-modal-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.pr-cl-modal-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pr-cl-modal-avatar {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--pr-cyan);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 255, 242, 0.3);
}

.pr-cl-modal-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.pr-cl-modal-vs {
    font-size: 20px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
}

/* Modal Rounds */
.pr-cl-modal-rounds {
    margin-bottom: 20px;
}

.pr-cl-modal-rounds h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 12px 0;
    text-align: center;
}

.pr-cl-modal-rounds-list {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pr-cl-modal-round {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pr-cl-modal-round-num {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.pr-cl-modal-round-result {
    font-size: 12px;
    font-weight: 800;
}

.pr-cl-modal-round--win {
    border-color: rgba(0, 255, 157, 0.3);
}

.pr-cl-modal-round--win .pr-cl-modal-round-result {
    color: var(--pr-green);
}

.pr-cl-modal-round--loss {
    border-color: rgba(255, 0, 85, 0.3);
}

.pr-cl-modal-round--loss .pr-cl-modal-round-result {
    color: var(--pr-red);
}

/* Modal Final Result */
.pr-cl-modal-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pr-cl-modal-result-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.pr-cl-modal-result-value {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 3px;
}

.pr-cl-modal-result--win {
    border-color: rgba(0, 255, 157, 0.3);
}

.pr-cl-modal-result--win .pr-cl-modal-result-value {
    color: var(--pr-green);
    text-shadow: 0 0 20px var(--pr-green);
}

.pr-cl-modal-result--loss {
    border-color: rgba(255, 0, 85, 0.3);
}

.pr-cl-modal-result--loss .pr-cl-modal-result-value {
    color: var(--pr-red);
    text-shadow: 0 0 20px var(--pr-red);
}

.pr-cl-modal-error {
    text-align: center;
    padding: 30px;
    color: rgba(255, 255, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMBAT LOG RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .pr-cl-title {
        font-size: 22px;
        letter-spacing: 4px;
    }

    .pr-cl-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .pr-cl-item {
        flex-wrap: wrap;
        gap: 12px;
        padding: 15px;
    }

    .pr-cl-item-left {
        flex: 1 1 100%;
    }

    .pr-cl-item-center {
        flex: 1;
    }

    .pr-cl-item-right {
        flex: 0;
    }

    .pr-cl-status-text {
        display: none;
    }

    .pr-cl-modal-players {
        flex-direction: column;
        gap: 15px;
    }

    .pr-cl-modal-vs {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .pr-cl-panel {
        padding: 15px;
    }

    .pr-cl-status-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .pr-cl-avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .pr-cl-opponent-name {
        font-size: 13px;
    }

    .pr-cl-mmr-change {
        font-size: 16px;
    }

    .pr-cl-modal {
        padding: 20px;
    }

    .pr-cl-modal-rounds-list {
        flex-wrap: wrap;
    }

    .pr-cl-modal-round {
        padding: 8px 12px;
    }
}


/* ===== Two-Step Attack System Styles ===== */

/* Attack Ready State - More prominent when target is selected */
.pvp-skill-box.attack-ready {
    border-color: #22c55e !important;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.4) 100%) !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), inset 0 0 20px rgba(34, 197, 94, 0.1) !important;
    animation: pvpAttackPulse 1s ease-in-out infinite;
}

.pvp-skill-box.attack-ready:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.7), inset 0 0 30px rgba(34, 197, 94, 0.2) !important;
}

.pvp-skill-box.attack-ready .pvp-skill-header {
    color: #22c55e;
    font-size: 14px;
}

@keyframes pvpAttackPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), inset 0 0 20px rgba(34, 197, 94, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.7), inset 0 0 30px rgba(34, 197, 94, 0.2);
    }
}

/* Target Selected Instruction Styling */
.pvp-target-selected-instruction {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.pvp-target-selected-instruction strong {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* Cancel Target Button */
.pvp-cancel-target-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    margin-left: 8px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 6px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pvp-cancel-target-btn:hover {
    background: rgba(239, 68, 68, 0.4);
    border-color: #ef4444;
    transform: scale(1.05);
}

/* Enhanced Target Glow for Selected Target */
.pvp-card-pve-style.is-selected.pvp-card-right .pvp-card-target-glow {
    border-color: #ef4444;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.6), inset 0 0 15px rgba(239, 68, 68, 0.2);
    animation: pvpTargetSelectedPulse 0.8s ease-in-out infinite;
}

@keyframes pvpTargetSelectedPulse {
    0%, 100% {
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.6), inset 0 0 15px rgba(239, 68, 68, 0.2);
    }
    50% {
        box-shadow: 0 0 35px rgba(239, 68, 68, 0.8), inset 0 0 25px rgba(239, 68, 68, 0.3);
    }
}

/* Instruction styling when target is selected */
.pvp-instructions-v4:has(.pvp-target-selected-instruction) {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%);
    border-color: rgba(34, 197, 94, 0.4);
}