/* =========================================================
   DATEI: gamedata/css/components/app-shell.css  (Okt 2026)
   1. Installieren-Knopf und Anleitung auf der Startseite (siehe gamedata/js/pwa.js)
   2. App-Modus: wirkt NUR, wenn Epica als App installiert gestartet wurde (<html class="is-app">).
      Im normalen Browser und am Computer ändert sich nichts.
   3. Handy im Querformat: App-Aufbau (Leiste oben, Knöpfe rechts, Inhalt mit eigenem Scrollbereich)
   4. Handy hochkant: Hinweis „Bitte quer halten“ (nur in der installierten App)
   ========================================================= */

/* ---------- Installieren-Knopf ---------- */
.lp-install { margin-top: 10px; text-align: center; }
.lp-install[hidden], #lp-install-modal[hidden] { display: none; }
.lp-install .lp-small { margin: 6px 0 0; }
.lp-install-steps { margin: 0; padding-left: 24px; line-height: 1.7; }
.lp-install-steps li { margin-bottom: 8px; }

/* ---------- App-Modus: fühlt sich wie eine App an ---------- */
html.is-app, html.is-app body {
    overscroll-behavior: none;                 /* kein Gummiband, kein „Zum Aktualisieren ziehen“ */
}
html.is-app {
    touch-action: manipulation;                /* kein Zoomen per Doppeltipp */
    -webkit-tap-highlight-color: transparent;  /* kein graues Aufblitzen beim Tippen */
}
html.is-app body {
    -webkit-user-select: none; user-select: none;      /* kein versehentliches Markieren */
    -webkit-touch-callout: none;                       /* kein Kontextmenü bei langem Drücken (iOS) */
}
/* Hier darf weiter markiert und getippt werden */
html.is-app input, html.is-app textarea, html.is-app select, html.is-app [contenteditable="true"],
html.is-app .pf-bio-text, html.is-app #view-msg-body, html.is-app .lp-modal-body {
    -webkit-user-select: text; user-select: text;
}

/* =========================================================
   3. HANDY IM QUERFORMAT (Okt 2026) – App-Aufbau statt Webseite
   Greift auf Handys quer (niedrige Höhe), egal ob App oder Browser. Tablet und Computer: keine Änderung.
   Aufbau:  [▶ .................... Spieler-Leiste] [Leiste]
            [ Inhalt (eigener Scrollbereich)      ] [ ↩    ]
            [                                     ] [ 🗺 🏘 ⚔ 💬 ✉ ]
   - Oben rechts eine schmale Spieler-Leiste (statt 110px Abstand), oben links nur der ▶-Knopf
   - Rechts eine feste Knopfleiste: Zurück bzw. Burg bearbeiten oben, darunter das Menü.
     Die Knöpfe liegen NEBEN dem Inhalt, nicht mehr darüber.
   - Der Inhalt hat feste Höhe und scrollt in sich; die Seite selbst scrollt nie.
   - Weltkarte füllt den ganzen Inhaltsbereich; Leiste als Menü (☰), Minikarte klein in der Ecke.
   - Chat-Ticker aus: der Chat erscheint nur über den Chat-Knopf.
   - Burg bearbeiten: Gebäude gedrückt halten; der Knopf erscheint nur als 💾 im Bearbeiten-Modus.
   Die Burg (castle.html) bleibt bewusst Vollbild, Leiste und Knöpfe liegen darüber.
   Höhere Spezifität (html body … #id) statt !important, damit skin.css (wird später geladen)
   nicht gewinnt, die !important-Regeln der Burg aber schon.
   ========================================================= */
.epica-rotate { display: none; }

@media (orientation: landscape) and (max-height: 500px) {
    /* Rahmen dünner (skin.css setzt die Breiten als Variablen) */
    html body.epica-skin {
        --ui-panel-w: 8px !important;
        --ui-paper-w: 8px !important;
        --ui-button-w: 7px !important;
        --ui-button-alt-w: 7px !important;
        --ui-tab-w: 7px !important;
        --ui-tab-on-w: 7px !important;
        --ui-map-frame-w: 6px !important;
        --ui-screen-frame-w: 6px !important;
    }
    /* Maße des App-Aufbaus */
    html body {
        --cl-f: 0px;                                   /* Spielrahmen (nur mit Skin) */
        --cl-btn: 40px;                                /* runde Knöpfe rechts */
        --cl-rail: calc(var(--cl-f) + var(--cl-btn) + 10px);
        --cl-top: calc(var(--cl-f) + 46px);            /* Höhe der Spieler-Leiste */
    }
    html body.skin-panel { --cl-f: 6px; }

    /* Im Spiel scrollt nur der Inhalt, nie die Seite */
    html.in-game, html.in-game body { overflow: hidden; overscroll-behavior: none; height: 100%; }
    html body #dashboard { height: 100vh; height: 100dvh; }

    /* ---------- Inhalt: feste Fläche mit eigenem Scrollbereich ---------- */
    html body #dashboard #module-container {
        top: var(--cl-top);
        left: var(--cl-f);
        right: var(--cl-rail);
        bottom: var(--cl-f);
        width: auto;
        height: auto;
        padding-top: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* Gebäude-Hintergrund bleibt beim Scrollen stehen */
    html body #dashboard #interior-dynamic-bg {
        position: fixed !important;
        top: var(--cl-top) !important; left: var(--cl-f) !important;
        right: var(--cl-rail) !important; bottom: var(--cl-f) !important;
        width: auto !important; height: auto !important;
    }
    /* Der große Abstand unten (Platz für die alten Menüknöpfe) wird nicht mehr gebraucht */
    html body #module-container :is(.mh-app, .mk-app, .bs-app, .sp-app, .sh-app, .iv-app, .hx-app, .pf,
        .cl-inner, .well-inner, .tw-inner, .wl-inner, .bk-inner, .ar-inner, .mine-inner) {
        padding-top: 6px;
        padding-bottom: 16px;
    }
    /* Überschriften kleiner */
    html body #module-container h1 { font-size: 20px; margin: 0 0 6px; }
    html body #module-container :is(.mh-head, .mk-head, .tv-head, .hx-head, .sh-head, .ar-head, .well-head, .bk-head,
        .mine-head, .wl-head, .forge-head, .cl-head, .hq-head, .sp-head, .bs-head) h2 {
        font-size: 18px; line-height: 1.25; margin: 0;
    }
    html body #module-container :is(.mh-head, .mk-head, .tv-head, .hx-head, .sh-head, .ar-head, .well-head, .bk-head,
        .mine-head, .wl-head, .forge-head, .cl-head, .hq-head, .sp-head, .bs-head) p {
        font-size: 12px; margin-top: 2px;
    }
    html body #module-container .mh-tab { min-height: 36px; padding: 6px 12px; font-size: 13px; }

    /* ---------- Spieler-Leiste oben rechts (neben der Knopfleiste; links bleibt nur der ▶-Knopf) ---------- */
    html body #dashboard #global-top-left-ui {
        top: calc(var(--cl-f) + 3px);
        left: auto;
        right: calc(var(--cl-rail) + 4px);
        height: 40px;
        max-width: calc(100vw - var(--cl-rail) - 60px);
        box-sizing: border-box;
        padding: 0 10px 0 3px;
        gap: 8px;
        border-radius: 20px;
        overflow: hidden;
        transform: none !important;                     /* Einklappen ist hier nicht nötig */
    }
    html body.skin-panel #dashboard #global-top-left-ui { border-width: 6px; padding: 0 6px 0 0; }
    html body #dashboard #global-top-left-ui .avatar,
    html body #dashboard #global-top-left-ui #top-ui-avatar-fallback {
        width: 26px; height: 26px; line-height: 26px !important; font-size: 15px !important; border-width: 1px;
    }
    html body #dashboard #global-top-left-ui .info { display: flex; align-items: center; gap: 10px; min-width: 0; }
    html body #dashboard #global-top-left-ui .name-link {
        margin: 0; font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    html body #dashboard #global-top-left-ui .stats { flex-wrap: nowrap; gap: 10px; font-size: 11px; white-space: nowrap; }
    html body #dashboard #global-top-left-ui .stats > span:nth-child(2) { display: none; }   /* EXP: steht im Profil */
    html body #dashboard #top-ui-toggle-btn { display: none !important; }

    /* Seitenleiste: liegt über dem Inhalt, Knopf ▶ oben links neben der Spieler-Leiste */
    html body #dashboard #global-sidebar { width: min(280px, 45vw); height: 100%; }
    html body #dashboard #sidebar-toggle {
        top: calc(var(--cl-f) + 3px);
        right: calc(-34px - var(--cl-f));
        transform: none;
        width: 34px; height: 40px;
        border-radius: 8px;
    }
    html body #dashboard #global-sidebar:not(.collapsed) #sidebar-toggle { right: -34px; }

    /* Chat-Ticker: auf dem Handy quer aus – der Chat erscheint nur über den Chat-Knopf */
    html body #dashboard #chat-ticker-line { display: none !important; }

    /* ---------- Knopfleiste rechts ---------- */
    html body #dashboard #global-bottom-right-menu {
        position: fixed;
        top: calc(var(--cl-f) + 3px + var(--cl-btn) + 6px);
        right: calc(var(--cl-f) + 5px);
        bottom: auto;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    html body #dashboard #global-bottom-right-menu .menu-btn-round {
        width: var(--cl-btn); height: var(--cl-btn); font-size: 18px; flex: 0 0 auto;
        margin: 0; padding: 0;                          /* style.css gibt Knöpfen sonst Außenabstand */
    }
    /* Zurück (überall außer Burg) und Burg bearbeiten (nur Burg) teilen sich den Platz ganz oben */
    html body #dashboard #global-back-btn {
        position: fixed !important;
        top: calc(var(--cl-f) + 3px) !important;
        right: calc(var(--cl-f) + 5px) !important;
        bottom: auto !important;
        width: var(--cl-btn) !important;
        height: var(--cl-btn) !important;
        font-size: 20px !important;
    }
    html body #dashboard #global-top-right-ui {
        position: fixed;
        top: calc(var(--cl-f) + 3px);
        right: calc(var(--cl-f) + 5px);
    }
    /* Burg bearbeiten: auf dem Handy kein Dauer-Knopf mehr. Gebäude gedrückt halten startet das Verschieben
       (castle.js), dann erscheint hier nur der 💾-Knopf zum Speichern. */
    html:not(.castle-editing) body #dashboard #global-top-right-ui { display: none !important; }
    html body #dashboard #global-top-right-ui .btn-edit-mode-round { width: var(--cl-btn); height: var(--cl-btn); margin: 0; padding: 0; }

    /* ---------- Chat-Fenster: neben der Knopfleiste, volle Höhe ---------- */
    html body #dashboard #floating-chat-container {
        top: var(--cl-top);
        bottom: calc(var(--cl-f) + 4px);
        left: auto;
        right: calc(var(--cl-rail) + 4px);
        width: min(460px, 62vw);
        max-width: none;
        height: auto;
        max-height: none;
    }

    /* ---------- Weltkarte: ganze Fläche ---------- */
    html body #dashboard #module-container:has(#epica-map-root) { overflow: hidden; }
    html body #module-container > h1[data-t="epica_map_title"],
    html body #module-container .emap-help { display: none; }
    html body #module-container #epica-map-root { height: 100%; min-height: 0; border-radius: 0; }
    html body #module-container #epica-map-root .emap-btn { min-width: 36px; min-height: 36px; padding: 2px 8px; font-size: 16px; }
    html body #module-container #epica-map-info { font-size: 13px; }

    /* Leiste als Aufklapp-Menü: oben links nur ☰, darunter die Einträge mit Text */
    html body #module-container #epica-map-root .emap-menu-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
    html body #module-container #epica-map-root .emap-bar {
        display: none;
        position: absolute;
        top: 42px; left: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        width: 210px;
        max-height: calc(100vh - var(--cl-top) - 60px);
        overflow-y: auto;
        padding: 6px;
        background: rgba(10, 12, 18, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
    }
    html body #module-container #epica-map-root .emap-top.open .emap-bar { display: flex; }
    html body #module-container #epica-map-root .emap-top { bottom: auto; }
    html body #module-container #epica-map-root .emap-bar > .emap-btn {
        width: 100%; justify-content: flex-start; text-align: left; font-size: 14px; min-height: 38px;
    }
    html body #module-container #epica-map-root .emap-bar .emap-btn .emap-lbl { display: inline; }
    html body #module-container #epica-map-root .emap-jump { width: 100%; padding: 4px; font-size: 12px; }
    html body #module-container #epica-map-root .emap-jump input { width: 50px; min-height: 30px; padding: 2px; }
    html body #module-container #epica-map-root .emap-jump .emap-btn { min-height: 30px; min-width: 30px; font-size: 13px; margin-left: auto; }
    html body.skin-panel #module-container #epica-map-root .emap-bar {
        border-style: solid; border-radius: 0;
        border-width: var(--ui-panel-w);
        border-image: var(--ui-panel) var(--ui-panel-slice) fill / var(--ui-panel-w) stretch;
        background: transparent;
    }

    /* Minikarte: klein oben rechts in der Ecke, angetippt groß (mapEngine.js setzt .big) */
    html body #module-container #epica-map-mini {
        top: calc(var(--ui-map-frame-w, 0px) + 4px) !important;
        right: calc(var(--ui-map-frame-w, 0px) + 4px);
        width: 76px; height: 66px;
    }
    html body #module-container #epica-map-mini.big { width: 210px; height: 184px; z-index: 4; }
    html body #module-container #epica-map-root .emap-zoom .emap-btn { min-width: 34px; min-height: 34px; }
}

/* ---------- Burg: langes Drücken auf ein Gebäude soll kein Kontextmenü / keine Markierung auslösen ---------- */
#castle-layout-container .draggable-building { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---------- Handy hochkant: Hinweis zum Drehen – NUR in der installierten App (<html class="is-app">, pwa.js).
   Im normalen Browser darf man hochkant spielen (dort gilt das bisherige Handy-Layout). ---------- */
@media (orientation: portrait) and (max-width: 600px) {
    html.is-app body #dashboard .epica-rotate {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 100000;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: #0d0a07;
        color: #f0e0c0;
        text-align: center;
    }
    html.is-app body #dashboard .epica-rotate .epica-rotate-ico {
        display: block;
        font-size: 64px;
        margin-bottom: 16px;
        animation: epicaRotateHint 2s ease-in-out infinite;
    }
    html.is-app body #dashboard .epica-rotate p { margin: 0; font-size: 18px; line-height: 1.5; }
}
@keyframes epicaRotateHint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { html body #dashboard .epica-rotate .epica-rotate-ico { animation: none; } }