/*
 * VERZUZ Karaoke Battle - Mobile Responsive Styles
 * Makes ALL pages mobile-friendly on phones and tablets
 */

/* ========================================
   TABLET (iPad, etc) - 768px to 1024px
   ======================================== */
@media (max-width: 1024px) {
    body {
        padding: 15px;
    }

    .container {
        max-width: 100%;
        padding: 0 10px;
    }
}

/* ========================================
   MOBILE PHONES - Under 768px
   ======================================== */
@media (max-width: 768px) {
    /* Reset body padding for phones */
    body {
        padding: 10px;
        font-size: 14px;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    /* Header adjustments */
    .header {
        margin-bottom: 20px;
        padding: 10px 0;
    }

    .logo {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }

    .subtitle {
        font-size: 0.85rem !important;
        letter-spacing: 1px !important;
    }

    /* SVG Logo - smaller on mobile */
    .verzuz-logo-svg {
        width: clamp(120px, 30vw, 220px) !important;
        margin: 10px auto 15px !important;
    }

    /* Section cards - better mobile spacing */
    .section {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
        border-radius: 12px !important;
        border-width: 2px !important;
    }

    .section-title {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
    }

    /* ========================================
       FORMS & INPUTS - Touch-Friendly
       ======================================== */

    /* All text inputs */
    input[type="text"],
    input[type="search"],
    textarea {
        width: 100% !important;
        padding: 16px 14px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    label {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
    }

    .form-group {
        margin-bottom: 16px !important;
    }

    /* ========================================
       BUTTONS - Touch-Friendly (44px minimum)
       ======================================== */

    .button,
    button,
    .btn,
    .submit-button,
    .join-button,
    .primary-button {
        width: 100% !important;
        min-height: 48px !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        margin-top: 10px !important;
        letter-spacing: 1px !important;
    }

    .add-button {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
    }

    /* Score buttons - easier to tap */
    .score-button {
        font-size: 1.5rem !important;
        padding: 10px !important;
        min-height: 60px !important;
    }

    .score-label {
        font-size: 0.65rem !important;
    }

    .score-buttons {
        gap: 8px !important;
    }

    /* ========================================
       SEARCH RESULTS - Mobile Layout
       ======================================== */

    .search-results {
        max-height: 400px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
    }

    .search-result {
        display: flex !important;
        flex-direction: row !important;
        padding: 12px !important;
        gap: 12px !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
    }

    .search-result img {
        width: 90px !important;
        height: 68px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
    }

    .result-info {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .result-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        /* Truncate long titles on mobile */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .result-duration {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }

    /* ========================================
       QUEUE ITEMS - Mobile Layout
       ======================================== */

    .queue-item {
        padding: 14px 12px !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
        flex-wrap: wrap !important;
    }

    .queue-info {
        flex: 1 !important;
        min-width: 150px !important;
    }

    .queue-title {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
    }

    .queue-singer {
        font-size: 0.8rem !important;
    }

    .status-badge {
        padding: 4px 12px !important;
        font-size: 0.7rem !important;
        margin-top: 8px !important;
    }

    .avg-score {
        font-size: 1.5rem !important;
        padding: 8px 16px !important;
    }

    /* ========================================
       COUNTDOWN TIMER - Mobile Position
       ======================================== */

    .countdown-timer {
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 12px 24px !important;
        font-size: 1.8rem !important;
        border-radius: 30px !important;
        z-index: 9999 !important;
    }

    .countdown-label {
        font-size: 0.6rem !important;
        margin-bottom: 2px !important;
    }

    /* ========================================
       NOW PLAYING - Mobile Layout
       ======================================== */

    .now-playing {
        padding: 25px 15px !important;
        margin-bottom: 20px !important;
        border-radius: 12px !important;
    }

    .now-playing-title {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    .now-playing-singer {
        font-size: 1rem !important;
    }

    /* ========================================
       EMPTY STATES
       ======================================== */

    .empty-state {
        padding: 30px 15px !important;
        font-size: 0.9rem !important;
    }

    .loading {
        padding: 20px 10px !important;
        font-size: 0.9rem !important;
    }

    /* ========================================
       NAVIGATION - Mobile Friendly
       ======================================== */

    nav, .nav {
        padding: 10px !important;
        flex-wrap: wrap !important;
    }

    nav a {
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        margin: 4px !important;
    }

    /* ========================================
       LEADERBOARD - Mobile Layout
       ======================================== */

    .leaderboard-item,
    .bracket-match {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    /* ========================================
       ADMIN PAGE - Mobile Controls
       ======================================== */

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

    .admin-controls button {
        width: 100% !important;
    }
}

/* ========================================
   SMALL PHONES - Under 375px
   ======================================== */
@media (max-width: 375px) {
    body {
        padding: 8px;
    }

    .section {
        padding: 15px 12px !important;
        margin-bottom: 15px !important;
    }

    /* Stack search results vertically on very small phones */
    .search-result {
        flex-direction: column !important;
        align-items: center !important;
    }

    .search-result img {
        width: 100% !important;
        height: auto !important;
        max-width: 250px !important;
    }

    .result-info {
        width: 100% !important;
        text-align: center !important;
    }

    .add-button {
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* Smaller score buttons on tiny phones */
    .score-button {
        font-size: 1.2rem !important;
        min-height: 50px !important;
    }

    .countdown-timer {
        font-size: 1.4rem !important;
        padding: 10px 20px !important;
    }
}

/* ========================================
   LANDSCAPE MODE ON PHONES
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .header {
        margin-bottom: 10px !important;
    }

    .section {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    .search-results {
        max-height: 200px !important;
    }

    .now-playing {
        padding: 15px !important;
    }

    .verzuz-logo-svg {
        width: clamp(100px, 20vw, 150px) !important;
        margin: 5px auto 10px !important;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Ensure all interactive elements are touch-friendly */
    button,
    .button,
    .add-button,
    .score-button,
    .search-result,
    a {
        min-height: 44px !important;
        min-width: 44px !important;
        -webkit-tap-highlight-color: rgba(217, 70, 166, 0.2);
        touch-action: manipulation; /* Prevents double-tap zoom */
    }

    /* Remove hover effects on touch devices */
    .button:hover,
    button:hover,
    .search-result:hover {
        transform: none !important;
    }

    /* Active/tap feedback instead */
    .button:active,
    button:active {
        transform: scale(0.97) !important;
        opacity: 0.9 !important;
    }

    .search-result:active {
        background: rgba(255, 255, 255, 0.15) !important;
    }
}

/* ========================================
   PREVENT iOS ZOOM ON INPUT FOCUS
   ======================================== */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input {
        font-size: 16px !important; /* iOS won't zoom if >= 16px */
    }
}

/* ========================================
   HIGH DPI DISPLAYS (Retina, etc)
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows on retina */
    .section,
    .search-result,
    .queue-item {
        border-width: 1.5px !important;
    }
}

/* ========================================
   DARK MODE SUPPORT (respects system)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Already dark by default, but ensure readability */
    body {
        background: linear-gradient(135deg, #0F0F0F 0%, #1A1A1A 100%);
    }
}

/* ========================================
   REDUCED MOTION (accessibility)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   SAFE AREA INSETS (iPhone notch, etc)
   ======================================== */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
}

/* URGENT MOBILE FIX - Mos Def Avatar */
@media (max-width: 768px) {
    .mos-def-guide {
        bottom: 10px !important;
        right: 10px !important;
    }

    .mos-def-avatar {
        width: 50px !important;
        height: 50px !important;
        border: 2px solid #FFD700 !important;
    }

    .mos-def-bubble {
        bottom: 70px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: calc(100vw - 40px) !important;
        min-width: auto !important;
        padding: 15px !important;
        font-size: 14px !important;
    }

    .bubble-header {
        font-size: 16px !important;
    }

    .bubble-content {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .bubble-button {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* Extra small phones */
@media (max-width: 380px) {
    .mos-def-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .mos-def-bubble {
        padding: 12px !important;
        font-size: 12px !important;
    }
}