/* ui-holo.css — Knopf-Familie, Rückkehr im Holo-Look, Drohnen-Hangar.
 * Teil der Oberflächen-Stile (bis 24.10.2026 alles in ui.css). Reihenfolge der
 * Einbindung in index.html zählt: nach ui-start.css, vor ui-holo-hud.css. */
/* ── Knopf-Familie (Wunsch Jens 17.10.2026: „passt nicht zu unserem Design") ──
   Gold = die EINE Hauptsache einer Karte. Alles andere tritt zurück.
   .seg   Mengenwahl als eine Leiste (10 | 100 | 1000 | Alles), Gold nur am Ende
   .buy   Kauf gegen Exos: kleiner Exo-Chip mit Preis, Exo-Türkis wie oben im HUD
   .mini  Nebensache (stornieren, nach vorn): klein, ohne Füllung */
.seg { display: inline-flex; flex-wrap: nowrap; margin-left: auto;
    border: 3px solid var(--ink); box-shadow: 0 3px 0 0 #14101f; }
.seg > .btn { border: 0; box-shadow: none; font-size: 14px; padding: 6px 11px;
    color: var(--ink); background: #37305c; }
.seg > .btn + .btn { border-left: 2px solid rgba(240,230,200,.22); }
.seg > .btn:hover:not(:disabled) { background: #4a4180; color: var(--gold); }
.seg > .btn.gold { color: #2a1c06; background: #d9a02a; }
.seg > .btn.gold:hover:not(:disabled) { color: #2a1c06; background: #f0b83a; }
.seg > .btn:disabled { color: #6f6890; background: #2a2545; }
.btn.buy { font-size: 14px; letter-spacing: .5px; padding: 5px 14px; border-radius: 8px;
    border: 2px solid #39d7ff; box-shadow: 0 0 10px rgba(57,215,255,.25);
    color: #dff7ff; background: rgba(57,215,255,.16); }
.btn.buy:hover:not(:disabled) { color: #fff; background: rgba(57,215,255,.3); }
.btn.buy:disabled, .btn.buy.short { opacity: 1; box-shadow: none; color: #ff9b8a;
    border-color: rgba(255,120,100,.45); background: rgba(255,120,100,.06); }
.btn.buy.short:hover { color: #ffc2b6; background: rgba(255,120,100,.14); }
.btn.mini { font-size: 13px; letter-spacing: .5px; padding: 4px 12px; border-radius: 7px;
    border: 2px solid rgba(240,230,200,.28); box-shadow: none; color: #b8b0d8; background: transparent; }
.btn.mini:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); background: rgba(240,184,58,.08); }
.btn.mini.corner { position: absolute; top: 6px; right: 8px; padding: 2px 8px; line-height: 1; }
.slot > .btn.mini:not(.corner) { margin-top: auto; }
.slot.locked > .btn.buy { margin-top: 12px; }
.slot.locked > .btn.buy + .hint { margin-top: 6px; }
.btn.buy.later:disabled { color: #8a86a8; border-color: rgba(140,165,185,.3); background: transparent; }
/* Zeile mit Text links und Knopf rechts (Ofen kaufen, Ausgabefach). */
.btn-line { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-top: 10px; }
.row.pick > .seg { flex-shrink: 0; }
/* „Alles (…)" gleich breit, damit die Leisten untereinander bündig stehen. */
.seg > .btn { min-width: 5em; }
.seg > .btn.gold { min-width: 11.5em; }
/* Schmal (Handy): Leiste unter den Text, volle Breite, Teile teilen sich den Platz. */
@media (max-width: 560px) {
    .row.pick { flex-wrap: wrap; }
    .row.pick > .seg, .btn-line > .seg { width: 100%; }
    .seg > .btn, .seg > .btn.gold { flex: 1 1 auto; min-width: 0; padding: 6px 3px; font-size: 12.5px; letter-spacing: 0; }
}
/* Schmal (Handy, Fund Jens 19.10.2026): Nichts darf seitlich aus dem Fenster ragen. Zeilen mit
   Text links und Knopf rechts brechen um, wenn der Platz fehlt (der Knopf rutscht darunter);
   Knöpfe dürfen ihren Text umbrechen statt über den Rand zu wachsen. Geprüft mit
   tools/tests/_overflow.js (alle Fenster in Handygröße). */
@media (max-width: 560px) {
    .row, .line, .card-head, .ord-top, .ord-bottom { flex-wrap: wrap; }
    .btn, .pbtn { max-width: 100%; white-space: normal; }
    .ord-reward-box { min-width: 0; text-align: left; }
    /* Handelsposten: beide Verkaufsknöpfe unter dem Namen nebeneinander, halbe Breite. */
    .trade-btns { width: 100%; flex-wrap: nowrap; }
    .trade-btns > .pbtn { flex: 1 1 0; min-width: 0; }
}

/* Bau-Karte (Hangar: Drohnen-Slot bauen) — Zutaten wie im Crafting */
.slot-card { margin: 10px 0 4px; }
.build-cost { padding: 8px 0; font-size: 15px; }
.build-cost.ok .val { color: var(--good); }
.build-cost.miss .val { color: #ff9b8a; }
/* Abschnitt aus mehreren Karten in einer Fenster-Ansicht (js/ui/shell/view.js partBox):
   zählt fürs Layout nicht mit. */
.v-part { display: contents; }

/* Fenster „Exos" (js/ui/windows/exos.js) */
.exo-balance { font-size: 28px; color: #dff7ff; margin: 6px 0 2px; }
.exo-balance .wal-gem { color: #39d7ff; font-style: normal; }
.exo-row .val { color: #7fe3ff; }
.exo-row.done .lbl, .exo-row.done .val { color: #7f7a9c; }
#wal-exos { cursor: pointer; }

/* Fenster „Fundorte" (js/ui/windows/source.js) */
.src-kind { margin: 4px 0 2px; }
.src-row.locked .lbl { color: #7f7a9c; }
.src-main { min-width: 0; }
.src-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; font-size: 11px;
    letter-spacing: 1px; vertical-align: 2px; }
.src-tag.here { color: #bfefff; border: 1px solid rgba(57,215,255,.6); }
.src-tag.best { color: #2a1c06; background: #d9a02a; }
.src-wiki { flex: none; font-size: 13px; letter-spacing: 1px; color: #8ab4ff; white-space: nowrap; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 18px; }
.stat { display: flex; justify-content: space-between; font-size: 16px;
        padding: 7px 0; border-bottom: 3px dotted #3a3358; }
.stat b { color: var(--gold); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.item {
    background: #2a2440; border: 4px solid #14101f;
    box-shadow: inset 0 0 0 3px #4a4266; padding: 12px;
}
.item.worn   { box-shadow: inset 0 0 0 3px var(--gold); }
.item.better { box-shadow: inset 0 0 0 3px var(--good); }
.item-top { display: flex; justify-content: space-between; align-items: center; }
.item-name { font-size: 17px; color: var(--gold); }
.item-slot, .item-base { font-size: 14px; color: var(--dim); margin-top: 4px; }
.item-affix { font-size: 14px; color: #9be9ff; margin-top: 3px; }
.item-cmp { font-size: 14px; margin-top: 6px; }
.item-cmp .up   { color: var(--good); }
.item-cmp .down { color: var(--bad); }
.dots i { display: inline-block; width: 8px; height: 8px; margin-left: 3px;
          background: var(--gold); }

.rating { font-size: 15px; letter-spacing: 1px; }
.rating.leicht  { color: var(--good); }
.rating.passend { color: var(--gold); }
.rating.riskant { color: #ff9b52; }
.rating.tödlich { color: var(--bad); }
.rating.zäh     { color: #c9a46a; }

/* ── Rückkehrbildschirm im Holo-Look (wie der Begleiter-Hangar)── */
#welcome .win {
    background: none;
    border: 30px solid transparent;
    border-image: url('../art/ui/panel_holo.png') 44 fill stretch;
    box-shadow: none;
    filter: drop-shadow(0 0 20px rgba(57,215,255,.22));
}
#welcome h2 {
    color: #9fe9ff;
    text-shadow: 0 0 14px rgba(57,215,255,.55), 2px 2px 0 #05131f;
}
#welcome .sub { color: #9fb4c4; }
#welcome .wc-line { color: #dbe7f2; }
#welcome .wc-line b { color: #7fdcff; }
#welcome .wc-line.warn, #welcome .wc-line.warn b { color: #ff9b52; }
/* Beute-Raster: luftig, scrollt selbst bei viel Beute, Abstand zum WEITER-Knopf. */
#welcome .wc-sec { margin-top: 14px; letter-spacing: .12em; opacity: .7; font-size: 12px; }
#welcome .wc-grid {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin: 10px 0 22px; max-height: 38vh; overflow-y: auto; padding: 2px;
}
#welcome .wc-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    min-width: 64px; max-width: 104px; padding: 10px 8px; border-radius: 10px;
    background: rgba(13,10,20,.55); border: 1px solid rgba(120,235,255,.28);
}
#welcome .wc-chip.gear { border-color: rgba(232,168,56,.4); }
#welcome .wc-chip img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
#welcome .wc-chip .g { font-size: 22px; line-height: 1; color: #8fe6ff; }
#welcome .wc-chip.gear .g { color: var(--gold); }
#welcome .wc-chip b { color: #dff2ff; margin-top: 5px; }
#welcome .wc-chip span { font-size: 11px; opacity: .8; margin-top: 3px; text-align: center; line-height: 1.25; }
#welcome #wc-ok { margin-top: 6px; }
#welcome .pbtn.ok {
    background: rgba(57,215,255,.12); color: #9fe9ff;
    border: 2px solid rgba(57,215,255,.5); border-radius: 10px;
    box-shadow: 0 0 12px rgba(57,215,255,.25);
}
#welcome .pbtn.ok:hover:not(:disabled) { background: rgba(57,215,255,.22); color: #eafaff; }

/* Begleiter-Icons als echtes Bild (art/fx/pet_<id>.png) statt Glyphe. */
.pet-ico-img { image-rendering: pixelated; object-fit: contain; display: block; margin: 0 auto; }
/* Größer als früher: In einer 132 px breiten Kachel wirkte ein 46er Bildchen
   wie ein Briefmarken-Aufkleber — man erkannte Waffe, Bohrer und Berge-Werkzeug
   kaum auseinander. */
.pet-face .pet-ico-img { width: 70px; height: 70px; }
.pet .pet-ico-img { width: 64px; height: 64px; }
.mod-ico-sm { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }

/* ── Drohnen-Hangar: Slots── */
/* `minmax(0, 1fr)` statt `1fr` — das ist der ganze Unterschied zwischen
   „passt" und „ragt raus". Grid-Spalten haben von Haus aus `min-width: auto`
   und schrumpfen NICHT unter die Breite ihres längsten unteilbaren Inhalts.
   Die Bonus-Zeile des Archivars („Erz/min +660 · Erfahrung +264 % · Offline
   +22 %") sprengte damit ihre Spalte und schob die dritte Karte über den
   Fensterrand hinaus (Fund von Jens, 09.08.2026). */
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 0; }
.slot { position: relative; border: 2px solid rgba(57,215,255,.28); border-radius: 14px;
    background: rgba(10,24,38,.55); padding: 18px 12px 14px; text-align: center;
    min-height: 218px; display: flex; flex-direction: column; align-items: center; }
.slot.on { border-color: #39d7ff; box-shadow: 0 0 16px rgba(57,215,255,.25);
    background: rgba(57,215,255,.08); cursor: pointer; }
.slot.on:hover { background: rgba(57,215,255,.13); }
.slot.empty { border-style: dashed; border-color: rgba(57,215,255,.3); justify-content: center; }
/* Gesperrter Platz: sichtbar, aber erkennbar zu. Das Schloss ist ein Ziel —
   ein Platz, den man gar nicht erst sieht, ist keines. */
.slot.locked { border-style: dashed; border-color: rgba(140,165,185,.28);
    background: rgba(10,24,38,.35); justify-content: center; cursor: default; }
.slot.locked .slot-plus { font-size: 30px; opacity: .55; }
.slot.locked .slot-name { color: #8ba7bb; font-size: 15px; }
.slot.locked .hint { line-height: 1.45; }
.slot-badge { position: absolute; top: 8px; left: 12px; font-size: 10px; letter-spacing: 2px; color: #7fb8d6; }
.slot-ico { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated;
    margin: 10px 0 8px; filter: drop-shadow(0 0 10px rgba(57,215,255,.3)); }
.slot-name { font-size: 17px; font-weight: 700; color: #eaf6ff; line-height: 1.15;
    overflow-wrap: anywhere; max-width: 100%; }
/* Sterne der Seltenheit. `letter-spacing` schiebt sie auseinander, sonst
   kleben sechs Sterne zu einem Klumpen zusammen und man zaehlt falsch. */
.slot-stars { font-size: 13px; letter-spacing: 2px; margin-top: 2px; line-height: 1; }
.slot-rank { font-size: 12.5px; margin-top: 3px; color: #8fb8d0; }
/* Fortschrittsbalken — UNGEBUNDEN, nicht nur innerhalb von `.slot`.
   Die Regel hing bis zum 09.08.2026 an `.slot`, benutzt wird `.bar` aber an
   sechs Stellen ausserhalb: Tagesaufgaben, Drohnen-Ausrüstung im Hangar,
   Fähigkeiten, Raffinerie-Warteschlange und jetzt der Stufenbalken der
   Ausrüstung. Überall dort war der Balken unsichtbar — ein `div` ohne Höhe und
   ein `<i>` ohne Hintergrund, das nur so aussah, als fehle das System.
   Der Kontext `.slot` überschreibt weiter unten nichts, weil die Werte
   identisch sind. */
.bar { position: relative; height: 16px; width: 100%; margin: 10px 0 6px; border-radius: 8px;
    overflow: hidden; background: rgba(57,215,255,.1); border: 2px solid rgba(57,215,255,.35); }
.bar > i { position: absolute; inset: 0; display: block;
    background: linear-gradient(90deg,#1b8fc4,#39d7ff); box-shadow: 0 0 10px rgba(57,215,255,.6); }
.bar.full > i { width: 100%; }
/* Beschriftung ÜBER einem Balken (Erkundung), damit kein Text im Balken klebt. */
.bar-label { margin: 10px 0 -4px; font-size: 14px; color: var(--dim); }
.bar > span { position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: #eafaff; text-shadow: 0 1px 2px #000; }
/* Raffinerie-Balken laufen WEICH. Der Tick rechnet genau einmal je Sekunde,
   die Breite springt also im Sekundentakt — ohne Übergang sieht das aus wie
   eine hakende Anlage (Fund von Jens, 09.08.2026). Eine lineare Sekunde ist
   exakt der Abstand zwischen zwei Ticks: Der Balken kommt genau dann am Ziel
   an, wenn der nächste Wert eintrifft, und läuft dadurch gleichmässig durch.
   Bewusst NUR hier und nicht an `.bar` allgemein — die Balken im Kampf und im
   Hangar sollen sofort dort stehen, wo sie stehen. */
/* Die Raffinerie-Balken laufen ohne CSS-Übergang: `liveRefine` zeichnet sie
   selbst in jedem Bild (09.08.2026). Ein Übergang obendrauf würde dieselbe
   Bewegung ein zweites Mal glätten, und der Balken liefe der Wahrheit
   dauerhaft hinterher. Die Regel steht hier nur als Merkzettel. */
/* Auftrags-Karten der Raffinerie — dieselbe Bauart wie die Drohnen-Slots.
   `waiting` heisst: kein Ofen frei. Die Karte bleibt sichtbar, wird aber
   zurückgenommen, damit man auf einen Blick sieht, wo gerade gearbeitet wird. */
.slot.waiting { opacity: .62; border-color: rgba(57,215,255,.3); box-shadow: none; }
/* Brennkammer: Balken je Brennplatz, Gesamtzustand unter den Plaetzen (18.10.2026) */
.fuel-slot-bar { margin-top: 4px; }
.fuel-total { margin-top: 8px; }
/* Ablegeziel beim Umsortieren der Warteschlange. Der goldene Rahmen ist
   dieselbe Sprache wie „hier passiert gleich etwas Gutes" im Inventar. */
.slot.drop-here { border-color: #ffd75e !important;
    box-shadow: 0 0 16px rgba(255,200,60,.55); }
.slot-done { color: #8fb8d0; font-size: 12px; }
/* Nachfrage im Spielstil (askConfirm) — ersetzt das Browser-`confirm()`.
   `z-index` bewusst sehr hoch: Der Dialog muss über den Fenstern UND über der
   Symbolleiste liegen, sonst kann man danebenklicken statt zu antworten. */
.ask-back { position: fixed; inset: 0; z-index: 9999; padding: 20px;
    background: rgba(4,10,18,.74); display: grid; place-items: center; }
.ask-card { max-width: 440px; width: 100%; margin: 0;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
    /* Nie höher als der Bildschirm: Der Text scrollt, die Knöpfe bleiben immer sichtbar
       (Fund Jens 21.10.2026: Handy quer, lange Patchnotes — OK war nicht erreichbar). */
    max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    box-sizing: border-box; display: flex; flex-direction: column; }
.ask-card .ask-text { overflow-y: auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ask-card .ask-row, .ask-card .card-head { flex: none; }
@media (max-height: 500px) {
    .ask-back { padding: 10px; }
    .ask-card { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 10px 14px; }
    .ask-card .ask-row { margin-top: 10px; }
}
.slot[draggable="true"] { cursor: grab; }
.slot[draggable="true"]:active { cursor: grabbing; }
/* Schmelz-Warteschlange: SICHTBAR machen, dass die Slots zum Umsortieren GEZOGEN
   werden können (Wunsch Jens 16.10.2026 — „am besten wären es Slots, die man per
   Drag-and-Drop verschiebt"). Griff-Symbol oben Mitte, kräftigeres Ablegeziel in
   Slot-Cyan, halbtransparent während des Ziehens. Nur die Schmiede-Slots
   ([data-smelt]) — die Hangar-Slots bleiben unberührt. ▲ bleibt fürs Handy. */
.slot[data-smelt]::before { content: "⠿"; position: absolute; top: 4px; left: 50%;
    transform: translateX(-50%); font-size: 16px; color: #7fb8d6; opacity: .55;
    pointer-events: none; }
.slot[data-smelt]:hover::before { opacity: 1; }
/* Gegriffene Karte NICHT ausblenden (das verwirrte — Jens 16.10.2026); sie
   bleibt wie sie ist. Stattdessen zeigt der Slot, über dem man schwebt, einen
   LEEREN Ablege-Platz: gestrichelter Rahmen + Pfeil über dem Karteninhalt,
   damit klar ist „hier landet die Karte". */
.slot[data-smelt].drop-here { border-color: #4de2ff !important; }
.slot[data-smelt].drop-here::after { content: "⇩"; position: absolute; inset: 0;
    border-radius: 12px; display: grid; place-items: center; font-size: 36px;
    color: #4de2ff; background: rgba(10,18,28,.78); border: 2px dashed #4de2ff;
    pointer-events: none; }
.slot-glyph { font-size: 60px; line-height: 1; display: block; margin: 10px 0 8px;
    color: #bfefff; }
.slot .hint { line-height: 1.35; }
.slot-xp { font-size: 11px; color: #8fb8d0; margin: -2px 0 6px; letter-spacing: .3px; }
/* `overflow-wrap: anywhere` als zweite Sicherung: Auch ein einzelnes langes
   Wort bricht dann um, statt die Karte aufzuspreizen. `max-width: 100%` hält
   den Text zusätzlich in der Spalte. */
.slot-bonus { font-size: 12.5px; color: #7fdcff; font-weight: 700; line-height: 1.35;
    overflow-wrap: anywhere; max-width: 100%; }
/* Höchststufe: kurz und in Gold, damit man es auf einen Blick sieht. */
.slot-xp.max { color: var(--gold); font-weight: 700; letter-spacing: 2px; }
.slot-plus { font-size: 44px; color: rgba(57,215,255,.5); line-height: 1; margin-bottom: 6px; }
.slot .hint { font-size: 12px; color: #8ba7bb; }
.slot.empty .slot-name { color: #bcd4e4; }
@media (max-width: 760px) { .slots { grid-template-columns: 1fr; } }

/* ══
   HOLO-HUD, TEIL 2: die SPIELOBERFLÄCHE.
   Symbolleiste, Geldbeutel, Ortsschild, Auftragsschild — alles, was dauerhaft
   über der Szene liegt. Zieht den cyan-Glas-Look aus dem Begleiter-Fenster auf
   das HUD; die Holz/Gold-Regeln oben bleiben stehen, weil die übrigen Fenster
   sie noch benutzen, und werden hier nur für das HUD überschrieben.

   Drei Größen, ein Aussehen: Handy (schmal oder flach), Tablet, Desktop —
   es ändern sich nur Maße, nie das Aussehen. Deshalb stehen die Farben und
   Formen EINMAL hier und die Größen weiter unten in den Größen-Blöcken.
   ══ */
:root {
    --holo:     #39d7ff;
    --holo-l:   #9fe9ff;
    --holo-dim: #a8c4d6;
    --glass:    rgba(10, 24, 38, .84);
}


/* Comic-Stil (Test): gemalte Bilder weich skalieren, nicht verpixeln */
img[src*="art_comic/"] { image-rendering: auto; }