/* ============================================================
   PREMIUM.CSS
   ------------------------------------------------------------
   Additive visual/interaction layer loaded AFTER style.css.
   Touches ONLY presentation: no markup, business logic, or
   functionality from the app is changed by this file.

   Loaded on every page right after style.css. Pairs with
   assets/js/premium.js, which injects a handful of small helper
   elements (cursor, scroll progress bar, scroll-to-top button,
   ambient background) and toggles a few classes on scroll/hover.

   Respects prefers-reduced-motion and disables the heaviest
   effects (custom cursor, tilt, ambient particles) on touch
   devices, where they don't apply / would hurt performance.
   ============================================================ */

:root {
    --premium-glass-bg: rgba(20, 20, 20, 0.55);
    --premium-glass-border: rgba(255, 255, 255, 0.08);
    --premium-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --premium-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   0. ACCESSIBILITY GUARDRAIL
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    #ambient-bg,
    #premium-cursor-dot,
    #premium-cursor-ring {
        display: none !important;
    }
}

html {
    scroll-behavior: smooth;
}

/* Keep real text cursors where people actually need to see them,
   even while the custom cursor is active. */
body.has-premium-cursor input,
body.has-premium-cursor textarea,
body.has-premium-cursor select,
body.has-premium-cursor [contenteditable="true"] {
    cursor: text;
}

main,
footer {
    position: relative;
    z-index: 1;
}

/* ============================================================
   1. AMBIENT ANIMATED BACKGROUND
   ============================================================ */
#ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ambient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.28;
    will-change: transform;
}

.ambient-blob-1 {
    width: 42vw;
    height: 42vw;
    max-width: 620px;
    max-height: 620px;
    top: -10%;
    right: -8%;
    background: radial-gradient(circle, var(--color-primary), transparent 70%);
    animation: ambientDrift1 22s ease-in-out infinite;
}

.ambient-blob-2 {
    width: 36vw;
    height: 36vw;
    max-width: 560px;
    max-height: 560px;
    bottom: -12%;
    left: -10%;
    background: radial-gradient(circle, var(--color-secondary), transparent 70%);
    animation: ambientDrift2 26s ease-in-out infinite;
}

.ambient-blob-3 {
    width: 26vw;
    height: 26vw;
    max-width: 420px;
    max-height: 420px;
    top: 40%;
    left: 50%;
    background: radial-gradient(circle, var(--color-rgb-purple), transparent 70%);
    opacity: 0.16;
    animation: ambientDrift3 30s ease-in-out infinite;
}

@keyframes ambientDrift1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-6%, 8%) scale(1.08);
    }
}

@keyframes ambientDrift2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(8%, -6%) scale(1.1);
    }
}

@keyframes ambientDrift3 {

    0%,
    100% {
        transform: translate(-50%, 0) scale(1);
    }

    50% {
        transform: translate(-45%, 6%) scale(1.15);
    }
}

#ambient-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.10), transparent 70%);
    will-change: transform;
    transition: transform 0.25s var(--premium-ease);
}

#ambient-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   2. CUSTOM CURSOR (desktop / fine-pointer only, see premium.js)
   ============================================================ */
body.has-premium-cursor,
body.has-premium-cursor a,
body.has-premium-cursor button,
body.has-premium-cursor .item,
body.has-premium-cursor [role="button"] {
    cursor: none;
}

#premium-cursor-dot,
#premium-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    border-radius: 50%;
    transition: opacity 0.2s ease;
}

#premium-cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--color-secondary);
    box-shadow: 0 0 8px 2px rgba(0, 229, 255, 0.7);
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}

#premium-cursor-ring {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 1.5px solid rgba(0, 229, 255, 0.55);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.25);
    transition: width 0.25s var(--premium-ease), height 0.25s var(--premium-ease),
        margin 0.25s var(--premium-ease), border-color 0.25s ease, opacity 0.2s ease;
    will-change: transform;
}

#premium-cursor-ring.is-hovering {
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-color: var(--color-primary);
    background: rgba(255, 23, 68, 0.06);
}

#premium-cursor-ring.is-pressing {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
}

/* ============================================================
   3. MAGNETIC BUTTONS
   ============================================================ */
.magnetic {
    transition: transform 0.35s var(--premium-ease-bounce);
}

/* ============================================================
   4. BUTTON EFFECTS (ripple, lift, glow) — applies broadly to
      existing buttons across the whole app without new markup.
   ============================================================ */
.auth-btn,
.cart-btn,
.login-btn,
.ip-action-btn,
.admin-user-btn,
.add-shop-cart,
button {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--premium-ease), box-shadow 0.25s var(--premium-ease), filter 0.25s ease;
}

.auth-btn:hover,
.cart-btn:hover,
.login-btn:hover,
.ip-action-btn:hover,
.admin-user-btn:hover,
.add-shop-cart:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

.auth-btn:active,
.cart-btn:active,
.login-btn:active,
.ip-action-btn:active,
.admin-user-btn:active,
.add-shop-cart:active {
    transform: translateY(0) scale(0.97);
}

.premium-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    pointer-events: none;
    animation: premiumRippleAnim 0.6s ease-out;
}

@keyframes premiumRippleAnim {
    to {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* ============================================================
   5. SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    z-index: 10001;
    transition: width 0.1s linear;
}

/* ============================================================
   6. SCROLL REVEAL
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--premium-ease), transform 0.7s var(--premium-ease);
    transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

.reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   7. SCROLL-TO-TOP BUTTON
   ============================================================ */
#scroll-top-btn {
    position: fixed;
    bottom: var(--space-6, 24px);
    inset-inline-end: var(--space-6, 24px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--premium-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--premium-glass-border);
    color: var(--color-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.3s var(--premium-ease), transform 0.3s var(--premium-ease), visibility 0.3s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scroll-top-btn svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

#scroll-top-btn .progress-ring__bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2;
}

#scroll-top-btn .progress-ring__circle {
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.scroll-top-arrow {
    position: relative;
    z-index: 1;
}

/* ============================================================
   8. STICKY HEADER — subtle blur/shadow once scrolled
   ============================================================ */
.main-header {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.main-header.is-scrolled .top-bar {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
}

/* ============================================================
   9. PREMIUM CARDS — product tiles
   ============================================================ */
.item {
    --glow-x: 50%;
    --glow-y: 50%;
    position: relative;
    transition: transform 0.15s var(--premium-ease), box-shadow 0.35s var(--premium-ease);
    transform-style: preserve-3d;
    will-change: transform;
}

.item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(0, 229, 255, 0.16), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}

.item:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 229, 255, 0.12);
}

.item:hover::after {
    opacity: 1;
}

.item .picture {
    overflow: hidden;
}

.item .product-img {
    transition: transform 0.5s var(--premium-ease);
}

.item:hover .product-img {
    transform: scale(1.08) rotate(0.5deg);
}

/* ============================================================
   10. GLASS PANELS — existing card containers, enhanced
   ============================================================ */
.form-area,
.admin-table-wrap,
.seller-card,
.invoice-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--premium-glass-border);
}

/* ============================================================
   11. TOAST — glassmorphism + smoother motion
   ============================================================ */
.toast {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(20, 20, 20, 0.75);
    transition: transform 0.5s var(--premium-ease-bounce), opacity 0.35s ease;
}

/* ============================================================
   12. FOCUS STATES (accessibility)
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
}

/* ============================================================
   13. RESPONSIVE / PERFORMANCE GUARDRAILS
   ============================================================ */
@media (max-width: 768px) {
    .ambient-blob {
        filter: blur(50px);
        opacity: 0.18;
    }

    #scroll-top-btn {
        width: 42px;
        height: 42px;
        bottom: var(--space-4, 16px);
        inset-inline-end: var(--space-4, 16px);
    }
}

/* ============================================================
   14. FLY-TO-CART: cart icon bounce + counter pop
   ============================================================ */
.cart-btn.cart-bounce {
    animation: cartBounce 0.5s var(--premium-ease-bounce);
}

@keyframes cartBounce {
    0% {
        transform: scale(1) rotate(0);
    }

    30% {
        transform: scale(1.22) rotate(-8deg);
    }

    55% {
        transform: scale(0.94) rotate(4deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.cart-count.cart-count-pop {
    display: inline-block;
    animation: cartCountPop 0.4s var(--premium-ease-bounce);
}

@keyframes cartCountPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.6);
        color: var(--color-accent);
    }

    100% {
        transform: scale(1);
    }
}

@media (hover: none),
(pointer: coarse) {

    #premium-cursor-dot,
    #premium-cursor-ring {
        display: none !important;
    }

    body.has-premium-cursor {
        cursor: auto;
    }
}

/* ============================================================
   15. PRODUCT GALLERY — hover zoom + lightbox pan/zoom
   ============================================================ */

/* In-place hover magnifier on the main product image. The zoom
   origin point is set dynamically via JS (product.php) to follow
   the cursor; this class just triggers the scale. */
.gallery-main img.is-zoomed {
    transform: scale(2.2);
    transition: transform 0.08s linear;
}

/* Smooth pop-in for the lightbox itself (style.css only defines
   this transform for .modal, not .lightbox-content). */
.lightbox-content {
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.4s var(--premium-ease-bounce), opacity 0.3s ease;
}

.modal-overlay.active .lightbox-content {
    transform: scale(1);
    opacity: 1;
}

#lightbox-img {
    transition: transform 0.15s ease-out;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: zoom-in;
}

#lightbox-img.is-zoomed-in {
    cursor: grab;
}

#lightbox-img.is-dragging {
    cursor: grabbing;
    transition: none;
}

.lightbox-zoom-hint {
    position: absolute;
    bottom: -34px;
    inset-inline: 0;
    text-align: center;
    color: var(--color-text-muted, #ababab);
    font-size: 12px;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .lightbox-zoom-hint {
        display: none;
    }
}

/* ============================================================
   15. PRODUCT GALLERY — zoom, pan, fullscreen
   ============================================================ */
.gallery-main {
    transition: box-shadow 0.35s var(--premium-ease), transform 0.35s var(--premium-ease);
}

.gallery-main:hover {
    box-shadow: 0 0 0 1px var(--color-secondary), 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 229, 255, 0.15);
}

/* Entrance animation for the lightbox card itself (separate from the
   overlay's own opacity/visibility fade already defined in style.css). */
.lightbox-content {
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.4s var(--premium-ease), opacity 0.4s ease;
}

.modal-overlay.active .lightbox-content {
    transform: scale(1);
    opacity: 1;
}

#lightbox-img {
    cursor: zoom-in;
    transition: transform 0.25s var(--premium-ease);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.lightbox-content.is-zoomed #lightbox-img {
    cursor: grab;
    transition: none;
}

.lightbox-content.is-zoomed #lightbox-img.is-dragging {
    cursor: grabbing;
}

.lightbox-toolbar {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-2);
    background: var(--premium-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--premium-glass-border);
    border-radius: var(--radius-full);
    padding: var(--space-2);
}

.lightbox-tool {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--premium-ease-bounce);
}

.lightbox-tool:hover {
    background: var(--color-secondary);
    color: #000;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .lightbox-toolbar {
        bottom: -52px;
    }

    .lightbox-tool {
        width: 32px;
        height: 32px;
        font-size: var(--text-sm);
    }
}

/* ============================================================
   16. FULL-SCREEN LIVE SEARCH
   ============================================================ */
html.search-overlay-open {
    overflow: hidden;
}

#search-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--premium-ease), visibility 0.3s;
    overflow-y: auto;
}

#search-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.search-overlay-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--space-10);
    direction: rtl;
    transform: translateY(-16px);
    opacity: 0;
    transition: transform 0.4s var(--premium-ease), opacity 0.4s var(--premium-ease);
}

#search-overlay.is-active .search-overlay-inner {
    transform: translateY(0);
    opacity: 1;
}

.search-overlay-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-neutral-900);
    border: 1px solid var(--color-gaming-border);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.search-overlay-icon {
    font-size: 20px;
    opacity: 0.7;
}

#search-overlay-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-size: var(--text-lg);
    font-family: inherit;
    direction: rtl;
}

#search-overlay-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition-base);
}

#search-overlay-close:hover {
    background: var(--color-error);
    color: #fff;
    transform: rotate(90deg);
}

.search-overlay-body {
    margin-top: var(--space-6);
}

.search-section-title {
    color: var(--color-secondary);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: var(--space-6) 0 var(--space-3);
}

.search-section-title:first-child {
    margin-top: 0;
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.search-tag {
    background: var(--color-neutral-900);
    border: 1px solid var(--color-gaming-border);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-base);
}

.search-tag:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    transform: translateY(-2px);
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.search-result-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-neutral-900);
    border: 1px solid var(--color-gaming-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    text-decoration: none;
    transition: var(--transition-base);
}

.search-result-card:hover {
    border-color: var(--color-secondary);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 229, 255, 0.12);
}

.search-result-card img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.search-result-card .src-name {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: 2px;
}

.search-result-card .src-price {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.search-oos-badge {
    display: inline-block;
    margin-inline-start: var(--space-2);
    color: var(--color-error);
    font-size: 10px;
    font-weight: var(--font-bold);
}

.search-view-all {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--color-secondary);
    font-weight: var(--font-bold);
    text-decoration: none;
    transition: var(--transition-base);
}

.search-view-all:hover {
    transform: translateX(-4px);
}

.search-loading,
.search-empty {
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-8) 0;
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .search-overlay-inner {
        padding: var(--space-6) var(--space-3) var(--space-8);
    }

    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   17. GAMIFICATION — profile XP/Level hero (Phase 1: Foundation)
   ============================================================ */
.gamification-hero {
    max-width: 900px;
    margin: var(--space-6) auto 0;
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.08), rgba(0, 229, 255, 0.08)), var(--premium-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--premium-glass-border);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.gh-top {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.gh-level-badge {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 0 26px rgba(0, 229, 255, 0.35);
    animation: ghLevelPulse 3s ease-in-out infinite;
}

@keyframes ghLevelPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 34px rgba(255, 23, 68, 0.4);
    }
}

.gh-level-number {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.gh-level-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

.gh-info {
    flex: 1;
    min-width: 220px;
}

.gh-username {
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.gh-xp-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.gh-xp-remaining {
    color: var(--color-secondary);
}

.xp-bar-track {
    width: 100%;
    height: 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    border: 1px solid var(--color-gaming-border);
}

.xp-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
    transition: width 1.2s var(--premium-ease);
}

.gh-streak {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(255, 214, 0, 0.08);
    border: 1px solid rgba(255, 214, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
}

.gh-streak-flame {
    font-size: 20px;
    animation: ghFlameFlicker 1.6s ease-in-out infinite;
}

@keyframes ghFlameFlicker {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.12) rotate(-4deg);
    }
}

.gh-streak-count {
    font-weight: var(--font-bold);
    color: var(--color-accent);
    font-size: var(--text-lg);
    line-height: 1;
}

.gh-streak-label {
    font-size: 10px;
    color: var(--color-text-muted);
}

.gh-reward-note {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-gaming-border);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.gh-xp-gain {
    color: var(--color-secondary);
    font-weight: var(--font-bold);
}

.nav-level-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-size: 10px;
    font-weight: var(--font-bold);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    margin-inline-start: var(--space-1);
}

.nav-spin-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-accent);
    color: #000;
    font-size: 10px;
    font-weight: var(--font-bold);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    margin-inline-start: var(--space-1);
}

/* ============================================================
   18. HOMEPAGE LEADERBOARD TEASER — eye-catching, guest-facing
   ============================================================ */
.lb-teaser {
    position: relative;
    margin: var(--space-10) auto;
    padding: var(--space-8) var(--space-4);
    max-width: 1100px;
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.08), rgba(0, 229, 255, 0.08));
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 0 50px rgba(0, 229, 255, 0.12);
    overflow: hidden;
}

.lb-teaser::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: lbBorderFlow 6s linear infinite;
    pointer-events: none;
}

@keyframes lbBorderFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

.lb-teaser-heading {
    text-align: center;
    margin-bottom: var(--space-6);
    position: relative;
}

.lb-teaser-heading h2 {
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
}

.lb-teaser-heading p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.lb-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-4);
    width: min(94vw, 700px);
    margin: 0 auto;
    position: relative;
    flex-wrap: wrap;
}

.lb-podium-card {
    flex: 1;
    max-width: 200px;
    min-width: 140px;
    text-align: center;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(6px);
    border: 1px solid var(--color-gaming-border);
    border-radius: var(--radius-xl, 20px);
    padding: var(--space-5) var(--space-3);
    position: relative;
    transition: var(--transition-base);
}

.lb-podium-card:hover {
    transform: translateY(-6px);
}

.lb-podium-card.rank-1 {
    order: 2;
    padding-top: var(--space-8);
    border-color: #ffd600;
    box-shadow: 0 0 40px rgba(255, 214, 0, 0.25);
    transform: scale(1.08);
    z-index: 2;
}

.lb-podium-card.rank-1:hover {
    transform: scale(1.08) translateY(-6px);
}

.lb-podium-card.rank-2 {
    order: 1;
    border-color: #c0c0c0;
    box-shadow: 0 0 25px rgba(192, 192, 192, 0.15);
}

.lb-podium-card.rank-3 {
    order: 3;
    border-color: #cd7f32;
    box-shadow: 0 0 25px rgba(205, 127, 50, 0.15);
}

.lb-crown {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    filter: drop-shadow(0 0 10px rgba(255, 214, 0, 0.6));
}

.lb-rank-medal {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: var(--space-2);
}

.lb-podium-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-secondary);
    margin-bottom: var(--space-2);
}

.rank-1 .lb-podium-avatar {
    width: 84px;
    height: 84px;
    border-color: #ffd600;
}

.lb-podium-name {
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-podium-xp {
    color: var(--color-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}

.lb-podium-level {
    display: inline-block;
    margin-top: var(--space-1);
    font-size: 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    padding: 1px 8px;
    border-radius: var(--radius-full);
}

.lb-teaser-cta {
    text-align: center;
    margin-top: var(--space-8);
    position: relative;
}

@media (max-width: 640px) {
    .lb-podium-card.rank-1 {
        transform: scale(1);
    }

    .lb-podium-card.rank-1:hover {
        transform: translateY(-6px);
    }
}

@media (max-width: 640px) {
    .gh-top {
        justify-content: center;
        text-align: center;
    }

    .gh-info {
        order: 3;
        flex-basis: 100%;
    }
}