/* ========================================== */
/* 1. BASE TYPOGRAPHY & GENERAL STYLES        */
/* ========================================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    text-align: center;
    padding: 50px;
}

h1, h2 {
    color: #2c3e50;
}

hr { border: 0; height: 1px; background: #bdc3c7; margin: 20px 0; }
small { color: #7f8c8d; display: block; margin-top: 10px; }

/* ========================================== */
/* 2. BUTTONS & INPUTS                        */
/* ========================================== */
input {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
}

button {
    padding: 12px 24px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.start-btn { background-color: #27ae60; color: white; }
.start-btn:hover { background-color: #219150; }

.action-btn { background-color: #2980b9; color: white; font-size: 1.1em; }
.action-btn:hover { background-color: #2471a3; }

.choice-btn { background-color: #8e44ad; color: white; }
.choice-btn:hover { background-color: #732d91; }

/* ========================================== */
/* 3. DASHBOARDS & HUD                        */
/* ========================================== */
.dashboard {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: left;
}

.dashboard p {
    font-size: 1.1em;
    margin: 10px 0;
}

#fixed-hud {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    border: 3px solid #f39c12; 
    border-radius: 8px;        
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.4); 
    text-align: right;
    z-index: 2000; 
    min-width: 180px;
}

#fixed-hud p {
    margin: 5px 0;
    font-size: 1em;
}

.hud-section.operations {
    border-top: 1px solid #7f8c8d;
    margin-top: 10px;
    padding-top: 10px;
    color: #ecf0f1;
    font-size: 0.9em;
}

#workshop-section {
    border-top: 4px solid #34495e;
    background-color: #ecf0f1;
    padding: 15px;
    border-radius: 8px;
}

#workshop-controls { margin: 20px 0; }

/* ========================================== */
/* 4. ACTIVITY FEED & GAME LAYOUT             */
/* ========================================== */
.game-layout {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 30px auto;
    align-items: stretch;
}

#activity-feed {
    width: 280px;
    min-width: 280px;
    background-color: white;
    border-radius: 12px;
    border: 3px solid #bdc3c7;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    padding: 15px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

#feed-content {
    flex-grow: 1;
    overflow-y: hidden; 
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 5px; 
}

.feed-msg {
    font-size: 0.9em;
    padding: 8px;
    background-color: #f8f9fa;
    border-left: 3px solid #3498db;
    border-radius: 4px;
    animation: slideDown 0.3s ease-out;
    transition: opacity 0.3s ease; 
}

.feed-msg:nth-child(4) { opacity: 0.7; }
.feed-msg:nth-child(5) { opacity: 0.4; }
.feed-msg:nth-child(6) { opacity: 0.15; }

.feed-msg.return { border-left-color: #f39c12; background-color: #fdf5e6; }
.feed-msg.sale { border-left-color: #27ae60; background-color: #e9f7ef; }
.feed-msg.retire { border-left-color: #e74c3c; background-color: #fdedec; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================== */
/* 5. THE CAMPUS MAP UI                       */
/* ========================================== */
#campus-map {
    position: relative;
    margin: 0;
    flex-grow: 1; 
    aspect-ratio: 16 / 10; 
    background-image: url('campus-map.png'); 
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    border: 3px solid #bdc3c7;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    overflow: hidden;
}

.building {
    position: absolute;
    background-color: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.building.unlocked:hover { 
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.building.locked {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: not-allowed;
}

#bldg-garage { top: 89.5%; left: 5.5%; width: 14%; height: 5.5%; }
#bldg-logistics { top: 15.5%; left: 12.5%; width: 12%; height: 5%; }
#bldg-sales { top: 77%; left: 76.5%; width: 13.5%; height: 5%; }
#bldg-innovation { top: 6.5%; left: 49%; width: 18.5%; height: 5%; }
#bldg-bank { top: 45%; left: 32%; width: 15%; height: 6%; } 

/* ========================================== */
/* 6. MODALS & OVERLAYS                       */
/* ========================================== */
.modal-overlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(44, 62, 80, 0.6);
    backdrop-filter: blur(3px); 
    z-index: 1000;
}

.modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    z-index: 1001;
    width: 90%;
    max-width: 500px;
}

.close-btn {
    position: absolute;
    top: 15px; right: 15px;
    background: #e74c3c;
    color: white; padding: 5px 10px;
    border: none; border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.close-btn:hover { background: #c0392b; }

/* ========================================== */
/* 7. EVENT SCREENS & STORY FORMATTING        */
/* ========================================== */
.story {
    font-size: 1.1em;
    color: #34495e; 
    background-color: #eaf2f8;
    padding: 20px 25px;
    margin: 0 auto 30px auto;
    max-width: 600px;
    border-left: 5px solid #2980b9; 
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); 
    text-align: left;
    line-height: 1.6;
}

.event-screen {
    background-color: #fff3cd;
    border: 2px solid #ffeeba;
    border-radius: 8px;
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
}

.game-over-theme {
    background-color: #fdedec;
    border-color: #e74c3c;
}

.choices {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    animation: safeLoad 1s ease-in-out;
}

@keyframes safeLoad {
    0% { pointer-events: none; opacity: 0; }
    50% { pointer-events: none; opacity: 0.5; }
    100% { pointer-events: auto; opacity: 1; }
}

.character-dialogue {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 20px; text-align: left;
    background-color: white; padding: 15px;
    border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.avatar {
    width: 120px; height: 120px; border-radius: 50%; 
    object-fit: cover; border: 3px solid #bdc3c7;
}

.character-dialogue p { margin: 0; font-size: 1.1em; }