/* Stable button slots prevent the thumb target jumping as a lesson is revealed. */
.action.tutorial-unavailable{visibility:hidden;pointer-events:none}
.tutorial-hint{position:absolute;z-index:6;top:25%;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:11px 22px;background:#17221ff2;border:1px solid #e9c77e;border-radius:8px;color:#fff1ce;pointer-events:none;text-align:center;box-shadow:0 4px 16px #0006}
.tutorial-hint strong{display:block;font-size:clamp(17px,2vw,24px);font-weight:850;white-space:nowrap}
.tutorial-hint span{display:block;margin-top:4px;font-size:13px;color:#e4d6b7}
.tutorial-hint .tutorial-mobile{display:none}
.action.tutorial-focus,.joystick.tutorial-focus{position:relative;border-color:#fff0b4;box-shadow:0 0 0 3px #ffce6566,0 0 22px #ffce6590;animation:lesson-pulse 1.2s ease-in-out infinite}
.action.tutorial-focus::after,.joystick.tutorial-focus::after{content:'▼';position:absolute;top:-29px;left:50%;transform:translateX(-50%);font-size:23px;color:#ffe28e;text-shadow:0 2px 3px #000;pointer-events:none}
@keyframes lesson-pulse{50%{transform:scale(1.045);box-shadow:0 0 0 4px #ffce6577,0 0 27px #ffce65a0}}
@media(pointer:coarse),(max-width:900px){
 .tutorial-hint{top:25%;padding:8px 15px;max-width:calc(100% - 24px)}
 .tutorial-hint .tutorial-pc{display:none}.tutorial-hint .tutorial-mobile{display:block;font-size:17px}
 .tutorial-hint span{font-size:12px;margin-top:2px}
}
@media(prefers-reduced-motion:reduce){.action.tutorial-focus,.joystick.tutorial-focus{animation:none}}