/* ═══════════════════════════════════════════════════════════════════════════════════════
   👑 DS v2 "GAMER" — dist/site/css/ds.css · a FUNDAÇÃO do site (D1, 25/08/2026)
   Este arquivo carrega PRIMEIRO em todas as páginas do site (6 telas + wiki). Aqui MORAM
   os tokens e os componentes canônicos; as folhas por tela só USAM (layout contextual:
   width/margin/grid-area). O glass.css ficou com o que é identidade de EFEITO (carta v2,
   marquee, shimmer, pavio, px-tear).

   REGRA DO BOTÃO-IMAGEM (registrada aqui por decisão do plano DS v2 §2):
   o site é i18n (5 idiomas), então IMAGEM com texto queimado SÓ para palavra universal
   (ex.: DISCORD). Todo rótulo traduzível usa .btn--gold em CSS que imita o estilo do kit.
   btn-wide do kit é ARTE (mascote): nunca esticar, nunca 9-slice em cima de mascote.

   Camadas: tokens → base → components → utils. As folhas por tela ficam FORA de layer de
   propósito — é o que deixa o layout contextual delas vencer sem !important. A proibição
   de override VISUAL é policiada por scripts/lint-ds.mjs + scripts/_e2e-ds.mjs, não pela
   cascata (cascata não distingue "mudou a largura" de "mudou a cara").

   🌉 A PONTE (F0 · 03/09 — Giba: *"o servidor manda; paleta = a do tel4/tel16"*):
   os TOKENS DE COR não nascem mais aqui. O dono é `dist/v2/theme.css` (a paleta ardósia +
   ouro que o jogador já vê dentro do jogo, e as raridades GERADAS do servidor), importado
   na linha 1 em `layer(tokens)`. Aqui os nomes do kit (`--au-400 --void-900 --panel…`)
   viram ALIAS da paleta central: trocar a paleta lá retinta o site inteiro sem tocar
   nenhuma folha. Escala não-cor (--sp-* --fs-* --r-* --z-*, sombras) continua sendo daqui.
   ⚠️ `@import … layer()` não existe em Safari < 15.4 — fallback é `<link theme.css>` antes
      do ds.css nas páginas (edição mecânica, ainda não feita).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@import url("/v2/theme.css") layer(tokens);
@layer tokens, base, components, utils;

@layer tokens {
:root {
  /* ── primitivos que NÃO têm par na paleta central (sinal, fogo, ametista) ─────────── */
  --am-400: #a56bff;            /* ametista — destaque secundário (a cor da BombCoin) */
  --cy-400: #4fd8ff;
  --good: #5fe08a; --warn: #ffb648; --crit: #ff5f7a;
  /* o âmbar do POWDER & SPARK foi DEMOVIDO: agora é --ember, reservado a fogo/explosão/
     pavio (a identidade do jogo é bomba — a explosão continua âmbar; o CHROME vira ouro) */
  --ember: #ff8a1e; --ember-2: #ff6a00;

  /* ── os nomes do kit lobby-v5 → ALIAS da paleta central (theme.css) ───────────────── */
  --au-400: var(--accent);                                   /* ouro = o accent do reino */
  --au-600: color-mix(in srgb, var(--accent) 72%, var(--bg)); /* o ouro escuro (base do CTA) */
  --void-900: var(--bg);
  --void-700: var(--bg2);

  /* ── semânticos → ALIAS (--bg --border --text vêm DIRETO do theme.css: não redeclarar) ── */
  --bg-2: var(--bg2);
  --panel: var(--card);
  --elevated: var(--card-elev);
  --text-dim: var(--text2);
  --text-mute: color-mix(in srgb, var(--text2) 70%, transparent);

  /* ── ALIASES 1:1 com os nomes velhos do glass.css — é a retinta em massa: cada regra
     antiga que pedia var(--primary) passa a receber o ouro do kit sem ser tocada ──────── */
  --primary: var(--au-400);     /* era #ff8a1e (âmbar) */
  --primary-2: var(--au-600);   /* era #ff6a00 */
  --spark: var(--au-400);
  --gold: var(--au-400);        /* era #ffcf4d */
  /* 🎲 30/08 → 💎 03/09 — AS CORES DE RARIDADE (`--rar-*`) vêm do theme.css, GERADAS do
     `CATALOGO` do servidor (scripts/gera-raridades-css.mjs). Aqui só sobrevivem os nomes
     curtos legados (--common … --divine) como alias — mesma cor, um dono só. */
  --cyan: var(--cy-400);
  --rift: var(--am-400);
  --magenta: #d946ef;
  --orange: var(--ember);
  --green: var(--good);
  --red: var(--crit);

  --common: var(--rar-common); --uncommon: var(--rar-uncommon); --rare: var(--rar-rare);
  --srare: var(--rar-srare); --epic: var(--rar-epic); --legend: var(--rar-legend);
  --mythic: var(--rar-mythic); --divine: var(--rar-divine);

  /* ── espaço (base 4px) ────────────────────────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ── tipo (mobile-first, PISO 14px — régua dos óculos do Giba, 03/09; era 12/13) ──── */
  --fs-1: 14px; --fs-2: 14px; --fs-3: 15px; --fs-4: 17px; --fs-5: 20px; --fs-6: 24px;
  --fs-7: clamp(26px, 5vw, 34px);
  --fs-8: clamp(32px, 7vw, 46px);

  /* fontes: as MESMAS do lobby-v5 — o kit é a língua de TUDO */
  --font-d: 'Baloo 2', system-ui, sans-serif;      /* display */
  --font-b: 'Rubik', system-ui, sans-serif;        /* corpo */
  /* aliases dos nomes velhos (glass/mercado): a troca de família acontece AQUI */
  --font-head: var(--font-d);   /* era Space Grotesk */
  --font-body: var(--font-b);   /* era Inter */
  --font-ui: var(--font-b);     /* era Inter (definida tarde demais no mercado.css) */
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;
  --font-px: 'Press Start 2P', var(--font-d), monospace;  /* SÓ em HUD/números ASCII */

  /* ── raios ────────────────────────────────────────────────────────────────────────── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --radius: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl);

  /* ── sombras (recalibradas pra ouro/ametista) ─────────────────────────────────────── */
  --shadow: 0 18px 44px rgba(0, 0, 0, .55);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .45);
  --glow-gold: 0 0 46px color-mix(in srgb, var(--accent) 45%, transparent);
  --glow-am: 0 0 34px color-mix(in srgb, var(--am-400) 40%, transparent);
  --glow: var(--glow-gold);

  /* ── escala Z — z-index literal fora do ds.css é lint FALHO (mata o 9999 do banner) ── */
  --z-head: 100; --z-rail: 110; --z-drawer: 120;
  --z-login: 200; --z-modal: 220; --z-toast: 300; --z-banner: 400;
  /* 🎓 30/08 — o TUTORIAL fica acima de tudo: ele congela a tela e ensina. Um banner por
     cima do holofote roubaria justamente o foco que o tutorial existe pra dar. */
  --z-tutorial: 500;

  /* ── safe-area (padrão do lobby; as páginas têm viewport-fit=cover) ───────────────── */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
}

/* ═══════════════════ BASE ═══════════════════ */
@layer base {
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: min(1240px, 92vw); margin-inline: auto; }
.wide { width: min(1600px, 94vw); margin-inline: auto; }

.dim { color: var(--text-mute); }
.lead { font-size: var(--fs-3); line-height: 1.65; color: var(--text-dim); margin: 0 0 10px; }
}

/* ═══════════════════ COMPONENTES ═══════════════════ */
@layer components {

/* ---------- BOTÃO — 1 definição, variantes por classe, override visual PROIBIDO ------
   Alvo de toque: min-height 48px (mobile-first). Sombra dura arcade mantida do v4. */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
  min-height: 48px;
  font-family: var(--font-d); font-weight: 700; font-size: var(--fs-2);
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .2s, filter .2s; white-space: nowrap;
  position: relative; overflow: hidden;
  color: var(--text); background: rgba(255, 255, 255, .05);
}
/* tamanhos — .btn--sm SÓ em contexto denso (>=640) */
.btn--sm, .btn-sm { min-height: 40px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-1); }
.btn--lg, .btn-lg { min-height: 56px; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-3); border-radius: 10px; }

/* sweep de luz nos CTAs */
.btn--gold::after, .btn-primary::after, .btn-gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); transition: left .5s ease;
}
.btn--gold:hover::after, .btn-primary:hover::after, .btn-gold:hover::after { left: 130%; }

/* GOLD — o CTA primário: gradiente ouro imitando o btn-cta do kit.
   ⚠️ .btn-primary e .btn-gold são ALIASES TEMPORÁRIOS (morrem no D6): o primário do site
   agora É ouro — o âmbar virou --ember e ficou pro fogo. */
.btn--gold, .btn-primary, .btn-gold {
  background: linear-gradient(180deg, #ffe08a, var(--au-400) 55%, var(--au-600));
  color: #3a2300; border-color: #8a5e08;
  box-shadow: 0 5px 0 #6e4a05, 0 10px 24px color-mix(in srgb, var(--au-600) 35%, transparent), inset 0 2px 0 rgba(255, 255, 255, .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.btn--gold:hover, .btn-primary:hover, .btn-gold:hover {
  filter: brightness(1.06); transform: translateY(-2px);
  box-shadow: 0 7px 0 #6e4a05, 0 14px 30px color-mix(in srgb, var(--au-600) 50%, transparent), inset 0 2px 0 rgba(255, 255, 255, .5);
}
.btn--gold:active, .btn-primary:active, .btn-gold:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #6e4a05, 0 6px 14px color-mix(in srgb, var(--au-600) 35%, transparent), inset 0 2px 0 rgba(255, 255, 255, .4);
}

/* GHOST — contorno sobre o void */
.btn--ghost, .btn-ghost {
  background: rgba(255, 255, 255, .04); color: var(--text);
  border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(8px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45);
}
.btn--ghost:hover, .btn-ghost:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .45);
}
.btn--ghost:active, .btn-ghost:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }

/* VOID — o botão escuro da família ametista (secundário sobre painel claro) */
.btn--void {
  background: linear-gradient(180deg, var(--elevated), var(--bg-2));
  color: var(--text); border-color: var(--border);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--bg) 70%, transparent), 0 10px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.btn--void:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 7px 0 color-mix(in srgb, var(--bg) 70%, transparent), 0 14px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1); }
.btn--void:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--bg) 70%, transparent); }

/* DANGER — vendia .btn-danger no mercado.css; agora mora aqui com o resto da família */
.btn--danger, .btn-danger {
  background: linear-gradient(180deg, #ff7a92, var(--crit) 55%, #d92b4a);
  color: #fff; border-color: #8d1430;
  box-shadow: 0 5px 0 #6d0f24, 0 10px 24px color-mix(in srgb, var(--crit) 30%, transparent), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.btn--danger:hover, .btn-danger:hover { filter: brightness(1.07); transform: translateY(-2px); }
.btn--danger:active, .btn-danger:active { transform: translateY(3px); box-shadow: 0 2px 0 #6d0f24; }

/* BOTÃO-IMAGEM do kit (btn-wide): é ARTE — <a class="btn-img"><img srcset …></a>.
   Nunca esticar, nunca 9-slice em cima de mascote (regra no topo do arquivo). */
.btn-img { display: inline-block; cursor: pointer; transition: transform .15s, filter .2s; }
.btn-img img { display: block; width: 100%; height: auto; }
.btn-img:hover { transform: translateY(-3px); filter: brightness(1.08) drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }
.btn-img:active { transform: translateY(1px); }

/* ---------- PAINEL — o cartão de painel (antes duplicado em mercado/perfil/carteira) -- */
.painel {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-elev) 55%, transparent), color-mix(in srgb, var(--card) 72%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .07);
  padding: var(--sp-5);
}
/* skins — a moldura 9-slice vem de dist/assets/ds/frame-*.webp (gera-9slice-ds.mjs).
   fill round: a arte da borda repete sem esticar; o miolo é pintado pelo background. */
.painel--ouro {
  /* slice 80 = o terço exato do quadro 240×240 (cantos caem inteiros nos cantos) */
  border: 24px solid transparent;
  border-image: url('/assets/ds/frame-gold.webp') 80 fill / 24px round;
  border-radius: 0; background: none;
  box-shadow: var(--shadow-sm), var(--glow-gold);
}
.painel--ametista {
  border-color: color-mix(in srgb, var(--am-400) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--am-400) 12%, transparent), color-mix(in srgb, var(--card) 80%, transparent));
  box-shadow: var(--shadow-sm), var(--glow-am);
}
.painel--void {
  border: 24px solid transparent;
  border-image: url('/assets/ds/frame-void.webp') 80 fill / 24px round;
  border-radius: 0; background: none;
}

/* ---------- VIDRO ESPELHADO — a receita do proto-ds (proto-ds.css:93-107) na paleta central
   (F0 · 03/09). blur(20px) saturate(165%), gradiente de 3 paradas a 158°, brilho diagonal a
   115° no ::before e TRÊS sombras (externa + fio de luz + halo interno). Dono ÚNICO do
   .glass no site: o glass.css perdeu a cópia dele (blur 14px) e o marketplace.css a dele.
   TODA cor sai de token via color-mix — zero hex. ------------------------------------- */
.glass {
  position: relative; border-radius: var(--r-xl);
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--accent) 10%, transparent),
    color-mix(in srgb, var(--am-400) 5%, transparent) 52%,
    color-mix(in srgb, var(--accent) 7%, transparent));
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--bg) 55%, transparent),
    inset 0 1.5px 0 color-mix(in srgb, var(--text) 16%, transparent),
    inset 0 0 26px color-mix(in srgb, var(--accent) 5%, transparent);
}
/* ✨ o brilho diagonal: a luz que atravessa o vidro de canto a canto */
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--text) 18%, transparent) 0%,
    color-mix(in srgb, var(--text) 5%, transparent) 16%,
    transparent 38%, transparent 82%,
    color-mix(in srgb, var(--accent) 7%, transparent) 100%);
}
.glass-forte {
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--am-400) 7%, transparent) 55%,
    color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:
    0 22px 56px color-mix(in srgb, var(--bg) 60%, transparent),
    inset 0 2px 0 color-mix(in srgb, var(--text) 40%, transparent),
    inset 0 0 34px color-mix(in srgb, var(--accent) 7%, transparent);
}
.glass-escuro {
  background: linear-gradient(180deg, var(--escuro-1), var(--escuro-2));
  border: 1px solid color-mix(in srgb, var(--border) 24%, transparent);
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--bg) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent);
}
/* 🧱 TILE (pedido do F3, atendido no F9 · 03/09) — a caixinha escura DENTRO de um vidro:
   linha do extrato, item da lista, slot, célula do placar. Até aqui esse papel era do
   `.glass-escuro` (40+ lugares), que é um MODIFICADOR de .glass (pede o .glass junto pra ter
   raio e posição) — e cada tela repunha o raio e o padding por conta própria. O .tile é a
   mesma tinta do .glass-escuro (proto-ds.css:90) já com a geometria: raio médio, padding do
   DS, sem blur (a tinta é ~90% opaca, o blur seria invisível e custaria GPU). Zero hex. */
.tile {
  position: relative; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card) 92%, transparent),
    color-mix(in srgb, var(--card-elev) 74%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 24%, transparent);
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--bg) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
}
.tile.on, .tile[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent); }
/* 🃏 o card que levanta — a curva do proto-ds; o hover só onde existe hover (no toque ele
   colaria depois do tap: o card ficava levantado até tocar em outra coisa) */
.card-h { transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, border-color .18s; }
@media (hover: hover) {
  .card-h:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 64px color-mix(in srgb, var(--bg) 65%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  }
}
/* o utilitário de padding do proto (`glass card`) — NÃO é a carta v2 do glass.css */
.card { padding: 11px 13px; overflow: hidden; }

/* ---------- CHIP — filtro/toggle na geometria do proto-ds (proto-ds.css:416-425): pílula,
   ativo em degradê de ouro, e `[data-rar]` pinta pela raridade do servidor via `--rar`.
   Alvo 44px e fonte 14px (régua dos óculos) em vez dos 11.5px do proto. ------------------ */
.chip {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 13px; border-radius: var(--r-pill);
  font: 800 var(--fs-2) var(--font-d); color: var(--text-dim);
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.chip.on {
  color: var(--bg); background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border-color: color-mix(in srgb, var(--accent-hover) 65%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 26%, transparent);
}
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip[data-rar] { --rar: var(--rar-common); }
/* `data-rar=""` é o "toda raridade" do marketplace: não é uma raridade, é o chip normal (ouro) */
.chip[data-rar=""] { --rar: var(--accent); }
.chip[data-rar="uncommon"] { --rar: var(--rar-uncommon); }
.chip[data-rar="rare"] { --rar: var(--rar-rare); }
.chip[data-rar="srare"] { --rar: var(--rar-srare); }
.chip[data-rar="epic"] { --rar: var(--rar-epic); }
.chip[data-rar="legend"] { --rar: var(--rar-legend); }
.chip[data-rar="mythic"] { --rar: var(--rar-mythic); }
.chip[data-rar="divine"] { --rar: var(--rar-divine); }
.chip[data-rar]:not([data-rar=""]).on {
  color: var(--text); background: color-mix(in srgb, var(--rar) 72%, var(--bg)); border-color: var(--rar);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--rar) 30%, transparent);
}
@media (hover: hover) {
  .chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
}

/* ---------- TABS ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); }
.tab {
  all: unset; cursor: pointer; padding: var(--sp-3) var(--sp-4); min-height: 48px;
  display: inline-flex; align-items: center;
  font-family: var(--font-d); font-weight: 700; font-size: var(--fs-2);
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute);
  border-bottom: 3px solid transparent; transition: color .2s, border-color .2s, background .2s;
}
.tab:hover { color: var(--text-dim); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tab.on { color: var(--gold); border-bottom-color: var(--au-400); background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* ---------- FORM — alvo 48px ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font: 700 var(--fs-2) var(--font-ui); color: var(--text-dim); }
/* 🏷️ o rótulo-em-coluna é DONO do campo que carrega (pedido do F3, F9 · 03/09): o filho
   ocupa a largura toda, e um <input>/<select> que ainda não recebeu a classe .input/.select
   (os modais velhos do marketplace) ganha a MESMA cara — o `.lb` do mercado.css era a cópia
   disso; agora a receita mora aqui e o `.lb` pode virar alias. `:not(.input)` porque um
   campo classado tem UM dono. */
.field > input, .field > select, .field > textarea, .field > .input, .field > .select { width: 100%; }
.field > input:not(.input), .field > select:not(.select), .field > textarea {
  font: 600 var(--fs-3) var(--font-ui); color: var(--text);
  background: color-mix(in srgb, var(--bg) 35%, transparent); border: 1px solid var(--border);
  border-radius: 9px; padding: var(--sp-3) var(--sp-4); min-height: 48px;
}
.field > input:not(.input):focus, .field > select:not(.select):focus, .field > textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.field > .dica { font: 500 var(--fs-1) var(--font-ui); color: var(--text-mute); }
.input, .select {
  font: 600 var(--fs-3) var(--font-ui); color: var(--text);
  background: rgba(0, 0, 0, .35); border: 1px solid var(--border);
  border-radius: 9px; padding: var(--sp-3) var(--sp-4); min-height: 48px;
}
.input:focus, .select:focus {
  outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.select { cursor: pointer; }

/* ---------- BADGES / PILLS (migradas do glass.css L217-236) ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-1); font-weight: 700; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: var(--text-dim); }
/* o selo de raridade: fundo = a cor do servidor (quem monta passa `--rar`), tinta escura da paleta */
.badge-rar { color: var(--bg); background: var(--rar, var(--rar-common)); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-1);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 4px; }
/* 💊 PILL de moeda/recurso na geometria do proto-ds (proto-ds.css:141-152): pílula 999px,
   degradê vertical escuro, fio de luz interno. inline-flex (não flex) porque ela vive no
   meio de texto nas regras da carteira. */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px; border-radius: var(--r-pill);
  font: 800 var(--fs-2) var(--font-b); color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--card) 72%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 24%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent); }
.pill img { width: 19px; height: 19px; }
/* 🎨 os estados da pill moram junto do dono (cicatriz: dois donos pro mesmo pixel) */
.pill.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.pill.espera { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pill.off { color: var(--text-mute); }
/* 💬 PILL COM FRASE (pedido do F3, F9 · 03/09): "Um CPF por conta", "Só maiores de 18". A
   pill de moeda é caixa-alta apertada e nunca quebra; uma frase nela ficava gritando. Aqui
   ela relaxa: fonte de UI, sem versalete, quebra linha, alinha no topo pra lista de regras. */
.pill--texto { font: 600 var(--fs-2)/1.35 var(--font-ui); color: var(--text-dim); letter-spacing: 0; text-transform: none;
  white-space: normal; padding: 7px 14px; align-items: flex-start; text-align: left; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); animation: ds-pulse 1.8s infinite; }
@keyframes ds-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-1); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, #fff 0 20%, var(--au-400) 50%, var(--au-600) 100%);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 80%, transparent); }

/* ---------- ESTADO VAZIO — a régua da casa: o que está acontecendo + por que + o que
   fazer, numa frase na linguagem do jogo. Slot de mascote do kit opcional (.empty img). */
.empty { padding: var(--sp-6) var(--sp-5); text-align: center; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; color: var(--text-dim); }
.empty img { width: 96px; height: auto; image-rendering: auto; opacity: .9; }
.empty b { font-family: var(--font-d); font-size: var(--fs-4); color: var(--text); }
.empty p { margin: 0; font-size: var(--fs-2); max-width: 44ch; line-height: 1.6; }

/* ---------- MODAL genérico #ov (movido do mercado.css L255-268) ---------- */
.ov { position: fixed; inset: 0; z-index: var(--z-modal); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: var(--sp-4); }
/* ⚠️ `display:grid` VENCE o atributo `hidden` — sem esta linha o modal nasce aberto */
.ov[hidden] { display: none; }
.ov-card { width: min(520px, 96vw); padding: var(--sp-5); border-radius: var(--r-lg); max-height: 90vh; overflow: auto; }
.ov-card h3 { font-family: var(--font-head); font-size: var(--fs-6); margin: 0 0 10px; }
.ov-card p { font-size: var(--fs-3); line-height: 1.6; margin: 0 0 10px; }
.ov-card .big { font-family: var(--font-head); font-size: 30px; color: var(--gold); margin: 6px 0 12px; }
.ov-card code { font: 600 var(--fs-1) var(--font-mono); background: rgba(0, 0, 0, .4); padding: 3px 6px; border-radius: 5px; word-break: break-all; }
.ov-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.passos { font-size: var(--fs-3); line-height: 1.7; padding-left: 20px; margin: 8px 0 12px; color: var(--text-dim); }
.moeda-pick { display: flex; gap: 8px; margin: 12px 0; }

/* ---------- MODAL DAS 3 PORTAS (movido do mercado.css L399-457 — o login-modal.js roda
   em TODAS as telas, então o estilo dele mora no arquivo que todas carregam) ---------- */
.lg-modal [hidden] { display: none !important; }
.lg-modal { position: relative; display: flex; flex-direction: column; gap: 18px;
  width: min(460px, 94vw); padding: 30px 28px 26px; }
.lg-x { all: unset; cursor: pointer; position: absolute; top: 14px; right: 16px;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm);
  color: var(--text-mute); font-size: var(--fs-3); }
.lg-x:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.lg-head { text-align: center; }
.lg-head img { image-rendering: pixelated; margin: 0 auto 8px; display: block; }
.lg-head h2 { font-family: var(--font-head); font-size: 23px; margin: 0 0 6px; }
.lg-head p { font-size: var(--fs-2); margin: 0; line-height: 1.5; }
.lg-portas { display: flex; flex-direction: column; gap: 10px; }
.lg-porta { all: unset; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border-radius: 13px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  transition: border-color .18s, transform .18s, background .18s; }
.lg-porta:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-2px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
.lg-porta img { image-rendering: pixelated; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.lg-porta > div { min-width: 0; }
.lg-porta b { display: block; font-size: var(--fs-3); color: var(--text); line-height: 1.25; }
.lg-porta span { display: block; font-size: var(--fs-1); color: var(--text-dim); margin-top: 3px; line-height: 1.35; }
.lg-codigo { display: flex; flex-direction: column; gap: 8px; }
.lg-volta { all: unset; cursor: pointer; align-self: flex-start; font: 700 var(--fs-1) var(--font-ui);
  color: var(--text-dim); padding: var(--sp-2) 2px; min-height: 44px; display: inline-flex; align-items: center; }
.lg-volta:hover { color: var(--gold); }
.lg-codigo label { font-size: var(--fs-2); color: var(--text-dim); }
.lg-codigo input { font: 800 var(--fs-4) var(--font-ui); letter-spacing: .12em; text-align: center;
  padding: 13px 12px; border-radius: 11px; border: 1px solid var(--border);
  background: rgba(0, 0, 0, .42); color: var(--text); text-transform: uppercase; }
.lg-codigo input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.lg-msg { min-height: 17px; font-size: var(--fs-1); text-align: center; }
.lg-msg.bom { color: var(--good); }
.lg-msg.ruim { color: var(--crit); }
.lg-aviso { font-size: var(--fs-2); line-height: 1.5; color: var(--text-dim); padding: 12px 14px;
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.lg-discord { background: linear-gradient(180deg, #6b7cf0, #4a5bd4); color: #eef1ff;
  border: 1px solid rgba(255, 255, 255, .16); text-shadow: 0 2px 4px rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center; }
.lg-discord:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.lg-discord:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.lg-aceites { display: flex; flex-direction: column; gap: 11px; }
.lg-aceites label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: var(--fs-2); line-height: 1.45; color: var(--text-dim); }
.lg-aceites input { margin-top: 2px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--gold); cursor: pointer; }
.lg-aceites label:hover { color: var(--text); }
.lg-aceites a { color: var(--gold); text-decoration: underline; }
#lgGoogle { margin-top: 4px; width: 100%; justify-content: center; }
#lgGoogle:disabled { opacity: .42; cursor: not-allowed; }
.lg-nota { font-size: var(--fs-1); text-align: center; margin: 0; }

/* ---------- HEADER CANÔNICO — UM header vivo, injetado pelo site-core (S.montaCabeca v2)
   em <div id="siteHead">. Estilo movido do landing.css (que agora só carrega na home). --- */
body { padding-top: calc(66px + var(--safe-t)); }
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-head);
  padding-top: var(--safe-t);
  border-bottom: 1px solid color-mix(in srgb, var(--am-400) 18%, transparent); }
/* 🧊 03/09 (D-1b): o vidro do header mora num ::before, NÃO no header.
   🔴 O que acontecia: `backdrop-filter` no próprio header faz dele o "containing block" de
      todo descendente `position: fixed` (spec do filter). A `.nav-fixa`, que em ≤640 é fixa
      no PÉ da tela, ficava presa dentro dos 66px do header, em cima da logo (shot 360 do
      D-1). Num pseudo-elemento o blur é o mesmo e o header deixa de prender os filhos. */
.site-head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%); }
/* 🎮 no jogo o cockpit-premium.css desliga o blur do header (GPU do palco) e pinta o fundo
   opaco NELE — então o vidro do ::before some junto, senão o custo voltaria pela porta dos fundos. */
body[data-tela="jogo"] .site-head::before { display: none; }
.site-head .inner { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head);
  font-weight: 800; font-size: 18px; letter-spacing: .02em; white-space: nowrap; }
.brand img { height: 34px; width: auto; }
/* 📱 03/09 (D-1, Bloco 3) — A BARRA É UMA SÓ: Home · Highscore · BCDs · Marketplace.
   🔴 O que existia: 3 fixos + um sanduíche com Novidades/Wiki/Carteira/Stake. No celular
      (≤640) a barra fixa SUMIA e sobrava só o ☰ — o menu principal do site vivia atrás de
      um toque, e as duas telas de dinheiro (Carteira, Stake) atrás de um cadeado.
   ✅ Agora: Novidades é seção da home, Wiki está no rodapé, Carteira e Geradora (o Stake)
      moram no PERFIL. Os 4 que sobraram cabem no topo no desktop e, no celular, viram uma
      régua de 4 abas no PÉ da tela (ícone + rótulo, 56px, zona do polegar). O header
      continua com 66px em toda largura — o cockpit (`inset: 66px 0 0`) depende disso.
   🎮 Na tela do jogo (`data-tela="jogo"`) a régua do pé NÃO aparece no celular: o cockpit é
      tela cheia e tem os atalhos dele; era assim que estava (a barra já sumia em ≤640). */
.nav-fixa { display: flex; align-items: center; gap: 2px; margin-left: var(--sp-2); }
.nav-fixa a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-1); font-weight: 700;
  color: var(--text-dim); padding: 8px 10px; border-radius: var(--r-sm); white-space: nowrap; transition: color .2s, background .2s; }
.nav-fixa a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.nav-fixa a.on { color: var(--text); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.nav-fixa .nav-ico { display: none; width: 22px; height: 22px; flex: none; }
.nav-fixa a .mini-tag { font-size: var(--fs-1); font-weight: 800; color: var(--bg); background: var(--gold);
  border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: 2px; letter-spacing: .04em; }
/* 🔒 o cadeado de um destino em construção (hoje nenhum; a régua `lock: 1` continua válida).
   `currentColor` de propósito: acompanha o link em todos os estados sem uma segunda cor. */
.nav-fixa a .nav-lock { width: 13px; height: 13px; margin-left: 5px; vertical-align: -2px; fill: currentColor; opacity: .62; }
.nav-fixa a[data-lock] { opacity: .74; }
.nav-fixa a[data-lock]:hover { opacity: 1; }
/* 🏠 na tela do jogo a Home é só o ícone (Giba: *"mostra apenas um ícone da Home"*; o
   cockpit.js já trocava o texto pelo SVG — agora o SVG nasce aqui e o rótulo se esconde). */
body[data-tela="jogo"] .nav-fixa a[href="/site/"] .nav-ico { display: block; }
body[data-tela="jogo"] .nav-fixa a[href="/site/"] .nav-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) {
  body { padding-bottom: calc(56px + var(--safe-b)); }
  .nav-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-head); margin: 0; gap: 0;
    height: calc(56px + var(--safe-b)); padding: 0 0 var(--safe-b);
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid color-mix(in srgb, var(--am-400) 18%, transparent); }
  .nav-fixa a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; height: 56px;
    padding: 6px 2px; border-radius: 0; font-size: var(--fs-1); letter-spacing: -.01em; }   /* 14px: o piso dos óculos vale até na aba do pé */
  .nav-fixa a .nav-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav-fixa .nav-ico { display: block; }
  .nav-fixa a.on { background: transparent; color: var(--gold); box-shadow: inset 0 3px 0 var(--gold); }
  .nav-fixa a .mini-tag, .nav-fixa a .nav-lock { display: none; }
  body[data-tela="jogo"] .nav-fixa { display: none; }
  body[data-tela="jogo"] { padding-bottom: 0; }
}

.head-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* 🔘 SOCIAIS — o dock redondo do proto-ds (proto-ds.css:320-326): bolinha em degradê
   card→bg2, fio de luz, sobe 3px no hover. 44px de alvo (o proto tem 34; régua dos óculos). */
.socials { display: none; align-items: center; gap: 8px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--text-dim); transition: transform .15s, color .2s;
  background: linear-gradient(180deg, var(--card), var(--bg2));
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.socials a img { width: 20px; height: 20px; object-fit: contain; }
@media (hover: hover) {
  .socials a:hover { color: var(--accent); transform: translateY(-3px) scale(1.08); }
}
.lang-picker { position: relative; }
.lang-cur { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1); transition: border-color .2s, background .2s; }
.lang-cur:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lang-cur img { width: 21px; height: 15px; border-radius: 2px; display: block; }
.lang-cur .chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--text-dim); transition: transform .2s; }
.lang-picker.open .lang-cur .chev { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-drawer);
  display: none; flex-direction: column; gap: 2px; padding: 6px; min-width: 152px;
  border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
.lang-picker.open .lang-menu { display: flex; }
.lang-opt { all: unset; cursor: pointer; display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-2); color: var(--text-dim);
  transition: background .16s, color .16s; }
.lang-opt img { width: 21px; height: 15px; border-radius: 2px; display: block; }
.lang-opt:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.auth-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 7px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: var(--fs-2); font-weight: 800; color: var(--gold); }
.auth-chip .av { width: 28px; height: 28px; border-radius: 50%; background: var(--elevated);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); object-fit: cover; image-rendering: pixelated; }
.auth-chip .bc { font-family: var(--font-px); font-size: max(.78em, 12px); color: var(--text-dim); }
.who { font-size: var(--fs-2); font-weight: 700; color: var(--text); }
/* 🛡️ 27/08 — o atalho do CRM no cabeçalho: só o admin o recebe (site-core, authSlot).
   Discreto de propósito — ele divide a barra com bandeira, saldo e o botão JOGAR. Um ícone
   dourado gritando ali competiria com o CTA que paga as contas. */
.who-crm { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 8px; border-radius: 8px; color: var(--text-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent);
  transition: color .15s ease, border-color .15s ease, background .15s ease; }
.who-crm:hover, .who-crm:focus-visible { color: var(--gold);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

@media (min-width: 1024px) {
  /* no largo os 4 itens só ganham folga — a lista é a mesma em toda largura */
  .nav-fixa a { padding: 8px 13px; font-size: 14px; }
  .socials { display: flex; }
}

/* ---------- FOOTER CANÔNICO — injetado pelo site-core (S.montaPe) em #siteFoot ------- */
.site-foot { border-top: 1px solid color-mix(in srgb, var(--am-400) 18%, transparent); padding: var(--sp-7) 0 calc(var(--sp-6) + var(--safe-b));
  background: rgba(0, 0, 0, .25); margin-top: var(--sp-7); }
.foot-in { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; }
.foot-links a { font-size: var(--fs-2); font-weight: 700; color: var(--text-mute); padding: var(--sp-2) 0; }
.foot-links a:hover { color: var(--gold); }
.foot-links a.forte { color: var(--gold); font-weight: 800; }
.foot-bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: var(--fs-2); color: var(--text-mute); }
.foot-bottom a { color: var(--text-dim); font-weight: 700; }
.foot-bottom a:hover { color: var(--gold); }
.site-foot .socials { display: flex; }
}

/* ═══════════════════ UTILS ═══════════════════ */
@layer utils {
/* a dieta de altura da home nasce daqui: 72px fixos viram fluido com teto */
.section { padding: clamp(var(--sp-6), 8vw, var(--sp-8)) 0; }
.section-sm { padding: clamp(var(--sp-5), 6vw, var(--sp-7)) 0; }
.center { text-align: center; }
.muted { color: var(--text-dim); }
.mute2 { color: var(--text-mute); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
}