/*
 * On-site tutorial overlay — gold-glow target highlight + speech-bubble
 * step marker. Used by /static/js/tutorial.js (phase 3 of the
 * tutorial-mode rollout).
 *
 * Visual language: "game tutorial / mission marker". The highlighted
 * UI element gets a gold ring + pulsing glow (matches the .is-tutorial
 * offer-card styling from phase 2). A bubble floats nearby with the
 * step body and Next / Skip buttons. A semi-transparent backdrop
 * darkens everything except the highlighted element, but does NOT
 * intercept clicks — the user can still interact with the highlighted
 * element to advance the tutorial naturally.
 *
 * Reduced-motion users get the framing without the pulse animation.
 */

/* Backdrop — covers the whole viewport. `pointer-events: none` so the
 * user can still click on the page. Click-through is intentional:
 * the tutorial guides; it doesn't block. */
.oa-tut-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(15, 23, 42, 0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}
.oa-tut-backdrop.is-visible { opacity: 1; }

/* The highlight ring — wraps around the targeted DOM node. JS sets
 * top/left/width/height to match the target's bounding rect; CSS
 * provides the gold ring + glow + pulse. The ring sits between
 * the backdrop (z-index 1090) and the bubble (z-index 1092). */
.oa-tut-highlight {
    position: fixed;
    z-index: 1091;
    pointer-events: none;
    border-radius: 10px;
    box-shadow: 0 0 0 3px #f5af19,
                0 0 0 6px rgba(245, 175, 25, 0.45),
                0 0 32px 8px rgba(245, 175, 25, 0.45);
    animation: oa-tut-pulse 1.8s ease-in-out infinite;
    transition: top 200ms ease, left 200ms ease,
                width 200ms ease, height 200ms ease;
}
@keyframes oa-tut-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px #f5af19,
                    0 0 0 6px rgba(245, 175, 25, 0.45),
                    0 0 32px 8px rgba(245, 175, 25, 0.45);
    }
    50% {
        box-shadow: 0 0 0 3px #ffc14d,
                    0 0 0 8px rgba(245, 175, 25, 0.65),
                    0 0 48px 12px rgba(245, 175, 25, 0.65);
    }
}
@media (prefers-reduced-motion: reduce) {
    .oa-tut-highlight { animation: none; }
}

/* Speech bubble — floats near the target with the step content. The
 * triangular tail is drawn with a pseudo-element; JS picks which side
 * by toggling .pos-top / .pos-bottom / .pos-left / .pos-right. */
.oa-tut-bubble {
    position: fixed;
    z-index: 1092;
    background: #ffffff;
    color: #0f172a;
    border-radius: 12px;
    border: 2px solid #f5af19;
    padding: 1rem 1.1rem 0.9rem;
    width: min(360px, 92vw);
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.45),
                0 0 0 1px rgba(245, 175, 25, 0.3);
    font-size: 0.92rem;
    line-height: 1.55;
    transition: top 200ms ease, left 200ms ease, opacity 150ms ease;
    opacity: 0;
}
.oa-tut-bubble.is-visible { opacity: 1; }
[data-theme="dark"] .oa-tut-bubble {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #ffc14d;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(245, 175, 25, 0.35);
}

/* Speech-bubble tail — a small triangle pointing at the target. The
 * pseudo-element renders a 12px wedge in the right colour for the
 * current side. */
.oa-tut-bubble::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}
.oa-tut-bubble.pos-top::before {
    left: 50%;
    top: 100%;
    margin-left: -10px;
    border-top-color: #f5af19;
}
.oa-tut-bubble.pos-bottom::before {
    left: 50%;
    bottom: 100%;
    margin-left: -10px;
    border-bottom-color: #f5af19;
}
.oa-tut-bubble.pos-left::before {
    top: 50%;
    left: 100%;
    margin-top: -10px;
    border-left-color: #f5af19;
}
.oa-tut-bubble.pos-right::before {
    top: 50%;
    right: 100%;
    margin-top: -10px;
    border-right-color: #f5af19;
}
[data-theme="dark"] .oa-tut-bubble.pos-top::before    { border-top-color: #ffc14d; }
[data-theme="dark"] .oa-tut-bubble.pos-bottom::before { border-bottom-color: #ffc14d; }
[data-theme="dark"] .oa-tut-bubble.pos-left::before   { border-left-color: #ffc14d; }
[data-theme="dark"] .oa-tut-bubble.pos-right::before  { border-right-color: #ffc14d; }

.oa-tut-step-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.66rem;
    font-weight: 700;
    color: #b07000;
    margin-bottom: 0.25rem;
}
[data-theme="dark"] .oa-tut-step-label { color: #ffc14d; }

.oa-tut-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.oa-tut-body {
    margin: 0 0 0.9rem;
    color: inherit;
}
.oa-tut-body strong { font-weight: 700; }
.oa-tut-body code {
    background: rgba(245, 175, 25, 0.15);
    padding: 0 0.25em;
    border-radius: 3px;
    font-size: 0.9em;
}

.oa-tut-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}
.oa-tut-actions .oa-tut-skip { margin-right: auto; }
.oa-tut-btn {
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}
.oa-tut-btn-skip {
    color: #64748b;
    border-color: transparent;
}
[data-theme="dark"] .oa-tut-btn-skip { color: #94a3b8; }
.oa-tut-btn-skip:hover { background: rgba(100, 116, 139, 0.1); }

.oa-tut-btn-prev {
    border-color: #cbd5e1;
    color: #475569;
}
[data-theme="dark"] .oa-tut-btn-prev {
    border-color: #475569;
    color: #cbd5e1;
}
.oa-tut-btn-prev:hover { background: rgba(203, 213, 225, 0.2); }
.oa-tut-btn-prev:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.oa-tut-btn-next {
    background: #f5af19;
    border-color: #f5af19;
    color: #0f172a;
}
.oa-tut-btn-next:hover {
    background: #ffc14d;
    border-color: #ffc14d;
}

/* Floating mini-launcher — shown when the tutorial is paused
 * (e.g., user clicked off the highlighted thing). Lets them resume
 * without going through the Settings modal. JS toggles .is-visible. */
.oa-tut-launcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1080;
    background: #f5af19;
    color: #0f172a;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 12px 24px -8px rgba(245, 175, 25, 0.55);
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 0.35rem;
}
.oa-tut-launcher.is-visible { display: inline-flex; }
.oa-tut-launcher:hover {
    background: #ffc14d;
    transform: translateY(-1px);
}

/* Step-count chip inside the bubble — shows "Step 3 of 7". */
.oa-tut-step-count {
    font-size: 0.72rem;
    color: #64748b;
    margin-right: auto;
}
[data-theme="dark"] .oa-tut-step-count { color: #94a3b8; }