/* Phone layout shared by the 5-reel games (Orchard Royale pilot, 2026-10). Loaded AFTER each game's modern-ui.css;
   layout only: colours come from the game's own theme (mobile-layout.js copies the feature bar's look into --msg-*).
   Portrait: four control rows pinned to the bottom, reels edge to edge. Landscape: reels left at full height,
   controls in a column on the right. Desktop and tablet are untouched. */

/* Phones (portrait and landscape): compact controls, four rows instead of six. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  /* Row 1: one message line; the game status or the feature hint (mobile-layout.js sets .is-feature-message) */
  .sm-game.is-feature-message .sm-status,
  .sm-game.is-modernized:not(.is-feature-message) .sm-feature-status { display: none; }
  .is-modernized .sm-status,
  .is-modernized .sm-feature-status {
    align-self: center;
    min-width: 84vw;
    max-width: 100%;
    min-height: 24px;
    margin: 0;
    padding: 4px 12px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-align: center;
  }
  .is-modernized .sm-status {
    border: 1px solid var(--msg-border-color, currentColor);
    border-radius: var(--msg-border-radius, 0 0 12px 12px);
    background-color: var(--msg-background-color, transparent);
    background-image: var(--msg-background-image, none);
    box-shadow: var(--msg-box-shadow, none);
    color: var(--msg-color, inherit);
    font-family: var(--msg-font-family, inherit);
  }
  /* Row 2: balance / win / bet with less padding */
  .is-modernized .sm-hud { gap: 6px; padding: 3px; }
  .is-modernized .sm-hud > div { padding: 3px 6px; }
  /* Row 3: [-] SPIN [+], SPIN stays the largest */
  .is-modernized .sm-controls { grid-template-columns: auto auto auto; justify-content: center; gap: 28px; }
  .is-modernized .sm-btn { min-height: 44px; font-size: .72rem; }
  .is-modernized .sm-spin { width: 66px; height: 66px; min-width: 66px; min-height: 66px; }
  .is-modernized .sm-controls .sm-btn { width: 52px; padding: 0; }
  /* Short labels by CSS; the button text stays the accessible name and the game keeps updating it */
  .is-modernized [data-act="bet-"],
  .is-modernized [data-act="bet+"],
  .is-modernized [data-act="max"],
  .is-modernized [data-act="sound"] { font-size: 0; }
  .is-modernized [data-act="bet-"]::before,
  .is-modernized [data-act="bet+"]::before,
  .is-modernized [data-act="max"]::before,
  .is-modernized [data-act="sound"]::before { font-size: .78rem; }
  .is-modernized [data-act="bet-"]::before { content: "\2212"; font-size: 1.5rem; }
  .is-modernized [data-act="bet+"]::before { content: "+"; font-size: 1.5rem; }
  .is-modernized [data-act="max"]::before { content: "MAX"; }
  .is-modernized [data-act="sound"]::before { content: "\1F50A"; font-size: 1.1rem; }
  .is-modernized [data-act="sound"][aria-pressed="false"]::before { content: "\1F507"; }
  /* Row 4: MAX / PAYTABLE / AUTO / sound in one row */
  .is-modernized .sm-row { grid-template-columns: 1fr 1.5fr 1.2fr 1fr; gap: 6px; }
  .is-modernized .sm-row .sm-btn { padding: 0 2px; letter-spacing: 0; }
}

/* Phone portrait: reels edge to edge, logo + reels centred in the free height, controls pinned to the bottom (thumb reach). */
@media (max-width: 700px) and (orientation: portrait) {
  .sm-game.is-modernized { padding: 5px 0 8px; }
  .is-modernized .sm-shell { max-width: min(1440px, calc((100vh - 270px) * 5 / 3)); }
  .is-modernized .sm-logo { margin-top: auto; }
  .is-modernized .sm-stage { margin-bottom: auto; border-width: 5px; border-radius: 12px; }
  .is-modernized .sm-hud,
  .is-modernized .sm-controls,
  .is-modernized .sm-row { margin-inline: 6px; }
}

/* Phone landscape: reels at full height on the left, controls in a column on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  .sm-game.is-modernized { padding: 6px 8px; }
  .is-modernized .sm-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(200px, 30vw, 250px);
    grid-template-rows: 1fr repeat(6, auto) 1fr;
    gap: 6px 12px;
    max-width: none;
    height: 100%;
  }
  .is-modernized .sm-stage {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: calc((100vh - 12px) * 5 / 3);
    min-height: 0;
    border-width: 6px;
    border-radius: 12px;
  }
  .is-modernized .sm-shell > :not(.sm-stage) { grid-column: 2; }
  .is-modernized .sm-logo { grid-row: 2; min-width: 0; padding: 4px 8px; font-size: .78rem; letter-spacing: .08em; white-space: nowrap; }
  .is-modernized .sm-logo::before,
  .is-modernized .sm-logo::after { display: none; }
  .is-modernized .sm-status,
  .is-modernized .sm-feature-status { grid-row: 3; min-width: 0; width: 100%; padding: 4px 6px; font-size: .6rem; letter-spacing: .02em; }
  .is-modernized .sm-refill { grid-row: 4; }
  .is-modernized .sm-hud { grid-row: 5; }
  .is-modernized .sm-hud > div:nth-child(4) strong { font-size: 1.15rem; }
  .is-modernized .sm-controls { grid-row: 6; gap: 16px; }
  .is-modernized .sm-spin { width: 60px; height: 60px; min-width: 60px; min-height: 60px; }
  .is-modernized .sm-row { grid-row: 7; grid-template-columns: 1fr 1fr; }
}

/* Short screens: a slimmer logo (portrait) or none (landscape; the page title names the game) keeps every control on screen. */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 540px) {
  .is-modernized .sm-logo { padding: 4px 14px; font-size: 1rem; }
}
@media (orientation: landscape) and (max-height: 330px) {
  .is-modernized .sm-logo { display: none; }
}