/* Game surface reserves only a compact header, never permanent lesson text. */
.controller-page, .controller-shell { height: 100dvh; }
.controller-shell { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.controller-header { flex: 0 0 36px; min-height: 36px; gap: 8px; padding: 2px 8px; }
.controller-header { touch-action: manipulation; }
.controller-header .brand-mark { width: 27px; height: 27px; }
.controller-header .brand strong { font-size: 12px; }
.controller-header button, #menuButton { min-height: 30px; padding: 4px 9px; font-size: 12px; touch-action: manipulation; }
.controller-header .status-pill { font-size: 9px; padding: 5px; }
.controller-deck { padding: 4px; touch-action: none; }
.controller-stage { flex: none; max-width: 100%; touch-action: none; }
.controller-image, .joystick-zone, .joystick-ring, .joystick-knob { touch-action: none; }
.physical-button { position: absolute; z-index: 7; width: 7.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid #f7c600a0; border-radius: 50%; background: transparent; padding: 0; touch-action: none; }
.physical-button:disabled { opacity: .75; cursor: default; }
.physical-button.is-unlocked { border-color: #50d49eaa; }
.physical-button.is-required { box-shadow: 0 0 10px #f7c60088; }
.physical-button.is-holding, .physical-button.is-enabled { border-color: #5cf3a3; background: #3ddd7738; }
.physical-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.unlock-button { left: 15.3%; top: 79.5%; }
.headless-button { left: 75.8%; top: 79.5%; }
.rth-button { left: 24.3%; top: 79.5%; }
.highlight-unlock { left: 15.3%; top: 79.5%; }
.controller-lcd { position: absolute; left: 49.8%; top: 51%; transform: translate(-50%, -50%); width: 21%; padding: 3px; border-radius: 5px; text-align: center; background: #05262eeb; color: #dbffff; z-index: 6; }
.controller-lcd small { font-size: clamp(10px, 1.5vw, 14px); }
.controller-lcd:has(#lessonComplete:not([hidden])) #motorStatus { display: none; }
#lessonComplete strong { display: block; font-size: clamp(11px, 1.8vw, 16px); color: #6bffa7; }
#nextLessonButton { margin-top: 3px; width: 100%; min-height: 30px; padding: 4px; border: 0; border-radius: 5px; color: #08100c; background: var(--accent); font-size: clamp(10px, 1.4vw, 13px); font-weight: 800; touch-action: manipulation; }
.rotate-hint { display: none; position: absolute; bottom: 18px; color: #acbec9; font-size: 12px; text-align: center; }
.zoom-hint { display: none; }
.is-zoomed .zoom-hint { display: block; position: absolute; top: 10px; left: 10px; max-width: 220px; background: #152a32; padding: 8px; color: #fff; }
.is-zoomed .controller-deck, .is-zoomed .controller-stage, .is-zoomed .controller-image, .is-zoomed .joystick-zone, .is-zoomed .joystick-ring, .is-zoomed .joystick-knob, .is-zoomed .physical-button { touch-action: pan-x pan-y pinch-zoom; }
.exercise-menu { touch-action: pan-y pinch-zoom; }
.exercise-menu h2 { font-size: 26px; }
.exercise-menu button { touch-action: manipulation; }
.instruction-dialog p { color: #d4e2e8; font-size: 17px; line-height: 1.6; }
.instruction-dialog small { color: var(--accent); }
.instruction-dialog .menu-actions { margin-top: 24px; }
.instruction-dialog #guideConfirm, .instruction-dialog #closeInstructions { min-height: 44px; font-size: 15px; }
.controller-toast { position: fixed; top: 42px; left: 50%; transform: translateX(-50%); z-index: 50; background: #452516; color: #fff; border-radius: 10px; padding: 10px 14px; max-width: 80vw; font-size: 14px; }
#codeInput { font-size: 18px; }
@media (orientation: portrait) { .rotate-hint { display: block; } .controller-header .brand { display: none; } }