/* ===========================
   GLOBAL: Reset & Grundlayout
   =========================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #020617;   /* Hintergrundfarbe des Spiels */
    color: #e5e7eb;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Gesamtbreite des Spiels */
#app {
    width: 100%;
    max-width: 1300px;     /* << Hier kannst du das gesamte Spielfeld breiter/schmaler machen */
    padding: 1.5rem;
}

/* ===========================
   HEADER / TITLE
   =========================== */

header h1 {
    font-size: 2.4rem;     /* << Titelgröße (TileTales) */
    margin-bottom: 1.75rem;
    text-align: center;    /* Titel zentrieren */
    font-weight: 700;
    letter-spacing: 0.04em;       /* leichter spacing-Effekt */
    text-shadow: 0 0 10px rgba(15, 23, 42, 0.8);
}

/* ===========================
   HAUPT-LAYOUT: links | mitte | rechts
   =========================== */

.layout {
    display: flex;
    gap: 1.25rem;          /* << Abstand zwischen Char – Map – Log */
    align-items: flex-start;
}

/* Seitenbereiche (Charakter & Log) */
#char-section,
#log-section {
    flex: 1;               /* << Flexibel, aber kleiner als Mitte */
    max-width: 180px;      /* << Harte Obergrenze der Breite */
}

/* Mittlere Spalte (Map + Dialog) */
#center-section {
    flex: 3;               /* << Mitte ist „3x so wichtig“ wie die Seiten → Map bekommt viel Platz */
    display: flex;
    flex-direction: column;
    align-items: center;   /* Map und Dialog zentriert */
    gap: 0.75rem;          /* Abstand zwischen Map und Dialog */
}

/* ===========================
   PANELS: Charakter & Log
   =========================== */

#character-panel,
#log-panel {
    background: #020617;
    border-radius: 0.75rem;
    border: 1px solid #1f2937;
    padding: 0.5rem 0.8rem;
}
/* ===========================
   CHARAKTER-PANEL: Avatar + Balken
   =========================== */

#character-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;              /* Abstand zwischen Kopfbereich und Balken */
    font-size: 0.9rem;
}

/* Kopfbereich mit Avatar links, Text rechts */
#charInfo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Runder Avatar-Kreis */
.char-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #1f2937;
    background: radial-gradient(circle at 30% 20%, #111827, #020617);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    color: #e5e7eb;
}

/* Name + Gold-Info nebeneinander */
.char-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.char-name {
    font-weight: 600;
}

.char-stats-line {
    font-size: 0.8rem;
    color: #9ca3af;
}

.char-stat-label {
    font-weight: 500;
}

.char-stat-value {
    font-variant-numeric: tabular-nums;
}

/* Balken-Gruppe */
.char-bars {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Labelzeile über jedem Balken (Name links, Wert rechts) */
.bar-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #9ca3af;
}

.bar-value {
    font-variant-numeric: tabular-nums;
}

/* Balken-Hintergrund */
.bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #020617;
    border: 1px solid #1f2937;
    overflow: hidden;
}

/* Füllung des Balkens (wird per JS in der Breite gesetzt) */
.bar-fill {
    height: 100%;
    width: 0%;                        /* Start, wird in JS gesetzt */
    transition: width 0.15s ease;
}

/* HP-Balken – Farbe je nach Zustand */
.hp-bar .bar-fill {
    background: #22c55e;              /* Default: grün */
}

.hp-low {
    background: #b91c1c !important;   /* wenig HP: rot */
}

.hp-mid {
    background: #f97316 !important;   /* mittlere HP: orange */
}

.hp-high {
    background: #22c55e !important;   /* viel HP: grün */
}

/* XP-Balken – immer blau */
.xp-bar .bar-fill {
    background: #38bdf8;
}


/* Überschriften in Panels */
#character-panel h2,
#log-panel h2,
#map-section h2,
#dialog-panel h2 {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: #9ca3af;
}

/* Log-Bereich scrollbar machen */
/* Log-Bereich: gleiche Höhe wie Map (wird per JS gesetzt),
   innen eigener Scrollbereich (#log) */
#log-panel {
    background: #020617;
    border-radius: 0.75rem;
    border: 1px solid #1f2937;
    padding: 0.5rem 0.8rem;

    display: flex;          /* damit #log den verfügbaren Platz füllen kann */
    flex-direction: column;
}

/* Überschrift im Log bleibt oben, Inhalt darunter scrollt */
#log-panel h2 {
    margin-bottom: 0.4rem;
}

/* Der eigentliche Scrollbereich für die Einträge */
#log {
    flex: 1;                /* nimmt den restlichen Platz im Panel ein */
    overflow-y: auto;       /* hier wird gescrollt */
    font-size: 0.85rem;
}


#log-panel div {
    line-height: 1.3;
    margin-bottom: 0.1rem;
}

/* Optional: verblasste Einträge */
.log-entry-faded {
    opacity: 0.7;
    font-size: 0.8rem;
}

/* ===========================
   MAP-BEREICH
   =========================== */

#map-section {
    width: 100%;
    max-width: 1000px;      /* << maximale Breite der Map */
    background: #020617;
    border-radius: 1rem;
    border: 1px solid #1f2937;
    padding: 0.75rem;
}

/* Grid mit Kacheln */
#mapGrid {
    display: grid;

    /* << ANPASSUNG: Kachelgröße (Map bleibt gleich groß wie jetzt!) */
    grid-template-columns: repeat(7, 40px);
    grid-template-rows: repeat(7, 40px);

    gap: 4px;
    justify-content: center;
    padding: 0.4rem;
}

.tile {
    width: 40px;
    height: 40px;
    border-radius: 0.6rem;
    background: #020617;
    border: 1px solid #020617;
    opacity: 0.25;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        opacity 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

.tile.revealed {
    opacity: 0.9;
    background: #111827;
    border-color: #1f2937;
}

.tile.visited {
    background: #1f2937;
    border-color: #4b5563;
}

.tile.current {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
}

/* Typ-Icons */
.tile-start::after { content: "S"; color: #facc15; font-weight: 600; }
.tile-wald::after { content: "🌲"; }
.tile-ruine::after { content: "🏚"; }
.tile-dorf::after { content: "🏘"; }
.tile-special::after { content: "★"; color: #38bdf8; }

/* ===========================
   DIALOG / ENTSCHEIDUNGEN
   =========================== */

#dialog-panel {
    width: 100%;
    max-width: 1000px;      /* << gleiche Breite wie Map */
    background: #020617;
    border-radius: 0.75rem;
    border: 1px solid #1f2937;
    padding: 0.6rem 0.9rem;
}

#dialogTitle {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

#dialogText {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Entscheidungs-Buttons */
#dialogOptions button {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #1f2937;
    background: #0f172a;
    color: #e5e7eb;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

#dialogOptions button:hover {
    border-color: #38bdf8;
}

#dialogOptions button:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

#dialogOptions button:active {
    transform: translateY(1px);
}

/* ===========================
   GAME-OVER-OVERLAY
   =========================== */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay.hidden {
    display: none;
}

.dialog {
    background: #020617;
    border-radius: 1rem;
    border: 1px solid #1f2937;
    padding: 1rem 1.25rem;
    max-width: 420px;
    width: 90%;
}

/* ===========================
   RESPONSIVE-OPTIMIERUNG
   =========================== */

@media (max-width: 1000px) {
    .layout {
        flex-direction: column;
        align-items: stretch;
    }

    #center-section { order: 1; }
    #char-section { order: 2; }
    #log-section { order: 3; }

    #char-section,
    #log-section {
        max-width: none;
    }

    #map-section,
    #dialog-panel {
        max-width: 100%;
    }
}
/* ==========================================
   DIALOG: Zwei-Spalten Layout für Optionen
========================================== */

#dialogOptions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

/* Linke Seite = normale Buttons */
#dialogOptionsLeft {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Rechte Seite = kompakte Icon-Buttons */
/* Rechte Seite: zwei Spalten nebeneinander */
#dialogOptionsRight {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
}

/* Linke Spalte im rechten Bereich: statische Buttons */
#dialogOptionsRightStatic,
#dialogOptionsRightDynamic {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}


/* Icon-Buttons */
.dialog-icon-btn {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    border-radius: 0.6rem;
    background: #0f172a;
    border: 1px solid #1f2937;
    color: #e5e7eb;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: border-color 0.15s ease, transform 0.1s ease;
}

.dialog-icon-btn:hover {
    border-color: #38bdf8;
}

.dialog-icon-btn:active {
    transform: scale(0.95);
}

/* Linke Buttons bleiben wie bisher, nur extra Abstand */
#dialogOptionsLeft button {
    margin-bottom: 0.20rem;
}
/* ===========================
   DEV TOOLS OVERLAY
=========================== */

#devTools {
    position: fixed;
    top: 10px;
    left: 10px;

    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #1f2937;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;

    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    z-index: 9999;
    width: 130px;

    transition: opacity 0.2s ease, transform 0.2s ease;
}

#devTools.dev-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-15px);
}

#devTools h3 {
    margin: 0;
    font-size: 0.9rem;
    color: #38bdf8;
}

.dev-row {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

#devTools button {
    flex: 1;
    padding: 0.3rem;
    font-size: 0.8rem;
    color: #e5e7eb;
    background: #0f172a;
    border: 1px solid #1f2937;
    border-radius: 0.25rem;
    cursor: pointer;
}

#devTools button:hover {
    border-color: #38bdf8;
}

.dev-hint {
    font-size: 0.7rem;
    opacity: 0.6;
    text-align: center;
}
.icon-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #1f2937 !important;
}
/* ==========================================
   LOGIN OVERLAY
========================================== */
#loginOverlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.95); /* Darker than the game */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

#loginBox {
    background: #020617;
    border: 1px solid #1f2937;
    border-radius: 1rem;
    padding: 2rem 2rem;
    width: 320px;
    text-align: center;
    box-shadow: 0 0 20px rgba(56,189,248,0.15);
}

#loginBox h2 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

#loginBox p {
    color: #9ca3af;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

#loginNameInput {
    width: 100%;
    padding: 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid #1f2937;
    background: #0f172a;
    color: #e5e7eb;
    margin-bottom: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
}

#loginStartBtn {
    width: 100%;
    padding: 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid #1f2937;
    background: #1e293b;
    color: #e5e7eb;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

#loginStartBtn:hover {
    border-color: #38bdf8;
}
#devTools {
    z-index: 100000 !important; /* höher als Login */
}