/* ui.css — Pixel-Rollenspiel.
   Alles gross: Schrift ab 20 px, Rahmen 4 px, Knöpfe fingerbreit. Ein
   Idle-Spiel wird nebenbei und auf dem Handy gespielt; was man mit der Lupe
   suchen muss, wird nicht gesucht. */

:root {
    --ink:    #f4e4c8;
    --gold:   #ffcc55;
    --dim:    #b09a76;
    --wood:   #2a1d12;
    --wood-d: #1a1208;
    --wood-l: #5c4028;
    --hp:     #e0453a;
    --xp:     #47a0e0;
    --good:   #7ce87c;
    --bad:    #ff5b5b;
}

/* ── Szene ───────────────────────────────────────────────────────────────── */
#scene {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    image-rendering: pixelated;
    z-index: 0;
}

/* ── Pixel-Fensterrahmen ─────────────────────────────────────────────────── */
/* Gestufte Kanten aus gestapelten Schatten statt runder Ecken — runde Ecken
   sind das sicherste Zeichen dafür, dass etwas nicht aus einem Pixelspiel
   stammt. */
.win {
    position: relative;
    background: var(--wood);
    border: 4px solid var(--ink);
    box-shadow: 0 0 0 4px var(--wood-d),
                inset 0 0 0 4px var(--wood-l),
                0 8px 0 4px rgba(0,0,0,.55);
    padding: 20px 24px;
}
.win.small { padding: 12px 16px; }
/* Höhe NICHT mehr gedeckelt: gescrollt wird das Overlay (siehe #overlay), damit
   jedes Fenster oben (mit ✕) UND unten komplett erreichbar ist — auch auf flachen
   Handy-Schirmen. margin:auto zentriert, solange Platz ist, und lässt sonst
   sauber ganz nach oben scrollen. */
.win.big   { width: min(880px, 94vw); margin: auto; }

.win h2 {
    font-size: 26px; letter-spacing: 5px; color: var(--gold);
    text-shadow: 4px 4px 0 #3a2410; margin: 0 0 18px;
}
.sub { font-size: 17px; color: var(--dim); letter-spacing: 1px; line-height: 1.7; }

#win-close {
    position: absolute; top: -6px; right: -6px;
    width: 46px; height: 46px; font-size: 24px; line-height: 1;
    background: var(--wood-d); color: var(--ink);
    border: 4px solid var(--ink); box-shadow: 0 0 0 4px var(--wood-d);
}
#win-close:hover { color: var(--gold); }
/* Auf Handys (schmal ODER flach) das ✕ INS Fenster rücken, damit es nicht über
   den Rand ragt und abgeschnitten wird. */
@media (max-width: 760px), (max-height: 560px) {
    #win-close { top: 2px; right: 2px; width: 42px; height: 42px; }
}

/* ── Balken ──────────────────────────────────────────────────────────────── */
.pbar {
    position: relative; height: 24px;
    background: #120c06; border: 4px solid var(--ink);
    box-shadow: inset 0 0 0 3px #000;
}
.pbar > i { display: block; height: 100%; width: 0; }
.pbar.hp > i { background: var(--hp); box-shadow: inset 0 -7px 0 rgba(0,0,0,.3); }
.pbar.xp > i { background: var(--xp); box-shadow: inset 0 -7px 0 rgba(0,0,0,.3); }
/* Zahl im Balken: echt zentriert statt „line-height passend geraten". Die feste
   Zeilenhöhe von 16 px sass in jedem Balken anders — bei 24 px Höhe zu hoch,
   auf flachen Schirmen zu tief. */
.pbar > span {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 15px; line-height: 1; text-shadow: 2px 2px 0 #000;
}

/* ── Auftragsschild und Ortsschild ───────────────────────────────────────── */
#quest { position: fixed; left: 22px; top: 22px; z-index: 5; min-width: 300px; max-width: 320px; }
.q-title { font-size: 20px; letter-spacing: 1px; }
.q-prog  { font-size: 17px; color: var(--gold); margin-top: 4px; }
.q-bar   { height: 14px; margin-top: 8px; }
.q-reward { font-size: 14px; color: var(--dim); margin-top: 7px; }
.q-reward b { color: var(--gold); }
/* Abhol-Knopf: standardmäßig versteckt, erscheint erst bei erreichtem Ziel. */
.q-claim {
    display: none; width: 100%; text-align: center; margin-top: 10px;
    font: inherit; font-size: 16px; letter-spacing: 1px;
    color: #2a1c06; background: #d9a02a;
    border: 4px solid var(--ink);
    box-shadow: 0 0 0 4px var(--wood-d), 0 4px 0 0 var(--wood-d);
    padding: 9px 12px; cursor: pointer;
}
.q-claim:hover { background: #f0b83a; }
.q-claim.ready { display: block; animation: qPulse 1.1s ease-in-out infinite; }
@keyframes qPulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--wood-d), 0 4px 0 0 var(--wood-d); }
    50%      { box-shadow: 0 0 0 4px var(--wood-d), 0 4px 0 0 var(--wood-d), 0 0 16px 3px rgba(255,204,85,.65); }
}

#place {
    position: fixed; left: 50%; top: 22px; transform: translateX(-50%);
    z-index: 5; text-align: center; min-width: 340px;
    background: rgba(18,12,6,.82);
    border: 4px solid var(--ink); box-shadow: 0 0 0 4px var(--wood-d);
    padding: 12px 22px;
}
#place-name { font-size: 24px; letter-spacing: 4px; color: var(--gold);
              text-shadow: 3px 3px 0 #000; }
#place-prog { font-size: 17px; margin: 6px 0 8px; }

/* ── Symbolleiste ────────────────────────────────────────────────────────── */
/* Schwebendes HUD-Panel (Evitania-Stil): sitzt abgesetzt, stößt weder links
   noch rechts noch unten an den Rand. Voller Rahmen + Rundung + Schlagschatten
   heben es von der Szene ab, die ringsum weiterläuft. */
#bar {
    position: fixed; left: 20px; right: 20px;
    bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 10;
    display: flex; align-items: stretch; gap: 16px;
    padding: 12px 16px;
    background: #1e1830;
    border: 5px solid var(--ink);
    border-radius: 18px;
    box-shadow: inset 0 6px 0 #3a3054, 0 10px 28px rgba(0,0,0,.55);
}
#bar-char { flex: 0 0 300px; display: flex; flex-direction: column; gap: 7px;
            justify-content: center; }
.bc-name { font-size: 21px; letter-spacing: 2px; }
.bc-lvl { font-size: 16px; color: var(--dim); margin-left: 10px; }
.bc-lvl b { color: var(--gold); }

/* grid-auto-columns: minmax(0,1fr) macht ALLE Symbole gleich breit UND
   schrumpfbar — so passen die neun Knöpfe (inkl. „Menü") immer in die Leiste,
   statt rechts überzulaufen und abgeschnitten zu werden. */
#bar-icons { flex: 1; min-width: 0; display: grid; grid-auto-flow: column;
             grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.ico {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 8px 4px; min-width: 0; overflow: hidden;
    background: #37305c; border: 4px solid var(--ink);
    box-shadow: 0 0 0 4px #14101f, 0 5px 0 0 #14101f;
    color: var(--ink); cursor: pointer;
}
.ico i { font-style: normal; font-size: 30px; line-height: 1; color: var(--gold); }
.ico span { font-size: 14px; letter-spacing: 1px; max-width: 100%;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ico:hover { background: #4a4180; }
.ico.on { background: #7a5a1c; }

/* ── Werkstoff-Raster (Inventar, Evitania-Stil) ──────────────────────────── */
.mat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 10px; margin-top: 12px;
}
.mat-tile {
    position: relative; aspect-ratio: 1 / 1;
    background: #2a2440; border: 3px solid var(--ink); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 3px 0 #3a3054;
}
.mat-ico {
    width: 74%; height: 74%; object-fit: contain;
    image-rendering: pixelated;
}
.mat-glyph { font-size: 30px; line-height: 1; color: var(--gold); }
.mat-count {
    position: absolute; right: 5px; bottom: 3px;
    font-size: 14px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.mat-tile { cursor: pointer; transition: transform .06s, background .1s; }
.mat-tile:hover { background: #362e52; transform: translateY(-2px); }

/* Werkstoff-Info-Fenster (Klick auf eine Kachel) */
.mat-pop-back {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(8, 6, 16, .55);
    display: flex; align-items: center; justify-content: center;
}
.mat-pop {
    position: relative; width: min(420px, 88vw);
    background: #221c38; border: 4px solid var(--ink); border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .6), inset 0 4px 0 #3a3054;
    padding: 20px;
}
.mat-pop-x {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; color: var(--dim);
    font-size: 20px; cursor: pointer;
}
.mat-pop-x:hover { color: #fff; }
.mat-pop-head { display: flex; gap: 16px; align-items: flex-start; }
.mat-pop-ico {
    flex: 0 0 64px; width: 64px; height: 64px;
    background: #2a2440; border: 3px solid var(--ink); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.mat-pop-ico img { width: 74%; height: 74%; object-fit: contain; image-rendering: pixelated; }
.mat-pop-body { flex: 1; }
.mat-pop-name { font-size: 21px; color: var(--gold); letter-spacing: 1px; }
.mat-pop-have { font-size: 14px; color: var(--dim); margin: 2px 0 10px; }
.mat-pop-desc { font-size: 16px; line-height: 1.45; }
.mat-pop-val { font-size: 14px; color: var(--dim); margin-top: 12px; }

/* Ausrüstungs-Paperdoll (Inventar) */
.slot-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px; margin-top: 12px;
}
/* `.slot-ico` gibt es ZWEIMAL: hier 26 px fürs Ausrüstungsblatt und weiter
   unten 96 px fürs Drohnen-Fenster. Bei gleicher Spezifität gewinnt die
   spätere — sobald die `art/fx/gear_*.png` einmal existieren, würden die
   Ausrüstungs-Symbole also mit 96 px in eine 54-px-Kachel rendern und das
   Raster erneut aufreissen. Diese Regel ist spezifischer und beendet das,
   ohne dass am Drohnen-Fenster etwas geändert werden muss. */
.slot-grid .slot-ico { width: 26px; height: 26px; margin: 0; }
.slot-tile {
    background: #2a2440; border: 3px solid var(--ink); border-radius: 10px;
    padding: 8px 10px; min-height: 54px;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: inset 0 3px 0 #3a3054;
}
.slot-tile.filled { border-color: var(--gold); cursor: pointer; }
.slot-tile.filled:hover { background: #362e52; }
.slot-label { font-size: 11px; color: var(--dim); letter-spacing: 1.5px; text-transform: uppercase; }
.slot-body { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.slot-ico { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.slot-item { font-size: 13px; color: #fff; line-height: 1.2; word-break: break-word; }
.slot-empty { font-size: 15px; color: var(--dim); margin-top: 3px; }

/* Kompakte Ausrüstungs-Kacheln (Tasche) — Details per Klick */
.gear-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 10px; margin-top: 12px;
}
.gear-tile {
    position: relative; aspect-ratio: 1 / 1;
    background: #2a2440; border: 3px solid var(--ink); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: inset 0 3px 0 #3a3054; transition: transform .06s, background .1s;
}
.gear-tile:hover { background: #362e52; transform: translateY(-2px); }
/* Seltenheit — DIESELBEN sechs Farben wie bei den Drohnen-Teilen (RARITY in
   js/config/companions.js). Eine Farbsprache im ganzen Spiel: Was im Hangar
   Blau heisst, heisst im Inventar auch Blau. Rahmen UND Punkte in derselben
   Farbe, damit die Kachel schon aus der Entfernung spricht.
   Das `!important` ist nötig, weil die Fensterregel weiter unten
   (#winbox[data-win="bag"]) sonst allen Kacheln denselben Rand gibt. */
.gear-tile.r0 { border-color: #c9d2dc !important; }
.gear-tile.r1 { border-color: #7ce87c !important; }
.gear-tile.r2 { border-color: #4de2ff !important; }
.gear-tile.r3 { border-color: #c77dff !important; }
.gear-tile.r4 { border-color: #ffcc55 !important; }
.gear-tile.r5 { border-color: #ff5b5b !important; }
.gear-tile.r0 .gear-dots i { background: #c9d2dc; }
.gear-tile.r1 .gear-dots i { background: #7ce87c; }
.gear-tile.r2 .gear-dots i { background: #4de2ff; }
.gear-tile.r3 .gear-dots i { background: #c77dff; }
.gear-tile.r4 .gear-dots i { background: #ffcc55; }
.gear-tile.r5 .gear-dots i { background: #ff5b5b; }
/* Getragen schlägt die Gütefarbe — steht deshalb NACH den q-Regeln und
   ebenfalls mit !important. Sonst gewinnt im Lager die Gütefarbe, und man
   sieht nicht mehr, was man anhat. */
.gear-tile.worn { border-color: var(--gold) !important; }
/* Dieselben Seltenheitsfarben an den angelegten Plätzen links. */
.slot-tile.r0 { border-color: #c9d2dc !important; }
.slot-tile.r1 { border-color: #7ce87c !important; }
.slot-tile.r2 { border-color: #4de2ff !important; }
.slot-tile.r3 { border-color: #c77dff !important; }
.slot-tile.r4 { border-color: #ffcc55 !important; }
.slot-tile.r5 { border-color: #ff5b5b !important; }
/* Besser als das Getragene: DERSELBE goldene Leuchtrahmen wie beim
   Zusammenführen im Hangar (.pet.fusable). Eine Sprache für „hier lohnt sich
   ein Blick" — wer den Pfeil im Hangar einmal verstanden hat, versteht ihn hier
   sofort wieder. Vorher war es ein grüner Rand, den man im Inventar gar nicht
   sah: die Fensterregel weiter unten (#winbox[data-win="bag"]) überschreibt die
   Rahmenfarbe aller Kacheln. Deshalb hier `!important`, genau wie bei
   .pet.fusable. */
.gear-tile.better {
    border-color: #ffd75e !important;
    animation: fuseGlow 1.2s ease-in-out infinite;
}
/* Der zweite, ruhigere Pfeil: „auf gleicher Stufe besser". Cyan statt Gold und
   OHNE Pulsieren — er ist ein Hinweis, keine Aufforderung. Gold heisst „jetzt
   anlegen", Cyan heisst „das lohnt sich hochzuziehen". */
.gear-tile em.upmark.later {
    color: #7ee6ff;
    text-shadow: 0 0 8px rgba(80,210,255,.8), 1px 1px 0 #000;
    animation: none;
    opacity: .9;
}
/* Pfeil oben LINKS — oben rechts sitzen schon die Punkte für die Zusatzwerte. */
.gear-tile em.upmark {
    position: absolute; top: 3px; left: 6px; font-style: normal;
    font-size: 16px; font-weight: 700; color: #ffd75e;
    text-shadow: 0 0 8px rgba(255,200,60,.85), 1px 1px 0 #000;
    animation: fusePulse 1.4s ease-in-out infinite;
}
.gear-ico { width: 66%; height: 66%; object-fit: contain; image-rendering: pixelated; }
.gear-glyph { font-size: 26px; color: var(--dim); }
.gear-dots { position: absolute; top: 5px; right: 5px; display: flex; gap: 2px; }
.gear-dots i { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; display: block; }
.gear-slot { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center;
             font-size: 10px; color: var(--dim); letter-spacing: .5px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.mat-pop-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Geldbeutel oben rechts (Credits) */
#wallet {
    position: fixed; top: 12px; right: 16px; z-index: 9;
    display: flex; align-items: center; gap: 14px;
    background: rgba(30, 24, 48, .82); border: 3px solid var(--ink); border-radius: 12px;
    padding: 6px 14px 6px 10px; box-shadow: inset 0 3px 0 #3a3054;
}
.wal { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.wal-ico { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.wal b { color: var(--gold); letter-spacing: 1px; }
.wal.exos b { color: #7fe9ff; }
.wal-gem { font-style: normal; font-size: 20px; color: #7fe9ff; text-shadow: 0 0 8px #37c6e8, 0 0 2px #fff; line-height: 1; }
.skin span.exos { color: #7fe9ff; }
@media (max-width: 760px) { #wallet { top: 8px; right: 10px; gap: 10px; padding: 4px 10px 4px 8px; } .wal { font-size: 16px; } }

/* ── 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; }

/* ── 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; }
.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; }

/* ── Karte ───────────────────────────────────────────────────────────────── */
#mapwrap { position: relative; }
#mapcanvas { width: 100%; display: block; image-rendering: pixelated;
             border: 4px solid var(--wood-l); }
.node {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer; text-shadow: 2px 2px 0 #000;
}
.node b { font-size: 16px; letter-spacing: 1px; white-space: nowrap; }
.node i {
    display: block; width: 30px; height: 16px; border-radius: 50%;
    background: #4de2ff; box-shadow: 0 0 14px 4px rgba(77,226,255,.55);
}
.node.locked i { background: #55506a; box-shadow: none; }
.node.locked b { color: #7a7590; }
.node.here i { background: var(--gold); box-shadow: 0 0 16px 5px rgba(255,204,85,.6); }
/* Basis-Punkt in Gold (Heimat, kein Fortschritt) */
.node.base i { background: var(--gold); box-shadow: 0 0 14px 4px rgba(255,204,85,.5); }
/* Totenkopf an Boss-Ebenen: dort wartet eine Boss-Instanz (rotes Portal). */
.node em.skull {
    position: absolute; top: -18px; right: -14px; font-style: normal;
    font-size: 17px; color: #ff5b5b;
    text-shadow: 0 0 8px rgba(255,60,60,.8), 1px 1px 0 #000;
}

/* ── 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;
           left: 8px; right: 8px; bottom: calc(4px + env(safe-area-inset-bottom));
           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; }
    #quest { display: none; }
    /* 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; }
}

@media (max-width: 760px) {
    #quest { display: none; }
    /* 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; }
}

/* ── Fähigkeiten: der Graph ──────────────────────────────────────────────────
   Ein Talentbaum als Liste beantwortet die eine Frage nicht, die man stellt —
   "was kommt danach?". Erst die Linien machen aus Knoten einen Weg. */
.win.wide { width: min(1240px, 96vw); }

.tal {
    display: grid;
    grid-template-columns: 150px 1fr 300px;
    gap: 18px;
    align-items: start;
}

.tal-rail { display: flex; flex-direction: column; gap: 12px; }
.rail-btn {
    display: block; width: 100%; text-align: left;
    font: inherit; color: var(--ink); cursor: pointer;
    background: #2a2440; border: 4px solid var(--ink);
    box-shadow: 0 0 0 4px #14101f, 0 5px 0 0 #14101f;
    padding: 12px 14px;
}
.rail-btn b { display: block; font-size: 18px; letter-spacing: 2px; }
.rail-btn span { font-size: 14px; color: var(--dim); }
.rail-btn.on { background: #7a5a1c; }
.rail-btn.on span { color: #f4e4c8; }
.rail-btn.locked { opacity: .45; cursor: default; }

.tal-scroll { overflow: auto; max-height: 62vh; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; }
/* Standard-Scrollbalken ausblenden — geschoben wird per Maus festhalten+ziehen
   (Verdrahtung in app.js). Touch scrollt weiter nativ. */
.tal-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tal-scroll.grabbing { cursor: grabbing; }
.tal-graph { position: relative; }
.tal-lines { position: absolute; left: 0; top: 0; }
.tal-lines line { stroke: #4a4266; stroke-width: 5; }
.tal-lines line.lit { stroke: #f4e4c8; }

.tnode {
    position: absolute; width: 96px; height: 96px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: #2a2440; border: 4px solid #14101f;
    box-shadow: inset 0 0 0 4px #4a4266;
    color: var(--ink); cursor: pointer; padding: 0;
}
.tnode i { font-style: normal; font-size: 40px; line-height: 1; }
.tnode u { text-decoration: none; font-size: 15px; margin-top: 4px; }
.tnode.locked { opacity: .5; }
.tnode.part   { background: #6b4f14; box-shadow: inset 0 0 0 4px #ffcc55; }
.tnode.maxed  { background: #d9a02a; color: #2a1c06;
                box-shadow: inset 0 0 0 4px #ffe08a; }
.tnode.ready  { box-shadow: inset 0 0 0 4px #7ce87c, 0 0 0 4px #7ce87c; }
.tnode.sel    { outline: 5px solid #4de2ff; outline-offset: 3px; }

.tal-info {
    background: #221c38; border: 4px solid #14101f;
    box-shadow: inset 0 0 0 4px #4a4266;
    padding: 18px; text-align: center;
}
.ti-icon { font-size: 52px; line-height: 1; color: var(--gold); }
.ti-name { font-size: 24px; letter-spacing: 2px; color: var(--gold); margin: 10px 0 8px; }
.ti-desc { font-size: 16px; color: var(--dim); line-height: 1.6; min-height: 60px; }
.ti-head { font-size: 20px; color: var(--gold); margin: 16px 0 10px; letter-spacing: 1px; }
.ti-row  { display: flex; justify-content: space-between; font-size: 16px; padding: 6px 0; }
.ti-row b { color: var(--gold); }
.ti-buy {
    display: block; width: 100%; margin-top: 18px;
    font: inherit; font-size: 18px; letter-spacing: 2px;
    color: #2a1c06; background: #d9a02a;
    border: 4px solid var(--ink); box-shadow: 0 5px 0 0 #14101f;
    padding: 14px 10px; cursor: pointer;
}
.ti-buy:disabled { background: #4a4266; color: #9a93b5; cursor: default; }

.tal-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 18px; padding-top: 14px; border-top: 4px dotted #4a3520;
    font-size: 20px;
}
.tal-foot b { color: var(--gold); }

/* ── Kosmetik und Begleiter ─────────────────────────────────────────────── */
.sec { font-size: 18px; letter-spacing: 3px; color: var(--gold);
       margin: 22px 0 12px; }

.skins, .pets { display: flex; flex-wrap: wrap; gap: 12px; }
.skin, .pet {
    width: 146px; padding: 12px 6px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: #2a2440; border: 4px solid #14101f;
    box-shadow: inset 0 0 0 4px #4a4266;
    color: var(--ink); font: inherit; cursor: pointer;
}
.skin i, .pet i { font-style: normal; font-size: 38px; line-height: 1; color: var(--gold); }
.skin b, .pet b { font-size: 15px; }
.skin span, .pet span { font-size: 13px; color: var(--dim); }
.skin.on, .pet.on { background: #7a5a1c; box-shadow: inset 0 0 0 4px #ffcc55; }
.pet.locked { opacity: .4; cursor: default; }
/* Sterne der Seltenheit auf den Kisten-Kacheln — gleiche Lesart wie in den
   Slots: sechs Plätze, gefüllt so weit die Seltenheit reicht. */
.pet-stars { font-size: 12px; letter-spacing: 2px; line-height: 1; margin: -2px 0; }

/* Pfeil an Waffen-/Werkzeug-Kacheln: Zusammenführen möglich (genug Doppelte). */
.skin, .pet { position: relative; }
.pet em.fuse {
    position: absolute; top: 6px; right: 8px; font-style: normal;
    font-size: 16px; font-weight: 700; color: #ffd75e;
    text-shadow: 0 0 8px rgba(255,200,60,.85), 1px 1px 0 #000;
    animation: fusePulse 1.4s ease-in-out infinite;
}
@keyframes fusePulse {
    0%, 100% { transform: translateY(0); opacity: .85; }
    50%      { transform: translateY(-3px); opacity: 1; }
}
/* Ganzer Kachel-Rahmen leuchtet + pulsiert, wenn Zusammenführen möglich ist. */
.pet.fusable {
    border-color: #ffd75e !important;
    animation: fuseGlow 1.2s ease-in-out infinite;
}
@keyframes fuseGlow {
    0%, 100% { box-shadow: 0 0 6px 1px rgba(255, 200, 60, .35); }
    50%      { box-shadow: 0 0 16px 4px rgba(255, 200, 60, .8); }
}
/* Hinweis-Schild am Hangar-Knopf in der Leiste: irgendwo geht ein Merge. */
.ico { position: relative; }
.ico em.fusebadge {
    position: absolute; top: -8px; right: -6px; font-style: normal;
    font-size: 13px; font-weight: 700; letter-spacing: 0;
    background: #d9a02a; color: #2a1c06; padding: 2px 7px;
    border: 3px solid #14101f;
    animation: fuseGlow 1.2s ease-in-out infinite;
}

.pet-head { display: grid; grid-template-columns: 110px 1fr 220px; gap: 18px;
            align-items: center; }
.pet-face { text-align: center; background: #2a2440; padding: 14px 0;
            border: 4px solid #14101f; }
.pet-face i { font-style: normal; font-size: 44px; display: block; }
.pet-face b { font-size: 18px; }
.pet-name { font-size: 22px; color: var(--gold); letter-spacing: 1px; }
.pet-stats { background: #221c38; border: 4px solid #14101f; padding: 12px 14px; }

/* Auto-Angriff in der Leiste */
.ico.auto { position: relative; flex: 0 0 96px; }
.ico.auto em {
    position: absolute; top: -8px; right: -8px; font-style: normal;
    font-size: 13px; letter-spacing: 1px;
    background: #7ce87c; color: #0d2a0d; padding: 3px 6px;
    border: 3px solid #14101f;
}
.ico.auto.off em { background: var(--bad); color: #2a0606; }

@media (max-width: 900px) {
    .tal { grid-template-columns: 1fr; }
    .tal-rail { flex-direction: row; }
}

/* Zahl rechts im Knopf braucht Luft — sonst klebt "Hälfte" an "120". */
.pbtn .r { margin-left: 14px; }

/* ── Startbildschirm ─────────────────────────────────────────────────────────
   Das gemalte Bild trägt die Stimmung, das Logo trägt den Namen, ein Knopf
   trägt den Rest. Mehr gehört hier nicht hin: Wer das Spiel öffnet, will
   spielen und nicht lesen. */
#start {
    position: fixed; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
}
#start.gone { display: none; }
#start-bg {
    position: absolute; inset: 0;
    background: #0d0a14 url('../assets/menu-bg.jpg') center/cover no-repeat;
    transform-origin: center;
    will-change: transform;
    /* Sanftes Zoomen/Schwenken (Ken-Burns) ZUSÄTZLICH zum Video — dezent, damit
       es sich nicht mit der Video-Bewegung beißt. */
    animation: startDrift 40s ease-in-out infinite alternate;
}
/* Belebter Video-Hintergrund: deckt das Standbild, füllt formatfüllend, liegt
   unter dem Abdunkel-Verlauf (::after) und fängt keine Klicks ab. */
#start-bg-vid {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}
@keyframes startDrift {
    from { transform: scale(1.03) translate(-1.2%, -0.8%); }
    to   { transform: scale(1.08) translate(1.2%,  0.8%); }
}
/* „Bewegung reduzieren": nur langsamer & ruhiger. */
@media (prefers-reduced-motion: reduce) {
    #start-bg { animation-duration: 80s; }
}
/* Abdunkeln, damit die Schrift steht. Ein Verlauf statt einer Fläche —
   das Bild soll unten dunkel sein, oben aber sichtbar bleiben. */
#start-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,6,14,.30) 0%,
                                        rgba(8,6,14,.55) 55%,
                                        rgba(8,6,14,.88) 100%);
}
#start-inner {
    position: relative; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 0 24px;
}
#start-logo {
    width: min(560px, 78vw); height: auto;
    image-rendering: auto;
    filter: drop-shadow(0 10px 0 rgba(0,0,0,.45));
}
#start-sub {
    font-size: 20px; letter-spacing: 12px; color: var(--gold);
    text-shadow: 3px 3px 0 #000; margin: -6px 0 14px 12px;
}
.mbtn {
    font: inherit; font-size: 24px; letter-spacing: 4px;
    color: #2a1c06; background: #d9a02a;
    border: 4px solid var(--ink);
    box-shadow: 0 0 0 4px #14101f, 0 7px 0 0 #14101f;
    padding: 16px 46px; cursor: pointer;
}
.mbtn:hover { background: #f0b83a; }
.mbtn.ghost {
    font-size: 17px; letter-spacing: 3px; padding: 11px 26px;
    color: var(--ink); background: #2a2440;
    box-shadow: 0 0 0 4px #14101f, 0 5px 0 0 #14101f;
}
.mbtn.ghost:hover { color: var(--gold); background: #3a3358; }
#start-info {
    font-size: 17px; color: var(--ink); line-height: 1.7;
    text-shadow: 2px 2px 0 #000; margin-bottom: 10px;
}
#start-info b { color: var(--gold); }
/* Versionsnummer unten rechts auf dem Startbildschirm (config/version.js). */
#start-version {
    position: absolute; right: 16px; bottom: 12px;
    font-size: 13px; letter-spacing: 1px; color: #8a7f9c;
    text-shadow: 2px 2px 0 #000; pointer-events: none;
}
/* Android-App-Download unten links (Sideload-APK; nur Android + nicht in der App). */
#start-apk {
    position: absolute; left: 16px; bottom: 12px;
    font-size: 14px; letter-spacing: 1px; text-decoration: none;
    color: #9fe9ff; background: rgba(8,18,28,.8);
    border: 2px solid rgba(57,215,255,.5); border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 0 10px rgba(57,215,255,.25);
}
#start-apk:hover { background: rgba(57,215,255,.18); color: #eafaff; }

/* ── Reichweiten-Hinweis ─────────────────────────────────────────────────────
   Erscheint, wenn die Figur vor etwas steht. Über der Symbolleiste, mittig —
   dort schaut man ohnehin hin, weil dort die Figur steht. */
#prompt {
    position: fixed; left: 50%; bottom: 190px; transform: translateX(-50%);
    z-index: 8; display: none;
    background: rgba(8,18,28,.92);
    border: 2px solid rgba(57,215,255,.55); border-radius: 10px;
    box-shadow: 0 0 16px rgba(57,215,255,.30), inset 0 0 12px rgba(57,215,255,.08);
    padding: 10px 18px; font-size: 18px; letter-spacing: 1px;
    text-align: center; white-space: nowrap; color: #dff4ff;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
#prompt.on { display: block; }
#prompt b { color: #9fe9ff; text-shadow: 0 0 10px rgba(57,215,255,.55); }
#prompt span { display: block; font-size: 14px; color: #9fb4c4; margin-top: 3px; }
/* Über dem jeweiligen Objekt schwebend: left/top werden je Bild in app.js
   gesetzt (Bildschirmposition des Objekts); die Blase sitzt mit ihrer
   Unterspitze knapp darüber. */
#prompt.float { left: auto; bottom: auto; transform: translate(-50%, -100%); }
#prompt.float::after {
    content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
    width: 0; height: 0; border: 8px solid transparent;
    border-top-color: rgba(57,215,255,.55);
}

#hint-move {
    position: fixed; left: 50%; bottom: 152px; transform: translateX(-50%);
    z-index: 6; font-size: 15px; color: var(--dim);
    text-shadow: 2px 2px 0 #000; opacity: .9;
    transition: opacity .6s;
}
#hint-move.gone { opacity: 0; pointer-events: none; }

/* ── Listen und Karten in Fenstern ───────────────────────────────────────────
   Diese Klassen (.card, .row, .btn …) stammen aus der ersten Fassung der
   Oberfläche. Sie sind geblieben, weil die Fensterinhalte sie benutzen — nur
   sahen sie nach der Umstellung auf Pixelrahmen aus wie unformatierter Text.
   Hier bekommen sie dasselbe Aussehen wie der Rest: gestufte Kanten, dicke
   Rahmen, nichts unter 15 px. */
.card {
    background: #221c38; border: 4px solid #14101f;
    box-shadow: inset 0 0 0 4px #4a4266;
    padding: 16px 18px; margin-bottom: 18px;
}
.card-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 4px dotted #4a3520;
}
.card-title { font-size: 21px; letter-spacing: 2px; color: var(--gold); }
.card-sub   { font-size: 15px; color: var(--dim); }
.hint       { font-size: 15px; color: var(--dim); line-height: 1.6; }

.rows { display: flex; flex-direction: column; }
.row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 12px 0; border-bottom: 4px dotted #3a3358; font-size: 17px;
}
.row:last-child { border-bottom: none; }
.lbl { font-size: 17px; }
.val { font-size: 17px; color: var(--gold); }

.btn {
    font: inherit; font-size: 17px; letter-spacing: 1px;
    color: #2a1c06; background: #d9a02a;
    border: 4px solid var(--ink); box-shadow: 0 4px 0 0 #14101f;
    padding: 9px 16px; cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #f0b83a; }
.btn:disabled { background: #4a4266; color: #9a93b5; cursor: default; box-shadow: none; }
.btn.sm { font-size: 15px; padding: 7px 12px; }
.btn.ghost { color: var(--ink); background: #37305c; }
.btn.ghost:hover:not(:disabled) { background: #4a4180; color: var(--gold); }
.btn.gold { background: #d9a02a; }
/* Warnfarbe für Knöpfe, die etwas UNWIEDERBRINGLICHES tun — Spielstand
   löschen, neu beginnen. Golden heisst im ganzen Spiel „das willst du";
   der gefährlichste Knopf darf nicht aussehen wie jeder andere (09.08.2026).
   Wird über den fünften Parameter von `askConfirm` gesetzt. */
.btn.danger { background: #b8382c; color: #ffe9e6; }
.btn.danger:hover:not(:disabled) { background: #d14436; }

.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); }

/* ═══════════════════════════════════════════════════════════════════════════
   HOLO-HUD — grafischer Umbau, Pilot: nur das Begleiter-Fenster.
   Rahmen = generiertes 9-Slice-PNG (art/ui/panel_holo.png), Innenraum dunkel,
   alles Übrige (Leiste, andere Fenster) bleibt vorerst im Holz/Gold-Look.
   Streng auf #winbox[data-win="pets"] begrenzt — kein anderes Fenster betroffen.
   ═══════════════════════════════════════════════════════════════════════════ */
#winbox[data-win="pets"] {
    background: none;
    border: 30px solid transparent;
    border-image: url('../art/ui/panel_holo.png') 44 fill stretch;
    box-shadow: none;
    padding: 10px 26px 24px;
    filter: drop-shadow(0 0 20px rgba(57,215,255,.22));
}
#winbox[data-win="pets"] h2 {
    color: #9fe9ff;
    text-shadow: 0 0 14px rgba(57,215,255,.55), 2px 2px 0 #05131f;
}
#winbox[data-win="pets"] #win-close {
    top: 4px; right: 4px;
    background: rgba(8,18,28,.9); color: #9fe9ff;
    border: 2px solid rgba(57,215,255,.5);
    box-shadow: 0 0 10px rgba(57,215,255,.25); border-radius: 8px;
}
#winbox[data-win="pets"] .sub { color: #9fb4c4; }
#winbox[data-win="pets"] .sec {
    color: #8fe0ff; text-shadow: 0 0 8px rgba(57,215,255,.4);
}
#winbox[data-win="pets"] .pet-name {
    color: #eaf6ff; text-shadow: 0 0 8px rgba(57,215,255,.35);
}
#winbox[data-win="pets"] .pbar {
    background: rgba(57,215,255,.1);
    border: 2px solid rgba(57,215,255,.35);
    box-shadow: none; border-radius: 8px; overflow: hidden;
}
#winbox[data-win="pets"] .pbar.xp > i {
    background: linear-gradient(90deg, #1b8fc4, #39d7ff);
    box-shadow: 0 0 12px rgba(57,215,255,.6);
}
#winbox[data-win="pets"] .pbar > span { color: #eafaff; }
#winbox[data-win="pets"] .pet-face {
    background: radial-gradient(circle at 40% 34%, rgba(57,215,255,.25), rgba(57,215,255,.04));
    border: 2px solid rgba(57,215,255,.45); border-radius: 12px;
    box-shadow: inset 0 0 16px rgba(57,215,255,.18);
}
#winbox[data-win="pets"] .pet-face i { color: #bfefff; }
#winbox[data-win="pets"] .pet-face b { color: #9fe9ff; }
#winbox[data-win="pets"] .pet-stats {
    background: rgba(10,24,38,.72);
    border: 2px solid rgba(57,215,255,.28); border-radius: 10px;
}
#winbox[data-win="pets"] .stat { border-bottom: 2px dotted rgba(57,215,255,.22); }
#winbox[data-win="pets"] .stat b { color: #7fdcff; }
#winbox[data-win="pets"] .pet {
    background: rgba(57,215,255,.07);
    border: 2px solid rgba(57,215,255,.2);
    box-shadow: none; border-radius: 12px;
    transition: background .1s, border-color .1s;
}
#winbox[data-win="pets"] .pet:hover { background: rgba(57,215,255,.14); }
#winbox[data-win="pets"] .pet i { color: #bfefff; }
#winbox[data-win="pets"] .pet b { color: #dbe7f2; }
#winbox[data-win="pets"] .pet span { color: #8ba7bb; }
#winbox[data-win="pets"] .pet.on {
    background: rgba(57,215,255,.2); border-color: #39d7ff;
    box-shadow: 0 0 14px rgba(57,215,255,.35);
}
#winbox[data-win="pets"] .pet.on b { color: #eafaff; }
#winbox[data-win="pets"] .line { border-bottom: 2px dotted rgba(57,215,255,.2); }
#winbox[data-win="pets"] .line b { color: #9fe9ff; }

/* ── 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; }
#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: 13px; width: 100%; margin: 10px 0 6px; border-radius: 7px;
    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 > span { position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 10px; font-weight: 700; color: #eafaff; }
/* 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; }
/* 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); }
.slot[draggable="true"] { cursor: grab; }
.slot[draggable="true"]:active { cursor: grabbing; }
.slot-glyph { font-size: 60px; line-height: 1; display: block; margin: 10px 0 8px;
    color: #bfefff; }
.slot .hint { line-height: 1.35; }
.slot .bar { position: relative; height: 13px; width: 100%; margin: 10px 0 6px; border-radius: 7px;
    overflow: hidden; background: rgba(57,215,255,.1); border: 2px solid rgba(57,215,255,.35); }
.slot .bar > i { position: absolute; inset: 0; display: block;
    background: linear-gradient(90deg,#1b8fc4,#39d7ff); box-shadow: 0 0 10px rgba(57,215,255,.6); }
.slot .bar > span { position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 10px; font-weight: 700; color: #eafaff; }
.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);
}

/* ── Leiste ──────────────────────────────────────────────────────────────── */
#bar {
    background: var(--glass);
    border: 2px solid rgba(57, 215, 255, .38);
    border-radius: 16px;
    box-shadow: 0 0 26px rgba(57, 215, 255, .16),
                inset 0 1px 0 rgba(57, 215, 255, .32),
                0 10px 30px rgba(0, 0, 0, .55);
}
/* Ecken-Klammern wie an einem Zielfernrohr — zwei Pseudo-Elemente, keine
   Grafik. Sie machen aus einem Kasten ein Gerät. */
#bar::before, #bar::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    border: 2px solid var(--holo); opacity: .7; pointer-events: none;
}
#bar::before { left: -2px; top: -2px; border-right: none; border-bottom: none;
               border-radius: 16px 0 0 0; }
#bar::after  { right: -2px; bottom: -2px; border-left: none; border-top: none;
               border-radius: 0 0 16px 0; }

.bc-name { color: #eaf6ff; }
.bc-lvl  { color: var(--holo-dim); }
.bc-lvl b { color: var(--holo-l); text-shadow: 0 0 8px rgba(57, 215, 255, .45); }

/* Balken im HUD: dünner Glasrahmen statt Pixelkante, Füllung leuchtet.
   Leben bleibt rot — eine Warnfarbe darf nicht schön sein, sie muss auffallen. */
#bar-char .pbar, #place .pbar, #quest .pbar {
    background: rgba(4, 16, 26, .78);
    border: 2px solid rgba(57, 215, 255, .3);
    border-radius: 7px; box-shadow: none; overflow: hidden;
}
#bar-char .pbar > i { transition: width .18s linear; }
#bar-char .pbar.hp > i {
    background: linear-gradient(90deg, #b8241f, #ff6a5e);
    box-shadow: 0 0 10px rgba(255, 80, 60, .45);
}
#place .pbar.xp > i, #quest .pbar.xp > i {
    background: linear-gradient(90deg, #1b8fc4, #39d7ff);
    box-shadow: 0 0 10px rgba(57, 215, 255, .5);
}
/* Erfahrung im HUD in Violett. Energie und Erfahrung waren beide blau-cyan und
   damit auf einen Blick nicht zu unterscheiden (Fund von Jens). Drei Balken,
   drei klar getrennte Farben: rot = Leben, cyan = Energie, violett = Erfahrung.
   Die übrigen Fortschrittsbalken (Ortsschild, Auftrag) bleiben cyan — die
   zeigen keine Erfahrung, sondern erledigte Gegner. */
#bar-char .pbar.xp > i {
    background: linear-gradient(90deg, #6b34c8, #bb7cff);
    box-shadow: 0 0 10px rgba(170, 110, 255, .5);
}
#bar-char .pbar > span { color: #eafaff; text-shadow: 0 1px 2px #000; }

/* ── Symbole ─────────────────────────────────────────────────────────────── */
#bar .ico {
    background: linear-gradient(180deg, rgba(57, 215, 255, .11), rgba(57, 215, 255, .03));
    border: 2px solid rgba(57, 215, 255, .26);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(57, 215, 255, .22);
    color: var(--holo-dim);
    transition: background .12s, border-color .12s, transform .06s;
}
#bar .ico:hover {
    background: rgba(57, 215, 255, .18);
    border-color: rgba(57, 215, 255, .55);
    transform: translateY(-1px);
}
#bar .ico.on {
    background: rgba(57, 215, 255, .24); border-color: var(--holo);
    box-shadow: 0 0 14px rgba(57, 215, 255, .4), inset 0 1px 0 rgba(57, 215, 255, .4);
}
#bar .ico i { color: var(--holo-l); text-shadow: 0 0 10px rgba(57, 215, 255, .5); }
#bar .ico.on i, #bar .ico.on span { color: #eafaff; }
/* Echtes Icon-Bild (art/ui/ico_<name>.png). Fehlt die Datei, bleibt die
   Schrift-Glyphe stehen — siehe barIcons() in app.js. */
.ico-img {
    display: block; width: 44px; height: 44px;
    object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 0 6px rgba(57, 215, 255, .35));
}
/* Schildchen (AN/AUS beim Auto-Angriff, „↑" beim Hangar): sitzen INNEN in der
   oberen rechten Ecke. Vorher hingen sie ausserhalb der Kachel — seit die
   Knöpfe runde Ecken haben und ihren Inhalt beschneiden, wurden sie dort
   angeschnitten und verschwanden halb. Signalfarben bleiben (grün an, rot aus).
   `overflow: visible` gibt dem Schild zusätzlich Luft, falls es breiter wird. */
#bar .ico { overflow: visible; }
#bar .ico.auto em, #bar .ico em.fusebadge {
    top: 5px; right: 5px;
    font-size: 11px; letter-spacing: 0; padding: 1px 6px;
    border: 2px solid rgba(4, 14, 22, .9); border-radius: 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* ── Geldbeutel und Ortsschild ───────────────────────────────────────────── */
#wallet, #place, #quest {
    background: var(--glass);
    border: 2px solid rgba(57, 215, 255, .32);
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(57, 215, 255, .14),
                inset 0 1px 0 rgba(57, 215, 255, .26);
}
/* Credits bleiben golden: Geld soll Geldfarbe haben, sonst verschwimmt es
   mit allem anderen Cyan. */
.wal b { color: #ffd98a; }
.wal.exos b { color: #7fe9ff; }
/* Codeschlüssel in Orange — dieselbe Farbe wie der Glühstreifen auf der Karte,
   damit Zahl und Bild als eine Einheit gelesen werden. */
.wal.keys b { color: #ffa53a; }

#place { padding: 10px 22px; }
#place-name {
    color: var(--holo-l);
    text-shadow: 0 0 12px rgba(57, 215, 255, .5), 2px 2px 0 #04131f;
}
#place-prog { color: var(--holo-dim); }

#quest { padding: 14px 16px; border-radius: 14px; }
.q-title  { color: #eaf6ff; }
.q-prog   { color: var(--holo-l); }
.q-reward { color: var(--holo-dim); }
.q-reward b { color: #ffd98a; }
.q-claim {
    color: #04131f; background: linear-gradient(180deg, #7fe4ff, #39c8f0);
    border: 2px solid rgba(57, 215, 255, .8); border-radius: 10px;
    box-shadow: 0 0 12px rgba(57, 215, 255, .3);
}
.q-claim:hover { background: linear-gradient(180deg, #a8f0ff, #55d8ff); }
.q-claim.ready { animation: holoPulse 1.3s ease-in-out infinite; }
@keyframes holoPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(57, 215, 255, .3); }
    50%      { box-shadow: 0 0 20px 3px rgba(57, 215, 255, .65); }
}

/* ── Größen ──────────────────────────────────────────────────────────────── */
/* Grosser Schirm: Leiste nicht über die ganze Breite ziehen, sonst stehen die
   Symbole auf einem 27-Zöller einzeln in der Landschaft. */
@media (min-width: 1440px) {
    #bar {
        left: 50%; right: auto; transform: translateX(-50%);
        width: min(1360px, calc(100vw - 48px));
    }
}
/* Tablet (u. a. iPad quer und hoch). */
@media (min-width: 761px) and (max-width: 1200px) {
    .ico-img { width: 37px; height: 37px; }
}
/* Handy hochkant. */
@media (max-width: 760px) and (orientation: portrait) {
    #bar { border-radius: 14px; }
    .ico-img { width: 32px; height: 32px; }
    #wallet, #place { border-radius: 10px; }
}
/* Handy quer — hier ist die HÖHE knapp, also alles flach. */
@media (orientation: landscape) and (max-height: 540px) {
    #bar { border-radius: 12px; }
    #bar::before, #bar::after { width: 12px; height: 12px; }
    .ico-img { width: 24px; height: 24px; }
    #bar .ico { border-radius: 9px; }
    #bar-char .pbar { border-radius: 5px; border-width: 1px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOLO-FENSTER, RAHMEN-VERGLEICH (Qwen-Runde 08.08.)
   Drei erzeugte Rahmen hängen an drei Fenstern, damit sie im echten Betrieb
   nebeneinander zu sehen sind:  A → Inventar,  B → Berufe,  C → Karte.
   Sobald einer gewählt ist, bekommt ihn jedes Fenster und dieser Block wird
   zu einer einzigen Regel zusammengestrichen.

   Grundlage ist ein Glas-Hintergrund; der Rahmen liegt als 9-Slice darüber.
   Fehlt eine PNG-Datei, bleibt das Fenster benutzbar — nur ohne Zierrahmen.
   ═══════════════════════════════════════════════════════════════════════════ */
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) {
    background: rgba(10, 24, 38, .93);
    /* NUR bis zur Innenkante füllen. Ohne das läuft die dunkle Fläche auch
       unter den Rahmen — und überall, wo der Rahmen Lücken hat (die Nasen und
       Ecken von Variante C), sah man sie als schwarze Klötze durchscheinen.
       Der Rahmen bringt seine eigene Innenfläche mit (border-image … fill),
       die Fläche hier ist nur der Notnagel, falls die Grafik fehlt. */
    background-clip: padding-box;
    border: 2px solid rgba(57, 215, 255, .45);
    border-radius: 16px;
    box-shadow: 0 0 26px rgba(57, 215, 255, .18);
}
#winbox[data-win="bag"] {
    border: 34px solid transparent; border-radius: 0; box-shadow: none;
    border-image: url('../art/ui/panel_a.png') 150 fill stretch;
    padding: 10px 22px 22px;
    filter: drop-shadow(0 0 20px rgba(57, 215, 255, .20));
}
#winbox[data-win="work"] {
    border: 34px solid transparent; border-radius: 0; box-shadow: none;
    border-image: url('../art/ui/panel_b.png') 150 fill stretch;
    padding: 10px 22px 22px;
    filter: drop-shadow(0 0 16px rgba(57, 215, 255, .14));
}
#winbox[data-win="map"] {
    border: 30px solid transparent; border-radius: 0; box-shadow: none;
    border-image: url('../art/ui/panel_c.png') 120 fill stretch;
    padding: 10px 22px 22px;
    filter: drop-shadow(0 0 20px rgba(57, 215, 255, .20));
}

/* Inhalt dieser drei Fenster im Glas-Look — sonst sitzt Holz im Holo-Rahmen. */
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) h2 {
    color: #9fe9ff; text-shadow: 0 0 14px rgba(57, 215, 255, .55), 2px 2px 0 #05131f;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) #win-close {
    top: 4px; right: 4px; background: rgba(8, 18, 28, .9); color: #9fe9ff;
    border: 2px solid rgba(57, 215, 255, .5); border-radius: 8px;
    box-shadow: 0 0 10px rgba(57, 215, 255, .25);
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) :is(.sub, .hint, .card-sub) {
    color: #9fb4c4;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .sec {
    color: #8fe0ff; text-shadow: 0 0 8px rgba(57, 215, 255, .4);
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) :is(.card, .pet-stats, .tal-info) {
    background: rgba(10, 24, 38, .72);
    border: 2px solid rgba(57, 215, 255, .28); border-radius: 12px;
    box-shadow: none;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .card-head {
    border-bottom: 2px dotted rgba(57, 215, 255, .25);
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) :is(.card-title, .val, .stat b, .line b) {
    color: #7fdcff;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) :is(.row, .line, .stat) {
    border-bottom: 2px dotted rgba(57, 215, 255, .2);
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .btn {
    color: #04131f; background: linear-gradient(180deg, #7fe4ff, #39c8f0);
    border: 2px solid rgba(57, 215, 255, .8); border-radius: 9px;
    box-shadow: 0 0 10px rgba(57, 215, 255, .25);
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #a8f0ff, #55d8ff);
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .btn:disabled {
    background: rgba(57, 215, 255, .12); color: #6f8ba0;
    border-color: rgba(57, 215, 255, .22); box-shadow: none;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .btn.ghost {
    color: #9fe9ff; background: rgba(57, 215, 255, .12);
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .pbtn {
    color: #cfe6f4; background: rgba(57, 215, 255, .1);
    border: 2px solid rgba(57, 215, 255, .3); border-radius: 10px;
    box-shadow: none;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .pbtn:hover:not(:disabled) {
    background: rgba(57, 215, 255, .2); color: #eafaff;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) :is(.mat-tile, .gear-tile, .slot-tile) {
    background: rgba(57, 215, 255, .07);
    border: 2px solid rgba(57, 215, 255, .22); box-shadow: none;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) :is(.mat-tile:hover, .gear-tile:hover) {
    background: rgba(57, 215, 255, .16);
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .pbar {
    background: rgba(4, 16, 26, .78);
    border: 2px solid rgba(57, 215, 255, .3);
    border-radius: 7px; box-shadow: none; overflow: hidden;
}
#winbox:is([data-win="bag"], [data-win="work"], [data-win="map"]) .pbar.xp > i {
    background: linear-gradient(90deg, #1b8fc4, #39d7ff);
    box-shadow: 0 0 10px rgba(57, 215, 255, .5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STIL-VERSUCHE (07.08.) — drei weitere Richtungen zum Vergleich IM SPIEL.
   Alles rein per CSS, keine Grafik, kein Nachladen:

     HELDIN    → Holo aus CSS   (abgeschrägte Ecken, Klammern, Scanlines)
     TALENTE   → Bergbau-Terminal (Messing/Bernstein, Metallplatte, Nieten)
     KOSMETIK  → Ruhig & modern  (dunkles Glas, ein Haarstrich Rand, kein Glow)

   Zusammen mit Inventar (Grafik A), Berufe (Grafik B) und Karte (Grafik C)
   stehen damit sechs Fassungen nebeneinander. Was gewinnt, bekommt am Ende
   jedes Fenster; der Rest fliegt raus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) HOLO AUS CSS (Fenster „Heldin") ──────────────────────────────────── */
/* Der Rahmen sind zwei deckungsgleiche Formen: #winbox selbst trägt die
   Randfarbe, ::before liegt 2 px innen und trägt die Füllung. Beide mit
   demselben abgeschrägten clip-path — so entsteht eine schräge Kante, die es
   als border-radius nicht gibt. ::after malt die vier Eck-Klammern aus acht
   Farbverläufen (kein zusätzliches HTML nötig). */
#winbox[data-win="hero"] {
    background: linear-gradient(160deg, #39d7ff, #1b6f9c 45%, #39d7ff);
    border: none; border-radius: 0; box-shadow: none;
    padding: 20px 24px 24px;
    clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 12px),
                       calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 24px);
    filter: drop-shadow(0 0 18px rgba(57, 215, 255, .28));
}
#winbox[data-win="hero"]::before {
    content: ''; position: absolute; inset: 2px; z-index: -1;
    background:
        repeating-linear-gradient(0deg, rgba(57,215,255,.05) 0 2px, transparent 2px 4px),
        linear-gradient(170deg, rgba(16,40,60,.97), rgba(8,18,30,.97));
    clip-path: polygon(23px 0, calc(100% - 23px) 0, 100% 23px, 100% calc(100% - 11px),
                       calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 23px);
}
#winbox[data-win="hero"]::after {
    content: ''; position: absolute; inset: 9px; pointer-events: none;
    background:
        linear-gradient(#9fe9ff, #9fe9ff) left 0 top 0 / 26px 2px no-repeat,
        linear-gradient(#9fe9ff, #9fe9ff) left 0 top 0 / 2px 26px no-repeat,
        linear-gradient(#9fe9ff, #9fe9ff) right 0 top 0 / 26px 2px no-repeat,
        linear-gradient(#9fe9ff, #9fe9ff) right 0 top 0 / 2px 26px no-repeat,
        linear-gradient(#9fe9ff, #9fe9ff) left 0 bottom 0 / 26px 2px no-repeat,
        linear-gradient(#9fe9ff, #9fe9ff) left 0 bottom 0 / 2px 26px no-repeat,
        linear-gradient(#9fe9ff, #9fe9ff) right 0 bottom 0 / 26px 2px no-repeat,
        linear-gradient(#9fe9ff, #9fe9ff) right 0 bottom 0 / 2px 26px no-repeat;
}
#winbox[data-win="hero"] > * { position: relative; }
#winbox[data-win="hero"] h2 {
    color: #9fe9ff; text-shadow: 0 0 14px rgba(57,215,255,.5), 2px 2px 0 #05131f;
    padding-bottom: 10px; margin-bottom: 14px;
    background: linear-gradient(90deg, #39d7ff, rgba(57,215,255,0)) left bottom / 100% 2px no-repeat;
}

/* ── 2) BERGBAU-TERMINAL (Fenster „Talente") ─────────────────────────────── */
/* Warme Gegenprobe zum vielen Cyan: Messingplatte, Bernsteinschrift, harte
   Ecken. Die „Nieten" oben und unten sind ein wiederholter Radialverlauf. */
#winbox[data-win="talents"] {
    background:
        radial-gradient(circle at 14px 12px, #d8a24a 0 2.5px, transparent 3px) left top / 34px 34px repeat-x,
        radial-gradient(circle at 14px 22px, #d8a24a 0 2.5px, transparent 3px) left bottom / 34px 34px repeat-x,
        repeating-linear-gradient(0deg, rgba(255,190,90,.035) 0 2px, transparent 2px 4px),
        linear-gradient(180deg, #241a10, #16100a);
    border: 3px solid #6b5230; border-radius: 3px;
    box-shadow: inset 0 0 0 2px #100b06, inset 0 2px 0 rgba(255,200,120,.12),
                0 14px 34px rgba(0,0,0,.6);
    padding: 34px 26px;
    filter: none;
}
#winbox[data-win="talents"] h2 {
    color: #ffb64a; letter-spacing: 7px; text-shadow: 0 0 12px rgba(255,150,40,.35), 2px 2px 0 #120c06;
    border-bottom: 2px solid #6b5230; padding-bottom: 10px;
}
#winbox[data-win="talents"] #win-close {
    top: 6px; right: 6px; background: #241a10; color: #ffb64a;
    border: 2px solid #6b5230; border-radius: 3px; box-shadow: none;
}
#winbox[data-win="talents"] :is(.sub, .hint, .card-sub, .rail-btn span, .ti-desc) { color: #b39468; }
#winbox[data-win="talents"] :is(.sec, .card-title, .val, .stat b, .ti-name, .tal-foot b) { color: #ffb64a; }
#winbox[data-win="talents"] :is(.card, .tal-info, .rail-btn) {
    background: rgba(255, 190, 90, .05); border: 2px solid #4a3a22; border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,200,120,.1);
}
#winbox[data-win="talents"] :is(.row, .line, .stat, .card-head) { border-bottom-color: #4a3a22; }
#winbox[data-win="talents"] .rail-btn.on { background: #6b4f14; box-shadow: inset 0 0 0 2px #ffb64a; }
#winbox[data-win="talents"] :is(.btn, .ti-buy) {
    color: #1a1006; background: linear-gradient(180deg, #ffc86a, #d89a2a);
    border: 2px solid #6b5230; border-radius: 3px; box-shadow: 0 2px 0 #120c06;
}
#winbox[data-win="talents"] :is(.btn:disabled, .ti-buy:disabled) {
    background: #2e2416; color: #7a6647; border-color: #4a3a22; box-shadow: none;
}
#winbox[data-win="talents"] .tnode {
    background: #241a10; border: 3px solid #100b06; box-shadow: inset 0 0 0 3px #4a3a22; color: #e8d6b4;
}
#winbox[data-win="talents"] .tnode.part  { background: #5c4210; box-shadow: inset 0 0 0 3px #ffb64a; }
#winbox[data-win="talents"] .tnode.maxed { background: #d89a2a; color: #1a1006; box-shadow: inset 0 0 0 3px #ffdca0; }
#winbox[data-win="talents"] .tal-lines line { stroke: #4a3a22; }
#winbox[data-win="talents"] .tal-lines line.lit { stroke: #ffb64a; }
#winbox[data-win="talents"] .pbar {
    background: #100b06; border: 2px solid #4a3a22; border-radius: 3px; box-shadow: none; overflow: hidden;
}
#winbox[data-win="talents"] .pbar.xp > i { background: linear-gradient(90deg, #a8701a, #ffc86a); box-shadow: none; }

/* ── 3) RUHIG & MODERN (Fenster „Kosmetik") ──────────────────────────────── */
/* Kein Sci-Fi-Zierrat: dunkles Glas, ein Haarstrich als Rand, weiche Ecken,
   ein einziger Akzentton. Setzt darauf, dass Ruhe auch eine Aussage ist. */
#winbox[data-win="shop"] {
    background: linear-gradient(180deg, #1a1f2b, #141821);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    padding: 26px 28px 28px;
    filter: none;
}
#winbox[data-win="shop"] h2 {
    color: #f2f5f9; letter-spacing: 2px; font-size: 22px; text-shadow: none;
    margin-bottom: 6px;
}
#winbox[data-win="shop"] #win-close {
    top: 10px; right: 10px; width: 36px; height: 36px; font-size: 18px;
    background: rgba(255,255,255,.06); color: #aab4c4;
    border: 1px solid rgba(255,255,255,.1); border-radius: 10px; box-shadow: none;
}
#winbox[data-win="shop"] #win-close:hover { background: rgba(255,255,255,.12); color: #fff; }
#winbox[data-win="shop"] :is(.sub, .hint, .card-sub) { color: #8b95a6; }
#winbox[data-win="shop"] .sec {
    color: #8b95a6; font-size: 12px; letter-spacing: 2px; text-shadow: none;
    text-transform: uppercase; margin: 22px 0 10px;
}
#winbox[data-win="shop"] .card {
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px; box-shadow: none;
}
#winbox[data-win="shop"] :is(.card-title, .val, .stat b) { color: #e8edf4; }
#winbox[data-win="shop"] :is(.row, .line, .stat, .card-head) {
    border-bottom: 1px solid rgba(255,255,255,.06);
}
#winbox[data-win="shop"] :is(.skin, .pet) {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; box-shadow: none;
}
#winbox[data-win="shop"] :is(.skin:hover, .pet:hover) { background: rgba(255,255,255,.08); }
#winbox[data-win="shop"] :is(.skin.on, .pet.on) {
    background: rgba(90, 150, 255, .16); border-color: #5a96ff; box-shadow: none;
}
#winbox[data-win="shop"] :is(.skin i, .pet i) { color: #cfd8e6; }
#winbox[data-win="shop"] :is(.skin b, .pet b) { color: #e8edf4; }
#winbox[data-win="shop"] :is(.skin span, .pet span) { color: #8b95a6; }
#winbox[data-win="shop"] .btn {
    color: #0d1119; background: #5a96ff; border: none; border-radius: 10px;
    box-shadow: none; font-size: 15px; padding: 10px 18px;
}
#winbox[data-win="shop"] .btn:hover:not(:disabled) { background: #7aabff; }
#winbox[data-win="shop"] .btn:disabled { background: rgba(255,255,255,.06); color: #6a7385; }
#winbox[data-win="shop"] .btn.ghost {
    background: rgba(255,255,255,.06); color: #cfd8e6;
    border: 1px solid rgba(255,255,255,.1);
}
#winbox[data-win="shop"] .pbtn {
    background: rgba(255,255,255,.05); color: #dfe6f0;
    border: 1px solid rgba(255,255,255,.09); border-radius: 12px; box-shadow: none;
}
#winbox[data-win="shop"] .pbtn:hover:not(:disabled) { background: rgba(255,255,255,.1); }