.bg-motion { animation-play-state: running; }
.stage { width: 100%; height: auto; aspect-ratio: 900 / 620; contain: layout paint; }
.stage > svg { display: block; width: 100%; height: 100%; }
.stage { position: relative; }
.robot-3d { position: absolute; top: 65%; width: 24.444444%; height: auto; aspect-ratio: 1; pointer-events: none; }
.has-3d-robot #workshop-robot { visibility: hidden; }
.has-3d-room { overflow:hidden; touch-action:pan-y; cursor:grab; }
.has-3d-room:active { cursor:grabbing; }
.has-3d-room .robot-3d { inset:0; width:100%; height:100%; aspect-ratio:auto; z-index:0; }
.has-3d-room > svg { position:relative; z-index:1; pointer-events:none; }
.has-3d-room #background-slot { visibility:hidden; }
.has-3d-room #scene-content { visibility:hidden; }
.has-3d-room::after { content:'Перетащите сцену, чтобы осмотреться'; position:absolute; right:10px; bottom:8px; z-index:2; padding:4px 7px; border-radius:6px; background:#fff5e4dc; color:#765235; font:10px 'Segoe UI',sans-serif; pointer-events:none; }
.bg-spin { animation: bg-turn 13s linear infinite; }
.bg-reverse { animation-direction: reverse; }
.bg-lamp { animation: bg-lamp 3.7s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.bg-belt { animation: bg-belt 2s linear infinite; }
.bg-receipt { animation: bg-receipt 6s ease-in-out infinite; }
.bg-parcel { animation: bg-parcel 7s ease-in-out infinite; }
.bg-labels { animation: bg-labels 3s linear infinite; }
.bg-energy { animation: bg-energy 3.5s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.bg-circuit { animation: bg-belt 4s linear infinite; }
.bg-crane { animation: bg-crane 14s ease-in-out infinite; }
.bg-drawer { animation: bg-drawer 7s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.bg-light { animation: bg-light 9s ease-in-out infinite; }
.bg-drift { animation: bg-drift 11s linear infinite; animation-delay: var(--delay, 0s); }
.bg-shaft { animation: bg-shaft 16s ease-in-out infinite; transform-origin: 132px 56px; }
.bg-shaft-right { animation-delay: -8s; transform-origin: 831px 68px; }
.bg-floor-reflection { animation: bg-floor-reflection 12s ease-in-out infinite; }
#station-background { pointer-events: none; }
.stage[data-background-motion="paused"] .bg-motion,
body.is-background-hidden .bg-motion { animation-play-state: paused; }
#background-motion { border: 1px solid #e3cbb3; padding: 8px 10px; min-height: 35px; font-size: 10px; }
#background-motion[aria-pressed="true"] { background: #fff0df; color: #a45224; }
#background-motion:disabled { cursor: default; opacity: .7; }
@media (max-width: 1100px) and (min-width: 701px) {
  .game-workspace { grid-template-columns: minmax(0,1fr); }
  .is-learn .scene-column { position: static; }
  .code-line code { font-size: 13px; }
}
@media (max-width: 700px) {
  .bg-dust, .bg-room-plaque { display: none; }
  .bg-light-layer { opacity: .5; }
  .bg-spin { animation-duration: 19s; }
  .controls { gap: 9px; }
  .control-buttons { flex-wrap: wrap; }
  #background-motion { font-size: 10px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .bg-dust { display: none; }
  .game-heading { padding-block: 14px; }
  .back-link { margin-bottom: 10px; }
  .is-learn .scene-column { position: static; }
}
@keyframes bg-turn { to { transform: rotate(360deg); } }
@keyframes bg-lamp { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes bg-belt { to { stroke-dashoffset: -84; } }
@keyframes bg-receipt { 0%,15%,100% { transform: translateY(-18px); } 70%,85% { transform: translateY(12px); } }
@keyframes bg-parcel { 0%,15%,100% { transform: translateX(0); } 65%,80% { transform: translateX(62px); } }
@keyframes bg-labels { to { transform: translateY(23px); } }
@keyframes bg-energy { 0%,100% { opacity: .4; } 40%,65% { opacity: 1; } }
@keyframes bg-crane { 0%,10%,100% { transform: translateX(0); } 50%,60% { transform: translateX(350px); } }
@keyframes bg-drawer { 0%,65%,100% { transform: translateX(0); } 78%,86% { transform: translateX(9px); } }
@keyframes bg-light { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes bg-drift { 0% { opacity: 0; transform: translate(0,10px); } 20%,70% { opacity: .6; } 100% { opacity: 0; transform: translate(18px,-38px); } }
@keyframes bg-shaft { 0%,100% { opacity: .45; transform: rotate(-2deg); } 50% { opacity: .9; transform: rotate(2deg); } }
@keyframes bg-floor-reflection { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .bg-motion { animation: none !important; } }