/* Jogo das Estrelas — overlay de convocação.

   Usa os tokens do app (--bg-surface, --text-primary, --border, Sora) em vez de
   uma paleta própria: é o mesmo jogo, e um card escuro solto num app light-first
   lê como peça de outro produto. A ÚNICA cor livre é --estrelas-accent, injetada
   inline pelo helper `estrelas_accent` a partir do time revelado.

   A camisa é o elemento-assinatura. Tudo em volta fica quieto de propósito —
   a boldness é gasta num lugar só. */

.estrelas-draw {
  position: fixed;
  inset: 0;
  /* Faixa 9400: acima da celebração de conquista (9200), que pode cair no mesmo
     gol. A convocação é o evento maior — ela ganha a tela. */
  z-index: 9400;
  display: grid;
  place-items: center;
  padding: 1rem;
  animation: estrelas-draw-in 160ms ease-out;
}

.estrelas-draw:focus { outline: none; }

.estrelas-draw.is-leaving {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

@keyframes estrelas-draw-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.estrelas-draw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 16, 0.72);
  backdrop-filter: blur(2px);
}

.estrelas-draw-card {
  /* Neutro durante o sorteio — a cor do time só entra na revelação, senão o
     acento entrega o resultado antes da camisa parar. */
  --estrelas-accent: var(--accent);

  position: relative;
  z-index: 9402;
  width: min(380px, 100%);
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 48px rgba(12, 24, 16, 0.28);
  text-align: center;
  font-family: var(--font-body);
}

.estrelas-draw.is-revealed .estrelas-draw-card {
  --estrelas-accent: var(--estrelas-team-accent, var(--accent));
}

.estrelas-draw-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--estrelas-accent);
  transition: color 320ms ease-out;
}

/* ── Palco da camisa ── */

.estrelas-draw-stage {
  display: grid;
  place-items: center;
  min-height: 150px;
  margin-bottom: 1.1rem;
}

.estrelas-draw-shirt {
  grid-area: 1 / 1;
  opacity: 0;
  /* A camisa DESCE e assenta — o gesto é de convocação (alguém te entrega a
     camisa), não de caça-níquel. */
  transform: translateY(-10px) scale(0.94);
  transition: opacity 110ms linear, transform 110ms linear;
}

.estrelas-draw-shirt.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.estrelas-draw-shirt.is-out {
  opacity: 0;
  transform: translateY(6px) scale(0.9);
}

.estrelas-draw-shirt-svg { display: block; }

.estrelas-draw-stage.is-settled .estrelas-draw-shirt.is-active {
  animation: estrelas-draw-land 460ms cubic-bezier(0.18, 1.32, 0.42, 1);
  filter: drop-shadow(0 10px 18px rgba(12, 24, 16, 0.22));
}

@keyframes estrelas-draw-land {
  0%   { transform: translateY(-14px) scale(0.94); }
  60%  { transform: translateY(3px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* ── Texto ── */

.estrelas-draw-title {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.estrelas-draw-team {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--estrelas-accent, var(--accent));
}

.estrelas-draw-note {
  margin: 0 0 1rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* O que está em jogo. Fica quieto de propósito: filete fino, tipo menor, sem
   caixa nem fundo — é informação secundária, não um segundo botão. */
.estrelas-draw-prize {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: left;
  color: var(--text-muted);
}

.estrelas-draw-prize-mark {
  flex-shrink: 0;
  line-height: 1.4;
  color: var(--estrelas-accent, var(--accent));
}

.estrelas-draw-cta {
  width: 100%;
  padding: 0.78rem 1rem;
  border: 0;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  transition: background 140ms ease;
}

.estrelas-draw-cta:hover { background: var(--accent-dark); }

.estrelas-draw-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Tema escuro ── */

[data-theme="dark"] .estrelas-draw-backdrop {
  background: rgba(6, 12, 8, 0.82);
}

[data-theme="dark"] .estrelas-draw-card {
  background: var(--bg-card);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}

/* ── Movimento reduzido ──
   O JS também pula direto pro resultado (ver estrelas_draw_controller): desligar
   só a animação deixaria a pessoa esperando 2s por um card parado. */

@media (prefers-reduced-motion: reduce) {
  .estrelas-draw,
  .estrelas-draw-shirt,
  .estrelas-draw-stage.is-settled .estrelas-draw-shirt.is-active {
    animation: none;
    transition: none;
  }
}

/* ── Elenco na página do time de exibição ── */

.estrelas-squad {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
}

.estrelas-squad-hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.estrelas-squad-kit { flex-shrink: 0; }

.estrelas-squad-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--estrelas-accent, var(--accent));
}

.estrelas-squad-title {
  margin: 0.15rem 0 0.1rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}

.estrelas-squad-sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.estrelas-squad-link { color: var(--estrelas-accent, var(--accent)); font-weight: 600; }

.estrelas-squad-label {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.estrelas-squad-list {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.35rem;
}

.estrelas-squad-mate {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--bg-card);
}

.estrelas-squad-mate.is-me {
  background: color-mix(in srgb, var(--estrelas-accent, var(--accent)) 12%, transparent);
}

/* O pick É a informação: a ordem aqui é o ranking da temporada, não decoração. */
.estrelas-squad-pick {
  flex-shrink: 0;
  min-width: 1.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.estrelas-squad-mate-name { color: var(--text-primary); font-weight: 600; }

.estrelas-squad-badge,
.estrelas-squad-you {
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.estrelas-squad-badge {
  color: #10121a;
  background: var(--estrelas-accent, var(--accent));
}

.estrelas-squad-you {
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.estrelas-squad-note {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Nota de premiação na listagem de gols da partida. */
.match-scorers-prize {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, #d4af37 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #d4af37 8%, transparent);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.match-scorers-prize-mark { flex-shrink: 0; color: #b8901f; }
.match-scorers-prize strong { color: var(--text-primary); }

/* ── Jogo das Estrelas na linha do tempo da carreira ──
   Reusa a estrutura de `.career-selection` (Copa) e só troca a identidade: o
   acento vem do time da edição, via `estrelas_accent`. */

.transfer-timeline-dot-estrelas {
  background: var(--gold, #D4A017);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #D4A017) 22%, transparent);
}

/* O painel (padding, raio, sombra, overflow) vem de `.career-selection`, que a
   view aplica junto — declarar `border-color` sem `border-style` não desenhava
   nada, e sem o painel o card ficava sem respiro, colado no texto. Aqui só a
   IDENTIDADE muda: dourado/celeste do time em vez do laranja da seleção.
   Dois seletores (0,2,0) porque a ordem do `stylesheet_link_tag` NÃO é a ordem
   de saída — os arquivos saem em ordem alfabética, então `players.css` vem
   DEPOIS de `estrelas.css` e o `border` shorthand de `.career-selection`
   venceria o `border-color` daqui num empate de especificidade. */
.transfer-timeline-content.career-estrelas {
  border-color: color-mix(in srgb, var(--estrelas-accent, var(--gold, #D4A017)) 38%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--estrelas-accent, var(--gold, #D4A017)) 9%, transparent),
      color-mix(in srgb, var(--estrelas-accent, var(--gold, #D4A017)) 3%, transparent) 60%);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--estrelas-accent, var(--gold, #D4A017)) 8%, transparent);
}

.career-estrelas-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  padding: 0.08rem 0.32rem;
  border-radius: 4px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1a1a;
  background: var(--estrelas-accent, var(--gold, #D4A017));
}