/* Seekampf 2.0 — Klassik-Look nach Original-Vorbild (Ordner "optik"):
   weiß, kleine Schrift, Textlisten statt Karten, grüne Aktionslinks. */

html { overflow-x: hidden; }
body {
  background: #fff;
  color: #000;
  font: 12px/1.55 Verdana, Geneva, Arial, sans-serif;
  overflow-x: hidden;
}
a { color: #000; }
a:hover { color: #333; }

/* Gesamte Spieloberfläche auf ~800px begrenzt, aber responsive (Smartphone: 100 %) */
#view-game { max-width: 800px; margin: 0 auto; width: 100%; }
* { box-sizing: border-box; }

/* Rückmeldungen (Erfolg/Fehler) als fest positionierter Toast statt einer
   Zeile am Seitenende — auf langen Seiten (z. B. Quests, weit runter-
   gescrollt) ging die Bestätigung sonst unbemerkt unterhalb des sichtbaren
   Bereichs unter (Dennis-Feedback 2026-07-09: "Spieler berichten ... keine
   Ressourcen kommen", tatsächlich kam die Belohnung an, nur die Bestätigung
   war nicht sichtbar). Leer = keine Restfläche (kein :empty nötig, das
   `<div>` hat ohne Inhalt selbst keine Höhe/Padding). */
#game-msg {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 1050; max-width: 92vw; width: max-content;
}
#game-msg .alert { box-shadow: 0 2px 10px rgba(0,0,0,0.25); }

/* Grüne Aktionslinks (Ausbauen / Build / Annehmen …) */
a.aktion, .aktion { color: #1e7e1e; font-weight: bold; text-decoration: none; }
a.aktion:hover { color: #2aa22a; text-decoration: underline; }
a.gefahr { color: #a33; text-decoration: none; }
a.gefahr:hover { text-decoration: underline; }

/* Reiter-Unternavigation (Allianz/Quests) — analog zur Hauptnav, nur unterlegt
   statt unterstrichen, damit sie sich von normalen Aktionslinks abhebt */
.reiter-nav a.aktion { text-decoration: none; padding: 2px 8px; border-radius: 3px; }
.reiter-nav a.aktion.aktiv { background: #eef6ee; text-decoration: none; }

/* ---------- Login ---------- */
.logo-text {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  letter-spacing: 0.25em;
  font-size: 1.3rem;
}
#view-login .card { border: 1px solid #999; border-radius: 0; }
#view-login .card-header { background: #e8e8e8; border-radius: 0; font-weight: bold; }
.story-text {
  font-style: italic; color: #444; font-size: 12.5px; line-height: 1.7;
  border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 2px;
}

/* ---------- Kopfbereich ---------- */
.kopf { display: flex; justify-content: space-between; align-items: flex-start;
        flex-wrap: wrap; gap: 4px; padding: 6px 8px 2px; }
.kopf .zeile2 { color: #000; }
.kopf-rechts { text-align: right; white-space: nowrap; }
.kopf-rechts a { text-decoration: none; font-weight: bold; }
.kopf-rechts a:hover { text-decoration: underline; }
.trenner { color: #999; margin: 0 2px; }
#insel-select { font: inherit; border: 1px solid #999; background: #fff;
                padding: 0 2px; max-width: 16rem; }

/* ---------- Rohstoffleiste ---------- */
.resleiste {
  display: flex; flex-wrap: wrap; margin: 4px 8px; border: 1px solid #888;
}
.resleiste .zelle {
  flex: 1 1 8rem; padding: 3px 8px; border-right: 1px solid #888; white-space: nowrap;
  display: flex; align-items: baseline; gap: 4px;
}
.resleiste .zelle:last-child { border-right: 0; }
.resleiste b { font-size: 13px; }
.resleiste .prod { color: #555; font-size: 11px; margin-left: auto; }
.resleiste .voll b { color: #a00; }

/* ---------- Navigation (graue Leiste, Textlinks) ---------- */
.hauptnav {
  margin: 6px 8px; padding: 4px 8px;
  background: #e0e0e0; border-top: 1px solid #999; border-bottom: 1px solid #999;
  display: flex; flex-wrap: wrap; row-gap: 4px;
}
.hauptnav a {
  font-weight: bold; text-decoration: none; margin-right: 14px; color: #000;
  white-space: nowrap;
}
.hauptnav a:hover { text-decoration: underline; }
.hauptnav a.aktiv { text-decoration: underline; }
/* Quests-Navifeld: leichte Hervorhebung, sobald mind. eine Quest abholbar ist */
.hauptnav a.hervorgehoben { background: #eef6ee; padding: 2px 6px; border-radius: 3px; }

/* ---------- Inhalt ---------- */
.inhalt { padding: 0 8px 20px; }

@media (max-width: 600px) {
  /* Navigation: sauber umbrechen statt versteckt seitlich scrollen (bei
     nowrap+overflow-x fielen hintere Einträge wie Rangliste/Profil/Inseln
     unsichtbar aus dem Bildschirm, ohne dass ein Scroll-Hinweis sichtbar war) */
  .hauptnav a { margin-right: 10px; font-size: 12px; }

  /* Rohstoffleiste: eine Zeile pro Rohstoff, Wert links / Produktion rechts.
     WICHTIG: „flex: 1 1 8rem" von .zelle bezieht sich in flex-direction:column
     auf die HÖHE (8rem!) statt die Breite — das hat jede Zelle 128px hoch
     aufgebläht. Hier auf normale Inhaltshöhe zurücksetzen. */
  .resleiste { flex-direction: column; }
  .resleiste .zelle {
    flex: 0 0 auto; width: 100%;
    border-right: 0; border-bottom: 1px solid #888;
  }
  .resleiste .zelle:last-child { border-bottom: 0; }

  .kopf-rechts { text-align: left; }

  /* Ozean-Raster (15×15 Felder à 30px = 450px+) passt sonst nicht auf ein
     Telefon-Display und erzwingt horizontales Scrollen im Grid — Zellen auf
     Mobil verkleinern, damit das 3×3-Sektoren-Raster ohne Scrollen passt. */
  .ozean-tabelle td { width: 20px; height: 20px; }
  .oz-insel { width: 8px; height: 8px; }
  .ozean-tabelle th.oz-sektor-label { padding: 1px 3px; font-size: 10px; }
}
h2.abschnitt { font-size: 13px; font-weight: bold; margin: 12px 0 4px; }
.nebeninfo { color: #555; font-size: 11px; }

/* Quests: klar getrennte Abschnitte per Farbakzent (Dennis-Feedback: Tab
   "drückt sich alles zusammen" — Tagesaufgaben/Tutorial/Meilensteine sollen
   auf einen Blick unterscheidbar sein). */
.quest-gruppe {
  border-left: 3px solid #ccc; padding: 2px 0 4px 10px; margin: 10px 0 16px;
}
.quest-gruppe--daily { border-left-color: #2a6fa2; }
.quest-gruppe--tutorial { border-left-color: #1e7e1e; }
.quest-gruppe--meilenstein { border-left-color: #a2782a; }
.quest-gruppe .zeile { border-bottom: 1px solid #eee; padding: 6px 0; }
.quest-gruppe .zeile:last-child { border-bottom: 0; }
.hinweis {
  background: #e0e0e0; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb;
  padding: 3px 8px; margin: 8px 0;
}

/* Einfache Zeilenlisten (statt Cards) */
table.liste { width: 100%; border-collapse: collapse; }
table.liste td, table.liste th {
  padding: 4px 6px 4px 0; border-bottom: 1px solid #ddd;
  vertical-align: top; text-align: left; font-size: 12px;
}
table.liste th { border-bottom: 1px solid #999; font-weight: bold; }
.zeile { padding: 3px 0; border-bottom: 1px solid #ddd; }
.zeile:last-child { border-bottom: 0; }
/* Ungelesene Berichte/Nachrichten deutlich hervorheben */
.bericht-ungelesen { background: #eef6ee; border-left: 3px solid #1e7e1e; padding-left: 5px; }
/* Angriff auf eine eigene Insel — deutlich rot markieren (Dennis-Feedback
   2026-07-08), sowohl in der Berichte-Liste als auch im Wachturm/Ausguck */
.bericht-verteidiger { background: #fdeaea; border-left: 3px solid #a33; padding-left: 5px; }
.wachturm-alarm { background: #fdeaea; border: 1px solid #a33; border-radius: 4px; padding: 4px 6px; }
/* Gemeldete Forum-Themen/-Beiträge — nur für Admins sichtbar (Dennis-Feedback) */
.forum-gemeldet { background: #fdf1de; border-left: 3px solid #c9820f; padding-left: 5px; }
/* melden/löschen: bewusst sehr klein und unauffällig (Dennis-Feedback) */
.forum-mod { font-size: 9px; }
/* Öffentlich vs. Allianz-Forum farblich unterscheidbar (Dennis-Feedback) */
.forum-oeffentlich { border-left: 3px solid #2b6cb0; padding-left: 5px; }
.forum-allianz { background: #f5f0fe; border-left: 3px solid #7c3aed; padding-left: 5px; }
.forum-legende {
  display: inline-block; font-size: 9px; font-weight: bold; text-transform: uppercase;
  padding: 1px 4px; margin-right: 3px; border-radius: 2px; color: #fff;
}
.forum-legende--oeffentlich { background: #2b6cb0; }
.forum-legende--allianz { background: #7c3aed; }

/* Sehr dichte Tabelle (z. B. Meine Inseln): schmale Zellen, Icon-Spaltenköpfe */
table.liste-kompakt td, table.liste-kompakt th {
  padding: 3px 5px; font-size: 11px; white-space: nowrap; text-align: right;
}
table.liste-kompakt td:first-child, table.liste-kompakt th:first-child,
table.liste-kompakt td:nth-child(2), table.liste-kompakt th:nth-child(2) { text-align: left; }
table.liste-kompakt th img.icon { margin: 0; }

/* ---------- Formulare: klein & flach ---------- */
input, select, button, textarea { font: inherit; }
.form-control, .form-select { border-radius: 0; border-color: #999; }
.form-control-sm, .form-select-sm { font-size: 12px; padding: 1px 4px; min-height: 0; }
.btn { border-radius: 0; font-size: 12px; padding: 1px 8px; }
.btn-primary, .btn-success {
  background: #e8e8e8; border: 1px solid #888; color: #000;
}
.btn-primary:hover, .btn-success:hover { background: #d5d5d5; border-color: #666; color: #000; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-light {
  background: #f4f4f4; border: 1px solid #999; color: #000;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-outline-warning:hover {
  background: #ddd; border-color: #666; color: #000;
}

/* Meldungen */
.alert { border-radius: 0; padding: 3px 8px; font-size: 12px; margin: 6px 0; }
.alert-success { background: #e6f2e6; border: 1px solid #9c9; color: #1e5e1e; }
.alert-danger { background: #f4e4e4; border: 1px solid #c99; color: #822; }

/* ---------- Ozean ---------- */
.ozean-tabelle { border-collapse: collapse; }
.ozean-tabelle th {
  font-weight: normal; color: #333; font-size: 11px; padding: 1px 3px;
  border: 0; text-align: center; background: #fff;
}
.ozean-tabelle td {
  width: 30px; height: 30px; padding: 0; text-align: center; vertical-align: middle;
  background: #5b9bd5; border: 1px solid #fff; cursor: pointer; font-size: 10px;
}
.ozean-tabelle td:hover { outline: 2px solid #333; outline-offset: -2px; }
.oz-insel { display: inline-block; width: 10px; height: 10px; background: #000; }
.oz-eigene .oz-insel { background: #1e7e1e; }
.oz-ruine .oz-insel { background: #777; }
.oz-allianz .oz-insel { background: #fff; border: 1px solid #333; }
.oz-buendnis .oz-insel { background: #e0c200; }

.oz-legende { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
              margin-bottom: 6px; }
.oz-legende span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.oz-legende .oz-insel { width: 10px; height: 10px; }
/* Sektor-Grenzen im 3×3-Raster deutlicher hervorheben */
.ozean-tabelle td.sektor-links { border-left: 2px solid #333; }
.ozean-tabelle td.sektor-oben { border-top: 2px solid #333; }
.ozean-tabelle th.sektor-links { border-left: 2px solid #333; }

/* Sektor-Legende seitlich (Y) + unten (X): welcher Sektor das jeweils ist */
.ozean-tabelle th.oz-sektor-label {
  font-weight: bold; color: #555; background: #f4f4f4; padding: 2px 6px;
}

/* Live-Kampf / Berichte: strukturierte Tabelle statt Fließtext */
#bd-inhalt { font-size: 12px; }
#bd-inhalt table.liste { margin-top: 4px; }

footer { border-top: 1px solid #bbb; padding-top: 6px; margin-top: 24px; }
footer a { color: #555; }

/* ---------- Icons (bereitgestellte Grafiken, dezent inline) ---------- */
img.icon { vertical-align: text-bottom; margin-right: 2px; }
img.icon-res { height: 14px; width: auto; }
img.icon-gebaeude { height: 14px; width: auto; }
img.icon-einheit { height: 18px; width: auto; }
img.icon-schiff { height: 15px; width: auto; }
img.icon-uhr { height: 11px; width: auto; opacity: 0.75; }
img.icon-post { height: 13px; width: auto; }

/* Postfach-Icon blinkt bei neuer, ungelesener Nachricht */
@keyframes blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }
img.icon-post.blinkt { animation: blinken 1s step-start infinite; }

.aktuelle-stufe { background: #eef6ee; }

/* Online-Status-Punkt in der Rangliste (Dennis-Feedback 2026-07-08) */
.online-punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.online-punkt.online { background: #3cb043; }
.online-punkt.offline { background: #bbb; }