:root {
  --brand-carbon: #0B0C0E;
  --brand-bone: #F3EFE6;
  --brand-ember: #FF4F2E;
  --brand-steel: #8E969E;
  --app-bg: #F3F1EC;
  --surface: #FAF9F6;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EBE8E1;
  --ink-strong: #0B0C0E;
  --ink: #2E3134;
  --ink-muted: #596066;
  --border: rgba(11, 12, 14, .16);
  --primary: #FF4F2E;
  --primary-hover: #E94325;
  --accent: #FF4F2E;
  --success: #287A55;
  --warning: #A76B12;
  --danger: #B83E3E;
  --focus: #FF4F2E;

  --bg: var(--app-bg);
  --bg-deep: var(--surface-sunken);
  --surface-soft: var(--surface-sunken);
  --surface-tinted: #F0EEE8;
  --line: var(--border);
  --line-soft: rgba(11, 12, 14, .09);
  --text: var(--ink-strong);
  --muted: var(--ink-muted);
  --dim: #777D82;
  --accent-soft: rgba(255, 79, 46, .11);
  --accent-ink: #0B0C0E;
  --electric: #4778A8;
  --energy: #FF4F2E;
  --gold: #A76B12;
  --safe: #FFFFFF;
  --next-safe: rgba(255, 255, 255, 0.75);
  --zone-boundary: #FFFFFF;
  --next-zone: rgba(255, 255, 255, 0.75);
  --annotation: #4778A8;
  --shadow: 0 6px 18px rgba(11, 12, 14, .08);
  --shadow-lg: 0 16px 38px rgba(11, 12, 14, .14);
  --radius: 6px;
  --radius-sm: 4px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ── Fase 2 · Design tokens de leitura tática (fonte única para canvas + DOM) ── */
  --safe-white-bg: rgba(255, 255, 255, 0.05);
  --safe-white-border: #FFFFFF;
  --safe-keyline: rgba(8, 14, 26, 0.85);
  --safe-glow: rgba(255, 255, 255, 0.72);
  --safe-glow-blur: 14px;
  /* Próxima safe: é a informação que decide rotação, então vem tão forte
     quanto a safe atual, só que tracejada para não confundir as duas. */
  --safe-next-border: #FFFFFF;
  --safe-next-keyline: rgba(8, 14, 26, 0.85);
  --safe-next-glow: rgba(190, 228, 255, 0.85);
  --safe-next-fill: rgba(150, 210, 255, 0.07);
  --safe-text: #FFFFFF;
  --safe-badge-bg: rgba(20, 32, 51, 0.90);
  --entity-ring: 1;
  --entity-halo-blur: 6px;
  --entity-halo-color: rgba(255, 255, 255, 0.28);
  --entity-trace: 0.38;
  --readability-high: 0;
  /* Placa das legendas sobre o mapa. O texto já vinha de token; o fundo
     era fixo e claro, então no tema escuro virava branco no branco. */
  --hud-plate: rgba(243, 239, 230, .92);
  color-scheme: light;
  font-family: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, sans-serif;
}

/* Alta Leitura: amplia contraste de entidades, traços e labels sem trocar a estética */
body.readability-high {
  --safe-white-bg: rgba(255, 255, 255, 0.07);
  --safe-glow: rgba(255, 255, 255, 0.68);
  --safe-glow-blur: 12px;
  --safe-keyline: rgba(10, 16, 28, 0.88);
  --safe-badge-bg: rgba(12, 20, 34, 0.96);
  --entity-ring: 1.6;
  --entity-halo-blur: 14px;
  --entity-halo-color: rgba(255, 255, 255, 0.55);
  --entity-trace: 0.72;
  --readability-high: 1;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  font-size: 13px;
  line-height: 1.4;
}

button, input, select {
  font: inherit;
  color: inherit;
}

button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 80;
  left: 12px;
  top: -50px;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 12px;
}

.grain {
  display: none;
}

/* --------------------------------------------------------------------------
   App Nav (Top header 56px)
   -------------------------------------------------------------------------- */
.app-nav {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto 0;
  height: 56px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
  height: 56px;
  border-right: 1px solid var(--line-soft);
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font: 800 12px/1 Bahnschrift, sans-serif;
  color: var(--accent);
  letter-spacing: .06em;
}

.brand-mark i {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(33, 78, 211, .2);
  border-radius: 6px;
}

.brand-mark b {
  position: relative;
}

.brand strong, .brand small {
  display: block;
}

.brand strong {
  font: 800 15px/1 Bahnschrift, sans-serif;
  letter-spacing: .04em;
  color: var(--text);
}

.brand small {
  margin-top: 3px;
  color: var(--muted);
  font: 700 9px/1 monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-list {
  display: flex;
  flex: 1;
  gap: 4px;
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}

.nav-index {
  display: grid;
  place-items: center;
  width: 18px;
  color: var(--dim);
  font: 700 9px/1 monospace;
  letter-spacing: .04em;
}

.nav-label { font: 700 11px/1 Bahnschrift, sans-serif; letter-spacing: .025em; }

.nav-link:hover {
  background: var(--surface-tinted);
  color: var(--text);
}

.nav-link:active {
  transform: translateY(1px);
}

.nav-link.active {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -11px;
  left: 10px;
  height: 2px;
  background: var(--accent);
}

.nav-link.active .nav-index {
  color: var(--accent);
}

.nav-status {
  display: grid;
  grid-template-columns: 8px auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 16px;
  border-left: 1px solid var(--line-soft);
  color: var(--muted);
  font: 11px monospace;
}

.nav-status small {
  display: none;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px currentColor;
}

.connection-dot.online {
  background: var(--safe);
}

/* --------------------------------------------------------------------------
   App Frame & Topbar (56px)
   -------------------------------------------------------------------------- */
/* As duas faixas do topo tinham a altura escrita em quatro lugares — na
   barra, na margem do quadro, na altura do quadro e na fileira da grade. Ao
   encolher a barra, os outros três continuavam reservando 56 px, e a folga
   virava buraco. Agora é um número só. */
.app-frame {
  height: calc(100dvh - var(--altura-nav));
  min-height: 0;
  margin: var(--altura-nav) 0 0;
  display: grid;
  grid-template-rows: var(--altura-sessao) minmax(0, 1fr);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.match-heading {
  display: grid;
  /* ponto, titulo, subtitulo (flexivel) e selo (do tamanho do conteudo).
     Sem a quarta coluna o selo caia para uma segunda linha, na coluna de
     8px do ponto, e virava uma pilula de dezoito pixels. */
  grid-template-columns: 8px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.match-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(33, 78, 211, .5);
}

.match-heading strong {
  font: 700 18px/1 Bahnschrift, sans-serif;
  letter-spacing: .02em;
  color: var(--text);
}

.match-heading span:last-child {
  overflow: hidden;
  color: var(--muted);
  font: 11px monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-context {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 11px monospace;
  white-space: nowrap;
}

.replay-pill, .data-badge {
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--accent-soft);
  font: 800 10px monospace;
  letter-spacing: .08em;
}

.data-badge {
  border-color: var(--danger);
  color: var(--danger);
  background: #fde8e8;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}

.button:hover {
  border-color: var(--accent);
  background: var(--surface-tinted);
}

.button:active {
  transform: translateY(1px);
}

.button-quiet {
  background: transparent;
  color: var(--muted);
}

.button-quiet:hover {
  background: var(--surface-tinted);
  color: var(--text);
}

.button-accent {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.button-accent:hover {
  border-color: #1a3fb3;
  background: #1a3fb3;
}

/* ── Fase 3 · status de sessão, plano e autenticação no topo ─────────────── */
.plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-tinted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-badge[data-plan="pro_coach"] { border-color: var(--primary); color: var(--primary); background: var(--accent-soft); }
.plan-badge[data-plan="team_studio"] { border-color: #7c4dd4; color: #5b35a3; background: rgba(124, 77, 212, .12); }

.plan-select {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

/* ── Fase 3 · timeline tática por categoria ───────────────────────────────── */
.tactical-timeline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}

.tactical-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: none;
}

.tactical-chip {
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-tinted);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  opacity: .45;
}
.tactical-chip.active { opacity: 1; border-color: var(--line); color: var(--text); }
.tactical-chip[data-category="transicao"].active { border-color: #5ea3bd; color: #2f6d85; }
.tactical-chip[data-category="ataque"].active { border-color: #d26b61; color: #a3433a; }
.tactical-chip[data-category="finalizacao"].active { border-color: #b42318; color: #8f1a10; }
.tactical-chip[data-category="perda"].active { border-color: #925700; color: #6d4100; }
.tactical-chip[data-category="recuperacao"].active { border-color: #3ecf8e; color: #1d7a52; }
.tactical-chip[data-category="bolaParada"].active { border-color: #7c4dd4; color: #5b35a3; }

.tactical-ruler-wrap {
  position: relative;
  flex: 1;
  min-width: 120px;
  height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  overflow: hidden;
  cursor: crosshair;
}

.tactical-ruler {
  position: absolute;
  inset: 0;
}

.tactical-marker {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tactical-marker.transicao { background: #5ea3bd; height: 7px; }
.tactical-marker.ataque { background: #d26b61; }
.tactical-marker.finalizacao { background: #b42318; height: 9px; }
.tactical-marker.perda { background: #925700; }
.tactical-marker.recuperacao { background: #3ecf8e; height: 6px; }
.tactical-marker.bolaParada { background: #7c4dd4; height: 8px; width: 4px; }
.tactical-marker.snap-target {
  box-shadow: 0 0 0 3px rgba(35, 87, 217, .55);
}

.tactical-ruler-window {
  position: absolute;
  inset: 0;
  background: rgba(35, 87, 217, .07);
  border: 1px solid rgba(35, 87, 217, .45);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.tactical-window-zoom {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
}
.tactical-window-zoom button {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}
.tactical-window-zoom button:hover { border-color: var(--accent); }

.tactical-marker-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--electric);
  pointer-events: none;
}

.tactical-window-label {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

/* ── Fase 3 · diálogo de autenticação ─────────────────────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.auth-form input {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}
.auth-form input:focus {
  outline: 2px solid var(--focus);
  border-color: transparent;
}
.auth-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.auth-error {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(217, 67, 67, .12);
  border: 1px solid rgba(217, 67, 67, .4);
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}

/* ── Fase 3 · filtros persistentes ────────────────────────────────────────── */
.filters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 12px;
}
.filters-grid .display-toggle {
  grid-column: span 1;
  border-top: 0;
  min-height: 24px;
}
.filter-time {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.filter-time input {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
  color: var(--text);
}
.filters-grid .text-action {
  grid-column: span 2;
  justify-self: start;
}

/* --------------------------------------------------------------------------
   Workspace Layout
   -------------------------------------------------------------------------- */
.workspace {
  min-height: 0;
  display: block;
  position: relative;
  padding: 0;
  background: var(--bg);
}

body.map-focus .insight-rail {
  display: none;
}

body.show-insights .insight-rail {
  display: flex;
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 8;
  width: 250px;
  max-height: calc(100% - 24px);
}

.insight-rail, .control-rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insight-rail {
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.control-rail {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  width: 330px;
  max-height: calc(100% - 104px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  scrollbar-width: thin;
}

/* Panel cards: solid satin surfaces, 1px border, 10px radius */
.panel-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-kicker {
  margin-bottom: 12px;
  color: var(--muted);
  font: 800 10px/1 monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.overview-card, .statistics-card, .legend-card, .safe-card {
  padding: 16px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.overview-grid div {
  min-width: 0;
}

.overview-grid span, .overview-grid strong {
  display: block;
}

.overview-grid span {
  color: var(--muted);
  font: 10px/1.2 monospace;
  text-transform: uppercase;
}

.overview-grid strong {
  margin-top: 5px;
  overflow: hidden;
  font: 700 18px/1 Bahnschrift, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.stat-highlight {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.stat-highlight:last-of-type {
  border-bottom: 0;
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-tinted);
  color: var(--accent);
  font-size: 13px;
}

.stat-highlight strong, .stat-highlight small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-highlight strong {
  font: 700 13px/1.2 Bahnschrift, sans-serif;
  color: var(--text);
}

.stat-highlight small {
  margin-top: 3px;
  color: var(--muted);
  font: 10px/1 monospace;
}

.safe-kills-heading {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 8px;
  color: var(--muted);
  font: 10px monospace;
  text-transform: uppercase;
}

.safe-kills-heading small {
  color: var(--accent);
  font-weight: 700;
}

.safe-kills {
  display: grid;
  gap: 6px;
}

.safe-kill-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 10px monospace;
}

.safe-kill-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-tinted);
}

.safe-kill-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 8px;
  color: var(--muted);
  font: 10px/1.2 monospace;
}

.legend-grid span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
}

.legend-dot.active {
  background: var(--safe);
  box-shadow: 0 0 6px rgba(8, 127, 97, .5);
}

.legend-dot.danger {
  background: var(--danger);
  box-shadow: 0 0 6px rgba(201, 45, 61, .5);
}

.legend-ring {
  width: 10px;
  height: 10px;
  border: 1px solid var(--muted);
  border-radius: 50%;
}

.legend-ring.current {
  border: 2px solid var(--accent);
}

.safe-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.safe-title span, .safe-title strong {
  display: block;
}

.safe-title > div > span {
  color: var(--muted);
  font: 10px monospace;
  text-transform: uppercase;
}

.safe-title strong {
  margin-top: 4px;
  font: 800 15px/1 Bahnschrift, sans-serif;
  color: var(--text);
}

.source-pill {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface-tinted);
  font: 9px monospace;
  text-transform: uppercase;
}

.safe-plates {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.safe-plate {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: 700 12px/1.3 Bahnschrift, sans-serif;
}

.safe-plate.current {
  background: #d9f3ea;
  color: var(--safe);
  border: 1px solid #9fd7c3;
}

.safe-plate.next {
  background: #f8ead2;
  color: var(--next-safe);
  border: 1px dashed var(--next-safe);
}

.safe-stepper {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.safe-stepper button {
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.safe-stepper button:hover {
  background: var(--surface-tinted);
  color: var(--accent);
}

.safe-stepper div {
  text-align: center;
}

.safe-stepper span, .safe-stepper small {
  display: block;
}

.safe-stepper span {
  color: var(--accent);
  font: 800 14px monospace;
}

.safe-stepper small {
  margin-top: 2px;
  color: var(--muted);
  font: 9px monospace;
}

.text-action {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 10px monospace;
  cursor: pointer;
}

.text-action:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Map Workbench & Canvas Stage
   -------------------------------------------------------------------------- */
.map-workbench {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.focus-bar { display: none; }

.board-shell {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #112233;
}

.board-shell::before {
  display: none;
}

.canvas-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #112233;
  box-shadow: none;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.board-hud {
  position: absolute;
  z-index: 4;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--hud-plate);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.board-hud-left {
  left: 14px;
  border-left: 3px solid var(--accent);
}

.board-hud-right {
  right: 14px;
  align-items: flex-end;
  border-right: 3px solid var(--accent);
}

.board-hud strong {
  font: 800 13px/1 Bahnschrift, sans-serif;
  letter-spacing: .04em;
  color: var(--text);
}

.board-hud span {
  overflow: hidden;
  color: var(--muted);
  font: 10px/1.2 monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-alert {
  display: block;
  color: var(--danger);
  font: 12px/1.3 "Segoe UI", sans-serif;
}

.quality-banner {
  position: absolute;
  z-index: 5;
  left: 14px;
  bottom: 14px;
  display: block;
  max-width: min(460px, calc(100% - 28px));
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--hud-plate);
  color: var(--text);
  font: 600 12px/1.3 "Segoe UI", sans-serif;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.map-killfeed {
  position: absolute;
  z-index: 4;
  left: 14px;
  bottom: 48px;
  display: none;
  gap: 6px;
  margin: 0;
  padding: 0;
  width: min(260px, 48%);
  list-style: none;
  pointer-events: none;
}

body.overlay .map-killfeed {
  display: none;
}

.map-killfeed li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--hud-plate);
  font: 700 11px/1.1 Bahnschrift, sans-serif;
}

.map-killfeed b {
  color: var(--text);
}

.map-killfeed span {
  color: var(--danger);
}

.overlay-live-board, .overlay-chip-row {
  display: none;
}

.overlay-chip-row {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--hud-plate);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.overlay-chip-row strong {
  font: 800 16px/1 Bahnschrift, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.overlay-chip-row span {
  color: var(--accent);
  font: 800 11px monospace;
  letter-spacing: .08em;
}

.overlay-live-board {
  position: absolute;
  z-index: 4;
  top: 68px;
  right: 14px;
  display: none;
  width: min(240px, 40%);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--hud-plate);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.overlay-score-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.overlay-score-row:last-child {
  border-bottom: 0;
}

.overlay-score-row em {
  color: var(--muted);
  font: 800 11px/1 monospace;
  font-style: normal;
}

.overlay-score-row strong {
  overflow: hidden;
  font: 700 12px/1.1 Bahnschrift, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 3px solid var(--team);
  padding-left: 6px;
  color: var(--text);
}

.overlay-score-row b {
  color: var(--accent);
  font: 800 13px Bahnschrift, sans-serif;
}

/* --------------------------------------------------------------------------
   Tool & Zoom Rails
   -------------------------------------------------------------------------- */
.tool-rail {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 48px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateY(-50%);
}

.tool {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.tool span {
  font-size: 16px;
  line-height: 1;
}

.tool em {
  font: 700 8px/1 monospace;
  font-style: normal;
}

.tool:hover {
  background: var(--surface-tinted);
  color: var(--text);
}

.tool.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.tool-icon {
  min-height: 26px;
  font-size: 14px;
}

.rail-divider {
  display: block;
  height: 1px;
  margin: 3px 0;
  background: var(--line-soft);
}

.swatch {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line);
}

.swatch.active {
  box-shadow: 0 0 0 2px var(--accent);
}

.zoom-rail {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.zoom-rail button {
  width: 32px;
  height: 30px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.zoom-rail button:last-child {
  border: 0;
}

.zoom-rail button:hover {
  color: var(--accent);
  background: var(--surface-tinted);
}

/* --------------------------------------------------------------------------
   Timeline Deck (112-128px, pale blue)
   -------------------------------------------------------------------------- */
.timeline-deck {
  position: relative;
  z-index: 7;
  min-height: 112px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-tinted);
}

.phase-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.phase-chip {
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font: 700 10px monospace;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.phase-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.phase-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.phase-chip:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.phase-end {
  margin-left: auto;
  text-transform: uppercase;
}

.timeline-controls {
  display: grid;
  grid-template-columns: 28px 40px 40px 84px 110px minmax(100px, 1fr) 64px 44px;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

.timeline-action {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.timeline-action:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.timecode {
  color: var(--text);
  font: 700 13px/1 monospace;
  font-variant-numeric: tabular-nums;
}

.seek-stack {
  position: relative;
  display: grid;
  gap: 3px;
  padding-top: 1px;
}

#seek {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 8px;
  margin: 0;
  accent-color: var(--energy);
  cursor: pointer;
}

.event-ruler {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(19, 38, 61, .08);
}

.event-ruler i {
  position: absolute;
  top: 0;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .75;
}

.event-ruler i.kill {
  background: var(--danger);
}

.event-ruler i.knock {
  background: var(--energy);
}

#speed {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

/* Play button: 44px orange with dark icon */
.play-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--energy);
  color: #13263D;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(247, 107, 40, .35);
  display: grid;
  place-items: center;
  transition: transform .14s var(--ease), background .18s var(--ease);
}

.play-button:hover {
  background: #e85d18;
}

.play-button:active {
  transform: scale(.95);
}

/* --------------------------------------------------------------------------
   Teams Dock & Control Rail Cards
   -------------------------------------------------------------------------- */
.team-dock-card {
  padding: 12px;
}

.team-dock {
  display: grid;
  gap: 5px;
  overflow: visible;
}

/* Team row & Team chip with 12° skewed team-color side stripe */
.team-row, .team-chip {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}

.team-row::before, .team-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--team, #214ED3);
  transform: skewX(-12deg);
  transform-origin: left center;
}

.team-row.selected, .team-chip.selected {
  border-width: 2px;
  border-color: var(--accent);
}

.team-chip {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 4px 10px 4px 12px;
  color: var(--text);
  text-align: left;
}

.team-logo-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px dashed var(--line);
  border-radius: 50%;
  /* Carbono, igual a moeda do mapa: logo clara em fundo claro sumia. */
  background: var(--brand-carbon);
  cursor: pointer;
  overflow: hidden;
}

.team-logo-slot::after {
  content: "+";
  color: rgba(243, 239, 230, .6);
  font: 700 13px Bahnschrift, sans-serif;
}

.team-logo-slot:has(img:not([hidden]))::after {
  content: none;
}

.team-logo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.team-chip-toggle {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.team-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--team);
}

.team-chip span {
  overflow: hidden;
  font: 700 13px/1 Bahnschrift, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-chip.off {
  opacity: .42;
  filter: grayscale(.7);
}

/* Display toggles */
.display-card {
  padding: 14px;
}

.display-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.display-heading span {
  font: 800 11px monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}

.display-heading small {
  color: var(--muted);
  font: 9px monospace;
}

.display-list {
  display: grid;
}

.display-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
}

/* Fase 2 · Alta Leitura: destaque discreto para o modo de contraste máximo */
.readability-toggle {
  margin-top: 4px;
  padding: 5px 8px;
  border-top: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-tinted);
  font-weight: 700;
}
.readability-toggle:has(input:checked) {
  background: var(--accent-soft);
  color: var(--electric);
}

.display-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.display-toggle > span {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
}

.display-toggle > span::after {
  position: absolute;
  inset: 2px;
  content: "";
  border-radius: 2px;
  background: transparent;
  transition: background .15s var(--ease);
}

.display-toggle input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.display-toggle input:checked + span::after {
  background: var(--accent);
}

.display-toggle input:disabled ~ * {
  opacity: .42;
}

.display-toggle:has(input:disabled) {
  cursor: not-allowed;
  color: var(--dim);
}

.display-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 9px monospace;
  text-transform: uppercase;
}

.display-footer select {
  min-width: 110px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
}

/* Tabs & Panels */
.panel-grow {
  min-height: 160px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ranking-card {
  padding: 0;
}

.panel-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  /* A barra rola e a barra de rolagem esta' escondida. Sem nenhuma pista
     disso, aba que nao coube simplesmente nao existe para quem olha — foi o
     que aconteceu com a aba Meta. A sombra na borda direita e' a pista: ela
     some sozinha quando a rolagem chega ao fim. */
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(243, 239, 230, 0)) left / 24px 100% no-repeat,
    linear-gradient(to left, var(--surface) 30%, rgba(243, 239, 230, 0)) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(11, 12, 14, .16), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 12, 14, .16), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.panel-tab {
  flex: 1 0 auto;
  min-width: 48px;
  text-align: center;
  padding: 10px 8px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.panel-tab:hover {
  color: var(--text);
}

.panel-tab.active {
  border-color: var(--accent);
  color: var(--accent);
}

.tab-panel {
  display: none;
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 10px;
  scrollbar-width: thin;
}

.tab-panel.active {
  display: block;
}

.scoreboard-list, .team-list, .event-list, .library-list {
  display: grid;
  gap: 6px;
}

/* ── Fase 4 · comparativo "Nosso Time x Adversário" ───────────────────────── */
.comparison-list {
  display: grid;
  gap: 10px;
  padding: 4px 2px;
}

.comparison-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.comparison-team {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--team, #888);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-vs {
  color: var(--muted);
  font-size: 13px;
}

.comparison-radar {
  display: grid;
  place-items: center;
  padding: 6px 0;
}
.comparison-radar svg {
  width: 100%;
  max-width: 240px;
  height: auto;
}

.comparison-totals {
  display: grid;
  gap: 3px;
}

.comparison-total-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--surface-sunken);
  font-size: 11px;
}
.comparison-total-row strong {
  font-size: 11px;
  text-align: center;
}
.comparison-total-row strong:first-child { color: var(--electric); }
.comparison-total-row strong:last-child { color: #8a6200; }
.comparison-total-row span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
}

.comparison-section-title {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.comparison-windows {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  min-height: 64px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  overflow-x: auto;
}

.comparison-window {
  display: flex;
  flex: 1 0 8px;
  max-width: 14px;
  height: 56px;
  align-items: flex-end;
  gap: 1px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.comparison-window i {
  flex: 1;
  border-radius: 2px 2px 0 0;
}
.comparison-window .bar-a { background: var(--team, #7fb174); }
.comparison-window .bar-b { background: var(--team, #d0a85d); opacity: .8; }
.comparison-window.peak {
  background: rgba(35, 87, 217, .14);
  border-radius: 3px;
}
.comparison-window:hover {
  background: rgba(240, 90, 50, .18);
}

.comparison-version {
  display: block;
  font-size: 10px;
  text-align: right;
}

.comparison-cta {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  background: var(--accent-soft);
  text-align: center;
}
.comparison-cta strong {
  font-size: 13px;
  color: var(--electric);
}
.comparison-cta p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}
.comparison-cta .button {
  justify-self: center;
}

.score-row {
  display: grid;
  grid-template-columns: 22px 4px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}

.score-row:hover, .score-row.selected {
  border-color: var(--accent);
  background: var(--surface-tinted);
}

.score-rank {
  color: var(--muted);
  font: 800 11px monospace;
  text-align: center;
}

.score-color {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background: var(--team);
}

.score-copy {
  min-width: 0;
}

.score-copy strong, .score-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-copy strong {
  font: 700 12px/1.2 Bahnschrift, sans-serif;
  color: var(--text);
}

.score-copy small {
  margin-top: 3px;
  color: var(--muted);
  font: 9px monospace;
}

.score-points {
  display: grid;
  place-items: center;
  min-width: 28px;
  color: var(--accent);
  font: 800 16px/1 Bahnschrift, sans-serif;
}

.team-row {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.team-row:hover, .team-row.selected {
  border-color: var(--accent);
  background: var(--surface-tinted);
}

.team-row.hidden {
  opacity: .42;
}

.team-color {
  width: 6px;
  height: 32px;
  border-radius: 3px;
  background: var(--team);
}

.team-copy {
  min-width: 0;
}

.team-copy strong, .team-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-copy strong {
  font: 700 13px/1.2 Bahnschrift, sans-serif;
  color: var(--text);
}

.team-copy small {
  margin-top: 3px;
  color: var(--muted);
  font: 9px monospace;
}

.team-eye {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
}

.player-list {
  display: none;
  grid-column: 2 / 4;
  gap: 4px;
  padding-top: 6px;
}

.team-row.selected .player-list {
  display: grid;
}

.player-chip {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 0;
  text-align: left;
  font-size: 10px;
  cursor: pointer;
}

.player-chip:hover, .player-chip.selected {
  color: var(--accent);
  font-weight: 700;
}

.event-row, .library-item {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}

.event-row:hover, .event-row.selected, .library-item:hover {
  border-color: var(--accent);
  background: var(--surface-tinted);
}

.event-row strong, .event-row span, .library-item strong, .library-item span {
  display: block;
}

.event-row strong, .library-item strong {
  font: 700 12px/1.2 Bahnschrift, sans-serif;
  color: var(--text);
}

.event-row span, .library-item span {
  margin-top: 3px;
  color: var(--muted);
  font: 9px monospace;
}

.data-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 14px;
}

.data-strip div:first-child {
  border-right: 1px solid var(--line-soft);
}

.data-strip div {
  min-width: 0;
  padding-right: 8px;
}

.data-strip span, .data-strip strong {
  display: block;
}

.data-strip span {
  color: var(--muted);
  font: 9px monospace;
  text-transform: uppercase;
}

.data-strip strong {
  margin-top: 4px;
  overflow: hidden;
  color: var(--accent);
  font: 800 12px monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted {
  color: var(--muted);
  font-size: 11px;
}

/* Studio content */
.studio-toolbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--line-soft);
}

.studio-toolbar label {
  color: var(--muted);
  font: 800 9px monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.studio-toolbar select {
  min-width: 0;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
}

.studio-content {
  padding: 10px 2px 4px;
}

.studio-title {
  margin: 0 0 4px;
  font: 700 14px Bahnschrift, sans-serif;
  color: var(--text);
}

.studio-subtitle {
  margin: 0 0 12px;
  color: var(--muted);
  font: 10px/1.4 monospace;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.studio-stat {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.studio-stat span, .studio-stat strong {
  display: block;
}

.studio-stat span {
  color: var(--muted);
  font-size: 9px;
}

.studio-stat strong {
  margin-top: 4px;
  color: var(--accent);
  font: 700 16px monospace;
}

.studio-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.studio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
}

.studio-row:last-child {
  border-bottom: 0;
}

.studio-row strong {
  font: 700 11px monospace;
  text-align: right;
  color: var(--text);
}

.studio-action {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.studio-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.studio-table {
  width: 100%;
  border-collapse: collapse;
  font: 10px monospace;
}

.studio-table th {
  padding: 6px;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.studio-table td {
  padding: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
}

.studio-table td:last-child, .studio-table th:last-child {
  text-align: right;
}

.studio-note {
  margin-top: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-soft);
  color: var(--text);
  font: 10px/1.45 monospace;
}

.studio-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 10px;
}

.studio-search input {
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
}

.studio-badge {
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font: 9px monospace;
}

.studio-badge.ok {
  border-color: var(--safe);
  background: #d9f3ea;
  color: var(--safe);
}

.studio-badge.warn {
  border-color: var(--gold);
  background: #f8ead2;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Import Dialog & Modal
   -------------------------------------------------------------------------- */
.import-dialog {
  position: fixed;
  z-index: 50;
  top: 50%;
  left: 50%;
  width: min(480px, calc(100vw - 32px));
  padding: 32px 34px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgb(19 38 61 / 20%);
  text-align: center;
  transform: translate(-50%, -50%);
}

.import-dialog::before {
  position: fixed;
  z-index: -1;
  inset: -100vmax;
  content: "";
  background: rgba(19, 38, 61, .45);
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.dialog-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.import-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border: 1px solid var(--accent-soft);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 24px;
}

.dialog-kicker {
  color: var(--accent);
  font: 800 10px monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.import-dialog h1 {
  margin: 8px 0;
  font: 800 24px/1 Bahnschrift, sans-serif;
  letter-spacing: -.02em;
  color: var(--text);
}

.import-dialog p {
  max-width: 380px;
  margin: 0 auto 18px;
  color: var(--muted);
  font: 11px/1.5 monospace;
}

.import-dialog code {
  color: var(--accent);
  font: inherit;
  font-weight: 700;
}

.import-dropzone {
  display: grid;
  place-items: center;
  gap: 6px;
  width: 100%;
  min-height: 120px;
  margin-bottom: 14px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .14s var(--ease);
}

.import-dropzone:hover, .import-dropzone.drag-over {
  border-color: var(--accent);
  background: var(--surface-tinted);
  transform: translateY(-1px);
}

.import-dropzone strong {
  font: 700 14px Bahnschrift, sans-serif;
  color: var(--text);
}

.import-dropzone span {
  color: var(--muted);
  font: 10px monospace;
}

.import-dialog > .button {
  min-width: 180px;
}

.import-dialog > small {
  display: block;
  margin: 16px auto 0;
  max-width: 360px;
  color: var(--dim);
  font: 9px/1.4 monospace;
}

.upload-status {
  position: fixed;
  z-index: 40;
  top: 86px;
  left: 50%;
  display: grid;
  grid-template-columns: auto minmax(150px, 280px);
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font: 11px monospace;
  transform: translateX(-50%);
}

.upload-status progress {
  width: 100%;
  height: 8px;
  accent-color: var(--accent);
}

.toast {
  position: fixed;
  z-index: 45;
  bottom: 24px;
  left: 50%;
  max-width: 520px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  box-shadow: var(--shadow-lg);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.upload-status[hidden], .import-dialog[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Broadcast Overlay & Fullscreen
   -------------------------------------------------------------------------- */
body.overlay {
  overflow: hidden;
  background: transparent;
}

body.overlay .grain, body.overlay .app-nav, body.overlay .topbar,
body.overlay .insight-rail, body.overlay .control-rail, body.overlay .timeline-deck,
body.overlay .tool-rail, body.overlay .zoom-rail, body.overlay .quality-banner,
body.overlay .upload-status, body.overlay .import-dialog {
  display: none !important;
}

body.overlay .app-frame {
  height: 100dvh;
  margin: 0;
  display: block;
}

body.overlay .workspace {
  height: 100%;
  display: block;
  padding: 0;
}

body.overlay .map-workbench {
  height: 100%;
  display: block;
}

body.overlay .board-shell {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.overlay .board-shell::before {
  display: none;
}

body.overlay .canvas-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.overlay .board-hud {
  top: 24px;
}

body.overlay .map-killfeed {
  left: 24px;
  bottom: 28px;
  width: min(280px, 32%);
}

body.overlay .map-killfeed li {
  background: var(--hud-plate);
  border-color: var(--line);
}

.app-frame:fullscreen,
.app-frame:-webkit-full-screen,
body.focus-mode .app-frame,
body.fullscreen-fallback .app-frame {
  width: 100vw;
  height: 100dvh;
  margin: 0;
  grid-template-rows: minmax(0, 1fr);
  background: var(--brand-carbon);
}

body.focus-mode,
body.fullscreen-fallback { overflow: hidden; }
body.focus-view .app-nav,
body.focus-view .topbar { display: none; }

body.focus-view .workspace { height: 100%; min-height: 0; }
body.focus-view .map-workbench {
  height: 100%;
  grid-template-rows: 48px minmax(0, 1fr) auto;
}

body.focus-view .focus-bar {
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
}

.focus-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.focus-brand img { width: 25px; height: 25px; }
.focus-brand span { display: grid; gap: 2px; }
.focus-brand strong { font: 800 11px/1 Bahnschrift, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.focus-brand small { color: var(--muted); font: 9px/1 monospace; }
.focus-shortcuts { margin-left: auto; color: var(--muted); font: 10px/1 monospace; }
.focus-shortcuts kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-tinted); color: var(--text); font: inherit; }
.focus-action,
.focus-exit { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; font: 700 10px/1 Bahnschrift, sans-serif; text-transform: uppercase; }
.focus-action:hover,
.focus-action[aria-pressed="true"],
.focus-exit:hover { border-color: var(--accent); color: var(--accent); }
.focus-exit span { margin-left: 6px; font-size: 16px; }

body.focus-view .canvas-stage { width: 100%; height: 100%; max-height: none; }
body.focus-view .control-rail {
  position: fixed;
  z-index: 100;
  inset: 60px 12px 12px auto;
  width: min(360px, calc(100vw - 24px));
  max-height: none;
  transform: translateX(calc(100% + 24px));
  transition: transform .22s var(--ease);
}
body.focus-view.analysis-drawer-open .control-rail { transform: none; }

body.overlay .overlay-live-board, body.overlay .overlay-chip-row {
  display: flex;
}

body.overlay .overlay-live-board {
  display: grid;
  max-height: 72vh;
  overflow: auto;
}

body.overlay-vertical .map-killfeed {
  width: min(320px, 72%);
  left: 18px;
}

body.overlay-vertical .overlay-live-board {
  width: min(260px, 70%);
  right: 18px;
}

body.overlay-focus .overlay-live-board {
  display: none;
}

/* --------------------------------------------------------------------------
   Responsive & Media Queries (1280x720 & 1920x1080)
   -------------------------------------------------------------------------- */
@media (max-width: 1220px) {
  .topbar {
    gap: 12px;
    padding: 0 12px;
  }
  .top-context {
    display: none;
  }
  .button {
    padding: 0 10px;
  }
  .control-rail {
    width: 250px;
  }
}

@media (max-width: 980px) {
  body {
    overflow: auto;
  }
  .app-nav {
    position: sticky;
    top: 0;
    inset: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    margin: 0;
    border-radius: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    padding: 10px 12px;
  }
  .nav-list {
    display: flex;
    flex: 1;
    gap: 2px;
    overflow: auto;
    padding: 6px;
  }
  .nav-link {
    min-width: max-content;
    min-height: 31px;
    font-size: 11px;
  }
  .nav-status {
    display: none;
  }
  .app-frame {
    margin: 0;
    display: block;
    height: auto;
    min-height: 100dvh;
  }
  .topbar {
    grid-template-columns: 1fr auto;
    min-height: 56px;
    margin: 0;
  }
  .top-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .workspace {
    min-height: calc(100dvh - 112px);
  }
  .map-workbench {
    min-height: 680px;
  }
  .control-rail {
    position: relative;
    width: 100%;
    max-height: none;
    top: auto;
    right: auto;
  }
}

@media (max-width: 720px) {
  .brand small {
    display: none;
  }
  .nav-link span {
    display: none;
  }
  .topbar {
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }
  .top-actions {
    justify-content: flex-start;
  }
  .workspace {
    display: block;
    padding: 8px;
  }
  .insight-rail, .control-rail {
    overflow: visible;
    margin-bottom: 8px;
  }
  .map-workbench {
    min-height: min(108vw, 720px);
  }
  .canvas-stage {
    position: relative;
    height: min(108vw, 720px);
  }
  .timeline-controls {
    grid-template-columns: 28px 72px 86px minmax(70px, 1fr) 52px 40px;
  }
  .tool-rail {
    transform: translateY(-50%) scale(.88);
    transform-origin: left center;
  }
  .panel-tabs {
    grid-template-columns: repeat(5, minmax(52px, 1fr));
    overflow: auto;
  }
  .tab-panel {
    min-height: 260px;
  }
  .display-card {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .play-button, .nav-link, .team-row, .team-chip {
    transition: none !important;
  }
}

/* ==========================================================================
   Caderno & Campeonatos (V3 Tactical Broadcast Extension)
   ========================================================================== */
.caderno-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border: 1px solid var(--line);
}
.caderno-temporal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.caderno-temporal-row select {
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
}
.caderno-action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.caderno-section {
  margin-bottom: 14px;
}
.caderno-subtitle {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
}
.chapter-item, .bookmark-item, .note-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chapter-item:hover, .bookmark-item:hover, .note-item:hover {
  background: var(--surface-tinted);
  border-color: var(--accent);
}
.chapter-badge, .bookmark-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
}
.champ-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
}
.champ-header select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
}
.champ-table-wrap {
  overflow-x: auto;
  margin-bottom: 14px;
}
.champ-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}
.champ-table th {
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
}
.champ-table td {
  padding: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
}
.champ-table tr:hover td {
  background: var(--surface-tinted);
}
.champ-table .rank-num {
  font-weight: 800;
  color: var(--accent);
  text-align: center;
  width: 24px;
}
.champ-table .pts-bold {
  font-weight: 800;
  color: var(--energy);
}
.h2h-content {
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Broadcast eSports Scoreboard & HUD System (Booyah League & FFWS Standard)
   -------------------------------------------------------------------------- */
.broadcast-team-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--team, var(--accent));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}

.broadcast-team-card:hover, .broadcast-team-card.selected {
  background: var(--surface-tinted);
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(36, 93, 219, 0.16);
  transform: translateY(-1px);
}

.broadcast-team-card.wiped {
  opacity: 0.55;
  filter: grayscale(0.65);
  border-left-color: #64748b;
  background: var(--surface-soft);
}

.broadcast-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.broadcast-rank {
  font-family: Bahnschrift, monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  min-width: 22px;
}

.broadcast-rank.rank-1 { color: #f59e0b; font-size: 12px; }
.broadcast-rank.rank-2 { color: #94a3b8; }
.broadcast-rank.rank-3 { color: #d97706; }

.broadcast-logo-slot {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--brand-carbon);
  border: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.broadcast-logo-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.broadcast-color-swatch {
  font-size: 10px;
  font-weight: 800;
  color: var(--team, var(--text));
}

.broadcast-team-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.broadcast-team-title strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}

.broadcast-status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 4px;
  width: fit-content;
}

.broadcast-status-badge.full {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.broadcast-status-badge.alive {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.broadcast-status-badge.wiped {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.broadcast-kills-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.broadcast-kills-badge .skull-icon {
  color: #ef4444;
  font-size: 11px;
}

.broadcast-eye-btn {
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
}

.broadcast-eye-btn:hover {
  color: var(--accent);
  background: var(--surface-soft);
}

.athlete-capsules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--line-soft);
}

.athlete-capsule {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  transition: all .15s ease;
  min-width: 0;
}

.athlete-capsule:hover, .athlete-capsule.selected {
  border-color: var(--accent);
  background: var(--surface-tinted);
}

.athlete-capsule.alive {
  border-color: var(--line);
  background: var(--surface);
}

.athlete-capsule.alive .capsule-state-icon {
  color: #10b981;
}

.athlete-capsule.knocked {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.16);
  animation: knockedPulse 1s infinite alternate;
}

@keyframes knockedPulse {
  0% { box-shadow: 0 0 2px #ef4444; }
  100% { box-shadow: 0 0 8px #ef4444; }
}

.athlete-capsule.knocked .capsule-state-icon {
  color: #ef4444;
}

.athlete-capsule.dead {
  opacity: 0.45;
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--muted);
}

.athlete-capsule.dead .capsule-state-icon {
  color: #94a3b8;
}

.capsule-slot {
  font-family: monospace;
  font-size: 9px;
  color: var(--dim);
}

.capsule-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capsule-kills {
  font-size: 9px;
  font-weight: 800;
  color: #d97706;
}

/* Map Canvas Broadcast HUD & Killfeed */
.overlay-live-board {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
}

.overlay-broadcast-hud {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 18px;
  background: rgba(10, 15, 29, 0.90);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.25);
}

.hud-stat-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: Bahnschrift, sans-serif;
  color: #ffffff;
}

.hud-stat-badge .hud-lbl {
  font-size: 9px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.hud-stat-badge strong {
  font-size: 14px;
  font-weight: 800;
  color: #38bdf8;
}

.hud-stat-badge.alive-players strong { color: #34d399; }
.hud-stat-badge.total-kills strong { color: #f87171; }

.hud-stat-badge small {
  font-size: 10px;
  color: #64748b;
}

.map-killfeed {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.killfeed-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 3px solid #ef4444;
  border-radius: 6px;
  font-family: Bahnschrift, sans-serif;
  font-size: 11px;
  color: #ffffff;
  animation: feedSlideIn 0.25s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

@keyframes feedSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.killfeed-killer {
  font-weight: 800;
}

.killfeed-arrow {
  color: #ef4444;
  font-size: 10px;
}

.killfeed-victim {
  color: #e2e8f0;
}


/* ── Objetos do mapa (camadas geradas a partir do cliente) ─────────────── */
.display-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 2px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.display-subhead > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.display-subhead > small { font-size: 10px; color: var(--muted); opacity: .8; }
.display-empty { padding: 6px 12px 10px; margin: 0; font-size: 11px; color: var(--muted); }
.layer-swatch {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--swatch, #94a3b8);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .25);
}
.layer-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: .85;
}


/* --------------------------------------------------------------------------
   Só esta equipe
   -------------------------------------------------------------------------- */
.team-solo,
.broadcast-solo-btn {
  flex: none;
  min-width: 30px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}

.team-solo:hover,
.broadcast-solo-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.team-solo.on,
.broadcast-solo-btn.on {
  border-color: var(--energy);
  background: var(--energy);
  color: #fff;
}

/* A faixa fica sobre o mapa: se só uma equipe aparece, isso tem de estar
   escrito, senão o mapa parece vazio por bug. */
.solo-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 12px;
  transform: translateX(-50%);
  border: 1px solid var(--energy);
  border-radius: 999px;
  background: rgba(15, 24, 40, .92);
  box-shadow: var(--shadow);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* display:flex vence o atributo hidden; sem isto sobra uma pílula vazia. */
.solo-banner[hidden] { display: none; }

.solo-banner button {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--energy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Match Result — bancada de estatística
   -------------------------------------------------------------------------- */
.results-view {
  display: none;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--bg);
}

/* A vista fica dentro da área de trabalho, então esconder ".workspace"
   esconderia ela junto: some só com o que ela substitui. */
body.results .map-workbench,
body.results .control-rail,
body.results .insight-rail,
body.results .tool-rail,
body.results .zoom-rail { display: none; }
body.results .workspace { display: grid; grid-template-rows: minmax(0, 1fr); }
body.results .results-view:not(.champs-view) { display: grid; }
body.results .champs-view { display: none; }
body.results:not(.results-has-official) [data-results-tab="standings"],
body.results:not(.results-has-official) [data-results-tab="team"],
body.results:not(.results-has-official) [data-results-tab="players"],
body.results:not(.results-has-official) [data-results-tab="head"],
body.results:not(.results-has-official) .results-actions .results-field,
body.results:not(.results-has-official) #resultsSearch,
body.results:not(.results-has-official) #resultsMarkdown,
body.results:not(.results-has-official) #resultsExport { display: none; }

.results-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.results-title { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.results-title strong { font-size: 18px; letter-spacing: -.01em; }
.results-title small { color: var(--muted); font-size: 12px; }

.results-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.results-search {
  width: 210px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

.results-search:focus { border-color: var(--accent); outline: none; }

.results-field {
  display: flex;
  align-items: center;
  gap: 7px;
}

.results-field > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.results-field select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

/* Sub-navegação: quatro destinos e nada mais. Quem quer só a tabela não
   precisa rolar por três blocos para achá-la. */
.results-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.results-tab {
  padding: 11px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.results-tab:hover { color: var(--ink); }
.results-tab.active { border-bottom-color: var(--accent); color: var(--accent); }

.results-picker { position: relative; margin-left: auto; }

.results-picker > summary {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.results-picker > summary::-webkit-details-marker { display: none; }
.results-picker[open] > summary { border-color: var(--accent); color: var(--accent); }

.results-picker-body {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12;
  width: 340px;
  max-height: 60vh;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.results-picker-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.button-sm { padding: 4px 10px; font-size: 11px; }

.results-body { min-height: 0; overflow: auto; padding: 20px 24px 28px; }
.results-pane { display: none; flex-direction: column; gap: 16px; }
.results-pane.active { display: flex; }
.results-pane-bar { display: flex; gap: 18px; flex-wrap: wrap; }

.results-section-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.results-match-list { display: flex; flex-direction: column; gap: 4px; }

.results-match {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.results-match:hover { background: var(--surface-soft); }
.results-match.on { border-color: var(--line); }
.results-match-copy { display: flex; flex-direction: column; min-width: 0; }
.results-match-copy strong { font-size: 12px; }
.results-match-copy small { color: var(--muted); font-size: 11px; }

/* Cartões de resumo da equipe: os cinco números que o treinador olha antes
   de abrir qualquer tabela. */
.results-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.results-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.results-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.results-card strong { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.results-card span { color: var(--muted); font-size: 11px; }

.results-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.results-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.results-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.results-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.results-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.results-table tbody tr:last-child td { border-bottom: 0; }
.results-table tbody tr:hover { background: var(--surface-soft); }
.results-table tbody tr.clickable { cursor: pointer; }
.results-table tbody tr:nth-child(-n+3) .rank-num { color: var(--energy); font-weight: 800; }
.results-table .rank-num { width: 42px; color: var(--muted); font-weight: 700; }
.results-table .pts-bold { font-weight: 800; color: var(--accent); }
.results-table td:nth-child(2) { font-weight: 600; white-space: normal; }

.results-head { display: flex; flex-direction: column; gap: 14px; }
.results-head-table th:not(:first-child) { text-align: center; }
.results-head-table td { text-align: center; }
.results-head-table .head-key { text-align: left; color: var(--muted); font-weight: 600; }
.results-head-table .head-win { color: var(--accent); font-weight: 800; }

@media (max-width: 980px) {
  .results-split { grid-template-columns: 1fr; }
  .results-picker-body { width: min(340px, calc(100vw - 32px)); }
}

/* --------------------------------------------------------------------------
   Tema escuro
   -------------------------------------------------------------------------- */
/* O mapa do jogo é uma imagem clara e cheia de cor. Num painel claro ele
   compete com a interface inteira; num painel escuro ele vira o objeto
   luminoso da tela e tudo o que é branco em cima dele — safe, moeda, rota —
   passa a ler de longe. Só trocam os tokens: nenhum componente sabe do tema. */
body[data-theme="escuro"] {
  --app-bg: #0B0C0E;
  --surface: #141618;
  --surface-raised: #1B1E21;
  --surface-sunken: #070809;
  --ink-strong: #F3EFE6;
  --ink: #D9D5CC;
  --ink-muted: #B1B4B3;
  --border: rgba(243, 239, 230, .14);
  --primary: #FF4F2E;
  --primary-hover: #FF684B;
  --accent: #FF4F2E;

  --bg: var(--app-bg);
  --bg-deep: #070809;
  --surface-soft: #1B1E21;
  --surface-tinted: #222629;
  --line: var(--border);
  --line-soft: rgba(243, 239, 230, .08);
  --text: var(--ink-strong);
  --muted: var(--ink-muted);
  --dim: #747A7E;
  --accent-soft: rgba(255, 79, 46, .14);
  --accent-ink: #0B0C0E;
  --electric: #7CA5CB;
  --energy: #FF4F2E;
  --gold: #C58C2C;
  --annotation: #7CA5CB;
  --shadow: 0 8px 22px rgba(0, 0, 0, .38);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
  --entity-halo-color: rgba(8, 14, 26, 0.55);
  --hud-plate: rgba(11, 12, 14, .92);
  color-scheme: dark;
}

/* Num fundo escuro a keyline preta da safe some: ela passa a ser um contorno
   frio, e o brilho branco sobe. */
body[data-theme="escuro"] {
  --safe-keyline: rgba(4, 8, 16, 0.92);
  --safe-glow: rgba(255, 255, 255, 0.85);
  --safe-glow-blur: 16px;
  --safe-next-keyline: rgba(4, 8, 16, 0.92);
  --safe-badge-bg: rgba(8, 14, 26, 0.94);
}

body[data-theme="escuro"] .canvas-stage,
body[data-theme="escuro"] .board-shell { background: #070809; }

body[data-theme="escuro"] .results-table tbody tr:hover { background: var(--surface-tinted); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   Sala do MatchStats
   -------------------------------------------------------------------------- */
.room-intro p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.room-intro strong { color: var(--ink); }

.room-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.room-input {
  width: 260px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: Bahnschrift, monospace;
  font-size: 14px;
  letter-spacing: .04em;
}

.room-input:focus { border-color: var(--accent); outline: none; }

.room-status {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
}

.room-status.ok { border-left-color: var(--success); }
.room-status.aviso { border-left-color: var(--warning); }
.room-status.erro { border-left-color: var(--danger); }
.room-status.carregando { border-left-color: var(--accent); color: var(--muted); }

.room-checks { display: flex; flex-direction: column; gap: 5px; }

.room-check {
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: 12px;
}

.room-check.good { color: var(--success); }
.room-check.bad { color: var(--danger); }

/* --------------------------------------------------------------------------
   Painel de exibição — três níveis
   -------------------------------------------------------------------------- */
/* Nível 1 escolhe o trabalho, nível 2 tem os seis ajustes que se mexe durante
   a análise, e o resto fica em Avançado. Antes eram vinte controles numa
   lista só, com nome de comando de rede no rótulo. */
.display-block { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.display-block:last-of-type { border-bottom: 0; }

.display-label {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }

.preset {
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .12s var(--ease), color .12s var(--ease);
}

.preset:hover { border-color: var(--accent); color: var(--accent); }

.preset.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.display-field {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.display-field > span { color: var(--muted); font-size: 11px; font-weight: 700; }

.display-field select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}

.display-field input[type="range"] { width: 100%; }

.display-advanced { border-top: 1px solid var(--line); }

.display-advanced > summary {
  padding: 9px 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.display-advanced > summary:hover { color: var(--accent); }
.display-advanced[open] > summary { color: var(--ink); }

.display-heading { cursor: pointer; }

/* Mantido no DOM para o app continuar lendo o preset atual, fora da tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* A marca é FIFTH.GG; o sufixo entra mais leve para o nome não competir
   consigo mesmo no canto da tela. */
.brand strong em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  opacity: .9;
}

/* --------------------------------------------------------------------------
   Analista
   -------------------------------------------------------------------------- */
.coach-status { color: var(--muted); font-size: 12px; }

/* A leitura escrita vem primeiro, como um parecer; os achados numerados ficam
   abaixo para quem quer conferir de onde cada frase saiu. */
.coach-voice {
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.6;
}

.coach-voice p { margin: 0 0 10px; }
.coach-voice p:last-child { margin-bottom: 0; }
.coach-voice strong { color: var(--accent); }
.coach-voice-off { color: var(--muted); font-size: 13px; font-style: italic; }

.coach-findings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.coach-finding {
  position: relative;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.coach-finding::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--muted);
}

.coach-finding.sev-alta::before { background: var(--danger); }
.coach-finding.sev-media::before { background: var(--warning); }
.coach-finding.sev-baixa::before { background: var(--electric); }
.coach-finding.sev-info::before { background: var(--success); }

.coach-tag {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.coach-finding strong { display: block; margin-bottom: 5px; font-size: 14px; }
.coach-finding p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ==========================================================================
   Acabamento visual — tipografia, respiro e profundidade
   ==========================================================================
   O que fazia a tela parecer amadora não era a paleta: era tudo do mesmo
   tamanho, tudo colado e tudo plano. Aqui entra escala de tipo, respiro e uma
   profundidade discreta. A paleta perolada/cobalto/laranja continua.
   ========================================================================== */
:root {
  --step--1: clamp(11px, .72rem, 12px);
  --step-0: clamp(13px, .86rem, 14px);
  --step-1: clamp(15px, 1rem, 16px);
  --step-2: clamp(19px, 1.35rem, 22px);
  --step-3: clamp(24px, 1.9rem, 30px);
  --radius-lg: 14px;
  --ring: 0 0 0 3px var(--accent-soft);
}

/* Números têm de alinhar em coluna: tabela de estatística com dígito de
   largura variável é ilegível de relance. */
.results-table td,
.results-card strong,
.timecode,
.board-hud strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.results-title strong { font-size: var(--step-2); letter-spacing: -.02em; }
.results-card strong { font-size: var(--step-3); letter-spacing: -.03em; }
.results-table { font-size: var(--step-0); }

/* Cartões com uma borda superior mais clara ganham volume sem sombra pesada. */
.results-card,
.coach-finding,
.panel-card,
.results-table-wrap {
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, var(--shadow);
}

body[data-theme="escuro"] .results-card,
body[data-theme="escuro"] .coach-finding,
body[data-theme="escuro"] .panel-card,
body[data-theme="escuro"] .results-table-wrap {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, var(--shadow);
}

.results-card { padding: 16px 18px; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.results-card:hover { border-color: var(--accent); transform: translateY(-1px); }

.results-bar { padding: 18px 26px; }
.results-body { padding: 24px 26px 32px; }
.results-nav { padding: 0 26px; gap: 2px; }
.results-tab { padding: 13px 15px; font-size: var(--step-0); }

/* Foco visível em tudo que recebe teclado — a ferramenta é operada no meio de
   uma transmissão, às vezes sem olhar para o mouse. */
.preset:focus-visible,
.results-tab:focus-visible,
.button:focus-visible,
.room-input:focus-visible,
.results-search:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* A primeira coluna de posição ganha peso: é por ela que o olho entra. */
.results-table .rank-num { font-size: var(--step-0); font-weight: 800; }
.results-table tbody tr { transition: background .1s var(--ease); }

/* Linha do topo do pódio marcada de leve, como tabela de campeonato. */
.results-table tbody tr:nth-child(1) td { background: linear-gradient(90deg, var(--accent-soft), transparent 45%); }

.display-heading,
.results-section-title { letter-spacing: .07em; }

.preset { padding: 9px 4px; border-radius: 8px; }

/* O mapa é o produto: borda some, ele encosta na moldura. */
.board-shell { border-radius: 0; }

.brand strong { font-size: var(--step-1); letter-spacing: .02em; }
.brand small { letter-spacing: .04em; }

@media (max-width: 980px) {
  .results-bar, .results-body, .results-nav { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   Motion
   ==========================================================================
   Movimento só onde ele explica alguma coisa: conteúdo que chega, painel que
   troca, número que muda. Nada girando à toa. Tudo respeita
   prefers-reduced-motion, porque isto roda em transmissão ao vivo e ninguém
   precisa de animação competindo com o replay.
   ========================================================================== */
@keyframes fifth-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes fifth-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fifth-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* Painel que entra: sobe um pouco em vez de piscar. */
.results-pane.active { animation: fifth-rise .22s var(--ease) both; }

/* Cartões e achados entram em cascata curta — dá ordem de leitura sem atrasar
   ninguém: o último cartão chega em menos de 200 ms. */
.results-card,
.coach-finding { animation: fifth-rise .26s var(--ease) both; }
.results-card:nth-child(2), .coach-finding:nth-child(2) { animation-delay: .03s; }
.results-card:nth-child(3), .coach-finding:nth-child(3) { animation-delay: .06s; }
.results-card:nth-child(4), .coach-finding:nth-child(4) { animation-delay: .09s; }
.results-card:nth-child(5), .coach-finding:nth-child(5) { animation-delay: .12s; }
.results-card:nth-child(n+6), .coach-finding:nth-child(n+6) { animation-delay: .15s; }

.results-table tbody tr { animation: fifth-fade .2s var(--ease) both; }
.coach-voice { animation: fifth-rise .3s var(--ease) both; }
.solo-banner { animation: fifth-rise .2s var(--ease) both; }

/* A faixa sob a aba ativa desliza para a nova posição. */
.results-tab { transition: color .15s var(--ease), border-color .18s var(--ease); }

/* Botão responde ao toque: afunda de leve. Importante no celular, onde não há
   estado de hover para dizer que o toque pegou. */
.button, .preset, .results-tab, .team-solo, .broadcast-solo-btn, .results-open {
  transition: transform .09s var(--ease), background .15s var(--ease),
              border-color .15s var(--ease), color .15s var(--ease);
}
.button:active, .preset:active, .team-solo:active,
.broadcast-solo-btn:active, .results-open:active { transform: scale(.97); }

/* Carregando: uma varredura na barra, em vez de spinner genérico. */
.room-status.carregando { position: relative; overflow: hidden; }
.room-status.carregando::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  animation: fifth-sweep 1.1s linear infinite;
}

/* O ponto de conexão pulsa só quando está ao vivo. */
.connection-dot.online { animation: fifth-pulse 2.4s ease-in-out infinite; }
@keyframes fifth-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .results-pane.active,
  .results-card,
  .coach-finding,
  .coach-voice,
  .solo-banner,
  .results-table tbody tr,
  .connection-dot.online,
  .room-status.carregando::after { animation: none; }
  .button:active, .preset:active { transform: none; }
}

/* FIFTH GG · entrada editorial */
.landing[hidden] { display: none; }

body.landing-active {
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--brand-carbon);
  color: var(--brand-bone);
}

body.landing-active > .grain { opacity: .035; color: var(--brand-bone); mix-blend-mode: screen; }
body.landing-active > .skip-link { display: none; }
body.landing-active > .app-nav,
body.landing-active > .app-frame { display: none; }

.landing {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 79, 46, .1), transparent 28rem),
    var(--brand-carbon);
  color: var(--brand-bone);
}

.landing-header,
.landing-hero,
.landing-benefits,
.landing-foot {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  border-bottom: 1px solid rgba(243, 239, 230, .18);
}

.landing-header img { display: block; width: 166px; height: auto; }

.landing-link,
.landing-secondary {
  min-height: 42px;
  border: 1px solid rgba(243, 239, 230, .34);
  border-radius: 2px;
  background: transparent;
  color: var(--brand-bone);
  font: 700 12px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform 100ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.landing-link { padding: 0 18px; }
.landing-secondary { padding: 0 20px; }
.landing-link:hover,
.landing-secondary:hover { border-color: var(--brand-ember); background: rgba(255, 79, 46, .1); transform: translateY(-1px); }
.landing-cta:active,
.landing-secondary:active,
.landing-link:active { transform: translateY(1px) scale(.985); }

.landing-benefits {
  border-top: 1px solid rgba(243, 239, 230, .22);
  border-bottom: 1px solid rgba(243, 239, 230, .22);
}

.landing-benefits article {
  display: grid;
  grid-template-columns: 58px minmax(210px, .45fr) 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0 30px;
  border-bottom: 1px solid rgba(243, 239, 230, .14);
}

.landing-benefits article:last-child { border-bottom: 0; }
.landing-benefits article > span { color: var(--brand-ember); font: 700 11px/1 "IBM Plex Mono", Consolas, monospace; }
.landing-benefits h2 { margin: 0; font: 800 clamp(24px, 3vw, 42px)/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif; letter-spacing: -.025em; }
.landing-benefits p { max-width: 56ch; margin: 0; color: rgba(243, 239, 230, .62); font-size: 15px; line-height: 1.55; }

.landing-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 52px 0 72px;
}

.landing-foot > div { display: grid; gap: 8px; }
.landing-foot span { color: var(--brand-ember); font: 700 10px/1 "IBM Plex Mono", Consolas, monospace; letter-spacing: .12em; }
.landing-foot strong { font: 700 clamp(17px, 2vw, 26px)/1.2 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif; }

.page-transition {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--brand-bone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease);
  pointer-events: none;
}

.page-transition img { width: 92px; }
body.is-entering .page-transition { transform: scaleX(1); }

@keyframes landing-rise { to { opacity: 1; transform: none; } }
@keyframes landing-cut-open { to { clip-path: inset(0); } }

@media (max-width: 980px) {
  .landing-header,
  .landing-hero,
  .landing-benefits,
  .landing-foot { width: min(100% - 32px, 720px); }
  .landing-benefits article { grid-template-columns: 42px 1fr; gap: 14px; }
  .landing-benefits p { grid-column: 2; }
}

@media (max-width: 560px) {
  .landing-header { min-height: 70px; }
  .landing-header img { width: 138px; }
  .landing-link { padding-inline: 12px; }
  .landing-cta,
  .landing-secondary { width: 100%; min-height: 48px; }
  .landing-foot { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-link,
  .landing-secondary,
  .landing-cta,
  .page-transition { transition: none; }
}

/* ==========================================================================
   Celular
   ==========================================================================
   O treinador abre isto no telefone no meio do campeonato. Precisa funcionar
   com o polegar: alvo grande, sem rolagem lateral, sem menu escondido.
   ========================================================================== */
@media (max-width: 720px) {
  .results-bar { gap: 10px; padding: 14px 16px; }
  .results-title strong { font-size: var(--step-1); }
  .results-actions { width: 100%; gap: 6px; }
  .results-search { flex: 1 1 100%; width: auto; }
  .results-field { flex: 1 1 auto; }
  .results-field select { width: 100%; }

  /* As abas viram uma régua rolável, sem quebrar em duas linhas. */
  .results-nav {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .results-nav::-webkit-scrollbar { display: none; }
  .results-tab { flex: none; padding: 13px 12px; white-space: nowrap; }
  .results-picker { position: static; margin-left: 4px; }
  .results-picker-body { left: 8px; right: 8px; width: auto; }

  .results-body { padding: 16px 12px 24px; }
  .results-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .results-card { padding: 12px 14px; }
  .results-card strong { font-size: var(--step-2); }
  .coach-findings { grid-template-columns: 1fr; }

  /* Tabela larga rola sozinha dentro do cartão, sem arrastar a página. */
  .results-table-wrap { -webkit-overflow-scrolling: touch; }
  .results-table th, .results-table td { padding: 10px 10px; }

  /* Alvos de toque: 44 px é o mínimo confortável para o polegar. */
  .preset { min-height: 40px; }
  .button { min-height: 40px; }
  .display-toggle { min-height: 36px; }
  .room-input, .results-search, select { min-height: 40px; font-size: 16px; }
}

/* Em telas estreitas a página nunca pode rolar de lado. */
@media (max-width: 980px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .results-view { min-width: 0; }
}

/* --------------------------------------------------------------------------
   Campeonatos
   -------------------------------------------------------------------------- */
body.champs .map-workbench,
body.champs .control-rail,
body.champs .insight-rail,
body.champs .tool-rail,
body.champs .zoom-rail,
body.champs .results-view:not(.champs-view) { display: none; }
body.champs .workspace { display: grid; grid-template-rows: minmax(0, 1fr); }
body.champs .champs-view { display: grid; }
.champs-view { grid-template-rows: auto minmax(0, 1fr); }

.champ-intro {
  max-width: 70ch;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.champ-stages { display: flex; flex-direction: column; gap: 14px; }

.champ-stage {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.champ-stage > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.champ-stage > summary strong { font-size: var(--step-1); }
.champ-stage > summary small { margin-right: auto; color: var(--muted); font-size: 12px; }

.champ-matches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  padding: 14px 18px;
}

/* Cada partida é um botão: clicar abre o replay dela no mapa. */
.champ-match {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.champ-match:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.champ-match:disabled { opacity: .45; cursor: not-allowed; }
.champ-match strong { font-size: 13px; }
.champ-match small { color: var(--muted); font-size: 11px; }

.champ-standings-slot:not(:empty) { padding: 0 18px 18px; }

@media (max-width: 720px) {
  .champ-matches { grid-template-columns: 1fr 1fr; padding: 12px; gap: 6px; }
  .champ-stage > header { padding: 12px 14px; flex-wrap: wrap; }
}

/* ========================================================================== 
   FIFTH GG · Fifth Cut Command Deck
   Uma camada de marca sobre o produto existente; mapa e telemetria não mudam.
   ========================================================================== */
.grain {
  position: fixed;
  z-index: 19;
  inset: 0;
  display: block;
  pointer-events: none;
  opacity: .035;
  background-image: repeating-radial-gradient(circle at 20% 10%, currentColor 0 1px, transparent 1px 4px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
}

body[data-theme="escuro"] .grain {
  opacity: .028;
  color: var(--brand-bone);
  mix-blend-mode: screen;
}

.app-nav {
  border-bottom-color: var(--line);
  box-shadow: none;
}

.app-nav::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-ember) 0 18%, var(--brand-carbon) 18% 58%, transparent 86%);
  transform-origin: left;
  animation: fifth-rule-in .65s var(--ease) both;
}

.brand {
  gap: 11px;
  min-width: 252px;
  padding: 0 14px;
  border-right-color: var(--line-soft);
  animation: fifth-brand-in .24s var(--ease) both;
}

.brand-logo {
  display: block;
  width: 142px;
  max-height: 34px;
}

.brand-logo-dark { display: none; }
body[data-theme="escuro"] .brand-logo-light { display: none; }
body[data-theme="escuro"] .brand-logo-dark { display: block; }

.brand-product {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font: 700 10px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-list { gap: 2px; padding-inline: 10px; }

.nav-link {
  position: relative;
  min-height: 36px;
  border-radius: 2px;
  font: 700 12px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  letter-spacing: .025em;
}

.nav-link:hover {
  border-color: var(--line);
  background: var(--accent-soft);
  color: var(--text);
}

.nav-link.active {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--accent);
  clip-path: none;
}

.nav-status { border-left-color: var(--line-soft); }
.connection-dot { box-shadow: none; }
.connection-dot.online { background: var(--success); }

.topbar { animation: fifth-topbar-in .28s var(--ease) .04s both; }
.match-live-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.match-heading strong,
.results-title strong,
.panel-kicker,
.display-heading,
.results-section-title {
  font-family: "Bahnschrift SemiCondensed", Bahnschrift, "Arial Narrow", sans-serif;
}

.match-heading strong { letter-spacing: -.015em; }

.button-accent,
.preset.active,
.results-tab.active,
.replay-pill,
.data-badge {
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

.button-accent,
.preset.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.button:hover,
.preset:hover,
.results-tab:hover,
.theme-toggle:hover {
  border-color: var(--accent);
  background-color: var(--accent-soft);
  color: var(--text);
}

.button-accent:hover {
  background: var(--primary-hover);
  color: var(--brand-carbon);
}

.replay-pill,
.data-badge {
  border-radius: 2px;
  color: var(--accent);
  background: var(--accent-soft);
}

.panel-card,
.results-table-wrap,
.results-card,
.coach-finding,
.champ-stage {
  border-radius: var(--radius);
  box-shadow: none;
}

.board-shell {
  border: 1px solid var(--brand-carbon);
  border-radius: 3px;
  box-shadow: none;
}

body[data-theme="escuro"] .board-shell { border-color: rgba(243, 239, 230, .22); }

.results-card:hover,
.champ-match:hover:not(:disabled) {
  border-color: var(--accent);
  background: linear-gradient(110deg, var(--accent-soft), transparent 55%);
}

.results-table tbody tr:nth-child(1) td {
  background: linear-gradient(90deg, var(--accent-soft), transparent 52%);
}

.button:focus-visible,
.nav-link:focus-visible,
.preset:focus-visible,
.results-tab:focus-visible,
.room-input:focus-visible,
.results-search:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-carbon);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

body[data-theme="escuro"] .button:focus-visible,
body[data-theme="escuro"] .nav-link:focus-visible,
body[data-theme="escuro"] .preset:focus-visible,
body[data-theme="escuro"] .results-tab:focus-visible,
body[data-theme="escuro"] .room-input:focus-visible,
body[data-theme="escuro"] .results-search:focus-visible,
body[data-theme="escuro"] select:focus-visible { outline-color: var(--brand-bone); }

input[type="range"],
input[type="checkbox"] { accent-color: var(--accent); }

@keyframes fifth-brand-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes fifth-topbar-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes fifth-rule-in {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

.workspace > .insight-rail,
.workspace > .map-workbench,
.workspace > .control-rail {
  animation: fifth-rise .24s var(--ease) .08s both;
}

.workspace > .map-workbench { animation-delay: .04s; }
.workspace > .control-rail { animation-delay: .12s; }

@media (max-width: 1180px) {
  .brand { min-width: auto; }
  .brand-logo { width: 122px; }
  .brand-product { display: none; }
}

@media (max-width: 1320px) {
  .topbar { gap: 10px; padding-inline: 10px; }
  .top-context { display: none; }
  .top-actions { gap: 6px; }
  .button { padding-inline: 10px; }
  #btnCopyUrls, #exportBtn, #btnLibrary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-nav::after,
  .brand,
  .topbar,
  .workspace > .insight-rail,
  .workspace > .map-workbench,
  .workspace > .control-rail { animation: none; }
}

/* ========================================================================== 
   FIFTH GG · Do jogador à equipe
   ========================================================================== */
.landing { background: var(--brand-carbon); }

.landing-header,
.landing-hero,
.landing-benefits,
.landing-proof-story,
.landing-foot { position: relative; z-index: 1; }

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

.landing-benefits article[data-reveal]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--brand-ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease) 100ms;
}

.landing-benefits article[data-reveal] { position: relative; }
.landing-benefits article[data-reveal].is-visible::after { transform: scaleX(1); }

.landing-proof-story {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 180px minmax(280px, .8fr) minmax(320px, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
  padding: 88px 0 96px;
  border-bottom: 1px solid rgba(243, 239, 230, .18);
}

.landing-proof-story > span {
  padding-top: 8px;
  color: var(--brand-ember);
  font: 700 10px/1.2 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .12em;
}

.landing-proof-story h2 {
  margin: 0;
  color: var(--brand-bone);
  font: 850 clamp(34px, 4.2vw, 68px)/.96 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.landing-proof-story p {
  max-width: 54ch;
  margin: 4px 0 0;
  color: rgba(243, 239, 230, .66);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.6;
}

/* Interface móvel: mapa primeiro, análise abaixo e módulos no alcance do polegar. */
@media (max-width: 720px) {
  body:not(.landing-active) {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
    background: var(--bg);
  }

  .app-nav {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    border-bottom: 0;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
  }

  .app-nav::after { inset: -1px 0 auto; }
  .app-nav .brand,
  .app-nav .nav-status { display: none; }

  .nav-list {
    width: 100%;
    height: 58px;
    padding: 5px 6px;
    gap: 3px;
    overflow: hidden;
    scrollbar-width: none;
  }

  .nav-list::-webkit-scrollbar { display: none; }
  .nav-link {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    justify-content: center;
    padding: 0 4px;
    border-color: transparent;
    background: transparent;
  }

  .nav-index { display: none; }
  .nav-link .nav-label { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
  .nav-link.active { border-color: transparent; background: transparent; color: var(--accent); }
  .nav-link.active::after { inset: -5px 12px auto; height: 2px; }

  .app-frame {
    height: auto;
    min-height: 100dvh;
    margin: 0;
    display: block;
  }

  body.focus-mode { padding-bottom: 0; }
  body.focus-mode .app-frame,
  body.fullscreen-fallback .app-frame,
  .app-frame:fullscreen,
  .app-frame:-webkit-full-screen { display: grid; height: 100dvh; min-height: 0; }

  .topbar {
    position: sticky;
    z-index: 18;
    top: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
  }

  .match-heading { grid-template-columns: 8px minmax(0, 1fr); gap: 8px; }
  .match-heading strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .match-heading span:last-child,
  .top-context,
  #planBadge,
  #planSelect,
  #btnLogin,
  #btnCopyUrls,
  #exportBtn,
  #btnLibrary,
  #btnFocus,
  #btnFullscreen { display: none !important; }

  .top-actions { flex-wrap: nowrap; gap: 6px; }
  .top-actions .button { min-height: 42px; padding-inline: 11px; }
  #btnImport { white-space: nowrap; }

  .workspace { display: block; min-height: 0; padding: 0; }
  .map-workbench { height: auto; min-height: 0; display: grid; grid-template-rows: auto auto; }
  .board-shell { height: min(100vw, 62svh); min-height: 320px; }
  .canvas-stage { height: 100%; }

  .board-hud { top: 8px; max-width: calc(100% - 80px); padding: 7px 9px; }
  .board-hud-left { left: 8px; }
  .board-hud-right { display: none; }
  .board-hud strong { font-size: 12px; }
  .board-hud span { font-size: 9px; }

  .tool-rail {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    min-height: 48px;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    border-radius: 3px;
    transform: none;
    scrollbar-width: none;
  }

  .tool-rail::-webkit-scrollbar { display: none; }
  .tool { flex: 0 0 42px; min-height: 40px; }
  .tool em { display: none; }
  .tool-icon { min-height: 40px; }
  .rail-divider { flex: 0 0 1px; width: 1px; height: 28px; margin: 0 2px; }
  .swatch { flex: 0 0 22px; width: 22px; height: 22px; margin: 0 3px; }

  .zoom-rail { right: 8px; bottom: 64px; }
  .zoom-rail button { width: 36px; height: 36px; }
  .quality-banner { right: 8px; bottom: 64px; left: 8px; max-width: calc(100% - 168px); padding: 6px 8px; font-size: 9px; }

  .timeline-deck { min-height: 0; padding: 10px 10px 12px; }
  .tactical-categories,
  .phase-row {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .tactical-categories::-webkit-scrollbar,
  .phase-row::-webkit-scrollbar { display: none; }
  .tactical-chip,
  .phase-chip { flex: 0 0 auto; min-height: 30px; }
  .phase-end { margin-left: 0; }

  .timeline-controls {
    grid-template-columns: 44px 44px minmax(0, 1fr) 52px 44px;
    grid-template-rows: 44px 28px;
    gap: 8px;
    padding-top: 9px;
  }

  #btnRestart { display: none; }
  #btnBack { grid-column: 1; grid-row: 1; min-height: 44px; padding-inline: 4px; }
  #btnForward { grid-column: 2; grid-row: 1; min-height: 44px; padding-inline: 4px; }
  #btnLoop { display: none; }
  #btnLoop.active { display: block; grid-column: 1 / -1; grid-row: 3; min-height: 44px; }
  .timecode { grid-column: 3; grid-row: 1; font-size: 11px; text-align: center; }
  .seek-stack { grid-column: 1 / -1; grid-row: 2; }
  #speed { grid-column: 4; grid-row: 1; min-height: 44px; }
  #btnPlay { grid-column: 5; grid-row: 1; min-height: 44px; }

  .control-rail {
    position: static;
    width: 100%;
    max-height: none;
    margin: 0;
    gap: 8px;
    overflow: visible;
  }

  .control-rail > .panel-card { border-right: 0; border-left: 0; border-radius: 0; }
  .panel-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .panel-tabs::-webkit-scrollbar { display: none; }
  .panel-tab { flex: 0 0 auto; min-height: 44px; padding-inline: 14px; }
  .tab-panel { min-height: 220px; max-height: none; }
  .scoreboard-list, .team-list, .event-list, .library-list { max-height: 66svh; }

  body.focus-view .map-workbench { grid-template-rows: 46px minmax(0, 1fr) auto; }
  body.focus-view .board-shell { height: auto; min-height: 0; }
  body.focus-view .control-rail {
    position: fixed;
    inset: 54px 8px calc(8px + env(safe-area-inset-bottom)) auto;
    width: calc(100vw - 16px);
    overflow: auto;
  }
  body.focus-view .focus-bar { gap: 8px; padding: 0 8px 0 10px; }
  .focus-brand small, .focus-shortcuts { display: none; }
  .focus-action, .focus-exit { min-height: 36px; padding-inline: 9px; }

  .landing-header,
  .landing-hero,
  .landing-benefits,
  .landing-proof-story,
  .landing-foot { width: calc(100% - 28px); }

  .landing-header { min-height: 64px; }
  .landing-header img { width: 130px; }
  .landing-link { min-width: 76px; min-height: 44px; padding-inline: 12px; }
  .landing-cta,
  .landing-secondary { width: 100%; min-height: 50px; }

  .landing-benefits article { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 28px 0 30px; }
  .landing-benefits p { grid-column: 1; }
  .landing-proof-story { grid-template-columns: 1fr; gap: 14px; padding: 56px 0 62px; }
  .landing-proof-story h2 { font-size: clamp(38px, 11vw, 52px); }
  .landing-proof-story p { margin-top: 8px; font-size: 16px; }
  .landing-foot { padding: 44px 0 54px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .fifth-cuts i { opacity: 1; transform: none; animation: none; transition: none; }
}

/* Tela cheia é observação: o mapa fica limpo e o transport aparece só quando
   há intenção do operador. O modo foco continua sendo o cockpit completo. */
.fullscreen-handle { display: none; }

body.is-fullscreen .map-workbench {
  position: relative;
  display: block;
  height: 100%;
}

body.is-fullscreen .board-shell,
body.is-fullscreen .canvas-stage { width: 100%; height: 100%; max-height: none; }

body.is-fullscreen .tool-rail,
body.is-fullscreen .zoom-rail,
body.is-fullscreen .quality-banner,
body.is-fullscreen .control-rail,
body.is-fullscreen .tactical-timeline,
body.is-fullscreen .phase-row { display: none !important; }

body.is-fullscreen .focus-bar {
  position: fixed;
  z-index: 120;
  top: 12px;
  right: 12px;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

body.is-fullscreen .focus-bar > :not(.focus-exit) { display: none; }
body.is-fullscreen .focus-exit {
  display: block;
  min-width: 44px;
  border-color: rgba(243, 239, 230, .24);
  background: rgba(11, 12, 14, .72);
  color: var(--brand-bone);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), border-color 180ms var(--ease);
}

body.is-fullscreen .focus-exit:hover,
body.is-fullscreen .focus-exit:focus-visible { opacity: 1; transform: translateY(-1px); border-color: var(--accent); }

body.is-fullscreen .timeline-deck {
  position: fixed;
  z-index: 110;
  right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%;
  width: min(760px, calc(100% - 32px));
  min-height: 0;
  padding: 9px;
  border: 1px solid rgba(243, 239, 230, .24);
  border-radius: 3px;
  background: rgba(11, 12, 14, .9);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .32);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

body.is-fullscreen.fullscreen-ui-visible .timeline-deck,
body.is-fullscreen .timeline-deck:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

body.is-fullscreen .timeline-controls {
  grid-template-columns: 32px 44px 44px 110px minmax(100px, 1fr) 58px 44px;
  gap: 8px;
  padding: 0;
}

body.is-fullscreen #btnLoop { display: none; }
body.is-fullscreen #btnLoop.active { display: block; grid-column: 1 / -1; grid-row: 2; min-height: 44px; }
body.is-fullscreen #btnRestart { grid-column: 1; grid-row: 1; }
body.is-fullscreen #btnBack { grid-column: 2; grid-row: 1; }
body.is-fullscreen #btnForward { grid-column: 3; grid-row: 1; }
body.is-fullscreen .timecode { grid-column: 4; grid-row: 1; color: var(--brand-bone); }
body.is-fullscreen .seek-stack { grid-column: 5; grid-row: 1; }
body.is-fullscreen #speed { grid-column: 6; grid-row: 1; }
body.is-fullscreen #btnPlay { grid-column: 7; grid-row: 1; }

body.is-fullscreen .fullscreen-handle {
  position: fixed;
  z-index: 115;
  bottom: calc(4px + env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}

body.is-fullscreen .fullscreen-handle span {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(142, 151, 160, .74);
  transition: width 180ms var(--ease), background 180ms var(--ease);
}

body.is-fullscreen.fullscreen-ui-visible .fullscreen-handle span,
body.is-fullscreen .fullscreen-handle:hover span { width: 54px; background: var(--accent); }
body.is-fullscreen:not(.fullscreen-ui-visible) #map { cursor: none; }

/* Motion do chrome: mais presença na entrada e nas trocas, sem animar safe,
   posições ou playhead. */
@keyframes fifth-focus-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes fifth-map-in {
  from { opacity: .82; transform: scale(.992); }
  to { opacity: 1; transform: none; }
}

.nav-link.active::after { animation: fifth-rule-in 320ms var(--ease) both; }
body.focus-mode .focus-bar { animation: fifth-focus-in 280ms var(--ease) both; }
body.focus-mode .board-shell { animation: fifth-map-in 320ms var(--ease) both; }
.button:hover, .focus-action:hover { transform: translateY(-1px); }
.panel-tab.active { animation: fifth-rise 220ms var(--ease) both; }

@media (max-width: 720px) {
  body.is-fullscreen .timeline-deck { bottom: calc(20px + env(safe-area-inset-bottom)); width: calc(100% - 16px); }
  body.is-fullscreen .timeline-controls { grid-template-columns: 44px 44px minmax(70px, 1fr) 52px 44px; grid-template-rows: 44px 28px; gap: 6px; }
  body.is-fullscreen #btnRestart { display: none; }
  body.is-fullscreen #btnBack { grid-column: 1; }
  body.is-fullscreen #btnForward { grid-column: 2; }
  body.is-fullscreen .timecode { grid-column: 3; }
  body.is-fullscreen #speed { grid-column: 4; }
  body.is-fullscreen #btnPlay { grid-column: 5; }
  body.is-fullscreen .seek-stack { grid-column: 1 / -1; grid-row: 2; min-height: 28px; }
  body.is-fullscreen #btnLoop.active { grid-row: 3; }
  body.is-fullscreen .timecode,
  body.is-fullscreen #speed,
  body.is-fullscreen #btnPlay { grid-row: 1; min-height: 44px; }
  body.is-fullscreen .focus-exit { min-width: 40px; padding-inline: 8px; font-size: 0; }
  body.is-fullscreen .focus-exit span { margin: 0; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-fullscreen .timeline-deck,
  body.is-fullscreen .focus-exit,
  body.is-fullscreen .fullscreen-handle span,
  body.focus-mode .focus-bar,
  body.focus-mode .board-shell,
  .nav-link.active::after,
  .panel-tab.active { animation: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Estatísticas do campeonato
   -------------------------------------------------------------------------- */
.champ-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.champ-stats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

/* Cada partida traz o replay e a sala dela lado a lado. */
.champ-match-cell { display: flex; align-items: stretch; gap: 4px; }
.champ-match-cell .champ-match { flex: 1; }

.champ-room {
  flex: none;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.champ-room:hover { border-color: var(--accent); color: var(--accent); }

/* ── Leitura de um replay ────────────────────────────────────────────────
   Clicar num replay salvo dava cerca de um segundo de tela parada. A
   biblioteca ja sabe o mapa, as equipes e a duracao antes de a partida
   chegar pela rede — entao a tela tem o que dizer desde o primeiro quadro,
   e cada linha so acende quando aquilo existe de verdade. */
.reading {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand-carbon) 62%, transparent);
  backdrop-filter: blur(6px);
  animation: reading-in .18s ease-out both;
}
.reading[hidden] { display: none; }

.reading-card {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(11, 12, 14, .3);
}

.reading-head { display: grid; gap: 4px; margin-bottom: 14px; }
.reading-head strong { font-size: var(--step-2, 18px); letter-spacing: -.01em; }
.reading-facts { font-size: var(--step--1, 12px); color: var(--muted); }

.reading-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.reading-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--brand-ember);
  /* A largura anima em transicao e nao em keyframe: o valor vem do numero
     real de bytes lidos, entao ele nunca pode "andar sozinho". */
  transition: width .24s cubic-bezier(.2, .7, .2, 1);
}

.reading-meter {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: var(--step--1, 12px);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.reading-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.reading-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step-0, 13px);
  color: var(--muted);
  opacity: .45;
  transform: translateY(3px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2, .7, .2, 1), color .26s ease;
}
.reading-steps li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.reading-steps li.done { opacity: 1; transform: none; color: var(--ink); }
.reading-steps li.done::before { background: var(--brand-ember); }
.reading-steps li b { font-variant-numeric: tabular-nums; font-weight: 650; }

@keyframes reading-in { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .reading { animation: none; }
  .reading-bar i, .reading-steps li { transition: none; }
}

/* ── Vitrine da tela inicial ─────────────────────────────────────────────
   Doze equipes de uma partida real rodando pelo mapa. A imagem estatica
   fica embaixo: se a vitrine nao carregar, ninguem ve buraco. *

@media (prefers-reduced-motion: reduce) {
}

/* ── Numeros do acervo ───────────────────────────────────────────────────
   Contam ao entrar na tela. O valor final vem do servidor, entao o numero
   que para na tela e o numero que existe. */
.landing-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 38px 0 6px;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.landing-numbers[hidden] { display: none; }
.landing-numbers > div { display: grid; gap: 2px; }
.landing-numbers b {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.landing-numbers span {
  font-size: var(--step--1, 12px);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 720px) {
  .landing-numbers { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}

/* ── Dossie da partida ───────────────────────────────────────────────────
   Tres cartoes: o que foi conferido no arquivo, o que bate com a sala
   oficial, e a que campeonato a partida pertence. Eles entram em sequencia
   porque a ordem importa — primeiro a prova, depois o numero. */
.dossie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.dossie[hidden] { display: none; }

.dossie-card {
  position: relative;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  display: grid;
  gap: 3px;
  opacity: 0;
  transform: translateY(6px);
  animation: dossie-entra .38s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--ordem, 0) * 70ms);
}
.dossie-card b {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.dossie-card span {
  font-size: var(--step--1, 12px);
  color: var(--muted);
  line-height: 1.35;
}
.dossie-card::before {
  content: "";
  position: absolute;
  left: 0; top: 11px; bottom: 11px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-steel);
}
.dossie-card[data-estado="ok"]::before { background: var(--success); }
.dossie-card[data-estado="atencao"]::before { background: var(--warning); }
.dossie-card[data-estado="erro"]::before { background: var(--danger); }
.dossie-card[data-estado="ok"] b { color: var(--success); }
.dossie-card[data-estado="atencao"] b { color: var(--warning); }

@keyframes dossie-entra { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dossie-card { animation: none; opacity: 1; transform: none; }
}

/* ── Transicao entre telas ───────────────────────────────────────────────
   O navegador fotografa o antes, o app troca o conteudo e ele faz a
   passagem. Onde a API nao existe, a troca acontece igual — so sem a
   passagem. Nada da interface depende disto para funcionar. */
::view-transition-old(root) {
  animation: 140ms cubic-bezier(.4, 0, 1, 1) both sai-suave;
}
::view-transition-new(root) {
  animation: 220ms cubic-bezier(0, 0, .2, 1) 60ms both entra-suave;
}

@keyframes sai-suave {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes entra-suave {
  from { opacity: 0; transform: translateY(6px); }
}

/* Numa transmissao ao vivo nenhuma passagem pode atrasar o mapa. */
body.overlay ::view-transition-old(root),
body.overlay ::view-transition-new(root) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── Conta e plano ───────────────────────────────────────────────────────
   O limite do plano era texto numa tabela de precos. Aqui ele vira uma
   barra que a pessoa ve encher — e que para de encher antes de virar erro
   no meio de um envio. */
.account-panel { display: grid; gap: 18px; }
.account-panel[hidden] { display: none; }

.account-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-head strong { display: block; font-size: var(--step-1, 15px); }
.account-head small { color: var(--muted); font-size: var(--step--1, 12px); }

.account-usage { display: grid; gap: 13px; }
.usage-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
}
.usage-row span { font-size: var(--step--1, 12px); color: var(--muted); }
.usage-row b { font-variant-numeric: tabular-nums; font-size: var(--step-0, 13px); }
.usage-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.usage-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--brand-ember);
  transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
/* Perto do teto a barra avisa antes de o envio ser recusado. */
.usage-bar i[data-cheio="quase"] { background: var(--warning); }
.usage-bar i[data-cheio="sim"] { background: var(--danger); }

.account-plans { display: grid; gap: 9px; }
.plan-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: var(--surface-raised);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}
.plan-card:hover { border-color: var(--brand-ember); transform: translateY(-1px); }
.plan-card[data-atual="sim"] { border-color: var(--brand-ember); cursor: default; }
.plan-card[data-atual="sim"]:hover { transform: none; }
.plan-card strong { font-size: var(--step-0, 13px); }
.plan-card em { grid-column: 1; font-style: normal; font-size: var(--step--1, 12px); color: var(--muted); }
.plan-card .plan-price { font-variant-numeric: tabular-nums; font-weight: 700; }
.plan-card .plan-price small { font-weight: 400; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .usage-bar i, .plan-card { transition: none; }
}

/* Onde as duas leituras discordam. Nao esta escondido de proposito: a
   ferramenta serve para saber, e nao para parecer certa. */
.dossie-diferem {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border-radius: 11px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(6px);
  animation: dossie-entra .38s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--ordem, 0) * 70ms);
}
.dossie-diferem strong { font-size: var(--step-0, 13px); }
.dossie-diferem span {
  font-size: var(--step--1, 12px);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .dossie-diferem { animation: none; opacity: 1; transform: none; }
}

/* ── Selo de conferencia ─────────────────────────────────────────────────
   Cada abate, knock, revive e salto guarda o byte do ReplayInfo.bin de onde
   saiu, e a conferencia volta la. O selo diz quantos passaram — clicar leva
   ao dossie, onde estao os numeros e as divergencias. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* O cabecalho e uma grade: sem isto o selo estica pela coluna inteira e
     a pilula vira uma barra com o texto quebrado no meio. */
  justify-self: start;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .02em;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, color .18s ease;
}
.selo[hidden] { display: none; }
.selo:hover { border-color: var(--brand-ember); color: var(--ink); }
.selo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.selo[data-estado="atencao"]::before { background: var(--warning); }
.selo[data-estado="erro"]::before { background: var(--danger); }
.selo b { font-weight: 700; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .selo { transition: none; } }

/* Em tela estreita o cabecalho ja empilha; o selo vai junto, na linha
   inteira, em vez de espremer o titulo. */
@media (max-width: 860px) {
  .match-heading { grid-template-columns: 8px auto minmax(0, 1fr); }
  .selo { grid-column: 1 / -1; margin-top: 2px; }
}

/* ── Celular: nada em cima do mapa ───────────────────────────────────────
   Medido num 375x812: o mapa fica com 373 px de lado e as camadas cobriam
   cerca de 70% dele — so o feed de abates comia 40%. Num monitor isso e HUD
   de canto; num telefone e parede. O app move as camadas para esta faixa e
   aqui elas deixam de ser absolutas. */
@media (max-width: 720px) {
  .map-under {
    display: grid;
    gap: 6px;
    padding: 8px;
    background: var(--surface-sunken);
    border-top: 1px solid var(--line-soft);
  }

  /* Tudo que morava por cima volta ao fluxo. O `!important` existe porque
     as regras antigas fixam `position: absolute` com `inset` por camada, e
     aqui a intencao e justamente cancelar todas de uma vez. */
  .map-under > * {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* Uma linha so para o que se toca: ferramentas a esquerda, zoom a direita. */
  .map-under .tool-rail { flex: 1 1 auto; min-width: 0; }
  .map-under .zoom-rail { flex: 0 0 auto; }
  .map-under .tool-rail,
  .map-under .zoom-rail { grid-row: 1; }
  .map-under .tool-rail { grid-column: 1; }
  .map-under .zoom-rail { grid-column: 2; }
  .map-under { grid-template-columns: minmax(0, 1fr) auto; }
  .map-under > :not(.tool-rail):not(.zoom-rail) { grid-column: 1 / -1; }

  /* O HUD vira uma linha de texto em vez de um cartao flutuante. */
  .map-under .board-hud {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 0 2px;
    border: 0;
    background: none;
  }
  .map-under .board-hud-right { display: flex; }

  /* O feed de abates deixa de tampar o mapa e vira uma lista curta embaixo. */
  .map-under .map-killfeed {
    display: grid !important;
    grid-auto-flow: row;
    gap: 3px;
    max-height: 92px;
    overflow-y: auto;
    padding: 0 2px !important;
  }

  .map-under .quality-banner {
    padding: 0 2px !important;
    background: none !important;
    border: 0 !important;
  }

  /* Sem nada por cima, a casca nao precisa mais recortar. */
  .board-shell { overflow: visible; }
}

/* O grao e' textura de marca, e ele e' um `position: fixed` que cobre a tela
   inteira — mapa incluso. Num monitor grande, 3,5% de multiply passa por
   acabamento. Num telefone, onde o mapa ja' e' pequeno, e' cor por cima do
   mapa, que e' exatamente o que nao pode. */
@media (max-width: 720px) {
  .grain { display: none; }
}
body.is-fullscreen .grain { display: none; }

/* ── Celular: o cabecalho para de roubar o mapa ──────────────────────────
   Medido: o topo comia 106 px de 812, e boa parte disso era o Match ID de
   dezenove digitos quebrando em tres linhas ao lado do titulo. Num telefone
   esse numero nao e' informacao, e' ruido — ele continua na aba Sala, onde
   serve para alguma coisa. */
@media (max-width: 720px) {
  /* Empilhado: titulo, subtitulo e selo um embaixo do outro. Lado a lado
     numa coluna de 375 px o subtitulo era espremido ate' sobrar "B.". */
  .match-heading {
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 2px 6px;
    align-items: center;
  }
  .match-live-dot { grid-row: 1; grid-column: 1; }
  .match-heading strong { grid-row: 1; grid-column: 2; font-size: 15px; }

  /* O subtitulo mostra so' mapa e duracao. O id fica escondido por um span
     proprio, para o texto continuar inteiro para quem copia. */
  #matchSubtitle {
    grid-row: 2;
    grid-column: 2;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  .selo {
    grid-row: 3;
    grid-column: 2;
    margin-top: 3px;
    font-size: 10px;
    padding: 2px 8px 2px 6px;
  }

  /* A barra de ferramentas rola; sem a borda esfumada o ultimo botao parece
     cortado por defeito, e nao por haver mais coisa a direita. */
  .map-under .tool-rail {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }

  /* Linha de diagnostico da telemetria: util no desktop de quem opera,
     ruido na tela de quem so' quer ver a partida. */
  .map-under .quality-banner {
    font-size: 9px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .7;
  }
}

/* ── Celular: o navegador para de desenhar o que esta fora da tela ───────
   Medido num 375x812: a coluna de paineis tem 2390 px de altura e 1058 nos —
   73% da pagina e mais da metade do DOM, tudo abaixo do mapa. O telefone
   gastava layout e pintura nisso a cada quadro do mapa.

   `content-visibility: auto` nao esconde nada e nao muda o HTML: diz ao
   navegador que um cartao fora da tela nao precisa ser desenhado. O
   `contain-intrinsic-size` guarda o tamanho ja' medido, para a barra de
   rolagem nao pular quando o cartao entra e sai. */
@media (max-width: 720px) {
  .control-rail > .panel-card,
  .results-pane,
  .champ-stages {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
}

/* ── Celular: a faixa abaixo do mapa como console, nao como sobra ────────
   Ela recebe o que saiu de cima do mapa. Sem agrupamento vira uma pilha de
   texto solto; com uma linha entre os controles e a leitura, vira painel. */
@media (max-width: 720px) {
  .map-under {
    gap: 8px;
    padding: 10px 10px 12px;
    background: linear-gradient(var(--surface-sunken), var(--surface));
  }

  .map-under .tool-rail,
  .map-under .zoom-rail {
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--surface-raised);
    padding: 4px;
  }

  /* Da leitura para baixo o fundo muda: controles em cima, numeros embaixo. */
  .map-under .board-hud-left {
    padding-top: 8px !important;
    border-top: 1px solid var(--line-soft) !important;
  }
  .map-under .board-hud strong { font-size: 13px; letter-spacing: -.01em; }
  .map-under .board-hud span { font-size: 10px; color: var(--muted); }
  .map-under .board-hud-right strong { font-variant-numeric: tabular-nums; }

  /* A faixa entra junto com o mapa, e nao depois dele. */
  .map-under {
    animation: faixa-entra .32s cubic-bezier(.2, .7, .2, 1) both;
  }
}

@keyframes faixa-entra { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .map-under { animation: none; }
}

/* ── Planos na tela inicial ──────────────────────────────────────────────
   Os cartoes entram em sequencia e o do meio fica um degrau acima: e' o que
   a maioria escolhe, e a tela nao deveria fingir que sao tres iguais. */
.landing-planos {
  margin: 56px 0 8px;
  padding: 34px 0 6px;
  border-top: 1px solid var(--line-soft);
}
.planos-topo { display: grid; gap: 7px; margin-bottom: 26px; max-width: 620px; }
.planos-topo span {
  font-size: var(--step--1, 12px);
  letter-spacing: .18em;
  color: var(--brand-ember);
  font-weight: 650;
}
.planos-topo h2 {
  margin: 0;
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: -.02em;
  line-height: 1.12;
}
.planos-pagamento { margin: 0; font-size: var(--step--1, 12px); color: var(--muted); }

.planos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  align-items: start;
}

.plano {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 22px 20px 20px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--surface-raised);
  opacity: 0;
  transform: translateY(10px);
  animation: plano-entra .42s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--ordem, 0) * 90ms);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), border-color .22s ease;
}
.plano:hover { transform: translateY(-3px); border-color: var(--brand-ember); }

/* O plano de cima nao precisa de selo gritando: um traco em brasa basta. */
.plano[data-destaque="sim"] {
  border-color: var(--brand-ember);
  box-shadow: 0 14px 40px rgba(255, 79, 46, .12);
}
.plano[data-destaque="sim"]::before {
  content: attr(data-etiqueta);
  position: absolute;
  top: -9px; left: 20px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--brand-ember);
  color: #fff;
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 700;
}

.plano-nome { font-size: var(--step-1, 15px); font-weight: 700; letter-spacing: -.01em; }
.plano-preco { display: flex; align-items: baseline; gap: 4px; }
.plano-preco b {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 750;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plano-preco small { font-size: var(--step--1, 12px); color: var(--muted); }
.plano-pitch { font-size: var(--step-0, 13px); color: var(--muted); line-height: 1.45; }

.plano-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.plano-lista li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--step-0, 13px);
  line-height: 1.35;
}
.plano-lista li::before {
  content: "";
  flex: none;
  margin-top: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-ember);
}
.plano-lista li[data-fora="sim"] { color: var(--muted); }
.plano-lista li[data-fora="sim"]::before { background: var(--brand-steel); opacity: .5; }

.plano-acao { margin-top: 2px; width: 100%; justify-content: center; }

@keyframes plano-entra { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .plano { animation: none; opacity: 1; transform: none; transition: none; }
  .plano:hover { transform: none; }
}

@media (max-width: 720px) {
  .landing-planos { margin-top: 40px; padding-top: 26px; }
  .planos-grade { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Planos: cor do texto explicita ──────────────────────────────────────
   A tela inicial e' escura e define texto claro. O cartao de plano tem fundo
   claro, entao o texto herdado saia claro sobre claro — os itens incluidos
   ficavam invisiveis e so' os excluidos (cinza) apareciam. Cor de texto
   herdada atravessa inversao de fundo sem avisar. */
.landing-planos .plano { color: var(--ink-strong); }
.landing-planos .plano-nome { color: var(--ink-strong); }
.landing-planos .plano-preco b { color: var(--ink-strong); }
.landing-planos .plano-pitch { color: var(--ink-muted); }
.landing-planos .plano-lista li { color: var(--ink); }
.landing-planos .plano-lista li[data-fora="sim"] { color: var(--ink-muted); opacity: .7; }
.landing-planos .planos-topo h2 { color: inherit; }

/* ==========================================================================
   FIFTH GG · Tela inicial editorial, com a partida raspada pelo scroll
   --------------------------------------------------------------------------
   O heroi deixou de ser "texto a esquerda, print a direita" e virou uma cena
   unica: o mapa ocupa a tela inteira, o scroll avanca o relogio da partida e
   tres paineis de texto cruzam por cima em fatias que nao se encostam.

   Decisoes que valem registro, porque cada uma tem um motivo e nao um gosto:

   · O papel e' o `--brand-bone` da marca, nao um bege novo. A tela inicial
     era a unica parte escura do produto; entrar no Replay Lab era um susto
     de branco. Agora a entrada e o app sao a mesma folha.
   · O veu que apaga o mapa vive DENTRO do canvas (ver `vitrine.js`), entre a
     textura e os tracos. Como camada de CSS por cima ele apagaria tambem as
     rotas — e a rota e' justamente o que prova o produto.
   · Nenhuma fonte nova entra por aqui. A CSP do site e' `font-src 'self'`:
     puxar uma familia de fora seria bloqueada pelo navegador, e afrouxar a
     CSP por causa de tipografia e' trocar seguranca por enfeite. O desenho
     vem do tratamento — corpo grande, entrelinha curta, `letter-spacing`
     negativo — e nao do arquivo da fonte.
   · `env(safe-area-inset-*)` esta nos paddings, mas o `<meta viewport>`
     continua sem `viewport-fit=cover`. Ligar o cover empurraria o conteudo
     para baixo do entalhe no site inteiro, inclusive na tela do mapa, que e'
     exatamente o que nao pode acontecer. Sem cover os `env()` valem zero, e
     o layout fica correto dos dois jeitos.
   ========================================================================== */

:root {
  /* A familia de display da marca com um fim de fila neutro, para o celular
     que nao tem Bahnschrift cair num sans de sistema e nao num serifado. */
  --cena-display: "Bahnschrift SemiCondensed", Bahnschrift, "Segoe UI Variable Display",
                  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cena-mono: "IBM Plex Mono", Consolas, ui-monospace, monospace;
  --papel: #F3EFE6;
}

/* ── a folha ───────────────────────────────────────────────────────────── */

body.landing-active {
  background: var(--papel);
  color: var(--ink-strong);
  /* Qualquer `overflow` diferente de `visible` no body faz dele um contêiner
     de rolagem — e aí `position: sticky` lá dentro para de grudar: o palco
     da cena escorregava para fora da tela no primeiro gesto. O app precisa
     do `overflow: hidden` do body (a tela do mapa não rola); a tela inicial
     precisa exatamente do contrário, então ela desfaz isso enquanto está no
     ar. O corte horizontal desce para `.landing`, com `clip`, que corta sem
     criar contêiner de rolagem nenhum. */
  overflow: visible;
}

body.landing-active > .grain {
  opacity: .04;
  color: var(--brand-carbon);
  mix-blend-mode: multiply;
}

.landing {
  background: var(--papel);
  color: var(--ink-strong);
  overflow-x: clip;
}

/* A faixa decorativa era feita para o fundo carbono; no papel ela so' sujava
   a folha. *

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

.landing-header {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto 0;
  width: auto;
  margin-inline: 0;
  min-height: 0;
  border-bottom: 0;
  gap: 12px;
  padding: max(14px, calc(env(safe-area-inset-top, 0px) + 12px)) clamp(16px, 3.4vw, 44px) 14px;
  /* Degrade em vez de barra solida: a marca fica legivel sem desenhar uma
     linha atravessando o mapa. */
  background: linear-gradient(to bottom,
              rgba(243, 239, 230, .95) 0%,
              rgba(243, 239, 230, .78) 70%,
              rgba(243, 239, 230, 0) 100%);
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Passada a cena, o degrade vira folha: dali para baixo o conteudo e' texto
   corrido, e um titulo cruzando por tras da marca fica ilegivel. */
body.cena-passou .landing-header {
  background: rgba(243, 239, 230, .94);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
}

.landing-header img { width: clamp(126px, 12vw, 158px); flex-shrink: 1; min-width: 0; }

.landing-nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 28px); flex-shrink: 0; }

.landing-link,
.landing-secondary {
  border: 0;
  background: none;
  color: var(--ink-strong);
  font: 500 14.5px/1 var(--cena-display);
  letter-spacing: -.008em;
  opacity: .86;
  padding: 0;
  min-height: 40px;
  transition: opacity .3s var(--ease);
}

.landing-link:hover,
.landing-secondary:hover { opacity: 1; background: none; border-color: transparent; transform: none; }

/* ── a pilula ──────────────────────────────────────────────────────────── */

.pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 24px;
  border: 1px solid rgba(11, 12, 14, .12);
  border-radius: 999px;
  background: var(--brand-carbon);
  color: #fff;
  /* Forcado: no Safari do iPhone a cor de link herdada vazava para dentro da
     pilula escura e o texto sumia. */
  -webkit-text-fill-color: #fff;
  font: 600 14.5px/1 var(--cena-display);
  letter-spacing: -.008em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset;
  transition: transform .4s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.pilula:hover { transform: translateY(-2px); background: #000; }
.pilula:active { transform: translateY(1px) scale(.985); }
.pilula:focus-visible { outline: 2px solid var(--brand-carbon); outline-offset: 3px; }

.pilula-ember {
  background: var(--brand-ember);
  border-color: rgba(255, 79, 46, .28);
  box-shadow: 0 8px 22px rgba(255, 79, 46, .26);
}
.pilula-ember:hover { background: var(--primary-hover); box-shadow: 0 12px 28px rgba(255, 79, 46, .3); }
.pilula-ember:focus-visible { outline-color: var(--brand-ember); }

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

/* ── a cena ────────────────────────────────────────────────────────────── */

/* A altura desta secao E' o comprimento do scroll. Tres paineis com espaco
   de mapa puro entre eles pedem folga; alem disso a partida dura 400 e tantos
   segundos, e comprimir tudo em uma tela viraria um piscar. */
.cena {
  position: relative;
  z-index: 1;
  height: 460vh;
  min-height: 2600px;
}

.cena-palco {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 460px;
  overflow: hidden;
  background: var(--papel);
}

.cena-mapa {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.cena-palco.aceso .cena-mapa { opacity: 1; }

/* Do veu de papel so' sobraram as bordas: o miolo e' pintado dentro do canvas
   para nao apagar as rotas junto com o mapa. Aqui ficam as duas pontas, onde
   o cabecalho e a legenda precisam de folha limpa para serem lidos. */
.cena-veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(243, 239, 230, .88) 0%,
              rgba(243, 239, 230, 0) 20%,
              rgba(243, 239, 230, 0) 76%,
              rgba(243, 239, 230, .92) 100%);
}

/* Grao fino: a lavagem de papel sobre a textura do mapa cria faixas de cor
   chapada, e o ruido quebra a faixa. */
.cena-grao {
  position: absolute;
  inset: -50%;
  opacity: .12;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* Fio de progresso da cena. Fixo na janela e acima do cabecalho, mas so'
   visivel enquanto a cena esta' na tela: virar uma barra cheia parada sobre
   os planos pareceria carregamento travado. */
.cena-medidor {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .35s var(--ease);
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--brand-ember);
}

body.cena-viva .cena-medidor { opacity: .8; }

/* ── carregando ────────────────────────────────────────────────────────── */

.cena-boot {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--papel);
  /* Aparece so' depois de 160 ms. Numa visita repetida a textura ja' esta' no
     cache e a barra some antes disso — piscar um "CARREGANDO" para quem nao
     esperou nada e' o tipo de detalhe que faz um site parecer lento. */
  opacity: 0;
  animation: cena-boot-entra 220ms 160ms var(--ease) forwards;
}

.cena-boot.pronto {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
}

@keyframes cena-boot-entra { to { opacity: 1; } }

.cena-boot p {
  margin: 0;
  font: 500 11.5px/1 var(--cena-mono);
  letter-spacing: .14em;
  color: var(--ink-muted);
}

.cena-barra { width: 150px; height: 1px; background: rgba(11, 12, 14, .18); overflow: hidden; }
.cena-barra i { display: block; height: 100%; width: 100%; background: var(--brand-ember); transform: scaleX(0); transform-origin: 0 50%; }

/* ── paineis ───────────────────────────────────────────────────────────── */

.cena-paineis { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

.painel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: max(104px, calc(env(safe-area-inset-top, 0px) + 88px))
           clamp(20px, 5vw, 60px)
           max(96px, calc(env(safe-area-inset-bottom, 0px) + 80px));
  /* A opacidade e o deslocamento sao escritos pelo laco de animacao a cada
     quadro. Transicao de CSS aqui brigaria com o scroll: o texto chegaria
     atrasado em relacao ao mapa. */
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Conforme a partida avanca o mapa vai ficando cheio de rota, e o texto passa
   a competir com ela. Este clarao de papel atras do bloco de texto abre espaco
   no meio sem fechar as bordas, onde o mapa continua a vista. */
.painel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 44% at 50% 50%,
              rgba(243, 239, 230, .84) 0%,
              rgba(243, 239, 230, .56) 52%,
              rgba(243, 239, 230, 0) 100%);
}

.painel > * { position: relative; z-index: 1; }

/* Sem JavaScript o primeiro painel fica de pe. As regras acima sao vencidas
   pelo estilo inline que o laco escreve, entao isto so' vale quando o laco
   nunca rodou. */
.painel:first-child { opacity: 1; pointer-events: auto; }

.painel-olho {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: clamp(16px, 2vw, 22px);
  max-width: min(46ch, 100%);
  font: 600 11.5px/1.4 var(--cena-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.painel-olho i { color: var(--brand-ember); font-style: normal; }

.painel :is(h1, h2) {
  margin: 0;
  max-width: 15ch;
  font: 500 clamp(34px, 7.1vw, 104px)/.98 var(--cena-display);
  letter-spacing: -.036em;
  color: var(--ink-strong);
  text-wrap: balance;
  /* Halo de papel, nao sombra: o texto atravessa regioes do mapa mais
     carregadas e precisa se descolar delas sem parecer que flutua. */
  text-shadow: 0 1px 18px rgba(243, 239, 230, .92), 0 0 40px rgba(243, 239, 230, .7);
}

.painel-sub {
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  max-width: min(46ch, 100%);
  font-size: clamp(15px, 1.28vw, 19px);
  line-height: 1.5;
  letter-spacing: -.008em;
  color: var(--ink);
  text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(243, 239, 230, .92);
}

.painel-acao {
  margin-top: clamp(28px, 3.4vw, 44px);
  width: 100%;
  display: flex;
  justify-content: center;
  /* Sem `pointer-events` proprio de proposito: `pointer-events` e' herdado, e
     e' no `.painel` que o laco liga e desliga o clique conforme a opacidade.
     Um `auto` fixo aqui devolvia o clique aos botoes dos paineis apagados —
     e o botao invisivel do terceiro painel roubava o clique do primeiro. */
}
.painel-acao .pilula { height: 48px; padding: 0 27px; font-size: 15px; max-width: min(100%, 320px); }

/* ── legenda viva ──────────────────────────────────────────────────────── */

/* O rodape da referencia era endereco e horario de funcionamento. Aqui ele
   vale mais como leitura do que esta' na tela: mapa, relogio da partida,
   equipes em jogo e quando a zona fecha — tudo vindo do replay. */
.cena-legenda {
  position: absolute;
  z-index: 40;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 14px clamp(16px, 4vw, 24px) max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  font: 500 11.5px/1.5 var(--cena-mono);
  letter-spacing: .1em;
  color: var(--ink-muted);
  text-align: center;
  pointer-events: none;
}

.cena-dica {
  font-style: normal;
  letter-spacing: .1em;
  color: var(--brand-ember);
  opacity: 1;
  transition: opacity .5s var(--ease);
}
.cena-palco.rolou .cena-dica { opacity: 0; }

/* ── o que vem depois da cena, no mesmo papel ──────────────────────────── */

.landing-numbers {
  border-color: var(--line);
  /* Colunas que se acomodam: quando uma sai da faixa (ver `mostrarAcervo`),
     as outras ocupam a largura em vez de deixar um buraco. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.landing-numbers > div[hidden] { display: none; }
.landing-numbers b { color: var(--ink-strong); font-family: var(--cena-display); font-weight: 600; letter-spacing: -.03em; }
.landing-numbers span { color: var(--ink-muted); }

.landing-benefits article { border-bottom-color: var(--line-soft); }
.landing-benefits h2 {
  color: var(--ink-strong);
  font: 500 clamp(24px, 3vw, 44px)/1 var(--cena-display);
  letter-spacing: -.032em;
}
.landing-benefits p { color: var(--ink-muted); }
.landing-benefits article > span { color: var(--brand-ember); }

.landing-proof-story { border-bottom-color: var(--line-soft); }
.landing-proof-story h2 {
  color: var(--ink-strong);
  font: 500 clamp(34px, 4.2vw, 68px)/.98 var(--cena-display);
  letter-spacing: -.036em;
}
.landing-proof-story p { color: var(--ink-muted); }

.landing-planos .planos-topo h2 {
  color: var(--ink-strong);
  font: 500 clamp(26px, 3.2vw, 46px)/1.02 var(--cena-display);
  letter-spacing: -.032em;
}
.landing-planos { border-top-color: var(--line); }

/* O cabecalho e' fixo: sem esta folga, um `scrollIntoView` encosta o titulo
   da secao bem embaixo da marca. */
.landing-numbers,
.landing-proof-story,
.landing-planos { scroll-margin-top: 96px; }

.landing-foot { border-top: 1px solid var(--line-soft); margin-top: 8px; }
.landing-foot strong { color: var(--ink-strong); font: 500 clamp(17px, 2vw, 28px)/1.2 var(--cena-display); letter-spacing: -.028em; }
.landing-foot .landing-secondary { opacity: 1; }

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

@media (max-width: 900px) {
  /* Tela pequena costuma estar ao sol, com o brilho no maximo. O veu ganha
     corpo nas pontas para a tinta escura continuar legivel. */
  .cena-veu {
    background: linear-gradient(to bottom,
                rgba(243, 239, 230, .94) 0%,
                rgba(243, 239, 230, .1) 24%,
                rgba(243, 239, 230, .1) 72%,
                rgba(243, 239, 230, .95) 100%);
  }
}

@media (max-width: 720px) {
  .cena { height: 380vh; min-height: 2100px; }
  .landing-nav .landing-link { display: none; }
  .landing-header .pilula { height: 38px; padding: 0 16px; font-size: 13.5px; }
  .painel {
    padding: max(92px, calc(env(safe-area-inset-top, 0px) + 76px)) 18px
             max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px));
  }
  .painel :is(h1, h2) { max-width: 12ch; font-size: clamp(30px, 9.8vw, 52px); }
  .painel-sub { font-size: 15px; max-width: 34ch; }
  .cena-legenda { font-size: 10.5px; letter-spacing: .08em; gap: 4px 12px; }
}

@media (max-width: 420px) {
  .landing-header .pilula { height: 36px; padding: 0 14px; font-size: 13px; }
  .painel :is(h1, h2) { max-width: 11ch; font-size: clamp(28px, 10.5vw, 40px); }
  .painel-olho { font-size: 10.5px; letter-spacing: .1em; max-width: 30ch; }
  .painel-acao .pilula { width: 100%; max-width: 280px; height: 44px; padding: 0 20px; font-size: 14px; }
}

/* Celular deitado: sobra largura e falta altura. O texto encolhe pela altura
   da janela, senao o botao cai para fora da tela. */
@media (max-height: 520px) and (orientation: landscape) {
  .painel {
    padding: max(72px, calc(env(safe-area-inset-top, 0px) + 56px)) 24px
             max(64px, calc(env(safe-area-inset-bottom, 0px) + 48px));
  }
  .painel :is(h1, h2) { font-size: clamp(28px, 8vh, 44px); }
  .painel-sub { margin-top: 12px; font-size: 14px; }
  .painel-acao { margin-top: 16px; }
  .cena-legenda { padding-bottom: 8px; }
}

/* Quem pediu menos movimento continua com a cena — ela responde ao dedo, nao
   se mexe sozinha —, mas sem a deriva dos paineis e sem o grao animado. */
@media (prefers-reduced-motion: reduce) {
  .cena-mapa { transition: none; }
  .pilula { transition: none; }
  .pilula:hover { transform: none; }
}

/* ── Meta: quem as equipes levaram ────────────────────────────────────────
   A lista é de número, não de nome — o replay grava o id do personagem e o
   nome é do caderno. Por isso o campo de nome é o próprio rótulo da linha:
   editar ali é o gesto mais curto entre "não sei quem é o 43" e "é o Alok".
   ------------------------------------------------------------------------ */

.meta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.meta-escopo { display: flex; gap: 4px; }

.meta-aba {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 600 12px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.meta-aba:hover { border-color: var(--brand-ember); color: var(--ink-strong); }
.meta-aba.active { background: var(--brand-carbon); border-color: var(--brand-carbon); color: var(--brand-bone); }

.meta-conferencia {
  margin: 0;
  color: var(--muted);
  font: 500 11px/1.4 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .04em;
}

.meta-subtitulo {
  margin: 16px 0 8px;
  color: var(--brand-ember);
  font: 700 10px/1 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.meta-subtitulo:first-child { margin-top: 0; }

.meta-lista { display: grid; gap: 4px; }

/* A barra é a última célula e ocupa a linha inteira por baixo: assim a
   proporção aparece sem roubar largura do nome nem do número. */
.meta-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  padding: 7px 10px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  overflow: hidden;
}

.meta-nome {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink-strong);
  font: 700 14px/1.2 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  padding: 0;
}
.meta-nome::placeholder { color: var(--muted); font-weight: 600; }
.meta-nome:focus { outline: 2px solid var(--brand-ember); outline-offset: 3px; border-radius: 2px; }

.meta-taxa {
  font: 800 15px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}

.meta-item small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .02em;
}

.meta-barra {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--brand-ember);
  transform: scaleX(var(--parte, 0));
  transform-origin: 0 50%;
  opacity: .8;
}

.meta-composicoes { display: grid; gap: 4px; }

.meta-comp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 12.5px;
}
.meta-comp span { color: var(--ink); }
.meta-comp b {
  color: var(--brand-ember);
  font: 800 13px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .meta-item { padding: 9px 10px 11px; }
  .meta-nome { font-size: 15px; }
  .meta-comp { flex-wrap: wrap; font-size: 12px; }
}

/* ── Levar para fora: imagem e vídeo ─────────────────────────────────────── */

.exportar-linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  align-items: center;
}

.exportar-linha select {
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink-strong);
  font: 600 12px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
}

.exportar-linha .button { min-height: 34px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.exportar-linha .button[disabled] { opacity: .6; cursor: progress; }

.exportar-aviso {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .exportar-linha { grid-template-columns: 1fr auto; }
  .exportar-linha .button { min-height: 40px; }
  .exportar-linha #exportarVideo { grid-column: 1 / -1; }
}

/* ── Retrato do personagem ────────────────────────────────────────────────
   A cara vem do cliente do jogo, mas quem liga a cara ao número do replay é
   a pessoa: as duas numerações são independentes e não existe tabela entre
   elas. Por isso o retrato é um botão, e não uma imagem decorativa.
   ------------------------------------------------------------------------ */

.meta-item { grid-template-columns: 38px 1fr auto; }

.meta-cara {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--brand-carbon);
  color: rgba(243, 239, 230, .75);
  font: 700 12px/1 "IBM Plex Mono", Consolas, monospace;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.meta-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta-cara[data-vazio="sim"] { border-style: dashed; }
.meta-cara:hover { border-color: var(--brand-ember); transform: scale(1.06); }
.meta-cara:focus-visible { outline: 2px solid var(--brand-ember); outline-offset: 2px; }

.meta-item small { grid-column: 2 / -1; }

.retrato-fundo {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(11, 12, 14, .62);
  backdrop-filter: blur(3px);
}

.retrato-caixa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(760px, 100%);
  max-height: min(84vh, 720px);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.retrato-caixa header { display: grid; gap: 8px; }
.retrato-caixa header strong {
  font: 800 17px/1.2 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  color: var(--ink-strong);
}

.retrato-nome {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-strong);
  font-size: 14px;
}
.retrato-nome:focus { outline: 2px solid var(--brand-ember); outline-offset: 1px; }

.retrato-grade {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
  padding: 2px;
}

.retrato-grade button {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--brand-carbon);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease);
}
.retrato-grade button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.retrato-grade button:hover { border-color: var(--brand-ember); transform: scale(1.05); }
.retrato-grade button:focus-visible { outline: 2px solid var(--brand-ember); outline-offset: 1px; }

.retrato-caixa footer { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 720px) {
  .retrato-caixa { padding: 14px; max-height: 90vh; }
  .retrato-grade { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
}

/* ── Meta: filtros de campeonato e fase ─────────────────────────────────── */

.meta-filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.meta-filtros[hidden] { display: none; }

.meta-filtros label { display: grid; gap: 4px; min-width: 0; }
.meta-filtros span {
  color: var(--muted);
  font: 700 10px/1 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.meta-filtros select {
  min-height: 34px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink-strong);
  font-size: 12.5px;
}

/* Marca a aba nova até alguém abri-la: era exatamente ela que ninguém
   achava, porque ficava fora da parte visível da barra. */
.panel-tab-novo::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--brand-ember);
  vertical-align: middle;
}
.panel-tab-novo.active::after { opacity: 0; }

@media (max-width: 720px) {
  .meta-filtros { grid-template-columns: 1fr; }
}

.retrato-pista {
  color: var(--muted);
  font: 500 11.5px/1.4 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .04em;
}

/* ── Campeonatos: filtros e estatísticas ─────────────────────────────────
   As estatísticas de campeonato viviam na aba Meta, que era onde eu estava
   trabalhando — e não onde alguém procura por elas. Agora ficam aqui, sob o
   seletor que manda em tudo o que está abaixo.
   ------------------------------------------------------------------------ */

.champ-filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.champ-filtros label { display: grid; gap: 4px; min-width: 0; }
.champ-filtros span {
  color: var(--muted);
  font: 700 10px/1 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.champ-filtros select {
  min-height: 34px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink-strong);
  font-size: 12.5px;
}

.champ-conferencia {
  margin: 0 0 12px;
  color: var(--muted);
  font: 500 11px/1.4 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .04em;
}

.champ-estatisticas { margin-top: 18px; }

.h2h-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.h2h-card {
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.h2h-card strong { color: var(--ink-strong); font-size: 13px; }
.h2h-pts {
  margin-top: 2px;
  color: var(--brand-ember);
  font: 800 17px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
}
.h2h-card small { color: var(--muted); font-size: 11px; }
.h2h-vs { color: var(--muted); font-weight: 800; font-size: 12px; }

@media (max-width: 720px) {
  .champ-filtros { grid-template-columns: 1fr; }
}

/* ── Sala: a busca recolhida ─────────────────────────────────────────────
   A sala chega sozinha com o replay aberto. O parágrafo de instrução mais o
   formulário ocupavam a primeira tela inteira, e as estatísticas — que já
   estavam carregadas logo abaixo — pareciam não existir.
   ------------------------------------------------------------------------ */

.room-busca {
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.room-busca > summary {
  padding: 9px 12px;
  color: var(--ink);
  font: 700 12px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
}
.room-busca > summary::-webkit-details-marker { display: none; }
.room-busca > summary::before { content: "＋ "; color: var(--brand-ember); }
.room-busca[open] > summary::before { content: "－ "; }
.room-busca > summary:hover { color: var(--ink-strong); }
.room-busca .room-intro,
.room-busca .room-form { padding: 0 12px 12px; }

/* Tabela longa: abre no top 10 e o botão diz quantos faltam. */
.tabela-mais {
  display: block;
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: 700 11.5px/1 "Bahnschrift SemiCondensed", Bahnschrift, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.tabela-mais:hover { color: var(--brand-ember); border-color: var(--brand-ember); }

.champ-fase { display: grid; gap: 4px; margin-bottom: 10px; max-width: 320px; }
.champ-fase span {
  color: var(--muted);
  font: 700 10px/1 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.champ-fase select {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink-strong);
  font-size: 12.5px;
}

/* ── Exportar: o mapa quadrado, não a tela ───────────────────────────────
   Durante a exportação a tela de desenho vira um quadrado. Sem isto ela
   ficaria esticada na caixa larga, e o vídeo mostraria ao operador uma coisa
   diferente da que está sendo gravada.
   ------------------------------------------------------------------------ */

body.saida-quadrada #map {
  aspect-ratio: 1 / 1;
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  margin-inline: auto;
}

/* ── Encaixe: as estatísticas paravam de pé numa coluna sem fim ──────────
   Cada bloco (destaques, mapa, safe, composições) é uma lista curta. Em
   coluna única eles viram uma tira de dois metros que ninguém percorre. Em
   telas com largura, entram lado a lado; o de personagens fica inteiro,
   porque a linha dele é larga e tem campo de texto.
   ------------------------------------------------------------------------ */

@media (min-width: 640px) {
  .champ-estatisticas,
  .champ-stats,
  #metaCorpo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    align-items: start;
  }
  /* O título ocupa a coluna dele e a lista vem logo abaixo, no mesmo lugar:
     sem isto o grid separa um do outro. */
  .champ-estatisticas > .meta-subtitulo,
  .champ-stats > .meta-subtitulo,
  #metaCorpo > .meta-subtitulo { grid-column: auto; }
  /* Lista de personagens e tabela ocupam a largura toda: a linha delas é
     larga e tem campo de texto, e partida ao meio fica ilegível. */
  .champ-estatisticas > .meta-lista,
  .champ-estatisticas > .results-table-wrap,
  .champ-stats > .meta-lista,
  .champ-stats > .results-table-wrap,
  .champ-stats > .results-section-title,
  #metaCorpo > .meta-lista { grid-column: 1 / -1; }
  .champ-estatisticas > .champ-conferencia,
  .champ-estatisticas > .champ-fase,
  .champ-stats > .champ-conferencia,
  .champ-stats > .champ-fase { grid-column: 1 / -1; }
}

/* Espaçamento igual entre todos os blocos, em vez de cada um com o seu. */
.meta-subtitulo { margin: 18px 0 7px; }
.meta-composicoes { display: grid; gap: 4px; align-content: start; }

/* Linha de estatística: rótulo à esquerda, número à direita, alinhados na
   mesma coluna em todas as linhas — é isso que faz a lista parecer tabela
   em vez de uma pilha de caixas. */
.meta-comp {
  min-height: 38px;
  padding: 8px 11px;
  gap: 10px;
}
.meta-comp span { line-height: 1.35; }
.meta-comp b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cartões de número (colocação, abates, precisão) com a mesma altura. */
.results-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.results-cards > * { display: flex; flex-direction: column; justify-content: center; }

.results-section-title { margin: 18px 0 7px; }
.results-table-wrap + .results-section-title { margin-top: 22px; }

@media (max-width: 639px) {
  .meta-comp { min-height: 42px; }
}

/* O recado que transforma "Personagem 26" de defeito em tarefa de um clique. */
.meta-recado {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 62ch;
}
@media (min-width: 640px) {
  .champ-estatisticas > .meta-recado,
  .champ-stats > .meta-recado,
  #metaCorpo > .meta-recado { grid-column: 1 / -1; }
}

/* Etiqueta da fileira de fases, agora que os chips de categoria saíram. */
.phase-row-label {
  align-self: center;
  margin-right: 2px;
  color: var(--muted);
  font: 700 9.5px/1 "IBM Plex Mono", Consolas, monospace;
  letter-spacing: .14em;
}
.phase-chip[hidden] { display: none; }

/* ── Encaixe do banco de trabalho ────────────────────────────────────────
   Medido numa janela de 1335 × 656: o canvas ocupava a largura toda, mas o
   mapa é quadrado e limitado pela altura (385 px) — sobravam 474 px de cinza
   de cada lado. Ao mesmo tempo o painel da direita vivia em 330 px com barra
   de rolagem, com os cartões empilhados um sobre o outro.

   A correção usa o vazio: em tela larga o painel ganha duas colunas e o
   dobro da largura. O cinza encolhe porque o painel passa a ocupá-lo, e os
   cartões param de ficar amontoados. Nada é escondido — é o mesmo conteúdo,
   espalhado no espaço que já existia.
   ------------------------------------------------------------------------ */



}

/* O mapa ganha altura de volta: o cabeçalho e a barra de tempo estavam
   levando 269 px dos 656, e cada pixel de altura é um pixel de lado do
   quadrado. A fileira de categorias que saiu já devolveu parte. */
@media (min-height: 560px) {
  .timeline-deck { padding-block: 8px; }
  .phase-row { margin-block: 4px; }
}

/* ── Altura de volta para o mapa ─────────────────────────────────────────
   O mapa é quadrado, então cada pixel de altura é um pixel de lado. Numa
   janela de 1335 × 656 ele saía com 383 px porque o cabeçalho levava 112 e a
   barra de baixo 159 — e o que sobrava de largura virava faixa cinza.

   A régua da timeline e a fileira de safes cabem na mesma linha em tela
   larga: a régua estica e os botões de fase ficam à direita dela. Nada é
   escondido, e a barra deixa de ter três andares.
   ------------------------------------------------------------------------ */

@media (min-width: 1100px) {
  .timeline-deck {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 14px;
  }
  .timeline-deck > .tactical-timeline { grid-area: 1 / 1; }
  .timeline-deck > .phase-row { grid-area: 1 / 2; margin: 0; }
  .timeline-deck > .timeline-controls { grid-area: 2 / 1 / 3 / -1; }
}


/* ---- Kill feed dentro do painel ------------------------------------------
   Fora do mapa ele para de ser um cartaz flutuante e passa a ser lista: sem
   `position`, sem largura travada em 260 px, e com ponteiro ligado para dar
   para clicar no abate. O `pointer-events: none` fazia sentido por cima do
   mapa, onde ele não podia roubar o arrasto da câmera.
   ------------------------------------------------------------------------ */

.killfeed-card { padding: 10px 12px 12px; }

.killfeed-card .map-killfeed {
  position: static;
  display: flex;
  flex-direction: column;
  inset: auto;
  width: auto;
  max-height: 168px;
  overflow: auto;
  scrollbar-width: thin;
  gap: 4px;
  pointer-events: auto;
}

.killfeed-card .killfeed-banner { backdrop-filter: none; }

/* Vazio, o cartão não precisa ocupar lugar no painel. */
.killfeed-card:has(.map-killfeed:empty) { display: none; }


/* ---- Estado vence layout --------------------------------------------------
   Quem esconde ou estreita o painel está escrito lá em cima, junto da tela a
   que pertence (Campeonatos na linha ~4348, Resultados na ~3459, modo foco na
   ~2692). As regras de duas colunas vieram depois no arquivo e, com a mesma
   especificidade, passaram por cima delas: o painel de cartas reaparecia
   flutuando sobre a lista de campeonatos, e a gaveta do modo foco inchava de
   360 para 620 px. As de overlay e tela cheia escaparam porque usam
   `!important`.

   Este bloco fica no fim de propósito: é a última palavra, e diz que o estado
   da tela manda no layout, não o contrário. O cliente também deixou de marcar
   `painel-largo` nesses estados — isto aqui é a garantia de que uma ordem de
   arquivo não volta a quebrar a tela.
   ------------------------------------------------------------------------ */

body.champs .control-rail,
body.champs .insight-rail,
body.champs .tool-rail,
body.champs .zoom-rail,
body.results .control-rail,
body.results .insight-rail,
body.results .tool-rail,
body.results .zoom-rail { display: none; }

/* No modo foco o painel é gaveta que entra pela direita, não coluna dupla. */
body.focus-view .control-rail {
  display: flex;
  width: min(360px, calc(100vw - 24px));
  grid-template-columns: none;
}


/* ---- Painel fino e compacto ----------------------------------------------
   Medido: 114 px por equipe no placar (× 12 = 1.439), 631 px só da lista de
   logos, 415 px de controles de montar. Numa coluna de 452 px isso é rolagem
   sem fim — e com rolagem dentro de cada carta a roda do mouse ficava presa
   na carta, então não dava para chegar ao fim do painel de jeito nenhum.

   A regra aqui é uma só: **uma rolagem, a do painel**. Nenhuma carta rola por
   dentro. Para isso caber, o conteúdo encolhe de verdade, sem esconder nada
   que se use durante a partida.
   ------------------------------------------------------------------------ */

@media (min-width: 721px) {
  /* Cartão de equipe: 114 → ~84 px. O nome e o estado ficam lado a lado em
     vez de empilhados, que é o que fazia o cabeçalho ter 35 px. */
  .broadcast-team-card { gap: 4px; padding: 5px 8px; }
  .broadcast-card-header { gap: 6px; }
  .broadcast-logo-slot { width: 22px; height: 22px; border-radius: 5px; }
  .broadcast-team-title { flex-direction: row; align-items: center; gap: 6px; }
  .athlete-capsules-grid { gap: 3px; padding-top: 4px; }
  .athlete-capsule { padding: 2px 4px; gap: 2px; }

  /* ---- Uma rolagem, a do painel ----------------------------------------
     Medido: 77% da área do painel era região de rolagem aninhada — o placar
     mostrava 153 px de uma lista de 1.200, e a lista de logos 210 de 631.
     Com o cursor em cima de qualquer uma delas a roda do mouse era capturada
     por dentro, e o painel não descia. Era impossível chegar ao fim.

     Agora nenhuma carta rola por dentro: elas crescem, e quem rola é o
     painel. A barra de abas fica presa no topo para que trocar de aba nunca
     exija voltar rolando.
     -------------------------------------------------------------------- */
  .control-rail > .panel-grow { flex: none; overflow: visible; }
  .control-rail .tab-panel { overflow: visible; max-height: none; }
  /* A barra de abas é filha direta do painel (ver `moverAbasDoPainel`), que
     é quem rola: presa aqui, ela não sai da tela nunca.

     E quebra em duas fileiras em vez de rolar na horizontal. São oito abas
     numa coluna de 330 px — rolando de lado, metade delas não existia para
     quem não soubesse que dava para arrastar. */
  .control-rail > .panel-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    gap: 2px;
    padding: 4px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .control-rail > .panel-tabs .panel-tab {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 12px;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .control-rail .team-dock { max-height: none; overflow: visible; }

  /* Dados de render: uma linha fina, não três blocos. */
  .data-strip { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 5px 10px; font-size: 11px; }
  .data-strip > div { display: flex; align-items: baseline; gap: 5px; }
}

/* As duas gavetas novas dentro de Exibição. */
.display-dobra > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.display-dobra > summary::-webkit-details-marker { display: none; }
.display-dobra > summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 700;
  color: var(--muted);
}
.display-dobra[open] > summary::after { content: "–"; }


/* ---- O zoom sai de debaixo do painel -------------------------------------
   Medido: o controle de zoom ficava em 1188–1318 e o painel de cartas ocupa
   993–1323 com z-index maior. Sobreposição de 100%: os quatro botões
   existiam, respondiam a clique, e nunca apareciam para ninguém.

   Ele desce para a mesma fileira do aviso de qualidade, no canto de baixo à
   esquerda, que já existe e está meio vazia — em vez de abrir mais uma
   faixa ocupada em volta do mapa. O motor mede essa mobília sozinho (ver
   `setMolduras`), então o quadrado do mapa se reposiciona junto.
   ------------------------------------------------------------------------ */

@media (min-width: 721px) {
  /* Empilhado sobre o aviso de qualidade, na mesma coluna. Ao lado dele, em
     175px, o zoom empurrava a borda ocupada da esquerda de 165 para 306 px —
     e o motor, que mede a mobília, jogava o mapa 140 px para a direita. */
  .zoom-rail {
    left: 72px;          /* à direita da torre de ferramentas, que vai até 65 */
    right: auto;
    bottom: 52px;
  }
}


/* O selo de conferência, agora na faixa de dados do painel. */
.data-strip-selo { grid-column: 1 / -1; }
.data-strip-selo .selo { width: 100%; justify-content: flex-start; }


:root {
  /* Altura das duas faixas do topo. Em tela larga e baixa elas encolhem (ver
     abaixo) e tudo que depende delas acompanha sozinho. */
  --altura-nav: 56px;
  --altura-sessao: 56px;
}

/* ---- Devolver altura ao mapa ---------------------------------------------
   O mapa é quadrado e, num palco de 1333x412, o lado dele é a altura. Cada
   pixel que as faixas devolvem é um pixel de lado — e um a menos de vazio dos
   dois lados. Medido: as duas barras do topo tinham 56 px para conteúdo de
   36 e 34, e a barra de tempo 130 para 101.

   Ninguém perde função aqui: é recheio, não conteúdo.
   ------------------------------------------------------------------------ */

@media (min-width: 1100px) and (min-height: 560px) {
  :root { --altura-nav: 44px; --altura-sessao: 44px; }
  .app-nav { min-height: var(--altura-nav); height: var(--altura-nav); padding-block: 0; }
  .topbar { min-height: var(--altura-sessao); height: var(--altura-sessao); padding-block: 0; }

  .timeline-deck { padding: 6px 12px; gap: 4px 14px; }
  .timeline-deck > .tactical-timeline { min-height: 0; }
  .tactical-ruler-wrap { padding-block: 2px; }
  .timeline-controls { min-height: 0; padding-block: 2px; gap: 8px; }
  .timeline-controls .timeline-action,
  .timeline-controls .play-button { min-height: 32px; }
  .timeline-controls #speed { min-height: 32px; }
}


/* ---- O painel come parte do vazio ----------------------------------------
   Com a altura esgotada, o lado do mapa é o que é: 454 px numa janela de
   656. O palco tem 1333 de largura, então sobram 337 px de nada dos dois
   lados do mapa — e é isso que faz a tela parecer larga e desconfortável.

   O painel cresce um pouco para ocupar parte desse vazio. Continua uma
   coluna só e continua fino: 440 contra os 620 em duas colunas que ficaram
   ruins de usar. O que ele ganha vai para a tabela do placar, que estava
   apertada em 320.
   ------------------------------------------------------------------------ */

@media (min-width: 1280px) {
  .control-rail { width: min(440px, 33vw); }
}

/* Estudo primeiro: três ações familiares; ajustes ficam em uma única dobra. */
[hidden] { display: none !important; }
.advanced-action, .advanced-tab { display: none !important; }
body.study-advanced .advanced-action, body.study-advanced .advanced-tab { display: inline-flex !important; }
body:not(.study-advanced) #myTeamSelect,
body:not(.study-advanced) .advanced-team-label,
body:not(.study-advanced) label[for="comparedTeamSelect"],
body:not(.study-advanced) #comparedTeamSelect,
body:not(.study-advanced) #teamDock { display: none; }
.study-options { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.study-options > summary { padding: 14px 16px; cursor: pointer; font-weight: 650; }
.study-options-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px; }
.study-options .panel-card { box-shadow: none; margin: 0; border-radius: 0; }
.team-dock-card { order: -2; }
.control-rail > .panel-tabs { order: -1; }
.focus-exit, body.is-fullscreen .focus-exit { min-height: 44px; min-width: 150px; font: 600 12px/1.4 "Segoe UI", sans-serif; opacity: 1; background: var(--brand-carbon); color: var(--brand-bone); text-transform: none; }
.champ-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; max-width: 1060px; padding: 18px 0 32px; }
.champ-card { display: grid; gap: 10px; text-align: left; padding: 0 0 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 180ms ease, transform 180ms ease; }
.champ-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.champ-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.champ-card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.champ-card-cover { position: relative; container-type: inline-size; }
.champ-card-cover img { display: block; }
.champ-card-cover-title { position: absolute; left: 24px; top: 26%; max-width: 45%; color: var(--brand-carbon); font: 650 clamp(22px, 6cqw, 36px)/1.2 "Segoe UI", sans-serif; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 540px) { .champ-card-cover-title { max-width: 40%; } }
.champ-card strong { font-size: clamp(18px, 2vw, 24px); }
.champ-card strong, .champ-card small, .champ-card > span { margin: 0 20px; }
.champ-card small { color: var(--muted); }
.champ-card > span { color: var(--accent); margin-top: 8px; font-weight: 650; }
.champ-stage > summary { cursor: pointer; flex-wrap: wrap; list-style: none; }
.champ-stage > summary::before { content: "+"; color: var(--accent); font-size: 20px; }
.champ-stage[open] > summary::before { content: "−"; }
#champsBack { margin-bottom: 18px; }
body.notes-view .map-workbench, body.library-view .map-workbench { display: none; }
body.notes-view .workspace, body.library-view .workspace { display: block; }
body.notes-view .control-rail, body.library-view .control-rail { width: 100%; max-width: 960px; margin: 0 auto; height: 100%; }
body.notes-view .control-rail > :not(.ranking-card), body.library-view .control-rail > :not(.ranking-card) { display: none !important; }
.note-drawing-options { margin: 12px 0; color: var(--muted); }
.note-drawing-options > summary { cursor: pointer; font-size: 12px; }
body:not(.study-advanced) .tactical-timeline { display: none; }
.study-hint { line-height: 1.65; }
.library-search { display: grid; gap: 8px; margin: 20px 0; font: 13px "Segoe UI", sans-serif; }
.library-search input { min-height: 44px; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface); color: var(--text); font: inherit; }
@media (prefers-reduced-motion: reduce) { .champ-card { transition: none; } }

/* Interface calma: tipografia de leitura, mapa livre e ferramentas ao lado. */
body:not(.overlay) .grain { display: none; }
.nav-label, .panel-tab, .button, .display-heading, .study-options > summary,
.broadcast-team-title, .athlete-capsule, .text-action, .results-tab,
.results-title, .caderno-header, .library-item, .study-hint {
  font-family: "Segoe UI Variable Text", "Segoe UI", sans-serif;
  letter-spacing: 0; text-transform: none;
}
.nav-label { font-size: 13px; line-height: 1.25; font-weight: 600; }
.nav-index { display: none; }
.panel-tab { font-size: 13px; }
.button, .text-action { font-size: 13px; }
.display-heading { font-size: 14px; line-height: 1.4; }
.athlete-capsule { font-size: 12px; min-height: 27px; }
.panel-card { border-radius: 10px; }
.quality-banner { max-width: min(390px, calc(100% - 160px)); font: 12px/1.5 "Segoe UI", sans-serif; }
.landing-proof-art { display: block; width: min(100%, 1040px); aspect-ratio: 16/9; height: auto; margin: 0 auto 56px; border-radius: 12px; }
@media (min-width: 1000px) {
  body:not(.overlay):not(.focus-view):not(.results):not(.champs):not(.notes-view):not(.library-view) .workspace {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; padding: 16px 20px 20px;
  }
  body:not(.overlay):not(.focus-view) .control-rail { position: static; width: auto; max-height: 100%; margin: 0; }
  body:not(.overlay):not(.focus-view) .board-shell { border: 1px solid var(--line); border-radius: 12px; }
}
@media (max-width: 720px) {
  .nav-link .nav-label { white-space: normal; overflow: visible; text-overflow: clip; font-size: 11px; line-height: 1.3; }
  .panel-tab, .button { min-height: 44px; }
  .focus-exit { white-space: nowrap; }
  .focus-shortcuts { display: none; }
  body.notes-view .control-rail, body.library-view .control-rail { padding: 12px; }
}

.notebook-composer { display: grid; gap: 8px; padding: 16px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.canvas-stage { background: var(--brand-carbon); }
.perspective-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.perspective-canvas[hidden] { display: none; }
body:not(.overlay) .zoom-rail { width: 168px; flex-wrap: wrap; justify-content: center; padding: 4px; }
.map-view-switch { display: flex; width: 100%; gap: 3px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.zoom-rail .map-view-switch button { flex: 1; width: auto; min-width: 0; border: 0; border-radius: 4px; font: 600 12px/1.2 "Segoe UI", sans-serif; transition: background 160ms ease; }
.zoom-rail .map-view-switch button[aria-pressed="true"] { color: var(--brand-carbon); background: var(--brand-ember); }
.zoom-rail .map-view-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body:not(.overlay):not(.focus-view) .board-shell {
  border: 6px solid var(--brand-carbon);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(128, 132, 139, .25);
}
.study-team-header > span { color: var(--muted); font-size: 12px; }
.study-team-header h2 { font: 650 23px/1.2 "Segoe UI Variable Text", "Segoe UI", sans-serif; letter-spacing: -.6px; margin: 6px 0 12px; overflow-wrap: anywhere; }
.study-team-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.study-team-actions .button { flex: 1 0 40%; }
.study-team-actions .text-action { width: 100%; text-align: left; }
.study-team-stats { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 0; border-block: 1px solid var(--line); }
.study-team-stats > div { display: grid; gap: 6px; }
.study-team-stats span { color: var(--muted); font-size: 12px; }
.study-team-stats strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.study-tactical { font-size: 12px; line-height: 1.6; padding: 10px 12px; background: var(--surface-sunken); border-left: 2px solid var(--accent); }
.study-player { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.study-player button { font-weight: 650; font-size: 14px; text-align: left; }
.study-player p { margin: 8px 0 0; font-size: 12px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.study-player-build { color: var(--muted); }
@media (max-width: 720px) {
  .zoom-rail .map-view-switch button { min-height: 44px; }
  body:not(.overlay):not(.focus-view) .board-shell { border-width: 4px; }
  .study-player button, .study-team-actions .text-action { min-height: 44px; }
}
.notebook-composer[hidden] { display: none; }
.notebook-composer input, .notebook-composer textarea { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; }
.notebook-composer textarea { resize: vertical; }
.notebook-composer [role="alert"] { margin: 0; color: var(--accent); font-size: 12px; }
.event-study-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.study-hint { max-width: 60ch; font-size: 12px; color: var(--muted); line-height: 1.5; }
button.chapter-item, button.bookmark-item, button.note-item { width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
@media (pointer: coarse) { .panel-tab, .event-study-actions button, .caderno-action-row button { min-height: 44px; } }