/* windows.css — EIN Aussehen für alle Spielfenster (#winbox), im Stil der HUD-Leiste
   (21.10.2026, Wunsch Jens: „übersichtlich, nicht überladen, spielerfreundlich").
   Ersetzt die sechs Stil-Versuche vom August (Holz, Holo-Rahmen A/B/C, Holo aus CSS,
   Bergbau-Terminal, Ruhig & modern), die je an einem Fenster hingen.

   Farbregeln — überall gleich, damit man sie einmal lernt:
     Weiß   Titel und Namen
     Grau   Erklärtext
     Cyan   Abschnitte, Nebenknöpfe, Auswahl
     Gold   die EINE Hauptsache: Hauptknopf, Belohnungen, Werte
   Die Grundbausteine (.card, .btn …) stehen in ui.css; hier bekommen sie nur Farbe,
   Rand und Ecken. Alles ist auf #winbox begrenzt — Leiste, Story und Dialoge bleiben,
   wie sie sind. Wer einen Ton ändern will, ändert ihn oben in den Variablen. */
#winbox {
    --w-bg:     rgba(9, 20, 32, .96);
    --w-bg-top: rgba(15, 32, 48, .97);
    --w-card:   rgba(16, 33, 50, .80);
    --w-tile:   rgba(57, 215, 255, .06);
    --w-line:   rgba(57, 215, 255, .32);
    --w-line2:  rgba(57, 215, 255, .14);
    --w-text:   #e2ecf5;
    --w-dim:    #95abbd;
    --w-acc:    #7fdcff;
    --w-gold:   #ffcc55;
    --w-gold2:  #f0b83a;
    --w-off:    rgba(255, 255, 255, .06);
    --w-offtxt: #7d93a5;
    background: linear-gradient(180deg, var(--w-bg-top), var(--w-bg));
    border: 2px solid var(--w-line);
    border-radius: 16px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(160, 230, 255, .10);
    padding: 20px 24px 24px;
    color: var(--w-text);
}

/* ── Kopf ── */
#winbox h2 {
    color: var(--w-text); text-shadow: none; font-size: 24px; letter-spacing: 4px;
    margin: 0 52px 18px 0; padding-bottom: 12px; border-bottom: 1px solid var(--w-line2);
}
#winbox #win-close {
    top: 14px; right: 14px; width: 44px; height: 44px; font-size: 20px;
    background: rgba(57, 215, 255, .08); color: var(--w-acc);
    border: 1px solid var(--w-line); border-radius: 10px; box-shadow: none;
}
#winbox #win-close:hover { background: rgba(57, 215, 255, .18); color: #fff; }

/* ── Text ── */
#winbox :is(.sub, .hint, .card-sub, .ti-desc, .rail-btn span) { color: var(--w-dim); }
#winbox .sec { color: var(--w-acc); text-shadow: none; }
#winbox :is(.card-title, .ti-name, .pet-name, .rail-btn b) { color: var(--w-text); text-shadow: none; }
#winbox :is(.val, .stat b, .line b, .tal-foot b, .ti-row b, .pbtn .r) { color: var(--w-gold); }
/* Baukosten: genug da = Grün, fehlt etwas = Rot (Wunsch Jens 22.10.2026 — Gold hätte
   beides gleich aussehen lassen). */
#winbox .build-cost.ok .val   { color: var(--good); }
#winbox .build-cost.miss .val { color: #ff7b6b; }

/* ── Karten, Zeilen ── */
#winbox :is(.card, .pet-stats, .tal-info) {
    background: var(--w-card); border: 1px solid var(--w-line2); border-radius: 12px; box-shadow: none;
}
#winbox .card-head { border-bottom: 1px solid var(--w-line2); }
#winbox :is(.row, .line, .stat) { border-bottom: 1px solid var(--w-line2); }
#winbox :is(.row, .line, .stat):last-child { border-bottom: none; }

/* ── Knöpfe ──
   Gold = Hauptaktion · umrandet Cyan = Nebensache · grau = geht gerade nicht. */
#winbox .btn {
    color: #1a1204; background: linear-gradient(180deg, #ffd978, var(--w-gold2));
    border: 0; border-radius: 10px; box-shadow: 0 2px 0 rgba(0, 0, 0, .45); min-height: 40px;
}
#winbox .btn:hover:not(:disabled) { background: linear-gradient(180deg, #ffe39a, #ffc94f); }
#winbox .btn:disabled { background: var(--w-off); color: var(--w-offtxt); box-shadow: none; }
#winbox :is(.btn.ghost, .btn.mini, .pbtn, .ti-buy:disabled) {
    color: var(--w-acc); background: rgba(57, 215, 255, .08);
    border: 1px solid var(--w-line); border-radius: 10px; box-shadow: none;
}
#winbox :is(.btn.ghost, .btn.mini, .pbtn):hover:not(:disabled) { color: #fff; background: rgba(57, 215, 255, .18); }
#winbox .pbtn.sel { color: #fff; background: rgba(57, 215, 255, .22); border-color: var(--w-acc); }
#winbox .btn.danger { color: #ffe9e6; background: #b8382c; }
#winbox .btn.danger:hover:not(:disabled) { background: #d14436; }
/* Kauf gegen Exos bleibt Exo-Türkis wie oben im HUD; zu teuer = rötlich. */
#winbox .btn.buy { color: #dff7ff; background: rgba(57, 215, 255, .16); border: 1px solid #39d7ff; }
#winbox :is(.btn.buy:disabled, .btn.buy.short) { color: #ff9b8a; background: rgba(255, 120, 100, .06); border-color: rgba(255, 120, 100, .45); }
#winbox .btn.buy.later:disabled { color: var(--w-offtxt); border-color: var(--w-line2); background: transparent; }
/* Mengenleiste 10 | 100 | 1000 | Alles: eine Leiste, Gold nur am Ende. */
#winbox .seg { border: 1px solid var(--w-line); border-radius: 10px; box-shadow: none; overflow: hidden; }
#winbox .seg > .btn { color: var(--w-acc); background: rgba(57, 215, 255, .06); border-radius: 0; box-shadow: none; min-height: 36px; }
#winbox .seg > .btn + .btn { border-left: 1px solid var(--w-line2); }
#winbox .seg > .btn:hover:not(:disabled) { color: #fff; background: rgba(57, 215, 255, .16); }
#winbox .seg > .btn.gold { color: #1a1204; background: linear-gradient(180deg, #ffd978, var(--w-gold2)); }
#winbox .seg > .btn:disabled { color: var(--w-offtxt); background: transparent; }

/* Umschalter (Versorgungsbüro: Aufträge | Ruf-Shop, Neue | Angenommene | Fertige):
   der gewählte Reiter ist AUSWAHL, keine Aktion — deshalb Cyan statt Gold. */
#winbox :is(.ord-switch, .ord-tabs) .btn.gold { color: #fff; background: rgba(57, 215, 255, .22);
    border: 1px solid var(--w-acc); box-shadow: none; }

/* Stufenbalken in Raffinerie und Schredder: Text passt auch am Handy hinein. */
#winbox .smelt-xp { margin-bottom: 10px; }
#winbox .smelt-xp > span { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Eingabefelder ── */
#winbox .field { color: var(--w-text); background: rgba(4, 12, 20, .7); border: 1px solid var(--w-line); border-radius: 10px; box-shadow: none; }
#winbox .field::placeholder { color: var(--w-offtxt); }
#winbox .field:focus { border-color: var(--w-acc); }

/* ── Kacheln (Werkstoffe, Ausrüstung, Plätze, Anstriche, Drohnen) ──
   Die Seltenheitsfarben der Ränder (ui.css, .gear-tile.rN) bleiben darüber. */
#winbox :is(.mat-tile, .gear-tile, .slot-tile, .skin, .pet) {
    background: var(--w-tile); border: 1px solid var(--w-line2); border-radius: 10px; box-shadow: none;
}
#winbox :is(.mat-tile, .gear-tile, .skin, .pet):hover { background: rgba(57, 215, 255, .14); }
#winbox :is(.skin.on, .pet.on) { background: rgba(57, 215, 255, .2); border-color: var(--w-acc); box-shadow: 0 0 12px rgba(57, 215, 255, .3); }
#winbox :is(.skin i, .pet i) { color: #cfefff; }
#winbox :is(.skin b, .pet b) { color: var(--w-text); }
#winbox :is(.skin span, .pet span) { color: var(--w-dim); }
#winbox .pet-face { background: radial-gradient(circle at 40% 34%, rgba(57, 215, 255, .22), rgba(57, 215, 255, .04));
    border: 1px solid var(--w-line); border-radius: 12px; box-shadow: none; }

/* ── Talentbaum ── */
#winbox .rail-btn { background: var(--w-card); border: 1px solid var(--w-line2); border-radius: 12px; box-shadow: none; }
#winbox .rail-btn.on { background: rgba(57, 215, 255, .16); border-color: var(--w-acc); }
#winbox .tnode { background: rgba(16, 33, 50, .92); border: 1px solid var(--w-line2); border-radius: 12px; box-shadow: none; color: var(--w-text); }
#winbox .tnode.part  { border: 2px solid var(--w-acc); }
#winbox .tnode.ready { border: 2px solid var(--good); box-shadow: 0 0 10px rgba(124, 232, 124, .35); }
#winbox .tnode.maxed { background: radial-gradient(circle at 50% 40%, rgba(90, 63, 18, .95), rgba(30, 24, 12, .95) 72%);
    border: 2px solid var(--w-gold); box-shadow: 0 0 12px rgba(255, 204, 85, .35); color: #ffe39a; }
#winbox .tnode.sel   { outline: 3px solid var(--w-acc); outline-offset: 3px; }
#winbox .tal-lines line     { stroke: rgba(57, 215, 255, .18); stroke-width: 3; }
#winbox .tal-lines line.lit { stroke: var(--w-gold); }

/* Grundregel „Neues nur aus Bosskisten" im Hangar und im Kisten-Fenster. */
#winbox :is(.gear-rule, .chest-rule) { margin: 4px 0 12px; padding: 8px 12px; border-left: 3px solid var(--w-gold);
    background: rgba(255, 204, 85, .06); border-radius: 0 8px 8px 0; color: #d9e4ee; font-size: 14px; line-height: 1.45; }

/* Handy: etwas weniger Rand, ✕ bleibt fingerbreit. */
@media (max-width: 760px), (max-height: 560px) {
    #winbox { padding: 14px 14px 18px; border-radius: 14px; }
    #winbox h2 { font-size: 21px; letter-spacing: 3px; margin-bottom: 14px; }
    #winbox #win-close { top: 10px; right: 10px; }
    #winbox .smelt-xp > span { font-size: 12px; }
}