body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #282c34;
    color: #e0e0e0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.main-layout {
    display: flex;
    gap: 20px; /* Space between columns */
    width: 100%;
    max-width: 1200px; /* Max width for the whole game */
    align-items: flex-start; /* Align items to the top of the flex container */
}

/* --- Left Section: Visual Cube --- */
.visual-cube-container {
    background-color: #3a3f4a;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    text-align: center;
    flex: 0 0 240px; /* Fixed width for the cube container */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.visual-cube-container h2 {
    color: #ffcc00;
    margin-bottom: 15px;
}

#cubeCanvas {
    background-color: #1a1a1a;
    border: 2px solid #555;
    border-radius: 8px;
    margin-bottom: 10px;
}

.cube-face-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #61dafb;
    min-height: 1.2em; /* Prevent layout shift */
}

/* --- Center Section: Game Core --- */
.game-container {
    background-color: #3a3f4a;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 30px;
    text-align: center;
    flex-grow: 1; /* Takes up remaining space */
    min-width: 400px; /* Minimum width for game content */
}

h1 {
    color: #61dafb;
    margin-bottom: 20px;
}

.resource-display p {
    font-size: 1.5em;
    margin: 10px 0;
}

.resource-display span {
    font-weight: bold;
    color: #a0f0a0;
}

.main-button {
    background-color: #61dafb;
    color: #282c34;
    border: none;
    padding: 20px 40px;
    font-size: 1.8em;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    margin: 20px 0;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 5px #4fa8c8;
    position: relative; /* For click feedback animation */
    overflow: hidden; /* Hide overflow of click feedback */
}

.main-button:hover {
    background-color: #4fa8c8;
}

.main-button:active {
    background-color: #3f90ad;
    transform: translateY(2px);
    box-shadow: 0 3px #337a8f;
}

/* Click Feedback Animation */
.click-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #a0f0a0;
    font-size: 1.5em;
    font-weight: bold;
    opacity: 0;
    animation: fadeOutUp 1s forwards;
    pointer-events: none; /* Don't block clicks */
    white-space: nowrap; /* Prevent text wrapping */
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50px);
    }
}


.upgrades-container {
    margin-top: 30px;
    border-top: 2px solid #555;
    padding-top: 20px;
}

.upgrades-container h2 {
    color: #ffcc00;
    margin-bottom: 20px;
}

.upgrade-item {
    background-color: #4a4f5c;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.upgrade-item h3 {
    color: #ffcc00;
    margin: 0;
    flex: 1 1 100%;
    margin-bottom: 5px;
}

.upgrade-item p {
    margin: 5px 0;
    font-size: 0.95em;
    flex: 1 1 auto;
}

.upgrade-item p span {
    font-weight: bold;
    color: #a0f0a0;
}

.buy-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-left: 10px;
    box-shadow: 0 3px #388e3c;
}

.buy-button:hover {
    background-color: #45a049;
}

.buy-button:active {
    background-color: #367c39;
    transform: translateY(1px);
    box-shadow: 0 2px #2d662e;
}

.buy-button:disabled {
    background-color: #777;
    cursor: not-allowed;
    box-shadow: none;
}

.game-controls {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.control-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: 0 3px #0056b3;
}

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

.control-button:active {
    background-color: #004085;
    transform: translateY(1px);
    box-shadow: 0 2px #002752;
}


/* --- Right Section: Sidebar --- */
.sidebar {
    background-color: #3a3f4a;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    flex: 0 0 280px; /* Fixed width for the sidebar */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-box {
    background-color: #4a4f5c;
    border-radius: 5px;
    padding: 15px;
}

.section-box h2 {
    color: #ffcc00;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.upgrade-list, .leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upgrade-list li, .leaderboard-list li {
    padding: 8px 0;
    border-bottom: 1px solid #555;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upgrade-list li:last-child, .leaderboard-list li:last-child {
    border-bottom: none;
}

.leaderboard-list li strong {
    color: #61dafb;
}

.leaderboard-list li span {
    color: #a0f0a0;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .main-layout {
        flex-direction: column;
        align-items: center;
    }
    .visual-cube-container, .sidebar {
        flex: 0 0 auto; /* Allow them to take natural width */
        width: 100%;
        max-width: 600px; /* Constrain width on smaller screens */
    }
    .game-container {
        min-width: unset; /* Remove min-width on small screens */
    }
}

@media (max-width: 500px) {
    .game-container, .visual-cube-container, .sidebar {
        padding: 15px;
    }
    .main-button {
        padding: 15px 30px;
        font-size: 1.5em;
    }
    .upgrade-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .buy-button {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
}