/* Mobile First - Base styles are for mobile */

/* Small phones */
@media (max-width: 374px) {
    :root {
        --text-4xl: 2rem;      /* 32px */
        --text-3xl: 1.5rem;    /* 24px */
        --text-2xl: 1.25rem;   /* 20px */
        --text-5xl: 2.5rem;    /* 40px */
    }

    .game-title {
        font-size: var(--text-4xl);
    }

    .placeholder-illustration {
        font-size: 80px;
    }

    .btn-large {
        padding: var(--spacing-md) var(--spacing-lg);
        min-height: 48px;
        font-size: var(--text-base);
    }
}

/* Landscape phones */
@media (max-height: 600px) and (orientation: landscape) {
    .screen-content {
        padding: var(--spacing-md);
    }

    .splash-container,
    .loading-container {
        min-height: auto;
        padding: var(--spacing-lg) 0;
    }

    .splash-illustration,
    .loading-spinner {
        max-width: 80px;
        max-height: 80px;
    }

    .placeholder-illustration {
        font-size: 60px;
    }

    .game-title {
        font-size: var(--text-3xl);
    }

    .results-container {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
}

/* Tablets and larger */
@media (min-width: 540px) {
    .answer-options.grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .screen-content {
        padding: var(--spacing-2xl);
    }
}

/* Larger tablets and small desktops */
@media (min-width: 768px) {
    :root {
        --text-5xl: 4rem;      /* 64px */
        --text-4xl: 3rem;      /* 48px */
        --text-3xl: 2.25rem;   /* 36px */
    }

    .answer-options.grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .screen-content {
        padding: var(--spacing-3xl);
    }

    .career-tags {
        max-width: 600px;
        margin: 0 auto;
    }

    .results-actions {
        flex-direction: row;
        max-width: 500px;
        margin: 0 auto;
    }

    .results-actions button {
        flex: 1;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .screen-content {
        max-width: 600px;
    }

    .answer-options.grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 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;
    }

    .screen.slide-in-right,
    .screen.slide-out-left,
    .screen.slide-in-left,
    .screen.slide-out-right {
        animation: fadeIn 0.2s ease;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --primary-blue: #0052CC;
        --primary-green: #00C853;
        --text-primary: #000000;
        --text-secondary: #333333;
    }

    .answer-card {
        border-width: 3px;
    }

    .answer-card.selected {
        border-width: 4px;
    }
}

/* Dark mode (if needed in future) */
@media (prefers-color-scheme: dark) {
    /*
    Uncomment if dark mode is needed:

    :root {
        --background: #1A1A1A;
        --surface: #2A2A2A;
        --text-primary: #FFFFFF;
        --text-secondary: #AAAAAA;
    }
    */
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets for touch devices */
    .answer-card {
        min-height: 80px;
    }

    .btn-primary,
    .btn-secondary {
        min-height: 52px;
    }

    /* Remove hover effects on touch devices */
    .answer-card:hover {
        transform: none;
        box-shadow: none;
    }

    .btn-primary:hover {
        transform: none;
    }
}

/* Mouse/trackpad users */
@media (hover: hover) and (pointer: fine) {
    /* Enable smooth hover effects */
    .answer-card,
    .btn-primary,
    .btn-secondary {
        transition: all var(--transition-base);
    }
}

/* Print styles */
@media print {
    .sound-toggle,
    .question-nav,
    .results-actions {
        display: none;
    }

    .screen {
        position: static;
        height: auto;
    }

    body {
        background: white;
        color: black;
    }
}

/* Very large screens */
@media (min-width: 1440px) {
    .screen-content {
        max-width: 700px;
    }

    .splash-illustration {
        max-width: 400px;
    }
}