/* VocabArena — Scoped CSS for StudentAssist Integration */

.va-theme {
    /* Background Palette */
    --va-bg-primary: #060a13;
    --va-bg-secondary: #0d1321;
    --va-bg-card: #141b2d;
    --va-bg-card-hover: #1a2340;
    --va-bg-elevated: #1e293b;
    --va-bg-input: #0f172a;

    /* Accent Colors */
    --va-accent-primary: #6366f1;
    --va-accent-primary-hover: #818cf8;
    --va-accent-secondary: #8b5cf6;
    --va-accent-success: #10b981;
    --va-accent-success-dim: rgba(16, 185, 129, 0.15);
    --va-accent-warning: #f59e0b;
    --va-accent-warning-dim: rgba(245, 158, 11, 0.15);
    --va-accent-danger: #ef4444;
    --va-accent-danger-dim: rgba(239, 68, 68, 0.15);
    --va-accent-info: #06b6d4;

    /* Gradients */
    --va-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    --va-gradient-success: linear-gradient(135deg, #10b981, #34d399);
    --va-gradient-danger: linear-gradient(135deg, #ef4444, #f87171);
    --va-gradient-warm: linear-gradient(135deg, #f59e0b, #fbbf24);

    /* Text */
    --va-text-primary: #f1f5f9;
    --va-text-secondary: #94a3b8;
    --va-text-muted: #64748b;
    --va-text-accent: #a5b4fc;

    /* Glass */
    --va-glass-bg: rgba(255, 255, 255, 0.03);
    --va-glass-border: rgba(255, 255, 255, 0.08);
    --va-glass-border-hover: rgba(255, 255, 255, 0.15);
    --va-glass-blur: blur(20px);

    /* Shadows */
    --va-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --va-shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --va-shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
    --va-shadow-glow: 0 0 30px rgba(99, 102, 241, 0.2);

    /* Typography */
    --va-font-primary: 'Inter', sans-serif;
    --va-font-mono: 'JetBrains Mono', monospace;

    /* Spacing & Radius */
    --va-space-sm: 8px;
    --va-space-md: 16px;
    --va-space-lg: 24px;
    --va-space-xl: 32px;
    --va-space-2xl: 48px;
    --va-radius-md: 12px;
    --va-radius-lg: 16px;
    --va-radius-xl: 24px;
    --va-radius-full: 9999px;

    /* Transitions */
    --va-transition-fast: 150ms ease;
    --va-transition-normal: 300ms ease;
}

.va-theme .container { max-width: 1200px; margin: 0 auto; width: 100%; position: relative; }
.va-theme .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--va-space-lg); }
.va-theme .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--va-space-lg); }
.va-theme .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--va-space-lg); }

.va-theme h1 { font-size: 2rem; font-weight: 800; background: var(--va-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; }
.va-theme h2 { font-size: 1.5rem; font-weight: 700; color: var(--va-text-primary); margin-bottom: 1rem; }
.va-theme h3 { font-size: 1.1rem; font-weight: 600; color: var(--va-text-primary); margin-bottom: 0.8rem; }
.va-theme p { color: var(--va-text-secondary); margin-bottom: 1rem; }

/* Scoped Component Styles */
.va-theme .glass-card {
    background: var(--va-glass-bg);
    backdrop-filter: var(--va-glass-blur);
    -webkit-backdrop-filter: var(--va-glass-blur);
    border: 1px solid var(--va-glass-border);
    border-radius: var(--va-radius-lg);
    padding: var(--va-space-lg);
    transition: all var(--va-transition-normal);
}
.va-theme .glass-card:hover {
    border-color: var(--va-glass-border-hover);
    box-shadow: var(--va-shadow-glow);
    transform: translateY(-2px);
}

.va-theme .card {
    background: var(--va-bg-card);
    border: 1px solid var(--va-glass-border);
    border-radius: var(--va-radius-lg);
    padding: var(--va-space-lg);
    transition: all var(--va-transition-normal);
}

.va-theme .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--va-space-sm);
    padding: 12px 24px; border: none; border-radius: var(--va-radius-md);
    font-family: var(--va-font-primary); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all var(--va-transition-normal);
    text-decoration: none; position: relative; overflow: hidden;
}
.va-theme .btn-primary { background: var(--va-gradient-primary); color: white; }
.va-theme .btn-success { background: var(--va-gradient-success); color: white; }
.va-theme .btn-danger { background: var(--va-gradient-danger); color: white; }
.va-theme .btn-ghost { background: transparent; color: var(--va-text-secondary); border: 1px solid var(--va-glass-border); }

.va-theme .input-field, .va-theme .select-field {
    width: 100%; padding: 12px 16px; background: var(--va-bg-input);
    border: 1px solid var(--va-glass-border); border-radius: var(--va-radius-md);
    color: var(--va-text-primary); font-family: var(--va-font-primary);
    outline: none; transition: all var(--va-transition-normal);
}

.va-theme .badge {
    padding: 4px 10px; border-radius: var(--va-radius-full);
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
}
.va-theme .badge-primary { background: rgba(99,102,241,0.15); color: var(--va-accent-primary); }

/* Fix the nav-links conflict */
.va-theme .nav-links {
    display: flex; align-items: center; gap: var(--va-space-lg);
}

/* Test Specific */
.va-theme .test-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--va-space-md); margin-top: var(--va-space-lg); }
.va-theme .test-option {
    background: var(--va-bg-input); border: 1px solid var(--va-glass-border);
    padding: 20px; border-radius: var(--va-radius-md); cursor: pointer;
    transition: all var(--va-transition-normal); text-align: left; color: var(--va-text-primary);
}
.va-theme .test-option:hover { border-color: var(--va-accent-primary); background: var(--va-bg-card); }
.va-theme .test-option.correct { background: var(--va-accent-success-dim); border-color: var(--va-accent-success); }
.va-theme .test-option.wrong { background: var(--va-accent-danger-dim); border-color: var(--va-accent-danger); }

/* Flashflow Specific */
.va-theme .flashcard-container { perspective: 1000px; width: 100%; max-width: 500px; margin: 40px auto; }
.va-theme .flashcard {
    height: 320px; position: relative; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d; cursor: pointer;
}
.va-theme .flashcard.flipped { transform: rotateY(180deg); }
.va-theme .flashcard-face {
    position: absolute; inset: 0; backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--va-bg-card); border: 1px solid var(--va-glass-border);
    border-radius: var(--va-radius-xl); padding: var(--va-space-xl);
}
.va-theme .flashcard-back { transform: rotateY(180deg); }

/* Progress Ring */
.va-theme .progress-ring { position: relative; width: 120px; height: 120px; }
.va-theme .progress-ring circle {
    fill: none; stroke-width: 8; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.5s ease;
}

/* Avatar Styling */
.va-theme .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--va-gradient-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
    box-shadow: var(--va-shadow-sm);
}
.va-theme .avatar.lg { width: 60px; height: 60px; font-size: 1.2rem; }
.va-theme .avatar.sm { width: 32px; height: 32px; font-size: 0.75rem; }

/* Leaderboard Specific */
.va-theme .leaderboard-list { display: flex; flex-direction: column; gap: var(--va-space-sm); }
.va-theme .leaderboard-item {
    display: flex; align-items: center; gap: var(--va-space-md);
    padding: var(--va-space-md); background: var(--va-bg-input);
    border: 1px solid var(--va-glass-border); border-radius: var(--va-radius-md);
    transition: all var(--va-transition-normal);
}
.va-theme .leaderboard-item:hover { transform: scale(1.02); border-color: var(--va-accent-primary); background: var(--va-bg-card); }
.va-theme .leaderboard-rank {
    width: 32px; font-weight: 800; font-family: var(--va-font-mono);
    color: var(--va-text-muted); font-size: 0.9rem;
}
.va-theme .leaderboard-rank.top { font-size: 1.5rem; }
.va-theme .lb-info { flex: 1; min-width: 0; }
.va-theme .lb-name { font-weight: 700; color: var(--va-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-theme .lb-track { font-size: 0.75rem; color: var(--va-text-muted); }
.va-theme .lb-xp { font-weight: 800; color: var(--va-accent-primary); font-family: var(--va-font-mono); }

/* History & Friends */
.va-theme .history-item, .va-theme .friend-item {
    display: flex; align-items: center; gap: var(--va-space-md);
    padding: var(--va-space-sm) var(--va-space-md); border-bottom: 1px solid var(--va-glass-border);
}
.va-theme .history-result { width: 60px; font-weight: 700; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; text-align: center; }
.va-theme .history-result.win { background: var(--va-accent-success-dim); color: var(--va-accent-success); }
.va-theme .history-result.loss { background: var(--va-accent-danger-dim); color: var(--va-accent-danger); }
.va-theme .history-details { flex: 1; }
.va-theme .opponent-name { font-weight: 600; font-size: 0.9rem; }
.va-theme .match-score { font-size: 0.8rem; color: var(--va-text-muted); }

.va-theme .friend-info { flex: 1; }
.va-theme .friend-name { font-weight: 600; font-size: 0.9rem; }
.va-theme .friend-level { font-size: 0.75rem; color: var(--va-text-muted); }
.va-theme .status-dot { width: 8px; height: 8px; border-radius: 50%; }
.va-theme .status-dot.online { background: var(--va-accent-success); box-shadow: 0 0 8px var(--va-accent-success); }
.va-theme .status-dot.offline { background: var(--va-text-muted); }

/* Animations */
@keyframes va-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.va-theme .animate-fade { animation: va-fadeIn 0.5s ease-out forwards; }