:root {
  --bg: #0e0e0d;
  --ink: #fff;
  --glass: rgba(18, 18, 17, .6);
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Сцена занимает всё окно */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: pan-y;
}
/* Сцена: интерьер 16:9 + картина. Масштабируется "с запасом" (cover): лишнее по краям обрезается, чёрных полей нет */
.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: max(100vw, calc(100vh * 16 / 9));
  width: max(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
}
.room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity .25s ease; }
.art {
  --cm: 3px;
  position: absolute;
  transform: translate(-50%, -50%);
  /* свет справа: тень падает влево (мягкая и контактная) */
  box-shadow:
    calc(-2.5 * var(--cm)) calc(.8 * var(--cm)) calc(4 * var(--cm)) rgba(0, 0, 0, .26),
    calc(-.5 * var(--cm)) calc(.2 * var(--cm)) calc(.8 * var(--cm)) rgba(0, 0, 0, .35);
  transition: opacity .25s ease;
  user-select: none;
  cursor: pointer;
}
.art img { display: block; max-width: none; }
.mat {
  padding: var(--mat, 10px); /* ширина паспарту: около 19% ширины работы, как на образце */
  background: linear-gradient(90deg, #c9c4ba, #d8d4cc); /* тёплый серо-бежевый, справа чуть светлее */
  outline: 1px solid rgba(0, 0, 0, .22);
  /* свет справа: правая грань рамки отбрасывает небольшую тень на паспарту */
  box-shadow: inset calc(-1.4 * var(--cm)) 0 calc(1.8 * var(--cm)) rgba(0, 0, 0, .3);
}
/* тонкая деревянная рамка (паспарту такое же, как у чёрной) */
.art[data-frame="wood"] { padding: calc(2 * var(--cm)); background: linear-gradient(270deg, #cfa77a, #a5784b); }
/* тонкая чёрная рамка с паспарту */
.art[data-frame="black"] { padding: calc(1.5 * var(--cm)); background: linear-gradient(270deg, #2c2c2c, #0c0c0c); }
.art .mat img { box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.art.hide, .room.hide { opacity: 0; }
.editing .art { cursor: grab; outline: 1px dashed #fff; }

.brand {
  position: absolute;
  top: 3.2%;
  left: 3%;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
  pointer-events: none;
}
/* Логотип растягивается ровно на ширину строки «ГРАФИКА В ИНТЕРЬЕРАХ» и ведёт на главную */
.brand h1 a { display: block; color: inherit; text-decoration: none; pointer-events: auto; }
.brand h1 img { display: block; width: 0; min-width: 100%; height: auto; filter: brightness(0) invert(1); /* логотип всегда белый */ }
.brand h1 { margin: 0; font-weight: 700; font-size: clamp(22px, 4.6vw, 76px); letter-spacing: .04em; line-height: 1; }
.brand p { --ls: .3em; margin: .7em calc(-1 * var(--ls)) 0 0; font-weight: 300; font-size: clamp(10px, 1.25vw, 22px); letter-spacing: var(--ls); }

.side-top { position: absolute; top: 3.2%; right: 3%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.actions { display: flex; gap: 8px; align-items: center; }
.lang, .catalog-link, .frame-btn {
  padding: .7em 1.2em;
  background: var(--glass);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: 40px;
  color: var(--ink);
  text-decoration: none;
  font: 300 clamp(11px, 1.2vw, 18px)/1.2 var(--font);
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s;
}
.lang:hover, .catalog-link:hover, .frame-btn:hover { background: rgba(18, 18, 17, .85); }

.fs-btn {
  position: absolute;
  bottom: 34px;
  right: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--glass);
  backdrop-filter: blur(6px);
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.fs-btn[hidden] { display: none; }
.toolbar {
  position: absolute;
  top: 3.2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.hint {
  margin: 0;
  font: 300 clamp(10px, 1vw, 14px)/1.3 var(--font);
  letter-spacing: .04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.hint .kb, .hint .touch { display: inline-flex; align-items: center; gap: .5em; }
.hint .touch { display: none; }
.hint .grp { display: inline-flex; gap: 3px; margin-left: 1em; }
.hint .grp:first-child { margin-left: 0; }
.hint .key {
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
  transition: background .15s, transform .1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  height: 1.8em;
  padding: 0 .3em;
  font: 400 .95em/1 var(--font);
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .55);
  border-bottom-width: 2px;
  border-radius: 5px;
  text-shadow: none;
}
.hint .key:hover { background: rgba(255, 255, 255, .3); }
.hint .key:active { transform: translateY(1px); }
.hint .key:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sw { width: 2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sw.v { width: 1.2em; height: 2em; }
@media (hover: none) and (pointer: coarse) {
  .hint .kb { display: none; }
  .hint .touch { display: inline-flex; }
}
.thumbs button:focus-visible, .lang:focus-visible, .catalog-link:focus-visible, .frame-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.thumbs {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .7vw;
  padding: .7vw;
  background: var(--glass);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  max-width: 90%;
  overflow-x: auto;
}
.thumbs button {
  flex: none;
  width: clamp(30px, 4.4vw, 70px);
  height: clamp(30px, 4.4vw, 70px);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s, border-color .2s;
}
.thumbs button:hover { opacity: 1; }
.thumbs button.active { opacity: 1; border-color: #fff; }
.thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }

.readout {
  position: absolute;
  top: 13%;
  right: 3%;
  margin: 0;
  padding: 10px 14px;
  background: rgba(0, 0, 0, .75);
  border-radius: 8px;
  font: 13px/1.5 monospace;
  user-select: all;
}

/* Вертикальная версия: интерьер на всю высоту экрана, края обрезаются */
@media (max-aspect-ratio: 1/1) {
  .brand { top: calc(16px + env(safe-area-inset-top)); left: 16px; }
  .brand h1 { font-size: 26px; }
  .brand p { font-size: 11px; --ls: .2em; }
  .side-top { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
  .lang, .catalog-link, .frame-btn { font-size: 12px; padding: .7em 1em; }
  .toolbar { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); flex-direction: row; align-items: center; gap: 10px; }
  .fs-btn { bottom: calc(136px + env(safe-area-inset-bottom)); right: 16px; }
  .hint { font-size: 11px; }
  .thumbs { bottom: calc(16px + env(safe-area-inset-bottom)); gap: 8px; padding: 8px; }
  .thumbs button { width: 46px; height: 46px; }
  .readout { top: calc(70px + env(safe-area-inset-top)); right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .art, .room { transition: none; } }

/* Телефон в горизонтальной ориентации (и любое окно низкое по высоте): компактный интерфейс */
@media (orientation: landscape) and (max-height: 520px) {
  .brand { top: 10px; left: calc(14px + env(safe-area-inset-left)); }
  .brand h1 { font-size: 22px; }
  .brand p { font-size: 9px; margin-top: .5em; --ls: .24em; }
  .side-top { top: 10px; right: calc(14px + env(safe-area-inset-right)); gap: 6px; }
  .actions { gap: 6px; }
  .lang, .catalog-link, .frame-btn { font-size: 11px; padding: .55em 1em; }
  .toolbar { top: 10px; gap: 8px; flex-direction: row; align-items: center; }
  .fs-btn { bottom: 30px; right: calc(14px + env(safe-area-inset-right)); width: 36px; height: 36px; }
  .hint { font-size: 10px; }
  .thumbs { bottom: 8px; gap: 6px; padding: 6px; }
  .thumbs button { width: 36px; height: 36px; }
  .readout { top: 70px; }
}

/* Подпись в правом нижнем углу */
.credit {
  position: absolute;
  right: 3%;
  bottom: 10px;
  margin: 0;
  font: 300 11px/1 var(--font);
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .45);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  pointer-events: auto;
  text-decoration: none;
  user-select: none;
}
@media (max-aspect-ratio: 1/1) { .credit { right: 16px; bottom: calc(4px + env(safe-area-inset-bottom)); font-size: 9px; } }
@media (orientation: landscape) and (max-height: 520px) { .credit { right: calc(14px + env(safe-area-inset-right)); bottom: 8px; font-size: 9px; } }

/* «О проекте» только в браузерной версии; на узком окне панель управления в две строки */
@media (max-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 520px) { .about-link { display: none; } }
@media (max-width: 1150px) and (min-aspect-ratio: 1/1) and (min-height: 521px) { .toolbar { flex-direction: column; gap: 8px; } }

/* Кнопка рамки: как кнопки управления, без плашки; цвет меняют грани квадратика */
.frame-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  color: rgba(255, 255, 255, .92);
  font: 300 clamp(10px, 1vw, 14px)/1.3 var(--font);
  letter-spacing: .04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.frame-btn:hover { background: none; opacity: .75; }
.frame-btn .sq { box-sizing: border-box; width: 1.5em; height: 1.5em; margin-left: .7em; border: 3px solid #b98a5b; background: #d8d4cc; } /* дерево */
.frame-btn[data-frame="black"] .sq { border-color: #151515; } /* чёрная */
@media (max-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 520px) {
  .frame-btn { padding: 4px; }
  .frame-btn .fl { display: none; }
  .frame-btn .sq { margin: 0; width: 22px; height: 22px; }
}