/* Main wrapper for the entire simulator view */
.simulator-wrapper {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* Left container for the interactive Gem UI */
.gem-ui-container {
    flex: 1.2; /* Give it a bit more space */
    min-width: 450px;
    background: #1c1d21; /* Dark background similar to image */
    border: 1px solid #4a4a4a;
    border-radius: 12px;
    padding: 24px;
    position: relative;
    /* A pseudo-element for the background pattern if needed */
}

/* Right container for results and controls */
.result-container {
    flex: 1;
    min-width: 300px;
    padding: 24px;
    background-color: #1E1E1E;
    border-radius: 12px;
    border: 1px solid #333333;
    position: sticky;
    top: 24px;
    margin-top: 0;
}

/* Loading Indicator Styles */
#loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}
#loading-indicator.hidden {
    display: none;
}
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-left-color: #C89B3C;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Header section of the Gem UI */
.gem-header {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #333;
    padding-bottom: 16px;
    margin-bottom: 24px;
    flex-direction: column;
}
.gem-title h2 {
    margin: 0;
    color: #C89B3C;
    font-size: 1.5rem;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
.gem-type-selectors {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.gem-type-selectors .custom-dropdown .dropdown-selected {
    padding: 4px 8px;
    font-size: 0.8rem;
    border: 1px solid #444;
}

/* Gem Body */
.gem-body {
    position: relative;
}
.gem-points-display {
    text-align: center;
    font-size: 1.2rem;
    color: #FFFFFF;
    margin-bottom: 80px; /* Increased margin to prevent overlap */
}

/* Diamond Layout */
.stat-diamond-layout {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 60px auto;
}
.stat-diamond-wrapper {
    position: absolute;
    width: 120px;
    height: 120px;
}
.stat-diamond {
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
    border-radius: 20px; /* Rounded diamond corners */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.stat-diamond-content {
    transform: rotate(-45deg);
    text-align: center;
    color: #FFFFFF;
    font-weight: 500;
}
.stat-diamond-content .stat-name,
.effect-type-dropdown .dropdown-selected {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
}
.level-dropdown .dropdown-selected {
    display: inline-block;
    padding: 2px 6px;
    border: none;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    color: #E0E0E0;
}

/* Diamond Positioning */
.stat-diamond-wrapper.top { top: -60px; left: 50%; transform: translateX(-50%); }
.stat-diamond-wrapper.left { left: -60px; top: 50%; transform: translateY(-50%); }
.stat-diamond-wrapper.right { right: -60px; top: 50%; transform: translateY(-50%); }
.stat-diamond-wrapper.bottom { bottom: -60px; left: 50%; transform: translateX(-50%); }

/* Diamond Colors */
.color-willpower { background-color: #4a1c1c; border-color: #d94f4f; }
.color-effect1 { background-color: #1c4a2f; border-color: #4fd975; }
.color-effect2 { background-color: #1c3d4a; border-color: #4fadd9; }
.color-points { background-color: #4a421c; border-color: #d9c34f; }

/* Custom Dropdown general styling */
.custom-dropdown {
    position: relative;
    cursor: pointer;
    min-width: 120px;
}
.dropdown-selected {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #4a4a4a;
    background-color: #1c1d21;
    color: #E0E0E0;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.2s, background-color 0.2s;
}
.custom-dropdown:not(.open) .dropdown-selected:hover {
    background-color: #2a2a2a;
    border-color: #666;
}

.custom-dropdown.open .dropdown-selected {
    border-color: #C89B3C;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dropdown-options {
    display: none;
    position: absolute;
    top: 100%; /* Connect seamlessly */
    left: 0;
    width: 100%; /* Make it match the parent's width */
    box-sizing: border-box; /* Important for width calculation */
    background-color: #2a2a2a; /* Slightly different background */
    border: 1px solid #C89B3C; /* Match open selected border */
    border-top: none; /* Remove top border to merge */
    border-radius: 0 0 8px 8px; /* Round bottom corners */
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}
.custom-dropdown.open {
    z-index: 11; /* Ensure open dropdown is on top */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    border-radius: 8px;
}
.custom-dropdown.open .dropdown-options { display: block; }
.dropdown-option {
    padding: 10px 12px; /* Reduced padding */
    color: #E0E0E0;
    transition: background-color 0.2s;
    font-size: 0.9rem; /* Smaller font size */
    border-radius: 6px; /* Rounded corners for options */
}
.dropdown-option:hover { background-color: #2a2a2a; }
.dropdown-option.selected { background-color: #C89B3C; color: #121212; font-weight: 500; }
.dropdown-option.disabled { color: #555; cursor: not-allowed; }

/* Specific adjustments for dropdowns inside the diamond UI */
.stat-diamond-content .effect-type-dropdown {
    min-width: 100px;
}
.stat-diamond-content .level-dropdown {
    min-width: 65px;
}

.stat-diamond-content .dropdown-selected {
    padding: 4px 8px; /* Smaller padding */
}
.stat-diamond-content .dropdown-option {
    font-size: 0.8rem; /* Even smaller font */
    padding: 6px 8px; /* And smaller padding */
}

/* Responsive layout */
@media (max-width: 900px) {
    .simulator-wrapper { flex-direction: column; align-items: stretch; }
    .result-container { position: static; }
}

@media (max-width: 520px) {
    .gem-type-selectors {
        flex-wrap: wrap; /* Allow dropdowns to wrap */
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .gem-ui-container {
        min-width: 0; /* Allow shrinking */
    }
    .stat-diamond-layout {
        width: 200px;
        height: 200px;
    }
    .stat-diamond-wrapper {
        width: 100px;
        height: 100px;
    }
    .stat-diamond-wrapper.top { top: -50px; }
    .stat-diamond-wrapper.left { left: -50px; }
    .stat-diamond-wrapper.right { right: -50px; }
    .stat-diamond-wrapper.bottom { bottom: -50px; }
}

/* Tooltip in results */
.tooltip-container {
    position: relative;
    display: inline-block; /* Or block, depending on desired layout */
}
.tooltip-content {
    visibility: hidden;
    opacity: 0;
    background-color: #1E1E1E;
    color: #E0E0E0;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the text */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s;
    border: 1px solid #C89B3C;
    width: 220px;
    font-size: 0.85rem;
}
.tooltip-container:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}