#movementHint { position:absolute; left:24px; bottom:108px; z-index:3; width:max-content; max-width:calc(100% - 48px); border:1px solid var(--color-line); border-radius:18px; background:var(--color-hint); color:var(--color-ink); padding:12px 16px; box-shadow:0 3px 18px var(--color-shadow); pointer-events:none; opacity:0; visibility:hidden; transform:translateY(5px); transition:opacity 300ms ease,transform 300ms ease,visibility 300ms; }
#movementHint.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
#movementHint > div { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.movement-row { display:flex; align-items:center; gap:12px; }
.movement-row > :first-child { width:55px!important; flex:none; }
#movementHint p { display:flex; flex-direction:column; gap:4px; margin:0; font-size:12px; line-height:1.3; }
#movementHint p span { color:var(--color-muted); font-size:11px; }
#movementHint svg { width:24px; height:32px; flex:none; color:var(--color-accent); }
.movement-divider { width:1px; height:30px; margin:0 3px; background:var(--color-line); }
.movement-keys { display:flex; flex-direction:column; align-items:center; gap:2px; }
.movement-keys span { display:flex; gap:2px; }
.movement-keys kbd { opacity:1; display:grid; place-items:center; width:17px; height:17px; border:1px solid var(--color-line); border-radius:4px; font-size:9px; background:var(--color-paper); }
#experienceGuide { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; padding:0; margin:0; border:0; border-radius:0; overflow:clip; background:transparent; box-shadow:none; }
#experienceGuide::backdrop { background:transparent; backdrop-filter:none; }
#experienceGuide.is-intro { background:var(--color-overlay); }
#experienceGuide.is-practice { pointer-events:none; z-index:100; }
#experienceGuide.is-practice .onboarding-card { pointer-events:auto; }
#experienceGuide.is-practice #onboardingSpotlight { box-shadow:none; border-color:transparent; }
#onboardingSpotlight { position:absolute; border:2px solid var(--color-paper); border-radius:26px; box-shadow:0 0 0 200vmax var(--color-overlay); pointer-events:none; }
.onboarding-card { position:absolute; width:min(390px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:26px; border-radius:24px; background:var(--color-paper); box-shadow:0 14px 50px var(--color-shadow); }
.onboarding-count { margin:0 0 14px; color:var(--color-accent); font-size:10px; font-weight:650; letter-spacing:.8px; }
.onboarding-card h2 { margin:0 0 12px; font-size:27px; letter-spacing:-.8px; line-height:1.1; overflow-wrap:anywhere; }
.onboarding-card h2:focus { outline:none; }
#onboardingText { color:var(--color-ink); font-size:15px; line-height:1.6; margin:0 0 22px; white-space:pre-line; }
.onboarding-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:6px; }
.onboarding-actions button { min-height:44px; padding:10px 14px; border-radius:24px; font-size:12px; }
#onboardingSkip { grid-row:2; grid-column:1/-1; color:var(--color-muted); text-align:center; }
#onboardingBack { grid-row:1; grid-column:1; background:var(--color-soft); }
#onboardingNext { grid-row:1; grid-column:2; margin:0; }
.onboarding-actions:has(#onboardingBack[hidden]) #onboardingNext { grid-column:1/-1; }

@media(max-width:900px), (max-width:1024px) and (max-height:500px), (pointer:coarse) {
 #movementHint { bottom:calc(var(--dock-clearance) + 124px); left:12px; max-width:calc(100% - 24px); padding:10px 12px; }
 #movementHint > div { gap:9px; }
 .movement-row > :first-child { width:26px!important; }
 #movementHint svg { width:26px; height:26px; }
 #movementHint p { font-size:11px; } #movementHint p span { font-size:10px; }
 .onboarding-card { padding:20px; }
 .onboarding-card h2 { font-size:25px; }
 #onboardingText { font-size:13px; margin-bottom:16px; }
 #experienceGuide.is-practice .onboarding-card { padding:16px; }
 #experienceGuide.is-practice #onboardingText { line-height:1.45; margin-bottom:12px; }
 #experienceGuide.is-practice .onboarding-count { margin-bottom:10px; }
}
@media(max-height:550px) {
 .onboarding-card { padding:16px; } .onboarding-card h2 { font-size:22px; }
 #onboardingText { margin-bottom:12px; }
}
.onboarding-commands {display:grid;gap:14px;margin:18px 0 22px}.onboarding-commands:empty{display:none}.onboarding-commands>div{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.45}.onboarding-commands .ui-icon{margin:0;flex:0 0 24px;width:24px;height:24px;color:var(--color-accent)}
@media(max-width:400px){.onboarding-commands{gap:10px;margin:14px 0}.onboarding-commands>div{font-size:13px}#onboardingText{font-size:14px}}

#lookExitHint { position:absolute;z-index:5;left:50%;bottom:calc(var(--dock-clearance,88px) + 14px);transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:7px 13px 7px 7px;border-radius:24px;background:rgb(24 38 42 / 88%);color:#fff;font-size:12px;line-height:1.4;white-space:nowrap;pointer-events:none;box-shadow:0 2px 12px #0002; }
#lookExitHint[hidden] { display:none; }
#lookExitHint kbd { display:grid;place-items:center;min-width:34px;height:27px;padding:0 5px;border-radius:8px;background:#fff;color:#253c48;font-family:inherit;font-size:12px;font-weight:600; }

.scene-orbit-hint.is-interacting { opacity:0; visibility:hidden; }
@media(prefers-reduced-motion:reduce) { #movementHint, .scene-orbit-hint { transition:none; } }
/* Short landscape scenes need the reminder beside, not above, the joystick. */
@media(max-height:550px) and (orientation:landscape) {
 #movementHint { left:auto; right:12px; bottom:calc(var(--dock-clearance,88px) + 8px); max-width:calc(100% - 130px); padding:8px 10px; }
 #movementHint > div { gap:6px; }
 #movementHint p { gap:2px; }
 .movement-row { gap:8px; }
}