.game-tutorial{box-sizing:border-box;width:min(430px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:24px;border:2px solid #405c83;border-radius:26px;background:#131f36;color:#f4f5ff;box-shadow:0 12px 0 #070d21;font:16px/1.5 Arial,sans-serif;text-align:center}.game-tutorial::backdrop{background:#050c20b8;backdrop-filter:blur(5px)}.tutorial-top,.tutorial-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px}.tutorial-game{font-size:13px;letter-spacing:.1em;color:#7edcff;font-weight:800}.tutorial-skip{background:none;border:0;color:#bdcae0;padding:8px;cursor:pointer}.tutorial-inputs{display:flex;gap:6px;margin:16px 0}.tutorial-inputs button{flex:1;padding:10px 7px;border:1px solid #456082;border-radius:12px;background:#1a2c47;color:#dce6f7;font:600 12px/1.3 Arial;cursor:pointer}.tutorial-inputs button[aria-pressed=true]{background:#365578;border-color:#72d9f4;color:white}.game-tutorial h2{font-size:26px;line-height:1.2;margin:20px 0 14px}.tutorial-demo{position:relative;margin:0 auto 18px;height:125px;width:232px;display:grid;grid-template-columns:repeat(3,42px);gap:8px;justify-content:center;align-content:center;direction:ltr}.tutorial-tile{height:39px;border-radius:10px;background:#66d9c4;box-shadow:inset 0 4px #ffffff60,inset 0 -5px #17345544}.tutorial-tile:nth-child(2n){background:#b79aff}.tutorial-tile:nth-child(3n){background:#ffcb62}.tutorial-pointer{position:absolute;width:42px;height:58px;left:115px;top:55px;filter:drop-shadow(0 4px 3px #0006);transform-origin:50% 50%}.tutorial-pointer svg{width:100%;height:100%}.tutorial-copy{min-height:66px;font-size:16px;color:#e0e9f9;margin:12px 0}.tutorial-note{font-size:12px;color:#aebed7}.tutorial-bottom{margin-top:24px;font-size:13px;color:#afc0da}.tutorial-next{border:1px solid #ffe1a6;border-bottom:4px solid #ae5960;border-radius:13px;background:linear-gradient(110deg,#ffb64e,#ff8375);color:#101d35;font:800 16px Arial;padding:14px 28px;cursor:pointer}.game-tutorial button:focus-visible{outline:3px solid #79d8ff;outline-offset:3px}.tutorial-reopen{font:inherit!important;padding:8px 12px!important;border-radius:12px!important;white-space:normal}
@media(prefers-reduced-motion:no-preference){.tutorial-pointer{animation:tutorial-tap 1.8s ease-in-out infinite}.game-tutorial:is([data-motion=drag],[data-motion=swipe],[data-motion=aim]) .tutorial-pointer{animation:tutorial-drag 2.4s ease-in-out infinite}.game-tutorial[data-motion=rotate] .tutorial-pointer{animation:tutorial-circle 3s linear infinite}.game-tutorial[data-motion=jump] .tutorial-pointer{animation:tutorial-jump 1.8s ease-in-out infinite}.game-tutorial[data-motion=hold] .tutorial-pointer{animation:tutorial-hold 2.4s ease-in-out infinite}}
@keyframes tutorial-tap{0%,100%{transform:translateY(0)}40%,60%{transform:translateY(-9px) scale(.94)}}@keyframes tutorial-drag{0%,100%{transform:translateX(-45px)}50%{transform:translateX(35px)}}@keyframes tutorial-circle{from{transform:rotate(0deg) translateX(25px) rotate(0deg)}to{transform:rotate(360deg) translateX(25px) rotate(-360deg)}}@keyframes tutorial-jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-25px)}}@keyframes tutorial-hold{0%,90%,100%{transform:scale(1)}15%,75%{transform:scale(.9)}}
@media(max-height:650px){.game-tutorial{padding:16px}.tutorial-demo{height:95px}.game-tutorial h2{margin:10px 0}.tutorial-copy{min-height:0}.tutorial-bottom{margin-top:14px}}
