/* Compact honey/navy coachmarks, shared by desktop and Telegram WebViews. */
.tutorial-overlay { position: fixed; inset: 0; z-index: 1200; isolation: isolate; touch-action: none; padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); }
.tutorial-spotlight { position: fixed; border: 1.5px solid var(--honey); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(2, 7, 20, .76), 0 0 0 5px rgba(245, 166, 35, .12); pointer-events: none; }
.tutorial-centered { background: rgba(2, 7, 20, .76); }
.tutorial-centered .tutorial-spotlight { display: none; }
.tutorial-float { position: fixed; z-index: 1; max-width: calc(100vw - 24px); outline: none; }
.tutorial-card { position: relative; overflow: auto; max-height: calc(var(--tour-height, 100dvh) - 84px); padding: 18px 20px 20px; border: 1px solid #3b4152; border-radius: 20px; background: linear-gradient(145deg, #19243b, #0e172c 70%); color: var(--ink); box-shadow: 0 18px 68px rgba(0, 0, 0, .5); touch-action: pan-y; }
.tutorial-heading { display: flex; align-items: center; gap: 9px; margin-block-end: 17px; }
.tutorial-symbol { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; color: var(--honey-2); background: var(--honey-soft); border: 1px solid var(--honey-line); border-radius: 10px; }
.tutorial-symbol svg { width: 17px; height: 17px; }
.tutorial-label { color: var(--honey-2); font-size: 11px; font-weight: 750; letter-spacing: .1em; }
.tutorial-close { display: grid; place-items: center; margin-inline-start: auto; margin-inline-end: -10px; margin-block: -7px; width: 44px; height: 44px; border: 0; border-radius: 12px; color: var(--ink-3); background: transparent; cursor: pointer; }
.tutorial-close svg { width: 18px; height: 18px; }
.tutorial-copy h2 { font-size: 21px; line-height: 1.28; letter-spacing: -.025em; font-weight: 720; margin-block-end: 10px; }
.tutorial-copy p { color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.tutorial-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: 22px; }
.tutorial-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 15px; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.tutorial-actions svg { width: 16px; height: 16px; }
.tutorial-next { border: 1px solid var(--honey); background: var(--honey); color: var(--on-honey); min-width: 106px; }
.tutorial-back { border: 1px solid transparent; background: transparent; color: var(--ink-2); }
.tutorial-back:disabled { visibility: hidden; }
.tutorial-next:disabled { opacity: .5; cursor: wait; }
.tutorial-close:disabled { opacity: .5; }
.tutorial-overlay button:focus-visible { outline: 2px solid var(--honey-2); outline-offset: 3px; }
.tutorial-overlay button:hover:not(:disabled) { filter: brightness(1.13); }
.tutorial-track { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: rgba(255, 255, 255, .05); }
.tutorial-track span { display: block; height: 100%; border-radius: 2px; background: var(--honey); transition: width .2s ease; }
.tutorial-progress { display: flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 12px auto 0; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 99px; background: #0b1223; color: #b9c5df; font-size: 12px; line-height: 1.5; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.tutorial-count { font-variant-numeric: tabular-nums; letter-spacing: .09em; color: #fff; font-weight: 750; }
.tutorial-remaining { border-inline-start: 1px solid #34415b; padding-inline-start: 10px; }
.tutorial-error { color: var(--coral); font-size: 12px; margin-block-start: 10px; }
[dir="rtl"] .tutorial-label { letter-spacing: 0; }
[dir="rtl"] .tutorial-copy h2 { letter-spacing: 0; line-height: 1.65; font-size: 20px; }
[dir="rtl"] .tutorial-actions svg { transform: rotate(180deg); }
@media (max-width: 359px) { .tutorial-card { padding: 15px; } .tutorial-copy h2 { font-size: 19px; } }
/* Keep Menu (including replay and language) reachable on the desktop shell. */
@media (min-width: 1000px) { .topbar .avatar-btn { display: flex; } }
@media (prefers-reduced-motion: reduce) { .tutorial-track span { transition: none; } }