html, body {
    margin: 0;
    padding: 0;
    font-family: monospace;
    color: #fff;
}

/* General editor-style container */
.voxel-editor-container,
.setup-screen-container,
.loading-screen {
    font-family: monospace;
    background-color: rgba(0,0,0);
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    font-size: 12px;
    max-width: 100vw;
    max-height: 100vh;
    box-sizing: border-box;
}

/* Editor Container (specific) */
.voxel-editor-container {
    position: absolute;
    background: rgba(0,0,0,0.7);
    top: 20px;
    right: 20px;
    width: 300px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    z-index: 9999;
    padding: 10px;
}

/* Editor Title */
.voxel-editor-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 12px;
}

/* Editor Sections */
.voxel-editor-section {
    margin-bottom: 20px;
}

.voxel-editor-section h4 {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 12px;
}

/* Labels and Controls */
.voxel-editor-label {
    display: inline-block;
    width: 120px;
    font-weight: bold;
    font-size: 12px;
    color: #fff;
}

.voxel-editor-control-group {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* Inputs */
.voxel-editor-input,
.voxel-editor-input-text,
.voxel-editor-input-number {
    font-family: monospace;
    font-size: 12px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    border: 1px solid #fff;
    padding: 2px;
    outline: none;
    box-shadow: none;
    border-radius: 0;
}

.voxel-editor-input-text .readonly {
    color: #888;
}

.voxel-editor-input-text {
    width: 150px;
}

.voxel-editor-input-number {
    width: 80px;
}

.voxel-editor-input[disabled],
.voxel-editor-input-text[disabled],
.voxel-editor-input-number[disabled] {
    background-color: rgba(0,0,0,0.3);
}

.voxel-editor-checkbox {
    margin-left: 5px;
    cursor: pointer;
}

/* Buttons */
.voxel-editor-button,
.setup-screen-button {
    font-family: monospace;
    font-size: 12px;
    margin: 2px;
    padding: 3px 6px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    text-decoration: none;
    border-radius: 0;
}

.voxel-editor-button:disabled,
.setup-screen-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.voxel-editor-button-container {
    display: flex;
    gap: 5px;
}

/* Lists */
.voxel-editor-list {
    list-style-type: none;
    padding-left: 0;
    border: 1px solid #fff;
    height: 100px;
    overflow-y: auto;
    margin-bottom: 10px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
}

.voxel-editor-list li {
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px solid #fff;
}

.voxel-editor-list li:hover {
    background-color: rgba(0,255,0,0.3);
}

.voxel-editor-list li.selected {
    background-color: rgba(0,255,0,0.3);
}

/* Close Button */
.voxel-editor-close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    font-family: monospace;
    font-size: 12px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 0;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    font-size: 12px;
}

.loading-screen-text {
    color: #fff;
    font-size: 12px;
    margin-bottom: 20px;
}

.loading-screen-progress-bar,
.loading-screen-overall-progress-bar {
    font-size: 12px;
    margin-top: 10px;
    white-space: pre;
}

.loading-screen-progress-bar {
    color: #888;
}

.loading-screen-overall-progress-bar {
    color: #0f0;
}

.loading-screen-overall-progress-text {
    color: #fff;
    font-size: 12px;
    margin-top: 20px;
}

/* Setup Screen */
.setup-screen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-size: 12px;
    box-sizing: border-box;
}

.setup-screen-title {
    color: #fff;
    margin-bottom: 20px;
    font-size: 12px;
    text-align: center;
}

/* Button Container */
.setup-screen-button-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Smaller gap to match editor styling */
}

/* Setup Screen Buttons */
.setup-screen-button {
    font-size: 12px;
    padding: 5px 10px;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 0;
    cursor: pointer;
}

/* Readonly Attributes */
.readonly .voxel-editor-input-text{
    color: #888;
}

/* Disabled Buttons */
.setup-screen-button.disabled-button {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Current world label */
.current-world-label {
    color: #fff;
    font-size: 12px;
    margin-bottom: 10px;
}

/* HUD container */
.voxel-hud-container {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    font-family: monospace;
    font-size: 12px;
    pointer-events: none; /* HUD should not block clicks */
    z-index: 5555;
}

/* Each debug value item */
.voxel-hud-item {
    margin-bottom: 4px;
    pointer-events: auto; /* so child elements can still be interacted if needed */
}

.voxel-hud-label {
    font-size: 12px;
    color: #fff;
}

.voxel-hud-value {
    font-size: 12px;
    color: #fff;
}

/* HUD buttons (reuse editor button styling) */
.voxel-hud-button {
    pointer-events: auto; /* enable interaction for buttons */
    margin-top: 10px;
    margin-right: 5px;
    font-size: 12px;
    background-color: rgba(0,0,0,0.5); /* consistent with editor style */
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    border-radius: 0;
    padding: 3px 6px;
    text-decoration: none;
    display: inline-block;
}

/* Toolbar Container */
.voxel-toolbar-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 5555;
    font-family: monospace;
}

/* Toolbar Slots */
.voxel-toolbar-slot {
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.7);
    border: 1px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 20px;
    font-weight: bold;
    user-select: none;
    cursor: default;
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 0; /* Remove rounded corners for consistency */
}

.voxel-toolbar-slot:hover {
    transform: scale(1.1);
}

/* Active slots that represent actual tools */
.voxel-toolbar-slot-active {
    cursor: pointer;
}

/* Empty slot styling if needed */
.voxel-toolbar-slot-empty {
    opacity: 0.5;
}

/* Selected tool slot styling */
.voxel-toolbar-slot-selected {
    position: relative;
    top: -5px;
    box-shadow: 0 0 15px rgba(255,255,255,0.9);
}

/* Block Type Selector Container */
.voxel-toolbar-selector-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: monospace;
    font-size: 12px;
    color: #fff;
    z-index: 5555;
}

/* Block Type Selector Label */
.voxel-toolbar-selector-label {
    margin-right: 10px;
    color: #fff;
}

/* Block Type Selector Dropdown */
.voxel-toolbar-selector-dropdown {
    font-size: 12px;
    font-family: monospace;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    border: 1px solid #fff;
    padding: 2px;
    outline: none;
    border-radius: 0;
    cursor: pointer;
}