/* ================================================================
   SORTEIA VÔLEI DOS AMIGOS — style.css
   Abordagem Mobile First: o CSS base é para mobile.
   Ajustes para telas maiores ficam dentro de @media (min-width: 600px).
   ================================================================ */


/* ================================================================
   VARIÁVEIS CSS (Custom Properties)
   Centraliza as cores, espaçamentos e valores reutilizáveis do tema.
   Para alterar o tema visual, edite APENAS esta seção :root.
   ================================================================ */
:root {
  /* --- Paleta de cores: tema praia/vôlei --- */
  --color-blue:         #1a6fc4;              /* Azul principal — botões, destaques */
  --color-blue-dark:    #155a9e;              /* Azul escuro — hover dos botões azuis */
  --color-blue-light:   #e8f2fc;              /* Azul bem claro — fundos sutis */
  --color-yellow:       #f5c400;              /* Amarelo — líderes, badges de destaque */
  --color-yellow-dark:  #d4a900;              /* Amarelo escuro — hover de badges amarelos */
  --color-sand:         #f0e0b0;              /* Areia — fundo geral da página */
  --color-sand-dark:    #dccf9a;              /* Areia escura — bordas e separadores */
  --color-danger:       #d32f2f;              /* Vermelho — erros, botão "Limpar Tudo" */
  --color-danger-dark:  #b71c1c;              /* Vermelho escuro — hover do botão perigo */
  --color-text:         #1a1a2e;              /* Texto principal — quase preto, alto contraste */
  --color-text-muted:   #666680;              /* Texto secundário — descrições, placeholders */
  --color-white:        #ffffff;              /* Branco puro */

  /* --- Espaçamentos (múltiplos de 4px para consistência visual) --- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;

  /* --- Raios de borda arredondada --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 50px;   /* Totalmente arredondado — formato pílula */

  /* --- Sombras --- */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);

  /* --- Tipografia --- */
  /* Usa fontes nativas do sistema: melhor legibilidade sem download externo
     -apple-system: iOS/macOS | BlinkMacSystemFont: macOS Chrome
     Segoe UI: Windows | Roboto: Android | Arial: fallback universal */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;

  /* Tamanhos de fonte (rem = relativo ao tamanho base do html, que é 16px) */
  --font-xs:   0.75rem;    /* 12px */
  --font-sm:   0.875rem;   /* 14px */
  --font-base: 1rem;       /* 16px — tamanho base */
  --font-lg:   1.125rem;   /* 18px */
  --font-xl:   1.25rem;    /* 20px */
  --font-2xl:  1.5rem;     /* 24px */
  --font-3xl:  1.875rem;   /* 30px */

  /* --- Transição padrão para animações de interação --- */
  --transition: 0.2s ease;
}


/* ================================================================
   RESET GLOBAL
   Remove margens, paddings e comportamentos inconsistentes entre
   navegadores para garantir que o CSS seja previsível.
   ================================================================ */
*, *::before, *::after {
  /* * = todos os elementos | ::before e ::after = pseudo-elementos CSS */
  box-sizing: border-box;
  /* border-box: padding e border são INCLUÍDOS no width/height total.
     Sem isso: width:200px + padding:16px = 232px de largura real.
     Com border-box: o elemento continua com 200px, padding fica interno. */
  margin: 0;    /* Remove margens padrão (h1, p, ul etc. têm margens nativas) */
  padding: 0;   /* Remove paddings padrão */
}

/* Impede scroll horizontal em qualquer tela — proteção global contra overflow */
html, body {
  overflow-x: hidden;
  /* Se algum elemento ultrapassar a largura da tela, não aparece barra de rolagem lateral */
  width: 100%;
}

html {
  font-size: 16px;          /* Define 1rem = 16px para todo o documento */
  scroll-behavior: smooth;  /* Rolagem suave ao navegar para âncoras (#id) */
}

body {
  font-family: var(--font-family);  /* Fonte definida nas variáveis */
  font-size: var(--font-base);      /* 16px — tamanho padrão do texto */
  color: var(--color-text);         /* Cor do texto principal */
  background-color: var(--color-sand); /* Fundo areia — tema praia/vôlei */
  line-height: 1.5;                 /* Espaçamento entre linhas (1.5x o tamanho da fonte) */
  min-height: 100vh;
  /* min-height: 100vh — o body ocupa no mínimo 100% da altura da viewport.
     Evita fundo branco em telas altas com pouco conteúdo. */
}


/* ================================================================
   CABEÇALHO DO APP
   Fixo no topo com gradiente azul do tema
   ================================================================ */
.app-header {
  background: linear-gradient(135deg, var(--color-blue) 0%, #2d8fd4 100%);
  /* linear-gradient: fundo gradiente
     135deg = diagonal (canto superior-esquerdo para canto inferior-direito)
     Do azul principal (#1a6fc4) para um azul mais claro (#2d8fd4) */
  color: var(--color-white);         /* Texto branco sobre fundo azul — alto contraste */
  padding: var(--space-md) var(--space-md);
  /* padding: espaço interno. Formato cima/baixo, esquerda/direita */
  text-align: center;                /* Centraliza título e subtítulo */
  box-shadow: var(--shadow-md);      /* Sombra abaixo para separar do conteúdo */
  position: sticky;
  /* sticky: o cabeçalho fica fixo no topo da viewport ao rolar a página */
  top: 0;                            /* Distância do topo quando sticky */
  z-index: 100;
  /* z-index: garante que o header fique acima de outros elementos ao rolar */
}

.app-title {
  font-size: var(--font-xl);         /* 20px no mobile */
  font-weight: 800;                  /* Extra-bold */
  letter-spacing: -0.5px;           /* Aperta levemente o espaçamento entre letras */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil para legibilidade */
}

.app-subtitle {
  font-size: var(--font-sm);         /* 14px */
  opacity: 0.85;
  /* 85% de opacidade — levemente transparente para hierarquia visual */
  margin-top: var(--space-xs);       /* 4px acima */
}


/* ================================================================
   CONTAINER PRINCIPAL
   Centraliza e limita a largura do conteúdo
   ================================================================ */
.app-main {
  max-width: 680px;
  /* Largura máxima para boa legibilidade em telas grandes */
  margin: 0 auto;
  /* margin: auto nas laterais centraliza horizontalmente na tela */
  padding: var(--space-sm);
  /* Mobile: 8px nas bordas — preserva o máximo de espaço útil na tela */
  display: flex;
  /* Flexbox: organiza as seções como itens flex */
  flex-direction: column;            /* Empilha as seções verticalmente */
  gap: var(--space-sm);
  /* Mobile: 8px entre seções — espaçamento compacto para não desperdiçar tela */
}


/* ================================================================
   CARDS DE SEÇÃO
   Container branco com sombra para cada bloco de funcionalidade
   ================================================================ */
.section-card {
  background: var(--color-white);    /* Fundo branco sobre o fundo areia */
  border-radius: var(--radius-md);
  /* Mobile: 12px — arredondamento menor para não desperdiçar espaço */
  padding: var(--space-md);
  /* Mobile: 16px de espaço interno — equilibrado para qualquer tamanho de tela */
  box-shadow: var(--shadow-sm);      /* Sombra leve — efeito de elevação */
  border: 1px solid var(--color-sand-dark); /* Borda sutil */
}

.section-title {
  font-size: var(--font-lg);         /* 18px */
  font-weight: 700;                  /* Negrito */
  color: var(--color-text);
  margin-bottom: var(--space-md);    /* 16px abaixo do título */
}

.section-header-row {
  /* Linha com título à esquerda e contador à direita */
  display: flex;
  align-items: center;               /* Alinha verticalmente ao centro */
  justify-content: space-between;    /* Empurra título para esquerda, contador para direita */
  margin-bottom: var(--space-xs);    /* 4px abaixo */
}


/* ================================================================
   GRUPO DE INPUT (campo de texto + botão Adicionar)
   ================================================================ */
.input-group {
  display: flex;
  flex-direction: column;
  /* Mobile: input em cima, botão embaixo — cada um ocupa 100% da largura do card */
  gap: var(--space-sm);              /* 8px de espaço entre input e botão */
}

.input-group .btn-primary {
  width: 100%;
  /* Mobile: botão ocupa toda a largura — fácil de tocar, bem contido no card */
  padding: var(--space-md);
  /* Área de toque generosa verticalmente */
  font-size: var(--font-lg);
  /* Mesmo tamanho do input para harmonia visual */
}

.input-name {
  flex: 1;
  /* flex: 1 — o input ocupa todo o espaço disponível, empurrando o botão para a direita */
  padding: var(--space-md);          /* 16px em todos os lados — espaço generoso para digitar */
  border: 2px solid var(--color-sand-dark);
  border-radius: var(--radius-md);   /* 12px */
  font-size: var(--font-lg);         /* 18px — fonte grande para fácil digitação no mobile */
  font-family: var(--font-family);   /* Mesma fonte do app */
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  /* Remove o outline azul padrão do navegador (substituído pelo :focus abaixo) */
  transition: border-color var(--transition), box-shadow var(--transition);
  /* Transição suave para o efeito de foco */
  -webkit-appearance: none;
  /* Remove estilos nativos do iOS/Safari no campo de texto */
}

.input-name:focus {
  /* Estilo quando o usuário clica no campo e começa a digitar */
  border-color: var(--color-blue);   /* Borda azul ao focar */
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.15);
  /* Halo azul translúcido — indica visualmente o foco (importante para acessibilidade) */
}

.input-name::placeholder {
  /* Estilo do texto "Nome do jogador..." antes de digitar */
  color: var(--color-text-muted);    /* Cinza esmaecido */
  font-size: var(--font-base);       /* Ligeiramente menor que o texto digitado */
}


/* ================================================================
   BOTÕES — Estilos base e variantes
   ================================================================ */
.btn {
  /* Estilo base compartilhado por TODOS os botões */
  display: inline-flex;
  /* inline-flex: permite alinhar ícone (emoji) + texto com flexbox */
  align-items: center;               /* Centraliza verticalmente */
  justify-content: center;           /* Centraliza horizontalmente */
  gap: var(--space-xs);              /* 4px entre ícone e texto */
  padding: var(--space-sm) var(--space-md); /* 8px cima/baixo, 16px esquerda/direita */
  border: none;                      /* Remove borda padrão dos botões HTML */
  border-radius: var(--radius-md);   /* 12px */
  font-size: var(--font-base);       /* 16px */
  font-weight: 600;                  /* Semi-bold */
  font-family: var(--font-family);   /* Mesma fonte do app */
  cursor: pointer;                   /* Cursor de mãozinha — indica elemento clicável */
  transition: background-color var(--transition),
              transform var(--transition),
              box-shadow var(--transition);
  -webkit-tap-highlight-color: transparent;
  /* Remove o destaque azul padrão ao tocar em mobile (iOS/Android) */
  user-select: none;                 /* Impede seleção acidental do texto do botão */
  white-space: nowrap;               /* Impede que o texto do botão quebre em duas linhas */
}

.btn:active {
  /* Feedback visual ao pressionar o botão */
  transform: scale(0.96);
  /* Encolhe levemente — cria sensação tátil de "clique" */
}

.btn:disabled {
  /* Estado desabilitado — aparece durante a animação de embaralhamento */
  opacity: 0.5;                      /* Metade da opacidade — indica inativo */
  cursor: not-allowed;               /* Cursor de proibido */
  transform: none;                   /* Sem animação de clique */
}

/* Variante: Botão Primário (azul sólido) — ex: "+ Adicionar" */
.btn-primary {
  background-color: var(--color-blue);
  color: var(--color-white);
}
.btn-primary:hover:not(:disabled) {
  /* :not(:disabled) — aplica hover apenas quando o botão NÃO está desabilitado */
  background-color: var(--color-blue-dark);
  box-shadow: var(--shadow-sm);
}

/* Variante: Botão Secundário (borda azul, fundo branco) — ex: "Refazer Sorteio" */
.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-blue);
  border: 2px solid var(--color-blue);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-blue-light);
}

/* Variante: Botão Perigo (borda vermelha) — ex: "Limpar Tudo" */
.btn-danger {
  background-color: var(--color-white);
  color: var(--color-danger);
  border: 2px solid var(--color-danger);
}
.btn-danger:hover:not(:disabled) {
  background-color: #fdecea;         /* Vermelho muito claro — feedback de hover */
}

/* Variante: Botão Sortear (destaque máximo, gradiente, pílula) */
.btn-sort {
  background: linear-gradient(135deg, var(--color-blue) 0%, #2d8fd4 100%);
  /* Gradiente igual ao header para consistência visual */
  color: var(--color-white);
  font-size: var(--font-xl);         /* 20px — maior que os outros botões */
  padding: var(--space-md) var(--space-xl); /* Mais espaçamento interno */
  border-radius: var(--radius-pill); /* Totalmente arredondado — formato pílula */
  box-shadow: var(--shadow-md);
  width: 100%;                       /* Ocupa toda a largura disponível */
}
.btn-sort:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-blue) 100%);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  /* Sobe 2px ao passar o mouse — efeito de elevação */
}


/* ================================================================
   MENSAGENS DE ERRO / VALIDAÇÃO
   ================================================================ */
.msg-error {
  color: var(--color-danger);        /* Vermelho */
  font-size: var(--font-sm);         /* 14px */
  margin-top: var(--space-sm);       /* 8px acima */
  min-height: 20px;
  /* Reserva espaço mesmo quando vazia — evita que o layout salte ao mostrar/esconder */
  font-weight: 500;
  line-height: 1.4;
}


/* ================================================================
   CONTADOR E INFORMAÇÕES DA LISTA
   ================================================================ */
.players-counter {
  /* Badge com número de jogadores no canto do título */
  background: var(--color-blue-light);
  color: var(--color-blue);
  font-size: var(--font-xs);         /* 12px */
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm); /* 4px cima/baixo, 8px esquerda/direita */
  border-radius: var(--radius-pill); /* Formato pílula */
  flex-shrink: 0;                    /* Não encolhe mesmo com títulos longos */
}

.leaders-info {
  /* Texto "👑 2 líderes · 🏐 5 jogadores" */
  font-size: var(--font-sm);         /* 14px */
  color: var(--color-text-muted);    /* Cinza — destaque menor que o título */
  margin-bottom: var(--space-md);    /* 16px abaixo */
  min-height: 20px;                  /* Reserva espaço para não causar salto de layout */
}


/* ================================================================
   LISTA DE JOGADORES
   ================================================================ */
.players-list {
  list-style: none;                  /* Remove os bullets (marcadores) padrão da lista */
  display: flex;
  flex-direction: column;            /* Itens empilhados verticalmente */
  gap: var(--space-sm);              /* 8px entre cada jogador */
  max-height: 340px;                 /* Altura máxima — rola se tiver muitos jogadores */
  overflow-y: auto;                  /* Habilita rolagem vertical */
  padding-right: var(--space-xs);    /* 4px — espaço para a barra de rolagem */
}

/* Estiliza a barra de rolagem (funciona em Chrome, Safari, Edge) */
.players-list::-webkit-scrollbar {
  width: 4px;                        /* Barra de rolagem fina */
}
.players-list::-webkit-scrollbar-thumb {
  background: var(--color-sand-dark);
  border-radius: 2px;
}
.players-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Item de cada jogador na lista */
.player-item {
  display: flex;
  align-items: center;               /* Alinha nome e botões verticalmente */
  gap: var(--space-sm);              /* 8px entre elementos do item */
  padding: var(--space-sm) var(--space-md); /* 8px cima/baixo, 16px esquerda/direita */
  border-radius: var(--radius-md);   /* 12px */
  border: 2px solid var(--color-sand-dark);
  background: var(--color-white);
  transition: border-color var(--transition), background-color var(--transition);
  animation: slideIn 0.2s ease both;
  /* Animação de entrada ao adicionar um novo jogador */
}

/* Animação de entrada: desliza de cima para baixo com fade-in */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px); /* Começa 8px acima da posição final */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* Posição normal */
  }
}

/* Estado especial: jogador marcado como líder */
.player-item.is-leader {
  border-color: var(--color-yellow); /* Borda amarela */
  background: #fffbeb;               /* Fundo amarelo bem claro */
}

/* Nome do jogador dentro do item */
.player-name {
  flex: 1;
  /* Ocupa todo o espaço disponível (empurra os botões para a direita) */
  font-size: var(--font-base);       /* 16px */
  font-weight: 500;
  overflow: hidden;                  /* Esconde texto que ultrapassa a área */
  text-overflow: ellipsis;           /* Adiciona "..." quando o nome é muito longo */
  white-space: nowrap;               /* Não quebra o nome em duas linhas */
  display: flex;
  align-items: center;
  gap: var(--space-xs);              /* 4px entre o badge de líder e o nome */
}

/* Badge "👑 Líder" exibido ao lado do nome quando o jogador é líder */
.leader-badge {
  font-size: var(--font-xs);         /* 12px */
  background: var(--color-yellow);
  color: #5a4000;                    /* Marrom escuro — bom contraste sobre amarelo */
  padding: 2px var(--space-sm);      /* Espaço interno mínimo */
  border-radius: var(--radius-pill); /* Formato pílula */
  font-weight: 700;
  white-space: nowrap;               /* Não quebra o badge em duas linhas */
  flex-shrink: 0;                    /* Não encolhe o badge */
}

/* Container dos botões de ação (👑 e 🗑️) */
.player-actions {
  display: flex;
  gap: var(--space-xs);              /* 4px entre os dois botões */
  flex-shrink: 0;                    /* Impede que os botões encolham */
}

/* Botões de ação individuais (👑 Líder e 🗑️ Remover) */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  /* 38px: tamanho mínimo recomendado para alvos de toque em mobile (WCAG) */
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);   /* 8px */
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color var(--transition), transform var(--transition),
              border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  line-height: 1;
}
.btn-action:active {
  transform: scale(0.88);            /* Feedback tátil ao pressionar */
}

/* Botão 👑: tornar líder (estado normal — jogador ainda não é líder) */
.btn-leader {
  color: #b8860b;                    /* Dourado escuro */
  background: #fef9e7;               /* Amarelo muito claro */
  border-color: var(--color-yellow);
}
.btn-leader:hover {
  background: #fef3cd;
}

/* Botão 👑: estado ativo — jogador JÁ é líder (toggle ativo) */
.btn-leader.active {
  background: var(--color-yellow);   /* Amarelo sólido quando ativo */
  color: #5a4000;                    /* Marrom escuro — contraste */
  border-color: var(--color-yellow-dark);
}
.btn-leader.active:hover {
  background: var(--color-yellow-dark);
  color: var(--color-white);
}

/* Botão 🗑️: remover jogador */
.btn-remove {
  color: var(--color-danger);
  background: #fdecea;               /* Vermelho muito claro */
  border-color: #f5b8b8;
}
.btn-remove:hover {
  background: #fbc5c5;
}

/* Mensagem exibida quando a lista está vazia */
.empty-list-msg {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-sm);         /* 14px */
  padding: var(--space-lg) 0;        /* Espaço vertical para não ficar apertado */
  font-style: italic;
  list-style: none;                  /* Remove o bullet do <li> */
}


/* ================================================================
   SEÇÃO DE SORTEIO (centralizada)
   ================================================================ */
.section-sort {
  text-align: center;                /* Centraliza botão e mensagem de erro */
}


/* ================================================================
   SEÇÃO DE ANIMAÇÃO DE EMBARALHAMENTO
   ================================================================ */
.section-shuffle {
  text-align: center;
  padding: var(--space-xl);
}

/* Título "🔀 Embaralhando..." que pulsa */
.shuffle-title {
  font-size: var(--font-2xl);        /* 24px */
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: var(--space-md);
  animation: pulse 0.6s ease-in-out infinite;
  /* Pulsa continuamente enquanto a animação está ativa */
}

/* @keyframes pulse: oscila a opacidade entre 100% e 30% */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }   /* Na metade do ciclo, fica semitransparente */
}

/* Container dos nomes em rotação rápida */
.shuffle-names {
  font-size: var(--font-xl);         /* 20px */
  color: var(--color-text-muted);
  min-height: 32px;
  /* Reserva espaço para não causar salto de layout enquanto os nomes mudam */
  margin-bottom: var(--space-md);
  font-weight: 500;
  animation: flickerNames 0.15s steps(1) infinite;
  /* steps(1): animação em degrau sem suavização — cria efeito de "pisca brusco"
     Simula os nomes sendo trocados rapidamente uma vez por quadro */
}

/* @keyframes flickerNames: alterna entre visível e invisível abruptamente */
@keyframes flickerNames {
  0%,  49% { opacity: 1; }  /* Visível na primeira metade do ciclo */
  50%, 100% { opacity: 0; } /* Invisível na segunda metade — efeito de "pisca" */
}

/* Emoji 🏐 com animação de quique */
.shuffle-ball {
  font-size: 3rem;                   /* 48px */
  display: inline-block;
  /* inline-block permite aplicar transform (block não funciona com display:inline) */
  animation: bounceBall 0.7s ease-in-out infinite;
}

/* @keyframes bounceBall: sobe, gira e desce */
@keyframes bounceBall {
  0%, 100% {
    transform: translateY(0) rotate(0deg);    /* Posição base: no chão, sem rotação */
  }
  50% {
    transform: translateY(-22px) rotate(180deg);
    /* No pico: 22px acima e girado 180 graus */
  }
}


/* ================================================================
   SEÇÃO DE RESULTADOS
   ================================================================ */
.results-title {
  text-align: center;
  font-size: var(--font-2xl);        /* 24px */
  margin-bottom: var(--space-lg);    /* 24px abaixo */
  color: var(--color-blue);
}

/* Container flexível dos cards dos times */
.teams-container {
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap: quebra para a próxima linha se não couberem lado a lado */
  gap: var(--space-md);              /* 16px entre os cards */
  margin-bottom: var(--space-lg);
}

/* Card individual de cada time */
.team-card {
  flex: 1 1 100%;
  /* Mobile: cada card ocupa 100% da largura — empilha verticalmente.
     flex-basis: 100% garante que nunca fiquem lado a lado em telas pequenas.
     No desktop (media query abaixo) o flex-basis é reduzido para permitir lado a lado. */
  border-radius: var(--radius-lg);   /* 16px */
  padding: var(--space-lg);          /* 24px */
  color: var(--color-white);         /* Texto branco sobre fundo colorido */
  box-shadow: var(--shadow-md);
  position: relative;
  /* position: relative — necessário para o ::before pseudo-elemento */
  overflow: visible;
  /* visible: permite que o conteúdo (lista de membros) cresça livremente.
     O ::before usa position:absolute com valores negativos para o efeito decorativo
     sem precisar de overflow:hidden — o clip acontece naturalmente pelo border-radius. */
  animation: cardAppear 0.35s ease both;
}

/* Decoração circular no canto superior direito do card */
.team-card::before {
  content: '';                       /* Pseudo-elemento sem texto */
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;                /* Círculo perfeito */
  background: rgba(255, 255, 255, 0.12);
  /* Branco com 12% de opacidade — detalhe visual sutil */
}

/* @keyframes cardAppear: card entra com fade e leve deslize de baixo para cima */
@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cabeçalho do card: nome do líder + linha divisória */
.team-card-header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  /* Linha divisória semitransparente entre líder e membros */
}

/* Nome do líder em destaque (👑 + nome) */
.team-leader-name {
  font-size: var(--font-lg);         /* 18px */
  font-weight: 800;                  /* Extra-bold — destaque máximo */
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  word-break: break-word;            /* Quebra nomes muito longos */
}

/* Label "Capitão do time" abaixo do nome */
.team-leader-label {
  font-size: var(--font-xs);         /* 12px */
  opacity: 0.8;
  margin-top: 3px;
  font-weight: 500;
}

/* Lista de membros dentro do card */
.team-members-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;                          /* Espaço mínimo entre os nomes */
  margin-top: var(--space-sm);
}

/* Cada membro do time */
.team-member-item {
  font-size: var(--font-base);       /* 16px */
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 0;
  word-break: break-word;
}
.team-member-item::before {
  content: '▸';                      /* Seta pequena antes do nome */
  opacity: 0.55;
  flex-shrink: 0;
}

/* Aviso sutil no card: time com apenas 1 membro */
.team-warning {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  background: rgba(255, 255, 255, 0.2); /* Fundo branco semitransparente */
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-xs);         /* 12px — aviso sutil, não gritante */
  font-weight: 600;
}


/* ================================================================
   SEÇÃO DE JOGADORES SOBRANDO
   Exibida quando o número de não-líderes não é divisível pelo de líderes
   ================================================================ */
.leftover-section {
  background: #fff8e1;               /* Amarelo muito claro — alerta suave */
  border: 2px solid var(--color-yellow);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.leftover-title {
  font-size: var(--font-lg);         /* 18px */
  font-weight: 700;
  color: #6d4c00;                    /* Marrom escuro — contraste sobre amarelo */
  margin-bottom: var(--space-xs);
}

.leftover-subtitle {
  font-size: var(--font-sm);         /* 14px */
  color: #7a5500;
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.leftover-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;                   /* Quebra linha se tiver muitos jogadores */
  gap: var(--space-sm);
}

/* Badge de cada jogador sobrando */
.leftover-item {
  background: var(--color-yellow);
  color: #5a4000;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--font-sm);
}


/* ================================================================
   BOTÕES DE AÇÃO PÓS-SORTEIO (Refazer e Limpar)
   ================================================================ */
.results-actions {
  display: flex;
  flex-direction: column;
  /* Mobile: botões empilhados verticalmente — cada um ocupa a largura total */
  gap: var(--space-sm);              /* 8px entre os botões no mobile */
  margin-top: var(--space-lg);
}

.results-actions .btn {
  width: 100%;
  /* Mobile: botão ocupa toda a largura — fácil de tocar com o polegar */
  padding: var(--space-md) var(--space-lg); /* Área de toque generosa */
  justify-content: center;
}


/* ================================================================
   RODAPÉ
   ================================================================ */
.app-footer {
  text-align: center;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  /* cima: 16px | lados: 16px | baixo: 24px — sem espaço excessivo */
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}


/* ================================================================
   UTILITÁRIO: HIDDEN
   Esconde elementos do DOM mantendo-os na árvore HTML.
   O JS adiciona/remove esta classe para mostrar/esconder seções.
   ================================================================ */
.hidden {
  display: none !important;
  /* !important garante que esta classe vença conflitos com outras regras de display */
}


/* ================================================================
   RESPONSIVIDADE: DESKTOP (telas com 600px ou mais)
   Abordagem mobile-first: o CSS base acima é para mobile.
   Aqui apenas ajustamos o que precisa mudar em telas maiores.
   ================================================================ */
@media (min-width: 600px) {
  /* A partir de 600px (tablets e desktops):
     Aumentamos espaçamentos, fontes e permitimos layouts lado a lado */

  .app-header {
    padding: var(--space-lg) var(--space-xl);
    /* Mais espaço interno no header */
  }

  .app-title {
    font-size: var(--font-3xl);      /* 30px — título maior */
  }

  .app-subtitle {
    font-size: var(--font-base);     /* 16px */
  }

  .app-main {
    padding: var(--space-lg);        /* 24px nas bordas */
    gap: var(--space-md);            /* 16px entre seções */
  }

  .section-card {
    border-radius: var(--radius-lg); /* 16px — mais arredondado no desktop */
    padding: var(--space-lg);        /* 24px de espaço interno */
  }

  /* Input-group: volta ao layout lado a lado no desktop */
  .input-group {
    flex-direction: row;             /* Input e botão na mesma linha */
    align-items: stretch;            /* Botão fica com a mesma altura que o input */
  }

  .input-group .btn-primary {
    width: auto;                     /* Botão volta ao tamanho do conteúdo */
    font-size: var(--font-base);     /* Tamanho normal no desktop */
    padding: var(--space-sm) var(--space-md); /* Padding padrão de botão */
  }

  .input-name {
    font-size: var(--font-xl);       /* Input maior no desktop */
  }

  .btn-sort {
    font-size: var(--font-2xl);      /* Botão de sortear maior */
    padding: var(--space-lg) var(--space-2xl);
  }

  .team-card {
    flex: 1 1 240px;
    /* Desktop: volta ao layout flexível lado a lado.
       flex-basis: 240px — dois cards cabem em uma linha de ~500px+ */
  }

  .shuffle-title {
    font-size: var(--font-3xl);
  }

  /* Botões pós-sorteio: lado a lado no desktop */
  .results-actions {
    flex-direction: row;             /* Lado a lado */
    justify-content: center;
    gap: var(--space-md);            /* 16px entre os botões */
  }

  .results-actions .btn {
    width: auto;                     /* Volta ao tamanho natural do conteúdo */
    min-width: 160px;                /* Largura mínima para boa proporção */
  }

}