/* ══════════════════════════════════════════════════
   L2 STATS — Hell-PvP inferno theme
   ══════════════════════════════════════════════════ */

.l2-stats {
    max-width: 62.5rem;
    width: 100%;
    margin: 0 auto;
    font-family: 'Crimson Pro', serif;
    color: #c8b89a;
    position: relative;
    z-index: 1;
}

/* ══ TABS ══ */
.l2-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: -0.0625rem;
    position: relative;
    z-index: 5;
}

.l2-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 2.25rem;
    min-width: 9rem;
    background: linear-gradient(180deg, #1a1510 0%, #110e0a 100%);
    border: 0.0625rem solid #3a2d1a;
    border-bottom: none;
    color: #6b5a3e;
    font-family: 'Cinzel', serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 0.0625rem;
    clip-path: polygon(0% 100%, 0.375rem 0%, calc(100% - 0.375rem) 0%, 100% 100%);
}

.l2-tab:hover {
    color: #d4804a;
    background: linear-gradient(180deg, #221510 0%, #150b08 100%);
}

.l2-tab.active {
    color: #ff9a50;
    background: linear-gradient(180deg, #1e1210 0%, #130c09 100%);
    border-color: #5c3018;
    z-index: 6;
}

.l2-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, #ff5a1f, #ff7a00, #ff5a1f, transparent);
    box-shadow: 0 0 0.5rem rgba(255,90,31,0.4);
    animation: tabGlow 2s ease-in-out infinite;
}

@keyframes tabGlow {
    0%, 100% { box-shadow: 0 0 0.5rem rgba(255,90,31,0.4); }
    50% { box-shadow: 0 0 1rem rgba(255,90,31,0.7); }
}

.l2-tab.active::after {
    content: '';
    position: absolute;
    top: -0.1875rem;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 0.375rem;
    height: 0.375rem;
    background: #ff5a1f;
    box-shadow: 0 0 0.5rem rgba(255,90,31,0.6);
    animation: diamondPulse 2s ease-in-out infinite;
}

@keyframes diamondPulse {
    0%, 100% { box-shadow: 0 0 0.375rem rgba(255,90,31,0.5); }
    50% { box-shadow: 0 0 0.75rem rgba(255,90,31,0.8); }
}

.l2-tab svg {
    width: 0.75rem;
    height: 0.75rem;
    stroke: currentColor;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.l2-tab.active svg { opacity: 1; }

/* ══ TABLE FRAME ══ */
.l2-frame {
    position: relative;
    border: 0.0625rem solid rgba(120,50,15,0.4);
    background: linear-gradient(180deg, rgba(28,16,10,0.97) 0%, rgba(16,10,6,0.99) 100%);
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* fire border top */
.l2-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0.1875rem;
    background: linear-gradient(90deg, #3a1a0e, #ff5a1f 20%, #ff7a00 50%, #ff5a1f 80%, #3a1a0e);
    box-shadow: 0 0 0.75rem rgba(255,90,31,0.4), 0 0.25rem 1.5rem rgba(255,60,10,0.15);
    z-index: 3;
    animation: borderFlame 3s ease-in-out infinite;
}

@keyframes borderFlame {
    0%, 100% { box-shadow: 0 0 0.75rem rgba(255,90,31,0.4), 0 0.25rem 1.5rem rgba(255,60,10,0.15); }
    50% { box-shadow: 0 0 1.25rem rgba(255,90,31,0.6), 0 0.5rem 2.5rem rgba(255,60,10,0.25); }
}

/* fire border bottom */
.l2-frame::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, #a83a10 30%, #ff5a1f 50%, #a83a10 70%, transparent);
    box-shadow: 0 0 0.5rem rgba(255,90,31,0.2);
    z-index: 3;
}

/* inner vignette + warm tint */
.l2-frame-inner {
    box-shadow:
        inset 0 0 4rem rgba(0,0,0,0.4),
        inset 0 0 3rem rgba(255,60,10,0.04),
        inset 0 0 8rem rgba(120,40,10,0.06);
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ── LEFT fire border ── */
.l2-frame-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0.125rem;
    background: linear-gradient(180deg,
        #ff5a1f,
        rgba(255,90,31,0.3) 20%,
        rgba(255,90,31,0.05) 50%,
        rgba(255,90,31,0.3) 80%,
        #ff5a1f);
    box-shadow: 0 0 0.5rem rgba(255,90,31,0.15);
    z-index: 10;
    pointer-events: none;
}

/* ── RIGHT fire border ── */
.l2-frame-inner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.125rem;
    background: linear-gradient(180deg,
        #ff5a1f,
        rgba(255,90,31,0.3) 20%,
        rgba(255,90,31,0.05) 50%,
        rgba(255,90,31,0.3) 80%,
        #ff5a1f);
    box-shadow: 0 0 0.5rem rgba(255,90,31,0.15);
    z-index: 10;
    pointer-events: none;
}

/* corner fire diamonds */
.l2-corner {
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    z-index: 11;
}

.l2-corner::before {
    content: '';
    position: absolute;
    width: 0.4375rem;
    height: 0.4375rem;
    background: #ff5a1f;
    transform: rotate(45deg);
    box-shadow: 0 0 0.625rem rgba(255,90,31,0.6);
    animation: diamondPulse 2s ease-in-out infinite;
}

.l2-corner.tl { top: -0.1875rem; left: -0.1875rem; }
.l2-corner.tr { top: -0.1875rem; right: -0.1875rem; }
.l2-corner.bl { bottom: -0.1875rem; left: -0.1875rem; }
.l2-corner.br { bottom: -0.1875rem; right: -0.1875rem; }

/* ══ PANELS — new transition effect ══ */
.l2-panels { display: grid; }

.l2-panel {
    grid-row: 1;
    grid-column: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.l2-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ══ TABLE ══ */
.l2-table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    z-index: 1;
}

/* header */
.l2-table thead th {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #c47830;
    padding: 1rem 1rem;
    text-align: left;
    border-bottom: 0.0625rem solid rgba(120,50,15,0.35);
    border-right: 0.0625rem solid rgba(120,50,15,0.1);
    position: relative;
    background: linear-gradient(180deg, rgba(50,25,12,0.5) 0%, rgba(25,14,8,0.3) 100%);
}

.l2-table thead th:last-child { border-right: none; }
.l2-table thead th.tc { text-align: center; }
.l2-table thead th.tr { text-align: right; }

/* header fire underline */
.l2-table thead tr::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, rgba(255,90,31,0.2), transparent);
}

/* ══ ROWS ══ */
.l2-table tbody tr {
    border-bottom: 0.0625rem solid rgba(120,50,15,0.18);
    position: relative;
    transition: all 0.3s ease;
    background: rgba(40,20,10,0.25);
}

.l2-table tbody tr:last-child { border-bottom: 0.0625rem solid rgba(120,50,15,0.12); }

/* alternating — warmer */
.l2-table tbody tr:nth-child(even) {
    background: rgba(50,25,12,0.35);
}

/* hover — fire glow */
.l2-table tbody tr:hover {
    background: rgba(255,90,31,0.08);
    border-bottom-color: rgba(255,90,31,0.2);
    box-shadow: inset 0 0 2rem rgba(255,60,10,0.05);
}

/* left fire bar on first cell */
.l2-table tbody td:first-child {
    position: relative;
}

.l2-table tbody td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.1875rem;
    background: linear-gradient(180deg, #ff5a1f, #ff7a00, #ff5a1f);
    box-shadow: 0 0 0.5rem rgba(255,90,31,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.l2-table tbody tr:hover td:first-child::before { opacity: 1; }

/* ══ TOP 3 ══ */

/* 1st — Gold fire */
.l2-r1 {
    background: linear-gradient(90deg, rgba(255,120,0,0.1) 0%, rgba(255,70,0,0.04) 30%, transparent 60%) !important;
}
.l2-r1 td:first-child::before {
    opacity: 1 !important;
    width: 0.25rem !important;
    background: linear-gradient(180deg, #ffaa00, #ff5a1f, #ffaa00) !important;
    box-shadow: 0 0 0.75rem rgba(255,170,0,0.5) !important;
    animation: fireBar 2s ease-in-out infinite !important;
}
.l2-r1 .l2-rank {
    color: #ffaa00;
    text-shadow: 0 0 0.75rem rgba(255,170,0,0.4);
    font-size: 1rem;
}
.l2-r1 .l2-name {
    color: #ffc060 !important;
    text-shadow: 0 0 0.75rem rgba(255,140,40,0.2);
}
.l2-r1 .l2-pvp {
    color: #ffaa30 !important;
    text-shadow: 0 0 0.625rem rgba(255,170,0,0.3);
}

/* 2nd — Silver */
.l2-r2 {
    background: linear-gradient(90deg, rgba(176,184,196,0.06) 0%, rgba(140,150,170,0.02) 30%, transparent 60%) !important;
}
.l2-r2 td:first-child::before {
    opacity: 0.6 !important;
    background: linear-gradient(180deg, #c0c8d4, #8a94a4, #c0c8d4) !important;
    box-shadow: 0 0 0.375rem rgba(176,184,196,0.3) !important;
}
.l2-r2 .l2-rank { color: #b0b8c4; font-size: 0.9375rem; }
.l2-r2 .l2-name { color: #c4ccd6 !important; }
.l2-r2 .l2-pvp { color: #a0b0c0 !important; }

/* 3rd — Bronze */
.l2-r3 {
    background: linear-gradient(90deg, rgba(196,120,48,0.06) 0%, rgba(160,90,30,0.02) 30%, transparent 60%) !important;
}
.l2-r3 td:first-child::before {
    opacity: 0.5 !important;
    background: linear-gradient(180deg, #d4903a, #a06820, #d4903a) !important;
    box-shadow: 0 0 0.375rem rgba(196,120,48,0.3) !important;
}
.l2-r3 .l2-rank { color: #c47830; font-size: 0.9375rem; }
.l2-r3 .l2-name { color: #d4a060 !important; }
.l2-r3 .l2-pvp { color: #c48040 !important; }

@keyframes fireBar {
    0%, 100% { box-shadow: 0 0 0.5rem rgba(255,170,0,0.4); }
    50% { box-shadow: 0 0 1rem rgba(255,170,0,0.7), 0 0 2rem rgba(255,90,31,0.2); }
}

/* ══ CELLS ══ */
.l2-table tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #a89878;
    text-align: left;
    transition: color 0.3s ease;
    border-right: 0.0625rem solid rgba(120,50,15,0.1);
}

.l2-table tbody td:last-child { border-right: none; }
.l2-table tbody td.tc { text-align: center; }
.l2-table tbody td.tr { text-align: right; }
.l2-table tbody tr:hover td { color: #c4a88a; }

/* rank */
.l2-rank {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 0.875rem;
    text-align: center !important;
    color: #8a6040;
}

/* name */
.l2-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: #c8b89a !important;
}

.l2-table tbody tr:hover .l2-name {
    color: #f0dcc0 !important;
    text-shadow: 0 0 0.5rem rgba(255,90,31,0.1);
}

/* clan */
.l2-clan {
    font-size: 0.8125rem;
    color: #8a7452 !important;
    font-style: italic;
}

/* pvp */
.l2-pvp {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: #ff6a2a !important;
}

.l2-table tbody tr:hover .l2-pvp {
    color: #ff8a4a !important;
    text-shadow: 0 0 0.5rem rgba(255,90,31,0.2);
}

/* pk */
.l2-pk {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.8125rem;
    color: #8a4a3a !important;
}

.l2-table tbody tr:hover .l2-pk { color: #9a4a4a !important; }

/* rep */
.l2-rep {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: #5a9a5a !important;
}

.l2-table tbody tr:hover .l2-rep {
    color: #70b870 !important;
    text-shadow: 0 0 0.375rem rgba(80,160,80,0.12);
}

/* ══ ROW ENTRANCE ══ */
.l2-panel.active .l2-table tbody tr {
    opacity: 0;
    animation: l2row 0.35s ease forwards;
}

.l2-panel.active .l2-table tbody tr:nth-child(1)  { animation-delay: 0.02s; }
.l2-panel.active .l2-table tbody tr:nth-child(2)  { animation-delay: 0.05s; }
.l2-panel.active .l2-table tbody tr:nth-child(3)  { animation-delay: 0.08s; }
.l2-panel.active .l2-table tbody tr:nth-child(4)  { animation-delay: 0.11s; }
.l2-panel.active .l2-table tbody tr:nth-child(5)  { animation-delay: 0.14s; }
.l2-panel.active .l2-table tbody tr:nth-child(6)  { animation-delay: 0.17s; }
.l2-panel.active .l2-table tbody tr:nth-child(7)  { animation-delay: 0.20s; }
.l2-panel.active .l2-table tbody tr:nth-child(8)  { animation-delay: 0.23s; }
.l2-panel.active .l2-table tbody tr:nth-child(9)  { animation-delay: 0.26s; }
.l2-panel.active .l2-table tbody tr:nth-child(10) { animation-delay: 0.29s; }

@keyframes l2row {
    0% { opacity: 0; transform: translateY(0.5rem) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══ RESPONSIVE ══ */
@media (max-width: 50rem) {
    .l2-table thead th, .l2-table tbody td { padding: 0.6875rem 0.625rem; font-size: 0.8125rem; }
    .l2-tab { padding: 0.5rem 1.25rem; min-width: 7rem; font-size: 0.5625rem; }
}

@media (max-width: 37.5rem) {
    .l2-tab {
        clip-path: none;
        padding: 0.5rem 1rem;
        min-width: auto;
    }
    .l2-table thead th, .l2-table tbody td { padding: 0.5625rem 0.5rem; font-size: 0.75rem; }
    .l2-hide { display: none; }
}