body {
    font-family: 'Cinzel', serif;
    display: flex;
    flex-direction: column; /* Ensure vertical flow */
    align-items: stretch; /* Children like footer can span full width */
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-attachment: fixed; /* Keep gradient fixed during scroll */
    margin: 0; /* Remove default browser margin */
    padding: 20px;
    box-sizing: border-box;
    color: #e0e0e0; /* Light default text color */
}

#app-header {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #555555; /* Accent color border */
    display: flex; /* Make it a flex container */
    justify-content: space-between; /* REVERTED to space-between for index.html */
    align-items: center; /* REVERTED for index.html */
}

#app-logo {
    height: 60px; /* hoặc kích thước mong muốn */
    width: auto;
}

#app-header h1 {
    font-size: 2.8em;
    color: #f5f5f5; /* Bright white for main title */
    margin: 0; /* Remove default h1 margin */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-family: 'Cinzel', serif;
    /* flex-grow: 1; /* Allow title to take up space if needed, but might push user info too far */
}

#game-container {
    background: rgba(0, 0, 0, 0.6); /* Match AI mode container background */
    backdrop-filter: blur(15px);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 900px;
    border: 1px solid rgba(74, 144, 226, 0.3); /* Blue border like AI mode */
    flex-grow: 1; /* Allows this container to take up available space */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    margin-top: 20px; /* Space from top */
    margin-bottom: 40px; /* Space before footer */
    display: none; /* Hide by default, JS will show it if authenticated */
}

h1, h2, h3 {
    font-family: 'Cinzel', serif;
    color: #f5f5f5; /* Brighter text for headings */
    text-align: center;
    margin-bottom: 15px;
}

/* Lobby Styling */
#lobby-view {
    background: rgba(255, 255, 255, 0.05); /* Match AI mode panel background */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    gap: 20px;
}

.lobby-main-content {
    flex: 2; /* Main content takes more space */
    min-width: 300px; /* Minimum width before wrapping */
}

#lobby-chat-container {
    flex: 1.5; /* Chat container takes a bit less than main content */
    min-width: 250px; /* Minimum width before wrapping */
    background: rgba(0, 0, 0, 0.3); /* Match AI mode section background */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    display: flex;
    flex-direction: row; /* Three columns side by side */
    gap: 15px; /* Space between columns */
    margin-bottom: 20px; /* Add space below the chat container */
}

#recent-matches-section {
    flex: 1.2; /* Recent matches section - increased */
    display: flex;
    flex-direction: column;
}

#online-users-section {
    flex: 0.8; /* Online users section - reduced to 80% */
    display: flex;
    flex-direction: column;
}

#lobby-chat-section {
    flex: 1.7; /* Chat section - reduced size */
    display: flex;
    flex-direction: column;
}

#recent-matches-section h3,
#online-users-section h3,
#lobby-chat-section h3 {
    font-size: 1.4em;
    color: #4a90e2; /* Blue color like AI page */
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #555;
    padding-bottom: 8px;
}

/* Legacy support for existing h3 in lobby-chat-container */
#lobby-chat-container h3 {
    font-size: 1.4em;
    color: #4a90e2; /* Blue color like AI page */
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #555;
    padding-bottom: 8px;
}

#recent-matches-list {
    height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(74, 144, 226, 0.2);
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    flex-grow: 1;
    color: #e0e0e0;
    font-family: Arial, sans-serif; /* Font for Vietnamese support */
    scroll-behavior: smooth;
}

.recent-match-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
}

.recent-match-item:last-child {
    margin-bottom: 0;
}

.recent-match-info {
    flex-grow: 1;
}

.recent-match-name {
    font-weight: bold;
    color: #4a90e2;
    margin-bottom: 2px;
}

.recent-match-players {
    color: #c0c0c0;
    font-size: 0.9em;
    margin-bottom: 2px;
}

.recent-match-time {
    color: #888;
    font-size: 0.8em;
}

.recent-match-winner {
    color: #4CAF50; /* Green for winner */
}

.recent-match-loser {
    color: #f44336; /* Red for loser */
}

.view-review-btn {
    background-color: #4a90e2;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.2s;
    margin-left: 8px;
}

.view-review-btn:hover {
    background-color: #357abd;
}

/* Online Users Section Styling */
#online-users-list {
    height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(74, 144, 226, 0.2);
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    flex-grow: 1;
    color: #e0e0e0;
    font-family: Arial, sans-serif; /* Font for Vietnamese support */
    scroll-behavior: smooth;
}

.online-user-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.online-user-item:last-child {
    margin-bottom: 0;
}

.online-user-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.online-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid rgba(74, 144, 226, 0.3);
}

.online-user-info {
    flex-grow: 1;
}

.online-user-name {
    font-weight: bold;
    color: #4a90e2;
    margin-bottom: 2px;
}

.online-user-status {
    color: #c0c0c0;
    font-size: 0.8em;
}

.online-status-indicator {
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
    border-radius: 50%;
    margin-left: 8px;
}

#online-users-list::-webkit-scrollbar {
    width: 6px;
}

#online-users-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#online-users-list::-webkit-scrollbar-thumb {
    background: #4a90e2;
    border-radius: 3px;
}

#online-users-list::-webkit-scrollbar-thumb:hover {
    background: #357abd;
}

#lobby-messages {
    height: 300px; 
    overflow-y: auto;
    border: 1px solid rgba(74, 144, 226, 0.2);
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05); 
    flex-grow: 1; 
    color: #e0e0e0;
    font-family: Arial, sans-serif; /* Font for Vietnamese support */
    scroll-behavior: smooth;
}

/* Scrollbar styling for recent matches list */
#recent-matches-list::-webkit-scrollbar {
    width: 8px;
}

#recent-matches-list::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 8px;
}

#recent-matches-list::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 8px;
}

#recent-matches-list::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Scrollbar styling for lobby messages */
#lobby-messages::-webkit-scrollbar {
    width: 8px;
}

#lobby-messages::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 8px;
}

#lobby-messages::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 8px;
}

#lobby-messages::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.lobby-chat-input-area {
    display: flex;
    gap: 10px;
}

#lobbyChatInput {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid rgba(74, 144, 226, 0.3)555;
    border-radius: 8px;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    font-family: Arial, sans-serif; /* Font for Vietnamese support */
}
#lobbyChatInput::placeholder {
    color: #888888;
    font-family: Arial, sans-serif; /* Consistent font for placeholder */
}

#sendLobbyChatButton {
    padding: 10px 15px;
    font-size: 0.9em;
    /* Inherits general button styling (gold theme) */
}

.lobby-sidebar { /* This is the Top Players panel */
    flex: 1; /* Sidebar takes least space */
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    min-width: 200px; /* Minimum width before wrapping */
}

#lobby-leaderboard h2 {
    font-size: 1.6em;
    color: #4a90e2; /* Blue color like AI page */
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

#leaderboard-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#leaderboard-list li {
    padding: 8px 5px;
    border-bottom: 1px solid #444;
    font-size: 0.95em;
    color: #c0c0c0; /* Light grey for player names */
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

#leaderboard-list li:last-child {
    border-bottom: none;
}

#leaderboard-list li .leaderboard-rank {
    font-weight: bold;
    color: #357abd; /* Blue for rank */
    margin-right: 8px;
}

.leaderboard-avatar {
    width: 24px; /* Adjust size as needed */
    height: 24px;
    border-radius: 50%; /* Makes it circular */
    margin-right: 8px; /* Space between avatar and username */
    object-fit: cover; /* Ensures image covers the area well */
}

#leaderboard-list li .leaderboard-username {
    flex: 1;
    min-width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#leaderboard-list li .leaderboard-level {
    font-weight: bold;
    color: #4a90e2; /* Blue color for level */
    font-size: 0.9em;
}

#leaderboard-list li .leaderboard-winrate {
    font-weight: bold;
    color: #90ee90; /* Light green color for win rate */
    font-size: 0.85em;
}

#leaderboard-list li .leaderboard-exp {
    font-weight: bold;
    color: #87ceeb; /* Sky blue color for exp */
    font-size: 0.85em;
}

/* Special styling for top 3 players */
#leaderboard-list li.rank-1 {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05));
    border-left: 3px solid #4a90e2;
    box-shadow: 0 2px 5px rgba(74, 144, 226, 0.2);
}

#leaderboard-list li.rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(192, 192, 192, 0.05));
    border-left: 3px solid #c0c0c0;
    box-shadow: 0 2px 5px rgba(192, 192, 192, 0.2);
}

#leaderboard-list li.rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.05));
    border-left: 3px solid #cd7f32;
    box-shadow: 0 2px 5px rgba(205, 127, 50, 0.2);
}

#leaderboard-list li.rank-1 .leaderboard-rank,
#leaderboard-list li.rank-2 .leaderboard-rank,
#leaderboard-list li.rank-3 .leaderboard-rank {
    font-size: 1.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#leaderboard-list li.rank-1 .leaderboard-username {
    font-weight: bold;
    color: #4a90e2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#leaderboard-list li.rank-2 .leaderboard-username {
    font-weight: bold;
    color: #c0c0c0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#leaderboard-list li.rank-3 .leaderboard-username {
    font-weight: bold;
    color: #cd7f32;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#lobby-view h1 {
    font-size: 2.2em;
    color: #f5f5f5; /* Brighter blue for dark theme */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 15px;
}

#announcement-container {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #4a4a4a;
}

#announcement-marquee {
    color: #4a90e2; /* Blue color like AI page */
    font-family: 'Cinzel', serif; /* Same font as lobby */
    font-size: 1.1em;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 35px;
    line-height: 35px;
}

#announcement-text {
    display: inline-block;
    animation: marquee 25s linear infinite;
    padding-left: 100%;
}

.announcement-item {
    margin-right: 50px; /* Space between announcements */
}

.announcement-datetime {
    color: #357abd; /* Darker blue for datetime */
    font-weight: bold;
    margin-right: 10px;
}

.announcement-content {
    color: #4a90e2; /* Blue for content */
    font-weight: 600;
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

#lobby-view h2 {
    color: #cccccc; /* Lighter grey for subtitles */
    border-bottom: 2px solid #555555;
    padding-bottom: 10px;
    margin-top: 30px; 
    margin-bottom: 20px; 
    text-align: left; 
    font-size: 1.5em;
}

#lobby-controls {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.input-and-button-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 400px;
    justify-content: center;
}

#lobby-controls button { 
    font-size: 1.5em; 
    padding: 8px 12px; 
    line-height: 1; 
}

#match-name-input {
    padding: 10px;
    border: 1px solid rgba(74, 144, 226, 0.3)555;
    border-radius: 8px;
    font-size: 1em;
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.05); /* Dark input background */
    color: #e0e0e0; /* Light text in input */
}
#match-name-input::placeholder {
    color: #888888; /* Lighter placeholder text */
}
#match-name-input:focus {
    border-color: #5dade2; /* Blue accent on focus */
    box-shadow: 0 0 0 0.2rem rgba(93,173,226,.25);
    outline: none;
    background: rgba(255, 255, 255, 0.1);
}

/* Turn Duration Selection */
#turn-duration-selection {
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

#turn-duration-selection label[for="turn-duration"] {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    margin: 0;
    white-space: nowrap;
}

.duration-options {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: nowrap;
}

.duration-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: #e0e0e0;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.duration-option:hover {
    background-color: rgba(93, 173, 226, 0.15);
    border-color: rgba(93, 173, 226, 0.3);
}

.duration-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
    accent-color: #5dade2;
}

.duration-option input[type="radio"]:checked + span {
    color: #5dade2;
    font-weight: bold;
    font-family: 'Cinzel', serif;
}

/* AI Challenge Button */
#ai-challenge-section {
    margin-top: 20px;
    text-align: center;
}

.ai-challenge-btn {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 50%, #2a5a9a 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2em;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 200px;
}

.ai-challenge-btn:hover {
    background: linear-gradient(135deg, #357abd 0%, #2a5a9a 50%, #1e4080 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.ai-challenge-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.3);
}

#create-match-btn {
    /* REMOVED background-color: #27ae60; */
    /* REMOVED color: white; */
    /* padding, font-size handled by #lobby-controls button */
}
/* #create-match-btn:hover no longer needed if inheriting general button hover */

#matches-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid rgba(74, 144, 226, 0.2)444;
    padding: 0;
    list-style-type: none;
    border-radius: 8px;
    background-color: #303030; /* Background for the list itself */
}
.match-item {
    padding: 12px 15px;
    border-bottom: 1px solid #484848;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default; 
    transition: background-color 0.2s, box-shadow 0.2s;
    border-radius: 8px; 
    margin-bottom: 5px; 
    background: rgba(255, 255, 255, 0.1); /* Darker item background */
    border: 1px solid #505050; 
}
.match-item:last-child {
    border-bottom: 1px solid #505050; 
}
.match-item:hover {
    background-color: #424242; /* Lighter hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.match-item span {
    font-weight: bold;
    color: #e0e0e0; /* Light text */
}
.match-item button.join-btn,
.match-item button.spectate-btn {
    /* padding, font-size handled by #lobby-controls button & specific below */
    /* REMOVED background-color: #27ae60; */
    /* REMOVED color: white; */
    /* border: none; Already handled or not needed */
    /* border-radius: 8px; Already handled */
    /* cursor: pointer; Already handled */
    font-size: 1.5em; /* Keep specific font-size from original */
    line-height: 1; /* Keep specific line-height from original */
    margin-left: 5px; /* Space between multiple buttons */
}

.match-item button.spectate-btn {
    background-color: #3498db !important; /* Blue for spectate button */
    color: white !important;
}

.match-item button.spectate-btn:hover {
    background-color: #2980b9 !important; /* Darker blue on hover */
}

.spectatable-match {
    border-left: 3px solid #3498db; /* Blue accent for spectatable matches */
}
/* .match-item button.join-btn:hover no longer needed */
#lobby-status {
    text-align: center;
    margin-top: 15px;
    font-style: italic;
    color: #bbbbbb; /* Lighter italic text */
}

/* How to Play Button in Lobby */
#how-to-play-btn {
    /* padding, font-size handled by #lobby-controls button */
    /* REMOVED background-color: #3498db; */
    /* REMOVED color: white; */
    /* border: none; Already handled by general button style or not needed */
    /* border-radius: 8px; Already handled */
    /* cursor: pointer; Already handled */
}
/* #how-to-play-btn:hover no longer needed if inheriting general button hover */

/* Tutorial Modal Styling */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); /* Darker backdrop */
}

.modal-content {
    background: rgba(0, 0, 0, 0.6); /* Match AI mode container background */
    backdrop-filter: blur(15px);
    margin: 5% auto; 
    padding: 25px;
    border: 1px solid rgba(74, 144, 226, 0.3);
    width: 80%; 
    max-width: 700px; 
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative; 
    color: #e0e0e0; /* Light text in modal */
}

.modal-close-btn {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
}

.modal-close-btn:hover,
.modal-close-btn:focus {
    color: #f5f5f5; /* Brighter hover for close button */
    text-decoration: none;
    cursor: pointer;
}

.modal-content h2, .modal-content h3 {
    text-align: left;
    margin-top: 15px;
    margin-bottom: 10px;
}
.modal-content h2 {
    text-align: center;
    color: #5dade2; /* Blue for modal title */
}
.modal-content h3 {
    color: #e0e0e0; /* Light grey for subheadings */
    border-bottom: 1px solid #444444;
    padding-bottom: 5px;
}
.modal-content p, .modal-content li {
    font-size: 0.95em;
    line-height: 1.6;
    color: #cccccc; /* Slightly dimmer text for paragraphs */
}
.modal-content ul, .modal-content ol {
    padding-left: 20px;
    margin-bottom: 15px;
}
.modal-content ul ul, .modal-content ul ol, .modal-content ol ul, .modal-content ol ol {
    margin-top: 5px;
    margin-bottom: 5px;
}
.modal-content strong {
    color: #f5f5f5; /* Ensure strong text is also bright */
}

/* Setup Styling */
#setup-view h1 {
    margin-bottom: 20px;
    color: #f5f5f5;
}

.setup-view-message {
    text-align: center;
    margin-top: 5px; /* Optional: adjust spacing */
    margin-bottom: 10px; /* Optional: adjust spacing */
    color: #e0e0e0; /* Ensure text color matches dark theme */
}

#setup-view h3 {
    text-align: center;
    color: #e0e0e0;
    margin-top: 15px;
    margin-bottom: 10px;
}

#hero-selection-area {
    margin-bottom: 20px;
    padding-bottom: 20px;
    /* border-bottom: 1px solid #444444; */ /* Replaced by hr */
}

#hero-selection-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}

.hero-select-btn {
    display: flex; 
    align-items: center; 
    padding: 12px;
    min-width: 280px; /* Adjusted for 3 per row layout */
    max-width: 290px; /* More compact for 3 columns */
    flex: 0 1 calc(33.333% - 7px); /* 3 buttons per row with gap */
    text-align: left; 
    cursor: pointer;
    border: 1px solid rgba(74, 144, 226, 0.3)555;
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 10px;
    color: #e0e0e0; 
    transition: background-color 0.2s, border-color 0.2s;
}

.hero-select-btn:hover {
    background-color: #4a4a4a;
    border-color: #777777;
}

.hero-select-btn.selected {
    background-color: #5dade2; /* Blue accent for selected hero */
    border-color: #7dc0e8;
    color: #ffffff;
}

.hero-select-btn:disabled {
    background-color: #252525;
    cursor: not-allowed;
    opacity: 0.6;
}

.hero-select-btn.unaffordable {
    opacity: 0.4;
    background-color: #602020; /* Reddish tint for unaffordable */
    border-color: #804040;
}

.hero-cost {
    font-size: 0.8em;
    color: #4a90e2; /* Blue color for cost */
    font-weight: bold;
    margin-top: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#strategy-points-container {
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(74, 144, 226, 0.3)555;
}

#strategyPointsDisplay {
    color: #4a90e2; /* Blue color for strategy points */
    margin: 0;
    font-size: 1.3em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Hero button content styling for better layout */
.hero-name-tooltip {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-name-tooltip strong {
    font-size: 1.2em; 
    margin-bottom: 2px;
    color: #f5f5f5;
}

.hero-name-tooltip small {
    font-size: 0.9em;
    color: #bbbbbb;
    line-height: 1.3;
}

.hero-select-img {
    margin-right: 12px !important; /* More space between image and text */
    flex-shrink: 0; /* Prevent image from shrinking */
}

#chosen-hero-display p {
    text-align: center;
    font-size: 1.1em;
    color: #c0c0c0;
    margin-top: 10px;
}

#chosen-hero-display #chosen-hero-name {
    font-weight: bold;
    color: #5dade2; /* Blue for chosen hero name */
}

/* Hero selection container styling for 3x2 grid layout */
.hero-selection-container {
    max-width: 900px; /* Adjusted for 3-column layout */
    margin: 0 auto;
    display: flex !important; /* Ensure flex layout */
    flex-wrap: wrap !important; /* Force wrapping to create 3x2 grid */
    justify-content: center !important; /* Override inline styles */
    gap: 10px; /* Add gap between hero buttons */
}

/* Responsive hero selection adjustments for 3x2 layout */
@media screen and (max-width: 1024px) {
    .hero-select-btn {
        min-width: 280px;
        max-width: 350px;
        flex: 0 1 calc(50% - 8px); /* Fall back to 2 columns on medium screens */
    }
}

@media screen and (max-width: 768px) {
    .hero-selection-container {
        gap: 8px !important; /* Override inline styles */
        max-width: 600px;
    }
    .hero-select-btn {
        min-width: 260px;
        max-width: 300px;
        padding: 10px;
        flex: 0 1 calc(50% - 8px);
    }
    .hero-select-img {
        width: 38px !important;
        height: 38px !important;
    }
}

@media screen and (max-width: 600px) {
    .hero-selection-container {
        flex-direction: column !important;
        align-items: center !important;
        max-width: 400px;
    }
    .hero-select-btn {
        min-width: 320px;
        max-width: 380px;
        flex: none;
        padding: 12px;
    }
    .hero-select-img {
        width: 44px !important;
        height: 44px !important;
    }
}

.setup-divider {
    border: none;
    height: 1px;
    background-color: #444444; /* Dark grey horizontal line */
    margin-top: 15px;
    margin-bottom: 25px;
}

#unit-selection-options {
    margin-bottom: 20px;
    display: flex; 
    flex-wrap: wrap;
    gap: 10px; 
    justify-content: center; 
}
.unit-select-btn {
    display: flex; 
    align-items: center; 
    padding: 10px;
    min-width: 180px; 
    text-align: left; 
    cursor: pointer;
    border: 1px solid rgba(74, 144, 226, 0.3)555;
    background: rgba(255, 255, 255, 0.1); /* Dark button background */
    border-radius: 10px;
    color: #e0e0e0; /* Light text on button */
}
.unit-select-btn:hover {
    background-color: #424242;
    border-color: #666666;
}
.unit-select-btn:disabled {
    background-color: #252525; /* Darker disabled background */
    cursor: not-allowed;
    opacity: 0.6;
    color: #777777; /* Dimmer text for disabled */
}
.unit-select-btn img.unit-select-img {
    /* Styles are mostly set inline in JS, can be adjusted here if needed */
}
.unit-btn-text-content {
    display: flex;
    flex-direction: column; 
}
.unit-btn-text-content strong {
    font-size: 1.1em; 
    margin-bottom: 4px;
    color: #f5f5f5; /* White for unit name */
}
.unit-property {
    display: block; 
    font-size: 0.85em; 
    color: #bbbbbb; /* Lighter grey for properties */
    line-height: 1.4;
}
#chosen-units-display h3 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center; 
    color: #e0e0e0;
}

/* Removed old #chosen-units-list styling - replaced with horizontal drag and drop version */

/* Removed old .chosen-unit-item styling - replaced with drag and drop version */

/* Removed old .chosen-unit-img styling - replaced with drag and drop version */

/* Removed old .remove-chosen-unit-btn styling - replaced with drag and drop version */

#ready-btn {
    display: block;
    margin: 20px auto;
    padding: 10px 15px;
    background-color: #d35400; /* Adjusted Orange */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.8em; 
}
#ready-btn:disabled {
    background-color: #444444; /* Darker disabled for ready button */
    cursor: not-allowed;
    color: #777777;
    opacity: 0.7;
}
#ready-btn:hover:not(:disabled) {
    background-color: #ba4a00;
}
#setup-status-opponent, #setup-status-self {
    text-align: center;
    font-style: italic;
    margin-top: 10px;
    color: #bbbbbb;
}

/* Battle Styling */
#battle-view h1#battle-title { /* More specific selector for battle-title */
    text-align: left;
    font-size: 1.8em; /* Smaller font size */
    margin-bottom: 5px; /* Reduced margin */
}

#battle-info {
    text-align: left; /* Align text to the left */
    margin-bottom: 10px; /* Reduced margin */
}

#battle-info p { /* General paragraph styling within battle-info */
    font-size: 0.9em; /* Smaller base font size */
    margin-top: 3px; /* Adjust spacing */
    margin-bottom: 3px; /* Adjust spacing */
}

#turn-indicator {
    font-size: 1.1em; /* Adjusted font size, still prominent */
    font-weight: bold;
    color: #e74c3c; /* Brighter Red for turn indicator */
}
#game-canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    border: 2px solid #666666; /* Lighter border for canvas */
    width: fit-content; 
    background-color: #202020; /* Dark background for canvas container, can be same as board grid if preferred */
}
canvas { 
    display: block; 
}
#battle-controls {
    text-align: center;
    margin-top: 15px;
}
#battle-controls button {
    padding: 8px 12px;
    font-size: 1.5em; 
    line-height: 1;
    min-width: 50px; 
    margin: 0 5px;
}

#end-turn-btn {
    /* REMOVED background-color: #c0392b; */
    /* REMOVED color: white; */
    /* Other styles inherited from #battle-controls button or general button */
}
#end-turn-btn:disabled {
    /* background-color: #444444; Will now inherit general button:disabled */
    /* cursor: not-allowed; Will now inherit general button:disabled */
    /* color: #777777; Will now inherit general button:disabled */
}
/* #end-turn-btn:hover:not(:disabled) no longer needed */

/* Skip turn button might share similar styles or have its own */
#skip-unit-action-btn {
    /* REMOVED background-color: #7f8c8d; */
    /* REMOVED color: white; */
}
#skip-unit-action-btn:disabled {
    /* background-color: #444444; Will now inherit general button:disabled */
    /* cursor: not-allowed; Will now inherit general button:disabled */
    /* color: #777777; Will now inherit general button:disabled */
}
/* #skip-unit-action-btn:hover:not(:disabled) no longer needed */

.button-dynamic-text {
    font-size: 0.6em; 
    margin-left: 5px;
    vertical-align: middle; 
    font-weight: normal;
    color: #f0f0f0; /* Ensure dynamic text is light */
}


/* General Button Styling (ensure it doesn't override specific icon button needs) */
button {
    /* padding: 10px 18px; -- Let specific button styles handle padding */
    border-radius: 8px;
    border: 1px solid #357abd; /* Blue border */
    cursor: pointer;
    /* font-size: 1em; -- Let specific button styles handle font-size */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    background-color: #4a90e2; /* Primary Blue */
    color: #ffffff; /* White text for contrast */
    font-family: 'Cinzel', serif; /* Ensure buttons use Cinzel if not overridden by more specific rules */
}
button:hover:not(:disabled) {
    background-color: #357abd; /* Darker Blue on hover */
    border-color: #2a5a9a; /* Even darker border on hover */
    color: #ffffff; /* White text on hover */
}
button:disabled {
    background-color: #8bb0d8; /* Muted, desaturated blue for disabled */
    border-color: #6a8bb0;
    color: #4a6a8f;
    cursor: not-allowed;
    opacity: 0.7;
}

/* User Info Dropdown Styling */
#user-info-container {
    margin-left: 20px; /* REVERTED for index.html */
    /* margin-top: 10px; REMOVED - only for auth pages */
    display: flex; 
    align-items: stretch; /* Changed from center to stretch */
}

.header-avatar {
    width: 40px; /* Adjust size as needed */
    height: 40px;
    border-radius: 50%; /* Circular avatar */
    margin-right: 10px;
    border: 1px solid #666;
    object-fit: cover; /* Ensure image covers the area, might crop */
}

.user-info-wrapper {
    position: relative; /* For dropdown positioning */
    background: rgba(0, 0, 0, 0.3);
    /* padding: 8px 12px; Padding moved to user-greeting for better click area */
    border-radius: 8px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    box-sizing: border-box; /* Added */
    display: flex;          /* Added */
    align-items: stretch;   /* Added */
}

.user-greeting {
    color: #e0e0e0; /* Light text */
    cursor: pointer;
    /* font-weight: bold; REMOVED - will be applied to username part only */
    display: flex; /* Ensures avatar and text align */
    align-items: center; /* Vertical alignment */
    padding: 8px 12px; /* Added padding here for a larger click target */
    border-radius: 8px; /* Match wrapper if wrapper padding is removed */
    text-decoration: none; 
}

.user-greeting .greeting-username {
    font-weight: bold; /* Apply bold only to the username part */
    margin-left: 0.2em; /* Small space after "Hello, " */
}

.user-greeting .header-avatar {
    /* Avatar is already child of greeting, margin-right is fine */
    /* pointer-events: none; /* Optional: if avatar itself was stealing clicks, but unlikely with current setup */
}

.user-dropdown {
    display: none; 
    position: absolute;
    right: 0;
    top: calc(100% + 5px); /* Position below the greeting with a small gap */
    background-color: #444; /* Darker, slightly more distinct dropdown background */
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 8px;
    min-width: 160px; /* Slightly wider */
    z-index: 1001;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3); /* More pronounced shadow */
    padding: 5px 0; /* Remove padding from container, apply to links */
}

.user-dropdown a {
    display: block;
    padding: 10px 15px; /* Increased padding for better touch/click targets */
    color: #d0d0d0; /* Slightly brighter link color */
    text-decoration: none;
    font-size: 0.95em; /* Slightly larger font */
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
}

.user-dropdown a:hover {
    background-color: #4a90e2; /* Blue accent color on hover */
    color: #ffffff; /* White text on hover */
}

.user-dropdown .profile-link {
    /* Style for My Profile link, if specific needed */
}

.user-dropdown .logout-link {
    /* Style for Logout link, if specific needed */
    border-top: 1px solid #555; /* Separator line above logout */
    margin-top: 5px; /* Add a bit of space if border-top is used on this element */
    padding-top: 10px; /* Ensure padding is consistent after margin/border */
}

/* Styling for the new navigation button (e.g., HERO INN) */
.nav-button {
    background: rgba(0, 0, 0, 0.3);      /* Match user-info-wrapper background */
    border: 1px solid rgba(74, 144, 226, 0.2);      /* Match user-info-wrapper border */
    color: #e0e0e0;              /* Match user-greeting text color */
    padding: 8px 12px;           /* Match user-greeting padding */
    font-family: 'Cinzel', serif;  /* Ensure consistent font */
    border-radius: 8px;            /* Consistent border-radius */
    text-decoration: none;
    box-sizing: border-box;      /* Added */
    /* Inherits cursor, transition from general button styles */
    /* Overrides general button gold background/border */
}

.nav-button:hover:not(:disabled) {
    background-color: #444;       /* Slightly darker background on hover */
    border-color: #555;           /* Slightly darker border on hover */
    color: #f5f5f5;               /* Brighter text on hover */
}



/* If you prefer a div separator: */
.dropdown-separator {
    height: 1px;
    background-color: #555; /* Separator color */
    margin: 5px 0; /* Space around separator */
}

/* User Profile Modal Specifics */
#profile-details strong {
    color: #e0e0e0;
}

#profile-details .username-change-section {
    margin-top: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#profile-new-username-input {
    padding: 8px;
    margin-right: 10px;
    border: 1px solid rgba(74, 144, 226, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 8px;
    flex-grow: 1; /* Allow input to take available space */
}

#profile-save-username-btn {
    /* REMOVED background-color: #27ae60; */ /* Green */
    /* REMOVED color: white; */
    padding: 8px 12px; /* Keep specific padding */
    /* border: none; Already handled or not needed */
    /* border-radius: 8px; Already handled */
    /* cursor: pointer; Already handled */
}
/* #profile-save-username-btn:hover no longer needed */

#profile-status-message {
    margin-top: 5px;
    font-size: 0.9em;
    min-height: 1.2em; /* Reserve space to prevent layout shifts */
}

#profile-status-message.success {
    color: #2ecc71; /* Green for success */
}

#profile-status-message.error {
    color: #e74c3c; /* Red for error */
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444; /* Separator */
}

img.profile-avatar-display, img.profile-avatar-preview-display {
    width: 100px; /* Display size in modal */
    height: 100px;
    border-radius: 50%; /* Circular avatar */
    margin-bottom: 10px;
    border: 2px solid #555;
    object-fit: cover;
}

img.profile-avatar-preview-display {
    margin-top: 10px; /* Space above preview if current avatar is also shown */
}

/* Hidden actual file input */
/* #profile-avatar-upload-input { display: none; } */ /* Already set inline for now, can be moved here */

.custom-file-upload-label {
    display: inline-block;
    padding: 8px 15px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: #4a90e2; /* Primary Blue */
    color: #ffffff; /* White text */
    border-radius: 8px;
    border: 1px solid #357abd; /* Blue border */
    font-size: 0.9em;
    text-align: center;
    font-family: 'Cinzel', serif;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.custom-file-upload-label:hover {
    background-color: #357abd; /* Darker Blue on hover */
    border-color: #2a5a9a;
    color: #ffffff;
}

#profile-upload-avatar-btn {
    /* This is a standard button, should inherit golden theme */
    /* font-size might need adjustment if it looks too big with Cinzel */
}
#profile-upload-avatar-btn:hover:not(:disabled) {
    /* Inherits golden theme hover */
}

#profile-avatar-status-message {
    margin-top: 5px;
    font-size: 0.9em;
    min-height: 1.2em; 
    text-align: center;
}

/* Change Password Form Styling */
#user-profile-modal .form-group {
    margin-bottom: 10px;
    text-align: left;
}

#user-profile-modal .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #c0b283; /* Muted gold for labels */
    font-size: 0.9em;
}

#user-profile-modal .form-group input[type="password"] {
    width: calc(100% - 16px); /* Account for padding */
    padding: 8px;
    border: 1px solid rgba(74, 144, 226, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 8px;
    font-family: 'Arial', sans-serif; /* Ensure readability */
}

#profile-change-password-btn {
    /* This button will inherit the general button styling (golden theme) */
    /* We can add specific margin if needed */
    margin-top: 10px;
    width: 100%; /* Make button full width within its container */
}

#profile-password-status-message {
    margin-top: 10px;
    font-size: 0.9em;
    min-height: 1.2em; /* Reserve space */
}

#profile-password-status-message.success {
    color: #2ecc71; /* Green for success */
}

#profile-password-status-message.error {
    color: #e74c3c; /* Red for error */
}

#user-profile-modal hr.solid {
    border: none; 
    height: 1px;
    background-color: #444; /* Darker separator line */
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Referral Section Styling */
.referral-section {
    margin: 15px 0;
}

.referral-section h4 {
    color: #4a90e2; /* Blue color for section title */
    margin-bottom: 10px;
    font-size: 1.1em;
}

.referral-section .form-group {
    margin-bottom: 10px;
    text-align: left;
}

.referral-section .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #c0b283; /* Muted gold for labels */
    font-size: 0.9em;
}

.referral-section .form-group input[type="email"] {
    width: calc(100% - 16px); /* Account for padding */
    padding: 8px;
    border: 1px solid rgba(74, 144, 226, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 8px;
    font-family: 'Arial', sans-serif;
}

.referral-section .form-group input[type="email"]:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 0.2rem rgba(74,144,226,.25);
    outline: none;
    background: rgba(255, 255, 255, 0.1);
}

#profile-submit-refer-btn {
    margin-top: 10px;
    width: 100%;
}

.referral-note {
    font-size: 0.85em;
    color: #a0a0a0;
    margin-top: 8px;
    margin-bottom: 0;
}

#profile-ref-by-display {
    color: #4a90e2; /* Blue color for the referrer email */
    font-weight: bold;
}

#profile-referral-status-message {
    margin-top: 10px;
    font-size: 0.9em;
    min-height: 1.2em;
}

#profile-referral-status-message.success {
    color: #2ecc71; /* Green for success */
}

#profile-referral-status-message.error {
    color: #e74c3c; /* Red for error */
}

/* Responsive adjustments for modals if needed */
/* ... existing code ... */

/* Styling for Login/Register Form Container */
.container {
    background: rgba(0, 0, 0, 0.3); /* Similar to #game-container */
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 1px solid rgba(74, 144, 226, 0.2);
    width: 90%;
    max-width: 450px; /* Good width for a form */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    margin-top: 50px; /* Space from top */
    margin-bottom: 40px; /* Space before footer */
    text-align: center; /* Center h2 and links inside */
    flex-grow: 1; /* Allows this container to take up available space */
}

.container h2 {
    color: #5dade2; /* Accent color for heading */
    margin-bottom: 25px;
    font-size: 2em;
}

.container form div {
    margin-bottom: 18px;
    text-align: left; /* Align labels and inputs to the left */
}

.container form label {
    display: block;
    margin-bottom: 8px;
    color: #e0e0e0; /* Light text for labels */
    font-weight: bold;
    font-size: 0.95em;
}

.container form input[type="text"],
.container form input[type="email"],
.container form input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(74, 144, 226, 0.3)555;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
    font-size: 1em;
    box-sizing: border-box; /* Important for 100% width + padding */
}

.container form input[type="text"]:focus,
.container form input[type="email"]:focus,
.container form input[type="password"]:focus {
    border-color: #5dade2;
    box-shadow: 0 0 0 0.2rem rgba(93,173,226,.25);
    outline: none;
    background: rgba(255, 255, 255, 0.1);
}

.container form button[type="submit"] {
    /* REMOVED background-color: #27ae60; */
    /* REMOVED color: white; */
    padding: 12px 20px; /* Keep specific padding */
    font-size: 1.1em; /* Keep specific font-size */
    /* border: none; Already handled or not needed */
    /* border-radius: 8px; Already handled */
    /* cursor: pointer; Already handled */
    width: 100%; /* Make button full width */
    margin-top: 10px; /* Space above button */
    /* transition: background-color 0.2s ease; Already handled */
}
/* .container form button[type="submit"]:hover no longer needed */

.container p { /* For messages and links like "Don't have an account?" */
    margin-top: 20px;
    color: #bbbbbb;
    font-size: 0.9em;
}

.container p a {
    color: #5dade2; /* Accent color for links */
    text-decoration: none;
}

.container p a:hover {
    text-decoration: underline;
}

.container p#message:not(:empty):not([class*="error"]) { /* Default to success if no error class */
    /* background-color: #e6fffa; */ /* REMOVED - Using golden theme, specific error/success will be handled by JS if needed */
    /* color: #00775c; */
    /* border: 1px solid #a6f2e0; */
}

.container .password-toggle-container {
    display: flex;
    align-items: center;
    margin-top: 5px; /* Space between password input and checkbox */
    font-size: 0.85em;
}

.container .password-toggle-container input[type="checkbox"] {
    margin-right: 5px;
    /* Using default browser checkbox style for now, can be customized later if needed */
    /* Ensure checkbox uses a theme-appropriate accent color if possible (browser-dependent) */
    accent-color: #4a90e2; /* Blue accent for checkbox */
}

.container .show-password-label {
    font-weight: normal; /* Override general label bolding if needed */
    color: #c0c0c0; /* Lighter text for this label */
    cursor: pointer;
    user-select: none; /* Prevent text selection on label click */
    font-family: 'Arial', sans-serif; /* Ensure consistent font with other inputs */
    margin-bottom: 0; /* Override default label margin-bottom from .container form label */
}

/* Responsive adjustments for modals if needed */
/* ... existing code ... */

/* Footer Styling */
footer {
    background-color: #1f1f1f; /* Slightly different dark shade for footer */
    color: #a0a0a0; /* Muted text color */
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #333;
    width: 100%; /* Ensure it spans the full width available */
}

.footer-content {
    max-width: 900px; /* Align with game-container max-width if desired */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Space between logo and text */
}

#footer-logo {
    height: 40px; /* Adjust as needed */
    width: auto;   /* Maintain aspect ratio */
    opacity: 0.8;
}

.footer-content p {
    margin: 0;
    font-size: 0.9em;
}

.social-links {
    margin-top: 10px;
    text-align: right;
}

.social-links a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.social-links a:hover {
    color: #1877f2;
}

.facebook-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.info-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* About Creator Modal Styling */
#about-creator-modal .modal-content {
    max-width: 600px;
    padding: 30px;
}

.creator-info {
    text-align: center;
}

.creator-avatar-section {
    margin-bottom: 20px;
    text-align: center;
}

.creator-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #4a90e2;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
    transition: transform 0.3s ease;
}

.creator-avatar:hover {
    transform: scale(1.05);
}

.creator-content-with-video {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.creator-text-content {
    flex: 1;
    text-align: left;
}

.creator-video-section {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.creator-video {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid #4a90e2;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
    transition: transform 0.3s ease;
}

.creator-video:hover {
    transform: scale(1.05);
}

.creator-description {
    text-align: left;
    line-height: 1.6;
}

.creator-description p {
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
    color: #e0e0e0;
}

.creator-description p strong {
    color: #4a90e2;
    font-size: 1.1em;
}

.creator-contact {
    margin: 20px 0;
    padding: 15px;
    background-color: rgba(74, 144, 226, 0.1);
    border-radius: 8px;
    border-left: 4px solid #4a90e2;
    display: flex;
    align-items: center;
    gap: 15px;
}

.creator-contact p {
    margin: 0;
}

.creator-email a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.creator-email a:hover {
    color: #357abd;
    text-decoration: underline;
}

.creator-links {
    text-align: center;
    margin: 25px 0;
}

.blog-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #4a90e2;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: bold;
    transition: all 0.3s ease;
    font-family: 'Cinzel', serif;
}

.blog-link:hover {
    background-color: #357abd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}

.blog-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.creator-thanks {
    text-align: center;
    font-style: italic;
    color: #c0c0c0 !important;
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(74, 144, 226, 0.1);
    border-radius: 8px;
    border-left: 4px solid #4a90e2;
}

/* Social links layout update */
.social-links {
    margin-top: 10px;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Responsive design for creator modal and footer */
@media screen and (max-width: 768px) {
    #about-creator-modal .modal-content {
        max-width: 95%;
        padding: 20px;
        margin: 5% auto;
    }
    
    .creator-content-with-video {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .creator-text-content {
        text-align: center;
    }
    
    .creator-video-section {
        flex: none;
        align-self: center;
    }
    
    .creator-video {
        width: 120px;
        height: 120px;
    }
    
    .creator-avatar {
        width: 100px;
        height: 100px;
    }
    
    .creator-description {
        text-align: center;
    }
    
    .creator-description p {
        font-size: 0.9em;
    }
    
    .blog-link {
        font-size: 0.9em;
        padding: 10px 16px;
    }
    
    .social-links {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 15px;
    }
    
    .social-links a {
        font-size: 0.85em;
    }
}

@media screen and (max-width: 480px) {
    .creator-video {
        width: 100px;
        height: 100px;
    }
    
    .creator-avatar {
        width: 80px;
        height: 80px;
    }
    
    .creator-description p {
        font-size: 0.85em;
        margin-bottom: 12px;
    }
    
    .blog-link {
        font-size: 0.8em;
        padding: 8px 14px;
    }
    
    .creator-thanks {
        padding: 12px;
        font-size: 0.85em;
    }
    
    .creator-contact {
        padding: 12px;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .creator-email a {
        font-size: 1em;
    }
}

/* Social links inside container (for register page) */
.container .social-links {
    margin-top: 20px;
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #333;
}

.container .social-links a {
    color: #c9c9c9;
    font-size: 0.85em;
}

.container .social-links a:hover {
    color: #1877f2;
}

/* Units Decoration Row */
.units-decoration {
    padding: 30px 0 20px 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.units-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.unit-decoration-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: all 0.3s ease;
    opacity: 0.8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.unit-decoration-img:hover {
    transform: scale(1.2) translateY(-5px);
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* Animation for units */
.unit-decoration-img:nth-child(1) { animation-delay: 0.1s; }
.unit-decoration-img:nth-child(2) { animation-delay: 0.2s; }
.unit-decoration-img:nth-child(3) { animation-delay: 0.3s; }
.unit-decoration-img:nth-child(4) { animation-delay: 0.4s; }
.unit-decoration-img:nth-child(5) { animation-delay: 0.5s; }
.unit-decoration-img:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}

.unit-decoration-img {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Responsive for units decoration */
@media screen and (max-width: 768px) {
    .units-row {
        gap: 15px;
    }
    
    .unit-decoration-img {
        width: 45px;
        height: 45px;
    }
}

@media screen and (max-width: 480px) {
    .units-decoration {
        padding: 20px 0 15px 0;
    }
    
    .units-row {
        gap: 10px;
    }
    
    .unit-decoration-img {
        width: 35px;
        height: 35px;
    }
}

/* Styling for Login/Register links in header */
.header-auth-link {
    /* REMOVED color: #e0e0e0; */ /* Will inherit from button or have its own if different */
    text-decoration: none;
    font-size: 1em; /* Keep specific font-size */
    font-weight: bold; /* Keep specific font-weight */
    padding: 8px 12px; /* Keep specific padding */
    /* border: 1px solid #5dade2; Will use button border */
    /* border-radius: 8px; Already handled */
    /* transition: background-color 0.2s ease, color 0.2s ease; Already handled */
    /* This will now use the general button golden theme by default */
}

/* .header-auth-link:hover no longer needed if general button hover is desired */

/* Specific overrides if Cinzel doesn't look good on certain small UI elements */
input[type="text"],
input[type="email"],
input[type="password"],
label, 
.unit-property, 
.footer-content p, 
.status-message, 
#profile-avatar-status-message, 
.container p a, 
.container p {
    font-family: 'Arial', sans-serif; /* Fallback to a more standard UI font for smaller interactive elements */
}

/* Ensure main app title, dropdown links, header auth links, and buttons get Cinzel, unless overridden later for specific buttons */
#app-header h1,
.user-dropdown a,
.header-auth-link,
button {
    font-family: 'Cinzel', serif;
}

/* Style input placeholders specifically */
#match-name-input::placeholder,
#profile-new-username-input::placeholder {
    font-family: 'Cinzel', serif;
    /* You might want to adjust placeholder color if Cinzel affects its legibility */
    /* color: #888888; */ 
}

/* You might want to be more selective with the above override. 
/* ... existing code ... */

/* Specific styles for header on Auth pages (login, register) */
.app-header-auth {
    flex-direction: column; /* Stack title and link vertically */
    justify-content: center; /* Center them vertically */
    align-items: center; /* Center them horizontally */
}

.app-header-auth #user-info-container {
    margin-left: 0; /* Remove the default left margin */
    margin-top: 10px; /* Add some space between title and link */
}

#app-header h1 {
    /* ... existing code ... */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    body {
        padding: 8px; /* Reduced padding to prevent cutoff */
    }

    #game-container {
        width: 98%; /* Use more screen width */
        padding: 12px; /* Reduced padding */
        margin-top: 10px;
    }

    #app-header {
        flex-direction: column;
        text-align: center;
        gap: 10px; /* Reduced gap */
        padding: 8px 0; /* Reduced padding */
    }
    
    /* Logo size adjustment for mobile */
    #app-logo {
        height: 40px; /* Significantly smaller on mobile */
        width: auto;
    }

    #app-header h1 {
        font-size: 1.8em; /* Smaller title */
        margin-bottom: 5px;
    }

    #user-info-container {
        margin-left: 0;
    }

    /* Setup View Mobile Fixes */
    #setup-view {
        padding: 8px; /* Reduced padding */
    }
    
    #setup-view h1 {
        font-size: 1.6em; /* Smaller setup title */
        margin-bottom: 10px;
    }

    /* Lobby Adjustments */
    #lobby-view {
        flex-direction: column;
        padding: 10px; /* Reduced padding */
    }

    .lobby-main-content {
        flex: 1;
    }

    .lobby-sidebar {
        margin-top: 20px;
        min-width: unset;
    }

    #lobby-controls {
        flex-direction: column;
        gap: 10px;
    }

    .input-and-button-row {
        max-width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    #match-name-input {
        width: 100%;
        flex-grow: unset;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    #lobby-controls button {
        width: 100%;
    }

    /* Turn Duration Mobile Adjustments */
    #turn-duration-selection {
        gap: 10px;
        flex-wrap: nowrap;
    }

    #turn-duration-selection label[for="turn-duration"] {
        font-family: 'Cinzel', serif;
        font-size: 13px;
    }

    .duration-options {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .duration-option {
        font-family: 'Cinzel', serif;
        font-size: 12px;
        padding: 4px 8px;
    }
    
    /* AI Challenge Button Mobile */
    .ai-challenge-btn {
        font-size: 1em;
        padding: 12px 25px;
        min-width: 180px;
    }

    /* Match Items */
    .match-item {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .match-item button.join-btn {
        width: 100%;
    }

    /* Modal Adjustments */
    .modal-content {
        width: 90%;
        margin: 10% auto;
        padding: 15px;
    }

    /* User Profile Adjustments */
    .username-change-section {
        flex-direction: column;
        gap: 10px;
    }

    #profile-new-username-input {
        width: 100%;
        margin-right: 0;
    }

    #profile-save-username-btn {
        width: 100%;
    }
    
    /* Battle View Mobile Adjustments */
    #battle-view {
        padding: 8px; /* Reduced padding */
    }
    
    #battle-area-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    #game-canvas-container {
        width: 100%;
        text-align: center;
    }
    
    canvas {
        max-width: 100%;
        height: auto;
        border: 1px solid rgba(74, 144, 226, 0.2); /* Add border for better visibility on mobile */
    }
    
    #battle-controls {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    #battle-controls button {
        width: 100%;
        padding: 12px;
        font-size: 1em;
    }
    
    /* Spectator mode specific mobile adjustments */
    .spectator-team-indicators {
        position: relative;
        z-index: 10; /* Ensure it stays above other elements */
    }
}

@media screen and (max-width: 480px) {
    body {
        padding: 5px; /* Minimal padding for very small screens */
    }
    
    #game-container {
        width: 99%;
        padding: 8px;
    }
    
    /* Even smaller logo for very small screens */
    #app-logo {
        height: 32px;
        width: auto;
    }

    #app-header h1 {
        font-size: 1.5em; /* Even smaller title */
    }
    
    #setup-view h1 {
        font-size: 1.4em;
    }

    .container {
        padding: 15px; /* Reduced padding */
    }

    .user-greeting {
        font-size: 0.9em;
    }

    .header-avatar {
        width: 28px; /* Smaller avatar */
        height: 28px;
    }

    #matches-list {
        max-height: 200px;
    }

    .footer-content {
        flex-direction: column;
        gap: 10px;
    }

    #footer-logo {
        height: 25px; /* Smaller footer logo */
    }
}

/* Ensure canvas is responsive */
#game-canvas-container {
    max-width: 100%;
    overflow: hidden;
}

canvas {
    max-width: 100%;
    height: auto;
}

/* Responsive Design for Auth Pages */
@media screen and (max-width: 768px) {
    .container {
        width: 95%;
        max-width: none;
        margin: 20px auto;
    }

    .app-header-auth h1 {
        font-size: 2em;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding: 20px;
        margin: 10px auto;
    }

    .app-header-auth h1 {
        font-size: 1.8em;
    }

    .container form input[type="text"],
    .container form input[type="email"],
    .container form input[type="password"] {
        padding: 10px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .container form button[type="submit"] {
        padding: 12px 15px;
    }

    .container p {
        font-size: 0.85em;
    }
}

/* Collapsible Change Password Section */
.collapsible-section {
    margin-bottom: 10px; /* Add some space below the section */
}

.collapsible-toggle-btn {
    background-color: transparent; /* Make background transparent */
    color: #4a90e2; /* Blue color for text */
    border: 1px solid #4a90e2; /* Blue border */
    padding: 8px 15px;
    width: 100%;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 1.1em; /* Slightly larger font for the toggle button */
    cursor: pointer;
    display: flex; /* For aligning text and icon */
    justify-content: space-between; /* Push icon to the right */
    align-items: center;
    border-radius: 8px;
    margin-bottom: 10px; /* Space between button and content when open */
}

.collapsible-toggle-btn:hover {
    background-color: rgba(74, 144, 226, 0.1); /* Slight blue tint on hover */
    border-color: #357abd;
}

.collapsible-toggle-btn .toggle-icon {
    font-size: 0.8em; /* Adjust icon size */
    transition: transform 0.2s ease-in-out;
}

.collapsible-toggle-btn.open .toggle-icon {
    transform: rotate(90deg);
}

.collapsible-content {
    padding-left: 10px; /* Indent the content slightly */
    border-left: 2px solid #444; /* Add a subtle left border */
    /* display: none; /* Initially hidden - controlled by inline style / JS */
}


/* Responsive adjustments for modals if needed */
/* ... existing code ... */

/* Battle View Specific Styles */
#battle-view {
    /* Existing styles for battle-view */
}

#battle-area-wrapper {
    display: flex;
    flex-direction: column; /* Default: stack vertically for mobile */
}

#game-content-area {
    flex-grow: 1; 
}

#battleChatContainer { /* Battle Chat Container */
    /* General panel styling similar to lobby-chat-container and lobby-sidebar */
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    /* Remove flex: 1 to allow natural sizing */
    min-width: 250px;
    min-height: 300px; /* Set minimum height for chat */
    /* width, margin-top will be handled by flexbox rules in #battle-area-wrapper media queries */
}

#battleChatContainer h3 {
    font-size: 1.4em;
    color: #4a90e2; /* Blue color like lobby chat title */
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #555;
    padding-bottom: 8px;
}

/* Battle chat messages (inside #battleChatContainer) */
#battleChatContainer #battleChatMessages {
    height: 150px; /* Default mobile height, can be overridden by media query for desktop */
    overflow-y: scroll; 
    border: 1px solid rgba(74, 144, 226, 0.2); /* Consistent with lobby */
    padding: 10px; 
    margin-bottom: 10px; 
    background-color: #282828; /* Consistent with lobby messages background */
    color: #e0e0e0;
    font-family: Arial, sans-serif; 
    flex-grow: 1; /* Allow message area to take available vertical space */
    scroll-behavior: smooth;
}

/* Scrollbar styling for battle chat messages */
#battleChatContainer #battleChatMessages::-webkit-scrollbar {
    width: 8px;
}

#battleChatContainer #battleChatMessages::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 8px;
}

#battleChatContainer #battleChatMessages::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 8px;
}

#battleChatContainer #battleChatMessages::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.battle-chat-input-area {
    display: flex;
    gap: 10px;
}

/* Battle chat input */
#battleChatInput {
    font-family: Arial, sans-serif; 
    flex-grow: 1; /* Take remaining space */
    padding: 10px;
    border: 1px solid rgba(74, 144, 226, 0.3)555;
    border-radius: 8px;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    /* margin-right: 10px; /* No longer needed due to gap in .battle-chat-input-area */
}

#battleChatInput::placeholder {
    font-family: Arial, sans-serif; 
    color: #888888;
}

#sendBattleChatButton { /* Battle Send Button */
    padding: 10px 15px; /* Consistent with lobby send button */
    font-size: 0.9em; /* Consistent with lobby send button */
    /* width: 60px; /* Removed fixed width to allow button to size by content/padding */
    /* Inherits general button styling (gold theme) */
}

/* Desktop and larger screens */
@media (min-width: 769px) { 
    #battle-area-wrapper {
        flex-direction: row; 
        align-items: flex-start; 
    }

    #game-content-area {
        flex-basis: 70%; 
        margin-right: 20px; 
    }

    #battle-sidebar-container {
        flex-basis: 30%; 
        margin-top: 0; 
        max-width: 350px; /* Single column width */
        /* flex-direction: column is already set in base styles */
    }

    #unit-info-panel {
        max-height: 350px;
    }

    #battleChatContainer {
        margin-top: 0; 
    }

    #battleChatContainer #battleChatMessages { /* Targeting battle messages specifically for height adjustment */
        height: 300px; /* Adjust height for desktop view if desired */
    }
    
    #battleChatMessages { /* Adjust battle chat messages height for desktop */
        height: 300px;
    }
}

/* ... existing code ... */

/* Responsive adjustments for lobby columns */
@media screen and (max-width: 1024px) { /* Breakpoint for 2 columns */
    #lobby-view {
        /* Keep flex-direction row by default, rely on flex-wrap */
    }
    .lobby-main-content {
        flex-basis: 100%; /* Main content takes full width, then chat and leaderboard wrap */
        margin-bottom: 20px; /* Add space when it stacks */
    }
    #lobby-chat-container {
        flex-basis: calc(60% - 10px); /* Example: Chat takes 60% of remaining width */
    }
    .lobby-sidebar {
        flex-basis: calc(40% - 10px); /* Leaderboard takes 40% */
    }
}

@media screen and (max-width: 768px) {
    /* Inherits from main responsive block for lobby-view flex-direction: column */
    /* No need to repeat flex-direction: column if already set in general responsive rules */
    /* Ensure all items take full width when stacked */
    #lobby-chat-container,
    .lobby-sidebar {
        flex-basis: 100%;
        margin-top: 0; /* Reset margin-top if any from previous rule */
    }
    
    /* Stack recent matches, online users, and chat vertically on mobile */
    #lobby-chat-container {
        flex-direction: column;
    }
    
    #recent-matches-section,
    #online-users-section,
    #lobby-chat-section {
        margin-bottom: 15px;
    }
    
    #recent-matches-section:last-child,
    #online-users-section:last-child,
    #lobby-chat-section:last-child {
        margin-bottom: 0;
    }
    
    /* Smaller height on mobile for online users */
    #online-users-list {
        height: 150px;
    }
    
     #lobby-main-content {
        margin-bottom: 20px; /* Ensure space remains if not already set */
    }
}

/* ... existing code ... */

#messages {
    height: 300px; /* Adjust height for desktop view if desired */
    font-family: Arial, sans-serif; /* Font for Vietnamese support */
}

#battleChatInput { /* Battle chat input */
    font-family: Arial, sans-serif; /* Font for Vietnamese support */
}

#battleChatInput::placeholder {
    font-family: Arial, sans-serif; /* Consistent font for placeholder */
}

/* ... existing code ... */

.modal-content button.modal-ok-button {
    background-color: #4a90e2; /* Blue like other buttons */
    color: #ffffff;      /* White text */
    padding: 10px 20px;
    margin-top: 20px;
    border: 1px solid #357abd; /* Blue border */
    border-radius: 10px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Cinzel', serif; /* Match other buttons */
    display: block; 
    margin-left: auto;
    margin-right: auto;
    min-width: 80px;
    text-align: center;
}

.modal-content button.modal-ok-button:hover {
    background-color: #357abd; /* Darker blue on hover */
    border-color: #2a5a9a;
}

    #battleChatContainer #battleChatMessages { /* Targeting battle messages specifically for height adjustment */
        height: 300px; /* Adjust height for desktop view if desired */
        font-family: Arial, sans-serif; /* Added for consistency */
    }

/* Mobile chat improvements */
@media screen and (max-width: 768px) {
    #lobby-messages,
    #recent-matches-list {
        height: 150px; /* Slightly smaller on mobile */
    }
    
    .recent-match-item {
        padding: 6px;
        font-size: 0.8em;
    }
    
    .view-review-btn {
        padding: 4px 6px;
        font-size: 0.75em;
    }
    
    #battleChatMessages {
        height: 150px; /* Smaller on mobile */
    }
    
    #battleChatContainer #battleChatMessages {
        height: 150px; /* Smaller on mobile */
    }
    
    /* Ensure scrollbars are visible on mobile */
    #lobby-messages::-webkit-scrollbar,
    #battleChatMessages::-webkit-scrollbar,
    #battleChatContainer #battleChatMessages::-webkit-scrollbar {
        width: 6px; /* Thinner scrollbar on mobile */
    }

    /* Battle Sidebar Mobile Styles */
    #battle-sidebar-container {
        /* Already column by default, just adjust gap */
        gap: 10px;
    }

    /* Unit Info Panel Mobile Styles */
    #unit-info-panel {
        min-height: 120px;
        max-height: 180px;
        padding: 10px;
    }

    .unit-info-basic {
        gap: 8px;
        margin-bottom: 10px;
    }

    .unit-info-img {
        width: 40px;
        height: 40px;
    }

    .unit-info-name {
        font-size: 1em;
    }

    .unit-info-stats {
        gap: 8px;
    }

    .stat-item {
        font-size: 0.8em;
        padding: 2px 6px;
    }

    .ability-title {
        font-size: 0.9em;
        margin-bottom: 6px;
    }

    #unit-ability-list {
        font-size: 0.8em;
    }

    .ability-item {
        padding: 4px 8px;
        margin-bottom: 4px;
    }
}

#battleChatMessages { /* Was #messages */
    height: 200px; /* Consistent with lobby messages */
    font-family: Arial, sans-serif; /* Font for Vietnamese support */
    overflow-y: auto;
    border: 1px solid rgba(74, 144, 226, 0.2);
    padding: 10px;
    margin-bottom: 10px;
    background-color: #282828;
    color: #e0e0e0;
    scroll-behavior: smooth;
    flex-grow: 1; /* Allow message area to take available vertical space */
}

/* Scrollbar styling for battleChatMessages */
#battleChatMessages::-webkit-scrollbar {
    width: 8px;
}

#battleChatMessages::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 8px;
}

#battleChatMessages::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 8px;
}

#battleChatMessages::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Chat message styling */
.chat-message {
    margin-bottom: 8px;
    padding: 5px 8px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    word-wrap: break-word;
    font-size: 0.75em; /* Smaller font size */
    line-height: 1.3; /* Tighter line height */
}

.chat-message strong {
    color: #4a90e2; /* Blue color for usernames */
    font-size: 0.9em; /* Slightly larger for usernames */
}

.chat-message .timestamp {
    color: #888;
    font-size: 0.8em;
    margin-right: 5px;
}

.chat-message.system-message {
    background-color: rgba(74, 144, 226, 0.1);
    border-left: 3px solid #4a90e2;
    font-style: italic;
    color: #87ceeb;
    font-size: 0.85em;
}

#battleChatInput { /* Battle chat input, was #chatInput */
    font-family: Arial, sans-serif; /* Font for Vietnamese support */
}

#battleChatInput::placeholder { /* Was #chatInput::placeholder */
    font-family: Arial, sans-serif; /* Consistent font for placeholder */
}

/* Spectator Modal Styling */
.spectator-modal-buttons {
    text-align: center;
    margin-top: 20px;
}

.modal-cancel-button {
    padding: 12px 24px;
    font-size: 1em;
    background-color: #e74c3c; /* Red for cancel */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'Cinzel', serif; /* Match other buttons */
}

.modal-cancel-button:hover {
    background-color: #c0392b; /* Darker red on hover */
}

/* Tutorial Header with Language Toggle */
.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #444444;
}

.tutorial-header h2 {
    margin: 0;
    color: #5dade2; /* Blue for modal title */
    flex: 1;
}

.lang-toggle-btn {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.lang-toggle-btn:hover {
    background-color: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.lang-toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Tutorial Content Language Containers */
.tutorial-content-lang {
    line-height: 1.6;
}

/* Vietnamese Content Styling with Nunito Font */
.tutorial-content.vietnamese {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.7;
}

.tutorial-content.vietnamese h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: #e0e0e0;
}

.tutorial-content.vietnamese strong {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #f5f5f5;
}

.tutorial-content.vietnamese em {
    font-family: 'Nunito', sans-serif;
    font-style: italic;
    font-weight: 400;
}

/* English Content keeps default styling */
.tutorial-content.english {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
}

/* Loading state for tutorial content */
.tutorial-content.loading {
    text-align: center;
    padding: 40px 20px;
    color: #bbbbbb;
}

.tutorial-content.loading::before {
    content: "📖 Loading tutorial...";
    font-size: 1.1em;
}

.tutorial-content.error {
    text-align: center;
    padding: 40px 20px;
    color: #e74c3c;
}

.tutorial-content.error::before {
    content: "❌ Error loading tutorial content. Please try again.";
    font-size: 1.1em;
}

/* Spectator Team Indicators */
.spectator-team-indicators {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 2px solid #3498db;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.team-indicator-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.team-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 140px;
    border: 2px solid transparent;
}

.team-indicator.active {
    background: rgba(74, 144, 226, 0.2);
    border-color: #4a90e2;
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.4);
    transform: scale(1.05);
}

.team-color {
    font-size: 1.8em;
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.blue-team {
    color: #3498db;
}

.red-team {
    color: #e74c3c;
}

.team-name {
    font-weight: 600;
    font-size: 1.1em;
    color: #ecf0f1;
    margin-bottom: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.team-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
    color: #bdc3c7;
}

.unit-count, .base-hp {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    white-space: nowrap;
}

.team-vs {
    font-weight: 700;
    font-size: 1.2em;
    color: #e67e22;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background: rgba(230, 126, 34, 0.2);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e67e22;
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
    .team-indicator-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .team-vs {
        order: 1;
        transform: rotate(90deg);
        margin: 0;
    }
    
    .team-indicator {
        min-width: 180px;
    }
    
    /* Enhanced mobile styling for better visibility */
    .spectator-team-indicators {
        padding: 12px;
        margin: 10px 0;
    }
    
    .team-color {
        font-size: 2.2em; /* Larger on mobile for better visibility */
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
    }
    
    .blue-team {
        color: #4db8ff; /* Slightly brighter blue for mobile */
    }
    
    .red-team {
        color: #ff6b6b; /* Slightly brighter red for mobile */
    }
    
    .team-name {
        font-size: 1.2em; /* Slightly larger on mobile */
        font-weight: 700; /* Bolder text for mobile */
    }
    
    .team-stats {
        font-size: 1em; /* Larger stats text on mobile */
    }
    
    .unit-count, .base-hp {
        font-size: 0.9em; /* Larger font for mobile readability */
        padding: 4px 10px; /* More padding for easier touch */
    }
}

/* Color the heart symbols based on team */
.team-indicator[data-player="0"] .base-hp {
    color: #4db8ff; /* Blue for Player 1 */
}

.team-indicator[data-player="1"] .base-hp {
    color: #ff6b6b; /* Red for Player 2 */
}

/* ================================================== */
/* DRAG AND DROP STYLING FOR UNIT FORMATION */
/* ================================================== */

/* Enhanced chosen unit item styling for drag and drop */
.chosen-unit-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(135deg, #34495e, #2c3e50);
    border: 2px solid #3498db;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    cursor: grab;
    min-height: 50px;
    width: auto;
    min-width: 80px;
    /* Touch-friendly properties */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.chosen-unit-item.draggable-unit:hover {
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-color: #5dade2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.chosen-unit-item.dragging {
    opacity: 0.6;
    transform: rotate(5deg) scale(1.05);
    cursor: grabbing;
    z-index: 1000;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: #e74c3c;
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
    /* Enhanced mobile dragging visual */
    transition: none;
}

.chosen-unit-item.drag-over {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    border-color: #f1c40f;
    border-style: dashed;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(241, 196, 64, 0.5);
    /* Stronger visual feedback for mobile */
    animation: pulse 0.5s ease-in-out infinite alternate;
}

/* Pulse animation for better mobile feedback */
@keyframes pulse {
    from { transform: scale(1.02); }
    to { transform: scale(1.05); }
}

/* Drag handle styling */
.drag-handle {
    color: #95a5a6;
    font-size: 14px;
    font-weight: bold;
    cursor: grab;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.2s ease;
    user-select: none;
    min-width: 16px;
    text-align: center;
    /* Touch-friendly properties */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.drag-handle:hover {
    color: #ecf0f1;
    background: rgba(255, 255, 255, 0.1);
}

.dragging .drag-handle {
    cursor: grabbing;
    color: #fff;
}

/* Unit info container - simplified for image only */
.unit-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Remove unit label styling since we removed the text */
.unit-label {
    display: none;
}

/* Enhanced remove button - smaller for compact layout */
.remove-chosen-unit-btn {
    background: rgba(231, 76, 60, 0.8);
    border: none;
    color: white;
    font-size: 12px;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-chosen-unit-btn:hover {
    background: #e74c3c;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

/* Chosen units list - horizontal layout */
#chosen-units-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Unit image styling - slightly smaller for compact layout */
.chosen-unit-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid rgba(74, 144, 226, 0.3);
    object-fit: cover;
}

/* Formation instructions */
.formation-instructions {
    background: rgba(52, 73, 94, 0.7);
    border: 1px solid #34495e;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #bdc3c7;
    text-align: center;
}

.formation-instructions .drag-icon {
    color: #3498db;
    margin-right: 5px;
}

/* Mobile responsive drag and drop */
@media screen and (max-width: 768px) {
    .chosen-unit-item {
        padding: 8px;
        gap: 8px;
        min-height: 50px;
        min-width: 85px; /* Larger for better touch targets */
    }
    
    .drag-handle {
        font-size: 16px;
        min-width: 20px;
        padding: 6px;
        /* Larger touch target for mobile */
        background: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
    }
    
    .chosen-unit-img {
        width: 38px;
        height: 38px;
    }
    
    .remove-chosen-unit-btn {
        min-width: 32px;
        min-height: 32px;
        font-size: 14px;
        padding: 6px;
        /* Ensure button is clickable on mobile */
        position: relative;
        z-index: 10;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        pointer-events: auto;
    }
    
    #chosen-units-list {
        gap: 8px;
    }
    
    /* Enhanced drag-over feedback for mobile */
    .chosen-unit-item.drag-over {
        transform: scale(1.08);
        box-shadow: 0 0 20px rgba(241, 196, 64, 0.7);
    }
}

@media screen and (max-width: 480px) {
    .chosen-unit-item {
        padding: 8px;
        gap: 6px;
        min-height: 48px;
        min-width: 80px;
    }
    
    .chosen-unit-item.dragging {
        transform: rotate(3deg) scale(1.08);
        /* More pronounced feedback on small screens */
        box-shadow: 0 10px 30px rgba(231, 76, 60, 0.6);
    }
    
    .drag-handle {
        font-size: 18px;
        min-width: 24px;
        padding: 8px;
        /* Even larger touch target for small screens */
        background: rgba(255, 255, 255, 0.15);
    }
    
    .chosen-unit-img {
        width: 36px;
        height: 36px;
    }
    
    .remove-chosen-unit-btn {
        min-width: 36px;
        min-height: 36px;
        font-size: 16px;
        padding: 8px;
        /* Enhanced touch properties for very small screens */
        position: relative;
        z-index: 15;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        pointer-events: auto;
        /* Better visual feedback */
        transition: all 0.1s ease;
    }
    
    .remove-chosen-unit-btn:active {
        transform: scale(0.95);
        background: #c0392b;
    }
    
    .formation-instructions {
        font-size: 0.8rem;
        padding: 8px;
    }
    
    #chosen-units-list {
        gap: 6px;
    }
    
    /* Better mobile visual feedback */
    .chosen-unit-item.drag-over {
        transform: scale(1.1);
        animation: pulse 0.3s ease-in-out infinite alternate;
    }
}

/* Animation for successful reorder */
@keyframes reorderSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); background: linear-gradient(135deg, #27ae60, #2ecc71); }
    100% { transform: scale(1); }
}

.chosen-unit-item.reorder-success {
    animation: reorderSuccess 0.5s ease;
}

/* Disable text selection during drag */
.chosen-unit-item.dragging * {
    user-select: none;
    pointer-events: none;
}

/* Audio Settings Modal Styles */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #555;
    margin-bottom: 20px;
}

.modal-header h3 {
    margin: 0;
    color: #4a90e2;
    font-size: 1.3em;
}

.modal-header .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.modal-header .close:hover,
.modal-header .close:focus {
    color: #fff;
    text-decoration: none;
}

.modal-body {
    padding: 0;
}

.modal-footer {
    padding-top: 20px;
    border-top: 1px solid #555;
    margin-top: 20px;
    text-align: center;
}

.audio-setting-group {
    margin-bottom: 15px;
}

.audio-setting-group h4 {
    margin-bottom: 8px;
    color: #4a90e2;
    font-size: 1.1em;
}

.audio-setting-group label {
    color: #e0e0e0;
    font-size: 14px;
}

.audio-setting-group input[type="checkbox"] {
    margin-right: 8px;
}

.audio-setting-group input[type="range"] {
    width: 100%;
    margin-top: 8px;
}

.audio-setting-group p {
    margin: 5px 0 0 0;
    color: #888;
    font-size: 12px;
}

/* Toast Animation Styles */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ===== BATTLE SIDEBAR CONTAINER ===== */
#battle-sidebar-container {
    display: flex;
    flex-direction: column; /* Always stack vertically - chat on top, unit info below */
    gap: 15px;
    margin-top: 15px;
}

/* ===== UNIT INFO PANEL STYLES ===== */
#unit-info-panel {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 12px;
    padding: 15px;
    min-height: 180px;
    max-height: 250px;
    overflow-y: auto;
    font-family: Arial, sans-serif; /* Vietnamese font support */
    /* Remove flex: 1 to allow natural sizing */
    min-width: 250px;
}

.unit-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(74, 144, 226, 0.2);
    padding-bottom: 8px;
}

.unit-info-header h3 {
    color: #4a90e2;
    font-size: 1.3em;
    margin: 0;
    text-align: left;
}

.info-panel-toggle {
    background: rgba(74, 144, 226, 0.2);
    border: 1px solid rgba(74, 144, 226, 0.4);
    border-radius: 6px;
    color: #e0e0e0;
    cursor: pointer;
    padding: 5px 8px;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.info-panel-toggle:hover {
    background: rgba(74, 144, 226, 0.4);
}

.unit-info-basic {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    align-items: center;
}

.unit-info-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 2px solid rgba(74, 144, 226, 0.3);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.1);
}

.unit-info-details {
    flex: 1;
}

.unit-info-name {
    font-size: 1.1em;
    font-weight: bold;
    color: #f5f5f5;
    margin-bottom: 5px;
}

.unit-info-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-item {
    font-size: 0.9em;
    color: #c0c0c0;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(74, 144, 226, 0.2);
}

.unit-info-abilities {
    border-top: 1px solid rgba(74, 144, 226, 0.2);
    padding-top: 12px;
}

.ability-title {
    font-size: 1em;
    font-weight: bold;
    color: #4a90e2;
    margin-bottom: 8px;
}

#unit-ability-list {
    font-size: 0.75em;
    line-height: 1.4;
}

.ability-item {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #4a90e2;
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    color: #e0e0e0;
}

.ability-item:last-child {
    margin-bottom: 0;
}

.ability-placeholder {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

/* Team color variations */
.unit-info-panel.blue-team .unit-info-img {
    border-color: #4a90e2;
}

.unit-info-panel.red-team .unit-info-img {
    border-color: #f44336;
}

.unit-info-panel.blue-team .ability-item {
    border-left-color: #4a90e2;
}

.unit-info-panel.red-team .ability-item {
    border-left-color: #f44336;
}

/* Scrollbar styling for unit info panel */
#unit-info-panel::-webkit-scrollbar {
    width: 6px;
}

#unit-info-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#unit-info-panel::-webkit-scrollbar-thumb {
    background: rgba(74, 144, 226, 0.5);
    border-radius: 3px;
}

#unit-info-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 144, 226, 0.7);
}