/* === TEMA AMARELO/PRETO (BDT) === */
:root{
  /* Cores Base (Preto) */
  --bg:#0B0D0A;
  --panel:#1a1a1a;
  --panel-2:#111111;
  --border-color: #333333;
  --shadow:rgba(0,0,0,.4);
  
  /* Cores de Destaque (Amarelo) */
  --acc:  #E1C20A;   /* Amarelo principal */
  --acc-dark: #b49b09; /* Amarelo mais escuro para gradientes/hover */
  --acc-text: #0B0D0A; /* Texto para usar EM CIMA do amarelo (preto) */
  
  /* Cores de Texto */
  --text-light: #f0f0f0;
  --text-muted: #9e9e9e;
  
  /* Cores de Feedback (Mantidas) */
  --danger:#ef4444;
  --ok:#22c55e;
  
  /* Variáveis do App */
  --pitch:#0d6b3c; /* Gramado */
  --line:#d1f7e5;  /* Linhas do gramado */
  
  --token:#222222;
  --token-txt:#f8fafc;
  --token-free:#aaaaaa;
  --chip:#111111;
  
  /* Variáveis de Layout */
  --radius:14px; 
  --token-size:90px;
}
/* ================================= */

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg),#000);color:var(--text-light);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.app{display:grid;grid-template-rows:auto 1fr;min-height:100%}
header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-color);background:linear-gradient(180deg,var(--panel),var(--bg))}
header h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.3px}
header .badge{font-size:12px;padding:2px 8px;border:1px solid var(--border-color);border-radius:999px;color:var(--text-muted)}

.layout{display:grid;grid-template-columns:4fr 1fr;gap:12px;padding:12px;max-width:2000px;margin:0 auto;width:100%}

/* ===== PITCH ===== */
.pitch-wrap{background:var(--panel);border:1px solid var(--border-color);border-radius:var(--radius);padding:12px;box-shadow:0 10px 30px var(--shadow)}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.left,.right{display:flex;gap:10px;align-items:center}
select,button,input[type="text"]{background:var(--panel-2);border:1px solid var(--border-color);color:var(--text-light);border-radius:10px;padding:8px 10px;font-size:14px}
button{cursor:pointer}
button.primary{background:linear-gradient(180deg,var(--acc),var(--acc-dark));border-color:var(--acc-dark); color: var(--acc-text); font-weight: 600;}
button.ghost{background:var(--panel-2); border-color: var(--border-color);}
button.success{background:linear-gradient(180deg,#16a34a,#166534);border-color:#14532d}
button.warn{background:linear-gradient(180deg,var(--acc),var(--acc-dark));border-color:var(--acc-dark);color:var(--acc-text); font-weight: 600;}

.pitch-area{
  position: relative;
  aspect-ratio: 68/105;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border-color);
  height: min(85vh, 1000px); /* 20% menor */
}
svg.pitch{position:absolute;inset:0;width:100%;height:100%;display:block;background:radial-gradient(120% 80% at 50% 10%,#0b7b3f 0,#0e6f3c 40%,#0f5c34 100%);z-index:1}

/* ===== TOKENS ===== */
.token{position:absolute;width:var(--token-size);height:var(--token-size);border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#222,#111);border:2px solid #444;box-shadow:0 8px 22px rgba(0,0,0,.5);
  user-select:none;touch-action:none;cursor:grab;transform:translate(-50%,-50%);z-index:2}
.token.assigned{background:linear-gradient(180deg,#2a2a2a,#111);border-color:var(--acc);}
/* número do atleta (badge pequeno no canto) */
.token .num{position:absolute;bottom:4px;right:4px;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;
  font-weight:800;color:var(--token-txt);background:rgba(0,0,0,.6);border:1px solid #444;font-size:12px;backdrop-filter:blur(2px)}
.token.free .num{color:var(--token-free)}
.token.nao-confirmado{outline:2px solid #ef4444;outline-offset:1px;box-shadow:0 0 0 3px rgba(239,68,68,.35)}
.token:active{cursor:grabbing}
/* tarja inferior: #ID + apelido */
/* tarja inferior: #ID + apelido */
.token .dot {
  position: absolute;
  bottom: -22px; /* Desci um pouco para não encavalar no círculo maior (era -14px) */
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px; /* Aumentado 100% (era 12px) */
  font-weight: bold; /* Deixei em negrito para destacar no campo */
  color: var(--text-light);
  background: var(--panel);
  border: 1px solid var(--border-color);
  padding: 4px 12px; /* Mais espaço interno para a fonte maior */
  border-radius: 999px;
  max-width: 300px; /* Mais largo para não cortar nomes facilmente */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10; /* Garante que o nome fique por cima de tudo */
}
/* badges de eventos */
.token .badges{position:absolute;top:-10px;right:-10px;display:flex;gap:4px;flex-wrap:wrap;max-width:92px}
.badge-icon{font-size:12px;line-height:1;background:var(--panel);border:1px solid var(--border-color);border-radius:999px;padding:2px 6px;color:var(--text-light);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.badge-icon.dim{opacity:.8}
/* foto de fundo dentro da bolinha */
.token.photo{background-size:cover;background-position:center;background-repeat:no-repeat}

/* menu rápido do token */

/* ===== SIDEBAR ===== */
.side{background:var(--panel);border:1px solid var(--border-color);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px var(--shadow)}
.side h3{margin:0 0 4px 0;font-size:16px}
.search{display:flex;gap:8px}
.player-list{overflow:auto;max-height:calc(100vh - 260px);border:1px solid var(--border-color);border-radius:12px}
.player{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--border-color);background:var(--panel-2)}
.player .ball{min-width:32px;height:32px;border-radius:999px;background:var(--panel);border:1px solid var(--border-color);display:grid;place-items:center;font-weight:800}
.player .avatar-sm{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color)}
.avatar-slot{min-width:32px;display:grid;place-items:center}
.player .meta{display:flex;flex-direction:column}
.player small{color:var(--text-muted)}
.player .actions{margin-left:auto;display:flex;gap:6px}
.chip{font-size:11px;background:var(--panel);color:var(--text-muted);border:1px solid var(--border-color);border-radius:999px;padding:2px 6px}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{padding:8px 10px}
.tabs button[aria-selected="true"]{outline:2px solid var(--acc); color: var(--acc);}

/* ===== MODAL ===== */
dialog{overflow:visible;max-width:760px;width:min(96vw,760px);border:none;border-radius:16px;padding:0;background:var(--panel);color:var(--text-light);box-shadow:0 20px 60px rgba(0,0,0,.65)}
.modal{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:none;overflow:visible}
.row{display:grid;grid-template-columns:1fr 110px;gap:10px 12px;align-items:end}
.row3{display:grid;grid-template-columns:140px 140px 1fr;gap:10px 12px;align-items:end}
.modal label{display:flex;flex-direction:column;gap:4px;font-weight:600}
.modal input,.modal select{padding:6px 8px;font-size:14px;height:34px}
.modal footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
dialog::backdrop{background:rgba(3,10,18,.6)}

/* modal compacto com foto */

.avatar-col{display:flex;flex-direction:column;gap:10px}
.avatar-wrap{width:140px;height:140px;border-radius:999px;background:var(--panel-2);border:2px dashed var(--border-color);display:grid;place-items:center;overflow:hidden;margin:auto}
#avatarPreview{display:none;width:100%;height:100%;object-fit:cover}
#avatarPlaceholder{font-size:64px;color:var(--text-muted)}
.avatar-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.avatar-actions .full{grid-column:1/-1}

.muted{color:var(--text-muted)}
.empty{padding:20px;text-align:center;color:var(--text-muted);border:1px dashed var(--border-color);border-radius:12px}

/* ===== COMPACTO (layout geral) ===== */

@media (max-width:1024px){
  .layout{grid-template-columns:1fr}
  .player-list{max-height:none}
}
:root{ --token-reserve-size: 84px; } /* pode ajustar o tamanho das bolinhas do banco */

.bench-wrap{
  margin-top:10px;background:var(--panel-2);
  border:1px dashed var(--border-color);border-radius:12px;padding:10px
}
.bench-header{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.bench{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* bolinhas de reserva: estáticas e um pouco menores */
.token.reserve{
  position:static; transform:none;
  width:var(--token-reserve-size); height:var(--token-reserve-size)
}
.token.reserve .badges{display:none}     /* sem badges no banco (se quiser, tiro esta linha) */
.token.reserve .dot{bottom:-12px}       /* tarja mais juntinha da bolinha */

/* === [PATCH BDT] Tema e ajustes visuais ================================ */
/* As cores agora estão no :root principal no topo do arquivo */
/* bolinha com foto */
.token{ width:var(--token-size); height:var(--token-size); }
.token.photo{ background-size: cover; background-position:center; }

/* tarjas (#R1 etc.) das reservas sempre embaixo e centralizadas */
.token.reserve{ position: relative; transform:none; }
.token.reserve .dot{
  position:absolute; bottom:-12px; left:50%;
  transform: translateX(-50%);
}

/* badges em órbita (fora da foto) */
.token .badges{
  position:absolute; left:50%; top:50%;
  width:var(--token-size); height:var(--token-size);
  transform: translate(-50%,-50%);
  pointer-events:none;
}
.badge-icon.orbit{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(var(--ang)) translate(var(--rad)) rotate(calc(-1 * var(--ang)));
  font-size:12px; background: rgba(0,0,0,.55); color:#fff;
  border-radius: 999px; padding:2px 6px; display:flex; gap:4px; align-items:center;
  z-index:2; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.badge-icon.orbit .ic{ font-size:13px; line-height:1; }
.badge-icon.orbit small{ font-weight:700; font-size:11px; }
/* ====================================================================== */
\n\n
/* === [PATCH] Órbita mais distante + badges clicáveis ====================== */
.token .badges{ pointer-events: none; z-index: 3; }
.badge-icon.orbit{ pointer-events: auto; }  /* permite clicar para remover 1 */
.badge-icon.orbit{ transform-origin: center; }
/* ======================================================================== */
\n\n
/* garantias de órbita inline (não empilhar) */
/* === [FINAL] Reservas: #R? + nome sempre ABAIXO do círculo === */
#bench .token,
.bench .token{
  position: relative !important;   /* vira o referencial do .dot */
  display: block !important;       /* remove o flex-centering do campo */
  left: auto !important;
  top: auto !important;
  transform: none !important;
  overflow: visible !important;    /* permite a tarja "sair" do círculo */
}

/* garante tarja (#R1 + nome) sempre abaixo da bolinha das reservas */
#bench .token .dot,.bench .token .dot {
  position: absolute !important;
  bottom: -26px !important; /* Mude aqui de -14px para -26px também */
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* O número pequeno do jogador continua dentro da foto, no canto */
#bench .token .num,
.bench .token .num{
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
}

/* === Match panel card (Partida ao lado do campo) === */

/* gridzinho do formulário */

/* uniforme (select + prévia) */

/* garante tarja (#R1 + nome) sempre abaixo da bolinha das reservas */
#bench .token .dot,.bench .token .dot{
  position: absolute !important;
  bottom: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* 20% menor já está aplicado, mantemos para reforço */
.pitch-area{ height: min(85vh, 1000px); }
/* Tamanho menor e responsivo dos previews *//* Tamanho menor e responsivo dos previews */

/* Espaço menor entre os dois escudos */

/* === Escudos (tamanho proporcional + sem sobreposição) === */

/* (opcional) igualar o tamanho da prévia do uniforme */

/* tamanho único para escudos e placar */
:root{ --badge: 72px; } /* ajuste aqui o tamanho global */

/* === [PATCH] Generic card + field-grid used in side panels === */
.card{background:var(--panel);border:1px solid var(--border-color);border-radius:var(--radius);padding:12px;box-shadow:0 10px 30px var(--shadow);}
.card h3{margin:0 0 8px 0;font-size:16px}

/* === [PATCH] travar/destravar UX === */
body.locked .token{cursor:pointer}
body.locked .token:active{cursor:pointer}
/* Garante que o #tokenMenu fique oculto até o JS abrir */
#tokenMenu[hidden] { display: none !important; }
/* Inputs padrão do sistema */
.input{
  background:var(--panel-2);
  border:1px solid var(--border-color);
  color:var(--text-light);
  border-radius:10px;
  padding:8px 10px;
  width:100%;
  box-sizing:border-box;
}
.input:focus{
  outline:0;
  border-color:var(--acc);
  box-shadow:0 0 0 2px rgba(225, 194, 10,.25);
}
select.input{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#888 50%),
    linear-gradient(135deg,#888 50%,transparent 50%),
    linear-gradient(to right,var(--border-color),var(--border-color));
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px),
    calc(100% - 2.5em) .5em;
  background-size:5px 5px,5px 5px,1px 1.6em;
  background-repeat:no-repeat;
}

/* Pílulas de totais */

/* ====== FINANCEIRO — estilo & ícones ====== */

/* header do card */
#panel-financeiro .card header h3{
  letter-spacing:.3px;
}

/* rótulos com ícones (usando :has para mirar o input seguinte) */

/* Ícones por campo */

  /* juiz */

/* inputs numéricos alinhados à direita */
#f_preco,#f_pag,#f_caixa,#f_campo,#f_juiz,#f_outros{
  text-align:right; font-variant-numeric:tabular-nums;
}

/* pílulas dos totais com cores e ícones */

/* Receita (verde) */

/* Despesas (vermelho) */

/* Caixa previsto (Amarelo) */

/* dica/rodapé */
#panel-financeiro .card footer,
#panel-financeiro .hint{ 
  color:var(--text-muted); opacity:.9;
}
/* ===== FINANCEIRO — inputs dark elegantes ===== */
#panel-financeiro .input{
  background: linear-gradient(180deg,var(--panel), var(--panel-2));
  border:1px solid var(--border-color);
  color:var(--text-light);
  height:38px;
  padding:8px 12px;
  border-radius:12px;
  box-sizing:border-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
#panel-financeiro .input:hover{
  border-color:#444;
}
#panel-financeiro .input:focus{
  outline:0;
  border-color:var(--acc);
  box-shadow: 0 0 0 3px rgba(225, 194, 10,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
#panel-financeiro .input::placeholder{
  color:var(--text-muted);
}

/* selects com “setinha” discreta */
#panel-financeiro select.input{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#888 50%),
    linear-gradient(135deg,#888 50%,transparent 50%),
    linear-gradient(to right,var(--border-color),var(--border-color));
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px),
    calc(100% - 2.5em) .55em;
  background-size:5px 5px,5px 5px,1px 1.6em;
  background-repeat:no-repeat;
}

/* números alinhados e sem “spinners” */
#panel-financeiro input[type=number].input{
  text-align:right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
#panel-financeiro input[type=number].input::-webkit-outer-spin-button,
#panel-financeiro input[type=number].input::-webkit-inner-spin-button{
  -webkit-appearance: none; margin:0;
}

/* autofill do Chrome no tema escuro */
#panel-financeiro input.input:-webkit-autofill{
  -webkit-text-fill-color:var(--text-light) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset !important;
  caret-color:var(--text-light);
}

/* estados */
#panel-financeiro .input:disabled{ opacity:.6; cursor:not-allowed; }
#panel-financeiro .input[aria-invalid="true"],
#panel-financeiro .input.is-invalid{
  border-color:var(--danger);
  box-shadow: 0 0 0 2px rgba(239,68,68,.2);
}
/* === SCROLLBAR PERSONALIZADA (Tema Dark/Yellow) === */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #333333 var(--bg);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
  height: 8px; /* Para rolagem horizontal */
}

::-webkit-scrollbar-track {
  background: var(--bg); /* Fundo escuro igual ao site */
}

::-webkit-scrollbar-thumb {
  background-color: #333333; /* Cor da barra em repouso (cinza discreto) */
  border-radius: 99px;       /* Arredondada */
  border: 2px solid var(--bg); /* Borda interna para dar efeito de "flutuante" */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--acc); /* Amarelo ao passar o mouse */
  border-color: var(--bg);
}

::-webkit-scrollbar-corner {
  background: var(--bg);
}
/* === CORREÇÃO: Menu Suspenso (Options) === */
select option {
  background-color: var(--panel-2); /* Garante fundo escuro (#111) */
  color: var(--text-light);         /* Garante texto claro */
  padding: 10px;
}
/* === CRONÔMETRO === */

 /* Cor de ação */

/* === AJUSTES FINAIS DE LAYOUT E UNIFORMIDADE === */

/* 1. Layout Geral (Grid 3 Colunas ajustado) */
.layout {
  display: grid !important;
  grid-template-columns: 620px 360px 1fr !important; /* Campo um pouco mais largo para os reservas caberem com folga */
  gap: 20px;
  align-items: start;
  justify-content: center;
  max-width: 98%;
  margin: 0 auto;
}

/* 2. Campo e Card do Campo */
.pitch-wrap {
  width: 100%;
  max-width: none !important; /* Remove limite para obedecer o grid */
  padding: 12px; /* Padding interno do card */
  display: flex;
  flex-direction: column;
}

.pitch-area{
  position: relative;
  aspect-ratio: 68/105; /* Mantém a proporção do campo */
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border-color);
  height: min(85vh, 1000px);
}

svg.pitch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  /* Aplica a sua imagem como fundo */
  background-image: url('campo.jpg');
  background-size: 100% 100%; /* Estica para preencher o espaço exato */
  background-position: center;
  background-repeat: no-repeat;
}

/* Esconde todas as linhas e círculos brancos gerados pelo código, 
   deixando apenas as linhas da sua imagem campo.jpg aparecerem */
svg.pitch * {
  display: none !important;
}

/* 3. Reservas (Linha única perfeita) */
.bench-wrap {
  width: 100%;
  margin-top: 12px;
  padding: 8px 4px;
}

.bench {
  display: flex !important;
  flex-wrap: nowrap !important; /* PROIBIDO quebrar linha */
  justify-content: space-between !important; /* Distribui os 6 exatamente */
  gap: 0 !important; /* O space-between cuida do espaço */
  width: 100%;
}

/* Garante que as bolinhas reservas não encolham */
.bench .token {
  flex-shrink: 0; 
}

/* 4. UNIFORMIDADE DOS BOTÕES (Toolbar) */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar .left,.toolbar .right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* FORÇA ALTURA PADRÃO PARA TUDO NA BARRA SUPERIOR */
.toolbar select,
.toolbar button,
.toolbar input {
  height: 40px !important; /* Altura fixa para todos */
  min-height: 40px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

/* Ajuste específico para o Cronômetro ficar bonito na altura de 40px */

/* 5. Card de Partida (Lateral) */

/* Responsividade */
@media (max-width: 1400px) {
  .layout {
    grid-template-columns: 1fr !important;
    max-width: 700px;
  }
  .pitch-wrap,.side {
    width: 100% !important;
    order: unset !important;
  }
  /* No mobile, permite que os botões quebrem linha se necessário */
  .toolbar .left,.toolbar .right {
    width: 100%;
    justify-content: center;
  }
}
/* === CONTROLES DENTRO DO CAMPO === */

/* Container flutuante no topo do campo */
.pitch-overlay-top {
  position: absolute;
  top: 12px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10; /* Fica acima da grama e abaixo das bolinhas */
  pointer-events: none; /* Deixa clicar através do espaço vazio */
}

/* Estilo "Painel de Vidro" para os botões não ficarem soltos */
.glass-panel {
  pointer-events: auto; /* Reativa o clique nos botões */
  background: rgba(0, 0, 0, 0.65); /* Fundo semi-transparente escuro */
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 99px; /* Bem arredondado */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  height: 36px !important; /* Altura compacta */
  min-height: 0 !important;
  display: flex;
  align-items: center;
  color: #fff;
}

/* Ajustes finos nos filhos */
select.glass-panel {
  color: #fff;
  padding-left: 12px;
  border-radius: 12px; /* Select precisa ser menos redondo às vezes */
}

/* 1. Garante que o container do Timer use o estilo Vidro */

/* 2. Remove qualquer estilo antigo que esteja conflitando */

/* 3. Ajuste fino nos botões internos para ficarem harmoniosos */

/* Botões de ação (Play/Pause) com cor de destaque */

/* 4. Display do tempo */

/* === AUMENTAR TAMANHO: Formação e Cronômetro === */

/* 1. Aumenta a barra de vidro geral */
.glass-panel {
  height: 48px !important;      /* Aumentado de 36px para 48px */
  font-size: 15px !important;   /* Texto maior */
  border-radius: 14px !important;
}

/* 2. Aumenta o Select de Formação */
select#formation.glass-panel {
  padding-left: 16px;
  min-width: 180px; /* Mais largo para ler nomes longos */
}
select#formation option {
  font-size: 14px;  /* Opções legíveis */
  padding: 8px;
}

/* 3. Aumenta o Cronômetro */

/* Números do relógio bem grandes */

/* Botões de controle do timer (Play/Pause) */

/* === NOVO: MODO DESENHO & MVP === */

/* Quando o modo desenho está ativo */
.drawing-mode #tacticalBoard {
  pointer-events: auto !important; /* Permite desenhar */
  cursor: crosshair;
  background: rgba(0,0,0,0.2); /* Escurece levemente */
}

/* Botão de desenhar ativo */
#btnDrawToggle.active {
  background: var(--acc) !important;
  border-color: var(--acc) !important;
  color: #000 !important;
}

/* Destaque do Craque no Card da Partida */
.mvp-row {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), transparent);
  border-left: 3px solid gold;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: 4px;
}
/* === FERRAMENTAS DE DESENHO === */

/* Posiciona a barra no rodapé do campo */
.pitch-overlay-bottom {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 50;
  pointer-events: none; /* Deixa clicar no campo nas laterais */
}

.tools-panel {
  pointer-events: auto;
  padding: 4px 8px !important;
  gap: 6px !important;
  height: 42px !important;
  background: rgba(0,0,0,0.85) !important; /* Mais escuro para destacar */
}

.tool-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #aaa;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.tool-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Ferramenta Ativa */
.tool-btn.active {
  background: var(--acc);
  color: #000;
  box-shadow: 0 0 8px var(--acc);
}

.tools-panel .sep {
  width: 1px;
  height: 20px;
  background: #444;
  margin: 0 4px;
}

/* Ícone customizado para linha tracejada */
button[data-tool="move"] { font-size: 0; } /* Esconde texto */
button[data-tool="move"]::after {
  content: "";
  width: 16px; height: 2px;
  background: linear-gradient(to right, currentColor 50%, transparent 50%);
  background-size: 6px 100%;
}
/* === CONTROLE DE VISIBILIDADE DO RABISCO === */

/* Por padrão, o rabisco fica invisível (mas salvo na memória) */
#tacticalBoard {
  opacity: 0; 
  transition: opacity 0.3s ease; /* Efeito suave ao aparecer/sumir */
}

/* Quando ativa o modo desenho, o rabisco aparece */
body.drawing-mode #tacticalBoard {
  opacity: 1;
}
/* === AJUSTES DE LARGURA E COMPACTAÇÃO === */

/* Aumenta a coluna do Card para 400px, dando mais espaço */
.layout {
    grid-template-columns: 600px 420px 1fr !important; /* 420px para o Card Partida */
    gap: 20px !important;
}

/* Reduz o espaçamento geral e o espaço entre o texto da label e o campo */

/* 1. Alinhamento Horizontal (Título na esquerda, Campo na direita) */

/* 2. CONTROLE DOS INPUTS/SELECTS (Garante que fiquem na extrema direita) */

/* 3. AJUSTE DO UNIFORME (wrapper de Select + Imagem) */

/* 4. MANTENDO O TAMANHO DO UNIFORME (80px) */

/* 1. LAYOUT PRINCIPAL E POSICIONAMENTO DO CORPO DO CARD */
#cardBody {
    width: 350px;
    height: 550px;
    border-radius: 15px;
    overflow: hidden;
    position: relative; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background-color: transparent; 
    /* CORREÇÃO DA FAIXA PRETA: Remove todo o padding e margin interno */
    padding: 0 !important; 
    margin: 0 !important; 
}

/* 2. IMAGEM DE FUNDO DO CARD (#cardBg) */
#cardBg {
    position: absolute;
    top: 0; /* Começa exatamente no topo */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ⭐️ 3. CONTAINER DO TOPO (#cardHeaderInfo - MANCHA VERMELHA e LOGO) ⭐️ */
#cardHeaderInfo {
    position: absolute;
    top: 5px; 
    left: 0;
    width: 100%;
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    padding: 0 10px; 
    z-index: 60; 
}

/* Logo Central */
img.top-logo { 
    width: 70px; 
    height: 70px;
    object-fit: contain;
}

/* CONTAINER OVR/POSIÇÃO */
#ovr-pos-group {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    margin-right: auto; 
    margin-left: 10px; 
}
#cardOvr { font-size: 36px; font-weight: 900; line-height: 1; }
#cardPos { font-size: 18px; font-weight: 600; margin-top: -5px; line-height: 1; }

/* Escudo Azul */
.shield-icon {
    width: 30px; 
    height: 30px;
    object-fit: contain;
}

/* ⭐️ 4. NOME DO JOGADOR (#cardName) ⭐️ */
#cardName {
    position: absolute;
    top: 85px; 
    left: 50%;
    transform: translateX(-50%); 
    font-size: 26px; 
    font-weight: 700;
    z-index: 50; 
}

/* ⭐️ 5. CONTAINER DE FOTO E TOKENS (#photoAndTokens - MANCHA AZUL/AMARELA) ⭐️ */
#photoAndTokens {
    position: absolute;
    top: 130px; /* Posição da Foto e Tokens */
    left: 50%;
    transform: translateX(-50%);
    width: 90%; 
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    z-index: 10;
}

/* Foto do Jogador (Ajustes de tamanho) */
#photoContainer { width: 65%; max-height: 220px; overflow: hidden; }
#cardPhoto { width: 100%; height: auto; object-fit: contain; display: block; }

/* Detalhes dos Tokens (GOL, ASS, etc.) */
#tokenDetails { width: 30%; display: flex; flex-direction: column; gap: 5px; padding-top: 5px; }
.token-detail-item { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 600; }
.token-value { font-size: 20px; font-weight: 900; color: var(--card-text-color) !important; }

/* ⭐️ 6. FAIXA DO PLACAR/EMBLEMAS (.header-info - MANCHA VERDE) ⭐️ */
.header-info {
    position: absolute;
    top: 380px; /* POSIÇÃO CHAVE: Abaixo da Foto/Tokens */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--card-shadow-color) !important; 
    z-index: 25;
}

/* ⭐️ 7. BLOCO DO RODAPÉ (#gameBlock - MANCHA ROXA) ⭐️ */
#gameBlock {
    position: absolute;
    /* Posição CHAVE: top: 380px + altura do header-info (aprox 50px) */
    top: 430px; 
    left: 0;
    width: 100%;
    padding: 10px 0; 
    z-index: 20;
    border-top: 2px solid var(--acc);
    background-color: var(--card-shadow-color) !important; 
    height: 120px; /* Altura definida para o bloco roxo */
}

/* REGRAS DE CONTRASTE (Manter Legibilidade) */
:root {
  --card-text-color: #FACC15;
  --card-shadow-color: #000000;
}

/* Define a cor padrão para o amarelo e aplica a sombra preta em todo o texto do card */
#cardTemplate,
#cardTemplate * {
    color: var(--card-text-color) !important; 
    text-shadow: -1px -1px 0 var(--card-shadow-color),  
                 1px -1px 0 var(--card-shadow-color),
                 -1px 1px 0 var(--card-shadow-color),
                 1px 1px 0 var(--card-shadow-color) !important;
}

/* REGRAS DE ALINHAMENTO DO BLOCO DE DETALHES (DATA até JUIZ) */
#matchDetailsGrid {
    width: 90% !important; 
    margin: 10px auto 0 auto !important; 
    justify-content: center !important; 
    justify-items: center !important;
    align-content: flex-start !important;
}

/* ==========================================================================
   RANKING (TEMPORADA) — visual premium BDT (cards, podium, animações)
   ========================================================================== */
.rank-wrap{display:flex;flex-direction:column;gap:14px}
.rank-summary{display:flex;flex-wrap:wrap;gap:10px}
.rank-pill{
  display:flex;gap:10px;align-items:center;
  padding:8px 10px;border-radius:999px;
  background:linear-gradient(180deg, rgba(225,194,10,.14), rgba(225,194,10,.06));
  border:1px solid rgba(225,194,10,.25);
}
.rank-pill-ico{font-size:16px}
.rank-pill-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);line-height:1}
.rank-pill-val{font-size:12px;font-weight:800;color:var(--text-light);line-height:1.2;margin-top:2px}

.rank-podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:end}
.rank-podium-card{
  position:relative;overflow:hidden;
  background:var(--panel-2);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:0 10px 30px var(--shadow);
  animation:rankPop .6s ease both;
}
.rank-podium-card::before{
  content:"";position:absolute;inset:-20px;
  background:radial-gradient(600px 200px at 30% 0%, rgba(225,194,10,.18), transparent 60%);
  pointer-events:none;
}
.rank-podium-card.pos1{
  border-color:rgba(225,194,10,.65);
  transform:translateY(-8px);
}
.rank-podium-top{display:flex;gap:10px;align-items:flex-start;position:relative;z-index:1}
.rank-medal{font-size:22px;line-height:1}
.rank-name{font-size:13px;font-weight:900}
.rank-no{font-size:11px;color:var(--text-muted);margin-top:4px}
.rank-points-big{
  position:relative;z-index:1;
  margin-top:8px;
  font-size:26px;font-weight:1000;letter-spacing:-.02em;
  color:var(--acc);line-height:1;
}
.rank-mini{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rank-mini span{
  font-size:11px;
  padding:4px 8px;border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid var(--border-color);
}

.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-row{
  position:relative;overflow:hidden;
  background:var(--panel-2);
  border:1px solid var(--border-color);
  border-radius:14px;
  padding:10px 10px 12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  animation:rankIn .45s ease both;
  will-change:transform,opacity;
}
.rank-row::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(225,194,10,.10), transparent 45%);
  opacity:0;transition:.2s;
}
.rank-row:hover{transform:translateY(-1px);border-color:rgba(225,194,10,.45)}
.rank-row:hover::before{opacity:1}

.rank-left{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.rank-topline{display:flex;align-items:center;gap:10px}
.rank-pos{
  width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  font-weight:1000;
  background:rgba(225,194,10,.12);
  border:1px solid rgba(225,194,10,.25);
  color:var(--acc);
}
.rank-player strong{font-size:13px;font-weight:900}
.rank-player small{font-size:11px;color:var(--text-muted)}
.rank-stats{display:flex;gap:8px;flex-wrap:wrap}
.rank-stat{
  font-size:11px;
  padding:3px 8px;border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid var(--border-color);
  display:flex;gap:6px;align-items:center;
}
.rank-stat b{font-weight:900}

.rank-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;position:relative;z-index:1}
.rank-pts{display:flex;gap:6px;align-items:baseline}
.rank-pts strong{font-size:18px;font-weight:1000;color:var(--acc);line-height:1}
.rank-pts span{font-size:11px;color:var(--text-muted)}
.rank-bar{
  width:150px;height:8px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border-color);
  overflow:hidden;
}
.rank-bar i{
  display:block;height:100%;
  width:var(--w, 0%);
  background:linear-gradient(90deg, var(--acc), rgba(225,194,10,.35));
  border-radius:999px;
  animation:rankFill .8s ease both;
}

@keyframes rankIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes rankPop{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes rankFill{
  from{width:0%}
  to{width:var(--w, 0%)}
}

@media (max-width: 520px){
  .rank-podium{grid-template-columns:1fr}
  .rank-row{grid-template-columns:1fr}
  .rank-right{align-items:flex-start}
  .rank-bar{width:100%}
}

/* ========================================================================
   PATCH 2026-01-13 V3 — editor inline no histórico (Partidas)
   ======================================================================== */
label.mini{
  font-size: 12px;
  color: var(--muted);
  display:flex;
  flex-direction:column;
  gap:4px;
}

.rank-avatar{
  width:60px;
  height:60px;
  border-radius:999px;
  background:rgba(255,255,255,.08) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.16);
  flex:0 0 auto;
}
.rank-avatar.fallback{
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:11px;
  color:var(--text-light);
  background:rgba(225,194,10,.12);
  border-color:rgba(225,194,10,.25);
}

/* === PATCH V3: CORES DO TEMA BDT NO MODAL (PRETO E AMARELO) === */

/* Título em Amarelo de Destaque */

/* Força todas as caixas de texto e seletores a ficarem escuras */

/* Quando você clica para digitar, a caixinha acende em amarelo */

/* Transforma os botões secundários (Galeria, Câmera, Cancelar) em Dark */

/* Ao passar o mouse nos botões secundários, eles ganham borda amarela */

/* Botão de Remover Foto (Mantendo o tom de aviso sutil no escuro) */

/* O GRANDE DESTAQUE: Botão Salvar totalmente AMARELO com texto PRETO */

/* Ajuste das fontes das labels para leitura perfeita no fundo escuro */

/* === PATCH: SEPARAÇÃO DE POSIÇÕES E PRESENÇA === */

/* Deixa o jogador apagado se estiver ausente */
.player.ausente {
  opacity: 0.28;
  filter: grayscale(100%) brightness(0.7);
  background: var(--bg) !important;
}

/* Estilo do Toggle (Chavinha de ligar/desligar) */
.toggle-presenca {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}
.toggle-presenca input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-presenca .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #333;
  transition: .3s;
  border-radius: 20px;
  border: 1px solid #555;
}
.toggle-presenca .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: .3s;
  border-radius: 50%;
}
.toggle-presenca input:checked + .slider {
  background-color: var(--ok); /* Verde quando presente */
  border-color: #166534;
}
.toggle-presenca input:checked + .slider:before {
  transform: translateX(16px);
  background-color: white;
}

/* Ajuste para alinhar os botões na barra de busca */
.search {
  display: flex;
  gap: 8px !important;
  align-items: center;
  margin-bottom: 10px;
}

#btnZerar,#addPlayerBtn {
  white-space: nowrap; /* Impede que o texto do botão quebre em duas linhas */
  height: 42px;        /* Mesma altura do input */
}

/* Card Container */
#cardBody {
    width: 350px;
    height: 550px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2a2a2a 0%, #111111 100%);
    border: 5px solid #d4af37; /* Borda Dourada */
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
    position: relative;
    overflow: hidden;
}

/* O "FIFA Look" - Detalhes internos */
#cardBody::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Stats Grid Estilizado */
#statsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    margin-top: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #fff;
    padding: 5px 0;
}

.stat-value {
    color: #d4af37;
    font-weight: 800;
}

/* Container do Financeiro Compacto */

/* Pílulas de Totais */

/* =========================================
   PÓDIO COM IMAGEM DE FUNDO (ALINHAMENTO ABSOLUTO)
   ========================================= */

.podium-arena {
    position: relative;
    background: url('podium.png') no-repeat center bottom;
    background-size: contain;
    width: 100%;
    aspect-ratio: 23 / 9;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid #333;
    overflow: visible; /* fotos podem sair pra cima da arena */
}

/* -------------------------------------------------------
   CADA .podium-col É UM PONTO FIXO NO CAMPO (só foto+texto+stats)
   A foto fica DENTRO da medalha via position absolute própria.
   ------------------------------------------------------- */

/* Container de cada jogador — âncora absoluta na arena */
.podium-col {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28%;
    transform: translateX(-50%);
}

/* ---- POSIÇÕES HORIZONTAIS (left) e do TEXTO/STATS (bottom) ---- */
.podium-2 { left: 17%;   bottom: 8%; }
.podium-1 { left: 50%;   bottom: 8%; }
.podium-3 { left: 83%;   bottom: 8%; }

/* --- Âncoras das fotos: filhas diretas da arena, posição absoluta ---
   top  = distância do topo da arena (% da altura da arena)
   left = mesma do podium-col correspondente
   Ajuste "top" para subir/descer a foto sobre a medalha:
     menor = sobe / maior = desce                                     */
.podium-photo-anchor {
    position: absolute !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 10 !important;
}
.podium-photo-1 { left: 50.75%  !important;  top: 10.75%  !important; }
.podium-photo-2 { left: 19.75%  !important;  top: 23.75% !important; }
.podium-photo-3 { left: 81.75%  !important;  top: 23.75% !important; }

.podium-medal-photo {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Tamanho da foto circular — escala com a viewport */
.podium-photo {
    width:  clamp(36px, 6vw, 76px);
    height: clamp(36px, 6vw, 76px);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.podium-photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #ebd576;
    font-weight: 900;
    font-size: clamp(10px, 1.6vw, 24px);
}

/* --- Nome e pontos (ficam na parte inferior da coluna) --- */
.podium-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    margin-bottom: 4px;
}

.podium-name {
    font-size: clamp(8px, 1.4vw, 50px);
    font-weight: 800;
    color: #fff;
    text-shadow: 1px 1px 4px #000;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.podium-pts {
    font-size: clamp(7px, 1.1vw, 13px);
    font-weight: 900;
    color: #ebd576;
    text-shadow: 1px 1px 3px #000;
}
.podium-pts span {
    font-size: 0.8em;
    font-weight: 400;
    color: #ccc;
}

/* --- Stats encaixam nas barras cinzas (parte inferior) --- */
.podium-stats-mini {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 20px);
    width: 100%;
}

.podium-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: clamp(7px, 1vw, 12px);
    color: #fff;
    line-height: 1.1;
    gap: 1px;
}

.podium-stat b {
    font-size: clamp(9px, 1.3vw, 17px);
    font-weight: 900;
    color: #fff;
}

.pstat-g b { color: #ebd576; }
.pstat-a b { color: #60a5fa; }

/* Lista Moderna */
.rank-list-modern {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modern-row {
    display: flex;
    align-items: center;
    background: #1e1e1e;
    padding: 12px 15px;
    border-radius: 10px;
    border-left: 4px solid #444;
}

/* Destaque do MVP na Lista */
.modern-row.mvp {
    border-left: 4px solid #ebd576;
    background: linear-gradient(to right, rgba(235, 213, 118, 0.1), #1e1e1e);
}

.modern-pos { width: 30px; font-weight: bold; color: #888; font-size: 16px; }
.modern-row.mvp .modern-pos { font-size: 20px; }

.modern-player {
    flex: 1;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
}

.modern-name { font-weight: bold; font-size: 15px; color: #fff; }
.modern-row.mvp .modern-name { color: #ebd576; }

.modern-stats { display: flex; gap: 15px; margin-top: 4px; }
.modern-stat { font-size: 12px; color: #aaa; }
.modern-stat b { color: #fff; font-size: 13px; margin-left: 3px;}
.modern-stat-g b { color: #ebd576; }
.modern-stat-a b { color: #3b82f6; }

.modern-pts { font-size: 18px; font-weight: bold; color: #fff; text-align: right; }
.modern-pts span { font-size: 12px; color: #888; font-weight: normal; }

/* posições do pódio definidas acima no bloco principal */

/* =========================================
   ADAPTAÇÃO DO MENU PARA CELULAR (BOTTOM BAR)
   ========================================= */

@media (max-width: 768px) {
  .tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    background: rgba(10,10,10,0.97);
    border-top: 1px solid rgba(225,194,10,0.2);
    z-index: 9999;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    padding: 4px 0 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs button {
    flex: 1;
    min-width: 70px;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    padding: 6px 4px;
    color: #666;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
  }

  .tabs button[aria-selected="true"] {
    color: var(--acc) !important;
    border-top: 2px solid var(--acc) !important;
    background: rgba(225,194,10,0.06) !important;
  }

  .tabs button:hover {
    color: #aaa;
    background: rgba(255,255,255,0.04);
  }

  body,.side {
    padding-bottom: 70px !important;
  }
}

.podium-1 .podium-name { position: relative; top: -35px;  left: 0px; }
.podium-2 .podium-name { position: relative; top: -18px;  left: 10px; }
.podium-3 .podium-name { position: relative; top: -17px;  left: -7px; }

.podium-1 .podium-pts { position: relative; top: -35px;  left: 0px; }
.podium-2 .podium-pts { position: relative; top: -15px;  left: 10px; }
.podium-3 .podium-pts { position: relative; top: -13px;  left: -10px; }

.podium-1 .podium-stats-mini { position: relative; top: 3px;  left: 0px; }
.podium-2 .podium-stats-mini { position: relative; top: 4px;  left: 13px; }
.podium-3 .podium-stats-mini { position: relative; top: 10px;  left: -3px; }
/* ================================================================
   RESPONSIVO GLOBAL — MOBILE FIRST
   Cobre portrait e landscape em qualquer celular
   ================================================================ */
@media (max-width: 768px) {

  /* === RAIZ: nada transborda lateralmente === */
  html,body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Remove elemento que causa overflow horizontal */
  #cardTemplate {
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
  }

  /* === APP CONTAINER === */
  .app {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* === HEADER === */
  header {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  header h1 { font-size: 16px !important; }

  /* === LAYOUT PRINCIPAL === */
  .layout {
    display: block !important;
    padding: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .side {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    border-left: none !important;
    padding-bottom: 80px !important;
  }

  /* === ABAS (TABS) === */
  .tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .tabs::-webkit-scrollbar { display: none !important; }
  .tabs button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* === ELENCO — LISTA DE JOGADORES === */
  .player-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .player {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    transition: background 0.15s ease !important;
  }

  .player:hover {
    background: rgba(225,194,10,0.04) !important;
  }

  /* Toggle de presença menor */
  .toggle-presenca {
    width: 28px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    margin-right: 2px !important;
  }
  .toggle-presenca .slider:before {
    height: 10px !important;
    width: 10px !important;
  }
  .toggle-presenca input:checked + .slider:before {
    transform: translateX(12px) !important;
  }

  /* Avatar */
  .avatar-slot {
    flex-shrink: 0 !important;
    min-width: 28px !important;
    width: 28px !important;
  }
  .player .avatar-sm {
    width: 28px !important;
    height: 28px !important;
  }
  .player .ball {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
  }

  /* Nome e posição — ocupa espaço restante */
  .player .meta {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player .meta strong {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    max-width: 100% !important;
  }
  .player small {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* Botões de ação — não crescem */
  .player .actions {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 3px !important;
    margin-left: 0 !important;
  }
  .player .actions button {
    padding: 4px 5px !important;
    font-size: 11px !important;
    min-width: 0 !important;
    border-radius: 6px !important;
  }

  /* "Vincular" → só ícone 🔗 */
  .btn-assign {
    position: relative !important;
    overflow: hidden !important;
    width: 30px !important;
    color: transparent !important;
    padding: 4px !important;
  }
  .btn-assign::after {
    content: '🔗' !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
  }

  /* === PARTIDAS === */
  .partida-card {
    padding: 10px !important;
    font-size: 13px !important;
  }
  .partida-actions {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* === FINANCEIRO === */
  .fin-row {
    grid-template-columns: 1fr !important;
    font-size: 13px !important;
  }

  /* === MODAIS === */
  dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: auto !important;
  }
  
  .avatar-col {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .avatar-wrap {
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0 !important;
  }

  /* === RANKING — não mexe no pódio === */
  .rank-summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .rank-pill {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* === FORMAÇÃO / CAMPO === */
  .pitch-area {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 68/105 !important;
  }
  .pitch-overlay-top {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .glass-panel {
    font-size: 11px !important;
    height: 32px !important;
    padding: 0 8px !important;
  }
  /* Bolinhas menores no campo */
  :root {
    --token-size: 60px !important;
    --token-reserve-size: 60px !important;
  }
  .token .dot {
    font-size: 9px !important;
    padding: 1px 5px !important;
    bottom: -13px !important;
  }
  .token .num {
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
  }

  /* === TOOLBAR GERAL === */
  .toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
  }
  .toolbar button,.toolbar select {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  /* === INPUTS E SELECTS === */
  input,select,textarea {
    font-size: 14px !important; /* evita zoom automático no iOS */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === LANDSCAPE MOBILE === */
@media (max-width: 896px) and (orientation: landscape) {
  .pitch-area {
    height: min(80vh, 400px) !important;
  }
  .side {
    padding-bottom: 20px !important;
  }
  .tabs button {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}

/* === MELHORIAS VISUAIS GERAIS BDT === */

/* Botões mais elegantes */
button.primary,button.warn {
  box-shadow: 0 2px 8px rgba(225,194,10,0.2) !important;
  transition: all 0.2s ease !important;
}
button.primary:hover,button.warn:hover {
  box-shadow: 0 4px 16px rgba(225,194,10,0.35) !important;
  transform: translateY(-1px) !important;
}
button.ghost:hover {
  border-color: rgba(225,194,10,0.4) !important;
  color: var(--acc) !important;
  transition: all 0.2s ease !important;
}
button.warn.btn-del:hover {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.3) !important;
}

/* Cards com borda sutil animada */
.card {
  transition: box-shadow 0.2s ease !important;
}
.card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}

/* Header do app mais elegante */
header {
  background: linear-gradient(180deg, #161616, var(--bg)) !important;
  border-bottom: 1px solid rgba(225,194,10,0.15) !important;
}
header h1 {
  background: linear-gradient(90deg, var(--acc), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Inputs com focus melhorado */
.input:focus,input:focus,select:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px rgba(225,194,10,0.15) !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

/* Rank rows mais elegantes */
.modern-row {
  transition: all 0.2s ease !important;
}
.modern-row:hover {
  transform: translateX(4px) !important;
  border-left-color: var(--acc) !important;
  background: linear-gradient(to right, rgba(225,194,10,0.08), #1e1e1e) !important;
}

/* Partidas — cards com hover */
.player[data-id]:hover {
  background: rgba(225,194,10,0.03) !important;
  transition: background 0.2s ease !important;
}

/* Badge de resultado com glow */
.chip {
  transition: all 0.2s ease !important;
}

/* Barra de cadeado mais elegante */
#btnLock {
  transition: all 0.2s ease !important;
}
#btnLock:hover {
  box-shadow: 0 0 12px rgba(225,194,10,0.4) !important;
  transform: scale(1.05) !important;
}

/* Animação suave ao abrir abas */
section[role="tabpanel"] {
  animation: fadeInTab 0.2s ease !important;
}
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Player list scroll mais suave */
.player-list {
  scroll-behavior: smooth !important;
}

/* Financeiro — lista de pagamento mais elegante */
.player-list > div {
  transition: background 0.15s ease !important;
}
.player-list > div:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* === UNIFORME === */
.uni-admin-panel {
  background: rgba(225,194,10,0.04);
  border: 1px solid rgba(225,194,10,0.2);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px;
}
.uni-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.uni-player-row:last-child { border-bottom: none; }
.uni-code-badge {
  background: rgba(225,194,10,0.1);
  border: 1px solid rgba(225,194,10,0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--acc);
  font-family: monospace;
}
.uni-order-card {
  background: var(--panel-2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.uni-item-card {
  background: var(--panel-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
.uni-item-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--acc);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.uni-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  flex: 1;
  min-width: 0;
}
.uni-field label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.uni-field input,.uni-field select,.uni-field textarea { width: 100%; }
.uni-field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.uni-map-box {
  background: var(--panel-2);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
}
.uni-num-title {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.uni-legend { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.uni-num-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.uni-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}
.uni-num-free  { background: rgba(34,197,94,0.12);  border: 1px solid rgba(34,197,94,0.3);  color: #22c55e; }
.uni-num-taken { background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.3);  color: #ef4444; text-decoration: line-through; }
.uni-num-mine  { background: rgba(225,194,10,0.18); border: 1px solid var(--acc);           color: var(--acc); }
.uni-legend .uni-num { width: auto; padding: 2px 10px; font-size: 11px; }
.uni-total-box {
  background: rgba(225,194,10,0.06);
  border: 1px solid rgba(225,194,10,0.25);
  border-radius: 10px;
  padding: 14px;
}

/* inputs do módulo uniforme no tema escuro */
.uni-field input,
.uni-field select,
.uni-field textarea {
  background: var(--panel);
  border: 1px solid var(--border-color);
  color: var(--text-light);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.uni-field input:focus,
.uni-field select:focus,
.uni-field textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 2px rgba(225,194,10,0.15);
}
.uni-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.uni-field input[type="number"]::-webkit-outer-spin-button,
.uni-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===================== REGISTRAR JOGO (assistente) ===================== */
.wiz-cta{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 0 12px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--acc);background:linear-gradient(135deg,rgba(225,194,10,.18),rgba(225,194,10,.04));color:var(--text-light);cursor:pointer}
.wiz-cta b{display:block;font-size:17px;color:var(--acc)}
.wiz-cta small{display:block;font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.3}
.wiz-cta-ico{font-size:28px;flex-shrink:0}
.wiz-edit-btn{padding:4px 8px;font-size:12px;background:rgba(225,194,10,.15);border:1px solid var(--acc);color:var(--acc);border-radius:10px;cursor:pointer}

.wiz-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:stretch}
.wiz-overlay[hidden]{display:none}
.wiz-panel{background:var(--bg);width:100%;max-width:560px;display:flex;flex-direction:column;height:100%;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}
.wiz-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--panel-2);border-bottom:1px solid var(--border-color)}
.wiz-x{background:none;border:1px solid var(--border-color);color:var(--text-muted);border-radius:999px;width:34px;height:34px;font-size:16px;cursor:pointer;flex-shrink:0}
.wiz-title{flex:1;font-weight:800;font-size:16px;color:var(--text-light)}
.wiz-score{font-weight:900;font-size:18px;color:var(--acc);background:rgba(225,194,10,.1);padding:4px 12px;border-radius:999px}
.wiz-steps{display:flex;gap:4px;padding:8px 10px;overflow-x:auto;border-bottom:1px solid var(--border-color);background:var(--panel-2)}
.wiz-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--text-muted);font-size:10px;cursor:pointer;padding:2px;white-space:nowrap}
.wiz-step span{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);font-weight:800;font-size:12px}
.wiz-step.on{color:var(--acc)}
.wiz-step.on span{background:var(--acc);color:var(--acc-text);border-color:var(--acc)}
.wiz-step.done span{background:rgba(34,197,94,.2);color:var(--ok);border-color:var(--ok)}
.wiz-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.wiz-foot{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid var(--border-color);background:var(--panel-2)}
.wiz-foot button{padding:12px 16px;font-size:15px;font-weight:700;border-radius:12px}
.wiz-foot .primary{flex:1}
.wiz-registrar{background:#16a34a!important;border-color:#15803d!important;color:#fff!important}
.wiz-hint{margin:0;font-size:12px;color:var(--text-muted);line-height:1.4}
.wiz-field{display:flex;flex-direction:column;gap:4px}
.wiz-field>span{font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.wiz-field .input{width:100%;box-sizing:border-box;font-size:15px}
.wiz-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wiz-chips{display:flex;flex-wrap:wrap;gap:6px}
.wiz-chip{padding:7px 12px;border-radius:999px;border:1px solid var(--border-color);background:var(--panel);color:var(--text-light);font-size:13px;cursor:pointer}
.wiz-busca{width:100%;box-sizing:border-box}
.wiz-count,.wiz-sub{font-size:12px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.wiz-sub{margin-top:6px}
.wiz-list{display:flex;flex-direction:column;gap:6px}
.wiz-row{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border-radius:12px;border:1px solid var(--border-color);background:var(--panel);color:var(--text-light);font-size:15px;cursor:pointer;text-align:left}
.wiz-check{width:24px;height:24px;border-radius:6px;border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0}
.wiz-pick.on{border-color:var(--ok);background:rgba(34,197,94,.1)}
.wiz-pick.on .wiz-check{background:var(--ok);border-color:var(--ok);color:#041b0d}
.wiz-num{min-width:26px;font-weight:800;color:var(--acc);text-align:center}
.wiz-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.wiz-pos{font-size:11px;color:var(--text-muted)}
.wiz-empty{padding:20px;text-align:center;color:var(--text-muted);border:1px dashed var(--border-color);border-radius:12px}
.wiz-placar{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--border-color)}
.wiz-placar-lado{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.wiz-placar-lado b{font-size:40px;line-height:1;color:var(--acc)}
.wiz-placar-lado small{font-size:11px;color:var(--text-muted);text-align:center}
.wiz-placar-x{font-size:24px;color:var(--text-muted)}
.wiz-team{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wiz-counter{display:flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--border-color);border-radius:10px;padding:6px 8px}
.wiz-counter-lbl{flex:1;font-size:12px;color:var(--text-light);min-width:0}
.wiz-counter button{width:36px;height:36px;border-radius:10px;border:1px solid var(--border-color);background:var(--panel);color:var(--text-light);font-size:20px;font-weight:800;cursor:pointer;flex-shrink:0;padding:0}
.wiz-counter button[data-inc]{border-color:var(--acc);color:var(--acc)}
.wiz-counter button:disabled{opacity:.3;cursor:default}
.wiz-counter b{min-width:20px;text-align:center;font-size:18px}
.wiz-lance{border:1px solid var(--border-color);border-radius:12px;background:var(--panel);padding:10px;display:flex;flex-direction:column;gap:8px}
.wiz-lance-head{display:flex;align-items:center;gap:8px}
.wiz-extras{font-size:12px;color:var(--text-muted)}
.wiz-mais{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:4px}
.wiz-lance-main,.wiz-lance-more{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wiz-pay{justify-content:space-between}
.wiz-pay.pago{border-color:var(--ok);background:rgba(34,197,94,.08)}
.wiz-pay.pago .wiz-tag{color:var(--ok)}
.wiz-pay.deve .wiz-tag{color:var(--danger)}
.wiz-pay.isento{opacity:.7;cursor:default}
.wiz-pay.isento .wiz-tag{color:#60a5fa}
.wiz-tag{font-weight:800;font-size:13px}
.wiz-fin{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wiz-fin>div{background:var(--panel);border:1px solid var(--border-color);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.wiz-fin small{font-size:10px;color:var(--text-muted);text-transform:uppercase}
.wiz-fin b{font-size:14px}
.wiz-card{background:var(--panel);border:1px solid var(--border-color);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.wiz-body .muted{color:var(--text-muted);font-size:12px}
.wiz-big{font-size:20px;font-weight:900}
.wiz-res{align-self:flex-start;padding:3px 10px;border-radius:999px;font-weight:800;font-size:11px;letter-spacing:.5px}
.wiz-res.v{background:#16a34a;color:#041b0d}
.wiz-res.d{background:#ef4444;color:#1b0a0a}
.wiz-res.e{background:#64748b;color:#0b1220}
.wiz-line{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding:4px 0;border-bottom:1px dashed var(--border-color)}
.wiz-avisos{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.4);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;font-size:13px}
@media (max-width:380px){
  .wiz-lance-main,.wiz-lance-more,.wiz-team{grid-template-columns:1fr}
  .wiz-step{font-size:9px}
}

/* ===================== JORNADA DO JOGO (aba Dados) ===================== */
.jr{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.jr-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--acc);padding:2px 2px 4px}
.jr-link{background:none;border:1px solid var(--border-color);color:var(--text-muted);border-radius:999px;padding:5px 10px;font-size:11px;cursor:pointer}
.jr-step{display:flex;gap:12px;padding:12px;border-radius:var(--radius);border:1px solid var(--border-color);background:var(--panel);position:relative}
.jr-step.now{border-color:var(--acc);background:linear-gradient(135deg,rgba(225,194,10,.12),rgba(225,194,10,.02))}
.jr-step.wait{opacity:.55}
.jr-num{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:900;border:1px solid var(--border-color);color:var(--text-muted)}
.jr-step.now .jr-num{background:var(--acc);color:var(--acc-text);border-color:var(--acc)}
.jr-step.done .jr-num{background:rgba(34,197,94,.2);color:var(--ok);border-color:var(--ok)}
.jr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.jr-title{font-weight:800;font-size:15px;color:var(--text-light)}
.jr-line{font-size:13px;color:var(--text-light);line-height:1.45}
.jr-muted{color:var(--text-muted);font-size:12px}
.jr-warn{color:#f59e0b;font-size:12px}
.jr-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.jr-btns button{padding:8px 12px;font-size:13px;border-radius:10px;cursor:pointer}
.jr-registrar.primary{background:#16a34a;border-color:#15803d;color:#fff}
.jr-antigo{margin-top:6px;max-width:100%;overflow:hidden}
.jr-antigo>summary{cursor:pointer;color:var(--text-muted);font-size:13px;padding:10px 4px;list-style:revert}

/* ===================== CAIXA + TEMPORADAS + limpeza de botões antigos ===================== */
/* Botões antigos das partidas: o "⚡ Corrigir" substitui Abrir/Editar/Atualizar; "Encerrar temporada" substitui o Limpar */

.cx-card{display:flex;flex-direction:column;gap:10px}
.cx-saldo{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0}
.cx-saldo small{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.cx-saldo b{font-size:34px;font-weight:900}
.cx-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cx-btns button{padding:9px 4px;font-size:13px;border-radius:10px}
.cx-hint{margin:0;font-size:12px;color:var(--text-muted);line-height:1.4}
.cx-movs{display:flex;flex-direction:column;border-top:1px solid var(--border-color)}
.cx-mov{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:6px 2px;border-bottom:1px dashed var(--border-color)}
.cx-mov span{color:var(--text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis}
.cx-mov b{flex-shrink:0}
.cx-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cx-head h3{margin:0;font-size:16px}
.cx-head button{padding:5px 10px;font-size:12px}
.cx-dev{border:1px solid var(--border-color);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;background:var(--panel-2)}
.cx-dev-top{display:flex;justify-content:space-between;gap:8px}
.cx-dev-top span{color:var(--danger);font-weight:800}
.cx-dev-jogos{display:flex;flex-wrap:wrap;gap:6px}
.cx-quitar{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border-color);background:var(--panel);color:var(--text-light);cursor:pointer}

.tp-titulo{margin:22px 0 10px;font-size:16px}
.tp-card{border:1px solid var(--border-color);border-radius:12px;padding:12px;margin-bottom:8px;background:var(--panel-2);display:flex;flex-direction:column;gap:6px}
.tp-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tp-top b{color:var(--acc)}
.tp-top span{font-size:12px;color:var(--text-muted)}
.tp-nums{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;font-weight:700}
.tp-nums .v{color:var(--ok)} .tp-nums .d{color:var(--danger)}
.tp-dest{font-size:13px;display:flex;flex-direction:column;gap:2px}

/* ===================== LISTA DO WHATSAPP ===================== */
.ls-texto{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;resize:vertical}
.ls-item{border:1px solid var(--border-color);border-radius:12px;padding:8px 10px;background:var(--panel);display:flex;flex-direction:column;gap:6px}
.ls-item.pend{border-color:var(--danger);background:rgba(239,68,68,.07)}
.ls-item .input{width:100%;box-sizing:border-box;font-size:14px}
.ls-top{display:flex;align-items:center;gap:8px;font-size:13px}
.ls-pos{font-size:11px;font-weight:800;color:var(--text-muted);min-width:52px}
.ls-bruto{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.ls-ok{font-size:11px;color:var(--ok);font-weight:800}
.ls-campo{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ls-vaga{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:10px;background:var(--panel);border:1px solid var(--border-color);font-size:13px;min-width:0}
.ls-vaga span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-vaga.vazia{border-style:dashed;color:var(--text-muted)}
.ls-papel{font-size:10px;font-weight:900;color:var(--acc);min-width:28px}
.ls-res{font-size:13px;line-height:1.5;padding:8px 10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border-color)}
.ls-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4}
.ls-check input{margin-top:3px}

/* =====================================================================
   📱 DESIGN v7 — camada final (vem por último e padroniza o app todo)
   Paleta preto + amarelo Borussia · mobile-first · botões/campos/cartões iguais
   ===================================================================== */
:root{
  --bg:#0b0c0a;
  --s1:#141513;            /* cartões */
  --s2:#1c1d1b;            /* campos, cartões internos */
  --s3:#262724;            /* hover / botões neutros */
  --line:#2c2d2a;          /* bordas */
  --acc:#E1C20A; --acc-2:#f5d824; --acc-text:#0b0c0a; --acc-soft:rgba(225,194,10,.12);
  --txt:#f2f2ef; --muted:#9a9b95; --faint:#6b6c67;
  --ok:#22c55e; --ok-soft:rgba(34,197,94,.13);
  --warn:#f59e0b; --warn-soft:rgba(245,158,11,.14);
  --danger:#ef4444; --danger-soft:rgba(239,68,68,.12);
  --r:14px; --r-sm:10px; --r-pill:999px;
  --h-btn:40px; --h-btn-sm:32px;
  --topbar:56px; --nav:62px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  /* compatibilidade com nomes antigos */
  --panel:var(--s1); --panel-2:var(--s2); --border-color:var(--line); --text-light:var(--txt); --text-muted:var(--muted);
}

/* ---------- base ---------- */
html,body{background:var(--bg)!important;color:var(--txt);font-family:var(--font)!important;-webkit-tap-highlight-color:transparent}
body{margin:0;padding:0!important;font-size:15px;line-height:1.4;overflow-x:hidden}
.app{display:block!important;min-height:100vh}
h1,h2,h3,h4{font-family:var(--font);letter-spacing:-.01em}
h3{font-size:16px;font-weight:800}
.muted{color:var(--muted)!important}

/* ---------- barra de topo ---------- */
header.topbar{position:sticky!important;top:0;z-index:9990;display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:10px!important;
  height:var(--topbar);padding:0 12px!important;padding-top:env(safe-area-inset-top,0px)!important;box-sizing:content-box;
  background:rgba(11,12,10,.92)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)!important;margin:0!important}
.topbar-logo{width:34px;height:34px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.topbar-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.topbar-title b{font-size:18px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title small{font-size:11px;color:var(--muted);white-space:nowrap}
.topbar-title small span:first-child{color:var(--acc);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
#lockStatus{font-size:11px!important;margin:0!important}
.icon-btn{width:40px!important;height:40px!important;min-height:0!important;padding:0!important;border-radius:12px!important;display:flex!important;align-items:center;justify-content:center;
  background:var(--s2)!important;border:1px solid var(--line)!important;color:var(--txt)!important;font-size:17px!important;flex-shrink:0;cursor:pointer}
.icon-btn.lock{border-color:rgba(225,194,10,.35)!important}
body.modo-adm .icon-btn.lock{background:var(--acc-soft)!important;border-color:var(--acc)!important}

/* ---------- área de conteúdo (sem "caixa" em volta) ---------- */
main.layout{display:block!important;padding:0!important;margin:0!important;max-width:720px!important;margin:0 auto!important;width:100%!important;box-sizing:border-box}
aside.side{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;
  padding:12px 12px calc(var(--nav) + var(--safe-b) + 20px)!important;width:100%!important;max-width:100%!important;box-sizing:border-box;gap:12px!important}
[role="tabpanel"]{display:flex;flex-direction:column;gap:12px}
[role="tabpanel"][hidden]{display:none!important}

/* ---------- menu de baixo ---------- */
nav.tabs{position:fixed!important;left:0;right:0;bottom:0;z-index:9995!important;display:flex!important;flex-wrap:nowrap!important;gap:0!important;overflow:visible!important;
  height:calc(var(--nav) + var(--safe-b));padding:0 4px var(--safe-b)!important;margin:0!important;box-sizing:border-box;
  background:rgba(14,15,13,.96)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)!important;box-shadow:0 -6px 24px rgba(0,0,0,.45)!important}
nav.tabs button{flex:1 1 0!important;min-width:0!important;height:var(--nav)!important;padding:6px 2px 4px!important;margin:0!important;
  display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:3px!important;
  background:transparent!important;border:none!important;border-radius:0!important;outline:none!important;box-shadow:none!important;
  color:var(--faint)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.01em;white-space:nowrap;position:relative}
nav.tabs button i{font-style:normal;font-size:21px;line-height:1;filter:grayscale(1) brightness(.9);opacity:.75;transition:transform .15s}
nav.tabs button[aria-selected="true"],nav.tabs button.on{color:var(--acc)!important;background:transparent!important;border:none!important}
nav.tabs button[aria-selected="true"] i,nav.tabs button.on i{filter:none;opacity:1;transform:translateY(-1px)}
nav.tabs button[aria-selected="true"]::before,nav.tabs button.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}

/* ---------- folhas (menu Mais / ações) ---------- */
.sheet{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,0);transition:background .18s;display:flex;align-items:flex-end;justify-content:center}
.sheet.open{background:rgba(0,0,0,.6)}
.sheet[hidden]{display:none!important}
.sheet-panel{width:100%;max-width:560px;background:var(--s1);border:1px solid var(--line);border-bottom:none;border-radius:20px 20px 0 0;
  padding:8px 12px calc(14px + var(--safe-b));transform:translateY(100%);transition:transform .18s ease-out;max-height:85vh;overflow-y:auto}
.sheet.open .sheet-panel{transform:none}
.sheet-handle{width:40px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 10px}
.sheet-title{font-weight:800;font-size:16px;padding:2px 6px 10px}
.sheet-list{display:flex;flex-direction:column;gap:6px}
.sheet-sep{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:14px 6px 6px}
.sheet-item{display:flex!important;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 12px!important;border-radius:var(--r)!important;
  background:var(--s2)!important;border:1px solid var(--line)!important;color:var(--txt)!important;text-align:left;font-size:15px!important;font-weight:700!important;cursor:pointer;margin:0!important}
.sheet-item i{font-style:normal;font-size:22px;width:28px;text-align:center}
.sheet-item span{display:flex;flex-direction:column;gap:1px;min-width:0}
.sheet-item small{font-size:12px;font-weight:500;color:var(--muted)}
.sheet-item.on{border-color:var(--acc)!important;background:var(--acc-soft)!important}
.sheet-item.danger{color:var(--danger)!important}
.sheet-cancel{width:100%;margin-top:10px;min-height:48px;border-radius:var(--r);background:transparent;border:1px solid var(--line);color:var(--muted);font-size:15px;font-weight:700}
body:not(.modo-adm) .adm-only{display:none!important}

/* ---------- botões (padrão único) ---------- */
button,.btn{font-family:var(--font)}
main button:not(.icon-btn):not(.tool-btn):not(.timer-btn):not(.glass-panel):not(.el-mais):not(.el-pres-btn):not(.sheet-item):not(.cx-quitar):not(.wiz-chip):not(.wiz-step):not(.wiz-x):not(.wiz-mais):not(.wiz-row):not([role="tab"]):not(#tab-mais),
.btn,
.primary,
.ghost,
.warn,
.danger,
.success,
.wiz-foot button,
.jr-btns button,
.cx-btns button,
.cx-head button,
.page-bar button{
  min-height:var(--h-btn);padding:0 14px;border-radius:var(--r-sm)!important;font-size:14px!important;font-weight:700!important;line-height:1.1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;
  background:var(--s2);border:1px solid var(--line)!important;color:var(--txt);box-shadow:none!important;transition:filter .12s,transform .06s}
button:active{transform:scale(.97)}
.primary,button.primary,.btn.primary{background:var(--acc)!important;border-color:var(--acc)!important;color:var(--acc-text)!important}
.ghost,button.ghost{background:transparent!important;color:var(--txt)!important;border-color:var(--line)!important}
.warn,.danger,button.warn,button.danger{background:transparent!important;color:var(--danger)!important;border-color:rgba(239,68,68,.45)!important}
.success,button.success{background:var(--ok)!important;border-color:var(--ok)!important;color:#04140a!important}
.btn-mini{min-height:28px!important;padding:0 10px!important;font-size:12px!important;border-radius:var(--r-pill)!important}
button:disabled{opacity:.45;cursor:default}

/* ---------- campos ---------- */
input.input,select.input,textarea.input,.input,.search-input,main input[type="text"],main input[type="number"],main input[type="search"],main input[type="date"],main input[type="time"],main select,main textarea,dialog input,dialog select,dialog textarea{
  background:var(--s2)!important;border:1px solid var(--line)!important;color:var(--txt)!important;border-radius:var(--r-sm)!important;
  min-height:var(--h-btn);padding:0 12px!important;font-size:15px!important;font-family:var(--font)!important;box-sizing:border-box;box-shadow:none!important;outline:none}
textarea.input,main textarea,dialog textarea{padding:10px 12px!important;line-height:1.4}
input:focus,select:focus,textarea:focus{border-color:var(--acc)!important;box-shadow:0 0 0 3px var(--acc-soft)!important}
input::placeholder,textarea::placeholder{color:var(--faint)!important}

/* ---------- cartões ---------- */
.card{background:var(--s1)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:none!important;padding:14px!important}
.page-bar{display:flex;align-items:center;gap:8px;min-height:var(--h-btn)}
.page-bar .page-sub{flex:1;min-width:0;font-size:13px;color:var(--muted);font-weight:600}
.page-bar .search-input{flex:1;min-width:0}
.toast-v7,#__toast{background:var(--s3)!important;color:var(--txt)!important;border:1px solid var(--acc)!important;font-weight:700!important;
  bottom:calc(var(--nav) + var(--safe-b) + 14px)!important;max-width:88vw;text-align:center;z-index:100000!important}

/* ---------- ELENCO compacto ---------- */
.el-resumo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0}
.el-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:var(--r-pill);font-size:13px;background:var(--s2);border:1px solid var(--line);color:var(--muted)}
.el-chip b{color:var(--txt)}
.el-chip.ok{background:var(--ok-soft);border-color:rgba(34,197,94,.35)} .el-chip.ok b{color:var(--ok)}
.el-chip.sup b,.el-chip.tz b{color:var(--warn)} .el-chip.no b{color:var(--danger)}
.el-total{flex:1;text-align:right;font-size:12px;color:var(--faint)}
.el-grupo{display:flex;align-items:center;gap:8px;margin:12px 2px 4px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.el-grupo::after{content:"";flex:1;height:1px;background:var(--line)}
.el-grupo b{order:2;color:var(--faint);font-size:11px}
.el-grupo::after{order:1}
#playerList{display:flex;flex-direction:column;gap:0;max-height:none!important;overflow:visible!important;background:transparent!important;border:none!important;padding:0!important}
#playerList .el-row{display:flex!important;align-items:center;gap:10px!important;padding:7px 4px 7px 8px!important;margin:0!important;min-height:52px;
  background:transparent!important;border:none!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;opacity:1!important;filter:none!important}
#playerList .el-row:last-child{border-bottom:none!important}
.el-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--s2);border:1px solid var(--line);font-weight:800;font-size:14px;color:var(--muted);cursor:pointer}
.el-row.confirmado .el-avatar{border-color:rgba(34,197,94,.55);color:var(--txt)}
.el-avatar img{width:100%;height:100%;object-fit:cover}
.el-info{flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer}
.el-info b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.el-info small{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-row.ausente .el-info b{color:var(--muted)}
.el-pres{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:26px;padding:0 8px;border-radius:var(--r-pill);font-size:12px;font-weight:800;white-space:nowrap}
.el-pres.ok{background:var(--ok-soft);color:var(--ok)}
.el-pres.sup,.el-pres.tz{background:var(--warn-soft);color:var(--warn)}
.el-pres.no{background:var(--danger-soft);color:var(--danger)}
.el-pres.off{background:var(--s2);color:var(--faint)}
.el-pres-btn{background:none!important;border:none!important;padding:0!important;min-height:0!important;cursor:pointer}
.el-mais{width:34px;height:34px;min-height:0!important;padding:0!important;border-radius:10px!important;background:transparent!important;border:1px solid transparent!important;
  color:var(--muted)!important;font-size:20px!important;font-weight:900!important;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
body:not(.modo-adm) .el-mais{display:none!important}

/* ---------- PARTIDAS ---------- */
#partidasList{display:flex;flex-direction:column;gap:12px;max-height:none!important;overflow:visible!important;background:transparent!important;border:none!important;padding:0!important}
#partidasList>.player{background:var(--s1)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;padding:14px!important;margin:0!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
#partidasList .actions{display:flex!important;flex-wrap:wrap;gap:6px!important;margin:0!important;justify-content:flex-end}
#partidasList .actions button{min-height:var(--h-btn-sm)!important;padding:0 12px!important;font-size:13px!important;border-radius:var(--r-sm)!important;
  background:transparent!important;color:var(--txt)!important;border:1px solid var(--line)!important}
#partidasList .actions .wiz-edit-btn{color:var(--acc)!important;border-color:rgba(225,194,10,.5)!important}
#partidasList .actions .ptd-del{color:var(--danger)!important;border-color:rgba(239,68,68,.4)!important}

#partidasList select{min-height:34px!important;font-size:14px!important}

/* ---------- FORMAÇÃO ---------- */
#panel-formacao .toolbar{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:8px!important;overflow-x:auto;padding:0 0 2px!important;margin:0!important;scrollbar-width:none}
#panel-formacao .toolbar::-webkit-scrollbar{display:none}
#panel-formacao .toolbar button{flex-shrink:0}
#panel-formacao .muted{font-size:12px;line-height:1.4}
.pitch-area{border-radius:var(--r)!important;overflow:hidden}
.bench-wrap{background:var(--s1)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important}

/* ---------- RANKING / CAIXA / JOGO ---------- */
#panel-ranking .card,#panel-financeiro .card,#panel-uniforme .card{margin:0!important}
.cx-card{gap:12px!important}
.cx-saldo b{font-size:38px!important}
.jr{margin:0!important;gap:10px!important}
.jr-head{display:none!important}                 /* o título já está no topo */
.jr-step{padding:14px!important;border-radius:var(--r)!important}
.jr-btns button{min-height:var(--h-btn-sm)!important;font-size:13px!important}
#temporadasArquivo .tp-card{background:var(--s1)}

/* ---------- UNIFORME / PERFIL / FOTOS: harmoniza o que é gerado com estilo embutido ---------- */
#panel-uniforme button,#panel-perfil button,#panel-fotos button{border-radius:var(--r-sm)!important;font-family:var(--font)!important}
#uni-admin-area>div,#uni-player-area>div,#perfil-area>div,#fotos-area>div{border-radius:var(--r)!important}

/* ---------- janelas (novo jogador, vincular, jogadas) em tema escuro ---------- */
dialog{background:var(--s1)!important;color:var(--txt)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:0 20px 60px rgba(0,0,0,.7)!important;padding:18px!important;width:min(92vw,460px)!important;max-width:460px!important}
dialog::backdrop{background:rgba(0,0,0,.65)}
dialog h3{color:var(--txt)!important;font-size:18px!important}
dialog label{color:var(--muted)!important;font-size:12px!important}
dialog footer{border-top:1px solid var(--line)!important}

/* ---------- assistentes (Registrar jogo / Lista / Marcar jogo) acima de tudo ---------- */
.wiz-overlay{z-index:10040!important}
.wiz-panel{max-width:560px}

/* telas bem estreitas */
@media (max-width:360px){
  nav.tabs button{font-size:10px!important}
  .topbar-title b{font-size:16px}
  .page-bar{flex-wrap:wrap}
}
/* telas grandes: o app fica centralizado como um celular largo */
@media (min-width:760px){
  nav.tabs{max-width:720px;margin:0 auto!important;border-left:1px solid var(--line)!important;border-right:1px solid var(--line)!important;border-radius:16px 16px 0 0}
}

/* ---------- v7.8: barra de baixo com todas as abas, rolando para o lado ---------- */
nav.tabs{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{flex:0 0 auto!important;width:min(76px,19.5vw)!important;scroll-snap-align:start}

/* ---------- v7 ajustes finos ---------- */
nav.tabs button i{filter:none!important;opacity:.5}
nav.tabs button[aria-selected="true"] i,nav.tabs button.on i{opacity:1}

/* cronômetro compacto no campo */
.pitch-overlay-top{flex-wrap:nowrap!important;gap:6px!important}

/* Uniforme: cabeçalho */
.uni-head{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.uni-head h3{margin:0;color:var(--acc);font-size:17px}
.uni-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.uni-acoes .primary{grid-column:1 / -1}
.uni-acoes button{width:100%}

/* ---------- v7: presença só é tocável no modo edição ---------- */
body:not(.modo-adm) .el-pres-btn{cursor:default}
/* ---------- v7: janela "Novo/Editar jogador" empilhada no celular ---------- */

/* v7: linha de cima do campo (rabisco, jogadas, esquema, cronômetro) sem transbordar */
.pitch-overlay-top{flex-wrap:wrap!important;justify-content:flex-start!important;align-items:center!important;left:8px!important;right:8px!important;width:auto!important;max-width:calc(100% - 16px)!important;gap:6px!important}
#formation{flex:1 1 110px!important;min-width:0!important;max-width:170px!important;min-height:36px!important;font-size:14px!important}
#btnDrawToggle{min-width:36px!important;height:36px!important;padding:0!important}

/* v7.1: escudo novo (BFC) um pouco maior no topo */
.topbar-logo{width:40px!important;height:40px!important}

/* ===================== v7.2 ===================== */
/* Formação: sem cronômetro, sem jogadas ensaiadas, sem "Salvar" (salva sozinho). Fica o rabisco. */

/* Confirmação no estilo do app */
.cf-sheet{z-index:10100}
.cf-titulo{font-size:17px;font-weight:800;padding:2px 4px 8px;line-height:1.3}
.cf-corpo{font-size:14px;color:var(--muted);line-height:1.5;padding:0 4px 14px}
.cf-botoes{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
.cf-botoes button{min-height:48px!important;font-size:15px!important;border-radius:12px!important;font-weight:800!important}
.cf-perigo{background:var(--danger)!important;border:1px solid var(--danger)!important;color:#fff!important}

/* Partidas: cartão compacto */
#partidasList>.pt-card{padding:0!important;gap:0!important;overflow:hidden;border-left:4px solid var(--line)!important}
#partidasList>.pt-card.pt-v{border-left-color:var(--ok)!important}
#partidasList>.pt-card.pt-d{border-left-color:var(--danger)!important}
#partidasList>.pt-card.pt-e{border-left-color:#64748b!important}
.pt-top{display:flex;align-items:center;gap:12px;padding:12px 12px;cursor:pointer}
.pt-placar{display:flex;align-items:center;gap:4px;font-weight:900;font-size:22px;min-width:66px;justify-content:center;background:var(--s2);border-radius:10px;padding:6px 8px}
.pt-placar i{font-style:normal;color:var(--faint);font-size:14px}
.pt-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pt-info b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-info small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-info .pt-gols{color:var(--txt)}
.pt-res{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0;background:var(--s3);color:var(--txt)}
.pt-v .pt-res{background:var(--ok-soft);color:var(--ok)}
.pt-d .pt-res{background:var(--danger-soft);color:var(--danger)}
.pt-det{display:none;flex-direction:column;gap:10px;padding:0 12px 12px;border-top:1px solid var(--line)}
.pt-card.aberto .pt-det{display:flex;padding-top:10px}
.pt-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px}
.pt-fin{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pt-fin>div{background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:7px 8px;display:flex;flex-direction:column;min-width:0}
.pt-fin small{font-size:10px;color:var(--muted);text-transform:uppercase}
.pt-fin b{font-size:13px;white-space:nowrap}
#partidasList .pt-det>div[style*="#0f1520"]{background:var(--s2)!important;border-color:var(--line)!important}

/* Ranking enxuto */
.rk-time{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:10px 6px}
.rk-time>div{display:flex;flex-direction:column;align-items:center;min-width:0}
.rk-time b{font-size:17px;font-weight:900;white-space:nowrap}
.rk-time b i{font-style:normal;color:var(--faint);font-size:12px;margin:0 1px}
.rk-time small{font-size:10px;color:var(--muted)}
.rk-time .v{color:var(--ok)} .rk-time .d{color:var(--danger)} .rk-time .acc{color:var(--acc)}
.rk-abas{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:4px}
.rk-abas button{min-height:36px!important;padding:0 4px!important;border:none!important;background:transparent!important;color:var(--muted)!important;font-size:13px!important;border-radius:9px!important}
.rk-abas button.on{background:var(--acc)!important;color:var(--acc-text)!important}
.rk-lista{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rk-linha{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.rk-linha:last-child{border-bottom:none}
.rk-linha.top{background:linear-gradient(90deg,var(--acc-soft),transparent 70%)}
.rk-pos{width:28px;text-align:center;font-size:15px;font-weight:800;color:var(--muted);flex-shrink:0}
.rk-nome{flex:1;min-width:0;display:flex;flex-direction:column}
.rk-nome b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-nome small{font-size:12px;color:var(--faint)}
.rk-valor{font-size:22px;font-weight:900;color:var(--acc);min-width:32px;text-align:right}
.rk-vazio{text-align:center;color:var(--muted);padding:28px 12px;background:var(--s1);border:1px dashed var(--line);border-radius:var(--r)}
.rk-vazio small{color:var(--faint)}
@media (max-width:360px){ .rk-time{grid-template-columns:repeat(3,1fr);row-gap:8px} }
.jr-mapa{color:var(--acc);font-weight:700;text-decoration:none;white-space:nowrap}

/* ===================== FOTOS DO DIA v2 ===================== */
.ft-status{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--s1)}
.ft-status>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ft-status b{font-size:15px}
.ft-status small{font-size:12px;color:var(--muted)}
.ft-status.on{border-color:rgba(34,197,94,.45);background:linear-gradient(135deg,var(--ok-soft),transparent)}
.ft-status.off{border-color:rgba(239,68,68,.35)}
.ft-add{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
.ft-add button{min-height:52px!important;font-size:16px!important;border-radius:14px!important}
.ft-enviando{text-align:center;font-size:13px;color:var(--acc);padding:6px;border:1px dashed var(--acc);border-radius:10px}
.ft-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.ft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ft-item{position:relative;aspect-ratio:1;padding:0!important;min-height:0!important;border:none!important;border-radius:10px!important;overflow:hidden;background:var(--s2)!important;cursor:pointer}
.ft-item img{width:100%;height:100%;object-fit:cover;display:block}
.ft-item small{position:absolute;left:0;right:0;bottom:0;padding:10px 5px 3px;font-size:10px;font-weight:600;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-carregando{display:flex;align-items:center;justify-content:center;height:100%;font-size:20px}
.ft-vazio{grid-column:1/-1;text-align:center;color:var(--muted);padding:34px 12px;border:1px dashed var(--line);border-radius:var(--r)}
.ft-viewer{position:fixed;inset:0;z-index:10200;background:rgba(0,0,0,.96);display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
.ft-viewer>img{flex:1;min-height:0;width:100%;object-fit:contain}
.ft-v-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;color:#ddd;font-size:13px}
.ft-v-x{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:18px}
.ft-v-bar{display:grid;grid-template-columns:52px 1fr 52px 52px;gap:8px;padding:10px 12px 14px}
.ft-v-bar button,.ft-v-btn{min-height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;text-decoration:none}
.ft-v-btn{font-size:15px}
.ft-v-bar .ft-v-del{color:var(--danger);border-color:rgba(239,68,68,.5)}
.ft-v-bar button:disabled{opacity:.25}

/* ===================== Meu Perfil: cartão do próximo jogo (v7.5) ===================== */
.pf-jogo{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.pf-jogo-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:var(--acc);text-transform:uppercase;letter-spacing:.06em}
.pf-jogo-top small{color:var(--muted);font-weight:700;text-transform:none;letter-spacing:0;font-size:13px}
.pf-vs{font-size:20px;font-weight:900}
/* Confronto com escudos + uniforme (perfil e jornada) */
.cf-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 8px}
.cf-time,.cf-kit{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;max-width:84px}
.cf-time small,.cf-kit small{font-size:11px;font-weight:800;color:var(--muted);text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:84px}
.cf-esc{width:52px;height:52px;object-fit:contain;flex-shrink:0}
.cf-ini{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--s2);border:1px solid var(--line);font-size:22px;font-weight:900;color:var(--muted)}
.cf-x{font-size:20px;font-weight:900;color:var(--muted)}
.cf-kit{margin-left:6px;padding-left:12px;border-left:1px dashed var(--line)}
.cf-kit img{width:48px;height:52px;object-fit:contain}
.pf-local{font-size:13px;color:var(--muted)}
.pf-local a{color:var(--acc);font-weight:700;text-decoration:none}
.pf-status{padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.4;margin-top:4px}
.pf-status.ok{background:var(--ok-soft);color:var(--ok)}
.pf-status.sup{background:var(--warn-soft);color:var(--warn)}
.pf-status.no{background:var(--danger-soft);color:var(--danger)}
.pf-status.off{background:var(--s2);color:var(--muted)}
.pf-bloco{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.5;padding-top:6px;border-top:1px dashed var(--line)}
.pf-bloco b{font-size:12px}
.pf-bloco.ok b{color:var(--ok)} .pf-bloco.sup b{color:var(--warn)} .pf-bloco.no b{color:var(--danger)}
.pf-bloco span{color:var(--txt)}
/* v7.5: confirmação sempre na frente de tudo (inclusive da foto em tela cheia) */
.cf-sheet{z-index:10500!important}

/* ===================== MEU PERFIL v7.7 ===================== */
.pf-sec{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.pf-sec.alerta{border-color:rgba(239,68,68,.5);background:linear-gradient(135deg,var(--danger-soft),var(--s1) 70%)}
.pf-sec-t{font-size:12px;font-weight:800;color:var(--acc);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}
.pf-sec-t small{color:var(--muted);font-weight:700;letter-spacing:0}
.pf-muted{color:var(--muted);font-size:12px;line-height:1.4}
.pf-pend{display:flex;gap:12px;align-items:flex-start}
.pf-pend b{font-size:24px;font-weight:900;color:var(--danger);white-space:nowrap}
.pf-pend span{font-size:13px;line-height:1.5;color:var(--txt)}
.pf-ovr{display:flex;gap:12px;align-items:center}
.pf-ovr-n{width:64px;height:64px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:var(--acc-text);background:linear-gradient(135deg,var(--acc),#b49b09)}
.pf-ovr-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-ovr-t>b{font-size:13px;letter-spacing:.1em;color:var(--acc)}
.pf-ovr-t small{font-size:12px;color:var(--muted);line-height:1.35}
.pf-ovr-t small b{color:var(--txt)}
.pf-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pf-nums>div{background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:8px 4px;display:flex;flex-direction:column;align-items:center}
.pf-nums b{font-size:22px;font-weight:900}
.pf-nums small{font-size:11px;color:var(--muted)}
.pf-linhas{display:flex;flex-wrap:wrap;gap:6px}
.pf-linhas span{font-size:12px;background:var(--s2);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.pf-cq{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.pf-cq-i{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border-radius:12px;border:1px dashed var(--line);opacity:.55}
.pf-cq-i i{font-style:normal;font-size:20px;filter:grayscale(1)}
.pf-cq-i b{font-size:13px}
.pf-cq-i small{font-size:11px;color:var(--muted)}
.pf-cq-i.ok{opacity:1;border-style:solid;border-color:rgba(225,194,10,.45);background:var(--acc-soft)}
.pf-cq-i.ok i{filter:none}
.pf-jogos{display:flex;flex-direction:column}
.pf-jogo-l{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.pf-jogo-l:last-child{border-bottom:none}
.pf-res{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;flex-shrink:0;background:var(--s3)}
.pf-res.v{background:var(--ok-soft);color:var(--ok)} .pf-res.d{background:var(--danger-soft);color:var(--danger)}
.pf-jl-info{flex:1;min-width:0;display:flex;flex-direction:column}
.pf-jl-info b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-jl-info small{font-size:11px;color:var(--muted)}
.pf-jl-st{font-size:13px;white-space:nowrap;flex-shrink:0}
.pf-uni{display:flex;flex-direction:column;gap:6px}
.pf-uni>div{display:flex;flex-direction:column;gap:1px;background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.pf-uni b{font-size:13px} .pf-uni span{font-size:12px;color:var(--muted)}
.pf-editar{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:0 14px;margin-bottom:12px}
.pf-editar>summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:800;font-size:14px;display:flex;flex-direction:column;gap:2px}
.pf-editar>summary::-webkit-details-marker{display:none}
.pf-editar>summary small{font-weight:500;font-size:12px;color:var(--muted)}
.pf-editar[open]{padding-bottom:14px}
/* v7.7: a PÁGINA rola (antes o body tinha altura fixa = tela e rolava por dentro: trocar de aba não voltava ao topo e a barra do navegador não se escondia) */
html{height:auto!important;overflow-x:hidden!important;overflow-y:visible!important}
body{height:auto!important;min-height:100vh;overflow-x:visible!important;overflow-y:visible!important}
@supports (overflow:clip){ body{overflow-x:clip!important} }
/* ...mas quando uma janela (assistente, lista, fotos) trava o fundo, continua travado */
body[style*="overflow: hidden"]{overflow:hidden!important}
/* v7.7.1: dados pessoais sempre visíveis, no topo do Meu Perfil */
.pf-dados{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;margin-bottom:12px}

/* ===================== v8.0 ===================== */

/* janela Novo/Editar jogador */
#playerModal{padding:16px!important;max-height:92vh;overflow-y:auto;border:2px solid var(--acc)!important}
.pm-form{display:flex;flex-direction:column;gap:12px;margin:0}
#playerModalTitle{margin:0!important;text-align:center;color:var(--acc)!important;font-size:17px!important;font-weight:800}
.pm-foto{display:flex;align-items:center;justify-content:center;gap:14px}
.pm-avatar{width:80px;height:80px;flex:0 0 80px;border-radius:50%;background:var(--s2);border:2px solid var(--line);display:grid;place-items:center;overflow:hidden}
.pm-avatar img{width:100%;height:100%;object-fit:cover;display:none}
.pm-avatar span{font-size:34px}
.pm-foto-btns{display:flex;flex-wrap:wrap;gap:6px}
.pm-foto-btns button{min-height:32px;padding:0 10px;font-size:12px;font-weight:700;border-radius:8px;background:var(--s2);color:var(--txt);border:1px solid var(--line);cursor:pointer}
.pm-foto-btns #btnClearPhoto{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.pm-grid{display:grid;gap:10px}
.pm-3-1{grid-template-columns:3fr 1fr}
.pm-2-1{grid-template-columns:2fr 1fr}
.pm-1-2{grid-template-columns:1fr 2fr}
.pm-form label{display:flex;flex-direction:column;gap:4px;min-width:0;font-weight:700}
.pm-form input,.pm-form select{width:100%;min-width:0;padding:9px 10px;border-radius:8px;background:var(--s2);color:var(--txt);border:1px solid var(--line);font:inherit;font-size:14px}
.pm-form input:focus,.pm-form select:focus{outline:none;border-color:var(--acc)}
.pm-foot{display:flex;gap:10px;padding-top:12px}
.pm-foot button{flex:1;min-height:44px;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer}
.pm-foot #cancelPlayer{background:transparent;color:var(--txt);border:1px solid var(--line)}
.pm-foot #savePlayer{background:var(--acc);color:var(--acc-text);border:none}

/* avisar() e perguntar() — mesmas folhas do confirmar() */
.cf-botoes.cf-um{grid-template-columns:1fr}
.cf-form{margin:0}
.cf-input{width:100%;min-height:46px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--s2);color:var(--txt);border:1px solid var(--line);font-size:16px}
.cf-input:focus{outline:none;border-color:var(--acc)}
.cf-corpo{white-space:normal;word-break:break-word;user-select:text}

/* Caixa → Backup */
.cx-versao{font-size:11px!important;color:var(--faint)!important;text-align:center}
/* Caixa: botões em 2 colunas (em 3 o "Corrigir saldo" passava da borda no celular) */
.cx-btns{grid-template-columns:1fr 1fr!important}
.cx-btns button{min-width:0;white-space:normal!important;padding:0 8px!important}

/* Formação: confirmados fora da escalação */
.fora-esc{margin-top:10px;padding:10px 12px;background:var(--s1);border:1px dashed var(--acc);border-radius:var(--r)}
.fe-titulo{font-size:12px;font-weight:800;color:var(--acc);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.fe-lista{display:flex;flex-wrap:wrap;gap:6px}
.fe-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 10px;border-radius:10px;background:var(--s2);border:1px solid var(--line);color:var(--txt);font-size:13px;font-weight:700;cursor:pointer}
.fe-chip small{font-size:10px;font-weight:600;color:var(--muted)}
#btnDesfazerFormacao:disabled{opacity:.4}

/* Lista do WhatsApp: quem começa no banco, por posição */
.ls-grupo{margin-bottom:10px}
.ls-grupo-t{font-size:12px;font-weight:800;color:var(--acc);margin-bottom:6px}
.ls-grupo-t small{color:var(--muted);font-weight:600}
.ls-chips{display:flex;flex-wrap:wrap;gap:6px}
.ls-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:92px;padding:7px 10px;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;text-align:left}
.ls-chip small{font-size:10px;font-weight:600}
.ls-chip.tit{background:var(--acc-soft);border:1px solid var(--acc);color:var(--txt)}
.ls-chip.tit small{color:var(--acc)}
.ls-chip.banco{background:var(--s2);border:1px dashed var(--line);color:var(--muted)}
.ls-chip.fixo{box-shadow:inset 0 0 0 1px var(--acc)}
.ls-chip:disabled{cursor:default;opacity:.8}
.ls-auto{background:none;border:none;color:var(--acc);font-weight:700;font-size:12px;padding:0;cursor:pointer;text-decoration:underline}

/* =====================================================================
   ⏱️ AO VIVO — placar, cronômetro e painel de lances
   ===================================================================== */
.av-overlay{z-index:10050!important}
.av-panel{max-width:560px}
.av-top-btn{background:var(--s2);border:1px solid var(--line);color:var(--txt);width:36px;height:36px;border-radius:10px;font-size:16px;line-height:1;flex-shrink:0;cursor:pointer}

/* placar */
.av-placar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px 14px 10px;background:linear-gradient(180deg,rgba(225,194,10,.09),transparent);border-bottom:1px solid var(--line)}
.av-time{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.av-time img{width:46px;height:46px;object-fit:contain}
.av-time small{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-ini{width:46px;height:46px;display:grid;place-items:center;border-radius:10px;background:var(--s2);border:1px solid var(--line);font-size:22px;font-weight:900;color:var(--muted)}
.av-gols{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.av-gols b{font-size:40px;font-weight:900;line-height:1;color:var(--txt)}
.av-gols i{font-style:normal;font-size:20px;color:var(--faint)}

/* cronômetro */
.av-crono{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--s1);border-bottom:1px solid var(--line)}
.av-crono.on{background:linear-gradient(180deg,rgba(34,197,94,.10),var(--s1))}
.av-clock{display:flex;flex-direction:column;line-height:1.05;min-width:96px}
.av-clock b{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.av-crono.on .av-clock b{color:var(--ok)}
.av-clock small{font-size:11px;font-weight:700;color:var(--muted)}
.av-crono-btns{flex:1;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.av-crono-btns button{min-height:38px;padding:0 12px;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.av-play{background:linear-gradient(180deg,var(--acc-2),var(--acc));border:1px solid var(--acc);color:var(--acc-text);flex:1}
.av-ghost{background:var(--s2);border:1px solid var(--line);color:var(--txt)}

.av-body{padding-bottom:16px}
.av-aviso{background:var(--acc-soft);border:1px solid var(--acc);border-radius:var(--r-sm);padding:9px 11px;font-size:13px;color:var(--txt)}
.av-aviso.ok{background:var(--ok-soft);border-color:var(--ok)}

/* painel de lances */
.av-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.av-bt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:76px;padding:8px 4px;
  background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .08s,background .12s}
.av-bt i{font-style:normal;font-size:26px;line-height:1}
.av-bt span{font-size:11px;font-weight:800;text-align:center;line-height:1.15}
.av-bt:active{transform:scale(.94);background:var(--s3)}
.av-bt.forte{background:var(--acc-soft);border-color:var(--acc)}
.av-bt.forte span{color:var(--acc)}
.av-bt.extra{opacity:.78}

/* linha do tempo */
.av-linha-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.av-link{background:none;border:none;padding:0;color:var(--acc);font-size:12px;font-weight:800;text-decoration:underline;cursor:pointer}
.av-linha{display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.av-ev{display:grid;grid-template-columns:42px 30px 1fr 22px;align-items:center;gap:8px;padding:8px 10px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.av-ev:active{background:var(--s3)}
.av-ev-min{font-size:15px;font-weight:900;color:var(--acc);font-variant-numeric:tabular-nums}
.av-ev-ico{font-size:19px;text-align:center}
.av-ev-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.av-ev-txt b{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-ev-txt small{font-size:10px;font-weight:700;color:var(--muted)}
.av-ev-txt b small{font-size:11px;font-weight:700;color:var(--muted)}
.av-ev-x{color:var(--faint);font-size:16px;text-align:center}
.av-vazio{padding:14px;text-align:center;font-size:13px;color:var(--muted);background:var(--s1);border:1px dashed var(--line);border-radius:var(--r-sm)}

/* quem está em campo */
.av-elenco{margin-top:4px;padding:10px 12px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r)}
.av-elenco-t{font-size:11px;font-weight:800;color:var(--acc);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.av-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.av-chip{padding:4px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:700;background:var(--s2);border:1px solid var(--line);color:var(--txt)}
.av-chip.campo{background:var(--acc-soft);border-color:var(--acc)}
.av-chip.vazio{color:var(--faint);border-style:dashed}
.av-foot button{min-height:46px}

/* folha de escolher jogador */
.av-sheet .av-sh-panel{max-height:84vh;display:flex;flex-direction:column}
.av-sh-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 0 8px}
.av-sh-t{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 6px}
.av-sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.av-sh-bt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 3px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt);cursor:pointer}
.av-sh-bt:active{background:var(--s3);transform:scale(.95)}
.av-sh-bt img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--s3)}
.av-sh-bt em{width:42px;height:42px;border-radius:50%;background:var(--s3);display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:900;color:var(--muted)}
.av-sh-bt span{font-size:10.5px;font-weight:800;line-height:1.1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.av-sh-nenhum{width:100%;min-height:42px;margin-top:8px;border-radius:12px;background:var(--s2);border:1px dashed var(--line);color:var(--muted);font-size:13px;font-weight:800;cursor:pointer}
@media (min-width:420px){ .av-sh-grid{grid-template-columns:repeat(5,1fr)} }

/* =====================================================================
   🎬 REPLAY — player do resumo animado
   ===================================================================== */
.rp-overlay{z-index:10060!important;background:rgba(0,0,0,.93)!important}
.rp-panel{width:100%;max-width:560px;height:100%;display:flex;flex-direction:column;background:#000}
.rp-top{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--s1);border-bottom:1px solid var(--line)}
.rp-tela{flex:1;min-height:0;display:grid;place-items:center;padding:10px;position:relative}
.rp-tela canvas{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6);background:#0b0c0a}
.rp-grav{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:var(--danger);color:#fff;font-size:12px;font-weight:800;
  padding:6px 12px;border-radius:var(--r-pill);box-shadow:0 4px 14px rgba(0,0,0,.5);animation:rpPulse 1.1s ease-in-out infinite}
.rp-grav[hidden]{display:none}
@keyframes rpPulse{0%,100%{opacity:1}50%{opacity:.45}}
.rp-barra{display:flex;align-items:center;gap:10px;padding:0 16px 8px}
.rp-prog{flex:1;height:5px;border-radius:3px;background:var(--s3);overflow:hidden}
.rp-prog i{display:block;height:100%;width:0;background:var(--acc);border-radius:3px}
.rp-barra small{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.rp-foot{display:flex;align-items:center;gap:8px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--s1);border-top:1px solid var(--line)}
.rp-bt{min-width:46px;min-height:46px;border-radius:12px;background:var(--s2);border:1px solid var(--line);color:var(--txt);font-size:17px;cursor:pointer}
.rp-salvar{flex:1;min-height:46px;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer}

/* ⏱️ Ao vivo → "marcar onde foi no campo" (minicampo da folha) */
.av-cp-panel{max-height:92vh;display:flex;flex-direction:column}
.av-cp-dica{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.av-cp-dica b{color:var(--acc)}
.av-cp-wrap{display:grid;place-items:center;flex:1;min-height:0}
.av-cp{max-width:100%;max-height:52vh;width:auto;height:auto;border-radius:12px;touch-action:none;cursor:crosshair;
  box-shadow:0 8px 28px rgba(0,0,0,.5)}
.av-cp-btns{display:flex;gap:8px;margin-top:12px}
.av-cp-btns button{flex:1;min-height:46px;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer}
.av-dica{font-size:11.5px;color:var(--faint);text-align:center;padding:2px 4px}
.av-dica b{color:var(--muted)}

/* Ranking: 5ª aba (Minutos) — cabem 5 colunas com rótulo curto */
.rk-abas{grid-template-columns:repeat(5,1fr)!important}
.rk-abas button{padding-left:2px!important;padding-right:2px!important;font-size:11.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 🎬 Replay: alternar completo / resumo curto */
.rp-modo{display:flex;gap:6px;padding:0 14px 8px}
.rp-modo:empty{display:none}
.rp-modo button{flex:1;min-height:40px;border-radius:10px;background:var(--s2);border:1px solid var(--line);color:var(--muted);
  font-size:12.5px;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.rp-modo button small{font-size:10.5px;font-weight:700;color:var(--faint)}
.rp-modo button.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.rp-modo button.on small{color:var(--acc)}

/* ⏱️ Ao vivo: relógio laranja quando passa do tempo combinado */
.av-clock b.estourou{color:var(--warn)!important}

/* 📣 Cartão "ao vivo" no Meu perfil (só leitura, para o grupo acompanhar) */
.pf-live.rolando{border-color:var(--ok)!important}
.pf-live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:6px;
  animation:pfLive 1.2s ease-in-out infinite}
@keyframes pfLive{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.pf-live-top{display:flex;align-items:center;justify-content:center;gap:10px;padding:4px 0 6px}
.pf-live-top img{width:38px;height:38px;object-fit:contain}
.pf-live-top b{font-size:32px;font-weight:900;font-variant-numeric:tabular-nums}
.pf-live-top i{font-style:normal;color:var(--faint)}
.pf-live-ini{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:var(--s2);border:1px solid var(--line);font-weight:900;color:var(--muted)}
.pf-live-sub{text-align:center;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:8px}
.pf-live-evs{display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.pf-live-evs span{display:flex;gap:7px;align-items:baseline;padding:3px 0;border-bottom:1px dashed var(--line)}
.pf-live-evs span:last-child{border-bottom:none}
.pf-live-evs em{font-style:normal;font-weight:900;color:var(--acc);min-width:32px;font-variant-numeric:tabular-nums}
.pf-live-bt{width:100%;min-height:42px;margin-top:10px;border-radius:12px;background:var(--s2);border:1px solid var(--line);
  color:var(--txt);font-size:13px;font-weight:800;cursor:pointer}

/* ===================== TABELA DE PONTOS (Perfil) ===================== */
.tp-box{border:1px solid var(--line);border-radius:12px;background:var(--s2);overflow:hidden}
.tp-box>summary{cursor:pointer;list-style:none;padding:10px 12px;font-size:13px;font-weight:800;color:var(--acc)}
.tp-box>summary::-webkit-details-marker{display:none}
.tp-box>summary::after{content:'▾';float:right;transition:transform .18s}
.tp-box[open]>summary::after{transform:rotate(180deg)}
.tp-lista{list-style:none;margin:0;padding:0 12px 2px}
.tp-lista li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-top:1px dashed var(--line);font-size:13px}
.tp-lista li:first-child{border-top:none}
.tp-lista li b{font-weight:900;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.tp-lista li.pos b{color:var(--ok)}
.tp-lista li.neg b{color:var(--danger)}
.tp-rodape{margin:2px 12px 12px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.tp-rodape b{color:var(--acc)}
.tp-inst{width:100%;margin-top:12px;min-height:44px;border-radius:12px;font-weight:800}
.pf-jl-pts{font-variant-numeric:tabular-nums;color:var(--acc);font-weight:900}

/* ===================== BANNER "INSTALAR O APP" ===================== */
/* Fica logo abaixo da barra de topo: no rodapé o menu de abas (z-index 9995) cobria o convite. */
.inst-banner{
  position:fixed;left:10px;right:10px;z-index:9996;
  top:calc(var(--topbar) + env(safe-area-inset-top,0px) + 8px);
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--s1);border:1px solid var(--acc);border-radius:16px;
  box-shadow:0 10px 30px var(--shadow);
  opacity:0;transform:translateY(-14px);transition:opacity .22s,transform .22s
}
.inst-banner.on{opacity:1;transform:translateY(0)}
.inst-banner[hidden]{display:none}
.inst-ico{width:38px;height:38px;border-radius:9px;flex:none}
.inst-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.inst-txt b{font-size:13.5px;line-height:1.2}
.inst-txt small{font-size:11px;color:var(--muted);line-height:1.3}
.inst-banner .primary{flex:none;min-height:38px;padding:0 14px;border-radius:10px;font-weight:800;font-size:13px}
.inst-x{flex:none;width:28px;height:28px;padding:0;border:none;background:transparent;
  color:var(--muted);font-size:15px;cursor:pointer;line-height:1}
@media (min-width:720px){ .inst-banner{left:auto;right:16px;max-width:400px} }
/* enquanto o convite aparece, empurra o conteúdo pra baixo pra ele não cobrir nada */
body:has(#instalarBanner.on) aside.side{ padding-top:76px!important }

/* ---------- sem zoom automático ao tocar num campo ----------
   iOS/Safari dá zoom na página sozinho quando o campo tem letra menor que 16px.
   Fixando 16px em todo campo de digitação, a página fica sempre do tamanho da tela.
   (o zoom com dois dedos continua funcionando, de propósito) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea{
  font-size:16px!important;
}