/* ==========================================================================
   FIFTH GG · versao beta
   --------------------------------------------------------------------------
   Camada final do visual. Vem depois de style.css e i18n.css e decide tres
   coisas:

   1. Um tema so', o escuro da marca (Carbon, Bone, Ember, Steel). O claro
      lavava o mapa de bege e punha texto preto por cima: o dono abriu e "nao
      dava para ler nada".
   2. A tela inicial e' uma tela so', com o mapa andando do lado oposto ao
      texto, em vez de 460vh de scroll.
   3. O que ainda nao esta' pronto sai da frente (ver "O que saiu da tela").
      Nada foi apagado do codigo: cada item volta tirando a regra daqui ou o
      atributo `hidden` do index.html.

   O motivo grafico e' o da marca, o Fifth Cut: o F tem cinco chanfros de 45
   graus, entao placas e selos ganham um canto cortado no mesmo angulo. A
   grade fina de fundo e' a do minimapa do jogo.
   ========================================================================== */

:root {
  --fifth-carbon: #0B0C0E;
  --fifth-fundo: #0E1013;
  --fifth-placa: #15181C;
  --fifth-placa-2: #1B1F24;
  --fifth-placa-3: #23282E;
  --fifth-linha: rgba(243, 239, 230, .11);
  --fifth-linha-forte: rgba(243, 239, 230, .22);
  --fifth-osso: #F3EFE6;
  --fifth-osso-2: rgba(243, 239, 230, .78);
  --fifth-aco: #A7ADB3;
  --fifth-aco-2: #7E858C;
  --fifth-brasa: #FF4F2E;
  --fifth-brasa-2: #FF6B4F;
  --fifth-brasa-fundo: rgba(255, 79, 46, .14);

  /* Bahnschrift so' existe no Windows. No Android o condensado do sistema e'
     o Roboto Condensed ("sans-serif-condensed"); no iPhone, o Avenir Next
     Condensed. Sem fonte baixada: a CSP do site so' aceita fonte propria e
     nenhuma dessas tem licenca para ir para o servidor. */
  --cena-display: "Bahnschrift SemiCondensed", Bahnschrift, "Roboto Condensed",
                  "sans-serif-condensed", "Avenir Next Condensed", "Arial Narrow",
                  "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
                 Roboto, "Helvetica Neue", Arial, sans-serif;
  --cena-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace,
               "SFMono-Regular", Menlo, monospace;
  --papel: var(--fifth-carbon);
  color-scheme: dark;
}

/* Corte de 45 graus da marca, em dois tamanhos. */
.corte-sm { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }

/* ── selo BETA ──────────────────────────────────────────────────────────── */

.beta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 22px;
  padding: 0 9px;
  color: var(--fifth-carbon);
  background: var(--fifth-brasa);
  font: 700 10.5px/1 var(--cena-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  user-select: none;
}

.beta-chip-grande {
  height: 30px;
  padding: 0 13px;
  font-size: 12.5px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* ==========================================================================
   Tela inicial
   ========================================================================== */

body.landing-active {
  background: var(--fifth-carbon);
  color: var(--fifth-osso);
}
body.landing-active > .grain { display: none; }

.landing {
  background: var(--fifth-carbon);
  color: var(--fifth-osso);
  font-family: var(--fonte-texto);
}

/* ── cabecalho ──────────────────────────────────────────────────────────── */

.landing-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: max(14px, calc(env(safe-area-inset-top, 0px) + 12px)) clamp(16px, 4vw, 48px) 14px;
  background: linear-gradient(to bottom,
              rgba(11, 12, 14, .94) 0%,
              rgba(11, 12, 14, .6) 68%,
              rgba(11, 12, 14, 0) 100%);
  border-bottom: 1px solid transparent;
}

body.cena-passou .landing-header {
  background: rgba(11, 12, 14, .92);
  border-bottom-color: var(--fifth-linha);
  backdrop-filter: blur(10px);
}

.landing-marca { display: inline-flex; flex-shrink: 0; line-height: 0; }
.landing-marca img,
.landing-header img { display: block; width: clamp(118px, 11vw, 150px); height: auto; }

.landing-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* Seletor de idioma no escuro: o nativo do sistema vinha claro e quadrado. */
.landing .language-picker select,
.top-actions .language-picker select {
  height: 40px;
  min-width: 0;
  padding: 0 34px 0 14px;
  border: 1px solid var(--fifth-linha-forte);
  border-radius: 999px;
  color: var(--fifth-osso);
  background: rgba(11, 12, 14, .55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23F3EFE6' stroke-width='1.6'/></svg>") no-repeat right 13px center / 11px 7px;
  font: 500 14px/1 var(--fonte-texto);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
[dir="rtl"] .landing .language-picker select,
[dir="rtl"] .top-actions .language-picker select {
  padding: 0 14px 0 34px;
  background-position: left 13px center;
}
.language-picker select option { color: var(--fifth-osso); background: var(--fifth-placa); }

/* ── pilulas ────────────────────────────────────────────────────────────── */

.pilula {
  height: 46px;
  padding: 0 24px;
  border: 1px solid var(--fifth-linha-forte);
  border-radius: 999px;
  background: rgba(11, 12, 14, .35);
  color: var(--fifth-osso);
  -webkit-text-fill-color: var(--fifth-osso);
  font: 600 15px/1 var(--cena-display);
  letter-spacing: .01em;
  box-shadow: none;
}
.pilula:hover { background: rgba(243, 239, 230, .1); border-color: rgba(243, 239, 230, .4); transform: translateY(-1px); }
.pilula:focus-visible { outline: 2px solid var(--fifth-osso); outline-offset: 3px; }

/* Ember com letra Carbon: branco sobre o laranja fica em 3,2:1 e nao passa
   no contraste de texto; Carbon sobre ele fica em 6:1. */
.pilula-ember {
  background: var(--fifth-brasa);
  border-color: var(--fifth-brasa);
  color: var(--fifth-carbon);
  -webkit-text-fill-color: var(--fifth-carbon);
  box-shadow: 0 10px 30px rgba(255, 79, 46, .26);
}
.pilula-ember:hover { background: var(--fifth-brasa-2); border-color: var(--fifth-brasa-2); box-shadow: 0 14px 34px rgba(255, 79, 46, .32); }

.landing-header .pilula { height: 40px; padding: 0 20px; font-size: 14.5px; }

/* ── a cena: uma tela so' ───────────────────────────────────────────────── */

.cena {
  position: relative;
  z-index: 1;
  height: auto;
  min-height: 0;
}

.cena-palco {
  position: relative;
  top: auto;
  height: 100svh;
  min-height: 620px;
  max-height: 1080px;
  overflow: hidden;
  background: var(--fifth-carbon);
}

/* O mapa acende do lado oposto ao texto (o enquadramento esta' em
   vitrine.js). O veu fecha onde o texto mora e some do outro lado; embaixo
   ele funde a cena com o resto da pagina. */
.cena-veu {
  background:
    linear-gradient(90deg,
      rgba(11, 12, 14, .97) 0%,
      rgba(11, 12, 14, .9) 30%,
      rgba(11, 12, 14, .5) 54%,
      rgba(11, 12, 14, .08) 78%,
      rgba(11, 12, 14, 0) 100%),
    linear-gradient(to bottom,
      rgba(11, 12, 14, .7) 0%,
      rgba(11, 12, 14, 0) 16%,
      rgba(11, 12, 14, 0) 74%,
      rgba(11, 12, 14, 1) 100%);
}
[dir="rtl"] .cena-veu {
  background:
    linear-gradient(270deg,
      rgba(11, 12, 14, .97) 0%,
      rgba(11, 12, 14, .9) 30%,
      rgba(11, 12, 14, .5) 54%,
      rgba(11, 12, 14, .08) 78%,
      rgba(11, 12, 14, 0) 100%),
    linear-gradient(to bottom,
      rgba(11, 12, 14, .7) 0%,
      rgba(11, 12, 14, 0) 16%,
      rgba(11, 12, 14, 0) 74%,
      rgba(11, 12, 14, 1) 100%);
}

/* Grade do minimapa: so' do lado do texto, e apagando ate sumir no mapa. */
.cena-grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(243, 239, 230, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 239, 230, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 66%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 66%);
}
[dir="rtl"] .cena-grade {
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 34%, transparent 66%);
  mask-image: linear-gradient(270deg, #000 0%, #000 34%, transparent 66%);
}

.cena-grao { display: none; }
.cena-medidor { display: none; }

.cena-boot { background: var(--fifth-carbon); }
.cena-boot p { color: var(--fifth-aco); }
.cena-barra { background: rgba(243, 239, 230, .16); }

.painel {
  inset: 0 auto 0 0;
  width: min(100%, 780px);
  align-items: flex-start;
  justify-content: center;
  text-align: start;
  padding: 120px clamp(20px, 6vw, 96px) 120px;
  opacity: 1;
  pointer-events: auto;
}
[dir="rtl"] .painel { inset: 0 0 0 auto; }
.painel::before { display: none; }

.painel-olho {
  justify-content: flex-start;
  margin-bottom: 22px;
  color: var(--fifth-aco);
  font: 600 12px/1.4 var(--cena-mono);
  letter-spacing: .16em;
}
.painel-olho i { color: var(--fifth-brasa); }

.painel :is(h1, h2) {
  max-width: 12.5ch;
  font: 600 clamp(44px, 6.1vw, 92px)/.95 var(--cena-display);
  letter-spacing: -.03em;
  color: var(--fifth-osso);
  text-shadow: 0 2px 28px rgba(11, 12, 14, .65);
}

.painel-sub {
  max-width: 44ch;
  margin-top: 24px;
  color: var(--fifth-osso-2);
  font: 400 clamp(16px, 1.3vw, 19px)/1.55 var(--fonte-texto);
  text-shadow: 0 1px 14px rgba(11, 12, 14, .85);
}

.painel-acao {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.painel-acao .pilula { height: 50px; padding: 0 28px; font-size: 16px; }

/* Rodape da cena: o que esta' acontecendo na partida + pausa. */
.cena-rodape {
  position: absolute;
  z-index: 40;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 48px) max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px));
}

.cena-legenda {
  position: static;
  justify-content: flex-start;
  padding: 0;
  text-align: start;
  color: rgba(243, 239, 230, .62);
  font: 500 11.5px/1.5 var(--cena-mono);
  letter-spacing: .12em;
}

.cena-pausa {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fifth-linha-forte);
  border-radius: 50%;
  background: rgba(11, 12, 14, .55);
  color: var(--fifth-osso);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.cena-pausa:hover { border-color: var(--fifth-brasa); background: rgba(255, 79, 46, .12); }
.cena-pausa:focus-visible { outline: 2px solid var(--fifth-osso); outline-offset: 3px; }
.cena-pausa-icone {
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.cena-pausa.pausado .cena-pausa-icone {
  width: 0;
  height: 0;
  margin-inline-start: 3px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

/* ── numeros do acervo ──────────────────────────────────────────────────── */

.landing-numbers {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  padding: 34px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 26px;
  border-top: 1px solid var(--fifth-linha);
  border-bottom: 1px solid var(--fifth-linha);
}
.landing-numbers[hidden] { display: none; }
.landing-numbers > div {
  display: grid;
  gap: 8px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--fifth-brasa);
}
.landing-numbers b {
  color: var(--fifth-osso);
  font: 600 clamp(32px, 3.4vw, 48px)/1 var(--cena-display);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.landing-numbers span {
  color: var(--fifth-aco);
  font: 600 11px/1.35 var(--cena-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── o que ja' funciona ─────────────────────────────────────────────────── */

.landing-recursos {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
  scroll-margin-top: 72px;
}

.recursos-topo { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }

.secao-olho {
  color: var(--fifth-brasa);
  font: 700 11.5px/1 var(--cena-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.recursos-topo h2 {
  margin: 0;
  color: var(--fifth-osso);
  font: 600 clamp(32px, 4vw, 56px)/1 var(--cena-display);
  letter-spacing: -.025em;
}

.recursos-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.recurso {
  position: relative;
  padding: 28px 26px 32px;
  background: var(--fifth-placa);
  border: 1px solid var(--fifth-linha);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: background .25s ease;
}
[dir="rtl"] .recurso { clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); }
.recurso:hover { background: var(--fifth-placa-2); }
.recurso::before {
  content: "";
  position: absolute;
  inset-inline-start: 26px;
  top: 0;
  width: 42px;
  height: 2px;
  background: var(--fifth-brasa);
}
.recurso-numero {
  display: block;
  margin-bottom: 44px;
  color: var(--fifth-brasa);
  font: 700 12px/1 var(--cena-mono);
  letter-spacing: .12em;
}
.recurso h3 {
  margin: 0 0 12px;
  color: var(--fifth-osso);
  font: 600 clamp(22px, 2vw, 28px)/1.05 var(--cena-display);
  letter-spacing: -.015em;
}
.recurso p {
  margin: 0;
  color: var(--fifth-aco);
  font: 400 15px/1.6 var(--fonte-texto);
}

/* ── faixa beta ─────────────────────────────────────────────────────────── */

.landing-beta {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1180px);
  margin: 0 auto clamp(56px, 7vw, 96px);
  padding: clamp(32px, 4.4vw, 56px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 32px;
  background:
    linear-gradient(135deg, rgba(255, 79, 46, .13) 0%, rgba(255, 79, 46, .02) 58%),
    var(--fifth-placa);
  border: 1px solid rgba(255, 79, 46, .3);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
.landing-beta .beta-chip { grid-row: 1 / span 2; align-self: start; margin-top: 6px; }
.landing-beta h2 {
  margin: 0;
  color: var(--fifth-osso);
  font: 600 clamp(26px, 3vw, 40px)/1.05 var(--cena-display);
  letter-spacing: -.02em;
}
.landing-beta p {
  grid-column: 2;
  margin: 0;
  max-width: 58ch;
  color: var(--fifth-osso-2);
  font: 400 16px/1.6 var(--fonte-texto);
}
.landing-beta .pilula { grid-column: 3; grid-row: 1 / span 2; }

/* ── rodape ─────────────────────────────────────────────────────────────── */

.landing-rodape {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  padding: 32px 0 max(40px, calc(env(safe-area-inset-bottom, 0px) + 28px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 40px;
  border-top: 1px solid var(--fifth-linha);
}
.rodape-marca { display: block; width: 132px; height: auto; }
.redes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-inline-start: auto;
}
.redes-titulo {
  margin-inline-end: 6px;
  color: var(--fifth-aco);
  font: 600 11px/1 var(--cena-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rede {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 52px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--fifth-linha-forte);
  border-radius: 12px;
  color: var(--fifth-osso);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.rede svg { grid-row: 1 / span 2; color: var(--fifth-brasa); }
.rede span { font: 600 15px/1.2 var(--fonte-texto); }
.rede small { color: var(--fifth-aco); font: 500 12px/1.25 var(--fonte-texto); }
.rede:hover { border-color: var(--fifth-brasa); background: rgba(255, 79, 46, .08); transform: translateY(-1px); }
.rede:focus-visible { outline: 2px solid var(--fifth-osso); outline-offset: 3px; }
.rodape-nota {
  width: 100%;
  color: rgba(243, 239, 230, .46);
  font: 500 12px/1.4 var(--fonte-texto);
}

/* As pecas da tela antiga que sairam do HTML. */
.landing-benefits,
.landing-proof-story,
.landing-foot { display: none; }

/* Entrada dos blocos ao rolar. */
.landing [data-reveal] { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }

/* ── telas estreitas ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .recursos-grade { grid-template-columns: 1fr; }
  .recurso-numero { margin-bottom: 24px; }
  .landing-beta { grid-template-columns: 1fr; }
  .landing-beta .beta-chip,
  .landing-beta p,
  .landing-beta .pilula { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0; }
  .landing-beta .pilula { margin-top: 8px; }
  .redes { margin-inline-start: 0; width: 100%; }
  .redes-titulo { width: 100%; margin-bottom: 4px; }
}

/* Celular em pe': o mapa fica em cima, aceso; o texto embaixo, sobre o veu. */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .cena-palco { min-height: 640px; max-height: none; }
  /* O mapa ocupa os 64% de cima (ver vitrine.js); daqui para baixo e' fundo. */
  .cena-veu,
  [dir="rtl"] .cena-veu {
    background: linear-gradient(to bottom,
      rgba(11, 12, 14, .72) 0%,
      rgba(11, 12, 14, .06) 14%,
      rgba(11, 12, 14, .12) 34%,
      rgba(11, 12, 14, .88) 54%,
      rgba(11, 12, 14, 1) 63%);
  }
  .cena-grade,
  [dir="rtl"] .cena-grade {
    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 70%);
    mask-image: linear-gradient(to bottom, transparent 40%, #000 70%);
  }
  .painel {
    width: 100%;
    justify-content: flex-end;
    padding: 96px 20px 104px;
  }
  .painel-olho { max-width: 100%; margin-bottom: 16px; font-size: 10.5px; letter-spacing: .12em; }
  .painel :is(h1, h2) { max-width: 11ch; font-size: clamp(40px, 11.6vw, 56px); }
  .painel-sub { margin-top: 18px; font-size: 16px; }
  .painel-acao { margin-top: 26px; }
  .painel-acao .pilula { flex: 1 1 100%; max-width: none; height: 52px; }
  .cena-legenda { font-size: 10.5px; letter-spacing: .08em; }
  .landing-header { gap: 10px; }
  .landing-header .language-picker select { width: 112px; padding-inline: 12px 28px; font-size: 13px; background-position: right 10px center; }
  /* "Entrar" so' abre a analise, igual ao "Comecar gratis" logo abaixo; no
     celular nao cabia ao lado do idioma e saia da tela. */
  #landingHeaderEnter { display: none; }
  .landing-marca img { width: 112px; }
}

/* ==========================================================================
   Analise (o app)
   ========================================================================== */

/* Tokens do tema escuro, um pouco mais vivos que os de style.css: o fundo
   sai do preto chapado e o texto secundario sobe de contraste. */
body[data-theme="escuro"] {
  --app-bg: var(--fifth-fundo);
  --surface: var(--fifth-placa);
  --surface-raised: var(--fifth-placa-2);
  --surface-sunken: #0A0B0D;
  --surface-soft: var(--fifth-placa-2);
  --surface-tinted: var(--fifth-placa-3);
  --ink-strong: var(--fifth-osso);
  --ink: #DCD8CF;
  --ink-muted: var(--fifth-aco);
  --dim: var(--fifth-aco-2);
  --border: var(--fifth-linha);
  --line-soft: rgba(243, 239, 230, .07);
  --accent-soft: var(--fifth-brasa-fundo);
  --hud-plate: rgba(11, 12, 14, .9);
}

body:not(.landing-active):not(.overlay) {
  background: var(--fifth-fundo);
  font-family: var(--fonte-texto);
}

/* Barra de cima. */
.app-nav {
  background: var(--fifth-carbon);
  border-bottom-color: var(--fifth-linha);
  box-shadow: none;
}
.brand { border-inline-end-color: var(--fifth-linha); }
.brand-product { color: var(--fifth-aco); }
.beta-chip-nav { margin-inline: 2px 6px; }
.nav-link { color: var(--fifth-aco); }
.nav-link:hover { color: var(--fifth-osso); background: rgba(243, 239, 230, .06); }
.nav-link.active {
  color: var(--fifth-osso);
  background: transparent;
  border-color: transparent;
}
.nav-link.active::after { background: var(--fifth-brasa); }

/* "conectado" e o nome da sessao sao diagnostico, nao informacao para quem
   estuda a partida. No lugar, o Instagram. */
.nav-status { display: none; }
.nav-insta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 100%;
  padding: 0 16px;
  border-inline-start: 1px solid var(--fifth-linha);
  color: var(--fifth-aco);
  font: 600 12.5px/1 var(--fonte-texto);
  text-decoration: none;
  transition: color .2s ease;
}
.nav-insta svg { color: var(--fifth-brasa); }
.nav-insta:hover { color: var(--fifth-osso); }

.topbar {
  background: var(--fifth-fundo);
  border-bottom-color: var(--fifth-linha);
}
.match-heading strong { color: var(--fifth-osso); }
.match-live-dot { background: var(--fifth-brasa); box-shadow: 0 0 10px rgba(255, 79, 46, .55); }

.top-actions .language-picker select { height: 34px; font-size: 13px; }

.button { border-color: var(--fifth-linha-forte); }
.button-quiet { color: var(--fifth-osso-2); }
.button-quiet:hover { color: var(--fifth-osso); }
.button-accent {
  color: var(--fifth-carbon);
  background: var(--fifth-brasa);
  border-color: var(--fifth-brasa);
}
.button-accent:hover { background: var(--fifth-brasa-2); border-color: var(--fifth-brasa-2); }

/* Placas do painel: uma borda so', sem sombra de papel. */
.panel-card,
.results-card,
.results-table-wrap,
.champ-card,
.study-options {
  background: var(--fifth-placa);
  border-color: var(--fifth-linha);
  box-shadow: none;
}
.panel-tab { color: var(--fifth-aco); }
.panel-tab.active { color: var(--fifth-osso); }
.panel-tab.active::after { background: var(--fifth-brasa); }

select, input[type="search"], input[type="text"], input[type="email"], input[type="password"] {
  color-scheme: dark;
}
#myTeamSelect,
#analyzedTeamSelect,
#comparedTeamSelect {
  background: var(--fifth-placa-2) !important;
  color: var(--fifth-osso);
  border-color: var(--fifth-linha-forte) !important;
}

/* O quadro do mapa: Carbon, com o mesmo fio fino das placas. */
body:not(.overlay):not(.focus-view) .board-shell {
  border-color: var(--fifth-carbon);
  box-shadow: 0 0 0 1px var(--fifth-linha);
}
.timeline-deck { background: transparent; }
.zoom-rail { background: rgba(11, 12, 14, .88); border-color: var(--fifth-linha); }

/* Capa de campeonato sem logo oficial: a base agora e' escura (Carbon com a
   grade do minimapa), entao o titulo vai em Bone. */
.champ-card-cover-title { color: var(--fifth-osso); }

.results-table thead th { color: var(--fifth-aco); }
.results-table tbody tr:hover { background: var(--fifth-placa-2); }

/* Partidas e notas abrem em coluna unica: centralizada. A regra de margem
   zero da grade de estudo (style.css) vencia esta por especificidade e a
   lista ficava grudada na esquerda numa tela larga. */
body.library-view:not(.overlay):not(.focus-view) .control-rail,
body.notes-view:not(.overlay):not(.focus-view) .control-rail {
  margin-inline: auto;
  padding: 24px 20px 40px;
}

/* Selo BETA da barra de sessao e icone do importar: so' no celular. */
.beta-chip-topo { display: none; }
#btnImport .botao-icone { display: none; }

@media (max-width: 720px) {
  /* A barra de baixo do celular so' cabe as quatro paginas: o selo sobe para
     a barra da sessao e o Instagram fica na tela inicial. */
  .app-nav .beta-chip-nav,
  .app-nav .nav-insta { display: none; }
  .beta-chip-topo { display: inline-flex; }
  .top-actions { gap: 6px; }
  .top-actions .language-picker select { width: 100px; max-width: 100px; padding-inline: 9px 24px; font-size: 12px; background-position: right 8px center; }
  #btnImport { width: 40px; min-width: 40px; padding: 0; }
  #btnImport .botao-icone { display: inline; font-size: 18px; line-height: 1; }
  #btnImport .botao-rotulo { display: none; }
  .nav-link .nav-label { font-size: 11px; }
}

/* Botoes de camada do mapa: tiros, barracoes, pet, revivers (MATCH MAP),
   fora da safe e calor. Em tela larga ocupam o lugar da regua tatica, que
   fica a esquerda dos botoes de safe e estava vazia. */
.camadas-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
}
.camada-chip {
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--fifth-linha-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--fifth-aco);
  font: 600 11.5px/1 var(--fonte-texto);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.camada-chip:hover { color: var(--fifth-osso); border-color: rgba(243, 239, 230, .42); }
.camada-chip[aria-pressed="true"] { color: var(--fifth-carbon); background: var(--fifth-osso); border-color: var(--fifth-osso); }
.camada-chip:focus-visible { outline: 2px solid var(--fifth-brasa); outline-offset: 2px; }
@media (min-width: 1100px) {
  .timeline-deck > .camadas-row { grid-area: 1 / 1; padding: 0; }
}
body.is-fullscreen .camadas-row { display: none !important; }
@media (max-width: 720px) {
  /* A fileira rola de lado dentro da tela. Sem o min-width zero, o tamanho
     dela (seis botoes lado a lado) esticava os itens da grade do mapa para
     442 px num celular de 390, e o seletor Normal | 2D saia pela direita. */
  .map-workbench > *,
  .camadas-row { min-width: 0; }
  .camadas-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .camadas-row::-webkit-scrollbar { display: none; }
  .camada-chip { flex: 0 0 auto; height: 34px; }
}

/* ── O que saiu da tela nesta versao beta ──────────────────────────────── */
/* Diagnostico tecnico e funcoes que ainda nao estao prontas para o publico.
   Os botoes/abas que sao HTML puro ganharam `hidden` no index.html; aqui
   ficam os que o app monta ou mostra sozinho. */
.quality-banner,
.data-strip,
#dossie,
#roomChecks,
#champsNew,
.theme-toggle,
#btnCopyUrls,
#btnFocus,
#btnAdvancedPanels,
#btnDrawMap,
.tool-rail,
.advanced-tab,
.advanced-action { display: none !important; }