/* css/style.css */

/**
 * ZENTRALE CSS-DATEI für WolfsWorld
 *
 * Enthält NUR globale UI-Komponenten und Utilities.
 * Layout wird über die Layout-CSS-Dateien gesteuert:
 *   - css/layouts/viewport-split.css  (Games mit Sidebar)
 *   - css/layouts/viewport-full.css   (Playgrounds)
 *   - css/layouts/scroll-content.css  (Lernpfade)
 *   - css/game-menu.css              (Menü-Seiten)
 *
 * Design Tokens: siehe css/tokens.css (kanonische Quelle)
 * Siehe: docs/conventions/ENGINEERING_CONVENTIONS.md Abschnitt 9
 */

/* ============================================ */
/* BODY RESET (nur Basis, kein Layout)          */
/* ============================================ */

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
}

/* Layout-Eigenschaften (height, overflow, display, flex-direction)
   werden jetzt durch die jeweilige Layout-CSS-Datei gesteuert:
   - .viewport-split  → viewport-split.css
   - .viewport-full   → viewport-full.css
   - .scroll-content  → scroll-content.css
   - .scroll-menu     → game-menu.css
*/

/* --- UI Komponenten --- */

.control-section {
    background: var(--color-bg-light, #f8f9fa);
    padding: var(--space-md, 15px);
    border-radius: var(--border-radius, 6px);
    border: 1px solid var(--color-border-light, #eee);
}

.viz-label {
    display: block;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.viz-select, .viz-input {
    width: 100%;
    padding: var(--space-sm, 8px);
    border: 1px solid var(--color-border, #ccc);
    border-radius: var(--border-radius, 4px);
    background: var(--color-surface, white);
    font-size: var(--font-size-base, 1rem);
    box-sizing: border-box;
}

/* Buttons */
.viz-btn {
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-block;
    transition: filter 0.2s;
    text-align: center;
}
.viz-btn:hover { filter: brightness(90%); }
.viz-btn:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(1); }

.btn-back { 
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.5); 
    color: var(--color-text-inverse, #fff); 
    padding: var(--space-sm, 8px) 14px; 
    font-size: var(--font-size-sm, 0.85rem);
    border-radius: var(--border-radius, 4px);
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
}
.btn-back:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.8);
}
.btn-action { background: var(--accent-blue); color: white; width: 100%; }
.btn-restart { background: var(--accent-yellow); color: #333; width: 100%; }
.btn-danger { background: var(--accent-red); color: white; width: 100%; }

/* Stats Display */
.stats-display {
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--text-main);
}

/* Canvas Styling */
canvas {
    background: var(--color-surface, white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: var(--border-radius, 4px);
    /* Damit es nicht riesig wird: */
    max-width: 95%;
    max-height: 95%;
}

/* ============================================ */
/* LAB COMPONENTS (arena, rules-lab)            */
/* ============================================ */

.col-tree {
    background: var(--color-surface, white);
    border-radius: var(--border-radius-lg, 8px);
    box-shadow: 0 2px 10px var(--color-shadow, rgba(0,0,0,0.05));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border, #dfe6e9);
}

.panel-header {
    padding: var(--space-md, 12px);
    font-weight: bold;
    color: var(--color-text, var(--text-main));
    border-bottom: 2px solid var(--color-bg, #f0f2f5);
    background: var(--color-bg-light, #fafafa);
    display: flex;
    align-items: center;
    gap: var(--space-sm, 10px);
}

/* Game Card (Lab-Kontext: Arena col-game) */
.game-card {
    background: var(--color-surface, white);
    padding: var(--space-sm, 10px);
    border-radius: var(--border-radius-lg, 8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* View Controls (3D view toggle in Arena) */
.view-controls {
    display: flex;
    gap: 5px;
    margin-bottom: var(--space-sm, 10px);
    background: var(--color-bg, #ecf0f1);
    padding: 4px;
    border-radius: var(--border-radius, 4px);
}

.view-btn {
    padding: 4px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-radius: 3px;
}

.view-btn.active {
    background: var(--color-surface, white);
    color: var(--color-primary, var(--accent-blue));
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Log-Box (Arena) */
.log-box {
    background: var(--color-text, #2c3e50);
    color: var(--color-bg, #ecf0f1);
    width: 100%;
    flex: 1;
    border-radius: var(--border-radius-lg, 8px);
    padding: var(--space-sm, 10px);
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-sm, 0.85rem);
    overflow-y: auto;
    border: 1px solid #34495e;
}

.log-line { 
    margin-bottom: 4px; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
}

/* ============================================ */
/* UTILITY CLASSES */
/* ============================================ */

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

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

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

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

.full-width {
    width: 100%;
}

.hidden {
    display: none !important;
}