/* Tela cheia ocupa a janela; cada jogo continua dono da projeção e do canvas.
   Contrato: html[data-arcada-jogo].arcada-tela; modos native / viewport via JS. */
html[data-arcada-jogo]{
  --tela-alto:100vh;
  --tela-topo:env(safe-area-inset-top,0px);
  --tela-base:env(safe-area-inset-bottom,0px);
  --tela-esquerda:env(safe-area-inset-left,0px);
  --tela-direita:env(safe-area-inset-right,0px);
  --tela-cor:#48e9d3;--tela-par:#b494ff;--tela-fundo:#18364d;
}
@supports(height:100dvh){html[data-arcada-jogo]{--tela-alto:100dvh}}
html[data-arcada-jogo="serpente"]{--tela-cor:#76f092;--tela-par:#49ddf3;--tela-fundo:#144b47}
html[data-arcada-jogo="bloco"]{--tela-cor:#c5a0ff;--tela-par:#ff7cc4;--tela-fundo:#482476}
html[data-arcada-jogo="passaro"]{--tela-cor:#ffd464;--tela-par:#66e9ec;--tela-fundo:#174c72}
html[data-arcada-jogo="quebra"]{--tela-cor:#65e6ff;--tela-par:#ff91c5;--tela-fundo:#3e286f}
html[data-arcada-jogo="horda"]{--tela-cor:#c6ee6c;--tela-par:#f4b264;--tela-fundo:#344e35}
html[data-arcada-jogo="fazenda"]{--tela-cor:#b7f370;--tela-par:#ffd17c;--tela-fundo:#216d54}
html[data-arcada-jogo="brumas"]{--tela-cor:#fff0aa;--tela-par:#99e1d5;--tela-fundo:#396b6b}
html[data-arcada-jogo="turbo"]{--tela-cor:#5ef1ed;--tela-par:#ff7dca;--tela-fundo:#203f68}

/* Controle independente do canvas, também visível antes de entrar no modo. */
html[data-arcada-jogo] .arcada-tela-control{
  position:fixed;z-index:80;top:calc(6px + var(--tela-topo));
  right:calc(8px + var(--tela-direita));width:44px;height:44px;
}
html[data-arcada-jogo] .arcada-tela-toggle{
  display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;
  min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--tela-cor);
  border-radius:12px;background:var(--tela-fundo);color:#fff;font:700 23px/1 system-ui;
  cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #0005;
}
html[data-arcada-jogo] .arcada-tela-toggle:hover{background:color-mix(in srgb,var(--tela-fundo),#fff 13%)}
html[data-arcada-jogo] .arcada-tela-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
html[data-arcada-jogo] .arcada-tela-toggle[aria-pressed="true"]{border-color:#fff;color:var(--tela-cor)}
html[data-arcada-jogo] .arcada-tela-status{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
html[data-arcada-jogo] .cabinet>.top{padding-inline-end:48px;min-height:44px;flex-shrink:0}
html[data-arcada-jogo] .cabinet>.top .toggles{flex-wrap:wrap;justify-content:flex-end;gap:5px}
html[data-arcada-jogo] .cabinet>.top .tbtn{min-width:44px;min-height:44px}

/* Cores de interface são locais. Cosméticos/temas monocromáticos e pixels do
   jogo não recebem filtros, nem há animação nova de brilho ou de saturação. */
html[data-arcada-jogo] body:not(.nokia):not(.bright) .cabinet>.top{
  border-bottom:2px solid var(--tela-cor);padding-bottom:6px;
}
html[data-arcada-jogo] body:not(.nokia):not(.bright) .cabinet>.hud{
  background:linear-gradient(110deg,var(--tela-fundo),#101828);
  border:1px solid var(--tela-cor);border-radius:10px;padding:7px 10px;
}
html[data-arcada-jogo] body:not(.nokia):not(.bright) .ov .btn.primary{
  background:linear-gradient(120deg,var(--tela-cor),var(--tela-par));
  border-color:var(--tela-cor);color:#102130;text-shadow:none;box-shadow:0 3px 0 #0005;
}
html[data-arcada-jogo] body:not(.nokia):not(.bright) .ov .mode.sel{
  background:linear-gradient(130deg,var(--tela-fundo),var(--panel,#171d30));
}
html[data-arcada-jogo] body:not(.nokia):not(.bright) .cabinet>.top .brand{color:var(--tela-cor)}
html[data-arcada-jogo] body:not(.nokia):not(.bright) .ov .tag{color:#ccdce8}
html[data-arcada-jogo] body:not(.nokia):not(.bright) .screen::after{opacity:.55}

html.arcada-tela{height:100%;min-height:100%;background:var(--bg,#101828)}
html.arcada-tela body{margin:0;min-height:100%;height:auto}
html.arcada-tela .cabinet{
  box-sizing:border-box;width:100%;max-width:none;margin:0;
  height:var(--tela-alto);min-height:0;gap:6px;
  padding:calc(4px + var(--tela-topo)) calc(6px + var(--tela-direita)) calc(4px + var(--tela-base)) calc(6px + var(--tela-esquerda));
}
html.arcada-tela .cabinet>.top{gap:8px}
html.arcada-tela .cabinet>.top .brand small{display:none}
html.arcada-tela .cabinet>.foot{flex:none;font-size:10px;gap:5px;margin:0}
html.arcada-tela .cabinet>.foot .kb{display:none}
html.arcada-tela .screen{min-width:0;min-height:0;border-radius:8px;box-shadow:none}
html.arcada-tela .ov{
  justify-content:flex-start;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scroll-padding:16px;min-width:0;
}
html.arcada-tela .ov>*{flex-shrink:0;max-width:100%}
html.arcada-tela .ov>*:first-child{margin-top:auto}
html.arcada-tela .ov>*:last-child{margin-bottom:auto}
html.arcada-tela .ov.menu>*:first-child{margin-top:0}
html.arcada-tela .ak-ov,html.arcada-tela .ae-panel{
  max-height:calc(var(--tela-alto) - var(--tela-topo) - var(--tela-base) - 16px);
  overflow:auto;overscroll-behavior:contain;
}

/* Os tabuleiros mantêm sua proporção. A projeção interna também centraliza a
   área lógica; uma tela larga não muda física, alcance, nem número de células. */
html.arcada-tela[data-arcada-jogo="serpente"] .screen{
  width:min(100%,calc((var(--tela-alto) - 188px - var(--tela-topo) - var(--tela-base)) * 1.4));
  aspect-ratio:1.4;flex:0 1 auto;max-height:none;margin:auto;
}
html.arcada-tela[data-arcada-jogo="serpente"] .hud{flex:none;gap:7px}
html.arcada-tela[data-arcada-jogo="serpente"] .combo{min-width:0}
html.arcada-tela[data-arcada-jogo="serpente"] .val{font-size:25px}
html.arcada-tela[data-arcada-jogo="serpente"] .dpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,44px);gap:4px;margin:0 auto}
html.arcada-tela[data-arcada-jogo="bloco"] .arena{
  width:100%;max-width:none;flex:1;min-height:0;
  grid-template-columns:minmax(84px,132px) minmax(0,calc((var(--tela-alto) - 186px - var(--tela-topo) - var(--tela-base)) / 2)) minmax(84px,132px);
  gap:10px;align-items:start;
}
html.arcada-tela[data-arcada-jogo="bloco"] .screen{width:100%;height:auto;aspect-ratio:1/2;max-height:none;min-height:0}
html.arcada-tela[data-arcada-jogo="bloco"] .pad{flex:none;margin:0 auto;gap:4px}
html.arcada-tela[data-arcada-jogo="bloco"] .pad button{height:44px;min-height:44px}
html.arcada-tela[data-arcada-jogo="bloco"] .side{min-width:0}
html.arcada-tela[data-arcada-jogo="passaro"] .screen,
html.arcada-tela[data-arcada-jogo="quebra"] .screen{width:100%;flex:1;max-height:none;margin:0 auto}
html.arcada-tela[data-arcada-jogo="passaro"] .screen{max-width:calc((var(--tela-alto) - 84px - var(--tela-topo) - var(--tela-base)) * .625)}
html.arcada-tela[data-arcada-jogo="quebra"] .screen{max-width:calc((var(--tela-alto) - 150px - var(--tela-topo) - var(--tela-base)) * .75)}
html.arcada-tela[data-arcada-jogo="quebra"] .cabinet>.hud{flex:none;max-width:800px;width:100%;align-self:center}

/* Câmeras livres: aproveitar a largura não precisa esticar sua imagem. */
html.arcada-tela[data-arcada-jogo="fazenda"] .screen{flex:1;width:100%;max-height:none}
html.arcada-tela[data-arcada-jogo="fazenda"] .field{min-height:0}
html.arcada-tela[data-arcada-jogo="fazenda"] .dock{flex:none}
html.arcada-tela[data-arcada-jogo="fazenda"] .seeds{max-height:90px;overflow:auto}
html[data-arcada-jogo="horda"] #btnPause{top:calc(58px + var(--tela-topo));right:calc(10px + var(--tela-direita));min-width:44px;min-height:44px}
html[data-arcada-jogo="horda"] .hud.top>.row{padding-inline-end:48px}
html.arcada-tela[data-arcada-jogo="horda"] #stage,
html.arcada-tela[data-arcada-jogo="turbo"] #stage{position:fixed;inset:0;width:100%;height:100%}
html[data-arcada-jogo="turbo"] .hud .tr,
html[data-arcada-jogo="turbo"] #cores{right:calc(64px + var(--tela-direita))}
html.arcada-tela[data-arcada-jogo="turbo"] .ov,
html.arcada-tela[data-arcada-jogo="horda"] .ov{
  padding-top:calc(58px + var(--tela-topo));padding-bottom:calc(16px + var(--tela-base));
  padding-left:max(12px,var(--tela-esquerda));padding-right:max(12px,var(--tela-direita));
}
html.arcada-tela[data-arcada-jogo="turbo"] #ovStart>.row{position:static}
html.arcada-tela[data-arcada-jogo="horda"] .hud{padding-left:max(12px,var(--tela-esquerda));padding-right:max(12px,var(--tela-direita))}
html.arcada-tela[data-arcada-jogo="horda"] .mbtn{right:calc(12px + var(--tela-direita))}
html.arcada-tela[data-arcada-jogo="turbo"] .hud .tl,
html.arcada-tela[data-arcada-jogo="turbo"] .hud .bl{left:calc(14px + var(--tela-esquerda))}
html.arcada-tela[data-arcada-jogo="turbo"] .hud .br{right:calc(14px + var(--tela-direita))}
html.arcada-tela[data-arcada-jogo="turbo"] #tL,
html.arcada-tela[data-arcada-jogo="turbo"] #tDrift{left:calc(16px + var(--tela-esquerda))}
html.arcada-tela[data-arcada-jogo="turbo"] #tR{left:calc(104px + var(--tela-esquerda))}
html.arcada-tela[data-arcada-jogo="turbo"] #tGas,
html.arcada-tela[data-arcada-jogo="turbo"] #tNitro{right:calc(16px + var(--tela-direita))}
html.arcada-tela[data-arcada-jogo="turbo"] #tBrake{right:calc(104px + var(--tela-direita))}

/* Brumas contém vila e console DOM: preserva rolagem da página e do diálogo.
   Em telefone os dois painéis continuam sequenciais, não reduzidos até ilegíveis. */
html[data-arcada-jogo="brumas"] .topbar{padding-right:calc(62px + var(--tela-direita))}
html.arcada-tela[data-arcada-jogo="brumas"] body{overflow-y:auto;padding:var(--tela-topo) var(--tela-direita) var(--tela-base) var(--tela-esquerda)}
html.arcada-tela[data-arcada-jogo="brumas"] .topbar{max-width:none;height:60px}
html.arcada-tela[data-arcada-jogo="brumas"] #game{width:calc(100% - 12px);max-width:none;border-radius:14px}
html.arcada-tela[data-arcada-jogo="brumas"] .bottom-nav{max-width:none;padding-bottom:max(7px,var(--tela-base))}
html.arcada-tela[data-arcada-jogo="brumas"] dialog{max-height:calc(var(--tela-alto) - var(--tela-topo) - var(--tela-base) - 20px);overflow:auto}
@media(min-width:761px){
  html.arcada-tela[data-arcada-jogo="brumas"] #game{
    height:calc(var(--tela-alto) - 142px - var(--tela-topo) - var(--tela-base));min-height:490px;
    grid-template-columns:minmax(0,1.9fr) minmax(300px,.9fr);grid-template-rows:56px minmax(280px,1fr) minmax(100px,auto);
  }
  html.arcada-tela[data-arcada-jogo="brumas"] .village{height:100%;min-height:0}
  html.arcada-tela[data-arcada-jogo="brumas"] .control{overflow-y:auto;justify-content:flex-start;gap:12px}
}
@media(max-width:760px){
  html[data-arcada-jogo="brumas"] .topbar{grid-template-columns:55px minmax(0,1fr) auto;gap:5px}
  html[data-arcada-jogo="brumas"] .wordmark{font-size:20px;overflow-wrap:anywhere}
  html[data-arcada-jogo="brumas"] .wordmark small{display:none}
  html[data-arcada-jogo="brumas"] .quality-setting select{max-width:60px}
  html.arcada-tela[data-arcada-jogo="brumas"] .village{height:clamp(350px,52dvh,620px);min-height:350px}
  html.arcada-tela[data-arcada-jogo="brumas"] .build-dock{min-height:100px}
}
@media(max-width:640px){
  html[data-arcada-jogo] .cabinet>.top .brand{font-size:13px;letter-spacing:0}
  html[data-arcada-jogo] .cabinet>.top .cores{padding:5px;font-size:10px}
  html[data-arcada-jogo] .cabinet>.top .tbtn{padding:6px;font-size:10px;letter-spacing:.03em}
  html.arcada-tela .cabinet{gap:4px}
  html.arcada-tela[data-arcada-jogo="bloco"] .arena{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:4px;align-items:start}
  html.arcada-tela[data-arcada-jogo="bloco"] .screen{
    order:3;align-self:stretch;justify-self:center;width:auto;height:100%;
    max-width:100%;max-height:100%;min-height:0;aspect-ratio:1/2;margin:0;
  }
  html.arcada-tela[data-arcada-jogo="bloco"] .side{flex-direction:row;gap:4px}
  html.arcada-tela[data-arcada-jogo="bloco"] .side .box{padding:4px}
  html.arcada-tela[data-arcada-jogo="bloco"] .stat .v{font-size:16px}
  html.arcada-tela[data-arcada-jogo="bloco"] .stat .s{font-size:9px}
  html.arcada-tela[data-arcada-jogo="bloco"] .box .lbl{font-size:8px;margin-bottom:2px}
}
@media(pointer:coarse){
  html.arcada-tela[data-arcada-jogo="serpente"] .screen{width:min(100%,calc((var(--tela-alto) - 330px - var(--tela-topo) - var(--tela-base)) * 1.4))}
}
/* A Serpente tem projeção retrato própria. Nunca achatar seu campo rotacionado. */
html.arcada-tela[data-arcada-jogo="serpente"] body.snake-playing .screen{
  width:100%;max-width:none;aspect-ratio:auto;flex:1;min-height:0;margin:0;
}
@media(max-height:600px) and (orientation:landscape){
  html.arcada-tela[data-arcada-jogo="serpente"] .cabinet{
    display:grid;grid-template-columns:minmax(0,1fr) 144px;
    grid-template-rows:44px auto minmax(0,1fr) auto;column-gap:8px;row-gap:4px;
  }
  html.arcada-tela[data-arcada-jogo="serpente"] .cabinet>.top{grid-column:1/-1;grid-row:1}
  html.arcada-tela[data-arcada-jogo="serpente"] .cabinet>.hud{grid-column:1;grid-row:2;padding:3px 6px}
  html.arcada-tela[data-arcada-jogo="serpente"] .snake-notices{grid-column:2;grid-row:2;max-height:70px;overflow:hidden}
  html.arcada-tela[data-arcada-jogo="serpente"] .snake-tools{grid-column:1;grid-row:4}
  html.arcada-tela[data-arcada-jogo="serpente"] body .screen{
    grid-column:1;grid-row:3;align-self:stretch;justify-self:stretch;
    width:100%;height:100%;aspect-ratio:auto;margin:0;min-height:0;
  }
  html.arcada-tela[data-arcada-jogo="serpente"] #dpad{
    display:grid!important;grid-column:2;grid-row:3;align-self:center;
    grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px;margin:0;
  }
  html.arcada-tela[data-arcada-jogo="serpente"] #dpad button{width:44px;height:44px;min-height:44px}
  html.arcada-tela[data-arcada-jogo="serpente"] #dpad [data-d="up"]{grid-column:2;grid-row:1}
  html.arcada-tela[data-arcada-jogo="serpente"] #dpad [data-d="left"]{grid-column:1;grid-row:2}
  html.arcada-tela[data-arcada-jogo="serpente"] #dpad [data-d="right"]{grid-column:3;grid-row:2}
  html.arcada-tela[data-arcada-jogo="serpente"] #dpad [data-d="down"]{grid-column:2;grid-row:3}
  html.arcada-tela[data-arcada-jogo="serpente"] #dpad .c,
  html.arcada-tela[data-arcada-jogo="serpente"] .foot{display:none}
}
@media(max-height:520px) and (orientation:landscape){
  html.arcada-tela .cabinet>.top{min-height:44px}
  html.arcada-tela .cabinet>.foot{display:none}
  html.arcada-tela[data-arcada-jogo="fazenda"] .dock{gap:3px;padding:3px}
  html.arcada-tela[data-arcada-jogo="fazenda"] #gardenArea{display:none}
  html.arcada-tela[data-arcada-jogo="fazenda"] .hud{padding:5px}
  html.arcada-tela[data-arcada-jogo="fazenda"] .hud .sub{display:none}
  html.arcada-tela[data-arcada-jogo="fazenda"] .acts button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){html[data-arcada-jogo] .arcada-tela-toggle{transition:none}}


/* ============================================================================
   PROPORÇÃO NO MODO JANELA — 10/9/2026
   Medidas, causas e invariância em auditoria/PROPORCAO-2026-09-10.md.

   O modo tela cheia (html.arcada-tela) já aproveitava a janela, mas só depois de
   clicar no botão. Quem abre o jogo e joga vê o modo normal, e era ele que estava
   pequeno: na janela do dono (1366x577) o tabuleiro do Bloco ocupava 10 % da tela
   e a Serpente 19 %. Tudo aqui é `:not(.arcada-tela)`, então o modo tela cheia,
   já publicado e testado, continua exatamente como estava.

   O diagnóstico que mudou a correção: o gargalo NÃO era a largura máxima do
   gabinete. Era a ALTURA. Medido na Serpente em partida, o cromo (cabeçalho, HUD,
   avisos, ferramentas, teclado virtual e rodapé) somava 490 px numa janela de
   577 — 85 % da altura. O jogo transbordava e a página rolava. Dois dos itens não
   pagavam o que custavam: o teclado virtual (120 px) ficava ABAIXO da dobra, onde
   o jogador nem o via, e o HUD ocupava altura enquanto sobrava espaço nas laterais.

   Daí as duas ideias. (1) Em janela larga e baixa, HUD e ferramentas saem de cima
   do jogo e vão para colunas laterais — a tela do dono é 2,37:1 e a Serpente é
   1,4:1, então o que sobra é largura, não altura. (2) O teclado virtual só aparece
   onde é usado (ponteiro grosso); no PC o rodapé já ensina as teclas.

   Nada disso muda regra de jogo: cada arcade desenha com
   `Math.min(largura/mundo, altura/mundo)` e centraliza, com o mundo lógico fixo
   em constantes do JS (serpente 28x20, bloco 10x20, pássaro 400x640, quebra
   480x640). Uma área maior só aumenta a escala de cada casa. */

/* ---- 1. O gabinete cabe na janela; menus longos rolam por dentro ---- */
html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet,
html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet{
  height:var(--tela-alto);min-height:0;box-sizing:border-box;
}
html[data-arcada-jogo="serpente"]:not(.arcada-tela) .ov,
html[data-arcada-jogo="bloco"]:not(.arcada-tela) .ov,
html[data-arcada-jogo="passaro"]:not(.arcada-tela) .ov,
html[data-arcada-jogo="quebra"]:not(.arcada-tela) .ov{
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0;
}

/* ---- 2. Cromo compacto: cada pixel devolvido vira área de jogo ---- */
html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet,
html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet,
html[data-arcada-jogo="passaro"]:not(.arcada-tela) .cabinet,
html[data-arcada-jogo="fazenda"]:not(.arcada-tela) .cabinet{
  padding-top:6px;padding-bottom:6px;gap:6px;
}
html[data-arcada-jogo="serpente"]:not(.arcada-tela) .foot,
html[data-arcada-jogo="quebra"]:not(.arcada-tela) .foot,
html[data-arcada-jogo="passaro"]:not(.arcada-tela) .foot,
html[data-arcada-jogo="fazenda"]:not(.arcada-tela) .foot{
  font-size:10px;line-height:1.35;margin:0;
}
/* O teclado virtual só onde é usado. No PC ele ficava abaixo da dobra, custando
   120 px de altura sem que ninguém o visse; as teclas estão escritas no rodapé. */
@media(pointer:fine){
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .dpad,
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .pad{display:none}
}

/* ---- 3. Janela larga: HUD e ferramentas para as laterais ----
   Só onde há largura sobrando de verdade. Abaixo de 900 px, ou num aparelho de
   toque (que precisa dos controles na tela), o empilhamento normal continua. */
@media(min-width:900px) and (pointer:fine){
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet{
    display:grid;max-width:min(98vw,1600px);padding-left:14px;padding-right:14px;
    gap:6px 12px;
    grid-template-columns:minmax(130px,190px) minmax(0,1fr) minmax(130px,190px);
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.top{grid-column:1/-1;grid-row:1}
  /* O .hud e um grid horizontal; na lateral ele vira uma coluna so. */
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.hud{
    grid-column:1;grid-row:2;align-self:start;
    grid-template-columns:minmax(0,1fr);grid-auto-flow:row;
    justify-items:start;text-align:left;gap:10px;width:100%;
  }
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.hud>*{
    width:100%;min-width:0;text-align:left;
  }
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.snake-notices{
    grid-column:3;grid-row:2;align-self:start;max-height:60%;overflow:auto;
  }
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.snake-tools{grid-column:3;grid-row:2;align-self:end}
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.foot{grid-column:1/-1;grid-row:3}
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.screen{
    grid-column:2;grid-row:2;height:100%;width:auto;max-width:100%;
    aspect-ratio:1.4;justify-self:center;margin:0;
  }

  /* O Quebra tem o mesmo formato de problema: HUD empilhado (71 px) enquanto
     sobra largura. O tabuleiro é retrato (480x640), então ganha na altura. */
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet{
    display:grid;max-width:min(98vw,1400px);padding-left:14px;padding-right:14px;
    gap:6px 12px;
    grid-template-columns:minmax(150px,230px) minmax(0,1fr) minmax(150px,230px);
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.top{grid-column:1/-1;grid-row:1}
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.hud{
    grid-column:1;grid-row:2;align-self:start;max-width:none;width:100%;
    grid-template-columns:minmax(0,1fr);grid-auto-flow:row;
    justify-items:start;text-align:left;gap:10px;
  }
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.hud>*{
    width:100%;min-width:0;text-align:left;
  }
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.foot{grid-column:1/-1;grid-row:3}
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.screen{
    grid-column:2;grid-row:2;height:100%;width:auto;max-width:100%;
    min-width:min(100%,460px);
    aspect-ratio:480/640;justify-self:center;margin:0;flex:none;
  }

  /* O Pássaro só tem cabeçalho e rodapé: nada a mandar para a lateral. O ganho
     vem do cromo compacto acima; aqui a área fica com a proporção do mundo
     (400x640), o que tira a faixa vazia que sobrava dos lados do canvas. */
  html[data-arcada-jogo="passaro"]:not(.arcada-tela) .cabinet{max-width:min(98vw,1100px)}
  html[data-arcada-jogo="passaro"]:not(.arcada-tela) .screen{
    flex:1 1 0;min-height:0;height:auto;width:auto;max-width:100%;
    min-width:min(100%,460px);
    aspect-ratio:400/640;align-self:center;
  }

  /* A Fazenda tem câmera livre (usa o container inteiro) e já estava em 66 %.
     Sem teto estreito, ela acompanha a janela. */
  html[data-arcada-jogo="fazenda"]:not(.arcada-tela) .cabinet{max-width:min(98vw,1600px)}
}

/* ---- 4. Bloco: a coluna do meio passa a ter a largura que a altura permite ----
   Era o pior caso (10 %) por um motivo próprio: o `.screen` era `width:100%` com
   `aspect-ratio:10/20` e altura cortada por `max-height`, então a proporção não
   era respeitada e o tabuleiro desenhado usava 15 % da largura da tela. */
/* Acima de 520 px o Bloco tem colunas laterais; abaixo, o proprio jogo empilha
   tudo numa coluna so. Sao dois layouts diferentes e cada um precisa da sua regra
   — sem esta divisao, a versao de PC esmagava o tabuleiro no telefone. */
@media(min-width:521px){
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .arena{
    flex:1 1 0;min-height:0;width:100%;max-width:none;align-items:stretch;
    grid-template-columns:minmax(72px,120px) minmax(0,1fr) minmax(72px,120px);
  }
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .screen{
    height:100%;width:auto;max-width:100%;max-height:none;min-height:0;
    min-width:min(100%,300px);
    aspect-ratio:10/20;margin:0 auto;
  }
}
/* No telefone o tabuleiro (1:2) tem quase a forma da tela (360x648 = 1:1,8), entao
   ele pode ficar grande de verdade. O que o impedia: as duas faixas de estado
   (GUARDAR/PONTOS/NIVEL e PROXIMAS/TEMPO) empilhavam e custavam 178 px dos 339 da
   arena, sobrando 153 para o jogo. Aqui elas ficam LADO A LADO numa faixa so, e o
   cabecalho e o rodape encolhem — os pixels devolvidos viram tabuleiro. */
@media(max-width:520px){
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .arena{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    gap:4px;align-items:start;flex:1 1 0;min-height:0;
  }
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .arena>.side:nth-of-type(1){grid-column:1;grid-row:1}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .arena>.side:nth-of-type(2){grid-column:2;grid-row:1}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .arena>.screen{
    grid-column:1/-1;grid-row:2;align-self:stretch;justify-self:center;
    width:auto;height:100%;max-width:100%;max-height:100%;min-height:0;
    min-width:0;aspect-ratio:10/20;margin:0;
  }
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .side{flex-direction:row;gap:4px;min-width:0}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .side .box{padding:4px;flex:1 1 0;min-width:0}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.top{min-height:0}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.top .brand{font-size:13px;letter-spacing:0;line-height:1.1}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.top .brand small{display:none}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.foot{font-size:9px;line-height:1.3}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .pad{flex:none;margin:2px auto 0}
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .pad button{height:44px;min-height:44px}
}


/* ---- 5. Telefone: devolver ao jogo a altura que o cabecalho desperdicava ----
   Medido no Bloco em 360x648: o `.toggles` (botoes de som, efeitos e cores)
   quebrava em tres linhas e o cabecalho inteiro custava 101 px — 15 % da tela.
   Numa linha so, com rolagem lateral, nada some e sobram ~57 px para o jogo. */
@media(max-width:520px){
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.top .toggles,
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.top .toggles,
  html[data-arcada-jogo="passaro"]:not(.arcada-tela) .cabinet>.top .toggles,
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.top .toggles{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.top .toggles::-webkit-scrollbar,
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.top .toggles::-webkit-scrollbar,
  html[data-arcada-jogo="passaro"]:not(.arcada-tela) .cabinet>.top .toggles::-webkit-scrollbar,
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.top .toggles::-webkit-scrollbar{display:none}
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.top .tbtn,
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.top .tbtn,
  html[data-arcada-jogo="passaro"]:not(.arcada-tela) .cabinet>.top .tbtn,
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.top .tbtn{white-space:nowrap;flex:none}
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.foot,
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.foot,
  html[data-arcada-jogo="passaro"]:not(.arcada-tela) .cabinet>.foot,
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.foot{font-size:9px;line-height:1.3}
  /* Com o cabecalho numa linha so, a marca disputa a largura com os botoes;
     encolhe-la evita que um cubra o outro. */
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.top .brand,
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.top .brand,
  html[data-arcada-jogo="passaro"]:not(.arcada-tela) .cabinet>.top .brand,
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.top .brand{
    font-size:12px;letter-spacing:0;line-height:1.15;min-width:0;overflow:hidden;
  }
  html[data-arcada-jogo="serpente"]:not(.arcada-tela) .cabinet>.top .brand small,
  html[data-arcada-jogo="bloco"]:not(.arcada-tela) .cabinet>.top .brand small,
  html[data-arcada-jogo="passaro"]:not(.arcada-tela) .cabinet>.top .brand small,
  html[data-arcada-jogo="quebra"]:not(.arcada-tela) .cabinet>.top .brand small{display:none}
}