.skins-filters{display:flex;gap:10px;margin-bottom:16px;overflow-x:auto;padding:5px 2px;scrollbar-width:none;}
.type-filters{display:flex;gap:10px;margin-bottom:20px;background:rgba(255,255,255,0.03);padding:8px;border-radius:16px;border:1px solid rgba(255,255,255,0.05);overflow-x:auto;scrollbar-width:none;}
.type-filters::-webkit-scrollbar{display:none;}
.type-btn{background:transparent;border:none;color:#777;padding:10px 20px;border-radius:12px;font-family:'Nunito',sans-serif;font-weight:900;font-size:13px;cursor:pointer;transition:all 0.2s;flex:1;}
.type-btn:hover{color:#fff;background:rgba(255,255,255,0.05);}
.type-btn.active{background:var(--y);color:var(--dark);box-shadow:0 4px 12px rgba(249,200,14,0.2);}
.skins-filters::-webkit-scrollbar{display:none;}
.rarity-btn{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:#888;padding:8px 18px;border-radius:12px;font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.2s;white-space:nowrap;}
.rarity-btn:hover{background:rgba(255,255,255,0.08);color:#fff;}
.rarity-btn.active{background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.3);box-shadow:0 4px 15px rgba(0,0,0,0.3);}
.rarity-btn.r-COMMON.active{border-color:#aaa;background:rgba(160,160,160,0.15);}
.rarity-btn.r-UNCOMMON.active{border-color:#4dd44d;background:rgba(77,212,77,0.15);}
.rarity-btn.r-RARE.active{border-color:#6ab0ff;background:rgba(106,176,255,0.15);}
.rarity-btn.r-EPIC.active{border-color:#c66eff;background:rgba(198,110,255,0.15);}
.rarity-btn.r-MYTHIC.active{border-color:#ff6ea0;background:rgba(255,110,160,0.15);}
.rarity-btn.r-LEGENDARY.active{border-color:#f9c80e;background:rgba(249,200,14,0.15);}
.rarity-btn.r-SPECIAL.active{border-color:#ffa040;background:rgba(255,160,64,0.15);}
.skins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;margin-top:10px;}
.skin-card{background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.02) 100%);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:25px 15px;text-align:center;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 20px rgba(0,0,0,0.2);container-type:inline-size;height:100%;justify-content:space-between;}
.skin-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:12px;text-align:center;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 20px rgba(0,0,0,0.2);container-type:inline-size;height:100%;gap:6px;}
.skin-card::before{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,0.05) 0%,transparent 70%);opacity:0.5;pointer-events:none;}
.skin-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,0.2);background:linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.03) 100%);box-shadow:0 20px 40px rgba(0,0,0,0.4);}
.skin-card img{width:110px;height:110px;object-fit:contain;display:block;margin-bottom:15px;filter:drop-shadow(0 12px 18px rgba(0,0,0,0.4));transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);z-index:2;}
.skin-card img{width:110px;height:110px;object-fit:contain;display:block;margin:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,0.4));transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);z-index:2;}
.skin-card:hover img{transform:scale(1.12) rotate(2deg);}
.skin-card .sk-name{font-size:clamp(10px, 8cqw, 14px);font-weight:900;color:white;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;line-height:1.2;margin-bottom:8px;z-index:2;font-family:'Nunito',sans-serif;letter-spacing:0.1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;display:flex;align-items:center;justify-content:center;text-wrap:pretty;width:100%;}
.skin-card .sk-name{font-size:clamp(9px, 8cqw, 13px);font-weight:900;color:white;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;line-height:1.1;z-index:2;font-family:'Nunito',sans-serif;letter-spacing:0.1px;display:flex;align-items:center;justify-content:center;text-wrap:pretty;width:100%;flex-grow:1;margin:0;}
.skin-card .sk-rarity{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;padding:4px 12px;border-radius:10px;display:inline-block;z-index:2;backdrop-filter:blur(4px);}
.skin-card.rarity-LEGENDARY:hover{box-shadow:0 20px 40px rgba(249,200,14,0.15);}
.skin-card.rarity-SPECIAL:hover{box-shadow:0 20px 40px rgba(255,140,0,0.15);}
.skin-card.rarity-MYTHIC:hover{box-shadow:0 20px 40px rgba(255,60,120,0.15);}
.skin-card.rarity-EPIC:hover{box-shadow:0 20px 40px rgba(160,30,255,0.15);}
.skins-count{font-size:13px;color:var(--sub);font-weight:700;margin-bottom:16px;text-transform: capitalize;}
#skinModal .modal-box{ max-width: 660px; width: 95%; display: flex; flex-direction: row; align-items: center; gap: 0; padding: 40px; text-align: left; background: #1e1f2e; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 40px 100px rgba(0,0,0,0.9); border-radius: 28px; }
#skinModal .modal-img{ width: 280px; height: 280px; object-fit: contain; filter: drop-shadow(0 16px 40px rgba(0,0,0,0.8)); margin: 0 32px 0 0; border: none; border-radius: 0; background: transparent; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); flex-shrink: 0; }
#skinModal .modal-box:hover .modal-img{ transform: scale(1.05) rotate(1deg); }
#skinModal .modal-info{ flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
#skinModal .modal-name{ font-family: 'Lilita One', cursive; font-size: clamp(1.4rem, 4vw, 2.2rem); color: #fff; text-shadow: 2px 2px 0 #000; margin: 4px 0; line-height: 1.15; letter-spacing: 0.5px; word-break: break-word; }
#skinModal .modal-version{ font-size: 1rem; color: var(--y); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 600px){ #skinModal .modal-box { flex-direction: column; padding: 28px 20px; text-align: center; gap: 20px; } #skinModal .modal-img { width: 180px; height: 180px; margin: 0; } #skinModal .modal-info { align-items: center; padding: 20px; width: 100%; } }
@media(max-width:600px){
.skins-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;}.skin-card img{width:65px;height:65px;}
}@media(max-width:380px){
.skins-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;}
.skin-card img{width:58px;height:58px;}
#skinModal .modal-img{width:140px;height:140px;}
}