/* Full-scene conversation. No separate dialogue menu. */
.scene-screen.intro-screen{padding:0;background:var(--surface);color:var(--ink);min-height:0;border:1px solid var(--line);overflow:hidden}
.scene-screen .intro-topbar{padding:14px 30px;border-bottom:1px solid var(--line);gap:15px;min-height:65px;flex-wrap:wrap}
.scene-screen .intro-topbar h2{font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--text-muted)}
.scene-screen .intro-back{color:var(--brand-hover);font-size:12px}
.scene-motion-button,.scene-replay{min-height:44px;background:transparent;color:var(--text-muted);font-size:12px;padding:8px 10px}
.scene-motion-button[aria-pressed=true]{color:var(--brand-hover);background:var(--brand-soft);border-radius:50px}
.conversation-stage{position:relative;isolation:isolate;height:clamp(475px,44vw,620px);overflow:hidden;--entrance-duration:2600ms}
.construction-backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.56}
.scene-actor{position:absolute;bottom:42px;height:84%;aspect-ratio:2/3;max-height:500px;z-index:2;will-change:transform}
.actor-mentor{left:1.5%}.actor-worker{right:1.5%}
.scene-actor:before{content:'';position:absolute;bottom:3%;left:25%;width:50%;height:10px;background:#263a4b1d;border-radius:50%;z-index:-1;filter:blur(1px)}
.scene-actor canvas{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center bottom}
.actor-name{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-size:12px;color:var(--text-muted)}
.actor-name small{font-size:12px;margin-left:5px;color:var(--text-muted)}
.conversation-stage[data-phase=loading] .scene-actor,.conversation-stage[data-phase=error] .scene-actor{visibility:hidden}
.conversation-stage[data-phase=entering] .actor-mentor{animation:approach-from-left var(--entrance-duration) linear both}
.conversation-stage[data-phase=entering] .actor-worker{animation:approach-from-right var(--entrance-duration) linear both}
.conversation-stage[data-phase=entering] canvas{animation:walking-bob 180ms ease-in-out infinite alternate}
.scene-paused .scene-actor,.scene-paused canvas{animation-play-state:paused!important}
.speech-bubble{position:absolute;left:27%;top:9%;width:46%;padding:21px 25px 23px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);z-index:4}
.speech-bubble:before{content:'';position:absolute;width:22px;height:22px;top:55%;background:#fff;transform:rotate(45deg)}
.speech-bubble[data-speaker=mentor]:before{left:-12px;border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.speech-bubble[data-speaker=worker]:before{right:-12px;border-top:1.5px solid var(--line);border-right:1.5px solid var(--line)}
.speech-speaker{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--text-muted);margin:0 0 9px}
.speech-lead{font-size:clamp(17px,1.7vw,24px);font-weight:700;line-height:1.3;margin:0 0 4px;color:#b66c19}
.speech-bubble[data-speaker=worker] .speech-lead{color:var(--brand-hover)}
.speech-line{font-size:clamp(16px,1.55vw,22px);line-height:1.4;margin:0;color:var(--ink);overflow-wrap:anywhere}
.scene-loading{position:absolute;left:50%;top:35%;transform:translateX(-50%);font-size:13px;line-height:1.6;color:var(--text-muted);text-align:center;max-width:80%}
.skip-entrance,.scene-retry{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);min-height:44px;padding:10px 17px;border-radius:30px;background:var(--surface);border:1px solid var(--line);color:var(--brand-hover);font-size:12px;white-space:nowrap;z-index:5}
.scene-retry{bottom:40%}
.scene-footer{border-top:1px solid var(--line);padding:14px 30px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.scene-footer-meta{display:flex;gap:18px;align-items:center;color:var(--text-muted);font-size:12px}
.scene-footer-meta>span:last-child{letter-spacing:.15em;white-space:nowrap}
.scene-dialogue-controls{display:flex;align-items:center;gap:12px}
.scene-dialogue-controls .primary-button,.scene-dialogue-controls .secondary-button{min-height:44px}
.scene-dialogue-controls button:disabled{opacity:.36}
.learner-view .scene-screen.intro-screen{min-height:100svh;display:flex;flex-direction:column}
.learner-view .conversation-stage{flex:1;min-height:clamp(475px,70svh,800px)}
.learner-view .scene-actor{max-height:600px}
.course-picker{width:min(570px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:37px;border-radius:18px}
.course-picker h2{font-size:29px;margin:15px 0 25px}
.course-option{display:flex;align-items:flex-start;gap:13px;padding:21px 18px;border:1.5px solid var(--line);background:var(--surface-soft);border-radius:12px;margin-bottom:24px;cursor:pointer}
.course-option input{margin:3px 0 0;accent-color:var(--brand-action);width:18px;height:18px;flex-shrink:0}
.course-option>span{flex:1;min-width:0;overflow-wrap:anywhere}
.course-option strong{display:block;font-size:16px;line-height:1.5;font-weight:600;color:var(--ink)}
.course-option small{display:block;font-size:12px;color:var(--text-muted);margin-top:9px;line-height:1.5}
.course-picker>.primary-button{width:100%;min-height:46px}
@keyframes approach-from-left{from{transform:translateX(-130%)}to{transform:translateX(0)}}
@keyframes approach-from-right{from{transform:translateX(130%)}to{transform:translateX(0)}}
@keyframes walking-bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@media(max-width:700px) and (orientation:portrait){
  .scene-screen .intro-topbar{padding:10px 16px;gap:0 10px}
  .scene-screen .intro-topbar h2{font-size:10px;order:3;width:100%;padding:0 0 7px}
  .scene-screen .intro-back{font-size:11px}
  .scene-motion-button{font-size:10px;margin-left:auto;padding:6px 0}
  .conversation-stage{height:565px}
  .scene-actor{height:47%;bottom:44px;max-height:none}
  .actor-mentor{left:-4%}.actor-worker{right:-4%}
  .construction-backdrop{width:155%;left:-27.5%;opacity:.43}
  .speech-bubble{top:24px;left:18px;right:18px;width:auto;padding:18px 20px;min-height:135px;border-radius:15px}
  .speech-lead{font-size:18px}.speech-line{font-size:17px;line-height:1.5}.speech-speaker{font-size:10px}
  .speech-bubble:before{top:auto;bottom:-12px}
  .speech-bubble[data-speaker=mentor]:before{left:18%;border:0;border-bottom:1.5px solid #87959c;border-right:1.5px solid #87959c}
  .speech-bubble[data-speaker=worker]:before{right:18%;border:0;border-bottom:1.5px solid #87959c;border-right:1.5px solid #87959c}
  .actor-name{font-size:11px}.actor-name small{display:block;margin:3px 0 0;font-size:9px}
  .scene-footer{padding:14px 16px 17px;gap:13px}
  .scene-footer-meta{width:100%;justify-content:space-between}
  .scene-dialogue-controls{width:100%;gap:8px;justify-content:space-between}
  .scene-dialogue-controls .primary-button,.scene-dialogue-controls .secondary-button{font-size:12px;padding:11px 14px}
  .scene-replay{font-size:10px;padding:6px}
  .course-picker{padding:30px 23px}
  .course-option{padding:18px 13px}.course-option strong{font-size:14px}
  .learner-view .conversation-stage{min-height:565px}
  .learner-view .scene-actor{max-height:none}
}
@media(max-height:600px) and (orientation:landscape){
  .scene-screen .intro-topbar{padding:5px 20px;min-height:48px}
  .scene-screen .intro-topbar h2{font-size:10px}
  .scene-motion-button,.scene-screen .intro-back{font-size:10px}
  .conversation-stage{height:335px}
  .scene-actor{height:84%;bottom:32px}
  .speech-bubble{top:14px;left:26%;width:48%;padding:14px 18px}
  .speech-speaker{font-size:9px;margin-bottom:5px}.speech-lead{font-size:17px}.speech-line{font-size:15px}
  .actor-name{font-size:9px;bottom:-17px}.actor-name small{font-size:8px}
  .scene-footer{padding:7px 18px 10px;gap:10px}
  .scene-footer-meta{font-size:9px}.scene-dialogue-controls{gap:8px}
  .scene-dialogue-controls .primary-button,.scene-dialogue-controls .secondary-button{font-size:11px;padding:10px 14px}
  .scene-replay{font-size:10px}
  .learner-view .conversation-stage{min-height:335px}
}
@media(prefers-reduced-motion:reduce){.scene-actor,.scene-actor canvas{animation:none!important}}
/* Both workers leave to the same room; walking direction is explicit in intro.js. */
.conversation-stage[data-phase=leaving] .actor-mentor{animation:leave-together-mentor var(--departure-duration) linear both}
.conversation-stage[data-phase=leaving] .actor-worker{animation:leave-together-worker var(--departure-duration) linear both}
.conversation-stage[data-phase=leaving] canvas{animation:walking-bob 180ms ease-in-out infinite alternate}
@keyframes leave-together-mentor{to{transform:translateX(var(--departure-distance))}}
@keyframes leave-together-worker{to{transform:translateX(var(--departure-distance))}}
.course-restart-note{margin:0 0 18px;padding:14px 16px;background:var(--gold-soft);border:1px solid #dfc991;border-left:4px solid var(--gold);border-radius:8px;color:var(--gold-ink)}
.course-restart-note p{margin:0 0 12px;font-size:15px;line-height:1.5}
.course-restart-note .secondary-button{width:100%;min-height:44px}

/* T48: подписи персонажей на фото площадки: светлая плашка, тёмный текст, тень. */
.scene-screen .actor-name{
  left:50%;right:auto;bottom:-24px;transform:translateX(-50%);width:max-content;max-width:94%;
  padding:5px 14px;border-radius:999px;background:var(--surface);color:var(--ink);
  font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;
  box-shadow:0 2px 10px #18183040,0 0 0 1px var(--line);
}
.scene-screen .actor-name small{display:inline;margin:0 0 0 6px;font-size:12px;font-weight:500;color:var(--text-muted)}
@media(max-width:700px) and (orientation:portrait){
  .scene-screen .actor-name{font-size:12px;padding:4px 10px;bottom:-22px}
  .scene-screen .actor-name small{display:block;margin:1px 0 0;font-size:11px}
  .scene-screen .actor-name{white-space:normal;text-align:center;width:min(max-content,120px)}
}

/* T49: персонажи стоят на земле площадки: фон приближен к переднему плану, персонажи ниже и мельче, под ногами тени. */
.scene-screen .conversation-stage{background-size:170% auto;background-position:55% 100%}
.scene-screen .scene-actor{height:70%;bottom:30px}
.scene-screen .scene-actor:before{width:80%;left:10%;height:26px;bottom:0;background:radial-gradient(ellipse at center,#000000a0,#0000 70%);filter:none}
@media(max-width:700px) and (orientation:portrait){
  .scene-screen .conversation-stage{background-size:auto 150%;background-position:62% 100%}
  .scene-screen .scene-actor{height:44%;bottom:44px}
  .scene-screen .scene-actor:before{height:20px}
}
@media(max-height:600px) and (orientation:landscape){
  .scene-screen .conversation-stage{background-size:170% auto;background-position:55% 100%}
  .scene-screen .scene-actor{height:72%;bottom:30px}
}