/* Torneio de truco — Cúpula da Zaga.
   Mesma identidade do convite: azul claro com raios, cartões creme de borda grossa,
   verde e amarelo, Luckiest Guy nos títulos e Montserrat no texto.
   Três telas no mesmo arquivo: página pública e painel (medidas em px) e telão (medidas em rem,
   onde 1rem = 1% da altura de um palco 16:9 — ver "html.telao"). */
@font-face{font-family:'Luckiest Guy';src:url('LuckiestGuy.ttf');font-display:swap}
@font-face{font-family:'Montserrat';src:url('Montserrat.ttf');font-weight:100 900;font-display:swap}
:root{--verde:#138a3c;--verde-esc:#0b5c27;--amarelo:#ffd21f;--azul:#8fd3f5;--azul-esc:#2f8fc9;
  --creme:#fbf3dc;--tinta:#1d1d1b;--cinza:#6f6a5c;--copas:#c8321e;--suave:#e8e1c9}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--tinta);
  background:var(--azul);min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  repeating-conic-gradient(from 0deg at 50% 9%,rgba(255,255,255,.15) 0deg 7deg,transparent 7deg 18deg),
  radial-gradient(circle at 50% 6%,#d6f1fd 0%,#8fd3f5 42%,#2f8fc9 100%)}
h1,h2,.dp b,.dp-adm b,.t-fase,.t-duplas b,.sorteio .dn,.sorteio .e,.campeao .nome,.t-campeao .rot,.t-campeao .nome,.t-campeao .resto b,.t-chave .t-jogo .tp>span:first-child{text-transform:uppercase}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}

/* ---------- estrutura (página pública e painel) ---------- */
.app{max-width:560px;margin:0 auto;padding:14px 12px 46px}
.topo{display:flex;align-items:center;gap:12px}
.topo img{width:78px;height:78px;border-radius:50%;border:3px solid var(--tinta);box-shadow:3px 4px 0 var(--tinta);flex:none;background:var(--azul)}
.topo h1{font-family:'Luckiest Guy',sans-serif;font-weight:400;font-size:clamp(23px,7.4vw,32px);line-height:1;color:var(--amarelo);
  -webkit-text-stroke:1.6px var(--tinta);paint-order:stroke fill;text-shadow:3px 3px 0 var(--tinta);letter-spacing:.5px}
.topo .sub{font-weight:800;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin-top:7px}
.status{display:flex;align-items:center;gap:9px;margin-top:14px;background:var(--verde);color:#fff;border:2.5px solid var(--tinta);
  border-radius:13px;padding:10px 12px;font-weight:800;font-size:14px;line-height:1.25;box-shadow:3px 4px 0 var(--tinta)}
.ponto{width:10px;height:10px;border-radius:50%;background:var(--amarelo);flex:none;animation:pisca 1.6s infinite}
@keyframes pisca{50%{opacity:.25}}
body.offline .ponto{background:#c9c9c9;animation:none}
.abas{display:flex;gap:6px;margin-top:14px}
.abas button{flex:1;padding:10px 2px;border:2.5px solid var(--tinta);border-radius:12px;background:var(--creme);font-weight:800;font-size:13px}
.abas button.on{background:var(--amarelo);box-shadow:2px 3px 0 var(--tinta)}
.grade{margin-top:16px}
.col{display:contents}
.sec{display:none}
.aba-tabela .s-tabela,.aba-jogos .s-jogos,.aba-mata .s-mata,.aba-duplas .s-duplas{display:block}
.cartao{background:var(--creme);border:3px solid var(--tinta);border-radius:18px;box-shadow:5px 6px 0 var(--tinta);padding:14px 12px 12px;margin-bottom:18px}
.cartao h2{font-family:'Luckiest Guy',sans-serif;font-weight:400;font-size:23px;color:var(--verde-esc);line-height:1;margin-bottom:11px;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cartao h2 small{font-family:'Montserrat',sans-serif;font-weight:800;font-size:11.5px;color:var(--cinza);letter-spacing:.5px;text-transform:uppercase}
.cartao h3{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--verde-esc);margin:12px 0 6px}
.rodape{text-align:center;font-size:11.5px;font-weight:700;color:rgba(29,29,27,.7);margin-top:4px}
.legenda{font-size:11.5px;color:var(--cinza);font-weight:600;line-height:1.6;margin-top:8px}
.legenda b{color:var(--tinta)}
details.regras{margin-top:10px;font-size:12.5px;font-weight:600;line-height:1.55}
details.regras summary{font-weight:800;color:var(--verde-esc);cursor:pointer;list-style:none}
details.regras summary::after{content:" +"}
details.regras[open] summary::after{content:" −"}
details.regras ul{margin:6px 0 0 18px}

/* ---------- classificação ---------- */
.cl-cab,.cl-lin{display:grid;grid-template-columns:32px 1fr 40px 27px 27px 27px 31px;align-items:center;column-gap:2px}
.cl-cab{font-size:10.5px;font-weight:800;color:var(--cinza);text-transform:uppercase;text-align:center;padding:0 9px 4px}
.cl-cab .l{text-align:left;padding-left:4px}
.cl-lin{background:#fff;border:2.5px solid var(--tinta);border-radius:12px;padding:7px 9px;margin-bottom:6px;text-align:center;font-weight:700;font-size:14.5px}
.cl-lin .l{text-align:left;min-width:0;padding-left:4px}
.cl-lin .l b{display:block;font-weight:800;font-size:15px;line-height:1.15;white-space:nowrap}
.cl-lin .l small{display:block;font-size:11.5px;font-weight:600;color:var(--cinza);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos{display:inline-flex;width:27px;height:27px;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--tinta);
  font-weight:900;font-size:13px;background:var(--suave)}
.zona .pos{background:var(--verde);color:#fff}
.cl-lin .pts{font-family:'Luckiest Guy',sans-serif;font-size:21px;color:var(--verde-esc);line-height:1;padding-top:4px}
.cl-lin.corte{margin-bottom:17px;position:relative}
.cl-lin.corte::after{content:"";position:absolute;left:4px;right:4px;bottom:-11px;border-bottom:2.5px dashed var(--verde)}
.cl-lin.emp{background:#fff7d1}

/* ---------- jogo (cartão de uma queda) ---------- */
.jogo{background:#fff;border:2.5px solid var(--tinta);border-radius:14px;padding:9px 11px 11px;margin-bottom:8px}
.jg-topo{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--cinza);margin-bottom:7px}
.np{font-size:14px;margin-right:5px;color:var(--tinta);font-family:Arial,sans-serif}
.np.r{color:var(--copas)}
.jogo.vivo{border-color:var(--verde);box-shadow:0 0 0 3px rgba(19,138,60,.22)}
.jogo.vivo .st{color:var(--verde)}
.jogo.vivo .st::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--verde);margin-right:5px;animation:pisca 1.2s infinite}
.jg-linha{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.time{min-width:0}
.time b{display:block;font-weight:800;font-size:15px;line-height:1.15}
.time small{display:block;font-size:11.5px;font-weight:600;color:var(--cinza);line-height:1.25;margin-top:1px}
.time em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--verde-esc);letter-spacing:.5px;text-transform:uppercase;display:block}
.time.b{text-align:right}
.time.p{opacity:.5}
.time.v b{color:var(--verde-esc)}
.time.vazio b{color:var(--cinza);font-weight:700;font-size:13.5px}
.placar{display:flex;align-items:center;gap:5px}
.placar span{display:flex;align-items:center;justify-content:center;width:34px;height:38px;border-radius:9px;background:var(--tinta);color:var(--amarelo);
  font-family:'Luckiest Guy',sans-serif;font-size:23px;line-height:1;padding-top:5px}
.placar i{font-style:normal;font-weight:800;font-size:12px;color:var(--cinza)}
.placar span.v{background:var(--verde);color:#fff}
.placar span.nd{background:var(--suave);color:var(--cinza);font-family:'Montserrat',sans-serif;font-weight:800;padding-top:0}
.placar span.pulso{animation:pulso .9s ease}
@keyframes pulso{0%{transform:scale(1)}35%{transform:scale(1.4);background:var(--amarelo);color:var(--tinta)}100%{transform:scale(1)}}
.jogo.final{background:#fff3b8}
.chips{display:flex;gap:5px;margin-bottom:11px;overflow-x:auto;padding:1px 1px 3px}
.chips button{flex:1 0 auto;min-width:36px;padding:8px 8px;border:2px solid var(--tinta);border-radius:10px;background:#fff;font-weight:800;font-size:13px}
.chips button.feita{background:#d9eedf}
.chips button.on{background:var(--verde);color:#fff}
.chips button.atual:not(.on){box-shadow:inset 0 -4px 0 var(--amarelo)}
.chips.mata{margin-top:-5px}
.tv-linha{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px 10px;background:#eef8f0;border:2px solid var(--verde);border-radius:12px;
  padding:8px 10px;margin:0 0 11px;font-size:13px;font-weight:600}
.tv-linha b{font-weight:800;color:var(--verde-esc)}
.tv-bts{display:flex;gap:7px;flex-wrap:wrap}
.tv-bts .btn{font-size:12.5px;padding:7px 11px}
.chips.mata button{flex:1 1 0}

/* ---------- duplas e jogadores ---------- */
.duplas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dp{background:#fff;border:2.5px solid var(--tinta);border-radius:12px;padding:8px 10px 9px;min-width:0}
.dp b{display:block;font-family:'Luckiest Guy',sans-serif;font-weight:400;font-size:17px;color:var(--verde-esc);line-height:1.1}
.dp span{display:block;font-size:13px;font-weight:700;line-height:1.3;margin-top:2px}
.dp.vazia{background:transparent;border-style:dashed}
.dp.vazia span{color:var(--cinza);font-weight:600}
.pote{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pote div{display:flex;align-items:center;gap:7px;background:#fff;border:2px solid var(--tinta);border-radius:10px;padding:6px 8px;font-weight:700;font-size:13.5px;min-width:0}
.pote i{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;background:var(--suave);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}
.pote span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pote .vago{border-style:dashed;background:transparent;color:var(--cinza);font-weight:600}
.pote em{font-style:normal;margin-left:auto;font-size:10.5px;font-weight:900;background:var(--verde);color:#fff;border-radius:6px;padding:1px 5px;flex:none}

/* ---------- campeões ---------- */
.campeao{background:var(--amarelo);text-align:center;padding-top:16px}
.campeao svg{width:74px;height:74px;display:block;margin:0 auto 2px}
.campeao .rot{font-weight:900;font-size:12px;letter-spacing:4px;text-transform:uppercase}
.campeao .nome{font-family:'Luckiest Guy',sans-serif;font-size:40px;line-height:1.05;margin-top:4px}
.campeao .quem{font-weight:800;font-size:17px;margin-top:2px}
.campeao .resto{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px}
.campeao .resto div{background:#fff;border:2px solid var(--tinta);border-radius:10px;padding:5px 9px;font-size:12.5px;font-weight:700}
.campeao .resto b{font-weight:900;margin-right:3px}

/* ---------- avisos, botões, formulários ---------- */
.aviso{background:#fff7d1;border:2.5px solid var(--tinta);border-radius:13px;padding:10px 12px;font-weight:700;font-size:13.5px;line-height:1.45;margin-bottom:12px}
.aviso .linha{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.btn{display:block;width:100%;padding:13px 12px;border:2.5px solid var(--tinta);border-radius:13px;background:var(--amarelo);
  font-weight:800;font-size:15.5px;box-shadow:3px 4px 0 var(--tinta);text-align:center;text-decoration:none;color:var(--tinta)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--tinta)}
.btn.sec{background:#fff}
.btn.verde{background:var(--verde);color:#fff}
.btn.p{display:inline-block;width:auto;padding:8px 13px;font-size:13.5px;box-shadow:2px 3px 0 var(--tinta);border-radius:11px}
.btn:disabled{opacity:.45;box-shadow:none}
.btn + .btn{margin-top:10px}
.lnk{background:none;border:none;font-weight:700;font-size:12.5px;color:var(--cinza);text-decoration:underline;padding:6px 2px}
input[type=text],input[type=password],select{width:100%;font-size:16px;font-weight:600;padding:11px 10px;border-radius:10px;border:2px solid #c9c2ac;background:#fffdf6;outline:none;min-width:0}
input:focus,select:focus{border-color:var(--verde)}
select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinta) 50%),linear-gradient(135deg,var(--tinta) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 11px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:30px}
.entrar{text-align:center;margin-top:30px}
.entrar img{width:150px;height:150px;margin-bottom:6px}
.entrar input{margin-bottom:12px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--tinta);color:#fff;font-weight:700;font-size:14px;line-height:1.35;
  padding:11px 16px;border-radius:12px;z-index:60;width:max-content;max-width:92vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s}
#toast.on{opacity:1}

/* ---------- painel ---------- */
.adm-lado{display:none}
.adm .aba-resultados .adm-lado{display:block}
.jogo.adm{padding:10px 10px 12px;margin-bottom:11px}
.adm-linha{display:grid;grid-template-columns:1fr 18px 1fr;align-items:start;gap:4px}
.adm-linha .x{text-align:center;font-weight:800;color:var(--cinza);font-size:13px;padding-top:60px}
.adm-time{text-align:center;min-width:0;border-radius:11px;padding:6px 4px 8px}
.adm-time.v{background:#d9eedf}
.adm-time b{display:block;font-weight:800;font-size:15px;line-height:1.15}
.adm-time small{display:block;font-size:11.5px;font-weight:600;color:var(--cinza);line-height:1.25;min-height:15px}
.adm-time em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--verde-esc);letter-spacing:.5px;text-transform:uppercase;display:block}
.ctl{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px}
.ctl .num{display:flex;align-items:center;justify-content:center;width:44px;height:48px;border-radius:11px;background:var(--tinta);color:var(--amarelo);
  font-family:'Luckiest Guy',sans-serif;font-size:29px;line-height:1;padding-top:6px}
.adm-time.v .num{background:var(--verde);color:#fff}
.ctl .bt{width:46px;height:48px;border-radius:11px;border:2.5px solid var(--tinta);font-weight:900;font-size:26px;line-height:1;background:#fff;display:flex;align-items:center;justify-content:center}
.ctl .bt.mais{background:var(--amarelo);box-shadow:2px 3px 0 var(--tinta)}
.ctl .bt.mais:active{transform:translate(2px,2px);box-shadow:none}
.ctl .bt.menos{width:36px;font-size:22px;border-width:2px}
.ctl .bt:disabled{opacity:.28;box-shadow:none}
.ctl .bt,.ctl .num{flex:none}
.res{margin-top:9px;text-align:center;font-size:12.5px;font-weight:800;color:var(--verde-esc)}
.jogo.adm .lnk{display:block;margin:4px auto 0}
.dp-adm{background:#fff;border:2.5px solid var(--tinta);border-radius:13px;padding:9px 10px 10px;margin-bottom:9px}
.dp-adm b{display:block;font-family:'Luckiest Guy',sans-serif;font-weight:400;font-size:17px;color:var(--verde-esc);margin-bottom:6px}
.dp-adm .sel{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dp-adm select{font-size:14.5px;padding:9px 26px 9px 8px}
.nomes{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.nomes label{display:flex;align-items:center;gap:6px;min-width:0}
.nomes i{font-style:normal;flex:none;width:22px;text-align:right;font-weight:900;font-size:12px;color:var(--cinza)}
.nomes input{padding:9px 8px;font-size:15px}
.info{font-size:13px;font-weight:700;line-height:1.5;margin-bottom:11px}
.hist{font-size:12px;font-weight:600;line-height:1.5;color:var(--cinza)}
.hist div{padding:5px 0;border-bottom:1px dashed #cfc7ad}
.hist b{color:var(--tinta);font-weight:800;margin-right:6px}

/* ---------- ambiente de teste ---------- */
.faixa-teste{background:var(--tinta);color:var(--amarelo);border-radius:12px;padding:8px 12px;font-weight:800;font-size:12.5px;line-height:1.3;text-align:center;margin-bottom:12px}
.t-teste{position:absolute;left:50%;bottom:.25rem;transform:translateX(-50%);background:var(--copas);color:#fff;font-weight:900;font-size:1.4rem;letter-spacing:.45rem;text-transform:uppercase;padding:.2rem 1.8rem .2rem 2.2rem;border-radius:.8rem;z-index:6;white-space:nowrap}

/* ---------- sorteio (sobreposição em todas as telas) ---------- */
#overlay{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:16px;background:
  repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.055) 0deg 7deg,transparent 7deg 18deg),
  radial-gradient(circle at 50% 45%,#1f6594 0%,#0e3a58 58%,#0a2438 100%)}   /* fundo fechado: não deixa ver o resultado atrás antes da hora */
#overlay.on{display:flex}
.sorteio{background:var(--creme);border:4px solid var(--tinta);border-radius:24px;box-shadow:8px 9px 0 var(--tinta);padding:22px 18px 24px;text-align:center;
  width:min(92vw,480px);animation:entra .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes entra{from{transform:scale(.6);opacity:0}}
.sorteio .rot{font-weight:900;font-size:13px;letter-spacing:5px;text-transform:uppercase}
.sorteio .dn{font-family:'Luckiest Guy',sans-serif;font-size:58px;color:var(--amarelo);-webkit-text-stroke:2.4px var(--tinta);paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--tinta);line-height:1.05;margin:8px 0 12px}
.sorteio .nm{background:#fff;border:3px solid var(--tinta);border-radius:14px;padding:13px 8px;font-weight:800;font-size:25px;line-height:1.15;min-height:60px;
  display:flex;align-items:center;justify-content:center}
.sorteio .nm.ok{background:var(--verde);color:#fff;animation:pop .45s cubic-bezier(.2,1.7,.4,1)}
@keyframes pop{from{transform:scale(.8)}}
.sorteio .e{font-family:'Luckiest Guy',sans-serif;font-size:22px;color:var(--verde-esc);margin:5px 0 3px}

/* ---------- celular: cada dupla numa linha, placar à direita ---------- */
@media (max-width:999px){
  .jg-linha{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a pa" "b pb";row-gap:7px;column-gap:10px}
  .jg-linha .placar{display:contents}
  .jg-linha .placar i{display:none}
  .jg-linha .placar span{width:32px;height:33px;font-size:21px;border-radius:8px}
  .jg-linha .placar span:first-child{grid-area:pa}
  .jg-linha .placar span:last-child{grid-area:pb}
  .jg-linha .time.a{grid-area:a}
  .jg-linha .time.b{grid-area:b;text-align:left}
  .jg-linha .time b{display:inline;margin-right:7px}
  .jg-linha .time small{display:inline;font-size:12.5px}
  .jg-linha .time em{display:inline;margin-right:6px}
}

/* ---------- celular estreito ---------- */
@media (max-width:359px){
  .cl-cab,.cl-lin{grid-template-columns:28px 1fr 30px 20px 20px 20px 24px}
  .cl-lin{font-size:13px;padding:6px}
  .cl-lin .l b{font-size:14px}
  .abas button{font-size:12px;padding:9px 1px}
  .ctl{gap:4px}
  .ctl .bt{width:40px}
  .ctl .bt.menos{width:30px}
  .ctl .num{width:38px}
}

/* ---------- computador (página pública e painel) ---------- */
@media (min-width:1000px){
  .app{max-width:1200px;padding:24px 26px 54px}
  .topo img{width:104px;height:104px}
  .topo h1{font-size:46px;-webkit-text-stroke-width:2px;text-shadow:4px 4px 0 var(--tinta)}
  .topo .sub{font-size:13px}
  .status{font-size:15.5px;padding:11px 14px}
  .pub .abas{display:none}
  .pub .grade{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
  .pub .col{display:block;min-width:0}
  .pub .sec{display:block}
  .pub .so-cel{display:none}
  .adm .grade{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px;align-items:start}
  .app.adm{max-width:1300px}
  .adm .adm-lado{display:block}
  .adm .abas{max-width:560px}
  .nomes{grid-template-columns:1fr 1fr 1fr 1fr}
}
@media (min-width:1240px){
  .jogos-adm{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
}

/* ================= TELÃO =================
   O palco é um retângulo 16:9 que cresce até encostar na tela; 1rem = 1% da altura dele.
   Assim tudo escala junto em qualquer TV, sem barra de rolagem. */
html.telao{font-size:min(1vh,.5625vw)}
html.telao body{overflow:hidden;height:100vh;cursor:default}
html.telao body.sem-mouse{cursor:none}
html.telao body::before{background:
  repeating-conic-gradient(from 0deg at 50% 8%,rgba(255,255,255,.14) 0deg 7deg,transparent 7deg 18deg),
  radial-gradient(circle at 50% 4%,#d6f1fd 0%,#8fd3f5 45%,#2f8fc9 100%)}
.palco{position:fixed;left:50%;top:50%;width:177.78rem;height:100rem;transform:translate(-50%,-50%);padding:2.4rem 3.2rem 2.8rem;
  display:grid;grid-template-rows:13rem minmax(0,1fr);gap:2rem}
.t-topo{display:flex;align-items:center;gap:2.6rem;min-width:0}
.t-logo{width:13rem;height:13rem;border-radius:50%;border:.5rem solid var(--tinta);box-shadow:.7rem .8rem 0 var(--tinta);flex:none}
.t-tit h1{font-family:'Luckiest Guy',sans-serif;font-weight:400;font-size:7.6rem;line-height:1;color:var(--amarelo);-webkit-text-stroke:.34rem var(--tinta);
  paint-order:stroke fill;text-shadow:.55rem .6rem 0 var(--tinta);letter-spacing:.1rem;white-space:nowrap}
.t-tit .sub{font-weight:900;font-size:2rem;letter-spacing:.55rem;text-transform:uppercase;margin-top:.9rem}
.t-fase{margin-left:auto;background:var(--verde);color:#fff;border:.42rem solid var(--tinta);border-radius:1.9rem;box-shadow:.6rem .7rem 0 var(--tinta);
  padding:1.5rem 2.8rem 1rem;font-family:'Luckiest Guy',sans-serif;font-size:3.8rem;line-height:1;white-space:nowrap}
.t-qr{display:flex;align-items:center;gap:1.3rem;background:var(--creme);border:.42rem solid var(--tinta);border-radius:1.7rem;padding:.9rem 1.6rem .9rem .9rem;
  box-shadow:.6rem .7rem 0 var(--tinta);flex:none}
.t-qr img{width:9.6rem;height:9.6rem;display:block;border-radius:.6rem}
.t-qr span{font-weight:800;font-size:1.75rem;line-height:1.25}
.t-corpo{display:grid;grid-template-columns:1.3fr 1fr;gap:2.8rem;min-height:0}
.fase-mata .t-corpo,.fase-fim .t-corpo{grid-template-columns:1fr 1.12fr}
.t-cartao{background:var(--creme);border:.45rem solid var(--tinta);border-radius:2.4rem;box-shadow:.8rem .9rem 0 var(--tinta);padding:1.7rem 2.2rem 1.9rem;
  display:flex;flex-direction:column;min-height:0;min-width:0}
.t-cartao h2{font-family:'Luckiest Guy',sans-serif;font-weight:400;font-size:4rem;color:var(--verde-esc);line-height:1;margin-bottom:1.1rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex:none}
.t-cartao h2 small{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.7rem;color:var(--cinza);letter-spacing:.1rem;text-transform:uppercase}
.t-dir{display:flex;flex-direction:column;gap:2rem;min-height:0;min-width:0}
/* classificação */
.t-linhas{flex:1;display:grid;grid-template-rows:3rem repeat(8,minmax(0,1fr));gap:.8rem;min-height:0}
.t-cab,.t-lin{display:grid;grid-template-columns:6rem minmax(0,1fr) 9rem 6rem 6rem 6rem 7rem;align-items:center;column-gap:.6rem;padding:0 1.6rem}
.t-cab{font-size:1.7rem;font-weight:800;color:var(--cinza);text-transform:uppercase;text-align:center}
.t-cab .l{text-align:left;padding-left:.8rem}
.t-lin{background:#fff;border:.32rem solid var(--tinta);border-radius:1.5rem;text-align:center;font-weight:700;font-size:2.9rem;min-height:0}
.t-lin .l{text-align:left;min-width:0;padding-left:.8rem}
.t-lin .l b{display:block;font-weight:800;font-size:2.9rem;line-height:1.1}
.t-lin .l small{display:block;font-size:2rem;font-weight:600;color:var(--cinza);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-lin .pos{width:4.7rem;height:4.7rem;border-width:.3rem;font-size:2.4rem}
.t-lin .pts{font-family:'Luckiest Guy',sans-serif;font-size:4.5rem;color:var(--verde-esc);line-height:1;padding-top:.8rem}
.t-lin.zona{background:#eef8f0}
.t-lin.emp{background:#fff7d1}
.t-nota{flex:none;font-size:1.65rem;font-weight:700;color:var(--cinza);margin-top:1.1rem;line-height:1.3}
.t-nota b{color:var(--verde-esc)}
/* jogos da rodada */
.t-rod{flex:1}
.t-jogos{flex:1;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:1rem;min-height:0}
.t-jogo{background:#fff;border:.32rem solid var(--tinta);border-radius:1.5rem;padding:.5rem 1.6rem .7rem;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);align-items:center;column-gap:1.4rem;min-height:0}
.t-jogo .tp{grid-column:1 / -1;display:flex;justify-content:space-between;font-size:1.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.12rem;color:var(--cinza)}
.t-jogo .np{font-size:2rem;margin-right:.6rem}
.t-jogo .time b{font-size:2.9rem;line-height:1.1}
.t-jogo .time small{font-size:1.95rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-jogo .time em{font-size:1.5rem;letter-spacing:.1rem}
.t-jogo .time.vazio b{font-size:2.4rem}
.t-jogo .placar{gap:.8rem}
.t-jogo .placar span{width:5.6rem;height:6.2rem;border-radius:1.3rem;font-size:4.1rem;padding-top:.8rem}
.t-jogo .placar i{font-size:1.9rem}
.t-jogo.vivo{border-color:var(--verde);box-shadow:0 0 0 .5rem rgba(19,138,60,.25)}
.t-jogo.vivo .st{color:var(--verde)}
.t-jogo.fim{background:#f6f3e6}
.t-minis{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.t-minis.um{grid-template-columns:1fr}
.t-mini{background:var(--creme);border:.4rem solid var(--tinta);border-radius:1.9rem;box-shadow:.6rem .7rem 0 var(--tinta);padding:1.1rem 1.6rem 1.2rem}
.t-mini h3{font-size:1.6rem;font-weight:900;letter-spacing:.2rem;text-transform:uppercase;color:var(--verde-esc);margin-bottom:.5rem}
.t-mini div{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;font-size:1.95rem;font-weight:700;line-height:1.55}
.t-mini div span:last-child{text-align:right}
.t-mini div b{font-weight:900;color:var(--verde-esc)}
.t-mini div i{font-style:normal;font-weight:900;font-size:1.7rem;color:var(--cinza)}
.t-mini div i.pl{font-size:2rem;font-weight:900;color:var(--tinta);white-space:nowrap}
.t-mini div i.pl.vivo{color:var(--verde)}
.t-alerta{flex:none;background:var(--amarelo);border:.4rem solid var(--tinta);border-radius:1.9rem;box-shadow:.6rem .7rem 0 var(--tinta);padding:1.5rem 2rem;
  font-weight:800;font-size:2.4rem;line-height:1.3;text-align:center}
/* mata-mata */
.t-chave{flex:1;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:1.7rem;min-height:0}
.t-chave .t-jogo{border-width:.45rem;border-radius:2.2rem;box-shadow:.8rem .9rem 0 var(--tinta);background:var(--creme);padding:1rem 2.4rem 1.2rem}
.t-chave .t-jogo .tp{font-family:'Luckiest Guy',sans-serif;font-size:2.7rem;letter-spacing:.05rem;color:var(--verde-esc);text-transform:none}
.t-chave .t-jogo .tp .st{font-family:'Montserrat',sans-serif;font-size:1.55rem;font-weight:800;letter-spacing:.12rem;text-transform:uppercase;color:var(--cinza);align-self:center}
.t-chave .t-jogo.vivo .tp .st{color:var(--verde)}
.t-chave .t-jogo .time b{font-size:3.5rem}
.t-chave .t-jogo .time small{font-size:2.2rem}
.t-chave .t-jogo .placar span{width:6.4rem;height:7rem;font-size:4.7rem}
.t-chave .t-jogo.final{background:var(--amarelo)}
.t-chave .t-jogo.final .time small{color:#5a4a00}
.t-chave .t-jogo.final .time.v b{color:var(--tinta)}
/* campeões */
.t-campeao{background:var(--amarelo);align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.t-campeao svg{width:25rem;height:25rem;flex:none;animation:sobe 1.2s cubic-bezier(.2,1.5,.4,1)}
@keyframes sobe{from{transform:translateY(8rem) scale(.6);opacity:0}}
.t-campeao .rot{font-family:'Luckiest Guy',sans-serif;font-size:7.6rem;line-height:1;color:#fff;-webkit-text-stroke:.34rem var(--tinta);paint-order:stroke fill;
  text-shadow:.5rem .55rem 0 var(--tinta);margin-top:.6rem}
.t-campeao .nome{font-family:'Luckiest Guy',sans-serif;font-size:6rem;line-height:1.05;margin-top:1.6rem;color:var(--verde-esc)}
.t-campeao .quem{font-weight:900;font-size:4.4rem;line-height:1.15;margin-top:.2rem}
.t-campeao .resto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:3rem;width:100%}
.t-campeao>*:not(.confete){position:relative;z-index:1}
.t-campeao .resto div{background:#fff;border:.35rem solid var(--tinta);border-radius:1.5rem;padding:1rem 1.2rem;font-size:2rem;font-weight:700;line-height:1.3}
.t-campeao .resto b{display:block;font-family:'Luckiest Guy',sans-serif;font-weight:400;font-size:2.5rem;color:var(--verde-esc)}
.confete{position:absolute;top:-4rem;width:1.5rem;height:2.6rem;border-radius:.3rem;animation:cai linear infinite;opacity:.9;pointer-events:none}
@keyframes cai{to{transform:translateY(112rem) rotate(720deg)}}
/* sorteio no telão */
.fase-sorteio .t-corpo{grid-template-columns:1.25fr 1fr}
.t-chips{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:1.3rem;min-height:0}
.t-chips div{background:#fff;border:.32rem solid var(--tinta);border-radius:1.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:.6rem 1rem;min-width:0;position:relative}
.t-chips i{font-style:normal;position:absolute;left:1rem;top:.8rem;font-weight:900;font-size:1.7rem;color:var(--cinza)}
.t-chips span{font-weight:800;font-size:2.9rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.t-chips em{font-style:normal;font-weight:900;font-size:1.6rem;background:var(--verde);color:#fff;border-radius:.7rem;padding:.2rem .9rem;margin-top:.6rem}
.t-chips .usado{background:#dfe9e1}
.t-chips .usado span{color:var(--cinza)}
.t-chips .vago{background:transparent;border-style:dashed}
.t-chips .vago span{font-size:2rem;font-weight:700;color:var(--cinza)}
.t-duplas{flex:1;display:grid;grid-template-rows:repeat(8,minmax(0,1fr));gap:.9rem;min-height:0}
.t-duplas div{background:#fff;border:.32rem solid var(--tinta);border-radius:1.5rem;display:flex;align-items:center;gap:2rem;padding:0 2rem;min-width:0}
.t-duplas b{font-family:'Luckiest Guy',sans-serif;font-weight:400;font-size:3rem;color:var(--verde-esc);flex:none;padding-top:.5rem}
.t-duplas span{font-weight:800;font-size:2.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-duplas .vazia{background:transparent;border-style:dashed}
.t-duplas .vazia span{color:var(--cinza);font-weight:700;font-size:2.3rem}
.t-duplas .ok{background:#eef8f0}
/* sobreposição do sorteio no telão */
html.telao .sorteio{width:92rem;padding:4.4rem 5rem 5.4rem;border-width:.6rem;border-radius:4rem;box-shadow:1.3rem 1.5rem 0 var(--tinta)}
html.telao .sorteio .rot{font-size:2.6rem;letter-spacing:1.2rem}
html.telao .sorteio .dn{font-size:13rem;-webkit-text-stroke:.5rem var(--tinta);text-shadow:.8rem .9rem 0 var(--tinta);margin:1.4rem 0 2.4rem}
html.telao .sorteio .nm{font-size:6.2rem;min-height:12.4rem;border-width:.5rem;border-radius:2.6rem;padding:1.6rem}
html.telao .sorteio .e{font-size:5rem;margin:1rem 0 .6rem}
/* botão de tela cheia e aviso de conexão */
.t-cheia{position:fixed;right:1.6rem;bottom:1.4rem;z-index:5;background:rgba(29,29,27,.72);color:#fff;border:none;border-radius:1rem;padding:.9rem 1.5rem;
  font-weight:800;font-size:1.6rem;transition:opacity .4s}
body.sem-mouse .t-cheia{opacity:0;pointer-events:none}
html.telao body.offline .t-fase{background:#7a7566}