/* Responsive Design */
@media (max-width: 768px) {
    .header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .header-left,
    .header-right {
        justify-content: center;
    }

    .header h1 {
        font-size: 1.5rem;
    }

    body {
        padding-top: 120px;
    }

    .main-content {
        padding: 0 1rem 2rem;
    }

    .room-card {
        padding: 1.5rem;
    }

    .room-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .players-grid {
        grid-template-columns: 1fr;
    }

    .player-card {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        min-height: auto;
    }

    .mii-avatar {
        align-self: center;
    }

    .player-scores {
        justify-content: center;
        gap: 2rem;
    }

    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select {
        width: 100%;
    }

    .connection-modal-content {
        padding: 1rem;
        margin: 1rem;
    }
}

@media (max-width: 480px) {
    .header h1 {
        font-size: 1.3rem;
    }

    .refresh-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    .room-card {
        padding: 1rem;
    }

    .info-item {
        padding: 0.75rem 1rem;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}