:root {
  --accent: #34d399;
  --accent-strong: #10b981;
  --bg: #0b0f0d;
  --panel-bg: #121815;
  --panel-border: #263129;
  --text: #eef2ef;
  --text-dim: #9aa89f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* ---------- Loader (logo preloader) ---------- */
#loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
  z-index: 999;
  transition: opacity .5s ease;
}
#loader.hidden { opacity: 0; pointer-events: none; }
.loader-logo {
  width: 180px;
  height: auto;
  max-width: 50vw;
  animation: loaderPulse 1.3s ease-in-out infinite;
  filter: drop-shadow(0 4px 20px rgba(16,185,129,.4));
}
@keyframes loaderPulse {
  0%, 100% { opacity: .35; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1); }
}
.loader-text { color: var(--text-dim); font-size: 13px; letter-spacing: .04em; }

/* ---------- App shell (fullscreen, no chrome) ---------- */
#app {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
#app.ready { opacity: 1; }

.viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* Stage always keeps the photos' native 16:9 ratio, and is sized so it
   always fully covers the viewport (like background-size:cover), cropping
   symmetrically on whichever axis is too large. Shape percentages below
   are relative to this box, so they stay pixel-accurate at any window size. */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
}

/* On portrait / narrow screens, "cover" sizing above would crop most of the
   width off a 16:9 photo — whole buildings would end up off-screen and
   unreachable. Below this aspect ratio we switch to "contain" sizing
   instead (min() instead of max()) so the full photo, and every shape on
   it, is always fully visible and tappable — at the cost of letterboxing. */
@media (max-aspect-ratio: 4/3) {
  .stage {
    width: min(100vw, 177.78vh);
  }
}

.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.view.active {
  opacity: 1;
  pointer-events: auto;
}

.bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Shapes: invisible until hovered ---------- */
.shape {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}
.shape-img {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  filter: saturate(1.3) drop-shadow(0 0 6px rgba(16,185,129,.5));
  transition: opacity .2s ease, filter .2s ease;
}
.shape:hover .shape-img {
  filter: saturate(1.5) brightness(1.15) drop-shadow(0 0 14px rgba(16,185,129,.85));
}
#view-main .shape:hover .shape-img { opacity: .5; }
#view-facade-left .shape:hover .shape-img,
#view-facade-right .shape:hover .shape-img { opacity: .4; }
.shape:active .shape-img { opacity: .75; }

/* Onboarding hint: one slow pulse whenever a view appears */
@keyframes shapeTwinkle {
  0%, 100% { opacity: 0; }
  50% { opacity: .6; }
}
.shape-img.twinkle {
  animation: shapeTwinkle 3s ease-in-out 1;
}

.shape-label {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(10,14,12,.68);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}
.shape:hover .shape-label { opacity: 1; transform: translateY(0); }

/* ---------- Floating back button ---------- */
.fab-back {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 40;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,14,12,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, opacity .3s ease;
}
.fab-back:hover { background: rgba(16,185,129,.85); transform: scale(1.06); }
.fab-back:active { transform: scale(.94); }
.fab-back[hidden] { display: none; }

/* ---------- Watermark logo ---------- */
.watermark-logo {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 40;
  width: 165px;
  height: auto;
  opacity: .92;
  pointer-events: none;
  /* force the logo to render pure white regardless of its source colors */
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.55));
}

.icon-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.18); }

/* ---------- Popup: flat gallery ---------- */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,7,6,.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 200;
}
.popup-overlay.show { opacity: 1; pointer-events: auto; }
.popup-card {
  width: min(420px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 24px 26px 26px;
  position: relative;
  transform: translateY(14px) scale(.96);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), width .25s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.popup-card.has-flats { width: min(980px, 95vw); }
.popup-overlay.show .popup-card { transform: translateY(0) scale(1); }
.popup-close { position: absolute; right: 14px; top: 14px; }
.popup-card h2 {
  margin: 0 0 24px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  font-weight: 700;
}

/* Two-pane flat gallery: scrollable list on the left, fixed preview on
   the right. Hovering/focusing/tapping a row swaps the preview image
   instead of resizing anything in the list — no reflow, no layout math,
   just a src swap, so it's fast and can't jitter. */
.flats-layout {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.flats-list {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: min(58vh, 540px);
  overflow-y: auto;
  padding-right: 6px;
}
.flat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.flat-row:hover, .flat-row:focus-visible { background: rgba(255,255,255,.07); }
.flat-row.is-active { background: rgba(52,211,153,.15); border-color: var(--accent); }
.flat-row--nolink { opacity: .45; }
.flat-row-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--panel-border);
}
.flat-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.flat-row span:last-child { font-size: 13px; font-weight: 700; }

.flats-preview {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.flats-preview-imgwrap {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.flats-preview-imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.flats-preview-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.flats-preview-cta {
  border: none;
  background: var(--accent-strong);
  color: #06281b;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.flats-preview-cta:hover { background: var(--accent); transform: translateY(-1px); }
.flats-preview-cta:disabled { opacity: .4; cursor: default; transform: none; }

/* ---------- Responsive ---------- */

/* Touch devices have no real hover state, so hover-only shapes would be
   invisible with no way to discover them. Give them a constant faint tint
   instead, so it's obvious where the tappable buildings are. */
@media (hover: none) {
  .shape-img { opacity: .32; }
  .shape:active .shape-img { opacity: .75; }
  .shape-label { opacity: 1; transform: translateY(0); }
}

/* Below this width the two-pane layout doesn't have room to breathe —
   stack the big preview on top (it's the primary content) and the
   scrollable picker list underneath, as a horizontal strip. */
@media (max-width: 720px) {
  .flats-layout { flex-direction: column-reverse; gap: 16px; }
  .flats-list {
    flex: 0 0 auto;
    flex-direction: row;
    max-height: none;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 6px;
  }
  .flat-row { flex: 0 0 auto; flex-direction: column; gap: 4px; padding: 6px 8px; }
  .flat-row-thumb { width: 56px; height: 56px; }
  .flats-preview-imgwrap { max-width: 320px; }
}

@media (max-width: 640px) {
  .watermark-logo { width: 120px; }
  .fab-back { width: 40px; height: 40px; top: 14px; left: 14px; }
  .popup-card { padding: 20px 18px 20px; }
}