/* SmileDice v25.12.24 — Dice-only exterior width parity with Casino home.
 * The old Dice finish CSS capped its parent .app-shell at 1490px, squeezing
 * the shared site header. These rules touch ONLY that parent container while
 * #dice-screen is visible; gameplay, game grid, and other sections stay intact.
 */

/* Wide monitor: exactly the same shell width as the Casino homepage. */
@media (min-width: 1281px) {
  body:has(#dice-screen:not([hidden])) .app-shell {
    width: min(94vw, 1970px) !important;
    max-width: 1970px !important;
  }
}

/* Medium desktop: match the home's regular 78.4vw shell. */
@media (min-width: 1151px) and (max-width: 1280px) {
  body:has(#dice-screen:not([hidden])) .app-shell {
    width: 78.4vw !important;
    max-width: 1970px !important;
  }
}

/* Laptop and tablet landscape: same responsive home container. */
@media (min-width: 901px) and (max-width: 1150px) {
  body:has(#dice-screen:not([hidden])) .app-shell {
    width: 94% !important;
    max-width: 1120px !important;
  }
}

/* Tablet portrait: preserve the homepage's outer margins and width cap. */
@media (min-width: 651px) and (max-width: 900px) {
  body:has(#dice-screen:not([hidden])) .app-shell {
    width: calc(100% - 16px) !important;
    max-width: 790px !important;
  }
}

/* Phones: full-width page, unchanged mobile Dice arrangement. */
@media (max-width: 650px) {
  body:has(#dice-screen:not([hidden])) .app-shell {
    width: 100% !important;
    max-width: none !important;
  }
}