:root {
  --ink: #f6ead9;
  --muted: #a9957f;
  --gold: #e8b56e;
  --wood-1: #140a04;
  --wood-2: #44220e;
  --wood-3: #9a5729;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  min-width: 320px;
  color: var(--ink);
  background: #070403;
  font-family: var(--sans);
}
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.room-space, .shelf-scene, .lounge-scene { position: fixed; inset: 0; }
.shelf-scene {
  z-index: 2;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,2,1,.24), rgba(5,2,1,.02) 45%, rgba(3,1,0,.18)),
    url("../room/room-gear-wall.jpg") center/cover no-repeat #080402;
  transition: opacity .85s var(--ease), transform 1.15s var(--ease), filter .85s;
}
.shelf-scene::after {
  position: absolute;
  inset: 0;
  z-index: 7;
  content: "";
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}
.room-space.is-seated .shelf-scene { opacity: 0; transform: scale(1.12) rotateY(-12deg); filter: blur(12px); pointer-events: none; }
.room-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 88px;
  padding: 13px clamp(18px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(7,4,2,.98), rgba(7,4,2,.77) 72%, transparent);
  backdrop-filter: blur(14px);
}
.back-link { color: var(--muted); text-decoration: none; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.back-link:hover { color: var(--gold); }
.room-title { text-align: center; }
.room-title span { color: var(--gold); font-size: 8px; letter-spacing: .34em; text-transform: uppercase; }
.room-title h1 { margin: 2px 0 0; font: 500 clamp(23px, 2.6vw, 36px)/1 var(--serif); }
.room-tools { justify-self: end; display: flex; align-items: center; gap: 12px; }
.room-search { width: min(230px, 20vw); }
.room-search input {
  width: 100%;
  padding: 9px 3px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(232,181,110,.28);
  outline: 0;
  font-size: 11px;
}
.room-search input::placeholder { color: #806e5b; }
.room-search input:focus { border-color: var(--gold); }
.sofa-button, .camera-controls button, .return-shelves {
  color: var(--ink);
  background: rgba(18,10,5,.78);
  border: 1px solid rgba(232,181,110,.25);
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sofa-button { padding: 10px 14px; font-size: 9px; white-space: nowrap; }
.sofa-button:hover, .return-shelves:hover { color: #1b1007; background: var(--gold); }
.wall-viewport {
  position: absolute;
  inset: 78px 0 0;
  z-index: 4;
  overflow: hidden;
  perspective: 1700px;
}
.shelf-wall {
  position: absolute;
  top: 7.5%;
  right: -2.8%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  width: min(64vw, 1220px);
  height: min(72vh, 760px);
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 30px 54px rgba(0,0,0,.5));
  transform: perspective(1450px) rotateY(-13deg) skewY(-.8deg);
  transform-origin: 100% 50%;
  transition: opacity .55s var(--ease), filter .55s var(--ease);
}
.shelf-wall.is-focused { opacity: .16; filter: blur(5px); pointer-events: none; }
.shelf-wall.is-filtered {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(90px, 1fr));
}
.room-loading { grid-row: 1 / -1; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); }
.loading-disc { width: 42px; aspect-ratio: 1; border-radius: 50%; background: url("https://catalog.marianna-web.ru/storefront-vinyl.png") center/contain no-repeat; animation: spin 1.7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.wall-shelf {
  position: relative;
  min-height: 0;
  min-width: 0;
  padding: 5px 6px 9px;
  background:
    linear-gradient(180deg, rgba(3,1,0,.97), rgba(24,10,4,.93) 68%, rgba(5,2,1,.98));
  border: clamp(3px, .38vw, 7px) solid #2a1207;
  border-color: #321609 #1c0b04 #5f3015 #241006;
  box-shadow:
    inset 0 12px 20px rgba(0,0,0,.78),
    inset 0 -5px 10px rgba(210,113,49,.14),
    0 2px 7px rgba(0,0,0,.82);
  cursor: zoom-in;
  transition: opacity .55s, filter .55s, box-shadow .55s, transform .55s var(--ease);
}
.wall-shelf::after {
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 0;
  height: clamp(4px, .55vh, 7px);
  content: "";
  background:
    linear-gradient(180deg, #d48746 0%, #7b3d19 23%, #351507 72%, #130704 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.9), inset 0 1px rgba(255,215,150,.34);
}
.wall-shelf::before {
  position: absolute;
  inset: 0;
  content: "";
  box-shadow: inset 0 10px 18px rgba(0,0,0,.88), inset 0 -5px 9px rgba(190,101,43,.12);
  pointer-events: none;
}
.wall-shelf.is-active { cursor: default; box-shadow: inset 0 0 18px rgba(232,181,110,.1); }
.shelf-wall.is-focused .wall-shelf:not(.is-active) { opacity: .08; }
.shelf-label {
  position: absolute;
  z-index: 5;
  left: 5px;
  top: 50%;
  color: rgba(232,181,110,.52);
  font: 500 5px/1 var(--serif);
  letter-spacing: .08em;
  transform: translateY(-50%);
  pointer-events: none;
}
.spine-track {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 5px 1px 4px;
  overflow: visible;
  perspective: 900px;
}
.spine {
  --cover: none;
  --hue: 28;
  position: relative;
  flex: 1 1 0;
  min-width: 1px;
  max-width: none;
  height: calc(100% - 2px);
  padding: 0;
  background-image: var(--cover), linear-gradient(90deg, hsl(var(--hue) 35% 34%), hsl(var(--hue) 42% 66%), hsl(var(--hue) 35% 30%));
  background-size: auto 100%;
  background-position: center;
  border: 0;
  border-radius: 1px 1px 0 0;
  box-shadow: inset 1px 0 rgba(255,255,255,.18), 1px 0 1px #000;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease), filter .35s, box-shadow .35s, max-width .8s;
}
.spine::before {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  content: "";
  background: inherit;
  filter: brightness(.65);
  transform: skewX(-20deg);
}
.spine-face {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 2px;
  display: block;
  width: clamp(74px, 6.8vw, 116px);
  aspect-ratio: 1;
  background: var(--cover) center/cover no-repeat #17100b;
  box-shadow: 0 24px 42px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.16);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(.08,.88);
  transform-origin: 50% 100%;
  transition: opacity .28s, transform .62s var(--ease);
}
.spine-peek {
  position: absolute;
  z-index: 13;
  left: 50%;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: 190px;
  padding: 5px 7px;
  color: var(--ink);
  background: rgba(8,4,2,.94);
  border: 1px solid rgba(232,181,110,.23);
  font-size: 5px;
  line-height: 1.25;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: .3s;
}
.spine:focus-visible { z-index: 8; filter: brightness(1.15); transform: translateY(-4px); box-shadow: 0 0 0 1px #fff, 0 7px 12px #000; outline: 0; }
.spine.is-pulled { z-index: 18; }
.spine.is-pulled .spine-face { opacity: 1; transform: translate(-50%, -8px) scale(1); }
.spine.is-pulled .spine-peek { opacity: 1; transform: translate(-50%, 0); }
.shelf-focus-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  padding: 8vh 5vw 11vh;
  background: rgba(4,2,1,.58);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(0);
  transition: opacity .5s var(--ease), backdrop-filter .5s;
}
.shelf-focus-layer.is-visible {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
.shelf-focus-layer .wall-shelf {
  width: min(88vw, 1540px);
  height: min(48vh, 510px);
  padding: clamp(16px, 2.2vh, 24px) clamp(18px, 2.4vw, 38px) clamp(18px, 2.5vh, 28px);
  border-width: clamp(10px, 1.2vw, 18px);
  box-shadow: inset 0 0 60px #000, 0 40px 100px #000;
  cursor: default;
  transform: translateY(22px) scale(.9);
  transition: transform .72s var(--ease);
}
.shelf-focus-layer.is-visible .wall-shelf { transform: none; }
.shelf-focus-layer .wall-shelf::after {
  left: -12px;
  right: -12px;
  height: clamp(10px, 1.2vh, 16px);
}
.shelf-focus-layer .spine-track { padding: 10px 4px 14px; }
.shelf-focus-layer .spine { min-width: 4px; }
.shelf-focus-layer .spine:hover,
.shelf-focus-layer .spine:focus-visible {
  z-index: 8;
  filter: brightness(1.15);
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px #fff, 0 9px 14px #000;
  outline: 0;
}
.shelf-focus-layer .spine-face { width: clamp(160px, 17vw, 270px); }
.shelf-focus-layer .spine-peek {
  bottom: calc(100% + 12px);
  max-width: min(300px, 45vw);
  padding: 8px 10px;
  font-size: 10px;
}
.camera-controls {
  position: fixed;
  z-index: 24;
  right: clamp(10px, 2vw, 28px);
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 8px 6px;
  background: rgba(11,6,3,.75);
  border: 1px solid rgba(232,181,110,.2);
  border-radius: 20px;
  backdrop-filter: blur(14px);
}
.camera-controls button { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 12px; }
.camera-controls button:first-child { width: auto; height: auto; padding: 7px 9px; border-radius: 12px; font-size: 7px; }
.camera-controls button:disabled { opacity: .3; cursor: default; }
.camera-controls span { color: var(--muted); font-size: 7px; writing-mode: vertical-rl; }
.room-hint {
  position: fixed;
  z-index: 22;
  left: 50%;
  bottom: 12px;
  margin: 0;
  color: rgba(214,188,155,.6);
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.lounge-scene {
  z-index: 30;
  opacity: 0;
  background: #090503;
  pointer-events: none;
  transform: scale(.96) rotateY(12deg);
  transform-origin: 100% 50%;
  transition: opacity .9s var(--ease), transform 1.15s var(--ease);
}
.room-space.is-seated .lounge-scene { opacity: 1; pointer-events: auto; transform: none; }
.lounge-scene iframe { display: block; width: 100%; height: 100%; border: 0; background: #140a05; }
.return-shelves { position: absolute; z-index: 5; top: 20px; left: 22px; padding: 10px 15px; font-size: 9px; backdrop-filter: blur(12px); }
.record-dialog {
  z-index: 80;
  width: min(1100px, calc(100vw - 34px));
  max-height: calc(100vh - 34px);
  padding: clamp(18px, 4vw, 48px);
  color: var(--ink);
  background: rgba(17,11,7,.97);
  border: 1px solid rgba(232,181,110,.26);
  border-radius: 8px;
  box-shadow: 0 50px 140px #000;
  overflow: auto;
}
.record-dialog::backdrop { background: rgba(3,2,1,.78); backdrop-filter: blur(9px); }
.record-dialog[open] { display: grid; grid-template-columns: minmax(280px, 520px) 1fr; align-items: center; gap: clamp(26px, 5vw, 76px); animation: dialogIn .55s var(--ease); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.dialog-close { position: absolute; top: 12px; right: 14px; z-index: 5; width: 42px; height: 42px; color: var(--ink); background: rgba(0,0,0,.34); border: 1px solid rgba(232,181,110,.22); border-radius: 50%; font-size: 27px; cursor: pointer; }
.dialog-stage { position: relative; width: min(43vw, 460px); aspect-ratio: 1; margin-right: 22%; }
.dialog-sleeve { position: absolute; inset: 0; z-index: 2; padding: 0; background: #130c08; border: 0; cursor: pointer; transform-style: preserve-3d; transition: transform .72s var(--ease); box-shadow: 0 38px 70px rgba(0,0,0,.68); }
.dialog-sleeve.is-back { transform: rotateY(180deg); }
.dialog-cover, .dialog-back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; }
.dialog-back { transform: rotateY(180deg); }
.dialog-flip { position: absolute; z-index: 5; left: 50%; bottom: -39px; translate: -50% 0; padding: 8px 12px; color: var(--ink); background: rgba(12,7,4,.9); border: 1px solid rgba(232,181,110,.3); border-radius: 20px; cursor: pointer; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.dialog-flip:hover { color: #1a0f07; background: var(--gold); }
.dialog-vinyl { position: absolute; inset: 1%; background: url("https://catalog.marianna-web.ru/storefront-vinyl.png") center/contain no-repeat; filter: drop-shadow(0 30px 34px #000); transform: translateX(52%); }
.dialog-label { position: absolute; inset: 33%; z-index: 2; border-radius: 50%; background-position: center; background-size: cover; box-shadow: 0 0 0 3px #080604; }
.dialog-vinyl i { position: absolute; inset: 48.7%; z-index: 3; border-radius: 50%; background: #0b0906; }
.dialog-number { color: var(--gold); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; }
.dialog-info h2 { margin: 12px 0 0; font: 500 clamp(34px, 4vw, 56px)/.98 var(--serif); }
.dialog-album { margin: 9px 0 0; color: #d5c3ad; font: italic 500 clamp(20px, 2vw, 30px)/1.1 var(--serif); }
.dialog-info dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 28px 0; padding: 20px 0; border-block: 1px solid rgba(232,181,110,.14); }
.dialog-info dt { color: #8d7964; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.dialog-info dd { margin: 5px 0 0; font-size: 13px; line-height: 1.4; }
.dialog-price { color: #ffd89f; font: 500 clamp(28px, 3vw, 42px)/1 var(--serif); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.dialog-actions a { padding: 13px 18px; color: #1a0f07; background: var(--gold); border-radius: 3px; text-decoration: none; font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.dialog-actions a + a { color: var(--ink); background: transparent; border: 1px solid rgba(232,181,110,.32); }
@media (max-width: 760px) {
  .room-header { grid-template-columns: 1fr 1fr; height: 112px; padding: 10px 14px; gap: 8px 14px; }
  .room-title { text-align: right; }
  .room-tools { grid-column: 1 / -1; justify-self: stretch; }
  .room-search { flex: 1; width: auto; }
  .wall-viewport { inset-block-start: 104px; }
  .shelf-scene { background-position: 63% center; }
  .shelf-wall {
    top: 7%;
    right: -26%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    width: 118vw;
    height: 70vh;
    transform: perspective(1000px) rotateY(-10deg);
  }
  .spine-track { padding-inline: 4px; }
  .shelf-label { display: none; }
  .shelf-focus-layer { padding: 10vh 10px 12vh; }
  .shelf-focus-layer .wall-shelf { width: 92vw; height: 46vh; padding-inline: 10px; }
  .shelf-focus-layer .spine-face { width: clamp(130px, 45vw, 190px); }
  .camera-controls { right: 5px; }
  .room-hint { display: none; }
  .record-dialog[open] { display: block; }
  .dialog-stage { width: min(72vw, 340px); margin: 20px auto 54px; transform: translateX(-11%); }
  .dialog-info dl { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}