/* 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 2rem;
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.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 1.6rem; }
}

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


/* --- 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 (altes orangenes Menü) — komplett entfernt.
   Navigation läuft im Desktop über die Seitenleiste, mobil über das
   Hamburger-Menü (siehe unten). --- */
.ingame-nav { display: none; }

/* =====================================================================
   MOBILES HAMBURGER-MENÜ
   ===================================================================== */
.mobile-topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
}
.m-brand {
  font-weight: 700;
  color: var(--accent, #ff8703);
  margin-left: auto;
}
/* Credits/Gems rechts in der mobilen Kopfleiste */
.m-topbar-res {
  margin-left: auto;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.9rem;
}
.m-topbar-res .tb-item { white-space: nowrap; }
/* Hamburger-Button */
.m-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.m-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.m-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.m-burger.open span:nth-child(2) { opacity: 0; }
.m-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Overlay hinter dem Menü */
.m-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  z-index: 50;
}
.m-drawer-overlay.open { opacity: 1; visibility: visible; }

/* Ausklappbares Menü (von links) */
.m-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 78%;
  max-width: 320px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  z-index: 60;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.m-drawer.open { transform: translateX(0); }
.m-drawer-head {
  font-weight: 700;
  color: var(--accent, #ff8703);
  font-size: 1.2rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}
.m-nav-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
}
.m-nav-item:hover { background: var(--bg-2, rgba(255,255,255,0.04)); text-decoration: none; }
.m-nav-ico { font-size: 1.3rem; width: 1.6rem; text-align: center; }
.m-drawer-foot {
  margin-top: auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
}
/* Scroll im Hintergrund sperren, wenn das Menü offen ist */
body.m-drawer-lock { overflow: hidden; }

/* Das Hamburger-Menü ist nur mobil relevant; im Desktop wird pageMobile
   ohnehin nicht verwendet. */


/* --- 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: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(127,212,255,0.28);
  /* 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; }

/* --- Sanftes Scrollen zu Anker-Sprüngen (z.B. Forschung nach Gebäude) --- */
html { scroll-behavior: smooth; }
/* Etwas Abstand oben lassen, damit die Überschrift nicht am Rand klebt
   (berücksichtigt die mobile Kopfleiste). */
.res-building { scroll-margin-top: 70px; }

/* Direktnachricht-Link in der Rangliste */
.msg-link { font-size: 0.85rem; margin-left: 0.3rem; white-space: nowrap; }

/* --- Live-Aktualisierung: kurzes Aufblinken bei Wertänderung --- */
@keyframes liveFlash {
  0%   { color: var(--accent, #ff8703); }
  100% { color: inherit; }
}
.live-flash { animation: liveFlash 0.8s ease-out; }

/* --- Endliche Planetenvorkommen (Vorrat-Anzeige) --- */
.res-deposit { margin-top: 0.4rem; width: 100%; font-size: 0.75rem; }
.res-deposit-bar {
  height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1);
  overflow: hidden; margin-bottom: 0.15rem;
}
.res-deposit-bar span { display: block; height: 100%; border-radius: 3px; }
.res-deposit.stufe-hoch .res-deposit-bar span { background: #35c46a; }
.res-deposit.stufe-mittel .res-deposit-bar span { background: #e0b060; }
.res-deposit.stufe-niedrig .res-deposit-bar span { background: #e5533d; }
.res-deposit-txt { color: var(--muted); }
.res-deposit.erschoepft { color: #e5533d; font-weight: 600; margin-top: 0.4rem; }

/* --- Aktions-Hinweis auf der Planeten-Detailseite (Karte) --- */
.map-action-hint {
  background: rgba(127,212,255,0.08);
  border-left: 3px solid var(--accent, #ff8703);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin: 0.5rem 0;
}

/* --- KI-Schwierigkeitsgrad-Tabelle im Admin --- */
.ai-grade-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ai-grade-table th, .ai-grade-table td { padding: 0.3rem 0.4rem; text-align: center; border-bottom: 1px solid var(--border); }
.ai-grade-table th:first-child, .ai-grade-table td:first-child { text-align: left; }

/* --- Erfolgs-Icons (achievements) --- */
.ach-card { display: flex; align-items: center; gap: 0.8rem; }
.ach-icon { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.ach-icon-locked { filter: grayscale(1) brightness(0.5); opacity: 0.6; }
.ach-info { min-width: 0; }

/* --- Zurückschlagen-Button in der Kampfanzeige --- */
.battle-counter { display: inline-block; margin-top: 1rem; }

/* --- Ressourcen-Überweisung --- */
.res-header { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.res-transfer-btn {
  display: inline-block; padding: 0.35rem 0.8rem; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--accent, #ff8703);
  color: var(--accent, #ff8703); font-size: 0.9rem; text-decoration: none;
}
.res-transfer-btn:hover { filter: brightness(1.15); }

/* --- Basis umbenennen --- */
.rename-box { margin-bottom: 0.8rem; }
.rename-box > summary {
  cursor: pointer; color: var(--accent, #ff8703); font-size: 0.9rem;
  display: inline-block; padding: 0.2rem 0;
}
.rename-box[open] > summary { margin-bottom: 0.3rem; }

/* --- Postfach ungelesen-Badge --- */
.nav-badge {
  display: inline-block; min-width: 1.1rem; padding: 0 0.35rem; margin-left: 0.4rem;
  background: #e5484d; color: #fff; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; line-height: 1.3rem; text-align: center;
  vertical-align: middle;
}

/* --- Einheiten-Übersicht neben dem Planeten (Desktop) --- */
.base-top-row {
  display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.base-top-row .own-planet { flex: 0 0 auto; }
.unit-summary {
  flex: 1 1 320px; min-width: 260px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.8rem 1rem;
}
.unit-summary h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.us-group { margin-bottom: 0.7rem; }
.us-group:last-child { margin-bottom: 0; }
.us-group-title {
  font-size: 0.8rem; color: var(--accent, #ff8703); font-weight: 700;
  margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.us-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.us-row:last-child { border-bottom: none; }
.us-ico { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.us-name { flex: 1 1 auto; font-size: 0.9rem; }
.us-count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Auf schmalen Screens stapeln (Planet oben, Einheiten darunter). */
@media (max-width: 640px) {
  .base-top-row { flex-direction: column; }
  .unit-summary { width: 100%; }
}

/* --- Admin-Spieleransicht Warnbanner --- */
.admin-view-banner {
  position: sticky; top: 0; z-index: 9999;
  background: repeating-linear-gradient(45deg, #b3261e, #b3261e 12px, #8c1d17 12px, #8c1d17 24px);
  color: #fff; padding: 0.7rem 1rem; text-align: center;
  font-size: 0.95rem; border-bottom: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.admin-view-banner strong { color: #ffe08a; }
.admin-view-exit {
  margin-left: 0.6rem; background: #fff; color: #b3261e;
  border: none; border-radius: 5px; padding: 0.25rem 0.7rem;
  font-weight: 700; cursor: pointer; font-size: 0.85rem;
}
.admin-view-exit:hover { filter: brightness(0.92); }

/* --- Admin: seitliche Menüleiste + Inhalt --- */
.admin-shell { display: flex; gap: 1.5rem; align-items: flex-start; }
.admin-menu {
  flex: 0 0 220px; position: sticky; top: 1rem;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.8rem; max-height: calc(100vh - 2rem); overflow-y: auto;
}
.admin-menu-group { margin-bottom: 0.9rem; }
.admin-menu-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent, #ff8703); font-weight: 700; margin-bottom: 0.3rem; padding: 0 0.4rem;
}
.admin-menu-item {
  display: block; padding: 0.4rem 0.6rem; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: 0.9rem;
}
.admin-menu-item:hover { background: rgba(255,255,255,0.06); }
.admin-menu-item.active { background: var(--accent, #ff8703); color: #1a1a1a; font-weight: 600; }
.admin-menu-danger { color: #e5533d; }
.admin-menu-danger.active { background: #e5533d; color: #fff; }
.admin-menu-back {
  display: block; margin-top: 0.5rem; padding: 0.4rem 0.6rem;
  color: var(--muted, #9aa); text-decoration: none; font-size: 0.85rem;
  border-top: 1px solid var(--border);
}
.admin-content { flex: 1 1 auto; min-width: 0; }

@media (max-width: 780px) {
  .admin-shell { flex-direction: column; }
  .admin-menu { position: static; flex-basis: auto; width: 100%; max-height: none; }
}

/* --- Anklickbare Koordinaten --- */
.coord-link {
  color: var(--accent, #ff8703); text-decoration: none;
  border-bottom: 1px dotted currentColor; font-variant-numeric: tabular-nums;
}
.coord-link:hover { filter: brightness(1.2); border-bottom-style: solid; }

/* --- Flotten-unterwegs-Karten --- */
.fleet-card { padding: 0.9rem 1rem; }
.fleet-head { font-size: 1.05rem; margin-bottom: 0.3rem; }
.fleet-route { margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.fleet-progress {
  height: 10px; background: rgba(255,255,255,0.1);
  border-radius: 999px; overflow: hidden; margin-bottom: 0.35rem;
}
.fleet-bar {
  height: 100%; background: linear-gradient(90deg, #ff8703, #ffb347);
  border-radius: 999px; transition: width 0.5s ease;
}


/* --- Globales Dimensionstor-Banner (auf allen Spielseiten) --- */
.dz-gate-banner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1rem; margin: 0 0 0.9rem;
  background: linear-gradient(90deg, var(--bg-2, #0a1a26), rgba(255,135,3,0.12));
  border: 1px solid var(--accent, #ff8703); border-radius: 10px;
  color: var(--text, #dfeaff); text-decoration: none;
  box-shadow: var(--glow, 0 0 12px rgba(255,135,3,0.30));
  font-size: 0.92rem;
}
.dz-gate-banner:hover { filter: brightness(1.08); }
.dz-gate-ico { font-size: 1.15rem; line-height: 1; }
.dz-gate-text { flex: 0 1 auto; }
.dz-gate-text strong { color: var(--accent-2, #ffab3d); }
.dz-gate-mini {
  flex: 1 1 60px; min-width: 60px; max-width: 220px; height: 8px;
  background: var(--bg, #05121c); border: 1px solid var(--border, #21445f);
  border-radius: 6px; overflow: hidden;
}
.dz-gate-mini-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent, #ff8703), var(--ok, #35c46a));
  transition: width 0.4s ease;
}
.dz-gate-cta { margin-left: auto; font-weight: 700; color: var(--accent, #ff8703); white-space: nowrap; }
.dz-gate-done { border-color: var(--ok, #35c46a); box-shadow: 0 0 12px rgba(53,196,106,0.35); }
.dz-gate-done .dz-gate-text strong { color: var(--ok, #35c46a); }
@media (max-width: 640px) {
  .dz-gate-cta { display: none; }
  .dz-gate-banner { font-size: 0.85rem; padding: 0.5rem 0.7rem; }
}


/* --- Flotten: Richtungs-Badges, Archiv, Blätter-Steuerung --- */
.dir-badge { display:inline-block; font-size:.72rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; vertical-align:middle; margin-right:.25rem; }
.dir-out { background:rgba(255,135,3,.18); color:var(--accent-2,#ffab3d); border:1px solid var(--accent,#ff8703); }
.dir-in  { background:rgba(255,90,82,.18); color:var(--err,#ff5a52); border:1px solid var(--err,#ff5a52); }
.fleet-archive { margin:.6rem 0 1rem; border:1px solid var(--border,#21445f); border-radius:10px; background:var(--bg-2,#0a1a26); }
.fleet-archive > summary { cursor:pointer; padding:.6rem .9rem; font-weight:700; color:var(--text,#dfeaff); list-style:none; user-select:none; }
.fleet-archive > summary::-webkit-details-marker { display:none; }
.fleet-archive > summary:hover { color:var(--accent-2,#ffab3d); }
.fleet-archive[open] > summary { border-bottom:1px solid var(--border,#21445f); margin-bottom:.5rem; }
.fleet-archive > .card { margin-left:.6rem; margin-right:.6rem; }
.pager { display:flex; align-items:center; justify-content:center; gap:.8rem; padding:.6rem; flex-wrap:wrap; }
.pager-btn { padding:.35rem .8rem; border:1px solid var(--border,#21445f); border-radius:8px; color:var(--accent,#ff8703); text-decoration:none; font-weight:600; }
.pager-btn:hover { background:rgba(255,255,255,.06); }
.pager-btn.disabled { color:var(--muted,#7fa0bd); opacity:.5; cursor:default; }
.pager-info { color:var(--muted,#7fa0bd); font-size:.9rem; }


/* --- System: Koordinaten-Tag & Hervorhebung aktiver Aktionen --- */
.coord-tag { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size:.82rem; color:var(--cyan,#9ae5ff); background:rgba(154,229,255,.10); border:1px solid rgba(154,229,255,.25); border-radius:6px; padding:.05rem .4rem; }
.act-badge { display:inline-block; font-size:.72rem; font-weight:700; padding:.08rem .5rem; border-radius:999px; margin-left:.15rem; }
.act-mine { background:rgba(255,135,3,.18); color:var(--accent-2,#ffab3d); border:1px solid var(--accent,#ff8703); }
.act-danger { background:rgba(255,90,82,.20); color:var(--err,#ff5a52); border:1px solid var(--err,#ff5a52); }
.card.planet-busy { border-color:var(--accent,#ff8703); box-shadow:0 0 10px rgba(255,135,3,.18); }
.card.planet-danger { border-color:var(--err,#ff5a52); box-shadow:0 0 10px rgba(255,90,82,.22); }
.pl-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:.35rem; vertical-align:middle; }
.pl-dot.act-mine { background:var(--accent,#ff8703); }
.pl-dot.act-danger { background:var(--err,#ff5a52); }
.planet-active { fill:none; stroke-width:3; transform-box:fill-box; transform-origin:center; animation:dzPulse 1.5s ease-in-out infinite; }
.planet-active.act-mine { stroke:var(--accent,#ff8703); }
.planet-active.act-danger { stroke:var(--err,#ff5a52); }
@keyframes dzPulse { 0%,100% { opacity:.35; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }


/* --- Chat: Löschen-Button (Moderator/Admin) --- */
/* Kompakt und höhenneutral: inline-flex + vertical-align:middle verhindern, dass
   der Button die Zeilenhöhe im Chat vergrößert. */
.chat-del { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  height:1.2em; min-height:0; margin:0 0 0 .35rem; padding:0 .25rem; background:transparent; border:none;
  color:var(--muted,#7fa0bd); cursor:pointer; font-size:.85rem; line-height:1; border-radius:4px; }
.chat-del:hover { color:#fff; background:var(--err,#ff5a52); }


/* --- Spionage-Intel auf der Planeten-Detailseite --- */
.spy-intel { border-color: rgba(154,229,255,.35); }


/* --- Karte: Radar-Reichweite & gesperrte Systeme/Galaxien --- */
.radar-range { color: var(--cyan,#9ae5ff); font-size:.9rem; background:rgba(154,229,255,.08); border:1px solid rgba(154,229,255,.22); border-radius:8px; padding:.5rem .7rem; margin:.2rem 0 1rem; }
.galaxy-locked { color: var(--muted,#7fa0bd); font-weight:600; opacity:.75; }
.sys-core.sys-locked { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.12); stroke-width:1; }
.sys-locked-ico { fill: var(--muted,#7fa0bd); font-size:11px; opacity:.55; }


/* --- Desktop: kompakte Ressourcen-Kopfleiste --- */
.tb-resbar { display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap; }
.tb-res { display:inline-flex; align-items:center; gap:.5rem; font-size:1.05rem; color:var(--muted); white-space:nowrap; }
.tb-res strong { color:var(--text); font-variant-numeric:tabular-nums; font-size:1.1rem; }
.tb-res-ico { width:50px; height:50px; object-fit:contain; vertical-align:middle; }
.shell-desktop .res-grid { display:none; }

/* --- Admin-Statistik: Diagramme, Tabs, Filter --- */
.stat-chart { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:.8rem; margin:.7rem 0; overflow-x:auto; }
.stat-chart h3 { margin:0 0 .5rem; color:var(--muted); }
.stat-bar-label { fill:var(--text,#dfeaff); font-size:12px; }
.stat-bar-val { fill:var(--muted,#7fa0bd); font-size:11px; }
.stat-bar-fill { fill:var(--accent,#ff8703); }
.stat-col-fill { fill:var(--cyan,#9ae5ff); }
.stat-axis { stroke:var(--border,#21445f); stroke-width:1; }
.stat-tab { display:inline-block; padding:.35rem .8rem; border:1px solid var(--border,#21445f); border-radius:8px; margin:0 .3rem .3rem 0; color:var(--text,#dfeaff); text-decoration:none; font-size:.9rem; }
.stat-tab.active { background:var(--accent,#ff8703); color:#1a1a1a; font-weight:700; border-color:var(--accent,#ff8703); }
.stat-filter { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; }

.tb-res-rate { color:var(--muted,#7fa0bd); font-size:.78rem; }

/* --- Ressourcen-Mouseover (schnell, kurze Verzögerung) --- */
.tb-res { position: relative; }
.tb-tip {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  min-width: 170px; padding: .55rem .75rem; 
  background: var(--panel-2, var(--panel)); color: var(--text, #dfeaff);
  border: 1px solid var(--border, #21445f); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: .15rem;
  font-size: .85rem; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .1s ease, transform .1s ease;
  transition-delay: .05s;              /* sehr kurze Verzögerung */
  pointer-events: none;
}
.tb-res:hover .tb-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.tb-tip strong { color: var(--accent-2, #ffab3d); font-size: .92rem; }
.tb-tip-row { color: var(--muted, #7fa0bd); }

/* --- Einführungstour ("Erste Schritte") --- */
.tour-overlay { position:fixed; inset:0; background:rgba(4,10,20,.62); z-index:99990; }
.tour-ring {
  position:fixed; z-index:99992; border:2px solid var(--accent,#ff8703); border-radius:10px;
  box-shadow: 0 0 0 9999px rgba(4,10,20,.62), 0 0 16px 2px var(--accent,#ff8703);
  pointer-events:none; transition: left .15s ease, top .15s ease, width .15s ease, height .15s ease;
}
.tour-ring.pulse { animation: tourPulse 1.35s ease-in-out infinite; }
@keyframes tourPulse {
  0%,100% { box-shadow: 0 0 0 9999px rgba(4,10,20,.62), 0 0 0 0 rgba(255,135,3,.55); }
  50%     { box-shadow: 0 0 0 9999px rgba(4,10,20,.62), 0 0 0 9px rgba(255,135,3,0); }
}
.tour-bubble {
  position:fixed; z-index:99995; max-width:340px; width:calc(100vw - 32px);
  background:var(--panel,#0e2233); color:var(--text,#dfeaff);
  border:1px solid var(--border,#21445f); border-radius:12px;
  padding:1rem 1.1rem; box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.tour-bubble.center { left:50%; top:50%; transform:translate(-50%,-50%); }
.tour-bubble h4 { margin:0 0 .45rem; font-size:1.05rem; color:var(--accent,#ff8703); }
.tour-bubble p { margin:0 0 .9rem; line-height:1.5; font-size:.94rem; }
.tour-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tour-actions .tour-spacer { flex:1 1 auto; }
.tour-step { color:var(--muted,#7fa0bd); font-size:.8rem; white-space:nowrap; }
.tour-next {
  background:var(--accent,#ff8703); color:#1a1a1a; border:none; border-radius:8px;
  padding:.5rem .95rem; font-weight:700; cursor:pointer; min-height:0;
}
.tour-next:hover { filter:brightness(1.08); }
.tour-skip {
  background:none; border:none; color:var(--muted,#7fa0bd); cursor:pointer;
  font-size:.85rem; text-decoration:underline; min-height:0; padding:.3rem .2rem;
}
.tour-skip:hover { color:var(--text,#dfeaff); }

/* Flugzeit-Vorschau im Sende-Formular */
.fleet-eta { margin: .6rem 0 .3rem; font-size: .95rem; }
.fleet-cargo { margin: .1rem 0 .4rem; font-size: .95rem; }
.fleet-cargo.over { color: var(--danger, #ff6b6b); font-weight: 600; }

/* --- Energie-Panel (Basis-Seite) --- */
.energie-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; margin: .6rem 0; }
.energie-panel.over { border-color: var(--danger, #ff6b6b); }
.energie-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.energie-head .energie-icon { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }
.energie-warn { margin-left: auto; color: var(--danger, #ff6b6b); font-weight: 600; font-size: .9rem; }
.energie-figs { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: baseline; }
.energie-fig { display: flex; flex-direction: column; gap: .1rem; }
.energie-fig-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.energie-fig-val { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.energie-fig-net .energie-fig-val { color: var(--accent, #ff8703); }
.energie-panel.over .energie-fig-net .energie-fig-val { color: var(--danger, #ff6b6b); }
.energie-bar { margin-top: .6rem; height: 8px; border-radius: 999px; background: rgba(127,160,189,.18); overflow: hidden; }
.energie-bar-fill { display: block; height: 100%; background: var(--cyan, #9ae5ff); transition: width .3s ease; }
.energie-panel.over .energie-bar-fill { background: var(--danger, #ff6b6b); }

/* Energie in der Kopf-Ressourcenleiste */
.tb-res-energy strong { color: var(--cyan, #9ae5ff); }
.tb-res-energy.over strong { color: var(--danger, #ff6b6b); }

/* --- Admin: Sicherheit --- */
.sec-tiles { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.sec-tile { flex: 1 1 150px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; }
.sec-tile.warn { border-color: var(--accent, #ff8703); }
.sec-tile-val { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sec-tile-lbl { font-size: .8rem; color: var(--muted); }
.sec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sec-table th, .sec-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sec-table th { color: var(--muted); font-weight: 600; }
.sec-ok { color: var(--ok, #35c46a); }
.sec-bad { color: var(--danger, #ff6b6b); }