/* Layout em RETRATO (celular em pé), medido na referência em 375×812 e convertido para o palco
   720×1560 (fator 1,92). Ativado por body.portrait (ui/main.js → fit(), troca ao vivo ao girar).
   Ordem de cima para baixo, como na referência: logo + personagem · trilha · grade na largura toda ·
   mensagem · Comprar | Apostas especiais · − giro + · barra (i, auto, velocidade, volume, ≡) · crédito/aposta. */

body.portrait #stage { width: 720px; height: 1560px; }

/* topo: logo e personagem alinhados à mão no editor (?logoedit, 30/09/2026) */
body.portrait .side-right { left: 0; right: auto; top: 0; width: 720px; height: 0; }
body.portrait .logo { position: absolute; left: 238.2px; top: 112.5px; width: 240px; height: 171px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 64px; }
body.portrait .logo-art { max-height: 100%; max-width: 100%; }
body.portrait .hero { position: absolute; left: 485px; top: 96px; width: 215px; height: 300px; margin: 0; }

/* grade: moldura na largura toda (788 → 720 px), topo da moldura em y = 394 */
body.portrait .board { left: 14.6px; top: 355px; transform: scale(0.9137); transform-origin: 0 0; } /* moldura 404–936 (ref. 390–950, centro 670) */

/* laterais viram uma linha de dois botões abaixo da grade */
body.portrait .side-left { left: 0; top: 0; width: 720px; height: 0; display: block; }
/* tamanho medido pela área visível da arte na referência (verde 174×53, vermelho 173×51 px em 375×812) */
body.portrait #btn-buy { position: absolute; left: -5px; top: 1037px; width: 349px; height: 132px; }
body.portrait #btn-ante { position: absolute; left: 354px; top: 1028px; width: 376px; height: 147px; }
/* contador das rodadas grátis centrado abaixo da grade (referência): número em y = 1131, rótulo em y = 1223 */
body.portrait .fs-panel { position: absolute; left: 0; top: 0; width: 720px; height: 0; margin: 0; }
body.portrait .fs-panel .fs-count { left: 0; right: 0; top: 1087px; font-size: 88px; line-height: 88px; }
body.portrait .fs-panel .fs-label { left: 0; right: 0; top: 1152px; font-size: 48px; line-height: 47px; }
body.portrait .fs-panel.last .fs-label { top: 1100px; font-size: 52px; line-height: 52px; }
/* referência: em retrato não há painel de ganhos; o canto é do logo */
body.portrait .win-log { display: none; }

/* HUD: coordenadas absolutas no palco */
body.portrait .hud { top: 0; bottom: auto; height: 1560px; background: linear-gradient(transparent 88%, #000c); pointer-events: none; }
body.portrait .hud :is(#btn-menu, #btn-volume, #btn-info, #meters, #msg, #btn-minus, #btn-spin, #btn-plus, #btn-speed, #btn-auto, #volume-pop) { pointer-events: auto; }
body.portrait #volume-pop { left: 15px; top: 1350px; width: 360px; height: 58px; }

/* mensagem central logo abaixo da grade */
body.portrait #msg { left: 20px; width: 680px; top: 948px; font-size: 40px; line-height: 46px; }
body.portrait #msg.win { font-size: 48px; top: 944px; line-height: 54px; }
body.portrait .hud #win-line { left: 20px; width: 680px; top: 1002px; height: 44px; font-size: 24.5px; pointer-events: none; } /* mesma proporção da paisagem (valor 42 : linha 21,5) */

/* giro Ø171 no centro (359, 1325) com o texto em volta (referência); − e + Ø54 dos lados */
body.portrait #btn-spin { left: 273px; top: 1239px; width: 171px; height: 171px; padding: 44px; }
body.portrait #btn-minus { left: 209px; top: 1298px; width: 54px; height: 54px; font-size: 32px; }
body.portrait #btn-plus { left: 455px; top: 1298px; width: 54px; height: 54px; font-size: 32px; }

/* barra inferior (y ≈ 1450): i · auto · velocidade · volume · ≡ */
body.portrait #btn-info { left: 15px; top: 1426px; width: 54px; height: 54px; font-size: 30px; }
body.portrait #btn-auto { left: 182px; top: 1430px; width: 106px; height: 58px; padding: 0 8px; font-size: 13px; border-radius: 29px; line-height: 1.05; white-space: normal; }
body.portrait #btn-speed { left: 303px; top: 1430px; width: 110px; height: 58px; padding: 0 14px; border: 2px solid #fff8; background: #000a; border-radius: 29px; font-size: 16px; }
body.portrait #btn-speed svg { width: 26px; height: 26px; }
body.portrait .hud-icons > #btn-volume { left: 426px; top: 1430px; width: 112px; height: 58px; padding: 12px; border-radius: 29px; }
body.portrait .hud-icons > #btn-menu { left: 636px; top: 1430px; width: 78px; height: 58px; padding: 12px 20px; border-radius: 29px; background: #000a; border: 2px solid #fff8; }

/* crédito e aposta numa linha só (y ≈ 1507) */
body.portrait #meters { left: 113px; top: 1499px; display: flex; gap: 36px; }
body.portrait .meters label { width: auto; }
body.portrait .meters span.fit-text { max-width: 220px; }

/* pop-ups e intro cabem na largura do retrato */
body.portrait .modal-card { width: 680px; max-height: 1400px; }
body.portrait .intro-slides { transform: scale(0.8); }

/* big win em retrato (referência): faixa sobre a área da grade — título no alto (y ≈ 540),
   valor numa placa embaixo (y ≈ 826); o resto da tela só escurece */
body.portrait .bigwin { place-content: start center; padding-top: 470px; background: radial-gradient(ellipse 70% 30% at 50% 44%, #3a2206f2, #000d 80%); }
body.portrait .bigwin-title { font-size: 92px; }
body.portrait .bigwin-amount { margin-top: 170px; font-size: 70px; }

/* referência: "MANTER PREMIDO PARA RODADA TURBO" em volta do giro (só em retrato) */
.spin-ring { display: none; }
body.portrait #btn-spin .spin-ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
body.portrait .spin-ring text { fill: #fff; font-size: 12.5px; font-weight: 900; letter-spacing: 0.3px; font-family: var(--font-hud, sans-serif); }
body.portrait #btn-spin.spinning .spin-ring { visibility: hidden; }

/* botões de recurso (referência): título numa linha, grande e amarelo; opções em maiúsculas */
body.portrait .feature-btn br { display: none; }
body.portrait #btn-buy { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
body.portrait #btn-buy .feature-title { font-size: 36px; color: #ffe23a; line-height: 1; text-shadow: 0 3px 0 #3a2a00, 0 0 8px #0008; }
body.portrait .feature-btn .feature-sub { font-size: 21px; color: #fff; text-transform: uppercase; font-weight: 900; text-shadow: 0 2px 0 #000a; }
body.portrait #btn-ante .feature-title { font-size: 24px; color: #ffe23a; line-height: 1.05; text-shadow: 0 2px 0 #3a0000; }

/* barra de baixo (referência): automático e velocidade só com ícone */
.auto-icon { display: none; }
body.portrait #btn-auto .auto-text, body.portrait #speed-label { display: none; }
body.portrait #btn-auto .auto-icon { display: block; width: 32px; height: 32px; margin: 0 auto; }
body.portrait #btn-auto { border: 2px solid #fff8; background: #000a; }

/* ---- Confirmar e comprar (referência): painel 628×432, cartão da oferta 551×163 e CANCELAR / SIM 256×90
   lado a lado. Retrato: encostado embaixo (topo y 1012). Paisagem: a mesma janela a 0,78×, no centro do palco.
   (body:not(.none) só mantém o peso de seletor das regras antigas de retrato, para valer nas duas orientações) ---- */
body.portrait .modal:has(.panel-confirm) { place-items: start center; }
body:not(.portrait) .modal:has(.panel-confirm) { place-items: center; }
body:not(.none) .modal-card.panel-confirm {
  position: relative; box-sizing: border-box; width: 628px; height: 432px;
  padding: 34px 60px 0 !important; overflow: visible;
}
body:not(.none) .panel-confirm h2 {
  margin: 0; font-family: 'DUAT Title', 'DUAT Display', sans-serif; font-size: 36px; line-height: 50px; color: #ffe23a;
  -webkit-text-stroke: 2px #3a2400; paint-order: stroke fill; text-shadow: 0 3px 0 #2a1a00; white-space: nowrap;
}
/* seta azul (voltar) e X vermelho no cabeçalho (artes ui/panel-back, ui/button-close) */
body:not(.none) .panel-confirm .panel-back { left: 44px; top: 46px; width: 52px; height: 31px; }
body:not(.none) .panel-confirm .panel-x { right: 48px; top: 42px; width: 38px; height: 38px; }
body:not(.none) .panel-confirm .offer-grid.single { position: absolute; left: 38px; top: 112px; margin: 0; }
body:not(.none) .panel-confirm .offer-card { width: 551px; height: 163px; min-height: 0; padding: 26px 10px 8px !important; gap: 2px; justify-content: flex-start; }
body:not(.none) .panel-confirm .offer-title { font-family: 'DUAT Title', 'DUAT Display', sans-serif; font-size: 27px; color: #ffe23a; -webkit-text-stroke: 1px #3a2400; paint-order: stroke fill; }
body:not(.none) .panel-confirm .offer-price { font-size: 30px; color: #fff; text-shadow: 0 2px 0 #0008; }
body:not(.none) .panel-confirm .offer-desc { font-size: 17px; color: #fff; opacity: 1; text-shadow: 0 2px 0 #0008; }
body:not(.none) .panel-confirm .modal-actions { position: absolute; left: 38px; top: 300px; width: 548px; margin: 0; gap: 36px; justify-content: space-between; }
body:not(.none) .panel-confirm .modal-actions .pill-btn { width: 256px; height: 90px; padding: 0; border-radius: 0; font-family: 'DUAT Title', 'DUAT Display', sans-serif;
  font-size: 38px; color: #f7e6c4; -webkit-text-stroke: 2px #3a1a00; paint-order: stroke fill; text-shadow: 0 3px 0 #0007; }
body.portrait .modal-card.panel-confirm { margin-top: calc(1012px + var(--bleed-y, 0px)); }
body:not(.portrait) .modal-card.panel-confirm { transform: scale(0.78); }
/* paisagem (referência): cabeçalho ~10 u mais baixo, título um pouco menor e X maior */
body:not(.portrait) .modal-card.panel-confirm { padding-top: 44px !important; }
body:not(.portrait) .panel-confirm h2 { font-size: 34px; }
body:not(.portrait) .panel-confirm .panel-back { left: 40px; top: 53px; width: 60px; height: 36px; }
body:not(.portrait) .panel-confirm .panel-x { right: 48px; top: 44px; width: 54px; height: 54px; }
/* referência: nas rodadas grátis em retrato o giro e o −/+ somem (o contador fica no lugar) */
body.portrait.in-fs :is(#btn-spin, #btn-minus, #btn-plus, .spin-ring) { visibility: hidden; }
body.portrait .speed-toast { left: 158px; top: 587px; } /* centro da grade em retrato (360, 670) */