/* =========================================================
DATEI: gamedata/css/components/mobile-compact.css (Okt 2026)
Handy quer (niedriger Bildschirm): Gebäude und Menüs kompakter, damit man nicht für alles scrollen muss
und nichts mehr übereinander liegt.
- "Stufe / Ausbauen"-Kästchen sitzt jetzt klein oben rechts (vorher mittig über den Knöpfen)
- Untertitel der Gebäude entfallen (sparen Höhe), Knöpfe stehen nebeneinander
- Wunschbrunnen: Rad links, Gewinne rechts; Wolke kleiner; Turm-Zweige nebeneinander; Markt-Filter in 4 Spalten
Alles steht in einer Media-Query, am PC ändert sich nichts. Wird NACH skin.css wirksam (Selektoren mit #module-container).
Nach Änderungen die ?v= in index.php hochzählen.
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {

/* ---- Köpfe: Titel klein, Untertitel weg ---- */
html body #module-container :is(.forge-head, .tv-head) { top: 2px; padding: 0 170px; }
html body #module-container :is(.forge-head, .tv-head, .well-head, .cl-head, .iv-head, .ar-head, .hx-head, .sh-head, .bk-head, .mine-head, .wl-head, .mh-head, .mk-head) p { display: none; }
html body #module-container :is(.forge-head, .tv-head, .well-head, .cl-head, .iv-head) h2 { font-size: 18px; }

/* ---- "Stufe n [Ausbauen]": klein oben rechts statt mittig über den Knöpfen ---- */
html body #module-container :is(.forge-bld, .tv-bld) {
position: absolute; top: 4px; left: auto; right: 6px; transform: none; z-index: 6;
font-size: 11px; padding: 2px 3px 2px 9px; gap: 6px;
}
html body #module-container :is(.well-bld, .cl-bld) {
position: absolute; top: 4px; right: 8px; z-index: 6;
font-size: 11px; padding: 2px 3px 2px 9px; gap: 6px; white-space: nowrap;
}
html body #module-container :is(.forge-bld, .tv-bld, .well-bld, .cl-bld, .iv-chip) button { padding: 4px 10px; min-height: 26px; font-size: 11px; }

/* ---- Schmiede / Taverne: Knöpfe nebeneinander, mittig ---- */
html body #module-container :is(.forge-actions, .tv-actions) {
top: calc(50% + 14px); bottom: auto; transform: translate(-50%, -50%);
flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch;
width: min(96%, 760px); gap: 8px;
}
html body #module-container :is(.forge-act, .tv-act) { flex: 1 1 200px; min-width: 0; padding: 8px 12px; gap: 10px; }
html body #module-container :is(.forge-act .fm-ico, .tv-act .mi) { font-size: 24px; }
html body #module-container :is(.forge-act, .tv-act) strong { font-size: 14px; }
html body #module-container :is(.forge-act, .tv-act) small { font-size: 11px; }
html body #module-container :is(.forge-act, .tv-act):hover { transform: none; }
/* Fenster in den Gebäuden: weniger Rand, mehr Platz für den Inhalt */
html body #module-container :is(.forge-body, .tv-body) { padding: 8px 10px 16px; }
html body #module-container :is(.forge-panel-head, .tv-ph) { padding: 6px 10px; }
html body #module-container :is(.forge-panel-head .forge-avatar, .tv-ph .tv-av) { width: 32px; height: 32px; font-size: 18px; }
html body #module-container :is(.forge-x, .tv-x, .tw-x) { width: 34px; height: 34px; }

/* ---- Wunschbrunnen: Rad links, Spielen-Knopf daneben, Gewinne darunter/rechts ---- */
html body #module-container .well-inner { padding: 30px 10px 12px; gap: 4px; }
html body #module-container .well-layout { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; }
html body #module-container .well-left { display: grid; grid-template-columns: auto minmax(150px, 230px); align-items: center; gap: 18px; }
html body #module-container .well-wheel-wrap { width: min(210px, calc(100vh - 130px)); }
html body #module-container .well-pointer { top: -8px; border-left-width: 10px; border-right-width: 10px; border-top-width: 20px; }
html body #module-container .well-actions { gap: 6px; }
html body #module-container .well-spin { min-width: 0; width: 100%; min-height: 34px; padding: 6px 14px; font-size: 14px; }
html body #module-container .well-prizes { max-width: 260px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 8px; }
html body #module-container .well-prizes li { padding: 3px 6px; font-size: 12px; }

/* ---- Wolke ---- */
html body #module-container .cl-inner { padding: 6px 10px 16px; gap: 6px; }
html body #module-container .cl-cloud { width: min(210px, 56vw); }
html body #module-container .cl-pct b { font-size: 26px; }
html body #module-container .cl-panel { padding: 8px 10px; }
html body #module-container .cl-luck { font-size: 12px; padding: 6px 10px; }

/* ---- Elfenbeinturm ---- */
html body #module-container .iv-head { margin: 0 0 4px; }
html body #module-container .iv-chips { gap: 6px; margin-bottom: 6px; }
html body #module-container .iv-chip { padding: 2px 3px 2px 9px; font-size: 11px; }
html body #module-container .iv-panel { padding: 8px 10px; margin-bottom: 8px; }
html body #module-container .iv-panel h3 { font-size: 14px; margin-bottom: 4px; }

/* ---- Turm (Forschung), Zentrale, Markt ---- */
html body #module-container .tw-inner { padding: 6px 10px 16px; gap: 8px; }
html body #module-container .tw-bar { padding: 6px 10px; gap: 4px 10px; }
html body #module-container .tw-bar h2 { font-size: 17px; }
html body #module-container .tw-up { padding: 4px 14px; min-height: 30px; }
html body #module-container .tw-active { padding: 6px 10px; font-size: 13px; }
html body #module-container .tw-branches { grid-template-columns: repeat(3, 1fr); gap: 8px; }
html body #module-container .tw-branch { flex-direction: column; gap: 4px; padding: 8px; text-align: center; }
html body #module-container .tw-branch .tb-ico { width: 38px; height: 38px; font-size: 20px; border-width: 2px; }
html body #module-container .tw-branch strong { font-size: 14px; }
html body #module-container .tw-nodes { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 6px; }
html body #module-container .tw-node { min-height: 88px; padding: 6px 4px; gap: 3px; }
html body #module-container .tw-node .tn-ico { width: 36px; height: 36px; font-size: 18px; }
html body #module-container .tw-card { max-height: 96%; padding: 10px 12px 16px; }

html body #module-container .hq-wrap { padding: 6px 10px 16px; gap: 8px; }
html body #module-container .hq-head { padding: 6px 12px; }
html body #module-container .hq-head h2 { font-size: 18px; }
html body #module-container .hq-menu { gap: 6px; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
html body #module-container .hq-tile .hq-ic { width: 56px; height: 56px; font-size: 26px; }
html body #module-container #rathaus-dynamic-content { padding: 10px; min-height: 0; }

html body #module-container .mk-app { padding: 6px 10px 16px; }
html body #module-container .mk-head { padding: 6px 12px; margin-bottom: 6px; }
html body #module-container .mk-head h2 { font-size: 18px; }
html body #module-container .mk-tab { min-height: 34px; padding: 4px 12px; }
html body #module-container .mk-card { padding: 8px; margin-bottom: 6px; }
html body #module-container .mk-filter { grid-template-columns: repeat(4, 1fr); gap: 4px 8px; }
html body #module-container .mk-filter :is(input, select) { min-height: 32px; padding: 2px 8px; font-size: 13px; }

/* ---- Allgemein: Eingabefelder und Knöpfe in Gebäuden etwas flacher ---- */
html body #module-container :is(.mk-app, .tw-inner, .iv-inner, .hq-wrap) :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 32px; }

/* ---- Kaserne & Co.: Kästchen nie umbrechen ---- */
html body #module-container :is(.bk-chip, .iv-chip, .forge-bld, .tv-bld, .well-bld, .cl-bld) { white-space: nowrap; }
html body #module-container .bk-inner { padding: 6px 10px 16px; gap: 8px; }
html body #module-container .bk-chips { gap: 6px; }
html body #module-container .bk-chip { min-height: 28px; padding: 2px 10px; }
/* ---- Turm: Ausbauen-Knopf nicht über die ganze Breite ---- */
html body #module-container .tw-bar > .tw-up { width: auto; min-width: 190px; margin-left: auto; }
/* ---- Fenster in Schmiede/Taverne: flacher ---- */
html body #module-container :is(.forge-popup, .tv-popup) :is(.forge-say, .tv-say) { display: none; }
html body #module-container :is(.forge-popup, .tv-popup) button:not(.forge-x):not(.tv-x):not(.forge-tile) { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
html body #module-container .forge-res { padding: 4px 10px; }
html body #module-container .tv-stam { gap: 6px; }

/* ---- Arena: Titel links, Reiter + Kästchen in einer Zeile daneben, Inhalt darunter ---- */
html body #module-container .ar-inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px 16px; }
html body #module-container .ar-inner > .ar-head { flex: 0 0 auto; text-align: left; }
html body #module-container .ar-inner > .ar-chips { flex: 1 1 auto; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
html body #module-container .ar-inner > :is(#ar-msg, #ar-body) { flex: 1 1 100%; min-width: 0; }
html body #module-container .ar-tabs { margin: 0; }
html body #module-container .ar-tab { min-height: 30px; padding: 2px 12px; white-space: nowrap; font-size: 12px; }
html body #module-container .ar-chip { min-height: 28px; padding: 2px 10px; white-space: nowrap; }
html body #module-container .ar-chip button { min-height: 24px; padding: 2px 10px; }
html body #module-container .ar-head h2 { font-size: 18px; }

/* ---- Taverne: „Zurück“ im Fenster doppelt sich mit dem X oben rechts -> ausblenden ---- */
html body #module-container .tv-body > .tv-btn.sm[onclick*="EpicaTavern.close"] { display: none; }

/* ---- Schmiede: zwei Spalten (links Schmiedefeld, rechts Inventar), Feld mit Item in der Mitte der Karte ---- */
html body #module-container .forge-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 10px 12px; }
html body #module-container .forge-inv { position: static; max-height: calc(100vh - 150px); overflow-y: auto; }
html body #module-container .forge-slot { width: 84px; height: 84px; font-size: 36px; }
html body #module-container .forge-card { gap: 6px; padding: 8px; }
html body #module-container .forge-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }

/* ---- Taverne: Chancen-Zeile weg ---- */
html body #module-container .tv-chances { display: none; }

/* ---- Zentrale: großes Kopffeld schmal (eine Zeile, ohne Hinweistext) ---- */
html body #module-container .hq-wrap { padding: 6px 10px 24px; gap: 8px; }
html body #module-container .hq-head { padding: 4px 10px; gap: 6px; flex-wrap: nowrap; border-radius: 12px; }
html body #module-container .hq-head h2 { font-size: 17px; }
html body #module-container .hq-lvl { min-width: 24px; height: 24px; border-radius: 12px; margin-right: 6px; }
html body #module-container .hq-upg { flex-wrap: nowrap; gap: 8px; }
html body #module-container .hq-btn { min-height: 30px; padding: 2px 14px; }
html body #module-container .hq-note { display: none; }
html body #module-container .hq-menu { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
html body #module-container .hq-tile { gap: 4px; padding: 2px; }
html body #module-container .hq-tile .hq-ic { width: 56px; height: 56px; font-size: 24px; }

/* ---- Bestiarium: Such-/Filterbereich weg ---- */
html body #module-container .bs-tools { display: none; }

/* ---- Alles in Gebäuden und Menüs insgesamt etwas kleiner (Weltkarte ausgenommen) ---- */
html body #module-container > :not(#epica-map-root):not(:has(#epica-map-root)):not(:has(.castle-wrapper)):not(.castle-wrapper) { zoom: 0.84; }
}