/* =========================================
   MONGOTV: CLEAN RETRO DESIGN (V12)
   ========================================= */
:root {
    --bg-body: #1a252c;       /* Mørk slate baggrund */
    --bg-container: #24343d;  /* Lidt lysere til paneler */
    --border-yellow: #f39c12; /* Den flotte gule accent */
    --text-main: #ecf0f1;
    --stat-teal: #1abc9c;     /* Turkis til stats */
    
    /* Knap-farver */
    --btn-blue: #3498db;  --btn-blue-hover: #2980b9;
    --btn-orange: #e67e22; --btn-orange-hover: #d35400;
    --btn-green: #2ecc71;  --btn-green-hover: #27ae60;
    --btn-purple: #9b59b6; --btn-purple-hover: #8e44ad;
    --btn-red: #e74c3c;    --btn-red-hover: #c0392b;
}

* { box-sizing: border-box; }

/* Typografi & Hjælpere */
h1, h2, h3 { margin-top: 0; font-family: 'Courier New', Courier, monospace; }
.text-danger { color: #ff6b6b !important; }
.text-success { color: #51cf66 !important; }
.text-primary { color: var(--border-yellow) !important; }

/* Header & Tabs */
.mongo-retro-header { text-align: center; padding: 15px; background-color: var(--bg-body); border-bottom: 2px solid var(--border-yellow); }
.retro-title-area h1 { color: var(--border-yellow); font-size: 2.2em; margin: 5px 0; }
.mongo-retro-header p { color: var(--text-main); font-size: 1.1em; margin: 5px 0 10px 0; }

.mongo-tabs { display: flex; background: var(--bg-body); border-bottom: 2px solid var(--border-yellow); }
.tab-btn { flex: 1; padding: 15px; background: none; border: none; color: #95a5a6; font-size: 1.2em; font-weight: bold; cursor: pointer; transition: 0.2s; }
.tab-btn:hover { color: white; background: rgba(255,255,255,0.05); }
.tab-btn.active { background: var(--bg-container); color: var(--border-yellow); border-bottom: 3px solid var(--border-yellow); }

/* Layout: Sidebar og Content */
.content-area { display: flex; flex: 1; overflow: hidden; background: var(--bg-container);}
.game-sidebar { width: 320px; background: var(--bg-body); border-right: 2px solid var(--border-yellow); padding: 20px; overflow-y: auto; }
.tab-view { flex: 1; padding: 25px; overflow-y: auto; display: none; }
.tab-view.active { display: flex; flex-direction: column; }

/* Stats Kasser */
.stat-group { margin-bottom: 25px; }
.stat-group h3 { color: var(--border-yellow); border-bottom: 1px dashed var(--border-yellow); padding-bottom: 5px; }
.stat-item { background-color: rgba(0,0,0,0.3); padding: 12px; border-radius: 6px; margin-bottom: 12px; border-left: 4px solid var(--stat-teal); }
.stat-flex { display: flex; justify-content: space-between; font-weight: bold; font-size: 1.1em; color: white; }
.stat-flex span:last-child { color: var(--stat-teal); font-size: 1.2em; }
.progress-bar { width: 100%; height: 10px; background: #000; border-radius: 5px; margin-top: 8px; overflow: hidden; }
.progress-fill { height: 100%; transition: 0.3s; background: var(--stat-teal); }

/* Story & Events */
.phase-header { color: var(--border-yellow); border-bottom: 2px solid var(--border-yellow); padding-bottom: 10px; }
.story-text { font-size: 1.15em; line-height: 1.6; margin-bottom: 20px; color: #ecf0f1; min-height: 100px;}
.outcome-box { background-color: rgba(0,0,0,0.5); border-left: 4px solid var(--border-yellow); padding: 15px; margin-bottom: 20px; color: #f1c40f; display: none; font-style: italic;}

/* Action Knapper (Dynamiske) */
.old-school-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: auto; margin-bottom: 20px;}
.btn-action { color: white; border: none; padding: 20px 15px; font-size: 1.1em; cursor: pointer; border-radius: 6px; font-weight: bold; transition: 0.2s; display: flex; flex-direction: column; align-items: center; }
.btn-action:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-action strong { font-size: 1.1em; margin-bottom: 5px; }
.btn-action span { font-size: 0.85em; opacity: 0.9; font-weight: normal; }

/* Farve-klasser til JS */
.btn-color-blue { background-color: var(--btn-blue); border-bottom: 4px solid var(--btn-blue-hover); }
.btn-color-orange { background-color: var(--btn-orange); border-bottom: 4px solid var(--btn-orange-hover); }
.btn-color-red { background-color: var(--btn-red); border-bottom: 4px solid var(--btn-red-hover); }
.btn-color-purple { background-color: var(--btn-purple); border-bottom: 4px solid var(--btn-purple-hover); }

/* Faste Knapper (Bund) */
.fixed-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; border-top: 2px dashed #7f8c8d; padding-top: 20px; }
.btn-fixed { border: none; padding: 15px; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; font-size: 1em; transition: 0.2s; }
.btn-fixed:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }
.btn-fixed:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-eat { background-color: var(--btn-green); border-bottom: 4px solid var(--btn-green-hover); }
.btn-soda { background-color: var(--btn-orange); border-bottom: 4px solid var(--btn-orange-hover); }
.btn-sleep { background-color: var(--btn-purple); border-bottom: 4px solid var(--btn-purple-hover); }

/* Shop & Bank */
.old-school-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.shop-item { background: var(--bg-body); border: 2px solid var(--border-yellow); padding: 20px; border-radius: 8px; text-align: center; }
.shop-item h3 { color: var(--border-yellow); }
.btn-shop-buy, .btn-danger-flat, .btn-success-flat { width: 100%; border: none; padding: 15px; color: white; font-weight: bold; border-radius: 6px; cursor: pointer; font-size: 1.1em; transition: 0.2s; }
.btn-shop-buy { background-color: var(--btn-blue); border-bottom: 4px solid var(--btn-blue-hover); }
.btn-danger-flat { background-color: var(--btn-red); border-bottom: 4px solid var(--btn-red-hover); }
.btn-success-flat { background-color: var(--btn-green); border-bottom: 4px solid var(--btn-green-hover); }

/* Advarsel & Overlay */
.critical-alert { background-color: var(--btn-red); color: white; padding: 10px; font-weight: bold; border-radius: 5px; display: none; text-transform: uppercase; animation: flash 1s infinite; }
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); flex-direction: column; justify-content: center; align-items: center; z-index: 1000; }
.overlay h2 { font-size: 4em; color: var(--btn-red); }
.overlay button { padding: 15px 40px; font-size: 1.2em; background: var(--border-yellow); border: none; font-weight: bold; cursor: pointer; border-radius: 6px; }