/* css/styles.css */

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Font */
@font-face {
    font-family: 'Harlow Solid';
    src: url('../media/harlow-solid.ttf') format('truetype');
}

/* Base Styles (Light Mode by Default) */
body {
    font-family: Roboto, Arial, sans-serif; /* Updated to Roboto for body text */
    min-height: 100vh;
    position: relative;
    margin: 5% 0;
    background: #fff; /* Default light background */
    color: #000; /* Default light text */
}

/* Dark Mode Styles */
body.dark-mode {
    background: #1a1a1a; /* Dark background */
    color: #fff; /* White text */
}

/* Apply dark mode based on JavaScript variable */
body.dark-mode .frontpage_top,
body.dark-mode .frontpage_middle,
body.dark-mode .frontpage_bottom,
body.dark-mode .game_detail_content,
body.dark-mode .game_view,
body.dark-mode #detail_user_content,
body.dark-mode .user-character-short-profile,
body.dark-mode .user-character-activities,
body.dark-mode #detail_game_content,
body.dark-mode .game_detail_resources,
body.dark-mode .game_detail_resources_logged_out,
body.dark-mode .resource_topics,
body.dark-mode .resource_icons,
body.dark-mode .icon-row.bottom-row,
body.dark-mode .resource_selectors button,
body.dark-mode .resource_content,
body.dark-mode .chat_output_container,
body.dark-mode .chat_message .chat_username,
body.dark-mode .chat_message .chat_message_text,
body.dark-mode .chat_message .chat_timestamp,
body.dark-mode #chat_loading,
body.dark-mode #chat_status,
body.dark-mode #chat_input_field,
body.dark-mode #send_chat,
body.dark-mode .server_content,
body.dark-mode .server_content_userlist,
body.dark-mode .server_content_characters,
body.dark-mode .server_content_interaction,
body.dark-mode .server_interaction_add_friend_button,
body.dark-mode .overlay-content,
body.dark-mode .modal-content {
    background: #1a1a1a; /* Dark background */
    color: #fff; /* White text */
    border-color: #00cc00; /* Accent border */
}

/* Specific Dark Mode Adjustments */
body.dark-mode .frontpage_top {
    background: #1a1a1a;
}

body.dark-mode .frontpage_middle,
body.dark-mode .frontpage_bottom {
    background: #1a1a1a;
}

body.dark-mode .ribbon-content a {
    color: #fff;
}

body.dark-mode .game_detail_content {
    border: 1px solid #00cc00;
}

body.dark-mode .game_view {
    border-right: 2px solid #00cc00;
    background: #1a1a1a;
}

body.dark-mode .game_view #refresh_countdown {
    color: #fff;
}

body.dark-mode #detail_user_content {
    background-color: #2a2a2a; /* Slightly lighter dark for contrast */
}

body.dark-mode .user-character-short-profile {
    background-color: #2a2a2a;
    border: 1px solid #00cc00;
}

body.dark-mode .user-character-activities {
    background-color: #333;
}

body.dark-mode .activity-button {
    background-color: #333;
    color: #fff;
    border: 1px solid #00cc00;
}

body.dark-mode .activity-button:hover .tooltip {
    background-color: #00cc00;
    color: #1a1a1a;
}

body.dark-mode .activity2timeDropdown {
    background: #333;
    color: #fff;
    border: 1px solid #00cc00;
}

body.dark-mode .remaining-time {
    color: #ccc;
}

body.dark-mode #detail_game_content {
    border-left: 2px solid #00cc00;
}

body.dark-mode .game_detail_resources {
    border: 1px solid #00cc00;
}

body.dark-mode .game_detail_resources_logged_out {
    background-color: #2a2a2a;
    border: 1px solid #00cc00;
}

body.dark-mode .resource_topics {
    border-right: 1px solid #00cc00;
}

body.dark-mode .icon-row.bottom-row {
    background-color: #2a2a2a;
    color: #fff;
}

body.dark-mode .resource_selectors button {
    background-color: #333;
    color: #fff;
    border: 1px solid #00cc00;
}

body.dark-mode .resource_selectors button.active {
    background-color: #00cc00;
    color: #1a1a1a;
}

body.dark-mode .resource_content {
    background: #1a1a1a;
}

body.dark-mode .chat_output_container {
    background-color: #2a2a2a;
    border: 1px solid #00cc00;
}

body.dark-mode .chat_message .chat_username {
    color: #00cc00; /* Accent color for usernames */
}

body.dark-mode .chat_message .chat_message_text {
    color: #fff;
}

body.dark-mode .chat_message .chat_timestamp {
    color: #ccc;
}

body.dark-mode #chat_loading {
    color: #ccc;
}

body.dark-mode #chat_status {
    color: #fff;
}

body.dark-mode #chat_input_field {
    background: #333;
    color: #fff;
    border: 1px solid #00cc00;
}

body.dark-mode #send_chat {
    background: #333;
    color: #fff;
    border: 1px solid #00cc00;
}

body.dark-mode .server_content {
    background-color: #2a2a2a;
}

body.dark-mode .server_content_userlist {
    border-right: 1px solid #00cc00;
}

body.dark-mode .server_content_characters {
    border-right: 1px solid #00cc00;
}

body.dark-mode .server_interaction_add_friend_button {
    background-color: #333;
    color: #fff;
    border: 1px solid #00cc00;
}

body.dark-mode .overlay-content {
    background-color: #1a1a1a;
    border: 1px solid #00cc00;
}

body.dark-mode .modal-content {
    background-color: #1a1a1a;
}

/* Frontpage Footer (Always Dark Mode) */
.frontpage_footer {
    height: 5vh;
    width: 100%;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    z-index: 2000;
    padding: 0 20px;
}

.frontpage_footer a {
    color: #00cc00; /* Accent color */
    text-decoration: none;
}

.frontpage_footer a:hover {
    text-decoration: underline;
}

/* Frontpage Sections */
.frontpage_top {
    height: 20%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    padding: 0;
}

.frontpage_middle {
    height: 40%;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: #fff;
    box-sizing: border-box;
}

.frontpage_bottom {
    height: 30%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: #fff;
}

.scrollable-ribbons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ribbon {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ribbon-label {
    writing-mode: horizontal-tl;
    text-orientation: mixed;
    cursor: pointer;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.ribbon-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80%;
}

.arrow-left,
.arrow-right {
    width: 30px;
    height: 50px;
    cursor: pointer;
    margin: 0 10px;
}

.ribbon-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    overflow-x: hidden;
    white-space: nowrap;
}

.ribbon-content a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    width: 18%;
    min-width: 150px;
}

.ribbon-content img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #ccc;
}

.ribbon-content span {
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
}

/* Container Layout */
.detail_container {
    display: flex;
    flex-direction: column;
    /*height: calc(100vh - 120px);
    padding: 20px;
    gap: 20px;*/
    position: fixed;
    /*top: 60px;
    bottom: 60px;*/
    left: 0;
    right: 0;
    overflow: hidden;
}

.game_detail_content {
    height: 50%;
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    min-height: 0;
}

/* Game View */
.game_view {
    flex: 0 0 20%;
    height: 100%;
    border-right: 2px solid #000;
    border-radius: 5px 0 0 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}

.game_view h2 {
    margin-bottom: 10px;
    font-size: 1.5em;
    text-align: center;
}

.game_logo {
    margin-bottom: 10px;
}

.game_logo img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.game_view #refresh_countdown {
    font-size: 1em;
    font-weight: bold;
    color: #333;
}

/* Detail User Content */
#detail_user_content {
    flex: 0 0 40%;
    padding: 10px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    box-sizing: border-box;
    min-height: 0;
    justify-content: space-between;
    background-color: darkgray;
}

.user-character-section {
    display: flex;
    width: 100%;
    height: 20%;
    gap: 5px;
    min-height: 0;
}

.user-character-short-profile,
.user-character-activities {
    height: 100%;
    box-sizing: border-box;
}

.user-character-short-profile {
    width: 40%;
    border: 1px solid #000;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #fff;
}

/* Overall container */
.user-character-activities {
    font-family: Roboto, Arial, sans-serif; /* Updated to Roboto */
    margin: 0;
    height: 100%;
    width: 60%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

/* Sub-container */
.activity-buttons {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 2px;
    justify-content: space-evenly;
    align-items: center;
}

/* Line 1: Dropdown container */
.dropdown-container {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Dropdown */
.activity2timeDropdown {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 200px;
    margin-bottom: 5px;
    font-size: 0.8em;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px;
}

/* Line 2: Buttons container */
.buttons-container {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Activity buttons */
.activity-button {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 3px 6px;
    font-size: 0.6em;
    cursor: pointer;
    flex: 1;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    position: relative;
}

/* Hover and Active States for Activity Buttons */
.activity-button:hover {
    background-color: #00cc00; /* Accent background */
    color: #1a1a1a; /* Dark text for contrast */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.activity-button:active {
    background-color: #009900; /* Darker accent for active state */
    color: #fff;
}

.activity-button:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Tooltip */
.activity-button .tooltip {
    font-family: Roboto, Arial, sans-serif;
    cursor: pointer;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    white-space: nowrap;
    z-index: 100;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.activity-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Line 3: Remaining time container */
.remaining-time-container {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#game_event_prev, #game_event_next, #game_news_prev, #game_news_next {
    font-family: monospace;
    font-size: 14px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
}

#game_event_prev:disabled, #game_event_next:disabled, #game_news_prev:disabled, #game_news_next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Remaining time spans */
.remaining-time {
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 0.6em;
    color: #666;
    flex: 1;
    text-align: center;
    min-height: 16px;
}

/* Ensure user-character-section lays out its children correctly */
.user-character-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    gap: 5px;
    min-height: 0;
}

.user-character-short-profile {
    width: 40%;
    height: 100%;
    border: 1px solid #000;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #fff;
    box-sizing: border-box;
}

.user-character-short-profile .character_item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.user-character-short-profile .character_icon {
    width: 30%;
    height: 100%;
    cursor: pointer;
}

.user-character-short-profile .character_icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-character-short-profile .character_info {
    flex: 1;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: 0.8em;
    line-height: 1.2;
    overflow: hidden;
}

.user-character-short-profile .character_info .charactername,
.user-character-short-profile .character_info .powerlevel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.user-character-short-profile .character_info .charactername {
    text-align: left;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-character-short-profile .character_info .powerlevel {
    text-align: right;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}

.user-character-short-profile .character_info .servername {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
}

.activity-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 2px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: baseline;
}

.activity-button-container {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-between;
    align-items: flex-start;
}

.activity-buttons .buttons-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
    justify-content: space-between;
}

.activity-button {
    padding: 3px 6px;
    font-size: 0.6em;
    cursor: pointer;
    flex: 0 0 40%;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px; /* Increased for touch-friendliness */
    background-color: #fff;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    position: relative;
    padding: 12px 20px; /* Increased padding for touch-friendliness */
    font-size: 16px; /* Increased font size for touch-friendliness */
    min-width: 100px; /* Minimum width for touch targets */
}

.activity-button:disabled {
    cursor: default;
    opacity: 0.5;
}

.activity-button[remaining-time]:after {
    content: " (" attr(remaining-time) ")";
    font-size: 0.5em;
    color: #666;
}

.activity-button .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    white-space: nowrap;
    z-index: 100;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.activity-button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.activity2timeDropdown {
    width: 80%;
    margin-bottom: 0;
}

/* Container for each info section */
.info-container {
    margin-bottom: 20px;
    display: block;
    clear: both;
    min-height: 50px;
}

.info-header {
    font-family: 'Harlow Solid', cursive;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    display: block;
    clear: both;
}

.info-row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.info-content {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure clickable lines are styled appropriately */
.event-info-line,
.news-info-line {
    cursor: pointer;
    color: #007bff;
    text-decoration: underline;
}

body.dark-mode .event-info-line,
body.dark-mode .news-info-line {
    color: #00cc00; /* Accent color in dark mode */
}

.event-info-line:hover,
.news-info-line:hover {
    color: #0056b3;
}

body.dark-mode .event-info-line:hover,
body.dark-mode .news-info-line:hover {
    color: #009900; /* Darker accent on hover */
}

/* User Character New and View */
#user_character_newAndView {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

#add_character_button {
    padding: 5px 10px;
    font-size: 0.9em;
    height: 100%;
}

#add_character_button a {
    display: block;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #000;
}

body.dark-mode #add_character_button a {
    background-color: #333;
    border: 1px solid #00cc00;
    color: #fff;
}

#add_character_button:hover {
    cursor: pointer;
}

#add_character_button[title]:hover:after {
    content: attr(title);
    position: absolute;
    background: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-size: 0.8em;
    z-index: 1000;
    white-space: nowrap;
}

body.dark-mode #add_character_button[title]:hover:after {
    background: #00cc00;
    color: #1a1a1a;
}

#user_character_editView {
    padding: 5px 10px;
    font-size: 0.9em;
    height: 100%;
}

#user_character_reportButton {
    padding: 5px 10px;
    font-size: 0.9em;
    height: 100%;
    background-color: red;
    color: black;
    margin-left: 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

body.dark-mode #user_character_reportButton {
    background-color: #ff4500; /* Adjusted for dark mode visibility */
    color: #fff;
}

#user_character_reportButton:hover {
    background-color: darkred;
}

body.dark-mode #user_character_reportButton:hover {
    background-color: #cc3700;
}

.edit-view-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

body.dark-mode .edit-view-button {
    background-color: #00cc00;
    color: #1a1a1a;
}

.edit-view-button:hover {
    background-color: #0056b3;
}

body.dark-mode .edit-view-button:hover {
    background-color: #009900;
}

/* Detail Game Content */
#detail_game_content {
    flex: 0 0 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 2px solid #000;
    box-sizing: border-box;
    min-height: 0;
}

#timerInfoDetail,
#eventInfoDetail,
#socialInfoDetails {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

body.dark-mode #timerInfoDetail,
body.dark-mode #eventInfoDetail,
body.dark-mode #socialInfoDetails {
    border-bottom: 1px solid #00cc00;
}

#eventInfoDetail,
#socialInfoDetails {
    border-top: 1px solid #ccc;
}

body.dark-mode #eventInfoDetail,
body.dark-mode #socialInfoDetails {
    border-top: 1px solid #00cc00;
}

#socialInfoDetails {
    border-bottom: none;
}

/* Game Detail Resources */
.game_detail_resources_logged_out {
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    height: 100%;
}

.game_detail_resources {
    height: 40%;
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.game_detail_resources .chat_message .chat_username,
.game_detail_resources .chat_message .chat_message_text,
.game_detail_resources .chat_message .chat_topic_icon,
.game_detail_resources .chat_message .chat_timestamp,
.game_detail_resources .chat_message .chat_votes {
    margin: 0;
    text-align: left;
    font-size: inherit;
}

.resource_topics {
    width: 20%;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    overflow: hidden;
}

.resource_icons {
    height: 25%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.icon-row {
    width: 100%;
    box-sizing: border-box;
}

.icon-row.top-row {
    justify-content: space-between;
    align-items: center;
    height: 50%;
}

.icon-row.top-row .resource-icon {
    width: 22%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.icon-row.bottom-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f9f9f9;
    padding: 5px 0;
    display: none;
    text-align: center;
    font-size: 0.8em;
    color: #333;
}

.resource_selectors {
    height: 75%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
}

.resource_selectors button {
    padding: 12px 20px; /* Increased for touch-friendliness */
    margin: 5px 0;
    font-size: 16px; /* Increased for touch-friendliness */
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    min-width: 100px; /* Minimum width for touch targets */
}

/* Hover and Active States for Resource Selectors */
.resource_selectors button:hover {
    background-color: #00cc00; /* Accent background */
    color: #1a1a1a; /* Dark text for contrast */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.resource_selectors button:active {
    background-color: #009900; /* Darker accent for active state */
    color: #fff;
}

.resource_selectors button.active {
    background-color: #00cc00;
    color: #fff;
    border-bottom: 2px solid #fff;
}

/* Shared styles for resource_content and other content containers */
.resource_content,
.server_content,
.default_content_container {
    flex: 1;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.chat_content {
    display: flex;
}

/* Default Content Container */
.default_content_container {
    flex: 1;
    display: none;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.default_content_customSpace {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkgrey;
}

body.dark-mode .default_content_customSpace {
    background-color: #2a2a2a;
}

.default_content_customSpace p {
    font-family: 'Harlow Solid', cursive;
    font-size: 72px;
    color: #333;
    text-align: center;
}

body.dark-mode .default_content_customSpace p {
    color: #fff;
}

.default_content_advert {
    width: 970px;
    height: 90px;
    background-color: #d3d3d3;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    display: none;
}

body.dark-mode .default_content_advert {
    background-color: #333;
}

.default_content_advert p {
    font-family: Roboto, Arial, sans-serif;
    font-size: 16px;
    color: #666;
}

body.dark-mode .default_content_advert p {
    color: #ccc;
}

/* Chat Content */
.chat_output_container {
    flex: 1;
    max-height: calc(100% - 50px);
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
    margin-bottom: 0;
    box-sizing: border-box;
}

.chat_message {
    margin-bottom: 5px;
    word-wrap: break-word;
}

.chat_message .chat_username {
    font-weight: bold;
    color: #333;
}

.chat_message .chat_message_text {
    margin-left: 5px;
    color: #000;
}

.chat_message .chat_topic_icon {
    color: #666;
    margin: 0 5px;
}

.chat_message .chat_timestamp {
    color: #888;
    font-size: 0.8em;
    margin-left: 10px;
}

.chat_message .chat_votes {
    color: #555;
    margin-left: 10px;
}

.chat_message button {
    margin-left: 5px;
    padding: 2px 5px;
    font-size: 0.8em;
}

#chat_output {
    padding: 10px;
}

#chat_loading {
    text-align: center;
    color: #666;
    padding: 20px;
}

#chat_status {
    text-align: center;
    color: #333;
    margin-top: 10px;
    font-style: italic;
}

.chat_topic_icon {
    color: #666;
    font-style: italic;
}

.chat_votes {
    font-weight: bold;
}

.vote_up,
.vote_down {
    padding: 2px 5px;
    font-size: 0.8em;
    cursor: pointer;
    margin-left: 5px;
}

.chat_input_container {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    position: relative;
}

body.dark-mode .chat_input_container {
    border-top: 1px solid #00cc00;
}

#chat_input {
    display: flex;
    align-items: center;
    width: 80%;
    box-sizing: border-box;
}

#chat_input #chat_topic_icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

#chat_input #chat_input_field {
    width: 100%;
    padding: 5px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

#send_chat {
    padding: 5px 10px;
    font-size: 0.9em;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    box-sizing: border-box;
}

/* Server Content Specific Styles */
.server_content {
    display: none;
    flex: 1;
    height: 100%;
    background-color: #f0f0f0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}

.server_content_userlist {
    width: 40%;
    padding: 10px;
    border-right: 1px solid black;
    overflow: hidden;
}

.server_content_userlist #userlist_server_selection {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
}

.server_content_userlist #server_content_userlistByServer {
    max-height: calc(100% - 40px);
    overflow-y: auto;
}

.server_content_characters {
    width: 40%;
    padding: 10px;
    border-right: 1px solid black;
}

.server_content_interaction {
    width: 20%;
    padding: 10px;
}

.server_content_interaction #server_interaction_text {
    margin: 0;
}

.server_interaction_add_friend_button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 20px; /* Increased for touch-friendliness */
    font-size: 16px; /* Increased for touch-friendliness */
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    min-width: 100px; /* Minimum width for touch targets */
}

/* Hover and Active States for Server Interaction Button */
.server_interaction_add_friend_button:hover {
    background-color: #00cc00; /* Accent background */
    color: #1a1a1a; /* Dark text for contrast */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.server_interaction_add_friend_button:active {
    background-color: #009900; /* Darker accent for active state */
    color: #fff;
}

.server_interaction_add_friend_button img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Overlay Styles */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.overlay-content {
    position: relative;
    background-color: white;
    margin: 5% auto;
    width: 50%;
    height: 50%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#closeOverlay {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background: none;
}

.overlay-content input,
.overlay-content select,
.overlay-content button {
    width: 200px;
    margin-top: 5px;
}

.overlay-content .form-field {
    position: absolute;
    right: 20px;
}

.overlay-content .form-field.upper-right {
    top: 20px;
}

.overlay-content .form-field.middle-right {
    top: 50%;
    transform: translateY(-50%);
}

.overlay-content .form-field.lower-right {
    bottom: 20px;
}

#newCharButton {
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1.5px solid #ccc;
    cursor: pointer;
}

body.dark-mode #newCharButton {
    background-color: #333;
    border: 1.5px solid #00cc00;
}

#submitNewCharacterButton {
    padding: 10px 20px;
    cursor: pointer;
}

/* Ensure the button and text align on the left */
.overlay-content .button-container {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.overlay-content .button-container p {
    margin: 0;
    margin-right: 20px;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 800px !important;
    height: 500px !important;
    min-width: 800px;
    min-height: 500px;
}

.modal-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-section label,
.modal-section p {
    font-size: 0.9em;
    margin-bottom: 5px;
}

.modal-section select,
.modal-section input {
    width: 100%;
    padding: 5px;
    font-size: 0.9em;
}

.modal-section .modal-button {
    padding: 5px 10px;
    font-size: 0.9em;
    cursor: pointer;
}

#power_ratingText {
    font-weight: bold;
    margin-bottom: 10px;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background: none;
}

.character_details_image_upload_container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.character_details_image_upload_container img {
    max-width: 150px;
    max-height: 150px;
}

.character_details_level_information_container {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Responsive Design */
@media screen and (max-width: 970px) {
    .default_content_advert {
        width: 728px;
        height: 90px;
    }
}

@media screen and (max-width: 728px) {
    .default_content_advert {
        width: 468px;
        height: 60px;
    }
}

@media screen and (max-width: 468px) {
    .default_content_advert {
        width: 100%;
        height: 60px;
        align-self: stretch;
    }
    .default_content_customSpace p {
        font-size: 48px;
    }
}

@media screen and (max-width: 720px) {
    .frontpage_top {
        height: 30%;
    }

    .frontpage_middle,
    .frontpage_bottom {
        height: 30%;
        padding: 10px;
    }

    .ribbon-label {
        font-size: 0.8em;
    }

    .new_left,
    .new_right,
    .popular_left,
    .popular_right {
        font-size: 18px;
        padding: 5px;
    }

    .game_list a {
        width: 23%;
        max-width: 120px;
    }

    .game_list img {
        width: 120px;
        height: 120px;
    }

    .game_icon {
        width: 120px;
        height: 120px;
    }

    .frontpage_footer a {
        font-size: 0.8em;
    }

    .modal-content {
        position: absolute;
        background-color: #fff;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #888;
        width: 90% !important;
        height: 60% !important;
        min-width: auto;
        max-width: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    body.dark-mode .modal-content {
        background-color: #1a1a1a;
        border: 1px solid #00cc00;
    }

    .detail_container {
        height: calc(100vh - 120px);
        padding: 10px;
        gap: 10px;
        top: 60px;
        bottom: 60px;
    }

    .game_logo img {
        width: 200px;
        height: 200px;
        object-fit: contain;
    }

    .game_detail_content {
        height: 90%;
        flex-direction: column;
    }

    .game_view {
        width: 100%;
        height: fit-content;
        border-right: none;
        border-bottom: 2px solid #000;
        border-radius: 5px 5px 0 0;
    }

    body.dark-mode .game_view {
        border-bottom: 2px solid #00cc00;
    }

    #detail_user_content {
        width: 100%;
        height: auto;
        border-bottom: 2px solid #000;
        overflow-y: auto;
    }

    body.dark-mode #detail_user_content {
        border-bottom: 2px solid #00cc00;
    }

    #detail_game_content {
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 2px solid #000;
    }

    body.dark-mode #detail_game_content {
        border-top: 2px solid #00cc00;
    }

    .game_detail_resources {
        height: 60%;
        flex-direction: column;
    }

    .resource_topics {
        width: 100%;
        height: 20%;
        border-right: none;
        border-bottom: 1px solid #ccc;
    }

    body.dark-mode .resource_topics {
        border-bottom: 1px solid #00cc00;
    }

    .resource_icons {
        height: 100%;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .icon-row.top-row {
        height: 100%;
        width: 50%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .icon-row.bottom-row {
        position: static;
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
    }
    .remaining-time {
        display: none;
        font-size: 0.9em;
        color: #666;
        margin-left: 10px;
    }
    
    .remaining-time.activity1-time {
       display: block;
    }

    .resource_selectors {
        height: 100%;
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0;
    }

    .resource_selectors button {
        width: auto;
        padding: 8px 15px;
        font-size: 14px;
        margin: 0 5px;
    }
    .buttons-container {
        font-family: Roboto, Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: stretch;
        width: 100%;
    }
    .resource_content,
    .server_content,
    .default_content_container {
        width: 100%;
        height: 80%;
    }

    .chat_output_container {
        max-height: calc(100% - 50px);
    }

    .server_content {
        flex-direction: column;
    }

    .server_content_userlist {
        width: 100%;
        height: 40%;
        border-right: none;
        border-bottom: 1px solid black;
    }

    body.dark-mode .server_content_userlist {
        border-bottom: 1px solid #00cc00;
    }

    .server_content_characters {
        width: 100%;
        height: 40%;
        border-right: none;
        border-bottom: 1px solid black;
    }

    body.dark-mode .server_content_characters {
        border-bottom: 1px solid #00cc00;
    }

    .server_content_interaction {
        width: 100%;
        height: 20%;
    }

    .user-character-section {
        flex-direction: column;
        height: auto;
    }

    .user-character-short-profile {
        width: 100%;
        height: 150px;
    }

    .user-character-activities {
        width: 100%;
        height: 200px;
    }

    .activity-button {
        padding: 8px 15px;
        font-size: 14px;
        min-width: 80px;
    }

    .activity2timeDropdown {
        width: 100%;
        max-width: 150px;
    }
    /* css/styles.css */

/* Mobile View Swipe Container */
    .mobile-view {
        display: block; /* Ensure mobile-view is visible */
    }

    .desktop-view {
        display: none; /* Hide desktop view on mobile */
    }

    /* Show the active section */
    .swipe-section.active {
        display: block;
    }

    /* View Indicator Styles */
    .viewIndicator {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 10px 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #ccc;
        z-index: 1000;
    }

    body.dark-mode .viewIndicator {
        background: #1a1a1a;
        border-top: 1px solid #00cc00;
    }

    .viewIndicator-button {
        padding: 8px 15px;
        font-size: 14px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f0f0f0;
        min-width: 60px;
    }

    body.dark-mode .viewIndicator-button {
        background-color: #333;
        border: 1px solid #00cc00;
        color: #fff;
    }

    #grokGameInterestingFacts b,
    #grokGameFutureContent b {
        font-weight: bold;
        color: #00cc00; /* Accent color */
    }

    #detailGameCodes b {
        font-weight: bold;
        color: #00cc00; /* Accent color */
    }
    
    .viewIndicator-button.active {
        background-color: #00cc00;
        color: #fff;
        border-bottom: 2px solid #fff;
    }

    body.dark-mode .viewIndicator-button.active {
        background-color: #00cc00;
        color: #1a1a1a;
    }

    .viewIndicator-button:hover {
        background-color: #00cc00;
        color: #1a1a1a;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    body.dark-mode .viewIndicator-button:hover {
        background-color: #009900;
        color: #fff;
    }
}

@media screen and (max-width: 720px) and (max-height: 1280px) {
    .detail_container {
        height: calc(100vh - 100px);
        top: 50px;
        bottom: 50px;
    }

    .game_detail_content {
        height: 80%;
    }

    .game_detail_resources {
        height: 50%;
    }

    .user-character-short-profile {
        height: 120px;
    }

    .user-character-activities {
        height: 180px;
    }
}

@media screen and (max-width: 720px) and (max-height: 300px) {
    .detail_container {
        height: calc(100vh - 80px);
        top: 40px;
        bottom: 40px;
        padding: 5px;
        gap: 5px;
    }

    .game_detail_content {
        height: 70%;
    }

    .game_view {
        padding: 5px;
    }

    .game_logo img {
        width: 150px;
        height: 150px;
    }

    .game_view h2 {
        font-size: 1.2em;
    }

    .game_view #refresh_countdown {
        font-size: 0.8em;
    }

    #detail_user_content {
        padding: 5px;
    }

    #detail_game_content {
        padding: 5px;
    }

    .game_detail_resources {
        height: 40%;
        padding: 5px;
    }

    .resource_topics {
        height: 15%;
    }

    .resource_selectors button {
        padding: 5px 10px;
        font-size: 12px;
    }

    .resource_content,
    .server_content,
    .default_content_container {
        height: 85%;
    }

    .chat_output_container {
        padding: 5px;
    }

    .chat_input_container {
        height: 40px;
    }

    #chat_input #chat_input_field {
        padding: 3px;
        font-size: 0.8em;
    }

    #send_chat {
        padding: 3px 8px;
        font-size: 0.8em;
    }

    .user-character-short-profile {
        height: 100px;
    }

    .user-character-activities {
        height: 150px;
    }

    .activity-button {
        padding: 5px 10px;
        font-size: 12px;
        min-width: 60px;
    }

    .activity2timeDropdown {
        max-width: 120px;
        font-size: 0.7em;
    }
}