html.phone-preview body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: auto;
  background: #e9e5da;
}

html.phone-preview #app {
  width: 844px;
  height: 390px;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 12px 40px #20324722;
}

html.phone-preview .home,
html.phone-preview .game {
  width: 844px;
  height: 390px;
  min-height: 0;
}

html.phone-preview .game {
  grid-template-columns: 594px 250px;
}

html.phone-preview .hand-panel {
  width: 250px;
  height: 390px;
  padding: 14px;
}

html.phone-preview .hand-card,
html.phone-preview .hand-gap {
  height: 76px;
}

html.phone-preview .hand { height: 160px; min-height: 160px; }

html.phone-preview .hand-card { font-size: 35px; }
html.phone-preview .hand-card.special .main { font-size: 12px; }
html.phone-preview .hand-card.change .main { font-size: 33px; }
html.phone-preview .actions { gap: 7px; margin-top: 12px; }
html.phone-preview .actions button { min-height: 36px; padding: 7px 5px; }

html.phone-preview .home {
  overflow: hidden;
  padding: 10px 16px;
  grid-template-columns: 160px 170px minmax(410px, 430px);
  column-gap: 14px;
}

html.phone-preview .home h1 { font-size: 54px; margin-top: 8px; }
html.phone-preview .home .intro { font-size: 14px; margin-top: 8px; }
html.phone-preview .home .hero.original-cards { height: 150px; }
html.phone-preview .home .settings {
  grid-template-columns: 1.1fr 1fr .9fr;
  padding: 11px 14px;
  gap: 9px 12px;
  margin-bottom: 7px;
}
html.phone-preview .home .settings .colors { grid-column: 1 / 3; gap: 7px; }
html.phone-preview .home .settings .language-setting { grid-column: 3; }
html.phone-preview .settings label { margin-bottom: 4px; }
html.phone-preview .settings > div { min-width: 0; }
html.phone-preview .settings label { white-space: nowrap; }
html.phone-preview .settings select,
html.phone-preview .settings input { padding: 6px; min-height: 32px; }
html.phone-preview .color-pick { width: 29px; height: 29px; }
html.phone-preview .home .primary,
html.phone-preview .home .resume,
html.phone-preview .home .multiplayer-entry { min-height: 0; padding-block: 8px; margin-bottom: 5px; }
html.phone-preview .home-links .text-btn { padding: 6px; }
html.phone-preview .mode-note { display: none; }

html.phone-preview .picture-row { height: 64px; }
html.phone-preview .picture-button { width: 60px; height: 60px; }
html.phone-preview .slot { height: 42px; font-size: 23px; line-height: 1; }

html.phone-preview .overlay {
  position: fixed;
  width: min(844px, 100vw);
  height: min(390px, 100vh);
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

html.phone-preview .rotate-device { display: none !important; }

@media (max-width: 843px), (max-height: 389px) {
  html.phone-preview #app,
  html.phone-preview .home,
  html.phone-preview .game {
    width: 100vw;
    height: 100vh;
  }

  html.phone-preview .hand-panel { height: 100vh; }
}