:root {
    --bg: #ffffff;
    --text: #1a202c;
    --card: #f8f9fa;
    --border: #e2e8f0;
    --accent: #1a73e8;
}

[data-theme="dark"] {
    --bg: #121212;
    --text: #f7fafc;
    --card: #1e1e1e;
    --border: #333333;
    --accent: #63b3ed;
}

body {
    background-color: var(--bg);
    color: var(--text);
    transition: all 0.3s ease;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.game-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

/* The "Wiggle" Error Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.error-shake { animation: shake 0.2s ease-in-out 0s 2; }