/* PC desktop: centered 390px phone frame. All overlays stay inside it. */
@media (min-width: 768px) {
  html,
  html[lang],
  html:root {
    --unit: 7.5 !important;
    font-size: 52px !important; /* 390 / 7.5 */
    background: #050508 !important;
    width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
  }

  html body,
  html[lang] body,
  html body.ps88f2 {
    width: 390px !important;
    max-width: 390px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Makes position:fixed children use this phone box, not the monitor */
    transform: translateZ(0) !important;
    font-size: .32rem !important;
    background: #1d212d !important;
    box-shadow: 0 0 0 1px #1a1a1a, 0 0 48px rgba(0, 0, 0, .7) !important;
  }

  html #root {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Kill 100vw (viewport) widths — they ignore the 390px body */
  html ._container_box,
  html #page_bg,
  html #menu,
  html .loading-img-container,
  html .app-win,
  html .sidebar-mask,
  html .terms-popup,
  html .fb-game-iframe-container,
  html .common-modal-container,
  html .common-modal-container .common-modal-wrap,
  html .trial-game-wrap .iframe-container,
  html .am-modal,
  html .am-modal-mask,
  html .am-modal-wrap,
  html .am-popup,
  html .am-popup-mask,
  html .am-toast-notice-wrap,
  html .force-download-modal,
  html .force-download-modal2,
  html .download-bar,
  html .shell-header,
  html .home-header,
  html .home-container,
  html .outside-container,
  html .mc-navbar-blue,
  html .am-tab-bar,
  html [class*="HomeScreen"],
  html [class*="home-screen"],
  html [class*="a2hs"],
  html [class*="A2HS"] {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html #menu,
  html .am-tab-bar {
    bottom: 0 !important;
  }

  html .game-list,
  html .hot-game-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}