/* --- General Body and Layout --- */
body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column; /* Keep column for overall page structure */
    align-items: center;
    background-color: #f0f8ff; /* Light blue background */
    color: #333;
    min-height: 100vh; /* Ensure body takes full height */
    margin: 0; /* Remove default body margin */
}

h1, h2 {
    color: #007bff; /* Blue Archive-ish blue */
    text-align: center;
}

h1 {
    margin-top: 10px;
    margin-bottom: 15px;
}

.main-container {
    display: flex;
    justify-content: space-between; /* Space out panels */
    width: 95%;
    max-width: 1600px; /* Increased max-width for potentially wider layout */
    flex-grow: 1; /* Allow container to grow */
    gap: 15px; /* Gap between panels */
}

.side-panel {
    border: 1px solid #add8e6;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    max-height: 85vh; /* Adjusted max height slightly */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

.center-panel {
    flex: 1 1 50%; /* Adjusted middle panel size */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Gap between sections in the center */
}

/* --- Center Panel Sections --- */
.resource-display,
.arona-section,
.gacha-section,
.upgrade-display { /* upgrade-display now shows Gacha upgrades */
    width: auto; /* Override previous width */
    max-width: none; /* Override previous max-width */
    margin: 0; /* Reset margin */
    background-color: #fff;
    border: 1px solid #add8e6;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.resource-display {
    line-height: 1.7; /* Increased line spacing for new resources */
}
.resource-display hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 8px 0;
}

/* --- Buttons --- */
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px 0; /* Adjusted margin */
    transition: background-color 0.2s ease;
    font-size: 1em; /* Ensure consistent base font size */
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}

button:hover:not(:disabled) {
    background-color: #0056b3;
}

button.small-btn { /* Style for smaller buttons like 'Buy Food' */
    padding: 3px 8px;
    font-size: 0.85em;
    margin-left: 10px;
    vertical-align: middle;
}


/* --- Arona Section --- */
#arona-img {
    display: block;
    margin: 10px auto;
    border-radius: 50%; /* Make it circular */
    border: 3px solid #007bff;
}

/* --- Gacha Section --- */
#pull-results {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Slightly wider items */
    gap: 10px;
    min-height: 70px; /* Adjusted min-height */
    padding: 10px;
    background-color: #e9f5ff;
    border-radius: 5px;
}

.pull-item {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 5px; /* Adjusted padding */
    text-align: center;
    font-size: 0.9em;
    min-height: 70px; /* Adjusted min-height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Default */
    word-wrap: break-word;
}

.pull-item small.perk-info {
    display: block;
    margin-top: 4px;
    font-size: 0.8em;
    color: #006400;
    font-style: italic;
}

/* Pull Item Rarity Styles */
.rarity-1 { border-color: #a0a0a0; background-color: #f0f0f0; }
.rarity-2 { border-color: #ffd700; background-color: #fffacd; font-weight: bold; }
.rarity-3 { border-color: #ff69b4; background-color: #ffebf5; font-weight: bold; box-shadow: 0 0 5px #ff69b4; }
.rarity-upgrade { border-color: #00ff00; background-color: #e6ffe6; font-weight: bold; box-shadow: 0 0 5px #00ff00; }


/* --- Feedback Area (Temporary Messages) --- */
.feedback {
    margin-top: 10px;
    font-style: italic;
    color: #555;
    min-height: 1.2em; /* Prevent layout shifts */
    text-align: center;
}
@keyframes feedback-fade { from { opacity: 1; } to { opacity: 0; } }
.feedback-animate { animation: feedback-fade 2s forwards; }


/* --- Gacha Upgrade Display List --- */
#upgrade-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 5px;
}
#upgrade-list li { margin-bottom: 5px; font-size: 0.9em; }


/* --- Left Panel: Student Management --- */
#student-management {
    flex: 1 1 28%; /* Give it a bit more space */
    background-color: #e9f5ff;
    border-color: #add8e6;
}
#student-management h2 { color: #0056b3; flex-shrink: 0; margin-bottom: 10px;}

#student-list-detailed { /* Container for the detailed student cards */
    flex-grow: 1;
    overflow-y: auto; /* Scroll this list */
    padding-right: 5px; /* Space for scrollbar */
    margin-top: 5px;
}

.student-card {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px; /* More spacing between cards */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Rarity indicator border */
.student-card.rarity-1 { border-left: 5px solid #a0a0a0; }
.student-card.rarity-2 { border-left: 5px solid #ffd700; }
.student-card.rarity-3 { border-left: 5px solid #ff69b4; }


.student-card-header {
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
    color: #333;
}
.student-card-header .student-level {
    font-size: 0.9em;
    font-weight: normal;
    color: #555;
    margin-left: 8px;
}

.student-card-body {
    font-size: 0.9em;
    color: #333;
    line-height: 1.4;
}
.student-card-body .status {
    font-style: italic;
    display: block; /* Put status on its own line */
    margin-top: 4px;
}
.student-card-body .status.needs-treat {
    color: #dc3545; /* Red for needing treat */
    font-weight: bold;
}
.student-card-body .status.active {
    color: #28a745; /* Green for active */
}

.student-card-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}
.student-card-actions button {
    flex-grow: 1; /* Make buttons share space */
    padding: 5px 10px;
    font-size: 0.9em;
    border-radius: 4px; /* Slightly smaller radius */
}
.treat-button {
    background-color: #ffc107; /* Yellow/Gold */
    color: #333;
}
.treat-button:hover:not(:disabled) {
    background-color: #e0a800;
}
.upgrade-button {
    background-color: #28a745; /* Green */
}
.upgrade-button:hover:not(:disabled) {
    background-color: #218838;
}


/* --- Right Panel: Event Log --- */
#log-panel {
    flex: 1 1 22%; /* Adjusted size */
    background-color: #f8f9fa;
    border-color: #dee2e6;
}
#log-panel h2 { color: #495057; flex-shrink: 0; margin-bottom: 10px;}

#log-list {
    list-style-type: none;
    padding: 0 5px 0 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto; /* Scroll the list */
    font-size: 0.9em;
    border-top: 1px solid #e9ecef;
    padding-top: 10px;
}

#log-list li {
    margin-bottom: 8px;
    padding-bottom: 6px; /* Slightly more padding */
    border-bottom: 1px dashed #e0e0e0;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Speaker Name Styles */
#log-list li strong {
    color: #007bff; /* Default blue */
    margin-right: 5px;
}
#log-list li strong.speaker-yuuka { color: #6f42c1; } /* Purple */
#log-list li strong.speaker-arona { color: #ff69b4; } /* Pink */
#log-list li strong.speaker-system { color: #6c757d; } /* Grey */
/* Add more specific student speaker colors if desired */
/* Example: #log-list li strong.speaker-hoshino { color: #someColor; } */