.first-play-tutorial{position:absolute;inset:0;z-index:30;pointer-events:none;font-family:system-ui,sans-serif}
.first-play-tutorial[hidden]{display:none}
.first-play-label{position:absolute;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);min-height:32px;box-sizing:border-box;padding:6px 10px;border:1px solid #eed39b8c;border-radius:16px;background:#102932e8;color:#fff2cb;box-shadow:0 3px 12px #0003;text-align:center;transition:left .065s linear,top .065s linear}
.first-play-label strong{display:block;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap}
.first-play-arrow{position:absolute;transform:translateX(-50%);font:600 32px/1 system-ui;color:#ffe5a5;text-shadow:0 2px 4px #09242d,0 0 8px #0006;animation:first-play-bounce 1.4s ease-in-out infinite;transition:left .065s linear,top .065s linear}
.first-play-tutorial[data-step=done] .first-play-arrow{display:none}
@keyframes first-play-bounce{0%,100%{translate:0 -3px;opacity:.8}50%{translate:0 3px;opacity:1}}
@media(prefers-reduced-motion:reduce){.first-play-arrow{animation:none}.first-play-arrow,.first-play-label{transition:none}}