/* Design System: The Electric Stage */
      :root {
        /* Core Colors */
        --background: #131319;
        --surface: #1f1f26;
        --surface-low: #1b1b21;
        --surface-high: #2a2930;
        --surface-highest: #35343b;
        --primary: #c5c0ff;
        --primary-container: #8c84eb;
        --secondary: #68dbae;
        --secondary-container: #26a37a;
        --tertiary: #ffb95d;
        --tertiary-container: #c98100;
        --on-surface: #e4e1ea;
        --on-surface-variant: #c8c4d4;
        --outline: #928f9d;
        --outline-variant: #474552;
        --error: #ffb4ab;
        --twitch: #9146FF;
        
        /* Screenshot Design Colors */
        --accent-blue: #3b82f6;
        --accent-cyan: #06b6d4;
        --accent-purple: #8b5cf6;
        --accent-pink: #ec4899;
        --text-primary: #ffffff;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        --success: #10b981;
        
        /* Effects */
        --glass-bg: rgba(31, 31, 38, 0.8);
        --glass-blur: blur(12px);
        --glow-primary: 0 0 20px rgba(197, 192, 255, 0.3);
        --glow-secondary: 0 0 20px rgba(104, 219, 174, 0.3);
        --glow-tertiary: 0 0 20px rgba(255, 185, 93, 0.3);
        
        /* Spacing */
        --radius-sm: 0.5rem;
        --radius-md: 0.75rem;
        --radius-lg: 1rem;
        --radius-xl: 1.5rem;
        --radius-full: 9999px;
      }
      
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      html {
        overflow-x: hidden;
        scrollbar-width: none;
      }
      html::-webkit-scrollbar { display: none; }

      body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        background: linear-gradient(135deg, #0a0a0f 0%, #1a0a1f 50%, #0f1a1f 100%);
        color: var(--on-surface);
        min-height: 100vh;
        line-height: 1.6;
        position: relative;
        overflow-x: hidden;
        scrollbar-width: none;
      }
      body::-webkit-scrollbar { display: none; }
      
      @keyframes moveGrid {
        0% { transform: translateY(0); }
        100% { transform: translateY(50px); }
      }

      body::before {
        content: '';
        position: fixed;
        top: -50px;
        left: 0;
        width: 100%;
        height: calc(100% + 50px);
        pointer-events: none;
        z-index: -1;
        opacity: 0.4;
        background-image:
          linear-gradient(rgba(224, 32, 255, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(224, 32, 255, 0.1) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: moveGrid 3s linear infinite;
      }
      
      /* Typography */
      .font-display {
        font-family: 'Exo 2', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
      }
      
      .font-headline {
        font-family: 'Exo 2', sans-serif;
        font-weight: 600;
      }
      
      /* Layout */
      .app-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px 20px 140px 20px;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      /* Header */
      .app-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
        border-bottom: 2px solid var(--outline-variant);
      }
      
      .logo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-family: 'Exo 2', sans-serif;
        font-weight: 700;
        font-size: 1.25rem;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: 0.1rem;
      }
      
      .logo-icon {
        width: 2rem;
        height: 2rem;
        background: linear-gradient(135deg, var(--primary), var(--primary-container));
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--glow-primary);
      }
      
      /* Glass Cards */
      .glass-card {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
      }
      
      .glass-card:hover {
        border-color: rgba(197, 192, 255, 0.2);
        box-shadow: var(--glow-primary);
      }
      
      .card-accent {
        border-top: 2px solid var(--tertiary);
      }
      
      /* Buttons */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 1.5rem;
        border: none;
        border-radius: var(--radius-md);
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
      }
      
      .btn-primary {
        background: linear-gradient(135deg, var(--primary), var(--primary-container));
        color: #2a1c84;
      }
      
      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(197, 192, 255, 0.4);
      }
      
      .btn-secondary {
        background: linear-gradient(135deg, var(--secondary), var(--secondary-container));
        color: #003827;
      }
      
      .btn-secondary:hover {
        transform: translateY(-2px);
        box-shadow: var(--glow-secondary);
      }
      
      .btn-twitch {
        background: linear-gradient(135deg, var(--twitch), #7d3ce7);
        color: white;
      }
      
      .btn-twitch:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(145, 70, 255, 0.4);
      }
      
      .btn-ghost {
        background: transparent;
        color: var(--on-surface-variant);
        border: 1px solid var(--outline-variant);
      }
      
      .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--outline);
      }
      
      .btn-full {
        width: 100%;
      }
      
      .btn-lg {
        padding: 1rem 2rem;
        font-size: 1rem;
      }
      
      /* User Profile */
      .user-profile {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: var(--surface-low);
        border-radius: var(--radius-lg);
        margin-bottom: 1rem;
      }
      
      .user-avatar {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: var(--radius-full);
        border: 2px solid var(--primary);
        box-shadow: var(--glow-primary);
        object-fit: cover;
      }
      
      .user-info {
        flex: 1;
      }
      
      .user-name {
        font-family: 'Exo 2', sans-serif;
        font-weight: 700;
        font-size: 1.125rem;
        color: var(--on-surface);
      }
      
      .user-handle {
        font-size: 0.875rem;
        color: var(--on-surface-variant);
      }
      
      /* Status Badges */
      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: var(--radius-full);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
      }
      
      .status-badge::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: var(--radius-full);
      }
      
      .status-connected {
        background: rgba(104, 219, 174, 0.15);
        color: var(--secondary);
      }
      
      .status-connected::before {
        background: var(--secondary);
        box-shadow: 0 0 10px var(--secondary);
        animation: pulse 2s infinite;
      }
      
      .status-disconnected {
        background: rgba(255, 180, 171, 0.15);
        color: var(--error);
      }
      
      .status-disconnected::before {
        background: var(--error);
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }
      
      /* Phase Indicator */
      .phase-indicator {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        background: var(--surface-low);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
      }
      
      .phase-dot {
        width: 10px;
        height: 10px;
        border-radius: var(--radius-full);
      }
      
      .phase-dot.idle { background: var(--outline); }
      .phase-dot.lobby { background: var(--primary); animation: pulse 2s infinite; }
      .phase-dot.live { background: var(--secondary); animation: pulse 1s infinite; }
      .phase-dot.closed { background: var(--tertiary); }
      .phase-dot.reveal { background: var(--tertiary-container); }
      .phase-dot.ended { background: var(--error); }
      
      /* Stats Grid */
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
      }
      
      .stat-item {
        text-align: center;
        padding: 1rem;
        background: var(--surface-low);
        border-radius: var(--radius-md);
      }
      
      .stat-value {
        font-family: 'Exo 2', sans-serif;
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--primary);
        text-shadow: 0 0 10px rgba(197, 192, 255, 0.3);
      }
      
      .stat-label {
        font-size: 0.75rem;
        color: var(--on-surface-variant);
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        margin-top: 0.25rem;
      }
      
      /* Question Card */
      .question-container {
        background: linear-gradient(135deg, var(--surface), var(--surface-high));
        border-radius: var(--radius-xl);
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
      }
      
      .question-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--tertiary), var(--secondary));
      }
      
      .question-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--outline-variant);
      }
      
      .question-number {
        font-family: 'Exo 2', sans-serif;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--on-surface-variant);
        text-transform: uppercase;
        letter-spacing: 0.1rem;
      }
      
      .question-points {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(255, 185, 93, 0.15);
        color: var(--tertiary);
        border-radius: var(--radius-full);
        font-size: 0.875rem;
        font-weight: 700;
      }
      
      .question-text {
        font-family: 'Exo 2', sans-serif;
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 1.5rem;
        color: var(--on-surface);
      }
      
      /* Timer */
      .timer-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
      }
      
      .timer-value {
        font-family: 'Exo 2', sans-serif;
        font-size: 3rem;
        font-weight: 900;
        color: var(--primary);
        text-shadow: 0 0 30px rgba(197, 192, 255, 0.5);
        transition: color 0.3s ease;
      }
      
      .timer-value.critical {
        color: var(--tertiary);
        text-shadow: 0 0 30px rgba(255, 185, 93, 0.5);
        animation: timerPulse 1s infinite;
      }
      
      @keyframes timerPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
      }
      
      .timer-bar {
        flex: 1;
        height: 8px;
        background: var(--surface-highest);
        border-radius: var(--radius-full);
        overflow: hidden;
        position: relative;
      }
      
      .timer-progress {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--tertiary));
        border-radius: var(--radius-full);
        transition: width 1s linear;
        box-shadow: 0 0 10px rgba(197, 192, 255, 0.3);
      }
      
      /* Answer Area */
      .answer-area {
        margin-top: 1.5rem;
      }
      
      .answer-input {
        width: 100%;
        padding: 1rem 1.25rem;
        background: var(--surface-low);
        border: 2px solid var(--outline-variant);
        border-radius: var(--radius-md);
        color: var(--on-surface);
        font-size: 1rem;
        font-family: 'Inter', sans-serif;
        transition: all 0.3s ease;
      }
      
      .answer-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(197, 192, 255, 0.1);
      }
      
      .answer-input::placeholder {
        color: var(--on-surface-variant);
      }
      
      /* Choice Buttons */
      .choice-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
      
      .choice-btn {
        padding: 1.25rem;
        background: var(--surface-low);
        border: 2px solid var(--outline-variant);
        border-radius: var(--radius-md);
        color: var(--on-surface);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
      }
      
      .choice-btn:hover {
        border-color: var(--primary);
        background: rgba(197, 192, 255, 0.1);
        transform: translateY(-2px);
      }
      
      .choice-btn.selected {
        border-color: var(--primary);
        background: rgba(197, 192, 255, 0.2);
        box-shadow: var(--glow-primary);
      }
      
      /* Results */
      .result-card {
        text-align: center;
        padding: 2rem;
      }
      
      .result-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
      }
      
      .result-correct {
        color: var(--secondary);
        text-shadow: 0 0 30px rgba(104, 219, 174, 0.5);
      }
      
      .result-wrong {
        color: var(--error);
      }
      
      .result-points {
        font-family: 'Exo 2', sans-serif;
        font-size: 2rem;
        font-weight: 800;
        margin-top: 1rem;
      }
      
      .result-points.positive {
        color: var(--secondary);
      }
      
      .result-points.negative {
        color: var(--error);
      }
      
      /* Stats Section */
      .stats-section {
        margin-top: auto;
      }
      
      .stats-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
      }
      
      .stats-title {
        font-family: 'Exo 2', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        color: var(--on-surface-variant);
      }
      
      .stat-row {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--outline-variant);
      }
      
      .stat-row:last-child {
        border-bottom: none;
      }
      
      .stat-name {
        color: var(--on-surface-variant);
      }
      
      .stat-value-highlight {
        font-family: 'Exo 2', sans-serif;
        font-weight: 700;
        color: var(--primary);
      }
      
      /* Utility */
      .hidden {
        display: none !important;
      }
      
      .text-glow {
        text-shadow: 0 0 10px rgba(197, 192, 255, 0.5);
      }
      
      /* Scrollbar */
      ::-webkit-scrollbar {
        width: 8px;
      }
      
      ::-webkit-scrollbar-track {
        background: var(--surface-low);
      }
      
      ::-webkit-scrollbar-thumb {
        background: var(--outline-variant);
        border-radius: var(--radius-full);
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background: var(--outline);
      }
      
      /* Animations */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .animate-fade-in {
        animation: fadeIn 0.5s ease forwards;
      }

      /* === FREEK GLITCH STYLES === */
      @keyframes glitch {
        0% { transform: translate(0); }
        20% { transform: translate(-2px, 2px); }
        40% { transform: translate(-2px, -2px); }
        60% { transform: translate(2px, 2px); }
        80% { transform: translate(2px, -2px); }
        100% { transform: translate(0); }
      }

      @keyframes glitchText {
        0%, 100% { text-shadow: 2px 0 #E020FF, -2px 0 #00F0FF; }
        25% { text-shadow: -2px 0 #E020FF, 2px 0 #00F0FF; }
        50% { text-shadow: 2px 0 #FF00A0, -2px 0 #E020FF; }
        75% { text-shadow: -2px 0 #00F0FF, 2px 0 #FF00A0; }
      }

      @keyframes pulseGlow {
        0%, 100% { box-shadow: 0 0 20px rgba(224, 32, 255, 0.5), 0 0 40px rgba(0, 240, 255, 0.3); }
        50% { box-shadow: 0 0 30px rgba(224, 32, 255, 0.8), 0 0 60px rgba(0, 240, 255, 0.5); }
      }

      @keyframes scanline {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(100vh); }
      }

      @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
      }

      .freek-title {
        font-family: 'Exo 2', monospace;
        font-weight: 900;
        font-size: 1.2rem;
        color: #E020FF;
        text-transform: uppercase;
        letter-spacing: 0.2rem;
        animation: glitchText 2s infinite;
        position: relative;
      }

      .freek-title::before,
      .freek-title::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .freek-title::before {
        animation: glitch 3s infinite linear alternate-reverse;
        color: #E020FF;
        z-index: -1;
      }

      .freek-title::after {
        animation: glitch 2s infinite linear alternate-reverse;
        color: #00F0FF;
        z-index: -2;
      }

      .freek-card {
        background: linear-gradient(135deg, rgba(19, 19, 25, 0.95), rgba(26, 26, 36, 0.98));
        border: 1px solid rgba(224, 32, 255, 0.3);
        border-radius: 24px;
        box-shadow: 0 0 30px rgba(224, 32, 255, 0.2), inset 0 0 60px rgba(0, 240, 255, 0.05);
        position: relative;
        overflow: hidden;
      }

      .freek-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #E020FF, #00F0FF, #FF00A0, transparent);
        animation: scanline 4s linear infinite;
      }

      .freek-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid #E020FF;
        box-shadow: 0 0 20px #E020FF, inset 0 0 20px rgba(224, 32, 255, 0.3);
        animation: pulseGlow 3s ease-in-out infinite;
        position: relative;
        overflow: hidden;
      }

      .freek-avatar::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(224, 32, 255, 0.1) 2px,
          rgba(224, 32, 255, 0.1) 4px
        );
        animation: scanline 10s linear infinite;
        pointer-events: none;
      }

      .freek-btn {
        background: linear-gradient(135deg, #E020FF, #9B00B8);
        border: none;
        border-radius: 16px;
        padding: 16px 32px;
        color: white;
        font-family: 'Exo 2', sans-serif;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.15rem;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(224, 32, 255, 0.4);
      }

      .freek-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
      }

      .freek-btn:hover::before {
        left: 100%;
      }

      .freek-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(224, 32, 255, 0.6), 0 0 40px rgba(0, 240, 255, 0.3);
      }

      .freek-btn:active {
        transform: translateY(-1px);
      }

      .freek-input {
        background: rgba(0, 0, 0, 0.5);
        border: 2px solid rgba(224, 32, 255, 0.4);
        border-radius: 16px;
        padding: 16px 20px;
        color: white;
        font-size: 16px;
        width: 100%;
        transition: all 0.3s ease;
        font-family: 'Titillium Web', sans-serif;
        font-weight: 600;
      }

      .freek-input:focus {
        outline: none;
        border-color: #E020FF;
        box-shadow: 0 0 20px rgba(224, 32, 255, 0.5), inset 0 0 20px rgba(224, 32, 255, 0.1);
      }

      .freek-glow {
        animation: pulseGlow 4s ease-in-out infinite;
      }

      .freek-text {
        color: #E020FF;
        text-shadow: 0 0 10px rgba(224, 32, 255, 0.8);
      }

      .freek-cyan {
        color: #00F0FF;
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
      }

      .scanlines {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1000;
        background: repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.1) 1px,
          transparent 1px,
          transparent 2px
        );
      }
    

        .freek-choice-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 25px rgba(224, 32, 255, 0.4);
          border-color: #E020FF !important;
        }
        .freek-choice-btn:active {
          transform: translateY(-1px);
        }
        .freek-choice-btn.selected {
          background: linear-gradient(135deg, rgba(224, 32, 255, 0.4), rgba(0, 240, 255, 0.2)) !important;
          border-color: #E020FF !important;
          box-shadow: 0 0 30px rgba(224, 32, 255, 0.6), inset 0 0 20px rgba(224, 32, 255, 0.1) !important;
          animation: pulseGlow 2s infinite;
        }

        /* Reveal Animation */
        @keyframes revealPulse {
          0% { opacity: 0; transform: scale(0.8); }
          50% { opacity: 1; transform: scale(1.05); }
          100% { opacity: 1; transform: scale(1); }
        }

        /* Waiting Overlay Animations */
        @keyframes pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.1); opacity: 0.8; }
        }

        @keyframes bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }

        /* Achievement Styles */
        .achievement-item {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 12px;
          padding: 16px;
          text-align: center;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
        }

        .achievement-item.unlocked {
          background: linear-gradient(135deg, rgba(224, 32, 255, 0.15), rgba(0, 240, 255, 0.05));
          border-color: rgba(224, 32, 255, 0.4);
          box-shadow: 0 0 20px rgba(224, 32, 255, 0.2);
        }

        .achievement-item.unlocked::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
          animation: achievementShine 3s infinite;
        }

        @keyframes achievementShine {
          0% { left: -100%; }
          50%, 100% { left: 100%; }
        }

        .achievement-icon {
          font-size: 32px;
          margin-bottom: 8px;
          filter: grayscale(100%);
          opacity: 0.4;
          transition: all 0.3s ease;
        }

        .achievement-item.unlocked .achievement-icon {
          filter: grayscale(0%);
          opacity: 1;
          animation: iconPulse 2s infinite;
        }

        @keyframes iconPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.15); }
        }

        .achievement-name {
          font-family: 'Exo 2', sans-serif;
          font-size: 11px;
          font-weight: 700;
          color: rgba(255, 255, 255, 0.4);
          margin-bottom: 2px;
        }

        .achievement-item.unlocked .achievement-name {
          color: #ffffff;
        }

        .achievement-desc {
          font-size: 10px;
          color: rgba(255, 255, 255, 0.3);
          line-height: 1.2;
        }

        @keyframes gradientShift {
          0% { background-position: 0% 50%; }
          100% { background-position: 300% 50%; }
        }
      

      @keyframes timerUrgentPulse {
        0%, 100% { background: linear-gradient(90deg, #E020FF, #FF00A0); box-shadow: 0 0 10px rgba(255, 0, 160, 0.5); }
        50% { background: linear-gradient(90deg, #FF00A0, #ff0000); box-shadow: 0 0 30px rgba(255, 0, 0, 0.8); }
      }
      
      .timer-progress.urgent {
        animation: timerUrgentPulse 0.5s infinite !important;
      }
      
      /* Speed Bonus Animation */
      @keyframes speedBonusPop {
        0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
        20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; text-shadow: 0 0 40px #E020FF; }
        80% { transform: translate(-50%, -100%) scale(1); opacity: 1; text-shadow: 0 0 20px #E020FF; }
        100% { transform: translate(-50%, -150%) scale(0.8); opacity: 0; }
      }
      
      .speed-bonus-popup {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Exo 2', sans-serif;
        font-weight: 900;
        font-size: 32px;
        color: white;
        text-shadow: 0 0 20px #E020FF;
        z-index: 1000;
        pointer-events: none;
        animation: speedBonusPop 2s ease-out forwards;
      }
      
      /* Combo Multiplier UI */
      .combo-multiplier {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, rgba(224, 32, 255, 0.3), rgba(0, 240, 255, 0.1));
        border: 1px solid #E020FF;
        border-radius: 12px;
        padding: 4px 12px;
        font-family: 'Exo 2', sans-serif;
        font-weight: 800;
        font-size: 14px;
        color: white;
        box-shadow: 0 0 15px rgba(224, 32, 255, 0.4);
        animation: pulseGlow 2s infinite;
      }

/* MASSIVE PREMIUM OVERHAUL */
@keyframes premiumGradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body {
  background: #090014 !important; /* Deep dark purple base */
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(224, 32, 255, 0.08), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(0, 240, 255, 0.08), transparent 25%) !important;
  color: #fff;
}

/* Beautiful animated synthwave grid overlay */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(rgba(224, 32, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 32, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
  z-index: -1;
  pointer-events: none;
  animation: gridMove 20s linear infinite;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

@keyframes gridMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(40px); }
}

/* Enhanced Glassmorphism for all cards */
.app-container > div, .freek-card, #userSection > div, #inviteSection, #questionCard > div {
  background: rgba(25, 25, 35, 0.45) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
  border-radius: 24px !important;
  transition: all 0.3s ease !important;
}

/* Hover effects for glass cards */
.app-container > div:hover, .freek-card:hover, #userSection > div:hover {
  border: 1px solid rgba(224, 32, 255, 0.3) !important;
  box-shadow: 0 12px 40px 0 rgba(224, 32, 255, 0.15) !important;
}

/* Fix text and stats visibility inside glass cards */
.stat-item, [id^="stat"] {
  background: transparent !important;
  border: none !important;
}

/* More prominent glowing buttons */
.freek-btn, #enterGameBtn, .btn-primary {
  background: linear-gradient(135deg, #E020FF, #00F0FF) !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
  box-shadow: 0 0 20px rgba(224, 32, 255, 0.4), inset 0 0 10px rgba(255,255,255,0.2) !important;
  border: none !important;
}

.freek-btn:hover, #enterGameBtn:hover, .btn-primary:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.6), inset 0 0 15px rgba(255,255,255,0.4) !important;
}

/* Profile Avatar glow */
#userAvatar {
  box-shadow: 0 0 30px rgba(224, 32, 255, 0.5) !important;
  border: 3px solid rgba(255, 255, 255, 0.2) !important;
}

/* Remove old ugly scanlines to make it look clean and modern */
.scanlines {
  display: none !important;
}

      /* Referral Milestone Styles */
      .referral-milestone-container {
        margin-top: 1rem;
        padding: 1rem;
        background: rgba(224, 32, 255, 0.05);
        border: 1px solid rgba(224, 32, 255, 0.1);
        border-radius: var(--radius-md);
      }

      .milestone-text {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .milestone-text strong {
        color: var(--accent-purple);
      }

      .milestone-bonus {
        font-weight: 700;
        color: var(--secondary);
        font-size: 0.9rem;
      }

      .milestone-progress-bg {
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-full);
        overflow: hidden;
      }

      .milestone-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
        border-radius: var(--radius-full);
        transition: width 1s ease-out;
        box-shadow: 0 0 10px rgba(224, 32, 255, 0.5);
      }


/* ── Desktop / tablet breakpoint ──────────────────────────────────────────── */
@media (min-width: 640px) {
  .app-container {
    max-width: 520px !important;
    padding: 24px 28px 120px !important;
  }
}

/* PC wrapper divs — invisible, don't affect mobile layout */
.pc-sidebar { display: contents; }
.pc-main    { display: contents; }
.pc-clan-widget    { display: none; }
.pc-mini-lb-widget { display: none; }
.pc-only           { display: none; }

/* ── Avatar frame system (play page) ──────────────────────────────── */
.lb-avatar-frame {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  isolation: isolate; /* force stacking context — fixes z-index for ::after gap + img */
}
.lb-avatar-frame img {
  width: 34px; height: 34px;
  border-radius: 50%; object-fit: cover;
  position: relative; z-index: 2;
  border: 2px solid rgba(255,255,255,0.12);
}

/* Shared ring pseudo-elements */
.lb-avatar-frame.effect-premium::before,
.lb-avatar-frame.effect-fire::before,
.lb-avatar-frame.effect-ice::before,
.lb-avatar-frame.effect-gold::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%; z-index: 0;
}
.lb-avatar-frame.effect-premium::after,
.lb-avatar-frame.effect-fire::after,
.lb-avatar-frame.effect-ice::after,
.lb-avatar-frame.effect-gold::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: #131319; /* matches play bg */
  z-index: 1;
}

/* FREEK+ Premium ring */
.lb-avatar-frame.effect-premium::before {
  background: conic-gradient(#E020FF, #00F0FF, #FFD700, #FF00A0, #E020FF);
  animation: lbAvatarSpin 2.5s linear infinite;
  filter: drop-shadow(0 0 4px rgba(224,32,255,0.7));
}
/* Fire ring */
.lb-avatar-frame.effect-fire::before {
  background: conic-gradient(#FF2200, #FF8800, #FFD700, #FF2200);
  animation: lbAvatarSpin 0.7s linear infinite;
  filter: blur(0.5px) drop-shadow(0 0 5px rgba(255,80,0,0.8));
}
/* Ice ring */
.lb-avatar-frame.effect-ice::before {
  background: conic-gradient(#00C8FF, #CCF4FF, #0088CC, #00F0FF, #00C8FF);
  animation: lbAvatarSpin 4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(0,200,255,0.7));
}
/* Gold ring */
.lb-avatar-frame.effect-gold::before {
  background: conic-gradient(#FFD700, #FFF0A0, #B8860B, #FFE566, #FFD700);
  animation: lbAvatarSpin 3s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.8));
}
/* Glow: pulsing aura, no ring */
.lb-avatar-frame.effect-glow::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(0,240,255,0.8) 0%, transparent 70%);
  animation: lbGlowAura 1.6s ease-in-out infinite;
  filter: blur(4px);
}
.lb-avatar-frame.effect-glow img {
  border-color: #00F0FF;
  box-shadow: 0 0 12px rgba(0,240,255,0.7);
}

@keyframes lbAvatarSpin { to { transform: rotate(360deg); } }
@keyframes lbGlowAura   { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }

/* FREEK+ chip in leaderboard */
.lb-premium-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 5px;
  background: linear-gradient(135deg, #E020FF, #9B00B8);
  color: #fff;
  box-shadow: 0 0 8px rgba(224,32,255,0.45);
  animation: lbChipGlow 2s ease-in-out infinite;
}
@keyframes lbChipGlow {
  0%,100% { box-shadow: 0 0 6px rgba(224,32,255,0.4); }
  50%      { box-shadow: 0 0 14px rgba(224,32,255,0.8); }
}

/* ── Profile header avatar ring (premium) ──────────────────────────── */
.avatar-wrapper { position: relative; }
.profile-avatar-ring {
  position: absolute; inset: -4px;
  border-radius: 50%; z-index: 0;
  background: conic-gradient(#E020FF, #00F0FF, #FFD700, #FF00A0, #E020FF);
  animation: lbAvatarSpin 2.5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(224,32,255,0.8));
}
.profile-avatar-ring::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: #131319;
}
.avatar-img { position: relative; z-index: 1; }

/* ── FREEK+ editor: live preview card ─────────────────────────────── */
.freek-preview-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
  position: relative; overflow: hidden;
  transition: background 0.3s;
}
.freek-preview-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 16px;
  background: inherit;
  z-index: 0;
}
.freek-preview-card > * { position: relative; z-index: 1; }
.freek-preview-name {
  font-family: 'Exo 2', sans-serif;
  font-weight: 800; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.2s;
}
.freek-preview-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  margin-top: 2px; transition: color 0.2s;
}
.freek-preview-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  padding: 1px 7px; border-radius: 5px;
  background: linear-gradient(135deg,#E020FF,#9B00B8);
  color: #fff; margin-top: 3px;
  box-shadow: 0 0 8px rgba(224,32,255,0.4);
  animation: lbChipGlow 2s ease-in-out infinite;
}

/* ── FREEK+ section heading ────────────────────────────────────────── */
.freek-section-label {
  font-family: 'Exo 2', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}

/* ── Effect option cards ───────────────────────────────────────────── */
.effect-selector {
  display: flex; gap: 8px;
  overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px;
}
.effect-selector::-webkit-scrollbar { display: none; }
.effect-option {
  flex-shrink: 0; width: 72px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 10px 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s;
  position: relative;
}
.effect-option:hover:not(.locked) { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.effect-option.active {
  background: rgba(224,32,255,0.1);
  border-color: #E020FF;
  box-shadow: 0 0 12px rgba(224,32,255,0.3);
}
.effect-option.locked { opacity: 0.38; cursor: not-allowed; }
.effect-option-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}
.effect-option.active .effect-option-label { color: #E020FF; }

/* Mini avatar in effect card (inherits lb-avatar-frame animations) */
.effect-mini-avatar {
  position: relative; width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.effect-mini-avatar img {
  width: 28px; height: 28px;
  border-radius: 50%; object-fit: cover;
  position: relative; z-index: 2;
  border: 1.5px solid rgba(255,255,255,0.15);
}
/* Shared ring for effect cards */
.effect-mini-avatar.effect-premium::before,
.effect-mini-avatar.effect-fire::before,
.effect-mini-avatar.effect-ice::before,
.effect-mini-avatar.effect-gold::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; z-index: 0;
}
.effect-mini-avatar.effect-premium::after,
.effect-mini-avatar.effect-fire::after,
.effect-mini-avatar.effect-ice::after,
.effect-mini-avatar.effect-gold::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: #131319; z-index: 1;
}
.effect-mini-avatar.effect-premium::before {
  background: conic-gradient(#E020FF,#00F0FF,#FFD700,#FF00A0,#E020FF);
  animation: lbAvatarSpin 2.5s linear infinite;
  filter: drop-shadow(0 0 3px rgba(224,32,255,0.7));
}
.effect-mini-avatar.effect-fire::before {
  background: conic-gradient(#FF2200,#FF8800,#FFD700,#FF2200);
  animation: lbAvatarSpin 0.7s linear infinite;
}
.effect-mini-avatar.effect-ice::before {
  background: conic-gradient(#00C8FF,#CCF4FF,#0088CC,#00F0FF,#00C8FF);
  animation: lbAvatarSpin 4s linear infinite;
}
.effect-mini-avatar.effect-gold::before {
  background: conic-gradient(#FFD700,#FFF0A0,#B8860B,#FFE566,#FFD700);
  animation: lbAvatarSpin 3s linear infinite;
}
.effect-mini-avatar.effect-glow::before {
  content: ''; position: absolute; inset: -5px;
  border-radius: 50%; z-index: 0;
  background: radial-gradient(circle,rgba(0,240,255,0.8) 0%,transparent 70%);
  animation: lbGlowAura 1.6s ease-in-out infinite;
  filter: blur(3px);
}
.effect-mini-avatar.effect-glow img { border-color: #00F0FF; box-shadow: 0 0 8px rgba(0,240,255,0.6); }

/* ── Name color picker ─────────────────────────────────────────────── */
.color-swatches {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.color-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; border: 2.5px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
  transform: scale(1.1);
}
.color-swatch-custom {
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; border: 2px dashed rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: rgba(255,255,255,0.4);
  transition: border-color 0.2s, color 0.2s;
  position: relative; overflow: hidden;
}
.color-swatch-custom:hover { border-color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.8); }
.color-swatch-custom input[type=color] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ── Custom title input ────────────────────────────────────────────── */
.freek-title-row {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 20px;
}
.freek-title-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff; font-family: 'Exo 2', sans-serif;
  font-size: 14px; font-weight: 600;
  outline: none; transition: border-color 0.2s, background 0.2s;
}
.freek-title-input::placeholder { color: rgba(255,255,255,0.25); }
.freek-title-input:focus {
  border-color: rgba(224,32,255,0.5);
  background: rgba(255,255,255,0.08);
}
.freek-title-count {
  font-size: 10px; color: rgba(255,255,255,0.3);
  font-family: 'Exo 2', sans-serif; font-weight: 700;
  white-space: nowrap;
}

/* ── Locked overlay for non-premium sections ───────────────────────── */
.freek-locked-overlay {
  position: absolute; inset: 0;
  background: rgba(13,13,20,0.75);
  backdrop-filter: blur(3px);
  border-radius: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; z-index: 10;
}
.freek-locked-overlay span { font-size: 28px; }
.freek-locked-overlay p {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-align: center; margin: 0;
}