/* Language 5: device policy and camera controls. Existing desktop geometry stays intact. */
html .portrait-notice { display: none; z-index: 10000; }
html[data-orientation-blocked="true"] .portrait-notice { display: grid; }
html .portrait-notice[hidden] { display: none !important; }
.camera-choice { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.camera-choice select { min-width: 0; max-width: 100%; flex: 1; min-height: 40px; padding: 6px; border-radius: 10px; color: #123c59; background: #eefaff; font: inherit; }
.camera-choice-status { margin: 3px 0; font-size: 14px; line-height: 1.4; }
.starbag-app #cameraPreview[data-facing="environment"] { transform: none; }
.starbag-app #cameraPreview[data-facing="user"] { transform: scaleX(-1); }
/* The document scrolls; the calibration panel and copy never become nested scrollers. */
html[data-device="tablet"][data-screen="CALIBRATION"],
html[data-device="tablet"][data-screen="CALIBRATION"] body { height: auto; min-height: 100%; overflow: auto; }
html[data-device="tablet"][data-screen="CALIBRATION"] .starbag-app { height: auto; min-height: 100dvh; overflow: visible; }
html[data-device="tablet"] #calibrationScreen { position: relative; min-height: 100dvh; padding: 88px 28px 110px; }
html[data-device="tablet"] .calibration-panel { width: 100%; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; padding: 24px; }
html[data-device="tablet"] .calibration-visual { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
html[data-device="tablet"] .calibration-copy { min-width: 0; overflow: visible; }
html[data-device="tablet"] .calibration-copy h2 { font-size: clamp(28px, 3.5vw, 40px); }
html[data-device="tablet"] .calibration-copy ol { font-size: 18px; margin: 12px 0; line-height: 1.5; }
html[data-device="tablet"] .calibration-actions { flex-wrap: wrap; }
@media (orientation: portrait) {
  html[data-device="phone"], html[data-device="phone"] body { height: auto; min-height: 100%; overflow: auto; }
  html[data-device="phone"] .starbag-app { min-height: 100dvh; height: auto; overflow: visible; }
  html[data-device="phone"] .starbag-screen:not(.activity-screen) { position: relative; min-height: 100dvh; padding: 100px 16px 110px; }
  html[data-device="phone"] .starbag-header { left: 16px; right: 16px; }
  html[data-device="phone"] .starbag-header h1 { font-size: 26px; }
  html[data-device="phone"] .phase-chip { min-width: 0; font-size: 14px; padding: 8px; }
  html[data-device="phone"] .starbag-eyebrow { font-size: 11px; }
  html[data-device="phone"] .group-activity-grid { width: 100%; grid-template-columns: 1fr; gap: 18px; }
  html[data-device="phone"] .group-activity-card { min-height: 270px; padding: 135px 18px 22px; }
  html[data-device="phone"] .group-home-copy h2 { font-size: 38px; }
  html[data-device="phone"] .setup-panel,
  html[data-device="phone"] .calibration-panel { width: 100%; height: auto; padding: 20px; gap: 20px; grid-template-columns: minmax(0, 1fr); }
  html[data-device="phone"] .setup-intro { padding: 0; }
  html[data-device="phone"] .setup-intro h2,
  html[data-device="phone"] .calibration-copy h2 { font-size: 32px; }
  html[data-device="phone"] .calibration-visual { min-height: 0; aspect-ratio: 4 / 3; }
  html[data-device="phone"] .calibration-copy { min-width: 0; }
  html[data-device="phone"] .calibration-actions { flex-wrap: wrap; }
  html[data-device="phone"] .camera-consent-gate { position: fixed; padding: 16px; overflow-y: auto; }
  html[data-device="phone"] .camera-consent-card { width: 100%; padding: 22px; }
  html[data-device="phone"] .camera-consent-actions { flex-wrap: wrap; }
  html[data-device="phone"] .activity-screen { position: relative; height: 100dvh; min-height: 560px; overflow: hidden; padding: 0; }
  html[data-device="phone"] .activity-prompt { width: calc(100% - 32px); min-width: 0; gap: 8px; padding: 10px; }
  html[data-device="phone"] .activity-prompt strong { font-size: 24px; }
  html[data-device="phone"] .activity-prompt span { font-size: 16px; }
  html[data-device="phone"] .prompt-star { width: 36px; }
  html[data-device="phone"] .facilitator-rail:not(.is-collapsed) { width: min(310px, 88vw); }
  html[data-device="phone"] .result-overlay { inset: 16% 5%; padding: 20px; }
}

/* Language 5.1: phone portrait activity-top fit only.
   Keep setup/calibration/home and all tablet/desktop layouts unchanged. */
@media (orientation: portrait) {
  html[data-device="phone"][data-screen="PRACTICE"] .starbag-header,
  html[data-device="phone"][data-screen="COOP_SLOW"] .starbag-header,
  html[data-device="phone"][data-screen="COOP_MEDIUM"] .starbag-header,
  html[data-device="phone"][data-screen="COOP_FAST"] .starbag-header,
  html[data-device="phone"][data-screen="COOP_FINAL"] .starbag-header,
  html[data-device="phone"][data-screen="TEAM_SETUP"] .starbag-header,
  html[data-device="phone"][data-screen="TEAM_PLAY"] .starbag-header,
  html[data-device="phone"][data-screen="TEAM_RESULT"] .starbag-header,
  html[data-device="phone"][data-screen="SESSION_RESULT"] .starbag-header,
  html[data-device="phone"][data-screen="PAUSED"] .starbag-header,
  html[data-device="phone"][data-screen="ENDED"] .starbag-header {
    display: none;
  }

  html[data-device="phone"] .activity-screen .activity-prompt {
    top: max(10px, env(safe-area-inset-top));
    width: calc(100% - 24px);
    max-width: none;
    padding: 9px 12px;
    border-radius: 20px;
  }
  html[data-device="phone"] .activity-screen .activity-prompt strong {
    font-size: clamp(20px, 6.2vw, 24px);
    line-height: 1.12;
  }
  html[data-device="phone"] .activity-screen .activity-prompt span {
    font-size: clamp(14px, 4.1vw, 17px);
    line-height: 1.2;
  }
  html[data-device="phone"] .activity-screen .prompt-star {
    width: 32px;
    flex: 0 0 32px;
  }

  /* The collapsed handle sits below the activity prompt. */
  html[data-device="phone"] .activity-screen .facilitator-rail.is-collapsed {
    top: max(102px, calc(env(safe-area-inset-top) + 90px));
  }

  /* When the facilitator drawer opens the activity is paused; let the drawer
     own the top surface instead of visually stacking over the activity prompt. */
  html[data-device="phone"] .starbag-app[data-controls-collapsed="false"] .activity-prompt {
    visibility: hidden;
  }
  html[data-device="phone"] .activity-screen .facilitator-rail:not(.is-collapsed) {
    top: max(10px, env(safe-area-inset-top));
    width: min(330px, 92vw);
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - 20px);
  }
}