/* Responsive design - Mobile-first approach */

/* Tablet and smaller desktop */
@media (max-width: 1200px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 20px;
    }

    .left-panel, .right-panel {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    .live-arena {
        order: 1;
    }

    .left-panel {
        order: 2;
    }

    .right-panel {
        order: 3;
    }
}

/* Smaller tablet */
@media (max-width: 900px) {
    .container {
        padding: 20px 16px 40px;
    }

    .left-panel, .right-panel {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .live-arena {
        padding: 30px;
        min-height: 600px;
    }

    .arena {
        width: 550px;
        height: 550px;
        border-width: 3px;
        box-sizing: content-box;
    }

    .glass-card {
        padding: 20px;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    :root {
        --border-radius: 16px;
    }

    .container {
        padding: 16px 12px 36px;
    }

    .header {
        padding: 16px;
        border-radius: 16px;
    }

    .header h1 {
        font-size: 2em;
        letter-spacing: 1px;
    }

    .header p {
        font-size: 0.95em;
    }

    .live-arena {
        padding: 24px;
        min-height: auto;
    }

    .arena {
        width: min(450px, calc(100vw - 60px));
        height: min(450px, calc(100vw - 60px));
        border-radius: 0;
        box-sizing: content-box;
    }

    /* Thinner borders on mobile for better avatar visibility */
    .fighter {
        border-width: 1px;
    }

    /* Winner modal fit within arena bounds */
    .winner-content {
        padding: clamp(16px, 4vw, 20px);
        gap: 12px;
        overflow-y: auto;
    }

    .winner-content::before {
        font-size: 48px;
    }

    .winner-display {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .winner-display div {
        text-align: center;
    }

    .controls {
        flex-direction: column;
        gap: 12px;
    }

    .mobile-arena-controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
        width: 100%;
    }

    .mobile-arena-controls .btn {
        width: 100%;
    }

    .desktop-demo-btn {
        display: none;
    }

    .desktop-load-btn {
        display: none;
    }

    .btn {
        width: 100%;
        padding: 16px 24px;
        font-size: 15px;
    }

    .theme-controls, .speed-controls {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .theme-controls .theme-btn,
    .speed-controls .speed-btn {
        width: 100%;
        padding: 14px;
    }

    .glass-card {
        padding: 18px;
    }

    .pre-battle-logo {
        font-size: 36px;
        letter-spacing: 2px;
    }

    .pre-battle-subtitle {
        font-size: 14px;
    }

    .pre-battle-count {
        font-size: 20px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    :root {
        --border-radius: 14px;
    }

    .container {
        padding: 14px 12px 32px;
    }

    .header h1 {
        font-size: 1.75em;
    }

    .header p {
        font-size: 0.9em;
    }

    .search-section input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 14px;
    }

    .live-arena {
        padding: 20px;
        min-height: auto;
    }

    .arena {
        width: min(360px, calc(100vw - 64px));
        height: min(360px, calc(100vw - 64px));
        border-radius: 0;
        border-width: 3px;
        box-sizing: content-box;
    }

    .btn {
        padding: 14px 20px;
        font-size: 14px;
    }

    .glass-card {
        padding: 16px;
    }
}

/* Large desktop screens */
@media (min-width: 1920px) {
    .container {
        gap: 36px;
        padding: 40px 48px;
    }

    .header {
        padding: 48px 40px;
    }

    .header h1 {
        font-size: 3.4em;
    }

    .header p {
        font-size: 1.15em;
    }

    .live-arena {
        padding: clamp(48px, 5vw, 72px);
    }

    .btn {
        padding: 16px 28px;
        font-size: 16px;
    }

    .theme-btn, .speed-btn {
        padding: 12px 22px;
        margin: 6px;
        font-size: 14px;
    }
}