/* Alpine.js cloak — hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* HTMX loading indicator — hidden by default, shown during requests */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex;
}

/* Global page loader — fixed bar at top of viewport */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    background: linear-gradient(90deg, #6366f1, #818cf8, #6366f1);
    background-size: 200% 100%;
    animation: htmx-progress 1.5s ease-in-out infinite;
}

@keyframes htmx-progress {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* HTMX error toast */
#htmx-error-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    max-width: 24rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#htmx-error-toast.hidden {
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
}

/* ── Game sidebar ──────────────────────────────────────────────────── */
.game-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(75, 85, 99, 0.4) transparent;
}
.game-sidebar::-webkit-scrollbar {
    width: 4px;
}
.game-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.game-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.4);
    border-radius: 2px;
}

/* Topic tree row hover effect */
.topic-row + .topic-row {
    border-top: 1px solid rgba(55, 65, 81, 0.3);
}

/* ── Landing page ─────────────────────────────────────────────────── */

/* Section divider — faint indigo gradient line between marketing sections */
.landing-divider {
    height: 1px;
    max-width: 12rem;
    margin: 0 auto;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(99, 102, 241, 0.25),
        transparent
    );
}