/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .game-title {
        font-size: 3.5rem;
        letter-spacing: 2px;
    }
    
    .game-subtitle {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }
    
    .feature-highlights {
        gap: 1rem;
    }
    
    .feature {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    
    .stats-preview {
        gap: 2rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .btn-primary, .btn-secondary, .btn-tertiary {
        min-width: 220px;
        padding: 0.9rem 1.8rem;
        font-size: 1rem;
    }
    
    .form-container {
        padding: 2rem;
        margin: 1rem;
    }
    
    .game-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .player-info {
        justify-content: center;
        text-align: center;
    }
    
    .game-stats {
        gap: 1rem;
    }
    
    .stat {
        padding: 0.4rem 0.8rem;
    }
    
    .health-container {
        min-width: 150px;
    }
    
    .question-container {
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .question-text {
        font-size: 1.8rem;
        min-height: 60px;
    }
    
    .answers-grid {
        grid-template-columns: 1fr;
    }
    
    .answer-btn {
        padding: 1rem 1.5rem;
        font-size: 1.2rem;
    }
    
    .powerup-grid {
        grid-template-columns: 1fr;
    }
    
    .powerup-btn {
        min-height: 70px;
    }
    
    .completion-stats,
    .final-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .game-over-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .completion-container, .game-over-container {
        padding: 2rem;
        margin: 1rem;
    }
    
    .completion-container h2, .game-over-container h2 {
        font-size: 1.8rem;
    }
    
    .loading-animation {
        gap: 1rem;
    }
    
    .math-symbol {
        font-size: 2rem;
    }
    
    .loading-bar {
        width: 250px;
    }
    
    .timer-circle {
        width: 50px;
        height: 50px;
    }
    
    .timer-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .game-title {
        font-size: 2.8rem;
    }
    
    .question-text {
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 1rem;
    }
    
    .stat-card-value {
        font-size: 1.5rem;
    }
    
    .completion-container h2, .game-over-container h2 {
        font-size: 1.5rem;
    }
    
    .feature-highlights {
        flex-direction: column;
        align-items: center;
    }
    
    .feature {
        width: 200px;
    }
    
    .stats-preview {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .game-stats {
        justify-content: center;
    }
    
    .question-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .question-meta {
        justify-content: center;
    }
    
    .roast-message {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        max-width: 90%;
    }
    
    .combo-message {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
        max-width: 90%;
    }
    
    .settings-panel {
        width: 250px;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .game-title {
        font-size: 4rem;
    }
    
    .question-text {
        font-size: 2rem;
    }
    
    .answers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .powerup-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large Desktop Styles */
@media (min-width: 1440px) {
    .game-content {
        max-width: 1000px;
    }
    
    .question-text {
        font-size: 2.5rem;
    }
    
    .answer-btn {
        padding: 1.5rem 2.5rem;
        font-size: 1.5rem;
    }
    
    .powerup-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Orientation Specific Styles */
@media (max-height: 700px) and (orientation: landscape) {
    .splash-content {
        transform: scale(0.9);
    }
    
    .game-header {
        padding: 0.5rem 1rem;
    }
    
    .question-container {
        padding: 1.5rem;
    }
    
    .question-text {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    
    .answers-grid {
        gap: 0.8rem;
    }
    
    .answer-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1.1rem;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .game-title {
        text-shadow: 0 0 40px rgba(255, 0, 60, 0.6);
    }
    
    .feature {
        backdrop-filter: blur(20px);
    }
}

/* Print Styles */
@media print {
    .screen:not(.active) {
        display: none !important;
    }
    
    #game-screen {
        display: flex !important;
    }
    
    .btn-primary, .btn-secondary, .btn-tertiary,
    .powerup-btn, .settings-panel {
        display: none !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode support (for system preference) */
@media (prefers-color-scheme: dark) {
    :root {
        --dark-bg: #0a0a16;
        --darker-bg: #050510;
    }
}

/* Focus styles for accessibility */
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Selection styles */
::selection {
    background: var(--primary-color);
    color: white;
}

::-moz-selection {
    background: var(--primary-color);
    color: white;
}