@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Inter:wght@600;700;800&display=swap');:root{--bg:#07090c;--p:#101419;--l:#282f36;--t:#f4f6f8;--m:#89929a;--g:#d9ff36}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--t);font-family:Inter,Arial}header{height:76px;padding:0 7%;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--l);position:sticky;top:0;z-index:5;background:#07090cf2}.logo{display:flex;gap:10px;align-items:center;color:white;text-decoration:none;margin-right:auto}.logo>b{width:38px;height:38px;display:grid;place-items:center;background:var(--g);color:#080a0c;font:800 28px 'Barlow Condensed'}.logo span{font-size:14px;letter-spacing:2px}.logo small{display:block;color:#727b83;font-size:7px;letter-spacing:4px}nav{display:flex;gap:22px}nav a{color:#949da5;text-decoration:none;font-size:9px;text-transform:uppercase}button,.lime,.outline{font:800 9px Inter;letter-spacing:1px;cursor:pointer}.lime{background:var(--g);color:#07090c;border:0;padding:13px 18px}.outline{background:transparent;border:1px solid #40474e;color:white;padding:13px 18px}.full{width:100%}#menu{display:none;background:none;border:0;color:white;font-size:22px}.hero{min-height:600px;padding:100px 9%;display:flex;align-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 75%,#192216,#080a0d 55%)}.hero>div:first-child{position:relative;z-index:2;max-width:620px}.hero small,.section>small{color:var(--g);font-size:9px;letter-spacing:2px}.hero h1{font:800 92px/.82 'Barlow Condensed';margin:20px 0}.hero em{color:var(--g);font-style:normal}.hero p{color:#9aa2aa;font-size:13px;line-height:1.8;max-width:500px}.crest{position:absolute;right:13%;font:800 300px 'Barlow Condensed';color:#d9ff361f;border:2px solid #d9ff3638;width:300px;height:390px;display:grid;place-items:center;clip-path:polygon(50% 0,92% 15%,82% 72%,50% 100%,18% 72%,8% 15%)}.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--l)}.stats div{padding:25px 8%;border-right:1px solid var(--l)}.stats b{display:block;font:800 34px 'Barlow Condensed'}.stats small{color:#727b83;font-size:7px}.section{padding:80px 8%}.dark{background:#0d1014;border-block:1px solid #1c2228}.section h2{font:800 50px 'Barlow Condensed';margin:8px 0 30px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cards article{background:var(--p);border:1px solid var(--l)}.cover{height:160px;padding:15px;font-size:8px;background:#202620}.c2{background:#20252a}.c3{background:#242126}.body{padding:21px}.body small{color:#737c84;font-size:7px}.body h3{font:800 25px 'Barlow Condensed';margin:8px 0 18px}.meta{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--l);margin-bottom:18px}.meta span{font-size:7px;color:#717a82;padding:14px 0}.meta strong{display:block;color:white;margin-top:5px;font-size:10px}.table{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th{font-size:7px;color:#69727a;text-align:left;padding:0 15px 12px;border-bottom:1px solid var(--l)}td{font-size:10px;padding:16px 15px;border-bottom:1px solid #20262b}.gold{color:var(--g)}td small{display:block;color:#616a72;font-size:7px}.big{font-size:16px;font-weight:800}.matches{display:grid;gap:10px}.matches>div{display:grid;grid-template-columns:130px 1fr 120px 70px;gap:20px;align-items:center;background:var(--p);border:1px solid var(--l);padding:18px}.matches b{font:800 19px 'Barlow Condensed'}.matches small{display:block;color:#687179;font:600 7px Inter}.matches strong{text-align:center;font-size:10px}.matches i{font-style:normal;color:#69727a;margin:0 12px}.matches span{text-align:right;font-size:9px}.matches label{background:var(--g);color:#07090c;padding:6px;font-size:7px;text-align:center}.matches .muted{background:transparent;border:1px solid #394047;color:#879098}.teams{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.teams>div{background:#11151a;border:1px solid var(--l);text-align:center;padding:28px}.teams b{width:65px;height:65px;display:grid;place-items:center;margin:auto;border:1px solid #4b555d;color:var(--g);font:800 23px 'Barlow Condensed'}.teams h3{font:800 15px 'Barlow Condensed'}.teams small{color:#737c84;font-size:7px}.account{display:grid;grid-template-columns:1fr .7fr;gap:50px}.account h2{font-size:55px}.account p{color:#8d969e;font-size:12px;line-height:1.8}.accountbox{background:var(--p);border:1px solid var(--l);padding:28px}.modal{display:none;position:fixed;inset:0;background:#000b;z-index:20;place-items:center;padding:20px}.modal.show{display:grid}.modalbox{position:relative;background:#0c0f12;border:1px solid #384047;padding:30px;width:min(420px,100%)}#close{position:absolute;right:12px;top:8px;background:none;border:0;color:#aaa;font-size:28px}.tabs{display:flex;border-bottom:1px solid var(--l);margin:20px 0}.tabs button{padding:12px;background:none;border:0;color:#717a82}.tabs .active{color:var(--g);border-bottom:2px solid var(--g)}form label{display:block;color:#858e96;font-size:8px;margin:14px 0}form input{width:100%;display:block;margin-top:7px;background:#15191e;border:1px solid #2d343b;padding:13px;color:white}#message{color:var(--g);font-size:9px;min-height:15px}.modalbox>small{color:#58616a;font-size:7px}footer{padding:35px 8%;border-top:1px solid var(--l);display:flex;align-items:center}footer p{margin-left:auto;color:#58616a;font-size:8px}@media(max-width:850px){nav{display:none}nav.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#090c0f;flex-direction:column;padding:20px}#menu{display:block}.nav .lime{display:none}.hero h1{font-size:70px}.crest{right:-80px}.cards{grid-template-columns:1fr}.teams{grid-template-columns:repeat(2,1fr)}.account{grid-template-columns:1fr}.matches>div{grid-template-columns:1fr 1fr}.matches strong{text-align:left}.matches span{text-align:left}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.hero{padding:70px 7%}.hero h1{font-size:58px}.crest{display:none}.section{padding:60px 6%}.teams{grid-template-columns:1fr 1fr}.matches>div{grid-template-columns:1fr}.matches span{text-align:left}.stats div{padding:20px 6%}footer{display:block}.account h2{font-size:45px}}
/* MARKHOR ESPORTS PROFILE NEON STYLE */

.accountbox{
    background:#080808;
    border:1px solid #b7ff00;
    box-shadow:0 0 20px rgba(183,255,0,0.25);
    padding:30px;
    border-radius:15px;
}


.accountbox h3{
    font-size:28px;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#b7ff00;
    text-shadow:0 0 10px #b7ff00;
    margin-bottom:25px;
}


#status{
    color:#aaa;
    margin-bottom:20px;
    font-size:14px;
}


.profile-row{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
}


.profile-row label{
    width:120px;
    font-weight:900;
    color:white;
    text-transform:uppercase;
    letter-spacing:1px;
}


.profile-row input{

    flex:1;
    padding:14px;

    background:#111;

    color:white;

    border:1px solid #333;

    border-radius:8px;

    outline:none;

    font-size:16px;

    transition:.3s;

}


.profile-row input:focus{

    border-color:#b7ff00;

    box-shadow:
    0 0 10px #b7ff00;

}


#saveProfile{

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

    box-shadow:
    0 0 15px rgba(183,255,0,.5);

}


#accountBtn{

    margin-top:12px;

    font-weight:900;

    letter-spacing:1px;

}



@media(max-width:600px){

.profile-row{

    flex-direction:column;

    align-items:stretch;

}

.profile-row label{

    width:auto;

}

}
/* MARKHOR PLAYER CARD */

.player-card{
    position:relative;
    background:#080808;
    border:1px solid #b7ff00;
    border-radius:16px;
    padding:28px;
    max-width:520px;
    box-shadow:
        0 0 15px rgba(183,255,0,.25),
        inset 0 0 30px rgba(183,255,0,.03);
    overflow:hidden;
}

.player-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:#b7ff00;
    box-shadow:0 0 15px #b7ff00;
}

.player-card-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}

.player-avatar{
    width:65px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #b7ff00;
    border-radius:50%;
    color:#b7ff00;
    font-size:30px;
    font-weight:900;
    text-shadow:0 0 12px #b7ff00;
    box-shadow:0 0 15px rgba(183,255,0,.4);
}

.player-card-top small{
    color:#b7ff00;
    font-weight:800;
    letter-spacing:2px;
}

.player-card-top h3{
    margin:4px 0 0;
    font-size:26px;
    font-weight:900;
    letter-spacing:2px;
    color:white;
}

.player-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:22px;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    color:#aaa;
}

.player-status span{
    width:8px;
    height:8px;
    background:#b7ff00;
    border-radius:50%;
    box-shadow:0 0 10px #b7ff00;
}

.profile-fields{
    display:grid;
    gap:14px;
}

.profile-field{
    display:grid;
    grid-template-columns:110px 1fr;
    align-items:center;
    gap:15px;
}

.profile-field label{
    color:#b7ff00;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px;
}

.profile-field input{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    background:#111;
    border:1px solid #333;
    border-radius:7px;
    color:white;
    outline:none;
    font-size:14px;
    transition:.25s;
}

.profile-field input:focus{
    border-color:#b7ff00;
    box-shadow:0 0 10px rgba(183,255,0,.35);
}

.profile-field input[readonly]{
    color:#b7ff00;
}

.player-actions{
    margin-top:22px;
    display:grid;
    gap:10px;
}

#saveProfile{
    font-weight:900;
    letter-spacing:1.5px;
    box-shadow:0 0 15px rgba(183,255,0,.35);
}

#status{
    margin-top:18px;
    color:#777;
    font-size:12px;
}

@media(max-width:600px){

    .player-card{
        padding:20px;
    }

    .profile-field{
        grid-template-columns:1fr;
        gap:6px;
    }

    .profile-field input{
        width:100%;
    }

}
/* =========================================
   MARKHOR ESPORTS - PLAYER PROFILE PAGE
========================================= */

.profile-page{
    min-height:calc(100vh - 150px);
    padding:100px 6%;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.profile-page::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:#b7ff00;
    opacity:.04;
    filter:blur(120px);
    border-radius:50%;
    top:50px;
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
}

.profile-page-title{
    width:100%;
    max-width:1000px;
    margin-bottom:35px;
    position:relative;
}

.profile-page-title small{
    color:#b7ff00;
    font-size:12px;
    font-weight:900;
    letter-spacing:3px;
}

.profile-page-title h1{
    margin:8px 0;
    font-size:clamp(38px,6vw,72px);
    line-height:.95;
    font-weight:950;
    letter-spacing:-2px;
    color:#fff;
    text-shadow:0 0 20px rgba(183,255,0,.15);
}

.profile-page-title p{
    margin:0;
    color:#777;
    font-size:15px;
}


/* MAIN PLAYER CARD */

.big-player-card{
    width:100%;
    max-width:1000px;
    box-sizing:border-box;
    padding:42px;
    background:
        linear-gradient(
            135deg,
            rgba(183,255,0,.06),
            rgba(255,255,255,.015) 45%,
            rgba(0,0,0,.8)
        );

    border:1px solid rgba(183,255,0,.55);
    border-radius:22px;

    position:relative;
    overflow:hidden;

    box-shadow:
        0 0 25px rgba(183,255,0,.12),
        inset 0 0 50px rgba(183,255,0,.025);
}

.big-player-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#b7ff00;
    box-shadow:0 0 18px #b7ff00;
}

.big-player-card::after{
    content:"M";
    position:absolute;
    right:-30px;
    bottom:-80px;
    font-size:300px;
    font-weight:950;
    color:rgba(183,255,0,.025);
    pointer-events:none;
}


/* PLAYER HEADER */

.player-header{
    display:flex;
    align-items:center;
    gap:25px;
    padding-bottom:30px;
    border-bottom:1px solid rgba(255,255,255,.08);
    position:relative;
    z-index:2;
}

.big-avatar{
    width:105px;
    height:105px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #b7ff00;
    border-radius:50%;

    color:#b7ff00;
    font-size:48px;
    font-weight:950;

    text-shadow:0 0 18px #b7ff00;

    box-shadow:
        0 0 15px rgba(183,255,0,.4),
        inset 0 0 20px rgba(183,255,0,.08);
}

.player-header small{
    color:#b7ff00;
    font-size:11px;
    font-weight:900;
    letter-spacing:3px;
}

.player-header h2{
    margin:7px 0 10px;
    color:#fff;
    font-size:38px;
    font-weight:950;
    letter-spacing:1px;
}

.online{
    display:inline-flex;
    align-items:center;
    gap:7px;

    color:#888;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
}

.online span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#b7ff00;
    box-shadow:0 0 10px #b7ff00;
}


/* PROFILE INFORMATION */

.profile-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    margin-top:30px;

    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    overflow:hidden;

    position:relative;
    z-index:2;
}

.profile-info > div{
    padding:22px 25px;
    background:#0a0a0a;
}

.profile-info small{
    display:block;
    margin-bottom:8px;

    color:#777;
    font-size:10px;
    font-weight:900;
    letter-spacing:2px;
}

.profile-info strong{
    display:block;

    color:#fff;
    font-size:17px;
    font-weight:800;
    letter-spacing:.5px;

    word-break:break-word;
}


/* STATS */

.profile-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;

    margin-top:25px;

    position:relative;
    z-index:2;
}

.profile-stats > div{
    text-align:center;
    padding:20px 10px;

    background:#0b0b0b;
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
}

.profile-stats strong{
    display:block;

    color:#b7ff00;
    font-size:24px;
    font-weight:950;

    text-shadow:0 0 10px rgba(183,255,0,.3);
}

.profile-stats small{
    display:block;
    margin-top:5px;

    color:#666;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.5px;
}


/* BUTTONS */

.big-player-card .full{
    position:relative;
    z-index:2;
    margin-top:25px;
}

.big-player-card #logoutBtn{
    margin-top:10px;
}

#profileMessage{
    position:relative;
    z-index:2;

    text-align:center;
    color:#777;
    font-size:12px;
    margin:15px 0 0;
}


/* MOBILE */

@media(max-width:700px){

    .profile-page{
        padding:60px 18px;
    }

    .profile-page-title h1{
        font-size:42px;
    }

    .big-player-card{
        padding:25px 18px;
    }

    .player-header{
        gap:16px;
    }

    .big-avatar{
        width:75px;
        height:75px;
        font-size:34px;
    }

    .player-header h2{
        font-size:26px;
    }

    .profile-info{
        grid-template-columns:1fr;
    }

    .profile-stats{
        grid-template-columns:repeat(2,1fr);
    }

}
/* =========================================================
   MARKHOR ESPORTS
   PROFESSIONAL TEAM SYSTEM UI
   ========================================================= */

:root {
    --neon: #c8ff00;
    --neon-soft: rgba(200, 255, 0, 0.18);
    --black: #070707;
    --panel: #101010;
    --panel-2: #151515;
    --border: rgba(255,255,255,0.10);
    --text: #f5f5f5;
    --muted: #8d8d8d;
}


/* =========================================================
   TEAM CENTER
   ========================================================= */

.team-choice-grid {
    max-width: 1050px;
    margin: 55px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}


.team-choice-card {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    color: var(--text);
    background:
        linear-gradient(145deg, #151515, #090909);
    border: 1px solid var(--border);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.team-choice-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -80px;
    background: var(--neon);
    opacity: .06;
    filter: blur(35px);
    border-radius: 50%;
    transition: .4s ease;
}


.team-choice-card:hover {
    transform: translateY(-8px);
    border-color: var(--neon);
    box-shadow:
        0 0 25px rgba(200,255,0,.10),
        0 0 70px rgba(200,255,0,.05);
}


.team-choice-card:hover::before {
    opacity: .16;
    transform: scale(1.3);
}


.team-choice-icon {
    position: absolute;
    top: 35px;
    right: 38px;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neon);
    color: var(--neon);
    font-size: 32px;
    font-weight: 800;
    box-shadow: 0 0 20px rgba(200,255,0,.10);
}


.team-choice-card small {
    color: var(--neon);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}


.team-choice-card h2 {
    margin: 10px 0;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -1px;
}


.team-choice-card p {
    max-width: 430px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 25px;
}


.team-choice-card span {
    color: var(--neon);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}


/* =========================================================
   CREATE TEAM CARD
   ========================================================= */

.team-create-card {
    max-width: 1050px;
    margin: 45px auto 0;
    background:
        linear-gradient(145deg, #131313, #090909);
    border: 1px solid var(--border);
    box-shadow:
        0 20px 70px rgba(0,0,0,.35);
}


.team-create-card:hover {
    border-color: rgba(200,255,0,.25);
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.team-section-title {
    position: relative;
    margin: 45px 0 22px;
    padding-bottom: 13px;
    color: var(--neon);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    border-bottom: 1px solid var(--border);
}


.team-section-title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 85px;
    height: 2px;
    background: var(--neon);
    box-shadow: 0 0 12px var(--neon);
}


.team-section-title small {
    float: right;
    color: #666;
    font-size: 9px;
    letter-spacing: 1.5px;
}


/* =========================================================
   TEAM FORM
   ========================================================= */

.team-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


.team-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}


.team-field label {
    color: #aaa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}


.team-field input,
.roster-player input,
.join-tools input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 17px;
    border: 1px solid rgba(255,255,255,.10);
    outline: none;
    background: #080808;
    color: white;
    font-family: inherit;
    font-size: 14px;
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.team-field input::placeholder,
.roster-player input::placeholder,
.join-tools input::placeholder {
    color: #555;
}


.team-field input:focus,
.roster-player input:focus,
.join-tools input:focus {
    border-color: var(--neon);
    background: #0c0c0c;
    box-shadow:
        0 0 0 3px rgba(200,255,0,.05),
        0 0 18px rgba(200,255,0,.08);
}


/* =========================================================
   ROSTER
   ========================================================= */

.roster-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


.roster-player {
    padding: 22px;
    background: #0a0a0a;
    border: 1px solid var(--border);
    transition: .3s ease;
}


.roster-player:hover {
    border-color: rgba(200,255,0,.30);
    transform: translateY(-2px);
}


.roster-player h3 {
    margin: 0 0 16px;
    color: white;
    font-size: 13px;
    letter-spacing: 2px;
}


.roster-player input {
    margin-bottom: 10px;
}


.roster-player input:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CREATE BUTTON
   ========================================================= */

#createTeam {
    margin-top: 42px;
    min-height: 58px;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 2px;
    cursor: pointer;
    border: none;
    transition: .3s ease;
}


#createTeam:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 20px rgba(200,255,0,.30),
        0 10px 30px rgba(0,0,0,.30);
}


#createTeam:active {
    transform: translateY(0);
}


#createTeam:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   SUCCESS / ERROR MESSAGE
   ========================================================= */

#teamMessage,
#joinMessage {
    margin: 18px 0 0;
    padding: 14px 16px;
    color: var(--neon);
    background: rgba(200,255,0,.04);
    border-left: 2px solid var(--neon);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}


/* =========================================================
   JOIN TEAM PAGE
   ========================================================= */

.join-tools {
    max-width: 1050px;
    margin: 35px auto 25px;
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 12px;
}


.join-tools input {
    min-height: 52px;
}


#refreshTeams {
    min-height: 52px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}


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

.teams-list {
    max-width: 1050px;
    margin: 25px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}


.join-team-card {
    position: relative;
    padding: 26px;
    background:
        linear-gradient(145deg, #141414, #090909);
    border: 1px solid var(--border);
    overflow: hidden;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.join-team-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--neon);
    opacity: .35;
    box-shadow: 0 0 18px var(--neon);
}


.join-team-card:hover {
    transform: translateY(-5px);
    border-color: rgba(200,255,0,.35);
    box-shadow:
        0 15px 45px rgba(0,0,0,.35),
        0 0 25px rgba(200,255,0,.05);
}


.join-team-top {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
}


.join-team-logo-wrap {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}


.join-team-logo-wrap img,
.join-team-logo {
    width: 76px;
    height: 76px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    border: 1px solid rgba(200,255,0,.35);
    color: var(--neon);
    font-size: 21px;
    font-weight: 950;
    letter-spacing: 1px;
}


.join-team-title {
    min-width: 0;
}


.join-team-title small {
    color: var(--neon);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}


.join-team-title h2 {
    margin: 5px 0;
    color: white;
    font-size: 24px;
    font-weight: 950;
    text-transform: uppercase;
}


.join-team-title span {
    color: #777;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}


.join-team-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}


.join-team-info div {
    padding: 13px;
    background: #080808;
    border: 1px solid rgba(255,255,255,.06);
}


.join-team-info small {
    display: block;
    margin-bottom: 5px;
    color: #666;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}


.join-team-info strong {
    color: #ddd;
    font-size: 12px;
}


.requestJoinBtn {
    min-height: 52px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1.5px;
    transition: .3s ease;
}


.requestJoinBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(200,255,0,.25);
}


.requestJoinBtn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}


.team-loading {
    grid-column: 1 / -1;
    padding: 50px;
    text-align: center;
    color: #777;
    border: 1px solid var(--border);
    background: #0b0b0b;
    font-size: 12px;
    letter-spacing: 1px;
}


/* =========================================================
   PROFILE HEADER IMPROVEMENT
   ========================================================= */

.profile-page-title small {
    color: var(--neon);
    font-weight: 900;
    letter-spacing: 4px;
}


.profile-page-title h1 {
    font-weight: 950;
    letter-spacing: -1px;
    text-shadow:
        0 0 25px rgba(200,255,0,.08);
}


.profile-page-title p {
    color: #777;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .team-choice-grid,
    .teams-list,
    .team-form,
    .roster-grid {
        grid-template-columns: 1fr;
    }


    .team-choice-card {
        min-height: 280px;
        padding: 30px;
    }


    .team-create-card {
        margin-top: 30px;
    }


    .join-tools {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 500px) {

    .team-choice-card {
        padding: 25px;
        min-height: 250px;
    }


    .team-choice-icon {
        width: 52px;
        height: 52px;
        top: 25px;
        right: 25px;
        font-size: 25px;
    }


    .team-choice-card h2 {
        font-size: 30px;
    }


    .join-team-card {
        padding: 20px;
    }


    .join-team-logo-wrap,
    .join-team-logo-wrap img,
    .join-team-logo {
        width: 62px;
        height: 62px;
    }

}
/* =========================================================
   MARKHOR ESPORTS - MY TEAM PROFESSIONAL UI
   ========================================================= */

.my-team-container {
    max-width: 1100px;
    margin: 45px auto 0;
    animation: teamPageIn .6s ease both;
}

@keyframes teamPageIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   TEAM HERO
========================================= */

.my-team-hero {
    position: relative;
    min-height: 180px;
    padding: 35px;
    display: flex;
    align-items: center;
    gap: 25px;
    overflow: hidden;

    background:
        linear-gradient(135deg, #171717 0%, #090909 75%);

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);
}


.my-team-hero::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    right: -170px;
    top: -210px;

    border-radius: 50%;

    background: var(--neon);

    opacity: .055;

    filter: blur(45px);
}


.my-team-hero::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: var(--neon);

    box-shadow:
        0 0 15px var(--neon),
        0 0 35px rgba(200,255,0,.35);
}


/* =========================================
   TEAM LOGO
========================================= */

.my-team-logo {
    position: relative;
    z-index: 2;

    width: 120px;
    height: 120px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #050505;

    border: 1px solid rgba(200,255,0,.45);

    color: var(--neon);

    font-size: 45px;
    font-weight: 950;

    box-shadow:
        0 0 25px rgba(200,255,0,.10),
        inset 0 0 30px rgba(200,255,0,.035);
}


.my-team-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================
   TEAM HEADING
========================================= */

.my-team-heading {
    position: relative;
    z-index: 2;

    flex: 1;
}


.my-team-heading > small {
    color: var(--neon);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 3px;
}


.my-team-heading h2 {
    margin: 7px 0 10px;

    color: #fff;

    font-size: clamp(30px, 5vw, 52px);

    line-height: .95;

    font-weight: 950;

    letter-spacing: -2px;

    text-transform: uppercase;

    text-shadow:
        0 0 25px rgba(255,255,255,.05);
}


.team-tag-line {
    display: flex;
    align-items: center;
    gap: 10px;
}


.team-tag-line > span:first-child {
    color: #888;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 3px;
}


.verified-team {
    padding: 5px 9px;

    color: #050505;

    background: var(--neon);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 1px;

    box-shadow:
        0 0 12px rgba(200,255,0,.18);
}


/* =========================================
   CAPTAIN BADGE
========================================= */

.captain-badge {
    position: relative;
    z-index: 2;

    align-self: flex-start;

    padding: 9px 13px;

    color: var(--neon);

    border: 1px solid rgba(200,255,0,.35);

    background: rgba(200,255,0,.035);

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 2px;

    box-shadow:
        0 0 18px rgba(200,255,0,.06);
}


/* =========================================
   SECTION TITLE
========================================= */

.team-section-title {
    position: relative;

    margin-top: 45px;
    margin-bottom: 20px;

    padding-bottom: 13px;

    color: var(--neon);

    font-size: 11px;
    font-weight: 950;

    letter-spacing: 3px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}


.team-section-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 95px;
    height: 2px;

    background: var(--neon);

    box-shadow:
        0 0 12px var(--neon);
}


.team-section-title small {
    float: right;

    color: #555;

    font-size: 8px;

    letter-spacing: 2px;
}


/* =========================================
   TEAM STATS
========================================= */

.team-stats-grid {
    display: grid;

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

    gap: 12px;
}


.team-stat-card {
    position: relative;

    padding: 25px 18px;

    overflow: hidden;

    background:
        linear-gradient(145deg, #141414, #090909);

    border: 1px solid rgba(255,255,255,.08);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.team-stat-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background: #333;
}


.team-stat-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(200,255,0,.35);

    box-shadow:
        0 12px 35px rgba(0,0,0,.3),
        0 0 20px rgba(200,255,0,.05);
}


.team-stat-card:hover::before {
    background: var(--neon);

    box-shadow:
        0 0 12px var(--neon);
}


.team-stat-card small {
    display: block;

    color: #666;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 2px;
}


.team-stat-card strong {
    display: block;

    margin: 8px 0 4px;

    color: #fff;

    font-size: 30px;

    font-weight: 950;

    letter-spacing: -1px;
}


.team-stat-card span {
    color: #555;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.rank-card strong {
    color: var(--neon);

    text-shadow:
        0 0 15px rgba(200,255,0,.20);
}


/* =========================================
   TEAM INFORMATION
========================================= */

.my-team-info-grid {
    display: grid;

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

    gap: 12px;
}


.my-team-info-grid > div {
    padding: 22px;

    background: #0c0c0c;

    border: 1px solid rgba(255,255,255,.08);

    transition: .3s ease;
}


.my-team-info-grid > div:hover {
    border-color:
        rgba(200,255,0,.25);
}


.my-team-info-grid small {
    display: block;

    margin-bottom: 8px;

    color: #5f5f5f;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 2px;
}


.my-team-info-grid strong {
    color: #eee;

    font-size: 13px;

    font-weight: 900;
}


.team-status {
    color: var(--neon) !important;
}


/* =========================================
   ACHIEVEMENTS
========================================= */

.achievements-grid {
    display: grid;

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

    gap: 15px;
}


.achievement-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 22px;

    background:
        linear-gradient(145deg, #151515, #0a0a0a);

    border: 1px solid rgba(255,255,255,.08);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.achievement-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(200,255,0,.3);
}


.achievement-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #070707;

    border: 1px solid rgba(200,255,0,.25);

    font-size: 23px;

    box-shadow:
        0 0 15px rgba(200,255,0,.05);
}


.achievement-card strong {
    display: block;

    color: #eee;

    font-size: 11px;

    font-weight: 950;

    letter-spacing: .5px;
}


.achievement-card small {
    display: block;

    margin-top: 5px;

    color: var(--neon);

    font-size: 8px;

    font-weight: 950;

    letter-spacing: 2px;
}


/* =========================================
   ROSTER
========================================= */

.my-roster-grid {
    display: grid;

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

    gap: 12px;
}


.my-player-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 20px;

    background:
        linear-gradient(145deg, #141414, #090909);

    border: 1px solid rgba(255,255,255,.08);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.my-player-card:hover {
    transform: translateX(4px);

    border-color:
        rgba(200,255,0,.3);

    box-shadow:
        -3px 0 0 var(--neon);
}


.player-number {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--neon);

    background: #060606;

    border: 1px solid rgba(200,255,0,.25);

    font-size: 11px;
    font-weight: 950;

    letter-spacing: 1px;
}


.player-data {
    flex: 1;
}


.player-data strong {
    display: block;

    color: #eee;

    font-size: 14px;

    font-weight: 950;

    text-transform: uppercase;
}


.player-data small {
    display: block;

    margin-top: 5px;

    color: #666;

    font-size: 9px;

    letter-spacing: 1px;
}


.roster-role {
    color: #555;

    font-size: 8px;

    font-weight: 950;

    letter-spacing: 2px;
}


.substitute {
    border-style: dashed;

    opacity: .9;
}


.substitute .player-number {
    color: #777;

    border-color:
        rgba(255,255,255,.12);
}


/* =========================================
   TEAM CHAT
========================================= */

.team-chat-container {
    overflow: hidden;

    background: #090909;

    border: 1px solid rgba(255,255,255,.09);

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


.team-chat-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 18px 22px;

    background: #111;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.team-chat-header strong {
    display: block;

    color: #eee;

    font-size: 11px;

    font-weight: 950;

    letter-spacing: 2px;
}


.team-chat-header small {
    display: block;

    margin-top: 5px;

    color: #555;

    font-size: 9px;
}


.chat-online {
    color: var(--neon);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 1px;

    text-shadow:
        0 0 10px rgba(200,255,0,.35);
}


.team-chat-messages {
    min-height: 260px;
    max-height: 450px;

    padding: 22px;

    overflow-y: auto;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(200,255,0,.025),
            transparent 55%
        );
}


.chat-empty {
    min-height: 215px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;
}


.chat-empty-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    background: #0d0d0d;

    border: 1px solid rgba(200,255,0,.2);

    font-size: 22px;
}


.chat-empty strong {
    color: #aaa;

    font-size: 11px;

    letter-spacing: 2px;
}


.chat-empty p {
    margin-top: 7px;

    color: #555;

    font-size: 10px;
}


/* CHAT MESSAGE */

.team-chat-message {
    max-width: 75%;

    margin-bottom: 12px;

    padding: 13px 16px;

    background: #131313;

    border-left:
        2px solid var(--neon);

    box-shadow:
        0 5px 20px rgba(0,0,0,.18);
}


.team-chat-message strong {
    color: var(--neon);

    font-size: 9px;

    letter-spacing: 1px;
}


.team-chat-message p {
    margin: 6px 0 0;

    color: #ddd;

    font-size: 12px;

    line-height: 1.5;
}


.team-chat-input {
    display: grid;

    grid-template-columns: 1fr 100px;

    gap: 10px;

    padding: 15px;

    background: #0d0d0d;

    border-top:
        1px solid rgba(255,255,255,.07);
}


.team-chat-input input {
    width: 100%;

    box-sizing: border-box;

    min-height: 48px;

    padding: 0 15px;

    outline: none;

    background: #070707;

    border: 1px solid rgba(255,255,255,.09);

    color: #fff;

    font-family: inherit;

    font-size: 12px;

    transition: .25s ease;
}


.team-chat-input input:focus {
    border-color: var(--neon);

    box-shadow:
        0 0 15px rgba(200,255,0,.07);
}


.team-chat-input button {
    border: none;

    cursor: pointer;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 1.5px;
}


/* =========================================
   TEAM ACTIONS
========================================= */

.team-actions {
    display: flex;

    gap: 12px;

    margin-top: 25px;
}


.team-actions a {
    min-height: 50px;

    padding: 0 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    text-decoration: none;

    font-size: 10px;

    font-weight: 950;

    letter-spacing: 1.5px;

    transition: .3s ease;
}


.team-actions a:hover {
    transform: translateY(-3px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 850px) {

    .my-team-hero {
        padding: 25px;

        flex-wrap: wrap;
    }


    .team-stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .my-team-info-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .achievements-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .my-team-container {
        margin-top: 30px;
    }


    .my-team-hero {
        display: grid;

        grid-template-columns: 75px 1fr;

        gap: 16px;

        padding: 20px;
    }


    .my-team-logo {
        width: 75px;
        height: 75px;

        font-size: 30px;
    }


    .my-team-heading h2 {
        font-size: 28px;

        letter-spacing: -1px;
    }


    .captain-badge {
        grid-column: 1 / -1;

        justify-self: start;
    }


    .team-stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .team-stat-card {
        padding: 20px 15px;
    }


    .team-stat-card strong {
        font-size: 25px;
    }


    .my-team-info-grid {
        grid-template-columns: 1fr;
    }


    .my-roster-grid {
        grid-template-columns: 1fr;
    }


    .team-chat-input {
        grid-template-columns: 1fr;
    }


    .team-chat-message {
        max-width: 90%;
    }


    .team-actions {
        flex-direction: column;
    }


    .team-actions a {
        width: 100%;
    }

}
/* =========================================
   TEAM REQUEST NOTIFICATION
========================================= */

.team-notification-wrapper {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 20;
}


.team-notification-button {
    position: relative;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    background: #090909;

    border: 1px solid rgba(200,255,0,.35);

    color: #fff;

    font-size: 18px;

    transition: .3s ease;

    box-shadow:
        0 0 20px rgba(200,255,0,.06);
}


.team-notification-button:hover {
    transform: translateY(-3px);

    border-color: var(--neon);

    box-shadow:
        0 0 20px rgba(200,255,0,.18);
}


#teamRequestCount {
    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 5px;

    box-sizing: border-box;

    border-radius: 50%;

    background: var(--neon);

    color: #050505;

    font-size: 9px;
    font-weight: 950;

    box-shadow:
        0 0 12px rgba(200,255,0,.35);
}


/* =========================================
   REQUEST PANEL
========================================= */

.team-requests-panel {
    max-width: 1100px;

    margin: 25px auto 0;

    background: #0b0b0b;

    border: 1px solid rgba(255,255,255,.09);

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);

    animation: requestsIn .35s ease both;
}


@keyframes requestsIn {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.team-requests-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 20px 24px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.team-requests-header small {
    color: var(--neon);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 2px;
}


.team-requests-header h2 {
    margin: 6px 0 0;

    color: #fff;

    font-size: 20px;
    font-weight: 950;

    letter-spacing: 1px;
}


#closeTeamRequests {
    width: 38px;
    height: 38px;

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

    background: #111;

    color: #aaa;

    font-size: 22px;

    cursor: pointer;

    transition: .25s ease;
}


#closeTeamRequests:hover {
    color: var(--neon);

    border-color: var(--neon);
}


/* =========================================
   REQUEST CARD
========================================= */

.team-request-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 24px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}


.team-request-player strong {
    display: block;

    color: #fff;

    font-size: 14px;

    font-weight: 950;
}


.team-request-player small {
    display: block;

    margin-top: 5px;

    color: #666;

    font-size: 9px;

    letter-spacing: 1px;
}


.team-request-actions {
    display: flex;

    gap: 8px;
}


.team-request-actions button {
    min-height: 38px;

    padding: 0 15px;

    border: none;

    cursor: pointer;

    font-size: 8px;

    font-weight: 950;

    letter-spacing: 1px;

    transition: .25s ease;
}


.accept-request {
    background: var(--neon);

    color: #050505;
}


.reject-request {
    background: #171717;

    color: #aaa;

    border: 1px solid rgba(255,255,255,.1) !important;
}


.accept-request:hover,
.reject-request:hover {
    transform: translateY(-2px);
}


.requests-empty {
    padding: 50px 20px;

    text-align: center;

    color: #555;

    font-size: 10px;

    letter-spacing: 1px;
}


@media (max-width: 600px) {

    .team-notification-wrapper {
        top: 15px;
        right: 15px;
    }


    .team-request-card {
        align-items: flex-start;

        flex-direction: column;
    }


    .team-request-actions {
        width: 100%;
    }


    .team-request-actions button {
        flex: 1;
    }

}
.team-request-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}


.team-request-avatar {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #111;

    border: 1px solid rgba(200,255,0,.25);

    box-shadow:
        0 0 18px rgba(200,255,0,.08);
}


.team-request-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.team-request-avatar span {
    color: var(--neon);

    font-size: 20px;
    font-weight: 950;
}


.team-request-info strong {
    display: block;

    color: #fff;

    font-size: 14px;
    font-weight: 950;
}


.team-request-info > span {
    display: block;

    margin-top: 4px;

    color: #888;

    font-size: 10px;
}


.team-request-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 8px;
}


.team-request-meta small {
    color: #555;

    font-size: 8px;

    letter-spacing: .8px;
}


.view-request-profile {
    background: transparent;

    color: #aaa;

    border: 1px solid rgba(255,255,255,.12) !important;
}


.view-request-profile:hover {
    color: var(--neon);

    border-color: var(--neon) !important;
}


@media (max-width: 700px) {

    .team-request-profile {
        width: 100%;
    }

    .team-request-actions {
        flex-wrap: wrap;
        width: 100%;
    }

}
.team-management-actions {

    display:flex;

    gap:12px;

    margin-top:25px;

}


.leave-team-btn,
.disband-team-btn {

    min-height:42px;

    padding:0 20px;

    border:none;

    cursor:pointer;

    font-size:9px;

    font-weight:950;

    letter-spacing:1px;

    transition:.3s ease;

}


.leave-team-btn {

    background:#151515;

    color:#aaa;

    border:1px solid rgba(255,255,255,.15);

}


.leave-team-btn:hover {

    color:white;

    border-color:white;

}



.disband-team-btn {

    background:#ff3131;

    color:white;

}


.disband-team-btn:hover {

    box-shadow:0 0 20px rgba(255,49,49,.4);

    transform:translateY(-2px);

}
/* =====================================
   LEAVE TEAM POPUP
===================================== */


.leave-popup-overlay {

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:
    rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    z-index:9999;

}


.leave-popup-box {

    width:360px;

    padding:35px;

    text-align:center;

    background:#080808;

    border:1px solid var(--neon);

    box-shadow:
    0 0 25px rgba(200,255,0,.25),
    inset 0 0 20px rgba(200,255,0,.05);


    animation:
    popupShow .35s ease;

}


@keyframes popupShow {

    from {

        opacity:0;

        transform:
        scale(.8)
        translateY(20px);

    }


    to {

        opacity:1;

        transform:
        scale(1)
        translateY(0);

    }

}



.popup-icon {

    font-size:40px;

    color:var(--neon);

    text-shadow:
    0 0 20px var(--neon);

}



.leave-popup-box h2 {

    margin-top:15px;

    color:white;

    font-size:24px;

    font-weight:950;

    letter-spacing:2px;

}



.leave-popup-box p {

    color:#888;

    font-size:12px;

    margin:15px 0 30px;

}



.popup-actions {

    display:flex;

    gap:15px;

    justify-content:center;

}



.popup-actions button {

    width:120px;

    height:42px;

    cursor:pointer;

    font-size:10px;

    font-weight:950;

    letter-spacing:2px;

}



.popup-no {

    background:#111;

    color:#aaa;

    border:1px solid #333;

}



.popup-yes {

    background:var(--neon);

    color:#050505;

    border:none;

    box-shadow:
    0 0 20px rgba(200,255,0,.35);

}


.popup-actions button:hover {

    transform:translateY(-3px);

}
/* =========================================
   MARKHOR TOURNAMENT CARDS
   PROFESSIONAL NEON ESPORTS STYLE
========================================= */

#dynamicTournaments {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(280px, 1fr)
    );
    gap: 28px;
    width: 100%;
    margin-top: 30px;
}


/* TOURNAMENT CARD */

#dynamicTournaments article {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(18, 25, 28, .98),
            rgba(7, 11, 13, .98)
        );

    border: 1px solid rgba(190, 255, 0, .25);

    border-radius: 18px;

    box-shadow:
        0 0 0 transparent,
        0 0 25px rgba(190, 255, 0, .08);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* HOVER */

#dynamicTournaments article:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(190, 255, 0, .8);

    box-shadow:
        0 0 15px rgba(190, 255, 0, .25),
        0 0 45px rgba(190, 255, 0, .12);
}


/* TOP COVER */

#dynamicTournaments .cover {

    position: relative;

    min-height: 150px;

    display: flex;

    align-items: flex-end;

    padding: 22px;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

    color: #dfff6a;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(200,255,0,.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #172018,
            #080b0a
        );

    border-bottom:
        1px solid rgba(190,255,0,.2);

}


/* GLOW LINE */

#dynamicTournaments .cover::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #cfff00,
            transparent
        );

    box-shadow:
        0 0 12px #cfff00;

}


/* CARD BODY */

#dynamicTournaments .body {

    padding: 24px;
}


/* GAME TYPE */

#dynamicTournaments .body > small {

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 2px;

    color: rgba(255,255,255,.55);
}


/* TOURNAMENT NAME */

#dynamicTournaments h3 {

    margin:
        10px 0 22px;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size:
        clamp(22px, 3vw, 30px);

    line-height: 1.05;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;

    color: #ffffff;

    text-shadow:
        0 0 8px rgba(255,255,255,.25),
        0 0 20px rgba(190,255,0,.12);

}


/* META */

#dynamicTournaments .meta {

    display: grid;

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

    gap: 10px;

    margin-bottom: 22px;

}


/* META ITEM */

#dynamicTournaments .meta span {

    display: flex;

    flex-direction:
        column;

    gap: 5px;

    padding: 12px 8px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        10px;

    text-align:
        center;

    font-size:
        9px;

    letter-spacing:
        1px;

    color:
        rgba(255,255,255,.45);

}


/* META VALUE */

#dynamicTournaments .meta strong {

    color:
        #dfff6a;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        13px;

    letter-spacing:
        .5px;

    text-shadow:
        0 0 8px rgba(190,255,0,.4);

}


/* REGISTER BUTTON */

#dynamicTournaments .tournament-register-btn {

    width: 100%;

    min-height: 50px;

    border:
        1px solid #cfff00;

    border-radius:
        10px;

    background:
        rgba(190,255,0,.06);

    color:
        #dfff6a;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        2px;

    cursor:
        pointer;

    transition:
        all .3s ease;

    text-shadow:
        0 0 8px rgba(190,255,0,.5);

    box-shadow:
        inset 0 0 15px rgba(190,255,0,.03);
}


/* REGISTER HOVER */

#dynamicTournaments .tournament-register-btn:hover {

    background:
        #cfff00;

    color:
        #071006;

    box-shadow:
        0 0 10px #cfff00,
        0 0 30px rgba(190,255,0,.45);

    transform:
        translateY(-2px);

}


/* VIEW BUTTON */

#dynamicTournaments .tournament-view-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 48px;

    margin-top: 10px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:
        10px;

    color:
        rgba(255,255,255,.8);

    text-decoration:
        none;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        10px;

    letter-spacing:
        1.5px;

    transition:
        all .3s ease;

}


#dynamicTournaments .tournament-view-btn:hover {

    border-color:
        rgba(190,255,0,.6);

    color:
        #dfff6a;

    box-shadow:
        0 0 15px rgba(190,255,0,.12);

}


/* MOBILE */

@media(max-width:600px){

    #dynamicTournaments {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    #dynamicTournaments .meta {

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

    }


    #dynamicTournaments .body {

        padding: 20px;

    }

}
/* =========================================
   PREMIUM NEON TOURNAMENT BUTTONS
========================================= */

#dynamicTournaments .tournament-register-btn,
#dynamicTournaments .tournament-view-btn {

    position: relative;

    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 8px;

    font-family:
        "Arial Black",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    transition:
        .3s ease;

}


/* REGISTER TEAM */

#dynamicTournaments .tournament-register-btn {

    border: 1px solid #d7ff28;

    background:
        linear-gradient(
            135deg,
            rgba(205,255,0,.16),
            rgba(205,255,0,.03)
        );

    color: #e5ff73;

    text-shadow:
        0 0 6px rgba(210,255,30,.8),
        0 0 15px rgba(210,255,30,.35);

    box-shadow:
        inset 0 0 18px rgba(205,255,0,.05),
        0 0 10px rgba(205,255,0,.08);

    cursor: pointer;
}


/* REGISTER GLOW LINE */

#dynamicTournaments .tournament-register-btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #eaff5c,
            transparent
        );

    box-shadow:
        0 0 10px #dfff38;

    transition:
        .5s ease;

}


#dynamicTournaments .tournament-register-btn:hover::before {

    left: 100%;

}


/* REGISTER HOVER */

#dynamicTournaments .tournament-register-btn:hover {

    background:
        #d7ff28;

    color: #071006;

    text-shadow: none;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 10px #d7ff28,
        0 0 25px rgba(215,255,40,.5),
        0 0 45px rgba(215,255,40,.2);

}


/* =========================================
   VIEW TOURNAMENT
========================================= */

#dynamicTournaments .tournament-view-btn {

    margin-top: 10px;

    border:
        1px solid rgba(255,255,255,.18);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        );

    color:
        rgba(255,255,255,.72);

    text-shadow:
        0 0 5px rgba(255,255,255,.2);

}


/* VIEW HOVER */

#dynamicTournaments .tournament-view-btn:hover {

    color: #ffffff;

    border-color:
        rgba(215,255,40,.65);

    background:
        rgba(215,255,40,.06);

    transform:
        translateY(-2px);

    box-shadow:
        0 0 15px rgba(215,255,40,.15);

}


/* =========================================
   BUTTON ARROW EFFECT
========================================= */

#dynamicTournaments .tournament-register-btn,
#dynamicTournaments .tournament-view-btn {

    text-decoration: none;

}


/* MOBILE */

@media(max-width:600px){

    #dynamicTournaments
    .tournament-register-btn,
    #dynamicTournaments
    .tournament-view-btn {

        height: 52px;

        font-size: 10px;

        letter-spacing: 2px;

    }

}
/* =========================================
   PREMIUM TOURNAMENT INFO / META
========================================= */

#dynamicTournaments .meta span {
    position: relative;

    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 6px;

    border: 1px solid rgba(215,255,40,.18);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(215,255,40,.055),
            rgba(255,255,255,.015)
        );

    box-shadow:
        inset 0 0 15px rgba(215,255,40,.025);

    transition: .3s ease;
}


/* LABEL */

#dynamicTournaments .meta span {

    font-family:
        "Arial Black",
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.48);
}


/* VALUE */

#dynamicTournaments .meta span strong {

    margin-top: 5px;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: .8px;

    color:
        #e5ff73;

    text-shadow:
        0 0 6px rgba(215,255,40,.65),
        0 0 14px rgba(215,255,40,.25);
}


/* HOVER */

#dynamicTournaments .meta span:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(215,255,40,.65);

    background:
        rgba(215,255,40,.07);

    box-shadow:
        0 0 12px rgba(215,255,40,.12),
        inset 0 0 18px rgba(215,255,40,.04);
}


/* INFO GLOW */

#dynamicTournaments .meta span::after {

    content: "";

    position: absolute;

    left: 20%;

    right: 20%;

    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215,255,40,.7),
            transparent
        );

    box-shadow:
        0 0 7px rgba(215,255,40,.5);
}
/* =========================================
   MARKHOR BATTLEFIELD S1
   PREMIUM TOURNAMENT PAGE
========================================= */

.tournament-page {
    width: min(1200px, 92%);
    margin: 0 auto;
    padding: 70px 0 100px;
}


/* =========================================
   TOURNAMENT HERO
========================================= */

.tournament-hero {
    position: relative;
    overflow: hidden;

    padding: 75px 55px;

    text-align: center;

    border: 1px solid rgba(205,255,0,.25);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(205,255,0,.13),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #111916,
            #060908
        );

    box-shadow:
        0 0 35px rgba(205,255,0,.06),
        inset 0 0 45px rgba(205,255,0,.025);
}


/* HERO TOP GLOW */

.tournament-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #dfff38,
            transparent
        );

    box-shadow:
        0 0 15px #dfff38,
        0 0 35px rgba(215,255,40,.5);
}


/* BACKGROUND GLOW */

.tournament-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

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

    pointer-events: none;
}


/* BADGE */

.tournament-badge {
    position: relative;
    z-index: 2;

    display: inline-block;

    padding: 9px 18px;

    margin-bottom: 22px;

    border: 1px solid rgba(215,255,40,.45);
    border-radius: 50px;

    background:
        rgba(205,255,0,.055);

    color: #dfff5a;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;

    text-shadow:
        0 0 8px rgba(215,255,40,.6);

    box-shadow:
        0 0 15px rgba(205,255,0,.08);
}


/* MAIN TITLE */

.tournament-hero h1 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size:
        clamp(42px, 7vw, 88px);

    line-height: .95;

    font-weight: 900;

    letter-spacing: -2px;

    text-transform: uppercase;

    color: #ffffff;

    text-shadow:
        0 0 10px rgba(255,255,255,.15);
}


/* SEASON */

.tournament-hero h1 span {
    display: block;

    margin-top: 10px;

    color: #dfff38;

    font-size: .55em;

    letter-spacing: 8px;

    text-shadow:
        0 0 8px rgba(215,255,40,.8),
        0 0 25px rgba(215,255,40,.3);
}


/* DESCRIPTION */

.tournament-description {
    position: relative;
    z-index: 2;

    max-width: 650px;

    margin: 28px auto;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.8;

    color:
        rgba(255,255,255,.62);

    letter-spacing: .3px;
}


/* STATUS */

.tournament-status {
    position: relative;
    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 22px;

    margin-top: 10px;

    border: 1px solid rgba(215,255,40,.4);

    border-radius: 7px;

    background:
        rgba(215,255,40,.055);

    color: #dfff5a;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

    box-shadow:
        0 0 18px rgba(215,255,40,.08);

    animation:
        statusGlow 2s infinite alternate;
}


@keyframes statusGlow {

    from {
        box-shadow:
            0 0 8px rgba(215,255,40,.08);
    }

    to {
        box-shadow:
            0 0 22px rgba(215,255,40,.2);
    }

}


/* STATUS DOT */

.status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #dfff38;

    box-shadow:
        0 0 6px #dfff38,
        0 0 15px #dfff38;

    animation:
        liveDot 1.2s infinite;
}


@keyframes liveDot {

    50% {
        opacity: .35;
        transform: scale(.75);
    }

}


/* =========================================
   TOURNAMENT STATS
========================================= */

.tournament-stats {
    display: grid;

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

    gap: 18px;

    margin-top: 25px;
}


.tournament-stat-card {
    position: relative;

    padding: 27px 20px;

    text-align: center;

    border: 1px solid rgba(255,255,255,.09);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    transition:
        .3s ease;
}


.tournament-stat-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(215,255,40,.5);

    box-shadow:
        0 0 22px rgba(215,255,40,.1);
}


/* STAT LABEL */

.tournament-stat-card small {

    display: block;

    margin-bottom: 10px;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    color:
        rgba(255,255,255,.42);
}


/* STAT NUMBER */

.tournament-stat-card strong {

    display: block;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size: 32px;

    line-height: 1;

    color: #ffffff;

    text-shadow:
        0 0 10px rgba(255,255,255,.15);
}


/* STAT UNIT */

.tournament-stat-card span {

    display: block;

    margin-top: 8px;

    color: #dfff38;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    text-shadow:
        0 0 8px rgba(215,255,40,.45);
}


/* =========================================
   REGISTER SECTION
========================================= */

.tournament-register-section {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 25px;

    padding: 38px 42px;

    border: 1px solid rgba(215,255,40,.25);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(215,255,40,.09),
            transparent 35%
        ),
        rgba(10,14,12,.9);

    box-shadow:
        inset 0 0 35px rgba(215,255,40,.025);
}


/* REGISTER SMALL TITLE */

.tournament-register-section small {

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    color: #dfff38;

    text-shadow:
        0 0 8px rgba(215,255,40,.45);
}


/* REGISTER HEADING */

.tournament-register-section h2 {

    margin: 8px 0;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size:
        clamp(25px, 4vw, 42px);

    letter-spacing:
        -1px;

    color: #ffffff;

    text-shadow:
        0 0 12px rgba(255,255,255,.12);
}


/* REGISTER DESCRIPTION */

.tournament-register-section p {

    margin: 0;

    color:
        rgba(255,255,255,.48);

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size: 14px;
}


/* =========================================
   REGISTER NOW BUTTON
========================================= */

.tournament-register-btn {

    position: relative;

    min-width: 220px;

    height: 62px;

    padding: 0 30px;

    border: 1px solid #dfff38;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(215,255,40,.15),
            rgba(215,255,40,.035)
        );

    color: #eaff72;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2.5px;

    cursor: pointer;

    text-shadow:
        0 0 8px rgba(215,255,40,.7);

    box-shadow:
        0 0 15px rgba(215,255,40,.1),
        inset 0 0 20px rgba(215,255,40,.04);

    transition:
        .3s ease;
}


.tournament-register-btn:hover {

    transform:
        translateY(-4px);

    background:
        #dfff38;

    color: #071006;

    text-shadow: none;

    box-shadow:
        0 0 12px #dfff38,
        0 0 30px rgba(215,255,40,.5),
        0 0 60px rgba(215,255,40,.2);
}


/* =========================================
   REGISTERED TEAMS
========================================= */

.registered-teams-section {

    margin-top: 70px;
}


/* SECTION HEADING */

.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.section-heading small {

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    color: #dfff38;

    text-shadow:
        0 0 8px rgba(215,255,40,.45);
}


.section-heading h2 {

    margin: 8px 0 0;

    font-family:
        "Arial Black",
        Impact,
        Arial,
        sans-serif;

    font-size:
        clamp(28px, 5vw, 50px);

    letter-spacing:
        -1px;

    color: #ffffff;

    text-shadow:
        0 0 12px rgba(255,255,255,.12);
}


/* COUNT */

.registered-count {

    padding: 10px 18px;

    border:
        1px solid rgba(215,255,40,.3);

    border-radius: 7px;

    background:
        rgba(215,255,40,.04);

    color:
        rgba(255,255,255,.45);

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size:
        14px;

    letter-spacing:
        1px;
}


.registered-count span {

    color:
        #dfff38;

    font-size:
        24px;

    text-shadow:
        0 0 10px rgba(215,255,40,.6);
}


/* TEAM LIST */

.registered-teams-list {

    min-height: 180px;

    margin-top: 20px;

    padding: 25px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 14px;

    background:
        rgba(255,255,255,.015);
}


/* LOADING */

.loading-teams {

    min-height: 130px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        rgba(255,255,255,.35);

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    animation:
        loadingPulse 1.5s infinite;
}


@keyframes loadingPulse {

    50% {
        opacity: .35;
    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:800px) {

    .tournament-page {
        padding-top: 35px;
    }

    .tournament-hero {
        padding: 55px 22px;
    }

    .tournament-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .tournament-register-section {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 24px;
    }

    .tournament-register-btn {
        width: 100%;
    }

}


@media(max-width:500px) {

    .tournament-stats {
        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }

    .tournament-stat-card {
        padding: 20px 10px;
    }

    .tournament-stat-card strong {
        font-size: 25px;
    }

    .tournament-hero h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .tournament-hero h1 span {
        letter-spacing: 4px;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================
   REGISTERED TEAM CARDS
========================================= */

.registered-team-card {

    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 82px;

    padding: 14px 18px;

    margin-bottom: 10px;

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(215,255,40,.015)
        );

    transition: .3s ease;
}


.registered-team-card:hover {

    transform: translateX(5px);

    border-color:
        rgba(215,255,40,.4);

    box-shadow:
        0 0 18px rgba(215,255,40,.08);
}


.registered-team-number {

    width: 35px;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 12px;

    color:
        rgba(255,255,255,.3);
}


.registered-team-logo {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(215,255,40,.3);

    border-radius: 8px;

    background:
        rgba(0,0,0,.35);
}


.registered-team-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;
}


.team-logo-text {

    color: #dfff38;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 10px;
}


.registered-team-info {

    flex: 1;
}


.registered-team-info strong {

    display: block;

    color: #ffffff;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 14px;

    letter-spacing: .5px;
}


.registered-team-info small {

    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.4);

    font-size: 10px;

    letter-spacing: 2px;
}


.registered-team-status {

    color: #dfff38;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 1.5px;

    text-shadow:
        0 0 8px rgba(215,255,40,.5);
}


@media(max-width:600px) {

    .registered-team-card {

        gap: 10px;

        padding: 12px;

    }

    .registered-team-number {

        display: none;

    }

    .registered-team-status {

        font-size: 8px;

    }

}
/* =========================================
   TOURNAMENT GROUPS
========================================= */

.tournament-group {

    margin-bottom: 35px;

    padding: 20px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(0,0,0,.15)
        );

}


.group-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;

    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

}


.group-header small {

    color:
        rgba(255,255,255,.4);

    font-size: 9px;

    letter-spacing: 2px;

}


.group-header h3 {

    margin: 5px 0 0;

    color: #ffffff;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 26px;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.group-header > strong {

    color: #dfff38;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

    text-shadow:
        0 0 10px rgba(215,255,40,.5);

}


.group-teams {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.registered-team-card {

    display: flex;

    align-items: center;

    gap: 16px;

    min-height: 70px;

    padding: 10px 14px;

    border:
        1px solid rgba(255,255,255,.06);

    border-radius: 9px;

    background:
        rgba(0,0,0,.22);

    transition:
        .25s ease;

}


.registered-team-card:hover {

    transform: translateX(5px);

    border-color:
        rgba(215,255,40,.35);

    box-shadow:
        0 0 15px rgba(215,255,40,.06);

}


.registered-team-number {

    width: 30px;

    color:
        rgba(255,255,255,.3);

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 11px;

}


.registered-team-logo {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border:
        1px solid rgba(215,255,40,.25);

    border-radius: 7px;

    background:
        rgba(0,0,0,.35);

}


.registered-team-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.team-logo-text {

    color: #dfff38;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 9px;

}


.registered-team-info {

    flex: 1;

}


.registered-team-info strong {

    display: block;

    color: #ffffff;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 13px;

    letter-spacing: .5px;

}


.registered-team-info small {

    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.35);

    font-size: 9px;

    letter-spacing: 2px;

}


.registered-team-status {

    color: #dfff38;

    font-family:
        "Arial Black",
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 1px;

}


@media(max-width:600px) {

    .tournament-group {

        padding: 12px;

    }


    .group-header h3 {

        font-size: 20px;

    }


    .registered-team-status {

        display: none;

    }


    .registered-team-card {

        gap: 10px;

    }

}
/* =========================================
   ADMIN PANEL
========================================= */

.admin-page {
    min-height: 100vh;
}

.admin-container {
    width: min(1200px, 92%);
    margin: 0 auto;
    padding: 70px 0;
}

.admin-loading {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Arial, sans-serif;
    letter-spacing: 2px;
}

.admin-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.admin-heading h1 {
    margin: 8px 0;
    font-size: clamp(36px, 6vw, 70px);
    font-family: "Arial Black", Arial, sans-serif;
    letter-spacing: -2px;
}

.admin-heading p {
    color: rgba(255,255,255,.5);
}

.admin-badge {
    padding: 10px 15px;
    border: 1px solid rgba(215,255,40,.4);
    border-radius: 6px;
    color: #dfff38;
    font-size: 10px;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(215,255,40,.5);
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 50px;
}

.admin-stat {
    padding: 25px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.admin-stat small {
    display: block;
    color: rgba(255,255,255,.4);
    font-size: 9px;
    letter-spacing: 2px;
}

.admin-stat strong {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 28px;
}

.admin-section {
    margin-bottom: 50px;
}

.admin-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.admin-section-heading small {
    color: rgba(255,255,255,.35);
    font-size: 9px;
    letter-spacing: 2px;
}

.admin-section-heading h2 {
    margin: 6px 0 0;
    font-family: "Arial Black", Arial, sans-serif;
}

.admin-section-heading > strong {
    color: #dfff38;
    font-size: 24px;
}

.admin-tournament-list,
.admin-team-list,
.admin-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-tournament,
.admin-team {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
}

.admin-tournament:hover,
.admin-team:hover {
    border-color: rgba(215,255,40,.3);
}

.admin-tournament {
    justify-content: space-between;
}

.admin-tournament small {
    color: #dfff38;
    font-size: 9px;
    letter-spacing: 1px;
}

.admin-tournament h3 {
    margin: 5px 0 0;
}

.admin-tournament-meta {
    display: flex;
    gap: 30px;
}

.admin-tournament-meta span {
    color: rgba(255,255,255,.4);
    font-size: 9px;
    letter-spacing: 1px;
}

.admin-tournament-meta strong {
    display: block;
    color: #fff;
    margin-top: 5px;
}

.admin-team-number {
    width: 30px;
    color: rgba(255,255,255,.3);
}

.admin-team-logo {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(215,255,40,.25);
    border-radius: 7px;
}

.admin-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-team-logo span {
    color: #dfff38;
    font-size: 9px;
}

.admin-team-info {
    flex: 1;
}

.admin-team-info strong {
    display: block;
}

.admin-team-info small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.35);
    letter-spacing: 2px;
}

.admin-team-group {
    min-width: 80px;
    color: #dfff38;
    font-size: 10px;
    letter-spacing: 1px;
}

.admin-team-status {
    color: rgba(255,255,255,.5);
    font-size: 9px;
    letter-spacing: 1px;
}

.admin-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.admin-group {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.admin-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.admin-group-header strong {
    color: #fff;
    font-family: "Arial Black", Arial, sans-serif;
}

.admin-group-header span {
    color: #dfff38;
    font-size: 10px;
}

.admin-group-teams {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-group-teams > div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.admin-group-teams strong {
    font-size: 11px;
}

.admin-group-teams small {
    color: rgba(255,255,255,.35);
    font-size: 9px;
}


/* MOBILE */

@media (max-width: 750px) {

    .admin-container {
        padding: 40px 0;
    }

    .admin-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-tournament {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-tournament-meta {
        width: 100%;
        justify-content: space-between;
    }

    .admin-team {
        gap: 10px;
    }

    .admin-team-status {
        display: none;
    }

    .admin-groups {
        grid-template-columns: 1fr;
    }

}
.tournament-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 20px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.control-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-field label {
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(255,255,255,.45);
}

.control-field input,
.control-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 13px;
    color: #fff;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    outline: none;
}

.control-field input:focus,
.control-field select:focus {
    border-color: #dfff38;
}

#saveTournamentChanges {
    width: fit-content;
    padding: 13px 22px;
}

#tournamentSaveMessage {
    margin: 0;
    color: #dfff38;
    font-size: 10px;
    letter-spacing: 1px;
}

@media (max-width: 700px) {

    .tournament-controls {
        grid-template-columns: 1fr;
    }

}
.registration-closed {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(1);
}
.tournament-poster {
    display: block;
    width: 100%;
    max-width: 1400px;
    height: auto;
    margin: 0 auto 35px;
    border-radius: 12px;
    border: 1px solid rgba(215,255,40,.25);
    box-shadow:
        0 0 30px rgba(215,255,40,.08),
        0 20px 60px rgba(0,0,0,.45);
}

@media (max-width: 700px) {

    .tournament-poster {
        margin-bottom: 25px;
        border-radius: 7px;
    }

}
/* =========================================
   ADMIN REGISTERED TEAMS
========================================= */

.admin-team-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-team-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
    border-radius: 8px;
    transition: .2s ease;
}

.admin-team-card:hover {
    border-color: rgba(220,255,50,.35);
    transform: translateX(3px);
}

.admin-team-number {
    width: 32px;
    font-size: 11px;
    color: rgba(255,255,255,.35);
}

.admin-team-logo,
.admin-team-logo-placeholder {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(220,255,50,.25);
}

.admin-team-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220,255,50,.08);
    color: #dfff38;
    font-weight: 800;
    font-size: 20px;
}

.admin-team-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-team-info h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: .5px;
}

.admin-team-info small,
.admin-team-info span {
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(255,255,255,.45);
}

.admin-team-status {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #dfff38;
    border: 1px solid rgba(220,255,50,.25);
    padding: 7px 10px;
    border-radius: 4px;
}

@media (max-width: 650px) {

    .admin-team-card {
        gap: 10px;
        padding: 12px;
    }

    .admin-team-status {
        display: none;
    }

}
.admin-team-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.admin-registration-status {
    padding: 7px 10px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.admin-registration-status.registered {
    color: #dfff38;
    border-color: rgba(223,255,56,.3);
}

.admin-registration-status.approved {
    color: #6cff9b;
    border-color: rgba(108,255,155,.3);
}

.admin-registration-status.rejected {
    color: #ff6262;
    border-color: rgba(255,98,98,.3);
}

.admin-approve-btn,
.admin-reject-btn {
    border: 1px solid;
    background: transparent;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.admin-approve-btn {
    color: #6cff9b;
    border-color: rgba(108,255,155,.3);
}

.admin-reject-btn {
    color: #ff6262;
    border-color: rgba(255,98,98,.3);
}

.admin-approve-btn:hover {
    background: rgba(108,255,155,.1);
}

.admin-reject-btn:hover {
    background: rgba(255,98,98,.1);
}
.tournament-rules-section {
    margin-top: 70px;
    padding: 35px 0;
}

.tournament-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.tournament-rule-card {
    position: relative;
    display: flex;
    gap: 20px;
    padding: 25px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    overflow: hidden;
    transition: .25s ease;
}

.tournament-rule-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #dfff38;
    box-shadow: 0 0 18px rgba(223,255,56,.45);
}

.tournament-rule-card:hover {
    transform: translateY(-3px);
    border-color: rgba(223,255,56,.3);
    box-shadow:
        0 0 25px rgba(223,255,56,.06);
}

.rule-number {
    min-width: 38px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #dfff38;
    text-shadow:
        0 0 12px rgba(223,255,56,.5);
}

.tournament-rule-card h3 {
    margin: 0 0 10px;
    font-size: 15px;
    letter-spacing: 1.5px;
}

.tournament-rule-card p {
    margin: 0;
    color: rgba(255,255,255,.55);
    font-size: 13px;
    line-height: 1.8;
}

.tournament-important-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 25px;
    padding: 28px 30px;
    border: 1px solid rgba(223,255,56,.22);
    background: rgba(223,255,56,.035);
    border-radius: 10px;
}

.tournament-important-box small {
    color: #dfff38;
    letter-spacing: 2px;
    font-weight: 800;
}

.tournament-important-box h3 {
    margin: 8px 0 0;
    font-size: 18px;
    letter-spacing: 1px;
    text-shadow:
        0 0 15px rgba(223,255,56,.25);
}

.tournament-important-box p {
    max-width: 520px;
    margin: 0;
    color: rgba(255,255,255,.55);
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 700px) {

    .tournament-rules-grid {
        grid-template-columns: 1fr;
    }

    .tournament-important-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .tournament-rule-card {
        padding: 20px;
    }

}
/* =========================================
   DEDICATED LEADERBOARD
========================================= */

.leaderboard-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 70px 30px;
}

.leaderboard-hero {
    position: relative;
    padding: 60px 0 45px;
    text-align: center;
}

.leaderboard-hero small {
    color: #dfff38;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
}

.leaderboard-hero h1 {
    margin: 15px 0;
    font-size: clamp(42px, 7vw, 82px);
    line-height: .95;
    letter-spacing: -2px;
}

.leaderboard-hero h1 span {
    display: block;
    color: #dfff38;
    text-shadow:
        0 0 25px rgba(223,255,56,.25);
}

.leaderboard-hero p {
    max-width: 600px;
    margin: 25px auto;
    color: rgba(255,255,255,.5);
    line-height: 1.8;
}

.leaderboard-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 9px 15px;
    border: 1px solid rgba(223,255,56,.3);
    border-radius: 5px;
    color: #dfff38;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.leaderboard-live span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dfff38;
    box-shadow:
        0 0 12px rgba(223,255,56,.8);
}

.leaderboard-container {
    margin-top: 30px;
}

.leaderboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.leaderboard-header small {
    color: #dfff38;
    font-size: 9px;
    letter-spacing: 2px;
}

.leaderboard-header h2 {
    margin: 7px 0 0;
    font-size: 28px;
}

.leaderboard-updated {
    color: #dfff38;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.leaderboard-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.leaderboard-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.leaderboard-table th {
    padding: 17px 20px;
    text-align: left;
    background: rgba(223,255,56,.04);
    color: rgba(255,255,255,.4);
    font-size: 9px;
    letter-spacing: 1.5px;
}

.leaderboard-table td {
    padding: 17px 20px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.72);
    font-size: 12px;
}

.leaderboard-table tbody tr {
    transition: .2s ease;
}

.leaderboard-table tbody tr:hover {
    background: rgba(223,255,56,.035);
}

.leaderboard-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    color: white;
    font-weight: 900;
}

.rank-first {
    background: rgba(223,255,56,.12);
    color: #dfff38;
    box-shadow:
        0 0 18px rgba(223,255,56,.1);
}

.rank-second {
    color: #ddd;
}

.rank-third {
    color: #c98d62;
}

.leaderboard-team-cell {
    display: flex;
    align-items: center;
    gap: 13px;
}

.leaderboard-team-logo {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 7px;
    object-fit: cover;
    border: 1px solid rgba(223,255,56,.2);
}

.leaderboard-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(223,255,56,.06);
    color: #dfff38;
    font-weight: 900;
    font-size: 17px;
}

.leaderboard-team-cell strong {
    display: block;
    color: white;
    font-size: 13px;
}

.leaderboard-team-cell small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.35);
    font-size: 9px;
    letter-spacing: 1px;
}

.leaderboard-total {
    color: #dfff38;
    font-size: 17px;
    text-shadow:
        0 0 13px rgba(223,255,56,.25);
}

.leaderboard-loading {
    padding: 50px !important;
    text-align: center !important;
    color: rgba(255,255,255,.35) !important;
    letter-spacing: 1.5px;
}

@media (max-width: 700px) {

    .leaderboard-page {
        padding: 40px 15px;
    }

    .leaderboard-hero {
        padding: 40px 0 30px;
    }

    .leaderboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

}
.score-entry-panel {
    padding: 25px;
    margin-top: 20px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.score-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 18px;
}

.score-total-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    padding: 18px 20px;
    border: 1px solid rgba(223,255,56,.2);
    border-radius: 7px;
    background: rgba(223,255,56,.035);
}

.score-total-preview small {
    color: rgba(255,255,255,.45);
    letter-spacing: 1.5px;
}

.score-total-preview strong {
    color: #dfff38;
    font-size: 26px;
    text-shadow: 0 0 15px rgba(223,255,56,.3);
}

#scoreSaveMessage {
    margin-top: 12px;
    color: #dfff38;
    font-size: 11px;
}

@media (max-width: 800px) {

    .score-entry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 500px) {

    .score-entry-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   ANNOUNCEMENT ADMIN
========================================= */

.announcement-admin-panel {
    padding: 25px;
    margin-top: 20px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.announcement-admin-panel textarea {
    width: 100%;
    resize: vertical;
    min-height: 120px;
}

.announcement-admin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 18px;
}

#announcementMessageStatus {
    margin-top: 12px;
    color: #dfff38;
    font-size: 11px;
}

.admin-announcement-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.admin-announcement-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(255,255,255,.02);
}

.admin-announcement-card small {
    color: #dfff38;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.admin-announcement-card h3 {
    margin: 7px 0;
    color: white;
    font-size: 16px;
}

.admin-announcement-card p {
    margin: 0 0 8px;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    line-height: 1.6;
}

.admin-announcement-card span {
    font-size: 9px;
    color: #dfff38;
    letter-spacing: 1px;
}

@media (max-width: 600px) {

    .announcement-admin-row {
        grid-template-columns: 1fr;
    }

    .admin-announcement-card {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================
   TOURNAMENT RESULTS
========================================= */

#adminResults {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}


/* RESULT CARD */

#adminResults .admin-team-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: linear-gradient(
        135deg,
        #111,
        #181818
    );
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid #b7ff00;
    border-radius: 10px;
    transition: .25s ease;
    overflow: hidden;
}


#adminResults .admin-team-card:hover {
    transform: translateX(5px);
    border-color: rgba(183,255,0,.45);
}


/* POSITION */

#adminResults .admin-team-card h3 {
    margin: 0;
    min-width: 250px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}


/* PRIZE */

#adminResults .admin-team-card p {
    margin: 0;
    margin-left: auto;
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}


#adminResults .admin-team-card p::first-letter {
    color: #b7ff00;
}


/* TOP 3 */

#adminResults .admin-team-card:nth-child(1) {
    border-left-color: #ffd700;
    background:
        linear-gradient(
            135deg,
            rgba(255,215,0,.10),
            #151515
        );
}


#adminResults .admin-team-card:nth-child(2) {
    border-left-color: #c0c0c0;
    background:
        linear-gradient(
            135deg,
            rgba(192,192,192,.08),
            #151515
        );
}


#adminResults .admin-team-card:nth-child(3) {
    border-left-color: #cd7f32;
    background:
        linear-gradient(
            135deg,
            rgba(205,127,50,.08),
            #151515
        );
}


/* POSITION NUMBER */

#adminResults .admin-team-card h3::first-line {
    font-weight: 900;
}


/* MOBILE */

@media (max-width: 700px) {

    #adminResults .admin-team-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px;
    }


    #adminResults .admin-team-card h3 {
        min-width: auto;
        font-size: 15px;
    }


    #adminResults .admin-team-card p {
        margin-left: 0;
    }

}
/* =========================================
   MARKHOR ESPORTS — MVP MANAGEMENT
   PREMIUM ESPORTS UI
========================================= */

.admin-section:has(#mvpLeaderboard) {
    position: relative;
    overflow: hidden;
}

.admin-section:has(#mvpLeaderboard)::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -180px;
    right: -100px;
    background: rgba(190, 255, 0, 0.08);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
}


/* =========================================
   MVP HEADING
========================================= */

.admin-section:has(#mvpLeaderboard) h2 {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.admin-section:has(#mvpLeaderboard)
.admin-section-heading small {
    color: #bfff00;
    font-weight: 800;
    letter-spacing: 3px;
}


/* =========================================
   LIVE MVP BADGE
========================================= */

.admin-section:has(#mvpLeaderboard) .admin-badge {
    position: relative;
    padding: 9px 16px;
    border: 1px solid rgba(190, 255, 0, .4);
    color: #bfff00;
    background: rgba(190, 255, 0, .07);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    box-shadow: 0 0 25px rgba(190, 255, 0, .12);
}

.admin-section:has(#mvpLeaderboard)
.admin-badge::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #bfff00;
    box-shadow: 0 0 12px #bfff00;
    animation: mvpPulse 1.5s infinite;
}

@keyframes mvpPulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(.7);
    }
}


/* =========================================
   MVP INPUT PANEL
========================================= */

.admin-section:has(#mvpLeaderboard)
.score-entry-panel {
    position: relative;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    padding: 25px;
    box-shadow:
        0 15px 50px rgba(0,0,0,.25),
        inset 0 1px rgba(255,255,255,.04);
}

.admin-section:has(#mvpLeaderboard)
.control-field label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    color: rgba(255,255,255,.55);
}

.admin-section:has(#mvpLeaderboard)
.control-field input {
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.admin-section:has(#mvpLeaderboard)
.control-field input:focus {
    border-color: #bfff00;
    box-shadow:
        0 0 0 3px rgba(191,255,0,.08),
        0 0 25px rgba(191,255,0,.12);
    transform: translateY(-1px);
}


/* =========================================
   ADD MATCH BUTTON
========================================= */

#addMvpStats {
    position: relative;
    margin-top: 18px;
    min-height: 48px;
    padding: 0 25px;
    border: 0;
    border-radius: 10px;
    background: #bfff00;
    color: #080808;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#addMvpStats:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 35px rgba(191,255,0,.25);
}

#addMvpStats:active {
    transform: translateY(0);
}


/* =========================================
   SAVE MESSAGE
========================================= */

#mvpSaveMessage {
    margin-top: 14px;
    min-height: 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #bfff00;
}


/* =========================================
   MVP LEADERBOARD
========================================= */

#mvpLeaderboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}


/* =========================================
   PLAYER ROW
========================================= */

#mvpLeaderboard .admin-team-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 85px;
    padding: 15px 18px;
    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

#mvpLeaderboard .admin-team-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: rgba(255,255,255,.12);
}

#mvpLeaderboard .admin-team-card:hover {
    transform: translateX(5px);
    border-color: rgba(191,255,0,.35);
    box-shadow:
        0 12px 35px rgba(0,0,0,.25),
        0 0 25px rgba(191,255,0,.05);
}


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

#mvpLeaderboard .admin-team-number {
    min-width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255,255,255,.05);

    font-size: 18px;
    font-weight: 950;
    color: rgba(255,255,255,.65);
}


/* FIRST PLACE
========================================= */

#mvpLeaderboard .admin-team-card:first-child {
    border-color: rgba(191,255,0,.45);

    background:
        linear-gradient(
            100deg,
            rgba(191,255,0,.10),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 0 35px rgba(191,255,0,.07);
}

#mvpLeaderboard .admin-team-card:first-child::after {
    background: #bfff00;
    box-shadow: 0 0 15px #bfff00;
}

#mvpLeaderboard .admin-team-card:first-child
.admin-team-number {
    color: #080808;
    background: #bfff00;
    box-shadow:
        0 0 22px rgba(191,255,0,.25);
}


/* =========================================
   PLAYER INFORMATION
========================================= */

#mvpLeaderboard .admin-team-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 15px;
    flex: 1;
}

#mvpLeaderboard .admin-team-info h3 {
    width: 100%;
    margin: 0;

    font-size: 17px;
    font-weight: 950;
    letter-spacing: .5px;
    text-transform: uppercase;
}

#mvpLeaderboard .admin-team-info small {
    color: rgba(255,255,255,.55);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#mvpLeaderboard .admin-team-info span {
    padding: 6px 9px;

    border-radius: 6px;

    background: rgba(255,255,255,.045);

    color: rgba(255,255,255,.7);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .6px;
}

#mvpLeaderboard .admin-team-info span:nth-last-child(2) {
    color: #bfff00;
}

#mvpLeaderboard .admin-team-info span:last-child {
    color: #ffb84d;
}


/* =========================================
   CLEAR BUTTON
========================================= */

#clearMvpLeaderboard {
    margin-top: 20px;

    min-height: 46px;
    padding: 0 22px;

    border-radius: 9px;

    border: 1px solid rgba(255,80,80,.3);

    color: #ff7777;

    background: rgba(255,70,70,.05);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        .2s ease;
}

#clearMvpLeaderboard:hover {
    background: rgba(255,70,70,.1);
    border-color: rgba(255,80,80,.55);

    box-shadow:
        0 0 25px rgba(255,70,70,.08);

    transform: translateY(-1px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .admin-section:has(#mvpLeaderboard) h2 {
        font-size: 23px;
    }

    .admin-section:has(#mvpLeaderboard)
    .score-entry-panel {
        padding: 18px;
    }

    #mvpLeaderboard .admin-team-card {
        gap: 12px;
        padding: 13px;
    }

    #mvpLeaderboard .admin-team-number {
        min-width: 36px;
        height: 36px;
        font-size: 15px;
    }

    #mvpLeaderboard .admin-team-info h3 {
        font-size: 14px;
    }

}
/* =========================================
   MATCH CENTER
========================================= */

#matches {
    position: relative;
}

#matches > h2 {
    margin-bottom: 35px;
}

#publicMatches.matches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
}


/* MATCH CARD */

.match-card {
    position: relative;
    overflow: hidden;
    min-height: 380px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 25, 15, .98),
            rgba(5, 8, 5, .98)
        );

    border: 1px solid rgba(190, 255, 0, .18);

    border-radius: 14px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .45),
        inset 0 0 30px rgba(190, 255, 0, .025);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.match-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(190, 255, 0, .65);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .6),
        0 0 35px rgba(190, 255, 0, .10);
}


/* MAP IMAGE */

.match-map {
    position: relative;

    width: 100%;
    height: 190px;

    overflow: hidden;

    background: #101410;
}


.match-map::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 8, 5, .95),
            transparent 65%
        );

    pointer-events: none;
}


.match-map img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .6s ease,
        filter .6s ease;
}


.match-card:hover .match-map img {
    transform: scale(1.08);

    filter:
        brightness(1.08)
        saturate(1.08);
}


/* NO IMAGE */

.no-map-image {
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 28px;
    font-weight: 900;

    letter-spacing: 3px;

    color: rgba(190, 255, 0, .7);
}


/* MATCH INFO */

.match-info {
    position: relative;

    padding: 22px 22px 18px;
}


.match-info > small {
    color: #baff00;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.match-info h3 {
    margin: 7px 0 4px;

    font-size: 28px;

    font-weight: 900;

    letter-spacing: 1px;
}


.match-info > span {
    display: inline-block;

    margin-top: 3px;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    opacity: .55;
}


.match-info p {
    margin-top: 15px;

    line-height: 1.7;

    font-size: 14px;

    font-weight: 700;

    opacity: .85;
}


/* STATUS */

.match-status {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 5;

    padding: 8px 12px;

    border-radius: 5px;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

    backdrop-filter: blur(8px);
}


/* UPCOMING */

.match-status.upcoming {
    color: #dfff9a;

    background:
        rgba(100, 130, 30, .35);

    border:
        1px solid rgba(190, 255, 0, .35);
}


/* LIVE */

.match-status.live {
    color: #fff;

    background: rgba(220, 30, 30, .75);

    border: 1px solid rgba(255, 80, 80, .8);

    animation: matchLivePulse 1.5s infinite;
}


.match-status.live::before {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 6px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 10px #fff;
}


/* COMPLETED */

.match-status.completed {
    color: #ddd;

    background:
        rgba(80, 80, 80, .55);

    border:
        1px solid rgba(255, 255, 255, .18);
}


/* LOADING */

.match-loading {
    width: 100%;

    padding: 50px 20px;

    text-align: center;

    font-size: 13px;

    letter-spacing: 2px;

    opacity: .55;
}


/* LIVE ANIMATION */

@keyframes matchLivePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 rgba(255, 60, 60, 0);
    }

    50% {
        box-shadow:
            0 0 22px rgba(255, 60, 60, .35);
    }
}


/* MOBILE */

@media (max-width: 600px) {

    #publicMatches.matches {
        grid-template-columns: 1fr;
    }

    .match-card {
        min-height: 360px;
    }

    .match-map {
        height: 175px;
    }

    .match-info h3 {
        font-size: 24px;
    }

}