/* Shared navigation stays within its own screen; the document remains scrollable. */
html{scroll-padding-top:calc(var(--course-panel-top,0px) + 12px);scroll-padding-bottom:calc(var(--course-panel-bottom,0px) + 12px)}
.scene-screen.intro-screen,.office-screen,.learning-screen,.game-console{overflow:clip}
[data-course-panel]{background:#fff}
html[data-course-pin-top=true] [data-course-panel=top]{position:sticky;top:0;z-index:30;box-shadow:0 2px 6px #19354d0a}
html[data-course-pin-bottom=true] [data-course-panel=bottom]{position:sticky;bottom:0;z-index:31;box-shadow:0 -5px 12px #19354d0a}
.intro-topbar,.office-topbar,.learning-topbar,.game-controls{border-top-left-radius:inherit;border-top-right-radius:inherit}
.game-camera-panel{border-radius:inherit}
.scene-footer,.office-footer,.lesson-footer,.instruction-footer{padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
.lesson-footer,.instruction-footer{padding-top:12px}
.game-panbar[data-course-panel]{background:#f3f7f9}

/* The existing three-column map also fits normal notebook widths. */
@media(min-width:701px) and (max-width:1440px){
  .map-sections{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:900px) and (orientation:landscape) and (max-height:950px){
  .learning-topbar{min-height:60px;padding-block:8px}
  .learning-lesson{padding-top:22px}
  .learning-map,.learning-module{padding-top:26px}
  .learning-lesson>h1{font-size:clamp(27px,2.3vw,34px);margin-bottom:18px}
  .learning-heading h1{font-size:clamp(28px,2.4vw,36px)}
  .lesson-draft{margin-bottom:14px}
  .ladder-review-viewport{max-width:min(100%,calc((100svh - 280px) * 16 / 9));margin-inline:auto}
  .game-heading{margin:4px 0 8px}
  .game-heading h1{font-size:clamp(27px,2.4vw,34px)}
  .game-heading .game-eyebrow{margin-bottom:6px}
  .game-lead{max-width:100%;margin-bottom:14px}
  .game-toolbar{padding-block:10px}
  .game-viewport,.game-screen[data-zoom=true] .game-viewport{height:clamp(180px,calc(100svh - 380px),550px)}
}

/* T41: единый каркас сцены для знакомства, кабинета, монитора и камер: шапка · сцена · нижняя панель. */
.scene-bar-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.scene-step{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.scene-step-dots{display:inline-flex;gap:5px}
.scene-step-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.scene-step[data-step="1"] i:nth-child(-n+1),.scene-step[data-step="2"] i:nth-child(-n+2),.scene-step[data-step="3"] i:nth-child(-n+3),
.scene-step[data-step="4"] i:nth-child(-n+4),.scene-step[data-step="5"] i:nth-child(-n+5){background:var(--brand-action)}
.scene-screen .intro-topbar h2,.office-screen .office-topbar h2,.game-screen .game-heading h1{font-size:16px;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--ink);margin:0}
.scene-screen .intro-back,.office-screen .intro-back,.game-screen .intro-back{font-size:14px;font-weight:600;color:var(--brand-hover);min-height:44px}
/* Карточка камер: шапка и подсказка внутри той же рамки, что у остальных сцен. */
.game-screen{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:clip}
.game-heading{margin:0;padding:6px 20px;min-height:56px;border-bottom:1px solid var(--line);gap:12px}
.game-lead{max-width:none;margin:0;padding:14px 20px 4px;font-size:14px;line-height:1.5;color:var(--text-muted)}
.game-console{border:0;border-radius:0}
/* Фото площадки вместо плоской графики на знакомстве: тот же стиль, что у кабинета и камер. */
.conversation-stage{background:#cfd8e3 url(assets/site-camera-v1.png) center/cover no-repeat;box-shadow:inset 0 0 0 999px #18183029}
.construction-backdrop{display:none}
.actor-name{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:100%;padding:3px 10px;border-radius:999px;background:#12232bcc;color:#fff}
.actor-name small{color:#e6ecf2}
@media(min-width:701px){
  .intro-topbar,.office-topbar,.game-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-items:start}
  .intro-topbar h2,.office-topbar h2,.game-heading h1{justify-self:center;text-align:center}
  .intro-topbar .scene-bar-end,.office-topbar .scene-bar-end,.game-heading .scene-bar-end{justify-self:end}
}
@media(max-width:700px) and (orientation:portrait){
  .scene-step-text{display:none}
  .scene-step{gap:0}
  .game-heading{padding:6px 12px;flex-wrap:wrap;align-items:center}
  .game-heading>.scene-bar-end{flex:0 0 auto;margin-left:auto}
  .game-heading h1{order:3;width:100%;font-size:14px}
  .game-lead{padding:10px 14px 2px;font-size:13px}
  .scene-screen .intro-topbar h2,.office-screen .office-topbar h2{font-size:12px}
}
/* Одинаковая ширина карточек и сцена 16:9 на компьютере: монитор без серых полей. */
@media(min-width:900px) and (orientation:landscape){
  .scene-screen.intro-screen,.office-screen,.game-screen{max-width:max(920px,calc((100svh - 245px) * 16 / 9));margin-inline:auto}
  .learner-view .scene-screen.intro-screen,.learner-view .office-screen,.learner-view .game-screen{max-width:max(920px,calc((100svh - 190px) * 16 / 9))}
  .conversation-stage,.learner-view .conversation-stage{height:auto;min-height:0;flex:none;aspect-ratio:16/9}
  .office-screen[data-mode=monitor] .office-stage,.learner-view .office-screen[data-mode=monitor] .office-stage{padding-inline:0;background:#263333}
  .office-screen[data-mode=monitor] .pov-world{max-width:none}
  .game-visual{min-width:0}
}
/* В режиме слушателя те же экраны лежат в такой же карточке, а не растянуты на всю страницу. */
.learner-view main:has(#introScreen:not([hidden]),#officeScreen:not([hidden]),#gameScreen:not([hidden])){padding:24px 16px}
.learner-view .scene-screen.intro-screen,.learner-view .office-screen{min-height:0;border-radius:18px}
/* Реплики сохраняют прежние пропорции: на более узкой сцене шрифт облака масштабируется вместе с ней. */
@media(min-width:900px) and (orientation:landscape){
  .conversation-stage,.office-stage{container-type:inline-size}
  .speech-lead{font-size:clamp(14px,1.7cqw,24px)}
  .speech-line{font-size:clamp(14px,1.55cqw,22px)}
  .speech-speaker{font-size:clamp(10px,.9cqw,12px)}
  .speech-bubble{padding:clamp(12px,1.6cqw,23px) clamp(14px,1.9cqw,25px)}
  .office-speech .speech-lead{font-size:clamp(14px,1.6cqw,22px)}
  .office-speech .speech-line{font-size:clamp(13px,1.45cqw,20px)}
  .office-speech{padding:clamp(10px,1.4cqw,18px) clamp(14px,1.8cqw,23px)}
}