/* Mobile-First Styles for Quiz App */

/* Base Mobile Styles */
@media (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
    }
    
    #app {
        padding: 8px;
        max-width: 100%;
    }
    
    .screen {
        padding: 12px;
        margin-top: 8px;
        border-radius: 8px;
    }
    
    /* Typography for mobile */
    h1 {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    
    h2 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    /* Improved buttons for touch */
    .btn {
        padding: 14px 16px;
        font-size: 1rem;
        width: 100%;
        margin-bottom: 10px;
        min-height: 50px; /* Ensure good touch target */
        border-radius: 8px;
    }
    
    /* Host panel specific improvements */
    #room-info {
        display: flex;
        flex-direction: column;
        padding: 12px;
        margin-bottom: 15px;
    }
    
    #room-info p {
        margin-bottom: 6px;
        font-size: 1rem;
    }
    
    /* Make room code more visible */
    #display-room-code {
        font-size: 1.2rem;
        font-weight: bold;
        background-color: rgba(0, 0, 0, 0.05);
        padding: 5px 8px;
        border-radius: 4px;
        display: inline-block;
        margin-top: 2px;
    }
    
    /* Improve container spacing */
    #players-list, 
    #current-question-display, 
    #player-responses, 
    .mini-leaderboard {
        margin-top: 15px;
        padding: 12px;
    }
    
    /* Improve list items */
    #connected-players, 
    #response-list {
        list-style-type: disc;
        padding-left: 25px;
    }
    
    #connected-players li, 
    #response-list li {
        padding: 8px 8px 8px 3px;
        margin-bottom: 4px;
        font-size: 0.95rem;
    }
    
    /* Improve question controls */
    #question-controls {
        flex-direction: column;
        gap: 8px;
    }
    
    /* Real-time leaderboard improvements */
    .mini-leaderboard {
        overflow-x: auto;
    }
    
    #mini-leaderboard-table {
        width: 100%;
        font-size: 0.9rem;
    }
    
    #mini-leaderboard-table th,
    #mini-leaderboard-table td {
        padding: 8px 5px;
        white-space: nowrap;
    }
    
    /* Improve form elements */
    input[type="text"], 
    input[type="file"] {
        padding: 14px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        border-radius: 8px;
    }
    
    /* Improve answer buttons layout */
    #answers-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .answer-btn {
        padding: 16px 10px;
        min-height: 60px;
        font-size: 1rem;
        text-align: left;
    }
}

/* Even smaller screens */
@media (max-width: 480px) {
    .screen {
        padding: 10px;
    }
    
    h1 {
        font-size: 1.4rem;
    }
    
    /* Improve leaderboard on very small screens */
    #leaderboard-table,
    #mini-leaderboard-table {
        font-size: 0.8rem;
    }
    
    #leaderboard-table th, 
    #leaderboard-table td,
    #mini-leaderboard-table th, 
    #mini-leaderboard-table td {
        padding: 6px 3px;
    }
    
    /* Ensure mini-leaderboard is readable */
    .mini-leaderboard h2 {
        font-size: 1.1rem;
    }
    
    /* Improve response list readability */
    #response-list li {
        font-size: 0.9rem;
        padding: 8px 6px;
    }
    
    /* Make correct/wrong answers more visible */
    .correct-answer,
    .wrong-answer {
        padding-left: 10px !important;
    }
    
    /* Improve room info display */
    #room-info p {
        font-size: 0.95rem;
    }
}