*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bone: #d8d2c6;
  --bone-dim: #9a958b;
  --ink: #0c0b0a;
  --gold: #c8a24a;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #050505;
  color: var(--bone);
  font-family: 'Inter', system-ui, sans-serif;
  cursor: default;
}

#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }

/* Permanent darkened edges for the liminal mood */
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,0) 38%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}

/* ── Reticle ───────────────────────────────────────────── */
#reticle {
  position: fixed; left: 50%; top: 50%; z-index: 8;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px; pointer-events: none;
  border: 1px solid rgba(216,210,198,0); border-radius: 50%;
  transition: border-color .25s ease, width .2s ease, height .2s ease;
  display: none;
}
#reticle .dot {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: rgba(216,210,198,0.6);
  transition: background .2s ease;
}
#reticle.active { border-color: rgba(200,162,74,0.8); width: 34px; height: 34px; }
#reticle.active .dot { background: var(--gold); }

/* ── "Press E" prompt ──────────────────────────────────── */
#prompt {
  position: fixed; left: 50%; bottom: 16%; z-index: 8;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: rgba(10,10,9,0.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(216,210,198,0.18); border-radius: 4px;
  font-size: 14px; letter-spacing: .06em; pointer-events: none;
  transition: opacity .2s ease;
}
#prompt .key {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  border: 1px solid rgba(216,210,198,0.4); border-radius: 3px;
  font-size: 12px; font-weight: 500;
}
.hidden { display: none !important; }

/* ── Intro / entry screen ──────────────────────────────── */
#intro, #paused {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; text-align: center;
  /* translucent scrim so the live hallway view shows through behind the logo */
  background: radial-gradient(ellipse at center, rgba(6,6,5,0.42) 0%, rgba(3,3,2,0.82) 100%);
}
.intro-inner { max-width: 560px; padding: 40px; }
#brand { display: flex; justify-content: center; }
#brand svg {
  width: clamp(260px, 54vw, 560px); height: auto; display: block;
  filter: drop-shadow(0 0 22px rgba(216,210,198,0.10));
}
#tagline {
  font-size: 14px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--bone-dim); margin-top: 8px;
}
#enter-btn, #resume-btn {
  margin-top: 42px; padding: 14px 38px;
  background: transparent; color: var(--bone);
  border: 1px solid rgba(216,210,198,0.45); border-radius: 2px;
  font-family: 'Inter', sans-serif; font-size: 13px;
  letter-spacing: .25em; text-transform: uppercase; cursor: pointer;
  transition: all .3s ease;
}
#enter-btn:hover, #resume-btn:hover {
  background: var(--bone); color: var(--ink); letter-spacing: .3em;
}
.controls-hint {
  margin-top: 46px; display: flex; flex-wrap: wrap; gap: 8px 26px;
  justify-content: center; font-size: 12px; letter-spacing: .08em;
  color: var(--bone-dim);
}
.controls-hint b { color: var(--bone); font-weight: 500; letter-spacing: .12em; }
#loading { margin-top: 30px; font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--bone-dim); }

.paused-inner { text-align: center; }
.paused-title { font-family: 'Cormorant Garamond', serif; font-size: 40px;
  letter-spacing: .2em; color: var(--bone); }

/* ── Detail card ───────────────────────────────────────── */
#detail {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center; padding: 24px;
  background: rgba(4,4,4,0.82); backdrop-filter: blur(8px);
}
.detail-card {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: min(920px, 94vw); max-height: 88vh; overflow: hidden;
  background: #0e0d0b; border: 1px solid rgba(216,210,198,0.14);
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}
.detail-media {
  min-height: 420px; background: #18160f center/cover no-repeat;
  display: grid; place-items: center; position: relative;
}
.detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-media .ph {
  font-family: 'Cormorant Garamond', serif; text-align: center;
  color: var(--bone); padding: 30px;
}
.detail-media .ph .glyph { font-size: 52px; opacity: .5; }
.detail-media .ph .nm { font-size: 26px; letter-spacing: .08em; margin-top: 14px; }
.detail-media .ph .sub { font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--bone-dim); margin-top: 14px; font-family: 'Inter', sans-serif; }
.detail-body { padding: 48px 44px; overflow-y: auto; }
.detail-eyebrow { font-size: 10px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold); }
#detail-name { font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 38px; line-height: 1.1; margin: 14px 0 6px; color: var(--bone); }
.detail-material { font-size: 12px; letter-spacing: .12em; color: var(--bone-dim);
  text-transform: uppercase; }
.detail-price { font-family: 'Cormorant Garamond', serif; font-size: 30px;
  margin: 26px 0 22px; color: var(--bone); }
.detail-desc { font-size: 15px; line-height: 1.75; font-weight: 300; color: #c4bfb4; }
.inquire-btn { display: inline-block; margin-top: 34px; padding: 14px 34px;
  border: 1px solid rgba(216,210,198,0.45); color: var(--bone);
  text-decoration: none; font-size: 12px; letter-spacing: .25em;
  text-transform: uppercase; transition: all .3s ease; }
.inquire-btn:hover { background: var(--bone); color: var(--ink); }
.detail-foot { margin-top: 22px; font-size: 11px; letter-spacing: .1em;
  color: var(--bone-dim); }
#detail-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; background: rgba(0,0,0,0.4);
  border: 1px solid rgba(216,210,198,0.25); color: var(--bone);
  font-size: 15px; cursor: pointer; transition: all .2s ease;
}
#detail-close:hover { background: var(--bone); color: var(--ink); }

/* ── Touch controls (mobile) ───────────────────────────── */
#joystick {
  position: fixed; left: 26px; bottom: 30px; z-index: 10;
  width: 120px; height: 120px; border-radius: 50%;
  border: 1px solid rgba(216,210,198,0.28);
  background: rgba(10,10,9,0.32); touch-action: none;
}
#joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(216,210,198,0.5); transition: transform .04s linear;
}
#touch-interact {
  position: fixed; right: 24px; bottom: 70px; z-index: 10;
  padding: 14px 22px; max-width: 55vw;
  background: rgba(10,10,9,0.6); color: var(--bone);
  border: 1px solid rgba(200,162,74,0.75); border-radius: 4px;
  font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: .05em;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 720px) {
  .detail-card { grid-template-columns: 1fr; }
  .detail-media { min-height: 240px; }
  .detail-body { padding: 30px 26px; }
}