/**
 * Game Container Styles for AIML Games Framework
 *
 * Generic game container styles that work across all game types.
 * These styles provide the structure for game containers, headers,
 * timers, instructions, start sections, controls, content areas,
 * button areas, and score displays.
 *
 * @package AIML_Games_Framework
 */

/* ============================================
 * Main Game Container
 * ============================================ */

.aiml-games-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    margin: 20px auto;
    max-width: 750px;
    padding: 0 15px;
    /* transform: scale(0.85); REMOVED: breaks Firefox SVG rendering */
    /* transform-origin: top center; */
    position: relative;
    min-height: 600px;
}

/* ============================================
 * Game Header
 * ============================================ */

.aiml-games-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.aiml-games-title {
    margin: 0 0 10px 0;
    font-size: 1.5em;
    color: #333;
}

.aiml-games-set-progress {
    font-size: 0.85em;
    color: #666;
    font-weight: normal;
}

.aiml-games-timer {
    font-size: 1.2em;
    font-weight: bold;
    color: #d9534f;
    margin-left: auto;
}

/* ============================================
 * Game Instructions
 * ============================================ */

.aiml-games-instructions {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
    font-style: italic;
}

/* ============================================
 * Game Start Section
 * ============================================ */

.aiml-games-start-section {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    margin: 20px 0;
}

/* Start button uses framework .aiml-games-btn styles */

/* ============================================
 * Game Controls
 * ============================================ */

.aiml-games-controls {
    margin-bottom: 15px;
}

.aiml-games-toggle {
    margin-right: 15px;
}

.aiml-games-toggle input[type="checkbox"] {
    margin-right: 5px;
}

.aiml-games-toggle label {
    cursor: pointer;
    user-select: none;
}

/* ============================================
 * Game Content Area
 * ============================================ */

.aiml-games-content-area {
    /* Game-specific content goes here */
}

/* ============================================
 * Button Area
 * ============================================ */

.aiml-games-button-area {
    /* Buttons use framework .aiml-games-btn styles */
}

/* ============================================
 * Score Display
 * ============================================ */

.aiml-games-score-display {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
    font-size: 1.1em;
    box-sizing: border-box;
    /*border-left: 4px solid #007bff;*/
}

/* ============================================
 * Mode Specific Styles
 * ============================================ */

.aiml-games-relaxed-mode {
    background-color: #d1ecf1;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* ============================================
 * Responsive Design
 * ============================================ */

@media (max-width: 768px) {
    .aiml-games-container {
        margin: 10px auto;
        padding: 0 10px;
    }

    .aiml-games-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .aiml-games-timer {
        margin-left: 0;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .aiml-games-title {
        font-size: 1.3em;
    }

    .aiml-games-timer {
        font-size: 1.1em;
    }
}

/* ============================================
 * Backward Compatibility - Legacy Aliases
 * These provide support for the old .ai-fun-games-* class names
 * during the transition period. Will be removed in a future version.
 * ============================================ */

.ai-fun-games-container {
    /* @deprecated Use .aiml-games-container instead */
}

.ai-fun-games-header {
    /* @deprecated Use .aiml-games-header instead */
}

.ai-fun-games-title {
    /* @deprecated Use .aiml-games-title instead */
}

.ai-fun-games-set-progress {
    /* @deprecated Use .aiml-games-set-progress instead */
}

.ai-fun-games-timer {
    /* @deprecated Use .aiml-games-timer instead */
}

.ai-fun-games-instructions {
    /* @deprecated Use .aiml-games-instructions instead */
}

.ai-fun-games-start-section {
    /* @deprecated Use .aiml-games-start-section instead */
}

.ai-fun-games-start-btn {
    /* @deprecated Use .aiml-games-btn instead */
}

.ai-fun-games-controls {
    /* @deprecated Use .aiml-games-controls instead */
}

.ai-fun-games-toggle {
    /* @deprecated Use .aiml-games-toggle instead */
}

.ai-fun-games-content-area {
    /* @deprecated Use .aiml-games-content-area instead */
}

.ai-fun-games-button-area {
    /* @deprecated Use .aiml-games-button-area instead */
}

.ai-fun-games-score-display {
    /* @deprecated Use .aiml-games-score-display instead */
}

.ai-fun-games-relaxed-mode {
    /* @deprecated Use .aiml-games-relaxed-mode instead */
}