/* ============================================================
   1. GRUNDEINSTELLUNGEN & VARIABLEN
   ============================================================ */

/* zentrale variablen schnelleres testen. */
:root {
  --bg-color: #2a2a3a; /* Dunkelgrau (Hintergrund aller Boxen) */
  --text-color: #e0e0e0; /* Helles Grau (Standard Textfarbe) */
  --border-dark: #1a1a2a; /* Dunkler Rand für Schatten-Effekte */
  --border-light: #4a4a5a; /* Heller Rand für Licht-Effekte */
  --btn-bg: #d4a13b; /* Goldene Farbe für Buttons & Highlights */
  --btn-border: #9c7221; /* Dunklerer Goldton für Button-Ränder */
  --pixel-font: "Press Start 2P", cursive; /* Die Retro-Schriftart */
}

/* Das Grundgerüst der Seite */
body {
  background-color: #111;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    /* Ein dunkler Schleier (60%), damit der Text lesbar bleibt */
    url("Images/Background/BGStage13.webp");

  /* Damit das Bild den ganzen Screen füllt: */
  background-size: cover; /* Skaliert das Bild, bis alles bedeckt ist */
  background-position: center; /* Zentriert das Bild */
  background-repeat: no-repeat;
  background-attachment: fixed; /* Das Bild bleibt stehen, auch wenn man scrollt */

  font-family: var(--pixel-font);
  color: var(--text-color);

  /* Flexbox sorgt dafür, dass das Spiel immer exakt in der Mitte
     des Bildschirms schwebt */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* sichtbare höhe */
  margin: 0;
}

/* Links (z.B. "Hier registrieren") */
a {
  color: var(--btn-bg);
  text-decoration: none;
} /* Goldene Farbe */
a:hover {
  text-decoration: underline;
} /* Unterstreichen beim Drüberfahren */

/* Standard-Textabsätze (z.B. Erklärungen) */
p {
  font-size: 0.65rem;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 20px;
}

/* Blinken Animation */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ============================================================
   2. GLOBALE BAUSTEINE (Boxen & Buttons)
   ============================================================ */

/* Der graue Kasten mit dem 3D-Rahmen-Effekt.
   Wird fast überall benutzt (Login, Kampflog, Menü). */
.pixel-box {
  background-color: var(--bg-color);
  border: 4px solid var(--border-dark);
  /* Der Trick für den 3D-Effekt: Helles Licht oben links, Schatten unten rechts */
  box-shadow:
    inset -4px -4px 0 var(--border-light),
    inset 4px 4px 0 var(--border-dark);
  padding: 15px;
}

/* Der goldene Standard-Button */
.pixel-btn {
  font-family: var(--pixel-font);
  border: 4px solid var(--btn-border);
  background-color: var(--btn-bg);
  color: #3a2c11; /* Dunkelbraune Schrift auf Gold */
  /* Innerer Schatten lässt den Button "gedrückt" wirken */
  box-shadow:
    inset -4px -4px 0 #b88a32,
    inset 4px 4px 0 #f7dca8;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

/* Macht den Button heller, wenn man mit der Maus drüberfährt */
.pixel-btn:hover {
  filter: brightness(1.1);
}

/* Wenn ein Button deaktiviert ist (z.B. "Gegner Zug" wenn Spieler dran ist) */
.pixel-btn:disabled,
button:disabled {
  opacity: 0.5 !important; /* Halb durchsichtig */
  cursor: not-allowed !important; /* Verbot-Schild Mauszeiger */
  background: #222 !important; /* Schwarz statt Gold */
  color: #666 !important;
  border-color: #444 !important;
  box-shadow: none !important; /* Kein 3D-Effekt mehr */
  filter: grayscale(100%) !important; /* Grau machen */
}

/* Hilfsklasse für Innenabstand und Größe von Aktions-Buttons */
.action-btn {
  padding: 10px 15px;
  font-size: 0.7rem;
  flex-grow: 1;
}

/* ============================================================
   3. FORMULARE (Login, Register, Charakter)
   ============================================================ */

/* Begrenzt die Breite der Login/Register-Boxen auf 450px */
.form-wrapper {
  width: 450px;
  text-align: center;
  margin: 0 auto; /* Zentriert die Box horizontal */
}

/* Überschriften in diesen Boxen */
.form-wrapper h2 {
  color: var(--btn-bg);
  margin-bottom: 25px;
  text-shadow: 3px 3px 0 #000;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: 0;
}

/* Beschriftung über den Feldern (z.B. "NAME:") */
label {
  display: block;
  text-align: left;
  margin-bottom: 5px;
  font-size: 0.7rem;
  color: #aaa;
}

/* DAS HAUPT-DESIGN FÜR ALLE EINGABEFELDER.
   Egal ob Text, Passwort oder Zahl -> Alle sehen gleich aus. */
input[type="text"],
input[type="password"],
input[type="number"] {
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #1a1a2a; /* Sehr dunkler Hintergrund (Inset) */
  border: 4px solid var(--border-light);
  color: var(--text-color);
  font-family: var(--pixel-font);
  box-sizing: border-box; /* Verhindert Layout-Probleme durch Padding */
  outline: none;
  box-shadow: inset 4px 4px 0 var(--border-dark); /* Schatten nach innen */
}

/* Goldener Rand, wenn man ins Feld klickt */
input:focus {
  border-color: var(--btn-bg);
}

/* Kleiner Link-Text unter Formularen */
.link-text {
  margin-top: 20px;
  font-size: 0.6rem;
  line-height: 1.5;
}

/* ============================================================
   4. NACHRICHTEN (Fehler & Erfolg)
   ============================================================ */

/* Rote Box für Fehlermeldungen */
.msg-box {
  padding: 10px;
  border: 2px solid;
  margin-bottom: 20px;
  font-size: 0.6rem;
  background-color: #3a1a1a;
  color: #ff5555;
  border-color: #ff5555;
}

/* Grüne Box für Erfolg (überschreibt Farben der msg-box) */
.msg-success {
  background-color: #1a3a1a;
  color: #55ff55;
  border-color: #55ff55;
}

/* ============================================================
   5. SPEZIAL: CHARAKTER ERSTELLUNG (Layout)
   ============================================================ */

/* Diese Zeilen dienen NUR dem Layout (Links Label, Rechts Input).
   Sie sind DURCHSICHTIG (transparent), haben keinen Rahmen. */
.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  margin-bottom: 15px;
  background-color: transparent; /* WICHTIG: Unsichtbar */
  border: none;
}

.form-row label {
  margin-bottom: 0;
  cursor: pointer;
  font-size: 0.8rem;
}

/* Spezielle Größe für Zahlenfelder in dieser Zeile */
.form-row input[type="number"] {
  width: 100px;
  text-align: center;
  margin-bottom: 0;
  height: auto;
}

/* ============================================================
   6. MAIN GAME LAYOUT (Das Spiel-Fenster)
   ============================================================ */

/* Der Container, der Sidebar (links) und Inhalt (rechts) hält */
.game-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  width: 1100px;
  position: relative;
}

/* Der rechte Bereich, wo Kampflog oder Hub angezeigt werden */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-grow: 1;
}

/* Sorgt dafür, dass der Inhalt im Hub vertikal zentriert ist */
.main-content .pixel-box {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Sidebar (Links) --- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 100;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* Quadratische Buttons für Icons */
.icon-btn {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}

/* Text unter den Icons */
.label {
  font-size: 0.6rem;
  margin-top: 5px;
  text-shadow: 2px 2px 0 #000;
}

/* --- Hub Menu (Mitte) --- */
.hub-menu {
  display: flex;
  flex-direction: column; /* Buttons untereinander */
  gap: 15px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hub-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 60%;
  max-width: 300px;
  text-align: center;
}

/* ============================================================
   7. KAMPFSYSTEM (Das Grid)
   ============================================================ */

/* Das Raster: Links (Spieler/Schatten) | Rechts (Gegner) */
.combat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% / 50% Aufteilung */
  gap: 20px;
  height: 360px; /* Höhe für das "Big & Bold" Design */
  align-items: stretch;
}

.col-left,
.col-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
}

/* --- Slots für Figuren --- */
.ally-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 10px;
}

.enemy-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Rechtsbündig */
  gap: 5px;
  padding: 0 10px;
}

/* Grauer Filter, wenn Gegner tot ist */
.dead-state {
  opacity: 0.4;
  filter: grayscale(100%);
}

/* Das große Emoji-Bild */
.char-img-placeholder {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem; /* Emoji Größe */
  flex-shrink: 0;
}

/* --- Balken (HP/Mana) --- */
.stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 18px;
  margin-bottom: 4px;
}

.tiny-bar {
  width: 150px !important;
  height: 12px;
  background: #111;
  border: 2px solid #444;
  position: relative;
  flex-shrink: 0;
}

/* Farben der Balkenfüllung */
.bar-fill-hp {
  background-color: #4caf50;
  height: 100%;
}
.bar-fill-mana {
  background-color: #2196f3;
  height: 100%;
}
.bar-fill-stamina {
  background-color: #ff9800;
  height: 100%;
}
.bar-fill-shadow {
  background-color: #9c27b0;
  height: 100%;
}

/* Text neben dem Balken */
.stat-text-side {
  font-size: 0.75rem;
  color: #ccc;
  font-family: monospace;
  white-space: nowrap;
  font-weight: bold;
  line-height: 1;
}

/* ============================================================
   8. KAMPFLOG ELEMENTE (Dunkle Boxen)
   ============================================================ */

.log-inset-panel {
  background-color: #1a1a2a;
  border: 2px solid var(--border-light);
  box-shadow: inset 2px 2px 0 var(--border-dark);

  display: flex;
  align-items: center;
  padding: 5px 10px;
  box-sizing: border-box;
  width: 100%;
}

/* Der Container, der scrollbar wird */
.log-scroll-box {
  width: 70%;
  height: 135px !important; /* Fixe Höhe */
  overflow-y: auto; /* Scrollen erlauben */
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-start;
  padding-right: 5px;
}

/* Eine einzelne Zeile im Log (leicht transparent dunkel) */
.log-line {
  white-space: normal !important;
  /* word-wrap: break-word; */
  height: auto !important;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  font-size: 0.65rem;
  line-height: 1.3;
  justify-content: flex-start !important;
  background: rgba(0, 0, 0, 0.2);
  /* text-indent: -10px; */
}

/* --- Scrollbar Styling  --- */
.log-scroll-box::-webkit-scrollbar {
  width: 8px;
}
.log-scroll-box::-webkit-scrollbar-track {
  background: #1a1a2a;
  border: 1px solid #444;
}
.log-scroll-box::-webkit-scrollbar-thumb {
  background: #d4a13b;
  border: 1px solid #9c7221;
}
.log-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #ffcc55;
}

/* ============================================================
   11. VICTORY SCREEN (Sieg & Loot)
   ============================================================ */

/* Container für die 3 Gegner-Karten nebeneinander */
.loot-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
}

/* Eine einzelne Karte (Bild + XP) */
.loot-card {
  background-color: #1a1a2a;
  border: 2px solid #444;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  position: relative;
  /* Leichte Animation beim Laden */
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Goldener Rahmen für Loot */
.loot-card:hover {
  border-color: var(--btn-bg);
  transform: translateY(-5px);
  transition: 0.2s;
}

/* XP Text */
.xp-gain {
  color: #ffcc00; /* Goldgelb */
  font-weight: bold;
  margin-top: 10px;
  font-size: 0.8rem;
}

/* Die Gesamt-Summe unten */
.total-xp-box {
  background-color: #1a3a1a; /* Dunkelgrün */
  border: 2px solid #4caf50;
  color: #4caf50;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  text-transform: uppercase;
  display: inline-block;
}

/* ============================================================
   FIX FÜR DEN ABENTEUER-HUB (MITTE)
   ============================================================ */

/* Diese Regel gilt NUR für Buttons, die im .hub-menu stecken.
   Alle anderen Buttons (z.B. Sidebar) bleiben unverändert! */
.hub-actions .hub-btn {
  width: 100% !important; /* Füllt die 75% des Containers aus */
  max-width: none !important; /* Entfernt die 300px Bremse */
  margin: 0 !important; /* Entfernt Abstände */
  box-sizing: border-box !important;
}

/* Stellt sicher, dass die Formulare im Hub keinen Platz wegnehmen */
.hub-menu form {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ============================================================
   9. Klassen zum Testen
   ============================================================ */

/* --- Flexbox Helfer --- */
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gap-5 {
  gap: 5px;
}
.gap-10 {
  gap: 10px;
}
.gap-15 {
  gap: 15px;
}

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}

/* --- Text Farben Größen Ausrichtungen --- */
.text-xs {
  font-size: 0.5rem;
}
.text-sm {
  font-size: 0.6rem;
}
.text-md {
  font-size: 0.8rem;
}
.text-lg {
  font-size: 1.2rem;
}
.text-xl {
  font-size: 2rem;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.text-gold {
  color: var(--btn-bg);
}
.text-green {
  color: #4caf50;
}
.text-blue {
  color: #2196f3;
}
.text-red {
  color: #ff5555;
}
.text-orange {
  color: #ff9800;
}
.text-gray {
  color: #888;
}
.text-white {
  color: #fff;
}

/* --- Element Helfer --- */
/* Macht einen Button komplett unsichtbar (für Klick-Wrapper) */
.btn-invisible {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

/* Trennlinien */
.divider {
  height: 1px;
  background: #333;
  margin: 5px 0;
  width: 100%;
}

.divider-dashed {
  border-top: 1px dashed #444;
  margin: 5px 0;
  width: 100%;
}

/* ============================================================
   ZUSATZ: MAINGAME HUB 
   ============================================================ */

/* Entfernt Button-Styles (für die Sidebar Wrapper) */
.btn-reset {
  all: unset;
  cursor: pointer;
  width: 100%;
}

/* Der Container in der Mitte */
.hub-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Überschrift "Adventure Hub" */
.hub-title {
  margin: 0;
  color: var(--btn-bg);
  text-shadow: 2px 2px 0 #000;
  font-size: 1.8rem;
  text-align: center;
}

/* Fortschrittsbalken Bereiche */
.progress-wrapper {
  margin-bottom: 30px;
  text-align: center;
  width: 56%; /* Breite passend zu den Buttons */
}

.progress-bar-bg {
  width: 100%; /* Füllt den 75% Wrapper aus */
  height: 20px;
  background: #333;
  border: 2px solid #555;
  position: relative;
}

.progress-text {
  padding-top: 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.6rem;
  line-height: 16px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

/* Der Bereich um die Buttons herum */
.hub-actions {
  width: 75%; /* WICHTIG: Container nimmt volle Breite, damit er zentrieren kann */
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center; /* Zentriert die 75% breiten Kinder in der Mitte */
}

/* Die einzelnen Button-Wrapper */
.hub-btn-wrapper {
  width: 75%; /* Genau so breit wie der Fortschrittsbalken-Wrapper */
  padding: 0;
  margin: 0; /* Margin auto ist hier nicht nötig, da align-items das macht */
}

/* Die eigentlichen Buttons */
.hub-action-btn {
  width: 100%;
  display: block;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
}

/* Spezielle Farben */
.hub-dex-color {
  color: #9c27b0;
}
.hub-shop-border {
  border-color: #55ff55;
}

/* ============================================================
   KAMPFLOG STYLES
   ============================================================ */

/* Das Gitter für die Aktions-Buttons (2 Spalten, 3 Reihen) */
.combat-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 15px;
  width: 100%;
}

/* Container für die linke und rechte Seite im Kampf */
.combat-info-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* Namen der Kämpfer */
.char-name {
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* Der lila Leuchteffekt beim Schattenmonster */
.shadow-glow {
  filter: drop-shadow(0px 0px 8px #e040fb);
}

/* Der Auswahl-Knopf beim Gegner (Radio Button) */
.target-radio {
  transform: scale(1.8);
  margin-left: 15px;
  accent-color: var(--btn-bg);
  cursor: pointer;
}

/* Blinken */
.blink-active {
  animation: blink 1s infinite;
}
.blink-inactive {
  visibility: hidden;
}

/* Runder Zähler im Log (links) */
.round-counter-box {
  width: 25%;
  min-width: 25%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Zentriert den Text */
}

/* Gegner Balken Container */
.enemy-bar-container {
  display: inline-block;
  width: 100px;
  height: 10px;
  background: #111;
  border: 1px solid #555;
}

/* Gegner Lebensbalken (Rot) */
.enemy-bar-fill {
  height: 100%;
  background: #d32f2f;
}

/* Überschreibt height: auto für Pixelboxen im Kampf */
.h-auto {
  height: auto !important;
  min-height: auto !important;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.status-container {
  display: flex;
  flex-direction: row;
  gap: 4px; /* Abstand zwischen den Badges */
  margin: 4px 0px 2px 0px;
  min-height: 6px; /* Reserviert Platz, damit nichts springt */
  justify-content: flex-end; /* alles nach rechts? */
  align-items: center; /*Vertikal*/
}

.status-badge {
  font-size: 0.5rem;
  font-weight: bold;
  color: white;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  display: inline-block;
  line-height: 1;
  font-family: sans-serif;
}

/* Die Farben für die Effekte */
.badge-burn {
  background-color: #ff5722; /* Kräftiges Orange-Rot */
  border: 1px solid #d84315;
}
.badge-freeze {
  background-color: #29b6f6; /* Eis-Hellblau */
  border: 1px solid #0288d1;
}
.badge-bleed {
  background-color: #5a1111; /* Dunkles Blutrot */
  border: 1px solid #360b0b;
}
.badge-para {
  background-color: #ffb300; /* Kräftiges Bernstein-Gelb */
  border: 1px solid #ff6f00;
}
.badge-poison {
  background-color: #43a047; /* Sattes Giftgrün */
  border: 1px solid #1b5e20;
}
.badge-stun {
  background-color: #757575; /* Solides Grau */
  border: 1px solid #424242;
}

/* ============================================================
   Bilder????
   ============================================================ */
/* Pixel-Perfect Rendering für Bilder */
.pixel-img {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  image-rendering: pixelated; /* Für Chrome/Modern */
  image-rendering: -moz-crisp-edges; /* Für Firefox */
  image-rendering: crisp-edges;

  /* Optional: Ein Filter für Schatten, damit sie sich vom Hintergrund abheben */
  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.5));
}

.log-fade-in {
  opacity: 0; /* Startzustand: Unsichtbar */
  animation: alphaSlide 0.6s ease-out forwards;
}

@keyframes alphaSlide {
  0% {
    opacity: 0;
    transform: translateX(-10px); /* Startet 10px weiter links */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* Endet an der Originalposition */
  }
}