@import url("fonts.css");

/* 1. Variablen & Framework-Sync */
:root {
    /* Primärfarbe: Ein edles Gold für RPG-Feeling */
    --brand-gold: #d4af37;
    --brand-gold-glow: rgba(212, 175, 55, 0.3);
    --danger-red: #8b0000;
    
    /* Hintergrund-Ebenen */
    --bg-dark-900: #0a0a0c; /* Tiefschwarz für den Hintergrund */
    --bg-dark-800: #16161a; /* Panels & Karten */
    --bg-dark-700: #1f1f23; /* Hover-Effekte */
    
    /* Schriften */
    --font-main: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
    --font-heading: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
}

/* 2. Web Awesome / Shoelace "Deep Theming" */
.wa-theme-dark {
    --wa-color-primary-600: var(--brand-gold);
    --wa-input-border-radius: 4px;
    --wa-card-border-color: var(--bg-dark-700);
}

/* 3. Grund-Layout */
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark-900);
    color: #e0e0e0;
    font-family: var(--font-main);
    overflow: hidden; /* Verhindert Scrollen der ganzen Seite (gut für UIs) */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(120, 90, 180, 0.0),
        rgba(10, 8, 25, 0.0)
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 9999;
}

body.enter-game::after {
    opacity: 1;
    background: radial-gradient(
        circle at center,
        rgba(120, 90, 180, 0.35),
        rgba(10, 8, 25, 0.95)
    );
}


/* 4. Das Game-Grid (Dashboard Layout) */
.game-container {
    display: grid;
    grid-template-columns: 280px 1fr 320px; /* Sidebar | Main | Chat/Stats */
    grid-template-rows: 60px 1fr;         /* Topbar | Inhalt */
    height: 100vh;
    gap: 4px; /* Kleine "Spalten" zwischen den Panels */
    background-color: #000; /* Rahmen-Farbe durch Gap */
}

.topbar {
    grid-column: 1 / -1;
    background: var(--bg-dark-800);
    border-bottom: 1px solid var(--bg-dark-700);
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
}

.sidebar, .right-panel {
    background: var(--bg-dark-800);
    padding: 15px;
    overflow-y: auto;
}

.main-content {
    background: radial-gradient(circle at center, #1a1a20 0%, #0a0a0c 100%);
    overflow-y: auto;
    padding: 20px;
    position: relative;
}

/* 5. RPG-Spezifische Klassen */
.rpg-panel {
    border: 1px solid var(--bg-dark-700);
    background: rgba(22, 22, 26, 0.8);
    backdrop-filter: blur(10px); /* Glas-Effekt für moderne UIs */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.text-gold { color: var(--brand-gold); text-shadow: 0 0 5px var(--brand-gold-glow); }

/* Scrollbar Styling für den "Gaming-Look" */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark-900); }
::-webkit-scrollbar-thumb { background: var(--bg-dark-700); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-gold); }


/* Mobile Navigation (unten fixiert) */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        background: var(--bg-dark-800);
        border-top: 1px solid var(--brand-gold);
    }
}