:root {
  --bg: #050403;
  --ink: #efe6d8;
  --dim: #a2998b;
  --led: #ff4a1c;
  --led-glow: rgba(255, 74, 28, .55);
  --gut: 16px;
  --head: 'Oswald', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 15px/1.5 var(--mono); background: var(--bg); overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

/* 3D-сцена во весь экран; до WebGL — постер */
#stage { position: fixed; inset: 0; width: 100%; height: 100svh; display: block; image-rendering: pixelated; z-index: 0;
  background: var(--bg) center right / cover no-repeat; }

/* плёнка: зерно + виньетка */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.75) 100%), url(../assets/grain.png);
  mix-blend-mode: overlay; opacity: .3; animation: grain .5s steps(3) infinite; }
@keyframes grain { 0% { background-position: 0 0, 0 0 } 33% { background-position: 0 0, -40px 20px } 66% { background-position: 0 0, 30px -50px } }

/* шапка */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) var(--gut) 28px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5,4,3,.92) 0, rgba(5,4,3,.75) 55%, transparent); }
.top > * { pointer-events: auto; }
.brand canvas { display: block; width: 115px; height: 28px; }
.links { display: flex; gap: 16px; align-items: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.links > a { text-decoration: none; color: var(--dim); transition: color .2s; }
.links > a:hover { color: var(--ink); }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; border: 1px solid rgba(239,230,216,.35); padding: 2px 8px; }
.langs summary::-webkit-details-marker { display: none; }
.langs div { position: absolute; right: 0; top: calc(100% + 6px); display: grid; min-width: 170px; background: #0d0b09; border: 1px solid rgba(239,230,216,.2); padding: 6px; }
.langs div a { padding: 7px 10px; text-decoration: none; text-transform: none; letter-spacing: 0; color: var(--dim); }
.langs div a:hover, .langs div a[aria-current] { color: var(--ink); background: rgba(255,255,255,.05); }

@keyframes blink { 50% { opacity: .2 } }
.hint { position: fixed; right: var(--gut); top: 64px; margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); z-index: 3; opacity: 0; transition: opacity 1s 2.5s; }
.arrived .hint { opacity: .8; }

.tag { position: fixed; left: 0; top: 0; margin: 0; z-index: 3; pointer-events: none; white-space: nowrap;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bg); background: var(--ink); padding: 3px 7px;
  translate: -50% -100%; opacity: 0; transition: opacity .25s; }
.tag.on { opacity: 1; }

/* этажи */
main { position: relative; z-index: 2; }
.hero .card { max-width: 660px; opacity: 1; transform: none; }  /* главный экран виден сразу, без ожидания лифта */
.floor { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--gut) max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(5,4,3,.94) 0%, rgba(5,4,3,.6) 34%, transparent 55%); }
.card { max-width: 560px; opacity: 0; transform: translateY(24px); transition: opacity .8s .15s, transform .8s .15s; }
.floor.here .card { opacity: 1; transform: none; }
h1 { margin: 0; font: 700 clamp(40px, min(12vw, 10vh), 96px)/.92 var(--head); text-transform: uppercase; letter-spacing: -.01em; }
h1 small { display: block; margin: 0 0 12px; font: 400 12px/1.4 var(--mono); letter-spacing: .2em; color: var(--led); }
h1 em, h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
h2 { margin: 0 0 12px; font: 700 clamp(34px, min(9vw, 8vh), 72px)/.95 var(--head); text-transform: uppercase; }
.card > p:not(.director) { margin: 0 0 16px; max-width: 48ch; color: var(--dim); font-size: 14px; }
.lead { margin: 22px 0 22px; max-width: 46ch; color: var(--dim); font-size: 14px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border: 0; background: var(--led); color: #140402; text-decoration: none;
  font: 700 17px/1 var(--head); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 0 1px #ff8a5c inset, 0 0 32px var(--led-glow); transition: transform .15s, box-shadow .2s; }
.cta svg { width: 22px; height: 22px; fill: currentColor; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #ffb08c inset, 0 0 48px var(--led-glow); }
.cta:active { transform: translateY(1px); }
.cta.big { padding: 20px 30px; font-size: 21px; }
.ghost { padding: 14px 18px; border: 1px solid rgba(239,230,216,.35); background: none; text-decoration: none; font: 500 15px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.ghost:hover { border-color: var(--ink); }
.director { margin: 18px 0 0; font-size: 12px; color: var(--dim); }
.director b, .decree b { color: var(--led); }

/* монитор наблюдения с петлёй из геймплея */
.cam { position: relative; margin: 0 0 4px; width: min(100%, 380px); aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(239,230,216,.25); overflow: hidden; }
.cam video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) contrast(1.05); }
.cam::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); pointer-events: none; }
.cam figcaption { position: absolute; left: 8px; top: 6px; z-index: 1; font-size: 10px; letter-spacing: .14em; color: var(--ink); text-shadow: 0 0 4px #000; }
.cam figcaption i { font-style: normal; color: var(--led); animation: blink 1s steps(1) infinite; }

/* мини-игра */
.game .card > .cta { margin-top: 16px; }
.g-hud { position: fixed; left: 0; right: 0; top: 52px; z-index: 4; display: none; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 10px var(--gut);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-align: center; pointer-events: none; }
.g-hud b { font: 700 26px/1 var(--head); color: var(--ink); margin-left: 6px; }
.g-hud b.ok { color: #7dff9a; }
.g-hud em { flex-basis: 100%; font-style: normal; font-size: 11px; }
.playing .g-hud { display: flex; }
.playing .card, .playing .hint { opacity: 0 !important; pointer-events: none; transition: none; }
.playing .floor { background: none !important; }
.playing main { touch-action: none; }
.g-result { margin-top: 18px; padding: 16px; border: 1px solid rgba(255,74,28,.5); background: rgba(5,4,3,.7); }
.g-result.ok { border-color: rgba(125,255,154,.5); }
.card:has(.g-result:not([hidden])) > [data-start] { display: none; }
.g-sum { margin: 0; font: 700 32px/1 var(--head); }
.g-result .cta-row { margin-top: 14px; }
.pop { position: fixed; z-index: 7; pointer-events: none; font: 700 22px/1 var(--head); color: #ffd23a; text-shadow: 0 0 12px rgba(255,200,40,.6);
  translate: -50% -50%; animation: pop .9s ease-out forwards; }
@keyframes pop { to { translate: -50% -160%; opacity: 0; } }

/* дно: трейлер, приказ, FAQ */
.bottom { justify-content: flex-start; padding-top: 52svh;
  background: linear-gradient(to bottom, transparent 0, rgba(5,4,3,.7) 40svh, rgba(5,4,3,.96) 60svh); }
.card.wide { max-width: 860px; }
.decree { margin: 0 0 18px; font: 500 clamp(18px, 2.4vw, 24px)/1.3 var(--head); }
.faq-h { margin-top: 56px; font-size: clamp(28px, 6vw, 44px); }
.faq details { border-top: 1px solid rgba(239,230,216,.15); padding: 14px 0; }
.faq summary { cursor: pointer; font: 500 18px/1.3 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.faq p { margin: 10px 0 0; color: var(--dim); font-size: 14px; max-width: 70ch; }
footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(239,230,216,.15); font-size: 12px; color: var(--dim); }

/* без WebGL: постер вместо сцены, всё видно */
.no-webgl .card { opacity: 1; transform: none; }
.no-webgl .game .card > .cta, .no-webgl .hint { display: none; }

@media (max-width: 899px) {
  .hint { display: none; }
  /* телефон: кабина сверху чистая, текст этажа выезжает под ней на тёмной подложке */
  .floor:not(.hero):not(.bottom) { justify-content: flex-start; padding-top: 60svh;
    background: linear-gradient(to bottom, transparent 0, transparent 44svh, rgba(5,4,3,.88) 58svh, rgba(5,4,3,.95) 100%); }
  .hero { background: linear-gradient(to top, rgba(5,4,3,.96) 0, rgba(5,4,3,.9) 44%, rgba(5,4,3,.5) 54%, transparent 66%); }
  .lead { margin-top: 20px; }
  /* сцена только в верхней половине: внизу всегда темно, пустой пол холла не мелькает между этажами */
  body::after { content: ''; position: fixed; left: 0; right: 0; top: 40svh; bottom: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--bg) 14svh); }
  .playing::after { display: none; }
  .hero .cta { flex: 1 1 auto; }
  .links { gap: 12px; }
}
@media (min-width: 900px) {
  :root { --gut: 40px; }
  .floor { justify-content: center; padding-bottom: 48px;
    background: linear-gradient(to right, rgba(5,4,3,.9) 0%, rgba(5,4,3,.45) 38%, transparent 60%); }
  .hero { justify-content: flex-end; background: linear-gradient(to right, rgba(5,4,3,.9) 0%, rgba(5,4,3,.45) 38%, transparent 60%), linear-gradient(to top, rgba(5,4,3,.8), transparent 40%); }
  .bottom { justify-content: flex-start; background: linear-gradient(to right, rgba(5,4,3,.94) 0%, rgba(5,4,3,.7) 36%, transparent 62%); }
  .brand canvas { width: 138px; height: 34px; }
  .g-hud { top: 70px; }
}
@media (prefers-reduced-motion: reduce) { .fx { animation: none; } html { scroll-behavior: auto; } }