/* Sistema de design do Ápice: tokens e componentes da interface. Documentado em DESIGN.md e mostrado em ds.html.
   O HUD desenhado no canvas (game.js) lê as cores daqui, pelas variáveis --c-*: uma fonte só.
   Direção de arte A (estilos/a-sol-baixo.png): neutros quentes quase pretos, creme e um acento só, o lima.
   Forma: placas inclinadas (paralelogramo), sem cantos redondos. Uma família de letra, números em itálico. */

:root {
  color-scheme: dark;
  /* cor */
  --c-fundo: #111214;
  --c-superficie: #18191c;
  --c-superficie-2: #212226;
  --c-superficie-ativa: #2a2c24;
  --c-placa: rgba(14, 15, 18, 0.86);
  --c-destaque: rgba(46, 56, 20, 0.95); /* a linha do jogador nos tempos, por cima do jogo ou do fundo */
  --c-veu: rgba(10, 10, 12, 0.6);
  --c-linha: #34322d;
  --c-texto: #f3ecdc;
  --c-texto-2: #a39b89;
  --c-texto-3: #6f6a5f;
  --c-acento: #c8ff2e;
  --c-sobre-acento: #11130a;
  --c-alerta: #ff5a2e;
  /* letra */
  --f-ui: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --t-titulo: italic 800 44px/0.95 var(--f-ui);
  --t-h1: italic 800 30px/1 var(--f-ui);
  --t-h2: italic 700 22px/1.05 var(--f-ui);
  --t-numero: italic 700 26px/1 var(--f-ui);
  --t-numero-p: italic 700 18px/1 var(--f-ui);
  --t-corpo: 500 16px/1.35 var(--f-ui);
  --t-botao: 700 18px/1 var(--f-ui);
  --t-pequeno: 500 13px/1.3 var(--f-ui);
  --t-rotulo: 600 11px/1.2 var(--f-ui);
  /* espaço: escala de 4 */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  /* forma */
  --inclina: 8px;
  --inclina-p: 5px;
  --toque: 44px;
}

/* ---------------------------------------------------------------- base */
html, body { height: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--c-fundo); color: var(--c-texto); font: var(--t-corpo); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font-family: var(--f-ui); color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- forma inclinada */
.inclinada { clip-path: polygon(var(--inclina) 0, 100% 0, calc(100% - var(--inclina)) 100%, 0 100%); }
.inclinada-p { clip-path: polygon(var(--inclina-p) 0, 100% 0, calc(100% - var(--inclina-p)) 100%, 0 100%); }

/* ---------------------------------------------------------------- texto */
.rotulo { margin: 0 0 var(--e-2); font: var(--t-rotulo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-texto-2); }
.nota { margin: 0; font: var(--t-pequeno); color: var(--c-texto-2); max-width: 60ch; }
.nota b { color: var(--c-texto); }

/* ---------------------------------------------------------------- botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--toque); padding: 0 var(--e-5);
  border: 0; background: var(--c-superficie-2); color: var(--c-texto); font: var(--t-botao); letter-spacing: 0.02em; text-transform: uppercase;
  clip-path: polygon(var(--inclina) 0, 100% 0, calc(100% - var(--inclina)) 100%, 0 100%);
}
.botao--primario { min-height: 60px; background: var(--c-acento); color: var(--c-sobre-acento); font: italic 800 30px/1 var(--f-ui); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.botao--largo { width: 100%; }
.botao--acento { background: var(--c-acento); color: var(--c-sobre-acento); }
.botao:active { filter: brightness(0.9); }
.botao:disabled { cursor: default; }
/* carregando (aria-busy): o texto muda e uma barra corre na base; o botão não aceita outro toque */
.botao[aria-busy="true"] { position: relative; overflow: hidden; }
.botao[aria-busy="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 4px; background: currentColor; animation: botao-carrega 0.9s ease-in-out infinite alternate; }
@keyframes botao-carrega { to { left: 60%; } }

/* chip: escolha pequena, filtro ou etiqueta clicável */
.chip {
  min-height: 36px; padding: 0 var(--e-3); border: 0; background: var(--c-superficie-2); color: var(--c-texto);
  font: 600 15px/1 var(--f-ui); clip-path: polygon(var(--inclina-p) 0, 100% 0, calc(100% - var(--inclina-p)) 100%, 0 100%);
}
.chip[aria-pressed="true"] { background: var(--c-acento); color: var(--c-sobre-acento); }
/* etiqueta: informação, não clicável */
.etiqueta { display: inline-block; padding: 1px 6px; border: 1px solid var(--c-linha); color: var(--c-texto-2); font: 600 12px/1.3 var(--f-ui); letter-spacing: 0.02em; }

/* segmentos: uma escolha entre poucas, lado a lado */
/* volume: rótulo, trilho e valor, numa linha */
.volumes { display: grid; gap: var(--e-1); margin-top: var(--e-1); }
.volume { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 3.2em; align-items: center; gap: var(--e-2); min-height: var(--toque); padding: 0 var(--e-3); background: var(--c-superficie); font: 600 15px/1.15 var(--f-ui); }
.volume input { width: 100%; height: var(--toque); margin: 0; accent-color: var(--c-acento); cursor: pointer; }
.volume output { text-align: right; font-variant-numeric: tabular-nums; color: var(--c-texto-2); }
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e-1); }
.segmentos button {
  min-height: 52px; padding: var(--e-2) var(--e-1); border: 0; background: var(--c-superficie-2); color: var(--c-texto); font: var(--t-botao);
  display: grid; align-content: center; gap: 2px; text-align: center;
}
.segmentos button small { font: var(--t-pequeno); color: var(--c-texto-2); }
.segmentos button[aria-pressed="true"] { background: var(--c-acento); color: var(--c-sobre-acento); }
.segmentos button[aria-pressed="true"] small { color: #3c4a10; }
.segmentos--2x2 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }

/* alternador: liga e desliga, com o quadrado de estado à esquerda */
.alternadores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); }
.alternador {
  display: grid; grid-template-columns: 14px 1fr; align-items: center; column-gap: var(--e-3); min-height: 52px; padding: var(--e-2) var(--e-3);
  border: 0; background: var(--c-superficie-2); color: var(--c-texto); font: 600 16px/1.15 var(--f-ui); text-align: left;
}
.alternador::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--c-texto-3); grid-row: span 2; }
.alternador small { font: var(--t-pequeno); color: var(--c-texto-2); }
.alternador[aria-pressed="true"]::before { background: var(--c-acento); border-color: var(--c-acento); }
.alternador--largo { grid-column: 1 / -1; }
/* alternador com explicação: o nome e o estado em cima, a peça do HUD ao lado, o que faz embaixo */
.alternador--explica { grid-template-columns: 14px minmax(0, 1fr) auto; row-gap: 2px; align-items: start; }
.alternador--explica::before { grid-row: 1; margin-top: 2px; }
.alternador__nome { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e-2); }
.alternador__icone { grid-column: 3; grid-row: 1; display: grid; place-items: center end; height: 18px; }
.alternador__icone svg { display: block; width: 36px; height: 18px; fill: none; stroke-width: 3; }
.alternador__texto { grid-column: 2 / -1; font: var(--t-pequeno); color: var(--c-texto-2); text-wrap: pretty; }
.alternador__texto b { font-weight: 600; color: var(--c-texto); }
.alternador:disabled { cursor: default; }
.alternador:disabled::before { opacity: 0.5; }
.alternador:not([aria-pressed="true"]) .alternador__icone { opacity: 0.45; }
/* as peças do HUD como ícone: a placa FREIE e as linhas da pista */
.icone-freie { display: inline-block; padding: 1px 7px 1px 6px; background: var(--c-alerta); color: var(--c-sobre-acento); font: italic 800 13px/1.2 var(--f-ui); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.traco-acento { stroke: var(--c-acento); }
.traco-alerta { stroke: var(--c-alerta); }
.traco-trilho { stroke: var(--c-linha); stroke-width: 8; }
.traco-faixa { stroke: var(--c-acento); stroke-width: 8; opacity: 0.45; }
.traco-marca { stroke: var(--c-texto); }
.traco-linha { stroke: var(--c-texto); stroke-dasharray: 5 4; }

/* seletor: mostra a escolha atual e leva à tela de escolher */
.seletor {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--e-2); min-height: 64px; padding: var(--e-2) var(--e-5) var(--e-2) var(--e-4);
  border: 0; background: var(--c-superficie-2); text-align: left; clip-path: polygon(var(--inclina) 0, 100% 0, calc(100% - var(--inclina)) 100%, 0 100%);
}
.seletor .rotulo { margin: 0 0 2px; }
.seletor__valor { display: flex; align-items: center; gap: var(--e-2); font: var(--t-h2); min-width: 0; }
.seletor__valor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seletor::after { content: "›"; font: 700 26px/1 var(--f-ui); color: var(--c-texto-2); }

/* idioma: o seletor nativo do aparelho, numa placa; o que abre é a lista do sistema, com o nome de cada idioma nele mesmo */
.idioma { position: relative; display: inline-block; background: var(--c-placa); }
.idioma select {
  display: block; width: 100%; min-height: var(--toque); padding: 0 var(--e-6) 0 var(--e-3); border: 0; border-radius: 0; background: none;
  color: var(--c-texto); font: 600 16px/1 var(--f-ui); cursor: pointer; appearance: none; -webkit-appearance: none;
}
.idioma select:focus-visible { outline: 2px solid var(--c-acento); outline-offset: -3px; }
.idioma option { background: var(--c-superficie-2); color: var(--c-texto); }
.idioma::after { content: ""; position: absolute; right: var(--e-4); top: calc(50% - 6px); width: 7px; height: 7px; border: solid var(--c-texto-2); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.idioma--largo { display: block; background: var(--c-superficie-2); }
/* na abertura, no canto de cima, numa faixa só dele: o logo começa abaixo (--abertura-topo) */
.abertura .idioma { position: absolute; top: max(var(--e-2), env(safe-area-inset-top, 0px)); right: max(var(--e-2), env(safe-area-inset-right, 0px)); cursor: auto; }

/* logo de equipe: caixa de altura fixa, a imagem ajustada dentro */
.logo { height: 18px; width: auto; max-width: 54px; object-fit: contain; flex: none; }
.logo--g { height: 26px; max-width: 74px; }
/* no lugar do logo quando a volta não tem equipe: a marca do jogo na simulação, um traço nas voltas antigas */
.logo-vazio { flex: none; width: 14px; height: 4px; background: var(--c-texto-3); transform: skewX(-20deg); }

/* selo: o BETA junto ao logo, em creme para não disputar com o acento da ação principal */
.selo { display: inline-block; padding: 3px 10px 3px 9px; background: var(--c-texto); color: var(--c-fundo); font: var(--t-rotulo); font-weight: 700; letter-spacing: 0.14em; }

/* ---------------------------------------------------------------- tela do menu */
.tela { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--c-fundo); z-index: 10; --topo-h: calc(max(var(--e-3), env(safe-area-inset-top, 0px)) + 64px + var(--e-2)); --faixa: calc(var(--topo-h) + max(36vh, 440px)); }
/* a arte fica parada no alto; ao rolar, o painel passa por cima. É mais alta que a vitrine, para nunca faltar atrás do conteúdo.
   Só é baixada quando o menu aparece (na garagem, ao abrir a aba). */
.tela::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--faixa); z-index: -1; background: url("assets/arte/menu.webp") 65% 50% / cover no-repeat; }
.tela[data-aba="garagem"]::before { background-image: url("assets/arte/garagem.webp"); background-position: 55% 35%; }
/* nas abas sem vitrine, a arte é só a tira do topo */
.tela[data-aba="ranking"], .tela[data-aba="perfil"], .tela[data-aba="ajustes"] { --faixa: var(--topo-h); }
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: max(var(--e-3), env(safe-area-inset-top, 0px)) max(var(--e-4), env(safe-area-inset-right, 0px)) var(--e-2) max(var(--e-4), env(safe-area-inset-left, 0px));
}
.topo__marca { display: flex; align-items: flex-end; gap: var(--e-1); min-width: 0; }
.topo__acoes { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.marca { display: block; height: 64px; width: auto; }
.topo .etiqueta { background: var(--c-placa); border: 0; padding: 6px 14px; font: 700 14px/1 var(--f-ui); color: var(--c-texto); letter-spacing: 0.06em; text-transform: uppercase; }
/* o piloto no topo leva ao Perfil; o alvo de toque passa da placa */
.topo button.etiqueta { position: relative; }
.topo button.etiqueta::after { content: ""; position: absolute; inset: -6px -4px; }
.conteudo { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.aba { display: grid; grid-template-rows: auto 1fr; min-height: 100%; }
.aba > .painel:only-child { grid-row: 1 / -1; }
/* o alto da aba fica livre: atrás está a arte (.tela::before) */
.vitrine { position: relative; min-height: 36vh; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) max(var(--e-4), env(safe-area-inset-right, 0px)) var(--e-4) max(var(--e-4), env(safe-area-inset-left, 0px)); }
.vitrine h1 { margin: 0; font: var(--t-titulo); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.vitrine p { margin: 4px 0 0; font: 600 16px/1.2 var(--f-ui); color: var(--c-texto); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.vitrine svg { width: 92px; height: auto; flex: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.painel { display: grid; gap: var(--e-5); align-content: start; padding: var(--e-5) max(var(--e-4), env(safe-area-inset-right, 0px), calc((100% - 600px) / 2)) var(--e-6) max(var(--e-4), env(safe-area-inset-left, 0px), calc((100% - 600px) / 2)); background: var(--c-fundo); }
/* na tela larga (PC), o conteúdo fica numa coluna de 600 px no meio */
.painel--cheio { min-height: 100%; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); }

/* perfil e campo de texto */
.titulo-aba { margin: 0; font: var(--t-h1); }
.pilha { display: grid; gap: var(--e-4); align-content: start; }
.pilha > p:not([class]) { margin: 0; font: var(--t-corpo); max-width: 60ch; }
.perfil__google { min-height: var(--toque); color-scheme: light; } /* o botão do Google é claro por dentro: com o esquema escuro da página, o navegador pinta uma faixa branca em volta */
.campo { display: grid; gap: var(--e-2); }
.campo .rotulo { margin: 0; }
.campo__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1); }
.campo__entrada {
  min-width: 0; min-height: var(--toque); padding: 0 var(--e-4); border: 1px solid var(--c-linha); border-radius: 0;
  background: var(--c-superficie-2); color: var(--c-texto); font: 600 20px/1 var(--f-ui);
}
.campo__entrada:focus-visible { outline: 2px solid var(--c-acento); outline-offset: -1px; }
.campo__entrada--area { display: block; width: 100%; box-sizing: border-box; padding: var(--e-3) var(--e-4); font: var(--t-corpo); resize: none; touch-action: pan-y; user-select: text; -webkit-user-select: text; }
.campo__ajuda { margin: 0; font: var(--t-pequeno); color: var(--c-texto-2); }
.campo__ajuda--erro { color: var(--c-alerta); }

/* recorde: sua melhor e o ghost */
.recorde { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: end; padding: var(--e-3) var(--e-5) var(--e-3) var(--e-4); background: var(--c-superficie); }
.recorde__tempo { font: italic 700 36px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.recorde__ghost { min-width: 0; padding-left: var(--e-4); border-left: 1px solid var(--c-linha); }
.recorde__ghost b { display: block; font: 600 15px/1.2 var(--f-ui); overflow-wrap: anywhere; }
.recorde__ghost .etiquetas { margin-top: var(--e-1); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1); }

/* barra de abas */
.abas {
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--c-superficie); border-top: 1px solid var(--c-linha);
  padding: 0 max(var(--e-2), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--e-2), env(safe-area-inset-left, 0px));
}
.abas button { min-height: 58px; border: 0; background: none; color: var(--c-texto-2); font: 600 15px/1 var(--f-ui); display: grid; justify-items: center; align-content: center; gap: 5px; position: relative; }
.abas svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.abas button[aria-current="page"] { color: var(--c-texto); }
.abas button[aria-current="page"]::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 3px; background: var(--c-acento); }

/* a ação da aba fica numa faixa presa à base da área visível: em tela pequena, o resto do painel passa por baixo dela */
.painel__acao { position: sticky; bottom: 0; z-index: 1; margin-block: calc(-1 * var(--e-3)); padding-block: var(--e-3); background: var(--c-fundo); }
/* o convite fica pendurado acima da faixa, por cima do que estiver ali: dentro dela, em tela baixa, empurraria o CORRER para trás das abas */
.painel__acao .convite { position: absolute; bottom: 100%; left: 0; right: 0; }

/* ---------------------------------------------------------------- lista de tempos (ranking), no formato das telas de cronometragem */
.tempos { list-style: none; margin: 0; padding: 0; display: grid; }
.tempo {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 46px; grid-template-areas: "pos quem tempo gap" "pos equipe acao acao";
  column-gap: var(--e-2); row-gap: 4px; align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--c-linha);
}
.tempo__pos { grid-area: pos; font: italic 700 22px/1 var(--f-ui); color: var(--c-texto-2); text-align: center; align-self: center; }
.tempo:first-child .tempo__pos { color: var(--c-acento); font-size: 28px; }
.tempo__quem { grid-area: quem; font: 500 17px/1.1 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tempo__quem b { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.tempo__equipe { grid-area: equipe; display: flex; align-items: center; gap: var(--e-2); min-width: 0; font: 700 13px/1 var(--f-ui); letter-spacing: 0.04em; color: var(--c-texto-2); }
.tempo__equipe span { overflow-wrap: anywhere; }
.tempo__tempo { grid-area: tempo; font: var(--t-numero-p); font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.tempo__gap { grid-area: gap; font: italic 700 15px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--c-texto-2); text-align: right; white-space: nowrap; }
.tempo__acao { grid-area: acao; justify-self: end; display: flex; gap: var(--e-2); align-items: center; }
.tempo__acao .etiquetas { justify-content: flex-end; }
.tempo .chip { min-height: 30px; padding: 0 10px; font-size: 13px; }
.tempo--meu { margin: 0 calc(-1 * var(--e-3)); padding-inline: var(--e-3); background: var(--c-destaque); border-bottom-color: transparent; }
.tempo--meu .tempo__quem, .tempo--meu .tempo__tempo, .tempo--meu .tempo__gap { color: var(--c-acento); }
.tempos__aviso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) 0; border-bottom: 1px solid var(--c-linha); color: var(--c-texto-2); font: var(--t-pequeno); }
.tempos__vazio { padding: var(--e-5) 0; color: var(--c-texto-2); }

/* ---------------------------------------------------------------- garagem */
.equipes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); }
.equipe {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--e-2) var(--e-3); min-height: 64px; padding: var(--e-2) var(--e-3);
  border: 0; background: var(--c-superficie-2); text-align: left;
}
.equipe__nome { font: 700 16px/1.1 var(--f-ui); }
.equipe__cores { grid-column: 1 / -1; display: flex; height: 5px; }
.equipe__cores i { flex: 1; }
.equipe[aria-pressed="true"] { background: var(--c-superficie-ativa); box-shadow: inset 0 0 0 2px var(--c-acento); }

/* ---------------------------------------------------------------- folha (pausa) */
.folha-fundo { position: absolute; inset: 0; background: var(--c-veu); z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; }
.folha {
  display: grid; gap: var(--e-4); max-height: 70%; overflow-y: auto; background: var(--c-fundo); border-top: 2px solid var(--c-acento);
  padding: var(--e-5) max(var(--e-4), env(safe-area-inset-right, 0px)) max(var(--e-5), env(safe-area-inset-bottom, 0px)) max(var(--e-4), env(safe-area-inset-left, 0px));
}
.folha__topo { display: flex; align-items: center; gap: var(--e-3); }
.folha__topo h2 { margin: 0 auto 0 0; font: var(--t-h1); }
.folha__topo span { font: var(--t-numero-p); font-variant-numeric: tabular-nums; color: var(--c-texto-2); }
.folha .botao-icone { flex: none; background: var(--c-superficie-2); }
/* folha que desce do topo: com campo de texto, o teclado do celular não a cobre */
.folha-fundo--topo { justify-content: flex-start; }
.folha-fundo--topo .folha { border-top: 0; border-bottom: 2px solid var(--c-acento); padding-top: max(var(--e-5), env(safe-area-inset-top, 0px)); padding-bottom: var(--e-5); }

/* ---------------------------------------------------------------- torre de tempos: o top 5 por cima do jogo, como a das transmissões */
.vitrine--torre { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: end; }
.vitrine--torre .torre { grid-column: 1 / -1; align-self: start; justify-self: start; }
.torre { width: min(100%, 300px); display: grid; gap: 2px; }
.torre ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.torre li { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto minmax(38px, auto); align-items: center; gap: var(--e-2); min-height: 28px; padding: 0 var(--e-3) 0 var(--e-2); background: var(--c-placa); }
.torre li:first-child .torre__pos { color: var(--c-acento); }
.torre__pos { font: italic 700 15px/1 var(--f-ui); color: var(--c-texto-2); text-align: center; }
.torre__nome { font: 700 14px/1 var(--f-ui); text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.torre__tempo { font: italic 700 15px/1 var(--f-ui); font-variant-numeric: tabular-nums; text-align: right; }
.torre__gap { font: italic 700 13px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--c-texto-2); text-align: right; white-space: nowrap; }
.torre__equipe { display: flex; justify-content: center; align-items: center; }
.torre .logo { height: 14px; max-width: 30px; }
.torre li.torre--meu { background: var(--c-destaque); }
.torre--meu .torre__nome, .torre--meu .torre__tempo, .torre--meu .torre__gap { color: var(--c-acento); }
.torre li.torre--fora { margin-top: var(--e-2); }
.torre__vazio { padding: var(--e-2) var(--e-3); background: var(--c-placa); color: var(--c-texto-2); font: var(--t-pequeno); }
.torre__botoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; width: max-content; max-width: calc(100vw - 2 * var(--e-4)); } /* podem passar da largura da torre: em duas linhas, empurravam o CORRER para fora da tela */
/* no PC, a torre fica no centro da vitrine, maior, alinhada à coluna do painel */
@media (min-width: 900px) {
  .tela { --faixa: calc(var(--topo-h) + max(44vh, 560px)); }
  .tela[data-aba="ranking"], .tela[data-aba="perfil"], .tela[data-aba="ajustes"] { --faixa: var(--topo-h); }
  .vitrine--torre .torre { justify-self: center; width: min(100%, 600px); }
  .torre li { min-height: 36px; }
  .torre__nome { font-size: 17px; }
  .torre__tempo { font-size: 18px; }
  .torre__gap { font-size: 15px; }
  .torre .logo { height: 18px; }
  .torre__botoes { width: auto; max-width: none; justify-content: center; }
}
.torre__mais:disabled { color: var(--c-texto-3); }
.torre__mais:disabled::after { content: ""; }
.torre__mais { justify-self: start; min-height: 36px; padding: 0 var(--e-4) 0 var(--e-3); border: 0; background: var(--c-placa); color: var(--c-texto); font: 600 14px/1 var(--f-ui); }
.torre__mais::after { content: " ›"; color: var(--c-acento); }

/* ---------------------------------------------------------------- botão de ícone, sobre o jogo (pausa, recomeçar, voltas) */
.botao-icone { width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; background: var(--c-placa); color: var(--c-texto); clip-path: polygon(var(--inclina-p) 0, 100% 0, calc(100% - var(--inclina-p)) 100%, 0 100%); }
.botao-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.botao-icone--alerta { background: var(--c-alerta); color: var(--c-sobre-acento); }

/* ---------------------------------------------------------------- duelo: o desafio recebido por link */
.duelo { display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-5) var(--e-3) var(--e-4); background: var(--c-superficie-ativa); box-shadow: inset 0 2px 0 var(--c-acento); }
.duelo b { font: italic 700 22px/1.1 var(--f-ui); }
.duelo span { font: var(--t-pequeno); color: var(--c-texto-2); }

/* ---------------------------------------------------------------- convite: a volta guardada de quem não entrou; em destaque, se ela daria top 20 */
.convite { display: grid; gap: var(--e-3); padding: var(--e-3) var(--e-5) var(--e-3) var(--e-4); background: var(--c-superficie); }
.convite__texto { margin: 0; font: var(--t-corpo); text-wrap: pretty; }
.convite--destaque { background: var(--c-superficie-ativa); box-shadow: inset 0 2px 0 var(--c-acento); }
.convite--destaque .convite__texto { font: var(--t-h2); color: var(--c-acento); }
.convite--destaque .convite__entrar { background: var(--c-acento); color: var(--c-sobre-acento); }

/* ---------------------------------------------------------------- abertura: a tela de título, sobre a arte */
/* o título é montado com peças transparentes (logo e traçado real de Interlagos), direto sobre a arte, sem véu. --abertura-alto é a altura do conjunto. */
.abertura, .abertura ~ .aviso { --abertura-logo: min(52vw, 30vh, 380px); --abertura-alto: calc(var(--abertura-logo) * 1.12); --abertura-topo: calc(max(var(--e-2), env(safe-area-inset-top, 0px)) + var(--toque) + var(--e-1)); --abertura-folga: var(--e-3); }
.abertura {
  position: absolute; inset: 0; z-index: 15; display: grid; grid-template-rows: 1fr auto; justify-items: center; cursor: pointer;
  background: var(--c-fundo) url("assets/arte/abertura.webp") 50% 60% / cover no-repeat;
  padding: var(--abertura-topo) max(var(--e-4), env(safe-area-inset-right, 0px)) max(var(--e-5), env(safe-area-inset-bottom, 0px)) max(var(--e-4), env(safe-area-inset-left, 0px));
}
.abertura__titulo { margin: 0; align-self: start; display: flex; align-items: flex-start; height: var(--abertura-alto); font: inherit; animation: abertura-logo 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.abertura__marca { display: grid; gap: var(--e-1); width: var(--abertura-logo); margin-top: calc(var(--abertura-logo) * 0.1); position: relative; z-index: 1; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)); }
.abertura__logo { display: block; width: 100%; height: auto; }
.abertura__linha { display: flex; align-items: center; justify-content: center; gap: var(--e-2); }
.abertura__pista { font: italic 800 calc(var(--abertura-logo) * 0.17)/1 var(--f-ui); color: var(--c-texto); letter-spacing: 0.03em; text-transform: uppercase; }
.abertura__tracado { display: block; height: var(--abertura-alto); width: auto; margin-left: calc(var(--abertura-logo) * -0.05); }
.abertura__pe { display: grid; gap: var(--e-4); width: min(100%, 440px); }
.abertura__comecar { justify-self: center; min-height: var(--toque); padding: 0 var(--e-4); border: 0; background: none; color: var(--c-acento); font: var(--t-h1); text-transform: uppercase; animation: abertura-pisca 1.6s ease-in-out infinite; }
/* em tela larga, a arte em paisagem: céu e pista livres atrás do título, e o carro no canto */
@media (min-aspect-ratio: 1/1) {
  .abertura { background-image: url("assets/arte/abertura-larga.webp"); background-position: 0% 100%; }
  .abertura, .abertura ~ .aviso { --abertura-logo: min(40vw, 42vh, 480px); }
}
/* em tela baixa, a chamada sobe até o cenário (e o carro): vai numa placa */
@media (max-height: 720px) {
  .abertura__comecar { padding-inline: var(--e-5); background: var(--c-placa); clip-path: polygon(var(--inclina) 0, 100% 0, calc(100% - var(--inclina)) 100%, 0 100%); }
}
@keyframes abertura-logo { from { opacity: 0; transform: scale(1.14); } }
@keyframes abertura-pisca { 50% { opacity: 0.35; } }
/* prêmio do ranking: o recado da abertura, numa placa sobre a arte */
.premio { display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-5) var(--e-3) var(--e-4); background: var(--c-placa); }
.premio .rotulo { margin: 0; color: var(--c-acento); }
.premio b { font: var(--t-h2); text-wrap: balance; }
.premio span { font: var(--t-pequeno); color: var(--c-texto-2); text-wrap: balance; }

/* aviso curto, por cima de tudo (link copiado, por exemplo) */
.aviso { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 20; padding: var(--e-2) var(--e-4); background: var(--c-texto); color: var(--c-fundo); font: 600 15px/1.2 var(--f-ui); width: max-content; max-width: calc(100% - 32px); text-align: center; }
/* na abertura, logo abaixo do título, sem cobrir o carro, a chamada ou o prêmio */
.abertura:not([hidden]) ~ .aviso { top: calc(var(--abertura-topo) + var(--abertura-alto) + var(--abertura-folga)); bottom: auto; }

/* ---------------------------------------------------------------- escolha do controle: cartões com a prévia, o tamanho e a explicação da escolha (tutorial e Ajustes) */
.controle { display: grid; gap: var(--e-3); }
.controle__tamanho .rotulo { margin-bottom: var(--e-1); }
.controle__fixo { display: grid; gap: var(--e-1); margin-top: var(--e-2); }
.controle__tamanho .explica { margin-top: var(--e-1); }
.controle__tamanho .explica { margin-top: var(--e-1); }
.explica { margin: 0; font: var(--t-pequeno); color: var(--c-texto-2); text-wrap: pretty; }
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); height: clamp(260px, 40vh, 340px); }
.modo { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: 2px; min-width: 0; min-height: 0; padding: var(--e-3) var(--e-2) var(--e-2); border: 0; background: var(--c-superficie-2); color: var(--c-texto); text-align: center; }
.modo__nome { font: var(--t-h2); margin-top: var(--e-1); }
.modo small { font: var(--t-pequeno); color: var(--c-texto-2); }
.modo[aria-pressed="true"] { background: var(--c-superficie-ativa); box-shadow: inset 0 3px 0 var(--c-acento); }
.modo[aria-pressed="true"] .modo__nome { color: var(--c-acento); }
/* cartão de assistência: liga e desliga, com o pedal de perto e o que ela faz */
.modos--assistencias { height: auto; grid-template-rows: 130px auto auto; }
.modo--assistencia { grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; justify-items: stretch; text-align: left; padding-inline: var(--e-3); }
.modo--assistencia .modo__nome { display: flex; align-items: center; gap: var(--e-2); font: 700 16px/1.15 var(--f-ui); }
/* o quadrado de estado do alternador */
.modo--assistencia .modo__nome::before { content: ""; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--c-texto-3); }
.modo--assistencia[aria-pressed="true"] .modo__nome::before { background: var(--c-acento); border-color: var(--c-acento); }
.modo__texto { margin-top: var(--e-1); font: var(--t-pequeno); color: var(--c-texto-2); text-wrap: pretty; }
.modo__texto b { font-weight: 600; color: var(--c-texto); }
.modo:disabled { cursor: default; }
.modo--assistencia .previa canvas { background-size: 400%; background-position: 50% 92%; } /* de perto, o asfalto da arte */
/* a tela da corrida em miniatura, na proporção do aparelho: o canvas é medido e posto por game.js (pintaPrevia); aqui, só a caixa e o fundo */
.previa { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.previa canvas { position: absolute; display: block; background: var(--c-fundo) url("assets/arte/abertura.webp") 50% 60% / cover no-repeat; outline: 1px solid var(--c-linha); outline-offset: -1px; }

/* ---------------------------------------------------------------- tutorial: tela cheia sobre a arte, no máximo a coluna de 600 px do menu */
.tutorial {
  position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; gap: var(--e-3); outline: 0;
  background: var(--c-fundo) url("assets/arte/menu.webp") 65% 50% / cover no-repeat;
  padding: max(var(--e-3), env(safe-area-inset-top, 0px)) max(var(--e-4), env(safe-area-inset-right, 0px), calc((100% - 600px) / 2)) max(var(--e-3), env(safe-area-inset-bottom, 0px)) max(var(--e-4), env(safe-area-inset-left, 0px), calc((100% - 600px) / 2));
}
.tutorial::before { content: ""; position: absolute; inset: 0; background: var(--c-placa); }
.tutorial > * { position: relative; }
.tutorial__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.tutorial__topo .botao { padding-inline: var(--e-4); }
.tutorial__passos { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-2); min-width: 0; }
.tutorial__passos li { padding-top: var(--e-1); border-top: 3px solid var(--c-linha); min-width: 74px; font: var(--t-rotulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-texto-2); }
.tutorial__passos li[aria-current="step"] { border-top-color: var(--c-acento); color: var(--c-texto); }
/* em tela estreita, os três nomes não cabem ao lado de Pular: só o do passo atual aparece */
@media (max-width: 480px) { .tutorial__passos li:not([aria-current="step"]) { min-width: 24px; font-size: 0; } }
.tutorial__feedback { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3); background: var(--c-placa); }
.tutorial__feedback .botao-icone { flex: none; background: var(--c-superficie-2); }
.tutorial__posicao { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.previa--posicao { flex: 1 1 auto; min-height: 220px; height: auto; }
.tutorial__corpo .tutorial__posicao .controle { flex: none; grid-template-rows: auto; }
.tutorial__titulo { margin: 0; font: var(--t-h1); outline: 0; }
.tutorial__corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--e-2); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
/* os cartões crescem até a miniatura encher a largura (coluna de 600 px, 2 cartões), sem sobrar espaço em volta dela; em tela baixa, encolhem com o que couber */
.tutorial__corpo .controle { flex: 1; min-height: 0; grid-template-rows: minmax(150px, calc(((min(100vw, 636px) - 36px) / 2 - 16px) * var(--tela-proporcao, 2) + 84px)) auto auto; align-content: start; }
.tutorial__corpo .modos { height: auto; min-height: 0; }
.tutorial__corpo .modos--assistencias { flex: 1 0 auto; grid-template-rows: minmax(64px, 1fr) auto auto; }
.tutorial__corpo .explica { color: var(--c-texto); }
.tutorial__corpo .rotulo { margin-bottom: var(--e-1); }
/* com duelo por link: o desafio numa linha, para não roubar a tela; em tela baixa, as assistências travadas ficam sem a prévia */
.tutorial .duelo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e-2); padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3); }
.tutorial .duelo b { font: italic 700 18px/1.1 var(--f-ui); }
@media (max-height: 700px) {
  .tutorial--duelo .tutorial__corpo .modos--assistencias { flex: none; grid-template-rows: auto auto; }
  .tutorial--duelo .modo--assistencia { grid-row: span 2; }
  .tutorial--duelo .modo--assistencia .previa { display: none; }
}
.tutorial__acoes { display: flex; gap: var(--e-1); }
.tutorial__acoes .botao--primario { flex: 1; min-height: 52px; }
.tutorial__acoes .botao:not(.botao--primario) { min-height: 52px; }

@media (prefers-reduced-motion: reduce) { *, ::after { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- avisos: o sino do menu e a folha que ele abre */
.botao-icone { position: relative; }
.topo .botao-icone { flex: none; width: 40px; } /* quem cede espaço na tela estreita é o nick, que quebra em duas linhas */
.topo button.etiqueta { min-width: 0; overflow-wrap: anywhere; }
.contador { position: absolute; top: 3px; right: 3px; min-width: 14px; padding: 0 3px; background: var(--c-acento); color: var(--c-sobre-acento); font: 800 10px/14px var(--f-ui); text-align: center; pointer-events: none; }
.avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); max-height: 55vh; overflow-y: auto; }
.avisos button { width: 100%; padding: var(--e-3); background: var(--c-superficie-2); border: 0; border-left: 3px solid transparent; color: var(--c-texto); font: var(--t-corpo); text-align: left; cursor: pointer; }
.avisos button.avisos__novo { border-left-color: var(--c-acento); }
.avisos small { display: block; margin-top: 2px; color: var(--c-texto-2); font: var(--t-pequeno); }
.avisos__vazio { padding: var(--e-3) 0; color: var(--c-texto-2); }
.pedido__acoes { display: flex; gap: var(--e-1); }

/* versão nova: no alto do menu, que fica escondido durante a corrida */
.versao { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-4); background: var(--c-destaque); color: var(--c-texto); font: var(--t-pequeno); }