.live-loadout{
    position:fixed;
    top:92px;
    bottom:18px;
    width:300px;
    z-index:24;
    display:flex;
    flex-direction:column;
    border:1px solid #2b425b;
    border-radius:14px;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(11,22,36,.98),rgba(5,12,21,.99));
    box-shadow:0 24px 60px rgba(0,0,0,.38);
}

.live-loadout[data-team="2"]{
    left:22px;
    border-color:rgba(255,191,22,.38);
    --team:#ffbf16;
}

.live-loadout[data-team="3"]{
    right:22px;
    border-color:rgba(39,216,255,.40);
    --team:#27d8ff;
}

.live-loadout__head{
    flex:0 0 auto;
    padding:13px 15px 10px;
    border-bottom:1px solid #25394f;
}

.live-loadout__head small{
    display:block;
    color:#7e91a8;
    font-size:7px;
    letter-spacing:1.4px;
    font-weight:800;
}

.live-loadout__head strong{
    display:block;
    margin-top:2px;
    color:var(--team);
    font:700 19px Rajdhani,Inter,sans-serif;
}

/* AGENTE */
.live-loadout__stage{
    position:relative;
    flex:1 1 310px;
    min-height:245px;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 40%,rgba(39,216,255,.09),transparent 48%),
      linear-gradient(180deg,#0a1421,#07101b);
}

.live-loadout[data-team="2"] .live-loadout__stage{
    background:
      radial-gradient(circle at 50% 40%,rgba(255,191,22,.08),transparent 48%),
      linear-gradient(180deg,#0a1421,#07101b);
}

.live-agent{
    position:absolute;
    z-index:2;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:112%;
    height:105%;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 15px 18px rgba(0,0,0,.65));
}

.live-agent:not([src]),
.live-agent[src=""]{
    display:none;
}

.live-agent-empty{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#53677d;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
}

/* INVENTÁRIO */
.live-loadout__items{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:8px;
    border-top:1px solid #25394f;
    background:rgba(5,12,21,.94);
}

.live-slot{
    min-width:0;
    min-height:78px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:5px;
    text-align:center;
    border:1px solid #273b51;
    border-radius:8px;
    background:#0b1624;
    transition:.2s ease;
}

.live-slot:hover{
    border-color:var(--team);
    background:#0d1b2b;
}

.live-slot img{
    display:block;
    width:100%;
    height:45px;
    object-fit:contain;
    margin-bottom:3px;
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.55));
}

.live-slot img:not([src]),
.live-slot img[src=""]{
    display:none;
}

.live-slot small{
    display:block;
    color:var(--team);
    font-size:7px;
    font-weight:900;
    letter-spacing:.7px;
}

.live-slot strong{
    display:block;
    width:100%;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#edf4ff;
    font-size:8px;
    line-height:1.15;
}

.live-slot-special{
    border-color:rgba(255,255,255,.14);
}

.live-loadout__foot{
    flex:0 0 auto;
    padding:7px 8px 8px;
    text-align:center;
    color:#75879e;
    font-size:7px;
    border-top:1px solid #24384d;
}

.live-loadout__flash{
    animation:kingsLoadoutFlash .35s ease;
}

@keyframes kingsLoadoutFlash{
    0%{box-shadow:0 0 0 transparent}
    50%{box-shadow:0 0 28px rgba(39,216,255,.30)}
    100%{box-shadow:0 0 0 transparent}
}

/* margem entre laterais e conteúdo */
@media (min-width:1500px){
    body.kings-live-loadouts .hero,
    body.kings-live-loadouts .tabs,
    body.kings-live-loadouts .three-col,
    body.kings-live-loadouts .two-col,
    body.kings-live-loadouts .catalog,
    body.kings-live-loadouts .info-row{
        width:min(1280px,calc(100% - 700px))!important;
    }
}

@media (max-width:1499px){
    .live-loadout{display:none!important}
}

/* ==========================================================
   KINGS LOADOUT V3 - MAIS ESPAÇO PARA EQUIPAMENTOS
   ========================================================== */

.live-loadout{
    top:92px !important;
    bottom:18px !important;
    width:300px !important;
}

/* AGENTE: área menor */
.live-loadout__stage{
    flex:0 0 245px !important;
    height:245px !important;
    min-height:245px !important;
}

/* Agente maior e mais para cima */
.live-agent{
    width:138% !important;
    height:135% !important;
    bottom:8px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
}

/* EQUIPAMENTOS: passam a ocupar todo o espaço restante */
.live-loadout__items{
    flex:1 1 auto !important;

    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;

    gap:8px !important;
    padding:9px !important;

    min-height:0 !important;
}

/* Cada caixa fica maior */
.live-slot{
    min-height:0 !important;
    padding:7px 6px !important;
    border-radius:9px !important;
}

/* Imagem da arma/faca/luva bem maior */
.live-slot img{
    width:100% !important;
    height:72px !important;
    max-height:72px !important;
    object-fit:contain !important;
    margin:0 0 5px !important;
}

/* Nome da categoria */
.live-slot small{
    font-size:8px !important;
    line-height:1.1 !important;
}

/* Nome da skin */
.live-slot strong{
    font-size:8px !important;
    line-height:1.15 !important;
    margin-top:3px !important;
}

/* Rodapé menor para não desperdiçar espaço */
.live-loadout__foot{
    padding:5px 7px !important;
    font-size:6px !important;
}


/* ==========================================================
   KINGS LOADOUT V4 - AJUSTE FINAL DE PROPORCAO / MARGENS
   ========================================================== */

/* Painéis com a mesma margem dos dois lados */
.live-loadout[data-team="2"]{
    left:45px !important;
}

.live-loadout[data-team="3"]{
    right:45px !important;
}

/* Meio-termo entre o tamanho antigo e o V3 */
.live-loadout__stage{
    flex:0 0 275px !important;
    height:275px !important;
    min-height:275px !important;
}

/* Agente grande, mas sem exagero */
.live-agent{
    width:130% !important;
    height:125% !important;
    bottom:5px !important;
    object-fit:contain !important;
    object-position:center bottom !important;
}

/* Equipamentos continuam maiores que antes */
.live-loadout__items{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:8px !important;
}

/* Imagens um pouco menores que no V3 */
.live-slot img{
    width:100% !important;
    height:66px !important;
    max-height:66px !important;
    object-fit:contain !important;
    margin:0 0 4px !important;
}


/* ==========================================================
   KINGS LOADOUT V5 - DISTRIBUICAO HORIZONTAL SIMETRICA
   ========================================================== */

@media (min-width:1500px){

    /* Painel TR */
    .live-loadout[data-team="2"]{
        left:32px !important;
        right:auto !important;
    }

    /* Painel CT */
    .live-loadout[data-team="3"]{
        right:32px !important;
        left:auto !important;
    }

    /*
       Conteúdo central:
       300px painel
       32px margem externa
       48px espaço entre painel e conteúdo

       380px reservados de cada lado.
    */
    body.kings-live-loadouts .hero,
    body.kings-live-loadouts .tabs,
    body.kings-live-loadouts .three-col,
    body.kings-live-loadouts .two-col,
    body.kings-live-loadouts .catalog,
    body.kings-live-loadouts .info-row{
        width:calc(100% - 760px) !important;
        max-width:1280px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}


/* ==========================================================
   KINGS LOADOUT V6 - PAINEIS MAIS PROXIMOS DO CENTRO
   ========================================================== */

@media (min-width:1500px){

    .live-loadout[data-team="2"]{
        left:85px !important;
        right:auto !important;
    }

    .live-loadout[data-team="3"]{
        right:85px !important;
        left:auto !important;
    }

}


/* ==========================================================
   KINGS - CORRECAO ABA ADESIVOS
   Mantem os loadouts laterais atras do editor
   ========================================================== */

body:has(.sticker-page) .sticker-page {
    position: relative;
    z-index: 50;
}

body:has(.sticker-page) .sticker-editor {
    position: relative;
    z-index: 50;
}

body:has(.sticker-page) .sticker-preview-panel,
body:has(.sticker-page) .sticker-catalog-panel {
    position: relative;
    z-index: 51;
}

/* Na aba adesivos, esconder os painéis laterais de loadout */
body:has(.sticker-page) .live-loadout {
    display: none !important;
}

/* Usa toda a largura disponível */
body:has(.sticker-page) main,
body:has(.sticker-page) .content,
body:has(.sticker-page) .container {
    max-width: 1500px;
}


/* ==========================================================
   KINGS - BLOQUEAR DRAG NATIVO NA ABA ADESIVOS
   ========================================================== */

body:has(.sticker-page) img,
body:has(.sticker-page) .sticker-card,
body:has(.sticker-page) .sticker-drop-zone {
    -webkit-user-drag: none !important;
    user-drag: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body:has(.sticker-page) .sticker-card img,
body:has(.sticker-page) .sticker-drop-zone img,
body:has(.sticker-page) .sticker-weapon-img {
    pointer-events: none !important;
}


/* ==========================================================
   KINGS STICKERS - INTERACAO POR CLIQUE
   ========================================================== */

.sticker-page .sticker-card {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
}

.sticker-page .sticker-card img {
    pointer-events: none !important;
    -webkit-user-drag: none !important;
}

.sticker-page .sticker-drop-zone {
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.sticker-page .sticker-remove {
    pointer-events: auto !important;
}


/* ==========================================================
   KINGS - CORRECAO PREVIEW DA SKIN NA ABA ADESIVOS
   ========================================================== */

.sticker-page .weapon-sticker-preview {
    position: relative !important;
}

.sticker-page #stickerWeaponImage {
    display: none;
    position: relative !important;
    z-index: 1 !important;

    width: 90% !important;
    height: 82% !important;

    max-width: 90% !important;
    max-height: 82% !important;

    object-fit: contain !important;

    pointer-events: none !important;
    -webkit-user-drag: none !important;
}

.sticker-page .sticker-drop-zone {
    z-index: 10 !important;
}

.sticker-page #stickerEmptyText {
    position: absolute !important;
    z-index: 2 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    width: 90% !important;
    text-align: center !important;
}