:root {
  --bg: #0a0f15;
  --bg2: #0e151d;
  --sup: #121b25;
  --sup2: #172230;
  --sup3: #1d2a3a;
  --borda: #223245;
  --borda2: #2c3f56;
  --txt: #e7eef6;
  --txt2: #a9b8c9;
  --mudo: #74869b;
  --verde: #22c55e;
  --verde2: #16a34a;
  --verde-f: rgba(34, 197, 94, .14);
  --azul: #3b82f6;
  --azul-f: rgba(59, 130, 246, .15);
  --amar: #f5b90b;
  --amar-f: rgba(245, 185, 11, .15);
  --verm: #ef4444;
  --verm-f: rgba(239, 68, 68, .15);
  --roxo: #a78bfa;
  --r: 12px;
  --r2: 8px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  --pos0: #f59e0b; --pos1: #38bdf8; --pos2: #60a5fa; --pos3: #34d399; --pos4: #f87171;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
/* No celular o navegador reescala fontes sozinho e a pagina "anda" de lado; o app
   nunca rola no eixo X, entao travamos os dois comportamentos aqui. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: hidden; overscroll-behavior: none; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
/* touch-action: manipulation tira o atraso do duplo-toque (o toque parece travado
   sem isso). O realce cinza padrao do Android some em favor do :active proprio. */
button, select, input, a, label, [data-acao], [data-ir], [data-tid], [data-sai], .card-jog, .slot, .slot2, .vaga-banco, .item-troca, table.t tr.clic, table.t th.ord {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: var(--azul); }
.oculto { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #243447; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
.num { font-variant-numeric: tabular-nums; }
.mudo { color: var(--mudo); }
.pos-txt { color: var(--verde); } .neg-txt { color: var(--verm); }

/* ============ layout principal ============ */
#app { display: grid; grid-template-columns: 250px 1fr; height: 100vh; }
#lateral { background: var(--bg2); border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
#principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#barra { height: 64px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--borda); background: rgba(10, 15, 21, .85); backdrop-filter: blur(8px); }
#barra h1 { font-size: 19px; margin: 0; font-weight: 700; letter-spacing: -.2px; }
#barra .esp { flex: 1; }
#conteudo { flex: 1; overflow: auto; padding: 22px 24px 40px; min-height: 0; }
#conteudo.cheio { padding: 0; overflow: hidden; }

.marca { padding: 18px 18px 14px; display: flex; align-items: center; gap: 10px; }
.marca .bola { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--verde), #0e7a38); display: grid; place-items: center; font-size: 19px; box-shadow: 0 4px 14px rgba(34,197,94,.35); }
.marca b { font-size: 17px; letter-spacing: 1.5px; font-weight: 800; }
.marca small { display: block; color: var(--mudo); font-size: 11px; letter-spacing: .5px; margin-top: -2px; }

.clube-mini { margin: 4px 12px 10px; padding: 12px; border-radius: var(--r); background: var(--sup); border: 1px solid var(--borda); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.clube-mini .nm { font-weight: 700; font-size: 15px; line-height: 1.2; }
.clube-mini .sub { color: var(--mudo); font-size: 12px; }
.clube-mini .caixa-l { grid-column: 1 / 3; display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borda); font-size: 12.5px; }

nav.menu { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; overflow-y: auto; flex: 1; }
nav.menu button { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 9px 12px; border-radius: 9px; color: var(--txt2); font-weight: 500; text-align: left; position: relative; }
nav.menu button svg { width: 18px; height: 18px; flex: none; opacity: .9; }
nav.menu button:hover { background: var(--sup); color: var(--txt); }
nav.menu button.ativo { background: var(--verde-f); color: var(--verde); }
nav.menu button.ativo::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--verde); }
nav.menu .cont { margin-left: auto; background: var(--verm); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }
nav.menu .sep { height: 1px; background: var(--borda); margin: 8px 6px; }
.lateral-rodape { padding: 12px; border-top: 1px solid var(--borda); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--mudo); }
/* min-width:0 deixa o texto encolher; sem isso os 3 botoes nao cabiam nos 250px
   da barra e ela rolava de lado sozinha. */
.lateral-rodape .modo { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.lateral-rodape .modo .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mudo); display: inline-block; }
.dot.on { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-f); }
.dot.off { background: var(--verm); }

/* ============ componentes ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--sup2); border: 1px solid var(--borda2); color: var(--txt); padding: 8px 14px; border-radius: 9px; font-weight: 600; white-space: nowrap; transition: .12s; }
.btn:hover { background: var(--sup3); border-color: #3a5170; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.prim { background: var(--verde); border-color: var(--verde); color: #04130a; }
.btn.prim:hover { background: #2fd66b; }
.btn.azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.perigo { background: transparent; border-color: rgba(239,68,68,.45); color: #ff8080; }
.btn.perigo:hover { background: var(--verm-f); }
.btn.fant { background: transparent; border-color: transparent; color: var(--txt2); }
.btn.fant:hover { background: var(--sup2); color: var(--txt); }
.btn.peq { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn.grande { padding: 11px 20px; font-size: 15px; border-radius: 11px; }
.btn svg { width: 16px; height: 16px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--sup); border: 1px solid var(--borda); font-size: 12.5px; color: var(--txt2); white-space: nowrap; }
.chip b { color: var(--txt); font-weight: 700; }
.chip.verde { background: var(--verde-f); border-color: rgba(34,197,94,.35); color: var(--verde); }
.chip.amar { background: var(--amar-f); border-color: rgba(245,185,11,.35); color: var(--amar); }

.card { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r); padding: 16px 18px; min-width: 0; }
.card > h3, .card .tit { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--txt2); text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; gap: 8px; }
.card .tit .esp { flex: 1; }
.grade-cards { display: grid; gap: 16px; }
.grade-cards > *, .form-g > * { min-width: 0; }
/* Grades que antes vinham com largura fixa no HTML (minmax(420px), "1fr 1fr").
   Viraram classe para poderem virar uma coluna so no celular. */
.g-auto-lg { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.g-auto-md { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.g-duas { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .g-auto-lg, .g-auto-md, .g-duas { grid-template-columns: 1fr; }
}
.g-painel { grid-template-columns: repeat(12, 1fr); }
.g-painel > .s4 { grid-column: span 4; } .g-painel > .s5 { grid-column: span 5; } .g-painel > .s6 { grid-column: span 6; }
.g-painel > .s7 { grid-column: span 7; } .g-painel > .s8 { grid-column: span 8; } .g-painel > .s12 { grid-column: span 12; }
.g-painel > .s3 { grid-column: span 3; }
@media (max-width: 1250px) { .g-painel > .s4, .g-painel > .s5, .g-painel > .s3 { grid-column: span 6; } .g-painel > .s7, .g-painel > .s8 { grid-column: span 12; } .g-painel > .s6 { grid-column: span 12; } }

.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .v { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.kpi .l { font-size: 12px; color: var(--mudo); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpis .card { padding: 14px 16px; }

.abas { display: inline-flex; gap: 4px; padding: 4px; background: var(--sup); border: 1px solid var(--borda); border-radius: 10px; flex-wrap: wrap; }
.abas button { background: none; border: 0; padding: 6px 14px; border-radius: 7px; color: var(--txt2); font-weight: 600; font-size: 13px; }
.abas button:hover { color: var(--txt); }
/* sigla do país antes das divisões (BRA, ESP, ING…) */
.sigla-pais { align-self: center; padding: 3px 7px; margin-right: 2px; border-radius: 6px; background: var(--bg2);
  color: var(--mudo); font-size: 10.5px; font-weight: 800; letter-spacing: .8px; }
.abas button.ativo { background: var(--sup3); color: var(--txt); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.barra-ferr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.barra-ferr .esp { flex: 1; }

.campo-form { display: flex; flex-direction: column; gap: 5px; }
.campo-form label { font-size: 12px; color: var(--mudo); font-weight: 600; }
input[type=text], input[type=number], input[type=password], select {
  background: var(--bg2); border: 1px solid var(--borda2); border-radius: 8px; padding: 8px 10px; color: var(--txt); outline: none; min-width: 0; }
input:focus, select:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-f); }
select option { background: var(--sup); }

.barrinha { height: 6px; background: var(--sup3); border-radius: 4px; overflow: hidden; min-width: 50px; }
.barrinha > i { display: block; height: 100%; border-radius: 4px; background: var(--verde); }
.barrinha.amar > i { background: var(--amar); } .barrinha.verm > i { background: var(--verm); } .barrinha.azul > i { background: var(--azul); }

.pos-tag { display: inline-grid; place-items: center; width: 34px; height: 20px; border-radius: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: #0a0f15; }
.pos-tag.p0 { background: var(--pos0); } .pos-tag.p1 { background: var(--pos1); } .pos-tag.p2 { background: var(--pos2); }
.pos-tag.p3 { background: var(--pos3); } .pos-tag.p4 { background: var(--pos4); }
.forca { display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 6px; border-radius: 6px; font-weight: 800; font-size: 13px; }
.f-a { background: rgba(34,197,94,.18); color: #4ade80; } .f-b { background: rgba(59,130,246,.18); color: #7fb0ff; }
.f-c { background: rgba(245,185,11,.16); color: #fcd34d; } .f-d { background: rgba(239,68,68,.16); color: #fca5a5; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--sup3); color: var(--txt2); white-space: nowrap; }
.tag.verde { background: var(--verde-f); color: var(--verde); } .tag.verm { background: var(--verm-f); color: #ff8a8a; }
.tag.amar { background: var(--amar-f); color: var(--amar); } .tag.azul { background: var(--azul-f); color: #8ab4ff; } .tag.roxo { background: rgba(167,139,250,.15); color: var(--roxo); }
.cartao-am { display: inline-block; width: 8px; height: 11px; border-radius: 2px; background: #facc15; vertical-align: -1px; }
.cartao-vm { display: inline-block; width: 8px; height: 11px; border-radius: 2px; background: #ef4444; vertical-align: -1px; }
.ult { display: inline-flex; gap: 3px; }
.ult b { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; }
.ult .V { background: var(--verde2); } .ult .E { background: #52606f; } .ult .D { background: #c73030; }

/* ============ tabelas ============ */
/* A tabela rola de lado de proposito (sao ate 14 colunas). overscroll-behavior-x
   impede que esse gesto vire rolagem da pagina inteira, que era o efeito de "tela
   andando pros lados" ao arrastar em cima de uma tabela. */
.tabela-wrap { overflow: auto; overscroll-behavior-x: contain; border: 1px solid var(--borda); border-radius: var(--r); background: var(--sup); }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.t th { position: sticky; top: 0; z-index: 2; background: var(--sup2); color: var(--mudo); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; user-select: none; }
table.t th.ord { cursor: pointer; } table.t th.ord:hover { color: var(--txt); }
table.t th.c, table.t td.c { text-align: center; } table.t th.r, table.t td.r { text-align: right; }
table.t td { padding: 8px 10px; border-bottom: 1px solid rgba(34,50,69,.6); white-space: nowrap; }
table.t tbody tr { transition: background .08s; }
table.t tbody tr:hover td { background: rgba(255,255,255,.025); }
table.t tbody tr.clic { cursor: pointer; }
table.t tbody tr.meu td { background: rgba(34,197,94,.07); }
table.t tbody tr.sel td { background: var(--azul-f) !important; }
table.t tbody tr.indisp td { opacity: .5; }
table.t tr:last-child td { border-bottom: 0; }
.nome-j { font-weight: 600; }
.nome-t { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.zona { width: 4px; padding: 0 !important; }
.zona.lib { background: var(--azul) !important; } .zona.sobe { background: var(--verde) !important; } .zona.cai { background: var(--verm) !important; }
.legenda { display: flex; gap: 16px; font-size: 12px; color: var(--mudo); margin-top: 10px; flex-wrap: wrap; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ============ escudos ============ */
.escudo { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.escudo img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.escudo-fb { display: inline-grid; place-items: center; flex: none; border-radius: 30% 30% 45% 45%; border: 2px solid; font-weight: 800; letter-spacing: -.5px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* ============ painel (dashboard) ============ */
.proximo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 0 4px; }
.proximo .lado { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; font-size: 15px; }
.proximo .lado small { color: var(--mudo); font-weight: 500; font-size: 12px; }
.proximo .vs { font-size: 13px; color: var(--mudo); font-weight: 800; letter-spacing: 2px; text-align: center; }
.proximo .vs .pl { display: block; font-size: 30px; color: var(--txt); letter-spacing: 0; }
.acoes-card { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.gauge { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gauge .top { display: flex; justify-content: space-between; font-size: 13px; }
.gauge .top b { font-size: 15px; }
.gauge .barrinha { height: 9px; }
.lista-simples { display: flex; flex-direction: column; }
.lista-simples > div { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(34,50,69,.6); font-size: 13px; }
.lista-simples > div:last-child { border-bottom: 0; }
.lista-simples .esp { flex: 1; }
.noticia { font-size: 13px; color: var(--txt2); line-height: 1.45; }
.noticia small { color: var(--mudo); display: block; font-size: 11px; }
.res-mini { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.res-mini .pl { font-weight: 800; background: var(--sup3); border-radius: 6px; padding: 2px 8px; font-size: 13px; }
.res-mini .c { text-align: right; justify-content: flex-end; }

/* ============ ficha do jogador (gaveta) ============ */
/* z-index 46: acima da barra de navegacao de baixo (40) e do menu lateral (45),
   que antes tapavam o rodape da ficha no celular. */
#gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: var(--bg2); border-left: 1px solid var(--borda); box-shadow: -20px 0 50px rgba(0,0,0,.45); z-index: 46; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .2s ease; }
#gaveta.aberta { transform: none; }
#gaveta .cab { padding: 18px 20px; border-bottom: 1px solid var(--borda); display: flex; gap: 14px; align-items: center; }
#gaveta .cab .nm { font-size: 19px; font-weight: 800; line-height: 1.15; }
#gaveta .cab .sub { color: var(--mudo); font-size: 12.5px; margin-top: 4px; }
#gaveta .corpo { padding: 16px 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
#gaveta .fechar { margin-left: auto; align-self: flex-start; }
.forca-grande { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; font-weight: 900; flex: none; }
.dados2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dados2 > div { background: var(--sup); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.dados2 small { display: block; color: var(--mudo); font-size: 11.5px; margin-bottom: 3px; }
.dados2 b { font-size: 14.5px; }
.stats-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-t th { color: var(--mudo); font-weight: 600; font-size: 11.5px; text-align: center; padding: 4px; }
.stats-t td { text-align: center; padding: 6px 4px; border-top: 1px solid var(--borda); }
.stats-t td:first-child, .stats-t th:first-child { text-align: left; }
.acoes-j { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============ escalação ============ */
.escalar { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(430px, 540px); height: 100%; }
.escalar .col-lista { overflow: auto; padding: 18px 20px; border-right: 1px solid var(--borda); }
.escalar .col-campo { overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; background: radial-gradient(ellipse at top, #10202b 0%, var(--bg) 70%); }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.campo { position: relative; width: 100%; aspect-ratio: .78; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
  background: repeating-linear-gradient(180deg, #1e7a3f 0 10%, #1b7139 10% 20%); box-shadow: inset 0 0 60px rgba(0,0,0,.35), var(--sombra); }
.campo .ln { position: absolute; border: 2px solid rgba(255,255,255,.35); pointer-events: none; }
.campo .ln.meio { left: 0; right: 0; top: 50%; border-width: 2px 0 0; }
.campo .ln.circ { left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.campo .ln.area-b { left: 22%; right: 22%; bottom: -2px; height: 15%; } .campo .ln.area-t { left: 22%; right: 22%; top: -2px; height: 15%; }
.campo .ln.peq-b { left: 36%; right: 36%; bottom: -2px; height: 6%; } .campo .ln.peq-t { left: 36%; right: 36%; top: -2px; height: 6%; }
.slot { position: absolute; transform: translate(-50%, 50%); width: 88px; display: flex; flex-direction: column; align-items: center; cursor: pointer; user-select: none; }
.slot .circ { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #06220f; background: #eafff0; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.45); transition: transform .1s; position: relative; }
.slot .circ .en { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 30px; height: 4px; background: rgba(0,0,0,.5); border-radius: 3px; overflow: hidden; }
.slot .circ .en i { display: block; height: 100%; background: var(--verde); }
.slot:hover .circ { transform: scale(1.07); }
.slot .nm { margin-top: 6px; font-size: 11.5px; font-weight: 700; background: rgba(5,12,18,.78); padding: 2px 7px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .nm.imp { color: var(--amar); }
.slot .rot { font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,.75); margin-top: 2px; letter-spacing: .5px; }
.slot.vazio .circ { background: rgba(255,255,255,.12); border-style: dashed; border-color: rgba(255,255,255,.6); color: #fff; }
.slot.marcado .circ { box-shadow: 0 0 0 4px var(--amar), 0 4px 12px rgba(0,0,0,.45); }
.slot.alvo .circ { box-shadow: 0 0 0 4px var(--azul), 0 4px 12px rgba(0,0,0,.45); }
.banco { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r); padding: 12px 8px 10px; }
.banco .slot { position: static; transform: none; width: auto; }
.banco .slot .circ { width: 36px; height: 36px; font-size: 13px; background: #fff6d8; color: #3a2a00; border-color: #f5d56b; }
.banco .slot.vazio .circ { background: transparent; border-color: #56677c; color: var(--mudo); }
.banco .slot .nm { background: none; padding: 0; font-size: 10.5px; }
.resumo-forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.resumo-forca > div { background: var(--sup); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; }
.resumo-forca small { display: block; font-size: 11px; color: var(--mudo); }
.resumo-forca b { font-size: 16px; }
.dica { font-size: 12px; color: var(--mudo); }
tr.escalado td .nome-j::after { content: 'titular'; margin-left: 8px; font-size: 10px; font-weight: 700; color: var(--verde); background: var(--verde-f); padding: 1px 6px; border-radius: 5px; }
tr.no-banco td .nome-j::after { content: 'banco'; margin-left: 8px; font-size: 10px; font-weight: 700; color: var(--amar); background: var(--amar-f); padding: 1px 6px; border-radius: 5px; }

/* ============ partida ao vivo ============ */
.partida { display: grid; grid-template-columns: 1fr 340px; height: 100%; }
.partida .centro { display: flex; flex-direction: column; min-height: 0; padding: 18px 22px; gap: 14px; }
.placar { background: linear-gradient(180deg, #13202d, #0f1822); border: 1px solid var(--borda); border-radius: 16px; padding: 18px 22px 14px; box-shadow: var(--sombra); }
.placar .linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
/* jogo de volta: a ida, a soma e o que ainda falta */
.placar .agregado { margin-top: 10px; padding: 7px 12px; border-radius: 9px; text-align: center; font-size: 13px;
  background: rgba(var(--acento-rgb, 34,197,94), .1); border: 1px solid rgba(var(--acento-rgb, 34,197,94), .28); color: var(--txt2); }
.placar .agregado b { color: var(--txt); }
.placar .tm { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 800; }
.placar .tm.fora { flex-direction: row-reverse; text-align: right; }
.placar .gols { font-size: 46px; font-weight: 900; letter-spacing: 2px; font-variant-numeric: tabular-nums; text-align: center; min-width: 150px; }
.placar .relogio { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.placar .relogio .min { font-weight: 800; color: var(--verde); min-width: 58px; font-variant-numeric: tabular-nums; }
.placar .relogio .barrinha { flex: 1; height: 5px; }
.placar .relogio .ao-vivo { font-size: 11px; font-weight: 800; color: var(--verm); letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.placar .relogio .ao-vivo::before { content: ''; width: 7px; height: 7px; background: var(--verm); border-radius: 50%; animation: pisca 1s infinite; }
@keyframes pisca { 50% { opacity: .2; } }
.estat { display: grid; grid-template-columns: 50px 1fr 50px; gap: 10px; align-items: center; font-size: 12.5px; margin-top: 8px; }
.estat .r { text-align: right; } .estat .meio { display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: center; color: var(--mudo); font-size: 11px; }
.estat .duas { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--sup3); }
.estat .duas i:first-child { background: var(--verde); } .estat .duas i:last-child { background: var(--azul); }
.controles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.controles .esp { flex: 1; }
.narracao { flex: 1; overflow-y: auto; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r); padding: 8px 6px; min-height: 120px; }
.narracao .ev { display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; animation: entra .25s ease; align-items: baseline; }
@keyframes entra { from { opacity: 0; transform: translateY(-4px); } }
.narracao .ev .m { color: var(--mudo); font-weight: 700; min-width: 34px; font-variant-numeric: tabular-nums; font-size: 12px; }
.narracao .ev.gol { background: var(--verde-f); font-weight: 700; color: #b7f5c9; }
.narracao .ev.gol.adv { background: var(--verm-f); color: #ffc2c2; }
.narracao .ev.amarelo .t::before { content: ''; display: inline-block; width: 8px; height: 11px; background: #facc15; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.narracao .ev.vermelho { color: #ffb0b0; } .narracao .ev.vermelho .t::before { content: ''; display: inline-block; width: 8px; height: 11px; background: #ef4444; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.narracao .ev.lesao { color: #fdba74; } .narracao .ev.sub { color: #93c5fd; } .narracao .ev.chance { color: var(--txt2); }
.narracao .ev.penalti, .narracao .ev.perdeu { color: #fde68a; }
.narracao .ev.intervalo, .narracao .ev.fim { justify-content: center; color: var(--amar); font-weight: 800; letter-spacing: .5px; }
.lado-jogo { background: var(--bg2); border-left: 1px solid var(--borda); overflow-y: auto; display: flex; flex-direction: column; }
.lado-jogo .sec { padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.lado-jogo h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--mudo); display: flex; justify-content: space-between; }
.jog-campo { display: grid; grid-template-columns: 34px 1fr 54px auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.jog-campo .barrinha { height: 5px; min-width: 0; }
.jog-campo.saiu { opacity: .4; text-decoration: line-through; }
.outro-jogo { display: grid; grid-template-columns: 1fr 50px 1fr; gap: 6px; align-items: center; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid rgba(34,50,69,.5); }
.outro-jogo:last-child { border-bottom: 0; }
.outro-jogo .c { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outro-jogo .f { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outro-jogo .pl { text-align: center; font-weight: 800; background: var(--sup3); border-radius: 6px; padding: 2px 0; font-variant-numeric: tabular-nums; transition: background .3s; }
.outro-jogo.flash .pl { background: var(--verde); color: #04130a; }
.outro-jogo.humano { color: var(--verde); font-weight: 700; }

/* ============ mensagens ============ */
.msg-item { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--borda); align-items: flex-start; }
.msg-item:last-child { border-bottom: 0; }
.msg-item.nova { background: rgba(59,130,246,.06); }
.msg-item .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 16px; }
.msg-item .ic.info { background: var(--azul-f); } .msg-item .ic.oferta { background: var(--verde-f); } .msg-item .ic.aviso { background: var(--verm-f); }
.msg-item .ic.convite { background: rgba(167,139,250,.15); } .msg-item .ic.contrato { background: var(--amar-f); }
.msg-item .txt { flex: 1; line-height: 1.45; }
.msg-item .quando { font-size: 11.5px; color: var(--mudo); margin-top: 3px; }
.msg-item .acts { display: flex; gap: 6px; flex: none; }

/* ============ modal / toast ============ */
/* A trilha precisa ser minmax(0,1fr): com "auto" ela cresce até o max-content do
   conteúdo e a janela fica mais larga que a tela (tabela dentro da janela virava
   427px num aparelho de 390px). Mesmo problema que a tela inicial tinha. */
#modal { position: fixed; inset: 0; background: rgba(3,6,10,.7); backdrop-filter: blur(3px); display: grid;
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; z-index: 50; padding: 20px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
#modal .jan { background: var(--bg2); border: 1px solid var(--borda2); border-radius: 16px; width: min(560px, 100%); max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
#modal .jan > * { min-width: 0; }
#modal .jan.larga { width: min(860px, 100%); }
#modal .cab { padding: 16px 20px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; font-weight: 800; font-size: 16px; }
#modal .cab .btn { margin-left: auto; }
#modal .corpo { padding: 18px 20px; overflow-y: auto; line-height: 1.5; }
#modal .rodape { padding: 14px 20px; border-top: 1px solid var(--borda); display: flex; gap: 8px; justify-content: flex-end; }
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--sup2); border: 1px solid var(--borda2); border-left: 4px solid var(--azul); padding: 11px 16px; border-radius: 10px; box-shadow: var(--sombra); max-width: 380px; font-size: 13.5px; animation: entra .2s; }
.toast.ok { border-left-color: var(--verde); } .toast.erro { border-left-color: var(--verm); }

/* ============ tela inicial ============ */
/* A coluna precisa ser minmax(0,1fr): com a trilha "auto" do place-items:center ela
   cresce ate o max-content dos filhos e a tela inteira fica mais larga que o celular
   (na escolha de time dava 562px num aparelho de 360px, e tudo andava de lado). */
#inicio { position: fixed; inset: 0; z-index: 40; overflow-y: auto; overflow-x: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; padding: 30px 16px;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(34,197,94,.18), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(59,130,246,.16), transparent 60%), var(--bg); }
#inicio .caixa { width: min(980px, 100%); max-width: 100%; min-width: 0; }
#inicio .caixa > * { min-width: 0; }
/* Capa: foto de estádio (licença livre, jogo/capa/CREDITOS.txt) com o nome por cima.
   A imagem menor é para o celular, onde a grande seria peso à toa. */
.hero { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--borda2);
  min-height: 236px; display: flex; align-items: flex-end; margin-bottom: 22px; box-shadow: var(--sombra);
  background: #0a1220 var(--capa, url('../capa/estadio.jpg')) center 62% / cover no-repeat; }
/* O escurecido fica num pseudo-elemento para a foto poder ter o próprio enquadramento:
   forte à esquerda, onde fica o texto, e fraco à direita, para o estádio aparecer. */
.hero::after { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,12,18,.72), rgba(8,12,18,.12) 62%, transparent),
    linear-gradient(100deg, rgba(8,12,18,.93) 0%, rgba(8,12,18,.74) 40%, rgba(8,12,18,.20) 76%, rgba(8,12,18,.42) 100%); }
.hero-txt { position: relative; z-index: 1; padding: 22px 26px 24px; }
.hero-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: #6ee7a0; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.3); border-radius: 999px; padding: 4px 11px; }
.hero h1 { margin: 10px 0 0; font-size: 42px; line-height: 1; letter-spacing: 4px; font-weight: 900; text-shadow: 0 3px 18px rgba(0,0,0,.6); }
.hero p { margin: 8px 0 0; color: var(--txt2); max-width: 46ch; }
.opcoes-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.op-inicio { background: var(--sup); border: 1px solid var(--borda); border-radius: 16px; padding: 20px; text-align: left; display: flex; flex-direction: column; gap: 8px; transition: .15s; color: var(--txt); }
.op-inicio:hover { border-color: var(--verde); transform: translateY(-2px); box-shadow: var(--sombra); }
.op-inicio .ico { font-size: 26px; }
.op-inicio b { font-size: 16px; }
.op-inicio span { color: var(--mudo); font-size: 13px; line-height: 1.45; }
.painel-inicio { background: var(--sup); border: 1px solid var(--borda); border-radius: 16px; padding: 22px; }
.painel-inicio h2 { margin: 0 0 4px; font-size: 20px; }
.painel-inicio .sub { color: var(--mudo); margin-bottom: 18px; }
.form-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.grade-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; margin-top: 12px; }
.grade-times button { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--borda); border-radius: 10px; padding: 9px 10px; text-align: left; color: var(--txt); min-width: 0; }
/* nomes longos (“Athletico Paranaense”) estouravam o botao e sangravam pra fora da grade */
.grade-times button > span { min-width: 0; overflow: hidden; }
.grade-times button > span, .grade-times small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.grade-times button:hover:not(:disabled) { border-color: var(--borda2); background: var(--sup2); }
.grade-times button.sel { border-color: var(--verde); background: var(--verde-f); }
.grade-times button:disabled { opacity: .45; cursor: not-allowed; }
.grade-times small { display: block; color: var(--mudo); font-size: 11px; margin-top: 1px; }
.slot-save { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.slot-save .esp { flex: 1; }
.aviso-box { background: var(--amar-f); border: 1px solid rgba(245,185,11,.35); color: #fde68a; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.aviso-box code { background: rgba(0,0,0,.35); padding: 1px 6px; border-radius: 5px; color: #fff; }
.voltar { margin-bottom: 14px; }
.codigo-liga { font-family: ui-monospace, Consolas, monospace; font-size: 22px; letter-spacing: 4px; font-weight: 800; color: var(--verde); }
.sparkline { width: 100%; height: 150px; }
.vazio { text-align: center; color: var(--mudo); padding: 30px 10px; }

/* ============ menu lateral recolhível ============ */
#app { transition: grid-template-columns .22s ease; }
#app.recolhido { grid-template-columns: 72px 1fr; }
#lateral { position: relative; z-index: 15; transition: width .22s ease, box-shadow .22s; width: 250px; overflow: hidden; }
#app.recolhido #lateral { width: 72px; }
#app.recolhido #lateral:hover { width: 250px; box-shadow: 20px 0 50px rgba(0,0,0,.5); }
#app.recolhido #lateral:not(:hover) .marca > div:last-child,
#app.recolhido #lateral:not(:hover) .clube-mini > div,
#app.recolhido #lateral:not(:hover) .clube-mini .caixa-l,
#app.recolhido #lateral:not(:hover) nav.menu button .rot,
#app.recolhido #lateral:not(:hover) .lateral-rodape .modo .txt,
#app.recolhido #lateral:not(:hover) .lateral-rodape button { display: none; }
#app.recolhido #lateral:not(:hover) .clube-mini { grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; }
#app.recolhido #lateral:not(:hover) nav.menu .cont { position: absolute; left: 34px; top: 3px; padding: 0 5px; font-size: 10px; }
#app.recolhido #lateral:not(:hover) .lateral-rodape { justify-content: center; }
nav.menu button, .marca, .clube-mini { white-space: nowrap; }

/* ============ faixas VAR / gol ============ */
.placar { position: relative; overflow: hidden; }
.faixa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 10px 20px; animation: faixa-in .25s ease; z-index: 3; }
.faixa b { font-size: 34px; font-weight: 900; letter-spacing: 2px; display: flex; align-items: center; gap: 14px; }
.faixa span { font-size: 15px; font-weight: 600; opacity: .92; max-width: 640px; }
@keyframes faixa-in { from { transform: scale(1.08); } }
.faixa.gol { background: linear-gradient(90deg, #16a34a, #22c55e); color: #03150a; }
.faixa.gol b { font-size: 46px; animation: pulsa .5s ease 2; }
@keyframes pulsa { 50% { transform: scale(1.08); } }
.faixa.var { background: repeating-linear-gradient(135deg, rgba(10,18,30,.97) 0 14px, rgba(16,28,46,.97) 14px 28px); color: #e8f1ff; border: 2px solid #3b82f6; }
.faixa.var b { color: #fff; }
.faixa.var .tela-var { background: #fff; color: #0a0f15; padding: 2px 10px; border-radius: 6px; font-size: 26px; animation: pisca .9s infinite; }
.faixa.var::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; background: #3b82f6; animation: carregando 2.6s linear forwards; }
@keyframes carregando { from { width: 0; } to { width: 100%; } }
.faixa.anulado { background: linear-gradient(90deg, rgba(185,28,28,.96), rgba(239,68,68,.96)); color: #fff; }
.faixa.confirmado { background: linear-gradient(90deg, rgba(22,101,52,.96), rgba(22,163,74,.96)); color: #fff; }
.faixa.revisto { background: linear-gradient(90deg, rgba(146,64,14,.96), rgba(217,119,6,.96)); color: #fff; }
.narracao .ev.var, .narracao .ev.varOk, .narracao .ev.varNao { color: #93c5fd; font-weight: 600; }
.narracao .ev.var .t::before { content: "VAR"; font-size: 10px; font-weight: 900; background: #e8f1ff; color: #0a0f15; padding: 1px 5px; border-radius: 4px; margin-right: 8px; }
.narracao .ev.anulado { background: var(--verm-f); color: #ffb4b4; font-weight: 800; }
.narracao .ev.sem-anim { animation: none; }
.placar .ao-vivo.fim { color: var(--mudo); } .placar .ao-vivo.fim::before { display: none; }
.outro-jogo.atual { background: rgba(59,130,246,.08); border-radius: 6px; }
#assistir { align-self: flex-start; }

/* ============ escalação em tela cheia ============ */
.esc-full { position: fixed; inset: 0; z-index: 25; background: radial-gradient(1200px 700px at 50% 0%, #0f2130 0%, var(--bg) 65%); display: flex; flex-direction: column; }
.esc-topo { display: flex; align-items: flex-end; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--borda); background: rgba(10,15,21,.8); flex-wrap: wrap; }
.esc-topo .tit-esc { display: flex; gap: 12px; align-items: center; margin-right: 10px; align-self: center; }
.esc-topo .tit-esc b { font-size: 16px; display: block; }
.esc-topo .tit-esc small { color: var(--mudo); }
.esc-topo .campo-form select { min-width: 118px; }
/* Os setores sairam do cabecalho para a coluna do banco: la ha largura de
   sobra, e no cabecalho eles forcavam uma segunda linha que roubava altura
   do campo — que e desenhado pela altura disponivel. */
.esc-banco .setores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 12px 10px; }
.esc-banco .setores span { background: var(--bg2); border: 1px solid var(--borda); border-radius: 8px;
  padding: 5px 4px; font-size: 11px; color: var(--mudo); text-align: center; }
.esc-banco .setores b { display: block; color: var(--txt); font-size: 15px; }
.esc-topo .setores { display: flex; gap: 6px; align-self: center; }

/* Em tela de notebook o cabecalho quebrava em duas linhas, e cada linha ali
   e altura que o campo perde (ele e desenhado pela altura disponivel). O nome
   do clube ja esta no menu lateral, entao some primeiro. */
@media (max-width: 1500px) {
  .esc-topo .tit-esc small { display: none; }
  /* Cada select pede a largura que o texto precisa, com teto: fixar 112px
     cortava 'Contra-ataque' e 'Muito pesada' no meio da palavra. */
  .esc-topo .campo-form select { min-width: 0; width: auto; max-width: 160px; }
  .esc-topo .tit-esc { margin-right: 4px; }
}
.esc-topo .setores span { background: var(--sup); border: 1px solid var(--borda); border-radius: 8px; padding: 3px 8px; font-size: 11px; color: var(--mudo); text-align: center; }
.esc-topo .setores b { display: block; color: var(--txt); font-size: 15px; }
/* O campo tem proporcao fixa e altura cheia, entao ele nunca usa a largura
   que sobra: em 1920 sobravam 579px de vazio ao lado dele. As colunas do
   elenco e do banco passam a dividir essa sobra, que e onde ela serve. */
.esc-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.5fr) minmax(290px, 1fr); gap: 16px; padding: 14px 20px; }
.esc-elenco, .esc-banco { background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; display: flex; flex-direction: column; min-height: 0; }
.esc-elenco h3, .esc-banco h3 { margin: 0; padding: 12px 14px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--mudo); display: flex; justify-content: space-between; }
.esc-elenco .filtros { display: flex; gap: 4px; padding: 0 10px 8px; flex-wrap: wrap; }
.esc-elenco .filtros button { background: var(--bg2); border: 1px solid var(--borda); color: var(--txt2); border-radius: 6px; padding: 3px 8px; font-size: 11.5px; font-weight: 600; }
.esc-elenco .filtros button.ativo { background: var(--sup3); color: var(--txt); border-color: var(--borda2); }
.esc-lista { overflow-y: auto; padding: 0 8px 8px; flex: 1; }
.card-jog { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 8px; align-items: center; padding: 7px 8px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; user-select: none; }
.card-jog:hover { background: var(--sup2); }
.card-jog.sel { background: var(--azul-f); border-color: var(--azul); }
.card-jog.indisp { opacity: .45; }
.card-jog .nm { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-jog .sub { grid-column: 2 / 4; display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--mudo); min-width: 0; flex-wrap: wrap; }
.card-jog .sub .barrinha { width: 50px; min-width: 50px; height: 4px; }
.card-jog .onde { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px; }
.card-jog .onde.tit { color: var(--verde); background: var(--verde-f); } .card-jog .onde.res { color: var(--amar); background: var(--amar-f); }
.info-jog { border-top: 1px solid var(--borda); padding: 10px 12px; font-size: 12.5px; min-height: 92px; }
.info-jog .nm { font-weight: 800; font-size: 14px; }
.esc-campo-wrap { min-height: 0; display: flex; align-items: center; justify-content: center; }
.campo.grande { height: 100%; max-height: 100%; width: auto; aspect-ratio: .7; max-width: 100%; }
.slot2 { position: absolute; transform: translate(-50%, 50%); width: 96px; display: flex; flex-direction: column; align-items: center; cursor: pointer; user-select: none; }
.slot2 svg { width: 52px; height: 48px; filter: drop-shadow(0 5px 8px rgba(0,0,0,.45)); transition: transform .12s; }
.slot2:hover svg { transform: translateY(-2px) scale(1.06); }
.slot2 .nm { margin-top: 2px; font-size: 12px; font-weight: 700; background: rgba(5,12,18,.82); padding: 2px 8px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot2 .nm.imp { color: var(--amar); }
.slot2 .en { width: 44px; height: 4px; border-radius: 3px; background: rgba(0,0,0,.5); margin-top: 3px; overflow: hidden; }
.slot2 .en i { display: block; height: 100%; }
.slot2 .rot { font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,.75); margin-top: 1px; letter-spacing: .5px; }
/* Pé bom, na quina da camisa: no campo e no banco, para montar o time sem
   precisar abrir a ficha de cada um. Vermelho = pé trocado para o lado da vaga. */
.cam-wrap { position: relative; display: inline-flex; line-height: 0; }
.cam-wrap .pe { position: absolute; left: -7px; bottom: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 5px; background: var(--sup3); color: var(--txt2); border: 1px solid var(--borda2);
  font-size: 9.5px; font-weight: 800; line-height: 13px; text-align: center; letter-spacing: 0; }
.cam-wrap .pe.troca { background: var(--verm-f); color: #ffb4b4; border-color: rgba(239,68,68,.5); }
.vaga-banco .cam-wrap .pe { left: -5px; bottom: 0; }
.slot2.vazio svg { opacity: .45; }
.slot2.marcado svg { filter: drop-shadow(0 0 7px var(--amar)) drop-shadow(0 0 3px var(--amar)); }
.slot2.alvo svg, .vaga-banco.alvo { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 10px; }
.esc-banco .vagas { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; overflow-y: auto; flex: 1; }
/* Vaga do banco com folga: era 38px de camisa e 6px de respiro, e a lista
   inteira ficava apertada demais para ler de relance. */
.vaga-banco { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 11px; border-radius: 10px; background: var(--bg2); border: 1px dashed var(--borda2); cursor: pointer; overflow: hidden; min-height: 58px; }
.vaga-banco > * { min-width: 0; }
.vaga-banco small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaga-banco.ocupada { border-style: solid; border-color: var(--borda); }
.vaga-banco.marcado { border-color: var(--amar); box-shadow: 0 0 0 2px var(--amar-f); }
.vaga-banco svg { width: 44px; height: 42px; }
.vaga-banco .nm { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaga-banco small { color: var(--mudo); font-size: 12px; }
.esc-banco .rodape-banco { padding: 10px 12px; border-top: 1px solid var(--borda); font-size: 11.5px; color: var(--mudo); line-height: 1.45; }
@media (max-width: 1100px) { .esc-corpo { grid-template-columns: minmax(230px, 1fr) minmax(0, 1.4fr) minmax(220px, 1fr); } }

/* ============ escolha de modo ============ */
.modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.modo-card { background: var(--sup); border: 1px solid var(--borda); border-radius: 18px; padding: 26px 22px; text-align: left; color: var(--txt); display: flex; flex-direction: column; gap: 10px; transition: .15s; }
.modo-card:hover { border-color: var(--verde); transform: translateY(-3px); box-shadow: var(--sombra); }
.modo-card.off { opacity: .55; }
.modo-card.off:hover { transform: none; border-color: var(--borda); box-shadow: none; }
.modo-card .ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.22); color: var(--verde); }
.modo-card .ico svg { width: 25px; height: 25px; }
.modo-card:hover .ico { background: rgba(34,197,94,.2); }
.modo-card.off .ico { background: var(--bg2); border-color: var(--borda); color: var(--mudo); }
.modo-card b { font-size: 20px; }
.modo-card span { color: var(--mudo); line-height: 1.5; }
.lista-tecs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.lista-tecs .tec { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--borda2); border-radius: 10px; padding: 6px 10px; }
.vez { text-align: center; padding: 10px 0; }
.vez .grande { font-size: 26px; font-weight: 900; margin: 10px 0 4px; }


/* ============ todos os jogos (grade estilo Brasfoot) ============ */
.grade-topo { position: relative; background: linear-gradient(180deg, #13202d, #0f1822); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 16px; min-height: 64px; overflow: hidden; }
.grade-topo .gt-linha { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grade-topo .gt-linha > * { min-width: 0; }
.grade-topo .gt-linha b { font-size: 14px; }
.grade-topo .min { font-weight: 800; color: var(--verde); min-width: 50px; font-variant-numeric: tabular-nums; }
.grade-topo .barrinha { flex: 1; height: 5px; }
.grade-topo .ao-vivo { font-size: 11px; font-weight: 800; color: var(--verm); letter-spacing: 1px; }
.grade-topo .ao-vivo.fim { color: var(--mudo); }
.grade-topo .faixa b { font-size: 24px; } .grade-topo .faixa span { font-size: 13px; }
.grade-topo .faixa.gol b { font-size: 28px; }
.grade-jogos { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; align-content: start; padding-right: 4px; }
.cj-grupo { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--mudo); margin-top: 6px; }
.cj { background: var(--sup); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color .15s, background .3s; display: flex; flex-direction: column; gap: 4px; }
.cj:hover { border-color: var(--borda2); }
.cj.humano { border-color: rgba(34,197,94,.55); background: linear-gradient(180deg, rgba(34,197,94,.08), var(--sup)); }
.cj.atual { box-shadow: 0 0 0 2px var(--azul); }
.cj.flash { background: rgba(34,197,94,.28); }
.cj-tec { font-size: 11px; font-weight: 800; color: var(--verde); text-transform: uppercase; letter-spacing: .5px; }
.cj-l { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; font-weight: 600; font-size: 13.5px; }
.cj-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-l b { font-size: 20px; font-weight: 900; min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.cj-pen { font-size: 11.5px; color: var(--amar); font-weight: 700; }
.cj-ev { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 11px; color: var(--txt2); border-top: 1px solid var(--borda); padding-top: 5px; margin-top: 2px; }
.cj-ev .r { text-align: right; }
#visao { padding: 3px; } #visao button { padding: 5px 10px; font-size: 12.5px; }

.meu-lat { background: var(--sup); border: 1px solid rgba(34,197,94,.5); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; transition: background .3s; }
.meu-lat.flash { background: rgba(34,197,94,.25); }
.narr-lat { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.narr-lat .ev { display: flex; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.narr-lat .ev .m { color: var(--mudo); min-width: 28px; font-weight: 700; font-size: 11.5px; }
.narr-lat .ev.gol { background: var(--verde-f); color: #b7f5c9; font-weight: 700; }
.narr-lat .ev.gol.adv { background: var(--verm-f); color: #ffc2c2; }
.narr-lat .ev.anulado { background: var(--verm-f); color: #ffb4b4; }
.narr-lat .ev.var, .narr-lat .ev.varOk, .narr-lat .ev.varNao { color: #93c5fd; }
.narr-lat .ev.intervalo, .narr-lat .ev.fim { color: var(--amar); font-weight: 800; }


/* ============ cores do clube e linhas zebradas ============ */
:root { --acento: var(--verde); --acento-rgb: 34,197,94; --acento-f: var(--verde-f); --acento-txt: #04130a; --clube1: #22c55e; --clube2: #0e7a38; }
#lateral { border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--clube1) 0 50%, var(--clube2) 50% 100%) 1; background: linear-gradient(180deg, rgba(var(--acento-rgb), .10), var(--bg2) 38%); }
nav.menu button.ativo { background: var(--acento-f); color: var(--acento); }
nav.menu button.ativo::before { background: var(--acento); }
.marca .bola { background: linear-gradient(135deg, var(--clube1), var(--clube2)); box-shadow: 0 4px 14px rgba(var(--acento-rgb), .35); }
.clube-mini { border-color: rgba(var(--acento-rgb), .45); background: linear-gradient(135deg, rgba(var(--acento-rgb), .14), var(--sup) 60%); }
.btn.prim { background: var(--acento); border-color: var(--acento); color: var(--acento-txt); }
.btn.prim:hover { background: var(--acento); filter: brightness(1.12); }
#barra { border-bottom: 2px solid rgba(var(--acento-rgb), .45); }
.abas button.ativo { box-shadow: inset 0 -2px 0 var(--acento); }
table.t tbody tr:nth-child(even) td { background: rgba(255,255,255,.028); }
table.t tbody tr.meu td { background: rgba(var(--acento-rgb), .12); }
table.t tbody tr:hover td { background: rgba(var(--acento-rgb), .07); }
.esc-lista .card-jog:nth-child(even) { background: rgba(255,255,255,.028); }
.esc-lista .card-jog.sel { background: var(--azul-f); }
.slot2 img.camisa-img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0,0,0,.5)); transition: transform .12s; }
.slot2:hover img.camisa-img { transform: translateY(-2px) scale(1.06); }
.slot2 .fz { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); background: rgba(5,12,18,.85); border: 1px solid rgba(255,255,255,.25); font-size: 11px; font-weight: 900; border-radius: 9px; padding: 0 6px; }
.slot2 { padding-top: 0; }
.slot2 .cam { position: relative; }
.vaga-banco img.camisa-img { width: 44px; height: 44px; object-fit: contain; }
.slot2.marcado img.camisa-img { filter: drop-shadow(0 0 7px var(--amar)) drop-shadow(0 0 3px var(--amar)); }
.sala-trofeus { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sala-trofeus .tr { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: radial-gradient(ellipse at 50% 30%, rgba(245,185,11,.14), transparent 70%), var(--bg2); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 8px; font-size: 12px; }
.sala-trofeus .tr b { font-size: 12.5px; }

/* ============ seleções do ano ============ */
.sel-card .sel-campo { border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 10px;
  background: repeating-linear-gradient(180deg, #1e7a3f 0 18%, #1b7139 18% 36%); }
.sel-card.inacreditavel .sel-campo { background: repeating-linear-gradient(180deg, #6b4a1f 0 18%, #5c3f19 18% 36%); }
.sel-linha { display: flex; justify-content: space-around; gap: 6px; flex-wrap: wrap; }
.sel-j { display: flex; flex-direction: column; align-items: center; text-align: center; width: 112px; gap: 2px; background: rgba(5,12,18,.72); border-radius: 10px; padding: 6px 4px; }
.sel-j b { font-size: 12px; line-height: 1.2; }
.sel-j small { font-size: 10.5px; color: var(--txt2); }
.sel-j span { font-size: 10px; color: #fde68a; line-height: 1.25; }
.sel-card.ideal .sel-j span { color: #bbf7d0; }
.sel-tec { margin-top: 10px; font-size: 13px; }

.avatar { border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(var(--acento-rgb), .7); display: inline-block; vertical-align: middle; }
.avatar.sem-foto { display: inline-grid; place-items: center; background: var(--sup3); color: var(--txt); font-weight: 800; }
.tec-lat { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-top: 3px; }
.tec-lat:hover { color: var(--txt); }

/* Tela inicial: a mesma foto da capa ao fundo, bem apagada, só para a tela não
   ficar num fundo chapado. O escuro por cima é forte porque é sobre ele que os
   textos e os cartões precisam ser lidos. */
#inicio {
  --capa: url('../capa/estadio.jpg');
  background:
    radial-gradient(1100px 560px at 18% -12%, rgba(34,197,94,.10), transparent 62%),
    linear-gradient(rgba(9,13,19,.94), rgba(9,13,19,.985)),
    var(--capa) center 30% / cover no-repeat fixed,
    var(--bg);
}
#inicio .caixa { position: relative; z-index: 1; }
.partida { background: linear-gradient(rgba(10,15,21,.88), rgba(10,15,21,.96)), var(--foto-estadio, none) center / cover no-repeat; }

.avatar { box-sizing: border-box; aspect-ratio: 1; max-height: 120px; line-height: 1; overflow: hidden; }
.tec-lat .avatar { width: 22px !important; height: 22px !important; }

.cam.gol .luva { position: absolute; right: -8px; top: -4px; font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.vaga-banco .cam.gol .luva { font-size: 11px; right: -6px; }


/* ================= CELULAR / TABLET ================= */
.menu-mob, #veu { display: none; }
.esc-corpo > * { min-width: 0; }
.pt-grade { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
@media (max-width: 900px), (max-width: 1100px) and (max-height: 560px) and (orientation: landscape) {
  .pt-grade { grid-template-columns: 1fr; }
  html, body { font-size: 13.5px; }
  #app, #app.recolhido { grid-template-columns: 1fr; height: 100dvh; }
  #lateral, #app.recolhido #lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 270px !important; z-index: 45; transform: translateX(-105%); transition: transform .22s ease; }
  #app.menu-aberto #lateral { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.6); }
  #app.menu-aberto ~ #veu { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 44; }
  .menu-mob { display: inline-flex; font-size: 20px; padding: 4px 10px; }
  #barra { height: auto; min-height: 54px; flex-wrap: wrap; gap: 8px;
    padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
  #barra h1 { font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #barra .esp { display: none; }
  #barra .chip { font-size: 11px; padding: 4px 9px; white-space: normal; }
  #barra .btn { padding: 7px 11px; }
  #conteudo { padding: 12px max(10px, env(safe-area-inset-right)) 40px max(10px, env(safe-area-inset-left)); }
  #conteudo.cheio { overflow-y: auto; }
  .g-painel > * { grid-column: span 12 !important; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .barra-ferr { gap: 8px; }
  /* Antes as abas eram uma faixa unica que nao quebrava: a de Copas chegava a
     1293px dentro de 340px de tela, e os grupos do fim so apareciam arrastando
     (sem nenhuma pista de que dava para arrastar). Agora elas quebram em linhas. */
  .abas { max-width: 100%; overflow-x: visible; flex-wrap: wrap; }
  .abas button { white-space: nowrap; }
  table.t { font-size: 12.5px; }
  table.t td, table.t th { padding: 7px 7px; }
  .proximo .lado { font-size: 13px; }
  .form-g { grid-template-columns: 1fr; }
  .grade-times { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 55vh; }
  #gaveta { width: 100vw; }
  #modal { padding: 8px; }
  #modal .jan, #modal .jan.larga { width: 100%; max-height: 94dvh; }
  #modal .corpo [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* acima da barra de navegacao de baixo, senao o aviso nasce escondido */
  #toasts { left: 10px; right: 10px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 41; }
  .toast { max-width: none; }
  /* escalação */
  .esc-topo { padding: 10px; gap: 8px; }
  .esc-topo .tit-esc { width: 100%; }
  .esc-topo .campo-form { flex: 1 1 45%; }
  .esc-topo .campo-form select { min-width: 0; width: 100%; }
  .esc-topo .setores { width: 100%; justify-content: space-between; }
  /* Coluna simples em vez de grade: com o campo usando aspect-ratio dentro de
     uma linha de grade sem altura definida, as linhas desabavam para 2px e a
     caixa dos reservas ficava menor que o conteudo. Em flex column cada bloco
     toma a altura que precisa e a tela inteira rola. */
  .esc-corpo { display: flex; flex-direction: column; overflow-y: auto; padding: 10px; gap: 10px; }
  .esc-corpo > * { flex: none; }
  .esc-campo-wrap { order: 1; }
  .campo.grande { width: 100%; height: auto; aspect-ratio: .72; }
  /* O banco era uma faixa de 1100px que so rolava de lado, e as vagas ficavam
     com 10px de altura porque a linha da grade as espremia. Agora e uma grade
     de 2 colunas que quebra sozinha: nenhum gesto horizontal, tudo visivel. */
  .esc-banco { order: 2; min-height: 0; }
  /* Duas colunas so a partir de 620px: num telefone estreito elas espremiam o
     nome do jogador, que e justamente o que se quer ler. */
  .esc-banco .vagas { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 8px; overflow: visible; }
  .vaga-banco { min-width: 0; min-height: 52px; }
  .esc-banco .rodape-banco { display: none; }
  .esc-elenco { order: 3; max-height: 70dvh; }
  .slot2 { width: 70px; }
  .slot2 img.camisa-img, .slot2 svg { width: 40px; height: 40px; }
  .slot2 .fz { top: 22px; font-size: 10px; }
  .slot2 .nm { font-size: 10px; padding: 1px 5px; }
  .slot2 .rot { display: none; }
  /* partida */
  .partida { grid-template-columns: 1fr; height: auto; min-height: 100%; }
  .partida .centro { padding: 10px; }
  .placar { padding: 12px; }
  .placar .tm { font-size: 13px; gap: 8px; }
  .placar .tm .escudo, .placar .tm .escudo-fb { width: 34px !important; height: 34px !important; }
  .placar .gols { font-size: 30px; min-width: 88px; }
  .faixa b { font-size: 22px; } .faixa.gol b { font-size: 30px; } .faixa span { font-size: 12.5px; }
  .narracao { min-height: 260px; max-height: 50dvh; }
  .controles { gap: 6px; }
  .lado-jogo { border-left: 0; border-top: 1px solid var(--borda); }
  .grade-jogos { grid-template-columns: 1fr 1fr; }
  .sel-j { width: 88px; }
  .sala-trofeus { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  #inicio .caixa { width: 100%; }
  /* no celular a foto grande seria peso à toa: a versão pequena basta.
     background-attachment:fixed também sai — em celular trava a rolagem. */
  #inicio { --capa: url('../capa/estadio-peq.jpg'); background-attachment: scroll; }
  .hero { min-height: 150px; border-radius: 16px; margin-bottom: 16px; }
  .hero-txt { padding: 16px 18px 18px; }
  .hero h1 { font-size: 28px; letter-spacing: 3px; }
  .hero p { font-size: 13px; }
  .modos { grid-template-columns: 1fr; }
  .modo-card { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 16px 18px; gap: 4px 12px; }
  .modo-card .ico { width: 40px; height: 40px; }
  .modo-card .ico svg { width: 22px; height: 22px; }
  .modo-card b { flex: 1; }
  .modo-card > span:not(.ico) { flex: 1 1 100%; font-size: 13px; }
}
@media (max-width: 520px) {
  .grade-jogos { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .esc-topo .campo-form { flex: 1 1 100%; }
  .placar .tm span { display: none; }
}

@media (max-width: 900px) {
  .esc-corpo > * { min-width: 0; }
  .card { overflow-x: auto; }
  .grade-cards > * { min-width: 0; }
}

@media (max-width: 900px) { .campo.grande { max-height: none; } .esc-campo-wrap { display: block; } }

/* ================= CELULAR DEITADO (paisagem) ================= */
@media (max-width: 1100px) and (max-height: 560px) and (orientation: landscape) {
  html, body { font-size: 12.5px; }
  #barra { min-height: 44px; padding: 4px 10px; gap: 6px; flex-wrap: nowrap; }
  #barra h1 { font-size: 14px; }
  #barra .chip { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #conteudo { padding: 8px 10px 20px; }
  .g-painel > .s4, .g-painel > .s5, .g-painel > .s3, .g-painel > .s6, .g-painel > .s7, .g-painel > .s8 { grid-column: span 6 !important; }
  .g-painel > .s12 { grid-column: span 12 !important; }
  .card { padding: 10px 12px; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  /* escalação: campo à esquerda (altura da tela), banco e elenco à direita */
  .esc-topo { padding: 6px 10px; gap: 6px; }
  .esc-topo .tit-esc { width: auto; }
  .esc-topo .tit-esc small, .esc-topo .setores { display: none; }
  .esc-topo .campo-form { flex: 0 1 150px; }
  .esc-topo .campo-form label { font-size: 10px; }
  .esc-topo select { padding: 4px 6px; }
  .esc-corpo { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; overflow: hidden; padding: 6px 10px; gap: 8px; }
  .esc-campo-wrap { order: 0; grid-row: 1 / 3; }
  .campo.grande { height: calc(100dvh - 120px); width: auto; max-height: none; aspect-ratio: .72; }
  .esc-banco { order: 0; }
  .esc-banco h3 { padding: 6px 10px 4px; }
  /* deitado sobra largura na coluna da direita: 1 coluna de vagas, rolando na vertical */
  .esc-banco .vagas { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px; align-content: start; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 8px; }
  .vaga-banco { min-width: 0; min-height: 44px; padding: 4px 6px; }
  .esc-elenco { order: 0; max-height: none; min-height: 0; }
  .esc-elenco .info-jog { display: none; }
  .slot2 { width: 64px; }
  .slot2 img.camisa-img, .slot2 svg { width: 32px; height: 32px; }
  .slot2 .fz { top: 16px; font-size: 9px; }
  .slot2 .nm { font-size: 9px; }
  /* partida: jogo + coluna lateral lado a lado, placar compacto */
  .partida { grid-template-columns: 1fr 260px; height: 100%; min-height: 0; }
  #conteudo.cheio { overflow: hidden; }
  .partida .centro { padding: 6px 8px; gap: 6px; min-height: 0; }
  .placar { padding: 6px 10px; }
  .placar .tm { font-size: 12px; }
  .placar .tm span { display: inline; }
  .placar .tm .escudo, .placar .tm .escudo-fb { width: 26px !important; height: 26px !important; }
  .placar .gols { font-size: 24px; min-width: 70px; padding: 0 8px; }
  .placar .relogio { margin-top: 4px; }
  #pl-stats { display: none; }
  .faixa b { font-size: 18px; } .faixa.gol b { font-size: 24px; } .faixa span { font-size: 11px; }
  /* Deitado a altura e curta, mas 3px de padding dava botoes de 22px: pequeno
     demais para o dedo. 34px e o menor que ainda cabe na tela deitada. */
  .controles .btn, .controles select, #visao button, #vel button { padding: 6px 11px; font-size: 12px; min-height: 34px; }
  .narracao { min-height: 0; max-height: none; flex: 1; }
  .narracao .ev { padding: 3px 6px; font-size: 12px; }
  .lado-jogo { border-top: 0; border-left: 1px solid var(--borda); overflow-y: auto; }
  .lado-jogo .sec { padding: 8px 10px; }
  .grade-topo { min-height: 44px; padding: 6px 10px; }
  .grade-jogos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .cj { padding: 6px 8px; } .cj-l b { font-size: 16px; }
  /* janelas e telas iniciais */
  #modal .jan, #modal .jan.larga { max-height: 96dvh; }
  #modal .cab { padding: 8px 14px; } #modal .corpo { padding: 10px 14px; } #modal .rodape { padding: 8px 14px; }
  #modal .corpo [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  #inicio { align-items: start; padding: 10px; }
  .hero { margin-bottom: 10px; min-height: 96px; } .hero-txt { padding: 10px 14px; } .hero h1 { font-size: 22px; margin-top: 6px; }
  .hero p { display: none; } .hero-tag { font-size: 10px; padding: 2px 8px; }
  .modos { grid-template-columns: repeat(3, 1fr); }
  .modo-card { padding: 12px; flex-direction: column; } .modo-card b { font-size: 15px; }
  .modo-card .ico { width: 34px; height: 34px; border-radius: 10px; } .modo-card .ico svg { width: 19px; height: 19px; }
  .modo-card > span:not(.ico) { flex: none; font-size: 12.5px; }
  .grade-times { max-height: 48dvh; }
}

/* pausa bem visível */
.partida.pausado .centro { position: relative; }
.partida.pausado .centro::after { content: '⏸ PAUSADO'; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
  background: rgba(10,15,21,.88); border: 2px solid var(--amar); color: var(--amar); font-weight: 900; font-size: 30px; letter-spacing: 3px; padding: 14px 30px; border-radius: 14px; box-shadow: var(--sombra); }
.partida.pausado #bt-pausa { background: var(--amar); color: #1a1200; border-color: var(--amar); }

/* ---------- chat da liga ---------- */
.chat-card { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 360px; padding: 0; overflow: hidden; }
.chat-lista { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.chat-msg.meu { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg .bolha { background: var(--sup2); border: 1px solid var(--borda); border-radius: 14px 14px 14px 4px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.chat-msg.meu .bolha { background: rgba(var(--acento-rgb, 34, 197, 94), .18); border-color: rgba(var(--acento-rgb, 34, 197, 94), .4); border-radius: 14px 14px 4px 14px; }
.chat-msg .bolha b { font-size: 12.5px; }
.chat-msg .bolha small, .chat-auto small { color: var(--mudo); font-size: 11px; align-self: flex-end; }
.chat-auto { align-self: center; max-width: 90%; text-align: center; background: var(--bg2); border: 1px dashed var(--borda2); color: var(--txt2); border-radius: 10px; padding: 6px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--borda); background: var(--bg2); }
.chat-form input { flex: 1; background: var(--sup); border: 1px solid var(--borda2); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.lista-troca { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--borda); border-radius: 8px; }
.item-troca { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.item-troca:hover { background: var(--sup2); }
.item-troca span:nth-of-type(2) { flex: 1; }
@media (max-width: 900px) { .chat-card { height: calc(100vh - 130px); height: calc(100dvh - 130px); } .chat-msg { max-width: 92%; } }
@media (max-width: 700px) {
  .msg-item { flex-wrap: wrap; }
  .msg-item .txt { flex: 1 1 calc(100% - 50px); }
  .msg-item .acts { flex: 1 1 100%; flex-wrap: wrap; padding-left: 48px; }
  .msg-item .acts:empty { display: none; }
}

/* ================= BARRA DE NAVEGACAO INFERIOR (celular) ================= */
/* No desktop o menu lateral resolve; no celular ele vive escondido atras do
   hamburguer, o que obriga 2 toques para cada troca de tela. Esta barra deixa
   os destinos mais usados a 1 toque. */
#menu-baixo { display: none; }

@media (max-width: 900px) {
  #menu-baixo {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--bg2);
    border-top: 1px solid var(--borda);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,.35);
  }
  #menu-baixo button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; padding: 6px 2px;
    color: var(--txt2); font-size: 10.5px; font-weight: 600;
    border-radius: 10px; position: relative;
  }
  #menu-baixo button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #menu-baixo button.ativo { color: var(--acento); background: var(--acento-f); }
  #menu-baixo button .cont {
    position: absolute; top: 2px; right: 50%; transform: translateX(22px);
    background: var(--verm); color: #fff; font-size: 9.5px; font-weight: 700;
    border-radius: 9px; padding: 0 5px; line-height: 15px;
  }
  #menu-baixo { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  /* espaco para o conteudo nao ficar embaixo da barra */
  #conteudo { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* a escalacao em tela cheia e a ficha do jogador tambem passam por baixo dela */
  .esc-corpo { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  #gaveta .corpo { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  #app.menu-aberto #menu-baixo { z-index: 40; }
}
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  /* deitado a tela e baixa: a barra rouba altura demais */
  #menu-baixo { display: none; }
  #conteudo { padding-bottom: 20px; }
}

/* ================= COLUNAS OPCIONAIS DAS TABELAS ================= */
/* As tabelas do jogo tem ate 14 colunas. No celular isso dava mais de 1000px de
   largura dentro de um card de 386px, e o card rolava sozinho para os lados.
   .op3 = detalhe (some no tablet); .op2 = secundario (some no celular). */
/* O tablet deitado (1024px) ainda pega o layout de computador, com o menu lateral
   de 250px: sobram 724px para uma tabela de 1154px. Por isso .op3 sai ja em 1100px. */
@media (max-width: 1100px) {
  table.t .op3 { display: none; }
}
@media (max-width: 620px) {
  table.t .op2 { display: none; }
  table.t td, table.t th { padding: 7px 5px; }
  table.t .nome-j { display: inline-block; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  /* sombra na borda direita avisando que a tabela continua para o lado */
  .tabela-wrap { background-image: linear-gradient(to left, rgba(10,15,21,.55), transparent 28px);
    background-repeat: no-repeat; background-position: right; background-size: 28px 100%; background-attachment: local; }
  table.t .nome-t { max-width: 44vw; overflow: hidden; }
  table.t .nome-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ================= ROLAGEM PRESA NO PROPRIO PAINEL ================= */
/* Sem overscroll-behavior, chegar ao fim de uma lista continua a rolagem no pai:
   a tela inteira balanca e o Android dispara o "puxar para atualizar". */
#conteudo, nav.menu, .narracao, .grade-jogos, .lado-jogo, .esc-lista, .grade-times,
.lista-troca, .chat-lista, #gaveta .corpo, #modal .corpo, #inicio {
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}

/* ================= APARELHOS DE TOQUE ================= */
/* Alvo minimo de 44px (recomendacao da Apple; o Android pede 48dp). Antes quase
   tudo ficava entre 16px e 36px: botoes da barra com 28px, selects com 27px,
   linhas de tabela com 34px e o link "ver tudo" com 16px. */
@media (pointer: coarse) {
  .btn { padding: 11px 16px; min-height: 44px; }
  .btn.peq { padding: 8px 12px; min-height: 40px; font-size: 13px; }
  .btn.grande { min-height: 50px; }
  .btn.fant.peq { min-width: 44px; justify-content: center; }
  /* min-width porque abas de rótulo curto (uniforme "1", "2", "3") ficavam com
     menos de 20px de largura, mesmo com a altura certa */
  .abas button { padding: 10px 14px; min-height: 42px; min-width: 42px; }
  /* filtros de posição na escalação: rótulos curtos deixavam o botão com menos
     de 26px de largura, estreito demais para o dedo */
  .esc-elenco .filtros button { min-width: 42px; min-height: 40px; padding: 6px 10px; }
  nav.menu button { padding: 12px; min-height: 46px; }
  #menu-baixo button { min-height: 54px; }
  .menu-mob { min-width: 44px; min-height: 44px; justify-content: center; }
  /* Menos de 16px faz o iPhone dar zoom sozinho ao focar o campo — e ao voltar
     do zoom a pagina fica deslocada e "andando" de lado.
     O :not(...) no lugar de input[type=text] e proposital: input sem atributo
     type é um campo de texto, mas nao casa com input[type=text]. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]),
  select, .chat-form input { font-size: 16px; min-height: 44px; padding: 10px 12px; }
  /* o controle de volume tinha 16px de altura: quase impossivel de arrastar */
  input[type=range] { height: 40px; width: 100%; }
  input[type=color] { height: 44px !important; min-width: 56px; }
  input[type=checkbox] { width: 22px; height: 22px; }
  table.t td { padding-top: 11px; padding-bottom: 11px; }
  table.t th { padding-top: 13px; padding-bottom: 13px; }
  .card-jog { padding: 10px 8px; min-height: 48px; }
  .vaga-banco { min-height: 52px; }
  .item-troca { min-height: 44px; }
  .tec-lat { min-height: 40px; }
  .msg-item .acts .btn { min-height: 40px; }
  /* links soltos ("ver tudo", "ver tabela") tinham 16px de altura */
  .card .tit a, .lista-simples a, .noticia a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ================= SEM MOUSE: :hover nao serve ================= */
/* Num celular o :hover gruda depois do toque e o card fica "levantado" sem motivo.
   O menu lateral recolhido tambem nao pode depender de passar o mouse por cima. */
@media (hover: none) {
  .op-inicio:hover, .modo-card:hover { transform: none; box-shadow: none; }
  .slot:hover .circ, .slot2:hover svg, .slot2:hover img.camisa-img { transform: none; }
  #app.recolhido #lateral:hover { width: 72px; box-shadow: none; }
  #app.recolhido #lateral:hover .marca > div:last-child,
  #app.recolhido #lateral:hover .clube-mini > div,
  #app.recolhido #lateral:hover nav.menu button .rot,
  #app.recolhido #lateral:hover .lateral-rodape .modo .txt { display: none; }
  /* em troca, um retorno visual imediato ao encostar */
  .btn:active, .abas button:active, nav.menu button:active, #menu-baixo button:active,
  .grade-times button:active, .card-jog:active, .vaga-banco:active, .op-inicio:active,
  .modo-card:active, .cj:active, .msg-item .acts .btn:active { filter: brightness(1.3); }
  table.t tbody tr.clic:active td { background: var(--azul-f); }
}

/* celula de acoes que pode quebrar em varias linhas no celular (antes era
   white-space:nowrap e empurrava a tabela para fora do card) */
.cel-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }

/* ================= CONVITE PARA LIGAR OS AVISOS ================= */
/* Aparece no topo do conteudo enquanto a pessoa joga uma liga online sem
   notificacao ligada. O botao real vive na tela "Liga online", que no celular
   fica atras do menu — aqui ele fica a um toque. */
.convite-avisos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(var(--acento-rgb), .16), var(--sup) 60%);
  border: 1px solid rgba(var(--acento-rgb), .45); border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 16px; }
.convite-avisos .ic { font-size: 22px; flex: none; }
.convite-avisos .txt { flex: 1 1 220px; min-width: 0; line-height: 1.35; }
.convite-avisos .txt small { display: block; color: var(--txt2); font-size: 12.5px; margin-top: 2px; }
@media (max-width: 620px) {
  .convite-avisos { padding: 12px; }
  .convite-avisos .txt { flex: 1 1 100%; }
  .convite-avisos .btn { flex: 1 1 auto; }
}

/* ================= LIGA ABERTA SEM INTERNET ================= */
/* Copia guardada no aparelho: da para olhar, nao da para jogar. */
.aviso-sem-rede { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(245,185,11,.16), var(--sup) 60%);
  border: 1px solid rgba(245,185,11,.45); border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 16px; }
.aviso-sem-rede .ic { font-size: 22px; flex: none; }
.aviso-sem-rede .txt { flex: 1 1 220px; min-width: 0; line-height: 1.35; }
.aviso-sem-rede .txt small { display: block; color: var(--txt2); font-size: 12.5px; margin-top: 2px; }
@media (max-width: 620px) {
  .aviso-sem-rede .txt { flex: 1 1 100%; }
  .aviso-sem-rede .btn { flex: 1 1 auto; }
}

/* Jogador estrela: a estrela é dourada, com brilho, para saltar na lista. */
.tag.estrela {
  background: linear-gradient(135deg, rgba(245,185,11,.28), rgba(245,185,11,.12));
  border: 1px solid rgba(245,185,11,.55);
  color: #fde68a;
  text-shadow: 0 0 6px rgba(245,185,11,.65);
  font-weight: 800;
}

/* ================= DESTAQUES DO ELENCO ================= */
.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.destaque { display: flex; align-items: center; gap: 10px; background: var(--bg2);
  border: 1px solid var(--borda); border-radius: 10px; padding: 9px 11px; min-width: 0; }
.destaque .ico { font-size: 20px; flex: none; }
.destaque > div { min-width: 0; }
.destaque small { display: block; color: var(--mudo); font-size: 11px; }
.destaque b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destaque .mudo { font-size: 11.5px; }
@media (max-width: 620px) { .destaques { grid-template-columns: 1fr 1fr; } }

/* ================= MELHOR EM CAMPO ================= */
.craque { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px;
  background: linear-gradient(135deg, rgba(245,185,11,.16), rgba(245,185,11,.04));
  border: 1px solid rgba(245,185,11,.4); border-radius: 10px; }
.craque .ico { font-size: 22px; flex: none; }
.craque > div { flex: 1; min-width: 0; }
.craque small { display: block; color: var(--mudo); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.craque b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.craque .mudo { font-size: 11.5px; }
.craque .nota-craque { flex: none; font-size: 19px; font-weight: 900; color: #fde68a;
  background: rgba(0,0,0,.28); border-radius: 9px; padding: 4px 11px; font-variant-numeric: tabular-nums; }

/* ================= COMO JOGAR ================= */
/* Uma seção por assunto, aberta uma de cada vez: o texto inteiro de uma vez só
   assusta, e no celular vira rolagem sem fim. */
.ajuda { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.ajuda-bloco { padding: 0; overflow: hidden; }
.ajuda-tit { display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; color: var(--txt); text-align: left;
  font-size: 15px; font-weight: 700; padding: 15px 18px; min-height: 52px; }
.ajuda-tit:hover { background: var(--sup2); }
.ajuda-tit span:first-child { flex: 1; min-width: 0; }
.ajuda-tit .seta { font-size: 20px; font-weight: 400; color: var(--mudo); flex: none; width: 20px; text-align: center; }
.ajuda-bloco.aberto .ajuda-tit { color: var(--acento); border-bottom: 1px solid var(--borda); }
.ajuda-corpo { display: none; padding: 14px 18px 18px; line-height: 1.6; color: var(--txt2); }
.ajuda-bloco.aberto .ajuda-corpo { display: block; }
.ajuda-corpo p { margin: 0 0 10px; }
.ajuda-corpo p:last-child { margin-bottom: 0; }
.ajuda-corpo b { color: var(--txt); }
.ajuda-corpo ul { margin: 0 0 10px; padding-left: 20px; }
.ajuda-corpo li { margin-bottom: 5px; }
.ajuda-corpo .tabela-wrap { margin: 10px 0; }
.ajuda-corpo .dica { margin: 8px 0 12px; }

/* ================= CATEGORIAS DE BASE ================= */
.grade-base { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.card-base { background: var(--bg2); border: 1px solid var(--borda); border-radius: 12px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.card-base .topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-base .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.card-base .estrelas { color: #fbbf24; font-size: 15px; letter-spacing: 2px; text-shadow: 0 0 6px rgba(245,185,11,.5); }
.card-base .sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.card-base .acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.card-base .acoes .btn { flex: 1 1 auto; }
.amar-txt { color: var(--amar); font-weight: 600; }
@media (max-width: 620px) { .grade-base { grid-template-columns: 1fr; } }

/* Clássico: o painel avisa antes do jogo, porque o resultado pesa o dobro. */
.tag.classico { background: linear-gradient(135deg, rgba(239,68,68,.3), rgba(245,185,11,.2));
  border: 1px solid rgba(239,68,68,.55); color: #ffc9c9; font-weight: 800;
  letter-spacing: .5px; padding: 4px 10px; font-size: 11.5px; }

/* Perna boa, colada na posição. Atuar no lado trocado custa 7% de rendimento,
   então isso é informação de escalação e precisa saltar sem roubar coluna. */
.pe { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px;
  border-radius: 4px; font-size: 9.5px; font-weight: 800; vertical-align: 2px; }
.pe-d { background: rgba(255,255,255,.1); color: var(--txt2); }
.pe-e { background: rgba(167,139,250,.22); color: var(--roxo); }

/* ================= PROPOSTAS DE PATROCÍNIO ================= */
.props-pat { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.prop-pat { background: var(--bg2); border: 1px solid var(--borda); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prop-pat .marca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14px; }
.prop-pat .valor { font-size: 20px; font-weight: 800; line-height: 1.1; }
.prop-pat .valor small { display: block; font-size: 11.5px; font-weight: 500; color: var(--mudo); margin-top: 2px; }
.prop-pat .detalhe { font-size: 12.5px; color: var(--txt2); line-height: 1.45; flex: 1; }
.prop-pat .btn { width: 100%; }
@media (max-width: 620px) { .props-pat { grid-template-columns: 1fr; } }

/* Banco reordenado na substituição: quem joga na mesma posição vem primeiro. */
.jog-campo.combina { background: rgba(34,197,94,.09); border-radius: 6px; }
.selo-pos { margin-left: 6px; font-size: 10px; padding: 1px 6px; }

/* Ordem dos batedores na disputa de pênaltis. */
.campo-form.penais { flex: 1 1 100%; }
.lista-penais { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.lista-penais select { min-width: 0; }

/* ================= COMISSÃO TÉCNICA ================= */
.cargo { display: flex; flex-direction: column; gap: 9px; }
.cargo .niveis { display: flex; gap: 4px; }
.cargo .niveis i { flex: 1; height: 6px; border-radius: 3px; background: var(--sup3); }
.cargo .niveis i.on { background: var(--acento); box-shadow: 0 0 6px rgba(var(--acento-rgb), .5); }
.cargo .efeito { font-size: 13px; color: var(--txt2); line-height: 1.45; }
.cargo .agora { font-size: 13px; }
.cargo .acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cargo .acoes .btn { flex: 1 1 auto; }
.cargo .dica { margin: 0; }

/* Botão kebab: três pontinhos, sem rótulo. Serve para "mais opções" onde o
   espaço é curto — na barra da escalação cada pixel de altura vira campo. */
.btn.kebab { padding: 0; width: 40px; min-width: 40px; justify-content: center; }
.btn.kebab svg { width: 18px; height: 18px; }