/* QuadraLab Competição — identidade própria, com as cores do logo: verde-escuro, azul da quadra e verde-limão.
   Carregado depois de player.css e landing.css; só vale com <body class="comp">, então o Player não muda.
   Tokens: verde-escuro #002418 · papel #F2F5F3 · azul #1242CC (texto branco passa 7:1) · lima #66C000 (destaque sobre o verde-escuro). */
body.comp {
  --tinta: #002418; --papel: #F2F5F3; --cal: #FFFFFF; --grafite: #5A6373; --linha: #DDE5E0;
  --quadra: #002418; --marca: #66C000; --marca-texto: #1F7A4D;
  --saibro: #1242CC; --saibro-texto: #0E35A8; --saibro-claro: #66C000; --saibro-fundo: #E7EDFB;
  --raio: 20px; --sombra: none; --sombra-alta: 0 10px 30px rgba(15,27,45,.12);
  /* a tela de entrada e a de apresentação reaproveitam as variáveis --lp-* */
  --lp-verde: #002418; --lp-verde2: #0A3A2A; --lp-lima: #66C000; --lp-laranja: #1242CC; --lp-laranja-escuro: #1242CC; --lp-laranja-claro: #7FA0F5;
  --lp-papel: #F2F5F3; --lp-linha: #DDE5E0; --lp-grafite: #5A6373;
  --disp: "Barlow Condensed", "Arial Narrow", sans-serif;
  background: var(--papel); font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.comp h1, body.comp h2, body.comp h3 { font-family: "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; }
body.comp h1 { font-weight: 700; }
body.comp .btn, body.comp .campo input, body.comp .campo textarea, body.comp .campo select, body.comp .comp-seg-bt, body.comp .navinf-item, body.comp .nav-item, body.comp .painel-item { font-family: "DM Sans", system-ui, sans-serif; }
body.comp .btn { border-radius: 14px; }
body.comp .btn-primario { background: var(--tinta); border-color: var(--tinta); color: #fff; }
body.comp .btn-laranja { background: var(--saibro); border-color: var(--saibro); }
body.comp .btn-laranja:hover { background: #0E35A8; border-color: #0E35A8; }
body.comp .btn-secundario { border-color: #C9D3CD; background: #fff; }
body.comp .cartao { border-radius: 22px; }
body.comp .cartao.destaque { border-left-width: 1px; }
body.comp .olho { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--saibro-texto); }
body.comp .secao { font-family: var(--disp); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--grafite); margin-top: 28px; }
body.comp .campo input, body.comp .campo textarea, body.comp .campo-plano select, body.comp .campo select { border-radius: 14px; border-color: #C9D3CD; }
body.comp .campo input:focus, body.comp .campo textarea:focus { border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(201,74,31,.28); }
body.comp :focus-visible { outline-color: var(--saibro); }
body.comp .aviso-info { background: #E3F3EA; border-color: #BFE0CC; color: #14502F; }

body.comp .marca { min-height: 44px; }

/* barra inferior clara, item ativo em argila */
body.comp .navinf { background: #fff; border-top: 1px solid var(--linha); }
body.comp .navinf-item { color: var(--grafite); font-weight: 500; font-size: 12px; }
body.comp .navinf-item[aria-current="page"] { color: var(--saibro); font-weight: 700; }
body.comp .navinf-item[aria-current="page"]::before { background: var(--saibro); }
body.comp .navinf-item[aria-current="page"] svg { color: var(--saibro); }
body.comp .topo { background: var(--papel); border-bottom-color: var(--linha); }
body.comp .avatar { background: var(--tinta); color: var(--marca); border-color: var(--tinta); }
body.comp .painel-mais, body.comp .painel-conta { border-radius: 24px 24px 0 0; }

/* menu lateral (computador): claro, para o logo aparecer; item ativo em argila */
@media (min-width: 761px) {
  body.comp .lateral-faixa { background: var(--saibro); height: 4px; }
  body.comp .nav-item { border-radius: 12px; }
  body.comp .nav-item[aria-current="page"] { background: var(--saibro); color: #fff; box-shadow: none; }
  body.comp .nav-item[aria-current="page"]:hover { background: var(--saibro); }
  body.comp .lateral .avatar { background: var(--tinta); color: var(--marca); border-color: var(--tinta); }
}

/* cartão do próximo torneio: o número é o protagonista */
.comp-hero { position: relative; overflow: hidden; margin-top: 16px; padding: 24px 22px 22px; border-radius: 28px; background: var(--tinta); color: #fff; }
.comp-hero > * { position: relative; z-index: 1; }
.comp-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--marca); }
.comp-count { display: flex; align-items: flex-end; gap: 10px; margin-top: 6px; }
.comp-num { font-family: var(--disp); font-size: 120px; line-height: .82; font-weight: 800; color: var(--marca); }
.comp-un { font-family: var(--disp); font-size: 34px; line-height: 1; font-weight: 700; padding-bottom: 6px; }
.comp-hero h2 { margin-top: 16px; font-size: 23px; color: #fff; }
.comp-hero p { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.74); }
.comp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.comp-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); font-size: 12px; font-weight: 600; color: #fff; }
.comp-chip.lima { background: var(--marca); border-color: var(--marca); color: var(--tinta); font-weight: 700; }
.comp-hero .btn { width: 100%; margin-top: 12px; min-height: 50px; justify-content: center; }
.comp-hero .btn:first-of-type { margin-top: 20px; }
.comp-hero .comp-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.4); color: #fff; }

/* cartões de torneio com a data em bloco */
body.comp .comp-torneio { display: block; border-left: 1px solid var(--linha); padding: 14px; }
body.comp .comp-torneio:has(> .comp-data) { display: flex; gap: 14px; align-items: stretch; }
body.comp .comp-torneio.fase-passado { opacity: .8; }
.comp-data { flex: 0 0 64px; border-radius: 14px; background: var(--tinta); color: #fff; text-align: center; padding: 8px 0 9px; display: flex; flex-direction: column; justify-content: center; }
.comp-data b { font-family: var(--disp); font-size: 38px; line-height: .95; font-weight: 800; color: var(--marca); }
.comp-data span { font-size: 11px; font-weight: 700; letter-spacing: .1em; margin-top: 3px; }
.fase-passado .comp-data { background: #ECE8DE; color: var(--grafite); }
.fase-passado .comp-data b { color: var(--grafite); }
.comp-torneio .comp-info { min-width: 0; }
.comp-torneio .comp-info h2 { font-size: 17px; margin: 4px 0 2px; }
body.comp .comp-torneio .olho { margin: 0; }
body.comp .comp-torneio .nota { margin: 0; }

/* prioridades 1-2-3 como placar */
body.comp .comp-prior { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: p; }
body.comp .comp-prior li { counter-increment: p; display: flex; gap: 14px; align-items: center; margin: 6px 0; font-weight: 600; }
body.comp .comp-prior li::before { content: counter(p); font-family: var(--disp); font-size: 38px; line-height: 1; font-weight: 800; color: var(--saibro); width: 22px; }
body.comp .comp-codigo { font-family: var(--disp); font-size: 34px; }
body.comp .comp-vinc { border-radius: 18px; }
body.comp .comp-lembrete { border-left: 4px solid var(--saibro); background: #fff; }
body.comp .comp-seg-bt[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); }
body.comp .comp-dev-foco { background: var(--saibro-fundo); }
body.comp .comp-papel:has(input:checked) { border-color: var(--saibro); background: var(--saibro-fundo); }

body.comp .marca, body.comp .lateral-logo { text-decoration: none; }

/* o que o Player pinta em laranja fixo passa para o azul do logo */
body.comp .prep-card { border-top-color: var(--saibro); }
body.comp .comp-papel input, body.comp .comp-area input { accent-color: var(--saibro); }
body.comp .comp-torneio { border-left-color: var(--linha); }
body.comp .comp-codigo { color: var(--saibro); }
body.comp .btn-laranja { color: #fff; }
body.comp .lateral-faixa { background: var(--marca); }
body.comp .avatar { border-color: var(--marca); }


/* ══ Meu planejamento, Acompanhamento MTY e ajustes de uso no celular ══ */
/* a barra inferior nunca cobre o fim da página */
@media (max-width: 760px) { body.comp.logado .principal { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
body.comp .rodape { padding-bottom: 8px; }

/* campos lado a lado só quando cabem; no celular empilham (data + torneio, rodada + data...) */
body.comp .comp-duas { grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { body.comp .comp-duas { grid-template-columns: 1fr 1fr; gap: 12px; } }
body.comp .campo input, body.comp .campo select, body.comp .campo textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
body.comp input[type="date"], body.comp input[type="time"] { min-height: 48px; -webkit-appearance: none; appearance: none; background: #fff; }

/* botões: mesma altura, alinhamento e estados */
body.comp .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; }
body.comp .btn-pequeno { min-height: 44px; }
body.comp .btn-texto { min-height: 44px; justify-content: flex-start; }
body.comp .acoes .btn { width: 100%; }
body.comp .acoes .btn-texto { width: auto; align-self: flex-start; }
body.comp .btn[disabled], body.comp .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
body.comp .btn:focus-visible, body.comp .comp-seg-bt:focus-visible { outline: 3px solid var(--saibro); outline-offset: 2px; }
@media (min-width: 560px) { body.comp .acoes.lado .btn, body.comp .acoes.fila .btn { width: auto; } body.comp .acoes.fila { flex-direction: row; flex-wrap: wrap; } }

/* avaliação (1 a 5): todos os botões com a mesma dimensão, mesmo com rótulos de tamanhos diferentes */
body.comp .escala { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
body.comp .escala .opcao { display: flex; }
body.comp .escala .opcao span { width: 100%; height: 76px; min-height: 76px; justify-content: center; padding: 6px 2px; box-sizing: border-box; font-size: 20px; line-height: 1.1; }
body.comp .escala .opcao small { font-size: 11px; line-height: 1.15; min-height: 26px; display: flex; align-items: flex-start; justify-content: center; text-align: center; margin-top: 4px; overflow-wrap: anywhere; }
body.comp .voz-det { margin-top: 2px; }
body.comp .voz-det summary { font-size: 13px; color: var(--grafite); cursor: pointer; padding: 4px 0; min-height: 32px; }
body.comp .voz-aviso p { margin: 4px 0 0; }

/* barra de abas (uma ativa por vez) */
.comp-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-top: 16px; background: #E6ECE8; border-radius: 16px; }
.comp-abas button { min-height: 48px; border: 0; border-radius: 12px; background: transparent; color: var(--tinta); font: 600 14px "DM Sans", system-ui, sans-serif; cursor: pointer; padding: 6px 4px; line-height: 1.2; }
.comp-abas button[aria-selected="true"] { background: #fff; color: var(--saibro-texto); font-weight: 700; box-shadow: 0 1px 3px rgba(0,36,24,.18); }
.comp-abas button:focus-visible { outline: 3px solid var(--saibro); outline-offset: 2px; }

/* situação de cada versão do planejamento: texto sempre presente, cor só reforça */
.pl-st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid transparent; }
.pl-st.sugestao { background: #E7EDFB; color: #0E35A8; border-color: #C5D3F5; }
.pl-st.em_revisao { background: #FFF1CC; color: #6B4700; border-color: #F0DC9B; }
.pl-st.aprovado { background: #E3F3EA; color: #14502F; border-color: #BFE0CC; }
.pl-st.substituido { background: #ECEFED; color: #4B5650; border-color: #D5DBD8; }
.comp-origem { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font: 700 11px "DM Sans", system-ui, sans-serif; letter-spacing: .02em; vertical-align: middle; border: 1px solid transparent; }
.comp-origem.o-relato { background: #FFF1CC; color: #6B4700; border-color: #F0DC9B; }
.comp-origem.o-treinador { background: #E3F3EA; color: #14502F; border-color: #BFE0CC; }
.comp-origem.o-estat { background: #E7EDFB; color: #0E35A8; border-color: #C5D3F5; }
.comp-origem.o-sug { background: #ECEFED; color: #4B5650; border-color: #D5DBD8; }
.comp-alerta { border: 1.5px solid var(--saibro); background: #F5F8FF; margin-top: 14px; }

/* blocos da temporada */
.pl-bloco { display: grid; grid-template-columns: 6px 1fr; gap: 12px; padding: 12px 14px; margin-top: 8px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.pl-bloco i { border-radius: 4px; background: var(--saibro); }
.pl-bloco.competicao i { background: var(--tinta); }
.pl-bloco.recuperacao i { background: var(--marca); }
.pl-bloco h3 { font-size: 16px; margin: 0; }
.pl-aviso { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #FFF8E1; border: 1px solid #F0DC9B; color: #5C3F00; font-size: 14.5px; line-height: 1.45; }
.pl-aviso.info { background: #E7EDFB; border-color: #C5D3F5; color: #0E35A8; }
.pl-aviso.ok { background: #E3F3EA; border-color: #BFE0CC; color: #14502F; }
.pl-dia { margin-top: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; }
.pl-dia.hoje { border-color: var(--saibro); box-shadow: 0 0 0 1px var(--saibro) inset; }
.pl-dia h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); margin: 0 0 6px; }
.pl-ativ { padding: 8px 0; border-top: 1px solid #EEF2EF; }
.pl-ativ:first-of-type { border-top: 0; }
.pl-ativ p { margin: 0; }
.pl-mud { margin: 8px 0 0; padding: 0; list-style: none; }
.pl-mud li { padding: 8px 12px; margin-top: 6px; border-radius: 12px; background: #F6F8F7; font-size: 14.5px; border-left: 4px solid #C9D3CD; }
.pl-mud li.adicionado { border-left-color: var(--marca-texto); }
.pl-mud li.removido { border-left-color: #B3261E; }
.pl-mud li.alterado { border-left-color: var(--saibro); }
.pl-form .campo { margin-top: 10px; }
.pl-linha-ativ { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px; margin-top: 8px; background: #F6F8F7; border-radius: 12px; }
@media (min-width: 560px) { .pl-linha-ativ { grid-template-columns: 120px 1fr 90px auto; align-items: end; } }
.pl-hist { list-style: none; padding: 0; margin: 8px 0 0; }
.pl-hist li { padding: 8px 0; border-top: 1px solid #EEF2EF; font-size: 14.5px; }
.ac-lista { list-style: none; padding: 0; margin: 8px 0 0; }
.ac-lista li { padding: 10px 0; border-top: 1px solid #EEF2EF; }
.ac-lista li:first-child { border-top: 0; }
.ac-preco { font-family: var(--disp); font-size: 42px; font-weight: 800; line-height: 1; color: var(--tinta); }
.ac-preco small { font: 600 15px "DM Sans", system-ui, sans-serif; color: var(--grafite); margin-left: 6px; }

/* vídeo da partida (player do YouTube, Vimeo ou Drive, aberto só por escolha) */
.video-bloco { margin-top: 10px; }
.video-quadro { margin-top: 12px; position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.video-quadro[hidden] { display: none; }
.video-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* convites e códigos: passo a passo, escolha de quem convidar e código em destaque */
.convite-passos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.convite-passos li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.convite-passos li > span { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--saibro); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.convite-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.convite-botoes .btn-conv { min-height: 52px; font-weight: 700; }
.convite-botoes .btn-conv[aria-pressed="true"] { background: var(--saibro); border-color: var(--saibro); color: #fff; }
.convite-botoes .btn-conv[disabled] { opacity: .5; }
.comp-vinc.convite-aberto { border: 2px solid var(--saibro); border-radius: 18px; padding: 14px; background: #F5F8FF; }
.comp-vinc.convite-aberto .comp-codigo { font-size: 38px; text-align: center; letter-spacing: .18em; background: #fff; border: 1px dashed var(--saibro); border-radius: 14px; padding: 10px 6px; }
.comp-vinc.convite-aberto .acoes .btn { width: 100%; }

/* jogo ao vivo e scout completo dentro do app */
.sc-placar { display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 800; font-size: 18px; }
.sc-selo { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--grafite); display: flex; align-items: center; gap: 8px; }
.sc-selo.vivo { color: #B3261E; }
.sc-selo.vivo i { width: 9px; height: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 0 rgba(229,72,77,.7); animation: sc-pulso 1.6s infinite; }
@keyframes sc-pulso { 70% { box-shadow: 0 0 0 9px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .sc-selo.vivo i { animation: none; } }
.sc-agora { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0; }
.sc-agora .gr { font: 800 44px/1 "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; color: var(--tinta); }
.sc-agora .gl { font-size: 12.5px; color: var(--grafite); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sc-pts { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 2px; }
.sc-pts i { width: 14px; height: 14px; border-radius: 50%; background: #C8102E; }
.sc-pts i.v { background: #2E8B57; }
.sc-logbox { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--linha); border-radius: 12px; padding: 0 8px; margin-top: 10px; background: #FBFCFB; }
.sc-logbox:focus-visible { outline: 3px solid var(--saibro); outline-offset: 2px; }
.sc-log { list-style: none; margin: 0; padding: 0; }
.sc-log li { display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--linha); font-size: 14.5px; }
.sc-log li:last-child { border-bottom: 0; }
.sc-log li .n { color: var(--grafite); font-size: 12.5px; font-weight: 700; }
.sc-log li .q { font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-log li .q.v { color: #2E8B57; } .sc-log li .q.c { color: #C8102E; }
.sc-log li small { display: block; color: var(--grafite); font-size: 12.5px; }
.sc-log li.marco { background: #EEF3FF; border-radius: 8px; border-bottom: 0; margin: 4px 0; font-weight: 800; }

/* menu por papel e aviso de pendência no Início */
[data-papeis][hidden] { display: none !important; }
.navinf-item[data-badge], .nav-item[data-badge] { position: relative; }
.navinf-item[data-badge]::after { content: attr(data-badge); position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #C8102E; color: #fff; font: 700 11px/18px "DM Sans", system-ui, sans-serif; text-align: center; }
.nav-item[data-badge]::after { content: attr(data-badge); margin-left: 8px; display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #C8102E; color: #fff; font: 700 12px/20px "DM Sans", system-ui, sans-serif; text-align: center; }

/* cartão do atleta no Início do responsável e do treinador */
.atleta-card { border-left: 6px solid var(--saibro); }
.atleta-card h2 { margin-top: 2px; }
.ac-bloco { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); }
.ac-bloco:first-of-type { border-top: 0; padding-top: 0; }
.ac-bloco .beneficios { margin-top: 6px; }
.chips-atalho { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.chips-atalho a { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #C9D3CD; background: #fff; color: var(--tinta); font-weight: 600; font-size: 14.5px; text-decoration: none; display: inline-flex; align-items: center; }
#detCodigo > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }

/* ao vivo ligado ao atleta */
.ponto-vivo{display:inline-block;width:9px;height:9px;border-radius:50%;background:#d6452d;margin-right:4px;vertical-align:middle;animation:pvivo 1.4s ease-in-out infinite}
@keyframes pvivo{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ponto-vivo{animation:none}}

/* equipe do atleta menor: responsável antes do treinador */
.equipe-passos .convite-passos li.feito span{background:#2f7d4f;color:#fff}
.equipe-passos .convite-passos li.travado{opacity:.6}

/* responsável marca o jogo */
.sf-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.sf-bt{min-height:78px;line-height:1.25;text-align:center;white-space:normal}
.sf-bt small{font-weight:400;opacity:.85}
.sf-n{font-size:1.1rem;margin-top:4px}
.sf-erro{color:#b3361f}

/* responsável marca o jogo: cabeçalho e grades do scout completo */
.sf-cab{display:flex;justify-content:space-between;gap:12px;background:#103B32;color:#f5f1ea;padding:12px 15px;border-radius:10px;position:sticky;top:8px;z-index:3}
.sf-cab p{margin:0}
.sf-cab-l{font-size:10px;letter-spacing:.14em;opacity:.75}
.sf-cab-n{font-size:30px;font-weight:700;line-height:1.1}
.sf-cab-s{font-size:17px;font-weight:600}
.sf-cab-d{text-align:right}
.sf-adverso{font-size:11px;font-weight:700;color:#b3361f;margin:8px 2px}
.sf-grade4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.sf-grade3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.sf-pq{min-height:44px;padding:10px 4px;font-size:12px;white-space:normal}
.sf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sf-rasc{margin-top:12px;border-left:3px solid #d6452d}

/* recomendação livre do treinador */
.rec-form textarea{min-height:120px}
.comp-dev-texto{white-space:pre-wrap}

/* Pensamentos antes do jogo: escrever, soltar e apagar */
.pens-sug { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.pens-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pens-papel { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: #FBF8F1; border: 1px solid #E6DFCE; border-radius: 4px 14px 4px 14px; padding: 10px 12px; box-shadow: 0 1px 0 rgba(0,0,0,.04); transform: rotate(calc((var(--i) - 1) * .5deg)); }
.pens-papel span { overflow-wrap: anywhere; }
.pens-x { flex: none; min-width: 32px; min-height: 32px; border: 0; background: transparent; font-size: 20px; line-height: 1; color: #6B6A63; cursor: pointer; }
.pens-limpo { text-align: center; padding: 28px 8px; }
.pens-frase { font-size: 18px; font-weight: 600; margin: 14px 0 20px; }
.pens-respira { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E9F2EE, #9CC5B6); }
@media (prefers-reduced-motion: no-preference) {
  .pens-soltando .pens-papel { animation: pens-sobe 2.4s ease-in forwards; animation-delay: calc(var(--i) * .18s); }
  .pens-respira { animation: pens-respira 8s ease-in-out infinite; }
  .pens-limpo { animation: pens-entra 1.2s ease-out both; }
}
@keyframes pens-sobe { 0% { opacity: 1; filter: blur(0); transform: translateY(0) rotate(0); } 40% { opacity: .8; filter: blur(1px); } 100% { opacity: 0; filter: blur(8px); transform: translateY(-70px) scale(.92) rotate(-3deg); } }
@keyframes pens-respira { 0%, 100% { transform: scale(.78); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes pens-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pens-soltando .pens-papel { opacity: 0; } }

/* Ritual pré-jogo (mesma identidade do app: verde-quadra e saibro) */
.rit-dados { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 14px 8px; margin: 14px 0; }
.rit-dados div + div { border-left: 1px solid var(--linha); }
.rit-dados b { display: block; font-size: 24px; color: var(--quadra); line-height: 1.1; }
.rit-dados span { font-size: 12.5px; color: var(--grafite); }
.rit-mapa { display: flex; gap: 6px; margin: 6px 0 14px; }
.rit-mp { flex: 1; text-align: center; font-size: 11.5px; color: var(--grafite); }
.rit-mp i { display: block; height: 4px; border-radius: 2px; background: var(--linha); margin-bottom: 6px; }
.rit-mp.ok i { background: var(--marca); }
.rit-mp.atual i { background: var(--quadra); }
.rit-mp.atual, .rit-mp.ok { color: var(--tinta); font-weight: 600; }
.rit-como p { margin: 0; }
.rit-timer { text-align: center; margin: 22px 0 8px; }
.rit-num { font-size: 76px; font-weight: 300; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--quadra); }
.rit-lbl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grafite); margin-top: 10px; }
.rit-resp { text-align: center; margin: 18px 0 8px; }
.rit-anel { width: 200px; height: 200px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #F1F7F3, transparent 70%); }
.rit-circ { width: 66px; height: 66px; border-radius: 50%; background: var(--quadra); opacity: .9; }
.rit-txt { font-size: 22px; font-weight: 700; color: var(--quadra); min-height: 30px; }
.rit-repita { text-align: center; margin: 22px 0; }
.rit-frase { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--quadra); }
.rit-fim { text-align: center; padding-top: 8px; }
.rit-int { border-left: 4px solid var(--saibro); text-align: left; }
.rit-sanshin { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; display: grid; gap: 8px; }
.rit-sanshin b { display: inline-block; min-width: 76px; color: var(--marca-texto); text-transform: uppercase; font-size: 12.5px; letter-spacing: .06em; }
.rit-som { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .rit-circ { transition: none !important; } }
.sf-analise summary { cursor: pointer; min-height: 32px; }
.sf-analise .qa { margin-top: 8px; }