.tutorial-help {
    position: fixed; z-index: 21; top: max(10px, env(safe-area-inset-top)); right: 10px;
    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
    background: rgba(7,17,31,.76); color: #fff; font-size: 21px; font-weight: 900; cursor: pointer;
}
.tutorial-help:disabled { opacity: .45; cursor: wait; }
body.is-running .tutorial-help, body.is-signup .tutorial-help { visibility: hidden; }
body.is-tutorial .curtain, body.is-tutorial .topbar, body.is-tutorial .modes,
body.is-tutorial .game-head, body.is-tutorial .tutorial-help { visibility: hidden; }
.game-tutorial { position: fixed; z-index: 100; inset: 0; color: #fff; touch-action: none; user-select: none; opacity: 1; transition: opacity .16s ease; }
.game-tutorial.is-leaving { opacity: 0; pointer-events: none; }
.game-tutorial[hidden], .game-tutorial [hidden] { display: none !important; }
.tutorial-mask-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.tutorial-shades { position: absolute; inset: 0; pointer-events: none; background: rgba(4,12,26,.28); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); clip-path: url(#gameTutorialClip); }
.tutorial-focus { position: absolute; border: 1px solid rgba(141,255,155,.8); border-radius: 24px; pointer-events: none; box-shadow: 0 0 24px rgba(36,207,96,.12); transition: border-color .2s ease, box-shadow .2s ease; }
.tutorial-focus--secondary { border-radius: 14px; }
.tutorial-top { position: absolute; z-index: 3; top: max(16px, env(safe-area-inset-top)); left: 16px; right: 16px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; }
.tutorial-top > :first-child { justify-self: start; }
.tutorial-top button { justify-self: end; }
.tutorial-top > span:first-child { padding: 8px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(8,20,38,.58); font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #fff; }
.tutorial-top button { min-height: 40px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(8,20,38,.6); color: #fff; font-size: 12px; font-weight: 750; cursor: pointer; }
.tutorial-steps { display: flex; align-items: center; gap: 5px; }
.tutorial-steps i { width: 18px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); transition: background .2s ease; }
.tutorial-steps i.is-done { background: #8dff9b; }
.tutorial-pad { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; color: #fff; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tutorial-cue { position: absolute; display: block; width: 72px; height: 116px; pointer-events: none; transition: opacity .15s ease; }
.tutorial-hand { position: absolute; left: 8px; top: 12px; width: 55px; height: 70px; pointer-events: none; filter: drop-shadow(0 5px 7px rgba(0,0,0,.28)); animation: tutorial-press 1.35s ease-in-out infinite; transform-origin: 50% 80%; }
.tutorial-hand svg { display: block; width: 100%; height: 100%; }
.tutorial-touch-ring { position: absolute; left: 6px; top: 0; width: 44px; height: 44px; border: 2px solid #8dff9b; border-radius: 50%; animation: tutorial-ring 1.35s ease-out infinite; box-shadow: 0 0 18px rgba(36,207,96,.3); pointer-events: none; }
.tutorial-gesture { position: absolute; bottom: 8px; left: 50%; padding: 5px 10px; border-radius: 999px; background: rgba(7,17,31,.7); white-space: nowrap; transform: translateX(-50%); font-size: 10px; font-weight: 850; pointer-events: none; }
.game-tutorial[data-step="2"] .tutorial-hand { animation-name: tutorial-release; }
.game-tutorial[data-step="2"] .tutorial-focus { border-color: rgba(255,122,138,.8); box-shadow: 0 0 24px rgba(255,45,85,.12); }
.game-tutorial[data-black="wait"] .tutorial-cue { opacity: .45; }
.game-tutorial[data-black="wait"] .tutorial-touch-ring { opacity: 0; animation: none; }
.game-tutorial[data-black="resume"] .tutorial-hand { animation-name: tutorial-press; }
.game-tutorial[data-black="resume"] .tutorial-focus { border-color: #a8f376; box-shadow: 0 0 24px rgba(112,235,67,.2); }
.game-tutorial[data-black="resume"] .tutorial-touch-ring { border-color: #a8f376; }
.game-tutorial.is-holding[data-step="1"] .tutorial-hand { animation: none; transform: translateY(9px) scale(.93); }
.game-tutorial.is-holding[data-step="1"] .tutorial-cue { opacity: .5; }
.tutorial-copy { position: absolute; z-index: 3; display: flex; flex-direction: column; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-family: var(--sb-font); text-align: center; box-shadow: none; color-scheme: light; pointer-events: none; }
.tutorial-copy:focus { outline: none; }
.tutorial-heading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.tutorial-ball { position: relative; flex: 0 0 28px; width: 28px; height: 28px; pointer-events: none; }
.tutorial-ball canvas { position: absolute; top: -20px; left: -6px; display: block; width: 40px; height: 48.333px; pointer-events: none; }
.tutorial-copy h2 { min-width: 0; margin: 0; color: #fff; font: 900 clamp(28px,6.5vmin,38px)/1.05 var(--sb-font); letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; -webkit-text-stroke: 1px rgba(16,38,79,.5); paint-order: stroke fill; text-shadow: 0 4px 0 #18375c, 0 7px 0 rgba(10,26,51,.2), 0 10px 20px rgba(0,20,60,.32); }
.tutorial-copy p { margin: 0; color: #eef6ff; font-size: 16px; font-weight: 500; line-height: 1.45; text-wrap: pretty; text-shadow: 0 2px 1px rgba(9,28,57,.8), 0 4px 10px rgba(0,15,44,.4); }
.game-tutorial[data-step="1"] .tutorial-copy p strong { color: #8dff9b; font-weight: 750; }
.tutorial-small { display: block; margin-top: 4px; color: var(--sb-muted); font-size: 11px; line-height: 1.4; }
.game-tutorial[data-step="2"] .tutorial-copy h2 { color: #ff364f; }
.game-tutorial[data-step="2"] .tutorial-small { margin-top: 6px; color: #ff364f; font-size: 14px; font-weight: 650; line-height: 1.35; }
.game-tutorial[data-black="resume"] .tutorial-copy h2,
.game-tutorial[data-black="resume"] .tutorial-small { color: #32ef55; }
.tutorial-spinner { flex: 0 0 auto; display: block; width: 36px; height: 36px; margin: 24px auto 0; border: 4px solid rgba(255,255,255,.35); border-top-color: #8dff9b; border-radius: 50%; filter: drop-shadow(0 2px 3px rgba(0,20,60,.3)); animation: tutorial-spin .75s linear infinite; }
.game-tutorial[data-step="3"] { display: grid; place-items: center; padding: max(96px,env(safe-area-inset-top)) 20px max(32px,env(safe-area-inset-bottom)); }
.game-tutorial[data-step="3"] .tutorial-shades { display: none; }
.game-tutorial[data-step="3"] .tutorial-copy { position: relative; width: min(440px,100%); margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; animation: sb-phase-rise .48s cubic-bezier(.16,.9,.3,1.2) both; }
.game-tutorial[data-step="3"] .tutorial-ball { display: none; }
.game-tutorial[data-step="3"] .tutorial-heading { min-height: clamp(88px,17.5vmin,132px); margin-bottom: 0; perspective: 700px; }
.game-tutorial[data-step="3"] .tutorial-copy h2 { color: #fff; font-size: clamp(36px,8.8vmin,56px); }
.game-tutorial[data-step="3"] .tutorial-copy h2 > span { display: block; margin-bottom: 7px; font-size: .64em; letter-spacing: .08em; }
.game-tutorial[data-step="3"] .tutorial-copy h2 { backface-visibility: hidden; }
.game-tutorial[data-completion="go"] .tutorial-copy h2 { color: #8dff9b; font-size: clamp(64px,16vmin,104px); letter-spacing: -.04em; }
.game-tutorial button:not(.tutorial-pad):focus-visible, .tutorial-help:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.tutorial-pad:focus-visible { outline: none; }
.tutorial-pad:focus-visible .tutorial-cue { filter: drop-shadow(0 0 8px #8dff9b); }
@keyframes tutorial-press { 0%,100% { transform: translateY(-7px) scale(1); } 45%,70% { transform: translateY(9px) scale(.93); } }
@keyframes tutorial-release { 0%,20% { transform: translateY(9px) scale(.93); opacity: 1; } 65%,100% { transform: translateY(-15px) scale(1); opacity: .55; } }
@keyframes tutorial-ring { 0% { transform: scale(.6); opacity: 0; } 35% { opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes tutorial-spin { to { transform: rotate(360deg); } }
@media (max-height: 650px) {
    .tutorial-heading { flex-direction: row; min-height: 32px; }
    .tutorial-copy h2 { font-size: 28px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .game-tutorial[data-step="3"] { padding-top: 100px; padding-bottom: 40px; }
    .game-tutorial[data-step="3"] .tutorial-copy { flex-direction: row; align-items: center; justify-content: center; gap: 24px; }
    .game-tutorial[data-step="3"] .tutorial-spinner { margin: 0; }
}
@media (max-width: 360px), (max-height: 650px) {
    .game-tutorial[data-step="1"] .tutorial-copy h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .tutorial-hand, .tutorial-touch-ring { animation: none !important; }
    .game-tutorial[data-step="3"] .tutorial-copy, .tutorial-spinner { animation: none; }
    .game-tutorial, .tutorial-focus, .tutorial-steps i, .tutorial-cue { transition: none !important; }
}