/* Fenster-Rahmen (js/ui/fenster.js): fester Kopf mit Titel und X, scrollender Inhalt, nie über den Bildschirmrand,
   Safe-Area (Notch links/rechts im Querformat, Home-Leiste unten) eingerechnet, Schrift mindestens 13 px.
   Wird als letzte CSS-Datei geladen und überschreibt die alten Kartenmaße. */
:root {
  --fx-pad: 6px;
  --fx-vh: 100vh;
}
@supports (height: 100dvh) { :root { --fx-vh: 100dvh; } }

/* Overlay: Abstand = Safe-Area + 6 px, Karte höchstens so groß wie der Rest */
.overlay.show { padding: calc(var(--st) + var(--fx-pad)) calc(var(--sr) + var(--fx-pad)) calc(var(--sb) + var(--fx-pad)) calc(var(--sl) + var(--fx-pad)); height: var(--fx-vh); bottom: auto; }
.overlay > .fx-card { display: flex !important; flex-direction: column; max-width: 100% !important; max-height: 100% !important; padding: 0 !important; overflow: hidden !important; gap: 0 !important; }

.fx-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 14px; border-bottom: 1px solid rgba(255, 236, 200, .12); position: relative; z-index: 4; }
.fx-head:has(.fx-back:not([hidden])) { padding-left: 4px; }
.fx-head .fx-title { flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; position: static !important; text-align: left !important; font: 800 18px/1.15 Cinzel, serif !important; color: #fff3d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: auto !important; }
.fx-head .fx-extra { position: static !important; flex: 0 1 auto; margin: 0 !important; min-width: 0; }
.fx-x, .fx-back { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 14px; padding: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28), 0 2px 8px rgba(0, 0, 0, .3); touch-action: manipulation; }
.fx-x svg, .fx-back svg { width: 22px; height: 22px; display: block; pointer-events: none; }
.fx-x:active, .fx-back:active { transform: scale(.94); background: rgba(255, 255, 255, .24); }
.fx-hidden { display: none !important; }

/* Inhalt: scrollt senkrecht, Wischen bleibt im Fenster (keine Kamera-/Joystick-Gesten dahinter) */
.fx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; padding: 10px 14px 14px; }
.fx-body *, .fx-board * { touch-action: pan-y; }
.fx-body canvas, .fx-board canvas, .wm-card canvas, .fx-body .anvil, .fx-body input[type=range] { touch-action: none; }
.overlay, .fx-board { touch-action: pan-y; }
#sheet .sh-body, #shop .shop-body, #shop .shop-side, #trade .tr-cols, #worldmap .wm-side, #owPanel .ow-body, #sheet .sh-detail { -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }

/* ---------- Menü und Einstellungen ---------- */
.menu-card.fx-card { width: min(600px, 100%) !important; }
.menu-card .menu-grid { margin-top: 0; }
.menu-grid .sect { font-size: 13px; margin-top: 6px; }
.menu-grid .btn.small { font-size: 15px; min-height: 44px; }
.cls-mini { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.cls-mini button { font-size: 13px; padding: 6px 4px; min-height: 44px; }
.cls-mini button small { font-size: 13px; }
.menu-grid .slider { font-size: 15px; }
.menu-grid .seg button { min-height: 44px; font-size: 14px; }

/* ---------- Talente ---------- */
.tal-card.fx-card { width: min(780px, 100%) !important; }
.tal-card .fx-body { padding-top: 6px; }
.tal-tiers button { font-size: 13px; padding: 8px 12px; min-height: 36px; }
.tcard span { font-size: 13px; }
.tal-foot { font-size: 13px; }

/* ---------- Heldenbogen ---------- */
.sh-card.fx-card { width: min(860px, 100%) !important; height: min(440px, 100%) !important; }
.sh-card > .fx-body { display: flex; gap: 10px; position: relative; overflow: hidden; padding: 8px 10px 10px; }
.sh-card .sh-left { padding-top: 0; align-self: flex-start; max-height: 100%; overflow-y: auto; }
.sh-card .sh-tabs { margin-left: 0; }
.sh-card .sh-tabs button { font-size: 14px; padding: 8px 12px; min-height: 36px; }
.sh-card .sh-detail { top: 6px; bottom: 6px; right: 8px; max-width: calc(100% - 16px); }
.slot span { font-size: 11px; }
.sh-top, .sh-top .mat { font-size: 13px; } .mat small { font-size: 12px; }
.sh-who small { font-size: 12px; } .sh-who span { font-size: 13px; } .sh-who .rk { font-size: 13px; }
.icard .ir, .icard .iw, .icard .ifoot, .icard .setbox, .cur-lbl { font-size: 12.5px; }
.icard .st, .icard .st em, .icard .cmpsum, .icard .leg { font-size: 13px; }
@media (max-height: 430px) {
  .sh-port { width: 150px; height: auto; }
  .sh-port canvas { width: 150px; height: 176px; }
  .slot { width: 54px; height: 54px; }
  .sh-slots { gap: 6px; }
}

/* ---------- Händler, Schmied, Lagerhaus ---------- */
.shop-card.fx-card { width: min(880px, 100%) !important; height: min(440px, 100%) !important; display: flex !important; }
.shop-card > .fx-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto minmax(0, 1fr); column-gap: 12px; overflow: hidden; padding: 8px 10px 10px; }
.shop-card:has(.lagercols) > .fx-body { grid-template-columns: minmax(0, 1fr) 0; }
.shop-card .sh-tabs { grid-column: 1; grid-row: 1; }
.shop-card .shop-body { grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; padding-right: 4px; }
.shop-card .shop-side { grid-column: 2; grid-row: 1 / 3; min-height: 0; overflow-y: auto; padding-bottom: 6px; }
.fx-head .shop-top { gap: 10px; font-size: 13px; flex-wrap: nowrap; }
.offer, .offer b { font-size: 13px; } .offer em { font-size: 11px; }
.bb, .potrow, .cost { font-size: 13px; } .potrow small { font-size: 12px; }
.anvil b { font-size: 12px; }
.sets button { font-size: 12.5px; } .sets button small { font-size: 12px; }
.slotsel button { font-size: 13px; padding: 7px 11px; }
@media (max-width: 760px) {
  .shop-card > .fx-body { grid-template-columns: minmax(0, 1fr) 236px; }
  .offers { grid-template-columns: repeat(3, 1fr); }
  .fx-head .shop-top .mat:nth-of-type(n+3) { display: none; }
}

/* ---------- Tausch ---------- */
.trade-card.fx-card { width: min(780px, 100%) !important; }
.trade-card > .fx-body { display: flex; flex-direction: column; overflow: hidden; padding-top: 8px; }
.trade-card .tr-cols { flex: 1 1 auto; min-height: 0; }
.tro, .tr-gold, .tr-note { font-size: 13px; }

/* ---------- Abend-Ehrung ---------- */
.ev-card.fx-card { width: min(820px, 100%) !important; }
.ev-card .fx-head { border-bottom: 0; justify-content: center; }
.ev-card .fx-title { text-align: center !important; font-size: 24px !important; }
.ev-card > .fx-body { display: flex; flex-direction: column; gap: 8px; }
.ev-sub { font-size: 13px; margin-top: 0; }
.ev-table table { font-size: 13px; } .ev-table th { font-size: 12px; }

/* ---------- Tafeln (Kopfgelder, Kartenfetzen) ---------- */
.ow-card.fx-card { width: min(780px, 100%) !important; }
.ow-card > .fx-body { margin-top: 0; }
.bty-q, .bty-m, .bty-h span, .bty-f small, .bty-f .btn.small { font-size: 13px; }

/* ---------- Weltkarte: Kopf über der rechten Spalte, Karte füllt den Rest ---------- */
#worldmap.show { padding: calc(var(--st) + var(--fx-pad)) calc(var(--sr) + var(--fx-pad)) calc(var(--sb) + var(--fx-pad)) calc(var(--sl) + var(--fx-pad)); }
.wm-card.fx-card { flex-direction: row !important; width: 100% !important; height: 100% !important; max-width: 1180px !important; padding: 8px !important; gap: 8px !important; }
.wm-card > .fx-head { position: absolute; right: 8px; top: 6px; width: 236px; min-height: 50px; padding: 0 0 0 6px; border-bottom: 0; }
.wm-card .wm-side { padding-top: 54px; flex-basis: 236px; font-size: 13px; }
.wm-row span small, .wm-empty, .wm-reg, .wm-foot { font-size: 12px; }
.wm-row .btn.small { font-size: 13px; padding: 7px 9px; }

/* ---------- Brett: Karten mit klebendem X, nie größer als der sichtbare Bereich ---------- */
.fx-board { max-height: calc(var(--fx-vh) - 2 * var(--st) - 2 * var(--sb) - 16px) !important; max-width: calc(100vw - var(--sl) - var(--sr) - 16px) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.fx-board > .fx-x.fx-float { position: sticky; top: 0; display: grid; margin: -8px -8px -36px auto; z-index: 6; }
.fx-board > .x { display: none !important; }
.bd-end.story.fx-board > .fx-x.fx-float { position: absolute; right: 6px; top: 6px; margin: 0; }
.bd-end.story.fx-board { max-height: calc(var(--fx-vh) - 2 * var(--st) - 2 * var(--sb) - 16px) !important; }
.bd-end.story .be-r ol { max-height: none; }
.bd-lobby.fx-board { width: 440px; }
.bd-lobby p, .bd-lobby small, .bd-end small, .bd-pick small, .bd-pick p, .bd-hints .h p, .bd-hints .foot { font-size: 13px !important; }
.bd-hints .h b, .bd-pick .opts button b { font-size: 13px; } .bd-pick .opts button span, .bd-hints .h em { font-size: 12px; }
.bd-pick .opts { max-height: none; }
.anvil b { position: relative; z-index: 1; font-size: 12px; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.shop-side .hint, .sh-detail .hint, .fx-body .hint { font-size: 13px; }

/* Lesbarkeit im Heldenbogen, Profil, Erfolge, Händler, Tausch: Fließtext und Beschriftungen mindestens 13 px,
   reine Zeichen in Kästchen (Pfeil, Stufe, Preis-Plakette) mindestens 11 px */
.fx-card .hint, .fx-card .srow .sb, .fx-card .setp small, .fx-card .legline, .fx-card .rankbox small, .fx-card .titles button,
.fx-card .bestr, .fx-card .heroesl span, .fx-card .tld, .fx-card .tle small, .fx-card .tle time, .fx-card .achg button,
.fx-card .ach span, .fx-card .ach > small, .fx-card .sh-who small, .fx-card .sh-who span, .fx-card .mat small,
.fx-card .icard .ir, .fx-card .icard .iw, .fx-card .icard .ifoot, .fx-card .icard .ifoot .gold, .fx-card .icard .setbox, .fx-card .icard .cmpsum,
.fx-card .icard .leg, .fx-card .cur-lbl, .fx-card .offer b, .fx-card .potrow small, .fx-card .sets button, .fx-card .sets button small,
.fx-card .slotsel button, .fx-card .tro, .fx-card .tr-gold button, .fx-card .tr-note, .fx-card .h3 em, #trMineOk, .fx-card .sumg span { font-size: 13px; }
.fx-card .slot span, .fx-card .cell .up, .fx-card .slot .up, .fx-card .cell .cmp, .fx-card .cell .pr, .fx-card .offer em, .fx-card .ach .ap em, .fx-card .anvil b { font-size: 11.5px; }
.fx-card .cell .pr { line-height: 15px; }
.fx-card .ach .ap em { top: -15px; }
.sh-card .sh-detail { background: rgb(12, 17, 28); }
.fx-card .grid:not(.small) { grid-template-columns: repeat(auto-fill, 46px); }
/* Titel der Brett-Karten frei vom X halten */
.fx-board > .fx-x ~ b:first-of-type { padding-left: 46px; padding-right: 46px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.fx-board > .fx-x + small { padding-right: 46px; }
.bd-end.story.fx-board .be-r > small:first-child { display: block; min-height: 44px; padding-right: 50px; }
.bd-card .bdc-opt span { font-size: 12.5px !important; line-height: 1.25; }
.bd-end .pod em { font-size: 11.5px !important; } .bd-end .pod span { font-size: 13px !important; }