/* styles.css - v7 - Re-enabling Content Scroll, Keeping Condensing */

:root {
    --primary-font: 'Tahoma'x;
    --text-color: #333;
    --parchment-text: #e6d7a3;
    --wood-bg: #3c2f22;
    --wood-border: #5e4b33;
    --wood-hover: #4a3b2a;
    --light-bg: rgba(255, 255, 255, 0.9);
    --table-bg: #e0d6c7;
    --table-cell-bg: #e9e2d9;
    --table-header-bg: #c8c1b7;
    --button-bg: #c4b091;
    --button-text: black;
    --unread-bg: #dc3545;
    --unread-text: #fff;
    --unread-hover: #c82333;
    --success-bg: #28a745;
    --link-color: #0056b3;
    --max-width: 768px; /* Keep wider width */
    --resource-table-max-width: 768px; /* Keep wider width */
    --border-radius: 4px;
    --icon-size: 18px;
    --base-font-size: 10px;
    --small-font-size: 8px;
}

a {
  color: #14377e;
  text-decoration: none; /* no underline */
}

body {
    font-family: var(--primary-font);
    font-size: var(--base-font-size);
    background-color:#25211f;
    background-size: cover;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form { margin: 0; padding: 0; }

/* --- Layout Containers --- */
#game-container {
    width: 98%;
    max-width: var(--max-width);
    display: flex;
    flex-direction: column;
    height: 94vh; /* Use full viewport height */
    max-height: 94vh; /* Prevent exceeding viewport */
    margin: 0 auto;
    padding: 3px;
    box-sizing: border-box;
}

#main-content-header-menu { /* Header Dropdowns */
    width: 100%; padding: 3px 0; background: #332c26; display: flex;
    justify-content: space-between; align-items: center; margin-bottom: 0px;
    gap: 4px; flex-shrink: 0;
}
#main-content-header-menu select {
    flex: 1; height: 34px; font-size: 11px; background-color: var(--wood-bg);
    color: var(--parchment-text); border: 1px solid var(--wood-border);
    border-radius: var(--border-radius); padding: 0 4px; cursor: pointer;
    font-family: 'Georgia', serif; font-weight: bold; appearance: none;
    text-align: center; text-align-last: center;
}
#main-content-header-menu select.unread { background-color: var(--unread-bg); color: var(--unread-text); }
#main-content-header-menu select.pending { background-color: var(--success-bg); color: var(--unread-text); }

/* --- Protection Message & Resource Bar (Condensed) --- */
.protection-message-table { /* Protection msg */
    width: 100%; margin-bottom: 4px; border-collapse: collapse; flex-shrink: 0;
}
.protection-message-table td { background-color: #ceffff; color: #0f0f0f; font-size: 8px; padding: 1px 1px; border: 1px solid #a1cccc; border-radius: var(--border-radius); }
.protection-message-table td:first-child { text-align: center; }
.protection-message-table td:last-child { width: 70px; padding: 1px;}
.protection-message-table button { width: 100%; height: 100%; font-size: 8px; padding: 1px;}

.resource_table_container { /* Resource bar container */
    width: 100%; display: flex; justify-content: center; margin-bottom: 2px; flex-shrink: 0;
}
.resource_table { /* Resource bar table */
    background-color: transparent; border-radius: 0; width: 100%; max-width: var(--resource-table-max-width);
    text-align: center; font-size: var(--small-font-size); margin: 0; vertical-align: middle;
    border-collapse: separate; border-spacing: 3px; border: none; table-layout: fixed;
}
.resource_table td { /* Resource cells */
    width: 25%; padding: 3px 4px; border-radius: var(--border-radius); background-color: var(--table-cell-bg);
    border: 1px solid #b8b0a4; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; line-height: var(--icon-size);
}
.resource_table img { width: var(--icon-size); height: var(--icon-size); border-radius: 25%; vertical-align: middle; margin-right: 3px; flex-shrink: 0; }
.resource_table span { font-size: 10px; font-weight: bold; vertical-align: middle; line-height: normal; display: inline-block; max-width: calc(100% - 21px); overflow: hidden; text-overflow: ellipsis; }




/* --- Main Content Area (SCROLLABLE) --- */
#main-content {
    flex-grow: 1; /* Takes remaining vertical space */
    width: 100%;
    padding: 8px; /* Restore some padding */
    background: var(--light-bg);
    border-radius: var(--border-radius);
    overflow-y: auto; /* ! IMPORTANT: Allow vertical scrolling again */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    min-height: 150px; /* Give it a minimum height in case content is very short */
    box-sizing: border-box;
    /* Removed fixed height */
    /* Removed flex-shrink: 0 */
}

/* --- Menus (Condensed) --- */
.game-menu-1 { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 3px; width: 100%; margin-bottom: 6px; }
.menu-item, .menu-item-unread {
    display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--wood-bg);
    border: 1px solid var(--wood-border); border-radius: var(--border-radius); padding: 5px; min-height: 35px;
    text-align: center; text-decoration: none; color: var(--parchment-text); font-family: 'Georgia', serif;
    font-size: 11px; font-weight: bold; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, background-color 0.2s ease;
    flex-grow: 1; flex-basis: calc(25% - 6px); line-height: 1.1;
}
.menu-item br { display: none; }
.menu-item-unread { background-color: var(--unread-bg); color: var(--unread-text); }
.menu-item:hover { transform: translateY(-1px); background-color: var(--wood-hover); }
.menu-item-unread:hover { transform: translateY(-1px); background-color: var(--unread-hover); }





/* --- Content Tables (Condensed) --- */
.content-table {
    border-collapse: collapse; width: 100%; margin: 8px 0; font-size: var(--small-font-size);
    border-radius: var(--border-radius); overflow: hidden; border: 1px solid #999; background-color: var(--table-cell-bg); table-layout: fixed;
}
.content-table th, .content-table td { border: 1px solid #bbb; padding: 5px; text-align: center; vertical-align: middle; word-wrap: break-word; }
.content-table th { background-color: var(--table-header-bg); font-weight: bold; color: #000; font-size: 11px; }
.content-table img { vertical-align: middle; margin-right: 3px; width: var(--icon-size); height: var(--icon-size); }
.content-table td:nth-child(1) { text-align: left; padding-left: 4px; }
.content-table tr > td:nth-child(1) { width: 20%; } .content-table tr > td:nth-child(2) { width: 30%; text-align: left; }
.content-table tr > td:nth-child(3) { width: 20%; } .content-table tr > td:nth-child(4) { width: 15%; }
.content-table tr > td:nth-child(5) { width: 15%; padding: 1px; }
.content-table tr > td:nth-child(5) .button { width: 95%; padding: 4px; font-size: 9px; min-height: 22px; }


.content-table-browser {
    border-collapse: collapse; width: 100%; margin: 8px 0; font-size: var(--small-font-size);
    border-radius: var(--border-radius); overflow: hidden; border: 1px solid #999; background-color: var(--table-cell-bg); table-layout: fixed;
}
.content-table-browser th, .content-table-browser td { border: 1px solid #bbb; padding: 5px; text-align: left; vertical-align: middle; word-wrap: break-word; }
.content-table-browser th { background-color: var(--table-header-bg); font-weight: bold; color: #000; font-size: 11px; }










/* --- Buttons (Condensed) --- */
.button, .button_attack, .button_pages {
    background-color: var(--button-bg); color: var(--button-text); font-weight: bold; border: 1px solid #8b7d6b; padding: 6px 8px;
    text-align: center; text-decoration: none; display: inline-block; font-size: 10px; margin: 1px; cursor: pointer;
    border-radius: var(--border-radius); transition: background-color 0.2s ease, transform 0.1s ease;
    min-height: 28px; box-sizing: border-box; line-height: normal;
}











/* ... (hover, active, disabled, color overrides remain the same) ... */
.button:hover, .button_attack:hover, .button_pages:hover { background-color: #a89880; transform: translateY(-1px); }
.button:active, .button_attack:active, .button_pages:active { transform: scale(0.98); }
button:disabled, input[type="submit"]:disabled { background-color: #ccc; border-color: #bbb; cursor: not-allowed; opacity: 0.7; }
button.danger { background-color: var(--unread-bg) !important; color: white !important; border-color: #b22222 !important; }
button.danger:hover { background-color: var(--unread-hover) !important; }
button.success { background-color: var(--success-bg) !important; color: white !important; border-color: #1e7e34 !important;}
button.success:hover { background-color: #218838 !important; }









/* --- Footer Chat & Links (Condensed) --- */
#chat-container {
    width: 100%;
    max-width: var(--max-width); /* Keep this if you want a max width on large screens, remove if always 100% */
    border-radius: var(--border-radius);
    background: rgba(220, 220, 220, 0.95);
    padding: 5px;
    margin-top: 5px;
    box-sizing: border-box;
    flex-shrink: 0;
}

#chat-box {
    height: 60px;
    overflow-y: scroll;
    border: 1px solid #bbb;
    padding: 4px;
    background-color: #fff;
    font-size: 10px;
    text-align: left;
    border-radius: 3px;
    margin-bottom: 4px;
}
#chat-box p { margin: 1px 0; line-height: 1.2; }

/* --- NEW Styles for Flexbox Input Area --- */
#chat-input-area {
    display: flex;
    gap: 5px;
    align-items: center; /* Vertically align items in the input area */
    width: 100%; /* Ensure it tries to take full width */
}

#chat-input-area #message-input {
    flex-grow: 1; /* Allows input to take up remaining space */
    padding: 5px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    margin: 0;
    height: 30px; /* Match button height approx */
    box-sizing: border-box;
}

#chat-input-area button {
     flex-shrink: 0; /* Prevent send button from shrinking */
     padding: 5px 8px;
     font-size: 10px;
     background-color: var(--success-bg);
     margin: 0;
     height: 30px; /* Match input height approx */
     box-sizing: border-box;
     color: white; /* Added for better visibility on green */
     border: 1px solid #1e7e34; /* Added border */
}
#chat-input-area button:hover {
    background-color: #218838 !important; /* Darker green on hover */
}


#chat-channel-buttons {
    display: flex; /* Keep channel buttons in a row */
    gap: 3px;      /* Add spacing between channel buttons */
    flex-shrink: 0; /* Prevent the container from shrinking */
}

#chat-channel-buttons button {
    padding: 4px 6px;
    margin: 0; /* Removed default margin */
    font-size: 10px;
    height: 30px; /* Match input height approx */
    box-sizing: border-box;
    background-color: var(--button-bg); /* Default button style */
    color: var(--button-text);
    border: 1px solid #8b7d6b;
    border-radius: var(--border-radius);
    cursor: pointer;
}

#chat-channel-buttons button:hover {
     background-color: #a89880; /* Default hover */
}

/* --- NEW Style for Active Channel Button --- */
#chat-channel-buttons button.active {
    background-color: #5e4b33; /* Darker wood color */
    color: #ffffff; /* White text */
    border: 1px solid #e6d7a3; /* Parchment border */
    font-weight: bold;
    /* text-decoration: underline; */ /* Optional: Add underline */
}

/* --- Remove styles for the old table if they exist --- */
/* #chat-container div:last-of-type > table { ... } */


/* Ensure other relevant styles from your original file are preserved */

/* Example of keeping footer info bar styles */
#footer-info-bar { /* Footer info */
    width: 100%; max-width: var(--max-width); margin-top: 4px; background: var(--light-bg);
    border-radius: var(--border-radius); padding: 4px; box-sizing: border-box; flex-shrink: 0;
}
#footer-info-bar table { width: 100%; border-collapse: collapse; }
#footer-info-bar td { text-align: center; font-size: 10px; padding: 3px; vertical-align: middle; }
#footer-info-bar a { text-decoration: none; color: var(--link-color); font-weight: bold; }
#footer-info-bar .menu-item { font-size: 9px !important; padding: 4px 6px; min-height: 24px; }

/* --- Responsive Adjustments (Keep or adjust as needed) --- */
@media (max-width: 480px) {
	#chat-box { height: 55px; font-size: 9px;}
	#chat-input-area #message-input,
    #chat-input-area button,
    #chat-channel-buttons button {
        font-size: 9px;
        padding: 4px;
        height: 28px; /* Slightly smaller height */
    }
	#footer-info-bar td { font-size: 9px; padding: 2px; }
    #footer-info-bar .menu-item { font-size: 8px !important; padding: 3px 5px; min-height: 22px; }
	.resource_table td {
        white-space: normal; /* Allow wrapping */
        overflow: visible;   /* Allow content to be visible if it wraps */
         /* You might slightly reduce padding */
         padding: 3px 2px;
    }
    .resource_table span {
        white-space: normal;  /* Allow wrapping */
        overflow: visible;    /* Ensure wrapped text is visible */
        text-overflow: clip;  /* Or initial; remove ellipsis */
        display: inline-block; /* Helps with wrapping */
        max-width: 100%;      /* Allow span to use full cell width */
        font-size: 9px;       /* Optionally reduce font size */
    }
}






#footer-info-bar { /* Footer info */
    width: 100%; max-width: var(--max-width); margin-top: 4px; background: var(--light-bg);
    border-radius: var(--border-radius); padding: 4px; box-sizing: border-box; flex-shrink: 0;
}
#footer-info-bar table { width: 100%; border-collapse: collapse; }
#footer-info-bar td { text-align: center; font-size: 10px; padding: 3px; vertical-align: middle; }
#footer-info-bar a { text-decoration: none; color: var(--link-color); font-weight: bold; }
#footer-info-bar .menu-item { font-size: 9px !important; padding: 4px 6px; min-height: 24px; }












/* --- Responsive Adjustments (Adjusted for scrollable content) --- */
@media (max-width: 480px) {
    :root { --resource-table-max-width: 100%; }
    #game-container { padding: 2px; }
	#main-content-header-menu select { height: 32px; font-size: 10px; }
    #main-content { padding: 4px; } /* Can reduce padding */
	.resource_table td { padding: 3px 2px; }
	.resource_table span { font-size: 9px !important; }
    .game-menu-1 .menu-item { flex-basis: calc(50% - 6px); font-size: 10px;} /* 2 wide */
	.content-table th, .content-table td { font-size: 9px; padding: 3px; }
	.button, .button_attack, .button_pages { font-size: 9px; padding: 5px 6px; min-height: 26px; }
	#chat-box { height: 55px; font-size: 9px;}
	#chat-container input[type="text"], #chat-container button { font-size: 9px; padding: 4px; }
	#footer-info-bar td { font-size: 9px; padding: 2px; }
    #footer-info-bar .menu-item { font-size: 8px !important; padding: 3px 5px; min-height: 22px; }
}


/* === Player Info Bar (Updated for Region & Timer) === */
.player-info-bar {
    display: flex;
    align-items: center;
    /* justify-content: flex-start; */ /* Remove this if using spacer */
    padding: 5px;
    margin-bottom: 0px;
    background-color: rgba(60, 47, 34, 0.8);
    border: 1px solid #5e4b33;
    border-radius: var(--border-radius);
    gap: 8px; /* Slightly reduce gap */
	width:100%;
    max-width: var(--resource-table-max-width);
    margin-left: 0;
    margin-right: auto;
    box-sizing: border-box;
    height: 42px; /* Optional: Set a fixed height */
}

.player-info-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    border-radius: 4px;
    border: 1px solid #7a6b5a;
    background-color: #c4b091;
    flex-shrink: 0; /* Prevent icons from shrinking */
}

.player-name-plaque {
    background-color: #e0d6c7;
    color: #3c2f22;
    font-weight: bold;
    padding: 5px 10px; /* Adjust padding */
    border-radius: var(--border-radius);
    border: 1px solid #999;
    font-size: 13px; /* Slightly smaller font */
    text-align: center;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0; /* Prevent name plaque from shrinking too much */
	
}

/* New Spacer Element */
.info-bar-spacer {
    flex-grow: 1; /* Takes up all available space */
}

/* New Tick Timer Plaque */
#tick-timer-plaque {
    background-color: #cbb198; /* Lighter, subtle background */
    color: #2c1f12; /* Darker text */
    font-size: 10px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: var(--border-radius);
    border: 1px solid #a89880;
    flex-shrink: 0; /* Prevent timer from shrinking */
    min-width: 50px; /* Ensure enough space for "Tick: MM:SS" */
    text-align: center;
	height:12px;
	line-height:12px;
}

#tick-timer {
    /* Specific styling for the time text if needed */
    font-family: monospace; /* Makes numbers align better */
}


/* === Info Popup Styling (Add this to styles_new.css) === */
.info-popup {
    display: none; /* Hidden by default */
    position: absolute; /* Position relative to the viewport or a positioned ancestor */
    background-color: #f0eada; /* Light parchment background */
    border: 1px solid #a89880; /* Darker border */
    border-radius: var(--border-radius);
    padding: 10px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    z-index: 100; /* Ensure it's above other elements */
    max-width: 250px; /* Limit width */
    font-size: 12px;
    color: #3c2f22; /* Dark text */
    pointer-events: none; /* Prevent popup from blocking clicks on elements underneath */
}

.info-popup h4 {
    margin: 0 0 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #c4b091;
    font-size: 14px;
    color: #000;
}

.info-popup p {
    margin: 3px 0;
}

.info-popup .bonus {
    color: #006400; /* Dark green for bonuses */
    font-weight: bold;
}

.info-popup .penalty {
    color: #8B0000; /* Dark red for penalties */
    font-weight: bold;
}

/* === End Player Info Bar === */




/* Add or adjust in styles.css */

.error-message {
    color: #dc3545; /* Red */
    font-weight: bold;
    border: 1px solid #dc3545;
    padding: 5px;
    margin-bottom: 5px;
    background-color: #f8d7da;
    border-radius: var(--border-radius);
}

.success-message {
    color: #155724; /* Dark Green */
    font-weight: bold;
    border: 1px solid #28a745;
    padding: 5px;
    margin-bottom: 5px;
    background-color: #d4edda;
    border-radius: var(--border-radius);
}

.button-group { /* Optional wrapper for better button spacing */
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

.content-table tr.application-row td {
    background-color: #e8ffed; /* Light green for applications */
}

button.pending {
    /* Style for buttons indicating pending items */
    background-color: #ffc107 !important; /* Example: Yellow */
    color: black !important;
    border-color: #d39e00 !important;
}
button.pending:hover {
     background-color: #e0a800 !important;
}

button.small { /* Optional class for smaller buttons */
    padding: 3px 6px;
    font-size: 9px;
    min-height: 22px;
}














/*Game Guide Navigation Button*/
		
		#go-to-top {
		  position: sticky;
		  top: 0px;
		  right: 10px;
		  z-index: 99;
		  font-size: 18px;
		  border: none;
		  outline: none;
		  background-color: #555;
		  color: white;
		  cursor: pointer;
		  padding: 0px 10px;
		  border-radius: 5%;
		  margin-left: auto;
		  display: none;
		}

		#go-to-top:hover {
		  background-color: #777;
		}
		
		











/*Battle Animation*/




@keyframes clash {
    0% { transform: translateX(0); }
    50% { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

#attacker-army, #defender-army {
    font-size: 24px;
    padding: 20px;
}

.battle-start #attacker-army {
    animation: clash 1s infinite;
}

.battle-start #defender-army {
    animation: clash 1s infinite reverse;
}

#battle-outcome {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}

#battle-animation {
    display: none;
}