:root {
    --bg-color: #333;
    --panel-color: #f5f5f5;
    --primary: #2196f3;
}

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

.game-container {
    background-color: white;
    width: 100%;
    max-width: 450px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 25px rgba(0,0,0,0.7);
}

/* --- HEADER --- */
.top-bar {
    background: #263238;
    color: white;
    padding-bottom: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 20;
}

.stats-header {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    text-align: center;
    padding: 10px;
}

.stat-label { font-size: 0.7rem; opacity: 0.7; display: block; }
.stat-val { font-family: 'Fredoka One', cursive; font-size: 1.1rem; }
.income .stat-val { color: #81c784; }
.expenses .stat-val { color: #e57373; }
.balance .stat-val { color: #fff176; font-size: 1.4rem; }

.news-ticker {
    background: #37474f;
    color: #ffd54f;
    font-size: 0.9rem;
    padding: 4px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    font-style: italic;
    border-top: 1px solid #455a64;
}

/* --- KARTE --- */
.map-area {
    flex: 1;
    background: linear-gradient(to bottom, #90caf9 0%, #a5d6a7 100%);
    position: relative;
    overflow: hidden;
}

.land {
    width: 100%;
    height: 100%;
    position: relative;
}

/* --- ENTITIES --- */
.entity {
    position: absolute;
    font-size: 2rem;
    transition: all 0.5s ease;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
}

.worker::after { content: "👷"; }
.pensioner::after { content: "👴"; }
.unemployed::after { content: "🧍"; filter: grayscale(1); }

/* Status Indikatoren (klein über dem Kopf) */
.entity[data-mood="happy"]::before { content: "❤️"; position: absolute; top:-10px; font-size: 0.8rem; animation: float 1s infinite; }
.entity[data-mood="sad"]::before { content: "⛈️"; position: absolute; top:-10px; font-size: 0.8rem; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- MODAL (POPUP) --- */
.modal {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: opacity 0.3s;
}
.modal.hidden { opacity: 0; pointer-events: none; }

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border: 4px solid #ff9800;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn { from { transform: scale(0.5); } to { transform: scale(1); } }

.modal h3 { margin: 0 0 10px 0; color: #d84315; font-family: 'Fredoka One'; }
.modal-cost { font-weight: bold; color: #d32f2f; margin: 15px 0; font-size: 1.2rem; }

.modal-buttons { display: flex; gap: 10px; justify-content: center; }
.modal-btn {
    border: none; padding: 10px 20px; border-radius: 8px;
    font-weight: bold; font-size: 1rem; cursor: pointer;
}
.modal-btn.yes { background: #4caf50; color: white; }
.modal-btn.no { background: #cfd8dc; color: #333; }
.modal-btn:active { transform: scale(0.95); }

/* --- CONTROLS --- */
.controls-area {
    background: var(--panel-color);
    padding: 15px;
    border-top: 4px solid #795548;
}

h2 { margin: 0 0 15px 0; text-align: center; color: #5d4037; font-family: 'Fredoka One'; font-size: 1.2rem; }

.control-row {
    background: white;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.label { font-weight: bold; font-size: 0.9rem; display: block; margin-bottom: 5px; }

.buttons { display: flex; align-items: center; gap: 10px; }
.btn {
    border: none; width: 40px; height: 40px; border-radius: 50%;
    font-size: 1.5rem; color: white; cursor: pointer;
}
.plus { background: #4caf50; }
.minus { background: #f44336; }

.bar-container { flex: 1; height: 10px; background: #eee; border-radius: 5px; overflow: hidden; }
.bar { height: 100%; background: #ff9800; transition: width 0.3s; }