* { box-sizing: border-box; }
html, body {
    margin: 0;
    height: 100%;
    background: #12151a;
    color: #e8ecf1;
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
}

#app { position: fixed; inset: 0; }

.phase { position: fixed; inset: 0; display: none; }
.phase.active { display: block; }

/* ---------- phase 1: heightmap ---------- */

#heightmapPhase { display: none; }
#heightmapPhase.active { display: flex; }
.hm-layout { display: flex; width: 100%; height: 100%; }
.hm-canvas-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(45deg, #1a1e24 25%, transparent 25%) -8px 0/16px 16px,
        linear-gradient(-45deg, #1a1e24 25%, transparent 25%) -8px 0/16px 16px,
        #14171c;
}
#hmCanvas {
    width: min(80vh, 80vw);
    height: min(80vh, 80vw);
    image-rendering: pixelated;
    border: 1px solid #2c333c;
    cursor: crosshair;
    touch-action: none;
}
.hm-sidebar {
    width: 260px;
    padding: 16px;
    background: #171b21;
    border-left: 1px solid #262c35;
    overflow-y: auto;
}
.hm-sidebar h1 { font-size: 15px; margin: 0 0 4px; }
.hm-sidebar p.hint { color: #8b96a5; font-size: 12px; margin: 0 0 16px; }
.swatch-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; }
.swatch {
    aspect-ratio: 1;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.swatch.active { border-color: #fff; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: #9aa5b3; margin-bottom: 4px; }
input[type=range] { width: 100%; }
button.action {
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 8px;
    border: 1px solid #34404f;
    border-radius: 6px;
    background: #232a34;
    color: #e8ecf1;
    cursor: pointer;
    font-size: 13px;
}
button.action:hover { background: #2b3441; }
button.action.primary { background: #2f6fdb; border-color: #2f6fdb; font-weight: 600; }
button.action.primary:hover { background: #3a7ce6; }
button.action.danger { background: #3a2323; border-color: #5a2f2f; }

/* ---------- phase 2: 3D editor ---------- */

#editor3dPhase.active { display: block; }
#viewport3d { position: absolute; inset: 0; }
#hud3d {
    position: absolute; top: 0; left: 0; bottom: 0; width: 280px;
    background: rgba(17, 20, 25, 0.88);
    border-right: 1px solid #262c35;
    padding: 14px; overflow-y: auto;
    backdrop-filter: blur(6px);
}
#hud3d h2 { font-size: 14px; margin: 14px 0 8px; color: #cfd8e3; }
#hud3d h2:first-child { margin-top: 0; }
.tool-row { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tool-btn {
    padding: 6px 10px; border-radius: 5px; border: 1px solid #34404f;
    background: #202730; color: #cfd8e3; cursor: pointer; font-size: 12px;
}
.tool-btn.active { background: #2f6fdb; border-color: #2f6fdb; color: #fff; }
#blockPalette {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
    max-height: 220px; overflow-y: auto; margin-bottom: 10px;
}
.block-swatch {
    aspect-ratio: 1; border-radius: 4px; border: 2px solid transparent;
    cursor: pointer; background-size: cover;
}
.block-swatch.active { border-color: #fff; }
#status3d { font-size: 12px; color: #9aa5b3; min-height: 32px; }
.spawn-list { font-size: 12px; }
.spawn-list .row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #262c35; }
.spawn-list button { background: none; border: none; color: #d86b6b; cursor: pointer; font-size: 12px; }

#topBar3d {
    position: absolute; top: 0; right: 0; display: flex; gap: 8px; padding: 12px;
    z-index: 5;
}
#topBar3d button {
    padding: 8px 14px; border-radius: 6px; border: 1px solid #34404f;
    background: #202730; color: #e8ecf1; cursor: pointer; font-size: 13px;
}
#topBar3d button.primary { background: #2f6fdb; border-color: #2f6fdb; font-weight: 600; }
#topBar3d button.test { background: #2e9e4f; border-color: #2e9e4f; font-weight: 600; }
#topBar3d button:disabled { opacity: 0.5; cursor: default; }

#toast {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    background: #202730; border: 1px solid #34404f; border-radius: 8px;
    padding: 10px 16px; font-size: 13px; z-index: 10; display: none; max-width: 60vw;
}
#toast.show { display: block; }
#toast.error { border-color: #7a3a3a; background: #2a1f1f; }