body {
--firecat-red:#fe0000;
--firecat-orange:#fe6a00;
--panel:#212020;
--panel-dark:#151515;
--muted:#b8b8b8;
--special:#ffd700;
--red:#eb4b4b;
--pink:#d32ce6;
--purple:#8847ff;
--blue:#4b69ff;
margin:0;
background:radial-gradient(circle at top left,#5a1a16 0%,#212020 35%,#111 100%)
    top left / 100% 200vh no-repeat,#111;
color:white;
font-family:Arial,Helvetica,sans-serif;
min-height:100vh;
}

*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}

nav{
display:flex;
align-items:center;
gap:1rem;
background:#212020;
/*background-image:radial-gradient(circle at bottom left,var(--firecat-orange) 7%,var(--firecat-red) 15%,transparent 30%);*/
background-size:2000px 200px;
padding:1rem;
position:sticky;
top:0;
z-index:50;
box-shadow:0 0 14px rgba(0,0,0,.35);
}

.brand{
font-weight:900;
font-size:1.7rem;
white-space:nowrap;
margin-top: -5px;
margin-left: 10px;
margin-right: -10rem;
z-index: 1000;
}

.nav-links{
flex:1;
display:flex;
justify-content:center;
align-items:center;
gap:.5rem;
flex-wrap:wrap;
}

.nav-links button,.nav-links a{
background:transparent;
border:0;
color:white;
padding:.75rem 1rem;
border-radius:999px;
cursor:pointer;
}

.nav-links button:hover,.nav-links button.active,.nav-links a:hover{
background:rgba(254,0,0,.3);
}

.dropdown{position:relative;display:inline-block}

.dropdown-content{
display:none;
position:absolute;
top:100%;
left:0;
background:#161616;
border:1px solid #333;
border-radius:14px;
min-width:190px;
padding:.5rem;
z-index:100;
box-shadow:0 12px 30px rgba(0,0,0,.45);
}

.dropdown:hover .dropdown-content{display:grid;gap:.2rem}

.dropdown-content button{
text-align:left;
width:100%;
border-radius:10px;
padding:.65rem .8rem;
}

.menu-btn{
display:none;
margin-left:auto;
background:var(--firecat-red);
color:white;
border:0;
padding:.7rem .9rem;
border-radius:8px;
}

main{width:min(1280px,94%);margin:auto}

.hero{padding:3rem 0 1rem;text-align:center}

.hero h1{
font-size:clamp(2.4rem,7vw,5.5rem);
margin:0;
font-weight:900;
line-height:.95;
}

.hero p,.active-filter-box,.result-count{color:var(--muted)}

.controls{
max-width:950px;
margin:2rem auto 0;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:.8rem;
}

.controls input,.controls select{
width:100%;
background:#151515;
border:1px solid #333;
color:white;
padding:.9rem 1rem;
border-radius:12px;
}

.active-filter-box{
display:flex;
justify-content:space-between;
gap:1rem;
align-items:center;
padding:1rem 0;
}

.skin-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.2rem;
padding-bottom:5rem;
}

.skin-card{
background:var(--panel);
border:1px solid #333;
border-radius:18px;
overflow:hidden;
transition:.2s ease;
min-width:0;
width:fit-content;
}

.skin-card:hover{
transform:translateY(-5px);
border-color:var(--firecat-red);
box-shadow:0 0 18px rgba(254,0,0,.75);
}

.skin-image-wrap{
background:#111;
height:190px;
display:flex;
justify-content:center;
}

.skin-image-wrap img{
max-width:100%;
max-height:100%;
object-fit:cover;
}

.skin-card-info{padding:1rem}

.weapon-label{
color:#8d8d8d;
margin:0 0 .4rem;
font-size:.9rem;
}

.skin-card h2{
margin:0 0 .7rem;
font-size:1.15rem;
min-height:45px;
overflow-wrap:anywhere;
}

.rarity-pill{
display:inline-block;
color:black;
width:100%;
padding:.3rem 0;
text-align:center;
border-radius:999px;
font-weight:800;
font-size:.85rem;
margin-top:-1rem;
}

.rarity-pill.forbidden{background:white}
.rarity-pill.special{background:var(--special)}
.rarity-pill.red{background:var(--red)}
.rarity-pill.pink{background:var(--pink)}
.rarity-pill.purple{background:var(--purple)}
.rarity-pill.blue{background:var(--blue)}

.card-bottom{
margin-top:1rem;
display:flex;
justify-content:space-between;
gap:.8rem;
color:var(--muted);
font-size:.85rem;
}

.card-bottom span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.card-bottom strong{color:var(--firecat-orange);white-space:nowrap}

.empty-message{
grid-column:1/-1;
text-align:center;
color:var(--muted);
}

.detail-layout{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:2rem;
padding:4rem 0;
}

.detail-image-card,.detail-info-card{
background:rgba(33,32,32,.92);
border:1px solid #333;
border-radius:22px;
padding:1.5rem;
}

.detail-image-card{
display:flex;
align-items:center;
justify-content:center;
min-height:430px;
}

.detail-image-card img{
width:100%;
max-height:420px;
object-fit:contain;
}

.detail-info-card h1{
margin:.2rem 0 1rem;
font-size:clamp(2rem,5vw,4rem);
overflow-wrap:anywhere;
}

.value-box{
margin:1rem 0;
background:#151515;
border-radius:16px;
padding:1rem;
}

.value-box span{display:block;color:var(--muted)}
.value-box strong{font-size:2rem;color:var(--firecat-orange)}

.info-table{display:grid;}

.info-table p{
background:#151515;
border-radius:12px;
padding:.8rem 1rem;
display:flex;
justify-content:space-between;
margin:0.7rem 0rem;
}

.info-table span{color:var(--muted)}

.admin-list{display:grid;gap:1rem;padding-bottom:4rem}
.admin-row,.form-page,.login-box{background:var(--panel);border:1px solid #333;border-radius:18px;padding:1rem}
.admin-row{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.admin-row p{color:var(--muted)}
.admin-row a{color:var(--firecat-orange);margin-left:.8rem}
.form-page,.login-box{max-width:720px;margin:3rem auto}
.admin-form,.login-form{display:grid;gap:.8rem}
.admin-form input,.admin-form select,.login-form input{background:#111;border:1px solid #333;color:white;border-radius:10px;padding:.8rem}
.admin-form button,.login-form button,.big-button{background:var(--firecat-red);color:white;border:0;border-radius:10px;padding:1rem;font-weight:900;cursor:pointer;display:inline-block}
.error{color:#ff8a8a}

@media(max-width:1100px){
.skin-grid{grid-template-columns:repeat(3,1fr)}
.detail-layout{grid-template-columns:1fr}
}

@media(max-width:850px){
.menu-btn{display:block}
nav{flex-wrap:wrap}
.nav-links{display:none;width:100%;justify-content:flex-start}
.nav-links.show{display:flex}
.dropdown{width:100%}
.dropdown-content{position:static;width:100%;box-shadow:none;margin-top:.4rem}
.dropdown:hover .dropdown-content{display:none}
.dropdown.open .dropdown-content{display:grid}
.controls{grid-template-columns:1fr}
.skin-grid{grid-template-columns:repeat(2,1fr)}
.active-filter-box{display:block}
}

@media(max-width:540px){
.skin-grid{grid-template-columns:1fr}
.hero{text-align:left}
.admin-row{align-items:flex-start;flex-direction:column}
.info-table p{display:block}
.info-table span{display:block;margin-bottom:.35rem}
}


/* =========================
   MOBILE POLISH - LAUNCH
   ========================= */

@media (max-width: 850px) {
    body {
        background:
            radial-gradient(circle at top left, rgba(254, 0, 0, 0.26), transparent 34rem),
            #111;
    }

    nav {
        padding: .75rem;
        gap: .5rem;
    }

    .brand {
        font-size: 1.35rem;
        letter-spacing: -0.03em;
    }

    .menu-btn {
        display: block;
        margin-left: auto;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.15rem;
    }

    .nav-links {
        display: none;
        width: 100%;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: .75rem;
        gap: .45rem;
    }

    .nav-links.show {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .nav-links > button,
    .nav-links > a,
    .dropdown-btn {
        width: 100%;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.08);
        text-align: center;
        border-radius: 12px;
        padding: .85rem .65rem;
    }

    .dropdown {
        width: 100%;
    }

    .dropdown-content {
        position: static;
        display: none;
        width: 100%;
        margin-top: .4rem;
        padding: .45rem;
        box-shadow: none;
        border-radius: 12px;
        background: rgba(0,0,0,.35);
    }

    .dropdown:hover .dropdown-content {
        display: none;
    }

    .dropdown.open .dropdown-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .35rem;
    }

    .dropdown-content button {
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.08);
        padding: .75rem .5rem;
        text-align: center;
        font-size: .92rem;
        border-radius: 10px;
    }

    main {
        width: min(100% - 1rem, 1280px);
    }

    .hero {
        text-align: left;
        padding: 2rem .25rem 1rem;
    }

    .hero h1 {
        font-size: clamp(2rem, 12vw, 3.2rem);
        line-height: .98;
        letter-spacing: -0.06em;
    }

    .hero p {
        font-size: .98rem;
        line-height: 1.45;
    }

    .controls {
        margin-top: 1.25rem;
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .controls input,
    .controls select {
        min-height: 48px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .active-filter-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .75rem;
        padding: .75rem .15rem 1rem;
        font-size: .92rem;
    }

    .active-filter-box p {
        margin: 0;
    }

    .skin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        padding-bottom: 3rem;
    }

    .skin-card {
        border-radius: 16px;
    }

    .skin-card:hover {
        transform: none;
    }

    .skin-image-wrap {
        height: 135px;
        padding: .55rem;
    }

    .skin-card-info {
        padding: .75rem;
    }

    .weapon-label {
        font-size: .78rem;
        margin-bottom: .25rem;
    }

    .skin-card h2 {
        font-size: .95rem;
        line-height: 1.15;
        min-height: 36px;
        margin-bottom: .5rem;
    }

    .rarity-pill {
        font-size: .72rem;
        padding: .28rem .58rem;
    }

    .card-bottom {
        margin-top: .75rem;
        font-size: .72rem;
        gap: .5rem;
    }

    .detail-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem 0 2.5rem;
    }

    .detail-image-card,
    .detail-info-card {
        border-radius: 18px;
        padding: 1rem;
    }

    .detail-image-card {
        min-height: 280px;
    }

    .detail-image-card img {
        max-height: 280px;
    }

    .detail-info-card h1 {
        font-size: clamp(2rem, 12vw, 3.4rem);
        line-height: .95;
    }

    .value-box {
        margin: 1rem 0;
        padding: .9rem;
    }

    .value-box strong {
        font-size: 1.65rem;
    }

    .info-table {
        gap: .55rem;
    }

    .info-table p {
        display: block;
        padding: .85rem;
        margin: 0;
    }

    .info-table span {
        display: block;
        margin-bottom: .35rem;
        font-size: .78rem;
    }

    .login-box,
    .form-page {
        margin: 1rem auto;
        border-radius: 18px;
    }
}

@media (max-width: 380px) {
    .skin-grid {
        grid-template-columns: 1fr;
    }

    .skin-image-wrap {
        height: 170px;
    }

    .nav-links.show {
        grid-template-columns: 1fr;
    }

    .dropdown.open .dropdown-content {
        grid-template-columns: 1fr;
    }
}

@media (hover: none) and (pointer: coarse) {
    button,
    a,
    select,
    input {
        -webkit-tap-highlight-color: rgba(254, 0, 0, .25);
    }

    .skin-card:active {
        transform: scale(.985);
        border-color: var(--firecat-red);
    }
}