/* Layout follows the available viewport, including rotation and split view. */
.intro-copy, .main-panel, .daily-problem, .daily-options, .search-wrap,
.header-actions, .account-zone, .theme-card-copy { min-width: 0; }
.daily-problem-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.daily-problem h3, .daily-choice, .daily-answer p, .topic-button,
.profile-details, .world-card-content { overflow-wrap: anywhere; }
img, video { max-width: 100%; }
button, select, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.auth-card, .auth-loading-card { min-width: 0; max-width: 100%; }
.workspace, .sidebar { min-width: 0; }
@media (max-width: 1100px) {
  header { flex-wrap: wrap; gap: 14px; padding: 16px 0; }
  .header-actions { max-width: 100%; flex: 1 1 640px; flex-wrap: wrap; justify-content: flex-end; }
  .account-zone { flex-wrap: wrap; justify-content: flex-end; }
  .demo-pill { display: none; }
}
@media (min-width: 781px) and (max-width: 1024px) {
  .workspace { grid-template-columns: 210px minmax(0,1fr); }
  .main-panel { padding: 27px 22px; }
  .sidebar { padding: 20px 12px; }
  .world-grid { gap: 13px; }
}
@media (max-width: 680px) {
  .shell { width: calc(100% - 28px); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  header { align-items: center; }
  .brand > span { display: inline; }
  .header-actions { flex: 1 1 100%; justify-content: flex-start; gap: 12px; }
  .account-zone { order: 3; width: 100%; justify-content: flex-start; gap: 8px; }
  .account-nav-button, .logout-button, .admin-open, .lang-btn,
  .subject, .secondary, .user-back, .daily-hint-toggle, .daily-review-link { min-height: 44px; }
  input, select, textarea, .daily-level-row select { font-size: 16px; }
  .daily-problem-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .daily-level-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .daily-level-row select { width: 100%; }
  .profile-details { grid-template-columns: minmax(0,1fr); }
  .sidebar { overscroll-behavior-x: contain; }
  .lesson-video { padding: 12px; }
  .auth-gate { min-height: 100svh; }
}
@media (max-width: 380px) {
  .shell { width: calc(100% - 20px); }
  .daily-challenge { padding: 20px 14px; }
  .world-card { grid-template-columns: minmax(0,1fr); }
  .world-card figure { height: 170px; min-height: 0; }
  .theme-grid { grid-template-columns: minmax(0,1fr); }
}
@media (pointer: coarse) {
  .theme-card, .user-nav-button, .topic-button, .example { min-height: 44px; }
}

/* A phone stays usable even inside a preview with a desktop layout viewport. */
html.phone-viewport .auth-gate {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: center; gap: 0; right: auto; width: var(--device-width,100%);
  max-width: 100%; padding: max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
  overflow-x: hidden; overflow-y: auto;
}
html.phone-viewport .auth-scene { display: none; }
html.phone-viewport .auth-card { flex: none; width: 100%; max-width: 440px; margin: auto 0; padding: 26px 20px; }
html.phone-viewport .auth-loading-card { flex: none; margin: auto 0; }
html.phone-viewport .shell { width: calc(var(--device-width,100%) - 28px); max-width: calc(100% - 28px); margin: 0 14px; }
html.phone-viewport header { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 0; }
html.phone-viewport .brand > span { display: inline; }
html.phone-viewport .header-actions { flex: 1 1 100%; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; }
html.phone-viewport .account-zone { display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
html.phone-viewport .account-summary, html.phone-viewport .header-avatar, html.phone-viewport .demo-pill { display: none; }
html.phone-viewport .account-nav-button, html.phone-viewport .logout-button,
html.phone-viewport .lang-btn, html.phone-viewport .subject, html.phone-viewport .user-tab { min-height: 44px; }
html.phone-viewport input, html.phone-viewport select, html.phone-viewport textarea { font-size: 16px; }
html.phone-viewport .intro, html.phone-viewport .workspace,
html.phone-viewport .daily-problem-grid, html.phone-viewport .user-shell,
html.phone-viewport .search-row, html.phone-viewport .unit-grid,
html.phone-viewport .choices, html.phone-viewport .how,
html.phone-viewport .profile-details, html.phone-viewport .upload-grid { grid-template-columns: minmax(0,1fr); }
html.phone-viewport .intro { gap: 28px; margin-bottom: 30px; }
html.phone-viewport .intro h1 { font-size: clamp(2rem,8vw,2.8rem); }
html.phone-viewport .photo-composition { width: 100%; height: 280px; }
html.phone-viewport .hero-inset { right: 0; height: 140px; }
html.phone-viewport .sidebar { display: flex; gap: 7px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
html.phone-viewport .side-title, html.phone-viewport .side-note, html.phone-viewport .sidebar::after { display: none; }
html.phone-viewport .subject { width: auto; flex: 0 0 auto; gap: 8px; }
html.phone-viewport .main-panel { padding: 24px 17px; }
html.phone-viewport .daily-challenge { padding: 22px 18px; }
html.phone-viewport .daily-level-row { flex-direction: column; align-items: stretch; }
html.phone-viewport .daily-level-row select { width: 100%; }
html.phone-viewport .daily-level-row > span, html.phone-viewport .daily-badge span { display: none; }
html.phone-viewport .user-sidebar { padding: 15px; border-right: 0; border-bottom: 1px solid var(--line); }
html.phone-viewport .user-sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
html.phone-viewport .user-side-photo, html.phone-viewport .user-sidebar-label { display: none; }
html.phone-viewport .user-content { padding: 24px 18px; }
html.phone-viewport .world-grid { grid-template-columns: minmax(0,1fr); }
html.phone-viewport .world-card p { min-height: auto; }
html.phone-viewport .primary { min-height: 50px; }
html.phone-viewport .result-head, html.phone-viewport .result-actions,
html.phone-viewport .concept-actions, html.phone-viewport footer { flex-direction: column; align-items: flex-start; }
html.phone-viewport .course-head { padding: 165px 20px 20px; }
html.phone-viewport .course-photo { width: 100%; height: 140px; top: 0; left: 0; border-left: 0; }