/* True-SlotChain · layout desktop dei nove motori dentro la lobby (iframe ?embed=1).
   Si attiva solo da 900 px di larghezza (telefono in orizzontale escluso): i rulli prendono tutto lo spazio libero e
   GIRA / AUTOMATICO diventano pulsanti compatti sulla stessa riga di SALDO / PUNTATA / VINCITA.
   Il telefono resta com'e': vedi stage-mobile.css. */

/* PR19 · layout desktop comune a tutti i motori (solo >= 900px; mobile invariato).
   Griglia: riga 1 = rulli+cornice (tutto lo spazio libero), riga 2 = winline compatta,
   riga 3 = barra SALDO/PUNTATA/VINCITA + GIRA + AUTOMATICO come pulsanti compatti sulla stessa riga. */
@media (min-width: 900px) and (min-height: 501px), (min-width: 900px) and (pointer: fine) {
  html.embed .stage:has(> .cabinet) { display: flex; flex-direction: column; }
  html.embed .stage > .cabinet { flex: 1 1 0; min-height: 0; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 6px; align-content: stretch;
  }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > .slot-stage-wrapper { grid-column: 1 / -1; grid-row: 1; height: auto; min-height: 0; max-height: none; flex: none; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > .winline { grid-column: 1 / -1; grid-row: 2; justify-self: center; min-height: 0; margin: 0; padding: 2px 12px; font-size: .85rem; line-height: 1.2; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > .meters { grid-column: 1; grid-row: 3; margin: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > .meters .meter { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 10px; min-height: 40px; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > .meters .meter span { font-size: .66rem; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > .meters .meter :is(b, input) { text-align: right; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > :is(#btnSpin, .spin-row, .spinrow) { grid-column: 2; grid-row: 3; margin: 0; width: auto; align-self: center; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > :is(.spin-row, .spinrow) { display: flex; gap: 6px; align-items: center; min-height: 0; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) #btnSpin { width: auto; min-width: 128px; height: 44px; min-height: 0; margin: 0; padding: 0 24px; border-radius: 999px; flex: 0 0 auto; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) :is(.spin-row, .spinrow) > input { width: 84px; height: 44px; flex: 0 0 auto; }
  :is(html.embed .stage:not(:has(> .cabinet)), html.embed .cabinet) > #btnAuto { grid-column: 3; grid-row: 3; width: auto; min-width: 128px; height: 44px; margin: 0; padding: 0 18px; border-radius: 999px; align-self: center; font-size: .74rem; }
  /* Atelier: pulsante tondo illustrato, ridotto da 88 a 52px */
  html.embed body[data-suite-game="dynamic"] #btnSpin { min-width: 0; width: 52px; height: 52px; padding: 0; border-radius: 50%; }
}

/* Cyber Androide, bonus: la fascia con simbolo, giri e vincita sta sopra i rulli e sposta di una riga tutto il resto. */
@media (min-width: 900px) and (min-height: 501px), (min-width: 900px) and (pointer: fine) {
  html.embed .cabinet > .cb-hud { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  html.embed .cabinet:has(> .cb-hud.on) { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  html.embed .cabinet:has(> .cb-hud.on) > .slot-stage-wrapper { grid-row: 2; }
  html.embed .cabinet:has(> .cb-hud.on) > .winline { grid-row: 3; }
  html.embed .cabinet:has(> .cb-hud.on) > :is(.meters, #btnSpin, .spinrow, #btnAuto) { grid-row: 4; }
}

/* Turbo Apex: Hold & Win, desktop: rulli a sinistra, colonna laterale con HUD, contatore, winline e toggle EFFETTI/FANALI; comandi compatti in basso. */
@media (min-width: 900px) and (min-height: 501px), (min-width: 900px) and (pointer: fine) {
  html.embed body[data-suite-game="holdwin"] .stage {
    display: grid; grid-template-columns: minmax(0, 1fr) 118px 118px;
    grid-template-rows: repeat(4, auto) minmax(0, 1fr) auto;
    column-gap: 8px; row-gap: 6px; align-content: stretch;
  }
  html.embed body[data-suite-game="holdwin"] .stage > .slot-stage-wrapper { grid-column: 1; grid-row: 1 / 6; height: auto; min-height: 0; max-height: none; contain: size; margin-right: 6px; }
  html.embed body[data-suite-game="holdwin"] .stage > :is(.hw-hud, .holdwin-counter, .winline, .holdwin-settings) { grid-column: 2 / 4; min-width: 0; margin-left: 0; margin-right: 0; width: auto; }
  html.embed body[data-suite-game="holdwin"] .stage > .meters { grid-column: 1; grid-row: 6; margin: 0 6px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  html.embed body[data-suite-game="holdwin"] .meter { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; }
  html.embed body[data-suite-game="holdwin"] .meter span { font-size: .68rem; }
  html.embed body[data-suite-game="holdwin"] .meter b, html.embed body[data-suite-game="holdwin"] .meter input { text-align: right; }
  html.embed body[data-suite-game="holdwin"] .meter input { max-width: 80px; }
  html.embed body[data-suite-game="holdwin"] .stage > #btnSpin { grid-column: 2; grid-row: 6; width: auto; margin: 0; min-height: 0; height: 100%; padding: 4px 8px; font-size: 1rem; }
  html.embed body[data-suite-game="holdwin"] .stage > #btnAuto { grid-column: 3; grid-row: 6; width: auto; margin: 0; min-height: 0; height: 100%; padding: 4px 6px; font-size: .68rem; line-height: 1.1; white-space: normal; }
  html.embed body[data-suite-game="holdwin"] .holdwin-settings { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 2px 0 0; font-size: .74rem; line-height: 1.15; }
  html.embed body[data-suite-game="holdwin"] .holdwin-settings label { display: flex; gap: 6px; align-items: center; min-width: 0; }
  html.embed body[data-suite-game="holdwin"] .holdwin-settings input { flex: 0 0 16px; width: 16px; height: 16px; min-height: 0; margin: 0; }
  html.embed body[data-suite-game="holdwin"] .hw-hud { margin: 0; gap: 4px; }
  html.embed body[data-suite-game="holdwin"] .hw-hud-row { flex-wrap: wrap; gap: 4px; }
  html.embed body[data-suite-game="holdwin"] :is(.hw-chip, .hw-seed) { font-size: 12px; padding: 2px 8px; white-space: nowrap; }
  html.embed body[data-suite-game="holdwin"] .hw-plaques { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  html.embed body[data-suite-game="holdwin"] .hw-plq { font-size: 13px; padding: 2px 4px; border-width: 2px; }
  html.embed body[data-suite-game="holdwin"] .holdwin-counter { margin: 0 auto; min-height: 64px; height: auto; }
  html.embed body[data-suite-game="holdwin"] :is(.holdwin-counter-dial, .holdwin-counter-art) { width: 64px; height: 64px; }
  html.embed body[data-suite-game="holdwin"] .holdwin-counter-dial b { font-size: 24px; }
  html.embed body[data-suite-game="holdwin"] .holdwin-counter-dial small { font-size: .5rem; }
}