/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Primary colors - kid-friendly palette */
    --color-primary: #FF6B6B;
    --color-secondary: #4ECDC4;
    --color-accent: #FFE66D;
    --color-success: #95E1D3;
    --color-purple: #DDA0DD;
    
    /* Background colors */
    --color-bg: #FFF9F0;
    --color-card-bg: #FFFFFF;
    
    /* Text colors */
    --color-text: #2D3436;
    --color-text-light: #636E72;
    
    /* Feedback colors */
    --color-correct: #4CAF50;
    --color-incorrect: #F44336;
    
    /* Spacing scale */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 50%;
    
    /* Touch targets - minimum 44px for accessibility */
    --min-touch-target: 44px;
    
    /* Typography */
    --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-xxl: 48px;
    
    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { font-size: 16px; }

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
}

button, .game-card {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--spacing-md);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
    min-height: 60px;
}

.header__back-btn {
    position: absolute;
    left: var(--spacing-sm);
    width: var(--min-touch-target);
    height: var(--min-touch-target);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--font-size-lg);
}

.header__back-btn:active { transform: scale(0.95); }

.header__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--min-touch-target);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.btn--primary { background: var(--color-primary); color: white; }
.btn--secondary { background: var(--color-secondary); color: white; }
.btn--success { background: var(--color-success); color: var(--color-text); }
.btn:active { transform: scale(0.95); }
.btn--large { min-height: 56px; font-size: var(--font-size-lg); }
.btn--full { width: 100%; }

/* Game Cards */
.game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: var(--spacing-lg);
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform var(--transition-fast);
}

.game-card:active { transform: scale(0.95); }
.game-card__icon { font-size: var(--font-size-xxl); margin-bottom: var(--spacing-sm); }
.game-card__name { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }

.game-card--red { border-color: var(--color-primary); }
.game-card--teal { border-color: var(--color-secondary); }
.game-card--yellow { border-color: var(--color-accent); }
.game-card--green { border-color: var(--color-success); }
.game-card--purple { border-color: var(--color-purple); }

/* Game Container (shared) */
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg);
}

.game-card-display {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    text-align: center;
    width: 100%;
    max-width: 400px;
    margin-bottom: var(--spacing-lg);
}

.game-icon { font-size: 64px; margin-bottom: var(--spacing-md); display: block; }
.game-item { font-size: var(--font-size-xxl); font-weight: var(--font-weight-extrabold); color: var(--color-primary); margin: var(--spacing-lg) 0; text-transform: uppercase; }
.game-buttons { display: flex; flex-direction: column; gap: var(--spacing-md); width: 100%; max-width: 300px; }

/* True/False specific */
.tf-buttons { display: flex; gap: var(--spacing-md); }
.tf-btn { flex: 1; min-height: 80px; flex-direction: column; }
.tf-result { margin-top: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-md); }
.tf-result--correct { background: rgba(76, 175, 80, 0.15); border: 2px solid var(--color-correct); }
.tf-result--incorrect { background: rgba(244, 67, 54, 0.15); border: 2px solid var(--color-incorrect); }

/* Would You Rather */
.wyr-option {
    min-height: 100px;
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    border: 3px solid var(--color-accent);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.wyr-option--selected { background: var(--color-accent); transform: scale(1.02); }
.wyr-or { text-align: center; color: var(--color-text-light); font-weight: var(--font-weight-bold); padding: var(--spacing-sm); }

/* Scattergories */
.scatter-letter { font-size: 80px; font-weight: var(--font-weight-extrabold); color: var(--color-secondary); }
.scatter-categories { list-style: none; text-align: left; }
.scatter-categories li { padding: var(--spacing-xs) 0; border-bottom: 1px solid #eee; font-size: var(--font-size-lg); }

/* Word Ladder */
.ladder-words { display: flex; justify-content: space-between; align-items: center; margin: var(--spacing-lg) 0; }
.ladder-word { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); color: var(--color-purple); }
.ladder-arrow { font-size: var(--font-size-lg); color: var(--color-text-light); }
.ladder-steps { display: flex; flex-direction: column; gap: var(--spacing-sm); margin: var(--spacing-lg) 0; }
.ladder-step { padding: var(--spacing-sm); background: #f5f5f5; border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }
.ladder-step--revealed { background: var(--color-success); }

/* Footer */
.footer { text-align: center; padding: var(--spacing-lg); color: var(--color-text-light); font-size: var(--font-size-sm); }

/* Celebration animation */
.celebration {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    animation: celebrate 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 1000;
}

@keyframes celebrate {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* ============================================
   RESPONSIVE DESIGN - Mobile First Approach
   Breakpoints: 320px (base), 480px, 768px, 1024px
   Requirements: 7.1, 7.2, 7.3, 7.4
   ============================================ */

/* ============================================
   Base Mobile Styles (320px and up)
   ============================================ */

/* Ensure minimum readable font sizes */
html {
    font-size: 16px; /* Minimum body text size per Requirement 7.3 */
}

/* Container adjustments for smallest screens */
.container {
    padding: var(--spacing-sm);
    max-width: 100%;
}

/* Game grid - single column on smallest screens */
.game-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

/* Game cards - ensure touch-friendly sizing */
.game-card {
    min-height: 100px;
    padding: var(--spacing-md);
}

.game-card__icon {
    font-size: 36px;
}

.game-card__name {
    font-size: var(--font-size-sm);
}

/* Game container base styles */
.game-container {
    padding: var(--spacing-sm);
}

.game-card-display {
    padding: var(--spacing-md);
    max-width: 100%;
}

.game-icon {
    font-size: 48px;
}

.game-item {
    font-size: var(--font-size-xl);
    word-break: break-word;
}

/* Button adjustments for small screens */
.game-buttons {
    max-width: 100%;
    padding: 0 var(--spacing-sm);
}

/* True/False buttons - stack on very small screens */
.tf-buttons {
    flex-direction: column;
}

.tf-btn {
    min-height: 70px;
}

/* Would You Rather options */
.wyr-option {
    min-height: 80px;
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
}

/* Scattergories letter */
.scatter-letter {
    font-size: 60px;
}

.scatter-categories li {
    font-size: var(--font-size-md);
}

/* Word Ladder */
.ladder-word {
    font-size: var(--font-size-lg);
}

.ladder-words {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
}

.ladder-arrow {
    transform: rotate(90deg);
}

/* ============================================
   Small Mobile (480px and up)
   ============================================ */
@media (min-width: 480px) {
    .container {
        padding: var(--spacing-md);
    }
    
    /* Two column grid for game cards */
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .game-card {
        min-height: 120px;
        padding: var(--spacing-lg);
    }
    
    .game-card__icon {
        font-size: var(--font-size-xxl);
    }
    
    .game-card__name {
        font-size: var(--font-size-md);
    }
    
    /* Game container improvements */
    .game-container {
        padding: var(--spacing-md);
    }
    
    .game-card-display {
        padding: var(--spacing-lg);
        max-width: 400px;
    }
    
    .game-icon {
        font-size: 56px;
    }
    
    .game-item {
        font-size: var(--font-size-xxl);
    }
    
    /* True/False buttons side by side */
    .tf-buttons {
        flex-direction: row;
    }
    
    .tf-btn {
        min-height: 80px;
    }
    
    /* Would You Rather */
    .wyr-option {
        min-height: 100px;
        padding: var(--spacing-lg);
        font-size: var(--font-size-lg);
    }
    
    /* Scattergories */
    .scatter-letter {
        font-size: 80px;
    }
    
    /* Word Ladder */
    .ladder-words {
        flex-direction: row;
        text-align: left;
    }
    
    .ladder-arrow {
        transform: none;
    }
    
    .ladder-word {
        font-size: var(--font-size-xl);
    }
}

/* ============================================
   Tablet Portrait (768px and up)
   ============================================ */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: var(--spacing-lg);
    }
    
    /* Three column grid for game cards */
    .game-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
    
    .game-card {
        min-height: 140px;
    }
    
    .game-card__icon {
        font-size: 56px;
    }
    
    .game-card__name {
        font-size: var(--font-size-lg);
    }
    
    /* Header improvements */
    .header {
        padding: var(--spacing-lg);
        min-height: 70px;
    }
    
    .header__title {
        font-size: var(--font-size-xl);
    }
    
    /* Game container */
    .game-container {
        padding: var(--spacing-lg);
    }
    
    .game-card-display {
        padding: var(--spacing-xl);
        max-width: 500px;
    }
    
    .game-icon {
        font-size: 64px;
    }
    
    /* Buttons */
    .game-buttons {
        max-width: 350px;
    }
    
    .btn--large {
        min-height: 60px;
        font-size: var(--font-size-lg);
    }
    
    /* Would You Rather */
    .wyr-option {
        min-height: 120px;
    }
    
    /* Scattergories */
    .scatter-letter {
        font-size: 100px;
    }
    
    .scatter-categories li {
        font-size: var(--font-size-lg);
    }
}

/* ============================================
   Tablet Landscape / Small Desktop (1024px and up)
   ============================================ */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
        padding: var(--spacing-xl);
    }
    
    /* Game grid with larger cards */
    .game-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    .game-card {
        min-height: 160px;
        padding: var(--spacing-xl);
    }
    
    .game-card__icon {
        font-size: 64px;
    }
    
    /* Game display area */
    .game-card-display {
        max-width: 600px;
        padding: var(--spacing-xl) calc(var(--spacing-xl) * 1.5);
    }
    
    .game-icon {
        font-size: 72px;
    }
    
    .game-item {
        font-size: 56px;
    }
    
    /* Buttons */
    .game-buttons {
        max-width: 400px;
    }
    
    /* Would You Rather - side by side options on large screens */
    .wyr-option {
        min-height: 140px;
    }
    
    /* Scattergories */
    .scatter-letter {
        font-size: 120px;
    }
}

/* ============================================
   Landscape Orientation Support
   Requirements: 7.4
   ============================================ */

/* Landscape adjustments for mobile devices */
@media (orientation: landscape) and (max-height: 500px) {
    /* Reduce vertical spacing in landscape on small screens */
    .header {
        min-height: 50px;
        padding: var(--spacing-sm);
    }
    
    .header__title {
        font-size: var(--font-size-md);
    }
    
    /* Game container - horizontal layout */
    .game-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        padding: var(--spacing-sm);
        min-height: auto;
    }
    
    .game-card-display {
        margin-bottom: var(--spacing-sm);
        padding: var(--spacing-md);
        max-width: 50%;
    }
    
    .game-icon {
        font-size: 40px;
        margin-bottom: var(--spacing-xs);
    }
    
    .game-item {
        font-size: var(--font-size-xl);
        margin: var(--spacing-sm) 0;
    }
    
    .game-buttons {
        max-width: 45%;
        padding: 0;
    }
    
    /* True/False in landscape */
    .tf-buttons {
        flex-direction: row;
    }
    
    .tf-btn {
        min-height: 60px;
    }
    
    .tf-result {
        padding: var(--spacing-sm);
        margin-top: var(--spacing-sm);
    }
    
    /* Would You Rather in landscape */
    .wyr-option {
        min-height: 70px;
        padding: var(--spacing-sm);
        font-size: var(--font-size-md);
    }
    
    .wyr-or {
        padding: var(--spacing-xs);
    }
    
    /* Scattergories in landscape */
    .scatter-letter {
        font-size: 50px;
    }
    
    .scatter-categories li {
        padding: var(--spacing-xs) 0;
        font-size: var(--font-size-md);
    }
    
    /* Word Ladder in landscape */
    .ladder-words {
        margin: var(--spacing-sm) 0;
    }
    
    .ladder-steps {
        margin: var(--spacing-sm) 0;
    }
    
    .ladder-step {
        padding: var(--spacing-xs);
    }
    
    /* Footer */
    .footer {
        padding: var(--spacing-sm);
    }
    
    /* Celebration animation smaller in landscape */
    .celebration {
        font-size: 50px;
    }
}

/* Landscape on tablets */
@media (orientation: landscape) and (min-height: 501px) and (max-width: 1024px) {
    .game-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .game-card {
        min-height: 100px;
    }
    
    .game-container {
        padding: var(--spacing-md);
    }
    
    .game-card-display {
        max-width: 500px;
    }
}

/* ============================================
   Touch-Friendly Enhancements
   Requirements: 7.2
   ============================================ */

/* Ensure all interactive elements meet minimum touch target size */
.btn,
.game-card,
.header__back-btn,
.tf-btn,
.wyr-option {
    min-width: var(--min-touch-target);
    min-height: var(--min-touch-target);
}

/* Add adequate spacing between touch targets */
.game-grid {
    gap: var(--spacing-md);
}

.game-buttons {
    gap: var(--spacing-md);
}

.tf-buttons {
    gap: var(--spacing-md);
}

/* Prevent accidental taps with padding */
.btn {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* ============================================
   Safe Area Insets (for notched devices)
   ============================================ */
@supports (padding: env(safe-area-inset-top)) {
    .header {
        padding-top: max(var(--spacing-md), env(safe-area-inset-top));
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
    }
    
    .container {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    }
    
    .footer {
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }
}

/* ============================================
   High Contrast / Accessibility
   ============================================ */
@media (prefers-contrast: high) {
    .game-card {
        border-width: 4px;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
    
    .wyr-option {
        border-width: 4px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .celebration,
    .confetti-container {
        display: none;
    }
}

/* ============================================
   Visual Polish and Animations
   Requirements: 8.1, 8.2, 8.3, 8.5
   ============================================ */

/* Enhanced Button Tap Feedback - Scale and Color Change */
.btn:active {
    transform: scale(0.92);
    filter: brightness(0.9);
}

.btn--primary:active {
    background-color: #e55a5a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn--secondary:active {
    background-color: #3aada6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn--success:active {
    background-color: #6dcfbe;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Game Card Enhanced Tap Feedback */
.game-card:active {
    transform: scale(0.92);
    box-shadow: var(--shadow-sm);
    filter: brightness(0.95);
}

/* Header Back Button Enhanced Feedback */
.header__back-btn:active {
    transform: scale(0.88);
    background-color: rgba(0, 0, 0, 0.15);
}

/* True/False Button Enhanced Feedback */
.tf-btn:active {
    transform: scale(0.92);
    filter: brightness(0.9);
}

/* Would You Rather Option Enhanced Feedback */
.wyr-option:active {
    transform: scale(0.96);
    filter: brightness(0.95);
}

/* ============================================
   Screen Transitions - Smooth Navigation
   ============================================ */

/* Main app container for screen transitions */
#app {
    animation: fadeIn 0.3s ease-out;
}

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

/* Game container entrance animation */
.game-container,
.ispy-container,
.truefalse-container,
.wouldyourather-container,
.scattergories-container,
.wordladder-container {
    animation: slideUp 0.35s ease-out;
}

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

/* Game card display entrance animation */
.game-card-display,
.ispy-card,
.truefalse-card,
.wouldyourather-card,
.scattergories-card,
.wordladder-card {
    animation: scaleIn 0.4s ease-out;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Home screen game grid staggered animation */
.game-grid .game-card {
    animation: popIn 0.4s ease-out backwards;
}

.game-grid .game-card:nth-child(1) { animation-delay: 0.05s; }
.game-grid .game-card:nth-child(2) { animation-delay: 0.1s; }
.game-grid .game-card:nth-child(3) { animation-delay: 0.15s; }
.game-grid .game-card:nth-child(4) { animation-delay: 0.2s; }
.game-grid .game-card:nth-child(5) { animation-delay: 0.25s; }

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   Celebration Animations for Correct Answers
   ============================================ */

/* Confetti container for True/False correct answers */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

/* Individual confetti piece */
.confetti {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    animation: confettiFall 2.5s ease-out forwards;
}

/* Confetti colors - kid-friendly palette */
.confetti:nth-child(6n+1) { background-color: var(--color-primary); }
.confetti:nth-child(6n+2) { background-color: var(--color-secondary); }
.confetti:nth-child(6n+3) { background-color: var(--color-accent); }
.confetti:nth-child(6n+4) { background-color: var(--color-success); }
.confetti:nth-child(6n+5) { background-color: var(--color-purple); }
.confetti:nth-child(6n) { background-color: #87CEEB; }

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* Emoji burst celebration */
.emoji-burst {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    pointer-events: none;
    z-index: 1001;
    animation: emojiBurst 0.8s ease-out forwards;
}

@keyframes emojiBurst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Star burst animation for correct answers */
.star-burst {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1000;
}

.star-burst .star {
    position: absolute;
    font-size: 24px;
    animation: starExplode 0.8s ease-out forwards;
}

.star-burst .star:nth-child(1) { animation-delay: 0s; }
.star-burst .star:nth-child(2) { animation-delay: 0.05s; }
.star-burst .star:nth-child(3) { animation-delay: 0.1s; }
.star-burst .star:nth-child(4) { animation-delay: 0.15s; }
.star-burst .star:nth-child(5) { animation-delay: 0.2s; }
.star-burst .star:nth-child(6) { animation-delay: 0.25s; }
.star-burst .star:nth-child(7) { animation-delay: 0.3s; }
.star-burst .star:nth-child(8) { animation-delay: 0.35s; }

@keyframes starExplode {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--star-x, 50px), var(--star-y, -50px)) scale(1.2);
    }
}

/* Result card bounce animation for feedback */
.truefalse-result,
.tf-result {
    animation: resultBounce 0.5s ease-out;
}

@keyframes resultBounce {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Correct answer glow effect */
.truefalse-result--correct,
.tf-result--correct {
    animation: resultBounce 0.5s ease-out, correctGlow 1.5s ease-in-out infinite;
}

@keyframes correctGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.5), 0 0 30px rgba(76, 175, 80, 0.3);
    }
}

/* ============================================
   Interactive Element Hover Effects
   ============================================ */

/* Game card hover lift effect */
.game-card {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-fast);
}

.game-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* Button hover glow */
.btn {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), filter var(--transition-fast);
}

.btn:hover {
    box-shadow: var(--shadow-md);
}

/* Would You Rather option hover */
.wyr-option {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}

/* ============================================
   Pulse Animation for Interactive Elements
   ============================================ */

/* Subtle pulse for call-to-action buttons */
.btn--primary.btn--pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
    }
}

/* ============================================
   Loading/Transition States
   ============================================ */

/* Shimmer effect for loading states */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-card-bg) 0%,
        #f0f0f0 50%,
        var(--color-card-bg) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   Ripple Effect for Touch Feedback
   ============================================ */

.ripple-container {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}