/* Dimensões e posições medidas na referência (palco 1280×720, captura em viewport 1280×720,
   precisão ~±4 px). Carregado depois de styles.css/panels.css: aqui ficam só medidas; cores e
   efeitos continuam nos outros arquivos. Grade: célula 126×110 (GridView { size: 110, w: 126 }). */

:root { --cell-w: 126px; --cell-h: 110px; }

/* ---- Tabuleiro: grade 756×550 em (260, 70); moldura 788×582 em (244, 54) ---- */
.board { left: 260px; top: 0; width: 756px; }
.trail { height: 54px; }
.trail-plate { width: 104px; height: 50px; font-size: 30px; }
.frame { width: 788px; height: 582px; margin-left: -16px; padding: 10px; }
.grid { width: calc(var(--cell-w) * 6); height: calc(var(--cell-h) * 5); background-size: var(--cell-w) 100%; }
.sym { padding: 8px 12px; }

/* ---- Laterais: comprar 180×176, apostas especiais 180×166, painel 180×160 ---- */
.side-left { left: 12px; top: 94px; width: 180px; gap: 12px; }
#btn-buy { height: 176px; }
#btn-ante { height: 166px; }
.win-log { height: 160px; margin-top: 4px; } /* topo em y = 476 */
/* contador das rodadas grátis no lugar dos dois botões (y 94–448): número centrado em y = 288, rótulo em y = 402 */
.fs-panel { position: absolute; left: 0; top: 0; width: 180px; height: 354px; }
.fs-panel .fs-count { position: absolute; left: -20px; right: -20px; top: 144px; }
.fs-panel .fs-label { position: absolute; left: -20px; right: -20px; top: 279px; font-size: 24px; line-height: 19px; }
.fs-panel.last .fs-label { top: 170px; font-size: 30px; line-height: 28px; }
.feature-title { font-size: 21px; }
/* paisagem: tamanhos de fonte medidos na referência (captura 800×450 lado a lado) */
/* paisagem: laterais medidas na referência (molduras visíveis ~186 px de largura; artes esticadas no elemento).
   Posições relativas à .side-left (12, 94): comprar 87–265, apostas 257–458 (asas no topo), histórico 472–597 */
body:not(.portrait) .side-left { display: block; height: 0; }
/* a arte cobre a caixa inteira (sem o recuo da borda transparente) */
body:not(.portrait) :is(#btn-buy, #btn-ante, .win-log) { background-origin: border-box !important; }
body:not(.portrait) #btn-buy { position: absolute; left: -4.9px; top: -3px; width: 188.4px; height: 169.7px; gap: 0; padding-bottom: 10px; }
body:not(.portrait) #btn-buy .feature-sub { margin-top: -3px; }
body:not(.portrait) #btn-ante { position: absolute; left: -2.4px; top: 162.8px; width: 186.4px; height: 201.4px; justify-content: flex-start; padding-top: 72px; gap: 0; } /* arte quadrada com as asas (ui/feature-ante_landscape) */
body:not(.portrait) #btn-ante .feature-sub { margin-top: 2px; }
body:not(.portrait) #btn-ante .ante-toggle { margin-top: 25px; width: 138px; height: 35px; }
body:not(.portrait) #btn-ante .ante-toggle span { top: 2px; left: 2px; width: 64px; height: 31px; }
body:not(.portrait) #btn-ante.active .ante-toggle span { left: calc(100% - 66px); }
body:not(.portrait) .win-log { position: absolute; left: -2.4px; top: 376px; width: 186.4px; height: 136px; margin: 0; } /* moldura 470–606 */
body:not(.portrait) #btn-ante .feature-title { font-size: 15.5px; }
body:not(.portrait) #btn-ante .feature-sub { font-size: 17px; }
body:not(.portrait) .meters label { font-size: 18px; }
body:not(.portrait) .meters span { font-size: 20px; }
body:not(.portrait) .meters span.fit-text { max-width: 150px; }
body:not(.portrait) #meters { left: 196px; top: 55px; }
body:not(.portrait) .meters div { height: 21px; }
body:not(.portrait) :is(.meters label, .meters span) { line-height: 21px; }

/* ---- HUD: posições absolutas no palco (medidas com a captura ampliada 2,3×, ±2 px) ---- */
/* fonte condensada como a da referência; uma skin com fonts/display a substitui (--font-hud) */
:root { --font-hud: 'Bahnschrift Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif; }
.hud { display: block; padding: 0; height: 130px; }
/* paisagem: presa ao fundo da área visível e ampliada pela altura visível (--hud-k = visível ÷ 720, ui/main.js → fit),
   origem no centro da borda de baixo — igual à referência em janelas mais altas que 16:9 */
body:not(.portrait) .hud { bottom: calc(var(--bleed-y, 0px) * -1); transform: scale(var(--hud-k, 1)); transform-origin: 50% 100%; }
.hud-left, .hud-right, .spin-row, .auto-row, .hud-icons { display: contents; }
/* .hud começa em y = 590; coordenadas abaixo são relativas a ela */
.hud :is(#btn-menu, #btn-volume, #btn-info, #meters, #msg, #btn-minus, #btn-spin, #btn-plus, #btn-speed, #btn-auto) { position: absolute; }
.hud :is(#meters, #msg, #btn-auto, #btn-speed) { font-family: var(--font-hud); }

/* esquerda: menu Ø24 em (142, 656), volume Ø24 em (142, 691), info Ø44 em (183, 673) */
.hud-icons > #btn-menu { left: 130px; top: 54px; width: 24px; height: 24px; padding: 3px; border-radius: 50%; }
.hud-icons > #btn-volume { left: 130px; top: 89px; width: 24px; height: 24px; padding: 3px; border-radius: 50%; }
#btn-info { left: 161px; top: 61px; width: 44px; height: 44px; font-size: 28px; font-style: italic; font-family: Georgia, serif; border-width: 2px; }
/* CRÉDITO/APOSTA: rótulo alinhado à direita em x = 291, valor a partir de x = 304; linhas em y 659 e 685 */
#meters { left: 205px; top: 53px; gap: 1px; }
.meters div { gap: 13px; height: 25px; align-items: center; }
.meters label { width: 80px; font-size: 24px; line-height: 25px; }
.meters span { font-size: 24px; line-height: 25px; }

/* mensagem central: altura de maiúscula ~24 px, centro x 652; começa abaixo da moldura (termina em y 636) */
#msg { left: 423px; width: 430px; top: 40px; font-size: 30px; line-height: 44px; } /* centro x 638 (referência) */ /* encolhe se não couber: ui/fit-text.js */
#msg.win { font-size: 42px; top: 38px; line-height: 50px; } /* referência: maiúscula 29 px de tela (janela 943×649) */
#msg.win small { font-size: 1em; } /* referência: "PRÊMIO" na mesma altura do valor */
/* linha de ganho logo abaixo do "PRÊMIO" (referência: ~54 px abaixo do centro dele) */
.hud #win-line { position: absolute; left: 373px; width: 530px; top: 86px; height: 40px; font-family: var(--font-hud); font-size: 21.5px; } /* referência: maiúscula 15 px de tela */

/* direita: giro Ø118 em (990, 651); − e + Ø48 em (891, 651) e (1087, 651) */
#btn-spin { left: 931px; top: 2px; width: 118px; height: 118px; padding: 22px; }
#btn-minus { left: 867px; top: 37px; width: 48px; height: 48px; font-size: 30px; border-width: 2px; }
#btn-plus { left: 1063px; top: 37px; width: 48px; height: 48px; font-size: 30px; border-width: 2px; }
/* barra "JOGO AUTOMÁTICO" 184×28 em (897, 691), texto ~17 px; velocidade » dentro, à esquerda */
#btn-speed { left: 897px; top: 101px; width: 38px; height: 28px; padding: 0 6px; z-index: 1; border-color: transparent; background: none; font-size: 11px; }
#btn-auto { left: 897px; top: 101px; width: 184px; height: 28px; padding: 0 8px 0 38px; font-size: 17px; line-height: 1; letter-spacing: .02em; }

/* direita: logo/personagem não podem invadir a moldura (termina em x = 1032) */
.side-right { right: 8px; width: 220px; }

/* ---- Texto que se ajusta (ui/fit-text.js): uma linha, largura limitada ---- */
.fit-text { white-space: nowrap; overflow: hidden; }
/* valores de CRÉDITO/APOSTA: de x 304 até antes da mensagem (437) */
.meters span.fit-text { display: block; max-width: 128px; }
.feature-btn .fit-text, .fs-panel .fit-text { width: 100%; padding: 0 6px; }