:root {
    --grid-size: 11;
    --cell-size: 50px;
    --grid-gap: 2px;
    --bar-height: 50px;
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f0f0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.hidden {
    display: none !important;
}

#game-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

/* --- Top Bar & Toolbar --- */
#top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    min-height: 50px;
    /* Use fixed min-height instead of var */
    background-color: #e9e9e9;
    border-bottom: 1px solid #ccc;
    /* flex-wrap: wrap; -- Removed to force single line and allow shrinking */
}

#resources-bar {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

#resources-bar span {
    font-weight: bold;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-family: 'Courier New', monospace;
    padding: 0 15px;
    border-right: 1px solid #999;
}

#resources-bar span:last-child {
    border-right: none;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 900px) {
    #resources-bar {
        gap: 10px;
        /* Reduce gap on smaller screens */
    }

    #resources-bar span {
        font-size: 16px;
        /* Slightly smaller on mobile */
    }
}

@media (max-width: 700px) {
    #resources-bar {
        gap: 8px;
    }

    #resources-bar span {
        font-size: 14px;
    }
}

/* Responsive grid cell sizing */
@media (min-width: 1400px) {
    :root {
        --cell-size: 60px;
    }
}

@media (max-width: 1200px) {
    :root {
        --cell-size: 45px;
    }
}

@media (max-width: 900px) {
    :root {
        --cell-size: 40px;
    }
}

@media (max-width: 700px) {
    :root {
        --cell-size: 35px;
    }
}

#environment-status {
    display: flex;
    align-items: center;
    flex-grow: 1;
    /* Allow it to grow and take available space */
    flex-shrink: 1;
    /* Allow it to shrink if space is limited */
    min-width: 100px;
    /* Prevent it from shrinking too much, adjust as needed */
    margin-left: 15px;
    /* Add some space between resources and environment status */
}

#environment-status label {
    white-space: nowrap;
    /* Prevent label from wrapping */
    margin-right: 5px;
}

#pollution-info-btn {
    white-space: nowrap;
    /* Prevent label from wrapping */
    margin-right: 5px;
}

#money-resource {
    cursor: pointer;
}

#cheat-btn {
    cursor: pointer;
    font-size: 20px;
}

#toolbar {
    background-color: #f5f5f5;
    padding: 15px 30px;
    border-bottom: 1px solid #ccc;
    display: flex;
    gap: 10px;
    align-items: center;
}

#toolbar button:hover {
    background-color: #e0e0e0;
    /* Subtle hover effect */
}

#sell-mode-btn.selected {
    background-color: #4CAF50 !important;
    color: white;
}

/* Settings Overlay */
#settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    /* Higher than other overlays */
}

#settings-popup {
    position: relative;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
    max-width: 80vw;
    /* width: 90%; */
}

.setting-option {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.setting-option input[type="checkbox"] {
    margin-top: 5px;
    transform: scale(1.2);
    cursor: pointer;
}

/* --- Confirmation Overlay --- */
#confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    /* Highest priority */
}

#confirmation-popup {
    background-color: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
    text-align: center;
    min-width: 300px;
}

#confirmation-popup h4 {
    margin-top: 0;
    color: #333;
    font-size: 1.2em;
}

#confirmation-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.confirm-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 0;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.confirm-btn:hover {
    background-color: #45a049;
}

.cancel-btn {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 0;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.cancel-btn:hover {
    background-color: #d32f2f;
}

/* --- Settings Buttons Styling --- */
#settings-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

#settings-buttons button {
    padding: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9em;
    transition: transform 0.1s, box-shadow 0.1s;
    flex: 1;
    /* Make buttons equal width */
}

#save-game-btn {
    background-color: #5f67d1;
    color: white;
}

#load-game-btn {
    background-color: #ff8540;
    color: white;
}

#save-settings-btn {
    background-color: #4CAF50;
    color: white;
    margin-top: 0;
    /* Remove top margin as they are in a row now */
}

#settings-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

#settings-buttons button:active {
    transform: translateY(0);
}

.setting-option label {
    cursor: pointer;
}

.setting-desc {
    font-size: 0.9em;
    color: #666;
}

#settings-buttons {
    text-align: right;
    margin-top: 20px;
}

#save-settings-btn {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
}

#save-settings-btn:hover {
    background-color: #45a049;
}

#toolbar button {
    margin-right: 5px;
    /* width: 60px; */
    /* height: 85px; */
    font-size: 50px;
    cursor: pointer;
    border: 1px solid #929292;
    border-radius: 0;
    background-color: #ededed;
    line-height: 150%;
}

#exit-build-mode-btn {
    position: relative;
    /* For positioning the overlay icon */
    /* margin-left: 20px; */
    /* Inherits most styles from #toolbar button */
}

.exit-build-overlay-icon {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 16px;
    line-height: 1;
    background-color: rgba(230, 57, 70, 0.8);
    color: white;
    border-radius: 4px;
    padding: 2px 0;
}

.energy-separator {
    /* border-left: 2px solid #ccc; Removed in favor of general separators */
    /* padding: 15px 0 15px 10px; */
    cursor: pointer;
}

.research-category-buttons button.unavailable .completed-checkmark {
    opacity: 1;
    /* Ensure checkmark is always visible */
}

.research-category-buttons button.unavailable {
    opacity: 0.5;
    background-color: #eee;
}




/* --- Main Grid --- */
#main-content {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d2e8d6;
    position: relative;
    /* Context for absolute overlays */
}

#grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), var(--cell-size));
    grid-template-rows: repeat(var(--grid-size), var(--cell-size));
    gap: var(--grid-gap);
    padding: 10px;
    background-color: #a2c3a8;
    border: 2px solid #82a388;
}

#stars-grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.stars-grid-cell {
    width: 468px;
    height: 426px;
    background-image: url('img/stars_bg.png');
    background-size: cover;
    background-position: center;
    border: 3px solid gold;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.stars-grid-cell:hover {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

.stars-grid-cell img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

#grid-selectors {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
}

#grid-selectors button {
    width: 35px;
    height: 35px;
    border: 2px solid white;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

#grid-selectors button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}

#grid-selectors button.active {
    outline: 3px solid gold;
    outline-offset: 2px;
}

.grid-cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background-image: url('img/grass0.png');
    background-size: cover;
    background-position: center;
    border: 1px solid #b8d6b9;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--cell-size) * 0.6);
    cursor: pointer;
    transition: background-color 0.2s;
}

.grid-cell:hover {
    background-color: #b7d5b8;
    border: 1px solid #97b598;
}

.group-border-top {
    border-top: 2px solid yellow !important;
}

.group-border-right {
    border-right: 2px solid yellow !important;
}

.group-border-bottom {
    border-bottom: 2px solid yellow !important;
}

.group-border-left {
    border-left: 2px solid yellow !important;
}

.tutorial-popup {
    position: absolute;
    background-color: #fffde7;
    border: 1px solid #fbc02d;
    align-items: center;
    padding: 10px 15px;
    gap: 10px;
    /* Add gap for consistent spacing */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    max-width: 250px;
    /* pointer-events: none;  Removed to allow clicking the close button */
}

/* Warning Icon for Transcendence Lab */
.building-warning-icon {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 0 3px white;
    pointer-events: none;
    /* Allows clicking the building behind it */
}

.grid-cell {
    position: relative;
    /* Needed for absolute positioning of child elements */
}

/* --- Build & Research Overlays --- */
#build-overlay,
#research-overlay {
    position: fixed;
    top: var(--bar-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--bar-height));
    background-color: rgba(0, 0, 0, 0.6);
    /* background-color: rgba(0, 0, 0, 0.5); */
    /* Alternative Transparenz */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#build-popup,
#research-popup {
    display: flex;
    position: relative;
    /* For positioning the close button */
    background-color: #fdfdfd;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
    gap: 20px;
    max-height: calc(100% - 40px);
    /* Leave some margin */
    overflow-y: auto;
}

/* Unified Close Button Style */
.overlay-close-btn {
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #e63946;
    color: white;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
    position: absolute;
}

.overlay-close-btn:hover {
    background-color: #d32f2f;
}

/* --- Popup Build & Research Menus --- */
#popup-research-menu {
    width: 380px;
}

#popup-build-menu {
    width: 600px;
}

.build-category,
.research-category {
    margin-bottom: 7px;
}

.build-category:last-child,
.research-category:last-child {
    margin-bottom: 8px;
}

.build-category h4,
.research-category h4 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
}

.build-category-header:hover {
    background-color: #f0f0f0;
    border-radius: 4px;
}

.collapse-icon {
    display: inline-block;
    width: 16px;
    font-size: 12px;
    transition: transform 0.2s;
}

.build-category-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.research-category-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.build-category-buttons button,
.research-category-buttons button {
    width: 100%;
    height: 80px;
    padding: 0;
    font-size: 32px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 0;
    background-color: #f4f4f4;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    overflow: hidden;
}

.building-thumbnail {
    flex-shrink: 0;
    display: block;
    width: 55%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.building-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}

/* Research Menu Dropdown */
.completed-research-toggle {
    width: 100%;
    padding: 10px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    text-align: left;
    cursor: pointer;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.completed-research-toggle:hover {
    background-color: #d0d0d0;
}

.completed-research-container {
    display: grid;
    grid-template-columns: 1fr;
    /* Same as main list */
    gap: 10px;
    padding: 5px;
    border: 1px solid #eee;
    background-color: #fafafa;
}

.building-costs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    padding: 5px 8px;
    flex: 1;
}

.cost-item {
    white-space: nowrap;
}

.cost-item.unaffordable {
    color: #e63946;
}

/* Production Info (replaces building-costs in menu buttons) */
.production-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    line-height: 1.2;
    padding: 5px 8px;
    flex: 1;
}

.prod-item {
    white-space: nowrap;
}

/* Dynamic font sizing based on number of items */
.production-info:has(.prod-item:nth-child(1):last-child) .prod-item {
    font-size: 22px;
    /* 1 item */
}

.production-info:has(.prod-item:nth-child(2):last-child) .prod-item {
    font-size: 20px;
    /* 2 items */
}

.production-info:has(.prod-item:nth-child(3):last-child) .prod-item {
    font-size: 16px;
    /* 3 items */
}

.production-info:has(.prod-item:nth-child(4):last-child) .prod-item,
.production-info:has(.prod-item:nth-child(n+5)) .prod-item {
    font-size: 9px;
    /* 4+ items */
}


/* Research Button Specifics */
.research-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    /* Large emoji size */
    width: 80px;
    /* Square area on left */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.05);
}

.research-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.research-name {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    padding: 0 15px;
    line-height: 1.25;
    word-break: break-word;
}

#research-confirm-btn,
#start-build-btn {
    width: 100%;
    margin-top: auto;
    padding: 0;
    /* Remove padding that adds to height if box-sizing is content-box */
    /* line-height: 60px; Removed in favor of flex */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background-color: #4CAF50;
    color: white;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    flex: 0 0 60px !important;
    /* Don't grow, don't shrink, fixed basis */

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#research-confirm-btn:hover,
#start-build-btn:hover {
    background-color: #45a049;
}

#research-confirm-btn:disabled,
#start-build-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.cost-item.unaffordable {
    color: #e63946;
}

.build-category-buttons button:hover,
.research-category-buttons button:hover {
    background-color: #e0e0e0;
}

.build-category-buttons button.selected,
.research-category-buttons button.selected {
    border-color: #4CAF50;
    background-color: #dff0d8;
}

.build-category-buttons button.unavailable {
    opacity: 0.5;
    background-color: #eee;
}

.completed-checkmark {
    position: absolute;
    bottom: 2px;
    right: 5px;
    font-size: 16px;
    text-shadow: 0 0 3px white;
    pointer-events: none;
    /* Allows clicking the button behind it */
}


/* --- Popup Info Panels --- */
#popup-info-panel,
#popup-research-info-panel {
    border-left: 1px solid #ddd;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}

#popup-info-panel {
    width: 25vw;
}

#popup-research-info-panel {
    width: 30vw;
}

#info-content p,
#research-info-content p {
    margin: 5px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#info-content,
#research-info-content {
    width: 100%;
    overflow-wrap: break-word;
}

#info-content img,
#research-info-content img {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
}

#build-confirm-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: auto;
}



/* --- Research Progress Bar --- */
#research-progress-container {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    gap: 10px;
}

.progress-bar-wrapper {
    flex-grow: 1;
}

.progress-bar-wrapper p {
    margin: 0 0 5px 0;
    font-size: 14px;
}

#cancel-research-btn,
#complete-research-btn {
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #929292;
    border-radius: 5px;
    /* Same as toolbar buttons */
    background-color: #ededed;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 40px;
    text-align: center;
}

#research-progress-bar {
    width: 100%;
}

/* --- Ghost Icon --- */
#ghost-icon {
    position: absolute;
    opacity: 0.7;
    pointer-events: none;
    /* Allows clicking through the icon */
    z-index: 2000;
    display: flex;
    flex-direction: column;
    font-size: 27px;
    /* margin-left: 8px; */
    left: 12px;
    /* margin-left: -5px; */
    margin: -1px -3px;
}

#ghost-icon .building-icon {
    max-height: 70px;
}

.ghost-hint {
    font-size: 10px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1px 4px;
    border-radius: 4px;
    margin-top: 3px;
    white-space: nowrap;
}


/* --- Misc --- */
@keyframes flash-red {
    0% {
        color: inherit;
    }

    50% {
        color: #e63946;
        font-weight: bold;
    }

    100% {
        color: inherit;
    }
}

.highlight-resource {
    animation: flash-red 0.7s ease-in-out;
}

/* --- Dynamic Info Overlays --- */
.info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* Lighter background */
    z-index: 900;
    /* Below main popups */
}

.info-popup {
    position: absolute;
    /* Positioned by JS */
    background-color: #fdfdfd;
    border-radius: 8px;
    transform: translateX(-50%);
    /* Center the popup */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    min-width: 250px;
    border: 1px solid #ccc;
}

.info-popup h4 {
    margin-top: 10px;
    margin-bottom: 8px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
    font-size: 1em;
}

.info-popup p {
    margin: 4px 0;
    font-size: 0.9em;
}

.info-popup img {
    max-width: 100%;
    height: auto;
    max-height: 100px;
    /* Limit height to prevent huge images */
    display: block;
    margin: 5px auto;
}



/* --- Cheat Overlay Specifics --- */
.cheat-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

.cheat-input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 95%;
}

#apply-cheat-btn {
    width: 100%;
    padding: 10px;
    /* Inherits styles from confirm buttons */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background-color: #4CAF50;
    color: white;
}

.cheat-action-btn {
    padding: 7px;
    flex: 1;
}



/* --- Building Info Overlay --- */
#building-info-overlay,
#sell-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    /* Above build overlay */
}

#building-info-popup,
#sell-confirm-popup {
    position: relative;
    background-color: #fdfdfd;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#building-info-content h4 {
    margin-top: 0;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
}

#sell-building-btn {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background-color: #e63946;
    color: white;
    margin-top: 10px;
}

#sell-confirm-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#sell-confirm-yes {
    flex: 1;
    padding: 10px;
    background-color: #e63946;
    color: white;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: bold;
}

#sell-confirm-no {
    flex: 1;
    padding: 10px;
    background-color: #ccc;
    color: black;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: bold;
}

/* --- Building Description Styling --- */
.building-desc,
.research-desc {
    font-style: italic;
    margin: 10px 0 12px !important;
    color: #555;
}

/* --- Effects List Styling --- */
.effects-list {
    margin: 5px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.effects-list li {
    margin: 3px 0;
}

/* --- Building Icon Display --- */
#info-content .building-icon {
    display: block;
    margin: 10px auto 30px auto;
    /* Zentriert + Platz für Spiegelung */
    border: 4px solid #fff;
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    /* Weicher Schatten */

    /* Spiegelungseffekt (Fade-Out) */
    -webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25));

    /* Größenanpassung */
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    /* Pixel-Art Rendering */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Research Button States */
.research-category-buttons button.unavailable {
    opacity: 0.7;
    filter: grayscale(80%);
}

.research-category-buttons button.locked {
    opacity: 0.4;
    filter: grayscale(100%) blur(1px);
    cursor: not-allowed;
}

.research-category-buttons button.completed {
    background-color: #dff0d8;
    /* Light green */
    border-color: #d6e9c6;
}

/* --- Welcome Overlay & Start Button (v0.11) --- */
/* --- Loading Screen --- */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3e4750;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease-out;
}

#loading-content {
    text-align: center;
    width: 80%;
    max-width: 500px;
}

#loading-logo {
    max-width: 300px;
    margin-bottom: 30px;
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

#loading-bar-container {
    width: 100%;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
}

#loading-bar {
    width: 0%;
    height: 100%;
    background-color: #4CAF50;
    transition: width 0.3s ease;
}

#loading-status {
    color: #ccc;
    /* font-size: 0.9em; */
    margin-bottom: 30px;
}

#start-btn {
    padding: 12px 30px;
    font-size: 1.2em;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-weight: bold;
}

#start-btn:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

#start-btn:active {
    transform: scale(0.95);
}

#welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

#welcome-content {
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    z-index: 2001;
    margin-top: -10%;
}

.welcome-logo {
    display: block;
    width: 50%;
    max-width: 90vw;
    margin: 0 auto 2em auto;
}

/* Start/Load Menu Button Styles */
.start-menu-btn {
    --color: #4fc6ff;
    --shadow: #255e7a;
    --glare: hsl(0 0% 100% / 0.75);
    --font-size: 2rem;
    --transition: 0.2s;
    --font-weight-9: 900;
    --size-2: 0.5rem;
    --size-4: 1rem;
    --padding: var(--size-2);
    --gray-8: #424242;

    padding: var(--padding);
    border-radius: var(--size-4);
    text-decoration: none;
    color: transparent;
    position: relative;
    transition: background 0.2s;
    display: inline-block;
    margin-top: 0;
    /* Handled by container gap */
}

.start-menu-btn:hover {
    background: var(--gray-8);
}

.start-menu-btn span {
    display: inline-block;
    font-size: calc(var(--font-size) * 1.5);
    font-weight: var(--font-weight-9);
    transition: all 0.2s;
    text-decoration: none;
    text-shadow:
        calc(var(--hover) * (var(--font-size) * -0)) calc(var(--hover) * (var(--font-size) * 0)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.02)) calc(var(--hover) * (var(--font-size) * 0.02)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.04)) calc(var(--hover) * (var(--font-size) * 0.04)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.06)) calc(var(--hover) * (var(--font-size) * 0.06)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.08)) calc(var(--hover) * (var(--font-size) * 0.08)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.10)) calc(var(--hover) * (var(--font-size) * 0.10)) var(--shadow);
    transform: translate(calc(var(--hover) * (var(--font-size) * 0.10)), calc(var(--hover) * (var(--font-size) * -0.10)));
    color: transparent;
}

/* Ensure base span (the shadow/base layer) has color if needed, but snippet uses text-shadow heavily */
.start-menu-btn span {
    color: transparent;
}

.start-menu-btn span:last-of-type {
    position: absolute;
    inset: var(--padding);
    background: linear-gradient(108deg,
            transparent 0 55%,
            var(--glare) 55% 60%,
            transparent 60% 70%,
            var(--glare) 70% 85%,
            transparent 85%) calc(var(--pos) * -200%) 0% / 200% 100%, var(--color);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    text-shadow: none;
    transform: translate(calc(var(--hover) * (var(--font-size) * 0.10)), calc(var(--hover) * (var(--font-size) * -0.10)));
    transition: transform 0.2s, background-position 0s;
}

.start-menu-btn:hover span:last-of-type {
    transition: transform 0.2s, background-position calc(var(--hover) * 1.5s) calc(var(--hover) * 0.25s);
}

.start-menu-btn {
    --hover: 0.4;
    --pos: 0;
}

.start-menu-btn:hover {
    --hover: 1;
    --pos: 1;
}

.start-menu-btn:active {
    --hover: 0;
}

.start-menu-btn:active span:last-of-type {
    --hover: 0;
    --pos: 1;
}

.start-menu-btn svg {
    position: absolute;
    z-index: 3;
    width: calc(var(--font-size) * 0.5);
    aspect-ratio: 1;
}

.start-menu-btn svg path {
    fill: var(--glare);
}

.start-menu-btn:hover svg {
    animation: sparkle 0.75s calc((var(--delay-step) * var(--d)) * 1s) both;
}

@keyframes sparkle {
    50% {
        transform: translate(-50%, -50%) scale(var(--s, 1));
    }
}

.start-menu-btn svg {
    --delay-step: 0.15;
    top: calc(var(--y, 50) * 1%);
    left: calc(var(--x, 0) * 1%);
    transform: translate(-50%, -50%) scale(0);
}

.start-menu-btn svg:nth-of-type(1) {
    --x: 0;
    --y: 20;
    --s: 1.1;
    --d: 1;
}

.start-menu-btn svg:nth-of-type(2) {
    --x: 15;
    --y: 80;
    --s: 1.25;
    --d: 2;
}

.start-menu-btn svg:nth-of-type(3) {
    --x: 45;
    --y: 40;
    --s: 1.1;
    --d: 3;
}

.start-menu-btn svg:nth-of-type(4) {
    --x: 75;
    --y: 60;
    --s: 0.9;
    --d: 2;
}

.start-menu-btn svg:nth-of-type(5) {
    --x: 100;
    --y: 30;
    --s: 0.8;
    --d: 4;
}

/* --- Game Timer (v0.11) --- */
#game-timer {
    font-size: 1.35rem;
    /* Increased by ~20% from 1.1rem */
    font-weight: bold;
    padding: 5px 12px;
    margin-right: 0px;
    /* Removed margin-right as it is now at the end */
    margin-left: 10px;
    /* Added margin-left */
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.5);
    color: #333;
    font-family: monospace;
    transition: all 0.5s ease;
    white-space: nowrap;
    border: 2px solid transparent;
}

/* --- Fancy Load Game Button --- */
#load-game-welcome-btn {
    --color: #ffd300;
    /* Gold-yellow, same as start button */
    --shadow: #3e4347;
    --glare: hsl(0 0% 100% / 0.75);
    --font-size: 2rem;
    --transition: 0.2s;
    --font-weight-9: 900;
    --size-2: 0.5rem;
    --size-4: 1rem;
    --padding: var(--size-2);
    --gray-8: #424242;

    padding: var(--padding);
    border-radius: var(--size-4);
    text-decoration: none;
    color: transparent;
    position: relative;
    transition: background 0.2s;
    display: inline-block;
    margin-top: 20px;
}

#load-game-welcome-btn:hover {
    background: var(--gray-8);
}

#load-game-welcome-btn span {
    display: inline-block;
    font-size: calc(var(--font-size) * 1.5);
    font-weight: var(--font-weight-9);
    transition: all 0.2s;
    text-decoration: none;
    text-shadow:
        calc(var(--hover) * (var(--font-size) * -0)) calc(var(--hover) * (var(--font-size) * 0)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.02)) calc(var(--hover) * (var(--font-size) * 0.02)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.04)) calc(var(--hover) * (var(--font-size) * 0.04)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.06)) calc(var(--hover) * (var(--font-size) * 0.06)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.08)) calc(var(--hover) * (var(--font-size) * 0.08)) var(--shadow),
        calc(var(--hover) * (var(--font-size) * -0.10)) calc(var(--hover) * (var(--font-size) * 0.10)) var(--shadow);
    transform: translate(calc(var(--hover) * (var(--font-size) * 0.10)), calc(var(--hover) * (var(--font-size) * -0.10)));
    color: transparent;
}

#load-game-welcome-btn span:last-of-type {
    position: absolute;
    inset: var(--padding);
    background: linear-gradient(108deg,
            transparent 0 55%,
            var(--glare) 55% 60%,
            transparent 60% 70%,
            var(--glare) 70% 85%,
            transparent 85%) calc(var(--pos) * -200%) 0% / 200% 100%, var(--color);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    text-shadow: none;
    transform: translate(calc(var(--hover) * (var(--font-size) * 0.10)), calc(var(--hover) * (var(--font-size) * -0.10)));
    transition: transform 0.2s, background-position 0s;
}

#load-game-welcome-btn:hover span:last-of-type {
    transition: transform 0.2s, background-position calc(var(--hover) * 1.5s) calc(var(--hover) * 0.25s);
}

#load-game-welcome-btn {
    --hover: 0.4;
    --pos: 0;
}

#load-game-welcome-btn:hover {
    --hover: 1;
    --pos: 1;
}

#load-game-welcome-btn:active {
    --hover: 0;
}

#load-game-welcome-btn:active span:last-of-type {
    --hover: 0;
    --pos: 1;
}

#load-game-welcome-btn svg {
    position: absolute;
    z-index: 3;
    width: calc(var(--font-size) * 0.5);
    aspect-ratio: 1;
    fill: var(--glare);
    --delay-step: 0.15;
    top: calc(var(--y, 50) * 1%);
    left: calc(var(--x, 0) * 1%);
    transform: translate(-50%, -50%) scale(0);
}

#load-game-welcome-btn:hover svg {
    animation: sparkle 0.75s calc((var(--delay-step) * var(--d)) * 1s) both;
}

#load-game-welcome-btn svg:nth-of-type(1) {
    --x: 0;
    --y: 20;
    --s: 1.1;
    --d: 1;
}

#load-game-welcome-btn svg:nth-of-type(2) {
    --x: 15;
    --y: 80;
    --s: 1.25;
    --d: 2;
}

#load-game-welcome-btn svg:nth-of-type(3) {
    --x: 45;
    --y: 40;
    --s: 1.1;
    --d: 3;
}

#load-game-welcome-btn svg:nth-of-type(4) {
    --x: 75;
    --y: 60;
    --s: 0.9;
    --d: 2;
}

#load-game-welcome-btn svg:nth-of-type(5) {
    --x: 100;
    --y: 30;
    --s: 0.8;
    --d: 4;
}

.toolbar-separator {
    width: 2px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 0 5px;
    border-radius: 1px;
}

.era-work {
    font-family: 'Times New Roman', serif !important;
    background-color: #f4e1d2 !important;
    color: #5d4037 !important;
    border-color: #8d6e63 !important;
}

.era-industry {
    font-family: 'Courier New', monospace !important;
    background-color: #cfd8dc !important;
    color: #37474f !important;
    border-color: #607d8b !important;
    box-shadow: 2px 2px 0px #455a64;
}

.era-technology {
    font-family: 'Consolas', monospace !important;
    background-color: #000 !important;
    color: #00e676 !important;
    border-color: #00e676 !important;
    text-shadow: 0 0 5px #00e676;
}

.era-machines {
    font-family: 'Segoe UI', sans-serif !important;
    background-color: #263238 !important;
    color: #00bcd4 !important;
    border-color: #00bcd4 !important;
    box-shadow: 0 0 10px #00bcd4;
}

.era-singularity {
    font-family: 'Segoe UI', sans-serif !important;
    background: linear-gradient(45deg, #311b92, #000) !important;
    color: #ffeb3b !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px #7c4dff;
}

/* Start Menu Container */
#start-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    margin-top: 40px;
}

/* Endgame Overlay */
#endgame-overlay,
#grid-full-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2500;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
}

#endgame-content,
#grid-full-content {
    background: rgba(20, 20, 30, 0.9);
    padding: 40px;
    border-radius: 15px;
    border: 2px solid #ffd700;
    text-align: center;
    max-width: 600px;
    z-index: 2501;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    animation: fadeIn 1s ease-out;
}

#fireworks-container,
#fireworks-container-grid,
#fireworks-container-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2500;
    overflow: hidden;
}

#fireworks-container-main {
    z-index: 50;
    /* Inside main-content, above the grid */
}

.firework-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    animation: fadeOut 1s forwards;
}

#close-endgame-btn,
#close-grid-full-btn,
#save-score-btn {
    margin-top: 10px;
    padding: 10px 25px;
    font-size: 1.2em;
    background-color: #ffd700;
    color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s;
}

#close-endgame-btn:hover,
#close-grid-full-btn:hover,
#save-score-btn:hover {
    background-color: #ffea00;
    transform: scale(1.05);
}

#player-name-input {
    font-family: 'Segoe UI', serif;
    font-size: 1.1em;
    padding: 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: scale(0);
    }
}

/* --- Dialog System --- */
#dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4000;
}

#dialog-window {
    position: relative;
    width: 65vw;
    /* Slightly wider to accommodate text */
    max-width: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#dialog-bg-container {
    position: relative;
    width: 100%;
}

#dialog-box-img {
    width: 100%;
    display: block;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
}

#dialog-npc-container {
    position: absolute;
    right: -25%;
    /* Move NPC further right */
    bottom: -10%;
    /* Lower it a bit */
    height: 130%;
    /* Make it big */
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    z-index: 2;
    /* In front of box */
}

#dialog-npc-img,
#dialog-npc-video {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.5));
}

#dialog-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center content horizontally */
    padding: 40px;
    padding-left: 20px;
    /* Reduced left padding as we are centering */
    box-sizing: border-box;
    z-index: 1;
}

#dialog-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    /* Large readable text */
    color: #000;
    margin-bottom: 25px;
    line-height: 1.4;
    max-width: 65%;
    /* Restrict width to avoid NPC area */
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
    white-space: pre-wrap;
    text-align: center;
    /* Center align text */
    display: flex;
    /* Flex to allow image centering if text is small */
    flex-direction: column;
    align-items: center;
}

#dialog-content-img {
    max-width: 150px;
    max-height: 120px;
    margin-bottom: 25px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
    object-fit: contain;
}

#dialog-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    width: 65%;
}

.dialog-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

#dialog-controls {
    margin-top: 10px;
    z-index: 10;
    width: 65%;
    /* Match text width */
    display: flex;
    justify-content: center;
}

.dialog-btn {
    padding: 12px 40px;
    font-size: 1.2em;
    cursor: pointer;
    background: #222;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid #555;
    border-radius: 5px;
    transition: all 0.2s;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dialog-btn:hover {
    background: #444;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1000px) {
    #dialog-window {
        width: 85vw;
    }

    #dialog-npc-container {
        right: -10%;
        height: 110%;
    }

    #dialog-text {
        font-size: 1.2em;
        max-width: 65%;
    }
}

@media (max-width: 700px) {
    #dialog-window {
        width: 95vw;
    }

    #dialog-npc-container {
        right: -5%;
        height: 80%;
        bottom: 0;
    }

    #dialog-text {
        font-size: 1.0em;
        max-width: 60%;
        padding-left: 0;
    }

    #dialog-content {
        padding: 20px;
        align-items: center;
    }

    #dialog-controls {
        width: 100%;
    }
}

/* --- PAUSE OVERLAY --- */
#pause-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 101%;
    height: 101%;
    background: rgba(0, 0, 0, 0.95);
    /* High opacity to hide grid */
    backdrop-filter: blur(10px);
    z-index: 5000;
    /* Very high z-index */
    display: flex;
    justify-content: center;
    align-items: center;
}

#pause-content {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#pause-content h1 {
    font-size: 3em;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- PLAYFIELD & ERA BORDERS --- */
/* Target specific era styling on the grid container itself */
/* --- PLAYFIELD & ERA BORDERS --- */
#grid-container.age-arbeit {
    border-style: solid;
    border-width: 20px;
    border-image-source: url('img/UI dialogue elements/01_border.png');
    border-image-slice: 150 150 150 150;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round;
    background-color: #d8ccb8;
    padding: 10px;
}

#grid-container.age-industrie {
    border-style: solid;
    border-width: 50px;
    border-image-source: url('img/UI dialogue elements/02_border.png');
    border-image-slice: 226 246 223 246;
    border-image-width: 50px 50px 50px 50px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    background-color: #cfd8dc;
    padding: 0;
}

#grid-container.age-technologie {
    border-style: solid;
    border-width: 50px;
    border-image-source: url('img/UI dialogue elements/03_border.png');
    border-image-slice: 388 372 388 372;
    border-image-width: 50px 50px 50px 50px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round;
    background-color: #e0f7fa;
    padding: 0;
}

#grid-container.age-maschinen {
    border-style: solid;
    border-width: 50px;
    border-image-source: url('img/UI dialogue elements/04_border.png');
    border-image-slice: 160 200 160 200;
    border-image-width: 50px 50px 50px 50px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    background-color: #263238;
    padding: 0;
}

#grid-container.age-singularitaet {
    border-style: solid;
    border-width: 50px;
    border-image-source: url('img/UI dialogue elements/05_border.png');
    border-image-slice: 134 123 134 123;
    border-image-width: 50px 50px 50px 50px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    background-color: #d8dedd;
    padding: 0;
}

/* --- Research Progress Container Overlay --- */
#research-progress-container {
    position: absolute;
    top: 0;
    width: 97%;
    z-index: 100;
    /* Ensure it doesn't block clicks on the game below unless hitting the button */
    pointer-events: none;
}

#research-progress-container * {
    pointer-events: auto;
    /* allow clicking buttons inside */
}

/* Ensure container context */
#game-container {
    position: relative;
}

/* =========================================
   MOBILE / RESPONSIVE OPTIMIZATION
   ========================================= */

@media (max-width: 900px) {

    /* --- General Layout --- */
    body {
        overflow: hidden;
        /* Prevent body scroll, handle inside containers */
        font-size: 17px;
    }

    .welcome-logo {
        width: 100%;
    }

    #game-container {
        height: 100vh;
        width: 100vw;
    }

    /* --- Dynamic Grid Sizing --- */
    /* Portrait Mode / Mobile Styles */
    :root {
        /* 
           Calculation for 11 cells:
           Screen Width (100vw)
           - Border Left & Right (15px * 2 = 30px)
           - Padding Left & Right (2px * 2 = 4px)
           - Grid Gaps (1px * 12 = 12px)
           Total Deduction: 46px. 
           Rounding up to 50px for safety/rendering glitches.
        */
        --cell-size: calc((100vw - 50px) / var(--grid-size));
        --grid-gap: 1px;
    }

    #grid-container {
        /* Force smaller borders and padding on mobile to save space */
        /* Using !important to override the specific .age- classes */
        border-width: 15px !important;
        border-image-width: 15px !important;
        padding: 2px !important;

        gap: var(--grid-gap);
        /* Ensure the grid doesn't overflow horizontally */
        max-width: 100vw;
        box-sizing: border-box;
        margin: 0 auto;
        /* Center it */
    }

    .grid-cell {
        font-size: calc(var(--cell-size) * 0.5 + 1px);
        /* Smaller font for emojis */
    }

    /* --- Top Bar (Resources) --- */
    #top-bar {
        height: auto;
        min-height: var(--bar-height);
        padding: 5px 0;
        /* Reduced side padding to utilize full width */
        flex-direction: column;
        gap: 5px;
        background-color: #e9e9e9;
    }

    #resources-bar {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 4 columns for resources */
        gap: 2px;
        justify-content: space-between;
        padding: 0 5px;
        /* Add small padding inside */
        box-sizing: border-box;
    }

    #resources-bar span {
        border-right: none;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 4px 2px;
        border-radius: 4px;
        font-size: 13px;
        /* Smaller font */
        justify-content: center;
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #environment-status {
        width: 100%;
        justify-content: space-around;
        /* Distribute evenly */
        margin-left: 0;
        margin-top: 5px;
        padding-top: 5px;
        border-top: 1px solid #ccc;
        font-size: 12px;
    }

    /* --- Toolbar (Bottom Navigation) --- */
    #toolbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        padding: 5px;
        background-color: #f5f5f5;
        border-top: 1px solid #ccc;
        border-bottom: none;
        z-index: 1000;
        justify-content: space-around;
        box-sizing: border-box;
    }

    #main-content {
        /* Add margin to bottom so content isn't hidden behind toolbar */
        margin-bottom: 60px;
    }

    #toolbar button {
        font-size: 25px;
        /* Slightly smaller icons */
        width: auto;
        flex-grow: 1;
        max-width: 60px;
        height: 45px;
        margin-right: 2px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #game-timer {
        display: none;
        /* Hide timer on mobile to save space, or move it */
    }

    .toolbar-separator {
        width: 1px;
        background-color: #ccc;
        height: 30px;
        margin: 0 2px;
    }

    /* --- Overlays (Build & Research) --- */
    #build-popup,
    #research-popup {
        flex-direction: column;
        width: 95vw;
        height: 95vh;
        /* Max height */
        max-height: 95vh;
        padding: 10px 5px;
        gap: 0;
        /* Removing gap to let flex children handle spacing/borders */
        margin-bottom: 60px;
        /* Above toolbar */
        box-sizing: border-box;
        top: 3vh;
    }

    #popup-build-menu,
    #popup-research-menu {
        width: 100%;
        flex: 1;
        min-height: 0;
        /* Important for flex scrolling */
        /* Top half for menu */
        overflow-y: overlay;
    }

    #popup-info-panel,
    #popup-research-info-panel {
        width: 100%;
        flex: 1;
        min-height: 0;
        /* Bottom half for info */
        border-left: none;
        border-top: 2px solid #999;
        /* Distinct separator */
        padding-left: 0;
        padding-top: 10px;
        overflow-y: auto;
    }

    /* Minimalist Scrollbar for Mobile Popups */
    #popup-build-menu::-webkit-scrollbar,
    #popup-info-panel::-webkit-scrollbar,
    #popup-research-menu::-webkit-scrollbar,
    #popup-research-info-panel::-webkit-scrollbar {
        width: 5px;
    }

    #popup-build-menu::-webkit-scrollbar-track,
    #popup-info-panel::-webkit-scrollbar-track,
    #popup-research-menu::-webkit-scrollbar-track,
    #popup-research-info-panel::-webkit-scrollbar-track {
        background: transparent;
    }

    #popup-build-menu::-webkit-scrollbar-thumb,
    #popup-info-panel::-webkit-scrollbar-thumb,
    #popup-research-menu::-webkit-scrollbar-thumb,
    #popup-research-info-panel::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }

    .build-category-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    /* --- Dialogs --- */
    #dialog-window {
        width: 95%;
        max-width: none;
        height: auto;
        min-height: 200px;

        /* Positioning fix: Absolute centered vertically and horizontally */
        position: absolute;
        left: 50%;
        top: 50%;
        bottom: auto;
        /* Remove bottom constraint */
        transform: translate(-50%, -50%);
    }

    #dialog-bg-container {
        flex-direction: column;
        width: 100%;
        height: 100%;
        /* Ensure background container establishes context if needed */
        position: relative;
    }

    #dialog-box-img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        /* Background image at 0 */
    }

    #dialog-content {
        position: relative;
        padding: 30px 20px 20px 20px;
        /* More top padding */
        width: 100%;
        box-sizing: border-box;
        height: auto;
        top: 0;
        left: 0;
        transform: none;
        z-index: 1;
        /* Content above background */
    }

    #dialog-text {
        font-size: clamp(14px, 4vw, 18px);
        width: auto;
        max-width: none;
        margin: 2vh 5vw 2vh 5vw;
    }

    #dialog-text.dialog-text-narrow {
        margin-right: 17vw;
    }

    .dialog-btn {
        padding: 1vh 4vw;
        font-size: clamp(14px, 4vw, 20px);
    }

    #dialog-npc-container {
        position: absolute;
        right: 20px;
        bottom: calc(7%);
        /* Specific user request */
        height: 140px;
        width: auto;
        z-index: 1000;
        /* Move to front */
        pointer-events: none;
    }

    #dialog-npc-img,
    #dialog-npc-video {
        height: 100%;
        width: auto;
        object-fit: contain;
    }

    /* --- Stars Content --- */
    .stars-grid-cell {
        width: 90vw;
        height: 90vw;
        /* Square */
        max-width: 400px;
        max-height: 400px;
    }
}

/* Extra small screens adjustments */
@media (max-width: 400px) {
    #resources-bar {
        grid-template-columns: repeat(3, 1fr);
        /* 3 cols if very small */
    }

    .build-category-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}