/* =====================================================================
   PROJECT METAL — identidade do site (24-10-2026)
   A wiki veste o mesmo padrao do metalproject.online: branco, azul e
   vermelho, titulos em italico grosso, o MESMO topo do portal. Vem depois
   do main.css: troca os tokens dele (que ja pinta quase tudo por var()) e
   remapeia as classes Tailwind escuras que o JS ainda escreve no markup.
   Topo e rodape copiados de Portal/app/static/metal-home.css e
   metal-header.css — ao mexer num, mexer no outro.
   ===================================================================== */

:root {
  --bg-0: #edf2f6;
  --bg-1: #f3f5f7;
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #edf2f8;
  --well: #e8eff7;
  --line: #dbe2eb;
  --line-strong: #b8c8d9;
  --line-accent: rgba(8, 125, 249, .45);
  --accent: #075db8;
  --accent-2: #087df9;
  --accent-hi: #064c98;
  --accent-dim: #e7f1ff;
  --gold: #89621a;
  --ok: #16764a;
  --danger: #c9152c;
  --text: #142536;
  --text-2: #45586b;
  --muted: #526274;
  --glow: 0 5px 14px rgba(8, 125, 249, .10);
  --shadow: 0 14px 34px rgba(20, 37, 54, .16);
  --radius: 3px;
  --metal-blue: #087df9;
  --metal-red: #ed1b35;
  --metal-display: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
  --tier-rookie: #16864f; --tier-elite: #2f6fd6; --tier-master: #a77510;
  color-scheme: light;
}

/* ---------- Base ---------- */
body.metal-site {
  color: var(--text);
  background: #edf2f6 url('../imagens/metal-texture.svg');
}
body.metal-site::before { display: none; }
.metal-site ::selection { background: #cfe3ff; color: var(--text); }
.metal-site * { text-shadow: none !important; }
.metal-site ::-webkit-scrollbar-thumb { background: #b8c8d9; background-clip: padding-box; }
.metal-site :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--metal-blue); outline-offset: 3px; }
.metal-site a { color: inherit; text-decoration: none; }

/* splash */
.metal-site .app-loading { background: #f3f6fa url('../imagens/metal-texture.svg'); }
.metal-site .app-loading__logo { width: 220px; filter: drop-shadow(0 6px 3px #0004); }
.metal-site .app-loading__bar { background: #d5e0eb; height: 3px; }
.metal-site .app-loading__bar span { background: linear-gradient(90deg, var(--metal-blue), var(--metal-red)); }

/* ---------- Topo (igual ao do portal) ---------- */
.metal-icon { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: middle; }
.metal-site header.topo { position: relative; z-index: 40; height: 84px; background: url('../imagens/metal-texture.svg'), linear-gradient(#fff, #f2f6fa); border-bottom: 2px solid #d5e0eb; }
.metal-logo-panel { position: absolute; z-index: 2; inset: 0 auto auto 0; width: 240px; height: 92px; padding: 9px 46px 15px 34px; display: flex; align-items: center; background: linear-gradient(115deg, #152330c9, #304556d9), url('../imagens/metal-texture.svg'); clip-path: polygon(0 0, 100% 0, 81% 100%, 0 100%); }
.metal-logo-panel::before { content: ""; position: absolute; left: 0; top: -20px; height: 130%; width: 24px; transform: skewX(-34deg); background: linear-gradient(90deg, #087df9 0 26%, #0072e8 26% 62%, #ed1b35 62% 100%); box-shadow: 12px 0 0 #e4eaf0, 22px 0 0 #1c2e40, 30px 0 0 #dce6ee; }
.metal-logo-panel::after { content: ""; position: absolute; right: 10%; top: 0; height: 110%; width: 4px; background: #eef4f8; transform: skewX(-32deg); box-shadow: 7px 0 0 #90a5b7, 12px 0 0 #f7fafc; }
.metal-logo-panel img { display: block; width: 100%; height: auto; max-width: 180px; filter: drop-shadow(0 6px 3px #0008); }
.metal-navigation { height: 100%; margin-left: 245px; padding-right: 24px; }
.metal-navigation__toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.metal-navigation__menu { display: none; }
.metal-navigation nav { height: 100%; display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.metal-navigation__links { display: flex; align-items: center; gap: 14px; }
.metal-navigation__links > a { position: relative; display: flex; gap: 6px; align-items: center; padding: 12px 0; font: 13px/1.1 var(--metal-display); text-transform: uppercase; color: #142536; white-space: nowrap; }
.metal-navigation__links > a:hover, .metal-navigation__links > a.is-current { color: #087df9; }
.metal-navigation__links > a.is-current::after { content: ""; position: absolute; bottom: 1px; left: 0; right: 0; height: 3px; background: #087df9; }
.metal-commerce-nav { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.metal-commerce-link { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 10px 14px; color: #fff; font: 14px/1 var(--metal-display); text-transform: uppercase; border: 1px solid #ffffff60; box-shadow: 0 4px 9px #102b491a; }
.metal-commerce-link .metal-icon { width: 19px; height: 19px; }
.metal-commerce-link--shop { background: #0875e6; }
.metal-commerce-link--pass { background: #e51232; }
.metal-commerce-link:hover { color: #fff; filter: brightness(.87); }
.metal-navigation__account { display: flex; align-items: center; gap: 6px; }
.metal-header-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 10px 13px; font: 12px/1.1 var(--metal-display); text-transform: uppercase; white-space: nowrap; color: #142536; border: 0; background: linear-gradient(135deg, #b4c6d7, #fff 15% 85%, #9ab1c6); clip-path: polygon(8% 0, 100% 0, 100% 70%, 92% 100%, 0 100%, 0 30%); box-shadow: inset 0 0 0 1px #a9bdcf; cursor: pointer; }
.metal-header-button--blue { color: #fff; background: linear-gradient(135deg, #2695ff, #0077fc); }
.metal-header-button:hover { color: #075db8; background: #e4effb; }
.metal-header-button--blue:hover { color: #fff; background: #075db8; }
.metal-languages { position: absolute; right: 24px; top: 3px; display: flex; gap: 8px; font: 600 9px/1.1 var(--font-body); }
.metal-languages button { padding: 0; border: 0; background: none; color: #526274; font: inherit; cursor: pointer; }
.metal-languages button.on { color: #075db8; font-weight: 800; }

/* ---------- Barra da wiki (as secoes) ---------- */
.wiki-bar { position: relative; z-index: 30; background: #102b49 url('../imagens/metal-texture.svg'); border-bottom: 3px solid var(--metal-red); }
.wiki-bar__in { width: min(1440px, 92%); margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.metal-site .wiki-bar__title { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 0; color: #fff; font: italic 20px/1 var(--metal-display); text-transform: uppercase; letter-spacing: .01em; }
.wiki-bar__title .metal-icon { width: 20px; height: 20px; color: #5fb0ff; }
.wiki-bar__tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wiki-bar__tabs::-webkit-scrollbar { display: none; }
.metal-site .wiki-bar .nav-btn { padding: 14px 12px 12px; border: 0; border-radius: 0; background: none; color: #c9dbef; font: 14px/1 var(--metal-display); letter-spacing: .02em; }
.metal-site .wiki-bar .nav-btn:hover { color: #fff; background: #ffffff12; }
.metal-site .wiki-bar .nav-btn.active { color: #fff; background: #087df9; }
.metal-site .wiki-bar .nav-btn.active::after { display: none; }

/* ---------- Conteudo ---------- */
.metal-site main { padding-top: 34px !important; padding-bottom: 56px !important; }
.metal-site h1, .metal-site h2, .metal-site h3, .metal-site h4 { color: var(--text); }
.metal-site #category-container h2.text-xl,
.metal-site #category-container h3.text-xl { font: italic 22px/1.15 var(--metal-display); letter-spacing: .01em; color: var(--text) !important; }
.metal-site #category-container h2.text-xl::before,
.metal-site #category-container h3.text-xl::before { width: 6px; background: var(--metal-blue); box-shadow: none; }

/* cartoes: brancos, canto reto, filete azul */
.metal-site .military-card,
.metal-site .weapon-card,
.metal-site .comparison-card,
.metal-site #category-container .rounded-xl.border-blue-500 {
  background: #fff !important;
  border: 1px solid #cfdeec !important;
  border-radius: 3px !important;
  box-shadow: 0 6px 18px rgba(20, 37, 54, .05);
}
.metal-site .military-card { border-top: 3px solid var(--metal-blue) !important; }
.metal-site .weapon-card:hover,
.metal-site .comparison-card:hover,
.metal-site #category-container .rounded-xl.border-blue-500:hover {
  border-color: var(--metal-blue) !important;
  box-shadow: 0 14px 30px rgba(20, 37, 54, .12);
}
.metal-site .military-card::before, .metal-site .military-card::after,
.metal-site .weapon-card::before, .metal-site .weapon-card::after { display: none; }

/* pocos das imagens: o azul claro do provador do portal */
.metal-site #category-container .bg-gray-800,
.metal-site #category-container .bg-gray-700,
.metal-site .wc-hero, .metal-site .cmp-hero, .metal-site .wpn-hero, .metal-site .sk-hero {
  background: radial-gradient(ellipse at 50% 90%, #cfe0f2, transparent 65%), linear-gradient(#f4f8fc, #e2ecf6) !important;
  border-color: #d5e2ef !important;
  border-radius: 3px;
}
.metal-site .wc-hero::before, .metal-site .wpn-hero::before, .metal-site .wpn-hero::after { display: none; }
.metal-site :is(.wd-bars, .wc-socket, .wt-socket, .wt-picker) { background: #f4f8fc; }
.metal-site .wt-picker-x { background: #e6edf5; }

/* formularios */
.metal-site #category-container :is(select, input[type="text"], input[type="number"]) {
  background: #f7faff !important; border-color: #b8c8d9 !important; border-radius: 3px !important; color: var(--text);
}
.metal-site #category-container ::placeholder { color: #64788b; }
.metal-site #category-container input[type="range"] { background: linear-gradient(90deg, #087df9, #d5e0eb); }
.metal-site #category-container input[type="range"]::-webkit-slider-thumb { background: #087df9; border-color: #fff; box-shadow: 0 1px 3px #0003; }
.metal-site #category-container input[type="range"]::-moz-range-thumb { background: #087df9; border-color: #fff; box-shadow: 0 1px 3px #0003; }

/* botoes de categoria, chips e abas internas */
.metal-site #category-container [id$="-tab-inner"],
.metal-site .preset-chip, .metal-site .group-tab {
  background: #fff; color: #294a6a; border: 1px solid #bdcede; border-radius: 0 !important;
  font-family: var(--metal-display); font-weight: 400; font-size: 13px !important; letter-spacing: .02em;
}
.metal-site #category-container [id$="-tab-inner"]:hover,
.metal-site .preset-chip:hover, .metal-site .group-tab:hover { color: #075db8; border-color: #087df9; background: #e7f1ff; }
.metal-site #category-container [id$="-tab-inner"].bg-blue-600,
.metal-site .preset-chip.on, .metal-site .group-tab.on {
  background: #087df9 !important; color: #fff !important; border-color: #087df9; box-shadow: none;
}
.metal-site .wp-perm { background: #f7faff; }
.metal-site .wp-clear-btn:hover { background: #fff0f2; }
.metal-site .score-hi { background: #e9f8ef; border-color: #94c6ac; }
.metal-site .score-lo { background: #f3f6fa; }
.metal-site .cmp-row.is-best { background: linear-gradient(90deg, transparent 30%, #e9f8ef); }
.metal-site .wc-dim, .metal-site .cmp-dim, .metal-site .wt-dim { color: #8193a5; }
.metal-site .stat-row, .metal-site .cmp-row, .metal-site .wd-bar, .metal-site .wd-drow { border-bottom-color: #e3eaf2; }
.metal-site .stat-row-bar, .metal-site .wd-bt { background: #e6edf5; border-color: #d5e0eb; }

/* modal da arma e modais genericos */
.metal-site .wpn-modal, .metal-site #item-detail-modal, .metal-site #img-zoom-modal { background: rgba(16, 43, 73, .55) !important; }
.metal-site .wpn-panel { background: #fff; border: 1px solid #c9d9e8; border-top: 5px solid var(--metal-blue); border-radius: 3px; }
.metal-site .wpn-head { background: #edf4fc; }
.metal-site .wpn-head::before { background: var(--metal-red); box-shadow: none; }
.metal-site .wpn-head-title { color: var(--text); font: italic 20px/1.1 var(--metal-display); }
.metal-site .wpn-close { background: #fff0f2; border-color: #e7a1ac; }
.metal-site #item-detail-modal > div[class*="max-w-2xl"] { background: #fff !important; border: 1px solid #c9d9e8 !important; border-top: 5px solid var(--metal-blue) !important; border-radius: 3px !important; }

/* chip / bloco do !item (wiki ADM) e toast */
.metal-site .id-chip { background: #ffffffe6; }
.metal-site .id-block__btn:hover { color: #fff; }
.metal-site .id-toast { background: #fff; }

/* download do launcher na home */
.metal-site .home-dl { background: #fff url('../imagens/metal-texture.svg'); border-left: 6px solid var(--metal-blue) !important; }
.metal-site .home-dl__title { font: italic 24px/1.1 var(--metal-display); text-transform: uppercase; }
.metal-site .home-dl__btn, .metal-site .dl-btn {
  color: #fff !important; background: #087df9; border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px #fff8;
  clip-path: polygon(7% 0, 100% 0, 100% 70%, 93% 100%, 0 100%, 0 30%);
  font: italic 18px/1.1 var(--metal-display); text-transform: uppercase;
}
.metal-site .home-dl__btn:hover { background: #075db8; filter: none; }
.metal-site .home-hero img.logo { width: 280px; filter: drop-shadow(0 6px 3px #0005); }
.metal-site .home-hero h2 { font: italic clamp(34px, 5vw, 64px)/1 var(--metal-display); letter-spacing: -.01em; color: #111f2a !important; }
.metal-site .home-hero .sub { color: var(--metal-red); letter-spacing: .4em; }

/* ---------- Classes Tailwind escuras escritas pelo JS ---------- */
.metal-site :is(.text-white, .text-gray-100, .text-gray-200) { color: var(--text) !important; }
.metal-site .text-gray-300 { color: var(--text-2) !important; }
.metal-site :is(.text-gray-400, .text-gray-500) { color: var(--muted) !important; }
.metal-site .text-gray-600 { color: #8193a5 !important; }
/* texto branco SOBRE botao/etiqueta de cor continua branco */
.metal-site :is([class*="bg-blue-"], [class*="bg-red-"], [class*="bg-green-"], [class*="bg-emerald-"], [class*="bg-amber-"], [class*="bg-purple-"], [class*="bg-pink-"]):is(.text-white, .text-gray-100, .text-gray-200) { color: #fff !important; }
.metal-site :is(.text-blue-300, .text-blue-400, .text-cyan-200, .text-cyan-300, .text-sky-300) { color: var(--accent) !important; }
.metal-site :is(.text-yellow-300, .text-yellow-400, .text-amber-300, .text-amber-400) { color: var(--gold) !important; }
.metal-site :is(.text-green-300, .text-green-400, .text-emerald-300, .text-emerald-400) { color: var(--ok) !important; }
.metal-site :is(.text-red-300, .text-red-400) { color: var(--danger) !important; }
.metal-site :is(.text-purple-300, .text-purple-400) { color: #7b3fc4 !important; }
.metal-site :is(.text-pink-300, .text-pink-400) { color: #c02a7a !important; }
.metal-site :is(.text-orange-300, .text-orange-400) { color: #b85a0d !important; }
.metal-site :is(.bg-gray-900, .bg-gray-800, [class*="bg-gray-900/"], [class*="bg-gray-800/"]) { background-color: #fff !important; }
.metal-site :is(.bg-gray-700, .bg-gray-600) { background-color: #edf2f8 !important; }
.metal-site :is([class*="bg-black/"]) { background-color: #f1f5fa !important; }
.metal-site [class*="bg-[#0b1622]"] { background-color: #fff !important; }
.metal-site :is(.border-gray-500, .border-gray-600, .border-gray-700, .border-gray-800, [class*="border-gray-700/"]) { border-color: var(--line) !important; }
.metal-site :is([class*="border-cyan-"], .border-blue-500, [class*="border-blue-500/"]) { border-color: #9cc4ec !important; }
.metal-site [class*="from-cyan-900"], .metal-site .from-gray-800 { --tw-gradient-from: #e7f1ff !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.metal-site .to-gray-900 { --tw-gradient-to: #fff !important; }
.metal-site :is(.bg-red-900, .bg-amber-900) { color: #fff; }

/* ---------- Rodape (igual ao do portal) ---------- */
.metal-site .site-footer { margin-top: auto; padding: 22px 0; background: #102b49 url('../imagens/metal-texture.svg'); border-top: 5px solid var(--metal-red); color: #dce9f9; }
.metal-site .site-footer .foot { width: min(1440px, 92%); margin: 0 auto; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: .85rem; }
.metal-site .site-footer a { color: #dce9f9; }
.metal-site .site-footer a:hover { color: #fff; text-decoration: underline; }
.metal-site .site-footer .spacer { flex: 1; }

/* ---------- Telas menores ---------- */
@media (min-width: 1600px) {
  .metal-navigation__links { gap: 22px; }
  .metal-navigation__links > a { font-size: 15px; }
  .metal-logo-panel { width: 265px; padding-left: 42px; }
  .metal-navigation { margin-left: 275px; }
}
@media (max-width: 1240px) {
  .metal-site header.topo { height: 72px; }
  .metal-logo-panel { width: 220px; height: 78px; padding: 8px 40px 12px 30px; }
  .metal-navigation { margin-left: 220px; padding: 0; }
  .metal-navigation__menu { position: absolute; top: 17px; right: 24px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #c0d0df; color: #142536; cursor: pointer; }
  .metal-navigation__menu span, .metal-navigation__menu span::before, .metal-navigation__menu span::after { display: block; width: 20px; height: 2px; background: currentColor; }
  .metal-navigation__menu span { position: relative; }
  .metal-navigation__menu span::before, .metal-navigation__menu span::after { content: ""; position: absolute; left: 0; }
  .metal-navigation__menu span::before { top: -6px; }
  .metal-navigation__menu span::after { top: 6px; }
  .metal-navigation nav.principal { display: block; position: absolute; top: 100%; right: 0; left: 0; height: 0; padding: 0; z-index: 5; }
  .metal-navigation nav > :not(.metal-commerce-nav) { display: none; }
  .metal-commerce-nav { position: absolute; top: -57px; right: 78px; margin: 0; }
  .metal-commerce-link { min-height: 40px; }
  .metal-navigation__toggle:checked ~ nav.principal { height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 5%; background: #fff; box-shadow: 0 14px 24px #14253622; }
  .metal-navigation__toggle:checked ~ nav > .metal-navigation__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .metal-navigation__toggle:checked ~ nav > .metal-navigation__account { display: flex; }
  .metal-navigation__toggle:checked ~ nav > .metal-languages { display: flex; position: static; font-size: 12px; }
  .metal-navigation__links > a { font-size: 16px; }
}
@media (max-width: 600px) {
  .metal-site header.topo { height: 66px; }
  .metal-logo-panel { width: 150px; height: 70px; padding: 10px 26px 13px 21px; }
  .metal-logo-panel::before { width: 14px; box-shadow: 6px 0 #e4eaf0, 11px 0 #1c2e40; }
  .metal-logo-panel::after { display: none; }
  .metal-navigation { margin-left: 150px; }
  .metal-navigation__menu { right: 14px; top: 15px; width: 34px; height: 34px; }
  .metal-commerce-nav { top: -50px; right: 58px; gap: 5px; }
  .metal-commerce-link { min-height: 34px; font-size: 12px; padding: 9px; gap: 5px; }
  .metal-commerce-link .metal-icon { width: 14px; height: 14px; }
  .metal-navigation__toggle:checked ~ nav > .metal-navigation__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metal-site .wiki-bar__title { display: none; }
}
@media (max-width: 360px) {
  .metal-logo-panel { width: 125px; padding-left: 16px; padding-right: 22px; }
  .metal-commerce-link { font-size: 11px; padding: 9px 7px; }
  .metal-commerce-link .metal-icon { display: none; }
}