/* ==========================================================================
   TICKER.JS — BARRA DE NOTICIAS ESPORTIVAS
   Fica FORA da area redesenhada a cada clique (#app), como elemento
   independente no topo da pagina, pra rolagem nunca reiniciar por causa
   de re-renders do resto do jogo.
   ========================================================================== */
#ticker-root { display: none; }
#ticker-root.visible { display: block; }

/* position:fixed em vez de sticky (28/07/2026, pedido do usuário: a barra
   sumia ao rolar em vez de ficar presa no topo) -- o #app tem
   min-height:100vh, então com a barra (44px) somados a página sempre passa
   um pouco da altura da tela e gera rolagem geral; sticky depende de ficar
   dentro do fluxo normal dessa rolagem pra "grudar", e em alguns
   navegadores/celulares isso falha (a barra rola junto e desaparece em vez
   de ficar fixa). position:fixed prende ela na janela sempre, não importa
   o que estiver rolando por baixo. Como fixed tira do fluxo do documento,
   o #app precisa ser empurrado pra baixo em 44px (altura da barra) pra não
   ficar escondido atrás dela -- ver regra "#ticker-root.visible + #app"
   logo abaixo, só aplicada quando a barra está de fato visível (mesma
   condição de App.updateTickerVisibility em app-ticker.js). */
.ticker-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  display: flex;
  align-items: stretch;
  height: 44px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

#ticker-root.visible + #app { margin-top: 44px; }

.ticker-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--bg-3);
  border-right: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-0);
  white-space: nowrap;
}
.ticker-brand > * { margin-right: 8px; }
.ticker-brand > *:last-child { margin-right: 0; }
.ticker-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(196,34,44,0.6);
  animation: tickerPulse 1.6s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes tickerPulse {
  0% { box-shadow: 0 0 0 0 rgba(196,34,44,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(196,34,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,34,44,0); }
}
.ticker-brand small {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.04em;
}

.ticker-viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: tickerScroll 60s linear infinite;
}
.ticker-viewport:hover .ticker-track,
.ticker-viewport:focus-within .ticker-track,
.ticker-track.is-paused {
  animation-play-state: paused;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ticker-item > * { margin-right: 9px; }
.ticker-item > *:last-child { margin-right: 0; }
.ticker-item + .ticker-item { border-left: 1px solid var(--line); }

.ticker-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px 1px;
  border-radius: 3px;
  color: #06090a;
  flex: 0 0 auto;
}
.ticker-tag.resultado { background: var(--pitch); }
.ticker-tag.mercado { background: var(--gold); }
.ticker-tag.tabela { background: var(--blue); color: #fff; }
.ticker-tag.diretoria { background: var(--live); color: #fff; }
.ticker-tag.premiacao { background: var(--gold); }
.ticker-tag.lesao { background: var(--danger); color: #fff; }
.ticker-tag.destaque { background: var(--gold); }
.ticker-tag.falha { background: var(--danger); color: #fff; }
.ticker-tag.mercado-ia { background: var(--blue); color: #fff; }
.ticker-tag.passe-livre { background: var(--text-2); color: #06090a; }
.ticker-tag.mercado-caro { background: var(--gold); }

.ticker-breaking {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--danger);
  border: 1px solid rgba(196,34,44,0.5);
  padding: 1px 7px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.ticker-headline { font-size: 13px; font-weight: 500; color: var(--text-0); }

.ticker-round {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  flex: 0 0 auto;
}

.ticker-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: var(--bg-3);
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
}
.ticker-toggle:hover { color: var(--text-0); }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-viewport { overflow-x: auto; }
}

@media (max-width: 900px) {
  .ticker-brand small { display: none; }
  .ticker-headline { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
}