@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Space+Grotesk:wght@500;700&display=swap");

/* ===== ROOT ===== */
:root{
  --bg:#020617;
  --panel:#0f172a;
  --accent:#facc15;
  --accent2:#38bdf8;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border:rgba(148,163,184,.18);
}

/* ===== GLOBAL ===== */
*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:radial-gradient(circle at top,#0f172a,#020617);
  color:var(--text);
}

/* ===== HEADER ===== */
.site-header{
  text-align:center;
  padding:3rem 1rem 2rem;
}

.site-header h1{
  font-family:"Space Grotesk";
  color:var(--accent);
  text-shadow:0 0 18px rgba(250,204,21,.25);
}

.subtitle{color:var(--muted)}

/* ===== CONTROLS ===== */
.controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  margin-top:1.5rem;
}

.selector{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}

.selector button{
  background:#020617;
  border:1px solid var(--border);
  color:var(--text);
  padding:.6rem 1.4rem;
  border-radius:999px;
  cursor:pointer;
  transition:.25s ease;
}

.selector button.active{
  background:linear-gradient(135deg,var(--accent),#fde68a);
  color:#020617;
  box-shadow:0 0 25px rgba(250,204,21,.4);
}

#searchInput{
  background:#020617;
  border:1px solid var(--border);
  color:var(--text);
  padding:.6rem 1rem;
  border-radius:10px;
  width:min(420px,90%);
}

/* ===== CONTENT ===== */
.container{
  max-width:1200px;
  margin:auto;
  padding:2rem 1rem;
}

.class{
  display:none;
  animation:fadeUp .4s ease;
}

.class.active{display:block}

/* ===== LOADOUT CARD ===== */
.loadout{
  background:linear-gradient(180deg,#0f172a,#020617);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.4rem;
  margin-bottom:1.4rem;
  cursor:pointer;
  transition:.25s ease;
}

.loadout:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 20px 40px rgba(0,0,0,.55);
}

.loadout.collapsed .row,
.loadout.collapsed .perks,
.loadout.collapsed .notes{
  display:none;
}

.loadout h3{
  color:var(--accent2);
  margin:0;
}

.role{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.5rem;
}

.tag{
  background:#020617;
  border:1px solid var(--border);
  padding:.2rem .55rem;
  border-radius:8px;
  font-size:.75rem;
  margin-left:.3rem;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ===== FOOTER ===== */
footer{
  text-align:center;
  padding:2rem;
  color:var(--muted);
}
/* =========================
   MOBILE READABILITY FIX
   ========================= */
@media (max-width: 640px) {

  .loadout {
    padding: 1.2rem;
  }

  .loadout h3 {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .role {
    font-size: .8rem;
    margin-bottom: .75rem;
  }

  /* Stack rows vertically */
  .row {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: .6rem 0;
  }

  .label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
  }

  /* Weapon + tags container */
  .row span:not(.label) {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
  }

  .tag {
    font-size: .72rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Perks block */
  .perks {
    margin-top: .9rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
    font-size: .82rem;
    line-height: 1.5;
  }

  .perks b {
    display: block;
    margin-bottom: .3rem;
  }

  /* Notes block */
  .notes {
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--border);
    font-size: .8rem;
    line-height: 1.45;
    color: var(--muted);
  }

  /* Collapse behavior improvement */
  .loadout.collapsed h3,
  .loadout.collapsed .role {
    margin-bottom: 0;
  }
}