/**
 * Legends of Glory — Siteweite Tablet/Mobile-Optimierung
 * Greift per Viewport-Breite (@media) auf allen Seiten — Desktop unveraendert.
 */

/* ── Global: Touch, Safe-Area, Overflow ── */
@media (max-width: 1024px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    table {
        max-width: 100%;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}

@media (max-width: 1024px) and (pointer: coarse) {
    button,
    .login-stone-btn,
    .nav-btn,
    .big-btn,
    .t-btn,
    .modal-btn,
    a.nav-btn,
    .char-select-card__form .login-stone-btn,
    .login-shot,
    .login-nav-btn {
        min-height: 44px;
    }
}

/* ── Lager-Preview-Frame (Lager, Markt, Bank, Liga, …) ── */
@media (max-width: 1024px) {
    body.page-lager {
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 100dvh;
    }

    body.page-lager .lager-bg-lager-image {
        transform: none !important;
    }

    body.page-lager .lager-content-stage {
        padding:
            max(6px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left)) !important;
        min-height: 100dvh;
    }

    body.page-lager .lager-content-stage > .lager-redesign-root,
    body.page-lager .lager-content-stage > #game-wrapper.lager-redesign-root,
    body.page-lager #right-col,
    body.page-lager #top-header {
        transform: none !important;
    }

    body.page-lager #lager-right-col-front,
    body.page-lager #lager-top-header-front {
        position: relative !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }

    body.page-lager #lager-right-col-front #right-col,
    body.page-lager #lager-top-header-front #top-header {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }

    body.page-lager #lager-right-col-spacer,
    body.page-lager #lager-top-header-spacer {
        display: none !important;
    }

    /* Lager-Home: absolutes Editor-Layout → Flow */
    body.page-lager.lager-has-layout #game-wrapper {
        min-height: auto !important;
        height: auto !important;
        max-width: 100% !important;
        padding: 4px !important;
    }

    body.page-lager.lager-has-layout #slots-row-container {
        position: relative !important;
        min-height: auto !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 4px 0 !important;
    }

    body.page-lager.lager-has-layout .center-col,
    body.page-lager.lager-has-layout #lager-switchable-center-col {
        display: block !important;
    }

    body.page-lager.lager-has-layout #left-col,
    body.page-lager.lager-has-layout #gladiator-col,
    body.page-lager.lager-has-layout #arena-repair-row,
    body.page-lager.lager-has-layout #alloy-row,
    body.page-lager.lager-has-layout #special-ability-row,
    body.page-lager.lager-has-layout #right-col,
    body.page-lager.lager-has-layout #nav-bar,
    body.page-lager.lager-has-layout #prepare-banner,
    body.page-lager.lager-has-layout #main-frame,
    body.page-lager.lager-has-layout #alloy-purchase-box,
    body.page-lager.lager-has-layout #market-box,
    body.page-lager.lager-has-layout #game-footer,
    body.page-lager.lager-has-layout #top-header,
    body.page-lager.lager-has-layout #header-logo-img,
    body.page-lager.lager-has-layout [id^="char-thumb-"] {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 4px 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.page-lager.lager-has-layout #main-frame {
        min-height: 200px !important;
        background-size: cover !important;
    }

    body.page-lager.lager-has-layout #nav-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 6px 4px !important;
    }

    body.page-lager.lager-has-layout #nav-bar a,
    body.page-lager.lager-has-layout #nav-bar button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body.page-lager.lager-has-layout .inventory-cols {
        flex-direction: column !important;
    }

    body.page-lager.lager-has-layout .inv-col {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.page-lager.lager-has-layout .top-section {
        height: auto !important;
        overflow: visible !important;
    }

    body.page-lager.lager-has-layout .stats-panel {
        width: calc(100% - 8px) !important;
        margin: 4px auto !important;
        overflow: visible !important;
    }

    body.page-lager.lager-has-layout .char-3d-viewport {
        width: 100% !important;
        min-height: 200px !important;
        height: auto !important;
    }

    body.page-lager.lager-has-layout .action-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    body.page-lager.lager-has-layout .big-btn {
        min-height: 48px !important;
        height: auto !important;
        flex: 1 1 140px !important;
    }

    /* Preview-Child-Seiten (Markt, Bank, …) */
    body.page-lager.markt-preview-page #main-frame,
    body.page-lager.bank-preview-page #main-frame,
    body.page-lager.liga-preview-page #main-frame,
    body.page-lager.katakomben-preview-page #main-frame,
    body.page-lager.rangliste-preview-page #main-frame,
    body.page-lager.nachrichten-preview-page #main-frame,
    body.page-lager.hilfe-preview-page #main-frame,
    body.page-lager.admin-preview-page #main-frame,
    body.page-lager.markt-preview-page #lager-chrome-below,
    body.page-lager.bank-preview-page #lager-chrome-below,
    body.page-lager.liga-preview-page #lager-chrome-below,
    body.page-lager.katakomben-preview-page #lager-chrome-below,
    body.page-lager.rangliste-preview-page #lager-chrome-below,
    body.page-lager.nachrichten-preview-page #lager-chrome-below,
    body.page-lager.hilfe-preview-page #lager-chrome-below,
    body.page-lager.admin-preview-page #lager-chrome-below {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-lager.markt-preview-page #game-wrapper,
    body.page-lager.bank-preview-page #game-wrapper,
    body.page-lager.liga-preview-page #game-wrapper,
    body.page-lager.katakomben-preview-page #game-wrapper,
    body.page-lager.rangliste-preview-page #game-wrapper,
    body.page-lager.nachrichten-preview-page #game-wrapper,
    body.page-lager.hilfe-preview-page #game-wrapper,
    body.page-lager.admin-preview-page #game-wrapper {
        padding: 0 4px 20px !important;
    }

    /* Modals */
    .modal-box,
    .warning-box,
    .global-modal-box,
    .login-glass-modal-box {
        width: min(96vw, 520px) !important;
        max-width: 96vw !important;
        max-height: 92dvh !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 768px) {
    body.page-lager.lager-has-layout .char-3d-viewport {
        min-height: 180px !important;
    }

    body.page-lager.lager-has-layout .training-grid {
        flex-direction: column !important;
        gap: 6px !important;
    }

    body.page-lager.lager-has-layout .training-item {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    body.page-lager.lager-has-layout #game-wrapper {
        padding: 2px !important;
    }

    body.page-lager.lager-has-layout .big-btn {
        flex: 1 1 100% !important;
        font-size: 12px !important;
    }
}

/* ── Main-Frame (Wiki, Söldner, Editor, …) ── */
@media (max-width: 1024px) {
    body.log-mobile .main-container,
    body.log-tablet .main-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.log-mobile .content-area,
    body.log-tablet .content-area {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    body.log-mobile .nav-bar,
    body.log-tablet .nav-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
    }
}

/* ── Classic Auth (Login-Index, Verify, Char-Select) ── */
@media (max-width: 1024px) {
    body.page-login-classic,
    body.page-verify-classic,
    body.page-char-select-classic {
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 100dvh;
    }

    body.page-login-classic .login-logo-wrap.login-logo-front,
    body.page-verify-classic .login-logo-wrap.login-logo-front,
    body.page-char-select-classic .login-logo-wrap.login-logo-front {
        display: none !important;
    }

    body.page-login-classic .classic-auth-logo-inline,
    body.page-verify-classic .classic-auth-logo-inline,
    body.page-char-select-classic .classic-auth-logo-inline {
        display: block;
    }
}

/* ── Login.php / Reset / Support (Standalone) ── */
@media (max-width: 1024px) {
    body.auth-page .auth-container,
    body.auth-page .auth-scene {
        min-height: 100dvh;
        padding:
            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    body.auth-page .auth-card,
    body.auth-page .char-select-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.auth-page .auth-logo {
        width: min(280px, 78vw) !important;
    }
}

/* ── Tabellen horizontal scrollbar ── */
@media (max-width: 1024px) {
    .upgrade-table-wrap,
    .markt-table-wrap,
    .table-scroll,
    .admin-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
}