:root {
    --bg-color: #f5f7ff; /* indigo-50 */
    --card-bg: #ffffff;
    --text-primary: #1e1b4b; /* indigo-950 */
    --text-secondary: #4338ca; /* indigo-700 */
    --accent-color: #6366f1; /* indigo-500 */
    --border-color: #e0e7ff; /* indigo-100 */
}

body.theme-night {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #818cf8;
    --accent-color: #4f46e5;
    --border-color: #334155;
}

body.theme-party {
    --bg-color: #2d004d;
    --card-bg: #4a007d;
    --text-primary: #ffffff;
    --text-secondary: #ff00ff;
    --accent-color: #00ffff;
    --border-color: #ff00ff;
}

body.theme-nature {
    --bg-color: #f0fdf4; /* green-50 */
    --card-bg: #ffffff;
    --text-primary: #064e3b;
    --text-secondary: #059669;
    --accent-color: #10b981;
    --border-color: #d1fae5;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.4s ease-out forwards; }
.animate-pop { animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.animate-shake { animation: shake 0.2s ease-in-out infinite; }

.score-pop { animation: pop 0.2s ease-out; }

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-white { background-color: var(--card-bg) !important; }
.text-indigo-600 { color: var(--text-secondary) !important; }
.border-indigo-100 { border-color: var(--border-color) !important; }

.player-card {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.player-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Punishment Cards */
.punishment-yellow {
    background-color: #fffbeb !important; /* amber-50 */
    border-color: #fbbf24 !important; /* amber-400 */
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
}

.punishment-red {
    background-color: #fef2f2 !important; /* red-50 */
    border-color: #f87171 !important; /* red-400 */
    box-shadow: 0 0 15px rgba(248, 113, 113, 0.3);
}

.punishment-red .avatar {
    border-color: #fecaca !important; /* red-200 */
    filter: grayscale(0.5);
}

/* Score animation */
.score-pop {
    animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .player-card {
        padding: 1rem;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
    opacity: 0.5;
}