/* ==========================================================================
   Комната 1 — Братислава, 1938
   Виртуальная сцена 1920×1080, вписывается в любой экран.
   ========================================================================== */

:root{
  --stage-w: 1920px;
  --stage-h: 1080px;

  /* Крупные заголовки — Playfair Display. Весь мелкий текст — Onest полужирный. */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Onest", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --ui-weight: 600;

  --ink:        #e6dcc8;
  --ink-dim:    #a2967e;
  --brass:      #c9a24a;
  --blood:      #7e2b22;
  --bg:         #0b0906;

  --ui-fade: .35s cubic-bezier(.4,0,.2,1);
}

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

html,body{
  height:100%;
  background:var(--bg);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  font-family:var(--font-ui);
  font-weight:var(--ui-weight);
  color:var(--ink);
  font-synthesis-weight:none;
}

#app{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}

#stage{
  position:relative;
  flex:none;
  width:var(--stage-w); height:var(--stage-h);
  transform-origin:center center;
  overflow:hidden;
  background:#000;
  box-shadow:0 0 120px rgba(0,0,0,.9);
}

/* ---------- Мир: панорама стен ---------- */

#world{ position:absolute; inset:0; overflow:hidden; }

#panorama{
  position:absolute; top:0; left:0;
  width:calc(var(--stage-w) * 3); height:100%;
  transform:translate3d(calc(var(--stage-w) * -1), 0, 0);
  will-change:transform;
}

.panel{
  position:absolute; top:0;
  width:var(--stage-w); height:var(--stage-h);
  background-size:cover; background-position:center;
  overflow:hidden;
}
#panorama .panel[data-slot="-1"]{ left:0; }
#panorama .panel[data-slot="0"] { left:var(--stage-w); }
#panorama .panel[data-slot="1"] { left:calc(var(--stage-w) * 2); }

/* Слои фона: смена кадра — растворение за 0.5 с */
.bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:opacity .5s ease;
}

#vertical{
  left:0;
  transform:translate3d(0,-100%,0);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  z-index:3;
  box-shadow:0 30px 90px rgba(0,0,0,.8);
}
#vertical.from-bottom{ transform:translate3d(0,100%,0); }
#vertical.shown{ transform:translate3d(0,0,0); }

/* ---------- Хотспоты ---------- */

.hotspot{
  position:absolute;
  cursor:pointer;
  z-index:6;          /* выше слоёв-накладок (.flicker, .blink), иначе пыль тонет под ними */
}
/* мягкое свечение вместо рамки: никаких прямоугольников поверх рисунка */
.hotspot::before{
  content:'';
  position:absolute; inset:-8%;
  background:radial-gradient(ellipse at center, rgba(255,238,200,.13), rgba(255,238,200,.04) 45%, rgba(255,238,200,0) 70%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.hotspot:hover::before{ opacity:1; }
@media (hover:none){ .hotspot:hover::before{ opacity:0; } }
/* пока предмет в руке — цели откликаются заметнее */
body.carrying .hotspot:hover::before{
  background:radial-gradient(ellipse at center, rgba(201,162,74,.30), rgba(201,162,74,.08) 45%, rgba(201,162,74,0) 70%);
}
/* кнопка «?» — на пару секунд показать, с чем можно взаимодействовать */
body.reveal .hotspot::before{ opacity:1; animation:revealPulse 1.6s ease-in-out; }
@keyframes revealPulse{ 0%,100%{opacity:.25} 50%{opacity:1} }
body.show-hotspots .hotspot{
  background:rgba(120,200,255,.10);
  border:1px solid rgba(120,200,255,.55);
  border-radius:4px;
}
body.show-hotspots .hotspot::after{
  content:attr(data-id);
  position:absolute; left:4px; top:2px;
  font:12px/1.2 ui-monospace,monospace; color:#9fe0ff;
  text-shadow:0 1px 2px #000;
}
/* Метка активной зоны — облачко пыли. Точка отсчёта в центре зоны,
   сами пылинки расставляет и крутит js/motes.js. */
.hotspot .motes{
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  pointer-events:none;
  z-index:7;
  opacity:.85;
  transition:opacity .35s ease;
}
.hotspot:hover .motes{ opacity:1; }
body.reveal .hotspot .motes{ opacity:1; }
.hotspot .motes i{
  position:absolute; left:0; top:0; display:block;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,250,236,1) 0%, rgba(255,240,210,.72) 38%, rgba(255,236,200,0) 72%);
  /* тёплый ореол — пылинка видна и на светлых обоях, и в тёмном углу */
  box-shadow:0 0 5px rgba(255,228,175,.55), 0 0 1px rgba(70,52,28,.35);
  will-change:transform, opacity;
}

.layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  pointer-events:none;
}

/* ---------- Горящие глаза ---------- */

.blink{
  position:absolute; inset:0;
  pointer-events:none; z-index:3;
  opacity:0;
  transition:opacity .7s ease;
}
.blink i{ position:absolute; display:block; }
.blink.on{ animation:blinkFlicker 2.6s ease-in-out infinite; }
/* зверь: голова дёргается рывками, глаза изредка моргают */
.blink.drift.on{ animation:blinkJerk 5.4s steps(1, end) infinite; }
@keyframes blinkJerk{
  0%   { transform:translate(0,0) }
  16%  { transform:translate(.42%,-.10%) }
  31%  { transform:translate(.30%,.06%) }
  47%  { transform:translate(-.34%,.13%) }
  63%  { transform:translate(-.20%,-.05%) }
  79%  { transform:translate(.18%,.09%) }
  92%  { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}
.blink.drift.on i{ animation:blinkLid 4.3s linear infinite; }
@keyframes blinkLid{
  0%,37%    { opacity:1 }
  38%,39.6% { opacity:0 }
  40.6%,72% { opacity:1 }
  73%,74.4% { opacity:0 }
  75.4%,100%{ opacity:1 }
}

/* белая птица, вылетающая из клетки */
.bird{ position:absolute; pointer-events:none; will-change:transform, opacity; }
.bird i{
  position:absolute; inset:0; display:block;
  background:center/contain no-repeat;
  animation:flap .17s steps(1) infinite;
}
.bird .w2{ animation-delay:-.085s; }
@keyframes flap{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .bird i{ animation:none } .bird .w2{ opacity:0 } }
@keyframes blinkFlicker{
  0%,100%{ opacity:1 } 22%{ opacity:.72 } 41%{ opacity:1 } 63%{ opacity:.8 } 81%{ opacity:.96 }
}
@media (prefers-reduced-motion:reduce){ .blink.on{ animation:none; } }

/* ---------- Фигура в зеркале ---------- */

.ghost{
  position:absolute;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.8s ease;
  z-index:2;
  /* книзу фигура растворяется, а не обрезается краем овала */
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%, #000 38%, rgba(0,0,0,.8) 58%, rgba(0,0,0,.35) 78%, rgba(0,0,0,0) 96%);
  mask-image:linear-gradient(to bottom,
    #000 0%, #000 38%, rgba(0,0,0,.8) 58%, rgba(0,0,0,.35) 78%, rgba(0,0,0,0) 96%);
}
.ghost.rect{
  border-radius:0;
  /* прямоугольному силуэту нужен куда более мягкий подрез снизу */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.4) 90%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.4) 90%, rgba(0,0,0,0) 100%);
}
.ghost.rect .fig{
  left:0; bottom:0; width:100%; height:100%;
  background-position:center bottom;
  animation:ghostSwayRect 16s ease-in-out infinite;
}
@keyframes ghostSwayRect{
  0%,100%{ transform:scale(var(--fig-scale,1)) }
  50%    { transform:translateX(-1.6%) scale(calc(var(--fig-scale,1) * 1.02)) }
}
.ghost .fig,
.ghost .eyes{
  position:absolute; left:50%; bottom:-16%;
  width:88%; height:114%;
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:contain;
  transform:translateX(-50%) scale(var(--fig-scale, 1));
  transition:transform 3s ease;
  animation:ghostSway 15s ease-in-out infinite;
}
.ghost .fig { filter:blur(var(--fig-blur, 12px)); }
.ghost .eyes{ filter:blur(calc(var(--fig-blur, 12px) * .3)); opacity:.5; mix-blend-mode:screen; }

@keyframes ghostSway{
  0%,100%{ transform:translateX(-50%) scale(var(--fig-scale,1)) }
  50%    { transform:translateX(-47.5%) scale(calc(var(--fig-scale,1) * 1.02)) }
}
@media (prefers-reduced-motion:reduce){ .ghost .fig, .ghost .eyes{ animation:none; } }

/* ---------- Крупный план ---------- */

#closeup{
  position:absolute; inset:0; z-index:20;
  display:none;
  background:#000;              /* непрозрачно: под крупным планом ничего не просвечивает */
}
#closeup.shown{ display:block; animation:cuIn .3s ease-out; }
/* только прозрачность — масштаб на весь экран открывал бы края кадра */
@keyframes cuIn{ from{opacity:0} to{opacity:1} }
/* крупный план во весь экран, ровно как стены */
#closeup .cu-frame{
  position:absolute; inset:0;
  container-type:inline-size;
}
#closeup .cu-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 88% 92% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.18) 80%, rgba(0,0,0,.45) 100%);
}

/* ---------- Кодовый замок ---------- */

.lock{
  z-index:9;
  position:absolute; left:50.3%; top:50.1%;
  transform:translate(-50%,-50%);
  display:flex; gap:var(--drum-gap, 2.10cqw);
}
.drum{
  width:var(--drum, 5.8cqw);
  display:flex; flex-direction:column; align-items:center; gap:3.4cqw;
}
.drum button{
  width:100%; height:2.4cqw;
  background:none; border:none; color:var(--brass);
  font-size:1.9cqw; line-height:1; cursor:pointer; opacity:.6;
  transition:opacity .2s, transform .2s;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.9));
}
.drum button:hover{ opacity:1; transform:scale(1.25); }
/* цифра вписана прямо в нарисованное гнездо: ни рамки, ни подложки */
.drum .digit{
  width:100%; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:500;
  font-size:3.4cqw; line-height:1;
  padding-bottom:.45cqw;   /* оптическая компенсация базовой линии */
  color:#f6ecd2;
  background:none; border:none; border-radius:50%;
  text-shadow:0 0 10px rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.9);
}
.lock.wrong{ animation:shake .45s; }
@keyframes shake{ 10%,90%{transform:translate(-51%,-50%)} 30%,70%{transform:translate(-48%,-50%)} 50%{transform:translate(-52%,-50%)} }

/* ---------- Интерфейс ---------- */

#ui{
  position:absolute; z-index:30; pointer-events:none;
  left:var(--safe-x,0); right:var(--safe-x,0);
  top:var(--safe-y,0); bottom:var(--safe-y,0);
}
#ui > *{ pointer-events:auto; }

.nav{
  position:absolute;
  background:none; border:none; cursor:pointer;
  opacity:0; transition:opacity var(--ui-fade);
}
.nav::before{
  content:''; display:block;
  width:34px; height:34px;
  border-left:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.9));
}
.nav-left { left:26px;  top:50%; margin-top:-40px; padding:24px; }
.nav-right{ right:26px; top:50%; margin-top:-40px; padding:24px; }
.nav-left::before { transform:rotate(45deg); }
.nav-right::before{ transform:rotate(-135deg); }
.nav-up   { left:50%; top:14px;  margin-left:-40px; padding:20px 24px; }
.nav-down { left:50%; bottom:4px; margin-left:-40px; padding:16px 24px; }
.nav-up::before  { transform:rotate(135deg); }
.nav-down::before{ transform:rotate(-45deg); }
.nav-back { left:34px; top:30px; padding:20px; }
.nav-back::before{ transform:rotate(45deg); width:26px; height:26px; }

.nav.on{ opacity:.5; }
.nav.on:hover{ opacity:1; }
#btn-back{ display:none; }
#btn-back.on{ display:block; opacity:.6; }

#compass{
  position:absolute; right:34px; top:26px;
  width:46px; height:46px;
  opacity:.42;
  transition:opacity .4s;
  pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.9));
}
#compass svg{ width:100%; height:100%; display:block; }
#compass .ring{ fill:none; stroke:var(--ink-dim); stroke-width:1; opacity:.5; }
#compass .dot { fill:var(--ink-dim); opacity:.65; }
#compass .needle{
  fill:var(--brass);
  transform-origin:20px 20px;
  transition:transform .48s cubic-bezier(.4,0,.2,1);
}
#compass b{
  position:absolute; left:0; right:0;
  text-align:center; font-size:20px; line-height:1;
  color:var(--brass); opacity:0; transition:opacity .3s;
}
#compass b.up  { top:-15px; }
#compass b.down{ bottom:-15px; }
#compass.at-ceiling b.up  { opacity:1; }
#compass.at-floor   b.down{ opacity:1; }
#compass.at-ceiling svg, #compass.at-floor svg{ opacity:.35; }
#compass.dim{ opacity:.16; }

#subtitle{
  position:absolute; left:50%; bottom:186px; transform:translateX(-50%);
  width:1440px; max-width:92%; padding:26px 90px;
  text-align:center; font-size:26px; font-weight:600; line-height:1.5;
  color:#efe6d2; text-wrap:balance;
  /* без подложки: только лёгкая тень под буквами */
  background:none;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  opacity:0; transition:opacity .45s;
  pointer-events:none;
}
#subtitle.on{ opacity:1; }

/* ---------- Инвентарь ---------- */

/* Инвентарь — в левом нижнем углу, на мягком затемнении */
#inventory{
  position:absolute; left:0; bottom:0;
  width:min(56%, 1020px); height:320px;
  display:flex; align-items:flex-end; justify-content:flex-start;
  gap:var(--slot-gap, 16px);
  padding:0 0 26px 40px;
  pointer-events:none;
  background:none;
  transition:opacity .5s;
}
#inventory.has-items{
  background:radial-gradient(ellipse 88% 78% at 0% 100%,
    rgba(5,4,3,.90) 0%, rgba(5,4,3,.68) 28%, rgba(5,4,3,.36) 50%, rgba(5,4,3,.10) 68%, rgba(5,4,3,0) 82%);
}

.slot{
  position:relative;
  width:var(--slot, 152px); height:var(--slot, 152px);
  pointer-events:auto;
  cursor:pointer;
  background:center/contain no-repeat;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.8));
  transition:transform .18s ease, filter .18s ease;
}
.slot:hover{ transform:translateY(-6px) scale(1.06); }
.slot.sel{
  transform:translateY(-10px) scale(1.12);
  filter:drop-shadow(0 0 14px rgba(201,162,74,.75)) drop-shadow(0 8px 14px rgba(0,0,0,.85));
}
@keyframes slotIn{
  0%  { transform:translateY(40px) scale(.6); opacity:0 }
  60% { transform:translateY(-9px) scale(1.12); opacity:1 }
  100%{ transform:translateY(0) scale(1); opacity:1 }
}
.slot.fresh{ animation:slotIn .55s cubic-bezier(.2,.9,.3,1); }

#carry{
  position:absolute; z-index:45; width:150px; height:150px;
  margin:-75px 0 0 -75px;
  background:center/contain no-repeat;
  pointer-events:none; opacity:0;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.75));
  transition:opacity .2s;
}
#carry.on{ opacity:.92; }

body.carrying{ cursor:crosshair; }

#toolbar{
  position:absolute; right:22px; bottom:26px;
  display:flex; gap:10px;
}
#toolbar button{
  width:52px; height:52px;
  background:rgba(20,16,11,.6);
  border:1px solid rgba(201,162,74,.25);
  border-radius:6px;
  color:var(--ink-dim); font-size:24px; cursor:pointer;
  transition:color .2s, border-color .2s;
}
#toolbar button:hover{ color:var(--brass); border-color:var(--brass); }
#toolbar button.off{ opacity:.35; }

/* ---------- Перетаскивание ---------- */

.slot.dragging{ opacity:.25; }
.hotspot.drop-ok::before{
  opacity:1 !important;
  background:radial-gradient(ellipse at center, rgba(201,162,74,.38), rgba(201,162,74,.12) 45%, rgba(201,162,74,0) 70%) !important;
}
body.carrying{ cursor:grabbing; }
body.carrying .slot{ cursor:grabbing; }
.slot{ cursor:grab; }

/* ---------- Служебное меню ---------- */

#menu{
  position:absolute; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,3,2,.9);
}
#menu.shown{ display:flex; animation:cuIn .25s ease-out; }
.menu-box{
  min-width:560px; padding:52px 60px;
  border:1px solid rgba(201,162,74,.3);
  background:linear-gradient(180deg, rgba(22,18,12,.96), rgba(10,8,5,.98));
  text-align:center;
}
.menu-kicker{
  font-size:15px; font-weight:600; letter-spacing:.46em; text-transform:uppercase;
  color:var(--brass); opacity:.8; margin-bottom:36px;
}
.menu-list{ display:flex; flex-direction:column; gap:14px; }
#menu button{
  display:block; width:100%;
  padding:18px 26px;
  background:none; border:1px solid rgba(201,162,74,.24);
  color:var(--ink); font-family:inherit; font-weight:600;
  font-size:21px; letter-spacing:.05em; cursor:pointer;
  transition:background .25s, border-color .25s, color .25s;
}
#menu button:hover{ background:rgba(201,162,74,.12); border-color:var(--brass); color:#f6e8c4; }
#menu button b{ color:var(--brass); font-weight:600; margin-right:12px; }
.menu-close{ margin-top:30px; opacity:.65; }

/* кнопка на занавесе */
.curtain-btn{
  display:block; margin:44px auto 0;
  padding:16px 54px;
  background:none; border:1px solid rgba(201,162,74,.45);
  color:var(--brass); font-family:var(--font-ui); font-weight:600;
  font-size:19px; letter-spacing:.3em; text-transform:uppercase; cursor:pointer;
  transition:background .3s, color .3s;
}
.curtain-btn:hover{ background:rgba(201,162,74,.14); color:#f0dfae; }

/* ---------- Модалка ---------- */

#modal{
  position:absolute; inset:0; z-index:40; display:none;
  background:rgba(4,3,2,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#modal.shown{ display:flex; align-items:center; justify-content:center; animation:cuIn .3s; }
.modal-inner{
  display:flex; align-items:center; gap:70px;
  max-width:min(1500px, calc(var(--safe-w, 1920px) - 120px)); padding:50px;
}
.modal-art{
  width:520px; height:520px; flex:none;
  background:center/contain no-repeat;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.8));
}
.modal-text{
  font-size:25px; font-weight:500; line-height:1.7; color:#e9dfc9; max-width:700px;
  white-space:pre-wrap;
}
.modal-text h3{
  font-size:18px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); font-weight:600; margin-bottom:22px;
}
.modal-close{
  position:absolute; right:38px; top:26px;
  width:64px; height:64px; font-size:42px; line-height:1;
  background:none; border:none; color:var(--ink-dim); cursor:pointer;
}
.modal-close:hover{ color:var(--ink); }

/* Записи */
.journal{ font-size:23px; font-weight:500; line-height:1.85; max-width:1060px; }
.journal h3{ font-size:18px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); font-weight:600; margin-bottom:26px; }
.journal li{ list-style:none; padding-left:34px; position:relative; margin-bottom:12px; color:#ddd2ba; }
.journal li::before{ content:'—'; position:absolute; left:0; color:var(--brass); }
.journal .empty{ color:var(--ink-dim); font-style:italic; }

/* ---------- Атмосфера ---------- */

#fx-vignette{
  position:absolute; inset:0; z-index:10; pointer-events:none;
  background:radial-gradient(ellipse 88% 92% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.18) 80%, rgba(0,0,0,.45) 100%);
}
/* затемнение на время смены кадра */
#fx-dip{
  position:absolute; inset:0; z-index:25; pointer-events:none;
  background:#050403; opacity:0;
  transition:opacity .25s ease;
}
#fx-dip.on{ opacity:.55; }

#fx-life{
  position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden;
  transition:opacity .3s;
}
#fx-light{
  position:absolute; inset:0; z-index:9; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 62% 34%, rgba(255,206,132,.10), rgba(255,206,132,0) 65%);
  transition:opacity 1.2s;
}
/* Зерно статичное: любая анимация полноэкранного слоя читается как мерцание. */
#fx-grain{
  position:absolute; inset:0; z-index:11; pointer-events:none;
  opacity:.055;
  background-repeat:repeat;
}

#fx-dust{ position:absolute; inset:0; z-index:12; pointer-events:none; overflow:hidden; }

/* ---------- Занавес / финал ---------- */

#curtain{
  position:absolute; inset:0; z-index:50;
  background:#050403; opacity:0; pointer-events:none;
  transition:opacity 1.6s;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
#curtain.on{ opacity:1; pointer-events:auto; }
.curtain-text{
  font-family:var(--font-display); font-weight:400;
  font-size:46px; line-height:1.65; color:#e8dcc2; max-width:1160px;
  letter-spacing:.01em; text-wrap:balance;
}
.curtain-text small{
  display:block; margin-top:38px;
  font-family:var(--font-ui); font-weight:600;
  font-size:20px; color:var(--ink-dim); letter-spacing:.3em; text-transform:uppercase;
}

/* ---------- Заставка ---------- */

#title-screen{
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 45%, #191308, #060504 70%);
  transition:opacity .9s;
  overflow:hidden;
}
.ts-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.6s ease;
}
.ts-bg.on{ opacity:1; }
/* затемнение, чтобы заголовок читался поверх любой картинки */
.ts-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 44%, rgba(6,5,4,.86), rgba(6,5,4,.42) 55%, rgba(6,5,4,.20) 100%),
    linear-gradient(180deg, rgba(6,5,4,.55), rgba(6,5,4,.15) 40%, rgba(6,5,4,.75));
}
.ts-inner{ position:relative; z-index:2; }
#title-screen.gone{ opacity:0; pointer-events:none; }
.ts-inner{ text-align:center; }
.ts-kicker{ font-family:var(--font-display); font-size:16px; font-weight:500; letter-spacing:.42em; text-transform:uppercase; color:var(--brass); opacity:.7; }
.ts-room{
  margin-top:20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.ts-room em{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:34px; letter-spacing:.02em; color:#d8c8a4;
}
.ts-inner h1{
  font-family:var(--font-display);
  font-size:104px; font-weight:500; margin:0 0 6px;
  letter-spacing:.01em; color:#f1e6cd;
  text-shadow:0 6px 40px rgba(0,0,0,.9);
  text-wrap:balance;
}
.ts-inner p{ font-family:var(--font-display); margin-top:34px; font-size:28px; font-weight:400; line-height:1.75; color:var(--ink-dim); }
/* ---------- Загрузчик ---------- */

#ts-load{
  margin-top:74px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  transition:opacity .5s ease;
}
#ts-load.gone{ opacity:0; }
#ts-load .bar{
  width:360px; height:1px;
  background:rgba(201,162,74,.18);
  overflow:hidden;
}
#ts-load .bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, rgba(201,162,74,.35), rgba(255,214,138,.9));
  box-shadow:0 0 12px rgba(255,196,104,.5);
  transition:width .3s ease;
}
#ts-load .pct{
  font-family:var(--font-display);
  font-size:16px; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
  color:#6f6552;
}

#btn-start[hidden]{ display:none; }
#btn-start{
  position:relative;
  margin-top:56px; padding:34px 84px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-display); font-weight:500;
  font-size:40px; letter-spacing:.26em; text-transform:uppercase;
  color:#f2e3ba;
  text-shadow:
    0 0 26px rgba(255,201,116,.30),
    0 0 70px rgba(255,172,70,.16),
    0 2px 5px rgba(0,0,0,.7);
  transition:color .5s ease, letter-spacing .7s ease, text-shadow .5s ease;
}
#btn-start span{ position:relative; z-index:2; }
#btn-start i{ position:absolute; z-index:0; pointer-events:none; display:block; }

/* многослойное свечение: сильно размытое и полупрозрачное */
#btn-start .halo{
  inset:-70% -22%;
  background:
    radial-gradient(ellipse 42% 50% at 50% 50%, rgba(255,199,110,.16), rgba(255,199,110,0) 72%),
    radial-gradient(ellipse 72% 28% at 50% 54%, rgba(255,166,66,.10), rgba(255,166,66,0) 76%);
  filter:blur(26px);
  animation:haloA 9s ease-in-out infinite;
}
#btn-start::after{
  content:''; position:absolute; inset:-44% -12%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 36% 58% at 50% 50%, rgba(255,234,182,.13), rgba(255,234,182,0) 70%);
  filter:blur(18px);
  animation:haloB 13.5s ease-in-out infinite;
}
#btn-start::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:22%; right:22%; bottom:26%; height:1px;
  background:linear-gradient(90deg, rgba(201,162,74,0), rgba(255,214,138,.28), rgba(201,162,74,0));
  filter:blur(1.5px);
  opacity:.5;
  animation:haloB 11s ease-in-out infinite;
}
@keyframes haloA{ 0%,100%{opacity:.5; transform:scale(.96)} 50%{opacity:.9; transform:scale(1.05)} }
@keyframes haloB{ 0%,100%{opacity:.85; transform:scale(1.04)} 50%{opacity:.4; transform:scale(.95)} }

#btn-start .sparks{ inset:-40% 0 -14% 0; overflow:hidden; }
#btn-start .spark{
  position:absolute; bottom:28%;
  border-radius:50%;
  background:rgba(255,224,168,.55);
  box-shadow:0 0 5px rgba(255,200,120,.35);
  filter:blur(.6px);
  animation:sparkUp linear infinite;
}
@keyframes sparkUp{
  0%  { transform:translate3d(0,18px,0) scale(.35); opacity:0 }
  22% { opacity:.55 }
  70% { opacity:.28 }
  100%{ transform:translate3d(var(--dx,6px),-110px,0) scale(1); opacity:0 }
}

#btn-start:hover{
  color:#fdf0d2;
  letter-spacing:.32em;
  text-shadow:
    0 0 34px rgba(255,210,132,.48),
    0 0 90px rgba(255,180,80,.26),
    0 2px 5px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion:reduce){
  #btn-start .halo, #btn-start::after, #btn-start::before, #btn-start .spark{ animation:none; }
}
.ts-hint{ font-family:var(--font-display); margin-top:60px; font-size:18px; font-weight:400; color:#6f6552; letter-spacing:.04em; }

/* ---------- Подсказка о повороте экрана ---------- */

#rotate-hint{
  position:fixed; inset:0; z-index:999;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:#0b0906; color:var(--ink-dim);
  font-size:19px; font-weight:600; text-align:center; line-height:1.7;
}
#rotate-hint span{ color:var(--brass); }
.rot-ico{ font-size:64px; color:var(--brass); animation:spin 3s ease-in-out infinite; }
@keyframes spin{ 0%,60%{transform:rotate(0)} 80%,100%{transform:rotate(90deg)} }

@media (orientation:portrait) and (max-width:900px){
  body.needs-landscape #rotate-hint{ display:flex; }
}

/* Живые накладки поверх фона (моргание портрета, фигура в камине).
   Позиция берётся из самого файла: тот же cover, что и у фона. */
.flicker{ z-index:2; will-change:opacity; }