/* =====================================================================
   PROJECT METAL — Weapon Analyzer
   Visual system v22 — "GHOST PROTOCOL"
   Elegante, fino, profissional, gamer: grafite frio + ciano elétrico,
   hairlines de 1px, cantos HUD, tipografia técnica, glow contido.
   Reestiliza o markup Tailwind existente sem mudar sua estrutura.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Saira:wght@400;500;600;700;800&display=swap');

:root {
  /* superfícies */
  --bg-0: #05070c;
  --bg-1: #090c13;
  --surface-0: #0c1018;          /* cards */
  --surface-1: #10151f;          /* painéis / modais */
  --surface-2: #151b27;          /* elevado / hover */
  --well:      #080b11;          /* poços de imagem, tracks */
  /* linhas */
  --line:        rgba(148, 163, 184, .10);
  --line-strong: rgba(148, 163, 184, .20);
  --line-accent: rgba(56, 224, 255, .35);
  /* cor */
  --accent:   #38e0ff;           /* ciano elétrico */
  --accent-2: #1f8fff;           /* azul elétrico */
  --accent-hi:#9ff0ff;
  --accent-dim: rgba(56, 224, 255, .12);
  --gold:   #f5c34d;
  --ok:     #3ddc97;
  --danger: #ff5d6c;
  --text:   #e9eefb;
  --text-2: #b9c4da;
  --muted:  #8b97b0;
  /* efeitos */
  --glow:   0 0 18px rgba(56, 224, 255, .22);
  --shadow: 0 14px 40px rgba(0, 0, 0, .55);
  --radius: 10px;
  /* tipografia */
  --font-display: 'Chakra Petch', 'Saira', system-ui, sans-serif;
  --font-body: 'Saira', system-ui, sans-serif;
}

/* ---------- Base ---------- */
* { scrollbar-color: rgba(139,151,176,.45) transparent; scrollbar-width: thin; }
html, body, #category-container { overflow-x: hidden; }

::selection { background: rgba(56,224,255,.25); color: #fff; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(31,143,255,.10), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(56,224,255,.05), transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
}

/* malha técnica sutil + vinheta */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(1100px 720px at 50% 0%, #000 30%, transparent 90%);
  pointer-events: none; z-index: 0;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, .brand__name, .card-title {
  font-family: var(--font-display);
  letter-spacing: .02em;
}

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #232b3a; border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #33405a; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Loading splash ---------- */
.app-loading {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  background: radial-gradient(640px 420px at 50% 42%, #0d1220, var(--bg-0));
  transition: opacity .4s ease;
}
.app-loading__inner { text-align: center; }
.app-loading__logo { width: 88px; height: auto; margin: 0 auto 20px;
  filter: drop-shadow(0 0 18px rgba(56,224,255,.35)); animation: pulse 2s ease-in-out infinite; }
.app-loading__bar { width: 220px; height: 2px; margin: 0 auto;
  background: rgba(148,163,184,.15); overflow: hidden; }
.app-loading__bar span { display: block; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: slide 1.2s ease-in-out infinite; }
.app-loading__text { margin-top: 16px; color: var(--muted); font-size: .68rem;
  letter-spacing: .34em; text-transform: uppercase; font-weight: 600; }
@keyframes slide { 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }
@keyframes pulse { 0%,100%{opacity:.75; transform:scale(1)} 50%{opacity:1; transform:scale(1.04)} }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 9, 14, .82);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
/* filete de energia no rodapé do header */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--line-accent) 30%, rgba(31,143,255,.4) 55%, transparent 90%);
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__logo { width: 38px; height: 38px; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(56,224,255,.45)); transition: transform .25s ease; }
.brand:hover .brand__logo { transform: rotate(-5deg) scale(1.05); }
.brand__name { display: flex; flex-direction: column; line-height: 1;
  color: var(--text); font-weight: 700; font-size: 1rem; }
.brand__name small { font-family: var(--font-body); font-weight: 600; font-size: .58rem;
  letter-spacing: .38em; color: var(--accent); text-transform: uppercase; margin-top: 4px; }

.nav-btn {
  position: relative;
  padding: .5rem .68rem; border-radius: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: color .15s ease, background .15s ease;
  white-space: nowrap; text-decoration: none; display: inline-block;
}
@media (min-width: 1280px) and (max-width: 1439px) { .nav-btn { padding: .45rem .5rem; font-size: .7rem; } }
.nav-btn:hover { color: var(--text); background: rgba(56,224,255,.06); }
/* aba ativa: texto aceso + sublinhado angular */
.nav-btn.active, .nav-btn[data-active="true"] {
  color: var(--accent-hi); background: var(--accent-dim);
  text-shadow: 0 0 14px rgba(56,224,255,.45);
}
.nav-btn.active::after, .nav-btn[data-active="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 4px 100%);
  box-shadow: 0 0 10px rgba(56,224,255,.6);
}
.nav-btn--ghost { color: var(--accent); border: 1px solid var(--line-strong); }
.nav-btn--ghost:hover { border-color: var(--line-accent); background: var(--accent-dim); }
.nav-burger { padding: .45rem .8rem; border-radius: 8px; background: var(--accent-dim);
  border: 1px solid var(--line-strong); color: var(--text); font-size: 1.05rem; }

/* seletor de idioma (dropdown) */
.lang-select { position: relative; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--surface-1); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 4px; min-width: 150px;
  box-shadow: var(--shadow);
}
.lang-menu.hidden { display: none; }
.lang-menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  padding: .5rem .7rem; border-radius: 6px; background: transparent; border: 0; cursor: pointer;
  color: var(--text-2); font-weight: 600; font-size: .85rem;
}
.lang-menu button:hover { background: var(--accent-dim); color: var(--text); }
.lang-menu button.on { color: var(--accent); }
.lang-menu--mobile { position: static; width: 100%; margin-top: 6px; }

/* ---------- Painéis / cards base ---------- */
.military-card {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.35);
  position: relative;
}
/* cantoneiras HUD (assinatura do tema) */
.military-card::before, .military-card::after,
.weapon-card::before, .weapon-card::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--line-accent); border-style: solid; opacity: .55;
  transition: opacity .2s ease, border-color .2s ease;
}
.military-card::before, .weapon-card::before {
  top: -1px; left: -1px; border-width: 1px 0 0 1px; border-top-left-radius: var(--radius);
}
.military-card::after, .weapon-card::after {
  bottom: -1px; right: -1px; border-width: 0 1px 1px 0; border-bottom-right-radius: var(--radius);
}

/* Cards de arma / comparação / catálogo */
.weapon-card,
.comparison-card,
#category-container .rounded-xl.border-blue-500 {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 26px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.weapon-card:hover,
.comparison-card:hover,
#category-container .rounded-xl.border-blue-500:hover {
  transform: translateY(-3px);
  border-color: var(--line-accent) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.5), 0 0 0 1px rgba(56,224,255,.12), var(--glow);
}
.weapon-card:hover::before, .weapon-card:hover::after { opacity: 1; }

/* Poços de imagem (herda p/ markup Tailwind antigo) */
#category-container .bg-gray-800,
#category-container .bg-gray-700 {
  background: var(--well) !important;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#category-container img { transition: transform .25s ease; }
#category-container .weapon-card:hover img,
#category-container .comparison-card:hover img { transform: scale(1.04); }

/* Cores utilitárias herdadas do markup antigo */
#category-container .text-blue-400 { color: var(--accent) !important; }
#category-container .text-yellow-300,
#category-container .text-yellow-400 { color: var(--gold) !important; }
#category-container .border-gray-700 { border-color: var(--line) !important; }

/* Modal genérico (pets/armors/etc — markup Tailwind arbitrário) */
#item-detail-modal > div.max-w-2xl, #item-detail-modal > div[class*="max-w-2xl"] {
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0)) !important;
  border-color: var(--line-strong) !important;
}

/* ---------- Cabeçalhos de seção ---------- */
#category-container h2.text-xl,
#category-container h3.text-xl {
  position: relative; padding-left: 16px;
  text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem;
}
#category-container h2.text-xl::before,
#category-container h3.text-xl::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) skewX(-12deg);
  width: 5px; height: 1.05em;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(56,224,255,.5);
}

/* Cabeçalhos de painéis colapsáveis */
#compare-head, #rank-head,
[id$="-compare-head"], [id$="-search-head"] { transition: background .15s ease; }
#compare-head:hover, #rank-head:hover { background: rgba(56,224,255,.045); }
#compare-head h3, #rank-head h3, #search-wrapper h3 {
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem !important;
  color: var(--text-2) !important;
}
.chev { transition: transform .22s ease; color: var(--accent); font-size: .9rem !important; }
.collapsed .chev { transform: rotate(-90deg); }

/* ---------- Botões de categoria / preset ---------- */
#category-container button.rounded-lg,
#category-container button.rounded { transition: all .15s ease; }
#category-container [id$="-tab-inner"] {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-display); font-weight: 600;
  font-size: .74rem !important; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 7px !important;
}
#category-container [id$="-tab-inner"]:hover { border-color: var(--line-accent); color: var(--text); }
#category-container [id$="-tab-inner"].bg-blue-600 {
  background: linear-gradient(135deg, rgba(56,224,255,.18), rgba(31,143,255,.22)) !important;
  color: var(--accent-hi) !important;
  border-color: var(--line-accent);
  box-shadow: inset 0 0 18px rgba(56,224,255,.10), 0 0 14px rgba(56,224,255,.18);
  text-shadow: 0 0 12px rgba(56,224,255,.5);
}

/* ---------- Formulários ---------- */
#category-container select,
#category-container input[type="text"],
#category-container input[type="number"] {
  background: var(--well) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 7px !important;
  color: var(--text);
  font-family: var(--font-body); font-size: .92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#category-container select:focus,
#category-container input:focus {
  outline: none; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(56,224,255,.14);
}
#category-container ::placeholder { color: #55617a; }
#category-container label { color: var(--text-2); }

/* Range sliders — pista fina, thumb losango */
#category-container input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(56,224,255,.45), rgba(148,163,184,.18));
}
#category-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent-2));
  border: 1px solid #04121f; border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(56,224,255,.7); cursor: pointer;
}
#category-container input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border: 1px solid #04121f; border-radius: 2px;
  background: var(--accent); transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(56,224,255,.7); cursor: pointer;
}

/* ---------- Page fade / motion ---------- */
.page-fade { animation: fadeUp .4s cubic-bezier(.2,.7,.3,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-fade, .app-loading__logo, .app-loading__bar span { animation: none !important; }
  * { transition: none !important; }
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  background: rgba(6, 8, 13, .9);
  border-top: 1px solid var(--line);
}
.site-footer span { letter-spacing: .04em; }
.footer-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line-accent);
  margin-left: 4px; }
.footer-link:hover { color: var(--accent-hi); }

/* ---------- Guardas de layout ---------- */
.weapon-card, .comparison-card, .military-card { max-width: 100%; box-sizing: border-box; }
#category-container .grid > * { min-width: 0; }
.card-title, .bundle-equipment { overflow-wrap: anywhere; word-break: break-word; }
.military-card img, .js-zoomable { max-width: 100%; height: auto; }
#img-zoom-modal { z-index: 9999; }

/* =====================================================================
   Weapons page — toolbar, ranking, comparador, cards
   ===================================================================== */

/* --- Busca & filtro (sempre visível) --- */
.wp-toolbar-grid { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.wp-field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.wp-field--grow { flex: 1 1 240px; }
.wp-field label { font-size: .64rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); }
.wp-field input { height: 38px; padding: 0 12px; width: 100%; }
.wp-perm { display: flex; align-items: center; gap: 9px; height: 38px; cursor: pointer;
  padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 7px;
  background: var(--well); font-size: .86rem; color: var(--text-2);
  transition: border-color .15s ease, color .15s ease; user-select: none; }
.wp-perm:hover { border-color: var(--line-accent); color: var(--text); }
.wp-perm input { width: 14px; height: 14px; accent-color: var(--accent); }
.wp-clear-btn { padding: .3rem .8rem; border-radius: 6px; font-size: .66rem; font-weight: 700;
  font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); cursor: pointer; transition: all .15s ease; }
.wp-clear-btn:hover { border-color: rgba(255,93,108,.5); color: var(--danger); background: rgba(255,93,108,.07); }

/* --- Ranking --- */
.rank-val { color: var(--accent); font-weight: 700; background: var(--accent-dim);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 9px;
  min-width: 2.4rem; text-align: center; font-size: .8rem; }
.preset-chip { padding: .34rem .85rem; border-radius: 6px; font-size: .68rem; font-weight: 600;
  font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); cursor: pointer; transition: all .15s ease; }
.preset-chip:hover { border-color: var(--line-accent); color: var(--text); }
.preset-chip.on {
  background: linear-gradient(135deg, rgba(56,224,255,.16), rgba(31,143,255,.20));
  color: var(--accent-hi); border-color: var(--line-accent);
  box-shadow: inset 0 0 16px rgba(56,224,255,.08), 0 0 12px rgba(56,224,255,.16);
  text-shadow: 0 0 10px rgba(56,224,255,.5);
}

/* --- Cabeçalho da lista --- */
.wp-results-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.wp-count { color: var(--muted); font-size: .68rem; letter-spacing: .18em; font-weight: 600;
  text-transform: uppercase; }

/* --- Score chip --- */
.score-chip { flex: 0 0 auto; min-width: 2.7rem; text-align: center; padding: 2px 9px;
  border-radius: 5px; font-weight: 700; font-size: .8rem; border: 1px solid;
  font-family: var(--font-display); }
.score-hi  { color: var(--ok);    border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.08); }
.score-mid { color: var(--accent); border-color: var(--line-accent);   background: var(--accent-dim); }
.score-lo  { color: var(--muted); border-color: var(--line);           background: rgba(148,163,184,.05); }

/* --- Card de arma --- */
.wc-duration { color: var(--gold); font-weight: 600; font-size: .76rem; letter-spacing: .04em;
  margin-bottom: 6px; }
.wc-hero { height: 140px; background: var(--well); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; position: relative; }
.wc-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 8px;
  background: radial-gradient(200px 70px at 50% 68%, rgba(56,224,255,.06), transparent 75%);
}
.wc-hero img { height: 100%; }
.wc-ammo { text-align: center; font-size: .78rem; color: var(--muted); margin-bottom: 6px;
  letter-spacing: .04em; }
.wc-ammo b { color: var(--text); }
.wc-dim, .cmp-dim { color: #55617a; }
.stat-row { display: grid; grid-template-columns: 6.6rem minmax(0,1fr) 2.3rem; gap: 8px;
  align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(148,163,184,.07); }
.stat-row:last-child { border-bottom: 0; }
.stat-row-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-row-bar { height: 6px; border-radius: 2px; background: var(--well);
  border: 1px solid rgba(148,163,184,.12); overflow: hidden; }
.stat-row-bar i { display: block; height: 100%; border-radius: 1px;
  transition: width .35s cubic-bezier(.2,.7,.3,1); }
.stat-row-v { text-align: right; font-weight: 700; color: var(--text); font-size: .92rem; }

/* --- Comparador --- */
.cmp-name { font-family: var(--font-display); font-size: .88rem; font-weight: 600;
  color: var(--accent); text-align: center; margin-bottom: 8px; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-hero { height: 118px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid var(--line); border-radius: 8px;
  background: radial-gradient(220px 90px at 50% 62%, rgba(56,224,255,.07), transparent 75%), var(--well);
  margin-bottom: 8px; }
.cmp-hero img { max-height: 96px; max-width: 92%; object-fit: contain;
  image-rendering: pixelated; transition: transform .25s ease; }
.comparison-card:hover .cmp-hero img { transform: scale(1.08); }
.cmp-ammo { text-align: center; font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.cmp-ammo b { color: var(--text); }
.cmp-rows { border-top: 1px solid var(--line); padding-top: 4px; }
.cmp-row { display: grid; grid-template-columns: minmax(0,1fr) 2.3rem 2.3rem 2.7rem; gap: 6px;
  align-items: center; padding: 5px 2px; border-bottom: 1px solid rgba(148,163,184,.07); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-l { font-size: .78rem; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .05em; }
.cmp-base { text-align: right; color: var(--muted); font-weight: 600; font-size: .82rem; }
.cmp-up { text-align: right; color: var(--accent); font-weight: 700; font-size: .78rem; }
.cmp-fin { text-align: right; color: var(--gold); font-weight: 800; font-size: 1rem; }
.cmp-row.is-best { background: linear-gradient(90deg, transparent 30%, rgba(61,220,151,.08)); }
.cmp-row.is-best .cmp-fin { color: var(--ok); text-shadow: 0 0 12px rgba(61,220,151,.35); }
.cmp-empty { display: flex; align-items: center; justify-content: center; min-height: 200px; }

/* =====================================================================
   Modal de detalhe da arma
   ===================================================================== */
.wpn-modal {
  position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center;
  padding: 20px 16px; overflow-y: auto;
  background: rgba(3, 5, 10, .8); backdrop-filter: blur(8px);
}
.wpn-modal.hidden { display: none; }
.wpn-panel {
  width: 100%; max-width: 640px; margin: auto;
  max-height: 80vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  border: 1px solid var(--line-strong);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 1px rgba(56,224,255,.06);
  animation: wpnPop .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes wpnPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.wpn-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(56,224,255,.10), transparent 65%);
  flex: 0 0 auto; position: relative;
}
.wpn-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(56,224,255,.5);
}
.wpn-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wpn-head-r { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.wpn-head-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--accent-hi);
  letter-spacing: .03em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpn-head-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
  color: var(--gold); font-weight: 800; font-size: 15px; white-space: nowrap; }
.wpn-head-price small { font-size: 8.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.wpn-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid rgba(255,93,108,.4); background: rgba(255,93,108,.12);
  color: var(--danger); font-size: 18px; line-height: 1; cursor: pointer;
  transition: all .15s ease; }
.wpn-close:hover { background: var(--danger); color: #fff; border-color: transparent; }

.wpn-body { padding: 2px 2px 10px; overflow-y: auto; min-height: 0; }
.wpn-type { color: var(--accent); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: 10px; font-family: var(--font-display);
  border: 1px solid var(--line-accent); border-radius: 4px; padding: 2px 8px;
  white-space: nowrap; flex: 0 0 auto; background: var(--accent-dim); }

.wpn-hero {
  position: relative; height: 128px; margin: 10px 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  background:
    repeating-linear-gradient(-55deg, rgba(56,224,255,.028) 0 2px, transparent 2px 7px),
    radial-gradient(300px 100px at 50% 65%, rgba(56,224,255,.07), transparent 75%),
    var(--well);
  --paint: #38e0ff;
  flex: 0 0 auto;
}
/* cantoneiras do palco */
.wpn-hero::before, .wpn-hero::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--line-accent); pointer-events: none;
}
.wpn-hero::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.wpn-hero::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.wpn-sprite { position: relative; overflow: hidden; image-rendering: pixelated;
  transform-origin: center; filter: drop-shadow(0 6px 10px #000); }
.wpn-sprite img { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; }
.wpn-hero-icon { max-height: 108px; object-fit: contain; transform: scale(1.4);
  filter: drop-shadow(0 6px 10px #000); }
.wpn-sprite-tint { position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply; opacity: 0; transition: opacity .2s; }
.wpn-hero.tinted { border-color: var(--paint);
  box-shadow: inset 0 0 34px -6px var(--paint), 0 0 0 1px color-mix(in srgb, var(--paint) 45%, transparent); }
.wpn-hero.tinted .wpn-sprite-tint { opacity: .72; }

/* barras de stat do modal */
.wd-bars { background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin: 0 14px 10px; }
.wd-bar { display: flex; align-items: center; gap: 10px; padding: 4px 0;
  border-bottom: 1px solid rgba(148,163,184,.07); }
.wd-bar:last-of-type { border-bottom: 0; }
.wd-bl { width: 112px; flex: 0 0 auto; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; }
.wd-bt { flex: 1; height: 10px; background: var(--well); border: 1px solid rgba(148,163,184,.12);
  border-radius: 2px; overflow: hidden; }
.wd-bt i { display: block; height: 100%; border-radius: 1px;
  transition: width .35s cubic-bezier(.2,.7,.3,1); }
.wd-bv { width: 54px; flex: 0 0 auto; text-align: right; font-size: 14px; font-weight: 800; }
.wd-mag { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--line); }
.wd-mag b { color: var(--gold); font-size: 13.5px; font-weight: 800; }

/* meta em grade compacta */
.wd-meta { margin: 0 14px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.wd-drow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid rgba(148,163,184,.07); min-width: 0; }
.wd-drow span { color: var(--muted); white-space: nowrap; letter-spacing: .03em; }
.wd-drow b { color: var(--accent); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.wd-drow b.gold { color: var(--gold); } .wd-drow b.ok { color: var(--ok); }
.wd-drow b.warn { color: #ffb066; } .wd-drow b.red { color: var(--danger); }
.wd-desc { margin: 2px 14px 0; padding: 9px 0 2px; font-size: 13px; line-height: 1.55; color: var(--text-2);
  border-top: 1px solid var(--line);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

/* ---- Weapon customization (Paint + Tuning Bench) ---- */
.wc-paint { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); display: inline-block; }
.wc-socket { background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 4px; text-align: center; }
.wc-socket-img { height: 40px; display: flex; align-items: center; justify-content: center; }
.wc-socket-img img { max-width: 44px; max-height: 40px; object-fit: contain; }
.wc-socket-name { font-size: 11px; font-weight: 700; color: var(--text-2); margin-top: 3px; line-height: 1.1; }
.wc-socket-opt { font-size: 10px; color: var(--accent); }

/* tuning bench (mantido p/ compat) */
.wpn-tuning { margin: 8px 16px 8px; }
.wt-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wt-block:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.wt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.wt-h-ico { font-size: 14px; }
.wt-h-txt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.wt-h-sub { font-size: 12px; color: var(--muted); }
.wt-paint-cur { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.wt-dim { color: #55617a; }
.wt-note { font-size: 11px; color: var(--muted); margin: 7px 0 0; }
.wt-paints { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-paint { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); cursor: pointer; padding: 0;
  transition: transform .12s ease, box-shadow .12s ease; }
.wt-paint:hover { transform: translateY(-2px); }
.wt-paint.sel { box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px currentColor, 0 0 12px currentColor; transform: translateY(-2px); }
.wt-sockets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wt-socket { background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px;
  text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.wt-socket:hover { border-color: var(--line-accent); transform: translateY(-2px); }
.wt-socket.filled { border-color: var(--line-accent); }
.wt-socket.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(56,224,255,.35), 0 0 18px rgba(56,224,255,.2); }
.wt-socket-img { height: 40px; display: flex; align-items: center; justify-content: center; }
.wt-socket-img img { max-width: 44px; max-height: 40px; object-fit: contain; }
.wt-socket-name { font-size: 11px; font-weight: 700; color: var(--text-2); margin-top: 3px; line-height: 1.1; }
.wt-socket-opt { font-size: 10px; color: var(--accent); font-weight: 700; }
.wt-picker { margin-top: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.wt-picker-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.wt-picker-x { width: 22px; height: 22px; border: 0; border-radius: 5px; background: rgba(255,255,255,.08);
  color: var(--text-2); font-size: 16px; line-height: 1; cursor: pointer; }
.wt-picker-x:hover { background: rgba(255,255,255,.16); }
.wt-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px;
  max-height: 236px; overflow-y: auto; padding-right: 2px; }
.wt-opt { background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: 6px 3px;
  cursor: pointer; text-align: center; transition: border-color .12s, transform .1s, box-shadow .12s; }
.wt-opt:hover { transform: translateY(-2px); border-color: var(--line-accent); }
.wt-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(56,224,255,.25); }
.wt-opt-img { height: 34px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; }
.wt-opt-img img { max-width: 34px; max-height: 34px; object-fit: contain; }
.wt-opt-cap { font-size: 10px; font-weight: 700; color: var(--text-2); margin-top: 2px; }
.wt-opt-none .wt-opt-img { color: var(--danger); }

/* ---------- Responsivo ---------- */
@media (max-width: 540px) {
  .wt-sockets { grid-template-columns: repeat(3, 1fr); }
  .wd-bl { width: 92px; font-size: 10.5px; }
  .wpn-panel { max-width: 100%; }
  .wd-meta { grid-template-columns: 1fr; }
  .wpn-head-price small { display: none; }
}

/* ===== sub-abas de seções agrupadas (Gear = Armaduras/Decorações/Asas; Items = Consumíveis/Caixas) ===== */
.group-tabs{display:flex;gap:.35rem;margin:0 0 1rem;flex-wrap:wrap}
.group-tab{padding:7px 18px;border-radius:9px;border:1px solid var(--line-strong);background:var(--well);
  color:#9fb4c8;font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:all .12s}
.group-tab:hover{color:#e7f1f8;border-color:var(--line-accent)}
.group-tab.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}

/* ===== menu mobile: painel SOBRE a página (overlay ancorado no header),
   não empurra o conteúdo. Grid 2 colunas p/ compactar. ===== */
#mobile-menu{
  position:absolute; top:100%; left:0; right:0; z-index:60;
  background:rgba(7,9,14,.96);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 24px 48px rgba(0,0,0,.6);
  max-height:calc(100vh - 72px); overflow-y:auto;
  padding:.8rem 1rem 1rem;
}
#mobile-menu > div{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
#mobile-menu > div > .flex{ grid-column:1 / -1; }
#mobile-menu > div > a{ grid-column:1 / -1; text-align:center; }

/* =====================================================================
   ID DO ITEM — comando !item da Town
   O jogador clica no chip e cola `!item <id>` no chat. Chip discreto no
   canto do card (não rouba leitura do nome/stats) e bloco explícito no
   modal, onde há espaço para o comando inteiro.
   ===================================================================== */
.id-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; border-radius:6px;
  border:1px solid var(--line-strong); background:rgba(8,11,17,.86);
  color:var(--accent); font-family:var(--font-display);
  font-size:11px; font-weight:700; letter-spacing:.06em; line-height:1.5;
  cursor:pointer; transition:all .12s; white-space:nowrap;
}
.id-chip:hover{ border-color:var(--accent); background:var(--accent-dim); box-shadow:var(--glow); }
.id-chip:active{ transform:translateY(1px); }
.id-chip__k{ color:var(--muted); font-size:9px; letter-spacing:.16em; }
/* canto do poço da imagem (weapons / gear / boxes) */
.id-chip--corner{ position:absolute; top:5px; left:5px; z-index:3; }
/* dentro de listas densas (drops de caixa, peças de conjunto) */
.id-chip--sm{ margin-top:3px; padding:1px 5px; font-size:10px; }
.id-chip--sm .id-chip__k{ font-size:8px; }

.id-block{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.75rem; padding:.6rem .75rem; border-radius:var(--radius);
  border:1px solid var(--line-accent); background:var(--well);
}
.id-block__l{ min-width:0; }
.id-block__cap{
  display:block; color:var(--muted); font-family:var(--font-display);
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.id-block__cmd{
  display:block; color:var(--accent); font-family:'Chakra Petch',monospace;
  font-size:1.05rem; font-weight:700; letter-spacing:.04em;
}
.id-block__btn{
  flex:none; padding:6px 14px; border-radius:8px;
  border:1px solid var(--accent); background:var(--accent-dim); color:var(--accent);
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:all .12s;
}
.id-block__btn:hover{ background:var(--accent); color:#04121a; box-shadow:var(--glow); }

.id-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  z-index:200; padding:.6rem 1.1rem; border-radius:10px;
  border:1px solid var(--accent); background:rgba(8,11,17,.96);
  color:var(--accent); font-family:var(--font-display); font-size:13px; font-weight:600;
  box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.id-toast.on{ opacity:1; transform:translate(-50%,0); }
.home-idhint{ margin-top:.5rem; font-size:.9rem; color:var(--text-2); }
.home-idhint b{ color:var(--accent); font-family:var(--font-display); letter-spacing:.03em; }
/* bloco do !item dentro do modal de arma (wpn-panel tem padding proprio) */
.wpn-idwrap:not(:empty){ padding:0 16px; margin-top:12px; }
.wpn-idwrap .id-block{ margin-bottom:0; }

/* =====================================================================
   DOWNLOAD DO LAUNCHER — botao do nav + bloco da home
   ===================================================================== */
.dl-btn{
  background:linear-gradient(180deg, var(--accent-hi), var(--accent));
  border:1px solid var(--accent); color:#04121a !important;
  font-weight:800; letter-spacing:.06em;
  box-shadow:0 4px 14px rgba(56,224,255,.26);
}
.dl-btn:hover{ filter:brightness(1.07); color:#04121a !important; }

.home-dl{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  flex-wrap:wrap; padding:1.1rem 1.25rem; margin:0 0 1.25rem;
  border-color:var(--line-accent) !important;
  background:
    radial-gradient(420px 120px at 82% 50%, rgba(56,224,255,.10), transparent 70%),
    var(--surface-0);
}
.home-dl__l{ min-width:min(100%, 300px); flex:1 1 320px; }
.home-dl__title{
  font-family:var(--font-display); font-size:1.15rem; font-weight:700;
  color:var(--text); letter-spacing:.02em;
}
.home-dl__ver{ color:var(--accent); font-size:.8rem; font-weight:600; letter-spacing:.08em; }
.home-dl__lead{ margin:.25rem 0 0; font-size:.94rem; color:var(--text-2); line-height:1.45; }
.home-dl__note{ margin:.3rem 0 0; font-size:.78rem; color:var(--muted); }
.home-dl__btn{
  flex:none; display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.5rem; border-radius:10px; white-space:nowrap;
  font-family:var(--font-display); font-size:.95rem; font-weight:800; letter-spacing:.04em;
  color:#04121a; background:linear-gradient(180deg, var(--accent-hi), var(--accent));
  border:1px solid var(--accent); box-shadow:0 6px 20px rgba(56,224,255,.3);
  transition:filter .12s, transform .12s;
}
.home-dl__btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
@media (max-width:640px){
  .home-dl{ flex-direction:column; align-items:stretch; text-align:left; }
  .home-dl__btn{ justify-content:center; }
}