/*
 * Placar ao vivo (tela.js) e as telas do placar de recreação.
 *
 * Ginásio à noite: chão azul-petróleo quase preto; cada time dono de uma cor
 * plana (A âmbar de areia, B ciano de rede). Tudo dimensionado pelo tamanho
 * do próprio placar (container query), não por quebras fixas: TV deitada,
 * celular em pé e tablet usam a mesma regra.
 */

:root {
    --pl-chao: #0b1316;
    --pl-chao-2: #111d21;
    --pl-chao-3: #18282d;
    --pl-linha: #233a40;
    --pl-texto: #eef4f3;
    --pl-texto-2: #9db4b3;
    --pl-a: #f4b23a;
    --pl-a-tinta: #2a1d05;
    --pl-b: #52cde3;
    --pl-b-tinta: #04232a;
    --pl-alerta: #ff7a5c;
    --pl-num: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --pl-txt: 'Barlow', system-ui, sans-serif;
}

/* ---------- componente ---------- */

.pl {
    container-type: size;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    background: var(--pl-chao);
    color: var(--pl-texto);
    font-family: var(--pl-txt);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.pl * { box-sizing: border-box; }

.pl {
    --u: 1cqmin;
}

.pl-quadra {
    --u: min(1cqh, 0.62cqw);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    padding: calc(var(--u) * 2) calc(var(--u) * 4) 0;
    min-height: 0;
    grid-row: 1;
    grid-column: 1;
}

.pl-lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0;
    position: relative;
}

.pl-time-a { --cor: var(--pl-a); --tinta: var(--pl-a-tinta); }
.pl-time-b { --cor: var(--pl-b); --tinta: var(--pl-b-tinta); }

.pl-nome {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    max-width: 100%;
    font-family: var(--pl-num);
    font-weight: 600;
    font-size: calc(var(--u) * 7);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--cor);
}

.pl-nome-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-pips { display: inline-flex; gap: calc(var(--u) * 0.9); flex: none; }
.pl-pips i {
    width: calc(var(--u) * 2.2);
    height: calc(var(--u) * 2.2);
    border-radius: 50%;
    border: max(2px, calc(var(--u) * 0.35)) solid var(--cor);
    opacity: 0.55;
}
.pl-pips i.cheio { background: var(--cor); opacity: 1; }

.pl-num {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.pl-pontos {
    display: block;
    font-family: var(--pl-num);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    font-size: calc(var(--u) * 62);
    line-height: 0.82;
    letter-spacing: -0.02em;
    color: var(--pl-texto);
}

/* quem saca: a bola encosta no algarismo, com 1 ou 2 dígitos */
.pl-num-caixa { position: relative; display: inline-block; }
.pl-saque {
    position: absolute;
    top: 8%;
    width: calc(var(--u) * 4.4);
    height: calc(var(--u) * 4.4);
    border-radius: 50%;
    background: var(--cor);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease-out, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pl-e .pl-saque { left: 100%; margin-left: calc(var(--u) * 1.2); }
.pl-d .pl-saque { right: 100%; margin-right: calc(var(--u) * 1.2); }
.pl-sacando .pl-saque { opacity: 1; transform: scale(1); }

.pl-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 1.5);
    padding: 0 calc(var(--u) * 3);
    border-left: 1px solid var(--pl-linha);
    border-right: 1px solid var(--pl-linha);
    margin: calc(var(--u) * 10) 0 calc(var(--u) * 8);
}

.pl-set {
    font-family: var(--pl-num);
    font-weight: 600;
    font-size: calc(var(--u) * 5.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pl-texto-2);
}

.pl-relogio {
    font-family: var(--pl-num);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: calc(var(--u) * 8);
    line-height: 1;
}

/* aviso de estado: intervalo, tempo, fim. Fica por cima do pé da quadra
   (na mesma linha do grid), para não roubar altura dos números no jogo */
.pl-aviso {
    --u: min(1cqh, 0.62cqw);
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    justify-self: center;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 calc(var(--u) * 3);
    max-width: calc(100% - var(--u) * 8);
    margin-bottom: calc(var(--u) * 1);
    padding: calc(var(--u) * 0.8) calc(var(--u) * 3);
    border-radius: calc(var(--u) * 1.4);
    background: var(--pl-chao-2);
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(0, 0, 0, 0.5);
    text-align: center;
}
.pl[data-fase="jogo"] .pl-aviso { display: none; }
.pl-aviso-tit {
    font-family: var(--pl-num);
    font-weight: 700;
    font-size: calc(var(--u) * 6);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.pl-aviso-sub {
    font-size: calc(var(--u) * 3.6);
    color: var(--pl-texto-2);
    font-variant-numeric: tabular-nums;
}
.pl[data-fase="tempo"] .pl-aviso-tit { color: var(--pl-alerta); }
.pl[data-fase="encerrado"] .pl-aviso-tit { color: var(--pl-texto); }

/* a fita: uma pista por time, cada ponto uma célula na sua coluna */
.pl-fita {
    --u: min(1cqh, 0.62cqw);
    display: grid;
    gap: calc(var(--u) * 0.6);
    padding: calc(var(--u) * 1.5) calc(var(--u) * 4);
}
.pl-pista {
    display: grid;
    grid-template-columns: repeat(var(--cols, 41), minmax(0, 1fr));
    gap: max(1px, calc(var(--u) * 0.35));
    height: calc(var(--u) * 3.2);
    border-radius: 2px;
    background: var(--pl-chao-2);
}
.pl-pista i { grid-row: 1; border-radius: 1px; }
.pl-pista i.ponto {
    background: var(--cor);
    animation: pl-entra 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* livro dos sets: colunas tabulares, uma por set, separadas por fio */
.pl-livro {
    --u: min(1cqh, 0.62cqw);
    display: flex;
    justify-content: center;
    margin: 0;
    padding: calc(var(--u) * 0.5) calc(var(--u) * 4) calc(var(--u) * 1.5);
    list-style: none;
    font-family: var(--pl-num);
    font-variant-numeric: tabular-nums;
    font-size: calc(var(--u) * 6);
    font-weight: 600;
    line-height: 1.1;
}
.pl-livro li {
    display: grid;
    grid-template-columns: auto calc(var(--u) * 6.5) auto calc(var(--u) * 6.5);
    align-items: baseline;
    column-gap: calc(var(--u) * 1.2);
    padding: 0 calc(var(--u) * 3);
    color: var(--pl-texto-2);
}
.pl-livro li + li { border-left: 1px solid var(--pl-linha); }
.pl-livro-n { grid-column: 1; font-size: 0.6em; letter-spacing: 0.08em; color: var(--pl-texto-2); }
.pl-livro-a { grid-column: 2; text-align: right; }
.pl-livro-b { grid-column: 4; text-align: left; }
.pl-livro li::after { content: '×'; grid-column: 3; grid-row: 1; font-size: 0.55em; color: var(--pl-linha); }
.pl-livro .venc-a .pl-livro-a { color: var(--pl-a); }
.pl-livro .venc-b .pl-livro-b { color: var(--pl-b); }
.pl-livro .vivo { color: var(--pl-texto); }

/* faixa: patrocinadores no torneio; na recreação, só a assinatura */
.pl-faixa {
    --u: min(1cqh, 0.62cqw);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--u) * 6);
    padding: calc(var(--u) * 1) calc(var(--u) * 4);
    border-top: 1px solid var(--pl-linha);
    background: var(--pl-chao-2);
    font-size: calc(var(--u) * 2.8);
    color: var(--pl-texto-2);
}
.pl-marca strong { color: var(--pl-texto); font-weight: 600; }

/* sem conexão: o último placar continua, com o aviso por cima */
.pl-estado {
    --u: min(1cqh, 0.62cqw);
    position: absolute;
    top: calc(var(--u) * 1.5);
    left: 50%;
    transform: translate(-50%, -150%);
    z-index: 2;
    padding: calc(var(--u) * 0.8) calc(var(--u) * 2.4);
    border-radius: 999px;
    background: var(--pl-alerta);
    color: #1d0a04;
    font-weight: 600;
    font-size: calc(var(--u) * 2.8);
    white-space: nowrap;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pl-offline .pl-estado { transform: translate(-50%, 0); }
.pl-offline .pl-pontos, .pl-offline .pl-relogio { opacity: 0.55; }

/* estados */
.pl[data-fase="aguardando"] .pl-pontos { color: var(--pl-texto-2); }
.pl[data-fase="abandonada"] .pl-pontos,
.pl[data-fase="intervalo"] .pl-pontos,
.pl[data-fase="tempo"] .pl-pontos { color: var(--pl-texto-2); }
.pl[data-fase="encerrado"] .pl-lado:not(.pl-vencedor) .pl-pontos { color: var(--pl-texto-2); }
.pl[data-fase="encerrado"] .pl-vencedor .pl-pontos { color: var(--cor); }

/* o ponto: o número novo sobe para o lugar */
.pl-pontos.rola { animation: pl-rola 0.38s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes pl-rola {
    from { transform: translateY(14%); opacity: 0.2; clip-path: inset(0 0 30% 0); }
    to   { transform: none; opacity: 1; clip-path: inset(0); }
}
@keyframes pl-entra {
    from { transform: scaleY(0.2); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* em pé: os times empilham (como olhar a quadra de cima) */
@container (orientation: portrait) {
    .pl-quadra, .pl-aviso, .pl-fita, .pl-livro, .pl-faixa, .pl-estado { --u: min(0.62cqh, 1cqw); }
    .pl-quadra {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
        padding-top: calc(var(--u) * 4);
    }
    .pl-centro {
        flex-direction: row;
        gap: calc(var(--u) * 4);
        border: 0;
        border-top: 1px solid var(--pl-linha);
        border-bottom: 1px solid var(--pl-linha);
        margin: calc(var(--u) * 1) 0;
        padding: calc(var(--u) * 1.5) 0;
    }
    /* em pé o aviso cobre a faixa do meio (set e relógio), não um número */
    .pl-aviso { align-self: center; margin-bottom: 0; }
    /* cada metade é quase só o número */
    .pl-pontos { font-size: min(30cqh, 72cqw); }
    .pl-nome { font-size: calc(var(--u) * 7.5); }
    .pl-e .pl-saque, .pl-d .pl-saque { right: auto; left: 100%; margin: 0 0 0 calc(var(--u) * 2); }
    .pl-livro { font-size: calc(var(--u) * 5.5); }
    .pl-livro li { padding: 0 calc(var(--u) * 2); }
}

/* operador: o número é o botão */
button.pl-lado { cursor: pointer; border-radius: calc(var(--u) * 2); }
button.pl-lado:focus-visible { outline: 3px solid var(--cor); outline-offset: -3px; }
button.pl-lado:active:not(:disabled) { background: color-mix(in srgb, var(--cor) 14%, transparent); }
button.pl-lado:disabled { cursor: default; }
.pl-toque {
    position: absolute;
    bottom: 4%;
    right: 6%;
    font-family: var(--pl-num);
    font-weight: 600;
    font-size: calc(var(--u) * 3.6);
    color: var(--cor);
    opacity: 0.7;
}
.pl[data-fase="encerrado"] .pl-toque { display: none; }
/* antes do primeiro ponto: o "+1" chama o toque */
.pl[data-fase="aguardando"] .pl-toque { opacity: 1; animation: pl-chama 1.6s ease-in-out infinite; }
@keyframes pl-chama { 50% { transform: scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
    .pl-pontos.rola, .pl-pista i.ponto, .pl-toque { animation: none !important; }
    .pl-op-topo { transition: none; }
    .pl-saque, .pl-estado { transition: none; }
}

/* ---------- páginas ---------- */

html, body.pl-pagina { height: 100%; }
body.pl-pagina *, body.pl-pagina *::before, body.pl-pagina *::after { box-sizing: border-box; }
body.pl-pagina [hidden] { display: none !important; }
body.pl-pagina fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
body.pl-pagina {
    margin: 0;
    background: var(--pl-chao);
    color: var(--pl-texto);
    font-family: var(--pl-txt);
}
body.pl-pagina ::selection { background: var(--pl-a); color: var(--pl-a-tinta); }

.pl-tv { height: 100vh; height: 100dvh; cursor: none; }
.pl-tv-tela { position: absolute; inset: 0; }

/* tela cheia: dica discreta que some (TV não tem clique) */
.pl-cheia {
    position: fixed;
    right: 10px;
    bottom: 8px;
    z-index: 3;
    border: 1px solid var(--pl-linha);
    background: var(--pl-chao-2);
    color: var(--pl-texto-2);
    border-radius: 8px;
    padding: 6px 10px;
    font: 500 14px var(--pl-txt);
    cursor: pointer;
    transition: opacity 0.6s;
}
.pl-tv.parado .pl-cheia { opacity: 0; pointer-events: none; }

/* operador */
.pl-op {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    max-width: 1100px;
    margin: 0 auto;
}
.pl-op { position: relative; }
/* recolher pela linha do grid (1fr -> 0fr), não por altura/padding */
.pl-op-topo {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-out;
}
.pl-op-topo-in {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
    padding: 10px 12px;
}
/* bola rolando: o topo recolhe e sobra só o botão de reabrir */
.pl-op.recolhido .pl-op-topo { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.pl-op.recolhido .pl-op-topo * { visibility: hidden; }
.pl-op-mostrar {
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 4;
    display: none;
    width: 44px;
    height: 36px;
    border: 1px solid var(--pl-linha);
    border-radius: 10px;
    background: var(--pl-chao-2);
    color: var(--pl-texto-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.pl-op.recolhido .pl-op-mostrar { display: inline-flex; align-items: center; justify-content: center; }
.pl-op-mostrar:hover { color: var(--pl-texto); background: var(--pl-chao-3); }
.pl-op-mostrar:focus-visible { outline: 3px solid var(--pl-b); outline-offset: 2px; }
.pl-op-titulo { flex: 1 1 auto; min-width: 0; font: 600 15px var(--pl-txt); color: var(--pl-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-op-topo .pl-btn-icone { flex: none; }
@media (max-width: 480px) {
    .pl-op-topo-in { gap: 6px; padding: 10px 8px; }
    .pl-op-topo .pl-btn-icone { padding: 6px 9px; }
    .pl-op-titulo { font-size: 13px; }
}
.pl-op-ctl .pl-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-op .pl { border-radius: 14px; margin: 0 8px; }
.pl-op-ctl {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
}
.pl-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px;
    border: 1px solid var(--pl-linha);
    border-radius: 12px;
    background: var(--pl-chao-2);
    color: var(--pl-texto);
    font: 600 12.5px/1.15 var(--pl-txt);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.pl-btn .bi { font-size: 20px; line-height: 1; }
.pl-btn:hover:not(:disabled) { background: var(--pl-chao-3); color: var(--pl-texto); }
.pl-btn:focus-visible { outline: 3px solid var(--pl-b); outline-offset: 2px; }
.pl-btn:disabled { opacity: 0.38; cursor: default; }
.pl-btn-a .bi { color: var(--pl-a); }
.pl-btn-b .bi { color: var(--pl-b); }
.pl-btn-destaque { background: var(--pl-texto); color: var(--pl-chao); border-color: var(--pl-texto); }
.pl-btn-destaque:hover:not(:disabled) { background: #fff; color: var(--pl-chao); }
.pl-btn-icone { min-height: 40px; min-width: 44px; flex-direction: row; padding: 6px 12px; font-size: 14px; }
.pl-btn-icone .bi { font-size: 18px; }
.pl-op-ctl .pl-ctl-largo { grid-column: 1 / -1; min-height: 64px; font-size: 17px; flex-direction: row; gap: 10px; }

.pl-somente-leitura {
    margin: 0 8px 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--pl-chao-2);
    border: 1px solid var(--pl-linha);
    color: var(--pl-texto-2);
    font-size: 15px;
}
.pl-somente-leitura a { color: var(--pl-b); }

/* criar */
.pl-criar {
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 16px 48px;
}
.pl-criar h1 {
    font: 700 clamp(40px, 9vw, 64px)/0.95 var(--pl-num);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.pl-criar h1 span { color: var(--pl-a); }
.pl-criar .pl-lead { color: var(--pl-texto-2); font-size: 16px; margin: 0 0 28px; max-width: 46ch; }
.pl-campo { display: block; margin-bottom: 18px; }
.pl-campo > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--pl-texto-2); }
.pl-entrada {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--pl-linha);
    background: var(--pl-chao-2);
    color: var(--pl-texto);
    font: 500 17px var(--pl-txt);
    caret-color: var(--pl-a);
}
.pl-entrada::placeholder { color: #6f8786; }
.pl-entrada:focus { outline: 2px solid var(--pl-b); outline-offset: 1px; border-color: transparent; }
.pl-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pl-cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pl-cor-a { background: var(--pl-a); }
.pl-cor-b { background: var(--pl-b); }
.pl-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-atalho input { position: absolute; opacity: 0; pointer-events: none; }
.pl-atalho span {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--pl-linha);
    background: var(--pl-chao-2);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}
.pl-atalho input:checked + span { background: var(--pl-texto); color: var(--pl-chao); border-color: var(--pl-texto); }
.pl-atalho input:focus-visible + span { outline: 3px solid var(--pl-b); outline-offset: 2px; }
/* regra "Outra" salva neste aparelho: atalho com botão de esquecer */
.pl-atalho-salvo { display: inline-flex; align-items: center; }
.pl-atalho-salvo .pl-atalho span { border-radius: 999px 0 0 999px; border-right: 0; }
.pl-atalho-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 34px;
    border: 1px solid var(--pl-linha);
    border-radius: 0 999px 999px 0;
    background: var(--pl-chao-2);
    color: var(--pl-texto-2);
    font-size: 18px;
    cursor: pointer;
}
.pl-atalho-x:hover { color: var(--pl-alerta); }
.pl-atalho-x:focus-visible { outline: 3px solid var(--pl-b); outline-offset: 2px; }
.pl-atalho-salvo:has(input:checked) .pl-atalho-x { background: var(--pl-texto); color: var(--pl-chao); border-color: var(--pl-texto); }
.pl-dica-regra { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; color: var(--pl-texto-2); }
.pl-minhas-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pl-minhas-topo h2 { margin: 0; }
.pl-minhas-nota { margin: 8px 0 0; font-size: 13px; color: var(--pl-texto-2); }
.pl-regra-livre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pl-regra-livre label { display: flex; flex-direction: column; justify-content: flex-end; font-size: 12.5px; color: var(--pl-texto-2); font-weight: 600; }
.pl-regra-livre .pl-entrada { padding: 10px; font-size: 16px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pl-criar .pl-btn-destaque { width: 100%; min-height: 56px; font-size: 18px; flex-direction: row; gap: 10px; margin-top: 10px; }
.pl-erro { color: var(--pl-alerta); font-weight: 600; min-height: 1.5em; margin: 8px 0 0; }
.pl-nota { color: var(--pl-texto-2); font-size: 13.5px; margin-top: 22px; line-height: 1.5; }
.pl-nota a { color: var(--pl-texto); text-underline-offset: 3px; }
.pl-minhas { margin-top: 32px; }
.pl-minhas h2 { font: 600 15px var(--pl-txt); color: var(--pl-texto-2); margin: 0 0 8px; }
.pl-minhas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-minhas a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--pl-chao-2);
    color: var(--pl-texto);
    text-decoration: none;
    font-weight: 600;
}
.pl-minhas a span { color: var(--pl-texto-2); font-weight: 500; font-variant-numeric: tabular-nums; }

/* painel (compartilhar, passar o controle) */
.pl-painel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    background: var(--pl-chao-2);
    border: 1px solid var(--pl-linha);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
.pl-painel[hidden] { display: none; }
.pl-painel h2 { font: 700 26px var(--pl-num); text-transform: uppercase; margin: 0 0 6px; }
.pl-painel p { color: var(--pl-texto-2); margin: 0 0 14px; }
.pl-link {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.pl-link input { flex: 1; min-width: 0; }
.pl-painel-acoes { display: flex; gap: 8px; }
.pl-painel-mesa { margin: 4px 0 14px; padding-top: 14px; border-top: 1px solid var(--pl-linha); }
.pl-painel-mesa .pl-campo { margin-bottom: 8px; }
.pl-painel-mesa .pl-campo > .pl-link { display: flex; margin: 0; }
.pl-btn-texto {
    border: 0;
    padding: 6px 0;
    background: none;
    color: var(--pl-texto-2);
    font: 600 14px var(--pl-txt);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
.pl-btn-texto:hover { color: var(--pl-texto); }
.pl-btn-texto:focus-visible { outline: 3px solid var(--pl-b); outline-offset: 2px; }
.pl-painel-acoes .pl-btn { flex: 1; flex-direction: row; gap: 8px; min-height: 48px; font-size: 15px; }

/* ---------- TV ociosa: descanso ----------
   Ocupa a tela toda por cima do placar (que continua ouvindo por baixo). A
   fita do placar vira uma onda lenta: o único movimento da tela. */
.pl-descanso {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2vmin;
    padding: 6vmin;
    background: var(--pl-chao);
    color: var(--pl-texto);
    text-align: center;
}
.pl-descanso-fita {
    display: grid;
    grid-template-columns: repeat(38, 1fr);
    grid-template-rows: 1.6vmin 1.6vmin;
    gap: 0.6vmin 0.45vmin;
    width: min(78vw, 120vmin);
    margin-bottom: 4vmin;
}
.pl-descanso-fita i { border-radius: 1px; animation: pl-onda 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); }
.pl-descanso-fita i.a { grid-row: 1; background: var(--pl-a); }
.pl-descanso-fita i.b { grid-row: 2; background: var(--pl-b); }
@keyframes pl-onda { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.pl-descanso-nome {
    margin: 0;
    font-family: var(--pl-num);
    font-weight: 600;
    font-size: 4.2vmin;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pl-a);
}
.pl-descanso-nome:empty { display: none; }
.pl-descanso-tit {
    margin: 0;
    font-family: var(--pl-num);
    font-weight: 700;
    font-size: 13vmin;
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.pl-descanso-txt { margin: 0; font-size: 3.6vmin; color: var(--pl-texto-2); max-width: 40ch; }
.pl-descanso-marca {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.6vmin 4vmin;
    padding: 2.4vmin 4vmin calc(2.4vmin + env(safe-area-inset-bottom));
    border-top: 1px solid var(--pl-linha);
    background: var(--pl-chao-2);
    font-size: 2.6vmin;
    color: var(--pl-texto-2);
}
.pl-descanso-marca strong { font-family: var(--pl-num); font-size: 3.4vmin; font-weight: 700; color: var(--pl-texto); text-transform: uppercase; }
.pl-descanso-marca b { color: var(--pl-texto); font-weight: 600; }
.pl-descanso.desligada .pl-descanso-fita i { animation: none; opacity: 0.25; }
.pl-descanso.desligada .pl-descanso-tit { color: var(--pl-texto-2); }
@media (prefers-reduced-motion: reduce) {
    .pl-descanso-fita i { animation: none; opacity: 0.7; }
}

/* ---------- torneio (etapa 6): faixa com patrocinadores e o momento do patrocinador ---------- */

/* faixa do torneio: ALTURA FIXA (o placar nunca se mexe por causa de um logo).
   À esquerda a quadra/jogo; à direita um patrocinador por vez num selo claro,
   com o rótulo da cota ao lado (patrocinio.js). A parede (.pl-pat-parede:
   várias placas, cota 1 dupla) fica disponível, desligada. */
.pl-faixa:has(.pl-faixa-pat) {
    flex: none;
    justify-content: space-between;
    gap: calc(var(--u) * 2.4);
    height: calc(var(--u) * 15);
    min-height: 0;
    padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4);
    overflow: hidden;
}
[data-tipo="q"] .pl-faixa:has(.pl-faixa-pat) { height: calc(var(--u) * 13); }
.pl-faixa-tit {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--pl-num);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pl-texto-2);
}
[data-tipo="j"] .pl-faixa-tit { flex: 1 1 auto; max-width: none; }
.pl-faixa-tit:empty { display: none; }
.pl-faixa-pat { position: relative; flex: 1 1 0; align-self: stretch; min-width: 0; }
[data-tipo="j"] .pl-faixa-pat { flex: 0 0 46%; }
.pl-faixa-pat:empty { display: none; }
/* página de placas: as duas (a que sai e a que entra) no mesmo lugar, trocando por esmaecimento */
.pl-pat-pagina {
    --vao: calc(var(--u) * 1.2);
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    gap: var(--vao);
    opacity: 0;
    transition: opacity 0.7s ease;
}
.pl-pat-pagina.ativa { opacity: 1; }
/* placa clara: logo escuro de fundo transparente some no chão escuro; o logo cabe inteiro */
.pl-pat {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    height: 100%;
    padding: calc(var(--u) * 0.5) calc(var(--u) * 1);
    border-radius: calc(var(--u) * 0.8);
    background: #f4f7f6;
    overflow: hidden;
}
.pl-pat-parede .pl-pat { flex-basis: calc((100% - var(--vao) * 3) / 4); }
.pl-pat-parede .pl-pat-dupla { flex-basis: calc((100% - var(--vao) * 3) / 2 + var(--vao)); }
.pl-pat a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pl-pat img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* selo: um por vez, à direita, pílula clara com o logo e o rótulo da cota antes */
.pl-pat-pagina:not(.pl-pat-parede) { justify-content: flex-end; align-items: center; gap: calc(var(--u) * 2); }
.pl-pat-pagina:not(.pl-pat-parede) .pl-pat {
    flex: 0 1 calc(var(--u) * 26);
    height: 82%;
    border-radius: 999px;
    padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4);
}
[data-tipo="j"] .pl-pat-pagina:not(.pl-pat-parede) .pl-pat { flex-basis: calc(var(--u) * 34); }
.pl-pat-rot {
    flex: none;
    font: 600 max(10px, calc(var(--u) * 2.2)) var(--pl-num);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--pl-texto-2);
}
@media (prefers-reduced-motion: reduce) {
    .pl-pat-pagina { transition: none; }
}
/* intervalo entre sets: tarja da situação no topo do momento (fora da grade dele) */
.pl-momento-situacao {
    position: absolute;
    inset: 0 0 auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.6vmin 3vmin;
    margin: 0;
    padding: 1.6vmin 4vmin;
    background: var(--pl-chao-2);
    border-bottom: 1px solid var(--pl-linha);
    font: 600 3.4vmin/1.2 var(--pl-num);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pl-texto-2);
}
.pl-momento-situacao[hidden] { display: none; }
.pl-momento-situacao b { font-weight: 700; color: var(--pl-texto); font-variant-numeric: tabular-nums; }
.pl-momento-situacao .pl-sit-a { color: var(--pl-a); }
.pl-momento-situacao .pl-sit-b { color: var(--pl-b); }
.pl-momento.com-situacao { padding-top: calc(5vmin + 9vmin); }
/* vitrine (TV da quadra sem jogo): o momento passa por cima da tela "quadra em espera" */
.pl-momento.pl-momento-vitrine { z-index: 6; }
/* "Conhecer" só no celular: na TV fica [hidden], e o display do .pl-btn não pode vencer */
.pl-momento-link[hidden] { display: none; }

/* momento do patrocinador: a tela inteira, um por vez */
.pl-momento {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    justify-items: center;
    align-items: center;
    gap: 2vmin;
    padding: 5vmin 6vmin calc(5vmin + env(safe-area-inset-bottom));
    background: var(--pl-chao);
    color: var(--pl-texto);
    text-align: center;
    animation: pl-entra-momento 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pl-entra-momento { from { opacity: 0; } to { opacity: 1; } }
.pl-momento p { margin: 0; }
.pl-momento-rotulo {
    font-family: var(--pl-num);
    font-weight: 600;
    font-size: 3vmin;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-texto-2);
}
.pl-momento-logo {
    box-sizing: border-box; /* o padding dentro da linha: a placa não sobe sobre o rótulo */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
    max-width: 80vw;
    padding: 3vmin 5vmin;
    border-radius: 2vmin;
    background: #f4f7f6;
}
.pl-momento-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.pl-momento-nome {
    font-family: var(--pl-num);
    font-weight: 700;
    font-size: 6vmin;
    line-height: 1;
    text-transform: uppercase;
}
.pl-momento-chamada {
    max-width: 30ch;
    font-family: var(--pl-num);
    font-weight: 600;
    font-size: 5.4vmin;
    line-height: 1.1;
    color: var(--pl-a);
}
.pl-momento-contato { display: flex; align-items: center; justify-content: center; gap: 4vmin; flex-wrap: wrap; }
.pl-momento-insta { font-size: 4vmin; font-weight: 600; color: var(--pl-texto); }
.pl-momento-qr {
    width: 22vmin;
    height: 22vmin;
    padding: 1vmin;
    border-radius: 1.2vmin;
    background: #fff;
}
.pl-momento-qr svg { display: block; width: 100%; height: 100%; }
.pl-momento-volta { font-size: 2.6vmin; color: var(--pl-texto-2); }
/* com chamada: a frase é a estrela, o logo encolhe um pouco */
.pl-momento.com-chamada .pl-momento-logo { max-height: 40vh; }
@media (prefers-reduced-motion: reduce) {
    .pl-pat, .pl-momento { animation: none; }
}

/* link do jogo no celular: tem o que tocar (o link do patrocinador) */
.pl-tv-jogo { cursor: auto; }
.pl-tv-jogo .pl-momento-link { font-size: 18px; }

/* ---------- operador do torneio (produtor e mesário) ---------- */

.pl-jogo-abrir { max-width: 640px; margin: 0 auto; padding: 28px 16px 40px; }
.pl-jogo-abrir h1 { margin: 0 0 4px; font: 700 clamp(30px, 8vw, 44px)/1 var(--pl-num); text-transform: uppercase; }
.pl-jogo-abrir h1 span { color: var(--pl-a); }
.pl-jogo-sub { margin: 0 0 22px; color: var(--pl-texto-2); }
.pl-jogo-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.pl-jogo-lista li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--pl-linha);
    border-radius: 12px;
    background: var(--pl-chao-2);
}
.pl-jogo-lista .pl-jogo-tit { display: block; font-size: 13px; color: var(--pl-texto-2); }
.pl-jogo-lista .pl-jogo-times { display: block; font: 600 19px/1.2 var(--pl-num); overflow-wrap: anywhere; }
.pl-jogo-vazio { color: var(--pl-texto-2); }
.pl-jogo-quadras { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pl-avisos { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--pl-alerta); color: var(--pl-texto); }
.pl-avisos ul { margin: 6px 0 12px; padding-left: 20px; }
.pl-jogo-abrir .pl-nota a { overflow-wrap: anywhere; }
/* link do jogo: a faixa de baixo é do patrocinador; o "tela cheia" sobe */
.pl-tv-jogo .pl-cheia { bottom: auto; top: 8px; }

/* ---------- conectar uma TV (/tv e o celular; Portal\Service\PlacarTv) ----------
   Na TV: o código enorme, para ler do sofá, e o QR sempre sobre branco. */
.pl-conectar {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    align-content: center;
    padding: 6vmin 6vmin 14vmin;
    background: var(--pl-chao);
    color: var(--pl-texto);
    font-family: var(--pl-txt);
}
.pl-conectar-codigo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6vmin; }
.pl-conectar-codigo[hidden], .pl-conectar-salva[hidden] { display: none; }
.pl-conectar-rotulo { margin: 0; font: 600 3.4vmin var(--pl-txt); color: var(--pl-texto-2); text-transform: uppercase; letter-spacing: 0.06em; }
.pl-conectar-num {
    font: 700 22vmin/1 var(--pl-num);
    color: var(--pl-a);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.pl-conectar-passos { margin: 3vmin 0 0; padding-left: 1.2em; font-size: 3vmin; line-height: 1.35; color: var(--pl-texto); max-width: 52ch; }
.pl-conectar-passos li + li { margin-top: 1.2vmin; }
.pl-conectar-validade { margin: 2.4vmin 0 0; font-size: 2.4vmin; color: var(--pl-texto-2); }
.pl-conectar-qr { width: 34vmin; padding: 2vmin; border-radius: 2vmin; background: #fff; }
.pl-conectar-qr:empty { display: none; }
.pl-conectar-qr svg { display: block; width: 100%; height: auto; }
.pl-conectar-salva h1 { margin: 1vmin 0 4vmin; font: 700 9vmin/1 var(--pl-num); text-transform: uppercase; }
.pl-conectar-acoes { display: flex; flex-wrap: wrap; gap: 2vmin; }
.pl-conectar-acoes .pl-btn { flex-direction: row; gap: 1.2vmin; min-height: 9vmin; padding: 0 4vmin; font-size: 3vmin; }
.pl-conectar-acoes .pl-btn:focus-visible { outline: 0.6vmin solid var(--pl-b); outline-offset: 0.5vmin; }
.pl-conectar > .pl-erro { font-size: 2.6vmin; }
@media (orientation: portrait) {
    .pl-conectar-codigo { grid-template-columns: minmax(0, 1fr); }
    .pl-conectar-qr { width: 50vmin; }
}

/* celular: botão "Conectar uma TV" e o campo do código */
.pl-tv-abrir { flex-direction: row; gap: 8px; min-height: 48px; padding: 0 16px; font-size: 15px; }
.pl-tv-form { margin-top: 12px; }
.pl-tv-form[hidden] { display: none; }
.pl-tv-form p { color: var(--pl-texto-2); margin: 0 0 8px; }
.pl-tv-form .pl-tv-codigo { font: 700 24px var(--pl-num); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; max-width: 10ch; }
.pl-tv-form .pl-btn-destaque { flex-direction: row; gap: 6px; min-height: 48px; padding: 0 16px; font-size: 15px; width: auto; margin: 0; }
.pl-painel-tv { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--pl-linha); }
.pl-painel-tv[hidden] { display: none; }

/* celular pelo QR da TV: escolher o placar */
.pl-parear-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.pl-parear-lista .pl-btn {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
}
.pl-parear-lista .pl-btn span { display: grid; gap: 2px; min-width: 0; }
.pl-parear-lista .pl-btn small { color: var(--pl-texto-2); font-weight: 500; overflow-wrap: anywhere; }
.pl-parear-lista .pl-btn:disabled { opacity: 0.6; cursor: wait; }