/*
 * assets/css/extra.css
 * CSS supplémentaire — components UI spécifiques
 *  Le style principal est dans style.css (à la racine)
 */

/*  SERVER STATUS + PROFIL STEAM  */
.ss-gt-btn{display:flex;align-items:center;gap:.4rem;font-size:.73rem;font-family:'Share Tech Mono',monospace;color:#888;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:.3rem .65rem;text-decoration:none;transition:all .15s;cursor:pointer}
.ss-gt-btn:hover{color:var(--gold);border-color:rgba(255,208,0,.35);background:rgba(255,208,0,.05)}
.ss-steam-profile-link{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:.25rem .55rem .25rem .35rem;transition:background .15s}
.ss-steam-profile-link:hover{background:rgba(255,255,255,.09)}
.ss-persona{font-size:.8rem;font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-online-badge{font-size:.6rem;padding:.1rem .35rem;border-radius:3px;font-family:'Share Tech Mono',monospace;font-weight:700;letter-spacing:.04em}
.ss-online-badge.online{background:#4ade8022;color:#4ade80;border:1px solid #4ade8044}
.ss-online-badge.offline{background:#f8717122;color:#f87171;border:1px solid #f8717144}
.ss-online-badge.ingame{background:#facc1522;color:#facc15;border:1px solid #facc1544}

/*  COUTEAUX — grille de types  */
.knife-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.65rem;margin-bottom:1.8rem}
.knife-type-card{background:var(--dark-3);border:2px solid rgba(255,255,255,.07);border-radius:6px;padding:.65rem;cursor:pointer;transition:all .15s;text-align:center;position:relative}
.knife-type-card:hover{border-color:rgba(255,208,0,.4);background:rgba(255,208,0,.04)}
.knife-type-card.active{border-color:var(--gold);background:rgba(255,208,0,.07)}
.knife-type-card img{width:80px;height:55px;object-fit:contain;display:block;margin:0 auto .4rem}
.knife-type-card-name{font-family:var(--fh);font-size:.75rem;font-weight:700;letter-spacing:.05em;color:var(--gray-light);line-height:1.2}
.knife-type-card.active .knife-type-card-name{color:var(--gold)}
.knife-type-card .active-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.knife-skins-section{margin-top:.5rem}
.knife-skins-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,208,0,.12)}
.knife-skins-header-img{width:64px;height:44px;object-fit:contain}
.knife-skins-title{font-family:var(--fh);font-size:1.1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.knife-skins-sub{font-family:var(--fm);font-size:.6rem;color:var(--gray);letter-spacing:.1em;margin-top:.15rem}

/*  GANTS  */
.glove-section{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:700px){.glove-section{grid-template-columns:1fr}}
.glove-team-block{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:1rem}
.glove-team-label{font-family:var(--fh);font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.glove-team-label span{font-family:var(--fm);font-size:.62rem;color:var(--gray)}
.glove-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;margin-bottom:.8rem}
.glove-type-card{background:var(--dark-3);border:2px solid rgba(255,255,255,.07);border-radius:6px;padding:.5rem;cursor:pointer;transition:all .15s;text-align:center}
.glove-type-card:hover{border-color:rgba(255,208,0,.4)}
.glove-type-card.active{border-color:var(--gold);background:rgba(255,208,0,.06)}
.glove-type-card img{width:70px;height:48px;object-fit:contain;display:block;margin:0 auto .3rem}
.glove-type-card-name{font-size:.68rem;font-family:var(--fh);font-weight:600;color:var(--gray-light);line-height:1.2}
.glove-type-card.active .glove-type-card-name{color:var(--gold)}
.glove-skin-picker{margin-top:.5rem}
.glove-skin-picker label{font-family:var(--fm);font-size:.58rem;letter-spacing:.15em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:.3rem}
.glove-skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.4rem;max-height:280px;overflow-y:auto;padding:2px}
.glove-skin-card{background:var(--dark-3);border:1px solid rgba(255,255,255,.07);border-radius:5px;cursor:pointer;transition:all .15s;text-align:center;padding:.4rem}
.glove-skin-card:hover{border-color:rgba(255,208,0,.4);transform:scale(1.03)}
.glove-skin-card.active{border-color:var(--gold);background:rgba(255,208,0,.07)}
.glove-skin-card img{width:60px;height:42px;object-fit:contain;display:block;margin:0 auto .2rem}
.glove-skin-card-name{font-size:.6rem;font-family:var(--fh);color:var(--gray-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/*  STICKERS — 5 slots simples  */
.ss-modal-stickers{max-width:720px;width:95vw}
.stk-slots-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.75rem}
.stk-slot{background:var(--dark-3);border:2px dashed rgba(255,255,255,.1);border-radius:8px;padding:.5rem .3rem;cursor:pointer;transition:all .15s;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:0;overflow:hidden}
.stk-slot:hover{border-color:rgba(255,208,0,.35);background:rgba(255,208,0,.04)}
.stk-slot.slot-active{border-color:var(--gold);border-style:solid;background:rgba(255,208,0,.08)}
.stk-slot.filled{border-style:solid;border-color:rgba(255,255,255,.2)}
.stk-slot.filled.slot-active{border-color:var(--gold)}
.stk-slot-num{font-family:var(--fm);font-size:.5rem;letter-spacing:.15em;color:var(--gold);text-transform:uppercase}
.stk-slot-img{width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.stk-slot-name{font-size:.58rem;color:var(--gray-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center}
.stk-slot-clear{position:absolute;top:3px;right:3px;width:16px;height:16px;background:rgba(239,68,68,.8);border:none;border-radius:50%;color:#fff;font-size:.6rem;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1}
.stk-slot.filled:hover .stk-slot-clear{display:flex}
.sticker-simple-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.45rem;max-height:320px;overflow-y:auto;padding-right:3px}
.sticker-simple-grid::-webkit-scrollbar{width:4px}
.sticker-simple-grid::-webkit-scrollbar-thumb{background:rgba(255,208,0,.25);border-radius:2px}
.sticker-simple-item{background:var(--dark-3);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:.5rem .4rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.3rem;transition:all .15s}
.sticker-simple-item:hover{border-color:rgba(255,208,0,.4);background:rgba(255,208,0,.05)}
.sticker-simple-item img{width:50px;height:50px;object-fit:contain}
.sticker-simple-name{font-size:.56rem;color:var(--gray);text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sticker-craft-search{display:flex;align-items:center;gap:6px;background:var(--dark-3);border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:5px 9px;margin-bottom:.6rem;color:var(--gray);transition:border-color .15s}
.sticker-craft-search:focus-within{border-color:rgba(255,208,0,.4);color:var(--gold)}

/*  KEYCHAIN / CHARM  */
.ss-modal-keychain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem;max-height:300px;overflow-y:auto;margin-top:.75rem}
.ss-keychain-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;cursor:pointer;transition:all .15s;text-align:center}
.ss-keychain-item:hover{background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3)}
.ss-keychain-item.selected{background:rgba(167,139,250,.2);border-color:#a78bfa}
.ss-keychain-item img{width:52px;height:52px;object-fit:contain}
.ss-keychain-item span{font-size:.6rem;opacity:.7;line-height:1.2}
.kc-pos-panel{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:.75rem;margin-top:.75rem}
.kc-pos-panel label{font-family:var(--fm);font-size:.58rem;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:.35rem}
.kc-pos-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem;margin-bottom:.5rem}
.kc-pos-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff;font-size:.78rem;font-family:var(--fm);padding:.3rem .5rem;outline:none;transition:border .15s}
.kc-pos-input:focus{border-color:rgba(255,208,0,.5)}

/*  WEAPON ICON ACTIONS  */
.ss-icon-actions{display:flex;gap:.35rem;margin-top:.45rem;align-items:center}
.ss-icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:rgba(255,255,255,.55);cursor:pointer;transition:all .15s;flex-shrink:0}
.ss-icon-btn:hover{background:rgba(255,208,0,.15);border-color:rgba(255,208,0,.4);color:var(--gold)}
.ss-icon-btn.dot-gold{border-color:rgba(255,208,0,.35);color:var(--gold)}
.ss-icon-btn.dot-gold::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.ss-icon-btn.dot-purple{border-color:rgba(167,139,250,.3);color:#a78bfa}
.ss-icon-btn.dot-purple::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#a78bfa}
.ss-icon-btn.dot-active{border-color:rgba(74,222,128,.3);color:#4ade80}
.ss-icon-btn.dot-active::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#4ade80}
.ss-card-wname{font-family:var(--fm);font-size:.6rem;letter-spacing:.08em;color:var(--gray,#666);margin-top:.15rem;text-transform:uppercase;opacity:.55}
.btn-glove-select{width:100%;margin-bottom:.4rem;padding:.4rem;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(234,179,8,.12);color:#facc15;border:1px solid rgba(234,179,8,.3);border-radius:5px;cursor:pointer;transition:all .15s}
.btn-glove-select:hover{background:rgba(234,179,8,.22);border-color:rgba(234,179,8,.5)}
.btn-glove-select.active{background:rgba(74,222,128,.12);color:#4ade80;border-color:rgba(74,222,128,.3)}
.ss-nametag-wrap{position:relative;margin-top:.35rem}
.ss-nametag-input{width:100%;padding:.35rem .35rem .35rem 1.6rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:.75rem;font-family:'Share Tech Mono',monospace;outline:none;transition:border .15s;box-sizing:border-box}
.ss-nametag-input:focus{border-color:rgba(234,179,8,.5)}
.btn-keychain{display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;background:rgba(167,139,250,.1);color:#a78bfa;border:1px solid rgba(167,139,250,.25);border-radius:5px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-keychain:hover{background:rgba(167,139,250,.2)}
.ss-keychain-count{background:#a78bfa;color:#000;border-radius:50%;width:14px;height:14px;font-size:.55rem;display:flex;align-items:center;justify-content:center;font-weight:800}

/*  PINS / PATCHES  */
.pins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.65rem}
.pin-card{background:var(--dark-3);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:.75rem .5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.35rem;transition:border-color .15s,transform .15s;cursor:default}
.pin-card:hover{border-color:rgba(255,208,0,.3);transform:translateY(-2px)}
.pin-card-img{width:72px;height:72px;display:flex;align-items:center;justify-content:center}
.pin-card-img img{width:68px;height:68px;object-fit:contain}
.pin-card-name{font-size:.62rem;line-height:1.3;color:var(--gray-light);font-family:var(--fh);font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pin-card-rarity{font-size:.55rem;font-family:var(--fm);color:var(--gold);opacity:.6;letter-spacing:.08em}

/*  STICKER SLOT — WEAR / SCRAPE SLIDER  */
.stk-wear-wrap{width:100%;margin-top:.3rem;padding-top:.3rem;border-top:1px solid rgba(255,255,255,.07)}
.stk-wear-label{font-family:'Share Tech Mono',monospace;font-size:.52rem;color:rgba(255,208,0,.7);text-align:center;margin-bottom:.2rem;letter-spacing:.06em}
.stk-wear-range{width:100%;accent-color:var(--gold);cursor:pointer;height:4px;border-radius:2px}
.stk-wear-range::-webkit-slider-thumb{width:14px;height:14px}

/*  PREVIEW MODAL — NAMETAG FIX  */
.ss-modal-input{
    width:100%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:5px;
    color:#fff;
    font-size:.82rem;
    padding:.4rem .6rem;
    outline:none;
    transition:border .15s;
    box-sizing:border-box;
}
.ss-modal-input:focus{border-color:rgba(255,208,0,.5);}

/*  PINS ACTIVE STATE  */
.pin-card{position:relative;cursor:pointer}
.pin-card:hover{border-color:rgba(255,208,0,.4);transform:translateY(-2px);background:rgba(255,208,0,.04)}
.pin-card.pin-active{border-color:var(--gold);background:rgba(255,208,0,.08)}
.pin-card.pin-active .pin-card-name{color:var(--gold)}
.pin-badge{position:absolute;top:6px;right:6px;background:var(--gold);color:#000;font-size:.52rem;font-weight:800;font-family:var(--fm);padding:.1rem .35rem;border-radius:3px;letter-spacing:.04em;line-height:1.4}

/*  GLOVE IMAGES FALLBACK  */
.glove-type-card img,.glove-skin-card img{background:rgba(255,255,255,.04)}
.glove-type-card img[src=""],.glove-skin-card img[src=""]{display:none}