/* MVP12 (5ª rodada) — TUDO QUE FICA DENTRO DA ARENA fala a língua do placar (kings-broadcast.css): faixas pretas chapadas,
   a fonte condensada da transmissão em caixa-alta, leve inclinação, dourado Kings como a única cor de ação, a carta secreta
   no verde-água da carta física da arena e o presidente no azul da bandeira dele no placar. Início, seleção de equipe
   (team-select.css), técnico, carta, presidente, aviso do rodízio, mensagens e os botões Kings da partida.
   Mundo visual único e escuro (o jogo não tem tema claro). Alvos de 44 px ou mais no celular. */
:root {
  /* uma fonte de título só, no site e no APK: Roboto Condensed (Google Fonts no site; no APK sem internet, a condensada
     do próprio Android, que é a mesma família). Impact fica só de reserva. Peso por variável: o formato curto `font:` fixaria 400. */
  --bc-font: "Roboto Condensed", sans-serif-condensed, Impact, "Arial Narrow", sans-serif; --bc-w: 700;
  --bc-ink: #050609;      /* barra do placar */
  --bc-bar: #080a10;      /* faixas da transmissão */
  --bc-raise: #12141a;    /* item sobre a faixa */
  --bc-raise-2: #1b1e25;  /* item sob o dedo */
  --bc-line: #ffffff17;
  --bc-steel: #242529;    /* faixa do relógio */
  --bc-text: #f1f3f5;
  --bc-muted: #9aa0ab;
  --bc-chip: #e9ecf1;     /* evento do placar */
  --bc-gold: #f3c46b;     /* Kings: ação */
  --bc-gold-hi: #ffd88a;
  --bc-card: #48e4c2;     /* carta secreta: a carta física da arena */
  --bc-pres: #34a9ff;     /* presidente: a bandeira dele no placar */
  --bc-out: #e4262f;
  --bc-in: #3fe0a4;
}

/* botões dentro da arena (início, seleção, erro) */
.arena-stage .button { height: 48px; gap: 12px; padding: 0 18px; border-radius: 0; font: var(--bc-w, 400) 19px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .6px; text-transform: uppercase; transform: skew(-3deg); box-shadow: 0 3px 12px #0008; }
.arena-stage .button:active:not(:disabled) { transform: skew(-3deg) translateY(1px); }
.arena-stage .button-primary { color: #0b0d12; background: var(--bc-gold); }
.arena-stage .button-primary:hover:not(:disabled) { background: var(--bc-gold-hi); box-shadow: 0 3px 12px #0008; }
.arena-stage .button-secondary { color: var(--bc-text); background: #080a10ed; border: 1px solid #ffffff2e; backdrop-filter: none; }
.arena-stage .button-secondary:hover:not(:disabled) { background: var(--bc-raise-2); }
.arena-stage .button svg { width: 18px; height: 18px; stroke-width: 2.2; }
.arena-stage .button:disabled { opacity: .45; cursor: default; }
/* ação indisponível: cinza do relógio, legível (dourado translúcido vira marrom) */
.arena-stage .button-primary:disabled, .coach-primary:disabled { opacity: 1; color: #8f959f; background: var(--bc-steel); box-shadow: none; }
.arena-stage .button:focus-visible, .team-select :focus-visible { outline: 2px solid var(--bc-gold); outline-offset: 3px; }

/* início: o título da transmissão (faixa preta com a coroa, confronto na fonte do placar, linha de apoio em faixa) */
.home-overlay { background: linear-gradient(90deg, #050609eb, #050609ad 34%, #05060929 62%, transparent 82%); }
.home-overlay .intro-content { display: flex; flex-direction: column; align-items: flex-start; max-width: 660px; padding-top: 0; }
.home-overlay .eyebrow { gap: 8px; padding: 5px 11px 4px 9px; color: var(--bc-text); background: #080a10ed; font: var(--bc-w, 400) 14px/1.3 var(--bc-font); letter-spacing: .5px; }
.home-overlay .eyebrow > span { width: 16px; height: 13px; background: var(--bc-gold); clip-path: polygon(0 28%, 26% 58%, 50% 0, 74% 58%, 100% 28%, 88% 100%, 12% 100%); }
.home-overlay h1 { gap: .16em; margin: 8px 0 0; font: var(--bc-w, 400) clamp(58px, 7.4vw, 118px)/.84 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .5px; text-transform: uppercase; text-shadow: 0 4px 24px #000a; }
.home-overlay h1 .versus { font-size: .6em; font-weight: var(--bc-w, 400); color: var(--bc-gold); }
.home-overlay .intro-description { margin: 10px 0 0; padding: 8px 13px 7px; color: var(--bc-text); background: #080a10ed; font: var(--bc-w, 400) clamp(15px, 1.35vw, 19px)/1.15 var(--bc-font); letter-spacing: .4px; }
.home-overlay .intro-actions { margin-top: 22px; gap: 10px; }
.home-overlay .intro-note { margin-top: 16px; padding: 0; list-style: none; gap: 8px; color: var(--bc-muted); font: var(--bc-w, 400) 13px/1.3 var(--bc-font); letter-spacing: .5px; text-transform: uppercase; }
.home-overlay .intro-note li + li::before { content: "·"; margin-right: 8px; color: var(--bc-gold); }
/* 7ª rodada: o app Android (o mesmo jogo, sem internet); dentro do app o link some */
.home-overlay .home-apk { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--bc-gold); font: var(--bc-w, 400) 14px/1.3 var(--bc-font); letter-spacing: .5px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.home-overlay .home-apk:hover { color: var(--bc-gold-hi); }
html.native-app .home-apk { display: none; }
.intro-edition { color: var(--bc-muted); font: var(--bc-w, 400) 13px/1.3 var(--bc-font); letter-spacing: .5px; }
.intro-edition .edition-line { background: #ffffff2e; }
.error-panel { border-radius: 0; border: 0; border-top: 3px solid var(--bc-out); background: #07090cf4; }
.error-panel h2 { font: var(--bc-w, 400) 26px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .4px; text-transform: uppercase; }
.error-icon { border-radius: 0; border-color: var(--bc-out); color: var(--bc-text); font-family: var(--bc-font); }

/* celular: o cabeçalho do site sai enquanto você escolhe (a seleção usa a tela inteira) */
html.phone body.is-selecting .app-header { display: none; }
html.phone body.is-selecting .arena-stage { border: 0; border-radius: 0; }
html.phone:not(.portrait) .home-overlay h1 { font-size: 56px; margin-top: 6px; }
html.phone:not(.portrait) .home-overlay .intro-description { margin-top: 8px; font-size: 14px; }
html.phone:not(.portrait) .home-overlay .intro-actions { margin-top: 14px; }
html.phone:not(.portrait) .home-overlay .intro-note { margin-top: 12px; }

/* técnico, carta e presidente: gaveta à direita, cabeçalho em faixa com a cor do assunto, ação sempre à vista embaixo */
#btn-coach, #btn-coach-phone { display: none; }
body.is-playing[data-mode="play"] #btn-coach { display: inline-flex; }
html.phone body.is-playing[data-mode="play"] #btn-coach-phone { display: grid; }
.coach-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 42; width: min(400px, 92vw); display: flex; flex-direction: column; font-size: 13px; color: var(--bc-text); background: #07090cf5; box-shadow: -14px 0 34px #000a; }
.coach-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: var(--safe-t, 0px) calc(4px + var(--safe-r, 0px)) 0 16px; background: var(--bc-ink); border-top: 3px solid var(--bc-gold); }
.sheet-card .coach-head { border-top-color: var(--bc-card); }
.sheet-pres .coach-head { border-top-color: var(--bc-pres); }
.coach-head strong { font: var(--bc-w, 400) 22px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .6px; text-transform: uppercase; }
.coach-x { display: grid; place-items: center; width: 44px; height: 44px; color: var(--bc-muted); }
.coach-x:hover { color: #fff; background: var(--bc-raise-2); }
.coach-tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #0d0f14; border-bottom: 1px solid var(--bc-line); }
.coach-tabs button { min-height: 44px; font: var(--bc-w, 400) 17px/1 var(--bc-font); letter-spacing: .7px; text-transform: uppercase; color: #7d838e; }
.coach-tabs button:hover { color: var(--bc-text); }
.coach-tabs button[aria-selected="true"] { color: var(--bc-text); background: #15181e; box-shadow: inset 0 -3px 0 var(--bc-gold); }
.coach-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 14px calc(16px + var(--safe-r, 0px)) 16px 16px; }
.coach-pane { display: flex; flex-direction: column; gap: 18px; }
.coach-pane-troca { flex: 1 1 auto; min-height: 0; }
.coach-sec h3, .coach-col h4 { margin: 0 0 8px; font: var(--bc-w, 400) 14px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .9px; text-transform: uppercase; color: var(--bc-muted); }
.coach-seg, .coach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.coach-seg button, .coach-grid button { min-height: 44px; padding: 4px 6px; font: var(--bc-w, 400) 15px/1.05 var(--bc-font); letter-spacing: .5px; text-transform: uppercase; color: #c9ced6; background: var(--bc-raise); border: 1px solid var(--bc-line); }
.coach-seg button:hover:not(:disabled), .coach-grid button:hover:not(:disabled) { color: #fff; background: var(--bc-raise-2); }
.coach-seg button[aria-pressed="true"], .coach-grid button[aria-pressed="true"] { color: #08090b; background: var(--bc-chip); border-color: var(--bc-chip); }
.coach-seg button:disabled, .coach-grid button:disabled { opacity: .38; cursor: default; }
.coach-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-top: 10px; color: var(--bc-muted); font: var(--bc-w, 400) 14px/1 var(--bc-font); letter-spacing: .8px; text-transform: uppercase; }
.coach-row select { min-height: 44px; padding: 0 10px; color: var(--bc-text); background: var(--bc-raise); border: 1px solid var(--bc-line); border-radius: 0; font: 600 13px Inter, "Segoe UI", sans-serif; text-transform: none; }
.coach-note { margin: 7px 0 0; font-size: 12px; color: #b3b9c3; }
.coach-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: 100%; min-height: 0; }
.coach-col { display: flex; flex-direction: column; min-height: 0; }
.coach-col .coach-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.coach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.coach-list button { width: 100%; min-height: 46px; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 6px; align-items: center; padding: 5px 8px 5px 4px; text-align: left; color: var(--bc-text); background: var(--bc-raise); border: 1px solid var(--bc-line); border-left: 4px solid transparent; }
.coach-list button:hover:not(:disabled) { background: var(--bc-raise-2); }
.coach-list button[aria-pressed="true"] { background: #1d2129; border-left-color: var(--bc-gold); }
.coach-col-out .coach-list button[aria-pressed="true"] { border-left-color: var(--bc-out); }
.coach-col-in .coach-list button[aria-pressed="true"] { border-left-color: var(--bc-in); }
.coach-list button:disabled { opacity: .5; cursor: default; }
.cl-num { grid-row: span 2; font: var(--bc-w, 400) 20px/1 var(--bc-font); color: #c9ced6; text-align: center; font-variant-numeric: tabular-nums; }
.cl-name { font-size: 13px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-meta { grid-column: 2; font-size: 11px; color: var(--bc-muted); }
.coach-empty { padding: 8px 2px; font-size: 12px; color: var(--bc-muted); }
.coach-foot { flex: 0 0 auto; display: grid; gap: 7px; padding: 12px calc(16px + var(--safe-r, 0px)) calc(14px + var(--safe-b, 0px)) 16px; background: var(--bc-ink); border-top: 1px solid var(--bc-line); }
.coach-foot .coach-note { margin: 0; }
.coach-primary { width: 100%; min-height: 48px; font: var(--bc-w, 400) 19px/1 var(--bc-font); letter-spacing: .6px; text-transform: uppercase; color: #0b0d12; background: var(--bc-gold); transform: skew(-3deg); }
.coach-primary:hover:not(:disabled) { background: var(--bc-gold-hi); }
.coach-primary:active:not(:disabled) { transform: skew(-3deg) translateY(1px); }
.coach-primary:disabled { cursor: default; }
.coach-panel :focus-visible, .rot-banner :focus-visible { outline: 2px solid var(--bc-gold); outline-offset: 2px; }
/* a carta na mão: a mesma carta da arena, em miniatura */
.card-face { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px; color: var(--bc-card); background: linear-gradient(110deg, #0d1d21, #07090c 75%); border: 1px solid #48e4c24d; }
.card-mini { display: block; width: 58px; height: 84px; }
.card-face strong { display: block; font: var(--bc-w, 400) 26px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .3px; text-transform: uppercase; color: var(--bc-text); }
.card-face div > span { display: block; margin-top: 5px; font-size: 13px; color: #c3c8d1; }
.card-face em { display: inline-block; margin-top: 8px; padding: 4px 7px 3px; font: var(--bc-w, 400) 12px/1 var(--bc-font); font-style: normal; letter-spacing: .7px; text-transform: uppercase; color: #06231c; background: var(--bc-card); }
.card-face.is-used { opacity: .6; }
.card-face.is-used em { color: var(--bc-text); background: var(--bc-steel); }
.card-opp { margin: 0; color: var(--bc-muted); }
/* celular deitado: a gaveta do técnico mais larga, cada aba cabe sem rolar */
html.phone:not(.portrait) .coach-panel { width: min(470px, 60vw); }
html.phone:not(.portrait) .coach-head { min-height: 46px; }
html.phone:not(.portrait) .coach-body { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
html.phone:not(.portrait) .coach-pane { gap: 12px; }
html.phone:not(.portrait) .coach-foot { padding-top: 8px; padding-bottom: calc(8px + var(--safe-b, 0px)); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 10px; }
html.phone:not(.portrait) .coach-foot .coach-primary { order: 2; }
html.phone:not(.portrait) .card-face { padding: 8px 12px; }
html.phone:not(.portrait) .card-mini { width: 44px; height: 64px; }
html.phone:not(.portrait) .card-face strong { font-size: 21px; }
html.phone.portrait .coach-lists { grid-template-columns: 1fr; }

/* aviso do rodízio: a decisão tem prazo, então fica fora da gaveta, logo abaixo do placar */
.rot-banner { position: fixed; z-index: 44; top: calc(184px + var(--safe-t, 0px)); left: 50%; transform: translateX(-50%); width: min(480px, calc(100vw - 24px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 10px 12px 12px 14px; color: var(--bc-text); background: #07090cf4; border-top: 3px solid var(--bc-gold); box-shadow: 0 10px 28px #000a; }
.rot-banner strong { display: block; font: var(--bc-w, 400) 14px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .9px; text-transform: uppercase; color: var(--bc-gold); }
.rot-banner span { display: block; margin-top: 5px; font-size: 14px; font-weight: 600; }
.rot-actions { display: flex; gap: 6px; }
.rot-actions button { min-height: 44px; padding: 0 14px; font: var(--bc-w, 400) 17px/1 var(--bc-font); letter-spacing: .6px; text-transform: uppercase; }
.rot-actions .coach-primary { width: auto; }
#rot-no { color: var(--bc-text); background: var(--bc-raise); border: 1px solid var(--bc-line); transform: skew(-3deg); }
.rot-bar { grid-column: 1 / -1; display: block; height: 3px; background: #ffffff14; overflow: hidden; }
.rot-bar b { display: block; height: 100%; width: 100%; background: var(--bc-gold); transform-origin: left center; transition: transform .22s linear; }   /* 7ª rodada: escala, não largura (sem refazer layout a cada quadro) */
@media (max-width: 720px) { .rot-banner { top: calc(150px + var(--safe-t, 0px)); } }
html.phone .rot-banner { top: calc(58px + var(--safe-t, 0px)); }

/* mensagem de resultado: o evento branco do placar */
.coach-toast { position: fixed; z-index: 46; left: 50%; bottom: calc(var(--deck-h, 120px) + 14px); transform: translateX(-50%) skew(-3deg); max-width: calc(100vw - 32px); padding: 8px 14px 7px; font: var(--bc-w, 400) 17px/1 var(--bc-font); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #08090b; background: var(--bc-chip); box-shadow: 0 6px 18px #0009; pointer-events: none; }
html.phone .coach-toast { bottom: calc(14px + var(--safe-b, 0px)); }

/* botões Kings da partida: faixa preta com a bandeira do placar (carta verde-água, presidente azul) */
.kings-actions button { position: relative; min-height: 40px; padding: 0 12px 0 17px; color: var(--bc-text); background: #07090ce6; border: 0; border-radius: 0; font: var(--bc-w, 400) 16px/1 var(--bc-font); letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 3px 10px #0008; transform: skew(-3deg); }
.kings-actions button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bc-card); }
.kings-actions #btn-president::before { background: var(--bc-pres); }
.kings-actions button:hover:not(:disabled) { background: var(--bc-raise-2); }
.kings-actions button:active:not(:disabled) { transform: skew(-3deg) translateY(1px); }
html.phone .kings-actions button { min-height: 44px; padding: 0 12px 0 17px; font-size: 15px; }
/* pausa, técnico e menu no celular: quadrados pretos como o placar */
.phone-button { border-radius: 0; background: #07090cd9; border-color: #ffffff26; }
.phone-button.is-paused { color: #0b0d12; background: var(--bc-gold); border-color: var(--bc-gold); }

@media (prefers-reduced-motion: reduce) { .rot-bar b { transition: none; } }

/* MVP12 (6ª rodada) — O ATLETA, O QUADRO E OS NÚMEROS, na mesma língua do placar */
/* retrato: recorte reto como os cartões da transmissão; sem foto, as iniciais */
.ap { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; overflow: hidden; color: var(--bc-muted); background: var(--bc-steel); font: var(--bc-w, 400) 13px/1 var(--bc-font); letter-spacing: .4px; }
.ap i { font-style: normal; }
.ap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* ficha do atleta */
.af { display: flex; flex-direction: column; gap: 14px; color: var(--bc-text); }
.af-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px 15px; background: linear-gradient(100deg, color-mix(in srgb, var(--kit) 34%, #080a10), #080a10 70%); }
.af-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--kit); }
.af-face { width: 72px; height: 72px; font-size: 24px; }
.af-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.af-num { font: var(--bc-w, 400) 16px/1 var(--bc-font); color: var(--bc-gold); letter-spacing: .5px; }
.af-id strong { font: var(--bc-w, 400) clamp(20px, 2.8vw, 28px)/.95 var(--bc-font); letter-spacing: .3px; text-transform: uppercase; overflow-wrap: normal; word-break: keep-all; text-wrap: balance; }
.af-id span:last-child { font-size: 12px; color: #c3c8d1; }
.af-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px 7px; background: var(--bc-ink); }
.af-score b { font: var(--bc-w, 400) 34px/1 var(--bc-font); font-weight: var(--bc-w, 400); color: var(--bc-gold); font-variant-numeric: tabular-nums; }
.af-score small { font: var(--bc-w, 400) 11px/1 var(--bc-font); letter-spacing: .8px; text-transform: uppercase; color: var(--bc-muted); }
.af-sec h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font: var(--bc-w, 400) 14px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .9px; text-transform: uppercase; color: var(--bc-muted); }
.af-sec h4 small { font: 11px/1 Inter, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; color: #7d838e; }
.af-attrs { display: grid; gap: 6px; }
.af-attr { display: grid; grid-template-columns: 118px minmax(0, 1fr) 26px; align-items: center; gap: 10px; font-size: 12px; color: #c9ced6; }
.af-attr i { height: 7px; background: #ffffff12; }
.af-attr i b { display: block; height: 100%; background: var(--bc-chip); }
.af-attr em { font: var(--bc-w, 400) 16px/1 var(--bc-font); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--bc-text); }
.af-attr.is-key span { color: var(--bc-text); font-weight: 650; }
.af-attr.is-key i b { background: var(--bc-gold); }
.af-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px; margin: 0; }
.af-stats > div { padding: 7px 9px 8px; background: var(--bc-raise); border: 1px solid var(--bc-line); }
.af-stats dt { font: var(--bc-w, 400) 11px/1 var(--bc-font); letter-spacing: .6px; text-transform: uppercase; color: var(--bc-muted); }
.af-stats dd { margin: 5px 0 0; font: var(--bc-w, 400) 22px/1 var(--bc-font); font-variant-numeric: tabular-nums; color: var(--bc-text); }
.af-live .af-stats > div { border-top: 2px solid var(--bc-gold); }

/* quadro tático: o piso preto de linhas brancas da arena, a grade da produção e o editor do atleta escolhido */
.tb { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 14px; align-items: start; }
.tb-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tb-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 0 1 260px; }
.tb-seg button, .tb-opts button { min-height: 44px; padding: 4px 8px; font: var(--bc-w, 400) 15px/1.05 var(--bc-font); letter-spacing: .5px; text-transform: uppercase; color: #c9ced6; background: var(--bc-raise); border: 1px solid var(--bc-line); }
.tb-seg button:hover, .tb-opts button:hover { color: #fff; background: var(--bc-raise-2); }
.tb-seg button[aria-pressed="true"], .tb-opts button[aria-pressed="true"] { color: #08090b; background: var(--bc-chip); border-color: var(--bc-chip); }
.tb-dir { display: inline-flex; align-items: center; gap: 6px; font: var(--bc-w, 400) 13px/1 var(--bc-font); letter-spacing: .8px; text-transform: uppercase; color: var(--bc-muted); }
.tb-dir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.tb-pitch { position: relative; width: 100%; aspect-ratio: 50 / 32; background: radial-gradient(ellipse at 50% 45%, #15171c, #0a0b0e 75%); border: 1px solid #ffffff1f; overflow: visible; }
.tb-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #ffffffa6; stroke-width: .16; }
.tb-lines .tb-dot { fill: #ffffffd0; stroke: none; }
.tb-cell { position: absolute; height: 20%; padding: 0; background: transparent; border: 1px dashed #ffffff0f; }
.tb-cell span { position: absolute; left: 4px; top: 3px; font: var(--bc-w, 400) 10px/1 var(--bc-font); letter-spacing: .5px; color: #ffffff38; }
.tb-cell:hover { background: #f3c46b17; border-color: #f3c46b55; }
.tb-cell:hover span { color: var(--bc-gold); }
.tb-chip { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 44px; padding: 0; transform: translate(-50%, -50%); background: none; transition: left .42s cubic-bezier(.2, .8, .2, 1), top .42s cubic-bezier(.2, .8, .2, 1); }
.tb-chip:active:not(:disabled) { transform: translate(-50%, -50%); }
.tb-chip b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: var(--bc-w, 400) 17px/1 var(--bc-font); font-weight: var(--bc-w, 400); color: #fff; text-shadow: 0 1px 2px #000c; background: var(--kit); border: 2px solid #0b0c0f; box-shadow: 0 2px 8px #000a; }
.tb-chip small { max-width: 64px; padding: 1px 4px; font: 11px/1.2 Inter, "Segoe UI", sans-serif; color: var(--bc-text); background: #050609d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-chip.is-gk b { background: var(--bc-steel); border-color: var(--bc-gold); }
.tb-chip.is-sel b { box-shadow: 0 0 0 3px var(--bc-gold), 0 2px 10px #000c; }
.tb-chip.is-sel small { color: #08090b; background: var(--bc-gold); }
.tb-ed { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; background: #07090c; border: 1px solid var(--bc-line); }
.tb-ed-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-face { width: 44px; height: 44px; }
.tb-ed-head div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tb-num { font: var(--bc-w, 400) 14px/1 var(--bc-font); color: var(--bc-gold); }
.tb-ed-head strong { font: var(--bc-w, 400) 20px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ed-head small { font-size: 12px; color: #b3b9c3; }
.tb-ed h4 { margin: 4px 0 0; font: var(--bc-w, 400) 14px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .9px; text-transform: uppercase; color: var(--bc-muted); }
.tb-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.tb-opts button { font-size: 13px; }
.tb-note { margin: 0; font-size: 12px; color: #b3b9c3; }
@media (prefers-reduced-motion: reduce) { .tb-chip { transition: none; } }

/* técnico: formação no cabeçalho, as quatro abas, a gaveta mais larga para o quadro e para os números */
.coach-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.coach-title span { font: var(--bc-w, 400) 14px/1 var(--bc-font); letter-spacing: .6px; text-transform: uppercase; color: var(--bc-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.coach-panel .coach-tabs button { font-size: 16px; }
.coach-sheet .coach-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coach-panel[data-tab="atletas"] { width: min(900px, 100vw); }
.coach-panel[data-tab="numeros"] { width: min(600px, 100vw); }
.coach-sec h3 span, .coach-sec h3 > span { letter-spacing: .5px; color: var(--bc-gold); text-transform: none; font: var(--bc-w, 400) 13px/1 var(--bc-font); }
.coach-grid4, .coach-pane-tatica [data-group="preset"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.coach-dials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.coach-dial h4 { margin: 0 0 6px; font: var(--bc-w, 400) 13px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .9px; text-transform: uppercase; color: var(--bc-muted); }
.coach-dial .coach-seg { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.coach-rot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.coach-rot-row .coach-row { margin: 0; }
.coach-pane-atletas, .coach-pane-numeros { flex: 1 1 auto; min-height: 0; }
.coach-pane.is-behind { display: none !important; }
.coach-totais { margin: 0; font: var(--bc-w, 400) 14px/1.3 var(--bc-font); letter-spacing: .5px; text-transform: uppercase; color: var(--bc-muted); }
.coach-table-wrap { overflow: auto; overscroll-behavior: contain; border: 1px solid var(--bc-line); }
.coach-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.coach-table th, .coach-table td { padding: 0 6px; height: 44px; text-align: center; border-bottom: 1px solid var(--bc-line); }
.coach-table thead th { position: sticky; top: 0; z-index: 1; height: 32px; font: var(--bc-w, 400) 13px/1 var(--bc-font); font-weight: var(--bc-w, 400); letter-spacing: .6px; text-transform: uppercase; color: var(--bc-muted); background: var(--bc-ink); }
.coach-table thead th:first-child, .coach-table tbody th { text-align: left; }
.coach-table tbody th { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 220px; font-weight: 400; }
.coach-table td { font: var(--bc-w, 400) 17px/1 var(--bc-font); color: var(--bc-text); }
.coach-table tbody tr { cursor: pointer; }
.coach-table tbody tr:hover, .coach-table tbody tr:focus-visible { background: var(--bc-raise-2); outline: none; box-shadow: inset 3px 0 0 var(--bc-gold); }
.coach-table tr.is-out { opacity: .6; }
.ct-face { width: 28px; height: 28px; font-size: 11px; }
.ct-num { flex: 0 0 22px; font: var(--bc-w, 400) 16px/1 var(--bc-font); color: var(--bc-gold); text-align: right; }
.ct-name { min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-nota { font-size: 19px; }
.ct-nota.is-high { color: var(--bc-gold); }
.ct-nota.is-low { color: #ff7b82; }
.coach-ficha { display: flex; flex-direction: column; gap: 10px; }
.coach-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; color: var(--bc-text); background: var(--bc-bar); border: 1px solid var(--bc-line); font: var(--bc-w, 400) 16px/1 var(--bc-font); letter-spacing: .5px; text-transform: uppercase; transform: skew(-3deg); }
.coach-back svg { width: 16px; height: 16px; transform: rotate(180deg); fill: none; stroke: currentColor; stroke-width: 2; }
/* celular deitado: o quadro e os números usam a tela inteira; a tática cabe sem rolar */
html.phone:not(.portrait) .coach-panel[data-tab="atletas"] { width: 100vw; }
html.phone:not(.portrait) .coach-panel[data-tab="numeros"] { width: min(640px, 100vw); }
html.phone:not(.portrait) .coach-pane-tatica { gap: 8px; }
html.phone:not(.portrait) .coach-dials { gap: 8px 12px; }
html.phone:not(.portrait) .coach-sec h3, html.phone:not(.portrait) .coach-col h4 { margin-bottom: 5px; }
html.phone:not(.portrait) .coach-dial h4 { margin-bottom: 4px; }
html.phone:not(.portrait) .tb { grid-template-columns: minmax(0, 1.25fr) minmax(250px, 1fr); gap: 10px; }
html.phone:not(.portrait) .tb-pitch { max-height: calc(100dvh - 176px); width: auto; }
html.phone:not(.portrait) .tb-ed { padding: 8px 10px; gap: 6px; }
html.phone:not(.portrait) .tb-face { width: 36px; height: 36px; }
html.phone.portrait .tb { grid-template-columns: 1fr; }

/* MVP12 (6ª rodada) — CONTROLES POR SITUAÇÃO: com a bola (passe, chute, arrancada, corte, finta) ou sem ela (carrinho,
   desarme, pressão, troca); body[data-ctx] vem do app.js. Os de defesa têm a borda vermelha da falta. */
body:not([data-ctx="def"]) .ctx-def, body[data-ctx="def"] .ctx-ball { display: none !important; }
.ctrl-name i { font-style: normal; }
.k-q { grid-area: 1 / 1; }
.touch-button.ctx-def { border-color: #e4262f99; }
.touch-button.ctx-def.touch-shoot { background: #7d1a22c4; border-color: #ff8a90a0; }
.touch-button.ctx-def:active, .touch-button.ctx-def.is-active { background: #b3262fd0; }
html.phone .touch-sprint { display: none; }
html.phone .touch-actions { width: 232px; height: 196px; }
html.phone .touch-actions [data-control="cut"], html.phone .touch-actions [data-control="switch"] { right: 84px; bottom: 80px; width: 56px; height: 56px; font-size: 11px; }
html.phone .touch-actions [data-control="dribble"], html.phone .touch-actions [data-control="press"] { right: 12px; bottom: 96px; width: 56px; height: 56px; font-size: 11px; }
html.phone .touch-actions [data-control="feint"] { right: 158px; bottom: 58px; width: 56px; height: 56px; font-size: 11px; }
html.phone .touch-actions [data-control="tackle"] { right: 94px; bottom: 6px; width: 62px; height: 62px; font-size: 12px; }
html.phone .touch-actions [data-control="slide"] { right: 0; bottom: 0; width: 82px; height: 82px; font-size: 13px; }
.touch-small svg, .touch-pass svg { width: 16px; height: 16px; }
.touch-pass { flex-direction: column; gap: 2px; }
/* dificuldade nas configurações (ao lado da qualidade) */
.difficulty-control select { min-width: 118px; }

/* a barra de baixo com a dificuldade cabe em telas de 1280 a 1500 px (sem cortar a tela cheia) */
@media (min-width: 1101px) and (max-width: 1500px) {
  .toolbar { gap: 10px; }
  .view-actions, .match-actions { gap: 2px; }
  .control-deck .tool-button { padding: 0 8px; }
  .camera-group .camera-label { display: none; }
  .camera-selector .segment { padding: 0 13px; }
  .difficulty-control select { min-width: 0; }
}

/* MVP12 (7ª rodada) — Ajustes: dificuldade e a ajuda na mira do passe e do chute num painel só (a barra de baixo não cabe
   mais selects). No computador abre para cima do botão; no celular o painel se desfaz em linhas do menu, como a Qualidade. */
.play-settings { position: relative; display: inline-flex; }
.play-settings-panel { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 47; display: none; gap: 8px; min-width: 272px; padding: 12px; background: #0c1018f7; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 28px #000a; }
.play-settings.is-open .play-settings-panel { display: grid; }
.play-settings-panel .quality-control { justify-content: space-between; min-height: 40px; }
.play-settings-panel .quality-control > span { display: inline; font-size: 12px; color: #c0c7d7; }
.play-settings-panel select { min-width: 150px; }
#btn-settings[aria-expanded="true"] { color: var(--text); background: #1b2230; }
html.phone body.is-playing .play-settings, html.phone body.is-playing .play-settings-panel { display: contents; }
html.phone body.is-playing #btn-settings { display: none; }
/* técnico também no Assistir (o seu time com os atletas pela IA) */
body.is-playing[data-mode="coach"] #btn-coach { display: inline-flex; }
html.phone body.is-playing[data-mode="coach"] #btn-coach-phone { display: grid; }
/* rótulo longo de uma palavra só (DISCIPLINADO) cabia cortado no botão do dial de duas opções */
.coach-dial .coach-seg button { padding: 4px 2px; font-size: 13px; letter-spacing: 0; }
/* 7ª rodada: dois dedos ao mesmo tempo (direcional + ação) nunca viram gesto de zoom ou rolagem no celular */
.touch-controls, .touch-controls button, .touch-stick { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }