/* ui-windows.css — Fensterebene, Knöpfe, Listen, Karte, Rückkehr, Bildschirmgrößen.
 * Teil der Oberflächen-Stile (bis 24.10.2026 alles in ui.css). Reihenfolge der
 * Einbindung in index.html zählt: nach ui-inventory.css, vor ui-talents.css. */
/* ── Fensterebene── */
#overlay, .modal {
    position: fixed; inset: 0; z-index: 20;
    display: none; align-items: flex-start; justify-content: center;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 12px 28px;
    background: rgba(8,6,14,.72);
}
#overlay.open, .modal.open { display: flex; }
/* Ladefenster „Wird nachgerechnet“ über dem Startbildschirm (#start, z 40) — sonst
   lag es beim Start unsichtbar darunter (Fund 23.10.2026). */
#loading { z-index: 45; align-items: center; }

/* ── Knöpfe── */
.pbtn {
    display: block; width: 100%; text-align: left;
    font: inherit; font-size: 20px; letter-spacing: 2px;
    color: var(--ink); background: #3a2814;
    border: 4px solid var(--ink);
    box-shadow: 0 0 0 4px var(--wood-d), 0 6px 0 0 var(--wood-d);
    padding: 13px 18px; margin-bottom: 16px; cursor: pointer;
}
.pbtn:hover:not(:disabled) { background: #56411f; color: var(--gold); }
.pbtn:disabled { opacity: .4; cursor: default; }
.pbtn.sel { background: #8a5a1c; color: #fff6d8; }
/* Auswahl-Reihe im Menü (Bildschärfe, Sprache): Knöpfe nebeneinander, die gewählte Stufe
   hell (.sel). Der Abstand unten hält die Reihe vom nächsten Knopf frei — ohne ihn lagen
   die Knöpfe auf „Spielstand löschen" (Fund Jens 20.10.2026). */
.pick-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.pbtn.pick { width: auto; margin: 0 0 6px; }
.credits { font-size: 14px; line-height: 1.5; color: #c9bfa8; margin-bottom: 18px; }
.pbtn.ok  { text-align: center; }
.pbtn .r  { float: right; color: var(--gold); }

/* Eingabefelder (Konto/Cloud-Login) */
.field {
    display: block; width: 100%; box-sizing: border-box;
    font: inherit; font-size: 18px; letter-spacing: 1px;
    color: #fff3dc; background: #201626;
    border: 4px solid var(--ink); border-radius: 8px;
    box-shadow: inset 0 3px 0 #120c1c;
    padding: 11px 14px; margin-bottom: 10px;
}
.field::placeholder { color: #8a7f9c; }
.field:focus { outline: none; border-color: var(--gold); }

/* ── Listenzeilen in Fenstern── */
.line {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-size: 19px; padding: 14px 0; border-bottom: 4px dotted #4a3520;
}
.line:last-child { border-bottom: none; }
.line .sub { font-size: 15px; }
/* Handelsposten (18.10.2026, vorher Inline-Stile in trade.js) */
.trade-head { margin-bottom: 16px; }
.trade-gold { color: var(--gold); }
.trade-btns { display: flex; gap: 10px; }
.pbtn.trade-sell { width: auto; margin: 0; padding: 10px 14px; }
/* Depot (18.10.2026, vorher Inline-Stile in depot.js) */
.depot-wrap { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.depot-col { flex: 1; min-width: 260px; }
.depot-row-main { min-width: 0; }
/* Versorgungsbüro (18.10.2026, vorher Inline-Stile in orders.js) */
.ord-head { margin-bottom: 10px; padding: 12px 16px; }
.ord-rank { font-size: 16px; font-weight: 800; }
.ord-ruf { margin-top: 2px; }
.ord-rufval { color: #c9a0ff; }
.ord-ansehen { margin-top: 5px; color: #8fe3a0; }
.ord-rules { margin-top: 2px; color: #8aa0b8; line-height: 1.35; }
.ord-warn { margin-bottom: 10px; padding: 11px 14px; border-color: #e0735a; color: #ffb59e; font-weight: 700; background: rgba(224,115,90,.12); }
.ord-switch { display: flex; gap: 8px; margin-bottom: 12px; }
.ord-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ord-all { margin-left: auto; }
.ord-reroll { margin-top: 10px; }
.ord-card { margin: 8px 0; padding: 14px 16px; }
.ord-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ord-main { flex: 1; }
.ord-title { font-size: 17px; font-weight: 700; }
.ord-flavor { margin-top: 2px; }
.ord-reward-box { text-align: right; min-width: 150px; }
.ord-reward { font-weight: 700; color: #ffcc55; }
.ord-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.ord-have { color: #e0735a; }
.ord-have.ok { color: #8fe3a0; }
.ord-src { margin-top: 3px; }
.ruf-intro { margin-bottom: 10px; }
.ruf-card { margin: 8px 0; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ruf-name { font-size: 16px; font-weight: 700; }
.ruf-need { color: #e0735a; margin-top: 3px; }
.ruf-price-box { text-align: right; min-width: 130px; }
.ruf-price { font-weight: 800; color: #c9a0ff; }
.ruf-price.maxed { color: #8fe3a0; }
.ruf-btn-slot { margin-top: 6px; }
/* Raffinerie (18.10.2026, vorher Inline-Stile in refinery.js) */
.smelt-xp { margin: 8px 0 2px; }
.slot-bar { margin-top: 4px; }
/* Die Ansicht zeichnet den Balken selbst je Bild; ein Übergang obendrauf liefe hinterher. */
.bar > i.smelt-fill { transition: none; }
.refine-rec-main { min-width: 0; display: flex; gap: 10px; align-items: center; }
.refine-rec-text { min-width: 0; }
.refine-glyph { font-size: 26px; }
.fuel-info { margin-top: 8px; }
/* Ausgeblendet über das hidden-Attribut (shell/view.js) — auch gegen display-Regeln */
[hidden] { display: none !important; }

/* ── Karte── */
#mapwrap { position: relative; }
#mapcanvas { width: 100%; display: block; image-rendering: pixelated;
             border: 1px solid rgba(57, 215, 255, .25); border-radius: 10px; }
/* Ortspunkte (Fund Jens 21.10.2026: „blaue Punkte auf Blau sieht man kaum, wirkt
   unübersichtlich"). Jeder Punkt hat jetzt einen dunklen Ring, der Name steht auf einem
   dunklen Schild — so bleibt beides auf jedem Untergrund lesbar. Unbekannte Ebenen sind
   nur ein kleiner grauer Punkt ohne „???". */
.node {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    cursor: pointer;
}
/* Der PUNKT sitzt genau auf der Stelle, Schild und Hinweis hängen darunter (07.11.2026, Fund Jens:
   die Wege liefen neben den Punkten vorbei — vorher wurde Punkt + Schild zusammen mittig gesetzt,
   der Punkt saß dadurch eine halbe Schildhöhe zu hoch). */
.node > b, .node > em.need { position: absolute; left: 50%; transform: translateX(-50%); }
.node > b { top: calc(100% + 3px); }
.node > em.need { top: calc(100% + 28px); }
.node i {
    display: block; width: 26px; height: 26px; border-radius: 50%;
    background: #eafaff; border: 4px solid #39d7ff;
    box-shadow: 0 0 0 3px rgba(4, 10, 18, .9), 0 0 12px 3px rgba(57, 215, 255, .55);
}
.node b {
    font-size: 14px; letter-spacing: .5px; white-space: nowrap; color: #f2f8fc;
    background: rgba(6, 12, 20, .86); border: 1px solid rgba(57, 215, 255, .35);
    border-radius: 7px; padding: 2px 8px; text-shadow: none;
}
.node:hover b { border-color: #7fdcff; color: #fff; }
.node.here i { background: #fff3c4; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(4, 10, 18, .9), 0 0 16px 5px rgba(255, 204, 85, .7);
    animation: mapHere 1.6s ease-in-out infinite; }
.node.here b { color: #1a1204; background: var(--gold); border-color: #ffe39a; font-weight: 700; }
@keyframes mapHere { 50% { transform: scale(1.25); } }
.node.base i { border-color: var(--gold); }
.node.locked { cursor: default; }
.node.locked i { width: 20px; height: 20px; background: #3a4250; border: 2px solid #6b7686;
    box-shadow: 0 0 0 3px rgba(4, 10, 18, .85); }
.node.locked b { color: #9aa6b4; border-color: rgba(255, 255, 255, .12); }
.node.unknown i { width: 14px; height: 14px; border-width: 2px; opacity: .8; }
/* Nebenpunkt neben der Basis (Startrampe): kleiner, Hinweis darunter, solange gesperrt. */
.node.side b { font-size: 12px; }
.node.side i { width: 20px; height: 20px; }
.node em.need { font-style: normal; font-size: 11px; color: #c3cdd8; white-space: nowrap;
    background: rgba(6, 12, 20, .8); border-radius: 5px; padding: 1px 6px; }
/* Totenkopf an Boss-Ebenen: dort wartet eine Boss-Instanz (rotes Portal). Sitzt
   oben rechts direkt am PUNKT (Fund Jens 21.10.: hing vorher am Namensschild und
   damit je nach Namenslänge weit daneben). */
.node em.skull {
    position: absolute; top: -14px; left: 50%; margin-left: 6px; font-style: normal; font-size: 17px; line-height: 1;
    color: #fff; background: #d8322b; border: 2px solid #ffb3ae; border-radius: 50%;
    width: 28px; height: 28px; display: grid; place-items: center;
    box-shadow: 0 0 0 2px rgba(4, 10, 18, .9), 0 0 12px rgba(255, 60, 50, .75);
}
/* Eigenes Boss-Symbol (art/ui/boss_marker.png): erst sichtbar, wenn geladen (.img). */
.node em.skull img, .map-legend .lg-skull img { display: none; image-rendering: pixelated; }
.node em.skull.img { background: none; border: 0; box-shadow: none; font-size: 0; width: 36px; height: 36px; top: -20px; }
.node em.skull.img img { display: block; width: 36px; height: 36px; filter: drop-shadow(0 0 3px rgba(4, 10, 18, .95)); }
.map-legend .lg-skull.img { background: none; font-size: 0; width: 22px; height: 22px; }
.map-legend .lg-skull.img img { display: block; width: 22px; height: 22px; }
/* Zeichenerklärung unter der Karte */
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; color: #b9c8d4; }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(4, 10, 18, .9); }
.map-legend .lg.here { background: #fff3c4; border: 2px solid var(--gold); }
.map-legend .lg.open { background: #eafaff; border: 2px solid #39d7ff; }
.map-legend .lg.locked { background: #3a4250; border: 2px solid #6b7686; }
.map-legend .lg-skull { font-style: normal; color: #fff; background: #d8322b; border-radius: 50%;
    width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .node.here i { animation: none; } }

/* ── Rückkehrbildschirm── */
.wc-line { font-size: 19px; padding: 9px 0 9px 26px; position: relative; }
.wc-line::before { content: '▸'; position: absolute; left: 0; color: var(--gold); }
.wc-line b { color: var(--gold); }
.wc-line.warn, .wc-line.warn::before { color: #ff9b52; }

/* Tablet-Bereich (u. a. iPad quer): Leiste bleibt EINreihig, aber das
   Charakter-Panel wird schmaler und die Symbole etwas kompakter, damit alle
   neun samt „Menü" bequem in eine Zeile passen, ohne zu schrumpfen. */
@media (min-width: 761px) and (max-width: 1200px) {
    #bar { gap: 12px; padding: 12px; }
    #bar-char { flex: 0 0 220px; }
    #bar-icons { gap: 8px; }
    .ico { padding: 8px 2px; }
    .ico i { font-size: 26px; }
    .ico span { font-size: 12px; letter-spacing: .5px; }
}

@media (min-width: 761px) and (max-width: 900px) {
    #bar-char { flex: 0 0 180px; }
    .bc-name { font-size: 18px; }
}

/* Portrait-Handy (schmal + hoch): Leiste stapeln — Auto oben, 4×2-Raster. Nur
   im Hochformat, denn im Querformat ist nicht die Breite, sondern die HÖHE knapp. */
@media (max-width: 760px) and (orientation: portrait) {
    #bar { flex-direction: column; gap: 10px; }
    #bar-char { flex: none; }
    #bar-icons { grid-auto-flow: row; grid-auto-columns: auto;
                 grid-template-columns: repeat(4, 1fr); }
    .ico { padding: 7px 2px; }
    .ico i { font-size: 22px; }
    .ico span { font-size: 11px; letter-spacing: .3px; }
}

/* Flacher Querformat-Schirm (Handy quer): Höhe ist knapp → EINreihige, kompakte
   Leiste statt Stapel, kleinere Knöpfe, flachere Lebens-/Erfahrungsbalken. So
   frisst die Leiste nicht mehr das halbe Bild. */
@media (orientation: landscape) and (max-height: 540px) {
    #bar { flex-direction: row; align-items: stretch; gap: 8px; padding: 5px 8px;
           /* Beide Seiten gleich: die Kamera-Aussparung liegt nur auf EINER Seite,
              sonst sitzt die Leiste schief (Fund Jens 19.10.). */
           left: calc(14px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
           right: calc(14px + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
           bottom: calc(10px + env(safe-area-inset-bottom, 0px));
           border-radius: 12px; }
    #bar-char { flex: 0 0 158px; gap: 3px; justify-content: center; }
    .bc-name { font-size: 15px; letter-spacing: 1px; }
    .bc-lvl { font-size: 12px; }
    #bar-char .pbar { height: 15px; }
    #bar-char .pbar span { font-size: 10px; }
    .ico.auto { flex: 0 0 62px; }
    #bar-icons { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
    .ico { padding: 3px 2px; gap: 2px; }
    .ico i { font-size: 17px; }
    .ico span { font-size: 9px; letter-spacing: 0; }
    /* Auftrag klein oben links statt ausgeblendet (19.10.2026: am Handy war der
       Dauerauftrag sonst weder sichtbar noch abholbar — Fund Jens). */
    /* Abstand zum Rand wie die Leiste unten (Fund Jens 19.10.: klebte in der Ecke). */
    #quest { top: calc(12px + env(safe-area-inset-top, 0px));
             left: calc(14px + env(safe-area-inset-left, 0px)); max-width: 19vw; }
    #wallet { top: calc(10px + env(safe-area-inset-top, 0px));
              right: calc(14px + env(safe-area-inset-right, 0px)); }
    /* Ortsschild kompakt + ganz oben, damit es die höher stehende Figur nicht
       verdeckt (auf flachen Schirmen sitzt Mara näher an der Bildmitte). */
    #place { top: 6px; padding: 4px 12px; min-width: 0; max-width: 60vw; }
    #place-name { font-size: 15px; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; }
    #place-prog { font-size: 12px; margin: 2px 0 4px; }
    #place .pbar { height: 8px; }
}

/* Hochkant: Auftrag klein unter dem Ortsschild statt ausgeblendet (siehe oben). */
@media (max-width: 760px) and (orientation: portrait) {
    #quest { top: calc(138px + env(safe-area-inset-top, 0px));
             left: calc(14px + env(safe-area-inset-left, 0px)); max-width: 44vw; }
}

@media (max-width: 760px) {
    /* Ortsschild schmaler, damit es nicht unter den Geldbeutel läuft. */
    #place { min-width: 0; max-width: 58vw; padding: 8px 12px; }
    #place-name { font-size: 18px; letter-spacing: 2px; }
    #place-prog { font-size: 14px; margin: 4px 0 6px; }

    /* ── Fenster kompakter + mehrspaltige Layouts stapeln── */
    .win { padding: 16px 14px; }
    .win h2 { font-size: 22px; letter-spacing: 3px; margin: 0 0 14px; }
    /* Begleiter-Kopf: Bild / Text / Werte übereinander statt drei enge Spalten. */
    .pet-head { grid-template-columns: 1fr !important; gap: 12px; }
    /* Talentbaum: Schiene/Graph/Details untereinander; breiter Graph wird
       innerhalb seines Rahmens seitlich scrollbar statt abgeschnitten. */
    .tal { grid-template-columns: 1fr !important; gap: 14px; }
    .tal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Werkstoff-Kacheln etwas kleiner, damit eine Reihe mehr passt. */
    .mat-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
    /* Zeilen (Label + Knopf) dürfen umbrechen statt überzulaufen. */
    .row { flex-wrap: wrap; gap: 8px 12px; }
}


/* ── Login-Kalender (windows/login.js, 07.11.2026) ── */
#winbox[data-win="login"] { width: min(980px, 96vw); }
.lg-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lg-titles { flex: 1 1 220px; min-width: 0; }
.lg-range { font: 600 12px var(--sk-body); color: #9fb0d8; margin-top: 2px; }
.lg-prog { flex: 1 1 200px; min-width: 160px; }
.lg-bar { position: relative; height: 22px; border-radius: 11px; background: #0a0c22; overflow: hidden;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .6), 0 0 0 2px rgba(150, 170, 240, .25); }
.lg-bar > i { display: block; height: 100%; border-radius: 11px; background: linear-gradient(#ffe27a, #ffb52e 60%, #f08a1e);
    transition: width .4s; }
.lg-bar > span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px var(--sk-disp); color: #fff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.lg-claim { flex: none; min-width: 130px; font-size: 16px; padding: 10px 18px; }
.lg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 760px) { .lg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } }
@media (max-width: 420px) { .lg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lg-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
    padding: 6px 4px 8px; border-radius: 12px; text-align: center;
    background: linear-gradient(#22306a, #141c45); border: 2px solid rgba(150, 170, 240, .25); }
.lg-day { font: 600 11px var(--sk-body); color: #9fb0d8; }
.lg-ico { width: 40px; height: 40px; object-fit: contain; margin: 2px 0; }
.lg-amt { max-width: 100%; font: 400 17px var(--sk-disp); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-name { max-width: 100%; font: 600 11px var(--sk-body); color: #b9c8f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-tile.bonus { background: linear-gradient(#5a2fa0, #2c1466); border-color: #c77dff; }
.lg-tile.today { border-color: #ffd447; box-shadow: 0 0 14px rgba(255, 212, 71, .6); }
.lg-tile.next { border-color: rgba(255, 212, 71, .55); border-style: dashed; }
.lg-tile.done > :not(.lg-tick) { opacity: .4; }
.lg-tick { display: none; position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
    place-items: center; font: 400 14px/1 var(--sk-disp); color: #fff; background: linear-gradient(#7af0a8, #2fbf6a);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.lg-tile.done .lg-tick { display: grid; }
.lg-hint { margin-top: 10px; }