:root{
  --k-bg:#06101b;--k-panel:#101a29;--k-panel2:#0b1522;--k-line:#26384f;
  --k-text:#f5f8ff;--k-muted:#8d9db3;--k-cyan:#27d8ff;--k-blue:#3989ff;
  --k-gold:#ffbf16;--k-orange:#ff7a17;--k-purple:#8c5cff;--k-pink:#ff37a1;
  --k-green:#26f19b;--k-red:#ff5f63;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Rajdhani:wght@600;700&display=swap');

*{box-sizing:border-box}
html{background:var(--k-bg)!important}
body{
  margin:0!important;color:var(--k-text)!important;font-family:Inter,Arial,sans-serif!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(39,216,255,.12),transparent 30%),
    radial-gradient(circle at 88% 7%,rgba(140,92,255,.16),transparent 32%),
    linear-gradient(180deg,#06101a,#07111e 60%,#050c14)!important;
  min-height:100vh;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
             linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
}
a{color:inherit;text-decoration:none}
.topbar{
  min-height:78px!important;padding:0 28px!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;background:#050a10!important;border-bottom:1px solid rgba(255,191,22,.65)!important;
  position:sticky!important;top:0!important;z-index:50!important;box-shadow:0 10px 28px rgba(0,0,0,.25)!important;
}
.brand{display:flex!important;align-items:center!important;gap:10px!important;font:800 29px Rajdhani,sans-serif!important}
.brand-mark{color:var(--k-gold)!important;font-size:30px!important}
.topbar nav{display:flex!important;align-items:center!important;gap:0!important}
.topbar nav a{
  padding:29px 20px!important;color:#d5dce8!important;font:700 13px Rajdhani,sans-serif!important;
  border-radius:0!important;border-bottom:3px solid transparent!important
}
.topbar nav a:hover{background:rgba(255,255,255,.04)!important;color:#fff!important}
.topbar nav a.active{
  color:#fff!important;background:linear-gradient(180deg,rgba(255,191,22,.10),rgba(255,191,22,.02))!important;
  border-bottom-color:var(--k-gold)!important;
}
.wrap{width:min(1480px,calc(100% - 34px))!important;margin:0 auto!important}
.hero{
  margin-top:22px!important;padding:38px!important;min-height:220px!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:30px!important;border:1px solid #28435e!important;border-radius:18px!important;
  background:
    linear-gradient(90deg,rgba(5,13,23,.90),rgba(8,17,31,.72)),
    url('/assets/img/kings4fun-hero.jpg') center 45%/cover!important;
  box-shadow:0 24px 60px rgba(0,0,0,.30)!important;overflow:hidden!important;
}
.eyebrow{color:var(--k-cyan)!important;font-size:9px!important;font-weight:800!important;letter-spacing:2.4px!important}
.hero h1{font:700 clamp(42px,5vw,72px)/.9 Rajdhani,sans-serif!important;margin:7px 0 10px!important;color:#fff!important}
.hero h1 strong{color:var(--k-gold)!important}
.hero p{color:#a9b6c8!important;font-size:13px!important}
.search{display:flex!important;gap:8px!important}
.search input,.search input[type=text],input[type=text],input[type=search]{
  background:#0c1725!important;color:#fff!important;border:1px solid #2a415a!important;border-radius:9px!important;
  min-height:42px!important;padding:0 13px!important;outline:none!important
}
.search input:focus,input[type=text]:focus,input[type=search]:focus{border-color:var(--k-cyan)!important;box-shadow:0 0 0 3px rgba(39,216,255,.08)!important}
.search button,.hero button,button{
  background:linear-gradient(135deg,var(--k-gold),var(--k-orange))!important;color:#111722!important;
  border:0!important;border-radius:9px!important;padding:0 18px!important;font:800 12px Rajdhani,sans-serif!important;
  min-height:42px!important;cursor:pointer!important
}
.stats-strip{
  margin:14px 0 18px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important;
  background:transparent!important
}
.stats-strip>div{
  padding:17px!important;border:1px solid #273b52!important;border-radius:12px!important;
  background:linear-gradient(180deg,#101b2b,#0a1421)!important
}
.stats-strip span{color:#8090a5!important;font-size:8px!important;letter-spacing:1.2px!important}
.stats-strip strong{display:block!important;margin-top:6px!important;font:700 22px Rajdhani,sans-serif!important;color:var(--k-cyan)!important}

.period-grid,.two-col{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
.period-card,.panel,.profile-hero,.metric,.score-card{
  background:linear-gradient(180deg,rgba(16,26,41,.97),rgba(8,16,27,.98))!important;
  border:1px solid #273d55!important;border-radius:14px!important;box-shadow:0 16px 36px rgba(0,0,0,.18)!important
}
.period-card,.panel{padding:18px!important}
.period-title,.panel-head{display:flex!important;justify-content:space-between!important;align-items:center!important;border-bottom:1px solid #24374d!important;padding-bottom:12px!important;margin-bottom:10px!important}
.period-title h2,.panel-head h2{font:700 21px Rajdhani,sans-serif!important;margin:4px 0 0!important}
.period-badge{background:rgba(255,191,22,.10)!important;color:var(--k-gold)!important;border:1px solid rgba(255,191,22,.35)!important;border-radius:8px!important;padding:8px!important}
.period-player,.table-row,.rank-row{
  border-bottom:1px solid rgba(255,255,255,.05)!important;background:transparent!important
}
.period-player:hover,.table-row:hover,.rank-row:hover{background:rgba(39,216,255,.045)!important}
.period-player img,.avatar-fallback{border-radius:9px!important}
.period-pos{color:var(--k-gold)!important}
.rank-table,.ranking-table,table{
  width:100%!important;background:linear-gradient(180deg,#101b2b,#0a1421)!important;
  border:1px solid #273d55!important;border-radius:14px!important;overflow:hidden!important
}
table th{background:#0d1826!important;color:#8697ac!important;font:700 10px Rajdhani,sans-serif!important}
table td{border-color:rgba(255,255,255,.05)!important;color:#dce5f2!important}
.pagination a,.pagination span{
  background:#0d1826!important;border:1px solid #273d55!important;color:#b9c5d5!important;border-radius:7px!important
}
.pagination .active,.pagination a:hover{border-color:var(--k-cyan)!important;color:var(--k-cyan)!important}

.back{display:inline-block!important;margin:22px 0 12px!important;color:var(--k-cyan)!important;font:700 11px Rajdhani,sans-serif!important}
.profile-hero{padding:24px!important;display:flex!important;justify-content:space-between!important;align-items:center!important}
.profile-main{display:flex!important;gap:18px!important;align-items:center!important}
.profile-avatar{width:92px!important;height:92px!important;border-radius:18px!important;border:2px solid var(--k-cyan)!important;box-shadow:0 0 20px rgba(39,216,255,.16)!important}
.profile-main h1{font:700 38px Rajdhani,sans-serif!important;margin:3px 0!important}
.profile-main p{color:#8ea0b7!important}
.steam-link{display:inline-block!important;margin-top:8px!important;color:var(--k-cyan)!important;font-size:9px!important}
.score-card{padding:18px 28px!important;text-align:center!important}
.score-card span{color:#7e90a7!important;font-size:8px!important}.score-card strong{display:block!important;color:var(--k-gold)!important;font:700 34px Rajdhani,sans-serif!important}
.metric-grid{display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:8px!important;margin:12px 0!important}
.metric{padding:14px 10px!important;text-align:center!important}
.metric span{font-size:7px!important;color:#7f90a6!important}.metric strong{display:block!important;margin-top:5px!important;font:700 18px Rajdhani,sans-serif!important;color:var(--k-cyan)!important}
.detail-list>div{padding:10px 3px!important;border-bottom:1px solid rgba(255,255,255,.05)!important}
.detail-list span{color:#aab7c8!important}.detail-list strong{color:#f0f5fb!important}
.history-bars{background:#0a1421!important;border:1px solid #22364c!important;border-radius:10px!important;padding:15px!important}
.history-item .bar{background:linear-gradient(180deg,var(--k-cyan),var(--k-blue))!important;border-radius:4px 4px 0 0!important}

.error-box{background:rgba(255,95,99,.08)!important;border:1px solid rgba(255,95,99,.35)!important;color:#ff9095!important;border-radius:10px!important}
@media(max-width:950px){
 .topbar nav{display:none!important}.hero{flex-direction:column!important;align-items:flex-start!important}
 .stats-strip{grid-template-columns:repeat(2,1fr)!important}.period-grid,.two-col{grid-template-columns:1fr!important}
 .metric-grid{grid-template-columns:repeat(4,1fr)!important}
}
@media(max-width:560px){
 .wrap{width:calc(100% - 18px)!important}.topbar{padding:0 14px!important}.hero{padding:24px!important}
 .stats-strip{grid-template-columns:1fr 1fr!important}.metric-grid{grid-template-columns:repeat(2,1fr)!important}
 .profile-hero{align-items:flex-start!important;gap:16px!important}.profile-main{align-items:flex-start!important}.profile-avatar{width:72px!important;height:72px!important}
}


/* ==========================================================
   KINGS - RANKING DE ARMAS
   ========================================================== */

.rank-mode-nav{
    display:flex;
    gap:8px;
    margin:14px 0;
}

.rank-mode-nav a{
    min-width:190px;
    padding:12px 18px;

    text-align:center;
    text-decoration:none;

    border:1px solid #2a3d53;
    border-radius:8px;

    background:#0a1421;
    color:#8fa2b9;

    font-weight:800;
    font-size:10px;
    letter-spacing:.7px;

    transition:.2s ease;
}

.rank-mode-nav a:hover{
    border-color:#ffbd20;
    color:#fff;
}

.rank-mode-nav a.active{
    color:#07101a;

    border-color:#ffc527;

    background:
        linear-gradient(
            135deg,
            #ffda3d,
            #ffa515
        );

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


/* SELETOR */

.weapon-selector-panel{
    margin-top:12px;
    padding:18px;

    border:1px solid #283b50;
    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            #0c1725,
            #08121e
        );
}

.weapon-selector-title{
    margin-bottom:14px;
}

.weapon-selector-title h2{
    margin:3px 0 0;
    font-size:21px;
}

.weapon-selector{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(135px,1fr));

    gap:8px;
}

.weapon-select-card{
    min-height:78px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:11px;

    text-decoration:none;

    border:1px solid #263a50;
    border-radius:8px;

    background:#0a1522;

    transition:.18s ease;
}

.weapon-select-card:hover{
    transform:translateY(-2px);

    border-color:#ffbd20;

    background:#0e1c2c;
}

.weapon-select-card.active{
    border-color:#ffc529;

    background:
        linear-gradient(
            145deg,
            rgba(255,190,25,.18),
            #0c1826
        );

    box-shadow:
        inset 0 0 20px rgba(255,185,20,.05),
        0 0 16px rgba(255,185,20,.12);
}

.weapon-select-card strong{
    color:#fff;

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

.weapon-select-card span{
    margin-top:6px;

    color:#ffbf20;

    font-size:9px;
    font-weight:800;
}

.weapon-select-card small{
    margin-top:3px;

    color:#71869e;

    font-size:7px;
}


/* RESUMO */

.weapon-rank-summary{
    display:grid;

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

    margin:12px 0;

    overflow:hidden;

    border:1px solid #293c51;
    border-radius:9px;
}

.weapon-rank-summary div{
    padding:13px 16px;

    background:#0a1522;

    border-right:1px solid #293c51;
}

.weapon-rank-summary div:last-child{
    border-right:0;
}

.weapon-rank-summary span{
    display:block;

    color:#74889f;

    font-size:7px;
    font-weight:800;

    letter-spacing:.8px;
}

.weapon-rank-summary strong{
    display:block;

    margin-top:4px;

    color:#fff;

    font-size:16px;
}


/* TOP 10 */

.weapon-top-list{
    padding:8px 14px 18px;
}

.weapon-player-row{
    min-height:66px;

    display:grid;

    grid-template-columns:
        42px 46px minmax(0,1fr) 90px;

    gap:11px;

    align-items:center;

    padding:8px 12px;

    text-decoration:none;

    border-bottom:1px solid #1e3043;

    transition:.18s ease;
}

.weapon-player-row:hover{
    background:#0d1a29;
}

.weapon-position{
    color:#71869d;

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

.weapon-player-row.rank-1 .weapon-position{
    color:#ffd32a;
}

.weapon-player-row.rank-2 .weapon-position{
    color:#d4dde7;
}

.weapon-player-row.rank-3 .weapon-position{
    color:#d78c48;
}

.weapon-avatar{
    width:44px;
    height:44px;

    border-radius:50%;

    object-fit:cover;

    border:1px solid #334b64;
}

.weapon-avatar-fallback{
    display:flex;

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

    background:#132237;

    color:#fff;

    font-weight:900;
}

.weapon-player-name{
    min-width:0;
}

.weapon-player-name strong{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#fff;

    font-size:13px;
}

.weapon-player-name small{
    display:block;

    margin-top:5px;

    color:#8295aa;

    font-size:8px;
}

.weapon-kills{
    text-align:right;
}

.weapon-kills strong{
    display:block;

    color:#ffbf20;

    font-size:18px;
    font-weight:900;
}

.weapon-kills small{
    display:block;

    margin-top:2px;

    color:#75889e;

    font-size:7px;
    font-weight:800;
}


/* RESPONSIVO */

@media(max-width:800px){

    .rank-mode-nav{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .rank-mode-nav a{
        min-width:0;
    }

    .weapon-rank-summary{
        grid-template-columns:1fr 1fr;
    }

    .weapon-rank-summary div:nth-child(2){
        border-right:0;
    }

    .weapon-rank-summary div:nth-child(-n+2){
        border-bottom:1px solid #293c51;
    }

    .weapon-player-row{
        grid-template-columns:
            32px 40px minmax(0,1fr) 65px;

        gap:7px;
    }

    .weapon-avatar{
        width:38px;
        height:38px;
    }

}


/* ==========================================================
   KINGS - RANKING DE ARMAS WIDE
   Aproveitar melhor monitores grandes
   ========================================================== */

@media (min-width:1200px){

    body:has(.weapon-rank-hero) .wrap{
        width:94% !important;
        max-width:1650px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* Mais armas por linha */
    body:has(.weapon-rank-hero) .weapon-selector{
        grid-template-columns:
            repeat(auto-fit, minmax(155px, 1fr)) !important;

        gap:10px !important;
    }

    body:has(.weapon-rank-hero) .weapon-select-card{
        min-height:88px !important;
        padding:14px 16px !important;
    }

    body:has(.weapon-rank-hero) .weapon-select-card strong{
        font-size:13px !important;
    }

    body:has(.weapon-rank-hero) .weapon-select-card span{
        font-size:10px !important;
    }

    body:has(.weapon-rank-hero) .weapon-select-card small{
        font-size:8px !important;
    }

    /* Top 10 também aproveita a largura */
    body:has(.weapon-rank-hero) .weapon-player-row{
        grid-template-columns:
            55px 54px minmax(0,1fr) 130px !important;

        min-height:72px !important;
        padding-left:20px !important;
        padding-right:24px !important;
    }

    body:has(.weapon-rank-hero) .weapon-avatar{
        width:48px !important;
        height:48px !important;
    }

    body:has(.weapon-rank-hero) .weapon-player-name strong{
        font-size:14px !important;
    }

    body:has(.weapon-rank-hero) .weapon-player-name small{
        font-size:9px !important;
    }

    body:has(.weapon-rank-hero) .weapon-kills strong{
        font-size:20px !important;
    }
}


/* Ultra-wide */
@media (min-width:1700px){

    body:has(.weapon-rank-hero) .wrap{
        max-width:1750px !important;
    }

    body:has(.weapon-rank-hero) .weapon-selector{
        grid-template-columns:
            repeat(auto-fit, minmax(170px, 1fr)) !important;
    }
}


/* ==========================================================
   KINGS - IMAGENS NOS CARDS DAS ARMAS
   ========================================================== */

.weapon-select-card{
    min-height:150px !important;
    align-items:center !important;
    text-align:center !important;
    justify-content:flex-start !important;
    padding:14px 12px !important;
}

.weapon-card-image{
    width:100%;
    height:76px;

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

    margin-bottom:8px;
}

.weapon-card-image img{
    display:block;

    max-width:135px;
    width:92%;
    max-height:72px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 4px 8px rgba(0,0,0,.5));

    transition:.2s ease;
}

.weapon-select-card:hover .weapon-card-image img{
    transform:scale(1.08);
}

.weapon-select-card.active .weapon-card-image img{
    filter:
        drop-shadow(0 0 9px rgba(255,190,30,.28))
        drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

.weapon-select-card strong{
    display:block !important;
    width:100% !important;

    margin-top:2px !important;

    font-size:13px !important;
    line-height:1.1 !important;
}

.weapon-select-card .weapon-card-kills{
    display:block !important;

    margin-top:7px !important;

    color:#ffbf20 !important;

    font-size:10px !important;
    font-weight:900 !important;
}

.weapon-select-card small{
    display:block !important;

    margin-top:4px !important;

    font-size:8px !important;
}


/* desktop grande */
@media (min-width:1200px){

    body:has(.weapon-rank-hero) .weapon-selector{
        grid-template-columns:
            repeat(auto-fit,minmax(175px,1fr)) !important;
    }

    body:has(.weapon-rank-hero) .weapon-select-card{
        min-height:165px !important;
    }

    body:has(.weapon-rank-hero) .weapon-card-image{
        height:88px !important;
    }

    body:has(.weapon-rank-hero) .weapon-card-image img{
        max-width:155px !important;
        max-height:82px !important;
    }
}


/* ==========================================================
   KINGS - IMAGENS DOS CARDS DE ARMAS
   ========================================================== */

.weapon-select-card{
    min-height:165px !important;
    padding:12px 12px 14px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    text-align:center !important;
}

.weapon-card-image{
    width:100% !important;
    height:90px !important;

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

    margin-bottom:7px !important;
}

.weapon-card-image img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:155px !important;
    max-height:82px !important;

    object-fit:contain !important;

    filter:
        drop-shadow(0 5px 9px rgba(0,0,0,.55));

    transition:
        transform .2s ease,
        filter .2s ease;
}

.weapon-select-card:hover .weapon-card-image img{
    transform:scale(1.08);
}

.weapon-select-card.active .weapon-card-image img{
    filter:
        drop-shadow(0 0 10px rgba(255,190,25,.32))
        drop-shadow(0 5px 9px rgba(0,0,0,.55));
}

.weapon-select-card > strong{
    width:100% !important;

    margin-top:0 !important;

    font-size:13px !important;
    line-height:1.1 !important;
}

.weapon-select-card .weapon-card-kills{
    margin-top:7px !important;

    color:#ffbf20 !important;

    font-size:10px !important;
    font-weight:900 !important;
}

.weapon-select-card > small{
    margin-top:4px !important;
    font-size:8px !important;
}

@media (min-width:1200px){

    body:has(.weapon-rank-hero) .weapon-selector{
        grid-template-columns:
            repeat(auto-fit,minmax(180px,1fr)) !important;
    }

}