/* Mobile, orientation, and reduced-motion overrides. */
@media (max-width: 760px) {
  .voice-subtitle { right: 12px; bottom: 12px; left: 12px; grid-template-columns: 58px 1fr; gap: 8px; padding: 8px; }
  .voice-subtitle img { width: 58px; height: 82px; }
  .voice-subtitle p { font-size: 11px; }
  .screen { min-height: 0; padding: 64px 24px 24px; }
  .audio-controls { top: 10px; bottom: auto; }
  .voice-character { right: -3%; width: 38vw; height: 68vh; }
  .voice-dialog { right: 31vw; bottom: 4%; left: 16px; grid-template-columns: 1fr; gap: 8px; min-height: 96px; padding: 16px; }
  .voice-copy p { max-height: 72px; overflow-y: auto; font-size: 10px; }
  .voice-actions { justify-content: flex-end; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 72px); }
  .mission-grid, .card-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .mission { min-height: 112px; }
  .mentor-card { position: relative !important; right: auto; bottom: auto; max-width: none; }
  .mentor-card img { width: 100px; height: 130px; }
  .mentor-card .mentor { margin-bottom: 8px; }
  .mission img { width: 72px; height: 72px; }
  .stage { grid-template-columns: 42px 36px 1fr 34px; }
  .screen--lab .stage-list { grid-template-columns: 1fr; }
  .screen--lab .stage { grid-template-columns: 48px 40px minmax(0, 1fr) 34px; min-height: 104px; padding: 10px 12px; }
  .guide-screen { display: block; padding: 64px 20px 24px; overflow: auto; }
  .guide-title { margin-bottom: 14px; }
  .guide-title .back { position: static; display: block; margin-bottom: 8px; }
  .guide-sidebar { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
  .guide-sidebar button { min-height: 54px; }
  .guide-workspace { grid-template-columns: 1fr; }
  .guide-document .card-grid { grid-template-columns: 1fr; }
  .guide-terminal { margin-top: 12px; }
  .proposal-scene { display: block; padding: 64px 20px 24px; overflow: auto; }
  .proposal-scene > .scene-nav { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 12px; }
  .proposal-scene > .page-header, .proposal-scene > .compact-header, .proposal-scene > .assessment-header, .proposal-scene > .lab-header,
  .proposal-scene > .card-grid, .proposal-scene > .stage-list, .proposal-scene > .results-grid, .proposal-scene > .assessment-grid, .proposal-scene > .learning-shell,
  .proposal-scene > .terminal, .proposal-scene > .result-actions, .proposal-scene > .assessment-nav, .proposal-scene > .lab-footer { width: 100%; margin-left: 0; margin-right: 0; }
  .screen--lab .stage__icon { width: 48px; height: 48px; }
  .screen--lab .stage__id { font-size: 20px; }
  .screen--lab .stage strong { font-size: 15px; }
  .lab-footer { margin-top: 10px; }
  .stage__icon { width: 42px; height: 42px; }
  .stage__lock { width: 34px; height: 34px; }
  .stage b { grid-column: 3 / -1; }
  .stage-workbench, .assessment-grid, .results-grid { grid-template-columns: 1fr; }
  .phase-nav { grid-template-columns: repeat(5, minmax(58px, 1fr)); overflow-x: auto; }
  .phase-step { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 7px 4px; text-align: center; }
  .phase-step span { font-size: 8px; }
  .concept-layout, .demo-grid, .behavior-simulator, .coding-layout, .puzzle-layout { grid-template-columns: 1fr; }
  .concept-detail > img { width: 100px; height: 100px; }
  .concept-detail > p:not(.eyebrow) { font-size: 15px; }
  .phase-actions, .puzzle-panel > footer { align-items: stretch; flex-direction: column; }
  .learning-stage .mentor-strip { margin-top: 28px; }
  .stage-workbench { padding-bottom: 30px; }
  .lesson-icon { width: 90px; height: 90px; }
  .assessment-nav { grid-template-columns: 1fr 1fr; }
  .assessment-nav span { grid-column: 1 / -1; grid-row: 1; }
  .result-actions { align-items: stretch; flex-direction: column; }
  .name-field input { width: 100%; }
  .skill-bar { grid-template-columns: 92px 1fr 38px; }
  .screen--home { padding-right: 24px; }
  .screen--home .hero, .screen--home .mission-grid { max-width: none; }
  .screen--main-menu { padding: 76px 24px 28px; }
  .screen--main-menu { display: grid; padding: 60px 20px 30px; }
  .menu-core { width: min(340px, 92vw); }
  .menu-core .main-menu-brand h1 { margin-bottom: 28px; font-size: clamp(52px, 16vw, 72px); }
  .menu-core .main-menu-item { min-height: 45px; }
  .menu-core .main-menu-item span { font-size: 19px; }
  .screen--main-menu .main-menu-status { left: 18px; bottom: 14px; }
  .intro-character { right: -24%; bottom: -2%; width: 105vw; height: 72vh; }
  .intro-cast { bottom: calc(7% + 120px); width: 25vw; height: 34vh; }
  .intro-player { left: 5%; }
  .intro-enemy { left: 29%; }
  .intro-dialog { left: 5%; bottom: 7%; z-index: 2; width: 90%; padding: 25px 20px 18px; }
  .intro-dialog p { padding-right: 25%; font-size: 15px; }
  .main-menu-brand { width: 100%; }
  .main-menu-brand h1 { font-size: clamp(50px, 17vw, 76px); }
  .main-menu-brand > p:last-child { width: 80%; font-size: 15px; }
  .main-menu-list { width: 100%; margin-top: 34px; }
  .main-menu-item { background: linear-gradient(90deg, rgba(34,8,10,.78), rgba(3,10,13,.56)); }
  .main-menu-item span { font-size: 17px; }
  .main-menu-item small { max-width: 120px; text-align: right; }
  .main-menu-character { right: -19%; bottom: 8%; width: 75vw; height: 56vh; opacity: .48; }
  .main-menu-dialog { position: relative !important; right: auto; bottom: auto; width: 88%; margin-top: 64px; margin-left: auto; }
  .main-menu-status { position: relative !important; left: auto; bottom: auto; margin-top: 22px; }
  .mentor-card { position: relative !important; width: 100%; height: min(62vh, 520px); margin-top: 24px; overflow: hidden; }
  .mentor-card img { right: -8%; width: 82%; height: min(58vh, 480px); }
  .mentor-card .mentor { right: 0; bottom: 10px; width: 88%; }
  .screen--cases .card-grid, .screen--cases > .terminal, .screen--cases > .button--danger,
  .screen--blueprint .page-header, .screen--blueprint .tabs, .screen--blueprint .card-grid,
  .screen--lab .stage-list, .screen--lab .status-panel,
  .learning-stage:has(.mentor-strip--right) .learning-shell,
  .learning-stage:has(.mentor-strip--left) .learning-shell,
   .assessment-grid--with-character, .screen--assessment .assessment-nav,
  .screen--results .results-grid, .screen--results .result-actions { width: 100%; margin-right: 0; margin-left: 0; }
  .mentor-strip, .mentor-strip--right, .mentor-strip--left, .phase--practice .mentor-strip { min-height: 112px; margin: min(44vh, 310px) 0 0; padding: 26px 18px 20px; }
  .mentor-strip img, .mentor-strip--right img, .mentor-strip--left img, .phase--practice .mentor-strip img { right: -4%; bottom: calc(100% - 4px); left: auto; width: 52vw; height: min(46vh, 390px); object-position: bottom right; }
  .mentor-strip--left img { right: auto; left: -4%; object-position: bottom left; }
  .mentor-strip p { font-size: 13px; }
  .scene-character { top: 108px; bottom: auto; width: 58vw; height: 56vh; opacity: .24; }
  .scene-character--left { left: -12%; }
  .scene-character--right { right: -12%; }
  .scene-character--mobile { display: block; top: 150px; right: -13%; left: auto; z-index: 1 !important; width: 58vw; height: 52vh; opacity: .68; object-position: top right; filter: drop-shadow(0 16px 20px rgba(0,0,0,.7)); }
  .learning-stage .scene-character--mobile { top: 210px; }
  .mentor-strip img { visibility: hidden; }
  .mentor-strip, .mentor-strip--right, .mentor-strip--left, .phase--practice .mentor-strip { margin-top: 28px; }
  .assessment-grid, .results-grid { position: relative; z-index: 2; }
}

@media (max-width: 900px) and (orientation: portrait) {
  .orientation-lock {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 32px;
    color: var(--text);
    background: radial-gradient(circle at 50% 40%, #123035, #050b0e 62%);
    text-align: center;
  }
  .orientation-lock strong { margin-top: 28px; color: var(--cyan); font-size: 28px; text-transform: uppercase; letter-spacing: .06em; }
  .orientation-lock p { margin: 8px 0 0; color: var(--muted); }
  .orientation-phone { width: 54px; height: 92px; border: 3px solid var(--mint); border-radius: 8px; box-shadow: 0 0 30px rgba(87,242,164,.22); animation: rotate-phone 1.8s ease-in-out infinite; }
  .orientation-phone::after { content: ""; display: block; width: 16px; height: 3px; margin: 7px auto; border-radius: 2px; background: var(--mint); }
}

@keyframes rotate-phone {
  0%, 20% { transform: rotate(0); }
  65%, 100% { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}