/* Futebol dos Amigos — identidade "noite de estádio"
   Placar em azul-noite, ações em verde-relva, neutros calmos.
   Fonte: Archivo (variável em largura e peso), condensada no placar. */
@font-face {
  font-family: "Archivo";
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --noite: #0f1b2d;
  --noite-2: #16253c;
  --noite-3: #22324d;
  --relva: #13875a;
  --relva-viva: #1fa971;
  --relva-clara: #e3f5ec;
  --relva-media: #bfe8d3;
  --relva-texto: #0f6e49;
  --nevoa: #f2f4f7;
  --papel: #ffffff;
  --linha: #e3e7ed;
  --linha-2: #eef1f5;
  --grafite: #18212f;
  --cinza: #5b6577;
  --cinza-2: #98a2b3;
  --cinza-3: #3a4556;
  --ouro: #f2bf4a;
  --ouro-fundo: #fff4db;
  --ouro-texto: #8a5a00;
  --prata: #b9c3d0;
  --bronze: #d0956a;
  --alerta: #e5484d;
  --alerta-fundo: #ffedee;
  --alerta-texto: #c3343a;
  --azul-fundo: #e9eeff;
  --azul-texto: #3355c7;
  --violeta-fundo: #f1ecff;
  --violeta-texto: #5b3fc4;
  --t0: #ef5a5a; --t1: #3e7bfa; --t2: #f2a33a; --t3: #1eb59a;
  --t4: #8e6cf4; --t5: #5c6b82; --t6: #e05bb0; --t7: #1fa8d1;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 14px -6px rgba(16, 24, 40, 0.1);
  --sombra-forte: 0 18px 40px -18px rgba(15, 27, 45, 0.55);
  --raio: 20px;
  --raio-m: 14px;
  --fonte: "Archivo", "Segoe UI", system-ui, sans-serif;
  --menu-alt: 66px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nevoa);
  color: var(--grafite);
  font: 400 16px/1.5 var(--fonte);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--relva); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--relva-viva); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ícones */
.ic { flex: none; display: inline-block; vertical-align: middle; }
.ic .ic-fill { fill: currentColor; fill-opacity: 0.2; }
.chip-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--linha-2); color: var(--cinza-3);
}
.chip-ic.grande { width: 48px; height: 48px; border-radius: 15px; }
.tom-verde { background: var(--relva-clara); color: var(--relva); }
.tom-ouro { background: var(--ouro-fundo); color: #c98700; }
.tom-azul { background: var(--azul-fundo); color: var(--azul-texto); }
.tom-alerta { background: var(--alerta-fundo); color: #d93b41; }
.tom-violeta { background: var(--violeta-fundo); color: #6b4fd8; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
}
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.marca-icone {
  width: 38px; height: 38px; border-radius: 11px; background: var(--noite); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.marca-icone { overflow: hidden; }
.marca-icone img { width: 100%; height: 100%; display: block; }
.marca-nome { font-weight: 760; font-size: 17px; letter-spacing: -0.01em; font-stretch: 105%; white-space: nowrap; }
.marca-sub { display: block; font-size: 12.5px; color: var(--cinza); font-weight: 400; }
.topo-usuario { display: flex; align-items: center; gap: 8px; }
.pilula {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 999px; background: var(--papel); border: 1px solid var(--linha);
  color: var(--grafite); text-decoration: none; font-size: 13.5px; font-weight: 620; white-space: nowrap;
}
.pilula .ic { color: var(--relva); }
.papel-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; background: var(--azul-fundo); color: var(--azul-texto);
}
.papel-chip.admin { background: var(--violeta-fundo); color: var(--violeta-texto); }
.avatar-topo {
  width: 34px; height: 34px; border-radius: 50%; background: var(--noite); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 720; text-decoration: none;
}

.aviso-conexao {
  margin: 0 16px 8px; padding: 10px 14px; border-radius: var(--raio-m);
  background: var(--alerta-fundo); color: var(--alerta-texto); font-weight: 600; font-size: 14.5px;
  display: flex; gap: 8px; align-items: flex-start;
}

/* ---------- estrutura ---------- */
.estrutura { display: block; }
.conteudo {
  max-width: 760px; margin: 0 auto; outline: none;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(var(--menu-alt) + 40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.conteudo > div { display: flex; flex-direction: column; gap: 16px; }

/* menu inferior (celular) */
.menu {
  position: fixed; z-index: 20;
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: var(--menu-alt); border-radius: 22px; background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 10px 30px -10px rgba(16, 24, 40, 0.28), 0 1px 2px rgba(16, 24, 40, 0.06);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; padding: 0 6px;
}
.menu a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none;
  color: #667085; font-size: 11.5px; font-weight: 600; min-height: 56px; justify-content: center;
}
.menu .menu-ic { width: 48px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
.menu a[aria-current="page"] { color: var(--relva); font-weight: 720; }
.menu a[aria-current="page"] .menu-ic { background: var(--relva-clara); }
.menu a[aria-current="page"] .ic-fill { fill-opacity: 0.32; }
.menu-titulo { display: none; }

@media (min-width: 900px) {
  .estrutura { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100dvh - 64px); }
  .menu {
    position: sticky; top: 0; left: auto; right: auto; bottom: auto; align-self: start;
    height: calc(100dvh - 92px); min-height: 420px; margin: 0 0 16px 16px; border-radius: 24px;
    background: var(--noite); backdrop-filter: none; box-shadow: var(--sombra-forte);
    display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
  }
  .menu-titulo { display: block; color: rgba(255,255,255,0.45); font-size: 12px; font-weight: 600; padding: 4px 12px 8px; }
  .menu a {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 46px; padding: 0 12px;
    border-radius: 13px; color: rgba(255, 255, 255, 0.72); font-size: 15px;
  }
  .menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .menu .menu-ic { width: auto; height: auto; background: none !important; }
  .menu a[aria-current="page"] { background: rgba(31, 169, 113, 0.18); color: #fff; }
  .menu a[aria-current="page"] .ic { color: #5bd39f; }
  .conteudo { padding-bottom: 48px; padding-top: 8px; }
  .topo { padding-left: 24px; padding-right: 24px; }
}

/* ---------- tipografia ---------- */
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: 26px; font-weight: 780; font-stretch: 105%; }
h2 { font-size: 18px; font-weight: 740; font-stretch: 104%; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
.suave { color: var(--cinza); }
.pequeno { font-size: 13.5px; }
.carregando { color: var(--cinza); padding: 48px 0; text-align: center; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cabeca .suave { font-size: 13.5px; }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.secao-titulo a { font-size: 13.5px; font-weight: 620; text-decoration: none; }

/* ---------- cartões ---------- */
.bloco {
  background: var(--papel); border-radius: var(--raio); padding: 16px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.bloco > h2 { font-size: 16.5px; }
.linha-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grade-2 { display: grid; gap: 12px; }
@media (min-width: 600px) { .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grade-3 { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--raio-m);
  border: 1.5px solid #d5dbe3; background: var(--papel); color: var(--grafite);
  font-size: 15px; font-weight: 650; cursor: pointer; text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.botao:active { transform: scale(0.98); }
.botao.principal { background: var(--relva); border-color: var(--relva); color: #fff; font-weight: 720; box-shadow: 0 10px 24px -12px rgba(19, 135, 90, 0.8); }
.botao.principal:hover { background: #107a51; }
.botao.grande { min-height: 56px; width: 100%; font-size: 16.5px; border-radius: 18px; }
.botao.perigo { background: var(--alerta-fundo); border-color: var(--alerta-fundo); color: var(--alerta-texto); }
.botao.perigo.principal { background: var(--alerta); border-color: var(--alerta); color: #fff; box-shadow: none; }
.botao.discreto { border-color: transparent; background: transparent; padding: 0 8px; min-height: 36px; color: var(--cinza); font-weight: 600; }
.botao.pequeno-b { min-height: 38px; padding: 0 12px; font-size: 14px; border-radius: 12px; }
.botao:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.botao-icone { width: 40px; min-height: 40px; padding: 0; border-radius: 12px; }

/* tiles de ação */
.acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acao {
  min-height: 66px; border-radius: 18px; border: 0; background: var(--papel); box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--grafite); cursor: pointer; text-align: left; text-decoration: none;
}
.acao b { display: block; font-size: 14.5px; font-weight: 700; }
.acao small { display: block; font-size: 12.5px; color: var(--cinza); }
.acao:active { transform: scale(0.98); }

/* ---------- camisas e times ---------- */
.camisa { flex: none; }
.camisa text { font-family: var(--fonte); font-weight: 800; }
.time-linha { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha-2); }
.time-linha:first-of-type { border-top: 0; }
.time-linha .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.time-linha .nome-time { font-weight: 720; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.time-linha .jogs { font-size: 14px; color: var(--cinza-3); }
.time-linha .gk { font-size: 12.5px; color: var(--cinza); display: flex; align-items: center; gap: 5px; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 650; background: var(--ouro-fundo); color: var(--ouro-texto); white-space: nowrap;
}
.etiqueta.ok { background: var(--relva-clara); color: var(--relva-texto); }
.etiqueta.erro { background: var(--alerta-fundo); color: var(--alerta-texto); }
.etiqueta.neutra { background: var(--linha-2); color: var(--cinza-3); }
.etiqueta.violeta { background: var(--violeta-fundo); color: var(--violeta-texto); }
.ordem { font-size: 11.5px; font-weight: 720; padding: 3px 8px; border-radius: 99px; background: var(--linha-2); color: var(--cinza); }
.ordem.primeiro { background: var(--relva-clara); color: var(--relva); }

.fila-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.fila-card { background: var(--papel); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra); min-width: 0; }
.fila-card .topo-card { display: flex; align-items: center; justify-content: space-between; }
.fila-card b { font-size: 14px; }
.fila-card span.jogs { font-size: 12px; color: var(--cinza); line-height: 1.35; }

/* avatares */
.foto {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #e8ecf2;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 720; color: var(--cinza-3);
}
.pilha { display: flex; }
.pilha .foto { width: 32px; height: 32px; border: 2px solid var(--papel); font-size: 11.5px; }
.pilha .foto + .foto { margin-left: -9px; }

/* ---------- placar (cartão escuro) ---------- */
.placar {
  position: relative; overflow: hidden; border-radius: 24px; background: var(--noite); color: #fff;
  padding: 16px; box-shadow: var(--sombra-forte); display: flex; flex-direction: column; gap: 12px;
}
.placar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background:
    radial-gradient(circle at 50% 50%, transparent 68px, #fff 69px, #fff 70.5px, transparent 71.5px),
    linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat;
}
.placar > * { position: relative; }
.placar .faixa { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,0.62); }
.ao-vivo {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px;
  background: rgba(229, 72, 77, 0.16); color: #ff8a8d; font-size: 12.5px; font-weight: 650;
}
.ao-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--alerta); box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.28); }
@media (prefers-reduced-motion: no-preference) { .ao-vivo::before { animation: pulsa 1.6s ease-in-out infinite; } }
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0.05); } }
.aguardando { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); font-size: 12.5px; font-weight: 620; }
.relogio-bloco { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.relogio { font-size: 70px; line-height: 1; font-weight: 800; font-stretch: 70%; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.relogio.fim { color: var(--ouro); }
.progresso { width: 170px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
.progresso > i { display: block; height: 100%; width: 0; background: var(--relva-viva); border-radius: 99px; transition: width 0.4s linear; }
.relogio.fim + .progresso > i { background: var(--ouro); }
.confronto { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.confronto .lado { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; min-width: 0; }
.confronto .lado b { font-size: 14.5px; font-weight: 680; }
.confronto .lado small { font-size: 11.5px; color: rgba(255,255,255,0.58); }
.confronto .gols-meio { display: flex; align-items: center; gap: 10px; }
.gols-grande { font-size: 58px; line-height: 1; font-weight: 800; font-stretch: 70%; font-variant-numeric: tabular-nums; }
.traco { font-size: 22px; color: rgba(255,255,255,0.35); }
.placar .rodape { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; font-size: 12.5px; color: rgba(255,255,255,0.72); display: flex; gap: 8px; align-items: center; }
.placar .rodape .ic { color: var(--relva-viva); }
.alerta-fim {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: var(--ouro); color: var(--noite); font-weight: 740; font-size: 15px; padding: 10px 12px; border-radius: 14px;
}
.alerta-fim.escuro { background: rgba(229,72,77,0.16); color: #ffb0b2; }

/* placar do responsável: um bloco por time */
.lados-jogo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lado-jogo {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 10px; border-radius: 18px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); min-width: 0;
}
.lado-jogo .cab { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.lado-jogo small { font-size: 11.5px; color: rgba(255,255,255,0.6); text-align: center; }
.botao-gol {
  width: 100%; height: 48px; border: 0; border-radius: 14px; color: #fff; font-size: 15.5px; font-weight: 720;
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: var(--t0);
}
.botao-gol:active { transform: scale(0.97); }

/* gols anotados */
.gol-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.gol-item .nome { flex: 1; min-width: 0; font-size: 14px; font-weight: 620; }
.gol-item .nome small { color: var(--cinza); font-weight: 500; font-size: 13px; }

/* ---------- listas ---------- */
.lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.lista li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linha-2); min-width: 0; }
.lista li:first-child { border-top: 0; }
.lista .cresce { flex: 1; min-width: 0; }
.lista .cresce b { font-weight: 660; }
.lista .num { font-size: 22px; font-weight: 800; font-stretch: 75%; font-variant-numeric: tabular-nums; }
.pos { width: 24px; text-align: right; font-size: 15px; font-weight: 750; color: var(--cinza-2); font-variant-numeric: tabular-nums; flex: none; }
.barra { height: 5px; border-radius: 99px; background: var(--linha-2); margin-top: 5px; overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 99px; background: var(--relva-viva); }

/* segmentado */
.abas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: #e6eaf0; border-radius: 14px; }
.abas button { height: 40px; border: 0; border-radius: 11px; background: transparent; font-size: 14px; font-weight: 620; color: var(--cinza); cursor: pointer; }
.abas button[aria-pressed="true"] { background: var(--papel); color: var(--grafite); font-weight: 720; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); }

/* pódio */
.podio { border-radius: 24px; background: var(--noite); color: #fff; padding: 18px 12px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; overflow: hidden; box-shadow: var(--sombra-forte); }
.podio .degrau { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.podio .nome { font-size: 14px; font-weight: 660; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio .av { position: relative; }
.podio .av .foto { width: 56px; height: 56px; font-size: 16px; background: var(--noite-3); color: #fff; border: 3px solid var(--prata); }
.podio .ouro .av .foto { width: 68px; height: 68px; font-size: 19px; border-color: var(--ouro); }
.podio .bronze .av .foto { border-color: var(--bronze); }
.podio .medalha { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--noite); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--noite); background: var(--prata); }
.podio .ouro .medalha { background: var(--ouro); }
.podio .bronze .medalha { background: var(--bronze); }
.podio .coluna { width: 100%; border-radius: 14px 14px 0 0; background: rgba(255,255,255,0.07); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.podio .coluna b { font-size: 30px; line-height: 1; font-weight: 800; font-stretch: 70%; }
.podio .coluna small { font-size: 11.5px; color: rgba(255,255,255,0.6); }
.podio .ouro .coluna { background: rgba(242, 191, 74, 0.16); height: 100px; }
.podio .ouro .coluna b { color: #f6c453; font-size: 38px; }
.podio .prata .coluna { height: 76px; }
.podio .bronze .coluna { height: 60px; }
.podio .coroa { color: var(--ouro); }
.podio .coroa .ic-fill { fill-opacity: 0.9; }

/* histórico */
.partida-hist { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--linha-2); }
.partida-hist:first-child { border-top: 0; padding-top: 2px; }
.partida-hist .meta { font-size: 12.5px; color: var(--cinza); display: flex; gap: 8px; align-items: center; }
.partida-hist .resultado { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.partida-hist .resultado .lado { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 680; font-size: 14.5px; }
.partida-hist .resultado .lado-b { justify-content: flex-end; }
.placar-txt { font-size: 28px; line-height: 1; font-weight: 800; font-stretch: 72%; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; }
.partida-hist details { font-size: 14px; }
.partida-hist summary { cursor: pointer; color: var(--relva); font-weight: 620; min-height: 32px; display: flex; align-items: center; gap: 6px; list-style: none; }
.partida-hist summary::-webkit-details-marker { display: none; }
.partida-hist summary .ic { transition: transform 0.2s ease; }
.partida-hist details[open] summary .ic { transform: rotate(90deg); }
.detalhe-times { display: grid; gap: 12px; margin-top: 6px; }
@media (min-width: 600px) { .detalhe-times { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detalhe-times ul { margin: 4px 0 0; padding-left: 18px; color: var(--cinza-3); }

/* ---------- formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.campo > span { font-weight: 620; font-size: 14.5px; }
.campo input[type=text], .campo input[type=password], .campo input[type=number], .campo input[type=date], .campo input[type=file], .campo select, .campo textarea, .busca {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid #d5dbe3; border-radius: 13px; background: #fff;
  font-size: 16px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo input:focus, .campo select:focus, .busca:focus { border-color: var(--relva-viva); box-shadow: 0 0 0 4px rgba(31, 169, 113, 0.15); outline: none; }
.campo textarea { min-height: 84px; }
.campo .ajuda { font-size: 13px; color: var(--cinza); }
fieldset.campo { border: 0; padding: 0; min-width: 0; }
form { display: flex; flex-direction: column; gap: 14px; }
.marcar { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; }
.marcar input { width: 22px; height: 22px; accent-color: var(--relva); flex: none; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes label { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border: 1.5px solid #d5dbe3; border-radius: 13px; background: #fff; cursor: pointer; font-size: 14.5px; }
.opcoes input { accent-color: var(--relva); width: 18px; height: 18px; }
.opcoes label:has(input:checked) { border-color: var(--relva); background: var(--relva-clara); font-weight: 650; color: var(--relva-texto); }
.erro-form { background: var(--alerta-fundo); color: var(--alerta-texto); padding: 10px 14px; border-radius: 13px; font-weight: 560; font-size: 14.5px; }
.nota-aviso { background: var(--ouro-fundo); color: #6b4700; padding: 10px 14px; border-radius: 13px; font-size: 14.5px; display: flex; gap: 8px; align-items: flex-start; }
.nota-aviso .ic { color: #c98700; margin-top: 2px; }
.nota-ok { background: var(--relva-clara); color: var(--relva-texto); padding: 10px 14px; border-radius: 13px; font-size: 14.5px; display: flex; gap: 8px; align-items: flex-start; }
.nota-ok .ic { margin-top: 2px; }

.nivel { display: inline-flex; gap: 3px; vertical-align: middle; }
.nivel i { width: 8px; height: 8px; border-radius: 3px; background: var(--linha); display: inline-block; }
.nivel i.on { background: var(--relva-viva); }

/* ---------- modal ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(15, 27, 45, 0.55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal {
  background: var(--nevoa); width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto;
  border-radius: 24px 24px 0 0; padding: 20px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 -10px 40px rgba(15,27,45,0.25);
}
.modal::before { content: ""; align-self: center; width: 40px; height: 5px; border-radius: 99px; background: #cfd5de; margin-top: -8px; }
@media (min-width: 600px) { .modal-fundo { align-items: center; } .modal { border-radius: 24px; } .modal::before { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .modal { animation: sobe 0.22s ease-out; }
  @keyframes sobe { from { transform: translateY(24px); opacity: 0.6; } }
}
.escolher-jogador { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.escolher-jogador button { min-height: 52px; border: 1.5px solid #d5dbe3; background: #fff; border-radius: 13px; font-weight: 620; cursor: pointer; padding: 6px 10px; display: flex; align-items: center; gap: 8px; text-align: left; }
.escolher-jogador button:active { background: var(--relva-clara); border-color: var(--relva); }
.maos { display: flex; justify-content: center; gap: 22px; }
.mao { text-align: center; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.mao b { font-size: 60px; line-height: 1; font-weight: 800; font-stretch: 70%; color: var(--violeta-texto); }
.centro-txt { text-align: center; }

/* ---------- avisos rápidos ---------- */
.avisos { position: fixed; left: 0; right: 0; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 12px; }
.aviso { pointer-events: auto; background: var(--noite); color: #fff; padding: 11px 16px; border-radius: 14px; max-width: 520px; font-weight: 560; font-size: 15px; box-shadow: 0 12px 30px -10px rgba(15,27,45,0.45); display: flex; gap: 8px; align-items: center; }
.aviso.erro { background: #8f1f24; }
.aviso.ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--relva-viva); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .aviso { animation: entra 0.2s ease-out; }
  @keyframes entra { from { transform: translateY(-8px); opacity: 0; } }
}

.mudancas { font-size: 14.5px; margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--cinza-3); }
.vazio { text-align: center; padding: 28px 12px; color: var(--cinza); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vazio h2 { color: var(--grafite); }
.auditoria-item { font-size: 14.5px; padding: 12px 0; border-top: 1px solid var(--linha-2); display: flex; gap: 12px; }
.auditoria-item:first-child { border-top: 0; }
.auditoria-item pre { white-space: pre-wrap; word-break: break-word; background: var(--nevoa); padding: 8px; border-radius: 10px; font-size: 12.5px; margin: 4px 0; }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.painel-item { background: var(--papel); border-radius: 18px; padding: 14px; box-shadow: var(--sombra); display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; }
.painel-item b { display: block; font-size: 15px; font-weight: 700; }
.painel-item small { display: block; font-size: 13px; color: var(--cinza); margin-top: 2px; }
.painel-item:hover { box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 10px 24px -10px rgba(16,24,40,0.2); }
.mt { margin-top: 4px; }
.centro { justify-content: center; }
.coroa-mini { color: #c98700; }
.placar .claro { color: rgba(255, 255, 255, 0.72); }
.placar h1 { color: #fff; }

/* cores dos times em botões e bordas */
.tc0 { --tc: var(--t0); } .tc1 { --tc: var(--t1); } .tc2 { --tc: var(--t2); } .tc3 { --tc: var(--t3); }
.tc4 { --tc: var(--t4); } .tc5 { --tc: var(--t5); } .tc6 { --tc: var(--t6); } .tc7 { --tc: var(--t7); }
.botao-gol[class*="tc"] { background: var(--tc); }
.lado-jogo[class*="tc"] { border-color: color-mix(in srgb, var(--tc) 45%, transparent); }
.mudancas.sem-marcador { list-style: none; padding: 0; }
.mudancas.sem-marcador li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lista-gols .gol-item { border-top: 1px solid var(--linha-2); padding: 8px 0; }
.lista-gols .gol-item:first-child { border-top: 0; }

/* ajustes de layout */
.bloco > .botao:not(.grande), form > .botao:not(.grande), .conteudo > div > .botao:not(.grande) { align-self: flex-start; }
.marca > span:last-child { min-width: 0; }
.marca-nome { overflow: hidden; text-overflow: ellipsis; display: block; }
@media (max-width: 599px) { .papel-chip { display: none; } }
@media (min-width: 900px) { .menu { align-items: stretch; } }

/* perfil do jogador */
.papel-chip.jogador { background: var(--relva-clara); color: var(--relva-texto); }
.perfil-topo { display: flex; align-items: center; gap: 14px; }
.perfil-topo h1 { font-size: 24px; }
.perfil-foto .foto { width: 64px; height: 64px; font-size: 20px; background: var(--noite-3); color: #fff; border: 3px solid var(--relva-viva); }
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; }
.numeros div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.numeros b { font-size: 30px; line-height: 1; font-weight: 800; font-stretch: 72%; font-variant-numeric: tabular-nums; }
.numeros small { font-size: 11.5px; color: rgba(255,255,255,0.6); }
.grande-foto { width: 72px; height: 72px; }
.contador { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--alerta); color: #fff; font-size: 12px; font-weight: 750; margin-left: 6px; }
.pedido { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--linha-2); }
.pedido:first-child { border-top: 0; padding-top: 0; }
.pedido .linha { display: flex; align-items: center; gap: 12px; }
.codigo-grupo { font-size: 26px; font-weight: 800; font-stretch: 80%; letter-spacing: 0.04em; }

.link-discreto { cursor: pointer; color: var(--relva); font-weight: 620; font-size: 14px; min-height: 36px; display: flex; align-items: center; }
details[open] > .link-discreto { margin-bottom: 8px; }
.destaque-marcar { background: var(--relva-clara); border-radius: 13px; padding: 0 12px; font-weight: 650; color: var(--relva-texto); }

/* ---------- aplicativo instalável ---------- */
.instalar-cartao { margin-top: 14px; }
.destaque-bloco { box-shadow: 0 0 0 2px var(--relva-viva); }
.passos-ios .ic { vertical-align: -3px; color: var(--azul-texto, #3557c7); }
.instalado-ok { display: flex; gap: 14px; align-items: flex-start; }
.instalado-ok p { margin: 4px 0 0; }
.nova-versao {
  position: fixed; z-index: 70; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--menu-alt, 64px) + 24px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--noite); color: #fff;
  box-shadow: 0 10px 30px rgba(15, 27, 45, .28); max-width: 520px; margin: 0 auto;
}
.nova-versao[hidden] { display: none; }
.nova-versao span { display: inline-flex; align-items: center; gap: 8px; }
.nova-versao .ic { color: var(--relva-viva); }
@media (min-width: 900px) { .nova-versao { bottom: 24px; } }

/* ---------- assinatura do desenvolvedor (WJJN) ---------- */
.assinatura { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--cinza-2); letter-spacing: 0.01em; }
.assinatura img { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.assinatura b { font-weight: 700; color: var(--cinza); letter-spacing: 0.06em; }
.assinatura-tela { margin: 28px 0 4px; opacity: 0.9; }
.assinatura-menu { display: none; }
@media (min-width: 900px) {
  .assinatura-tela { display: none; }
  .assinatura-menu { display: flex; justify-content: flex-start; margin-top: auto; padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.42); }
  .assinatura-menu b { color: rgba(255, 255, 255, 0.62); }
}