:root {
    --unit: 20px; 
    --gap-size: 1px;
    --brick-height: 12px; 
    --stud-height: 2px;
}
body {
    margin: 0;
    background-color: #1a1a1a;
    overflow: hidden;
    font-family: sans-serif;
    color: #eee;
}
.view-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.view-container.hidden { display: none; }

/* --- 2D Build View --- */
#build-view { background-color: #333; cursor: crosshair; }
#build-grid-canvas, #build-interaction-layer { position: absolute; }
#build-interaction-layer { cursor: none; }
#ghost-brick-2d {
    position: absolute;
    background-color: #7DF9FF;
    opacity: 0.7;
    border: 1px dashed white;
    pointer-events: none;
}

/* --- 3D Scene View --- */
#scene-view { perspective: 2000px; cursor: grab; }
#scene-view:active { cursor: grabbing; }
.scene {
    position: relative;
    transform-style: preserve-3d; /* THE CRITICAL TYPO IS FIXED HERE */
}
#lego-land { 
    position: relative; 
    transform-style: preserve-3d;
}

/* --- Brick Visuals --- */
.lego-brick, .baseplate-brick {
    position: absolute;
    transform-style: preserve-3d;
}
.brick-face { 
    position: absolute; 
    box-sizing: border-box; 
    border: 1px solid rgba(0,0,0,0.2);
}
.top-surface {
    display: grid;
    padding: 2px;
    gap: 2px;
    border-radius: 2px;
    background-color: var(--main-color);
    transform: translateZ(var(--brick-height));
}
.bottom-surface {
    width: var(--width);
    height: var(--height);
    background-color: var(--dark-color);
    transform: translateZ(0px);
}
.side-front {
    width: var(--width);
    height: var(--brick-height);
    background-color: var(--dark-color);
    transform-origin: top;
    transform: rotateX(-90deg);
}
.side-back {
    width: var(--width);
    height: var(--brick-height);
    background-color: var(--dark-color);
    transform-origin: top;
    transform: translateY(var(--height)) rotateX(-90deg);
}
.side-left {
    width: var(--brick-height);
    height: var(--height);
    background-color: var(--dark-color);
    transform-origin: left;
    transform: rotateY(90deg);
}
.side-right {
    width: var(--brick-height);
    height: var(--height);
    background-color: var(--dark-color);
    transform-origin: left;
    transform: translateX(var(--width)) rotateY(90deg);
}
.stud {
    border-radius: 50%;
    background-color: inherit;
    position: relative;
    transform-style: preserve-3d;
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.5),
                inset 0px -1px 1px rgba(0,0,0,0.2);
    transform: translateZ(var(--stud-height));
}
.baseplate-brick .top-surface {
    background-color: #3c4043;
    transform: translateZ(0px);
}
.baseplate-brick .stud {
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.1), 
                inset 0px -1px 1px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
}

/* --- UI --- */
.ui-container { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; z-index: 10000; }
.selector-panel { background-color: rgba(0,0,0,0.5); padding: 8px; border-radius: 10px; display: flex; gap: 10px; align-items: center; }
.selector-brick { position: relative; border-radius: 4px; box-sizing: border-box; display: grid; padding: 2px; gap: 2px; background-color: #777; border: 2px solid #555; transition: all 0.2s ease; cursor: pointer; }
.selector-brick.selected { border-color: #7DF9FF; transform: scale(1.1); box-shadow: 0 0 15px #7DF9FF; }
.selector-stud { border-radius: 50%; background-color: inherit; }
.color-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #555; cursor: pointer; transition: all 0.2s ease; }
.color-swatch.selected { border-color: white; transform: scale(1.2); }
#controls-legend { position: fixed; bottom: 20px; right: 20px; background-color: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 10px; z-index: 10001; font-size: 14px; border: 1px solid #444; }
#controls-legend h4 { margin: 0 0 10px 0; text-align: center; border-bottom: 1px solid #555; padding-bottom: 5px; }
#controls-legend p { margin: 5px 0; }
#controls-legend span { background-color: #ddd; color: #333; padding: 2px 6px; border-radius: 4px; border: 1px solid #333; font-family: monospace; }