/* 5.0.2 — room to explore, with learning content visible beside the controls. */
.dashboard {
  width: 100%;
  max-width: none;
  padding: 22px clamp(16px, 2.5vw, 64px) 56px;
}
.topbar { padding-inline: clamp(16px, 2.5vw, 64px); }
.welcome-banner { min-height: 208px; padding: 24px 32px; gap: 24px; }
.welcome-banner > div:first-child { min-width: 0; flex: 1; }
.welcome-banner h2 { max-width: none; font-size: clamp(28px, 2.6vw, 42px); }
.welcome-banner .pet-stage { flex: 0 0 176px; width: 176px; height: 160px; }
.welcome-banner .pet-stage .pet-svg { max-width: 100%; max-height: 100%; }
.welcome-banner .level-row {
  display: grid; grid-template-columns: auto minmax(100px, 260px) auto;
  max-width: 580px; margin-top: 16px; gap: 10px 14px;
}
.welcome-banner .level-row > span:last-child { grid-column: auto; }
.adventure-journey { gap: 14px 24px; margin: 16px 0; padding: 14px 20px; }
.adventure-journey > div { min-width: min(100%, 260px); }
.adventure-journey p { max-width: 340px; }
.adventure-journey button { width: auto; flex: 0 0 auto; min-height: 46px; padding: 10px 18px; }
.world-portals { gap: 16px; margin: 16px 0; }
.world-portal { min-height: 0; gap: 8px; padding: 16px 18px; }
.world-portal .portal-icon, .world-portal .portal-icon img { width: 64px; height: 64px; }
.world-portal .portal-icon { margin-bottom: 0; }
.world-portal h3 { font-size: 21px; margin: 4px 0 8px; }
.world-portal p:not(.eyebrow) { font-size: 14px; line-height: 1.5; }
.dashboard-grid { margin-top: 18px; grid-template-columns: minmax(0, 1fr) clamp(290px, 23vw, 390px); gap: 22px; }
.quest-map { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* One scroll area keeps the lesson header and mode buttons available.
   No separate scrollbar or fixed-height box inside the reading passage. */
#lessonDialog { overflow: hidden; }
#lessonDialog .lesson-shell { height: 100%; min-height: 0; overflow: hidden; }
#lessonDialog .lesson-header {
  flex: 0 0 auto; min-height: 82px;
  padding: 14px clamp(16px, 2.5vw, 64px);
  grid-template-columns: 48px minmax(0, 1fr) auto;
}
#lessonDialog .lesson-header h2 { overflow-wrap: anywhere; }
#lessonDialog .mode-tabs { flex: 0 0 auto; padding: 10px 16px; }
#lessonContent {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0;
  padding: 22px clamp(16px, 2.5vw, 64px) 40px;
  overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
#lessonContent .learn-grid { gap: 18px; align-items: start; }
#lessonContent .learning-card { min-width: 0; padding: 22px; }
#lessonContent .learning-card .sub { font-size: 16px; line-height: 1.55; }
#lessonContent .learning-card h3 { font-size: 23px; line-height: 1.3; }
#lessonContent .speed-control, #lessonContent .play-row { flex-wrap: wrap; }
#lessonContent .speed-btn { min-width: 48px; min-height: 46px; }
#lessonContent .word-cloud { gap: 9px; }
#lessonContent .word-chip { min-height: 46px; font-size: 18px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#lessonContent .reader-box { max-height: none; overflow: visible; }
#lessonContent .passage-box { font-size: 23px; line-height: 1.8; overflow-wrap: anywhere; }
#lessonContent .reader-toolbar { justify-content: flex-start; }
#lessonContent .reader-status { flex: 1 1 230px; }
#lessonContent .challenge-card { max-width: 1200px; margin: 0 auto; }

@media (min-width: 760px) {
  #lessonContent .learn-grid {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.3fr);
    grid-template-areas: 'controls reading' 'info reading' 'vocabulary reading';
  }
  #lessonContent .lesson-controls { grid-area: controls; }
  #lessonContent .lesson-info { grid-area: info; }
  #lessonContent .lesson-vocabulary { grid-area: vocabulary; }
  #lessonContent .lesson-reading { grid-area: reading; }
  #lessonContent .learn-grid.vocabulary-only {
    grid-template-areas: 'controls vocabulary' 'info vocabulary';
  }
}
@media (min-width: 1280px) {
  .world-portals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #lessonContent .learn-grid {
    grid-template-columns: minmax(250px, .72fr) minmax(270px, .95fr) minmax(0, 1.8fr);
    grid-template-areas: 'controls vocabulary reading' 'info vocabulary reading';
    grid-template-rows: auto 1fr;
  }
  #lessonContent .learn-grid.vocabulary-only {
    grid-template-columns: minmax(260px, .65fr) minmax(0, 2fr);
  }
}
@media (max-width: 1000px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .side-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .welcome-banner { padding: 24px; }
  .welcome-banner .pet-stage { flex-basis: 136px; width: 136px; height: 140px; }
  .adventure-journey > div { flex-basis: 55%; }
}
@media (max-width: 759px) {
  .dashboard { padding: 16px 12px 40px; }
  .welcome-banner { padding: 22px 18px; gap: 12px; min-height: 190px; }
  .welcome-banner .pet-stage { flex-basis: 92px; width: 92px; height: 110px; }
  .welcome-banner .level-row { grid-template-columns: auto 1fr; max-width: 100%; font-size: 12px; }
  .welcome-banner .level-row .xp-bar { order: initial; width: 100%; }
  .welcome-banner .level-row > span:last-child { grid-column: 1 / -1; }
  .adventure-journey { padding: 14px; gap: 12px; }
  .adventure-journey > div { flex-basis: 100%; }
  .adventure-journey p { flex: 1 1 180px; }
  .world-portal { padding: 16px 14px; }
  .side-column { grid-template-columns: minmax(0, 1fr); }
  #lessonDialog .lesson-header { grid-template-columns: 42px minmax(0, 1fr); min-height: 74px; padding: 12px; }
  #lessonDialog .lesson-header h2 { font-size: 19px; }
  #lessonDialog .lesson-reward { grid-column: 2; }
  #lessonDialog .mode-tabs { justify-content: flex-start; }
  #lessonContent { padding: 14px 12px 30px; }
  #lessonContent .learn-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #lessonContent .learning-card { grid-column: auto; padding: 18px; }
  #lessonContent .passage-box { font-size: 21px; line-height: 1.75; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #lessonContent { scroll-behavior: auto; }
}