/* ========================================
   GLOBAL
======================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    font-family:
        Inter,
        Arial,
        sans-serif;

}

body {

    background: transparent;

    overflow: hidden;

    padding: 20px;

}

/* ========================================
   MAIN OVERLAY
======================================== */

.overlay {

    position: relative;

    width: 680px;

    padding: 28px;

    overflow: hidden;

    border-radius: 42px;

    background:
        linear-gradient(
            145deg,
            rgba(15,25,35,0.78),
            rgba(10,15,20,0.58)
        );

    backdrop-filter:
        blur(24px);

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 0 40px rgba(0,255,255,0.12),
        0 0 120px rgba(0,0,0,0.35),
        inset 0 0 40px rgba(255,255,255,0.02);

}

/* ========================================
   AGENT BACKGROUND
======================================== */

.agent-background {

    position: absolute;

    right: 340px;
    bottom: -40px;

    height: 540px;

    opacity: 0.58;

    pointer-events: none;

    object-fit: contain;

    filter:
        blur(1px)
        drop-shadow(0 0 40px rgba(255,255,255,0.18));

    z-index: 0;

}

/* ========================================
   TOP GLOW
======================================== */

.top-glow {

    position: absolute;

    top: -180px;
    right: -180px;

    width: 420px;
    height: 420px;

    background:
        radial-gradient(
            circle,
            rgba(0,255,255,0.24),
            transparent 70%
        );

}

/* ========================================
   HEADER
======================================== */

.header {

    position: relative;

    z-index: 5;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    margin-bottom: 14px;

}

.header h1 {

    font-size: 42px;

    font-weight: 800;

    letter-spacing: -3px;

    color: white;

    text-shadow:
        0 0 22px rgba(255,255,255,0.20);

}

/* ========================================
   RANK
======================================== */

.rank-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px 14px;

    border-radius: 18px;

    background:
        rgba(255,255,255,0.04);

    backdrop-filter:
        blur(10px);

    border:
        1px solid rgba(255,255,255,0.05);

}

.rank-icon {

    width: 42px;
    height: 42px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,0.20));

}

#rank {

    color:
        rgba(255,255,255,0.88);

    font-size: 16px;

    font-weight: 700;

    line-height: 1;

}

#rr {

    display: inline-block;

    margin-top: 4px;

    color: #00ffd0;

    font-size: 13px;

    font-weight: 700;

    text-shadow:
        0 0 10px rgba(0,255,208,0.28);

}

/* ========================================
   LIVE
======================================== */

.live-indicator {

    padding: 10px 18px;

    border-radius: 999px;

    background:
        rgba(255,0,80,0.18);

    border:
        1px solid rgba(255,0,80,0.32);

    color: #ff4d7a;

    font-weight: 700;

    letter-spacing: 2px;

    box-shadow:
        0 0 20px rgba(255,0,80,0.20);

}

.webcam-frame {

    position: relative;

    width: 420px;

    height: 236px;

    aspect-ratio: 16 / 9;

    margin: 0;

    border-radius: 24px;

    overflow: hidden;

    border:
        2px solid rgba(0,255,255,0.22);

    background:
        rgba(0,0,0,0.10);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 0 40px rgba(0,255,255,0.10),
        inset 0 0 24px rgba(255,255,255,0.03);

}

.webcam-layout {

    gap: 6px;

}

.webcam-inner {

    position: absolute;

    inset: 6px;

    border-radius: 28px;

    background: transparent;

    box-shadow:
        inset 0 0 40px rgba(255,255,255,0.03);

}

/* ========================================
   GRID
======================================== */

.stats-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;

}

/* ========================================
   CARDS
======================================== */

.card {

    min-height: 95px;

    padding: 16px;

    border-radius: 30px;

    background:
        rgba(255,255,255,0.04);

    backdrop-filter:
        blur(14px);

    border:
        1px solid rgba(255,255,255,0.06);

}

.label {

    color:
        rgba(255,255,255,0.45);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 2px;

}

.value {

    margin-top: 32px;

    font-size: 34px;

    font-weight: 800;

    letter-spacing: -4px;

}

/* ========================================
   COLORS
======================================== */

.wins .value {

    color: #00ffb2;

    text-shadow:
        0 0 22px rgba(0,255,180,0.45);

}

.losses .value {

    color: #ff557a;

    text-shadow:
        0 0 22px rgba(255,70,110,0.45);

}

.kd .value {

    color: #56b8ff;

    text-shadow:
        0 0 22px rgba(70,170,255,0.45);

}

.wr .value {

    color: #ffd54a;

    text-shadow:
        0 0 22px rgba(255,210,70,0.45);

}

/* ========================================
   BOTTOM STATS
======================================== */

.bottom-right {

    margin-top: 26px;

    display: flex;

    justify-content: flex-end;

    gap: 18px;

}

.mini-stat {

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        12px 18px;

    border-radius: 18px;

    background:
        rgba(0,0,0,0.18);

    backdrop-filter:
        blur(10px);

    border:
        1px solid rgba(255,255,255,0.05);

}

.mini-label {

    color:
        rgba(255,255,255,0.35);

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 3px;

}

.mini-value {

    font-size: 34px;

    font-weight: 800;

}

.blue {

    color: #56b8ff;

}

.pink {

    color: #ff4d7a;

}

.yellow {

    color: #ffd54a;

}

/* ========================================
   FOOTER
======================================== */

.footer {

    margin-top: 34px;

    text-align: center;

    color:
        rgba(255,255,255,0.18);

    font-size: 14px;

    letter-spacing: 6px;

    font-weight: 700;

}

/* ========================================
   OBS WEBCAM FIT
======================================== */

.webcam-frame iframe,
.webcam-frame video,
.webcam-frame img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    

}

/* ========================================
   TOP STATS ROW
======================================== */

.top-stats-row {

    position: relative;

    z-index: 5;

    display: flex;

    justify-content: center;

    align-items: stretch;

    gap: 14px;

    margin-bottom: 18px;

}

/* ========================================
   WEBCAM LAYOUT
======================================== */

.webcam-layout {

    position: relative;

    z-index: 5;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 2px;

}

/* ========================================
   SIDE STATS
======================================== */

.side-stats {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

/* ========================================
   SIDE CARDS
======================================== */

.side-stats .card {

    width: 92px;

    min-width: 92px;

    min-height: 88px;

    padding: 14px;

    border-radius: 24px;

}

/* ========================================
   SIDE LABELS
======================================== */

.side-stats .label {

    font-size: 12px;

    letter-spacing: 2px;

}

/* ========================================
   SIDE VALUES
======================================== */

.side-stats .value {

    font-size: 24px;

    margin-top: 18px;

    letter-spacing: -2px;

}


/* ========================================
   BOTTOM STATS ROW
======================================== */

.bottom-stats-row {

    position: relative;

    z-index: 5;

    display: flex;

    justify-content: center;

    gap: 14px;

    margin-top: 18px;

}

/* ========================================
   CARDS
======================================== */

.card {

    min-width: unset;

    min-height: 110px;

    padding: 18px;

    border-radius: 26px;

    background:
        rgba(255,255,255,0.04);

    backdrop-filter:
        blur(14px);

    border:
        1px solid rgba(255,255,255,0.06);

    display: flex;

    flex-direction: column;

    justify-content: center;

}

/* ========================================
   SIDE STATS
======================================== */

.side-stats {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

/* ========================================
   SIDE CARDS
======================================== */

.side-stats .card {

    width: 92px;

    min-width: 92px;

    min-height: 88px;

    padding: 14px;

    border-radius: 24px;

}

/* ========================================
   SIDE VALUES
======================================== */

.side-stats .value {

    font-size: 24px;

    margin-top: 18px;

}

/* ========================================
   MINI STATS
======================================== */

.mini-stat {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px 18px;

    border-radius: 18px;

    background:
        rgba(0,0,0,0.18);

    backdrop-filter:
        blur(10px);

    border:
        1px solid rgba(255,255,255,0.05);

}

/* ========================================
   TOP RANK
======================================== */

.top-rank {

    position: relative;

    z-index: 5;

    margin-bottom: 14px;

}

/* ========================================
   RANK WRAPPER
======================================== */

.rank-wrapper {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        12px 18px;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.04);

    backdrop-filter:
        blur(10px);

    border:
        1px solid rgba(255,255,255,0.05);

}