/**
 * Ours — the room (Night Edition).
 *
 * Scene anatomy (bottom → top): wall tint → hearth block → firebox
 * (logs/flames/video) → furniture slots → light layer → receipt.
 * Fire = LIGHT ONLY (driven by .fire-stage-* classes); items = contents.
 * Motion is atmospheric; reduced-motion stills everything but keeps states.
 */

/* ── Scene scaffold ──────────────────────────────────────────────────── */

.room-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  overflow: hidden;
  border-radius: var(--r-xl, 12px);
  background:
    linear-gradient(180deg, #211B14 0%, #1B1510 52%, #171210 66%, #13100C 66.2%, #100D0A 100%);
  box-shadow: inset 0 0 0 1px rgba(244, 239, 229, 0.06), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

.room-bg-tint { position: absolute; inset: 0; transition: background 400ms ease; }

/* Hearth wall: darker masonry band behind the firebox. */
.room-hearth {
  position: absolute;
  left: 50%; bottom: 34%;
  transform: translateX(-50%);
  width: min(46%, 430px);
  height: 40%;
  background: linear-gradient(180deg, #262019 0%, #1E1913 100%);
  border: 1px solid rgba(244, 239, 229, 0.07);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.room-hearth::after {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(244, 239, 229, 0.05);
  border-radius: 6px;
}

/* Mantel shelf line */
.room-hearth::before {
  content: "";
  position: absolute;
  left: -7%; right: -7%; top: -2px; height: 8px;
  background: #2E261D;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Firebox opening */
.room-firebox {
  position: absolute;
  left: 50%; bottom: 34%;
  transform: translateX(-50%);
  width: 34%;
  height: 26%;
  background: #0B0908;
  border-radius: 8px 8px 4px 4px;
  overflow: hidden;
  box-shadow: inset 0 6px 24px rgba(0, 0, 0, 0.85);
}

.firebox-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  filter: saturate(1.05) brightness(0.9);
  pointer-events: none;
}

.firebox-flames { position: absolute; inset: 0; }
.firebox-flames svg { width: 100%; height: 100%; }
.firebox-flames .flame {
  fill: url(#none);
  fill: rgba(200, 106, 61, 0.85);
  transform-origin: 50% 100%;
  animation: flicker 1.6s ease-in-out infinite alternate;
}
.firebox-flames .flame:nth-child(2n) { fill: rgba(232, 164, 100, 0.8); animation-duration: 1.3s; }
.firebox-flames .flame:nth-child(3n) { animation-duration: 1.9s; }

@keyframes flicker {
  0%   { transform: scaleY(1) scaleX(1); opacity: .85; }
  40%  { transform: scaleY(1.06) scaleX(.97); opacity: 1; }
  70%  { transform: scaleY(.96) scaleX(1.03); opacity: .8; }
  100% { transform: scaleY(1.08) scaleX(.98); opacity: .95; }
}

/* Stage balance: authored flames lead early; the real video takes over
   from LOW FIRE upward, so the flame layer fades as the video strengthens. */
.firebox-flames.stage-embers { opacity: .5; filter: blur(1px); }
.firebox-flames.stage-small  { opacity: .7; }
.firebox-flames.stage-low    { opacity: .45; }
.firebox-flames.stage-warm   { opacity: .3; }
.firebox-flames.stage-strong { opacity: .18; }
.firebox-flames.stage-full   { opacity: .1; }
.firebox-flames.stage-full-hearth { opacity: .05; }

.firebox-logs { position: absolute; inset: auto 8% 8% 8%; height: 46%; opacity: .9; }
.firebox-logs svg { width: 100%; height: 100%; }

.firebox-glow {
  position: absolute; inset: -40%;
  background: radial-gradient(50% 45% at 50% 78%, rgba(232, 140, 70, 0.5), transparent 70%);
  opacity: .25;
  animation: breathe 3.2s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .18; } to { opacity: .38; } }

/* ── Furniture slots (curated positions, % of scene) ─────────────────── */

.room-slot { position: absolute; pointer-events: none; }
.room-slot [class^="ri"], .room-slot .ri { pointer-events: none; }
.room-item { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.room-slot svg { width: 100%; height: 100%; color: #8F8471; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); transition: color .4s ease; }

.room-slot-mantel    { left: 50%; bottom: 60%; transform: translateX(-50%); width: 40%; height: 9%; }
.room-slot-wallart   { display: none; }
.room-wallart        { position: absolute; left: 50%; bottom: 68%; transform: translateX(-50%); width: 12%; height: 18%; }
.room-wallart svg    { width: 100%; height: 100%; color: #95896F; }

.room-slot-chair-left  { left: 8%;  bottom: 22%; width: 17%; height: 30%; }
.room-slot-chair-right { right: 8%; bottom: 22%; width: 17%; height: 30%; }
.room-slot-lamp-left   { left: 4%;  bottom: 24%; width: 12%; height: 42%; }
.room-slot-lamp-right  { right: 4%; bottom: 24%; width: 12%; height: 42%; }
.room-slot-plant       { right: 20%; bottom: 22%; width: 12%; height: 34%; }
.room-slot-sidetable   { left: 22%; bottom: 22%; width: 12%; height: 20%; }
.room-slot-rug         { left: 50%; bottom: 6%;  transform: translateX(-50%); width: 46%; height: 9%; }
.room-slot-rug svg     { color: #5A4A3C; }

/* Textiles drape onto chairs rather than standing on the floor. */
.room-slot-chair-left .ri-throw, .room-slot-chair-right .ri-throw { transform: translateY(6%); }
.room-slot-sidetable .ri-candle, .room-slot-sidetable .ri-cup { transform: translateY(18%); height: 70%; }
.room-slot-mantel .ri-candle, .room-slot-mantel .ri-books,
.room-slot-mantel .ri-bookstack, .room-slot-mantel .ri-cup { transform: translateY(12%); height: 78%; }

/* ── Fire light coupling (fire changes LIGHT only) ───────────────────── */

.room-lightlayer {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 66%, var(--fire-glow, rgba(232, 140, 70, 0.12)), transparent 72%);
  transition: background 700ms ease;
  mix-blend-mode: screen;
}

.fire-stage-cold       { --fire-glow: rgba(120, 110, 100, 0.05); --fire-box: 0; }
.fire-stage-embers     { --fire-glow: rgba(190, 90, 50, 0.10); }
.fire-stage-small      { --fire-glow: rgba(220, 120, 60, 0.14); }
.fire-stage-low        { --fire-glow: rgba(226, 130, 66, 0.20); }
.fire-stage-warm       { --fire-glow: rgba(232, 140, 70, 0.28); }
.fire-stage-strong     { --fire-glow: rgba(238, 150, 76, 0.36); }
.fire-stage-full       { --fire-glow: rgba(240, 156, 82, 0.44); }
.fire-stage-full-hearth{ --fire-glow: rgba(244, 164, 90, 0.52); }

/* Nearest furniture catches a warmer rim as the fire grows. */
.fire-stage-low .room-slot svg, .fire-stage-warm .room-slot svg,
.fire-stage-strong .room-slot svg, .fire-stage-full .room-slot svg,
.fire-stage-full-hearth .room-slot svg { color: #A6906C; }
.fire-stage-warm .room-lightlayer { box-shadow: inset 0 0 120px rgba(232, 150, 80, 0.10); }
.fire-stage-strong .room-lightlayer, .fire-stage-full .room-lightlayer,
.fire-stage-full-hearth .room-lightlayer { box-shadow: inset 0 0 160px rgba(238, 156, 84, 0.16); }

/* ── Hero recomposition ──────────────────────────────────────────────── */

.room-hero { position: relative; }

.room-hero .hero-room-controls {
  position: absolute;
  top: 4.9rem; right: var(--margin-mobile, 20px);
  z-index: 25;
  display: flex; align-items: center; gap: 8px;
}
@media (min-width: 768px) { .hero-room-controls { right: 2.5rem; } }

.ember-chip, .hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(244, 239, 229, 0.25);
  background: rgba(23, 20, 16, 0.45);
  backdrop-filter: blur(8px);
  color: rgba(244, 239, 229, 0.85);
  font: 500 11px/1 var(--sans);
  letter-spacing: .04em;
}
.ember-chip svg { width: 12px; height: 12px; color: var(--amber-glow); }
button.hero-pill { cursor: pointer; transition: background .2s ease, border-color .2s ease; }
button.hero-pill:hover { background: rgba(33, 29, 22, 0.7); border-color: rgba(244, 239, 229, 0.4); }

/* ── For-the-room drawer ─────────────────────────────────────────────── */

.room-drawer {
  position: absolute;
  z-index: 40;
  top: calc(4.9rem + 40px);
  right: var(--margin-mobile, 20px);
  width: min(380px, calc(100vw - 2 * var(--margin-mobile, 20px)));
  max-height: min(76vh, 640px);
  display: flex; flex-direction: column;
  border-radius: var(--r-xl, 12px);
  border: 1px solid rgba(244, 239, 229, 0.16);
  background: rgba(20, 16, 12, 0.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
  padding: 18px;
  animation: drawer-in 240ms ease both;
}
@media (min-width: 768px) { .room-drawer { right: 2.5rem; } }
@keyframes drawer-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.room-drawer-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.room-drawer-note { margin-top: 4px; margin-bottom: 12px; }
.room-drawer-scroll { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
.room-cat { margin-bottom: 16px; }
.room-cat ul { display: flex; flex-direction: column; gap: 8px; }

.room-item-card {
  display: flex; align-items: stretch; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(244, 239, 229, 0.12);
  border-radius: var(--r-lg, 10px);
  background: rgba(38, 32, 25, 0.55);
}
.ric-body { min-width: 0; }
.ric-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; flex-shrink: 0; }

.ric-buy {
  font: 500 11px/1 var(--sans);
  color: rgba(244, 239, 229, 0.55);
  background: transparent;
  border: 1px solid rgba(244, 239, 229, 0.2);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.ric-buy-ok { color: var(--amber-glow); border-color: rgba(232, 164, 100, 0.45); background: rgba(232, 164, 100, 0.08); }
.ric-buy-ok:hover { background: rgba(232, 164, 100, 0.16); }

.room-place-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(244, 239, 229, 0.14);
}
.place-choice {
  font: 500 11px/1 var(--sans);
  color: rgba(244, 239, 229, 0.8);
  border: 1px solid rgba(244, 239, 229, 0.25);
  background: rgba(38, 32, 25, 0.6);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.place-choice:hover { border-color: rgba(232, 164, 100, 0.6); color: var(--amber-glow); }
.place-cancel { opacity: .65; }

.room-drawer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(244, 239, 229, 0.12);
}

/* ── Receipt (writing → return to fire) ──────────────────────────────── */

.room-receipt {
  position: absolute;
  z-index: 30;
  left: 50%; top: 14%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}
.room-receipt-show { opacity: 1; }
.room-receipt span {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  color: rgba(244, 239, 229, 0.92);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.room-receipt span + span {
  font-family: var(--sans); font-style: normal;
  font-size: 12px; letter-spacing: .08em;
  color: var(--amber-glow);
}

.room-cooling {
  position: absolute; z-index: 20;
  left: 50%; bottom: 4%; transform: translateX(-50%);
  font: italic 400 13px/1 var(--serif);
  color: rgba(244, 239, 229, 0.55);
  pointer-events: none;
}

/* ── Hero copy layer (reduced; room is the hero) ─────────────────────── */

.room-hero .room-kicker {
  position: absolute; z-index: 20;
  left: 0; right: 0;
  bottom: 2.5%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  pointer-events: none;
}
.room-hero .room-kicker > * { pointer-events: auto; }

/* ── Responsive room ─────────────────────────────────────────────────── */

@media (max-width: 639px) {
  .room-scene { aspect-ratio: 4 / 5; max-height: 66vh; }
  /* Responsive crop: fireplace + nearest furniture dominate. */
  .room-hearth { width: 62%; height: 34%; }
  .room-firebox { width: 48%; height: 21%; }
  .room-slot-chair-left  { left: 3%;  bottom: 18%; width: 24%; height: 26%; }
  .room-slot-chair-right { right: 3%; bottom: 18%; width: 24%; height: 26%; }
  .room-slot-lamp-left   { display: none; }
  .room-slot-lamp-right  { display: none; }
  .room-slot-plant       { right: 2%; bottom: 16%; width: 17%; height: 26%; }
  .room-slot-sidetable   { left: 2%; bottom: 16%; width: 17%; height: 16%; }
  .room-slot-rug         { width: 64%; bottom: 4%; }
  .room-slot-mantel      { width: 56%; height: 7%; bottom: 58%; }
  .room-wallart          { width: 16%; height: 13%; bottom: 66%; }
  .hero-room-controls { top: 4.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .firebox-flames .flame, .firebox-glow { animation: none !important; }
  .room-bg-tint, .room-lightlayer, .room-slot svg { transition: none !important; }
  .room-drawer { animation: none; }
  .room-receipt { transition: opacity 0.01ms; }
}