:root {
    --bg-dark: #0a0b10;
    --panel: rgba(25, 27, 38, 0.85);
    --neon-purple: #bc13fe;
    --neon-green: #39ff14;
    --text: #e0e0e0;
}

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

.ui-panel {
    background: var(--panel);
    backdrop-filter: blur(10px);
    border: 1px solid var(--neon-purple);
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(188, 19, 254, 0.3);
    padding: 20px;
}

.stat-value {
    color: var(--neon-green);
    font-weight: bold;
    text-shadow: 0 0 5px var(--neon-green);
}

button {
    background: transparent;
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.3s;
	height:100%
}

button:hover {
    background: var(--neon-green);
    color: black;
}

/* Dynamische Hintergründe */
.scene-GROW {
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../assets/bg/growroom.jpg');
    background-size: cover;
}

.scene-CLUB {
    background-image: url('../assets/bg/clubhouse.jpg');
    background-size: cover;
}

/* Strain-Icons im Menü */
.strain-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--neon-purple);
}
button {
    background: rgba(57, 255, 20, 0.05); /* Dezenter Glow-Hintergrund */
    border: 2px solid var(--neon-green);
    color: var(--neon-green);
    
    /* Die Lösung für schmale Buttons: */
    min-width: 160px;          /* Mindestbreite, damit es griffig bleibt */
    padding: 14px 28px;        /* Mehr Innenabstand für Höhe und Breite */
    margin: 8px;               /* Abstand zwischen den Buttons */
    
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;        /* Leicht abgerundet für modernen Look */
    box-shadow: 0 0 5px rgba(57, 255, 20, 0.2);
}

button:hover {
    background: var(--neon-green);
    color: black;
    box-shadow: 0 0 20px var(--neon-green);
    transform: translateY(-2px); /* Kleiner "Lift-Effekt" beim Drüberfahren */
}

button:active {
    transform: translateY(1px);  /* Feedback beim Klicken */
}

/* Navigations-Leiste optimieren */
.nav-bar {
    display: flex;
    flex-wrap: wrap;           /* Buttons brechen um, wenn der Platz nicht reicht */
    justify-content: center;   /* Zentriert die breiten Buttons */
    gap: 10px;
    padding: 20px;
}