/* Arte de skin sobre o visual CSS. ui/skin-ui.js liga `body.skin-<slot>` e define `--skin-<slot>`
   somente quando o slot tem arquivo; sem arquivo, nada aqui se aplica. */

/* base comum: a imagem ocupa o elemento e a decoração CSS some */
body.skin-spin-button #btn-spin, body.skin-spin-button #intro-go,
body.skin-auto-button #btn-auto,
body.skin-bet-minus #btn-minus, body.skin-bet-plus #btn-plus,
body.skin-speed-button #btn-speed,
body.skin-icon-menu #btn-menu, body.skin-icon-info #btn-info, body.skin-icon-volume #btn-volume,
body.skin-feature-buy #btn-buy, body.skin-feature-ante #btn-ante,
body.skin-trail-plate .trail-plate, body.skin-trail-plate-active .trail-plate.cur,
body.skin-fs-panel #fs-panel, body.skin-win-log #win-log,
body.skin-modal-frame .modal-card,
body.skin-button-primary .pill-btn.primary, body.skin-button-danger .pill-btn.danger,
body.skin-gamble-pointer .wheel-pointer, body.skin-gamble-button .wheel-center {
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* imagem de cada slot */
body.skin-spin-button #btn-spin, body.skin-spin-button #intro-go { background-image: var(--skin-spin-button) !important; background-size: contain !important; }
body.skin-auto-button #btn-auto { background-image: var(--skin-auto-button) !important; }
body.skin-bet-minus #btn-minus { background-image: var(--skin-bet-minus) !important; background-size: contain !important; }
body.skin-bet-plus #btn-plus { background-image: var(--skin-bet-plus) !important; background-size: contain !important; }
body.skin-speed-button #btn-speed { background-image: var(--skin-speed-button) !important; }
body.skin-icon-menu #btn-menu { background-image: var(--skin-icon-menu) !important; background-size: contain !important; }
body.skin-icon-info #btn-info { background-image: var(--skin-icon-info) !important; background-size: contain !important; }
body.skin-icon-volume #btn-volume { background-image: var(--skin-icon-volume) !important; background-size: contain !important; }
body.skin-feature-buy #btn-buy { background-image: var(--skin-feature-buy) !important; }
body.skin-feature-ante #btn-ante { background-image: var(--skin-feature-ante) !important; }
body.skin-ante-track .ante-toggle, body.skin-ante-track-on .feature-btn.ante.active .ante-toggle,
body.skin-ante-knob .ante-toggle span {
  background: var(--skin-ante-track) center / 100% 100% no-repeat !important; border-color: transparent !important; box-shadow: none !important;
}
body.skin-ante-track-on .feature-btn.ante.active .ante-toggle { background-image: var(--skin-ante-track-on) !important; }
body.skin-ante-knob .ante-toggle span { background-image: var(--skin-ante-knob) !important; }
body.skin-trail-plate .trail-plate { background-image: var(--skin-trail-plate) !important; }
body.skin-trail-plate-active .trail-plate.cur { background-image: var(--skin-trail-plate-active) !important; }
/* trilha: placas vizinhas em aba, atual em cúpula, arco por cima (medidas da referência) */
body.skin-trail-plate .trail { overflow: visible; } /* placas fora da vista já têm opacidade 0 */
body.skin-trail-plate .trail-plate { width: 200px; height: 56px; bottom: 12px; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; }
body.skin-trail-plate-active .trail-plate.cur { width: 144px; height: 55px; box-shadow: none !important; }
body.skin-trail-plate-prev .trail-plate.prev { background-image: var(--skin-trail-plate-prev) !important; }
.trail-arch { display: none; }
body.skin-trail-arch .trail-arch {
  display: block; position: absolute; left: 50%; top: -62px; width: 390px; height: 105px; transform: translateX(-50%);
  background: var(--skin-trail-arch) center / 100% 100% no-repeat; pointer-events: none; z-index: 2;
}
/* paisagem: a trilha encosta no topo do palco — sem arco e placas menores para caber nos 54 px */
/* paisagem (referência): placas do mesmo tamanho do retrato apoiadas na barra de cima; arco passa do topo do palco
   (aparece quando a janela é mais alta que 16:9, como na referência) — o palco só deixa vazar para cima */
body:not(.portrait).skin-trail-plate .trail-plate { bottom: 2px; }
body:not(.portrait).skin-trail-arch .trail-arch { top: -56px; width: 400px; height: 108px; }
/* barras da grade */
/* barras da grade (referência): barra em cima e embaixo, pedra (ui.frameGem) nas quatro pontas, sem cantos
   arredondados. Laterais: retrato = filete fino (a grade encosta na borda da tela); paisagem = coluna dourada. */
body.skin-frame-bar .frame { border: 0; border-radius: 0; box-shadow: none; }
/* laterais em arte (ui.framePillar): coluna em pé, pontas não esticam; posições por orientação no fim do arquivo */
.frame-side { display: none; }
body.skin-frame-pillar .frame-side {
  display: block; position: absolute; width: 57px; z-index: 2; pointer-events: none;
  border-style: solid; border-width: 0; border-image: var(--skin-frame-pillar) 130 0 fill / 130px 0 stretch;
}
/* divisórias entre as colunas: filete marrom-dourado */
body.skin-frame-bar .grid { background-image: linear-gradient(90deg, #7a4c16 2px, transparent 2px); background-position: -1px 0; }
/* fundo da grade (hieróglifos na referência) */
body.skin-fs-panel #fs-panel { background-image: var(--skin-fs-panel) !important; }
body.skin-win-log #win-log { background-image: var(--skin-win-log) !important; }
/* fundo e moldura separados (referência): o fundo vai por baixo das linhas e a moldura por cima delas */
body.skin-win-log-frame #win-log { background-image: none !important; }
body.skin-win-log-frame .wl-back { display: block; background: var(--skin-win-log) center / 100% 100% no-repeat; }
body.skin-win-log-frame .wl-front { display: block; background: var(--skin-win-log-frame) center / 100% 100% no-repeat; }
/* linhas do painel de ganhos: fundo em 3 fatias (bordas de 32 não esticam) e setas de rolagem da referência */
body.skin-win-log-row .wl-row { background: none; border-radius: 0; }
body.skin-win-log-row .wl-row::before { content: ''; position: absolute; inset: 0; border: 0 solid transparent; border-width: 0 32px;
  border-image: var(--skin-win-log-row) 0 32 fill / 0 32px stretch; }
body.skin-win-log-up .wl-up, body.skin-win-log-down .wl-down { background: center / 66px 35px no-repeat; }
body.skin-win-log-up .wl-up { background-image: var(--skin-win-log-up); }
body.skin-win-log-down .wl-down { background-image: var(--skin-win-log-down); }
body.skin-win-log-up .wl-up::before, body.skin-win-log-down .wl-down::before { display: none; }
/* moldura em 9 fatias: cantos e ornamento do topo não esticam com o tamanho do pop-up */
body.skin-modal-frame .modal-card {
  background-image: none !important;
  border-style: solid !important; border-image: var(--skin-modal-frame) 100 64 64 fill / 50px 32px 32px stretch !important;
  padding-top: 64px !important; /* título abaixo do ornamento */
}
body.skin-modal-frame-green .modal-card.green {
  background-image: none !important; background-color: transparent !important; box-shadow: none !important;
  border-style: solid !important; border-image: var(--skin-modal-frame-green) 60 fill / 30px stretch !important;
}
/* cartões de opção (compra e aposta especial): arte por baixo do texto */
body.skin-offer-card-green .green .offer-card, body.skin-offer-card-red .panel-offers.red .offer-card,
body.skin-offer-card-red-active .panel-offers.red .offer-card.active {
  background: var(--skin-offer-card-green) center / 100% 100% no-repeat !important;
  border-color: transparent !important; box-shadow: none !important;
  padding-top: 30px; /* título abaixo do ornamento da arte */
}
body.skin-offer-card-red .panel-offers.red .offer-card { background-image: var(--skin-offer-card-red) !important; }
body.skin-offer-card-red-active .panel-offers.red .offer-card.active { background-image: var(--skin-offer-card-red-active) !important; background-size: 112% 124% !important; }
body.skin-button-primary .pill-btn.primary { background-image: var(--skin-button-primary) !important; }
body.skin-button-danger .pill-btn.danger { background-image: var(--skin-button-danger) !important; }
body.skin-gamble-pointer .wheel-pointer {
  background-image: var(--skin-gamble-pointer) !important; background-size: contain !important;
  border: 0 !important; width: 40px; height: 40px; top: -18px;
}
body.skin-gamble-button .wheel-center { background-image: var(--skin-gamble-button) !important; background-size: contain !important; }

/* disco do gamble: fatia de chance translúcida por cima da arte */
body.skin-gamble-base .wheel {
  background:
    conic-gradient(#2fbf5a88 0 var(--win), transparent var(--win) 360deg),
    var(--skin-gamble-base) center / cover no-repeat !important;
  border-color: transparent !important;
}

/* ícones que a arte substitui (o texto de estado continua) */
body.skin-spin-button #btn-spin .icon-spin, body.skin-spin-button #intro-go svg,
body.skin-speed-button #btn-speed svg,
body.skin-icon-menu #btn-menu svg, body.skin-icon-volume #btn-volume svg { visibility: hidden; }
body.skin-bet-minus #btn-minus, body.skin-bet-plus #btn-plus, body.skin-icon-info #btn-info { color: transparent !important; }

/* títulos do big win em arte */
.bigwin-title .tier-art { display: block; height: 200px; max-width: 900px; margin: 0 auto; object-fit: contain; }
.bigwin-title:has(.tier-art) { -webkit-text-stroke: 0; text-shadow: none; }

/* fontes */
body.skin-font-display, body.skin-font-display button { font-family: 'DUAT Display', 'Bahnschrift Condensed', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; }
body.skin-font-title :is(.feature-title, .feature-sub, .win-log) { font-family: 'DUAT Title', 'DUAT Display', system-ui, sans-serif; }
body.skin-font-numbers .meters span, body.skin-font-numbers .bigwin-amount, body.skin-font-numbers .fs-count,
body.skin-font-numbers .fs-mult, body.skin-font-numbers .fs-total, body.skin-font-numbers .trail-plate,
body.skin-font-numbers .win-label, body.skin-font-numbers .win-pop, body.skin-font-numbers .win-log,
body.skin-font-numbers .hud-msg.win { font-family: 'DUAT Numbers', 'DUAT Display', system-ui, sans-serif; }

/* tela de carregamento */
.loading { position: absolute; inset: 0; z-index: 50; background: #000 center / cover no-repeat; display: grid; place-items: end center; transition: opacity .35s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading { inset: calc(var(--bleed-y, 0px) * -1) calc(var(--bleed-x, 0px) * -1); }
/* sem arte de carregamento: fundo escuro, logo do jogo no centro e a barra logo abaixo */
.loading.plain { background: radial-gradient(ellipse at 50% 45%, #1d2a1a 0%, #070906 60%, #000 100%); place-items: center; align-content: center; gap: 46px; }
.loading.plain .loading-logo { width: 420px; max-width: 70%; height: auto; filter: drop-shadow(0 6px 18px #000c); }
.loading.plain .loading-bar { width: 460px; height: 14px; margin: 0; border-radius: 7px; background: #ffffff1a; box-shadow: inset 0 0 0 1px #f2c14e55; }
.loading.plain .loading-bar i { background: linear-gradient(90deg, #a8761d, #ffe27a, #a8761d); background-size: 100% 100%; }
body.portrait .loading.plain .loading-logo { width: 560px; }
body.portrait .loading.plain .loading-bar { width: 520px; }
/* cena ainda chegando (fase 2) quando o evento dispara: aviso curto por cima de tudo */
.wait-load { position: absolute; inset: calc(var(--bleed-y, 0px) * -1) calc(var(--bleed-x, 0px) * -1); z-index: 60; display: grid; place-items: center; background: #0006; }
.wait-load i { width: 64px; height: 64px; border-radius: 50%; border: 6px solid #ffffff33; border-top-color: #ffe27a; animation: wait-spin .8s linear infinite; }
@keyframes wait-spin { to { transform: rotate(360deg); } }
.loading-bar { position: relative; width: 600px; height: 40px; margin-bottom: 70px; background: #0006; border-radius: 20px; overflow: hidden; }
.loading-bar i { position: absolute; inset: 0; background: var(--gold) left / 600px 40px no-repeat; clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); transition: clip-path .2s; }
body.skin-loading-bar .loading-bar { background: none; border-radius: 0; }
body.skin-loading-bar .loading-bar i { background-image: var(--skin-loading-bar); background-size: 100% 100%; background-color: transparent; }

/* ---- Moldura em paisagem: posições definitivas alinhadas à mão no editor (?frameedit, 29/09/2026) ----
   px locais da .frame (788×582). Barras e pedras viram elementos (.fp) para aceitar giro/espelho próprios. */
.fp { display: none; position: absolute; pointer-events: none; background: center / 100% 100% no-repeat; }
body:not(.portrait).skin-frame-bar .fp.bar-t, body:not(.portrait).skin-frame-bar .fp.bar-b { display: block; width: 812px; height: 57px; z-index: 3; background-image: var(--skin-frame-bar); }
body:not(.portrait).skin-frame-bar .fp.bar-t { left: -10.1px; top: -31.2px; transform: scaleY(-1); }
body:not(.portrait).skin-frame-bar .fp.bar-b { left: -13px; top: 567.7px; }
body:not(.portrait).skin-frame-bar.skin-frame-gem .fp[class*='gem-'] { display: block; width: 38px; height: 39px; z-index: 4; background-image: var(--skin-frame-gem); }
body:not(.portrait).skin-frame-bar.skin-frame-gem .fp.gem-tl { left: -20.8px; top: -17.9px; transform: scaleX(-1); }
body:not(.portrait).skin-frame-bar.skin-frame-gem .fp.gem-tr { left: 771.9px; top: -15px; transform: rotate(2deg); }
body:not(.portrait).skin-frame-bar.skin-frame-gem .fp.gem-bl { left: -22.9px; top: 572.8px; transform: scale(-1, -1); }
body:not(.portrait).skin-frame-bar.skin-frame-gem .fp.gem-br { left: 771.9px; top: 574.8px; transform: scaleY(-1); }
body:not(.portrait).skin-frame-pillar .frame-side { height: 610px; bottom: auto; right: auto; z-index: 2; }
body:not(.portrait).skin-frame-pillar .frame-side.l { left: -34.4px; top: -8.2px; transform: scaleX(-1); }
body:not(.portrait).skin-frame-pillar .frame-side.r { left: 765.8px; top: -6.1px; transform: none; }

/* ---- Moldura em retrato: posições definitivas alinhadas à mão no editor (?frameedit&portrait, 29/09/2026) ----
   px locais da .frame (788×582; a tela vai de x=0 a 788, o resto fica cortado). Barra longa 1103×52. */
body.portrait.skin-frame-bar .fp.bar-t, body.portrait.skin-frame-bar .fp.bar-b { display: block; width: 820px; height: 40px; z-index: 3; background-image: var(--skin-frame-bar); }
body.portrait.skin-frame-bar .fp.bar-t { left: -16px; top: -35px; transform: scaleY(-1); }
body.portrait.skin-frame-bar .fp.bar-b { left: -17px; top: 560.9px; transform: none; }
body.portrait.skin-frame-bar.skin-frame-gem .fp[class*='gem-'] { display: block; width: 35px; height: 36px; z-index: 4; background-image: var(--skin-frame-gem); }
body.portrait.skin-frame-bar.skin-frame-gem .fp.gem-tl { left: -25.8px; top: -27px; transform: rotate(-1deg) scaleX(-1); }
body.portrait.skin-frame-bar.skin-frame-gem .fp.gem-tr { left: 779px; top: -24.5px; transform: none; }
body.portrait.skin-frame-bar.skin-frame-gem .fp.gem-bl { left: -26.8px; top: 560.3px; transform: scale(-1, -1); }
body.portrait.skin-frame-bar.skin-frame-gem .fp.gem-br { left: 779.7px; top: 561.1px; transform: scaleY(-1); }
body.portrait.skin-frame-pillar .frame-side { height: 610px; bottom: auto; right: auto; z-index: 2; }
body.portrait.skin-frame-pillar .frame-side.l { left: -39.9px; top: -21px; transform: scaleX(-1); }
body.portrait.skin-frame-pillar .frame-side.r { left: 772.3px; top: -17.7px; transform: none; }

/* ---- Fundo da grade só dentro das bordas + grade centrada nessa área (medido no miolo dourado das barras/colunas) ----
   A .frame fica transparente; o fundo vai para ::before (as barras já são .fp). */
body.skin-frame-bar .frame { background: none !important; }
body.skin-frame-bar .frame::before { content: ''; position: absolute; z-index: 0; pointer-events: none; background: #2a0a0ae6; }
/* referência: a arte é de UMA coluna, em pé, repetida nas 6 colunas (sem escurecer), com a divisória brilhante
   entre elas (ui.frameDivider, 66×805 u → 47 px); o que sobra da moldura fica no vinho escuro */
body.skin-frame-bar.skin-frame-bg .frame::before { background: #1c0506; }
body.skin-frame-bg:not(.skin-frame-bar) .frame { background: #1c0506 !important; }
body.skin-frame-bg .grid { background: var(--skin-frame-bg) 0 0 / var(--cell-w) 100% repeat-x !important; }
body.skin-frame-bg.skin-frame-divider .grid {
  background:
    var(--skin-frame-divider) calc(var(--cell-w) * 1 - 23.5px) 50% / 47px 104% no-repeat,
    var(--skin-frame-divider) calc(var(--cell-w) * 2 - 23.5px) 50% / 47px 104% no-repeat,
    var(--skin-frame-divider) calc(var(--cell-w) * 3 - 23.5px) 50% / 47px 104% no-repeat,
    var(--skin-frame-divider) calc(var(--cell-w) * 4 - 23.5px) 50% / 47px 104% no-repeat,
    var(--skin-frame-divider) calc(var(--cell-w) * 5 - 23.5px) 50% / 47px 104% no-repeat,
    var(--skin-frame-bg) 0 0 / var(--cell-w) 100% repeat-x !important;
}
/* camadas da grade entram na pilha da moldura: símbolos em movimento abaixo das barras (z 3/4);
   símbolo parado maior que a célula (.sym-top, scatter) e Spine da grade por cima delas, como na referência */
body.skin-frame-bar .grid { z-index: auto; }
body.skin-frame-bar .grid > .sym-layer { z-index: 1; }
body.skin-frame-bar .grid > :is(.sym-top, .spine-layer) { z-index: 5; }
body.skin-frame-bar .grid > :is(.fx-outline, .fx-layer) { z-index: 6; }
body:not(.portrait).skin-frame-bar .frame::before { left: 14.6px; top: 20px; width: 759.2px; height: 553.7px; }
body.portrait.skin-frame-bar .frame::before { left: 9.1px; top: 2.7px; width: 771.2px; height: 560.5px; }
/* grade 756×550 centrada na área interna */
body:not(.portrait).skin-frame-bar .frame { padding: 22px 0 10px 16.2px !important; }
body.portrait.skin-frame-bar .frame { padding: 8px 0 24px 16.7px !important; }
/* símbolos ~4% maiores (98 px de altura, referência ≈ 96) */
body.skin-frame-bar .sym { padding: 6px 12px; }

/* ---- Fontes em imagem (ui/bitmap-font.js): imagens da mesma altura, alinhadas pela base ---- */
.bmf { display: inline-flex; align-items: flex-end; white-space: nowrap; line-height: 1; vertical-align: middle; }
.bmf img { height: 1.35em; width: auto; margin: 0 -0.03em; }
.bmf .bmf-sp { display: inline-block; width: 0.3em; }
.bmf .bmf-t { font-weight: 900; line-height: 1.35em; }
.bmf-label img { height: 0.8em; margin: 0; }
.win-label .bmf img { height: 1.7em; }
.trail-plate .bmf-label img { height: 30px; }
.trail-plate.cur .bmf-label img { height: 38px; }
.bigwin-amount .bmf, .win-pop .bmf, .win-label .bmf { -webkit-text-stroke: 0; }
.bigwin-amount:has(.bmf), .win-pop:has(.bmf), .win-label:has(.bmf) { text-shadow: none; -webkit-text-stroke: 0; }
.bmf-gold .bmf-t, .bmf-gold-shadow .bmf-t { color: #ffd54a; -webkit-text-stroke: 1px #7a3a00; }
.bmf-bubble .bmf-t { color: #ffe23a; -webkit-text-stroke: 1px #b40000; }

/* ---- Comprar modo (referência): cartão por opção, X vermelho, seletor − valor + em arte ---- */
body.skin-offer-card-buy-1 .offer-card.buy-1 { background-image: var(--skin-offer-card-buy-1) !important; }
body.skin-offer-card-buy-2 .offer-card.buy-2 { background-image: var(--skin-offer-card-buy-2) !important; }
body.skin-offer-card-buy-3 .offer-card.buy-3 { background-image: var(--skin-offer-card-buy-3) !important; }
body.skin-offer-card-buy-4 .offer-card.buy-4 { background-image: var(--skin-offer-card-buy-4) !important; }
body.skin-offer-card-buy-5 .offer-card.buy-5 { background-image: var(--skin-offer-card-buy-5) !important; }
body.skin-button-close .panel-x { background: var(--skin-button-close) center / contain no-repeat !important; color: transparent !important; border: 0 !important; }
body.skin-panel-back .panel-back { background: var(--skin-panel-back) center / contain no-repeat !important; color: transparent !important; font-size: 0 !important; border: 0 !important; border-radius: 0 !important; }
/* referência: confirmação de compra tem janela própria (moldura dourada com pedras) */
body.skin-confirm-frame .modal-card.panel-confirm { border-image: none !important; border: 0 !important; background: var(--skin-confirm-frame) center / 100% 100% no-repeat !important; box-shadow: none !important; }
body.skin-step-minus .step-btn.minus { background: var(--skin-step-minus) center / contain no-repeat !important; color: transparent; }
body.skin-step-plus .step-btn.plus { background: var(--skin-step-plus) center / contain no-repeat !important; color: transparent; }
body.skin-step-field .step-value { background: var(--skin-step-field) center / 100% 100% no-repeat !important; border: 0 !important; }
/* textos do cartão como na referência: título amarelo, valor branco grande, descrição branca */
.offer-grid.buy .offer-title { color: #fff36a; text-shadow: 0 2px 0 #0008; }
.offer-grid.buy .offer-price { color: #fff; text-shadow: 0 2px 0 #0009; }
.offer-grid.buy .offer-desc { color: #fff; opacity: 1; text-transform: uppercase; }
/* retrato: lista em coluna, cartões na largura toda */
body.portrait .panel-offers.green .offer-grid.buy { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
body.portrait .panel-offers.green .offer-grid.buy .offer-card { width: 100%; min-height: 178px; padding: 22px 10px 18px; gap: 8px; }
body.portrait .panel-offers.green .offer-title { font-size: 28px; }
body.portrait .panel-offers.green .offer-price { font-size: 40px; }
body.portrait .panel-offers.green .offer-desc { font-size: 20px; }
body.portrait .panel-offers.green h2 { font-size: 44px; color: #ffe23a; }
body.portrait .panel-offers.green .panel-x { width: 64px; height: 64px; top: 70px; right: 40px; }
body.portrait .panel-offers.green .stepper-label { font-size: 28px; color: #ffe23a; }
body.portrait .panel-offers.green .step-btn { width: 88px; height: 88px; }
body.portrait .panel-offers.green .step-value { min-width: 300px; height: 94px; line-height: 78px; font-size: 44px; }

/* ---- Apostas especiais (referência): cartão por opção, seletor vermelho, interruptor em caixa no retrato ---- */
body.skin-offer-card-ante-1 .panel-offers.red .offer-card.ante-1 { background-image: var(--skin-offer-card-ante-1) !important; }
body.skin-offer-card-ante-2 .panel-offers.red .offer-card.ante-2 { background-image: var(--skin-offer-card-ante-2) !important; }
body.skin-offer-card-ante-3 .panel-offers.red .offer-card.ante-3 { background-image: var(--skin-offer-card-ante-3) !important; }
body.skin-bet-minus .panel-offers.red .step-btn.minus { background: var(--skin-bet-minus) center / contain no-repeat !important; color: transparent; }
body.skin-bet-plus .panel-offers.red .step-btn.plus { background: var(--skin-bet-plus) center / contain no-repeat !important; color: transparent; }
body.skin-step-field-red .panel-offers.red .step-value { background: var(--skin-step-field-red) center / 100% 100% no-repeat !important; border: 0 !important; }
.offer-grid.ante .offer-title { color: #fff36a; text-shadow: 0 2px 0 #0008; }
.offer-grid.ante .offer-price { color: #fff; text-shadow: 0 2px 0 #0009; }
.offer-grid.ante .offer-desc { color: #fff; opacity: 1; }
body.portrait .panel-offers.red .offer-grid.ante { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
body.portrait .panel-offers.red .offer-grid.ante .offer-card { width: 100%; min-height: 178px; padding: 22px 10px 18px; gap: 8px; }
body.portrait .panel-offers.red .offer-title { font-size: 28px; }
body.portrait .panel-offers.red .offer-price { font-size: 40px; }
body.portrait .panel-offers.red .offer-desc { font-size: 20px; }
body.portrait .panel-offers.red h2 { font-size: 28px; color: #ffe23a; padding-right: 70px; padding-left: 20px; white-space: nowrap; }
body.portrait .panel-offers.red .panel-x { width: 64px; height: 64px; top: 70px; right: 40px; }
body.portrait .panel-offers.red .stepper-label { font-size: 28px; color: #ffe23a; }
body.portrait .panel-offers.red .step-btn { width: 88px; height: 88px; }
body.portrait .panel-offers.red .step-value { min-width: 300px; height: 94px; line-height: 78px; font-size: 44px; }
/* botão "Apostas especiais" em retrato: texto à esquerda numa linha + interruptor em caixa à direita */
body.portrait #btn-ante { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 22px 150px 8px 14px; text-align: center; }
body.portrait #btn-ante .feature-title, body.portrait #btn-ante .feature-sub { width: 100%; }
body.portrait #ante-title br { display: none; }
body.portrait #btn-ante .ante-toggle { position: absolute; right: 14px; top: 50%; margin-top: -30px; width: 132px; height: 72px; }
body.portrait #btn-ante .ante-toggle span { top: 5px; left: 5px; width: 62px; height: 62px; }
body.portrait .feature-btn.ante.active .ante-toggle span { left: calc(100% - 67px); }
body.portrait.skin-ante-knob .ante-toggle span { background-size: contain !important; }
body.skin-ante-knob .ante-toggle span::after { content: none; } /* a seta vem na arte do puxador */

/* ---- Jogo automático (referência, medido na captura): janela preta da plataforma 589×525 (centro x 640, topo 49),
   sem escurecer o resto; posições abaixo em px do palco, relativas à janela ---- */
.modal:has(.panel-auto) { background: transparent; }
body .modal-card.panel-auto, body.skin-modal-frame .modal-card.panel-auto {
  width: 589px; height: 525px; max-height: none; margin-top: -98px; padding: 0 !important; position: relative;
  background: #020202f2 !important; border: 0 !important; border-image: none !important; border-radius: 12px; box-shadow: none !important;
  color: #fff; font-family: var(--font-hud); overflow: hidden !important; text-align: left;
}
body .modal-card.panel-auto h2, body.skin-font-menu .modal-card.panel-auto h2 {
  position: absolute; pointer-events: none; left: 0; right: 0; top: 44px; margin: 0; text-align: center;
  font: 700 22px/1 var(--font-hud) !important; color: #f3af31; letter-spacing: .02em; text-shadow: none;
}
body .modal-card.panel-auto .panel-x {
  position: absolute; top: 24px; right: 22px; width: 40px; height: 40px; padding: 0; line-height: 40px;
  background: none !important; border: 0 !important; color: #bebebe !important; font-size: 44px; font-weight: 200;
}
.panel-auto .auto-checks { position: absolute; left: 29px; top: 156px; margin: 0; display: block; }
.panel-auto .auto-chk { position: absolute; top: 0; display: flex; align-items: center; gap: 21px; cursor: pointer; white-space: nowrap; }
.panel-auto .auto-chk:nth-child(1) { left: 0; }
.panel-auto .auto-chk:nth-child(2) { left: 188px; }
.panel-auto .auto-chk:nth-child(3) { left: 378px; }
.panel-auto .auto-chk input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.panel-auto .auto-chk i { flex: none; width: 49px; height: 49px; box-sizing: border-box; border: 2.5px solid #a1a1a1; border-radius: 7px; background: #020101; position: relative; }
.panel-auto .auto-chk input:checked + i { background: #00b862; border-color: #00b862; }
.panel-auto .auto-chk input:checked + i::after {
  content: ''; position: absolute; left: 13px; top: 8px; width: 12px; height: 22px;
  border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg);
}
.panel-auto .auto-chk input:focus-visible + i { outline: 2px solid #fff8; outline-offset: 2px; }
.panel-auto .auto-chk span { font: 700 20px/24px var(--font-hud); color: #fff; letter-spacing: .02em; }
.panel-auto .stepper-label { position: absolute; left: 0; right: 0; top: 253px; margin: 0; text-align: center; font: 700 20px/1.1 var(--font-hud); color: #fff; letter-spacing: .02em; }
.panel-auto .auto-slider { position: absolute; left: 51px; right: 30px; top: 318px; height: 43px; margin: 0; display: block; }
.panel-auto .auto-slider input {
  position: absolute; left: 0; top: 0; width: 378px; height: 43px; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; accent-color: initial;
}
.panel-auto .auto-slider input::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #00703d var(--fill), #404040 var(--fill)); border-radius: 2px; }
.panel-auto .auto-slider input::-moz-range-track { height: 3px; background: #404040; border-radius: 2px; }
.panel-auto .auto-slider input::-moz-range-progress { height: 3px; background: #00703d; }
.panel-auto .auto-slider input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 46px; height: 43px; margin-top: -20px; border: 0; border-radius: 5px;
  background: #00b862 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M2 0v14M8 0v14M14 0v14' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center no-repeat;
}
.panel-auto .auto-slider input::-moz-range-thumb {
  width: 46px; height: 43px; border: 0; border-radius: 5px;
  background: #00b862 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M2 0v14M8 0v14M14 0v14' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center no-repeat;
}
.panel-auto .auto-slider b { position: absolute; left: 420px; top: 0; width: 60px; line-height: 43px; text-align: center; font: 700 27px/43px var(--font-hud); color: #fff; }
.panel-auto .auto-start {
  position: absolute; left: 7px; right: 8px; bottom: 0; height: 71px; margin: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: #00b862; color: #fff; font: 700 23px/71px var(--font-hud); letter-spacing: .02em; text-align: center; padding: 0;
}
.panel-auto .auto-start:hover { filter: brightness(1.08); }
/* retrato: mesma janela, maior */
body.portrait .modal-card.panel-auto, body.portrait.skin-modal-frame .modal-card.panel-auto { margin-top: 0; zoom: 1.15; }

/* ---- Multiplicador de aposta (referência, medido na captura): janela preta 400×661 presa à direita (x 867, y 11),
   3 linhas −/valor/+ a cada ~146 px, APOSTA MÁX. verde embaixo; sem escurecer o resto ---- */
.modal:has(.panel-bet) { background: transparent; }
body .modal-card.panel-bet, body.skin-modal-frame .modal-card.panel-bet {
  position: absolute; left: calc(867px + var(--bleed-x, 0px)); top: calc(11px + var(--bleed-y, 0px)); width: 400px; height: 661px; max-height: none; margin: 0; padding: 0 !important;
  background: #050505f2 !important; border: 0 !important; border-image: none !important; border-radius: 12px; box-shadow: none !important;
  color: #fff; font-family: var(--font-hud); overflow: hidden !important;
}
body .modal-card.panel-bet h2, body.skin-font-menu .modal-card.panel-bet h2 {
  position: absolute; pointer-events: none; left: 0; right: 0; top: 47px; margin: 0; text-align: center; white-space: nowrap;
  font: 700 21px/1 var(--font-hud) !important; color: #f3af31; letter-spacing: .02em; text-shadow: none;
}
body .modal-card.panel-bet .panel-x {
  position: absolute; top: 26px; right: 20px; width: 40px; height: 40px; padding: 0; line-height: 40px;
  background: none !important; border: 0 !important; color: #bebebe !important; font-size: 46px; font-weight: 200;
}
.panel-bet .stepper { position: absolute; left: 0; right: 0; margin: 0; }
.panel-bet .stepper:has(#bet-level) { top: 104px; }
.panel-bet .stepper:has(#bet-coin) { top: 252px; }
.panel-bet .stepper:has(#bet-total) { top: 398px; }
.panel-bet .stepper-label { margin: 0 0 15px; text-align: center; font: 700 20px/20px var(--font-hud); color: #fff; letter-spacing: .02em; }
.panel-bet .stepper-row { position: relative; height: 74px; display: block; }
body .panel-bet .step-btn { position: absolute; top: 0; width: 74px; height: 74px; border-radius: 50%; border: 0; font-size: 0 !important; color: transparent; cursor: pointer; }
body .panel-bet .step-btn.minus { left: 24px; background: #ebebeb !important; }
body .panel-bet .step-btn.plus { left: 302px; background: #00b862 !important; }
.panel-bet .step-btn::before, .panel-bet .step-btn.plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 4px; translate: -50% -50%; border-radius: 2px; }
.panel-bet .step-btn.minus::before { background: #333; }
.panel-bet .step-btn.plus::before, .panel-bet .step-btn.plus::after { background: #fff; }
.panel-bet .step-btn.plus::after { width: 4px; height: 34px; }
/* no limite (referência): + verde-escuro com sinal cinza; − escurecido */
body .panel-bet .step-btn.plus:disabled { background: #054628 !important; cursor: default; }
.panel-bet .step-btn.plus:disabled::before, .panel-bet .step-btn.plus:disabled::after { background: #625d63; }
body .panel-bet .step-btn.minus:disabled { background: #4a4a4a !important; cursor: default; }
.panel-bet .step-btn.minus:disabled::before { background: #2a2a2a; }
body .panel-bet .step-value {
  position: absolute; left: 120px; top: 2px; width: 160px; height: 69px; min-width: 0; box-sizing: border-box; padding: 0; text-align: center;
  background: #1f1f1f !important; border: 2px solid #404040 !important; border-radius: 8px; font: 700 23px/65px var(--font-hud); color: #fff;
}
.panel-bet .modal-actions { position: absolute; left: 120px; top: 555px; width: 160px; margin: 0; }
body .panel-bet .bet-max, body.skin-button-primary .panel-bet .bet-max.pill-btn.primary {
  background-image: none !important; filter: none; text-shadow: none;
  width: 160px; height: 61px; padding: 0; border: 0; border-radius: 4px; box-shadow: none;
  background: #00b862 !important; color: #fff; font: 700 20px/21px var(--font-hud); letter-spacing: .02em;
}
body .panel-bet .bet-max:hover { background: #26c27b !important; }
body.portrait .modal-card.panel-bet, body.portrait.skin-modal-frame .modal-card.panel-bet { left: auto; right: 10px; top: auto; bottom: 330px; }

/* ---- Definições do sistema (referência, medido na captura): janela preta 1056×624 (centro x 640, topo 3),
   quadrado preto do X no canto; px do palco relativos à janela ---- */
.modal:has(.panel-system) { background: transparent; }
body .modal-card.panel-system, body.skin-modal-frame .modal-card.panel-system {
  width: 1056px; height: 624px; max-height: none; margin-top: -90px; padding: 0 !important; position: relative;
  background: #050505f2 !important; border: 0 !important; border-image: none !important; border-radius: 12px; box-shadow: none !important;
  color: #fff; font-family: var(--font-hud); overflow: hidden !important; text-align: left;
}
body .modal-card.panel-system h2, body.skin-font-menu .modal-card.panel-system h2 {
  position: absolute; pointer-events: none; left: 0; right: 0; top: 46px; margin: 0; text-align: center;
  font: 700 22px/1 var(--font-hud) !important; color: #f2af31; letter-spacing: .02em; text-shadow: none;
}
body .modal-card.panel-system .panel-x {
  position: absolute; top: 0; right: 0; width: 80px; height: 93px; padding: 0; line-height: 93px; border-radius: 0 12px 0 0;
  background: #000 !important; border: 0 !important; color: #bebebe !important; font-size: 52px; font-weight: 200;
}
.panel-system .system-grid { display: block; margin: 0; }
.panel-system .system-col { position: absolute; }
.panel-system .system-col:first-child { left: 136px; top: 228px; width: 357px; }
.panel-system .system-col:last-child { left: 587px; top: 205px; width: 336px; }
/* histórico: linha entre divisórias, texto e ícone de link externo */
.panel-system .menu-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 76px; margin: 0; padding: 0 6px;
  background: none !important; border: 0; border-top: 1px solid #404040; border-bottom: 1px solid #404040; border-radius: 0;
  font: 700 20px/1 var(--font-hud); color: #8a8a8a; letter-spacing: .02em; cursor: pointer;
}
.panel-system .menu-row:hover { color: #fff; background: none !important; }
.panel-system .ext-link {
  width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v6H4V5h6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v6H4V5h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* aposta total: − branco, campo escuro, + verde */
.panel-system .stepper { margin: 0; position: absolute; left: 0; right: 0; top: 101px; }
.panel-system .stepper-label { margin: 0 0 23px; text-align: center; font: 700 20px/1 var(--font-hud); color: #fff; letter-spacing: .02em; }
.panel-system .stepper-row { gap: 22px; justify-content: flex-start; margin-left: -2px; }
body .panel-system .step-btn { width: 74px; height: 74px; border-radius: 50%; border: 0; font-size: 0 !important; color: transparent; position: relative; }
body .panel-system .step-btn.minus { background: #ebebeb !important; }
body .panel-system .step-btn.plus { background: #00b862 !important; }
.panel-system .step-btn::before, .panel-system .step-btn.plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 4px; translate: -50% -50%; border-radius: 2px; }
.panel-system .step-btn.minus::before { background: #333; }
.panel-system .step-btn.plus::before, .panel-system .step-btn.plus::after { background: #fff; }
.panel-system .step-btn.plus::after { width: 4px; height: 34px; }
body .panel-system .step-value {
  min-width: 0; width: 160px; height: 67px; box-sizing: border-box; padding: 0; line-height: 63px; text-align: center;
  background: #1f1f1f !important; border: 2px solid #404040 !important; border-radius: 8px; font: 700 23px/63px var(--font-hud); color: #fff;
}
/* interruptores: título + descrição em caixa alta; trilho 94×48 com puxador "III" (desligado cinza/branco, ligado verde) */
.panel-system .setting-row { position: relative; display: block; height: 76.8px; padding: 0; border: 0; cursor: pointer; }
.panel-system .setting-row span { display: block; padding-right: 108px; }
.panel-system .setting-row b { display: block; font: 700 20px/22px var(--font-hud); color: #fff; letter-spacing: .02em; }
.panel-system .setting-row small { display: block; margin-top: 2px; font: 700 12.5px/13.5px var(--font-hud); color: #c8c8c8; opacity: 1; letter-spacing: .02em; }
.panel-system .switch {
  position: absolute; right: 0; top: 3px; width: 94px; height: 48px; border-radius: 6px; background: #444; transition: background .15s;
}
.panel-system .switch::after {
  top: 0; left: 0; width: 46px; height: 48px; border-radius: 6px; transition: left .15s;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M2 0v14M8 0v14M14 0v14' stroke='%23999' stroke-width='2.4'/%3E%3C/svg%3E") center no-repeat;
}
.panel-system .switch:checked { background: #00703d; }
.panel-system .switch:checked::after {
  left: 48px;
  background: #00b764 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M2 0v14M8 0v14M14 0v14' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center no-repeat;
}
body.portrait .modal-card.panel-system, body.portrait.skin-modal-frame .modal-card.panel-system { margin-top: 0; zoom: .66; }

/* ---- Regras do jogo (referência): painel preto translúcido sobre o palco, sem moldura; sem escurecer o resto ---- */
.modal:has(.panel-info) { background: transparent; }
/* barra de baixo segue ativa por cima das regras (hover e toque; o toque fecha as regras — ui/panels.js openInfo);
   a faixa vazia da barra deixa passar o toque para o painel / fundo */
#stage:has(> .modal:not(.hidden) .panel-info) > .hud { z-index: 11; pointer-events: none; }
#stage:has(> .modal:not(.hidden) .panel-info) > .hud :is(button, .volume-pop) { pointer-events: auto; }
body .modal-card.panel-info, body.skin-modal-frame .modal-card.panel-info {
  width: 1250px; height: 727px; max-height: none; margin-top: -8px; padding: 22px 60px 20px !important; position: relative;
  background: #000000ee !important; border: 0 !important; border-image: none !important; border-radius: 14px; box-shadow: none !important;
  display: flex; flex-direction: column; color: #fff; font-family: var(--font-hud); overflow: hidden !important;
}
.panel-info .info-page h2 { font-size: 42px; color: #fff; margin: 0 0 4px; font-weight: 500; letter-spacing: .01em; text-shadow: none; }
.panel-info .info-lead { font-size: 26px; line-height: 1.2; text-align: center; margin: 0 60px 10px; font-weight: 700; }
.panel-info .info-page p { font-size: 26px; }
.panel-info .paytable { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; }
.panel-info .pay-row { display: flex; justify-content: space-around; }
.panel-info .pay-item { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; background: none; font-size: 22px; line-height: 1.05; }
.panel-info .pay-item .pay-icon { width: 104px; height: 104px; align-self: center; }
.panel-info .pay-lines b { font-weight: 500; margin-right: 10px; }
.panel-info .pay-lines { font-weight: 500; }
.panel-info .pay-scatter { display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 26px; line-height: 1.3; text-align: left; margin-top: 4px; }
.panel-info .pay-scatter .pay-icon { width: 118px; height: 118px; }
.panel-info .pay-icon :is(svg, img, .art) { width: 100%; height: 100%; object-fit: contain; }
/* navegação: ◀ ✕ ▶ verdes embaixo à esquerda, página embaixo à direita, X branco fino no canto */
.panel-info .info-nav { position: absolute; left: 60px; right: 60px; bottom: 24px; margin: 0; }
.panel-info .info-nav-btns { display: flex; align-items: center; gap: 14px; }
.panel-info .nav-arrow, .panel-info .nav-close { width: 46px; height: 50px; border: 0; border-radius: 0; background: #3fb52d; padding: 0; cursor: pointer; }
.panel-info .nav-arrow.prev { clip-path: polygon(100% 0, 100% 100%, 0 50%); background: linear-gradient(#7de35a, #2f9a1e); }
.panel-info .nav-arrow.next { clip-path: polygon(0 0, 0 100%, 100% 50%); background: linear-gradient(#7de35a, #2f9a1e); }
.panel-info .nav-close { width: 50px; background: linear-gradient(#7de35a, #2f9a1e);
  clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.panel-info .info-page-n { font-size: 22px; font-weight: 500; }
body .modal-card.panel-info .panel-x { background: none !important; color: #fff !important; font-size: 52px; font-weight: 200; width: 56px; height: 56px; top: 16px; right: 18px; border: 0 !important; line-height: 1; }
body.portrait .modal-card.panel-info, body.portrait.skin-modal-frame .modal-card.panel-info { width: 700px; height: 1400px; padding: 22px 24px; }
body.portrait .panel-info .pay-row { flex-wrap: wrap; row-gap: 14px; }
body.portrait .panel-info .pay-item { width: 30%; }
body.portrait .panel-info .info-nav { left: 24px; right: 24px; }

/* páginas de texto das regras (referência): tudo centralizado, subtítulos em caixa-alta */
.panel-info .info-page { text-align: center; }
.panel-info .info-page p { font-size: var(--info-fs, 22px); line-height: 1.18; margin: 0 0 8px; font-weight: 500; }
.panel-info .info-page p.info-tight { margin: 0; }
.panel-info .info-page p.info-gap { margin-top: 18px; }
.panel-info .info-page .info-sub { font-size: calc(var(--info-fs, 22px) * 1.5); margin: calc(var(--info-fs, 22px) * 0.8) 0 4px; }
.panel-info .info-vol { font-size: 22px; font-weight: 900; margin: 0 0 8px; }
.info-ico { display: inline-grid; place-items: center; vertical-align: -0.2em; font-style: normal; margin: 0 4px; color: #fff; }
.info-ico.round { width: 1.3em; height: 1.3em; border: 2px solid #fff; border-radius: 50%; font-size: 0.95em; line-height: 1; }
.info-ico.round.it { font-family: Georgia, serif; font-style: italic; font-weight: 700; }
.info-ico.spin { font-size: 1.3em; }
.info-ico.pill { padding: 1px 16px; border: 2px solid #fff; border-radius: 999px; font-size: 0.9em; font-weight: 700; }
.info-ico.tri { width: 1.1em; height: 1.1em; background: linear-gradient(#7de35a, #2f9a1e); }
.info-ico.tri.prev { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.info-ico.tri.next { clip-path: polygon(0 0, 0 100%, 100% 50%); }
.info-ico.xg { width: 1.1em; height: 1.1em; background: linear-gradient(#7de35a, #2f9a1e);
  clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }

/* ---- Comprar modo em paisagem (referência): painel na largura quase toda, cartões 3 + 2 ---- */
body:not(.portrait) .modal-card.panel-offers.green { width: 1240px; }
body:not(.portrait) .panel-offers.green h2 { font-size: 34px; color: #ffe23a; margin-bottom: 6px; }
body:not(.portrait) .panel-offers.green .panel-x { width: 50px; height: 50px; top: 58px; right: 34px; }
body:not(.portrait) .panel-offers.green .offer-grid.buy { gap: 10px 12px; margin: 8px 0 4px; }
body:not(.portrait) .panel-offers.green .offer-grid.buy .offer-card { width: 372px; min-height: 112px; padding: 16px 10px 12px; gap: 4px; }
body:not(.portrait) .panel-offers.green .offer-title { font-size: 19px; }
body:not(.portrait) .panel-offers.green .offer-price { font-size: 28px; }
body:not(.portrait) .panel-offers.green .offer-desc { font-size: 14px; }
body:not(.portrait) .panel-offers.green .stepper-label { font-size: 22px; color: #ffe23a; }
body:not(.portrait) .panel-offers.green .step-btn { width: 64px; height: 64px; }
body:not(.portrait) .panel-offers.green .step-value { min-width: 230px; height: 68px; line-height: 56px; font-size: 34px; }
/* botão lateral em paisagem: título grande amarelo, "5 OPÇÕES" branco (referência) */
body:not(.portrait).skin-feature-buy #btn-buy .feature-title { font-size: 25px; color: #ffe23a; line-height: 27px; text-shadow: 0 2px 0 #3a2a00, 0 0 6px #0008; }
body:not(.portrait).skin-feature-buy #btn-buy .feature-sub { font-size: 16px; color: #fff; text-transform: uppercase; font-weight: 900; }
body:not(.portrait).skin-modal-frame-green .modal-card.panel-offers.green { padding-top: 30px !important; }
body:not(.portrait) .panel-offers.green .panel-x { top: 26px; }

/* ---- Trilha: rótulos alinhados como na referência ---- */
/* atual (cúpula): rótulo maior e um pouco abaixo do centro (o arco cobre o topo da cúpula) */
.trail-plate.cur .bmf-label img { height: 46px; transform: translateY(8px); }
/* rótulos mais perto da borda da grade (referência) */
.trail-plate:not(.cur) .bmf-label img { transform: translateY(7px); }
/* retrato: a barra de cima da moldura cobre o pé das placas → placas e arco sobem 12 px */
body.portrait.skin-trail-plate .trail-plate { bottom: 14px; } /* apoiadas na barra de cima da grade */
body.portrait.skin-trail-arch .trail-arch { top: -68px; }

/* valores da trilha: mesma caixa da placa (o texto fica no mesmo lugar), sem fundo — as placas ficam paradas */
#trail .trail-plate.lbl { background: none !important; border: 0 !important; box-shadow: none !important; }
/* dourado da placa seguinte: a arte tem mais folga e letra menor → maior para igualar a prateada */
.trail-plate.next .bmf-trail-gold img { height: 40px; transform: translateY(5px); }
/* paisagem (referência, medido junto ao arco): atual ~8 px mais alta, anterior 1 px abaixo, seguinte 2 px abaixo e 13 px à esquerda */
body:not(.portrait) .trail-plate.cur .bmf-label img { transform: translateY(0.5px); }
body:not(.portrait) .trail-plate.prev .bmf-label img { transform: translateY(8px); }
body:not(.portrait) .trail-plate.next .bmf-label img { transform: translate(-13px, 7px); }

/* ---- cena do gamble (ui/gamble-scene.js) ---- */
body.skin-gamble-wheel-lose .gb-lose { background-image: var(--skin-gamble-wheel-lose); background-color: transparent; }
body.skin-gamble-wheel-win .gb-win { background-image: var(--skin-gamble-wheel-win); background-color: transparent; }
body.skin-gamble-divider .gb-div { background-image: var(--skin-gamble-divider); }
body.skin-gamble-inner-ring .gb-inner { background-image: var(--skin-gamble-inner-ring); box-shadow: none; }
body.skin-gamble-button .gb-orb { background-image: var(--skin-gamble-button); }
body.skin-gamble-ring .gb-ring { background-image: var(--skin-gamble-ring); box-shadow: none; }
body.skin-gamble-pointer .gb-arrow { background-image: var(--skin-gamble-pointer); clip-path: none; background-color: transparent; }
body.skin-gamble-collect .gb-cbg { background: var(--skin-gamble-collect) center / 100% 100% no-repeat; box-shadow: none; border-radius: 0; }
body.skin-gamble-collect-frame .gb-cbg::after { background-image: var(--skin-gamble-collect-frame); }
/* contador das rodadas grátis: mesma fonte dos letreiros (referência) */
body.skin-font-title :is(.fs-count, .fs-label) { font-family: 'DUAT Title', 'DUAT Display', system-ui, sans-serif; }

/* ---- − / + da aposta no HUD (referência): anel branco fino, miolo escuro translúcido, símbolo branco fino.
   A arte das bolas vermelhas (ui/bet-minus, ui/bet-plus) fica só nos seletores do painel de apostas especiais. ---- */
body[class] .hud :is(#btn-minus, #btn-plus) {
  background: #00000040 !important; border: 2px solid #fff !important; border-radius: 50% !important; box-shadow: none !important;
  color: transparent !important; font-size: 0 !important; padding: 0 !important;
}
body[class] .hud :is(#btn-minus, #btn-plus)::before, body[class] .hud #btn-plus::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; background: #fff; border-radius: 1px; transform: translate(-50%, -50%);
}
body[class] .hud #btn-plus::after { width: 2px; height: 50%; }
body:not(.portrait) .hud #btn-minus { left: 868px; top: 38px; width: 46px; height: 46px; }
body:not(.portrait) .hud #btn-plus { left: 1064px; top: 38px; width: 46px; height: 46px; }

/* ---- Apostas especiais em paisagem (referência): painel quase na largura toda, 3 cartões lado a lado,
   título no alto da moldura com o X na mesma linha, seletor de aposta maior ---- */
body:not(.portrait) .modal-card.panel-offers.red { width: 1180px; padding-top: 44px !important; padding-bottom: 30px !important; }
/* janela da referência (asas no topo): arte inteira esticada na caixa; moldura dourada em 200–528 do palco */
body:not(.portrait).skin-modal-frame-red .modal-card.panel-offers.red {
  width: 1212px; height: 377px; box-sizing: border-box; padding: 49px 60px 0 !important;
  border: 0 !important; border-image: none !important; box-shadow: none !important;
  background: var(--skin-modal-frame-red) center / 100% 100% no-repeat !important;
}
body:not(.portrait).skin-modal-frame-red .panel-offers.red .panel-x { top: 41px; right: 44px; }
body:not(.portrait) .panel-offers.red h2 { font-size: 30px; color: #ffe23a; margin-bottom: 4px; }
body:not(.portrait) .panel-offers.red .panel-x { width: 52px; height: 52px; top: 36px; right: 30px; }
body:not(.portrait) .panel-offers.red .offer-grid.ante { flex-wrap: nowrap; gap: 8px; margin: 8px 0 4px; }
body:not(.portrait) .panel-offers.red .offer-grid.ante .offer-card { flex: 0 0 368px; width: 368px; min-height: 110px; padding: 14px 10px 12px; gap: 3px; }
body:not(.portrait) .panel-offers.red .offer-title { font-size: 18px; }
body:not(.portrait) .panel-offers.red .offer-price { font-size: 24px; margin: 4px 0 1px; }
body:not(.portrait) .panel-offers.red .offer-desc { font-size: 16px; }
body:not(.portrait) .panel-offers.red .stepper-label { font-size: 18px; color: #ffe23a; }
body:not(.portrait) .panel-offers.red .step-btn { width: 61px; height: 61px; }
body:not(.portrait) .panel-offers.red .step-value { min-width: 224px; height: 61px; line-height: 51px; font-size: 35px; }
/* cartões 110 de altura em 282–392; "APOSTA BASE" em y 405; seletor centrado em y 464 (referência) */
body:not(.portrait).skin-modal-frame-red .panel-offers.red .offer-grid.ante { margin: 22px 0 0; }
body:not(.portrait).skin-modal-frame-red .panel-offers.red .offer-grid.ante .offer-card { height: 110px; min-height: 0; padding: 8px 10px 6px; gap: 0; justify-content: center; }
body:not(.portrait).skin-modal-frame-red .panel-offers.red .stepper { margin: 0 auto; }
body:not(.portrait).skin-modal-frame-red .panel-offers.red .stepper-label { margin: 1px 0 16px; }
/* referência: títulos das Super Rodadas menores que o da Aposta Ante; descrição 15 px */
body:not(.portrait) .panel-offers.red .offer-card:is(.ante-2, .ante-3) .offer-title { font-size: 13.5px; }
body:not(.portrait) .panel-offers.red .offer-desc { font-size: 15px; }
/* fonte da referência nos textos do painel de apostas especiais: Kirsty Regular (fonts/label) */
body.skin-font-label .panel-offers.red :is(h2, .offer-title, .offer-price, .offer-desc, .stepper-label, .step-value) { font-family: 'DUAT Label', 'DUAT Display', sans-serif; letter-spacing: 0; font-weight: 400; }
/* tamanhos com a Kirsty Regular, pelas larguras medidas na referência (800×450) */
body.skin-font-label:not(.portrait) .panel-offers.red .offer-card.ante-1 .offer-title { font-size: 17px; }
body.skin-font-label:not(.portrait) .panel-offers.red .offer-desc { font-size: 15.5px; }
body.skin-font-label:not(.portrait) .panel-offers.red .stepper-label { font-size: 18.5px; }
body.skin-font-label:not(.portrait) .panel-offers.red .step-value { font-size: 37px; }
/* valores em branco→cinza como na referência */
body.skin-font-label:not(.portrait) .panel-offers.red .offer-price {
  background: linear-gradient(#ffffff 35%, #b4b4b4); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 1px 0 #3a0000) drop-shadow(0 0 1px #3a0000);
}
body.skin-font-label:not(.portrait) .panel-offers.red .step-value { color: #e8e8e8; text-shadow: 0 2px 0 #0009; }

/* ==== Fontes por área, como na referência (config da demo) ====
   Futura Condensed ExtraBold (fonts/display) é o padrão: HUD, mensagens e janelas de sistema.
   Kirsty Bold (title) · Kirsty Regular (label) · Aviano Flare Bold (counter) · Futura Bold (menu) · Go Noto Kurrent (rules).
   As fontes da demo vêm recortadas por idioma: os arquivos da skin são a união dos pacotes, com as maiúsculas acentuadas
   que faltavam montadas (base + acento da mesma família). */
:root {
  --f-title: 'DUAT Title', 'DUAT Display', sans-serif;
  --f-label: 'DUAT Label', 'DUAT Title', 'DUAT Display', sans-serif;
  --f-counter: 'DUAT Counter', 'DUAT Title', sans-serif;
  --f-menu: 'DUAT Menu', 'DUAT Display', sans-serif;
  --f-rules: 'DUAT Rules', 'DUAT Display', sans-serif;
}
/* Kirsty Bold: pop-ups das rodadas grátis (início, retrigger, resumo), histórico de ganhos, gamble, título do Comprar modo */
body.skin-font-title :is(.modal-card:not([class*="panel-"]), .modal-card.panel-fs-intro, .win-log, #gamble, .bigwin-hint),
body.skin-font-title :is(.modal-card:not([class*="panel-"]), .modal-card.panel-fs-intro, #gamble) :is(button, h1, h2, p, span),
body.skin-font-title .panel-offers.green h2 { font-family: var(--f-title) !important; }
/* Kirsty Regular: botões laterais, cartões e seletor do Comprar modo, confirmação, apostas especiais, textos da intro */
body.skin-font-label :is(.feature-btn .feature-title, .feature-btn .feature-sub, .intro-slide h1),
body.skin-font-label .panel-offers.green :is(.offer-title, .offer-price, .offer-desc, .stepper-label, .step-value),
body.skin-font-label .panel-confirm :is(h2, .offer-title, .offer-price, .offer-desc, .pill-btn),
body.skin-font-label .panel-offers.red :is(h2, .offer-title, .offer-price, .offer-desc, .stepper-label, .step-value) { font-family: var(--f-label) !important; letter-spacing: 0; }
/* Aviano Flare Bold: contador de rodadas grátis */
body.skin-font-counter :is(.fs-count, .fs-label) { font-family: var(--f-counter) !important; }
/* Futura Bold: títulos das janelas de sistema; Go Noto Kurrent: texto das regras */
body.skin-font-menu :is(.panel-bet, .panel-auto, .panel-info, .panel-wide) h2 { font-family: var(--f-menu) !important; }
body.skin-font-rules .panel-info :is(p, li, td, th, h3, h4, small), body.skin-font-rules .intro-check { font-family: var(--f-rules) !important; }
/* as fontes da referência têm um peso só: sem negrito/itálico artificial do navegador (a demo não engrossa) */
body.skin-font-display, body.skin-font-display * { font-synthesis: none; }
/* Comprar modo em paisagem com as fontes da referência (Kirsty Bold no título, Kirsty Regular no resto) */
body.skin-font-label:not(.portrait) .modal-card.panel-offers.green { width: 1180px; } /* janela 1658 unidades × 0,7119 (medido nos pixels da demo) */
body.skin-font-title:not(.portrait) .panel-offers.green h2 { font-size: 26.9px; }
body.skin-font-label:not(.portrait) .panel-offers.green .offer-price { font-size: 21px; }
body.skin-font-label:not(.portrait) .panel-offers.green .offer-desc { font-size: 14.2px; }
body.skin-font-label:not(.portrait) .panel-offers.green .stepper-label { font-size: 18.1px; }
body.skin-font-label:not(.portrait) .panel-offers.green .step-value { font-size: 35.7px; }
/* Comprar modo em paisagem montado nas coordenadas da referência (PurchaseWindow, janela 1658 × 638 unidades = 1180 × 454 px):
   centro da janela = 0, y para cima. Título e X em y 250 (X em x 750); cartões da 1ª fileira em y 120, x −520/0/520,
   da 2ª em y −40, x ±260, cada um com o tamanho da sua arte; no cartão, nome em +40, preço em +2, descrição em −36;
   seletor: rótulo em −155, valor 306×90 em −230, botões 88×88 em ±205. */
body.skin-offer-card-buy-1:not(.portrait) .modal-card.panel-offers.green { --u: calc(1180px / 1658); height: 454px; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green :is(h2, .panel-x, .offer-card, .stepper-label, .step-btn, .step-value) {
  position: absolute; left: calc(50% + var(--x, 0) * var(--u)); top: calc(50% - var(--y, 0) * var(--u)); translate: -50% -50%; margin: 0; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green h2 { --y: 250; width: max-content; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .panel-x { --x: 750; --y: 250; right: auto; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-grid.buy { margin: 0; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-grid.buy .offer-card { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); min-height: 0; padding: 0; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-card.buy-1 { --x: -520; --y: 120; --w: 506; --h: 150; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-card.buy-2 { --x: 0; --y: 120; --w: 512; --h: 154; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-card.buy-3 { --x: 520; --y: 120; --w: 512; --h: 158; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-card.buy-4 { --x: -260; --y: -40; --w: 512; --h: 160; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-card.buy-5 { --x: 260; --y: -40; --w: 510; --h: 158; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-card > * { position: absolute; left: 50%; translate: -50% -50%; width: max-content; margin: 0; line-height: 1; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-title { top: calc(50% - 40 * var(--u)); font-size: 18.6px; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-price { top: calc(50% - 2 * var(--u)); }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .offer-desc { top: calc(50% + 36 * var(--u)); }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .stepper { margin: 0; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .stepper-label { --y: -155; width: max-content; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .step-value { --y: -230; width: calc(306 * var(--u)); height: calc(90 * var(--u)); min-width: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .step-btn { --y: -230; width: calc(88 * var(--u)); height: calc(88 * var(--u)); }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .step-btn.minus { --x: -205; }
body.skin-offer-card-buy-1:not(.portrait) .panel-offers.green .step-btn.plus { --x: 205; }
/* Confirmar e comprar com a Kirsty Regular (referência): proporções medidas contra a janela da demo */
body.skin-font-label .panel-confirm h2 { font-size: 38px; }
body.skin-font-label:not(.portrait) .panel-confirm h2 { font-size: 36px; }
body.skin-font-label .panel-confirm .offer-price { font-size: 26.5px; }
body.skin-font-label .panel-confirm .offer-desc { font-size: 18px; }
body.skin-font-label .panel-confirm .modal-actions .pill-btn { font-size: 36px; }
/* gamble com a Kirsty Bold (referência): tamanhos em unidades da cena, medidos contra a demo */
/* revisão (pixels reais da demo, janela 943×649; 1 unidade = 0,426 px): maiúscula título/centro/info 15 px,
   RECOLHER 12 px; a demo é mais larga → espaçamento entre letras para a mesma largura; aviso numa linha só */
body.skin-font-title .gb-title { font-size: 45px; line-height: 1.096; letter-spacing: 0.06em; }
body.skin-font-title .gb-press span { font-size: 45.2px; line-height: 1.065; letter-spacing: 0.06em; position: relative; top: 13px; }
body.skin-font-title .gb-collect span { font-size: 36.2px; letter-spacing: 0.045em; top: 8.25px; }
body.skin-font-title .gb-info p { font-size: 44.1px; letter-spacing: 0.047em; }
body.skin-font-title:not(.portrait) .gb-info p { white-space: nowrap; width: max-content; }
body.skin-font-title .gb-info .gb-l1 { top: 458.9px; }
body.skin-font-title .gb-info .gb-l2 { top: 538.7px; }
/* ajuste manual (editor ?gambleedit, paisagem) */
body.skin-font-title:not(.portrait) .gb-press span { translate: -7px -18.8px; }
body.skin-font-title:not(.portrait) .gb-collect span { translate: -2.4px -12.1px; }

/* ---- Faixa inferior (referência: artes da interface da demo) ---- */
/* giro: disco + anel + folha na arte do botão (anel = 166 de 186 → elemento 132 para o anel ficar com 118);
   setas duplas por cima, somem durante o giro como o ícone antigo */
body:not(.portrait).skin-spin-button #btn-spin { left: 920px; top: -9px; width: 140px; height: 140px; }
body.skin-spin-icon #btn-spin::before {
  content: ''; position: absolute; left: 13.5%; top: 21%; width: 73%; height: 61%;
  background: var(--skin-spin-icon) center / contain no-repeat; pointer-events: none;
}
body.skin-spin-icon #btn-spin.spinning::before { display: none; }
/* menu e som em anel branco; som mudo com a arte própria */
body:not(.portrait).skin-icon-menu .hud-icons > #btn-menu { left: 128px; top: 49px; width: 28px; height: 28px; padding: 0; }
body:not(.portrait).skin-icon-volume .hud-icons > #btn-volume { left: 128px; top: 87px; width: 28px; height: 28px; padding: 0; }
body.skin-icon-volume-mute #btn-volume.muted { background-image: var(--skin-icon-volume-mute) !important; }
/* jogo automático: pill da demo com o indicador de velocidade (»») à esquerda, que troca com a velocidade */
body:not(.portrait).skin-auto-button #btn-auto { left: 893px; width: 199px; border-radius: 0; color: #fff; }
body:not(.portrait).skin-speed-button #btn-speed { left: 893px; width: 41px; }
body.skin-speed-button #speed-label { display: none; }
body.skin-speed-button-quick #btn-speed[data-speed="quick"] { background-image: var(--skin-speed-button-quick) !important; }
body.skin-speed-button-turbo #btn-speed[data-speed="turbo"] { background-image: var(--skin-speed-button-turbo) !important; }
/* retrato: esses quatro botões são pílulas próprias; mantém o visual CSS */
body.portrait:is(.skin-icon-menu, .skin-icon-volume) .hud-icons > :is(#btn-menu, #btn-volume),
body.portrait:is(.skin-auto-button, .skin-speed-button) :is(#btn-auto, #btn-speed) {
  background-image: none !important; background-color: #000a !important; border-color: #fff8 !important;
}
body.portrait :is(#btn-menu, #btn-volume, #btn-speed) svg { visibility: visible !important; }
/* mensagens longas (ex.: dica do giro turbo) em fonte menor, em 2 linhas (referência: 30 contra 43) */
.hud #msg.long { font-size: 17.5px !important; line-height: 19px; white-space: normal !important; box-sizing: border-box; padding: 0 30px; } /* 370 de largura: quebra como a demo */
body.portrait .hud #msg.long { font-size: 28px !important; line-height: 31px; }

/* ---- Recompra (referência: depois de comprar e perder no gamble) ----
   Paisagem: "Comprar modo" encolhe (palco 37–149) e "Recomprar <opção> / preço" entra embaixo (158–270);
   apostas especiais e histórico não mudam. Posições relativas à .side-left (12, 94). */
.feature-btn.rebuy { background: radial-gradient(circle at 50% 35%, #5fae4a, #1d5a26 70%); }
.feature-btn.rebuy:disabled { filter: none; cursor: default; }
body:not(.portrait).has-rebuy #btn-buy { top: -57px; left: -2.4px; width: 188px; height: 112px; padding-bottom: 4px; }
body:not(.portrait) #btn-rebuy { position: absolute; left: -2.4px; top: 64px; width: 188px; height: 112px; gap: 2px; padding: 6px 14px 8px; background-origin: border-box; }
body:not(.portrait).has-rebuy #btn-buy .feature-title { font-size: 20px !important; line-height: 20.5px !important; margin-top: -4px; }
body:not(.portrait).has-rebuy #btn-buy .feature-sub { font-size: 15.5px !important; margin-top: 0; }
#btn-rebuy .feature-title { font-size: 16px; line-height: 18px; color: #ffe23a; text-shadow: 0 2px 0 #3a2a00, 0 0 6px #0008; }
#btn-rebuy .feature-sub { font-size: 17px; color: #fff; font-weight: 900; margin-top: 11px; text-shadow: 0 2px 0 #000a; }
body.skin-feature-buy-rebuy.has-rebuy #btn-buy { background-image: var(--skin-feature-buy-rebuy) !important; }
body[class*="skin-feature-rebuy-"] #btn-rebuy { background-color: transparent !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; border-color: transparent !important; box-shadow: none !important; }
body.skin-feature-rebuy-1 #btn-rebuy.rebuy-1 { background-image: var(--skin-feature-rebuy-1) !important; }
body.skin-feature-rebuy-2 #btn-rebuy.rebuy-2 { background-image: var(--skin-feature-rebuy-2) !important; }
body.skin-feature-rebuy-3 #btn-rebuy.rebuy-3 { background-image: var(--skin-feature-rebuy-3) !important; }
body.skin-feature-rebuy-4 #btn-rebuy.rebuy-4 { background-image: var(--skin-feature-rebuy-4) !important; }
body.skin-feature-rebuy-5 #btn-rebuy.rebuy-5 { background-image: var(--skin-feature-rebuy-5) !important; }
:is(#btn-rebuy:not(:disabled)):hover { transform: scale(1.01); transition: none; }
:is(#btn-rebuy:not(:disabled)):active { transform: scale(0.99); transition: none; }
/* retrato: três na fileira (comprar | recomprar | apostas especiais, mais estreita) */
body.portrait.has-rebuy #btn-buy { left: -5px; width: 240px; }
body.portrait #btn-rebuy { position: absolute; left: 238px; top: 1037px; width: 240px; height: 132px; gap: 4px; padding: 10px 12px; }
body.portrait.has-rebuy #btn-ante { left: 482px; width: 248px; padding-right: 96px; }
body.portrait.has-rebuy #btn-ante .ante-toggle { right: 10px; width: 84px; }
body.portrait.has-rebuy #btn-buy .feature-title { font-size: 28px; }
body.portrait #btn-rebuy .feature-title { font-size: 21px; line-height: 23px; }
body.portrait #btn-rebuy .feature-sub { font-size: 22px; margin-top: 4px; }
/* janela "Confirmar recompra": card + seletor de aposta + cancelar / sim (arte rebuy-frame, sem ela confirm-frame) */
body.skin-rebuy-frame .modal-card.panel-rebuy { background-image: var(--skin-rebuy-frame) !important; }
/* proporção da arte 694×606; posições como na referência: card, "APOSTA BASE" + seletor, botões */
body:not(.none) .modal-card.panel-rebuy { height: 548px; }
body:not(.none) .panel-rebuy .stepper { position: absolute; left: 0; right: 0; top: 284px; margin: 0; }
body:not(.none) .panel-rebuy .stepper-label { margin: 0 0 8px; font-size: 21px; color: #ffe23a; font-family: var(--f-label, 'DUAT Label'), 'DUAT Display', sans-serif; }
/* seletor na proporção da referência (88 / 306×90 numa janela de 694) */
body:not(.none) .panel-rebuy .stepper-row { gap: 14px; }
body:not(.none) .panel-rebuy .step-btn { width: 78px; height: 78px; }
body:not(.none) .panel-rebuy .step-value { min-width: 272px; height: 80px; line-height: 66px; font-size: 42px; font-family: var(--f-label, 'DUAT Label'), 'DUAT Display', sans-serif; color: #e8e8e8; text-shadow: 0 2px 0 #0009; }
body:not(.none) .panel-rebuy .modal-actions { top: 420px; }

/* ---- Big win (referência): sem "toque para continuar" — fecha sozinho; valor some no fim junto com as animações ---- */
.bigwin-hint { display: none; }
.bigwin.ending .bigwin-amount { opacity: 0; transition: opacity .25s linear; } /* referência: HideValueHolder = fade invertido de 0,25 s */
/* com o Spine: o valor fica na placa vermelha do efeito da frente (referência, paisagem: centro ≈ 653, 576 do palco) */
body.spine-bigwin:not(.portrait) .bigwin-amount { position: absolute; left: 653px; top: var(--bw-amount-y, 576px); margin: 0; translate: -50% -50%; font-size: calc(56px * var(--bw-k, 1)); white-space: nowrap; } /* placa: ui/spine-scene.js bigWinTier */
/* paisagem: animação e moedas cobrem a sobra além do palco (a cena encosta no pé da tela, como a referência) */
body:not(.portrait) #bigwin > :is(.spine-bigwin, .bigwin-coins) { inset: auto; left: calc(var(--bleed-x, 0px) * -1); top: calc(var(--bleed-y, 0px) * -1); width: calc(100% + 2 * var(--bleed-x, 0px)); height: calc(100% + 2 * var(--bleed-y, 0px)); }

/* ---- Tela de vitória das rodadas grátis (Spine "banner"): textos presos aos ossos, como a referência ---- */
#stage > .spine-fswin { z-index: 13; pointer-events: none; transition: background-color .3s; }
/* paisagem: cobre a sobra além do palco (o banner fica preso ao pé da tela) */
body:not(.portrait) #stage > .spine-fswin { left: calc(var(--bleed-x, 0px) * -1); top: calc(var(--bleed-y, 0px) * -1); width: calc(100% + 2 * var(--bleed-x, 0px)); height: calc(100% + 2 * var(--bleed-y, 0px)); }
#stage > .spine-fswin.on { background-color: #000000d3; box-shadow: 0 0 0 4000px #000000d3; } /* referência: BlackBg preto com alfa 0,827 */
.fs-win { position: absolute; inset: 0; z-index: 14; cursor: pointer; }
.fs-win > div { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; text-align: center;
  font-family: 'DUAT Title', 'DUAT Display', sans-serif; line-height: 1; opacity: 0; transition: opacity .4s; }
.fs-win.show > div { opacity: 1; }
.fs-win.hide > div { opacity: 0; }
.fs-win > div > i { font-style: normal; display: block; }
.fs-win > div > .o { -webkit-text-stroke: var(--sw, 9px) var(--stroke, #2a1600); color: var(--stroke, #2a1600); filter: drop-shadow(0 4px 0 #0009); }
.fs-win > div > .f { position: absolute; left: 0; top: 0; background: var(--fill); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* tamanhos medidos na referência (paisagem) */
.fs-win-title { --fill: linear-gradient(#fffbd2 8%, #ffd85a 45%, #f0a51f 62%, #b8650f 92%); --stroke: #3b1d03; --sw: 14px; font-size: 117px; letter-spacing: .01em; }
.fs-win-won, .fs-win-sub { --fill: linear-gradient(#ffffff 15%, #d9f0ff 50%, #8cc8ff 90%); --stroke: #10264f; --sw: 9px; font-size: 58px; }
.fs-win-value { --fill: linear-gradient(#fffaf0 20%, #f3dfb6 80%); --stroke: #5a0d06; --sw: 8px; font-family: 'DUAT Counter', 'DUAT Title', sans-serif; font-size: 94px; }
.fs-win-cont { --fill: linear-gradient(#ffffff, #f0f0f0); --stroke: #03181a; --sw: 7px; font-size: 35px; }
/* paisagem (referência: tamanhos dos rótulos do FSStart × 0,7215 do Main para o palco) */
body:not(.portrait) .fs-win-title { font-size: 108.2px; }
body:not(.portrait) :is(.fs-win-won, .fs-win-sub) { font-size: 54.1px; }
body:not(.portrait) .fs-win-value { font-size: 66.6px; } /* referência: altura real 35 px de tela (fonte do contador; o 120 do rótulo é de outra fonte) */
body:not(.portrait) .fs-win-cont { font-size: 32.5px; }
/* o número usa a fonte do contador (referência); `.fs-win > div` tinha prioridade e trocava pela do título */
.fs-win > .fs-win-value { font-family: 'DUAT Counter', 'DUAT Title', sans-serif; }
/* moedas do big win (coinFountain em main.js): posição por transform a partir do canto do palco */
.bigwin-coins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bigwin-coin { left: 0; top: 0; will-change: transform; }
.bigwin-coin:has(.art) { width: 96px; height: auto; border-radius: 0; } /* moeda ~48 px, como a referência */
.bigwin-coin .art { width: 100%; display: block; }

/* ---- Regras do jogo — revisão pela referência (medido na captura; px do palco relativos à janela 1254×726,
   presa 22 px abaixo do topo visível). Fonte das regras em tudo; seções espalhadas na altura ---- */
body .modal-card.panel-info, body.skin-modal-frame .modal-card.panel-info {
  width: 1254px; height: 726px; align-self: start; margin-top: 22px; padding: 0 !important;
}
body .modal-card.panel-info, body .modal-card.panel-info :is(h2, p, div, b, span, section) { font-family: var(--f-rules, var(--font-hud)) !important; }
body .modal-card.panel-info .panel-x { top: 14px; right: 7px; width: 56px; height: 56px; font-size: 54px; font-weight: 200; line-height: 56px; color: #fff !important; }
.panel-info .info-page {
  position: absolute; left: 0; right: 0; top: 34px; bottom: 96px; margin: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
}
.panel-info .info-page.info-multi { justify-content: space-around; }
.panel-info .info-page:not(.info-multi):not(.info-pay):not(:has(p:nth-of-type(8))) { padding-top: 34px; } /* página curta: título mais baixo, como na referência */
.panel-info .info-page section { width: 990px; max-width: calc(100% - 40px); }
body .panel-info .info-page h2 { font-size: 30px !important; line-height: 34px; font-weight: 400 !important; color: #fff; margin: 0 0 3px; letter-spacing: .01em; text-shadow: none; }
body .panel-info .info-page .info-sub { font-size: 30px !important; line-height: 34px; margin: 0 0 3px; }
.panel-info .info-page p { font-size: var(--info-fs, 20px); line-height: 1.16; margin: 0; font-weight: 400; color: #fff; }
.panel-info .info-page p.info-gap { margin-top: 1.16em; }
.panel-info .info-page .info-vol { font-size: var(--info-fs, 20px); font-weight: 400; margin: 0 0 6px; }
/* página 1: tabela de prêmios em posições fixas */
.panel-info .info-page.info-pay { top: 0; bottom: 0; display: block; overflow: visible; }
.panel-info .info-pay h2 { position: absolute; left: 0; right: 0; top: 20px; margin: 0; }
.panel-info .info-pay .info-lead { position: absolute; left: 0; right: 0; top: 50px; margin: 0 auto; width: 1000px; font-size: 20px; line-height: 22.4px; font-weight: 400; }
.panel-info .info-pay .paytable { position: absolute; left: 0; right: 0; top: 109px; margin: 0; display: block; }
.panel-info .info-pay .pay-row { position: absolute; left: 0; right: 0; display: grid; justify-content: center; }
.panel-info .info-pay .pay-row:first-child { top: 0; grid-template-columns: repeat(4, 264px); }
.panel-info .info-pay .pay-row:last-child { top: 213px; grid-template-columns: repeat(5, 266px); }
.panel-info .info-pay .pay-item { display: block; padding: 0; background: none; text-align: left; }
.panel-info .info-pay .pay-item .pay-icon { width: 112px; height: 112px; margin: 0 auto; }
.panel-info .info-pay .pay-lines { margin: 21px 0 0 calc(50% - 96px); font-size: 19px; line-height: 20.8px; font-weight: 400; white-space: nowrap; }
.panel-info .info-pay .pay-row:last-child .pay-lines { margin-top: 7px; margin-left: calc(50% - 90px); }
.panel-info .info-pay .pay-lines b { font-weight: 400; margin-right: 8px; }
.panel-info .info-pay .pay-scatter { position: absolute; left: 440px; top: 538px; margin: 0; display: flex; align-items: center; gap: 24px; font-size: 20px; line-height: 22.4px; text-align: left; }
.panel-info .info-pay .pay-scatter .pay-icon { width: 128px; height: 128px; }
/* navegação (referência): ◀ ✕ ▶ centros em x 75/141/205, y 670; "Página n/8" à direita */
.panel-info .info-nav { left: 52px; right: 56px; bottom: 31px; display: flex; align-items: center; justify-content: space-between; }
.panel-info .info-nav-btns { gap: 20px; }
.panel-info .nav-arrow, .panel-info .nav-close { width: 45px; height: 50px; }
.panel-info .info-page-n { font-size: 18px; font-weight: 400; }
/* X do canto sempre por cima do conteúdo da janela (o título/área de texto em posição absoluta cobriam o clique) */
body .modal-card :is(.panel-x, .info-nav) { z-index: 3; }
body .modal-card .panel-x { position: absolute; }

/* ---- Contador das rodadas grátis (referência FSLeftIndicator: duas camadas, fontes próprias) ----
   frente: degradê dourado/creme + contorno #985f21; atrás: 3 sombras borradas #211b0b mais abaixo */
#fs-panel :is(.fs-count, .fs-label) { background: none; filter: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; position: absolute; }
#fs-panel :is(.fs-count, .fs-label) > i { display: block; font-style: normal; white-space: nowrap; }
#fs-panel :is(.fs-count, .fs-label) > .o { color: #985f21; -webkit-text-stroke: 4.4px #985f21;
  text-shadow: 0 4.3px 12px #211b0b, 0 4.3px 12px #211b0b, 0 4.3px 12px #211b0b; }
#fs-panel :is(.fs-count, .fs-label) > .f { position: absolute; left: 0; top: 0; width: 100%;
  background: linear-gradient(#fffd85 15%, #f5f5de 29%, #f7f4da 40%, #ffde55 50%, #b9952e 60%, #dd913b 68%, #e5b73c 77%, #f9da58);
  background-size: 100% 1lh; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* paisagem: coluna centrada em x 109,7 do palco (painel começa em 12, 94); caixas de 158,7 px (220 unidades) */
body:not(.portrait) #fs-panel :is(.fs-count, .fs-label) { left: 18.3px; right: auto; width: 158.7px; font-weight: 400; }
body:not(.portrait) #fs-panel .fs-count { top: 152px; font-size: 86.6px; line-height: 1; font-family: 'DUAT Counter Value', var(--f-counter) !important; }
body:not(.portrait) #fs-panel .fs-label { top: 287.7px; left: 21px; width: 153.3px; font-size: 28.9px; line-height: 1; font-family: 'DUAT Counter Label', var(--f-counter) !important; }
body:not(.portrait) #fs-panel.last .fs-label { top: 209px; font-size: 32.5px; } /* centro ~351 do palco (estimado no print do fim)  */

/* banner das rodadas grátis: letreiros em camadas (ui/spine-scene.js BANNER_LAYERS); o contorno fica atrás do preenchimento */
.fs-win > .fs-ly > .ly { font-style: normal; display: block; paint-order: stroke fill; filter: none; }
.fs-win > .fs-ly > .ly:not(.ly0) { position: absolute; left: 0; top: 0; }
.fs-win > .fs-ly { --sw: 0px; }
/* número do banner: fonte em imagem (referência: tinta do "10" com 35 px de tela na janela 943×649 → imagem 1 em) */
.fs-win > .fs-win-value .bmf img { height: 1.005em; margin: 0 0.034em; } /* avanço da fonte: ~16 unidades entre as letras */
.fs-win > .fs-win-value:has(.bmf) { -webkit-text-stroke: 0; filter: none; }
/* referência: os letreiros do banner usam fonte própria (f215…, extraída como fonts/banner) */
.fs-win > :is(.fs-win-title, .fs-win-won, .fs-win-sub, .fs-win-cont) { font-family: 'DUAT Banner', 'DUAT Title', 'DUAT Display', sans-serif; }
/* paisagem: a cena do big win passa da borda do palco até o pé da tela (referência) */
body:not(.portrait) #stage > .bigwin { overflow: visible; }

/* Janela de retrigger das rodadas grátis (referência FSExtra): letreiros dourados em camadas sobre o centro da
   grade, sem caixa; a animação de escala/transparência vem do JS (retriggerPop) */
#stage > .fs-extra { position: absolute; width: 0; height: 0; z-index: 26; pointer-events: none; transform: scale(0); opacity: 0; }
.fs-extra > .fs-ly { position: absolute; left: 0; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; letter-spacing: -0.02em;
  font-family: 'DUAT Banner', 'DUAT Title', 'DUAT Display', sans-serif; }
.fs-extra > .fs-ly > .ly { font-style: normal; display: block; paint-order: stroke fill; }
.fs-extra > .fs-ly > .ly:not(.ly0) { position: absolute; left: 0; top: 0; }