/* ============================================================ */
/* === ISOLATED MOBILE STYLES (Screen < 1024px) === */
/* ============================================================ */

@media (max-width: 1024px) {
    /* 1. HAUPTCONTAINER (GESCHÜTZT) */
    .shop-window-container {
        width: 100%; margin: 0; border-radius: 0; padding: 10px 5px;
        background-color: rgba(10, 10, 26, 0.6) !important;
        backdrop-filter: blur(15px);
        box-shadow: none; border: none;
    }

    /* 2. KOPFZEILE (GESCHÜTZT) */
    .shop-info-bar { 
        display: flex !important; flex-direction: column !important; 
        align-items: center !important; justify-content: center !important;
        text-align: center !important; width: 100% !important;
        gap: 5px !important; margin-bottom: 15px !important; font-size: 0.85rem !important;
    }
    #category-nav { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; margin-bottom: 20px !important; }
    .nav-btn { padding: 6px 12px !important; font-size: 0.65rem !important; border-radius: 15px !important; }

    /* 3. GRID & KARTE (STRIKTE EINHEITLICHKEIT) */
    [id^="grid-"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    .skin-card {
        border-radius: 12px;
        border: 1.5px solid rgba(251, 191, 36, 0.5) !important;
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
        background: rgba(15, 23, 42, 0.15) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex !important; 
        flex-direction: column !important;
        overflow: hidden !important; 
        position: relative !important;
        height: 410px !important; /* Kompakter als vorher */
    }

    /* 4. BILD-BEREICH */
    .card-image-area {
        width: 100% !important; aspect-ratio: 1 / 1 !important;
        display: flex !important; justify-content: center !important; align-items: center !important;
        flex-shrink: 0 !important; background: transparent !important;
    }
    .image-swapper img, .card-image-area > img { width: 85% !important; height: 85% !important; object-fit: contain !important; }

    /* 5. INFOBOX (GALAXY DURCHSICHTIG & EINRÜCKUNG) */
    .card-info-area {
        position: relative !important; width: 100% !important;
        background: rgba(255, 255, 255, 0.03) !important;
        display: flex !important; flex-direction: column !important;
        flex-grow: 1 !important; padding: 0 !important;
    }

    .card-title-row {
        /* Nach rechts gerückt, damit nichts rausguckt */
        padding: 8px 10px 4px 14px !important; 
        display: flex !important; flex-direction: column !important; 
        align-items: flex-start !important;
    }

    .card-title-text {
        font-family: 'Inter', sans-serif !important; font-weight: 900 !important;
        font-size: 0.72rem !important; color: white !important; 
        text-transform: uppercase !important; line-height: 1.2 !important;
        text-shadow: 1px 1px 3px rgba(0,0,0,1) !important;
        /* STRIKTE 2-ZEILEN REGEL */
        display: -webkit-box !important; -webkit-line-clamp: 2 !important; 
        -webkit-box-orient: vertical !important; overflow: hidden !important;
        height: 1.8rem !important; /* Erzwingt gleiche Höhe für alle Namen */
        margin-bottom: 2px !important;
    }

    .card-title-row > div:last-child {
        display: flex !important; align-items: center !important; 
        justify-content: flex-start !important; margin-top: 2px !important;
    }

    /* 6. BUTTONS (ÜBER DEM TIMER) */
    .action-buttons-container {
        display: flex !important; flex-direction: column !important;
        gap: 5px !important; padding: 8px 10px !important;
        margin-top: auto !important; /* Schiebt alles nach unten */
    }

    .wish-btn, .lock-btn {
        width: 100% !important; padding: 8px 0 !important; border-radius: 6px !important;
        font-size: 0.6rem !important; font-weight: 900 !important; color: white !important;
        text-transform: uppercase !important; border: 2px solid transparent !important;
        background-clip: padding-box !important;
    }
    .wish-btn { background: linear-gradient(rgba(13, 17, 34, 0.8), rgba(13, 17, 34, 0.8)) padding-box, linear-gradient(45deg, #d97706, #fbbf24, #d97706) border-box !important; }
    .lock-btn { background: linear-gradient(rgba(13, 17, 34, 0.8), rgba(13, 17, 34, 0.8)) padding-box, linear-gradient(45deg, #7c3aed, #c084fc, #7c3aed) border-box !important; }

    /* 7. TIMER & EMOJIS (GANZ UNTEN - VOLLE BREITE) */
    .timer-bar {
        background-color: rgba(255, 255, 255, 0.08) !important; 
        color: #ffffff !important; font-size: 0.6rem !important; padding: 5px 0 !important;
        width: 100% !important; text-align: center !important;
        border-top: 1px solid rgba(255,255,255,0.05) !important;
    }

    .reaction-bar {
        background-color: rgba(255, 255, 255, 0.08) !important; 
        padding: 0 10px !important; display: flex !important; 
        justify-content: space-between !important; width: 100% !important;
        height: 32px !important; align-items: center !important;
        border-top: 1px solid rgba(255,255,255,0.05) !important;
    }
    .reaction-btn { font-size: 0.65rem !important; flex: 1 !important; text-align: center !important; }

    /* ============================================================ */
    /* === SCHUTZZONE: MODAL & VIDEO (GESCHÜTZT) === */
    /* ============================================================ */
    .modal-content {
        width: 100% !important; height: auto !important; max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important; overflow-y: auto !important;
        background: rgba(13, 17, 34, 0.98) !important; display: flex !important; flex-direction: column !important;
    }
    .modal-body { display: flex !important; flex-direction: column !important; padding: 15px !important; }
    .modal-media-wrapper {
        width: 100% !important; aspect-ratio: 16 / 9 !important; position: relative !important;
        background: #000 !important; margin-bottom: 15px !important; display: block !important;
    }
    .modal-media-wrapper iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: none !important; }
}