/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
    /* Hide the full stats panel on mobile by default */
    .stats-panel {
        display: none;
        top: 80px;
        right: 15px;
        left: 15px;
        width: auto;
        min-width: auto;
        max-width: none;
        padding: 20px;
        font-size: 0.85em;
        border-radius: 12px;
    }
    
    /* Show the toggle button on mobile */
    .stats-toggle {
        display: flex;
    }
    
    /* When stats panel is shown on mobile */
    .stats-panel.mobile-visible {
        display: block;
        animation: slideDown 0.3s ease;
    }
    
    /* Adjust main content to not overlap with toggle */
    #content {
        margin: 80px 20px 20px 20px;
        padding: 25px;
    }
    
    h1 {
        font-size: 2em;
        margin-bottom: 25px;
    }
    
    .question {
        font-size: 1.05em;
        line-height: 1.7;
        margin-bottom: 30px;
    }
    
    /* Better button sizing for mobile */
    button {
        padding: 16px 24px;
        font-size: 1em;
        min-width: 150px;
        margin: 8px 0;
    }
    
    /* Improve choice button layout on mobile */
    .choices {
        gap: 15px;
        margin-top: 30px;
    }
    
    .choices button {
        width: 100%;
        max-width: 100%;
        min-width: auto;
        text-align: center;
    }
    
    /* Adjust save code section for mobile */
    .save-code {
        margin-top: 30px;
        padding: 14px;
        font-size: 0.8em;
    }
    
    /* Better back button on mobile */
    .back-link button {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }
    
    /* Improve copyright positioning */
    .copyright {
        position: relative;
        margin-top: 40px;
        text-align: center;
        padding: 20px;
        font-size: 0.75em;
    }
    
    /* Load progress button adjustments */
    .load-progress-btn {
        top: 15px;
        left: 15px;
    }
    
    .load-progress-btn button {
        width: 45px;
        height: 45px;
        font-size: 1.1em;
    }
    
    /* Load modal adjustments */
    .load-modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .load-modal-header {
        padding: 15px 20px;
    }
    
    .load-modal-header h3 {
        font-size: 1.1em;
    }
    
    .load-modal-body {
        padding: 20px;
    }
    
    .load-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .load-btn, .cancel-btn {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Save options adjustments */
    .save-options {
        flex-direction: column;
    }
    
    .quick-save-btn, .share-btn {
        width: 100% !important;
    }
    
    .save-hint {
        display: none;
    }
    
    /* Theme toggle adjustments */
    .theme-toggle {
        bottom: 80px;
        left: 15px;
        padding: 6px 12px;
        font-size: 0.9em;
    }
    
    /* Adjust copyright position to make room */
    .copyright {
        padding-bottom: 120px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .stats-toggle {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 1.1em;
    }
    
    .stats-panel.mobile-visible {
        top: 70px;
        right: 10px;
        left: 10px;
        padding: 15px;
        font-size: 0.8em;
    }
    
    #content {
        margin: 70px 15px 15px 15px;
        padding: 20px;
    }
    
    h1 {
        font-size: 1.8em;
        letter-spacing: 1px;
    }
    
    .question {
        font-size: 1em;
        line-height: 1.6;
    }
    
    button {
        padding: 14px 20px;
        font-size: 0.95em;
        min-width: 120px;
    }
    
    .choices {
        gap: 12px;
    }
    
    .save-code {
        padding: 12px;
        font-size: 0.75em;
    }
    
    .theme-toggle {
        bottom: 70px;
        left: 10px;
    }
}