:root {
  --ceu-alto: #bfe3f7;
  --ceu-baixo: #eef8fd;
  --grama: #8ccb72;
  --grama-escura: #6fb457;
  --asfalto: #3d434b;
  --faixa: #ffd21f;
  --tinta: #1c2630;
  --tinta-fraca: #51606e;
  --papel: #ffffff;
  --verde: #0a7a3d;
  --azul: #0b5cad;
  --verm: #c8102e;
  --placa: 'PlacaBR', 'Arial Black', 'Segoe UI', Arial, sans-serif;
  --texto: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* tamanho proporcional */
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
/* Tela deitada (computador e TV): a medida base é uma fatia da tela. Tela 16:9 sempre mostra o mesmo desenho. */
@media (min-aspect-ratio: 1/1) { html { font-size: calc(100vw / 80 * var(--escala, 1)); } }
@media (min-aspect-ratio: 16/9) { html { font-size: calc(100vh / 45 * var(--escala, 1)); } }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(var(--ceu-alto), var(--ceu-baixo) 70%) fixed;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.125rem;
  line-height: 1.4;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: .25rem solid #ff9f1c; outline-offset: .1875rem; }

/* ---------- placa e poste ---------- */
.pl { display: block; width: 100%; min-width: 0; height: 0; padding-top: calc(100% / var(--prop, 1)); position: relative; z-index: 1; }
.pl > svg, .pl > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 .25rem .1875rem rgba(20, 40, 60, .28)); }
.poste { position: relative; min-width: 0; flex: none; display: flex; flex-direction: column; align-items: center; padding-bottom: var(--haste, 3.5rem); }
.haste { position: absolute; left: 50%; top: 50%; bottom: 0; width: .625rem; margin-left: -0.3125rem; border-radius: 0 0 .1875rem .1875rem; background: linear-gradient(90deg, #77808a, #dfe4e8 45%, #868f99); }

/* ---------- barra de cima ---------- */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .875rem; padding: .625rem 1rem; background: var(--verde); box-shadow: inset 0 -0.25rem 0 rgba(255, 255, 255, .85), 0 .1875rem .625rem rgba(0, 0, 0, .18); }
.barra h1 { flex: 1; margin: 0; color: #fff; font-family: var(--placa); font-weight: 800; font-size: 2.125rem; font-size: clamp(1.375rem, 3.4vw, 2.125rem); letter-spacing: .02em; text-transform: uppercase; text-align: center; text-wrap: balance; }

/* ---------- botões ---------- */
.bt { min-height: 3.5rem; padding: .5rem 1.25rem; border: .1875rem solid var(--tinta); border-radius: 1rem; background: var(--papel); box-shadow: 0 .3125rem 0 var(--tinta); font-family: var(--placa); font-weight: 800; font-size: 1.125rem; letter-spacing: .01em; transition: transform .08s, box-shadow .08s; }
.bt:active { transform: translateY(.3125rem); box-shadow: 0 0 0 var(--tinta); }
.bt.verde { background: var(--verde); color: #fff; }
.bt.azul { background: var(--azul); color: #fff; }
.bt.vermelho { background: var(--verm); color: #fff; }
.bt.pequeno { min-height: 3rem; padding: .375rem .875rem; font-size: 1rem; box-shadow: 0 .25rem 0 var(--tinta); }
.bt.gigante { min-height: 5.25rem; padding: .625rem 2.75rem; font-size: 2.125rem; border-radius: 1.375rem; }
.bt[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.bt:disabled { opacity: .4; cursor: default; }

.redondo { flex: none; width: 3.625rem; height: 3.625rem; border: .1875rem solid var(--tinta); border-radius: 50%; background: var(--papel); box-shadow: 0 .25rem 0 var(--tinta); font-size: 1.625rem; line-height: 1; display: grid; place-items: center; padding: 0; transition: transform .08s, box-shadow .08s; }
.redondo:active { transform: translateY(.25rem); box-shadow: 0 0 0 var(--tinta); }
.redondo.mini { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; border-width: .125rem; box-shadow: 0 .1875rem 0 var(--tinta); }

.linha { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; margin: 0 0 .875rem; }
.rot { margin: .25rem 0 .5rem; font-family: var(--placa); font-weight: 800; font-size: 1rem; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .04em; }
.campo { flex: 1; min-width: 0; min-height: 3.5rem; padding: .5rem 1rem; border: .1875rem solid var(--tinta); border-radius: 1rem; background: #fff; font-size: 1.25rem; }
.campo.grande { width: 100%; font-family: var(--placa); font-weight: 800; font-size: 2rem; text-transform: uppercase; margin-bottom: .75rem; }
.dica { margin: 0; padding: 0 1.25rem; color: var(--tinta-fraca); text-align: center; }

/* ---------- abas ---------- */
.abas { display: flex; gap: .625rem; padding: 1rem 1rem .75rem; overflow-x: auto; scrollbar-width: thin; }
.aba { flex: none; min-height: 3.25rem; padding: .375rem 1.25rem; border: .1875rem solid var(--tinta); border-radius: 62.4375rem; background: var(--papel); font-family: var(--placa); font-weight: 800; font-size: 1.125rem; white-space: nowrap; }
.aba[aria-pressed="true"] { background: var(--faixa); box-shadow: inset 0 -0.25rem 0 rgba(0, 0, 0, .18); }

/* ---------- grade de placas ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 1rem; padding: .75rem 1.25rem 3rem; max-width: 87.5rem; margin: 0 auto; }
.grade.mini { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .625rem; padding: 0 0 .875rem; }
.cartao { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .875rem .625rem .625rem; border: 0; border-radius: 1.375rem; background: rgba(255, 255, 255, .82); box-shadow: 0 .1875rem 0 rgba(28, 38, 48, .12); transition: transform .12s, background .12s; }
.cartao:hover { background: #fff; transform: translateY(-0.1875rem); }
.cartao[aria-pressed="true"] { outline: .25rem solid var(--azul); }
.cartao-nome { font-family: var(--placa); font-weight: 800; font-size: .875rem; line-height: 1.15; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.grade.mini .cartao { padding: .5rem .375rem .375rem; border-radius: 1rem; background: #f1f6fa; gap: .25rem; }
.grade.mini .cartao-nome { font-size: .75rem; }
.figuras .cartao img { width: 100%; height: auto; object-fit: contain; background: #fff; border-radius: .625rem; }
.ico-seta { width: 100%; height: auto; }

.faixa-acoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; padding: .25rem 1rem .625rem; }
.vazio { margin: 1.5rem auto; max-width: 32.5rem; padding: 1.5rem; border-radius: 1.5rem; background: rgba(255, 255, 255, .8); text-align: center; font-size: 1.25rem; }
.vazio p { margin: .25rem 0; }

/* ---------- início ---------- */
.inicio { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(transparent 0, transparent calc(100% - 15.625rem), var(--grama) calc(100% - 15.625rem), var(--grama-escura)); overflow: hidden; }
.portico { display: flex; justify-content: center; padding: 0 1rem; position: relative; }
.portico::before, .portico::after { content: ''; position: absolute; top: 0; width: .75rem; height: 2.125rem; background: linear-gradient(90deg, #77808a, #dfe4e8 45%, #868f99); }
.portico::before { left: calc(50% - 18.75rem); left: calc(50% - min(32vw, 18.75rem)); }
.portico::after { right: calc(50% - 18.75rem); right: calc(50% - min(32vw, 18.75rem)); }
.portico-placa { margin-top: 1.875rem; padding: 1rem 3.5rem; padding: 1rem clamp(1.25rem, 5vw, 3.5rem); border-radius: 1.125rem; background: var(--verde); box-shadow: inset 0 0 0 .3125rem var(--verde), inset 0 0 0 .625rem #fff, 0 .5rem 0 rgba(0, 0, 0, .14); color: #fff; font-family: var(--placa); font-weight: 800; font-size: 4.5rem; font-size: clamp(1.875rem, 6.4vw, 4.5rem); letter-spacing: .02em; line-height: 1.1; text-align: center; }
.fila-inicio { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.125rem 2rem; gap: 1.125rem clamp(.5rem, 2vw, 2rem); padding: 2.125rem 1rem 0; }
.entrada { --haste: 6rem; width: 13.75rem; width: clamp(6.75rem, 11.4vw, 15rem); border: 0; background: none; padding-left: 0; padding-right: 0; }
.entrada .pl { transition: transform .16s; }
.entrada:hover .pl, .entrada:focus-visible .pl { transform: scale(1.07) rotate(-2deg); }
.rotulo { position: absolute; bottom: .875rem; z-index: 2; padding: .375rem .625rem; border: .1875rem solid var(--tinta); border-radius: .75rem; background: #fff; font-family: var(--placa); font-weight: 800; font-size: 1.375rem; font-size: clamp(.8125rem, 1.35vw, 1.5rem); line-height: 1.1; white-space: nowrap; }
.estrada { position: relative; height: 6.5rem; margin-top: 0; background: var(--asfalto); border-top: .375rem solid #c9ced4; }
.estrada::before, .dia-estrada::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: .5rem; margin-top: -0.25rem; background: repeating-linear-gradient(90deg, var(--faixa) 0, var(--faixa) 3.5rem, transparent 3.5rem, transparent 6.5rem); }
.carro-inicio { position: absolute; left: 8%; bottom: 1.25rem; width: 8.25rem; animation: passeio 26s linear infinite; }
.carro-inicio svg, .dia-carro svg { display: block; width: 100%; }
@keyframes passeio { from { left: -8.75rem; } to { left: 100%; } }

/* ---------- folhas por cima ---------- */
#sobre { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; display: grid; place-items: center; padding: .875rem; background: rgba(22, 44, 66, .62); }
.folha { position: relative; width: 62.5rem; width: min(62.5rem, 100%); max-height: calc(100vh - 1.75rem); overflow: auto; padding: 1.375rem; border-radius: 1.875rem; background: var(--papel); box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, .35); }
.folha-titulo { margin: .25rem 4.375rem .75rem .25rem; font-family: var(--placa); font-weight: 800; font-size: 1.75rem; }
.fechar { position: absolute; top: .875rem; right: .875rem; z-index: 3; }
.folha-sel .abas { padding: .25rem 0 .875rem; }

.det { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; }
.det-meio { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.det-poste { --haste: 2.75rem; width: 25rem; width: min(44vh, 62vw, 25rem); }
.det-nome { margin: .625rem 0 0; font-family: var(--placa); font-weight: 800; font-size: 2.875rem; font-size: clamp(1.625rem, 4.4vw, 2.875rem); line-height: 1.08; text-transform: uppercase; text-wrap: balance; }
.det-cod { margin: .375rem 0 0; padding: .125rem .875rem; border-radius: 62.4375rem; background: #e9eff4; font-family: var(--placa); font-weight: 800; font-size: 1rem; color: var(--tinta-fraca); }
.det-fala { margin: .625rem 0 0; font-size: 1.5rem; font-size: clamp(1.1875rem, 2.4vw, 1.5rem); max-width: 30ch; text-wrap: balance; }
.det-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.125rem; padding-bottom: .375rem; }

.imp-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.625rem, 1fr)); gap: .875rem; }
.imp-op { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 1.125rem .75rem; border: .1875rem solid var(--tinta); border-radius: 1.25rem; background: #f1f6fa; box-shadow: 0 .3125rem 0 var(--tinta); }
.imp-op:active { transform: translateY(.3125rem); box-shadow: none; }
.imp-op b { font-family: var(--placa); font-weight: 800; font-size: 1.375rem; }
.imp-op small { color: var(--tinta-fraca); font-size: .9375rem; text-align: center; }
.imp-ico { display: grid; gap: .25rem; width: 4.625rem; height: 6.25rem; padding: .5rem; border: .125rem solid var(--tinta); border-radius: .375rem; background: #fff; }
.imp-ico i { border-radius: 50%; background: var(--verm); }
.imp-ico.g4 { grid-template-columns: 1fr 1fr; }
.imp-ico.g9 { grid-template-columns: 1fr 1fr 1fr; }
.marca { display: flex; align-items: center; gap: .75rem; margin-top: 1.125rem; font-size: 1.1875rem; }
.marca input { width: 1.75rem; height: 1.75rem; accent-color: var(--verde); }

#aviso { position: fixed; left: 50%; bottom: 1.625rem; z-index: 60; transform: translate(-50%, 1.875rem); padding: .875rem 1.625rem; border-radius: 62.4375rem; background: var(--tinta); color: #fff; font-family: var(--placa); font-weight: 800; font-size: 1.1875rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#aviso.ativo { opacity: 1; transform: translate(-50%, 0); }

/* ---------- fábrica ---------- */
.fab { display: grid; grid-template-columns: minmax(17.5rem, 1fr) minmax(21.25rem, 1.15fr); gap: 1rem; padding: 1rem; max-width: 87.5rem; margin: 0 auto; align-items: start; }
.fab-palco { position: sticky; top: 5.875rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.25rem 1rem .875rem; border-radius: 1.75rem; background: linear-gradient(#d3ecfa 0, #d3ecfa 72%, var(--grama) 72%); box-shadow: inset 0 0 0 .1875rem rgba(255, 255, 255, .7); }
.fab-poste { --haste: 4rem; width: calc(46vh * var(--prop, 1)); max-width: 100%; }
#fab-pl { touch-action: none; }
#fab-pl .it { cursor: grab; }
#fab-pl .sel { fill: rgba(0, 163, 255, .08); stroke: #00a3ff; stroke-width: 4; stroke-dasharray: 12 8; pointer-events: none; }
.fab-item { width: 100%; min-height: 8rem; padding: .75rem; border-radius: 1.25rem; background: rgba(255, 255, 255, .92); }
.fab-dica { margin: .375rem .25rem; color: var(--tinta-fraca); text-align: center; }
.fab-ferr { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; }
.cores { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: .75rem; }
.cores.grandes { justify-content: flex-start; margin: 0 0 1rem; }
.cor { width: 2.875rem; height: 2.875rem; border: .1875rem solid var(--tinta); border-radius: 50%; background: var(--c); padding: 0; }
.cores.grandes .cor { width: 3.375rem; height: 3.375rem; }
.cor.arco { background: conic-gradient(#e33, #fc0, #3b3, #09f, #a3f, #e33); }
.cor[aria-pressed="true"] { box-shadow: 0 0 0 .25rem #fff, 0 0 0 .5rem var(--azul); }
.fab-painel { display: flex; flex-direction: column; border-radius: 1.75rem; background: var(--papel); box-shadow: 0 .25rem 0 rgba(28, 38, 48, .12); overflow: hidden; }
.fab-abas { flex-wrap: wrap; gap: .5rem; padding: .875rem .875rem .75rem; background: #e9f2f8; }
.fab-abas .aba { min-height: 3rem; padding: .25rem 1rem; font-size: 1rem; }
.fab-cont { padding: 1rem; min-height: 18.75rem; max-height: 58vh; overflow-y: auto; }
.fab-fim { display: flex; flex-wrap: wrap; gap: .625rem; padding: .875rem 1rem 1.125rem; border-top: .1875rem dashed #d5e0e8; }
.fab-fim .campo { flex: 1 1 100%; }
.emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: .375rem; margin-bottom: .875rem; }
.emoji { height: 3.5rem; border: 0; border-radius: .875rem; background: #f1f6fa; font-size: 1.875rem; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; padding: 0; }
.emoji:hover { background: #dbe9f3; }
.numeros .bt { min-width: 3.875rem; }
.credito { margin: .375rem 0 0; font-size: .8125rem; color: var(--tinta-fraca); }

/* ---------- meu dia ---------- */
.dia { display: flex; flex-direction: column; }
.dia-rol { overflow-x: auto; scroll-behavior: smooth; }
.dia-pista { --passo: 14.375rem; position: relative; display: flex; align-items: flex-end; width: calc(var(--n) * var(--passo) + 3.75rem); min-width: 100%; min-height: 32.5rem; min-height: min(64vh, 32.5rem); padding: 1.5rem 1.875rem 7.375rem; background: linear-gradient(transparent 0, transparent calc(100% - 13.125rem), var(--grama) calc(100% - 13.125rem), var(--grama-escura)); }
.dia-ponto { flex: 0 0 var(--passo); display: flex; flex-direction: column; align-items: center; position: relative; }
.dia-poste { --haste: 4rem; width: 9.375rem; border: 0; background: none; padding-left: 0; padding-right: 0; transition: width .3s; }
.dia-ponto.atual .dia-poste { width: 12.75rem; }
.dia-ponto.atual .pl::before { content: ''; position: absolute; top: -0.75rem; right: -0.75rem; bottom: -0.75rem; left: -0.75rem; border-radius: 1.75rem; background: rgba(255, 210, 31, .5); z-index: -1; }
.dia-ponto.feito .pl > * { filter: saturate(.3) brightness(1.12); }
.visto { position: absolute; top: -0.5rem; right: -0.375rem; z-index: 3; display: grid; place-items: center; width: 3.375rem; height: 3.375rem; border: .25rem solid #fff; border-radius: 50%; background: var(--verde); color: #fff; font-size: 1.875rem; }
.dia-ponto.chegada:not(.atual) .pl > * { filter: saturate(.3) brightness(1.12); }
.dia-arr { position: absolute; bottom: -0.25rem; z-index: 4; display: flex; gap: .375rem; }
.dia-estrada { position: absolute; left: 0; right: 0; bottom: 0; height: 6.5rem; background: var(--asfalto); border-top: .375rem solid #c9ced4; }
.dia-carro { position: absolute; bottom: 1.25rem; width: 7.75rem; left: calc(1.875rem + var(--i) * var(--passo) + var(--passo) / 2 - 3.875rem); transition: left 1s ease-in-out; }
.dia-botoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; padding: 1.125rem 1rem 1.875rem; }

/* ---------- jogo ---------- */
.jogo { display: flex; flex-direction: column; align-items: center; gap: .875rem; padding: .875rem 1rem 2.5rem; }
.jogo-cfg { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; }
.jogo-cfg .linha { margin: 0 0 .375rem; }
.jogo-pergunta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem 1.125rem; max-width: 56.25rem; padding: 1rem 1.875rem; border: 0; border-radius: 1.375rem; background: var(--verde); box-shadow: inset 0 0 0 .3125rem var(--verde), inset 0 0 0 .5625rem #fff, 0 .375rem 0 rgba(0, 0, 0, .15); color: #fff; font-family: var(--placa); font-weight: 800; }
.cade { font-size: 1.875rem; font-size: clamp(1.25rem, 3vw, 1.875rem); opacity: .85; }
.alvo { font-size: 3.875rem; font-size: clamp(1.875rem, 6vw, 3.875rem); line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.ouvir { font-size: 2rem; }
.jogo-ops { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.25rem 4.375rem; gap: 1.25rem clamp(1.25rem, 5vw, 4.375rem); margin-top: .625rem; }
.jogo-op { --haste: 3.75rem; width: 18.75rem; width: clamp(9.375rem, 26vw, 18.75rem); border: 0; background: none; padding-left: 0; padding-right: 0; transition: opacity .4s, transform .3s; }
.jogo-ops.n4 .jogo-op { width: 15rem; width: clamp(8.125rem, 20vw, 15rem); }
.jogo-op.nao { opacity: .22; }
.jogo-op.certo { transform: scale(1.1); }
.jogo-op.certo .pl::before { content: ''; position: absolute; top: -0.875rem; right: -0.875rem; bottom: -0.875rem; left: -0.875rem; border-radius: 1.875rem; background: rgba(60, 200, 90, .45); z-index: -1; }
.jogo-estrelas { min-height: 2.5rem; margin: 0; font-size: 1.875rem; letter-spacing: .25rem; }

/* ---------- telas estreitas ---------- */
@media (max-width: 860px) and (max-aspect-ratio: 1/1) {
  .fab { grid-template-columns: 1fr; }
  .fab-palco { position: static; }
  .fab-poste { width: calc(38vh * var(--prop, 1)); }
  .fab-cont { max-height: none; }
  .det { grid-template-columns: 1fr 1fr; }
  .det-meio { grid-column: 1 / -1; grid-row: 1; }
  .det > .seta-nav:first-of-type { justify-self: end; }
  .folha { padding: 1rem; }
}
@media (max-width: 560px) and (max-aspect-ratio: 1/1) {
  body { font-size: 1.0625rem; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(7.75rem, 1fr)); gap: .75rem; padding: .625rem .75rem 2.5rem; }
  .entrada { width: 40vw; --haste: 5.125rem; }
  .dia-pista { --passo: 11.875rem; }
  .dia-poste { width: 7.75rem; }
  .dia-ponto.atual .dia-poste { width: 10.375rem; }
  .redondo { width: 3.25rem; height: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .carro-inicio { left: 8%; }
}

/* ---------- impressão ---------- */
#impressao { display: none; }
@page { margin: 12mm; }
@media print {
  body { background: #fff; }
  #app, #sobre, #aviso { display: none !important; }
  #impressao { display: grid; gap: 8mm; }
  #impressao.g1 { grid-template-columns: 1fr; }
  #impressao.g4 { grid-template-columns: 1fr 1fr; }
  #impressao.g9 { grid-template-columns: 1fr 1fr 1fr; gap: 5mm; }
  .imp-item { display: flex; flex-direction: column; align-items: center; justify-content: center; break-inside: avoid; }
  .g1 .imp-item { height: 268mm; break-after: page; }
  .g1 .imp-item:last-child { break-after: auto; }
  .g1 .pl { width: 180mm; height: 220mm; }
  .g4 .pl { width: 86mm; height: 110mm; }
  .g9 .pl { width: 56mm; height: 72mm; }
  #impressao .pl { padding-top: 0; }
  #impressao .pl > * { filter: none; }
  .imp-nome { margin-top: 3mm; font-family: var(--placa); font-weight: 800; text-transform: uppercase; text-align: center; color: #000; }
  .g1 .imp-nome { font-size: 30pt; }
  .g4 .imp-nome { font-size: 16pt; }
  .g9 .imp-nome { font-size: 11pt; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.so-placa .cartao-nome { display: none; }
.so-placa { padding-bottom: .875rem; }

/* ---------- letras ---------- */
.letra-linha { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .875rem 3rem; gap: .875rem clamp(1rem, 4vw, 3rem); }
.letra-poste { --haste: 2.75rem; width: 17.5rem; width: min(34vh, 44vw, 17.5rem); border: 0; background: none; padding-left: 0; padding-right: 0; }
.letra-poste .pl { transform-origin: 50% 0; animation: balanca 1.3s ease-out; }
.letra-palavras { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.letra-palavra { width: 10.625rem; width: min(24vh, 26vw, 10.625rem); padding: 0; border: 0; background: none; animation: chega .45s ease-out both; animation-delay: calc(var(--k) * .18s + .35s); }
.letra-frase .fl, .letra-frase .ini { color: var(--verm); }
.pulo .pl { animation: pulo .5s ease-out; }
@keyframes balanca { 0% { transform: rotate(-16deg); } 30% { transform: rotate(10deg); } 55% { transform: rotate(-6deg); } 78% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes chega { from { opacity: 0; transform: translateY(1.5rem) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pulo { 0% { transform: scale(1); } 40% { transform: scale(1.14) rotate(-3deg); } 70% { transform: scale(.97) rotate(2deg); } 100% { transform: scale(1); } }
@media (max-width: 560px) and (max-aspect-ratio: 1/1) { .entrada { width: 29vw; } .rotulo { font-size: .75rem; padding: .25rem .375rem; } }

/* ---------- controle remoto e teclado ---------- */
.teclas :focus { outline: .4375rem solid #ff9f1c; outline-offset: .3125rem; border-radius: .875rem; }
.teclas .entrada:focus .pl, .teclas .jogo-op:focus .pl, .teclas .dia-poste:focus .pl { transform: scale(1.08); }

/* Navegador sem espaçamento automático entre botões (TV mais antiga): margem no lugar do gap */
@supports not (aspect-ratio: 1) {
  button:focus, input:focus { outline: .3125rem solid #ff9f1c; outline-offset: .1875rem; }
  .linha > *, .abas > *, .faixa-acoes > *, .det-acoes > *, .fab-ferr > *, .cores > *, .fab-fim > *, .dia-botoes > *, .jogo-cfg > *, .jogo-pergunta > *, .letra-palavras > *, .toca-ctrl > *, .dia-arr > * { margin: .3125rem; }
  .barra > * + * { margin-left: .875rem; }
  .fila-inicio > *, .jogo-ops > *, .letra-linha > * { margin: .5rem .875rem; }
  .cartao > * + *, .imp-op > * + *, .fab-palco > * + *, .jogo > * + * { margin-top: .5rem; }
  .marca > * + * { margin-left: .75rem; }
}

/* ---------- mover na fábrica ---------- */
.fab-mover { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .625rem; margin-top: .75rem; }

/* ---------- sessão ---------- */
.sessao { max-width: 68.75rem; margin: 0 auto; padding: 1.125rem 1.25rem 2.5rem; }
.sessao .linha { margin-bottom: 1.125rem; }
.sessao-resumo { margin: .25rem 0 1.125rem; font-size: 1.25rem; color: var(--tinta-fraca); }
.sessao-fim { display: flex; justify-content: center; }

body.tocando .barra { display: none; }
.toca { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: linear-gradient(transparent 0, transparent calc(100% - 18.75rem), var(--grama) calc(100% - 18.75rem), var(--grama-escura)); overflow: hidden; }
.toca-palco { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; padding-top: 3vh; }
.toca-poste { --haste: 7vh; width: calc(50vh * var(--prop, 1)); max-width: 86vw; }
.toca-poste .pl { animation: chega .5s ease-out both; }
.toca-nome { margin: 1.5vh 1rem 0; padding: .625rem 2.125rem; border-radius: 1.125rem; background: #fff; border: .25rem solid var(--tinta); font-family: var(--placa); font-weight: 800; font-size: 7vh; line-height: 1.1; text-transform: uppercase; text-align: center; }
.toca-fala { min-height: 4.4vh; margin: 1vh 1rem 0; padding: .125rem 1rem; border-radius: .75rem; background: rgba(255, 255, 255, .85); font-size: 3.4vh; text-align: center; }
.toca-fala:empty { background: none; }
.toca-tempo { width: 60vw; height: .625rem; margin-top: 1.2vh; border-radius: .375rem; background: rgba(28, 38, 48, .25); overflow: hidden; }
.toca-tempo i { display: block; height: 100%; width: 100%; background: var(--faixa); transform-origin: 0 50%; animation: tempo linear both; }
.pausado .toca-tempo i { animation-play-state: paused; }
@keyframes tempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.toca-ctrl { display: flex; align-items: center; justify-content: center; gap: .875rem; margin: 1.2vh 0; }
.toca-conta { min-width: 12em; padding: .375rem 1rem; border-radius: 62.4375rem; background: rgba(255, 255, 255, .85); font-family: var(--placa); font-weight: 800; font-size: 1.125rem; text-align: center; }
.toca-estrada { position: relative; align-self: stretch; height: 6rem; background: var(--asfalto); border-top: .375rem solid #c9ced4; }
.toca-estrada::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: .5rem; margin-top: -0.25rem; background: repeating-linear-gradient(90deg, var(--faixa) 0, var(--faixa) 3.5rem, transparent 3.5rem, transparent 6.5rem); }
.toca-carro { position: absolute; bottom: 1rem; width: 7.75rem; left: calc((100% - 7.75rem) * var(--p, 0)); transition: left 1s ease-in-out; }
.toca-carro svg { display: block; width: 100%; }

/* ---------- sobre ---------- */
.bt-sobre { position: absolute; top: .75rem; right: .75rem; z-index: 5; width: 3rem; height: 3rem; font-size: 1.25rem; font-family: var(--placa); font-weight: 800; }
.sobre p { margin: 0 0 .75rem; }
.sobre dl { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; margin: 0 0 .875rem; padding: .875rem; border-radius: 1rem; background: #f1f6fa; font-size: 1rem; }
.sobre dt { font-family: var(--placa); font-weight: 800; }
.sobre dd { margin: 0; word-break: break-word; }
.sobre a { color: var(--azul); font-weight: 600; }