/* ═══════════════════════════════════════════════════════════════
   Scene 3D — Room, House, Openings, Glow, Paint Layers
   ═══════════════════════════════════════════════════════════════ */

/* ── 3D Room (Inside) ───────────────────────────────────────── */
.room-stage {
  flex: 1;
  width: 100%;
  min-height: 300px;
  background: var(--scene-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: 0;
  border: none;
}
.room-viewport {
  width: 100%; height: 100%;
  perspective: 1000px;
  cursor: grab;
  position: relative;
  touch-action: none;
}
.room-viewport:active { cursor: grabbing; }
/* 3D interaction hint */
.room-viewport[data-hint]::after,
.house-viewport[data-hint]::after {
  content: attr(data-hint);
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.55); color: #fff; font-size: 12px; font-weight: 500;
  pointer-events: none; z-index: 5; white-space: nowrap;
  opacity: 1; transition: opacity .5s ease;
}
.room-viewport.interacted[data-hint]::after,
.house-viewport.interacted[data-hint]::after { opacity: 0; }
.room3d {
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
  will-change: transform;
}
#roomBox { position: absolute; transform-style: preserve-3d; }

.room3d .face {
  position: absolute;
  background: #eef2fb;
  border: 1px solid #d6deea;
  transform-origin: 0 0 0;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: opacity .2s ease, visibility .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.room3d .face:hover { filter: brightness(1.03); }
.room3d .face.wall.a { background: var(--face-wall-a); }
.room3d .face.wall.b { background: var(--face-wall-b); }
.room3d .face.wall.c { background: var(--face-wall-a); }
.room3d .face.wall.d { background: var(--face-wall-b); }
.room3d .face.wall { opacity: 1; box-shadow: inset 0 1px 4px rgba(0,0,0,0.04); }
.room3d .face.wall.seeThrough { opacity: .45; }
.room3d .face.ceiling, .room3d .face.polygon-ceiling { background: var(--face-ceiling); opacity: .82; }
.room3d .face.floor, .room3d .face.polygon-floor { background: var(--face-floor); opacity: 1 !important; filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.06)); }

/* Wall label (A/B/C/D) */
.wall-label-3d {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: 600 14px/1 system-ui, sans-serif;
  color: rgba(0,0,0,0.18);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Room label on floor */
.room-label-3d {
  font: 500 10px/1.2 system-ui, sans-serif;
  color: rgba(0,0,0,0.35);
  text-align: center;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
}

/* Active / non-active rooms */
.room-node:not(.room-node--active) .openings-layer { pointer-events: none !important; }
/* NB: opacity и filter на контейнере ломают preserve-3d (создают stacking context).
   Поэтому применяем к дочерним элементам отдельно, чтобы сохранить 3D. */
.room-node:not(.room-node--active) > .roomBox > .face,
.room-node:not(.room-node--active) > .paint-layer,
.room-node:not(.room-node--active) > .openings-layer,
.room-node:not(.room-node--active) > .room-label-3d {
  opacity: 0.55;
  filter: saturate(0.6);
  transition: opacity .3s ease, filter .3s ease;
}

/* 3D face glow */
.room3d .face.active3d:not(.polygon-floor):not(.polygon-ceiling)::before,
.room3d .face.glow3d:not(.polygon-floor):not(.polygon-ceiling)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
  transform-style: preserve-3d; will-change: transform;
}
.room3d .face.active3d:not(.polygon-floor):not(.polygon-ceiling)::before {
  box-shadow: inset 0 0 0 3px rgba(244,163,0,.95), 0 0 24px rgba(244,163,0,.35);
  filter: brightness(1.02);
}
.room3d .face.glow3d:not(.active3d):not(.polygon-floor):not(.polygon-ceiling)::before {
  box-shadow: inset 0 0 0 2px rgba(244,163,0,.85), 0 0 22px rgba(244,163,0,.35);
}

/* Wall glow Z-shift */
.room3d .face.wall.a.active3d::before, .room3d .face.wall.a.glow3d::before,
.room3d .face.wall.b.active3d::before, .room3d .face.wall.b.glow3d::before,
.room3d .face.wall.c.active3d::before, .room3d .face.wall.c.glow3d::before,
.room3d .face.wall.d.active3d::before, .room3d .face.wall.d.glow3d::before,
.room3d .face.wall.polygon-wall.active3d::before, .room3d .face.wall.polygon-wall.glow3d::before {
  transform: translateZ(calc(-1 * var(--int-glow-eps)));
}
.room3d .face.ceiling.active3d:not(.polygon-ceiling)::before,
.room3d .face.ceiling.glow3d:not(.polygon-ceiling)::before { transform: translateY(-0.6px); }
.room3d .face.floor.active3d:not(.polygon-floor)::before,
.room3d .face.floor.glow3d:not(.polygon-floor)::before { transform: translateY(0.6px); }

/* Polygon floor/ceiling */
.room3d .face.polygon-floor, .room3d .face.polygon-ceiling {
  background: transparent !important; box-shadow: none !important;
  outline: none !important; border: none !important;
}
.room3d .face.polygon-floor.active3d, .room3d .face.polygon-floor.glow3d,
.room3d .face.polygon-ceiling.active3d, .room3d .face.polygon-ceiling.glow3d {
  box-shadow: none !important; outline: none !important; border: none !important;
}
.room3d .face.polygon-floor .polygon-svg, .room3d .face.polygon-ceiling .polygon-svg { pointer-events: none; }
.room3d .face.polygon-floor .polygon-shape { fill: #eef4ff; stroke: transparent; stroke-width: 0; vector-effect: non-scaling-stroke; }
.room3d .face.polygon-ceiling .polygon-shape { fill: #edfaff; fill-opacity: 0.55; stroke: transparent; stroke-width: 0; vector-effect: non-scaling-stroke; }

/* Polygon glow */
.room3d .face.polygon-floor.active3d .polygon-shape, .room3d .face.polygon-ceiling.active3d .polygon-shape {
  stroke: rgba(244,163,0,.95); stroke-width: 3px; filter: drop-shadow(0 0 8px rgba(244,163,0,.5));
}
.room3d .face.polygon-floor.glow3d:not(.active3d) .polygon-shape,
.room3d .face.polygon-ceiling.glow3d:not(.active3d) .polygon-shape {
  stroke: rgba(244,163,0,.85); stroke-width: 2px; filter: drop-shadow(0 0 6px rgba(244,163,0,.4));
}

/* No ::before for polygon */
.room3d .face.polygon-floor.active3d::before, .room3d .face.polygon-floor.glow3d::before,
.room3d .face.polygon-ceiling.active3d::before, .room3d .face.polygon-ceiling.glow3d::before,
.room3d .face.floor.polygon-floor.active3d::before, .room3d .face.floor.polygon-floor.glow3d::before,
.room3d .face.ceiling.polygon-ceiling.active3d::before, .room3d .face.ceiling.polygon-ceiling.glow3d::before {
  display: none !important; content: none !important;
}

/* Polygon walls */
.room3d .face.wall.polygon-wall { background: var(--face-wall-a); }
.room3d .face.wall.polygon-wall.edge1, .room3d .face.wall.polygon-wall.edge3,
.room3d .face.wall.polygon-wall.edge5, .room3d .face.wall.polygon-wall.edge7 { background: var(--face-wall-b); }
/* polygon-wall glow теперь через ::before (как у rect-стен) */

/* Paint layers */
.room-node .paint-layer { position: absolute; pointer-events: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.room-node .paint-layer.polygon-paint { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.room-node .paint-layer .polygon-paint-shape { fill: transparent; stroke: none; }
/* Paint active: colored surface */
.room-node .paint-layer.paint-active {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 0 8px rgba(0,0,0,0.08);
}
/* Paint included: surface in calculation but no color selected yet */
.room-node .paint-layer.paint-included {
  background: repeating-linear-gradient(
    45deg,
    rgba(245,158,11,0.10) 0px,
    rgba(245,158,11,0.10) 2px,
    transparent 2px,
    transparent 6px
  ) !important;
}


/* ── 3D Wall Nodes ──────────────────────────────────────────── */
.wall-node-3d { position: absolute; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.wall-node-3d .wall-face { position: absolute; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wall-node-3d .wall-face.side-a, .wall-node-3d .wall-face.side-b { background: #e8e8e8; border: none; cursor: grab; }
.wall-node-3d .wall-face.side-a:active, .wall-node-3d .wall-face.side-b:active { cursor: grabbing; }
.wall-node-3d .wall-face.top-cap, .wall-node-3d .wall-face.left-cap, .wall-node-3d .wall-face.right-cap { background: #d8d8d8; }
.wall-node-3d .wall-paint-layer { position: absolute; pointer-events: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.wall-node-3d.wall-active .wall-face.side-a, .wall-node-3d.wall-active .wall-face.side-b { box-shadow: inset 0 0 0 2px rgba(244,163,0,.85), 0 0 16px rgba(244,163,0,.35); }
.wall-node-3d .wall-face.glow3d { box-shadow: inset 0 0 0 3px rgba(244,163,0,.95), 0 0 20px rgba(244,163,0,.5) !important; }
.wall-node-3d:hover .wall-face.side-a, .wall-node-3d:hover .wall-face.side-b { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
body.wall-interaction-active .room-node, body.wall-interaction-active .room-node * { pointer-events: none !important; }
body.wall-interaction-active #floorplanSvg, body.wall-interaction-active #floorplanSvg * { pointer-events: none !important; }


/* ── 3D Openings (Inside) ──────────────────────────────────── */
.room3d .openings-layer { position: absolute; inset: 0; pointer-events: auto; }
.room3d .openings-layer .opening { position: absolute; border-radius: 2px; z-index: 1; overflow: hidden; }
.room3d .openings-layer .opening.window {
  background: linear-gradient(170deg, #e8f4ff 0%, #c5dffa 50%, #a8d0f5 100%);
  border: 1.5px solid #7aafe0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 1px 4px rgba(0,60,120,.08), 0 1px 3px rgba(0,0,0,.10);
  z-index: 2;
}
.room3d .openings-layer .opening.window::before {
  content: ''; position: absolute; inset: 3px; border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 1px; pointer-events: none;
}
.room3d .openings-layer .opening.window .vbar {
  position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px;
  transform: translateX(-1px);
  background: rgba(255,255,255,.85); box-shadow: 0 0 0 .5px rgba(0,60,120,.12);
}
.room3d .openings-layer .opening.window .hbar {
  position: absolute; top: 50%; left: 3px; right: 3px; height: 2px;
  transform: translateY(-1px);
  background: rgba(255,255,255,.85); box-shadow: 0 0 0 .5px rgba(0,60,120,.12);
}
.room3d .openings-layer .opening.window::after {
  content: ''; position: absolute; top: 6%; left: 8%; width: 30%; height: 25%;
  background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, transparent 100%);
  border-radius: 1px; pointer-events: none;
}
.room3d .openings-layer .opening.door {
  background: linear-gradient(180deg, #e8d5c0 0%, #c8a882 40%, #b8966e 100%);
  border: 1.5px solid #9a7b5a;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), inset 0 -2px 6px rgba(80,40,0,.12), 0 1px 3px rgba(0,0,0,.12);
  z-index: 1;
}
.room3d .openings-layer .opening.door::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 6%; height: 38%;
  border: 1px solid rgba(255,255,255,.35); border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 100%);
  pointer-events: none;
}
.room3d .openings-layer .opening.door::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 38%;
  border: 1px solid rgba(255,255,255,.3); border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 100%);
  pointer-events: none;
}
.room3d .openings-layer .opening.door .knob {
  position: absolute; right: 10%; top: 52%; width: 4px; height: 4px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c4a33a, #7a6420);
  box-shadow: 0 0 2px rgba(0,0,0,.3), inset 0 .5px 0 rgba(255,255,255,.4);
  pointer-events: none; z-index: 1;
}
.room3d .openings-layer .opening.selected { outline: 2px dashed var(--accent); outline-offset: 1px; box-shadow: 0 0 0 2px rgba(244,163,0,.85), inset 0 0 0 2px rgba(255,255,255,.4); z-index: 10; }
.openings-layer { pointer-events: none; }
.openings-layer .opening { pointer-events: auto; }


/* ── 3D House (Outside) ─────────────────────────────────────── */
.house-stage {
  flex: 1; width: 100%; min-height: 300px;
  background: var(--scene-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  border: none; border-radius: 0;
}
.house-viewport {
  width: 100%; height: 100%;
  perspective: 900px; cursor: grab;
  position: relative; touch-action: none; overflow: hidden;
}
.house-viewport:active { cursor: grabbing; }
.house-viewport.cursor-grab { cursor: grab; }
.house-viewport.cursor-grabbing { cursor: grabbing; }
.house-viewport.cursor-move { cursor: move; }
.house3d { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform-origin: 50% 50% 0; will-change: transform; }
.storey, .roof, .porch, .terrace { position: absolute; transform-style: preserve-3d; }
.storey .face, .roof .face, .roof .plane, .roof .gables, .roof .hip-plane,
.porch .face, .terrace .face { position: absolute; background: #eaeff6; border: 1px solid #d6deea; transform-origin: 0 0 0; }
.storey .face.front, .porch .face.front, .terrace .face.front { background: var(--face-wall-a); }
.storey .face.left, .porch .face.left, .terrace .face.left { background: var(--face-wall-b); }
.storey .face.right, .porch .face.right, .terrace .face.right { background: var(--face-wall-b); }
.storey .face.back { background: var(--face-wall-a); }
.storey .face.top { background: #f5f8fd; }
.roof .plane, .roof .gables, .roof .hip-plane { background: #dbe7fb; border: 1px solid #c7d6ef; }
.roof.gable .plane, .roof.shed .plane, .roof.hip .hip-plane { background: #d7e3f9; }
.roof .hip-plane { will-change: transform, clip-path; }
.storey .face, .roof .face, .roof .plane, .roof .gables, .roof .hip-plane, .porch .face, .terrace .face { transform-origin: 0 0 0; }

/* ── Directional face shading — simulated overhead lighting ──── */
.house3d .storey .face.front { box-shadow: inset 0 2px 8px rgba(0,0,0,0.03); }
.house3d .storey .face.back {
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.07)), var(--face-wall-a);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
}
.house3d .storey .face.left {
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06)), var(--face-wall-b);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.04);
}
.house3d .storey .face.right {
  background: linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.03)), var(--face-wall-b);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.03);
}

/* ── Wood material texture ─────────────────────────────────── */
.house3d.material-wood .storey .face.front,
.house3d.material-wood .storey .face.back,
.house3d.material-wood .porch .face.front,
.house3d.material-wood .porch .face.back,
.house3d.material-wood .terrace .face.front,
.house3d.material-wood .terrace .face.back {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06)),
    repeating-linear-gradient(180deg,
      #c9a87a 0px,   #c9a87a 1px,
      #d4b48a 1px,   #d4b48a 6px,
      #bf9c6e 6px,   #bf9c6e 7px,
      #d9bb92 7px,   #d9bb92 12px,
      #c4a274 12px,  #c4a274 13px,
      #d0af82 13px,  #d0af82 18px
    );
  border-color: #b89868;
}
.house3d.material-wood .storey .face.left,
.house3d.material-wood .storey .face.right,
.house3d.material-wood .porch .face.left,
.house3d.material-wood .porch .face.right,
.house3d.material-wood .terrace .face.left,
.house3d.material-wood .terrace .face.right {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.08)),
    repeating-linear-gradient(180deg,
      #b8935f 0px,   #b8935f 1px,
      #c7a474 1px,   #c7a474 6px,
      #ae8856 6px,   #ae8856 7px,
      #ccaa7c 7px,   #ccaa7c 12px,
      #b39060 12px,  #b39060 13px,
      #c29f6e 13px,  #c29f6e 18px
    );
  border-color: #a68450;
}
/* Gables — wood texture for triangle walls */
.house3d.material-wood .roof .gables {
  background:
    repeating-linear-gradient(180deg,
      #c9a87a 0px,   #c9a87a 1px,
      #d4b48a 1px,   #d4b48a 6px,
      #bf9c6e 6px,   #bf9c6e 7px,
      #d9bb92 7px,   #d9bb92 12px
    );
  border-color: #b89868;
}
/* Porch/terrace railings and decks keep wood_osb look */
.house3d.material-wood .porch .face.top,
.house3d.material-wood .terrace .face.top {
  background:
    repeating-linear-gradient(90deg,
      #c4a274 0px,   #c4a274 1px,
      #d0af82 1px,   #d0af82 8px,
      #bf9c6e 8px,   #bf9c6e 9px,
      #d4b48a 9px,   #d4b48a 16px
    );
  border-color: #b89868;
}
/* Dark theme override */
[data-theme="dark"] .house3d.material-wood .storey .face.front,
[data-theme="dark"] .house3d.material-wood .storey .face.back,
[data-theme="dark"] .house3d.material-wood .porch .face.front,
[data-theme="dark"] .house3d.material-wood .terrace .face.front {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.12)),
    repeating-linear-gradient(180deg,
      #5c4630 0px, #5c4630 1px,
      #6b5238 1px, #6b5238 6px,
      #503c28 6px, #503c28 7px,
      #6f5740 7px, #6f5740 12px
    );
  border-color: #4a3a28;
}
[data-theme="dark"] .house3d.material-wood .storey .face.left,
[data-theme="dark"] .house3d.material-wood .storey .face.right,
[data-theme="dark"] .house3d.material-wood .porch .face.left,
[data-theme="dark"] .house3d.material-wood .terrace .face.left {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.15)),
    repeating-linear-gradient(180deg,
      #4a3a28 0px, #4a3a28 1px,
      #5c4630 1px, #5c4630 6px,
      #42341f 6px, #42341f 7px,
      #574230 7px, #574230 12px
    );
  border-color: #3d2e1c;
}

/* ── Log house texture (substrate: wood_log) ──────────────── */
/* Round logs with cylindrical highlight and shadow gaps */
.house3d.substrate-wood_log .storey .face.front,
.house3d.substrate-wood_log .storey .face.back,
.house3d.substrate-wood_log .porch .face.front,
.house3d.substrate-wood_log .porch .face.back,
.house3d.substrate-wood_log .terrace .face.front,
.house3d.substrate-wood_log .terrace .face.back {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.05)),
    repeating-linear-gradient(180deg,
      /* gap / chinking between logs */
      #7a6040 0px,
      #8b7050 1px,
      /* bottom of log — deep shadow */
      #9a7a4e 2px,
      #a88a5a 4px,
      /* log body — curves upward to highlight */
      #c4a270 6px,
      #dcc098 10px,
      #e8d0a8 13px,    /* brightest — top of cylinder */
      #dcc098 16px,
      /* log body — curves back down */
      #c4a270 19px,
      #a88a5a 21px,
      /* bottom shadow of next gap */
      #8b7050 23px,
      #7a6040 24px
    );
  border-color: #8b7050;
}
.house3d.substrate-wood_log .storey .face.left,
.house3d.substrate-wood_log .storey .face.right,
.house3d.substrate-wood_log .porch .face.left,
.house3d.substrate-wood_log .porch .face.right,
.house3d.substrate-wood_log .terrace .face.left,
.house3d.substrate-wood_log .terrace .face.right {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.10)),
    repeating-linear-gradient(180deg,
      #6b5235 0px,
      #7a6040 1px,
      #8a7248 2px,
      #9a8258 4px,
      #b49a68 6px,
      #ccb488 10px,
      #d8c498 13px,
      #ccb488 16px,
      #b49a68 19px,
      #9a8258 21px,
      #7a6040 23px,
      #6b5235 24px
    );
  border-color: #7a6040;
}
/* Log gables */
.house3d.substrate-wood_log .roof .gables {
  background:
    repeating-linear-gradient(180deg,
      #7a6040 0px, #8b7050 1px,
      #a88a5a 3px, #dcc098 10px,
      #e8d0a8 13px, #c4a270 19px,
      #8b7050 23px, #7a6040 24px
    );
  border-color: #8b7050;
}
/* Log house — dark theme */
[data-theme="dark"] .house3d.substrate-wood_log .storey .face.front,
[data-theme="dark"] .house3d.substrate-wood_log .storey .face.back,
[data-theme="dark"] .house3d.substrate-wood_log .porch .face.front,
[data-theme="dark"] .house3d.substrate-wood_log .terrace .face.front {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.12)),
    repeating-linear-gradient(180deg,
      #3d2e1c 0px, #4a3828 1px,
      #5c4630 3px, #7a6244 8px,
      #8a7254 13px, #6a5238 19px,
      #4a3828 23px, #3d2e1c 24px
    );
  border-color: #3d2e1c;
}
[data-theme="dark"] .house3d.substrate-wood_log .storey .face.left,
[data-theme="dark"] .house3d.substrate-wood_log .storey .face.right,
[data-theme="dark"] .house3d.substrate-wood_log .porch .face.left,
[data-theme="dark"] .house3d.substrate-wood_log .terrace .face.left {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.18)),
    repeating-linear-gradient(180deg,
      #33261a 0px, #3d2e1c 1px,
      #4a3828 3px, #6a5238 8px,
      #7a6244 13px, #5a4430 19px,
      #3d2e1c 23px, #33261a 24px
    );
  border-color: #33261a;
}

/* ── Rough wood texture (substrate: wood_rough) ───────────── */
/* Wider planks with more grain variation */
.house3d.substrate-wood_rough .storey .face.front,
.house3d.substrate-wood_rough .storey .face.back,
.house3d.substrate-wood_rough .porch .face.front,
.house3d.substrate-wood_rough .terrace .face.front {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.07)),
    repeating-linear-gradient(180deg,
      #a08050 0px,   #a08050 1px,
      #c09a60 1px,   #c09a60 3px,
      #b89058 3px,   #b89058 5px,
      #c8a468 5px,   #c8a468 9px,
      #b08848 9px,   #b08848 10px,
      #c4a060 10px,  #c4a060 14px,
      #a88848 14px,  #a88848 15px,
      #bca068 15px,  #bca068 20px
    );
  border-color: #a08050;
}
.house3d.substrate-wood_rough .storey .face.left,
.house3d.substrate-wood_rough .storey .face.right,
.house3d.substrate-wood_rough .porch .face.left,
.house3d.substrate-wood_rough .terrace .face.left {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.10)),
    repeating-linear-gradient(180deg,
      #907040 0px,   #907040 1px,
      #b08a50 1px,   #b08a50 3px,
      #a88048 3px,   #a88048 5px,
      #b89458 5px,   #b89458 9px,
      #a07838 9px,   #a07838 10px,
      #b49050 10px,  #b49050 14px,
      #987838 14px,  #987838 15px,
      #ac9058 15px,  #ac9058 20px
    );
  border-color: #907040;
}

/* ── OSB texture (substrate: wood_osb) ────────────────────── */
/* Chaotic chip pattern with multiple angled gradients */
.house3d.substrate-wood_osb .storey .face.front,
.house3d.substrate-wood_osb .storey .face.back,
.house3d.substrate-wood_osb .porch .face.front,
.house3d.substrate-wood_osb .terrace .face.front {
  background:
    repeating-linear-gradient(45deg,
      transparent 0px, transparent 3px,
      rgba(180,150,100,0.3) 3px, rgba(180,150,100,0.3) 5px
    ),
    repeating-linear-gradient(-30deg,
      transparent 0px, transparent 4px,
      rgba(160,130,80,0.25) 4px, rgba(160,130,80,0.25) 6px
    ),
    repeating-linear-gradient(15deg,
      transparent 0px, transparent 2px,
      rgba(200,170,120,0.2) 2px, rgba(200,170,120,0.2) 4px
    ),
    #c8a870;
  border-color: #b09060;
}
.house3d.substrate-wood_osb .storey .face.left,
.house3d.substrate-wood_osb .storey .face.right,
.house3d.substrate-wood_osb .porch .face.left,
.house3d.substrate-wood_osb .terrace .face.left {
  background:
    repeating-linear-gradient(45deg,
      transparent 0px, transparent 3px,
      rgba(160,130,80,0.3) 3px, rgba(160,130,80,0.3) 5px
    ),
    repeating-linear-gradient(-30deg,
      transparent 0px, transparent 4px,
      rgba(140,110,60,0.25) 4px, rgba(140,110,60,0.25) 6px
    ),
    repeating-linear-gradient(15deg,
      transparent 0px, transparent 2px,
      rgba(180,150,100,0.2) 2px, rgba(180,150,100,0.2) 4px
    ),
    #b89860;
  border-color: #a08050;
}

/* ── Soffits wood texture ──────────────────────────────────── */
/* Софиты деревянного дома — текстура вагонки (доски идут по длине свеса) */
.house3d.material-wood #soffits3d .soffit {
  background:
    repeating-linear-gradient(0deg,
      #c9a87a 0px,   #c9a87a 1px,
      #d4b48a 1px,   #d4b48a 5px,
      #bf9c6e 5px,   #bf9c6e 6px,
      #d9bb92 6px,   #d9bb92 10px
    );
  border-color: #b89868;
  border-style: solid;
}
[data-theme="dark"] .house3d.material-wood #soffits3d .soffit {
  background:
    repeating-linear-gradient(0deg,
      #5c4630 0px, #5c4630 1px,
      #6b5238 1px, #6b5238 5px,
      #503c28 5px, #503c28 6px,
      #6f5740 6px, #6f5740 10px
    );
  border-color: #4a3a28;
}

/* ── Paintcoat over wood — semi-transparent to show wood grain ── */
.house3d.material-wood .face > .paintcoat.paint-on,
.house3d.material-wood .gables > .paintcoat.paint-on,
.house3d.material-wood .soffit > .paintcoat.paint-on {
  opacity: 0.72;
}

/* ── Roof definition — edges + subtle shadow ───────────────── */
.roof .plane, .roof .hip-plane, #roofFlat .top {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.20);
  border: 1px solid rgba(0,0,0,0.12);
}
.roof .gables {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.10);
}

/* ── Ground shadow ─────────────────────────────────────────── */
.house-ground-shadow {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.07) 40%, transparent 70%);
  transform-origin: 0 0 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: -1;
}

/* Outside face openings */
.storey .face .openings-layer { position: absolute; inset: 0; pointer-events: none; }
.storey .face .openings-layer .opening {
  position: absolute; border-radius: 2px;
  z-index: 1; pointer-events: auto; cursor: grab; user-select: none; touch-action: none; outline: none;
  overflow: hidden;
}
.storey .face .openings-layer .opening.dragging { cursor: grabbing; }

/* ── Window ─────────────────────────────────────────────────── */
.storey .face .openings-layer .opening.window, .opening-window {
  background: linear-gradient(170deg, #e8f4ff 0%, #c5dffa 50%, #a8d0f5 100%);
  border: 1.5px solid #7aafe0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 1px 4px rgba(0,60,120,.08), 0 1px 3px rgba(0,0,0,.10);
  z-index: 2;
}
.storey .face .openings-layer .opening.window::before {
  content: ''; position: absolute; inset: 3px; border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 1px; pointer-events: none;
}
/* cross frame */
.storey .face .opening.window .vbar {
  position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px;
  transform: translateX(-1px);
  background: rgba(255,255,255,.85); box-shadow: 0 0 0 .5px rgba(0,60,120,.12);
}
.storey .face .opening.window .hbar {
  position: absolute; top: 50%; left: 3px; right: 3px; height: 2px;
  transform: translateY(-1px);
  background: rgba(255,255,255,.85); box-shadow: 0 0 0 .5px rgba(0,60,120,.12);
}
/* glass glare */
.storey .face .openings-layer .opening.window::after {
  content: ''; position: absolute; top: 6%; left: 8%; width: 30%; height: 25%;
  background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, transparent 100%);
  border-radius: 1px; pointer-events: none;
}

/* ── Door ───────────────────────────────────────────────────── */
.storey .face .openings-layer .opening.door, .opening-door {
  background: linear-gradient(180deg, #e8d5c0 0%, #c8a882 40%, #b8966e 100%);
  border: 1.5px solid #9a7b5a;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), inset 0 -2px 6px rgba(80,40,0,.12), 0 1px 3px rgba(0,0,0,.12);
  z-index: 1;
}
/* raised panels */
.storey .face .opening.door::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 6%; height: 38%;
  border: 1px solid rgba(255,255,255,.35); border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  pointer-events: none;
}
.storey .face .opening.door::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 38%;
  border: 1px solid rgba(255,255,255,.3); border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 100%);
  pointer-events: none;
}
.storey .face .opening.door .knob {
  position: absolute; right: 10%; top: 52%; width: 4px; height: 4px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c4a33a, #7a6420);
  box-shadow: 0 0 2px rgba(0,0,0,.3), inset 0 .5px 0 rgba(255,255,255,.4);
  z-index: 2;
}
.storey .face .openings-layer .opening.selected { outline: 2px dashed var(--accent); outline-offset: 1px; box-shadow: 0 0 0 2px rgba(244,163,0,.85), inset 0 0 0 2px rgba(255,255,255,.4); z-index: 10; }
.storey .face .openings-layer .opening:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.openings-layer .opening.door { z-index: 1; }
.openings-layer .opening.window { z-index: 2; }

/* Zoom + Nudge toolbar — compact horizontal pill, bottom-left */
.zoom-ui {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; flex-direction: row; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-lg);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 1px 6px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
  z-index: 5;
}
.zoom-ui .zoom-btn {
  width: 34px; height: 34px; border: none;
  border-radius: var(--r-sm); background: transparent;
  cursor: pointer; font-weight: 600; font-size: 16px;
  line-height: 34px; text-align: center;
  color: var(--text-secondary); transition: all var(--dur-fast);
  display: inline-flex; align-items: center; justify-content: center;
}
.zoom-ui .zoom-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
.zoom-ui .zoom-btn:active { background: rgba(0,0,0,0.10); transform: scale(0.93); }
/* Separator between zoom and nudge groups */
.zoom-ui .zoom-sep { width: 1px; height: 20px; background: var(--separator-opaque, rgba(0,0,0,0.12)); margin: 0 2px; flex-shrink: 0; }
/* Nudge group hidden by default */
.zoom-ui .zoom-btn.nudge, .zoom-ui .zoom-sep.nudge { display: none; }
.zoom-ui.nudge-on .zoom-btn.nudge { display: inline-flex; }
.zoom-ui.nudge-on .zoom-sep.nudge { display: block; }
/* Delete button — red on hover */
.zoom-ui .zoom-btn.del:hover { background: rgba(255,59,48,0.12); color: #ff3b30; }

/* Soffits */
#soffits3d { position: absolute; transform-style: preserve-3d; pointer-events: auto; }
#soffits3d .soffit { position: absolute; background: #eef3ff; border: 1px dashed #c7d2fe; transform-origin: 0 0 0; pointer-events: auto; cursor: pointer; }
#soffits3d .soffit.glow3d, .plinth-band.glow3d {
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
  box-shadow: 0 0 0 2px rgba(244,163,0,.95), 0 0 18px rgba(244,163,0,.5) inset, 0 0 20px rgba(244,163,0,.35);
}

/* Gable openings */
.g-openings-layer { pointer-events: auto; z-index: 15; }
.g-opening.opening { overflow: hidden; border-radius: 2px; }
.g-opening.window {
  background: linear-gradient(170deg, #e8f4ff 0%, #c5dffa 50%, #a8d0f5 100%);
  border: 1.5px solid #7aafe0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 1px 4px rgba(0,60,120,.08), 0 1px 3px rgba(0,0,0,.10);
  cursor: grab;
  transition: box-shadow .15s ease, outline-color .15s ease;
}
.g-opening.window::before {
  content: ''; position: absolute; inset: 3px;
  border: 1.5px solid rgba(255,255,255,.7); border-radius: 1px; pointer-events: none;
}
.g-opening.window .vbar {
  position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px;
  transform: translateX(-1px);
  background: rgba(255,255,255,.85); box-shadow: 0 0 0 .5px rgba(0,60,120,.12);
}
.g-opening.window .hbar {
  position: absolute; top: 50%; left: 3px; right: 3px; height: 2px;
  transform: translateY(-1px);
  background: rgba(255,255,255,.85); box-shadow: 0 0 0 .5px rgba(0,60,120,.12);
}
.g-opening.window::after {
  content: ''; position: absolute; top: 6%; left: 8%; width: 30%; height: 25%;
  background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, transparent 100%);
  border-radius: 1px; pointer-events: none;
}
.house3d .openings-layer .opening.selected, .house3d .g-openings-layer .opening.selected,
#house3d .openings-layer .opening.selected, #house3d .g-openings-layer .opening.selected {
  outline: 2px dashed var(--accent); outline-offset: 1px;
  box-shadow: 0 0 0 2px rgba(244,163,0,.85), inset 0 0 0 2px rgba(255,255,255,.4); z-index: 10;
}
.house3d .openings-layer .opening, .house3d .g-openings-layer .opening,
#house3d .openings-layer .opening, #house3d .g-openings-layer .opening { cursor: grab; }
.house3d .openings-layer .opening.dragging, .house3d .g-openings-layer .opening.dragging { cursor: grabbing; }

/* Openings toolbar */
#outOpeningsToolbar .seg button { min-width: 36px; }
#outOpeningsToolbar input[type="number"], #outOpeningsToolbar select { padding: 6px 8px; }

/* ── Unified 3D glow — ::before technique for crisp highlights ── */
/* Base pseudo-element for ALL 3D faces with glow */
.house3d .storey .face.glow3d::before,
.house3d .plinth .face.glow3d::before,
#porch3d .face.glow3d::before,
#terrace3d .face.glow3d::before,
#roofFlat .face.glow3d::before, #roofFlat .top.glow3d::before,
#roofGable .plane.glow3d::before, #roofGable .gables.glow3d::before,
#roofHip .hip-plane.glow3d::before,
#roofShed .plane.glow3d::before, #roofShed .gables.glow3d::before,
#roofMansard .plane.glow3d::before, #roofMansard .gables.glow3d::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 0 3px rgba(244,163,0,.92), 0 0 22px rgba(244,163,0,.30);
  transition: box-shadow .9s ease-out;
  z-index: 4;
}
/* Suppress direct box-shadow on house 3D faces (use ::before instead) */
.house3d .storey .face.glow3d,
.house3d .plinth .face.glow3d,
#porch3d .face.glow3d,
#terrace3d .face.glow3d,
#roofFlat .top.glow3d,
#roofGable .plane.glow3d, #roofGable .gables.glow3d,
#roofHip .hip-plane.glow3d,
#roofShed .plane.glow3d, #roofShed .gables.glow3d,
#roofMansard .plane.glow3d, #roofMansard .gables.glow3d {
  box-shadow: none !important;
}
/* Fallback glow for flat elements (soffits, plinth-bands, etc.) */
.glow3d {
  box-shadow: 0 0 0 2px rgba(244,163,0,.95), 0 0 18px rgba(244,163,0,.5) inset, 0 0 20px rgba(244,163,0,.35);
  transition: box-shadow .9s ease-out;
}

/* ── Paintcoat definition — depth on painted surfaces ──────── */
.paintcoat.paint-on {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), inset 0 0 8px rgba(0,0,0,0.05);
}
/* Paint-included — diagonal stripes for surfaces awaiting paint color */
.paintcoat.paint-included {
  background: repeating-linear-gradient(
    45deg,
    rgba(245,158,11,0.10) 0px,
    rgba(245,158,11,0.10) 2px,
    transparent 2px,
    transparent 6px
  ) !important;
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.25);
}