/* Basis-Styles — Phase 0. Funktional, mobile-first. Die distinktive Spiel-UI
   kommt ab Phase 1 (Frontend-Design-Skill). Hier nur saubere Grundlagen. */

* { box-sizing: border-box; }

:root {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #3b82f6;
  --ok: #238636;
  --err: #da3633;
  --radius: 10px;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem;
}

h1 { font-size: 1.6rem; margin: 0.2em 0 0.6em; }
h2 { font-size: 1.2rem; margin: 1.4em 0 0.5em; }
h3 { font-size: 0.95rem; margin: 0 0 0.3em; color: var(--muted); font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0.75rem 0;
}

/* Formulare — große Touch-Ziele (mobile-first). */
form.card label {
  display: block;
  margin: 0.6rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}
form.card input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
button {
  margin-top: 0.9rem;
  padding: 0.7rem 1.1rem;
  font-size: 1rem;
  min-height: 44px;               /* Touch-Ziel */
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }

/* Dashboard-Kacheln */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}
.big { font-size: 1.8rem; font-weight: 700; margin: 0.1em 0 0; }

/* Flash-Meldungen */
.flash {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
.flash-success { border-color: var(--ok); background: rgba(35,134,54,0.15); }
.flash-error   { border-color: var(--err); background: rgba(218,54,51,0.15); }
.flash-info    { background: var(--panel); }

/* Phase 1 Ergänzungen */
.muted { color: var(--muted); font-size: 0.85rem; }
.card form { margin: 0; }
.card h3 { margin-bottom: 0.2rem; }

/* Karten in einem Raster: gleiche Höhe (durch stretch) sinnvoll füllen.
   Als Flex-Spalte ausgelegt, damit Buttons/Formulare unten sitzen und der
   Inhalt oben bündig bleibt — so wirken unterschiedlich lange Karten gleich. */
.grid > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
/* Das letzte Element (meist Button/Formular oder Statustext) nach unten schieben. */
.grid > .card > form:last-child,
.grid > .card > .btn-gems:last-child {
  margin-top: auto;
}

/* Phase 3: Besitz-Marker auf der Karte (Textmarker; Grafik via Theme-Pack später) */
.marker { font-weight: 700; margin-left: 0.3rem; }
.marker-own { color: var(--ok); }
.marker-other { color: var(--err); }
.marker-empty { color: var(--muted); }
select { width: 100%; padding: 0.7rem 0.8rem; font-size: 1rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; margin-top: 0.3rem; }

/* Phase 6: Chat */
.chat-log { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; margin: 0.8rem 0; max-height: 55vh; overflow-y: auto; background: var(--bg); }
.chat-msg { padding: 0.25rem 0; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.chat-msg:last-child { border-bottom: none; }

/* Phase 9: Dimensionstor-Fortschrittsbalken */
.gate-bar { width: 100%; height: 20px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 0.6rem 0; }
.gate-fill { height: 100%; background: linear-gradient(90deg, var(--accent, #6c5ce7), var(--ok, #00b894)); transition: width 0.4s ease; }

/* --- Theme-Auswahl (Einstellungen) --- */
.theme-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 560px) { .theme-grid { grid-template-columns: 1fr 1fr; } }
.theme-card { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.theme-swatch { display: inline-flex; gap: 3px; }
.theme-swatch .sw { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.15); }
/* Vorschau nutzt die Variablen des jeweiligen data-theme am Formular */
.theme-card .sw-bg     { background: var(--bg); }
.theme-card .sw-panel  { background: var(--panel-2, var(--panel)); }
.theme-card .sw-accent { background: var(--accent); }
.theme-card .sw-cyan   { background: var(--cyan, var(--accent)); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; }
.badge-ok { background: var(--ok); color: #04120a; }

/* --- Gebäudebilder in der Basisansicht --- */
.bld-img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto 0.6rem;
  border-radius: var(--radius, 10px);
  /* dezentes Glühen im Akzentton, passt zum Deepspace-Look */
  box-shadow: var(--glow, 0 0 12px rgba(255,135,3,0.25));
}

/* --- Live-Fortschritt (Countdown-Balken) --- */
.live-bar {
  width: 100%; height: 14px; margin: 0.5rem 0 0.3rem;
  background: var(--bg-2, var(--bg)); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.live-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent, #ff8703), var(--accent-2, #ffab3d));
  box-shadow: 0 0 8px var(--accent-glow, rgba(255,135,3,0.4));
  transition: width 1s linear;
}
.live-progress.live-done .live-fill { background: var(--ok, #35c46a); }
.live-remaining { font-variant-numeric: tabular-nums; }

/* =====================================================================
   DESKTOP-SHELL (Weg A) — Seitenleiste + Inhalt + Chat
   Greift für die Desktop-Shell; ab 1000px volles 3-Spalten-Layout.
   ===================================================================== */
.dz-shell { min-height: 100vh; }

/* Grundlayout (auch < 1000px nutzbar, falls Desktop-Browser schmal): gestapelt */
.dz-nav, .dz-main, .dz-chat { box-sizing: border-box; }

.dz-brand {
  font-weight: 800; font-size: 1.15rem; letter-spacing: 0.5px;
  padding: 1rem 1rem 0.75rem; color: var(--accent, #ff8703);
}
.nav-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 1rem; color: var(--text); text-decoration: none;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--panel-2, var(--panel)); border-left-color: var(--accent); text-decoration: none; }
.nav-ico { width: 1.4rem; text-align: center; }
.dz-nav-foot { padding: 1rem; display: flex; flex-direction: column; gap: 0.3rem; border-top: 1px solid var(--border); margin-top: 0.5rem; }

/* Chat-Spalte */
.dz-chat { display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--border); }
.dz-chat-head { display: flex; gap: 0.25rem; padding: 0.5rem; border-bottom: 1px solid var(--border); }
.chat-tab {
  flex: 1; padding: 0.4rem; font-size: 0.85rem; cursor: pointer;
  background: var(--bg-2, var(--bg)); color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
}
.chat-tab.active { background: var(--accent); color: #04120a; border-color: var(--accent); font-weight: 700; }
.dz-chat-log { flex: 1; overflow-y: auto; padding: 0.5rem 0.6rem; font-size: 0.85rem; line-height: 1.45; }
.chat-msg { margin-bottom: 0.3rem; word-wrap: break-word; }
.chat-time { color: var(--muted); font-size: 0.72rem; }
.chat-user { color: var(--cyan, var(--accent)); font-weight: 600; }
.dz-chat-form { display: flex; gap: 0.35rem; padding: 0.5rem; border-top: 1px solid var(--border); }
.dz-chat-form input { flex: 1; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.dz-chat-form button { padding: 0.5rem 0.8rem; border-radius: 6px; border: none; background: var(--accent); color: #04120a; font-weight: 700; cursor: pointer; }

/* Volles 3-Spalten-Layout ab 1000px */
@media (min-width: 1000px) {
  .dz-shell {
    display: grid;
    grid-template-columns: 220px 1fr var(--chat-width, 320px);
    height: 100vh;
  }
  .dz-nav { border-right: 1px solid var(--border); overflow-y: auto; }
  .dz-main { overflow-y: auto; padding: 1.5rem 2rem; max-width: none; }
  .dz-chat { height: 100vh; position: relative; }
  /* Ziehgriff am linken Rand der Chat-Spalte */
  .dz-chat-resize {
    position: absolute; left: -3px; top: 0; width: 6px; height: 100%;
    cursor: col-resize; z-index: 5;
    background: transparent;
  }
  .dz-chat-resize:hover, .dz-chat-resize.dragging {
    background: var(--accent-glow, rgba(255,135,3,0.4));
  }
}

/* Unter 1000px (Desktop-Browser im schmalen Fenster): gestapelt, Chat unten */
@media (max-width: 999px) {
  .dz-main { padding: 1.25rem; }
  .dz-nav nav { display: flex; flex-wrap: wrap; }
  .nav-item { border-left: none; }
  .dz-chat { max-height: 40vh; }
}

/* Auf Desktop dürfen Kachel-Raster die Breite nutzen.
   align-items: stretch sorgt dafür, dass alle Karten einer Reihe gleich hoch sind. */
@media (min-width: 1000px) {
  .dz-main .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; }
}

/* Kind-Forschung dezent kennzeichnen (ersetzt früheres margin-left) */
.res-child { border-left: 3px solid var(--accent-2, var(--accent, #ff8703)); }

/* --- Desktop-Kopfleiste (Credits/Gems) --- */
.dz-topbar {
  display: flex; gap: 1.25rem; align-items: center;
  padding: 0.6rem 0.9rem; margin: -1.5rem -2rem 1.25rem;
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 4;
}
.dz-topbar .tb-item { font-size: 0.95rem; color: var(--muted); }
.dz-topbar .tb-item strong { color: var(--accent, #ff8703); font-variant-numeric: tabular-nums; }
/* Auf schmalen Desktop-Fenstern kein negatives Margin */
@media (max-width: 999px) {
  .dz-topbar { margin: -1.25rem -1.25rem 1rem; }
}

/* =====================================================================
   TOAST-Meldungen (schwebend, einblendend)
   ===================================================================== */
.toast-host {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
  pointer-events: none; max-width: min(92vw, 480px); width: max-content;
}
.toast {
  pointer-events: auto;
  padding: 0.8rem 1.2rem; border-radius: 10px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent, #ff8703);
  box-shadow: 0 6px 24px var(--shadow, rgba(0,0,0,0.5));
  opacity: 0; transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s ease;
  font-size: 0.95rem; font-weight: 500; text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error   { border-left-color: var(--danger, #e5484d); }
.toast-success { border-left-color: var(--ok, #35c46a); }
.toast-info    { border-left-color: var(--cyan, var(--accent, #ff8703)); }

/* Die .toast-data-Träger sind unsichtbar (reine Signalträger). */
.toast-data { display: none; }

/* --- Gems-Button (Sofort-Fertigstellen) --- */
.btn-gems {
  background: linear-gradient(135deg, #7b3ff2, #b06bff);
  color: #fff; border: none; padding: 0.5rem 0.9rem;
  border-radius: 8px; cursor: pointer; font-weight: 700;
  box-shadow: 0 0 10px rgba(140,80,255,0.4);
}
.btn-gems:hover { filter: brightness(1.1); }

/* --- Zurück-Button --- */
.btn-back {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.75rem; border-radius: 8px;
  background: var(--panel-2, var(--panel)); color: var(--text);
  border: 1px solid var(--border); text-decoration: none;
  font-size: 0.9rem; white-space: nowrap;
}
.btn-back:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.mobile-topbar { margin-bottom: 0.9rem; }
/* In der Desktop-Kopfleiste rutscht der Zurück-Button nach links, Rest nach rechts */
.dz-topbar .btn-back { margin-right: auto; }

/* --- Admin-Tabelle (Benutzerverwaltung) --- */
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.admin-table th, .admin-table td {
  padding: 0.5rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.admin-table select { padding: 0.3rem; border-radius: 6px; background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-danger {
  background: var(--danger, #e5484d); color: #fff; border: none;
  padding: 0.35rem 0.75rem; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.btn-danger:hover { filter: brightness(1.1); }

/* =====================================================================
   KAMPF-ANIMATION
   ===================================================================== */
.btn-replay {
  display: inline-block; margin-top: 0.5rem; padding: 0.3rem 0.7rem;
  background: var(--accent, #ff8703); color: #04120a; border-radius: 6px;
  text-decoration: none; font-weight: 700; font-size: 0.85rem;
}
.btn-replay:hover { filter: brightness(1.1); text-decoration: none; }

.battle-stage {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.2rem; margin: 1rem 0;
}
.battle-sides { display: flex; align-items: flex-start; gap: 1rem; }
.battle-side { flex: 1; text-align: center; }
.battle-label { font-weight: 700; margin-bottom: 0.5rem; color: var(--muted); }
.battle-side.att .battle-label { color: var(--cyan, #9ae5ff); }
.battle-side.def .battle-label { color: var(--warn, #ff8703); }
.battle-vs { align-self: center; font-weight: 800; color: var(--muted); font-size: 1.2rem; }

.battle-fleet {
  min-height: 120px; display: flex; flex-wrap: wrap; gap: 3px;
  justify-content: center; align-content: flex-start;
  padding: 0.5rem; border-radius: 8px; background: var(--bg-2, var(--bg));
  position: relative; transition: box-shadow 0.2s;
}
.battle-fleet.hit { box-shadow: 0 0 16px var(--danger, #e5484d); }
.ship { font-size: 1.1rem; line-height: 1; transition: opacity 0.3s; }
.ship.att { color: var(--cyan, #9ae5ff); }
.ship.def { color: var(--accent, #ff8703); }
.boom {
  position: absolute; font-size: 1.5rem;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  animation: boomPop 0.7s ease-out forwards;
}
@keyframes boomPop {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); }
}
.battle-count { margin-top: 0.4rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.battle-round {
  text-align: center; margin-top: 1rem; font-weight: 600;
  color: var(--accent, #ff8703); min-height: 1.4em;
}
.battle-result { margin-top: 1rem; text-align: center; }
.battle-outcome {
  font-size: 1.4rem; font-weight: 800; padding: 0.6rem; border-radius: 8px;
  animation: outcomePop 0.5s ease-out;
}
.battle-outcome.win  { color: var(--ok, #35c46a); }
.battle-outcome.lose { color: var(--danger, #e5484d); }
.battle-outcome.draw { color: var(--muted); }
@keyframes outcomePop {
  0% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
.battle-losses { margin-top: 0.5rem; color: var(--muted); font-size: 0.9rem; }

.battle-loot {
  margin-top: 1rem; padding: 0.8rem; border-radius: 8px;
  background: var(--bg-2, var(--bg)); border: 1px solid var(--accent, #ff8703);
}
.battle-loot-title { font-weight: 700; color: var(--accent, #ff8703); margin-bottom: 0.5rem; }
.battle-loot-list { display: flex; flex-direction: column; gap: 0.3rem; }
.loot-item {
  font-variant-numeric: tabular-nums; font-weight: 600;
  opacity: 0; animation: lootIn 0.4s ease-out forwards;
}
@keyframes lootIn {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* --- Abgeschlossene Flotten in der Übersicht --- */
.done-fleet { border-left: 3px solid var(--ok, #35c46a); }
.loot-line { color: var(--accent, #ff8703); font-weight: 600; }

/* --- Kampf-Animation als Overlay (automatisch bei Ankunft) --- */
.battle-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(3, 8, 16, 0.85); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  animation: overlayIn 0.3s ease-out;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.battle-overlay-box {
  background: var(--panel); border: 1px solid var(--accent, #ff8703);
  border-radius: 14px; padding: 1.2rem; max-width: 640px; width: 100%;
  max-height: 90vh; overflow-y: auto; position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.battle-overlay-title {
  font-size: 1.2rem; font-weight: 800; color: var(--accent, #ff8703);
  margin-bottom: 0.5rem; text-align: center;
}
.battle-overlay-close {
  position: absolute; top: 0.7rem; right: 0.7rem;
  background: var(--bg-2, var(--bg)); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.85rem;
}
.battle-overlay-close:hover { filter: brightness(1.2); }

/* --- Basis-Reiter (Wechsel zwischen Planeten) --- */
.base-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.base-tab {
  padding: 0.4rem 0.8rem; border-radius: 8px 8px 0 0;
  background: var(--bg-2, var(--bg)); border: 1px solid var(--border);
  border-bottom: none; color: var(--muted); text-decoration: none; font-weight: 600;
}
.base-tab:hover { color: var(--text); filter: brightness(1.1); text-decoration: none; }
.base-tab.active {
  background: var(--panel); color: var(--accent, #ff8703);
  border-color: var(--accent, #ff8703);
}
.base-tab-coord { font-size: 0.8rem; opacity: 0.7; font-weight: 400; }

/* --- Ressourcen-Fracht im Flotten-Sendeformular --- */
.cargo-fields {
  margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.4rem;
}

/* --- Admin: Seiten-Editor --- */
.page-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.page-pick {
  padding: 0.4rem 0.8rem; border-radius: 8px;
  background: var(--bg-2, var(--bg)); border: 1px solid var(--border);
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.page-pick:hover { color: var(--text); text-decoration: none; }
.page-pick.active { background: var(--panel); color: var(--accent, #ff8703); border-color: var(--accent, #ff8703); }
/* Quill-Editor an dunkles Theme anpassen */
#editor { min-height: 300px; background: var(--panel); border-radius: 0 0 8px 8px; }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--border) !important; }
.ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; background: var(--bg-2, var(--bg)); }
.ql-editor { min-height: 300px; color: var(--text); font-size: 1rem; }
.ql-snow .ql-stroke { stroke: var(--muted); }
.ql-snow .ql-fill { fill: var(--muted); }
.ql-snow .ql-picker { color: var(--muted); }
.ql-editor.ql-blank::before { color: var(--muted); }

/* =====================================================================
   STARTSEITE (Landing) + Footer
   ===================================================================== */
.landing {
  max-width: 640px; margin: 0 auto; text-align: center; padding: 1rem 0 2rem;
}
.landing-logo {
  max-width: min(90%, 460px); height: auto; margin: 0 auto 1.5rem;
  display: block; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.landing-text { color: var(--text); font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; }
.landing-text p { margin: 0.5rem 0; }
.landing-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.btn-cta {
  display: inline-block; padding: 0.7rem 1.6rem; border-radius: 10px;
  background: var(--accent, #ff8703); color: #04120a; font-weight: 700;
  text-decoration: none; font-size: 1.05rem; transition: filter 0.15s;
}
.btn-cta:hover { filter: brightness(1.1); text-decoration: none; }
.btn-cta-secondary {
  background: transparent; color: var(--accent, #ff8703);
  border: 2px solid var(--accent, #ff8703);
}

/* Footer mit Rechtslinks */
.site-footer {
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
  display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
}
.site-footer a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.site-footer a:hover { color: var(--accent, #ff8703); }

/* Inhalt der öffentlichen Seiten */
.page-content { line-height: 1.7; max-width: 760px; }
.page-content h2 { margin-top: 1.5rem; }
.page-content ul { margin: 0.5rem 0 0.5rem 1.2rem; }

/* --- Einheiten-Bild (wie Gebäudebild) --- */
.unit-img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 0.6rem;
  border-radius: var(--radius, 10px);
  box-shadow: var(--glow, 0 0 12px rgba(255,135,3,0.25));
}
/* Anzahl-Feld im Bau-Formular: Label über dem Feld, Feld kompakt */
.unit-count-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.unit-count-input {
  display: block;
  width: 5rem;
  margin-top: 0.25rem;
}
/* --- Ressourcen-Bild (kompakt, wie Einheiten/Gebäude) --- */
.res-img {
  display: block;
  width: 100%;
  max-width: 72px;
  height: auto;
  margin: 0 auto 0.3rem;
  border-radius: var(--radius, 10px);
  box-shadow: var(--glow, 0 0 12px rgba(255,135,3,0.25));
}
/* Ressourcen-Karten: kompakt und alle gleich hoch */
.res-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.res-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.7rem 0.6rem;
}
.res-card h3 {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
}
.res-card .big {
  font-size: 1.4rem;
  margin: 0.15rem 0 0.1rem;
}
.res-card .muted {
  margin: 0;
  font-size: 0.82rem;
}

/* --- Energie-Symbol im Bilanz-Balken (klein, inline) --- */
.energie-icon {
  height: 1.2em;
  width: auto;
  vertical-align: -0.2em;
  margin-right: 0.3em;
}

/* --- Forschung: Link am Forschungsgebäude + Effekt-Anzeige --- */
.btn-research {
  display: inline-block;
  margin: 0.3rem 0 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  background: var(--accent, #ff8703);
  color: #04120a;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
}
.btn-research:hover { filter: brightness(1.1); text-decoration: none; }
.res-effect {
  display: inline-block;
  color: var(--ok, #35c46a);
  font-size: 0.88rem;
  margin: 0.15rem 0;
}

/* --- In-Game-Navigation (orangenes Menü in der Basis) --- */
/* Im Desktop überflüssig (Seitenmenü deckt alles ab) -> ausblenden.
   Im Handy bleibt es als schnelle Navigation erhalten. */
.shell-desktop .ingame-nav { display: none; }

/* --- Forschung: abgeschlossene Technologien (eingeklappt, nach unten) --- */
.research-done {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.research-done > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--muted);
  padding: 0.4rem 0;
  list-style: none;
}
.research-done > summary:hover { color: var(--text); }
.research-done[open] > summary { color: var(--ok, #35c46a); margin-bottom: 0.5rem; }

/* --- Forschung nach Gebäude gruppiert --- */
.res-building {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.res-building-title {
  margin: 1.2rem 0 0.3rem;
  color: var(--accent, #ff8703);
}
.res-branch {
  margin: 1rem 0 0.3rem;
  font-size: 1rem;
  color: var(--muted);
}
/* Kleines Gebäude-Label an jeder Technologie-Karte */
.res-building-tag {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--bg-2, rgba(255,255,255,0.05));
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  margin: 0.15rem 0;
}
.res-locked-hint {
  color: var(--danger, #e5484d);
  font-size: 0.9rem;
  margin: 0.2rem 0 0.6rem;
}

/* =====================================================================
   STERNENKARTE (Galaxie-Übersicht + System-Karte)
   ===================================================================== */
.star-map-wrap {
  background: radial-gradient(ellipse at center, #0a1428 0%, #050a16 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 0.5rem;
  margin: 0.75rem 0 1rem;
  overflow-x: auto;
}
.star-map {
  display: block;
  width: 100%;
  height: auto;
  min-width: 320px;
  color: #7fd4ff; /* für currentColor-Glow */
}
/* Hintergrund-Deko-Sterne */
.bg-star { fill: #ffffff; opacity: 0.25; }

/* Systeme (Galaxie-Karte) */
.sys-core { stroke-width: 2; cursor: pointer; transition: r 0.15s; }
.sys-core.sys-mine { fill: #35c46a; stroke: #7dffab; }
.sys-core.sys-occupied { fill: #ff8703; stroke: #ffc078; }
.sys-core.sys-empty { fill: #2a3a55; stroke: #4a6088; }
.sys-glow.sys-mine { color: #35c46a; }
.sys-glow.sys-occupied { color: #ff8703; }
.sys-glow.sys-empty { color: #3a5580; opacity: 0.5; }
.sys-link:hover .sys-core { stroke-width: 3; }
.sys-label { fill: #9fb4d4; font-size: 13px; font-weight: 600; }
.sys-count { fill: #04120a; font-size: 13px; font-weight: 700; }

/* System-Karte (Planeten auf Bahn) */
.orbit-line { stroke: #2a3a55; stroke-width: 1.5; stroke-dasharray: 4 4; }
.orbit-tick { fill: #4a6088; }
.pos-label { fill: #7088aa; font-size: 13px; }
.planet-core { stroke-width: 2; cursor: pointer; transition: r 0.15s; }
.planet-core.planet-mine { fill: #35c46a; stroke: #7dffab; }
.planet-core.planet-occupied { fill: #ff8703; stroke: #ffc078; }
.planet-core.planet-empty { fill: #3a4a66; stroke: #5a7099; }
.planet-glow.planet-mine { color: #35c46a; }
.planet-glow.planet-occupied { color: #ff8703; }
.planet-glow.planet-empty { color: #3a5580; opacity: 0.4; }
.planet-link:hover .planet-core { stroke-width: 3; }
.planet-mark { fill: #04120a; font-size: 16px; font-weight: 700; }
.planet-none { fill: #1a2540; }

/* Legende */
.map-legend {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  font-size: 0.88rem; color: var(--muted); margin: 0.5rem 0 1rem;
}
.map-legend .dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  vertical-align: -1px; margin-right: 0.3rem;
}
.map-legend .dot-mine { background: #35c46a; }
.map-legend .dot-occupied { background: #ff8703; }
.map-legend .dot-empty { background: #3a4a66; }

/* --- Abstand zwischen Erz-Karten und Energie-Balken --- */
.energie-balken { margin-top: 1rem; }

/* --- Planetentypen: Farben (Fallback + Glow) --- */
.ptype-ice     { fill: #8fd4ff; color: #8fd4ff; }
.ptype-ocean   { fill: #3a86ff; color: #3a86ff; }
.ptype-desert  { fill: #e0b060; color: #e0b060; }
.ptype-rock    { fill: #9a8478; color: #9a8478; }
.ptype-gas     { fill: #c48fd4; color: #c48fd4; }
.ptype-volcano { fill: #e5533d; color: #e5533d; }
.planet-core { stroke: none; }
/* Besitzer-Ring um den Planeten */
.planet-ring { fill: none; stroke-width: 2; }
.planet-ring.owner-mine { stroke: #35c46a; }
.planet-ring.owner-occupied { stroke: #ff8703; }
.planet-ring.owner-none { stroke: rgba(255,255,255,0.15); stroke-width: 1; }
.planet-mark.owner-mine { fill: #7dffab; font-size: 18px; font-weight: 700; }
.planet-mark.owner-occupied { fill: #ffc078; font-size: 14px; }
.planet-link { cursor: pointer; }
.planet-link:hover .planet-ring { stroke-width: 3; }

/* --- Planeten-Legende --- */
.planet-legend {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 1rem;
}
.pl-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.pl-icon {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  overflow: hidden; position: relative;
}
.pl-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-ring {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  box-sizing: border-box;
}
.pl-ring.owner-mine { border: 3px solid #35c46a; }
.pl-ring.owner-occupied { border: 3px solid #ff8703; }

/* --- Eigener Planet in der Basisübersicht --- */
.own-planet {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}
.own-planet-globe {
  display: inline-block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(127,212,255,0.25);
  /* Fallback-Farbe kommt aus .ptype-* (fill greift nicht auf div, daher background) */
}
/* background aus dem Typ ableiten (ptype-* setzt color; wir nutzen es als bg) */
.own-planet-globe.ptype-ice     { background: #8fd4ff; }
.own-planet-globe.ptype-ocean   { background: #3a86ff; }
.own-planet-globe.ptype-desert  { background: #e0b060; }
.own-planet-globe.ptype-rock    { background: #9a8478; }
.own-planet-globe.ptype-gas     { background: #c48fd4; }
.own-planet-globe.ptype-volcano { background: #e5533d; }
.own-planet-globe img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.own-planet-info { display: flex; flex-direction: column; gap: 0.15rem; }
.own-planet-info strong { font-size: 1.05rem; }