.builder-app {
    padding: 24px;
}

.playing-area {
    max-width: 360px;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 6px;
}

.playing-area h2 {
    margin-top: 0;
}

.unit-selector {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px;
}

.unit-selector label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dimension-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.dimension-fields label {
    grid-row: 1;
}

.dimension-fields input {
    grid-row: 2;
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    font-size: 16px;
}

#generate-grid {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px 16px;
    font-size: 16px;
    cursor: pointer;
}


.grid-output {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
}

.grid-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.grid-toolbar button {
    padding: 6px 14px;
    cursor: pointer;
}

#zoom-level {
    min-width: 48px;
    text-align: center;
}

#grid-viewport {
    width: 100%;
    height: 65vh;
    min-height: 350px;
    max-height: 800px;

    overflow: auto;
    background-color: #222;
    border: 1px solid #666;

    cursor: default;
    touch-action: none;
    user-select: none;
}

#grid-viewport.dragging {
    cursor: grabbing;
}

#terrain-grid {
    display: block;
    max-width: none;
}

.assembly-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.assembly-selector select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

/* Assembly editing menu */

#assembly-editor {
    width: min(400px, 90vw);
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid #777;
    border-radius: 8px;
    background: #252525;
    color: #fff;
}

#assembly-editor::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

#assembly-editor h2 {
    margin-top: 0;
}

#assembly-editor h3 {
    margin-bottom: 10px;
}

#assembly-editor-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#edit-assembly-type,
.wall-type-select {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    font-size: 15px;
}

.wall-control {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.editor-rotation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.editor-actions button,
.editor-rotation button {
    padding: 8px 12px;
    cursor: pointer;
}

#delete-assembly {
    margin-right: auto;
}