body {
            font-family: 'Inter', sans-serif;
            background-color: #000;
            color: #f0f0f0;
        }
        @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            width: 0;
            height: 2px;
            background: #c084fc;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        .nav-link:hover::after {
            width: 60%;
        }
        .nav-link-active {
            color: #fff !important;
        }
        .nav-link-active::after {
            width: 60%;
        }
        /* Interactive Features Dropdown (desktop) */
        .features-dropdown {
            position: relative;
        }
        .features-dropdown-trigger {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .features-dropdown-trigger svg {
            width: 12px;
            height: 12px;
            transition: transform 0.2s;
        }
        .features-dropdown:hover .features-dropdown-trigger svg,
        .features-dropdown.open .features-dropdown-trigger svg {
            transform: rotate(180deg);
        }
        .features-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: rgba(17, 17, 17, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(192, 132, 252, 0.15);
            border-radius: 12px;
            padding: 8px;
            min-width: 210px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
            z-index: 100;
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        }
        .features-dropdown:hover .features-dropdown-menu,
        .features-dropdown.open .features-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        .features-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            color: #d1d5db;
            text-decoration: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.15s;
        }
        .features-dropdown-item:hover {
            background: rgba(192, 132, 252, 0.12);
            color: #fff;
        }
        .features-dropdown-item .icon,
        .features-dropdown-item svg.icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            color: #c084fc;
        }
        .features-dropdown-item:hover .icon,
        .features-dropdown-item:hover svg.icon {
            color: #e9d5ff;
        }
        /* Interactive Features collapsible (mobile) */
        .mobile-features-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }
        .mobile-features-toggle svg {
            width: 14px;
            height: 14px;
            transition: transform 0.25s;
            color: #9ca3af;
        }
        .mobile-features-toggle.open svg {
            transform: rotate(180deg);
        }
        .mobile-features-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .mobile-features-list.open {
            max-height: 400px;
        }
        .mobile-features-list a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            color: #d1d5db;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            border-radius: 8px;
            transition: all 0.15s;
        }
        .mobile-features-list a:hover {
            background: rgba(192, 132, 252, 0.10);
            color: #fff;
        }
        .mobile-features-list .icon,
        .mobile-features-list svg.icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            color: #c084fc;
        }
        .section-header {
            font-size: 1.875rem;
            line-height: 2.25rem;
            font-weight: 700;
            margin-bottom: 2.5rem;
            text-align: center;
            color: #fff;
            letter-spacing: -0.025em;
        }
        @media (min-width: 768px) {
            .section-header { font-size: 2.25rem; line-height: 2.5rem; }
        }
        .menu-card, .gallery-card {
            background-color: #111827;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            overflow: hidden;
            border: 1px solid #1f2937;
        }

        /* Gallery card: hover lift + shadow */
        .gallery-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .gallery-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            border-color: #4b5563;
        }

        /* Menu card: hover lift + shadow + vibrant gradient overlay */
        .menu-card {
            background: linear-gradient(135deg, #111827 0%, #1a1030 50%, #111827 100%);
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .menu-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(147,51,234,0.15), 0 4px 12px rgba(0,0,0,0.3);
            border-color: rgba(147,51,234,0.35);
        }
        .cocktail-img {
            width: 100%;
            height: 12rem;
            object-fit: contain;
            display: block;
            background: #111827;
        }
        .cocktail-fallback {
            display: none;
        }
        .menu-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #1f2937;
        }
        .menu-list-item:last-child { border-bottom-width: 0; }
        .menu-list-item span:first-child { color: #d1d5db; }
        .menu-list-item span:last-child { color: #fff; font-weight: 600; }
        #home h1, #home p { text-shadow: 1px 1px 5px rgba(0,0,0,0.9); }

        /* Section accent line glow */
        .accent-line {
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.15), 0 0 16px rgba(255, 255, 255, 0.08);
        }

        /* Contact section top border glow */
        #contact {
            border-top: 1px solid rgba(147, 51, 234, 0.15);
            box-shadow: inset 0 1px 0 rgba(147, 51, 234, 0.08);
        }

        .fade-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Upcoming Events */
        .event-card-featured {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
            border: 1px solid rgba(239, 68, 68, 0.3);
            background: linear-gradient(135deg, rgba(127, 29, 29, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%);
        }
        .event-card-featured:hover {
            border-color: rgba(239, 68, 68, 0.5);
        }
        /* Purple variant — used by the Interactive Features reel card so the
           new section stands apart from the red Rock Night events frame. */
        .event-card-featured.featured-purple {
            border-color: rgba(168, 85, 247, 0.3);
            background: linear-gradient(135deg, rgba(76, 29, 149, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%);
        }
        .event-card-featured.featured-purple:hover {
            border-color: rgba(168, 85, 247, 0.55);
        }
        .event-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .event-badge-live {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        .event-badge-live::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ef4444;
            animation: pulse-dot 2s infinite;
        }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        .event-badge-recurring {
            background: rgba(59, 130, 246, 0.15);
            color: #93c5fd;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        .event-badge-upcoming {
            background: rgba(147, 51, 234, 0.2);
            color: #c084fc;
            border: 1px solid rgba(147, 51, 234, 0.4);
        }
        .event-badge-upcoming::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #a855f7;
            animation: pulse-dot 2s infinite;
        }
        .event-countdown {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 18px;
            color: #c084fc;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-shadow: 0 0 12px rgba(147, 51, 234, 0.4);
        }
        @media (min-width: 768px) {
            .event-countdown { font-size: 22px; }
        }
        .event-video-container {
            position: relative;
            aspect-ratio: 9 / 16;
            max-height: 480px;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .event-video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Past Events Collapsible */
        .past-events-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            padding: 14px 28px;
            border: 1px solid rgba(107, 114, 128, 0.25);
            border-radius: 12px;
            background: rgba(17, 17, 17, 0.6);
            color: #9ca3af;
            font-family: 'Inter', sans-serif;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s;
            -webkit-user-select: none;
            user-select: none;
        }
        .past-events-toggle:hover {
            border-color: rgba(147, 51, 234, 0.4);
            color: #c084fc;
            background: rgba(147, 51, 234, 0.06);
        }
        .past-events-toggle:active {
            transform: scale(0.97);
            background: rgba(147, 51, 234, 0.1);
            border-color: rgba(147, 51, 234, 0.5);
        }
        .past-events-toggle .chevron {
            transition: transform 0.3s;
            width: 18px;
            height: 18px;
        }
        .past-events-toggle.open .chevron {
            transform: rotate(180deg);
        }
        .past-events-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }
        .past-event-card {
            display: grid;
            grid-template-columns: 100px 1fr auto;
            gap: 16px;
            align-items: center;
            padding: 16px 20px;
            border: 1px solid rgba(107, 114, 128, 0.15);
            border-radius: 12px;
            background: rgba(17, 17, 17, 0.5);
            margin-bottom: 10px;
            transition: border-color 0.3s;
        }
        .past-event-card:hover {
            border-color: rgba(147, 51, 234, 0.3);
        }
        .past-event-thumb {
            width: 100px;
            aspect-ratio: 9 / 16;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
        }
        .past-event-thumb video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .past-event-info h4 {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 2px;
        }
        .past-event-info .past-event-subtitle {
            font-size: 14px;
            color: #c084fc;
            margin-bottom: 6px;
        }
        .past-event-info .past-event-date {
            font-size: 13px;
            color: #6b7280;
        }
        /* Event share button (index.html past events) */
        .evt-share-btn {
            background: transparent;
            border: 1px solid rgba(107, 114, 128, 0.3);
            color: #9ca3af;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
        }
        .evt-share-btn:hover {
            background: rgba(147, 51, 234, 0.15);
            color: #c084fc;
            border-color: rgba(168, 85, 247, 0.5);
        }
        .evt-share-btn:active {
            transform: scale(0.92);
        }
        .evt-share-btn:focus-visible {
            outline: 2px solid #a855f7;
            outline-offset: 2px;
        }
        .evt-share-btn svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            pointer-events: none;
        }
        /* Minimal local toast for share confirmations (index.html) */
        #evt-share-toast {
            position: fixed;
            bottom: 84px;
            left: 50%;
            transform: translateX(-50%) translateY(12px);
            background: #1a1a1a;
            border: 1px solid rgba(168, 85, 247, 0.35);
            color: #e9d5ff;
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
            max-width: calc(100vw - 40px);
            text-align: center;
        }
        #evt-share-toast.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Facebook section */
        .fb-section-gradient {
            background: linear-gradient(135deg, rgba(24, 119, 242, 0.15) 0%, rgba(0, 0, 0, 0.95) 60%);
        }
        .ig-section-gradient {
            background: linear-gradient(135deg, rgba(240, 148, 51, 0.1) 0%, rgba(200, 55, 100, 0.08) 50%, rgba(0, 0, 0, 0.95) 100%);
        }

        /* Social grid images: zoom on hover */
        .fb-section-gradient .grid a img,
        .ig-section-gradient .grid a img {
            transition: transform 0.4s ease;
        }
        .fb-section-gradient .grid a:hover img,
        .ig-section-gradient .grid a:hover img {
            transform: scale(1.1);
        }

        /* Social section titles: gradient text accent */
        .fb-section-gradient .text-2xl,
        .fb-section-gradient .text-3xl {
            background: linear-gradient(135deg, #fff 40%, #60a5fa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .ig-section-gradient .text-2xl,
        .ig-section-gradient .text-3xl {
            background: linear-gradient(135deg, #fff 30%, #f09433 55%, #dc2743 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* === Karaoke Animation === */
        .karaoke-stage {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            max-height: 420px;
            background: radial-gradient(ellipse at 50% 110%, rgba(147, 51, 234, 0.15) 0%, transparent 60%),
                        linear-gradient(180deg, #0a0a0a 0%, #111 100%);
            overflow: hidden;
            border-radius: 12px;
            border: 1px solid rgba(147, 51, 234, 0.15);
        }
        /* Spotlight cone */
        .karaoke-stage::before {
            content: '';
            position: absolute;
            top: -20%;
            left: 50%;
            transform: translateX(-50%);
            width: 50%;
            height: 80%;
            background: conic-gradient(from 170deg, transparent, rgba(147, 51, 234, 0.06) 10deg, transparent 20deg);
            filter: blur(10px);
            animation: spotlight-sway 6s ease-in-out infinite;
        }
        @keyframes spotlight-sway {
            0%, 100% { transform: translateX(-50%) rotate(-5deg); }
            50% { transform: translateX(-50%) rotate(5deg); }
        }
        /* Microphone */
        .mic-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -55%);
            width: 80px;
            height: 80px;
            filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.5)) drop-shadow(0 0 40px rgba(147, 51, 234, 0.2));
            animation: mic-float 3s ease-in-out infinite;
            z-index: 5;
        }
        @keyframes mic-float {
            0%, 100% { transform: translate(-50%, -55%) translateY(0); }
            50% { transform: translate(-50%, -55%) translateY(-6px); }
        }
        /* Equalizer bars */
        .eq-bars {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 3px;
            padding: 0 20%;
            z-index: 2;
        }
        .eq-bar {
            flex: 1;
            max-width: 6px;
            border-radius: 3px 3px 0 0;
            background: linear-gradient(180deg, #a855f7, #7c3aed);
            opacity: 0.6;
            animation: eq-bounce var(--dur) ease-in-out infinite;
            animation-delay: var(--delay);
        }
        @keyframes eq-bounce {
            0%, 100% { height: var(--min-h); }
            50% { height: var(--max-h); }
        }
        /* Floating music notes */
        .music-note {
            position: absolute;
            font-size: 18px;
            opacity: 0;
            z-index: 3;
            animation: note-float var(--dur) ease-out infinite;
            animation-delay: var(--delay);
        }
        @keyframes note-float {
            0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.5); }
            15% { opacity: 0.6; }
            100% { opacity: 0; transform: translateY(-160px) rotate(var(--rot)) scale(1); }
        }
        /* "KARAOKE" text glow */
        .karaoke-text-glow {
            position: absolute;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 6px;
            text-transform: uppercase;
            color: rgba(168, 85, 247, 0.6);
            text-shadow: 0 0 10px rgba(147, 51, 234, 0.4), 0 0 30px rgba(147, 51, 234, 0.15);
            z-index: 4;
            animation: text-pulse 4s ease-in-out infinite;
        }
        @keyframes text-pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* === Gamified Interest System === */
        .interest-card {
            background: linear-gradient(135deg, rgba(88, 28, 135, 0.08) 0%, rgba(17, 17, 17, 0.95) 100%);
            border: 1px solid rgba(147, 51, 234, 0.2);
            border-radius: 1rem;
            overflow: hidden;
        }
        .progress-ring-bg {
            stroke: #1f1f1f;
        }
        .progress-ring-fill {
            stroke: #a855f7;
            transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.5));
        }
        .progress-ring-fill.complete {
            stroke: #22c55e;
            filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.6));
        }
        .btn-im-in {
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            color: #fff;
            font-weight: 700;
            padding: 14px 32px;
            border-radius: 12px;
            font-size: 18px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 20px rgba(147, 51, 234, 0.3);
            position: relative;
            overflow: hidden;
        }
        .btn-im-in:hover:not(:disabled) {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 30px rgba(147, 51, 234, 0.45);
        }
        .btn-im-in:active:not(:disabled) {
            transform: translateY(0) scale(0.98);
        }
        .btn-im-in:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .btn-im-in.voted {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
        }
        .whatsapp-share-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
            padding: 10px 20px;
            background: none;
            border: 1px solid rgba(37, 211, 102, 0.3);
            border-radius: 10px;
            color: #25d366;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .whatsapp-share-btn:hover {
            background: rgba(37, 211, 102, 0.1);
            border-color: #25d366;
        }
        /* Pop Quiz — Premium Dark Theme */

        /* Keyframes for quiz animations */
        @keyframes quiz-border-glow {
            0%, 100% { border-color: rgba(168,85,247,0.3); box-shadow: 0 0 15px rgba(168,85,247,0.08), inset 0 1px 0 rgba(255,255,255,0.03); }
            50% { border-color: rgba(192,132,252,0.5); box-shadow: 0 0 25px rgba(168,85,247,0.15), 0 0 50px rgba(147,51,234,0.05), inset 0 1px 0 rgba(255,255,255,0.05); }
        }
        @keyframes quiz-shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        @keyframes quiz-timer-pulse {
            0%, 100% { text-shadow: 0 0 8px rgba(239,68,68,0.4); }
            50% { text-shadow: 0 0 16px rgba(239,68,68,0.8), 0 0 30px rgba(239,68,68,0.3); transform: scale(1.05); }
        }
        @keyframes quiz-checkmark-draw {
            0% { stroke-dashoffset: 24; }
            100% { stroke-dashoffset: 0; }
        }
        @keyframes quiz-submitted-fade {
            0% { opacity: 0; transform: translateY(6px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes quiz-participant-slide {
            0% { opacity: 0; transform: translateX(-12px); }
            100% { opacity: 1; transform: translateX(0); }
        }
        @keyframes quiz-participant-dot-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0.6); }
            50% { box-shadow: 0 0 0 4px rgba(168,85,247,0); }
        }
        @keyframes quiz-correct-glow {
            0% { box-shadow: 0 0 10px rgba(34,197,94,0.1); }
            25% { box-shadow: 0 0 20px rgba(245,158,11,0.2), 0 0 40px rgba(245,158,11,0.05); }
            50% { box-shadow: 0 0 25px rgba(34,197,94,0.25), 0 0 50px rgba(34,197,94,0.05); }
            75% { box-shadow: 0 0 20px rgba(245,158,11,0.2), 0 0 40px rgba(245,158,11,0.05); }
            100% { box-shadow: 0 0 10px rgba(34,197,94,0.1); }
        }
        @keyframes quiz-winner-name-in {
            0% { opacity: 0; transform: translateY(8px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes quiz-toast-pop {
            0% { transform: scale(0.8); opacity: 0; }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        @keyframes quiz-golden-burst {
            0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4), 0 0 0 0 rgba(234,179,8,0.2); }
            50% { box-shadow: 0 0 20px 4px rgba(245,158,11,0.15), 0 0 40px 8px rgba(234,179,8,0.05); }
            100% { box-shadow: 0 0 0 0 rgba(245,158,11,0), 0 0 0 0 rgba(234,179,8,0); }
        }
        @keyframes quiz-confetti-drift {
            0% { background-position: 0 0; }
            100% { background-position: 200px -200px; }
        }
        @keyframes quiz-modal-in {
            from { opacity: 0; transform: translateY(20px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* 1. Quiz Card — Frosted glass with animated purple glow border */
        .quiz-card {
            background: rgba(17,17,17,0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(168,85,247,0.3);
            border-radius: 14px;
            margin: 8px 0;
            overflow: hidden;
            animation: quiz-border-glow 3s ease-in-out infinite;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .quiz-card:hover {
            transform: translateY(-1px);
        }
        .quiz-card.revealed {
            animation: none;
            border-color: rgba(107,114,128,0.2);
            box-shadow: none;
        }
        .quiz-card-inner { padding: 16px 18px; }
        .quiz-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            gap: 8px;
            flex-wrap: wrap;
        }
        /* Category badge with shimmer */
        .quiz-category-badge {
            background: linear-gradient(90deg, rgba(168,85,247,0.2) 0%, rgba(192,132,252,0.35) 50%, rgba(168,85,247,0.2) 100%);
            background-size: 200% 100%;
            color: #c084fc;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1px solid rgba(168,85,247,0.2);
            animation: quiz-shimmer 3s ease-in-out infinite;
        }
        /* Timer — larger, with pulsing glow on warning */
        .quiz-timer {
            color: #f59e0b;
            font-size: 18px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.5px;
            text-shadow: 0 0 8px rgba(245,158,11,0.3);
            transition: all 0.3s;
        }
        .quiz-timer.warning {
            color: #ef4444;
            font-size: 20px;
            animation: quiz-timer-pulse 1s ease-in-out infinite;
        }
        /* Question — larger, more readable */
        .quiz-question {
            color: #f3f4f6;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            padding: 8px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            line-height: 1.5;
            transition: color 0.2s;
        }
        .quiz-question:hover { color: #c084fc; }
        .quiz-expand-icon {
            width: 18px; height: 18px;
            color: #6b7280;
            flex-shrink: 0;
            transition: transform 0.3s ease, color 0.2s;
        }
        .quiz-expand-icon.open { transform: rotate(180deg); color: #a855f7; }
        .quiz-answer-area {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .quiz-answer-area.open { max-height: 130px; }
        .quiz-answer-row {
            display: flex;
            gap: 8px;
            padding: 10px 0;
        }
        /* 2. Quiz Answer Input — matches chat input with purple focus glow */
        .quiz-input {
            flex: 1;
            background: #1a1a1a;
            border: 1px solid #2a2a2a;
            color: #fff;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 13px;
            font-family: 'Inter', sans-serif;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .quiz-input:focus {
            border-color: #7c3aed;
            box-shadow: 0 0 0 3px rgba(124,58,237,0.15), 0 0 12px rgba(168,85,247,0.1);
        }
        .quiz-input::placeholder { color: #555; }
        /* Submit button — hover scale + glow */
        .quiz-submit-btn {
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            border: none;
            color: #fff;
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
            position: relative;
            overflow: hidden;
        }
        .quiz-submit-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(147,51,234,0.35), 0 4px 12px rgba(0,0,0,0.3);
        }
        .quiz-submit-btn:active { transform: scale(0.98); }
        .quiz-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
        /* Submitted message with checkmark animation */
        .quiz-submitted-msg {
            color: #22c55e;
            font-size: 13px;
            font-weight: 600;
            padding: 8px 0;
            display: flex;
            align-items: center;
            gap: 6px;
            animation: quiz-submitted-fade 0.4s ease-out;
        }
        .quiz-submitted-msg svg {
            stroke-dasharray: 24;
            stroke-dashoffset: 24;
            animation: quiz-checkmark-draw 0.5s ease-out 0.15s forwards;
        }
        /* 2026-05-20: persistent verdict card after answer submit */
        .quiz-verdict {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 8px;
            border: 1px solid;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.3;
            animation: quiz-verdict-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .quiz-verdict .verdict-icon {
            font-size: 18px;
            line-height: 1;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px; height: 26px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .quiz-verdict .verdict-text { font-weight: 700; letter-spacing: 0.01em; }
        .quiz-verdict .verdict-sub {
            margin-left: auto;
            font-weight: 500;
            font-size: 11px;
            opacity: 0.7;
            font-style: italic;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 40%;
        }
        .quiz-verdict.correct {
            color: #6ee7b7;
            background: rgba(34,197,94,0.10);
            border-color: rgba(110,231,183,0.42);
        }
        .quiz-verdict.correct .verdict-icon {
            background: rgba(110,231,183,0.22);
            color: #6ee7b7;
        }
        .quiz-verdict.wrong {
            color: #fca5a5;
            background: rgba(239,68,68,0.08);
            border-color: rgba(252,165,165,0.40);
        }
        .quiz-verdict.wrong .verdict-icon {
            background: rgba(252,165,165,0.18);
            color: #fca5a5;
        }
        .quiz-verdict.pending {
            color: #fde68a;
            background: rgba(251,191,36,0.08);
            border-color: rgba(253,230,138,0.40);
        }
        .quiz-verdict.pending .verdict-icon {
            background: rgba(253,230,138,0.18);
            color: #fde68a;
        }
        @keyframes quiz-verdict-in {
            from { opacity: 0; transform: translateY(6px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0)    scale(1); }
        }
        .quiz-barcode-error {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35) !important;
            animation: quiz-barcode-shake 0.32s ease-in-out;
        }
        @keyframes quiz-barcode-shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-4px); }
            40% { transform: translateX(4px); }
            60% { transform: translateX(-3px); }
            80% { transform: translateX(3px); }
        }
        .quiz-barcode-toast {
            margin-top: 6px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            color: #fecaca;
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.45);
            border-radius: 6px;
            text-align: center;
            animation: quiz-barcode-toast-in 0.2s ease-out;
        }
        @keyframes quiz-barcode-toast-in {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 3. Quiz Participants — slide-in animation + pulse for latest */
        .quiz-participants {
            padding: 8px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .quiz-participant {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(168,85,247,0.06);
            border: 1px solid rgba(168,85,247,0.1);
            padding: 4px 12px;
            border-radius: 14px;
            font-size: 11px;
            color: #d1d5db;
            animation: quiz-participant-slide 0.35s ease-out backwards;
        }
        .quiz-participant:nth-child(1) { animation-delay: 0s; }
        .quiz-participant:nth-child(2) { animation-delay: 0.06s; }
        .quiz-participant:nth-child(3) { animation-delay: 0.12s; }
        .quiz-participant:nth-child(4) { animation-delay: 0.18s; }
        .quiz-participant:nth-child(5) { animation-delay: 0.24s; }
        .quiz-participant:nth-child(6) { animation-delay: 0.3s; }
        .quiz-participant:nth-child(7) { animation-delay: 0.36s; }
        .quiz-participant:nth-child(8) { animation-delay: 0.42s; }
        .quiz-participant::before {
            content: '';
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #a855f7;
            flex-shrink: 0;
        }
        .quiz-participant:last-child::before {
            animation: quiz-participant-dot-pulse 1.5s ease-in-out infinite;
        }
        .quiz-participants-count {
            font-size: 11px;
            color: #6b7280;
            font-weight: 600;
            padding-left: 4px;
        }
        /* 4. Quiz Reveal — celebration glow + staggered winner names */
        .quiz-reveal-area {
            padding: 12px 0 4px;
            border-top: 1px solid rgba(168,85,247,0.12);
            margin-top: 10px;
        }
        .quiz-correct-box {
            background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(245,158,11,0.06));
            border: 1px solid rgba(34,197,94,0.3);
            color: #4ade80;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 10px;
            animation: quiz-correct-glow 3s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }
        .quiz-correct-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(ellipse at 30% 50%, rgba(245,158,11,0.06) 0%, transparent 60%);
            pointer-events: none;
        }
        .quiz-winners-list {
            font-size: 13px;
            color: #9ca3af;
            line-height: 1.8;
        }
        .quiz-winner-name {
            color: #4ade80;
            font-weight: 700;
            display: inline-block;
            animation: quiz-winner-name-in 0.5s ease-out backwards;
        }
        .quiz-winner-name:nth-of-type(1) { animation-delay: 0.1s; }
        .quiz-winner-name:nth-of-type(2) { animation-delay: 0.3s; }
        .quiz-winner-name:nth-of-type(3) { animation-delay: 0.5s; }
        .quiz-card.revealed .quiz-question { cursor: default; color: #9ca3af; }
        .quiz-card.revealed .quiz-question:hover { color: #9ca3af; }
        /* Admin bar */
        .quiz-admin-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-bottom: 1px solid rgba(168,85,247,0.12);
            background: rgba(168,85,247,0.04);
        }
        .quiz-admin-btn {
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            border: none;
            color: #fff;
            padding: 6px 16px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 0.5px;
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
            position: relative;
            overflow: hidden;
        }
        .quiz-admin-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(147,51,234,0.3);
        }
        .quiz-admin-btn:active { transform: translateY(0); }
        /* 7. Quiz Launcher Modal — matches auth modal styling */
        .quiz-launcher-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 16px;
        }
        .quiz-launcher-overlay.active { display: flex; }
        .quiz-launcher {
            position: relative;
            background: #111;
            border: 1px solid #2a2a2a;
            border-radius: 16px;
            width: 100%;
            max-width: 420px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 24px;
            animation: quiz-modal-in 0.25s ease-out;
            box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 40px rgba(147,51,234,0.05);
        }
        .quiz-launcher h3 {
            color: #fff;
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 20px;
            letter-spacing: 0.5px;
            background: linear-gradient(135deg, #fff 60%, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .quiz-launcher-section {
            margin-bottom: 18px;
        }
        .quiz-launcher-section label {
            display: block;
            font-size: 11px;
            color: #a855f7;
            font-weight: 700;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .quiz-launcher-input {
            width: 100%;
            background: #1a1a1a;
            border: 1px solid #2a2a2a;
            color: #fff;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 13px;
            font-family: 'Inter', sans-serif;
            outline: none;
            margin-bottom: 8px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .quiz-launcher-input:focus {
            border-color: #7c3aed;
            box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
        }
        .quiz-launcher-input::placeholder { color: #555; }
        .quiz-bank-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border: 1px solid #2a2a2a;
            border-radius: 10px;
            margin-bottom: 6px;
            cursor: pointer;
            transition: all 0.25s ease;
            background: rgba(0,0,0,0.2);
        }
        .quiz-bank-item:hover {
            border-color: rgba(168,85,247,0.4);
            background: rgba(168,85,247,0.06);
            transform: translateX(2px);
        }
        .quiz-bank-item.selected {
            border-color: #a855f7;
            background: rgba(168,85,247,0.1);
            box-shadow: 0 0 15px rgba(168,85,247,0.12), inset 0 0 0 1px rgba(168,85,247,0.15);
        }
        .quiz-bank-item .qb-cat {
            font-size: 10px;
            color: #c084fc;
            text-transform: uppercase;
            font-weight: 700;
        }
        .quiz-bank-item .qb-q {
            font-size: 13px;
            color: #f3f4f6;
            font-weight: 500;
        }
        .quiz-bank-item .qb-del {
            color: #6b7280;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            padding: 4px;
            transition: color 0.2s, transform 0.2s;
        }
        .quiz-bank-item .qb-del:hover { color: #ef4444; transform: scale(1.15); }
        /* Difficulty filter buttons — matches site purple style */
        .quiz-diff-btn {
            padding: 5px 14px;
            border: 1px solid #2a2a2a;
            border-radius: 8px;
            background: none;
            color: #6b7280;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .quiz-diff-btn.active {
            border-color: #a855f7;
            color: #c084fc;
            background: rgba(168,85,247,0.1);
        }
        .quiz-diff-btn:hover {
            border-color: #a855f7;
            color: #c084fc;
        }
        .qb-diff {
            display: inline-block;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 1px 6px;
            border-radius: 4px;
            margin-left: 6px;
        }
        .qb-diff-easy { background: rgba(16,185,129,0.15); color: #34d399; }
        .qb-diff-medium { background: rgba(245,158,11,0.15); color: #fbbf24; }
        .qb-diff-hard { background: rgba(239,68,68,0.15); color: #f87171; }
        /* Difficulty badge — Easy=emerald, Medium=amber, Hard=red with glow */
        .quiz-diff-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 8px;
            letter-spacing: 0.3px;
        }
        .quiz-diff-badge-easy {
            background: rgba(16,185,129,0.12);
            color: #34d399;
            border: 1px solid rgba(16,185,129,0.3);
            text-shadow: 0 0 8px rgba(16,185,129,0.3);
        }
        .quiz-diff-badge-medium {
            background: rgba(245,158,11,0.12);
            color: #fbbf24;
            border: 1px solid rgba(245,158,11,0.3);
            text-shadow: 0 0 8px rgba(245,158,11,0.3);
        }
        .quiz-diff-badge-hard {
            background: rgba(239,68,68,0.12);
            color: #f87171;
            border: 1px solid rgba(239,68,68,0.3);
            text-shadow: 0 0 8px rgba(239,68,68,0.3);
        }
        /* Quiz bank: recently used item */
        .quiz-bank-item.recently-used {
            border-color: #ef4444 !important;
            background: rgba(239,68,68,0.06) !important;
        }
        .qb-used-label {
            font-size: 10px;
            color: #ef4444;
            font-weight: 600;
            margin-top: 2px;
        }
        .qb-answer {
            font-size: 11px;
            color: #6b7280;
            margin-top: 2px;
            font-style: italic;
        }
        /* 8. Quiz Admin Answer Hint — distinguished admin-only element */
        .quiz-admin-answer-hint {
            font-size: 12px;
            color: #f59e0b;
            opacity: 0.75;
            padding: 6px 10px;
            margin: 4px 0;
            border: 1px dashed rgba(245,158,11,0.25);
            border-radius: 6px;
            background: rgba(245,158,11,0.04);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .quiz-admin-answer-hint::before {
            content: '\1F441';
            font-size: 13px;
            opacity: 0.7;
        }
        /* 6. Quiz Winner Toast — golden burst animation */
        .quiz-winner-toast {
            text-align: center;
            padding: 14px 24px;
            margin: 8px 0;
            background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(234,179,8,0.06));
            border: 1px solid rgba(245,158,11,0.3);
            border-radius: 14px;
            color: #fbbf24;
            font-size: 16px;
            font-weight: 700;
            animation: quiz-toast-pop 0.5s ease-out, quiz-golden-burst 1.5s ease-out;
            position: relative;
            overflow: hidden;
        }
        .quiz-winner-toast::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 50%, rgba(245,158,11,0.1) 0%, transparent 70%);
            pointer-events: none;
        }
        .quiz-winner-toast-name {
            color: #4ade80;
            font-weight: 800;
            display: inline-block;
            animation: quiz-winner-name-in 0.6s ease-out 0.2s backwards;
        }
        /* Personal win toast with confetti particles */
        .quiz-winner-toast-personal {
            text-align: center;
            padding: 10px 16px;
            margin: 6px 0;
            background:
                radial-gradient(circle at 20% 30%, rgba(168,85,247,0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(34,197,94,0.08) 0%, transparent 50%),
                linear-gradient(135deg, rgba(34,197,94,0.12), rgba(168,85,247,0.08));
            border: 1px solid rgba(34,197,94,0.35);
            border-radius: 14px;
            color: #4ade80;
            font-size: 16px;
            font-weight: 800;
            animation: quiz-toast-pop 0.5s ease-out;
            position: relative;
            overflow: hidden;
        }
        .quiz-winner-toast-personal::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image:
                radial-gradient(2px 2px at 10% 15%, #fbbf24 50%, transparent 50%),
                radial-gradient(2px 2px at 25% 80%, #a855f7 50%, transparent 50%),
                radial-gradient(2px 2px at 40% 25%, #4ade80 50%, transparent 50%),
                radial-gradient(2px 2px at 55% 70%, #fbbf24 50%, transparent 50%),
                radial-gradient(2px 2px at 70% 10%, #c084fc 50%, transparent 50%),
                radial-gradient(2px 2px at 85% 55%, #34d399 50%, transparent 50%),
                radial-gradient(1.5px 1.5px at 15% 50%, #f59e0b 50%, transparent 50%),
                radial-gradient(1.5px 1.5px at 60% 40%, #a855f7 50%, transparent 50%),
                radial-gradient(1.5px 1.5px at 90% 30%, #4ade80 50%, transparent 50%),
                radial-gradient(1.5px 1.5px at 35% 60%, #fbbf24 50%, transparent 50%);
            background-size: 200px 200px;
            animation: quiz-confetti-drift 4s linear infinite;
            opacity: 0.5;
            pointer-events: none;
        }

        /* 9. Mobile Responsiveness for Quiz */
        @media (max-width: 480px) {
            .quiz-card-inner { padding: 12px 14px; }
            .quiz-question { font-size: 14px; }
            .quiz-timer { font-size: 16px; }
            .quiz-timer.warning { font-size: 18px; }
            .quiz-category-badge { font-size: 10px; padding: 3px 8px; }
            .quiz-diff-badge { font-size: 9px; padding: 2px 7px; }
            .quiz-header { gap: 6px; }
            .quiz-launcher {
                width: 100%;
                max-width: 100%;
                border-radius: 12px;
                padding: 18px 16px;
                max-height: 90vh;
            }
            .quiz-launcher-overlay { padding: 8px; }
            .quiz-submit-btn { padding: 10px 14px; }
            .quiz-winner-toast,
            .quiz-winner-toast-personal { padding: 12px 16px; font-size: 14px; }
        }

        /* === Pop Quiz Widget (standalone, below chat) === */
        .quiz-widget {
            margin-top: 8px;
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 12px;
            overflow: hidden;
            background: rgba(17, 17, 17, 0.6);
            backdrop-filter: blur(8px);
        }
        .quiz-widget-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            cursor: pointer;
            background: rgba(59, 130, 246, 0.04);
            border-bottom: 1px solid rgba(59, 130, 246, 0.1);
            user-select: none;
        }
        .quiz-widget-icon { font-size: 18px; }
        .quiz-widget-title {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
        }
        .quiz-widget-status {
            margin-left: auto;
            font-size: 12px;
            color: #6b7280;
            font-weight: 500;
        }
        .quiz-widget-status.active {
            color: #22c55e;
            animation: pulse-dot 2s infinite;
        }
        .quiz-widget-chevron {
            width: 16px; height: 16px;
            color: #6b7280;
            transition: transform 0.3s;
            flex-shrink: 0;
        }
        .quiz-widget-chevron.open { transform: rotate(180deg); }
        .quiz-widget-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .quiz-widget-body.open {
            max-height: 1200px;
            overflow: visible;
        }
        .quiz-empty-state {
            text-align: center;
            padding: 24px 16px;
            color: #555;
            font-size: 14px;
        }
        .quiz-empty-sub {
            font-size: 12px;
            color: #444;
            margin-top: 4px;
        }
        .quiz-answer-bar {
            display: flex;
            gap: 6px;
            padding: 8px 12px;
            border-top: 1px solid rgba(59, 130, 246, 0.15);
            background: rgba(17, 17, 17, 0.8);
        }
        .quiz-bar-input {
            background: #1a1a1a;
            border: 1px solid #2a2a2a;
            color: #fff;
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 13px;
            font-family: 'Inter', sans-serif;
            outline: none;
        }
        .quiz-bar-input:focus { border-color: #7c3aed; }
        .quiz-bar-input:disabled { opacity: 0.4; cursor: not-allowed; }
        .quiz-bar-input[placeholder="Code"], .quiz-bar-input[placeholder="Bar code"] { width: 90px; text-align: center; }
        .quiz-bar-answer { flex: 1; }
        .quiz-bar-submit {
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            border: none;
            color: #fff;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            flex-shrink: 0;
            min-width: 44px;
        }
        .quiz-bar-submit:disabled { opacity: 0.3; cursor: not-allowed; }

        .karaoke-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .status-voting {
            background: rgba(147, 51, 234, 0.15);
            color: #c084fc;
            border: 1px solid rgba(147, 51, 234, 0.3);
        }
        .status-voting::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #a855f7;
            animation: pulse-dot 2s infinite;
        }
        .status-closed {
            background: rgba(107, 114, 128, 0.15);
            color: #9ca3af;
            border: 1px solid rgba(107, 114, 128, 0.3);
        }
        .status-confirmed {
            background: rgba(34, 197, 94, 0.15);
            color: #86efac;
            border: 1px solid rgba(34, 197, 94, 0.3);
            animation: confirmed-glow 2s ease-in-out infinite;
        }
        @keyframes confirmed-glow {
            0%, 100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
            50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.2); }
        }
        .confetti-burst {
            position: absolute;
            pointer-events: none;
            z-index: 10;
        }
        .confetti-piece {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 1px;
            animation: confetti-fall 1.2s ease-out forwards;
        }
        @keyframes confetti-fall {
            0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
            100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.3); }
        }

        /* === Now Playing Ribbon (fixed bottom) === */
        #now-playing-ribbon {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 110;
            background: linear-gradient(180deg, rgba(15,15,15,.96), rgba(0,0,0,.98));
            border-top: 1px solid #2a2a2a;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 8px 12px;
            display: none;
            align-items: center;
            gap: 10px;
        }
        #now-playing-ribbon.visible { display: flex; }
        #nowplaying-art { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
        .nowplaying-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #c084fc; padding: 3px 7px; border: 1px solid rgba(192,132,252,0.4); border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
        #nowplaying-meta { flex: 1; min-width: 0; }
        #nowplaying-track { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #nowplaying-artist { color: #9ca3af; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #nowplaying-bar { position: absolute; bottom: 0; left: 0; height: 2px; background: #c084fc; transition: width 1s linear; }
        body.ribbon-visible { padding-bottom: 64px; }

        /* === Jukebox Widget === */
        .jukebox-widget {
            margin-top: 8px;
            border: 1px solid rgba(192, 132, 252, 0.22);
            border-radius: 12px;
            overflow: hidden;
            background: rgba(17, 17, 17, 0.6);
            backdrop-filter: blur(8px);
        }
        .jukebox-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            cursor: pointer;
            background: rgba(192, 132, 252, 0.05);
            border-bottom: 1px solid rgba(192, 132, 252, 0.12);
            user-select: none;
        }
        .jukebox-icon { font-size: 18px; }
        .jukebox-title {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
        }
        .jukebox-balance-pill {
            margin-left: auto;
            font-size: 11px;
            color: #d8b4fe;
            background: rgba(192, 132, 252, 0.1);
            border: 1px solid rgba(192, 132, 252, 0.25);
            padding: 3px 8px;
            border-radius: 999px;
            font-weight: 600;
            white-space: nowrap;
        }
        #jukebox-chevron {
            width: 16px; height: 16px;
            color: #9ca3af;
            transition: transform 0.3s;
            flex-shrink: 0;
            margin-left: 6px;
        }
        #jukebox-chevron.open { transform: rotate(180deg); }
        .jukebox-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .jukebox-body.open {
            max-height: 640px;
            overflow-y: auto;
        }
        .jukebox-cooldown {
            background: rgba(250, 204, 21, 0.08);
            border-bottom: 1px solid rgba(250, 204, 21, 0.2);
            color: #fde68a;
            font-size: 12px;
            padding: 8px 14px;
            text-align: center;
        }
        .jukebox-search-row {
            padding: 10px 12px;
        }
        #jukebox-search-input {
            width: 100%;
            background: rgba(0,0,0,0.5);
            border: 1px solid #2a2a2a;
            color: #fff;
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 13px;
            outline: none;
        }
        #jukebox-search-input:focus { border-color: rgba(192, 132, 252, 0.5); }
        .jukebox-results {
            padding: 0 12px 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .jukebox-result {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(0,0,0,0.35);
            border: 1px solid #1f1f1f;
            border-radius: 8px;
            padding: 8px;
        }
        .jukebox-result img {
            width: 42px; height: 42px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
        }
        .jukebox-result-info { flex: 1; min-width: 0; }
        .jukebox-result-title {
            color: #fff; font-size: 13px; font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .jukebox-result-artist {
            color: #9ca3af; font-size: 11px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .jukebox-pay-btns { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
        .jukebox-pay-btn {
            background: rgba(192, 132, 252, 0.12);
            border: 1px solid rgba(192, 132, 252, 0.35);
            color: #e9d5ff;
            font-size: 11px;
            font-weight: 600;
            padding: 5px 9px;
            border-radius: 6px;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s;
        }
        .jukebox-pay-btn:hover:not(:disabled) { background: rgba(192, 132, 252, 0.22); }
        .jukebox-pay-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .jukebox-pay-btn.token {
            background: rgba(251, 191, 36, 0.1);
            border-color: rgba(251, 191, 36, 0.35);
            color: #fde68a;
        }
        .jukebox-pay-btn.token:hover:not(:disabled) { background: rgba(251, 191, 36, 0.2); }
        .jukebox-section-divider {
            height: 1px;
            background: rgba(255,255,255,0.05);
            margin: 4px 12px;
        }
        .jukebox-how-to { margin: 8px 12px 4px; background: #111; border: 1px solid rgba(147,51,234,0.2); border-radius: 12px; overflow: hidden; }
        .jukebox-how-to summary { padding: 10px 14px; cursor: pointer; color: #c084fc; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; list-style: none; }
        .jukebox-how-to summary::-webkit-details-marker { display: none; }
        .jukebox-how-to-list { padding: 4px 14px 12px; }
        .jukebox-how-to-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
        .jukebox-how-to-row .label { color: #d1d5db; flex: 1; }
        .jukebox-how-to-row .value { color: #c084fc; font-weight: 700; }
        .jukebox-how-to-row .icon { font-size: 14px; opacity: 0.6; }
        .loyalty-redeem-tiers {
            padding: 4px 12px 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .loyalty-tier-row {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            background: rgba(192, 132, 252, 0.08);
            border: 1px solid rgba(192, 132, 252, 0.28);
            border-radius: 8px;
            padding: 8px 10px;
            color: #e9d5ff;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
            transition: background 0.15s;
        }
        .loyalty-tier-row:hover:not(:disabled) { background: rgba(192, 132, 252, 0.18); }
        .loyalty-tier-row:disabled { opacity: 0.45; cursor: not-allowed; }
        .loyalty-tier-icon { font-size: 16px; flex-shrink: 0; }
        .loyalty-tier-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .loyalty-tier-cta {
            font-size: 11px;
            padding: 3px 9px;
            border-radius: 6px;
            background: rgba(192, 132, 252, 0.18);
            border: 1px solid rgba(192, 132, 252, 0.35);
            color: #e9d5ff;
            font-weight: 700;
            flex-shrink: 0;
        }
        .jukebox-up-next-label {
            color: #9ca3af;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 6px 14px 4px;
        }
        .jukebox-queue-list {
            padding: 0 12px 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .jukebox-queue-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(0,0,0,0.25);
            border-radius: 8px;
            padding: 6px 8px;
        }
        .jukebox-queue-item img {
            width: 36px; height: 36px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
        }
        .jukebox-queue-info { flex: 1; min-width: 0; }
        .jukebox-queue-title {
            color: #fff; font-size: 12px; font-weight: 600;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .jukebox-queue-artist {
            color: #9ca3af; font-size: 11px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .jukebox-queue-by {
            color: #c084fc; font-size: 10px; font-weight: 600; flex-shrink: 0;
        }
        .jukebox-empty {
            text-align: center;
            padding: 18px 12px;
            color: #555;
            font-size: 12px;
        }

        /* === Auth Modal === */
        .auth-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .auth-overlay.active { display: flex; }
        .auth-modal {
            background: #111;
            border: 1px solid #2a2a2a;
            border-radius: 16px;
            width: 100%;
            max-width: 420px;
            overflow: hidden;
            animation: modal-in 0.25s ease-out;
        }
        @keyframes modal-in {
            from { opacity: 0; transform: translateY(20px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .auth-tabs {
            display: flex;
            border-bottom: 1px solid #222;
        }
        .auth-tab {
            flex: 1;
            padding: 14px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            transition: all 0.2s;
            border-bottom: 2px solid transparent;
            background: none;
            border-top: none;
            border-left: none;
            border-right: none;
        }
        .auth-tab.active {
            color: #c084fc;
            border-bottom-color: #a855f7;
        }
        .auth-input {
            width: 100%;
            background: #1a1a1a;
            border: 1px solid #2a2a2a;
            color: #fff;
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
        }
        .auth-input:focus {
            border-color: #7c3aed;
            box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
        }
        .auth-input::placeholder { color: #555; }
        /* Password show/hide eye toggle (2026-05-28 — replaces confirm-password field). */
        .auth-pw-wrap { position: relative; }
        .auth-pw-wrap .auth-input { padding-right: 44px; }
        .auth-pw-toggle {
            position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
            background: transparent; border: 0; padding: 6px 8px;
            color: #888; cursor: pointer; display: flex; align-items: center;
            border-radius: 6px; transition: color 0.15s, background 0.15s;
        }
        .auth-pw-toggle:hover { color: #d1d5db; background: rgba(124,58,237,0.12); }
        .auth-pw-toggle:focus { outline: none; color: #a855f7; }
        .auth-pw-toggle svg { width: 18px; height: 18px; }
        /* Welcome CTA toast — fires on first sign-up only (2026-05-28). Non-modal;
           bottom-center on mobile, bottom-right on desktop. Auto-dismisses 10s
           after appear OR on first click (whichever first). */
        .welcome-cta {
            position: fixed; z-index: 9999;
            left: 50%; bottom: 24px; transform: translateX(-50%);
            width: calc(100% - 24px); max-width: 460px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a1240 100%);
            border: 1px solid rgba(168, 85, 247, 0.45);
            border-radius: 14px; padding: 16px 18px 14px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(168,85,247,0.18) inset;
            color: #fff; font-family: inherit;
            animation: welcomeCtaIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes welcomeCtaIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
        .welcome-cta-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
        .welcome-cta-title { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; flex: 1; }
        .welcome-cta-sub { font-size: 12px; color: #c4b5fd; margin-top: -8px; margin-bottom: 12px; }
        .welcome-cta-close {
            background: transparent; border: 0; color: #9ca3af; cursor: pointer;
            padding: 4px 6px; border-radius: 6px; line-height: 1;
        }
        .welcome-cta-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
        .welcome-cta-row { display: flex; gap: 8px; }
        .welcome-cta-btn {
            flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
            background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.4);
            color: #fff; text-decoration: none; padding: 10px 4px;
            border-radius: 10px; font-size: 12px; font-weight: 600;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
        }
        .welcome-cta-btn:hover { background: rgba(168,85,247,0.28); border-color: rgba(168,85,247,0.65); transform: translateY(-1px); }
        .welcome-cta-btn svg { width: 22px; height: 22px; stroke: #c4b5fd; }
        @media (min-width: 768px) {
            .welcome-cta { left: auto; right: 24px; transform: none; }
            @keyframes welcomeCtaIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        }
        .auth-submit {
            width: 100%;
            padding: 13px;
            border: none;
            border-radius: 10px;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s;
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            color: #fff;
        }
        .auth-submit:hover { opacity: 0.9; transform: translateY(-1px); }
        .auth-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .auth-error {
            color: #f87171;
            font-size: 13px;
            text-align: center;
            min-height: 20px;
        }
        .auth-close {
            position: absolute;
            top: 12px;
            right: 12px;
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            padding: 10px;
            min-width: 44px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }
        .auth-close:hover { color: #fff; }
        /* CAPTCHA */
        .captcha-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .captcha-svg-wrap {
            flex: 1;
            min-width: 0;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #2a2a2a;
            line-height: 0;
            min-height: 56px;
        }
        .captcha-svg-wrap svg {
            display: block;
            width: 100%;
            height: auto;
            min-height: 56px;
        }
        .captcha-input {
            width: 70px;
            background: #1a1a1a;
            border: 1px solid #2a2a2a;
            color: #fff;
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            outline: none;
            transition: border-color 0.2s;
        }
        .captcha-input:focus { border-color: #7c3aed; }
        .captcha-input::placeholder { color: #555; font-weight: 400; font-size: 13px; }
        .captcha-refresh {
            flex-shrink: 0;
            background: none;
            border: 1px solid #2a2a2a;
            color: #888;
            border-radius: 8px;
            width: 44px;
            height: 44px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .captcha-refresh:hover { color: #c084fc; border-color: #7c3aed; }
        /* Honeypot — hidden from real users, visible to bots */
        .hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

        /* User pill (logged-in state) */
        .user-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 12px 4px 4px;
            background: rgba(147, 51, 234, 0.1);
            border: 1px solid rgba(147, 51, 234, 0.25);
            border-radius: 9999px;
            font-size: 13px;
            color: #c084fc;
            font-weight: 600;
        }
        .user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
        }

        /* Admin badge in user pill */
        .user-pill-admin {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            margin-left: 6px;
            padding: 1px 6px;
            background: rgba(147, 51, 234, 0.2);
            border: 1px solid rgba(147, 51, 234, 0.4);
            border-radius: 4px;
            font-size: 9px;
            font-weight: 800;
            color: #a855f7;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            line-height: 16px;
        }
        .user-pill-admin svg {
            width: 10px;
            height: 10px;
            fill: #a855f7;
        }

        /* === Chat Room === */
        .chat-container {
            background: #0d0d0d;
            border: 1px solid rgba(147, 51, 234, 0.15);
            border-radius: 12px;
            overflow: hidden;
            margin-top: 24px;
        }
        .chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: rgba(147, 51, 234, 0.06);
            border-bottom: 1px solid rgba(147, 51, 234, 0.1);
            cursor: pointer;
            user-select: none;
        }
        .chat-header:hover { background: rgba(147, 51, 234, 0.1); }
        .chat-online-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            animation: pulse-dot 2s infinite;
        }
        .chat-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .chat-body.open { max-height: 900px; }
        .chat-body.open.overflow-visible { overflow: visible; }
        .chat-messages {
            height: 260px;
            overflow-y: auto;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .chat-messages::-webkit-scrollbar { width: 4px; }
        .chat-messages::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
        .chat-msg {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            position: relative;
            animation: msgFadeIn 0.2s ease;
        }
        @keyframes msgFadeIn {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .chat-msg-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #2a2a2a;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            font-size: 11px;
            font-weight: 700;
            flex-shrink: 0;
        }
        .chat-msg-content {
            flex: 1;
            min-width: 0;
        }
        .chat-msg-name {
            font-size: 12px;
            font-weight: 600;
            color: #c084fc;
        }
        .presence-dot {
            display: inline-block;
            width: 8px; height: 8px;
            border-radius: 50%;
            border: 1.5px solid #6b7280;
            margin-right: 4px;
            vertical-align: middle;
            background: transparent;
            transition: background 120ms, border-color 120ms;
        }
        .presence-dot.presence-online {
            background: #22c55e;
            border-color: #22c55e;
        }
        .chat-msg-text {
            font-size: 13px;
            color: #d1d5db;
            word-wrap: break-word;
        }
        .chat-msg-time {
            font-size: 10px;
            color: #555;
            margin-left: 8px;
        }
        .chat-input-row {
            display: flex;
            gap: 8px;
            padding: 10px 12px;
            border-top: 1px solid rgba(147, 51, 234, 0.1);
            background: rgba(0,0,0,0.3);
        }
        .chat-input {
            flex: 1;
            min-width: 0;
            background: #1a1a1a;
            border: 1px solid #2a2a2a;
            color: #fff;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 13px;
            outline: none;
        }
        .chat-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.15); }
        .chat-send-btn {
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            border: none;
            color: #fff;
            border-radius: 8px;
            min-width: 44px;
            width: 44px;
            flex-shrink: 0;
            padding: 0;
            cursor: pointer;
            transition: opacity 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chat-send-btn:hover { opacity: 0.85; }

        /* === Admin badge === */
        .chat-admin-badge {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-left: 4px;
            vertical-align: middle;
            fill: #a855f7;
        }
        /* === Loyalty tier badge (progressive) === */
        .chat-tier-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            margin-right: 4px;
            vertical-align: -2px;
            flex: 0 0 14px;
        }
        .chat-tier-badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
        /* Tier-badge glow removed 2026-05-31 — star colour is in the SVG fill; no drop-shadow (cleaner on black, lighter on TV). */
        /* === Admin controls === */
        .chat-admin-controls { display: none; }
        /* Admin clickable username */
        .chat-admin-clickable {
            cursor: pointer;
            text-decoration: underline dotted;
            text-underline-offset: 3px;
        }
        .chat-admin-clickable:hover { color: #c084fc; }
        /* Admin user popup */
        .admin-popup-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 240;
        }
        .admin-popup-backdrop.active { display: flex; align-items: center; justify-content: center; }
        .admin-popup {
            background: #111;
            border: 1px solid #2a2a2a;
            border-radius: 16px;
            width: 90%;
            max-width: 320px;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            padding: 0;
        }
        .admin-popup-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            border: 1px solid #2a2a2a;
            color: #888;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            z-index: 2;
        }
        .admin-popup-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
        .admin-popup-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 20px 16px 16px;
        }
        .admin-popup-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
        }
        .admin-popup-user-info { overflow: hidden; }
        .admin-popup-username {
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .admin-popup-email {
            font-size: 12px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .admin-popup-divider {
            height: 1px;
            background: #1f1f1f;
            margin: 0;
        }
        .admin-popup-section {
            padding: 10px 16px 6px;
            font-size: 10px;
            font-weight: 700;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .admin-popup-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 11px 16px;
            background: none;
            border: none;
            color: #ccc;
            font-size: 14px;
            cursor: pointer;
            text-align: left;
            transition: background 0.15s;
        }
        .admin-popup-btn:hover { background: rgba(147,51,234,0.12); color: #fff; }
        .admin-popup-btn.danger { color: #f87171; }
        .admin-popup-btn.danger:hover { background: rgba(239,68,68,0.12); }
        .admin-popup-footer { padding-bottom: 8px; }

        /* === Ban notice === */
        .chat-ban-notice {
            padding: 16px;
            text-align: center;
            color: #f87171;
            font-size: 13px;
            line-height: 1.5;
        }
        .chat-ban-notice .ban-title {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 4px;
        }
        .chat-ban-notice .ban-detail {
            color: #888;
            font-size: 12px;
        }

        /* === Emoji & GIF buttons === */
        .chat-extra-btns {
            display: flex;
            gap: 4px;
            align-items: center;
        }
        .chat-emoji-btn, .chat-gif-btn {
            background: #1a1a1a;
            border: 1px solid #2a2a2a;
            color: #888;
            border-radius: 8px;
            padding: 0 10px;
            height: 44px;
            min-width: 44px;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.2s, color 0.2s;
        }
        .chat-gif-btn {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .chat-emoji-btn:hover, .chat-gif-btn:hover {
            border-color: #7c3aed;
            color: #c084fc;
        }

        /* === Emoji Picker Popup === */
        .chat-popup-anchor {
            position: relative;
        }
        .emoji-picker-popup, .gif-picker-popup {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 0;
            background: #1a1a1a;
            border: 1px solid rgba(147, 51, 234, 0.25);
            border-radius: 12px;
            padding: 10px;
            z-index: 100;
            display: none;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
        }
        .emoji-picker-popup.active, .gif-picker-popup.active {
            display: block;
        }
        .emoji-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
        }
        .emoji-grid span {
            font-size: 22px;
            cursor: pointer;
            text-align: center;
            padding: 4px;
            border-radius: 6px;
            transition: background 0.15s;
        }
        .emoji-grid span:hover {
            background: rgba(147, 51, 234, 0.2);
        }

        /* === GIF Picker Popup === */
        .gif-picker-popup {
            left: auto;
            right: 0;
            width: min(440px, calc(100vw - 16px));
        }
        .gif-search-input {
            width: 100%;
            background: #0d0d0d;
            border: 1px solid #333;
            color: #fff;
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 12px;
            outline: none;
            margin-bottom: 8px;
            box-sizing: border-box;
        }
        .gif-search-input:focus { border-color: #7c3aed; }
        .gif-results {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 8px;
            max-height: min(60vh, 460px);
            overflow-y: auto;
        }
        .gif-results::-webkit-scrollbar { width: 4px; }
        .gif-results::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
        .gif-results img {
            width: 100%;
            height: 110px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.15s;
        }
        .gif-results img:hover {
            border-color: #7c3aed;
        }
        .gif-loading {
            text-align: center;
            color: #555;
            font-size: 11px;
            padding: 20px 0;
        }

        /* === GIF in chat messages === */
        .chat-msg-gif img {
            max-width: 200px;
            border-radius: 8px;
            margin-top: 4px;
            display: block;
        }

        /* === Voucher Context Menu === */
        .voucher-ctx-menu {
            position: fixed;
            z-index: 250;
            background: #111;
            border: 1px solid rgba(147, 51, 234, 0.35);
            border-radius: 12px;
            padding: 0;
            min-width: 220px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(147,51,234,0.1);
            display: none;
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.15s ease, transform 0.15s ease;
            overflow: hidden;
        }
        .voucher-ctx-menu.visible {
            display: block;
            opacity: 1;
            transform: scale(1);
        }
        .voucher-ctx-header {
            padding: 10px 14px;
            font-size: 11px;
            font-weight: 700;
            color: #a855f7;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            border-bottom: 1px solid rgba(147,51,234,0.15);
            background: rgba(147,51,234,0.06);
        }
        .voucher-ctx-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 14px;
            font-size: 13px;
            color: #d1d5db;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }
        .voucher-ctx-option:hover {
            background: rgba(147, 51, 234, 0.18);
            color: #fff;
        }
        .voucher-ctx-option:not(:last-child) {
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }
        .voucher-ctx-emoji {
            font-size: 16px;
            width: 22px;
            text-align: center;
        }

        /* === Voucher Chat Message Card === */
        .chat-voucher-card {
            margin-top: 6px;
            background: linear-gradient(135deg, rgba(147,51,234,0.10), rgba(234,179,8,0.08));
            border: 2px solid rgba(168,85,247,0.45);
            border-radius: 12px;
            padding: 14px 16px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 12px rgba(168,85,247,0.08), inset 0 0 20px rgba(234,179,8,0.03);
        }
        .chat-voucher-card::before {
            content: '';
            position: absolute;
            top: -30px;
            right: -30px;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 70%);
            pointer-events: none;
        }
        .chat-voucher-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .chat-voucher-icon {
            font-size: 20px;
        }
        .chat-voucher-title {
            font-size: 13px;
            font-weight: 700;
            color: #c084fc;
        }
        .chat-voucher-amount {
            font-size: 22px;
            font-weight: 800;
            background: linear-gradient(135deg, #c084fc, #eab308);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 6px;
        }
        .chat-voucher-code {
            font-family: 'Courier New', monospace;
            font-size: 14px;
            font-weight: 700;
            color: #fbbf24;
            background: rgba(0,0,0,0.3);
            padding: 6px 12px;
            border-radius: 6px;
            display: inline-block;
            cursor: pointer;
            letter-spacing: 1px;
            border: 1px dashed rgba(251,191,36,0.3);
            transition: background 0.15s;
            user-select: all;
        }
        .chat-voucher-code:hover {
            background: rgba(0,0,0,0.5);
        }
        /* Copied feedback now handled by JS copyVoucherCode() for i18n */
        .chat-voucher-instruction {
            font-size: 11px;
            color: #888;
            margin-top: 8px;
        }
        .chat-voucher-qr {
            margin-top: 10px;
            text-align: center;
        }
        .chat-voucher-card.redeemed .chat-voucher-qr img { filter: blur(4px); opacity: 0.4; }
        .chat-voucher-card.redeemed .chat-voucher-code { filter: blur(3px); opacity: 0.5; }
        .chat-voucher-card.redeemed .chat-voucher-instruction { display: none; }
        .chat-voucher-qr img {
            width: 140px;
            height: 140px;
            border-radius: 8px;
        }

        /* === My Rewards Drawer === */
        .rewards-container {
            background: #0d0d0d;
            border: 1px solid rgba(147, 51, 234, 0.15);
            border-radius: 12px;
            overflow: hidden;
        }
        .rewards-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: rgba(147, 51, 234, 0.06);
            border-bottom: 1px solid rgba(147, 51, 234, 0.1);
            cursor: pointer;
            user-select: none;
        }
        .rewards-header:hover { background: rgba(147, 51, 234, 0.1); }
        .rewards-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .rewards-body.open { max-height: 600px; overflow-y: auto; }
        .rewards-list {
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .reward-card {
            background: linear-gradient(135deg, rgba(147, 51, 234, 0.08), rgba(234, 179, 8, 0.05));
            border: 1px dashed rgba(147, 51, 234, 0.3);
            border-radius: 12px;
            padding: 16px;
            text-align: center;
        }
        .reward-card .reward-type {
            font-size: 15px;
            font-weight: 700;
            color: #c084fc;
            margin-bottom: 8px;
        }
        .reward-card .reward-code {
            font-family: 'Courier New', monospace;
            font-size: 14px;
            font-weight: 700;
            color: #fbbf24;
            background: rgba(0,0,0,0.3);
            padding: 6px 12px;
            border-radius: 6px;
            display: inline-block;
            cursor: pointer;
            letter-spacing: 1px;
            border: 1px dashed rgba(251,191,36,0.3);
            transition: background 0.15s;
            user-select: all;
        }
        .reward-card .reward-code:hover { background: rgba(0,0,0,0.5); }
        .reward-card .reward-qr { margin-top: 10px; }
        .reward-card .reward-qr img {
            width: 140px;
            height: 140px;
        }
        .reward-card .reward-status {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 8px;
        }
        .reward-card .reward-status.active {
            background: rgba(34, 197, 94, 0.15);
            color: #86efac;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }
        .reward-card .reward-status.redeemed {
            background: rgba(107, 114, 128, 0.15);
            color: #9ca3af;
            border: 1px solid rgba(107, 114, 128, 0.3);
        }
        .reward-card.redeemed .reward-qr img {
            filter: blur(4px);
            opacity: 0.4;
        }
        .reward-card .reward-instruction {
            font-size: 11px;
            color: #888;
            margin-top: 6px;
        }
        .reward-card .reward-date {
            font-size: 10px;
            color: #555;
            margin-top: 6px;
        }

        /* === Discount Card === */
        .discount-card {
            background: linear-gradient(135deg, rgba(147, 51, 234, 0.12), rgba(34, 197, 94, 0.08));
            border: 1px dashed rgba(147, 51, 234, 0.4);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
            margin-top: 16px;
        }
        .discount-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 14px;
            background: linear-gradient(135deg, #9333ea, #22c55e);
            opacity: 0.1;
            z-index: 0;
        }
        .discount-card > * { position: relative; z-index: 1; }
        .discount-amount {
            font-size: 36px;
            font-weight: 900;
            background: linear-gradient(135deg, #c084fc, #22c55e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
        }
        .discount-code {
            display: inline-block;
            background: #1a1a1a;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 8px 20px;
            font-family: monospace;
            font-size: 14px;
            color: #c084fc;
            letter-spacing: 2px;
            cursor: pointer;
            transition: border-color 0.2s;
        }
        .discount-code:hover { border-color: #7c3aed; }

        /* === Voters list === */
        .voters-list {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 8px;
        }
        .voter-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(147, 51, 234, 0.1);
            border: 1px solid rgba(147, 51, 234, 0.15);
            border-radius: 9999px;
            padding: 2px 10px 2px 2px;
            font-size: 11px;
            color: #c084fc;
        }
        /* Redeemed QR blur */
        .discount-blurred #discount-content {
            filter: blur(6px);
            opacity: 0.4;
            pointer-events: none;
            user-select: none;
        }
        .discount-overlay {
            display: none;
            position: absolute;
            inset: 0;
            align-items: center;
            justify-content: center;
            z-index: 2;
            flex-direction: column;
            gap: 12px;
            padding: 24px;
            text-align: center;
        }
        .discount-overlay.active {
            display: flex;
        }
        #discount-locked-overlay {
            background: rgba(0,0,0,0.55);
            border-radius: 12px;
        }

        /* Day-lock overlay — QR blurred until Wednesday */
        .discount-day-locked #discount-content {
            filter: blur(8px);
            pointer-events: none;
            user-select: none;
        }
        .discount-day-lock-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 12px;
            z-index: 3;
            text-align: center;
            padding: 16px;
        }
        .discount-day-lock-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }
        .discount-day-lock-text {
            font-size: 14px;
            color: #c084fc;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .discount-day-lock-subtext {
            font-size: 12px;
            color: #9ca3af;
            line-height: 1.4;
        }
        @keyframes day-unlock-pop {
            0% { transform: scale(0.8); opacity: 0; }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        .discount-day-unlocked {
            animation: day-unlock-pop 0.5s ease-out;
        }

        .voter-chip-avatar {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #7c3aed;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 9px;
            font-weight: 700;
        }

        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        /* 2026-05-28 — when open, cap to the viewport and scroll on overflow.
           2026-06-13 — the static calc(100vh - 64px) cap was WRONG twice over:
           (a) it ignores the quick-access bar (59px, added 2026-05-29 inside
           the same sticky header ABOVE this menu), and (b) mobile 100vh is the
           LARGE viewport (includes the URL-bar area), taller than what's
           actually visible. Both pushed the container's bottom below the fold,
           so the final ~60-150px of the scroll window were unreachable — the
           expanded Interactive Features list + Sign In/profile row "dropped
           below the viewport". The toggle JS now measures the menu's REAL top
           and the REAL visual viewport at open time and feeds --mm-cap; the
           calc() only covers the pre-JS moment. */
        .mobile-menu.open {
            max-height: calc(100vh - 64px);
            max-height: var(--mm-cap, calc(100vh - 64px));
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        /* Collapsible menu categories */
        .menu-cat-header {
            cursor: pointer;
            user-select: none;
            transition: opacity 0.2s;
        }
        .menu-cat-header:hover { opacity: 0.8; }

        /* Outer "View Full Menu" collapsible — wraps all categories */
        .menu-outer-wrap {
            max-width: 900px;
            margin: 0 auto;
        }
        .menu-outer-header {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 22px;
            background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(217,119,6,0.04));
            border: 1px solid rgba(245,158,11,0.25);
            border-radius: 14px;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
        }
        .menu-outer-header:hover {
            background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(217,119,6,0.08));
            border-color: rgba(245,158,11,0.45);
        }
        .menu-outer-header:active { transform: scale(0.995); }
        .menu-outer-icon {
            width: 42px; height: 42px;
            flex-shrink: 0;
            border-radius: 10px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            display: flex; align-items: center; justify-content: center;
            color: #111;
            font-size: 22px;
        }
        .menu-outer-title {
            flex: 1;
            min-width: 0;
        }
        .menu-outer-title h3 {
            font-size: 17px;
            font-weight: 700;
            color: #fff;
            margin: 0 0 2px;
        }
        .menu-outer-title p {
            font-size: 12.5px;
            color: #9ca3af;
            margin: 0;
        }
        .menu-outer-chevron {
            width: 22px; height: 22px;
            color: #d1d5db;
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }
        .menu-outer-chevron.rotated { transform: rotate(180deg); color: #fbbf24; }
        .menu-outer-body {
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 0.5s ease, opacity 0.35s ease, margin-top 0.4s ease;
            margin-top: 0;
        }
        .menu-outer-body.open {
            max-height: 20000px;
            opacity: 1;
            margin-top: 16px;
        }
        .menu-cat-content {
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease;
        }
        .menu-cat-content.collapsed {
            max-height: 0 !important;
            opacity: 0;
        }
        .menu-cat-chevron {
            transition: transform 0.3s ease;
            margin-left: auto;
            flex-shrink: 0;
        }
        .menu-cat-chevron.rotated {
            transform: rotate(180deg);
        }

        .lightbox {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 100;
            background: rgba(0,0,0,0.97);
            align-items: center;
            justify-content: center;
            user-select: none;
            -webkit-user-select: none;
        }
        .lightbox.active { display: flex; }
        .lightbox img {
            max-width: 90vw;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 8px;
            transition: opacity 0.25s ease;
        }
        .lightbox-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 102;
            transition: background 0.2s;
        }
        .lightbox-close:hover { background: rgba(255,255,255,0.2); }
        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.15);
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 102;
            transition: background 0.2s;
        }
        .lightbox-nav:hover { background: rgba(255,255,255,0.2); }
        .lightbox-prev { left: 16px; }
        .lightbox-next { right: 16px; }
        .lightbox-counter {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 13px;
            color: rgba(255,255,255,0.4);
            font-weight: 600;
            z-index: 102;
        }
        @media (max-width: 640px) {
            .lightbox-nav { display: none; }
        }
        .lightbox-swipe-hint {
            position: absolute;
            bottom: 48px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            font-weight: 500;
            z-index: 102;
            opacity: 1;
            transition: opacity 0.5s ease;
            white-space: nowrap;
        }
        .lightbox-swipe-hint.fade-out { opacity: 0; }
        @media (min-width: 640px) {
            .lightbox-swipe-hint { display: none; }
        }

        .cat-logo {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            object-fit: cover;
            flex-shrink: 0;
        }

        /* Language toggle */
        /* === Global Nav Auth === */
        .nav-signin-btn {
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            border: none;
            color: #fff;
            padding: 8px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            box-shadow: 0 0 12px rgba(147, 51, 234, 0.25), 0 2px 10px rgba(147, 51, 234, 0.3);
            transition: all 0.2s;
            white-space: nowrap;
        }
        .nav-signin-btn:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
            box-shadow: 0 0 20px rgba(147, 51, 234, 0.35), 0 4px 15px rgba(147, 51, 234, 0.4);
        }
        #nav-signin-mobile {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            margin-top: 8px;
        }

        /* Join CTA */
        .join-cta-card {
            background: linear-gradient(135deg, rgba(88, 28, 135, 0.15), rgba(17, 17, 17, 0.95));
            border: 1px solid rgba(147, 51, 234, 0.3);
            border-radius: 16px;
            padding: 32px 24px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .join-cta-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(ellipse at 50% 0%, rgba(147, 51, 234, 0.1), transparent 70%);
            pointer-events: none;
        }
        .join-cta-content { position: relative; z-index: 1; }
        .join-cta-icon { font-size: 32px; margin-bottom: 12px; }
        .join-cta-title {
            font-size: 24px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 8px;
        }
        .join-cta-desc {
            font-size: 15px;
            color: #9ca3af;
            max-width: 480px;
            margin: 0 auto 20px;
            line-height: 1.5;
        }
        .join-cta-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            margin-bottom: 20px;
        }
        .join-cta-btn-primary {
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            color: #fff;
            border: none;
            padding: 14px 40px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            box-shadow: 0 4px 20px rgba(147, 51, 234, 0.4);
            transition: all 0.2s;
            width: 100%;
            max-width: 320px;
        }
        .join-cta-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(147, 51, 234, 0.5);
        }
        .join-cta-btn-secondary {
            background: none;
            border: none;
            color: #a855f7;
            font-size: 13px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
        }
        .join-cta-btn-secondary:hover { color: #c084fc; text-decoration: underline; }
        .join-cta-features {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }
        .join-cta-feature {
            font-size: 13px;
            color: #6b7280;
            background: rgba(255,255,255,0.04);
            padding: 4px 12px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .nav-user-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #fff;
        }
        .nav-user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #7c3aed;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
        }
        .nav-user-name {
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .nav-logout-btn {
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            font-size: 16px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }
        .nav-logout-btn:hover { color: #ef4444; }

        .nav-profile-btn {
            display: inline-block;
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            color: #fff !important;
            text-decoration: none;
            padding: 6px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            transition: filter 0.2s;
        }
        .nav-profile-btn:hover { filter: brightness(1.1); }
        .nav-profile-btn-mobile {
            display: block;
            width: 100%;
            text-align: center;
            padding: 10px 16px;
            font-size: 14px;
        }

        .lang-toggle {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            background: rgba(255,255,255,0.1);
            border-radius: 6px;
            padding: 2px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .lang-toggle button {
            padding: 4px 10px;
            border-radius: 4px;
            color: #999;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 600;
            font-size: 12px;
            line-height: 1;
            min-height: 32px;
            min-width: 32px;
        }
        .lang-toggle button.active {
            background: #fff;
            color: #000;
        }
        .lang-toggle button:hover:not(.active) {
            color: #fff;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #000; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #555; }

        /* WhatsApp floating button */
        .whatsapp-float {
            position: fixed;
            bottom: 90px;
            right: 24px;
            width: 56px;
            height: 56px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(37,211,102,0.4);
            z-index: 90;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(37,211,102,0.6);
        }

        /* Hero fallback bg */
        #home {
            background: #000 url('images/logo.png') center center / 200px no-repeat;
        }

        /* Cookie Consent Banner */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 90;
            transform: translateY(100%);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .cookie-dismiss {
            position: absolute;
            top: 6px;
            right: 8px;
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            border-radius: 6px;
            transition: background 0.15s, color 0.15s;
            z-index: 1;
        }
        .cookie-dismiss:hover, .cookie-dismiss:focus {
            background: rgba(255,255,255,0.08);
            color: #fff;
            outline: none;
        }
        .cookie-banner.visible {
            transform: translateY(0);
        }
        .cookie-banner-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 24px;
            flex-wrap: wrap;
        }
        .cookie-icon {
            font-size: 24px;
            flex-shrink: 0;
            line-height: 1;
        }
        .cookie-text {
            flex: 1;
            min-width: 200px;
            font-size: 14px;
            color: #d1d5db;
            line-height: 1.5;
        }
        .cookie-buttons {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }
        .cookie-btn {
            padding: 8px 20px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: opacity 0.2s, transform 0.1s;
        }
        .cookie-btn:hover {
            opacity: 0.9;
        }
        .cookie-btn:active {
            transform: scale(0.97);
        }
        .cookie-btn-accept {
            background: #fff;
            color: #000;
        }
        .cookie-btn-decline {
            background: transparent;
            color: #9ca3af;
            border: 1px solid #374151;
        }
        .cookie-btn-decline:hover {
            border-color: #6b7280;
            color: #d1d5db;
        }
        /* 5. Quiz Intro Countdown Toast — dramatic with radial pulse + equalizer + 3D numbers */
        @keyframes quiz-intro-radial-pulse {
            0%, 100% { background-size: 100% 100%; opacity: 1; }
            50% { background-size: 150% 150%; opacity: 0.9; }
        }
        @keyframes quiz-title-pulse {
            0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(168,85,247,0.5); }
            50% { opacity: 0.85; text-shadow: 0 0 25px rgba(168,85,247,0.8), 0 0 50px rgba(147,51,234,0.4); }
        }
        @keyframes countdown-num {
            0% { transform: scale(2.5) perspective(600px) rotateX(30deg); opacity: 0; text-shadow: 0 0 0 transparent; }
            25% { transform: scale(1.1) perspective(600px) rotateX(-5deg); opacity: 1; }
            40% { transform: scale(1) perspective(600px) rotateX(0deg); }
            80% { opacity: 1; text-shadow: 0 0 30px rgba(168,85,247,0.6), 0 0 60px rgba(147,51,234,0.3); }
            100% { opacity: 0.2; text-shadow: 0 0 10px rgba(168,85,247,0.2); }
        }
        @keyframes countdown-shake {
            0%, 100% { transform: translateX(0); }
            15% { transform: translateX(-2px); }
            30% { transform: translateX(2px); }
            45% { transform: translateX(-1px); }
            60% { transform: translateX(1px); }
            75% { transform: translateX(0); }
        }
        @keyframes quiz-go-pop {
            0% { transform: scale(0) rotate(-10deg); opacity: 0; }
            40% { transform: scale(1.4) rotate(3deg); opacity: 1; }
            60% { transform: scale(0.95) rotate(-1deg); }
            80% { transform: scale(1.05) rotate(0deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        @keyframes quiz-go-particles {
            0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6), 0 0 0 0 rgba(168,85,247,0.4); }
            50% { box-shadow: 0 0 30px 10px rgba(34,197,94,0.2), 0 0 60px 20px rgba(168,85,247,0.1); }
            100% { box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 0 0 0 rgba(168,85,247,0); }
        }
        @keyframes quiz-eq-bar {
            0%, 100% { height: 8px; }
            25% { height: 24px; }
            50% { height: 14px; }
            75% { height: 30px; }
        }
        .quiz-intro-toast {
            text-align: center;
            padding: 16px 16px;
            margin: 8px 0;
            background:
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.15) 0%, rgba(147,51,234,0.06) 40%, transparent 70%),
                linear-gradient(135deg, rgba(17,17,17,0.95), rgba(17,17,17,0.85));
            border: 1px solid rgba(168,85,247,0.35);
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            animation: quiz-intro-radial-pulse 2s ease-in-out infinite;
        }
        /* Equalizer bars behind countdown */
        .quiz-intro-toast::before {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 100%;
            background:
                linear-gradient(0deg, rgba(168,85,247,0.06) 0%, transparent 30%),
                repeating-linear-gradient(90deg,
                    transparent 0px, transparent 6px,
                    rgba(168,85,247,0.04) 6px, rgba(168,85,247,0.04) 8px
                );
            pointer-events: none;
            opacity: 0.6;
        }
        .quiz-intro-title {
            font-size: 24px;
            font-weight: 900;
            color: #fff;
            letter-spacing: 4px;
            text-transform: uppercase;
            margin-bottom: 10px;
            animation: quiz-title-pulse 1s ease-in-out infinite;
            position: relative;
            z-index: 1;
        }
        .quiz-intro-category {
            font-size: 14px;
            color: #c084fc;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 18px;
            position: relative;
            z-index: 1;
        }
        .quiz-intro-countdown {
            font-size: 56px;
            font-weight: 900;
            color: #fff;
            line-height: 1;
            text-shadow: 0 0 20px rgba(168,85,247,0.6), 0 0 40px rgba(147,51,234,0.3);
            animation: countdown-num 1s ease-out, countdown-shake 0.1s ease-in-out;
            position: relative;
            z-index: 1;
        }
        .quiz-intro-go {
            font-size: 64px;
            font-weight: 900;
            color: #4ade80;
            text-shadow: 0 0 30px rgba(34,197,94,0.6), 0 0 60px rgba(34,197,94,0.2);
            animation: quiz-go-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), quiz-go-particles 1s ease-out;
            position: relative;
            z-index: 1;
        }
        .quiz-intro-reward {
            font-size: 15px;
            color: #fbbf24;
            font-weight: 700;
            margin-top: 14px;
            text-shadow: 0 0 8px rgba(245,158,11,0.3);
            position: relative;
            z-index: 1;
        }
        /* Mobile intro adjustments */
        @media (max-width: 480px) {
            .quiz-intro-toast { padding: 20px 16px; }
            .quiz-intro-countdown { font-size: 44px; }
            .quiz-intro-go { font-size: 50px; }
            .quiz-intro-title { font-size: 18px; letter-spacing: 2px; }
        }

        /* === How to Play Button === */
        .quiz-howto-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 auto 12px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(147, 51, 234, 0.08));
            border: 1px solid rgba(99, 102, 241, 0.25);
            color: #a5b4fc;
            padding: 10px 22px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.25s;
            letter-spacing: 0.3px;
        }
        .quiz-howto-btn:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(147, 51, 234, 0.15));
            border-color: rgba(99, 102, 241, 0.5);
            color: #c7d2fe;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
        }
        .quiz-howto-btn svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        /* === Quiz Tutorial Overlay === */
        .quiz-tutorial-overlay {
            position: fixed; inset: 0; z-index: 10000;
            background: rgba(0,0,0,0.92); backdrop-filter: blur(8px);
            display: none; flex-direction: column; align-items: center; justify-content: center;
        }
        .quiz-tutorial-overlay.active { display: flex; }

        .quiz-tutorial-viewport {
            width: 100%; max-width: 380px; overflow: hidden; position: relative;
            flex: 0 1 auto; touch-action: pan-y;
        }
        .quiz-tutorial-track {
            display: flex; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
            will-change: transform;
        }
        .quiz-tutorial-track.dragging { transition: none; }

        .quiz-tutorial-slide {
            min-width: 100%; padding: 24px 28px; display: flex; flex-direction: column;
            align-items: center; text-align: center; gap: 16px;
        }
        .quiz-tutorial-slide-icon {
            font-size: 56px; line-height: 1;
            filter: drop-shadow(0 0 20px rgba(168,85,247,0.4));
        }
        .quiz-tutorial-slide-title {
            font-size: 24px; font-weight: 800; color: #fff; letter-spacing: 0.5px;
        }
        .quiz-tutorial-slide-subtitle {
            font-size: 16px; color: #c084fc; font-weight: 600;
        }
        .quiz-tutorial-slide-text {
            font-size: 17px; color: #d1d5db; line-height: 1.6; max-width: 340px;
        }

        /* TV screen illustration */
        .quiz-tutorial-tv {
            width: 220px; height: 140px; background: #111;
            border: 3px solid #333; border-radius: 10px;
            position: relative; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }
        .quiz-tutorial-tv::after {
            content: ''; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
            width: 60px; height: 6px; background: #333; border-radius: 0 0 4px 4px;
        }
        .quiz-tutorial-tv-content {
            font-size: 11px; color: #888; text-align: center; padding: 8px;
        }
        .quiz-tutorial-tv-question {
            font-size: 12px; color: #c084fc; font-weight: 600; margin-bottom: 8px;
        }
        .quiz-tutorial-tv-barcode {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 6px 16px; background: rgba(245,158,11,0.15);
            border: 2px solid #f59e0b; border-radius: 8px;
            font-size: 22px; font-weight: 900; color: #fbbf24;
            letter-spacing: 6px; font-variant-numeric: tabular-nums;
            animation: quiz-tutorial-barcode-pulse 2s ease-in-out infinite;
        }
        @keyframes quiz-tutorial-barcode-pulse {
            0%, 100% { box-shadow: 0 0 8px rgba(245,158,11,0.2); }
            50% { box-shadow: 0 0 20px rgba(245,158,11,0.5); }
        }
        .quiz-tutorial-tv-label {
            font-size: 9px; color: #f59e0b; font-weight: 700; margin-top: 6px;
            text-transform: uppercase; letter-spacing: 1px;
        }

        /* Mock quiz card illustration */
        .quiz-tutorial-mock-card {
            width: 260px; background: #111; border: 1px solid rgba(168,85,247,0.3);
            border-radius: 12px; padding: 14px; text-align: left;
        }
        .quiz-tutorial-mock-category {
            font-size: 9px; color: #c084fc; font-weight: 700; text-transform: uppercase;
            background: rgba(168,85,247,0.15); padding: 2px 8px; border-radius: 8px;
            display: inline-block; margin-bottom: 8px;
        }
        .quiz-tutorial-mock-q {
            font-size: 12px; color: #e5e7eb; font-weight: 600; margin-bottom: 10px;
        }
        .quiz-tutorial-mock-input {
            width: 70px; height: 30px; background: #1a1a1a; border: 2px solid #f59e0b;
            border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
            font-size: 14px; color: #fbbf24; font-weight: 700; letter-spacing: 3px;
            margin-bottom: 6px; animation: quiz-tutorial-barcode-pulse 2s ease-in-out infinite;
        }
        .quiz-tutorial-mock-answer-row {
            display: flex; gap: 6px; align-items: center;
        }
        .quiz-tutorial-mock-answer-input {
            flex: 1; height: 30px; background: #1a1a1a; border: 2px solid rgba(124,58,237,0.5);
            border-radius: 6px; padding: 0 8px; font-size: 11px; color: #999;
            display: flex; align-items: center;
        }
        .quiz-tutorial-mock-submit {
            height: 30px; padding: 0 12px; background: linear-gradient(135deg,#9333ea,#7c3aed);
            border-radius: 6px; font-size: 10px; font-weight: 700; color: #fff;
            display: flex; align-items: center;
        }

        /* Tutorial navigation */
        .quiz-tutorial-nav {
            display: flex; align-items: center; gap: 20px; margin-top: 20px;
        }
        .quiz-tutorial-arrow {
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
            color: #fff; font-size: 18px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
        }
        .quiz-tutorial-arrow:hover { background: rgba(147,51,234,0.2); border-color: #a855f7; }
        .quiz-tutorial-arrow:disabled { opacity: 0.2; cursor: not-allowed; }
        .quiz-tutorial-arrow:disabled:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }

        .quiz-tutorial-dots {
            display: flex; gap: 8px; align-items: center;
        }
        .quiz-tutorial-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.2); transition: all 0.3s;
        }
        .quiz-tutorial-dot.active {
            background: #a855f7; width: 24px; border-radius: 4px;
            box-shadow: 0 0 8px rgba(168,85,247,0.5);
        }

        .quiz-tutorial-gotit-btn {
            margin-top: 16px; padding: 12px 40px; border: none; border-radius: 12px;
            font-size: 15px; font-weight: 700; cursor: pointer;
            background: linear-gradient(135deg,#9333ea,#7c3aed); color: #fff;
            font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
            display: none;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .quiz-tutorial-gotit-btn.visible { display: inline-block; }
        .quiz-tutorial-gotit-btn:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(147,51,234,0.4); }

        .quiz-tutorial-skip {
            position: absolute; top: 16px; right: 16px;
            background: none; border: none; color: #666; font-size: 13px;
            cursor: pointer; font-weight: 600; padding: 8px;
            font-family: 'Inter', sans-serif;
        }
        .quiz-tutorial-skip:hover { color: #c084fc; }

        /* === Premium UI Polish (shared.css parity) === */

        /* Toast slide-up animation */
        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .quiz-winner-toast,
        .quiz-winner-toast-personal,
        .quiz-leaderboard-card {
            animation: slideUp 0.4s ease-out, quiz-toast-pop 0.5s ease-out;
        }

        /* Quiz card pulse when live */
        .quiz-card:not(.revealed) {
            animation: quizPulse 2s ease-in-out infinite, quiz-border-glow 3s ease-in-out infinite;
        }
        @keyframes quizPulse {
            0%, 100% { border-color: rgba(147,51,234,0.3); }
            50% { border-color: rgba(147,51,234,0.6); }
        }

        /* Karaoke vote ring SVG glow — enhance the parent SVG container */
        svg:has(.progress-ring-fill) {
            filter: drop-shadow(0 0 6px rgba(147,51,234,0.25));
        }

        /* Button press feedback */
        .auth-submit:active,
        .join-cta-btn-primary:active,
        .chat-send-btn:active,
        .nav-signin-btn:active,
        .whatsapp-share-btn:active { transform: scale(0.97); }

        /* Smooth transitions on interactive elements */
        a, button, input, .nav-link, .mobile-nav-link { transition: all 0.2s ease; }

        /* ======================================================
           UX Polish — Chat, Karaoke, Rewards, Quiz (2026-03-30)
           ====================================================== */

        /* --- Task 1: Chat Section Premium Touches --- */

        /* 1a. Chat container: subtle inner glow + refined border */
        .chat-container {
            box-shadow: inset 0 0 20px rgba(147, 51, 234, 0.04), 0 2px 12px rgba(0, 0, 0, 0.3);
        }

        /* 1b. Own vs others' message bubbles */
        /* F2 — voucher race-drop card in chat */
        .vdrop-card {
            background: linear-gradient(135deg, rgba(251,191,36,0.28), rgba(147,51,234,0.18));
            border: 2px solid rgba(251,191,36,0.75);
            border-radius: 14px;
            padding: 14px;
            margin: 8px 0;
            display: flex; flex-direction: column; gap: 8px;
            animation: vdropPulse 1.4s ease-in-out infinite;
            box-shadow: 0 0 24px rgba(251,191,36,0.6), inset 0 0 14px rgba(251,191,36,0.18);
            position: relative;
            overflow: hidden;
        }
        .vdrop-card::after {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(120deg, transparent 30%, rgba(255,235,140,0.35) 50%, transparent 70%);
            background-size: 200% 100%;
            animation: vdropShine 2.4s linear infinite;
            pointer-events: none;
        }
        @keyframes vdropPulse {
            0%, 100% { box-shadow: 0 0 22px rgba(251,191,36,0.5), inset 0 0 12px rgba(251,191,36,0.18); }
            50% { box-shadow: 0 0 42px rgba(251,191,36,0.85), inset 0 0 18px rgba(251,191,36,0.28); }
        }
        @keyframes vdropShine {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .vdrop-card.claimed::after, .vdrop-card.expired::after { display: none; }
        .vdrop-card.claimed, .vdrop-card.expired {
            animation: none;
            box-shadow: none;
            opacity: 0.72;
        }
        .vdrop-card.expired { filter: grayscale(0.6); }
        .vdrop-card .vdrop-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: #fbbf24; }
        .vdrop-card .vdrop-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
        .vdrop-card .vdrop-sub { font-size: 12px; color: rgba(245,245,247,0.72); }
        .vdrop-card .vdrop-cta { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a1a; border: 0; padding: 12px 18px; border-radius: 10px; font-weight: 800; font-size: 14px; cursor: pointer; letter-spacing: 0.02em; }
        .vdrop-card .vdrop-cta:disabled { opacity: 0.5; cursor: default; }
        .vdrop-card .vdrop-cta:active { transform: scale(0.97); }
        .vdrop-card .vdrop-claimed-line { font-size: 13px; font-weight: 700; color: #fbbf24; }
        .vdrop-card .vdrop-countdown { font-variant-numeric: tabular-nums; font-weight: 700; }

        .chat-msg-own {
            flex-direction: row-reverse;
        }
        .chat-msg-own .chat-msg-content {
            text-align: right;
        }
        .chat-msg-own .chat-msg-name {
            justify-content: flex-end;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .chat-msg-own .chat-msg-avatar {
            background: linear-gradient(135deg, #7c3aed, #9333ea);
            color: #fff;
        }
        .chat-msg-own .chat-msg-text {
            background: rgba(147, 51, 234, 0.1);
            border: 1px solid rgba(147, 51, 234, 0.15);
            border-radius: 12px 12px 4px 12px;
            padding: 6px 10px;
            display: inline-block;
        }
        .chat-msg:not(.chat-msg-own) .chat-msg-text {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px 12px 12px 4px;
            padding: 6px 10px;
            display: inline-block;
        }

        /* 1c. Chat input: enhanced focus glow (purple border + outer shadow) */
        .chat-input:focus {
            border-color: #9333ea;
            box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15), 0 0 16px rgba(147, 51, 234, 0.1);
        }

        /* 1d. Send button: press scale feedback + hover glow */
        .chat-send-btn {
            transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s;
        }
        .chat-send-btn:hover {
            opacity: 1;
            box-shadow: 0 0 16px rgba(147, 51, 234, 0.35);
        }
        .chat-send-btn:active {
            transform: scale(0.92);
            box-shadow: 0 0 8px rgba(147, 51, 234, 0.2);
        }

        /* 1e. Emoji & GIF picker buttons: subtle hover lift + glow */
        .chat-emoji-btn, .chat-gif-btn {
            transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
        }
        .chat-emoji-btn:hover, .chat-gif-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
        }
        .chat-emoji-btn:active, .chat-gif-btn:active {
            transform: scale(0.95);
        }

        /* --- Task 2: Karaoke Voting Section --- */

        /* 2a. "I'm In" button: prominent purple glow + enhanced press feedback */
        .btn-im-in {
            box-shadow: 0 4px 24px rgba(147, 51, 234, 0.35), 0 0 40px rgba(147, 51, 234, 0.12);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-im-in:hover:not(:disabled) {
            box-shadow: 0 6px 32px rgba(147, 51, 234, 0.5), 0 0 60px rgba(147, 51, 234, 0.18);
        }
        .btn-im-in:active:not(:disabled) {
            transform: translateY(1px) scale(0.95);
            box-shadow: 0 2px 12px rgba(147, 51, 234, 0.3);
        }
        .btn-im-in.voted {
            box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3), 0 0 40px rgba(34, 197, 94, 0.1);
        }

        /* Interactive Features grid buttons */
        .feature-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 28px 20px;
            background: linear-gradient(135deg, rgba(168,85,247,0.10), rgba(6,182,212,0.05));
            border: 1px solid rgba(168,85,247,0.25);
            border-radius: 14px;
            color: #fff;
            text-decoration: none;
            transition: all 0.25s ease;
            min-height: 120px;
        }
        .feature-btn:hover {
            background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(6,182,212,0.12));
            border-color: rgba(168,85,247,0.55);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(168,85,247,0.20);
        }
        .feature-btn .feature-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #c4b5fd;
            transition: color 0.25s ease, transform 0.25s ease, filter 0.25s ease;
            filter: drop-shadow(0 0 10px rgba(168,85,247,0.10));
        }
        .feature-btn .feature-icon svg {
            width: 36px;
            height: 36px;
            display: block;
        }
        .feature-btn:hover .feature-icon {
            color: #e9d5ff;
            transform: scale(1.06);
            filter: drop-shadow(0 0 14px rgba(168,85,247,0.45));
        }
        .feature-btn .feature-label {
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            color: #e9d5ff;
            letter-spacing: 0.3px;
        }

        /* 2b. Vote ring: enhanced drop-shadow glow */
        svg:has(.progress-ring-fill) {
            filter: drop-shadow(0 0 10px rgba(147, 51, 234, 0.35)) drop-shadow(0 0 25px rgba(147, 51, 234, 0.12));
        }
        svg:has(.progress-ring-fill.complete) {
            filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.4)) drop-shadow(0 0 25px rgba(34, 197, 94, 0.15));
        }

        /* 2c. Karaoke status text: smooth transitions between states */
        .karaoke-status-badge {
            transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }
        .status-voting {
            box-shadow: 0 0 12px rgba(147, 51, 234, 0.15);
        }
        .status-confirmed {
            box-shadow: 0 0 16px rgba(34, 197, 94, 0.2);
        }

        /* 2d. Discount code card: premium border + glow for active codes */
        .discount-card:not(.discount-blurred) {
            box-shadow: 0 0 20px rgba(147, 51, 234, 0.1), inset 0 0 30px rgba(147, 51, 234, 0.03);
            border: 1px solid rgba(147, 51, 234, 0.45);
            transition: box-shadow 0.4s ease, border-color 0.4s ease;
        }
        .discount-card:not(.discount-blurred):hover {
            box-shadow: 0 0 28px rgba(147, 51, 234, 0.18), inset 0 0 30px rgba(147, 51, 234, 0.05);
            border-color: rgba(147, 51, 234, 0.6);
        }

        /* --- Task 3: Rewards Drawer --- */

        /* 3a. Reward cards: active ones get subtle purple glow */
        .reward-card {
            transition: box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
        }
        .reward-card:not(.redeemed) {
            box-shadow: 0 0 16px rgba(147, 51, 234, 0.08), inset 0 0 20px rgba(147, 51, 234, 0.03);
            border-color: rgba(147, 51, 234, 0.4);
        }
        .reward-card:not(.redeemed):hover {
            box-shadow: 0 0 24px rgba(147, 51, 234, 0.15), inset 0 0 20px rgba(147, 51, 234, 0.05);
            border-color: rgba(147, 51, 234, 0.55);
        }

        /* 3b. Redeemed cards: more muted */
        .reward-card.redeemed {
            opacity: 0.6;
            border-color: rgba(107, 114, 128, 0.2);
            background: rgba(17, 17, 17, 0.4);
        }
        .reward-card.redeemed .reward-type {
            color: #6b7280;
        }

        /* 3c. QR code: border-radius + subtle shadow */
        .reward-card .reward-qr img {
            border-radius: 10px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(147, 51, 234, 0.1);
        }
        .chat-voucher-qr img {
            border-radius: 10px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(147, 51, 234, 0.1);
        }

        /* 3d. Rewards drawer toggle: smooth open/close with easing */
        .rewards-body {
            transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .rewards-header {
            transition: background 0.25s ease;
        }

        /* Rewards container: inner glow to match chat */
        .rewards-container {
            box-shadow: inset 0 0 20px rgba(147, 51, 234, 0.04), 0 2px 12px rgba(0, 0, 0, 0.3);
        }

        /* --- Task 4: Quiz Widget Enhancements --- */

        /* 4a. Quiz card pulsing border when live — already present, enhance with shimmer */
        .quiz-card:not(.revealed)::after {
            content: '';
            position: absolute;
            top: 0; left: -100%; right: 0; bottom: 0;
            width: 200%;
            background: linear-gradient(90deg, transparent 0%, rgba(168, 85, 247, 0.04) 45%, rgba(168, 85, 247, 0.08) 50%, rgba(168, 85, 247, 0.04) 55%, transparent 100%);
            animation: quiz-card-shimmer 4s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        @keyframes quiz-card-shimmer {
            0% { transform: translateX(-30%); }
            100% { transform: translateX(30%); }
        }
        .quiz-card-inner { position: relative; z-index: 1; }

        /* 4b. Answer submitted: enhanced checkmark entrance with green pulse */
        .quiz-submitted-msg {
            animation: quiz-submitted-fade 0.4s ease-out, quiz-submitted-pulse 1.5s ease-in-out 0.4s;
        }
        @keyframes quiz-submitted-pulse {
            0%, 100% { text-shadow: none; }
            50% { text-shadow: 0 0 10px rgba(34, 197, 94, 0.3); }
        }

        /* 4c. Winner toast: enhanced golden glow effect */
        .quiz-winner-toast {
            box-shadow: 0 0 30px rgba(245, 158, 11, 0.15), 0 0 60px rgba(234, 179, 8, 0.06);
        }
        .quiz-winner-toast-personal {
            box-shadow: 0 0 30px rgba(34, 197, 94, 0.12), 0 0 50px rgba(168, 85, 247, 0.06);
        }
        /* ========== Google Play Early-Access Section ========== */
        .play-section {
            position: relative;
            overflow: hidden;
        }
        .play-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse at 20% 30%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 70%, rgba(245, 158, 11, 0.05) 0%, transparent 55%);
            pointer-events: none;
        }
        .play-section > .container { position: relative; }
        .play-eyebrow {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #c084fc;
            background: rgba(168, 85, 247, 0.12);
            border: 1px solid rgba(168, 85, 247, 0.3);
            padding: 6px 14px;
            border-radius: 9999px;
        }
        .play-install-mobile {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: fit-content;
            margin: 0 auto 18px;
            padding: 13px 24px;
            background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
            color: #0a0a0a;
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 0.01em;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3);
            transition: transform 0.15s, box-shadow 0.2s;
            text-decoration: none;
        }
        .play-install-mobile:active {
            transform: translateY(1px);
            box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
        }
        .play-install-icon {
            flex-shrink: 0;
            filter: drop-shadow(0 1px 2px rgba(10, 10, 10, 0.4));
        }
        .play-text-link {
            align-items: center;
            color: #c084fc;
            font-weight: 500;
            font-size: 0.95rem;
            text-decoration: none;
            border-bottom: 1px solid rgba(192, 132, 252, 0);
            transition: border-color 0.2s, color 0.2s;
            padding-bottom: 2px;
        }
        .play-text-link:hover {
            color: #ddd6fe;
            border-bottom-color: rgba(192, 132, 252, 0.6);
        }
        .play-qr-card {
            position: relative;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            background: #000;
            border: 1px solid rgba(168, 85, 247, 0.35);
            border-radius: 20px;
            padding: 22px 22px 18px;
            box-shadow:
                0 0 0 1px rgba(168, 85, 247, 0.08) inset,
                0 20px 60px rgba(168, 85, 247, 0.15),
                0 4px 24px rgba(0, 0, 0, 0.5);
            max-width: 320px;
        }
        .play-qr-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 20px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(192, 132, 252, 0.5), rgba(245, 158, 11, 0.3), rgba(192, 132, 252, 0.5));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            pointer-events: none;
            opacity: 0.6;
        }
        .play-qr-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 9999px;
            padding: 5px 12px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: #e5e7eb;
            margin-bottom: 14px;
        }
        .play-qr-img-wrap {
            background: #000;
            border-radius: 12px;
            padding: 10px;
            line-height: 0;
        }
        .play-qr-img-wrap img {
            display: block;
            width: 260px;
            height: 260px;
            max-width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
            border-radius: 6px;
        }
        .play-qr-caption {
            margin-top: 14px;
            font-size: 0.82rem;
            color: #a3a3a3;
            letter-spacing: 0.02em;
            text-align: center;
        }
        @media (max-width: 640px) {
            .play-qr-card { padding: 18px; max-width: 280px; }
            .play-qr-img-wrap img { width: 220px; }
        }

        /* ========== Happy Hour Banner ========== */
        .happy-hour-section {
            position: relative;
            overflow: hidden;
        }
        .happy-hour-banner {
            position: relative;
            max-width: 64rem;
            margin: 0 auto;
            border-radius: 1rem;
            padding: 2rem 2.5rem;
            border: 2px solid transparent;
            background: linear-gradient(135deg, rgba(120, 53, 15, 0.25) 0%, rgba(0, 0, 0, 0.95) 100%);
            overflow: hidden;
        }
        .happy-hour-banner.hh-active {
            border-image: linear-gradient(135deg, #f59e0b, #d97706, #fbbf24, #f59e0b) 1;
            animation: hh-border-glow 3s ease-in-out infinite;
        }
        .happy-hour-banner.hh-inactive {
            border-color: rgba(107, 114, 128, 0.2);
            opacity: 0.7;
        }
        @keyframes hh-border-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.15), inset 0 0 20px rgba(245, 158, 11, 0.05); }
            50% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.3), inset 0 0 30px rgba(245, 158, 11, 0.1); }
        }
        @keyframes hh-pulse-text {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .hh-title-active {
            font-size: 1.75rem;
            font-weight: 800;
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: hh-pulse-text 2s ease-in-out infinite;
            margin-bottom: 0.25rem;
        }
        @media (min-width: 768px) {
            .hh-title-active { font-size: 2.25rem; }
        }
        .hh-title-inactive {
            font-size: 1.25rem;
            font-weight: 600;
            color: #9ca3af;
        }
        .hh-countdown {
            font-size: 1.125rem;
            color: #fbbf24;
            font-weight: 700;
            margin-top: 0.5rem;
        }
        .hh-deals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 0.75rem;
            margin-top: 1rem;
        }
        .hh-deal-card {
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.2);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            text-align: center;
        }
        .hh-deal-card .deal-name {
            color: #fbbf24;
            font-weight: 700;
            font-size: 0.875rem;
        }
        .hh-deal-card .deal-desc {
            color: #9ca3af;
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }

        /* ========== Dynamic Gallery (masonry) ========== */
        .gallery-masonry {
            columns: 2;
            column-gap: 0.75rem;
            margin-top: 1.5rem;
        }
        @media (min-width: 768px) { .gallery-masonry { columns: 3; } }
        @media (min-width: 1024px) { .gallery-masonry { columns: 4; } }
        .gallery-masonry-item {
            position: relative;
            break-inside: avoid;
            margin-bottom: 0.75rem;
            border-radius: 0.75rem;
            overflow: hidden;
            border: 1px solid #1f2937;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .gallery-caption-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px 12px 12px;
            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .gallery-masonry-item:hover .gallery-caption-overlay { opacity: 1; }
        @media (hover: none) { .gallery-caption-overlay { opacity: 1; } }
        .gallery-caption-user {
            color: #c084fc;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 3px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
        .gallery-caption-text {
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        }
        /* Lightbox caption bar */
        .lightbox-caption {
            position: fixed;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            max-width: 90vw;
            color: #fff;
            font-size: 14px;
            text-align: center;
            padding: 8px 16px;
            background: rgba(0,0,0,0.5);
            border-radius: 8px;
            z-index: 10002;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            display: none;
        }
        .lightbox-caption.visible { display: block; }
        .lightbox-caption-user {
            color: #c084fc;
            font-weight: 700;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .gallery-masonry-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            border-color: #4b5563;
        }
        .gallery-masonry-item img {
            width: 100%;
            height: auto;
            display: block;
        }
        .gallery-empty {
            text-align: center;
            padding: 3rem 1rem;
            color: #6b7280;
            font-size: 1rem;
        }
        .gallery-view-all {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 2rem;
            color: #a855f7;
            font-weight: 600;
            font-size: 0.875rem;
            transition: color 0.3s;
        }
        .gallery-view-all:hover { color: #c084fc; }
        /* Collapsible gallery */
        .gallery-masonry.collapsed .gallery-masonry-item:nth-child(n+7) {
            display: none;
        }
        .gallery-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1.5rem;
            padding: 0.625rem 1.5rem;
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            color: #fff;
            border: none;
            border-radius: 0.5rem;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .gallery-toggle-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(147, 51, 234, 0.3);
        }
        .gallery-toggle-btn svg {
            transition: transform 0.3s ease;
        }
        .gallery-toggle-btn.expanded svg {
            transform: rotate(180deg);
        }

        /* ========== Gallery Upload (site parity with RN app) ========== */
        .gallery-upload-bar {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        .gallery-upload-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, #9333ea, #7c3aed);
            color: #fff;
            border: none;
            border-radius: 0.625rem;
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 12px rgba(147,51,234,0.3);
        }
        .gallery-upload-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(147,51,234,0.4);
        }
        .gallery-upload-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        .gallery-upload-btn svg { width: 18px; height: 18px; }
        .gallery-pending-badge {
            position: absolute;
            top: 6px; left: 6px;
            display: inline-flex; align-items: center; gap: 3px;
            background: rgba(0,0,0,0.75);
            color: #fbbf24;
            border-radius: 6px;
            padding: 3px 6px;
            font-size: 10px;
            font-weight: 600;
            z-index: 5;
            pointer-events: none;
        }
        .gallery-delete-btn {
            position: absolute;
            top: 6px; right: 6px;
            width: 28px; height: 28px;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.75);
            border: none;
            border-radius: 14px;
            color: #ef4444;
            cursor: pointer;
            z-index: 6;
            transition: background 0.15s, transform 0.15s;
        }
        .gallery-delete-btn:hover { background: rgba(239,68,68,0.25); transform: scale(1.08); }
        .gallery-delete-btn svg { width: 16px; height: 16px; }

        /* Batch upload modal */
        .gallery-modal-backdrop {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 10050;
            display: none;
            align-items: center; justify-content: center;
            padding: 16px;
            overflow-y: auto;
        }
        .gallery-modal-backdrop.active { display: flex; }
        .gallery-modal {
            background: #0d0d0d;
            border: 1px solid rgba(147,51,234,0.3);
            border-radius: 14px;
            width: 100%;
            max-width: 560px;
            max-height: 92vh;
            display: flex; flex-direction: column;
            overflow: hidden;
        }
        .gallery-modal-header {
            padding: 16px;
            border-bottom: 1px solid #222;
            display: flex; align-items: center; gap: 12px;
        }
        .gallery-modal-header h3 {
            color: #fff; font-size: 16px; font-weight: 700; flex: 1;
        }
        .gallery-modal-close {
            background: transparent; border: none;
            color: #9ca3af; font-size: 24px; cursor: pointer; padding: 4px 8px;
        }
        .gallery-modal-close:hover { color: #fff; }
        .gallery-modal-body {
            padding: 12px;
            overflow-y: auto;
            flex: 1;
        }
        .gallery-batch-item {
            background: #111;
            border: 1px solid #222;
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
        }
        .gallery-batch-row {
            display: flex; gap: 12px; margin-bottom: 10px;
        }
        .gallery-batch-thumb {
            width: 80px; height: 80px;
            border-radius: 8px;
            background: #222;
            object-fit: cover;
            flex-shrink: 0;
        }
        .gallery-batch-info {
            flex: 1; display: flex; flex-direction: column; justify-content: space-between;
            min-width: 0;
        }
        .gallery-batch-meta {
            color: #888; font-size: 11px;
        }
        .gallery-batch-remove {
            align-self: flex-start;
            background: rgba(239,68,68,0.1);
            border: 1px solid rgba(239,68,68,0.3);
            color: #ef4444;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 11px; font-weight: 600;
            cursor: pointer;
            display: inline-flex; align-items: center; gap: 4px;
        }
        .gallery-batch-remove:hover { background: rgba(239,68,68,0.2); }
        .gallery-batch-caption {
            width: 100%;
            background: #0a0a0a;
            border: 1px solid #2a2a2a;
            color: #fff;
            border-radius: 8px;
            padding: 10px;
            font-size: 13px;
            resize: vertical;
            min-height: 44px;
            font-family: inherit;
        }
        .gallery-batch-caption:focus { outline: none; border-color: #7c3aed; }
        .gallery-batch-counter {
            color: #555; font-size: 10px; text-align: right; margin-top: 4px;
        }
        .gallery-modal-footer {
            padding: 16px;
            border-top: 1px solid #222;
            background: #0a0a0a;
        }
        .gallery-progress-wrap {
            margin-bottom: 10px;
        }
        .gallery-progress-track {
            height: 4px;
            background: #222;
            border-radius: 2px;
            overflow: hidden;
        }
        .gallery-progress-fill {
            height: 4px;
            background: #c084fc;
            width: 0%;
            transition: width 0.3s;
        }
        .gallery-progress-text {
            color: #888; font-size: 11px; margin-top: 6px; text-align: center;
        }
        .gallery-upload-all-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%;
            background: #7c3aed;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 14px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
        }
        .gallery-upload-all-btn:hover:not(:disabled) { background: #6d28d9; }
        .gallery-upload-all-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .gallery-upload-all-btn svg { width: 16px; height: 16px; }

        /* Pinch-zoom lightbox extensions */
        #lightbox-img.zoomable { touch-action: none; will-change: transform; cursor: grab; }
        #lightbox-img.zoomable.dragging { cursor: grabbing; }

        /* ========== Reservation Form Enhancement ========== */
        .res-success-msg {
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: 0.75rem;
            padding: 1rem 1.25rem;
            color: #86efac;
            font-weight: 600;
            text-align: center;
            margin-bottom: 1rem;
            display: none;
        }
        .res-error-msg {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 0.75rem;
            padding: 1rem 1.25rem;
            color: #fca5a5;
            font-weight: 600;
            text-align: center;
            margin-bottom: 1rem;
            display: none;
        }
        .res-submit-btn {
            width: 100%;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 1.125rem;
            padding: 0.75rem 2rem;
            border-radius: 0.5rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }
        .res-submit-api {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            color: #fff;
        }
        .res-submit-api:hover { background: linear-gradient(135deg, #6d28d9, #9333ea); box-shadow: 0 4px 20px rgba(147, 51, 234, 0.3); }
        .res-submit-api:disabled { opacity: 0.6; cursor: not-allowed; }
        .res-or-divider {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 0.75rem 0;
            color: #6b7280;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .res-or-divider::before, .res-or-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #374151;
        }

        /* Interactive Features strip — sits between hero + about so visitors
         * see what the app can do without opening the dropdown nav. */
        .features-strip {
            background: #000;
            padding: 56px 0 32px;
            border-top: 1px solid rgba(147, 51, 234, 0.15);
            border-bottom: 1px solid rgba(147, 51, 234, 0.15);
        }
        .features-strip-eyebrow {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #c4b5fd;
            text-align: center;
            margin-bottom: 6px;
        }
        .features-strip-title {
            font-size: 22px;
            font-weight: 800;
            color: #fff;
            text-align: center;
            letter-spacing: -0.01em;
            margin: 0 0 6px;
        }
        @media (min-width: 768px) {
            .features-strip-title { font-size: 28px; }
        }
        .features-strip-rule {
            width: 64px;
            height: 2px;
            margin: 14px auto 26px;
            background: linear-gradient(90deg, rgba(147,51,234,0), #9333ea, rgba(147,51,234,0));
            border-radius: 999px;
        }
        .features-strip-row {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            scrollbar-width: thin;
            scrollbar-color: rgba(147,51,234,0.4) transparent;
            padding: 4px 4px 14px;
            margin: 0 -4px;
        }
        .features-strip-row::-webkit-scrollbar { height: 4px; }
        .features-strip-row::-webkit-scrollbar-thumb { background: rgba(147,51,234,0.5); border-radius: 2px; }
        .features-strip-row::-webkit-scrollbar-track { background: transparent; }
        .features-strip-card {
            flex: 0 0 auto;
            width: 140px;
            min-height: 158px;
            padding: 18px 14px;
            background: linear-gradient(180deg, rgba(28,28,32,0.92), rgba(11,11,15,0.85));
            border: 1px solid rgba(147,51,234,0.22);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            text-decoration: none;
            color: #f5f5f7;
            scroll-snap-align: start;
            transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }
        .features-strip-card:hover,
        .features-strip-card:focus-visible {
            transform: translateY(-3px);
            border-color: rgba(192,132,252,0.6);
            box-shadow: 0 10px 28px rgba(147,51,234,0.28);
            background: linear-gradient(180deg, rgba(36,30,52,0.95), rgba(15,11,22,0.9));
            outline: none;
        }
        .fcard-icon {
            width: 38px;
            height: 38px;
            color: #c4b5fd;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .features-strip-card:hover .fcard-icon { color: #ddd6fe; }
        .fcard-icon svg { width: 100%; height: 100%; }
        .fcard-name {
            font-size: 14px;
            font-weight: 800;
            letter-spacing: -0.01em;
            text-align: center;
            color: #fff;
            line-height: 1.2;
        }
        .fcard-sub {
            font-size: 11px;
            color: rgba(245,245,247,0.6);
            text-align: center;
            line-height: 1.35;
        }
        @media (min-width: 768px) {
            .features-strip-row {
                overflow: visible;
                flex-wrap: wrap;
                justify-content: center;
                margin: 0;
            }
            .features-strip-card {
                width: 178px;
                min-height: 180px;
                padding: 22px 16px;
            }
            .fcard-icon { width: 44px; height: 44px; }
            .fcard-name { font-size: 15px; }
            .fcard-sub { font-size: 12px; }
        }
        /* When the strip-card cards are placed inside a CSS grid, drop the
         * fixed pixel width so each card fills its grid cell. Used for the
         * Interactive Features section after Events. */
        .features-grid-wrap .features-strip-card {
            width: auto;
            min-width: 0;
        }

        /* Host-an-event homepage CTA — single brand-canon banner, clearly tappable */
        .home-host-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 24px 28px;
            background: linear-gradient(135deg, rgba(147,51,234,0.10) 0%, rgba(17,17,17,0.95) 60%);
            border: 1px solid rgba(192,132,252,0.28);
            border-radius: 16px;
            box-shadow: 0 1px 0 rgba(192,132,252,0.08) inset, 0 18px 38px -22px rgba(147,51,234,0.55);
            color: #ffffff;
            text-decoration: none;
            transition: transform 0.2s cubic-bezier(0.2,0.9,0.3,1.2), border-color 0.25s, box-shadow 0.3s, background 0.3s;
            cursor: pointer;
        }
        .home-host-cta:hover,
        .home-host-cta:focus-visible {
            transform: translateY(-2px);
            border-color: rgba(192,132,252,0.6);
            box-shadow: 0 1px 0 rgba(192,132,252,0.12) inset, 0 26px 50px -18px rgba(147,51,234,0.85);
            background: linear-gradient(135deg, rgba(147,51,234,0.18) 0%, rgba(17,17,17,0.95) 60%);
        }
        .home-host-cta__body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .home-host-cta__eyebrow {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.28em;
            color: #c084fc;
            text-transform: uppercase;
        }
        .home-host-cta__title {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: clamp(20px, 3.5vw, 26px);
            font-weight: 900;
            letter-spacing: -0.01em;
            color: #ffffff;
            line-height: 1.15;
            margin: 0;
        }
        .home-host-cta__sub {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 13px;
            font-weight: 400;
            color: #a1a1aa;
            line-height: 1.45;
            margin: 0;
        }
        .home-host-cta__action {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            background: #9333ea;
            border-radius: 999px;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #ffffff;
            white-space: nowrap;
            box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 8px 20px -10px rgba(147,51,234,0.85);
            transition: transform 0.2s, box-shadow 0.3s;
        }
        .home-host-cta:hover .home-host-cta__action,
        .home-host-cta:focus-visible .home-host-cta__action {
            transform: translateX(2px);
            box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 26px -10px rgba(147,51,234,1);
        }
        .home-host-cta__action svg { transition: transform 0.25s; }
        .home-host-cta:hover .home-host-cta__action svg { transform: translateX(3px); }

        @media (max-width: 640px) {
            .home-host-cta {
                flex-direction: column;
                align-items: stretch;
                text-align: left;
                gap: 16px;
                padding: 22px;
            }
            .home-host-cta__action {
                align-self: stretch;
                justify-content: center;
            }
        }

        /* ===== Quick-access bar — signed-in shortcut to interactive features (2026-05-29) ===== */
        #quick-access-bar { display: none; border-top: 1px solid rgba(192,132,252,0.15); background: rgba(10,10,12,0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
        #quick-access-bar.is-on { display: block; animation: qab-in 360ms cubic-bezier(0.22,1,0.36,1); }
        .qab-inner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; max-width: 1200px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
        .qab-inner::-webkit-scrollbar { display: none; }
        .qab-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 44px; padding: 9px 14px; border-radius: 11px; border: 1px solid rgba(192,132,252,0.14); background: rgba(255,255,255,0.025); color: #d1d5db; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
        .qab-chip:hover { color: #fff; border-color: rgba(192,132,252,0.5); background: rgba(147,51,234,0.12); box-shadow: 0 0 0 1px rgba(168,85,247,0.28), 0 8px 22px -6px rgba(147,51,234,0.55); transform: translateY(-1px); }
        .qab-chip:focus-visible { outline: 2px solid #c084fc; outline-offset: 2px; color: #fff; }
        .qab-chip:active { transform: translateY(0); }
        .qab-ic { width: 18px; height: 18px; flex: 0 0 auto; color: #c084fc; }
        .qab-ic svg { width: 100%; height: 100%; display: block; }
        @keyframes qab-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 768px) { .qab-inner { justify-content: flex-start; gap: 7px; padding: 7px 12px; } }
        @media (max-width: 420px) { .qab-chip { padding: 9px 12px; font-size: 12px; } }
        @media (prefers-reduced-motion: reduce) { #quick-access-bar.is-on { animation: none; } .qab-chip { transition: none; } }