/* ═══════════════════════════════════════════════════════
   Onboarding Spotlight Tour — vanilla CSS, no third-party lib.
   Reusable engine styling: KanaOnboardingTour (kot-*).
   ═══════════════════════════════════════════════════════ */

.kot-root { display: none; }
.kot-root.kot-active { display: block; }

body.kot-lock { overflow: hidden; }

/* Click-blocker: swallows interaction with the page while the tour runs */
.kot-blocker {
    position: fixed; inset: 0; z-index: 999990;
    background: transparent;
}

/* Spotlight cutout: box-shadow "hole" trick, no clip-path / no overlay div needed */
.kot-highlight {
    position: fixed; z-index: 999991;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(10, 14, 22, 0.68);
    pointer-events: none;
    opacity: 0;
    transition: top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1),
                width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
}
.kot-root.kot-active .kot-highlight { opacity: 1; }

/* Speech bubble + mascot */
.kot-tooltip {
    position: fixed; z-index: 999993;
    display: flex; align-items: flex-start; gap: 10px;
    max-width: 336px;
    opacity: 0;
    transition: top .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}

.kot-mascot {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; object-position: top center;
    background: var(--card, #fff);
    border: 2px solid var(--card, #fff);
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    animation: kot-float 2.6s ease-in-out infinite;
}
@keyframes kot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.kot-bubble {
    position: relative;
    background: var(--card, #fff);
    border: 1px solid var(--card-border, rgba(0,0,0,0.1));
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.16);
}
.kot-bubble::before {
    content: '';
    position: absolute; left: -6px; top: 16px;
    width: 12px; height: 12px;
    background: var(--card, #fff);
    border-left: 1px solid var(--card-border, rgba(0,0,0,0.1));
    border-bottom: 1px solid var(--card-border, rgba(0,0,0,0.1));
    transform: rotate(45deg);
}
.kot-bubble-title {
    font-size: 0.72rem; font-weight: 700; color: var(--primary, #4A6FA5);
    letter-spacing: 0.04em; margin-bottom: 4px;
}
.kot-bubble-text {
    font-size: 0.86rem; line-height: 1.5; color: var(--text, #1A2B3C);
}

/* Desktop: control row lives inside the bubble card, moves with it as one unit */
.kot-controls {
    display: flex; align-items: center; gap: 12px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed var(--card-border, rgba(0,0,0,0.18));
}

.kot-progress {
    font-family: "JetBrains Mono", Menlo, monospace;
    font-size: 0.78rem; color: var(--sub, #6B7886);
    white-space: nowrap;
}
.kot-nav { display: flex; gap: 8px; margin-left: auto; }

.kot-btn {
    font-family: inherit; font-size: 0.82rem; font-weight: 600;
    padding: 8px 14px; border-radius: 9999px; border: none;
    cursor: pointer; transition: opacity .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.kot-btn:active { transform: scale(.96); }
.kot-btn-text {
    background: none; color: var(--sub, #6B7886);
    padding-left: 4px; padding-right: 4px;
}
.kot-prev {
    background: var(--bg, #FAFAF7); color: var(--text, #1A2B3C);
    border: 1px solid var(--card-border, rgba(0,0,0,0.12));
}
.kot-prev:disabled { opacity: 0.35; cursor: not-allowed; }
.kot-btn-primary {
    background: var(--primary, #4A6FA5); color: #fff;
}
.kot-btn-primary:hover { opacity: 0.9; }

/* Manual replay trigger — page-corner button */
.kot-replay-btn {
    position: fixed; top: 14px; right: 14px; z-index: 500;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--card, #fff) url('/assets/characters/cat.webp') center/cover no-repeat;
    border: 2px solid var(--card-border, rgba(0,0,0,0.12));
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    cursor: pointer; padding: 0;
}
.kot-replay-btn::after {
    content: '?';
    position: absolute; bottom: -3px; right: -3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--primary, #4A6FA5); color: #fff;
    font-size: 0.68rem; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ── Mobile (< 768px): bubble pins to the bottom instead of following the target.
   .kot-controls stays nested in the DOM (same buttons, no duplication) but regains its
   own position:fixed bottom bar — a fixed descendant escapes its ancestor's box regardless
   of nesting, so this reproduces the original standalone bottom bar pixel-for-pixel. ── */
@media (max-width: 767px) {
    .kot-tooltip.kot-tooltip--mobile {
        left: 12px !important; right: 12px; top: auto !important;
        bottom: 76px; max-width: none;
    }
    .kot-tooltip.kot-tooltip--mobile .kot-controls {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 999994;
        margin-top: 0; border-top: 1px solid var(--card-border, rgba(0,0,0,0.1));
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--card, #fff);
        box-shadow: 0 -4px 18px rgba(0,0,0,0.10);
    }
    .kot-nav { gap: 6px; }
    .kot-btn { padding: 8px 12px; font-size: 0.78rem; }
}