/* app.css — Minestellar. Mobile zuerst.
   Die Galaxie-Karte füllt den ganzen Bildschirm; HUD, Symbolleiste und Fenster schweben darüber
   (Vorbild ExoMiner: css/ui-holo-hud.css, css/windows.css). Keine Webseiten-Spalten.

   Farbregeln — überall gleich, damit man sie einmal lernt (übernommen aus ExoMiner windows.css):
     Weiß   Titel und Namen
     Grau   Erklärtext
     Türkis Abschnitte, Nebenknöpfe, Auswahl
     Gold   die EINE Hauptsache: Hauptknopf, Werte, Preise
   Farben stehen nur hier und in js/ui/stage/palette.js (gleiche Werte). Kontraste ≥ 4,5:1.

   Schriften (Jens 04.11.2026, Fassung C): Fredoka für Titel, Namen und Knöpfe (rund wie die Comic-Grafik),
   Exo 2 für Text und Zahlen (gleich breite Ziffern — hochzählende Zahlen stehen still). Beide SIL OFL 1.1,
   liegen auf dem eigenen Server (assets/fonts/, Lizenz in OFL.txt) — keine Anfrage an Google. */

@font-face { font-family: 'Exo 2'; font-weight: 400; font-display: swap; src: url('../assets/fonts/exo2-400.woff2') format('woff2'); }
@font-face { font-family: 'Exo 2'; font-weight: 600; font-display: swap; src: url('../assets/fonts/exo2-600.woff2') format('woff2'); }
@font-face { font-family: 'Exo 2'; font-weight: 700 900; font-display: swap; src: url('../assets/fonts/exo2-700.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 500 900; font-display: swap; src: url('../assets/fonts/fredoka-600.woff2') format('woff2'); }

:root {
    --bg: #0b1020;
    --bg-deep: #070b16;
    --glass: rgba(9, 20, 34, 0.88);
    --glass-top: rgba(15, 32, 48, 0.94);
    --card: rgba(16, 33, 50, 0.80);
    --line: rgba(57, 215, 255, 0.32);
    --line-soft: rgba(57, 215, 255, 0.14);
    --holo: #39d7ff;
    --holo-light: #7fdcff;
    --text: #e2ecf5;
    --muted: #95abbd;
    --gold: #ffcc55;
    --gold-dark: #f0b83a;
    --copper: #e08a45;
    --ok: #7ee08a;
    --warn: #ffcf7a;
    --danger: #ff7b6b;
    --radius: 12px;
    --gap: 10px;
    --font: 'Exo 2', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-title: 'Fredoka', 'Exo 2', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100dvh;
    overflow: hidden;              /* die Seite selbst scrollt nie, nur Fensterinhalte */
    background: var(--bg-deep);
    color: var(--text);
    font: 16px/1.45 var(--font);
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--holo-light); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Spielfläche: Karte im Vollbild --- */
.main { display: contents; }
.galaxy {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bg);
    image-rendering: pixelated;
    touch-action: none;            /* Wischen und Zwei-Finger-Zoom macht galaxy.js selbst */
    cursor: grab;
}
.galaxy:active { cursor: grabbing; }

/* --- Glas-Leisten (HUD oben, Symbolleiste unten) mit Eckklammern wie bei ExoMiner #bar --- */
.hud, .tabs {
    position: fixed;
    z-index: 5;
    left: max(var(--gap), env(safe-area-inset-left));
    right: max(var(--gap), env(safe-area-inset-right));
    background: var(--glass);
    border: 2px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 0 26px rgba(57, 215, 255, 0.14), inset 0 1px 0 rgba(57, 215, 255, 0.3),
                0 10px 30px rgba(0, 0, 0, 0.55);
}
.hud::before, .hud::after, .tabs::before, .tabs::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--holo);
    opacity: 0.7;
    pointer-events: none;
}
.hud::before, .tabs::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; }
.hud::after, .tabs::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 16px 0; }

/* Kopfzeile (ui/hud.js, 05.11.2026): schwebende Kapseln oben links statt einer durchgehenden Leiste. */
.hud {
    top: max(var(--gap), env(safe-area-inset-top));
    right: auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
    pointer-events: none;                 /* nur die Kapseln fangen Klicks, dazwischen bleibt die Karte bedienbar */
}
.hud::before, .hud::after { display: none; }
.hud__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cap {
    pointer-events: auto; position: relative; isolation: isolate;
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px 6px 10px;
    border: 0; border-radius: 999px; color: var(--text); font: inherit; background: none;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.55));
}
/* Gemalter Comic-Rahmen (assets/ui/frame-capsule.png, 9-Slice: Ecken bleiben rund, die Mitte wird gestreckt). */
.cap::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-style: solid; border-color: transparent; border-width: 16px 26px; border-image: url('../assets/ui/frame-capsule.png') 48 80 fill / 16px 26px stretch;
}
.cap[hidden] { display: none; }
.cap--sol { cursor: pointer; text-align: left; padding-right: 16px; }
.cap--sol:hover { filter: drop-shadow(0 0 6px rgba(242, 196, 67, 0.7)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.55)); }
.cap__text { display: flex; flex-direction: column; line-height: 1.1; }
.cap__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.cap--sol .cap__value { font-size: 1.3rem; color: var(--gold); }
.cap--quanta .cap__value { color: var(--holo-light); }
.cap--shards .cap__value { color: #d7b8ff; }
.cap__sub { font-size: 0.75rem; color: #9fd8a8; font-variant-numeric: tabular-nums; }
.cap__plus {
    width: 24px; height: 24px; margin-left: 2px; border-radius: 50%; border: 2px solid #050c22; cursor: pointer;
    background: #6be38f; color: #062012; font: 700 1rem/1 var(--font-title); display: inline-flex; align-items: center; justify-content: center;
}
.cap--galaxy { flex-direction: column; align-items: stretch; gap: 3px; min-height: 0; padding: 8px 22px 9px; min-width: 230px; }
.cap__label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #9fb3c8); }
.cap__bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cap__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, #8a5cff, #d7b8ff); transition: width 0.6s ease; }
.cap--galaxy .cap__sub { color: var(--text); opacity: 0.8; }
.cap--done { filter: drop-shadow(0 0 8px rgba(215, 184, 255, 0.8)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.55)); }
.hud__status { pointer-events: auto; color: var(--warn); font-size: 0.85rem; padding: 4px 10px; border-radius: 10px; background: rgba(11, 16, 32, 0.9); }
.hud__status:empty { display: none; }
.income-rows { display: grid; gap: 6px; margin: 8px 0; }
.income-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; }
.income-total { font-weight: 700; text-align: right; }

.tabs {
    bottom: max(var(--gap), env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    max-width: 640px;
    margin: 0 auto;
}
.tab {
    min-height: 52px;
    padding: 4px 2px;
    background: linear-gradient(180deg, rgba(57, 215, 255, 0.11), rgba(57, 215, 255, 0.03));
    border: 2px solid rgba(57, 215, 255, 0.26);
    border-radius: 12px;
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.tab:hover { background: rgba(57, 215, 255, 0.18); border-color: rgba(57, 215, 255, 0.55); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.tab__icon { font-size: 1.25rem; line-height: 1; color: var(--holo-light); text-shadow: 0 0 10px rgba(57, 215, 255, 0.5); }
.tab__img { width: 28px; height: 28px; display: block; object-fit: contain; }
.tab__label { line-height: 1.1; font-family: var(--font-title); font-weight: 600; }
/* Schildchen „lohnt sich“: innen oben rechts (wie ExoMiner .ico em), Gold = die Hauptsache. */
.tab__badge {
    position: absolute;
    top: 3px;
    right: 4px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 7px;
    border: 2px solid rgba(4, 14, 22, 0.9);
    background: var(--gold);
    color: #2a1c06;
    font: 700 11px/14px var(--font);
    font-style: normal;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.tab__badge[hidden] { display: none; }
@media (max-width: 420px) {
    .tab__label { font-size: 0.7rem; }
}
.tab--active {
    color: #eafaff;
    background: rgba(57, 215, 255, 0.24);
    border-color: var(--holo);
    box-shadow: 0 0 14px rgba(57, 215, 255, 0.4), inset 0 1px 0 rgba(57, 215, 255, 0.4);
}

/* --- Fenster über der Karte (vorerst das bisherige Panel; Schritt 3 macht daraus schließbare Fenster) --- */
.panel {
    position: fixed;
    z-index: 4;
    left: max(var(--gap), env(safe-area-inset-left));
    right: max(var(--gap), env(safe-area-inset-right));
    bottom: calc(max(var(--gap), env(safe-area-inset-bottom)) + 76px);
    max-height: 46dvh;
    display: grid;
    gap: var(--gap);
    align-content: start;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-style: solid; border-color: transparent; border-width: 30px;
    border-image: url('../assets/ui/frame-window.png') 80 fill / 30px stretch;   /* gemalter Comic-Rahmen (9-Slice) */
    background: none;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6));
}
.panel:empty { display: none; }
/* PC: mittig, ein paar Pixel über der Symbolleiste, so breit wie sie (Jens 04.11.2026); wächst nach
   oben, höchstens bis unter die obere Leiste. */
@media (min-width: 900px) {
    .panel {
        left: 50%;
        right: auto;
        width: min(640px, calc(100vw - 2 * var(--gap)));
        transform: translateX(-50%);
        max-height: calc(100dvh - 86px - 96px);
    }
}

/* Fensterkopf: Titel links, Schließen rechts (44 px Zielgröße). */
.win-head {
    position: sticky;
    top: -4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -4px -4px 0;
    padding: 4px 8px 10px;
    background: #015bd3;               /* gleiche Farbe wie die Fläche im Fensterrahmen */
    border-bottom: 1px solid var(--line-soft);
}
.win-title { margin: 0; font-family: var(--font-title); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.08em; color: var(--text); }
.win-close {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(57, 215, 255, 0.08);
    color: var(--holo-light);
    font: 700 18px/1 var(--font);
    cursor: pointer;
}
.win-close:hover { background: rgba(57, 215, 255, 0.18); color: #fff; }
/* Aufseher-Abzeichen oben rechts im Planetenfenster (wie auf der Karte): Drohne + Sterne oder „+“. */
.win-title { flex: 1; min-width: 0; }
.ov-badge {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 68px; height: 68px; padding: 2px 8px; border-radius: 34px;
    border: 2px solid #7fdcff; background: rgba(127, 220, 255, 0.12);
    color: #7fdcff; cursor: pointer; line-height: 1;
}
.ov-badge:hover { background: rgba(127, 220, 255, 0.24); }
.ov-badge--empty { border-style: dashed; opacity: 0.75; }
.ov-badge__icon { font-size: 1.8rem; font-weight: 700; }
.ov-badge__stars { font-size: 0.6rem; color: var(--gold); letter-spacing: 0.05em; margin-top: 2px; }

/* Solange der Startbildschirm liegt, kein Spiel-Gerüst dahinter zeigen. */
body.on-start .hud, body.on-start .tabs, body.on-start .panel, body.on-start .side-buttons { visibility: hidden; }

/* --- Karten und Text --- */
.card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 12px;
}
.card__title { margin: 0 0 8px; font-family: var(--font-title); font-weight: 600; font-size: 1.1rem; color: var(--text); letter-spacing: 0.04em; }
.card p { margin: 0 0 8px; }
.muted, .hint { color: var(--muted); font-size: 0.9rem; }
.warn { color: var(--warn); font-size: 0.9rem; }
.ok { color: var(--ok); }
.num { font-variant-numeric: tabular-nums; }
.list { margin: 0 0 8px; padding-left: 18px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

/* --- Zeilen-Liste (Schnellzugriff Planeten) --- */
.list-rows { display: grid; gap: 6px; }
.list-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: rgba(57, 215, 255, 0.05);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.list-row:hover { background: rgba(57, 215, 255, 0.14); border-color: var(--holo); }
.list-row--next { border-style: dashed; }
.list-row__name { font-family: var(--font-title); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.planet-icon { width: 36px; height: 36px; object-fit: contain; flex: none; }
.list-row--next .planet-icon { filter: grayscale(1) brightness(0.7); }
.list__badge { position: static; margin-left: 6px; }

/* --- Tabelle --- */
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; table-layout: fixed; }
.table th, .table td { padding: 6px 4px; border-top: 1px solid var(--line-soft); text-align: left; }
.table th { color: var(--holo-light); font-family: var(--font-title); font-weight: 600; }
.table thead th { border-top: 0; font-size: 0.85rem; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .col-name { width: 38%; }
.tag { font-size: 0.75rem; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.tag--up { background: rgba(126, 224, 138, 0.15); color: var(--ok); }
.tag--down { background: rgba(255, 123, 107, 0.15); color: var(--danger); }

/* --- Knöpfe und Felder (mind. 44 px Zielgröße für Touch) --- */
.btn {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(57, 215, 255, 0.08);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.btn:hover:not(:disabled) { background: rgba(57, 215, 255, 0.18); border-color: var(--holo); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--gold); color: #2a1c06; border-color: var(--gold); font-weight: 700; }
.btn--primary:hover:not(:disabled) { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn--danger { background: rgba(255, 123, 107, 0.12); border-color: var(--danger); color: #ffd6cf; }
.btn--bonus { background: var(--copper); color: #2a1206; border-color: var(--copper); font-weight: 700; }
.btn--small { min-height: 36px; padding: 4px 10px; font-size: 0.85rem; }
.btn--active { border-color: var(--holo); color: var(--holo-light); }
.btn--big { font-size: 1.2rem; padding: 12px 32px; }
.btn--buy { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; }
.btn__cost { font-size: 0.85rem; color: var(--gold); }
.btn--primary .btn__cost { color: #2a1c06; }
/* Knöpfe: Beschriftung in der Titelschrift, Preise und Zahlen in Exo 2 (gleich breite Ziffern). */
.btn { font-family: var(--font-title); font-weight: 600; }
.btn__cost { font-family: var(--font); font-weight: 700; font-variant-numeric: tabular-nums; }
.select {
    width: 100%;
    min-height: 44px;
    margin-bottom: 8px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    padding: 6px;
}

.menu { display: grid; gap: 8px; }
.menu__player { margin: 4px 0 0; text-align: center; }
.menu .btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.btn--menu { font-size: 1.2rem; min-width: 44px; min-height: 44px; }

/* --- Dialog, Hinweis, Werbe-Platzhalter --- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 45;                /* über dem Startbildschirm (40), unter Hinweisen (50) */
    display: grid;
    place-items: center;
    background: rgba(4, 8, 16, 0.72);
    padding: 16px;
}
.overlay[hidden] { display: none; }
.dialog {
    width: min(420px, 100%);
    border-style: solid; border-color: transparent; border-width: 30px;
    border-image: url('../assets/ui/frame-window.png') 80 fill / 30px stretch;   /* gemalter Comic-Rahmen (9-Slice) */
    background: none;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6));
    padding: 8px;
    max-height: calc(100dvh - 32px);    /* lange Fenster scrollen statt aus dem Bild zu laufen */
    overflow-y: auto;
}
.dialog__title { margin: 0 0 12px; color: var(--text); font-size: 1.15rem; letter-spacing: 0.04em; }
.dialog__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.bonus-offer { font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.ad-placeholder { text-align: center; padding: 24px 8px; border: 1px dashed var(--line); border-radius: var(--radius); }
.ad-placeholder__count { font-size: 2.5rem; font-weight: 700; color: var(--gold); margin: 8px 0 0; }

.toast {
    position: fixed;
    left: 50%;
    top: 84px;
    z-index: 50;                /* auch über dem Startbildschirm sichtbar */
    transform: translate(-50%, -20px);
    max-width: min(92vw, 420px);
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--glass-top);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.toast--visible { opacity: 1; transform: translate(-50%, 0); }
.toast--error { border-color: var(--danger); }

/* --- Lager (wie Idle Planet Miner): Reiter, Warenzeilen, Verkaufsleiste --- */
.subtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.subtab {
    min-height: 40px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font: 600 0.9rem/1 var(--font-title);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.subtab--active { color: var(--text); border-bottom-color: var(--holo); }
.stock-rows { display: grid; gap: 6px; margin-bottom: 10px; }
.stock-row {
    display: grid;
    grid-template-columns: 32px 1fr auto 72px;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: rgba(57, 215, 255, 0.07);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.stock-row:hover { background: rgba(57, 215, 255, 0.14); }
.stock-row--active { border-color: var(--holo); background: rgba(57, 215, 255, 0.18); }
.stock-row__name { font-weight: 600; }
.stock-row__qty { font-size: 1.05rem; }
.stock-row__price { text-align: right; color: var(--muted); }
.good-icon { width: 32px; height: 32px; object-fit: contain; }
.sellbar { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.sellbar__slider { grid-column: 1 / -1; width: 100%; accent-color: var(--holo); min-height: 32px; }
.sellbar__info { display: grid; gap: 2px; }
.sellbar__value { color: var(--gold); font-weight: 700; }

/* --- Planetenfenster: Blättern und Ausbauten mit Stufe und Wert --- */
.stepper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.stepper .btn { min-width: 44px; font-size: 1.3rem; }
.upgrades { display: grid; gap: 8px; }
.upgrade { display: grid; grid-template-columns: 1fr minmax(130px, 45%); gap: 10px; align-items: center; }
.upgrade__info { display: grid; gap: 2px; }

/* --- Aufseher --- */

.noscript { padding: 16px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .toast, .tab { transition: none; }
}

/* ---- Aufseher: Karten im Stil moderner Sammelkarten (Farbe = Seltenheit) ---- */
.rar-0 { --rar: #7fdcff; }
.rar-1 { --rar: #a9bccf; }
.rar-2 { --rar: #6be38f; }
.rar-3 { --rar: #4fb6ff; }
.rar-4 { --rar: #b88cff; }
.rar-5 { --rar: var(--gold); }
.drone { width: 100%; height: 100%; overflow: visible; }
.drone__rotor { fill: color-mix(in srgb, var(--rar) 35%, transparent); stroke: var(--rar); stroke-width: 1.2; }
.drone__arm { stroke: var(--rar); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.drone__tip, .drone__eye { fill: var(--rar); }
.drone__eye { filter: drop-shadow(0 0 3px var(--rar)); }
.drone__body { fill: #142338; stroke: var(--rar); stroke-width: 2.4; }
.drone__visor { fill: #070b16; stroke: color-mix(in srgb, var(--rar) 60%, transparent); stroke-width: 1; }
.drone__q { fill: var(--rar); font: 700 10px var(--font-title); }

.ov-hire { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.ov-hire__portrait {
    width: 84px; height: 84px; padding: 8px; border-radius: 18px;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rar) 28%, transparent), transparent 70%), rgba(7, 11, 22, 0.6);
    border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
}
.ov-hire__body .btn--buy { margin-top: 8px; }
.ov-odds { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 8px 0 4px; background: rgba(255,255,255,0.06); }
.ov-odds__part { background: var(--rar); }
.ov-odds__part + .ov-odds__part { border-left: 2px solid #0b1424; }
.ov-odds__text { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 0.85rem; }
.ov-odds__text span { color: var(--rar); }

.ov-slots { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.ov-pips { display: flex; gap: 6px; margin: 6px 0; }
.ov-pip { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed #7fdcff; opacity: 0.6; }
.ov-pip--on { border-style: solid; background: #7fdcff; opacity: 1; box-shadow: 0 0 6px #7fdcff; }

.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ov-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 10px 10px; border-radius: 16px; text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 18%, transparent), rgba(7, 11, 22, 0.55) 55%);
    border: 1px solid color-mix(in srgb, var(--rar) 50%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rar) 30%, transparent);
}
.ov-card__portrait { width: 64px; height: 64px; }
.ov-card__stars { color: var(--gold); letter-spacing: 0.1em; font-size: 0.9rem; line-height: 1; }
.ov-card__name { font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; color: var(--rar); }
.ov-card__tag {
    position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 8px;
    font-size: 0.7rem; background: rgba(7, 11, 22, 0.8); color: var(--muted, #9fb3c8); border: 1px solid var(--line-soft);
}
.ov-card__tag--here { color: var(--rar); border-color: var(--rar); }
.ov-chips { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 2px; }
.ov-chip { font-size: 0.78rem; line-height: 1.25; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,0.05); color: var(--muted, #9fb3c8); }
.ov-chip--main { background: color-mix(in srgb, var(--rar) 14%, transparent); color: var(--text); }
.ov-chip--third { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--text); }
.ov-card__foot { display: grid; gap: 6px; width: 100%; margin-top: auto; padding-top: 6px; }
.select--small { min-height: 38px; font-size: 0.85rem; padding: 4px 8px; }
.ov-card__foot .btn { justify-content: center; text-align: center; }
.ov-card--click { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.ov-card--click:hover { transform: translateY(-2px); box-shadow: 0 4px 14px color-mix(in srgb, var(--rar) 35%, transparent); }
.ov-card--click:focus-visible { outline: 2px solid var(--rar); outline-offset: 2px; }
.ov-card--free { border-width: 2px; box-shadow: 0 0 12px color-mix(in srgb, var(--rar) 35%, transparent); }
.ov-card--busy { opacity: 0.6; }
.ov-card--busy:hover { opacity: 0.9; }
.ov-card__tag--free { color: #6be38f; border-color: #6be38f; font-weight: 700; }
.ov-slot__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ov-slot__head .stepper { margin: 0; gap: 10px; }
.ov-slot__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 120px; margin-top: 8px; border: 2px dashed rgba(127, 220, 255, 0.45); border-radius: 16px;
    background: rgba(127, 220, 255, 0.04); text-align: center; padding: 12px;
}
.ov-slot__plus { font: 700 2rem/1 var(--font-title); color: #7fdcff; }
.ov-slot__filled {
    display: grid; grid-template-columns: 64px 1fr; gap: 10px 12px; align-items: center; margin-top: 8px;
    padding: 12px; border-radius: 16px; border: 2px solid var(--rar);
    background: linear-gradient(90deg, color-mix(in srgb, var(--rar) 18%, transparent), rgba(7, 11, 22, 0.55));
}
.ov-slot__filled .btn { grid-column: 1 / -1; justify-content: center; }
.ov-slot__info { display: grid; gap: 4px; justify-items: start; }
.ov-line__stars { color: var(--gold); }
.ov-line__bonus { color: var(--rar); font-weight: 600; }

/* ---- Produktion (wie Idle Planet Miner, eigener Stil): Karten je Anlage, Rezept-Auswahl ---- */
.good-icon--missing { display: inline-block; border-radius: 50%; border: 2px solid #070b16; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.25); }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.prod-card {
    display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px;
    border: 1px solid var(--line); background: linear-gradient(180deg, rgba(57, 215, 255, 0.10), rgba(7, 11, 22, 0.55));
}
.prod-card__head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.prod-card__clear {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-soft);
    background: rgba(255, 90, 90, 0.08); color: #ff8a8a; font: 700 14px/1 var(--font); cursor: pointer;
}
.prod-card__empty { min-height: 72px; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; color: var(--muted); }
.prod-card__recipe { justify-content: center; }
.prod-card--locked { align-items: center; justify-content: center; border-style: dashed; background: rgba(57, 215, 255, 0.04); min-height: 220px; }
.prod-card__lock { width: 48px; height: 56px; fill: #39d7ff; stroke: #39d7ff; opacity: 0.85; }
.prod-card__keyhole { fill: #0b1424; stroke: none; }
.prod-card--locked .btn { width: 100%; }
.prod-flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 72px; }
.prod-flow__inputs { display: flex; gap: 6px; flex-wrap: wrap; }
.prod-flow__item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.prod-flow__count { font-size: 0.8rem; color: var(--text); }
.prod-flow__count--short { color: #ffb35c; }
.prod-flow__arrow { color: var(--holo); font-size: 1.1rem; }
.prod-flow__item--out .prod-flow__count { color: var(--gold); font-weight: 700; }
.prod-bar { display: grid; gap: 3px; justify-items: center; }
.prod-bar__track { width: 100%; height: 10px; border-radius: 5px; background: #050912; border: 1px solid var(--line-soft); overflow: hidden; }
.prod-bar__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #39d7ff, #7fdcff); border-radius: 5px; }
.prod-bar__text { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.recipe-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 14px;
    border: 1px solid var(--line); background: rgba(57, 215, 255, 0.07); color: var(--text); font: inherit; cursor: pointer; text-align: center;
}
.recipe-card:hover { background: rgba(57, 215, 255, 0.15); }
.recipe-card--current { border: 2px solid var(--holo); box-shadow: 0 0 10px rgba(57, 215, 255, 0.35); }
.recipe-card--locked { cursor: default; background: rgba(7, 11, 22, 0.55); border-style: dashed; }
.recipe-card--locked .prod-flow { opacity: 0.55; }
.recipe-card--locked .btn { width: 100%; }
.recipe-card__name { font-family: var(--font-title); font-weight: 600; color: var(--holo-light); }
.prod-flow--small { min-height: 0; width: 100%; }

/* Banner „Neue Version ist da“ (oben mittig, über allem). */
.app-update {
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 82px); left: 50%; transform: translateX(-50%); z-index: 50;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
    max-width: calc(100vw - 24px); padding: 10px 12px; border-radius: 14px;
    background: rgba(11, 20, 36, 0.96); border: 1px solid var(--holo); box-shadow: 0 0 16px rgba(57, 215, 255, 0.35);
}
.app-update__text { font-weight: 600; flex-basis: 100%; text-align: center; }

/* ---- Forschungsbaum (wie die Projekte bei Idle Planet Miner, eigener Stil) ---- */
.research-map {
    position: relative; overflow: hidden; height: max(220px, calc(46dvh - 150px)); margin-top: 4px; border-radius: 14px;
    background: rgba(5, 12, 24, 0.55); cursor: grab; touch-action: none; overscroll-behavior: contain;
}
/* PC: Das Fenster darf bis unter die obere Leiste wachsen — die Karte füllt es (Kopf + Hinweis ≈ 170 px). */
@media (min-width: 900px) { .research-map { height: max(320px, calc(100dvh - 182px - 175px)); } }
.research-map--drag { cursor: grabbing; user-select: none; }
.research-map--drag .research-node { cursor: grabbing; }
.research-board { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.research-lines { position: absolute; inset: 0; }
.research-link { stroke: rgba(127, 220, 255, 0.22); stroke-width: 5; stroke-linecap: round; }
.research-link--lit { stroke: #6be38f; }
/* Knoten im Comic-Stil (Jens 05.11.2026): dicker Metallrand, dunkelblauer Außenumriss, und je Zustand
   klar unterscheidbar — Farbe, Füllung, Abzeichen oben rechts:
     erforscht      grün gefüllt, ✓
     jetzt möglich  gold, leuchtet und pulsiert, !     (offen und das Material liegt im Lager)
     offen          heller Rand, noch zu teuer
     gesperrt       dunkel, Bild grau, Schloss          (Voraussetzung fehlt) */
.research-node {
    position: absolute; width: 126px; height: 126px; padding: 6px 4px; border-radius: 22px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 4px solid #4d6680; background: linear-gradient(180deg, #16263f, #0b1526); color: var(--text); cursor: pointer; font: inherit;
    box-shadow: 0 0 0 3px #050c22, inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.5);
}
.research-node::after {
    position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font: 700 1rem/1 var(--font-title);
    border: 3px solid #050c22; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}
.research-node__icon { font-size: 2.2rem; line-height: 1; }
.research-node__icon .research-img { width: 72px; height: 72px; display: block; object-fit: contain; }
.research-dialog__icon .research-img { width: 76px; height: 76px; object-fit: contain; }
.research-node__name {
    font-size: 0.78rem; line-height: 1.15; text-align: center; max-width: 116px; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;   /* höchstens 2 Zeilen: Stufe I–III bleibt lesbar */
}
/* Hintergründe deckend: Linien laufen nie sichtbar hinter einem Knoten durch. */
.research-node--done { border-color: #3fbf6a; background: linear-gradient(180deg, #2a7a4c, #154a32); }
.research-node--done::after { content: '✓'; background: #6be38f; color: #062012; }
.research-node--open { border-color: #c9d8e8; }
.research-node--ready {
    border-color: #ffc94a; background: linear-gradient(180deg, #4a3a12, #1d1a10);
    box-shadow: 0 0 0 3px #050c22, inset 0 2px 0 rgba(255, 230, 150, 0.3), 0 0 22px rgba(255, 201, 74, 0.75);
    animation: research-pulse 1.4s ease-in-out infinite;
}
.research-node--ready::after { content: '!'; background: #ffc94a; color: #2a1a00; }
.research-node--ready .research-node__name { color: #ffe9a8; font-weight: 700; }
.research-node--locked { border-color: #26384d; background: #0a1220; }
.research-node--locked > * { opacity: 0.4; filter: grayscale(1); }
.research-node--locked::after { content: '🔒'; background: #26384d; font-size: 0.8rem; }
@keyframes research-pulse {
    50% { box-shadow: 0 0 0 3px #050c22, inset 0 2px 0 rgba(255, 230, 150, 0.3), 0 0 6px rgba(255, 201, 74, 0.35); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .research-node--ready { animation: none; } }
.research-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px; font-size: 0.8rem; }
.research-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; border: 2px solid #050c22; }
.research-legend .lg-ready::before { background: #ffc94a; }
.research-legend .lg-done::before { background: #3fbf6a; }
.research-legend .lg-open::before { background: #c9d8e8; }
.research-legend .lg-locked::before { background: #26384d; }
.research-dialog__icon {
    width: 96px; height: 96px; margin: 4px auto 8px; border-radius: 20px; border: 2px solid var(--line);
    display: flex; align-items: center; justify-content: center; font-size: 3rem; background: #0d1a2e;
}
.research-dialog__effect { text-align: center; font-size: 1.05rem; margin: 4px 0; }
.research-costs { display: grid; gap: 8px; justify-content: center; margin: 12px 0; }
.research-cost { display: flex; align-items: center; gap: 12px; }
.research-cost__text { font-size: 1.3rem; font-weight: 700; }
.research-cost__text--ok { color: #6be38f; }
.research-cost__text--missing { color: #ff6b6b; }
.research-dialog__go { width: 100%; justify-content: center; }
.research-dialog__done { text-align: center; color: #6be38f; font-weight: 700; font-size: 1.1rem; }
.research-tree { overflow: hidden; }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars__img { width: 16px; height: 16px; }
.ov-card__stars .stars__img { width: 18px; height: 18px; }
.ov-badge__stars .stars__img { width: 13px; height: 13px; }
.drone-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rar, #7fdcff) 55%, transparent)); }
.ov-badge .drone-img { width: 46px; height: 46px; }
.ov-slot__filled .ov-card__portrait { width: 72px; height: 72px; }

/* Konto & Geräte (ui/account.js): Formularfelder, großer Übertragungscode, Status. */
.acc .acc-label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 0.9rem; color: var(--muted, #9fb3c8); }
.acc .acc-input {
    padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(5, 9, 20, 0.7);
    color: var(--text); font: 600 1rem var(--font);
}
.acc .acc-input:focus { outline: 2px solid var(--holo-light, #7fdcff); outline-offset: 1px; }
.acc-code {
    margin: 12px 0; padding: 14px; border-radius: 12px; text-align: center; letter-spacing: 0.18em;
    font: 700 1.8rem/1 var(--font-title); color: var(--holo-light, #7fdcff); background: rgba(57, 215, 255, 0.08);
    border: 1px dashed rgba(127, 220, 255, 0.5); user-select: all;
}
.acc-status { margin: 0 0 8px; }
.acc-ok { color: #6be38b; }
.acc-warn { color: var(--gold); }
.btn--link { background: none; border: 0; color: var(--holo-light, #7fdcff); text-decoration: underline; padding: 6px 0; cursor: pointer; }

/* Knöpfe am rechten Bildschirmrand (ui/rewards.js): Geschenk = Login-Kalender, Klemmbrett = Aufgaben. */
.side-buttons {
    position: fixed; right: max(8px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); z-index: 3;   /* unter Fenstern */
    display: flex; flex-direction: column; gap: 10px;
}
.side-btn {
    position: relative; width: 58px; height: 58px; padding: 4px; border-radius: 16px; cursor: pointer;
    border: 2px solid var(--line); background: rgba(11, 16, 32, 0.82); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.side-btn:hover { border-color: #7fdcff; }
.side-btn__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.side-btn__dot {
    position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%;
    background: #ff4d4d; border: 2px solid #0b1020; box-shadow: 0 0 8px rgba(255, 77, 77, 0.7);
}
.side-btn__dot[hidden] { display: none; }

/* Fenster Belohnung / Aufgaben */
.rw-dialog { max-width: min(560px, 94vw); }
.rw-calendar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 8px 0 14px; }
@media (min-width: 760px) { .rw-calendar { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } }
/* Kalender-Fenster: groß, mit dem Nebel als Hintergrund */
.rw-dialog--calendar {
    width: min(900px, 100%); max-width: none; background:
        linear-gradient(180deg, rgba(11, 16, 32, 0.78), rgba(11, 16, 32, 0.92)), url('../assets/sprites/background.webp') center / cover;
    border-image-slice: 80;            /* Rahmen ohne Füllung: der Nebel bleibt sichtbar */
    background-origin: border-box; background-clip: padding-box;
}
.rw-dialog--calendar .dialog__title { text-align: center; font-size: 1.5rem; margin-top: 0; }
@media (max-width: 420px) { .rw-dialog--calendar { padding: 12px; } .rw-calendar { gap: 6px; } .rw-day__amount { font-size: 0.85rem; } }
.rw-cal__month { text-align: center; margin: -6px 0 2px; font: 700 1.25rem var(--font-title); color: var(--gold); letter-spacing: 0.04em; }
.rw-cal__info { text-align: center; color: var(--muted, #9fb3c8); margin: 0 0 6px; }
.rw-day {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    aspect-ratio: 1; padding: 4px 2px; border-radius: 14px; border: 2px solid #2a3b55; text-align: center;
    background: linear-gradient(180deg, #1c2a44, #111b2e); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06);
}
.rw-day__n { font-size: 0.8rem; font-weight: 700; color: #c7d4e6; }
.rw-day .cur-icon, .rw-day .good-icon { width: 48px; height: 48px; max-width: 58%; max-height: 46%; object-fit: contain; }
.rw-day__amount { font: 700 1rem/1 var(--font-title); white-space: nowrap; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.rw-day--done > :not(.rw-day__ok) { opacity: 0.35; }
.rw-day__ok {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #6be38f; font-size: 2.2rem; font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.rw-day--ready {
    border: 3px solid #ffd166; cursor: pointer; color: inherit; font-family: inherit;
    background: linear-gradient(180deg, #3a3320, #1c2236); box-shadow: 0 0 14px rgba(255, 209, 102, 0.65);
    animation: rw-ready 1.4s ease-in-out infinite;
}
.rw-day--ready:hover { box-shadow: 0 0 22px rgba(255, 209, 102, 0.95); }
@keyframes rw-ready { 50% { transform: scale(1.05); box-shadow: 0 0 22px rgba(255, 209, 102, 0.95); } }
@media (prefers-reduced-motion: reduce) { .rw-day--ready { animation: none; } }
.rw-day--next { border-color: #8aa0bb; }
.rw-day--locked { opacity: 0.8; }
.rw-day--big { border-color: #6fd6ff; background: linear-gradient(180deg, #23305a, #111b2e); }
.rw-cal__claim {
    display: block; margin: 0 auto 8px; min-width: 220px; padding: 12px 28px; border-radius: 14px; border: 0;
    font: 700 1.2rem var(--font-title); color: #0b2410; background: linear-gradient(180deg, #8ef07a, #3fbf4f);
    box-shadow: 0 4px 0 #237a30, 0 6px 16px rgba(0, 0, 0, 0.4);
}
.rw-cal__claim:disabled { color: #9fb3c8; background: #22304a; box-shadow: none; }
.rw-cal__note { text-align: center; font-size: 0.8rem; }
.rw-sol { color: var(--gold); font-weight: 600; }
.rw-quanta { color: #7fdcff; font-weight: 700; }
.rw-row { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); margin: 8px 0; }
.rw-row--claimed { opacity: 0.6; }
.rw-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rw-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rw-bar { position: relative; height: 16px; border-radius: 8px; background: #0b1424; border: 1px solid var(--line); overflow: hidden; }
.rw-bar__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2fb67a, #6be38f); }
.rw-bar__text { position: relative; display: block; text-align: center; font-size: 0.7rem; line-height: 14px; font-weight: 700; }
.rw-ok { color: #6be38f; font-weight: 700; font-size: 0.85rem; }
.rw-all { text-align: center; font-weight: 600; color: var(--muted, #9fb3c8); }
.rw-all--done { color: #6be38f; }
.rw-tiers { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.rw-tier { font-size: 0.6rem; padding: 1px 4px; border-radius: 4px; border: 1px solid var(--line); opacity: 0.6; }
.rw-tier--done { border-color: var(--gold); color: var(--gold); opacity: 1; }

/* Währung als Bild + Zahl (widgets.js money) */
.money { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: middle; }
.cur-icon { display: inline-block; object-fit: contain; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }

/* Galaxie-Module im Splitter-Laden: Bild vor dem Namen (05.11.2026) */
.module-row__name { display: inline-flex; align-items: center; gap: 10px; }
.module-icon { width: 40px; height: 40px; object-fit: contain; flex: none; }

/* Rechter Rand, oben: Einstellungen und Bonus (05.11.2026) */
.side-buttons__group { display: flex; flex-direction: column; gap: 10px; }
.side-buttons__group:empty { display: none; }
.side-btn__sign { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.6rem; color: var(--holo-light); }
.side-btn:disabled { cursor: default; }
.side-btn:disabled .side-btn__img, .side-btn:disabled .side-btn__sign { filter: grayscale(0.85) brightness(0.7); }
.side-btn--ready { border-color: var(--gold); box-shadow: 0 0 14px rgba(242, 196, 67, 0.55), 0 4px 14px rgba(0, 0, 0, 0.45); }
.side-btn__caption {
    position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 5px; border-radius: 6px;
    background: #0b1020; border: 1px solid var(--line); color: var(--text); font-size: 0.68rem; line-height: 1.35;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.side-btn__caption:empty { display: none; }
.menu__toggle[aria-pressed="true"] { border-color: #6be38f; }

/* Leistungsanzeige (ui/shell/perf.js) und Notlösung für „Bildschirm anlassen“ (ui/shell/wakeLock.js) */
#perf-hud {
    position: fixed; bottom: max(2px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 9999;
    padding: 1px 8px; border-radius: 6px; background: rgba(8, 6, 14, 0.78); color: #9fe8ff;
    font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; pointer-events: none;
}
#perf-hud.warn { color: #ffcf5a; }
@media (max-width: 600px) { #perf-hud { white-space: normal; width: 96vw; text-align: center; } }
#perf-hud[hidden] { display: none; }
.keepawake-video { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Große Bildschirme (4K ohne Windows-Skalierung, Jens 05.11.2026): Bedienelemente mitwachsen lassen.
   Nur die Oberfläche wird gezoomt, die Karte (Canvas) zeichnet weiter in voller Auflösung. */
@media (min-width: 2300px) and (min-height: 1250px) {
    #hud, #tabs, #panel, #side, #overlay, #toast, #perf-hud { zoom: 1.5; }
    /* Höhen aus dvh werden mitgezoomt: durch den Zoom teilen, sonst ragen Fenster aus dem Bild. */
    .panel { max-height: calc(100dvh / 1.5 - 86px - 96px); }
    .dialog { max-height: calc(100dvh / 1.5 - 32px); }
    .research-map { height: max(320px, calc(100dvh / 1.5 - 182px - 175px)); }
}
@media (min-width: 3200px) and (min-height: 1750px) {
    #hud, #tabs, #panel, #side, #overlay, #toast, #perf-hud { zoom: 1.85; }
    /* Höhen aus dvh werden mitgezoomt: durch den Zoom teilen, sonst ragen Fenster aus dem Bild. */
    .panel { max-height: calc(100dvh / 1.85 - 86px - 96px); }
    .dialog { max-height: calc(100dvh / 1.85 - 32px); }
    .research-map { height: max(320px, calc(100dvh / 1.85 - 182px - 175px)); }
}

/* Gemalte Comic-Rahmen (05.11.2026): Knöpfe am Rand und in der Leiste (assets/ui/frame-button.png, 9-Slice),
   Forschungs-Knoten „erforscht“ (assets/ui/frame-research-done.png). */
.tab, .side-btn {
    border-style: solid; border-color: transparent; border-radius: 14px; background: none;
    border-image: url('../assets/ui/frame-button.png') 50 fill / 12px stretch;
}
.tab { border-width: 11px; padding: 0 2px; min-height: 60px; }
.tab:hover { background: none; filter: brightness(1.18); }
.tab--active { background: none; box-shadow: none; filter: drop-shadow(0 0 7px rgba(57, 215, 255, 0.85)); }
.tab__badge { top: -6px; right: -6px; }
.side-btn { width: 64px; height: 64px; padding: 0; border-width: 11px; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.side-btn:hover { filter: brightness(1.18) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.side-btn--ready { box-shadow: none; filter: drop-shadow(0 0 9px rgba(255, 201, 74, 0.95)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.side-btn__dot { top: -15px; right: -15px; }
.side-btn__caption { bottom: -20px; }
.research-node--done {
    border-color: transparent; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
    background: url('../assets/ui/frame-research-done.png') center / 100% 100% no-repeat border-box;
}
.tab { min-width: 0; }
@media (max-width: 480px) {
    .tab { border-width: 8px; border-image-width: 8px; min-height: 56px; }
    .tabs { gap: 4px; padding: 5px; }
}
/* Gemalter Rahmen ist dicker als der CSS-Rand: Bild und Name etwas kleiner, damit nichts abgeschnitten wird. */
.research-node--done { padding: 12px 10px; }
.research-node--done .research-img { width: 60px; height: 60px; }
/* Forschung „jetzt erforschbar“: goldener Comic-Rahmen; Leuchten und Pulsieren bleiben (über filter). */
.research-node--ready {
    border-color: transparent; padding: 12px 10px; animation: research-glow 1.4s ease-in-out infinite;
    background: url('../assets/ui/frame-research-ready.png') center / 100% 100% no-repeat border-box;
    box-shadow: none; filter: drop-shadow(0 0 12px rgba(255, 201, 74, 0.9));
}
.research-node--ready .research-img { width: 60px; height: 60px; }
@keyframes research-glow { 50% { filter: drop-shadow(0 0 3px rgba(255, 201, 74, 0.4)); transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .research-node--ready { animation: none; } }
/* Untere Leiste: gemalter Fensterrahmen als Außenrahmen (9-Slice), Holo-Ecken weg. */
.tabs {
    background: none; box-shadow: none; border-radius: 0;
    border-style: solid; border-color: transparent; border-width: 14px; padding: 2px;
    border-image: url('../assets/ui/frame-window.png') 80 fill / 16px stretch;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}
.tabs::before, .tabs::after { display: none; }
@media (max-width: 480px) { .tabs { border-width: 10px; border-image-width: 10px; padding: 1px; } }
/* Forschung „offen, Material fehlt“ und „gesperrt“: gemalter Stahlrahmen; gesperrt dunkler und entsättigt. */
.research-node--open:not(.research-node--ready), .research-node--locked {
    border-color: transparent; padding: 12px 10px;
    background: url('../assets/ui/frame-research-open.png') center / 100% 100% no-repeat border-box;
}
.research-node--open:not(.research-node--ready) .research-img, .research-node--locked .research-img { width: 60px; height: 60px; }
.research-node--locked { filter: brightness(0.55) grayscale(0.8); }
.research-node--locked > * { opacity: 0.6; }
/* Gemalte Rahmen haben eigene Ecken und Umrandung: CSS-Abrundung würde sie abschneiden. */
.research-node--done, .research-node--ready, .research-node--open, .research-node--locked { border-radius: 0; overflow: visible; 
    box-shadow: none; }   /* eckiger Schatten-Ring würde hinter den runden Rahmenecken vorstehen */
/* Forschungsfenster (Jens 05.11.2026): so hoch wie möglich, ohne eigenen Scrollbalken — die Karte füllt
   den Rest und wird selbst gezogen/gezoomt. Oben bleibt Platz für die Kapseln der oberen Leiste. */
.panel:has(.research-tree) {
    top: var(--hud-clear, calc(max(var(--gap), env(safe-area-inset-top)) + 140px));
    max-height: none; overflow: hidden;
    display: flex; flex-direction: column;
}
.panel:has(.research-tree) > .research-tree { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel:has(.research-tree) .research-map { flex: 1; min-height: 180px; height: auto; }
@media (max-width: 899px) { .research-tree .hint { font-size: 0.8rem; margin: 0 0 4px; } }
@media (min-width: 900px) { .panel:has(.research-tree) { top: var(--hud-clear, 86px); } }
/* Keine Scrollbalken im Spiel (Jens 05.11.2026): Inhalte werden so angeordnet, dass sie passen; falls doch
   einmal mehr Inhalt da ist, scrollt das Fenster weiter per Finger/Mausrad, nur ohne sichtbaren Balken. */
.panel, .dialog, .list-rows { scrollbar-width: none; }
.panel::-webkit-scrollbar, .dialog::-webkit-scrollbar, .list-rows::-webkit-scrollbar { display: none; }
/* Fenster dürfen bis unter die obere Leiste wachsen (Unterkante per JS, sonst wie bisher 86 px). */
@media (min-width: 900px) { .panel { max-height: calc(100dvh - var(--hud-clear, 86px) - 96px); } }
/* Ausbau kompakter: Kaufknopf einzeilig (Stufe links, Preis rechts) statt zweizeilig. */
.upgrade .btn--buy { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; text-align: left; }
.upgrade .btn--buy .btn__label { white-space: nowrap; }
.upgrades { gap: 6px; }
/* Handy: Fenster wachsen bis unter die obere Leiste statt bei 46 % zu scrollen. */
@media (max-width: 899px) {
    .panel { max-height: calc(100dvh - var(--hud-clear, 148px) - 76px - max(var(--gap), env(safe-area-inset-bottom))); }
}
/* Handy kompakter, damit Planetenfenster & Co. ohne Scrollen passen. */
@media (max-width: 899px) {
    .panel { border-width: 20px; border-image-width: 20px; padding: 2px; gap: 6px; }
    .win-head { padding: 2px 4px 6px; }
    .card { padding: 10px; }
    .card__title { margin-bottom: 4px; font-size: 1rem; }
    .stepper { margin-bottom: 2px; }
    .stepper .btn { min-height: 36px; padding: 2px 10px; }
    .table th, .table td { padding: 4px 2px; }
    .upgrade { grid-template-columns: 1fr minmax(118px, 46%); gap: 8px; }
    .upgrade .muted { font-size: 0.8rem; }
    .upgrade .btn--buy { min-height: 40px; padding: 4px 10px; }
}
/* Hauptreiter eines Fensters (Station): als Knopfleiste, damit sie sich von den Lager-Reitern abheben. */
.subtabs--main { margin-bottom: 0; }
.subtabs--main .subtab { border: 1px solid var(--line); border-radius: 10px; background: rgba(57, 215, 255, 0.06); }
.subtabs--main .subtab--active { background: rgba(57, 215, 255, 0.22); border-color: var(--holo); color: var(--text); }
.module-rows { display: grid; gap: 6px; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.module-tile {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 8px; align-items: center;
    padding: 8px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(57, 215, 255, 0.05);
}
.module-tile__text { display: grid; gap: 1px; min-width: 0; font-size: 0.85rem; line-height: 1.15; }
.module-tile__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-tile__text .muted { font-size: 0.75rem; }
.module-tile .btn--buy {
    grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center;
    min-height: 38px; padding: 4px 10px;
}
/* Handy: Modul-Kachel flacher — kleines Symbol links, Name und Stufe/Wirkung daneben, Knopf darunter. */
@media (max-width: 899px) {
    .module-grid { gap: 6px; }
    .module-tile { grid-template-columns: 32px minmax(0, 1fr); padding: 6px; gap: 3px 6px; }
    .module-tile .module-icon, .module-tile > img { width: 32px; height: 32px; }
    .module-tile__text strong { font-size: 0.8rem; }
    .module-tile__text .muted { font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .module-tile .btn--buy { min-height: 34px; }
}
.module-balance { margin: 0; display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: 0.85rem; color: var(--muted); }
.subtabs--main .subtab { min-height: 36px; }
/* Fensterhöhe aus den gemessenen Leisten (js/ui/shell/hudClear.js): immer Luft nach oben und unten,
   nie hinter die Symbolleiste. Die Werte davor bleiben als Rückfall, falls das Skript noch nicht lief. */
.panel { bottom: var(--bottom-clear, calc(max(var(--gap), env(safe-area-inset-bottom)) + 76px)); max-height: var(--panel-max, 46dvh); }
.panel:has(.research-tree) { max-height: none; }
/* Heller Stil „modern & freundlich“ (Jens 05.11.2026): helle Glanz-Rahmen, Flächen in kräftigem Blau statt
   fast Schwarz, Nebentext heller, damit er auf dem Blau gut lesbar bleibt. */
:root {
    --card: rgba(0, 36, 110, 0.55);
    --line-soft: rgba(150, 220, 255, 0.26);
    --muted: #c3d6ea;
}
.research-map { background: linear-gradient(180deg, #0b3f95, #072c6e); }
/* Heller Kapselrahmen ist oben/unten dicker: Inhalt weiter nach innen, sonst überdeckt der Rand die Zahlen. */
.cap { padding: 13px 24px 13px 14px; }
.cap--sol { padding-right: 22px; }
.cap--galaxy { padding: 14px 28px 14px; }
.module-tile__text .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.research-dialog__actions { margin-top: 14px; }
.research-dialog__actions .btn { min-height: 48px; }
.research-dialog__actions .btn--primary { flex: 1; }
/* Planetenliste kompakter, am PC zweispaltig, mit kleinem Aufseher-Bild (Jens 05.11.2026). */
.list-row { min-height: 44px; padding: 6px 34px 6px 10px; }
.list-row .planet-icon { width: 34px; height: 34px; }
.list-row__right { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.list-row__info { white-space: nowrap; }
.list-row__ov { position: relative; display: inline-flex; width: 30px; height: 30px; }
.list-row__ov .drone-img { width: 30px; height: 30px; object-fit: contain; }
.list-row__ov-stars { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 0.55rem; line-height: 1; color: var(--gold); white-space: nowrap; text-shadow: 0 1px 2px #000; }
.list-row .list__badge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
@media (min-width: 900px) { .list-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } .list-row--next { grid-column: 1 / -1; } }
@media (max-width: 899px) {
    .list-tip { display: none; }            /* Handy: Platz für alle Planeten ohne Scrollen */
    .list-rows { gap: 5px; }
    .list-row { min-height: 40px; padding: 3px 32px 3px 8px; }
    .list-row .planet-icon { width: 30px; height: 30px; }
    .list-row__name { gap: 8px; }
}
@media (max-width: 899px) {
    .planet-list .card__title { display: none; }   /* Fenster heißt schon „Planeten“ */
    .list-row { min-height: 38px; }
}
@media (max-width: 899px) { .list-row { min-height: 36px; } .list-rows { gap: 4px; } .list-row .planet-icon { width: 28px; height: 28px; } }
@media (max-width: 899px) { .module-balance { display: none; } .module-grid { gap: 5px; } }   /* Splitter stehen in der oberen Leiste */
/* Kalender im hellen Stil (Jens 05.11.2026): blaue Fensterfläche wie überall statt Nebel, Tage mit den
   gemalten Kachelrahmen — normal silberblau, „heute abholen“ gold, abgeholte gedimmt. */
.rw-dialog--calendar { background: none; border-image: url('../assets/ui/frame-window.png') 80 fill / 30px stretch; }
.rw-day {
    border: 0; border-radius: 0; box-shadow: none; padding: 10% 8%;
    background: url('../assets/ui/frame-research-open.png') center / 100% 100% no-repeat;
}
.rw-day--ready {
    border: 0; box-shadow: none;
    background: url('../assets/ui/frame-research-ready.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 10px rgba(255, 201, 74, 0.85));
    animation: rw-ready-hell 1.4s ease-in-out infinite;
}
.rw-day--ready:hover { box-shadow: none; filter: drop-shadow(0 0 16px rgba(255, 201, 74, 1)); }
@keyframes rw-ready-hell { 50% { transform: scale(1.05); } }
.rw-day--done { filter: brightness(0.7) saturate(0.6); }
.rw-day--next, .rw-day--big { border: 0; }
.rw-day--big { filter: drop-shadow(0 0 8px rgba(111, 214, 255, 0.8)); }
.rw-cal__info { color: var(--muted); }
.rw-day { padding: 13% 10% 19%; gap: 2px; }
.rw-day .cur-icon, .rw-day .good-icon { max-height: 42%; }
.rw-day__amount { font-size: 0.95rem; }
@media (max-width: 420px) { .rw-day__amount { font-size: 0.75rem; } .rw-day__n { font-size: 0.65rem; } }
.rw-day .cur-icon, .rw-day .good-icon { width: 40%; height: auto; max-width: none; max-height: none; aspect-ratio: 1; flex-shrink: 0; }
@media (max-width: 759px) { .rw-calendar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } .rw-day { padding: 12% 8% 17%; } }
.rw-day .cur-icon, .rw-day .good-icon { width: 50%; }
.rw-day__n { line-height: 1; }
/* Update-Banner und Hinweise (Toast) im hellen Stil: gemalter Fensterrahmen, blaue Fläche. */
.app-update, .toast {
    background: none; box-shadow: none; border-radius: 0;
    border-style: solid; border-color: transparent; border-width: 18px;
    border-image: url('../assets/ui/frame-window.png') 80 fill / 18px stretch;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}
.app-update { padding: 4px 10px; }
.toast { padding: 2px 8px; }
.toast--error { filter: drop-shadow(0 0 8px rgba(255, 123, 107, 0.9)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55)); }
/* Aufgaben im hellen Stil (Jens 05.11.2026): erledigte Aufgaben werden nicht mehr ausgegraut, sondern grün
   markiert; abholbare leuchten gold; offene haben eine dunkle Leiste, damit der Fortschritt klar zu sehen ist. */
.rw-row { background: rgba(0, 28, 92, 0.5); border: 2px solid rgba(150, 220, 255, 0.25); }
.rw-row strong { color: #fff; }
.rw-bar { height: 18px; border-radius: 9px; background: #061a45; border: 2px solid #031035; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5); }
.rw-bar__fill { background: linear-gradient(180deg, #9ff59a, #3cc95b); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15); }
.rw-bar__text { line-height: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.rw-row--claimed { opacity: 1; background: linear-gradient(180deg, rgba(60, 201, 91, 0.28), rgba(30, 140, 70, 0.22)); border-color: #6be38f; }
.rw-row--ready { border-color: #ffd166; box-shadow: 0 0 12px rgba(255, 209, 102, 0.6); }
.rw-ok { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #6be38f; color: #063016; font-size: 0.8rem; }
.rw-all--done { display: block; width: fit-content; margin: 6px auto 0; padding: 6px 16px; border-radius: 999px; background: rgba(60, 201, 91, 0.25); border: 2px solid #6be38f; color: #c9ffd6; }
.prod-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prod-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-pager { margin: 0 0 8px; }
/* Handy: zwei Anlagen nebeneinander, Karten kompakter (keine Scrollbalken). */
@media (max-width: 899px) {
    .prod-grid { gap: 6px; }
    .prod-card { padding: 8px; gap: 6px; }
    .prod-card__head { min-height: 24px; font-size: 0.8rem; }
    .prod-card__head .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .prod-card__clear { width: 28px; height: 28px; }
    .prod-flow { min-height: 56px; }
    .prod-bar__text { font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .prod-card .btn { min-height: 38px; padding: 4px 8px; font-size: 0.85rem; }
    .prod-card .btn--buy .btn__label { font-size: 0.8rem; }
    .prod-pager { margin-bottom: 4px; }
    .prod-pager .btn { min-height: 34px; }
}
/* Abstand zwischen „Alle drei geschafft“ und dem Schließen-Knopf (klebten aneinander). */
.rw-all { margin-bottom: 14px; }
.rw-all--done { margin: 8px auto 16px; }