/* Интерфейс как титры фильма: только текст поверх кадра, без рамок и подложек. */
:root{color-scheme:dark;--bg:#0b0d0e;--text:#f2e3d8;--accent:#c9a36a;--grain:.035;--vig:.35;--shadow:0 1px 3px #000,0 0 18px #000a}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:15px/1.5 "Helvetica Neue",Arial,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
button,a,input,select{font:inherit}
button{cursor:pointer;color:var(--text);background:none;border:0;padding:10px 14px;min-height:44px;letter-spacing:.14em;text-transform:lowercase;text-shadow:var(--shadow);opacity:.82;transition:opacity .25s,color .25s}
button:hover,button:focus-visible{opacity:1;color:#fff;outline:none}
button:disabled{opacity:.3;cursor:default}
a{color:var(--accent)}

#world,#scene-image,.movie{position:fixed;inset:0;width:100%;height:100%;object-fit:cover}
#world{touch-action:none}
#scene-image,.movie{opacity:0;pointer-events:none;transition:opacity .6s ease;background:#000}
#scene-image.on,.movie.on{opacity:1}
#scene-image{background:var(--bg)}
.veil{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse,transparent 45%,rgba(0,0,0,var(--vig)))}
#grain{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");mix-blend-mode:screen}

#actions:empty{display:none}

/* Точка интереса — невидимая зона клика: только курсор-рука (на телефоне есть кнопка внизу). */
#hotspots{position:fixed;inset:0;pointer-events:none;z-index:6}
.hotspot{position:absolute;width:56px;height:56px;min-height:0;padding:0;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;opacity:1}
.hotspot:focus-visible{outline:1px solid var(--ui);border-radius:50%}

#status{position:fixed;left:18px;bottom:20px;font-size:11px;letter-spacing:.12em;opacity:.5;pointer-events:none;z-index:9;text-shadow:var(--shadow)}

#preview-tools{position:fixed;top:56px;right:10px;z-index:15;background:#000a;padding:10px;font-size:12px;max-width:280px;backdrop-filter:blur(6px)}
#preview-tools select{max-width:260px;background:#0008;color:var(--text);border:0;padding:6px;width:100%;margin:5px 0}
#preview-tools button{font-size:11px;padding:6px 8px;min-height:0}

dialog{color:var(--text);background:#0b0d0ee6;border:0;width:min(950px,94vw);max-height:92dvh;overflow:auto;padding:28px;z-index:30;backdrop-filter:blur(8px)}
dialog::backdrop{background:#000c}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.dialog-head h2{font:300 30px/1.2 Georgia,serif;margin:0}
#gift-art{display:block;max-width:100%;max-height:40dvh;margin:18px auto;object-fit:contain}
#ticket-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:16px 0}
#ticket-view iframe{height:50dvh;width:100%;border:0;background:#eee}
#ticket-view img{display:block;max-width:100%;max-height:65dvh;margin:0 auto}
#ticket-view a{display:inline-block;margin:15px 0;letter-spacing:.14em;text-transform:lowercase}
#gift-message{opacity:.7;font:italic 15px Georgia,serif}

#error{position:fixed;inset:0;z-index:40;background:#000d;display:grid;place-content:center;padding:25px;text-align:center}
#error p{max-width:500px}
[hidden]{display:none!important}

@media(max-width:600px){
 dialog{padding:18px}
 .dialog-head h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){#scene-image,.movie,#start{transition:none}.logo .d5,.logo .d6,#actions p,#start .bit{animation:none!important}#start.leaving .bit{opacity:0}.logo .d5{opacity:0}.logo .d6{opacity:1;transform:none}}

/* ── UI из макета Figma «UI» (кадр 2155×1274). --s = 1 px макета, считается только от высоты экрана (ширина не влияет, пользователь 14.10); --k — общий множитель крупности. */
:root{--k:.8;--s:max(calc(100vh / 1274 * var(--k)),.6px);--ui:#f2e3d8;--ui-font:"KyivType Sans",Jost,"Helvetica Neue",Arial,sans-serif}
/* ponytail: файла KyivType Sans нет — сейчас Jost; когда будет файл, добавить @font-face "KyivType Sans" (оси CONT/MIDL уже заданы ниже) */
#start,#talk,#toolbar{font-family:var(--ui-font);font-variation-settings:"CONT" 0,"MIDL" -1000}

/* Заставка: все надписи на местах из макета относительно центра экрана; кадр по центру сам по себе */
#start{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
/* «Начать»: каждая буква, цифра, слово и значок растворяются в дымке сами по себе, со случайной задержкой (game.js hideStart) */
#start.leaving .bit{animation:smoke var(--dur,2.2s) cubic-bezier(.45,0,.7,1) var(--delay,0s) forwards}
#start.leaving .shade{transition:opacity 3s ease .6s;opacity:0}
@keyframes smoke{to{opacity:0;filter:blur(14px);transform:translateY(-10px) scale(1.06)}}
.logo{position:absolute;left:calc(50% - 114.85 * var(--s));top:calc(50% - 199.5 * var(--s));width:calc(236.55 * var(--s));aspect-ratio:236.545/220.5}
.logo svg,.phones-label svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Табло этажей: цифры идут одной лентой — 6 сверху толкает 5 вниз (одно движение, шаг 160 > высоты цифры, внахлёст не бывает),
   5 тает по пути вниз, 6 проявляется на подходе, в конце лёгкий отскок. Без обрезки. */
.logo{--floor:cubic-bezier(.65,0,.3,1.12)}
.logo .d5{animation:floor-out .9s var(--floor) 5.2s forwards,fade-out .45s linear 5.35s forwards}
.logo .d6{opacity:0;transform:translateY(-160px);animation:floor-in .9s var(--floor) 5.2s forwards,fade-in .45s linear 5.6s forwards}
@keyframes floor-out{to{transform:translateY(160px)}}
@keyframes floor-in{to{transform:none}}
@keyframes fade-out{to{opacity:0}}
@keyframes fade-in{to{opacity:1}}
@keyframes hint-in{from{opacity:0;transform:translateY(calc(24 * var(--s)))}}
#start .shade{transition:opacity 1s;position:absolute;left:50%;top:calc(100% - 381 * var(--s));width:calc(1580 * var(--s));height:calc(629 * var(--s));transform:translateX(-50%)}
.start-bottom{position:absolute;left:50%;bottom:calc(102 * var(--s));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
/* «Начать» и подпись — кривые из макета (UI_curves), текст не меняется */
#start #enter{pointer-events:auto;margin:0;padding:0;min-height:0;opacity:1;transition:opacity .4s}
#start #enter img{display:block;width:calc(194.57 * var(--s));height:calc(39.87 * var(--s))}
.phones{margin:calc(41 * var(--s)) 0 0;display:flex;flex-direction:column;align-items:center;gap:calc(30 * var(--s))}
.phones .phones-label{position:relative;display:block;width:calc(194.02 * var(--s));height:calc(46.24 * var(--s))}
.phones img{width:calc(24 * var(--s));height:calc(24 * var(--s))}

/* Звук: подпись + полупрозрачная таблетка с иконкой */
#toolbar{--s:max(calc(100vh / 1274),.6px);position:fixed;top:max(calc(35 * var(--s)),env(safe-area-inset-top));right:calc(41 * var(--s));display:flex;align-items:center;z-index:21}
#toolbar button{min-height:0;opacity:1;text-shadow:none}
#mute{display:flex;align-items:center;gap:calc(16.5 * var(--s));padding:0;font-size:max(calc(14 * var(--s)),12px);font-weight:500;letter-spacing:0;text-transform:none;color:var(--ui)}
#mute i{display:grid;place-items:center;width:max(calc(63 * var(--s)),44px);height:max(calc(43 * var(--s)),30px);border-radius:36px;background:rgba(0,0,0,.15);transition:background .25s}
#mute:hover i,#mute:focus-visible i{background:rgba(0,0,0,.3)}
#mute i img{width:max(calc(28 * var(--s)),20px);height:max(calc(28 * var(--s)),20px)}
#mute .vec{display:block;width:calc(116.67 * var(--s));height:calc(12.88 * var(--s))}
.vec{display:block;flex:none}
/* «С начала» — слева вверху на одной линии со звуком (макет: 50,51 / 64.85×10.22); зона клика шире самой надписи */
#again{--s:max(calc(100vh / 1274),.6px);position:fixed;left:calc(50.2 * var(--s) - 14px);top:max(calc(51 * var(--s) - 14px),env(safe-area-inset-top));z-index:21;padding:14px;min-height:0;opacity:.85;text-shadow:none}
#again:hover,#again:focus-visible{opacity:1}
#again .vec{width:calc(64.85 * var(--s));height:calc(10.22 * var(--s))}
#home{font-size:12px;letter-spacing:.14em;opacity:.6}

/* Подложка под текстом: мягкое тёмное пятно снизу, видно, когда есть реплика или ответы */
#shade{position:fixed;left:50%;top:calc(100% - 351 * var(--s));width:calc(1522 * var(--s));height:calc(837 * var(--s));transform:translateX(-50%);z-index:7;pointer-events:none;opacity:0;transition:opacity .5s}
/* подложка проявляется чуть позже текста и медленнее; уходит быстро (.5 с) */
body:has(#actions:not(:empty)) #shade,body:has(#caption:not(:empty)) #shade{opacity:1;transition:opacity 1.8s ease .35s}
#talk{position:fixed;left:4%;right:4%;bottom:max(calc(96 * var(--s)),env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:calc(72 * var(--s));z-index:8;pointer-events:none}
#caption{text-align:center;font-size:calc(34 * var(--s));font-weight:350;line-height:1.07;color:var(--ui);white-space:pre-line}
#caption:empty{display:none}
#actions{display:flex;flex-direction:column;align-items:center;gap:calc(20 * var(--s));pointer-events:auto}
#actions p{animation:hint-in 1.1s cubic-bezier(.2,.7,.2,1) both;margin:0;font-size:calc(34 * var(--s));font-weight:350;line-height:1.07;color:var(--ui);pointer-events:none}
#actions button{display:flex;align-items:center;gap:calc(14 * var(--s));padding:0;min-height:0;font-size:calc(34 * var(--s));font-weight:350;line-height:1.07;letter-spacing:0;text-transform:none;color:var(--ui);text-shadow:none;opacity:1;transition:opacity .25s}
#actions.choice button::before{content:"";flex:none;width:calc(8.485 * var(--s));height:calc(8.485 * var(--s));margin:calc(1.76 * var(--s));background:var(--ui);transform:rotate(45deg)}
#actions.choice button{padding-left:calc(6 * var(--s))}
/* В выборе ответ под мышкой остаётся ярким, остальные притухают */
#actions.choice:has(button:hover) button:not(:hover),#actions.choice:has(button:focus-visible) button:not(:focus-visible){opacity:.4}

/* Загрузка: светлая заливка поверх всего (game.css в <head> блокирует отрисовку, поэтому заливка — первый кадр), после загрузки зоны body.ready
   и заливка медленно уходит. Все анимации заставки стоят на паузе до .ready и отсчитываются от неё. */
#curtain{position:fixed;inset:0;z-index:100;pointer-events:none;background:radial-gradient(ellipse at 55% 50%,#feecdd,#f2e3d8 75%);transition:opacity 3.2s cubic-bezier(.4,0,.2,1)}
body.ready #curtain{opacity:0}
body:not(.ready) .logo .d5,body:not(.ready) .logo .d6,body:not(.ready) #start .bit{animation-play-state:paused}
/* Проявление из дымки (обратное растворению, быстрее): логотип, затем подпись — разброс задержек в game.js showStart.
   «Начать» ждёт конца смены 5→6 (.floor-done) и проявляется через секунду; кнопка включается по началу этой анимации. */
#start .bit{animation:emerge var(--in-dur,1.4s) cubic-bezier(.3,0,.5,1) var(--in-delay,1s) both}
#start #enter .bit{--in-delay:1s;--in-dur:1.4s}
#start:not(.floor-done) #enter .bit{animation-play-state:paused}
/* Повторный заход: заливка и проявление быстрее, табло сразу «36», «Продолжить» вместо «Начать»; растворение быстрее (разброс — в hideStart) */
body.returning #curtain{transition-duration:1.4s}
body.returning .logo .d5{animation:none;opacity:0}
body.returning .logo .d6{animation:none;opacity:1;transform:none}
body.returning #start #enter .bit{--in-delay:1s;--in-dur:.9s}
body.returning #start #enter img{width:calc(355.405 * var(--s));height:calc(50.96 * var(--s))}
body.returning #start.leaving .shade{transition:opacity 2s ease .35s}
@keyframes emerge{from{opacity:0;filter:blur(14px);transform:translateY(-10px) scale(1.06)}}