/**
 * Responsive Breakpoints, Orientation-Hint und Glass-UI.
 *
 * Stellt das Fundament für mobile Anpassungen bereit:
 * 1. Breakpoints (sm 480px, md 768px, lg 1024px)
 * 2. Portrait-Orientierungshinweis für Games/Playgrounds
 * 3. Glass-UI Overlay-Klasse für mobile Panels
 * 4. Touch-Target Utility
 *
 * Muss NACH tokens.css geladen werden.
 *
 * @version 1.0
 * @see docs/conventions/UI_STYLE_PLAN.md Sections 7–9
 */

/* =========================================
   1. BREAKPOINT UTILITIES
   ========================================= */

/**
 * Klassen zum bedingten Ein-/Ausblenden je nach Viewport.
 * Nutzung: <div class="hide-sm">Nur ab 481px sichtbar</div>
 */

/* --- Small: ≤ 480px (Smartphones) --- */
@media (max-width: 480px) {
    .hide-sm {
        display: none !important;
    }

    /* Touch-Targets vergrößern */
    button, .btn, select, input[type="range"] {
        min-height: var(--touch-target-min, 44px);
        min-width: var(--touch-target-min, 44px);
    }

    /* Sidebar auf volle Breite */
    .sidebar {
        width: 100% !important;
        position: relative !important;
        height: auto !important;
    }
}

@media (min-width: 481px) {
    .show-sm-only {
        display: none !important;
    }
}

/* --- Medium: ≤ 768px (Tablets Portrait) --- */
@media (max-width: 768px) {
    .hide-md {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-md-only {
        display: none !important;
    }
}

/* --- Large: ≤ 1024px (Tablets Landscape) --- */
@media (max-width: 1024px) {
    .hide-lg {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .show-lg-only {
        display: none !important;
    }
}


/* =========================================
   2. ORIENTATION HINT
   Ein dezenter Hinweis für Portrait-Modus
   auf Seiten, die Landscape bevorzugen.
   ========================================= */

/**
 * HTML-Nutzung:
 * <div class="orientation-hint" role="status" aria-live="polite">
 *     📱 Drehe dein Gerät ins Querformat für eine bessere Ansicht.
 * </div>
 *
 * Wird NUR angezeigt wenn:
 * - Viewport ≤ 768px (Tablets/Phones)
 * - UND Gerät im Portrait-Modus
 *
 * Hinweis: screen.orientation.lock() funktioniert NICHT auf iOS.
 * Deshalb nur visueller Hinweis, kein Zwang.
 */
.orientation-hint {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
    background: var(--glass-bg, rgba(255, 255, 255, 0.88));
    backdrop-filter: blur(var(--glass-blur, 10px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
    color: var(--color-text, #2c3e50);
    font-size: var(--font-size-sm, 0.85rem);
    text-align: center;
    border-top: 1px solid var(--color-border-light, #eee);
    box-shadow: 0 -2px 8px var(--color-shadow, rgba(0, 0, 0, 0.05));
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) and (orientation: portrait) {
    .orientation-hint {
        display: block;
    }
}


/* =========================================
   3. GLASS-UI OVERLAY
   Für mobile Panels, Overlays und Task-Bars.
   ========================================= */

/**
 * Nutzung: <div class="glass-panel">…</div>
 *
 * Erzeugt halbtransparenten Hintergrund mit Blur-Effekt,
 * sodass der darunter liegende Kontext sichtbar bleibt.
 * Fallback auf opaken Hintergrund ohne Backdrop-Filter.
 */
.glass-panel {
    background: var(--glass-bg, rgba(255, 255, 255, 0.88));
    backdrop-filter: blur(var(--glass-blur, 10px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
    border: 1px solid var(--color-border-light, #eee);
    border-radius: var(--border-radius-lg, 8px);
    box-shadow: 0 4px 16px var(--color-shadow, rgba(0, 0, 0, 0.05));
}

/* Fallback für Browser ohne backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .glass-panel {
        background: rgba(255, 255, 255, 0.96);
    }
}

/**
 * Minimierte Task-Bar für mobile Steuerleisten.
 * Standard: 48px Höhe, expandierbar bis max 40vh.
 */
.mobile-taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8000;
    min-height: 48px;
    max-height: 40vh;
    overflow-y: auto;
    padding: var(--space-sm, 0.5rem);
    transition: max-height 0.3s ease;
}

.mobile-taskbar.collapsed {
    max-height: 48px;
    overflow: hidden;
}


/* =========================================
   4. TOUCH TARGET UTILITIES
   ========================================= */

/**
 * Explizite Touch-Target-Klasse für interaktive Elemente,
 * die nicht nativ Button/Select sind.
 */
.touch-target {
    min-height: var(--touch-target-min, 44px);
    min-width: var(--touch-target-min, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* =========================================
   5. CANVAS RESPONSIVE CONTAINER
   ========================================= */

/**
 * Wrapper für responsive Canvas-Elemente.
 * Das Canvas füllt den Container und behält sein Seitenverhältnis
 * über die CSS-Dimension. Die tatsächliche Auflösung wird
 * über setupHiDPICanvas / initResponsiveCanvas gesteuert.
 */
.canvas-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-container canvas {
    max-width: 100%;
    height: auto;
}