.landscape-builder-nav {
  appearance: none;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  color: #c9b7aa;
  border: 0;
  border-left: 1px solid rgba(255, 118, 24, 0.2);
  background: transparent;
  cursor: pointer;
  font: 800 9px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landscape-builder-nav:hover,
.landscape-builder-nav:focus-visible,
.landscape-builder-nav[aria-expanded="true"] {
  color: #ff9a57;
  background: rgba(255, 118, 24, 0.12);
  outline: none;
}

.landscape-builder-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.landscape-builder-overlay[hidden] {
  display: none !important;
}

.landscape-builder-overlay {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #eee1d5;
  background: rgba(10, 10, 9, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.landscape-builder-open {
  overflow: hidden;
}

.landscape-builder-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1480px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  overflow: hidden;
  border: 1px solid rgba(255, 124, 39, 0.5);
  border-radius: 20px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #171513;
  background-size: 18px 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.68), inset 0 1px rgba(255, 255, 255, 0.07);
}

.landscape-builder-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 126, 41, 0.28);
  background: linear-gradient(90deg, rgba(66, 32, 19, 0.96), rgba(24, 19, 16, 0.97));
}

.landscape-builder-kicker,
.landscape-builder-section-title,
.landscape-builder-status,
.landscape-builder-level-output,
.landscape-builder-validation {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.landscape-builder-kicker {
  color: #f1a873;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.landscape-builder-title {
  margin-top: 3px;
  color: #fff2e6;
  font: 700 clamp(24px, 3vw, 38px)/0.95 Georgia, serif;
}

.landscape-builder-status {
  color: #a99282;
  font-size: 9px;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.landscape-builder-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #f0c3a1;
  border: 1px solid rgba(255, 139, 62, 0.55);
  border-radius: 50%;
  background: #171310;
  cursor: pointer;
  font: 400 27px/1 Georgia, serif;
}

.landscape-builder-close:hover,
.landscape-builder-close:focus-visible {
  color: #fff;
  border-color: #ff8a3c;
  outline: 2px solid rgba(255, 138, 60, 0.24);
  outline-offset: 2px;
}

.landscape-builder-body {
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  min-height: 0;
}

.landscape-builder-sidebar {
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 126, 41, 0.22);
  background: rgba(13, 12, 11, 0.88);
}

.landscape-builder-section + .landscape-builder-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.landscape-builder-section-title {
  margin-bottom: 9px;
  color: #dca47e;
  font-size: 9px;
  letter-spacing: 0.14em;
}

.landscape-builder-section-title span {
  float: right;
  color: #806f64;
  letter-spacing: .05em;
}

.landscape-builder-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 430px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-color: rgba(255, 126, 41, .45) rgba(255,255,255,.03);
}

.landscape-builder-palette-button {
  appearance: none;
  display: grid;
  min-width: 0;
  min-height: 92px;
  padding: 5px;
  color: #bda99b;
  border: 1px solid rgba(255, 126, 41, 0.18);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  font: 700 9px/1.2 ui-monospace, monospace;
  text-align: center;
}

.landscape-builder-palette-button[data-audit-status="experimental"] {
  border-style: dashed;
}

.landscape-builder-palette-button[data-audit-status="retired"] {
  opacity: .42;
  filter: saturate(.45);
}

.landscape-builder-audit-status {
  margin-top: 3px;
  color: #88766a;
  font: 800 7px/1 ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

[data-audit-status="approved"] .landscape-builder-audit-status { color: #93c9a5; }
[data-audit-status="candidate"] .landscape-builder-audit-status { color: #e0ac86; }
[data-audit-status="experimental"] .landscape-builder-audit-status { color: #d69279; }
[data-audit-status="retired"] .landscape-builder-audit-status { color: #b16d63; }

.landscape-builder-palette-art {
  position: relative;
  display: block;
  width: 100%;
  height: 65px;
}

.landscape-builder-palette-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.45));
}

.landscape-builder-palette-button:hover,
.landscape-builder-palette-button:focus-visible,
.landscape-builder-palette-button[aria-pressed="true"] {
  color: #fff0e4;
  border-color: rgba(255, 139, 62, 0.72);
  background: rgba(255, 112, 20, 0.11);
  outline: none;
}

.landscape-builder-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.landscape-builder-button,
.landscape-builder-tool,
.landscape-builder-icon-button {
  appearance: none;
  min-height: 36px;
  color: #d2beb0;
  border: 1px solid rgba(255, 126, 41, 0.25);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  font: 800 9px/1 ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landscape-builder-tool:hover,
.landscape-builder-tool:focus-visible,
.landscape-builder-tool[aria-pressed="true"],
.landscape-builder-button:hover,
.landscape-builder-button:focus-visible,
.landscape-builder-icon-button:hover,
.landscape-builder-icon-button:focus-visible {
  color: #fff4ea;
  border-color: #ff8a3c;
  background: rgba(255, 112, 20, 0.12);
  outline: none;
}

.landscape-builder-selection {
  display: grid;
  gap: 10px;
}

.landscape-builder-level {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 7px;
}

.landscape-builder-icon-button {
  min-height: 34px;
  font-size: 17px;
}

.landscape-builder-level-output {
  display: grid;
  place-items: center;
  min-height: 34px;
  color: #f0b88f;
  border: 1px solid rgba(255,126,41,.18);
  border-radius: 9px;
  font-size: 10px;
}

.landscape-builder-button[disabled],
.landscape-builder-icon-button[disabled] {
  opacity: .35;
  cursor: default;
}

.landscape-builder-help {
  color: #8f7d72;
  font: 400 11px/1.45 ui-monospace, monospace;
}

.landscape-builder-scale {
  display: grid;
  gap: 5px;
  margin: 0;
  font: 700 9px/1.35 ui-monospace, monospace;
  text-transform: uppercase;
}

.landscape-builder-scale div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px dotted rgba(255,255,255,.1);
}

.landscape-builder-scale dt {
  color: #9e8a7c;
}

.landscape-builder-scale dd {
  margin: 0;
  color: #e0ac86;
  text-align: right;
}

.landscape-builder-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.landscape-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,126,41,.18);
  background: rgba(10,9,8,.72);
}

.landscape-builder-toolbar .landscape-builder-button {
  min-height: 32px;
  padding: 0 11px;
}

.landscape-builder-spacer {
  flex: 1 1 auto;
}

.landscape-builder-stage {
  position: relative;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% 43%, rgba(124, 53, 20, .15), transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0/24px 24px,
    #111210;
  outline: none;
}

.landscape-builder-stage:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 138, 60, .55);
}

.landscape-builder-board {
  position: relative;
  width: 1360px;
  height: 780px;
  margin: 0 auto;
}

.landscape-builder-cell {
  position: absolute;
  width: 140px;
  height: 90px;
  overflow: visible;
  pointer-events: none;
}

.landscape-builder-hit {
  appearance: none;
  position: absolute;
  /* The construction cursor belongs to the ground plane beneath the tile,
     not to its raised top face. This is the rendered depth of the molten
     tile body at the builder's 190px scale. */
  top: 18px;
  left: -25px;
  z-index: 12;
  width: 190px;
  /* Match the builder lattice exactly: neighbouring cells advance by half
     this diamond's width (95px) and half its height (54px). */
  height: 108px;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  pointer-events: auto;
}

.landscape-builder-hit::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(255, 130, 43, .055);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Empty positions are projected onto the ground beneath a future tile. Once
   a tile occupies a position, its cell has already been raised by the shared
   tile-thickness unit, so the cursor belongs on that stack's top surface. */
.landscape-builder-cell.is-occupied .landscape-builder-hit {
  top: 0;
}

.landscape-builder-hit:hover::before,
.landscape-builder-hit:focus-visible::before,
.landscape-builder-cell.is-selected .landscape-builder-hit::before {
  opacity: 1;
  background: rgba(255, 145, 72, .16);
}

.landscape-builder-hit:focus-visible {
  outline: none;
}

.landscape-builder-support-hit {
  appearance: none;
  position: absolute;
  top: 108px;
  left: -25px;
  z-index: 11;
  width: 190px;
  height: calc(28px + var(--support-levels) * 18px);
  padding: 0;
  border: 0;
  background: transparent;
  clip-path: polygon(0 0, 50% 28px, 100% 0, 100% calc(100% - 28px), 50% 100%, 0 calc(100% - 28px));
  cursor: pointer;
  pointer-events: auto;
}

.landscape-builder-support-hit:hover,
.landscape-builder-support-hit:focus-visible {
  outline: 2px solid rgba(255,151,85,.58);
  outline-offset: -3px;
  background: rgba(255,125,46,.08);
}

.landscape-builder-stack,
.landscape-builder-sprite,
.landscape-builder-terrain,
.landscape-builder-support-course,
.landscape-builder-booster,
.landscape-builder-occupant {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.landscape-builder-stack {
  inset: 0;
  overflow: visible;
}

.landscape-builder-sprite,
.landscape-builder-terrain,
.landscape-builder-booster {
  left: -25px;
  top: 0;
  width: 190px;
  height: auto;
  filter: drop-shadow(0 7px 5px rgba(0,0,0,.4));
}

/* Individual masonry courses share the molten cap's registered footprint and
   descend on the exact 18px construction lattice. */
.landscape-builder-support-course {
  left: -25px;
  top: calc(var(--course-index) * 18px);
  z-index: 1;
  width: 190px;
  height: auto;
  filter: drop-shadow(0 7px 5px rgba(0,0,0,.42));
}

/* One deterministic stone column sits behind one molten cap. The 36px V
   follows the cap's actual underside rather than the 54px grid row step.
   Its bottom datum remains exactly levels × 18px below that underside. */
.landscape-builder-support {
  position: absolute;
  left: -25px;
  top: 90px;
  z-index: 1;
  width: 190px;
  height: calc(36px + var(--support-levels) * 18px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(31,22,18,.16), transparent 47%, rgba(18,13,11,.34) 50%, transparent 54%),
    var(--support-render) center / 100% 100% no-repeat,
    #5a3828;
  clip-path: polygon(0 0, 50% 36px, 100% 0, 100% calc(100% - 36px), 50% 100%, 0 calc(100% - 36px));
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.48));
}

/* Course seams begin at the cap datum and repeat on the same 18px lattice as
   elevation. Column mode uses identical geometry without these joins. */
.landscape-builder-support[data-support-style="courses"] {
  background:
    repeating-linear-gradient(to bottom, transparent 0 15px, rgba(19,12,9,.96) 15px 17px, rgba(154,103,67,.38) 17px 18px),
    linear-gradient(90deg, rgba(31,22,18,.16), transparent 47%, rgba(18,13,11,.34) 50%, transparent 54%),
    var(--support-render) center / 100% 100% no-repeat,
    #5a3828;
}

.landscape-builder-booster {
  z-index: 1;
}

.landscape-builder-sprite {
  z-index: 2;
}

.landscape-builder-terrain {
  z-index: 3;
  filter: drop-shadow(0 7px 5px rgba(0,0,0,.42));
}

/* Terrain sprites retain the production tile's fixed lattice while gaining
   their own vertical silhouette and port scale. */
.landscape-builder-cell[data-type="bonsai"] .landscape-builder-terrain {
  top: -65px;
  left: -45px;
  width: 220px;
}

.landscape-builder-cell[data-type="pool"] .landscape-builder-terrain {
  left: -8px;
  width: 156px;
}

.landscape-builder-cell[data-type="waterfall"] .landscape-builder-terrain {
  left: -35px;
  width: 210px;
}

.landscape-builder-cell[data-type="steps"] .landscape-builder-terrain,
.landscape-builder-cell[data-type^="stair"] .landscape-builder-terrain {
  top: -2px;
  left: -25px;
  width: 190px;
}

.landscape-builder-cell[data-type="dais"] .landscape-builder-terrain {
  top: -14px;
}

.landscape-builder-cell[data-type="mapleGrove"] .landscape-builder-terrain {
  top: -58px;
  left: -15px;
  width: 170px;
}

.landscape-builder-cell[data-type="fernCorner"] .landscape-builder-terrain,
.landscape-builder-cell[data-type="rockyHeadwater"] .landscape-builder-terrain {
  top: -12px;
}

.landscape-builder-occupant {
  left: 41px;
  top: 35px;
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.7));
  z-index: 8;
}

.landscape-builder-cell.is-selected .landscape-builder-sprite {
  filter: drop-shadow(0 0 6px rgba(255, 230, 205, .95)) drop-shadow(0 7px 5px rgba(0,0,0,.4));
}

.landscape-builder-cell.is-selected .landscape-builder-terrain {
  filter: drop-shadow(0 0 6px rgba(255, 230, 205, .82)) drop-shadow(0 7px 5px rgba(0,0,0,.42));
}

.landscape-builder-cell.is-invalid .landscape-builder-sprite {
  filter: drop-shadow(0 0 7px rgba(218, 69, 47, .95)) drop-shadow(0 7px 5px rgba(0,0,0,.4));
}

.landscape-builder-cell.is-invalid .landscape-builder-terrain {
  filter: drop-shadow(0 0 7px rgba(218, 69, 47, .9)) drop-shadow(0 7px 5px rgba(0,0,0,.42));
}

.landscape-builder-cell.is-drop-target .landscape-builder-hit::before {
  opacity: 1;
  background: rgba(100, 191, 140, .26);
}

.landscape-builder-validation {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 43px;
  padding: 10px 14px;
  color: #a79385;
  border-top: 1px solid rgba(255,126,41,.18);
  background: rgba(10,9,8,.78);
  font-size: 9px;
  letter-spacing: .07em;
}

.landscape-builder-validation strong {
  color: #f0b88f;
}

.landscape-builder-validation.is-valid strong {
  color: #93c9a5;
}

.landscape-builder-validation.is-invalid strong {
  color: #f18e78;
}

@media (max-width: 900px) {
  .landscape-builder-shell {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .landscape-builder-header {
    min-height: 66px;
    padding: 10px 12px;
  }

  .landscape-builder-status {
    display: none;
  }

  .landscape-builder-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .landscape-builder-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 10px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(255,126,41,.22);
  }

  .landscape-builder-section + .landscape-builder-section {
    margin: 0;
    padding: 0 0 0 10px;
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,.08);
  }

  .landscape-builder-sidebar .landscape-builder-section:nth-child(n+3) {
    display: none;
  }

  .landscape-builder-section-title {
    margin-bottom: 5px;
  }

  .landscape-builder-palette {
    display: flex;
    gap: 5px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .landscape-builder-palette-button {
    flex: 0 0 68px;
    min-height: 58px;
    padding: 3px;
  }

  .landscape-builder-palette-art {
    height: 39px;
  }

  .landscape-builder-tool-grid {
    display: flex;
  }

  .landscape-builder-tool {
    min-width: 54px;
    min-height: 58px;
  }

  .landscape-builder-validation {
    padding: 8px 10px;
  }
}

@media (max-width: 620px) {
  .landscape-builder-nav span {
    display: none;
  }

  .landscape-builder-nav {
    grid-template-columns: 18px;
    padding-inline: 6px;
  }

  .landscape-builder-title {
    font-size: 25px;
  }

  .landscape-builder-toolbar {
    gap: 5px;
    padding: 6px 8px;
  }

  .landscape-builder-toolbar .landscape-builder-button {
    min-height: 38px;
    padding: 0 8px;
  }

  .landscape-builder-validation span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landscape-builder-overlay,
  .landscape-builder-cell,
  .landscape-builder-sprite {
    transition: none;
  }
}