/* KartPro Online — Live Timing, estilo transmissão de automobilismo: sóbrio, denso, tipográfico.
   Fundo sólido, linhas finas, cantos retos, maiúsculas condensadas, números tabulares. Cor só onde tem significado. */
:root{
  --fundo:#0b0c0e;--painel:#121418;--painel2:#171a1f;--linha-c:#23272e;--linha-f:#1a1d22;
  --tx:#eef1f5;--tx2:#8b94a1;--tx3:#59616c;
  --roxo:#a855f7;--verde:#22c55e;--amarelo:#facc15;--vermelho:#ef3340;--ouro:#e8b923;--prata:#c8ced6;--bronze:#c98552;
  --ac:#2f80ed;
  --fonte:"Bahnschrift","DIN Alternate","DIN 2014","Barlow","Roboto Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
  --linha:52px;
}
:root[data-skin=vermelho]{--ac:#e10600}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.lt{background:var(--fundo);color:var(--tx);font-family:var(--fonte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.tab{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.rot{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);font-weight:600;display:flex;align-items:center;gap:6px}
.oculto{display:none!important}

/* topo */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;height:52px;padding:0 clamp(12px,2.4vw,32px);
  background:#08090b;border-bottom:1px solid var(--linha-c)}
.topo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac)}
.marca{display:flex;align-items:center;gap:10px}
.logo{width:26px;height:26px;display:grid;place-items:center;background:var(--ac);color:#fff;font-weight:800;font-size:14px}
.pista{font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.div{width:1px;height:22px;background:var(--linha-c)}
.sessao{display:flex;align-items:center;gap:10px;min-width:0}
.sessao b{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fase{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:3px 7px;border:1px solid var(--linha-c);color:var(--tx2)}
.fase.classificacao{color:var(--roxo);border-color:rgba(168,85,247,.45)}
.dir{margin-left:auto;display:flex;align-items:center;gap:14px}
.navlink{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);font-weight:600}
.navlink:hover{color:var(--tx)}
.vivo{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.16em;padding:4px 9px;background:var(--vermelho);color:#fff}
.vivo i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pisca 1.4s steps(2,start) infinite}
.vivo.fraco{background:#5c4a00;color:var(--amarelo)}.vivo.fraco i{background:var(--amarelo);animation:none}
.vivo.fim{background:#fff;color:#000}.vivo.fim i{display:none}
@keyframes pisca{50%{opacity:0}}
.skin{display:flex;gap:6px}
.skin button{width:12px;height:12px;border:1px solid #000;cursor:pointer;padding:0;outline:1px solid transparent;outline-offset:2px}
.skin button[data-s=ciano]{background:#2f80ed}.skin button[data-s=vermelho]{background:#e10600}
.skin button.on{outline-color:#fff}

/* faixa da bandeira (logo abaixo do topo) */
.flag{height:4px;background:var(--linha-c)}
.flag.verde{background:var(--verde)}.flag.amarela{background:var(--amarelo)}.flag.vermelha{background:var(--vermelho)}
.flag.quadriculada,.flag.final{height:6px;background:conic-gradient(#fff 25%,#111 0 50%,#fff 0 75%,#111 0) 0 0/12px 12px}

/* palco */
.palco{padding:14px clamp(12px,2.4vw,32px) 28px;max-width:1600px;margin:0 auto}

/* faixa de sessão */
.faixa{display:grid;grid-template-columns:minmax(180px,1.1fr) minmax(110px,.6fr) minmax(170px,.9fr) minmax(240px,1.4fr);
  border:1px solid var(--linha-c);background:var(--painel);margin-bottom:14px}
.caixa{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 18px;border-right:1px solid var(--linha-c);min-width:0}
.caixa:last-child{border-right:0}
.dig{font-size:34px;font-weight:600;line-height:1;letter-spacing:.01em}
.tempo .prog{height:3px;background:var(--linha-c);margin-top:6px;overflow:hidden}
.tempo .prog i{display:block;height:100%;width:100%;background:var(--ac);transition:width 1s linear}
.tempo.acabando .dig{color:var(--amarelo)}.tempo.acabando .prog i{background:var(--amarelo)}
.tempo.zerou .dig{color:var(--vermelho)}
.estado{display:inline-block;width:max-content;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;color:#000}
.estado.verde{background:var(--verde)}.estado.amarela{background:var(--amarelo)}.estado.vermelha{background:var(--vermelho);color:#fff}
.estado.quadriculada,.estado.final{background:#fff}
.recorde .dig{color:var(--roxo)}
.marca-roxa{width:8px;height:8px;background:var(--roxo);display:inline-block}
.quem{font-size:13px;color:var(--tx2);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quem b{color:var(--tx);font-weight:700}

/* grade */
.grade{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.torre{border:1px solid var(--linha-c);background:var(--painel)}
.cab,.lin{display:grid;grid-template-columns:52px 84px minmax(0,1fr) 52px 104px 104px 104px 96px;align-items:center;gap:0 8px;padding:0 16px 0 8px}
.cab{height:32px;border-bottom:1px solid var(--linha-c);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);font-weight:600;background:var(--painel2)}
.cab .d,.lin .d{text-align:right}.cab .c{text-align:center}
.corpo{position:relative}
.lin{position:absolute;left:0;right:0;top:0;height:var(--linha);border-bottom:1px solid var(--linha-f);
  transition:transform .45s cubic-bezier(.3,.7,.2,1),background-color .6s;will-change:transform}
.lin.passou{background-color:rgba(255,255,255,.045);transition:transform .45s cubic-bezier(.3,.7,.2,1),background-color 0s}
.lin .pos{display:flex;align-items:center;justify-content:center;gap:4px}
.lin .pos .num{display:grid;place-items:center;width:30px;height:28px;font-size:16px;font-weight:700;background:var(--painel2);border:1px solid var(--linha-c)}
.lin.p1 .pos .num{background:var(--ouro);color:#000;border-color:var(--ouro)}
.lin.p2 .pos .num{background:var(--prata);color:#000;border-color:var(--prata)}
.lin.p3 .pos .num{background:var(--bronze);color:#000;border-color:var(--bronze)}
.lin .seta{font-size:9px;width:9px;opacity:0;transition:opacity .2s}
.lin.sobe .seta{opacity:1;color:var(--verde)}.lin.desce .seta{opacity:1;color:var(--vermelho)}
.lin .kart{display:flex;align-items:center;gap:8px}
.lin .faixa-k{width:3px;height:26px;flex:none}
.lin .placa{min-width:40px;height:26px;padding:0 6px;display:grid;place-items:center;font-size:15px;font-weight:700;background:#f2f2f0;color:#000;border-bottom:2px solid #b9b9b5}
.lin .nome{display:flex;align-items:center;gap:9px;min-width:0;font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.lin .nome span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin .na{width:6px;height:6px;flex:none;background:transparent}
.lin.acesa .na{background:var(--verde)}
.lin .v{text-align:right;color:var(--tx2);font-size:15px}
.lin .t{text-align:right;font-size:16px;font-weight:600}
.lin .t.roxo{color:var(--roxo)}.lin .t.verde{color:var(--verde)}.lin .t.cinza{color:var(--tx3)}
.lin .g{text-align:right;font-size:15px;color:var(--tx2)}
.lin .g.lider{color:var(--tx);font-size:11px;letter-spacing:.14em;font-weight:700}
.lin.passou .t.ult{animation:acende .9s ease-out}
@keyframes acende{0%{color:#fff}100%{}}

/* lateral */
.lado{display:flex;flex-direction:column;gap:14px;position:sticky;top:66px}
.painel{border:1px solid var(--linha-c);background:var(--painel);padding:12px 14px}
.painel h3{margin:0 0 10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);font-weight:600}
.ritmo svg{width:100%;height:170px;display:block}
.ritmo .grd{stroke:var(--linha-c);stroke-width:1}
.ritmo .lbl{fill:var(--tx3);font-size:9px}
.ritmo polyline{fill:none;stroke-width:1.6;stroke-linejoin:round}
.legenda{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em}
.legenda i{display:inline-block;width:10px;height:2px;margin-right:5px;vertical-align:3px}
.chaves{display:grid;grid-template-columns:62px 1fr;gap:8px 10px;font-size:12px;color:var(--tx2);align-items:center}
.chaves b{font-size:13px;font-weight:600}
.chaves .roxo{color:var(--roxo)}.chaves .verde{color:var(--verde)}.chaves .sobe{color:var(--verde)}.chaves .desce{color:var(--vermelho)}
.chaves .pt{display:inline-block;width:6px;height:6px;background:var(--verde)}

/* tarja "melhor volta" (como gráfico de TV) */
.toast{position:fixed;left:clamp(12px,2.4vw,32px);bottom:24px;z-index:40;display:flex;align-items:stretch;
  background:#000;border:1px solid #2a2d33;transform:translateX(-120%);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.toast.on{transform:none}
.toast .tarja{display:grid;place-items:center;padding:0 12px;background:var(--roxo);color:#fff;font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.toast .t{padding:10px 14px;font-size:24px;font-weight:600;color:#fff}
.toast .q{padding:10px 16px 10px 0;align-self:center;font-size:13px;color:var(--tx2);letter-spacing:.06em;text-transform:uppercase}

/* resultado final (quadriculada) */
.podio{display:none;grid-template-columns:repeat(3,1fr);border:1px solid var(--linha-c);background:var(--painel);margin-bottom:14px}
.podio.on{display:grid}
.degrau{display:flex;align-items:center;gap:12px;padding:12px 16px;border-right:1px solid var(--linha-c)}
.degrau:last-child{border-right:0}
.degrau .n{display:grid;place-items:center;width:34px;height:32px;font-size:16px;font-weight:700;color:#000}
.degrau.d1 .n{background:var(--ouro)}.degrau.d2 .n{background:var(--prata)}.degrau.d3 .n{background:var(--bronze)}
.degrau .p{font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.degrau .k{font-size:12px;color:var(--tx2);letter-spacing:.04em}
.degrau.d1{order:1}.degrau.d2{order:2}.degrau.d3{order:3}

/* sem bateria */
.livre{display:none;min-height:calc(100vh - 56px);place-items:center;padding:24px}
.livre.on{display:grid}
.livre-caixa{border:1px solid var(--linha-c);border-left:4px solid var(--ac);background:var(--painel);padding:28px 32px;max-width:520px}
.livre h1{margin:8px 0 6px;font-size:clamp(26px,5vw,38px);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.livre p{margin:0 0 18px;color:var(--tx2);font-size:15px}
.livre .bt{display:inline-block;padding:9px 14px;border:1px solid var(--linha-c);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.livre .bt:hover{border-color:var(--tx2)}
.rodape{margin-top:12px;font-size:11px;color:var(--tx3);display:flex;gap:16px;flex-wrap:wrap;letter-spacing:.06em;text-transform:uppercase}
.so-cel{display:none}

/* torre compacta (muitos pilotos numa tela só) */
.torre.compacta .lin .pos .num{width:26px;height:24px;font-size:14px}.torre.compacta .lin .placa{height:23px;font-size:14px;min-width:36px}
.torre.compacta .lin .faixa-k{height:20px}.torre.compacta .lin .nome{font-size:14.5px}.torre.compacta .lin .t{font-size:14.5px}.torre.compacta .lin .g,.torre.compacta .lin .v{font-size:13.5px}

/* TV / tela larga */
@media (min-width:1700px){.lin .nome{font-size:19px}.lin .t{font-size:19px}.lin .g{font-size:17px}.lin .pos .num{width:34px;height:32px;font-size:18px}.dig{font-size:40px}}
/* tablet */
@media (max-width:1100px){.grade{grid-template-columns:1fr}.lado{position:static;display:grid;grid-template-columns:1fr 1fr}
  .faixa{grid-template-columns:1fr 1fr}.caixa:nth-child(2){border-right:0}.caixa:nth-child(-n+2){border-bottom:1px solid var(--linha-c)}}
/* celular */
@media (max-width:700px){
  :root{--linha:50px}
  .topo{height:48px;gap:10px;padding:0 10px 0 14px}.pista,.div,.navlink,.topo .skin{display:none}
  .sessao b{font-size:14px}.fase{font-size:9.5px;padding:2px 5px}.vivo{font-size:10px;padding:3px 7px}
  .palco{padding:10px 8px 24px}
  .faixa{grid-template-columns:1fr 1fr}.caixa{padding:10px 12px}.dig{font-size:26px}.estado{font-size:11px;padding:5px 8px}
  .recorde{grid-column:1/-1}
  .cab,.lin{grid-template-columns:34px 46px minmax(0,1fr) 66px 62px;gap:0 6px;padding:0 8px 0 4px}
  .c-v,.c-mel,.c-int{display:none}
  .lin .pos .num{width:26px;height:24px;font-size:14px}.lin .seta,.lin .faixa-k{display:none}
  .lin .placa{min-width:34px;height:24px;font-size:14px;padding:0 4px}.lin .nome{font-size:14px;gap:6px;letter-spacing:.03em}
  .lin .t{font-size:14.5px}.lin .g{font-size:12.5px}.lin .g.lider{font-size:10px}
  .lado{grid-template-columns:1fr}.podio{grid-template-columns:1fr}.degrau{border-right:0;border-bottom:1px solid var(--linha-c)}
  .toast{left:8px;right:8px;bottom:12px}.toast .t{font-size:19px}
  .so-cel{display:inline-flex;align-items:center;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}