/* --- MOBILE ANPASSUNGEN & UI ÜBERBLENDUNG --- */
@media (max-width: 1024px) { /* Sonst funktionierts am Tablet nicht */
    /* Titelbild auf Handy deutlich kleiner starten lassen */
    .gallery-header img {
        height: 150px !important; /* Startet kleiner (statt 400px) */
    }

    /* Wenn Ordner offen sind, schrumpft es trotzdem auf Icon-Größe */
    body.compact-mode .gallery-header img {
        height: 50px !important; /* Noch etwas kleiner als Desktop-Icon */
    }

    /* Im Preview-Modus soll die Top-Bar keine Klicks abfangen,
     *  die nicht der Zurück-Button sind */
    body.preview-mode #game-ui {
        pointer-events: none;
    }

    body.preview-mode .top-bar {
        pointer-events: auto; /* Zurück-Button muss klickbar bleiben */
    }

    /* Upload verstecken */
    #upload-section {
    display: none !important;
    }

    /* Hinweis anzeigen */
    #mobile-upload-hint {
    display: block !important;
    }

    /* Top Bar flexibel machen */
    .top-bar {
        flex-wrap: wrap; /* Buttons dürfen in die nächste Zeile rutschen */
        width: 90%;      /* Nicht ganz an den Rand */
        left: 50%;
        transform: translateX(-50%); /* Zentrieren */
        justify-content: center;
        padding: 5px;
        top: 5px;
        gap: 5px;        /* Abstand zwischen Buttons verringern */
        z-index: 100;    /* Sicherstellen, dass sie ÜBER dem Canvas liegt */
    }

    /* Unwichtiges ausblenden, um Platz zu sparen */
    #resolutionDisplay,
    #timerText,
    .spacer {
        display: none !important; /* Auf Handy ausblenden */
    }

    /* Buttons mobil optimieren */
    .top-bar button {
        font-size: 13px;
        padding: 8px 12px;
        flex-grow: 1;
        min-width: 80px;
    }

    /* Status Text (Prozent) sichtbar lassen, aber kleiner */
    #statusText {
    font-size: 0.8em;
    }

    /* Switch für Pro-Mode kompakter */
    .toggle-switch span {
        font-size: 11px;
    }

    /* Palette Styles */
    #palette-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    bottom: 20px; /* Gleiche Höhe wie der Hinweis */
    width: 90%;
    padding: 5px 0;
    /* WICHTIG: Transition für weiches Ein/Ausblenden */
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
    z-index: 20; /* Über dem Hinweis liegen, wenn aktiv */
    }

    /* Scrollbar verstecken */
    #palette-container::-webkit-scrollbar { display: none; }
    #palette-container { -ms-overflow-style: none; scrollbar-width: none; }

    :root { --swatch-size: 50px; }
    .swatch-num { font-size: 12px; }
    .swatch-count { font-size: 11px; }

    /* ZUSTAND: RAUSGEZOOMT (Palette weg) */
    #palette-container.zoomed-out {
    opacity: 0;
    pointer-events: none; /* Klicks gehen durch */
    transform: translateX(-50%) scale(0.9); /* Leicht kleiner werden beim Ausblenden */
    }

    /* HINWEIS TEXT (Liegt an derselben Stelle) */
    #zoom-hint {
    display: flex !important; /* Auf Mobile sichtbar machen (flex für Zentrierung) */
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 20px; /* Exakt selbe Position wie Palette */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 50px; /* Ca. Höhe der Palette */
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #555;
    border-radius: 25px; /* Pille-Form */
    color: #fff;
    font-weight: bold;
    pointer-events: none; /* Klicks gehen immer durch (zum Pannen) */
    z-index: 10; /* Unter der Palette */

    /* Transition */
    opacity: 0;
    transition: opacity 0.3s ease;
    }

    /* ZUSTAND: RAUSGEZOOMT (Hinweis da) */
    #zoom-hint.visible {
    opacity: 1;
    }

    .preview-btn-card {
        padding: 8px 12px;
        font-size: 14px;
        bottom: 50px;
    }
}