/* ============================================================
   LAZY BROS - Mobile Responsive CSS
   Shared Regeln fuer alle Seiten (320px - 768px Viewport)
   Einbinden: <link rel="stylesheet" href="css/mobile.css">
   ============================================================ */

/* ---- MOBILE: max 768px ---- */
@media (max-width: 768px) {

    /* === CONTAINER === */
    .container-ultrawide {
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* === NAVIGATION === */
    nav .container-ultrawide {
        height: 60px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Desktop-Menu verstecken */
    #nav-menu {
        display: none !important;
    }

    /* Mobile-Menu (wird per JS getoggelt) - fixed wegen fixed Navbar */
    #nav-mobile-menu {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: rgba(17, 24, 39, 0.98);
        backdrop-filter: blur(12px);
        padding: 1rem;
        z-index: 49;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    #nav-mobile-menu.open {
        display: block !important;
    }
    #nav-mobile-menu a {
        display: block;
        padding: 0.875rem 1rem;
        color: #d1d5db;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
        transition: background 0.2s;
    }
    #nav-mobile-menu a:hover,
    #nav-mobile-menu a:active {
        background: rgba(102, 126, 234, 0.15);
        color: #667eea;
    }
    #nav-mobile-menu .mobile-dropdown-items {
        padding-left: 1rem;
    }
    #nav-mobile-menu .mobile-dropdown-items a {
        font-size: 0.875rem;
        font-weight: 500;
        color: #9ca3af;
        padding: 0.625rem 1rem;
    }

    /* Hamburger-Button sichtbar */
    #nav-hamburger {
        display: flex !important;
    }

    /* Brand (Logo + Text) auf Mobile */
    #nav-brand {
        margin-left: 0 !important;
    }
    #nav-brand .w-20.h-20 {
        width: 40px !important;
        height: 40px !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }
    #nav-brand a {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        font-size: 1.125rem !important;
        line-height: normal !important;
    }

    /* Avatar-Wrap auf Mobile verstecken (Login/Profil ist im Burger-Menu) */
    #navv2-avatar-wrap {
        display: none !important;
    }

    /* === HERO SECTION (index.html) === */
    .grid.grid-cols-12 {
        grid-template-columns: 1fr !important;
    }
    .col-span-7,
    .col-span-5 {
        grid-column: span 1 !important;
    }

    /* Hero Lila Karte */
    .col-span-7.instagram-card.story-gradient {
        padding: 1.5rem !important;
    }
    .col-span-7 .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Hero Text kleiner */
    .col-span-7 h1.text-5xl,
    h1.text-5xl {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    .col-span-7 p.text-xl {
        font-size: 1rem !important;
    }

    /* Wheel Container responsive */
    .col-span-7 .flex[style*="height: 520px"] {
        height: auto !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Wheel Shell + Canvas responsive */
    .wheel-shell {
        --wheel-size: min(280px, calc(100vw - 80px)) !important;
        width: calc(var(--wheel-size) + 12px) !important;
        height: calc(var(--wheel-size) + 12px) !important;
        max-width: calc(100vw - 60px) !important;
        margin: 0 auto !important;
    }
    #wheel-canvas {
        width: var(--wheel-size, 280px) !important;
        height: var(--wheel-size, 280px) !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
    .wheel-glow {
        inset: -10px !important;
    }

    /* Wheel of Pain Titel */
    h1[data-feld="wheel-title"] {
        font-size: 1.5rem !important;
        margin-top: 0.5rem !important;
    }

    /* === GRIDS RESPONSIVE === */
    .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* === CHALLENGE ERSTELLEN: Formular volle Breite, Tipps nachrangig === */
    #erstellen > .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    #challenge-tips-section {
        padding: 0.75rem 1rem !important;
        order: 2;
    }
    #challenge-tips-section .text-6xl {
        display: inline !important;
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
        vertical-align: middle;
    }
    #challenge-tips-section h3 {
        display: inline !important;
        font-size: 1rem !important;
        margin-bottom: 0 !important;
        vertical-align: middle;
        margin-left: 0.5rem;
    }
    #challenge-tips-section ul {
        margin-top: 0.5rem;
    }
    #challenge-tips-section li {
        font-size: 0.875rem !important;
        padding: 0.125rem 0 !important;
    }

    /* Gap reduzieren */
    .gap-6 {
        gap: 0.75rem !important;
    }
    .gap-8 {
        gap: 1rem !important;
    }

    /* === KARTEN === */
    .instagram-card {
        border-radius: 16px !important;
    }
    .instagram-card.p-8 {
        padding: 1.25rem !important;
    }
    .instagram-card.p-12 {
        padding: 1.25rem !important;
    }

    /* Karten nicht schweben auf Touch */
    .instagram-card:hover {
        transform: none !important;
    }

    /* Feature Card Emojis kleiner */
    .instagram-card .text-6xl {
        font-size: 2.5rem !important;
    }
    .instagram-card .text-5xl {
        font-size: 2rem !important;
    }

    /* === SECTIONS === */
    section.pt-12 {
        padding-top: 1rem !important;
    }
    section.pb-12 {
        padding-bottom: 1rem !important;
    }
    section.pt-6 {
        padding-top: 0.5rem !important;
    }
    section.pb-6 {
        padding-bottom: 0.5rem !important;
    }

    /* === MODALS === */
    .modal-overlay {
        padding: 1rem !important;
        z-index: 9999 !important;
    }
    .modal-overlay.active {
        display: flex !important;
        opacity: 1 !important;
    }
    .modal-content {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 0 auto !important;
        padding: 1.25rem !important;
        border-radius: 16px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .modal-content h2 {
        font-size: 1.25rem !important;
    }
    .modal-close {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1.5rem !important;
        z-index: 10 !important;
    }
    /* Inline-Style Modals (z.B. online-users-modal) */
    .fixed.inset-0 > div,
    [style*="max-width: 450px"],
    [style*="max-width: 600px"],
    [style*="max-width: 500px"] {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 0.5rem auto !important;
    }

    /* === BUTTONS - Touch-freundlich === */
    button, a.px-8, a.px-6, a.px-4,
    [role="button"], [role="menuitem"] {
        min-height: 44px;
    }

    /* === TEXTE === */
    .text-5xl { font-size: 1.75rem !important; }
    .text-4xl { font-size: 1.5rem !important; }
    .text-3xl { font-size: 1.25rem !important; }

    /* === HELP / ERROR BUTTONS (index.html) === */
    .container-ultrawide > .flex.items-center.justify-end {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .container-ultrawide > .flex.items-center.justify-end button {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }

    /* === FOOTER === */
    footer {
        padding: 1rem 0.75rem !important;
    }
    footer .text-sm {
        font-size: 0.75rem !important;
    }

    /* === CTA SECTION === */
    .bg-gradient-to-r .container-ultrawide h2 {
        font-size: 1.5rem !important;
    }
    .bg-gradient-to-r .container-ultrawide p {
        font-size: 0.875rem !important;
    }

    /* === FORMS === */
    .modal-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important; /* Verhindert iOS/WebView Auto-Zoom */
        padding: 12px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    /* Modal-Content bei offenem Keyboard scrollbar */
    .modal-overlay.active {
        align-items: flex-start !important;
        padding-top: 2rem !important;
        overflow-y: auto !important;
    }
    .modal-content {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        max-height: none !important;
    }

    /* Buttons in Forms: Volle Breite und touch-freundlich */
    .modal-button,
    .modal-content button[type="submit"],
    .modal-content button {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 1rem !important;
    }

    /* Labels lesbar */
    .modal-content label {
        font-size: 0.875rem !important;
    }

    /* === TABELLEN === */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* === CHAT === */
    .chat-messages {
        max-height: 60vh !important;
    }

    /* === FREUNDE: grid-cols-12 Fix === */
    .grid-cols-12 {
        grid-template-columns: 1fr !important;
    }
    [class*="col-span-"] {
        grid-column: span 1 !important;
    }
}

/* ---- EXTRA SMALL: max 380px ---- */
@media (max-width: 380px) {

    .container-ultrawide {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .instagram-card.p-8,
    .instagram-card.p-12 {
        padding: 1rem !important;
    }

    .grid-cols-4,
    .grid-cols-5 {
        grid-template-columns: 1fr !important;
    }

    h1.text-5xl,
    .text-5xl {
        font-size: 1.5rem !important;
    }

    #wheel-canvas {
        max-width: 250px !important;
        max-height: 250px !important;
    }
}