/* Mobile gameplay shares the public site's existing palette and rounded surfaces. */
@media (max-width: 720px) {
  .hosted-page.student-page:not(.team-introduction),
  .game-show-review .hosted-page:has(> .student-device-card),
  .host-workspace {
    background: linear-gradient(135deg, #fff9e6 0%, #fffcf6 38%, #eef8ff 72%, #f2eeff 100%);
  }
  .hosted-page.student-page:not(.team-introduction),
  .game-show-review .hosted-page:has(> .student-device-card) {
    display: grid;
    min-height: 100svh;
    padding: 24px 16px max(24px, env(safe-area-inset-bottom));
    place-items: center;
    align-content: safe center;
  }
  .game-show-review .hosted-page:has(> .student-device-card) { min-height: calc(100svh - 170px); }
  .hosted-page.student-page.join-entry-page { align-content: start; }
  :is(.student-page, .game-show-review) .student-device-card {
    min-width: 0;
    max-width: 100%;
    padding: 24px 20px;
    border: 1px solid #e1def9;
    border-top: 6px solid var(--brand-blue-soft);
    border-radius: 30px;
    background: linear-gradient(150deg, #fff 55%, #f7f5ff 100%);
    box-shadow: 0 18px 45px rgb(17 24 39 / 10%);
  }
  :is(.student-page, .game-show-review) .student-device-card h1 { font-size: 30px; line-height: 1.2; overflow-wrap: anywhere; }
  :is(.student-page, .game-show-review) .student-device-card p { line-height: 1.5; }
  :is(.student-page, .game-show-review) .student-device-card .button-primary,
  .host-workspace .button-primary {
    background: var(--wizard-button-bg);
    color: #fff;
    box-shadow: var(--wizard-button-shadow);
  }
  :is(.student-page, .game-show-review) .student-device-card .button,
  .host-workspace .button {
    min-height: 48px;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  :is(.student-page, .game-show-review) .student-device-card .button-secondary,
  .host-workspace .button-secondary { background: #fff; color: #4245a8; border-color: #dedbf7; }
  :is(.student-page, .game-show-review) .student-device-card .field input { font-size: 16px; min-height: 52px; }
  .host-workspace .private-host-layout { width: 100%; padding-inline: 16px; }
  .host-workspace .host-workspace-controls { padding: 20px 16px; border-radius: 30px; box-shadow: var(--shadow); }
  .host-workspace .host-workspace-toolbar { background: linear-gradient(110deg, #fff6cc, #eef8ff); padding: 12px; }
  .host-workspace .host-workspace-heading p { gap: 8px 12px; line-height: 1.5; }
  .host-workspace .host-workspace-heading p span + span { padding-left: 12px; }
  .host-workspace .host-workspace-password { background: linear-gradient(120deg, #f4f1ff, #fffbee, #eef8ff); }
  .host-workspace .host-workspace-password h2 { font-size: 28px; }
  .host-workspace .private-host-decision-actions { gap: 10px; }
  .host-workspace .private-host-decision-actions > * { min-width: 0; }
  .host-workspace .classic-host-team { padding: 12px 10px; gap: 6px; }
  .host-workspace .classic-host-team h3 { font-size: 18px; }
  .host-workspace .classic-host-team-score { font-size: 24px; }
  .game-show-review .game-show-buzzer { width: 100%; margin: 0; }
  .game-show-review .student-device-card .game-show-buzz-button { border-radius: 50%; font-size: 30px; }
}