/* ============================================
   EL JASUS — MOBILE EXPERIENCE v3
   Flexible & Screen-Fitted
   ============================================ */

/* ── GLOBAL RESETS ────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    touch-action: manipulation;
    /* Prevent text size inflation on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Fill the full viewport height */
    height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
    /* Prevent horizontal scroll */
    overflow-x: hidden;
    max-width: 100vw;
    /* Respect safe areas on notched devices */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ── TOUCH-FRIENDLY TARGETS ───────────────── */
button, .btn, [role="button"], a.nav-link,
input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    touch-action: manipulation;
}

/* ── FLEXIBLE CONTAINER ───────────────────── */
.max-w-md {
    width: 100%;
    max-width: min(448px, 100%);
    margin-inline: auto;
}

/* ── SAFE AREA + BOTTOM NAV PADDING ──────── */
.has-mobile-nav {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* ── BOTTOM NAVIGATION BAR ────────────────── */
#mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8000;
    background: linear-gradient(135deg, rgba(8,12,24,.97), rgba(20,25,45,.97));
    border-top: 2px solid rgba(0,242,255,.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Bottom safe area for iPhone X+ */
    padding-bottom: env(safe-area-inset-bottom);
}

#mobile-nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

#mobile-nav li {
    flex: 1;
    min-width: 0;
}

#mobile-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    color: #888;
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    font-size: clamp(9px, 2.2vw, 11px);
    font-weight: 700;
    border-radius: 12px;
    transition: all .25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mobile-nav li a i {
    font-size: clamp(16px, 4.5vw, 20px);
    flex-shrink: 0;
}

#mobile-nav li a.active,
#mobile-nav li a:hover {
    color: #00f2ff;
    text-shadow: 0 0 10px rgba(0,242,255,.7);
}

#mobile-nav li a.active {
    background: rgba(0,242,255,.08);
}

/* ── SIDEBAR OVERLAY (mobile) ─────────────── */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 7990;
}

/* ── PULL-TO-REFRESH INDICATOR ────────────── */
#pull-indicator {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,242,255,.15);
    border: 2px solid rgba(0,242,255,.4);
    border-radius: 30px;
    padding: 10px 24px;
    color: #00f2ff;
    font-size: 13px;
    font-weight: 700;
    z-index: 9000;
    transition: top .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── FLOATING ACTION BUTTON ───────────────── */
#fab {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    right: max(20px, env(safe-area-inset-right));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00f2ff, #7c30ff);
    border: none;
    box-shadow: 0 4px 20px rgba(0,242,255,.5);
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 8001;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}

#fab:hover, #fab:active { transform: scale(1.1); }

/* ── TOAST NOTIFICATION ───────────────────── */
.toast {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,242,255,.15);
    border: 2px solid rgba(0,242,255,.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 30px;
    padding: 10px 24px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    z-index: 9999;
    opacity: 0;
    transition: all .3s ease;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    max-width: calc(100vw - 40px);
    text-overflow: ellipsis;
    overflow: hidden;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── QR CODE MODAL ────────────────────────── */
#qr-modal {
    position: fixed;
    inset: 0;
    z-index: 9995;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#qr-modal.open { display: flex; }

#qr-box {
    background: linear-gradient(135deg, rgba(15,20,35,.97), rgba(25,30,50,.97));
    border: 2px solid rgba(0,242,255,.4);
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    width: min(320px, 90vw);
}

#qr-box canvas {
    border-radius: 12px;
    max-width: 100%;
    height: auto;
}

/* ── SWIPE GESTURE HINT ───────────────────── */
.swipe-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.3);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

/* ── HAPTIC FEEDBACK (visual) ─────────────── */
@keyframes haptic {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(.95); }
}
.haptic { animation: haptic .15s ease; }

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */

/* ── TABLET & BELOW (768px) ───────────────── */
@media (max-width: 768px) {
    /* Show mobile nav */
    #mobile-nav { display: block; }
    #fab { display: flex; }

    /* Body spacing */
    body {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    /* Fluid typography */
    h1 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; }
    h2 { font-size: clamp(1.2rem, 4.5vw, 1.6rem) !important; }
    h3 { font-size: clamp(1rem, 3.8vw, 1.3rem) !important; }
    p, span, label { font-size: clamp(0.82rem, 2.5vw, 1rem); }

    /* Glass cards full-width with fluid padding */
    .glass {
        border-radius: clamp(14px, 4vw, 24px) !important;
        padding: clamp(12px, 4vw, 20px) !important;
    }

    /* Collapse grid layouts */
    .grid { grid-template-columns: 1fr !important; }
    .md\:grid-cols-2, .lg\:grid-cols-3 { grid-template-columns: 1fr !important; }

    /* Inputs: prevent iOS zoom (must be ≥16px) */
    input, textarea, select {
        font-size: 16px !important;
        padding: 14px !important;
        border-radius: 12px !important;
    }

    /* Full-width buttons on mobile */
    .btn-mobile-full { width: 100% !important; }

    /* Reduce fixed heights to flexible ones */
    #secretCard {
        height: clamp(200px, 50vw, 320px) !important;
    }

    /* Sidebar: slide in from side */
    #sideNav {
        width: min(280px, 80vw) !important;
        transform: translateX(100%);
        transition: transform .3s ease;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        z-index: 8500 !important;
        overflow-y: auto;
    }

    #sideNav.open { transform: translateX(0); }
    #sidebar-overlay { display: block; }

    /* Hide non-essential decorations */
    .decorative { display: none; }

    /* Tables become scrollable */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mode toggle buttons fit container */
    .mode-btn {
        padding: 10px clamp(12px, 3vw, 24px) !important;
        font-size: clamp(10px, 2.5vw, 12px) !important;
    }

    /* Player name inputs — scrollable list */
    #localNamesContainer {
        max-height: min(160px, 35vh) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Header spacing */
    header { padding-top: 16px !important; padding-bottom: 16px !important; }

    /* Footer: single column */
    footer .grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ── PHONE (480px) ────────────────────────── */
@media (max-width: 480px) {
    body {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }

    .glass {
        padding: clamp(10px, 3.5vw, 16px) !important;
        border-radius: clamp(12px, 3.5vw, 18px) !important;
    }

    h1 { font-size: clamp(1.2rem, 6vw, 1.6rem) !important; }

    /* Mode toggle: ensure it doesn't overflow */
    .inline-flex {
        width: 100%;
        max-width: 100%;
    }
    .mode-btn {
        flex: 1 !important;
        padding: 10px 8px !important;
    }

    /* Color picker row: wrap if needed */
    .grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: clamp(6px, 2vw, 12px) !important;
    }

    input[type="color"] {
        width: clamp(28px, 8vw, 40px) !important;
        height: clamp(28px, 8vw, 40px) !important;
    }

    /* Card reveal: adaptive height */
    #secretCard {
        height: clamp(180px, 45vw, 260px) !important;
        border-radius: clamp(20px, 6vw, 40px) !important;
    }

    /* Reduce fingerprint icon */
    #secretCard i { font-size: clamp(36px, 12vw, 56px) !important; }

    /* Player count display */
    #localCountDisplay { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }

    /* Buttons: comfortable tap area */
    .btn-main, .cyber-btn {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        font-size: clamp(13px, 3.5vw, 16px) !important;
    }

    /* Nav bar labels: slightly smaller on tiny screens */
    #mobile-nav li a {
        font-size: clamp(8px, 2vw, 10px);
    }
}

/* ── SMALL PHONE (360px) ──────────────────── */
@media (max-width: 360px) {
    body {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Hide nav labels, icons only */
    #mobile-nav li a span,
    #mobile-nav li a:not(.icon-only) > *:last-child {
        display: none;
    }

    #mobile-nav li a {
        padding: 8px 4px;
    }

    #mobile-nav li a i { font-size: 18px; }
}

/* ── LANDSCAPE PHONE ──────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
    /* Show orientation warning */
    .landscape-warning {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(10,14,26,.97);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
        color: white;
        font-family: 'Cairo', sans-serif;
        text-align: center;
        padding: 20px;
    }
    .landscape-warning i { font-size: 48px; color: #00f2ff; }

    /* Compact game card in landscape */
    #secretCard {
        height: clamp(140px, 35vh, 200px) !important;
    }

    /* Tighter spacing in landscape */
    header { padding-top: 8px !important; padding-bottom: 8px !important; }
    .logo-hex { width: 60px !important; height: 70px !important; }
    .logo-hex img { width: 40px !important; height: 40px !important; }
}

/* ── HIGH DPI / RETINA ADJUSTMENTS ───────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .glass {
        border-width: 1px;
    }
}