/* Puck Desktop Overrides - Maakt alles groter op laptop/desktop schermen */

/* Tablets en groter */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }

    h1 {
        font-size: 2.8em !important;
    }

    /* Main containers - groter op desktop */
    .game-area,
    .game-container,
    .container,
    .quiz-card,
    .learn-card,
    [class*="game"] {
        max-width: 900px !important;
    }

    /* Grotere knoppen */
    button, .btn, [class*="btn"],
    .choice, .choice-btn, .option-btn, .answer-btn,
    .quiz-btn, .quiz-option, .number-btn, .level-btn {
        min-height: 90px !important;
        font-size: 1.2em !important;
    }

    /* Grotere emoji's */
    .animal-item, .pattern-item, .emoji,
    [class*="emoji"], [class*="icon"] {
        font-size: 1.15em;
    }

    /* Score en navigatie */
    .back-btn, .score-display, .top-bar,
    .mode-toggle-btn, .level-badge {
        font-size: 1.2em !important;
    }

    /* Spelberichten */
    .message, .message-box, .question,
    [class*="question"], [class*="message"],
    [class*="prompt"], [class*="feedback"],
    [class*="info"], .scenario-text {
        font-size: 1.3em !important;
    }
}

/* Laptops en desktop */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
    }

    h1 {
        font-size: 3.2em !important;
    }

    /* Nog grotere containers */
    .game-area,
    .game-container,
    .container,
    .quiz-card,
    .learn-card,
    [class*="game"] {
        max-width: 1100px !important;
    }

    /* Grotere knoppen */
    button, .btn, [class*="btn"],
    .choice, .choice-btn, .option-btn, .answer-btn,
    .quiz-btn, .quiz-option, .number-btn {
        min-height: 100px !important;
        font-size: 1.3em !important;
    }

    /* Grotere grids */
    .choices-grid, .options-grid, .answers-grid,
    .quiz-choices, .quiz-options,
    [class*="grid"], [class*="choices"] {
        gap: 20px !important;
    }

    /* Score */
    .back-btn, .score-display, .top-bar {
        font-size: 1.3em !important;
    }

    .message, .message-box, .question,
    [class*="question"], [class*="message"],
    [class*="prompt"], [class*="feedback"] {
        font-size: 1.4em !important;
    }
}

/* Grote desktops */
@media (min-width: 1440px) {
    .game-area,
    .game-container,
    .container,
    .quiz-card,
    .learn-card,
    [class*="game"] {
        max-width: 1300px !important;
    }
}