:root{
  --bg:#07070a; --ink:#e9e2d4; --ink-soft:#a99f8c; --line:rgba(233,226,212,.16);
  --blood:#8e1b22; --blood-hi:#c23a3f; --gold:#c9a45c; --gold-soft:rgba(201,164,92,.35); --ok:#7fbf7a;
  --panel:rgba(12,10,12,.86);
  --display:"Cormorant Garamond",Georgia,serif; --body:"PT Serif",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
body{min-height:100dvh;overflow-x:hidden}
#bgblur{position:fixed;inset:-40px;z-index:0;background:#000 center/cover no-repeat;filter:blur(28px) brightness(.32) saturate(.8);transition:background-image .6s}
#snow{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55}
#app{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column;align-items:center}
button,input{font:inherit;color:inherit}
a{color:var(--gold)}

/* ---------- сцена ---------- */
.scene{width:100%;max-width:1100px;min-height:100dvh;display:flex;flex-direction:column;animation:sceneIn .7s ease both;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.scene.out{animation:sceneOut .35s ease both}
@keyframes sceneIn{from{opacity:0;filter:brightness(0)}to{opacity:1;filter:none}}
@keyframes sceneOut{to{opacity:0;filter:brightness(0)}}
.art{position:relative;width:100%;aspect-ratio:16/9;max-height:62dvh;margin:0 auto;background:#000 center/cover no-repeat;overflow:hidden;flex:none}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 25%,transparent 70%,var(--bg) 100%);pointer-events:none}
.art.tall{aspect-ratio:auto;height:46dvh;max-height:none}
.portrait{position:absolute;bottom:0;right:4%;height:96%;max-width:62%;object-fit:contain;object-position:bottom;z-index:1;filter:drop-shadow(0 0 24px rgba(0,0,0,.8));animation:rise 1s .1s ease both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.panel{position:relative;z-index:2;margin:-28px 14px 0;padding:18px 18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 20px 50px rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (min-width:760px){.panel{margin:-60px auto 0;width:min(760px,92%)}}
.kicker{font-family:var(--display);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
h1,h2{font-family:var(--display);font-weight:700;line-height:1.05;margin:0 0 10px}
h1{font-size:clamp(30px,7vw,46px)} h2{font-size:clamp(25px,5.6vw,34px)}
.story p{margin:0 0 .7em}
.story p:first-letter{font-family:var(--display);font-size:1.35em;color:var(--gold)}
.code{font-family:"Courier New",ui-monospace,monospace;font-size:14px;background:rgba(0,0,0,.55);border:1px solid var(--line);border-left:3px solid var(--blood);padding:12px 14px;white-space:pre-wrap;word-break:break-word;user-select:text;-webkit-user-select:text;margin:12px 0;line-height:1.5}
.code.cipher{font-size:13.5px;letter-spacing:.02em}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
.btn{appearance:none;border:1px solid var(--gold-soft);background:linear-gradient(180deg,#24191a,#120c0d);padding:12px 18px;border-radius:3px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.04em;cursor:pointer;min-height:48px;transition:transform .12s,border-color .2s,box-shadow .2s}
.btn:hover{border-color:var(--gold)} .btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#a3232b,#5d0f14);border-color:#d4575c;box-shadow:0 0 22px rgba(194,58,63,.35)}
.btn.ghost{background:transparent;border-color:var(--line);font-size:16px;min-height:42px;padding:8px 14px}
.btn{white-space:nowrap}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn:focus-visible,.icon:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.small{font-size:13px;color:var(--ink-soft)}
.err{color:#ff8f8f;min-height:1.4em;margin:8px 0 0;font-size:14px}
.okmsg{color:var(--ok)}
.swipehint{text-align:center;color:var(--ink-soft);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:14px;opacity:.7}

/* ---------- титул ---------- */
.title-scene{justify-content:center;align-items:center;text-align:center;padding:24px 16px}
.logo{width:min(560px,90vw);filter:drop-shadow(0 0 30px rgba(0,0,0,.9));animation:logoIn 3.2s ease-out both}
@keyframes logoIn{0%{opacity:0;filter:brightness(0) blur(6px)}35%{opacity:.4}40%{opacity:.1}45%{opacity:.7}50%{opacity:.2}62%{opacity:1;filter:brightness(1.6) blur(0)}100%{opacity:1;filter:drop-shadow(0 0 30px rgba(0,0,0,.9))}}
.title-scene .btn{margin-top:34px;animation:fadeUp 1s 2.6s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.intro-text{max-width:560px;font-size:18px;text-align:center;padding:0 20px}
.intro-text .cold{font-family:var(--display);font-size:clamp(28px,8vw,44px);letter-spacing:.2em;color:var(--ink);margin-bottom:22px;display:block}
.intro-text span{display:block;opacity:0;animation:fadeUp 1.2s ease forwards}
.tap{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:var(--ink-soft);font-size:13px;letter-spacing:.3em;text-transform:uppercase;animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---------- правила / анкета ---------- */
.rules ol{padding-left:22px;margin:0}.rules li{margin:0 0 9px}
.field{display:block;margin:12px 0}
.field span{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
input[type=text],input[type=email],input[type=url]{width:100%;background:rgba(0,0,0,.5);border:1px solid var(--line);border-bottom:2px solid var(--gold-soft);padding:12px;border-radius:2px;font-size:17px}
input.flag{font-family:var(--display);font-size:24px;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-soft);margin:14px 0}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--blood)}

/* ---------- хаб ---------- */
.hubbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));position:absolute;top:0;left:0;right:0;z-index:3}
.who{font-size:13px;color:var(--ink-soft);text-shadow:0 1px 4px #000}
.map{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0 4px}
.icon{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink);font-size:11.5px;line-height:1.15;text-align:center}
.icon .disc{width:100%;max-width:72px;aspect-ratio:1;border-radius:50%;border:2px solid var(--gold-soft);background:#111 center 12%/cover no-repeat;box-shadow:0 0 0 3px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.6);position:relative;transition:transform .15s}
.icon:active .disc{transform:scale(.94)}
.icon.current .disc{border-color:var(--blood-hi);box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 18px rgba(194,58,63,.6);animation:beat 2s infinite}
@keyframes beat{50%{box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 4px rgba(194,58,63,.3)}}
.icon.done .disc::after{content:"✓";position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#120c0d;font:700 14px/22px var(--body)}
.icon.locked{cursor:not-allowed;color:var(--ink-soft)}
.icon.locked .disc{filter:grayscale(1) brightness(.25);border-color:var(--line)}
.icon.locked .disc::before{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:20px;filter:none}
.inv{display:flex;gap:6px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.inv .slot{width:44px;height:44px;border:1px dashed var(--line);border-radius:4px;display:grid;place-items:center}
.inv .slot img{width:100%;height:100%;object-fit:contain}
.inv .slot.empty{opacity:.4}
.countdown{font-family:var(--display);font-size:34px;color:var(--gold);letter-spacing:.06em}

/* ---------- ответ / награда ---------- */
.hot{position:absolute;z-index:2;border-radius:6px;cursor:zoom-in;border:2px solid transparent;background:transparent;animation:hotGlow 2.2s infinite}
@keyframes hotGlow{0%,100%{box-shadow:0 0 0 rgba(120,200,255,0)}50%{box-shadow:0 0 22px rgba(120,200,255,.7);border-color:rgba(160,220,255,.55)}}
.hot-label{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#cfe8ff;text-shadow:0 1px 4px #000}
.flask{position:absolute;left:50%;top:50%;width:min(42%,300px);transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 0 30px rgba(255,210,100,.55));animation:flaskIn 1.6s cubic-bezier(.2,.8,.2,1.2) both}
@keyframes flaskIn{from{opacity:0;transform:translate(-50%,-40%) scale(.85) rotate(-6deg)}to{opacity:1;transform:translate(-50%,-50%)}}
.lamps{width:100%;height:min(118vw,520px);border:0;display:block;background:transparent;margin:8px 0}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ---------- просмотрщик картинки ---------- */
.viewer{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:flex;flex-direction:column}
.viewer .vbar{display:flex;gap:8px;padding:10px;padding-top:calc(10px + env(safe-area-inset-top));align-items:center;flex-wrap:wrap}
.viewer .vscroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.viewer img{display:block;width:100%;max-width:none;margin:0 auto;image-rendering:auto}

/* ---------- Мурдоку ---------- */
.full{position:fixed;inset:0;z-index:40;background:#16121a;display:flex;flex-direction:column}
.full .fbar{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));background:#0b090c;border-bottom:1px solid var(--line)}
.full iframe{flex:1;width:100%;border:0}

/* ---------- алтарь ---------- */
.altar-wrap{position:relative;width:min(100%,62dvh,560px);aspect-ratio:830/840;margin:calc(14px + env(safe-area-inset-top)) auto 0;background:url(/s/img/altar-core.webp) center/100% 100% no-repeat;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.aslot{position:absolute;width:26%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:2px dashed rgba(201,164,92,.25);background:rgba(0,0,0,.08);cursor:pointer;border-radius:4px;padding:0}
.aslot.target{border-color:var(--gold);box-shadow:0 0 20px rgba(201,164,92,.5) inset}
.aslot img{transform:rotate(-45deg);width:115%;height:115%;margin:-7.5%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.8))}
.tray{display:flex;justify-content:center;gap:10px;margin:14px 0 4px;flex-wrap:wrap;min-height:84px}
.part{appearance:none;width:76px;height:84px;border:1px solid var(--line);background:rgba(0,0,0,.4);border-radius:4px;cursor:grab;padding:2px;touch-action:none;display:flex;flex-direction:column;align-items:center;font-size:11px}
.part img{width:58px;height:58px;object-fit:contain;pointer-events:none}
.part.sel{border-color:var(--gold);box-shadow:0 0 14px rgba(201,164,92,.5)}
.dragghost{position:fixed;z-index:60;width:70px;pointer-events:none;transform:translate(-50%,-50%);opacity:.9}
.ritual-glow{animation:ritual 2.4s ease both}
@keyframes ritual{0%{filter:none}40%{filter:brightness(1.8) sepia(.6) hue-rotate(-20deg)}100%{filter:brightness(0)}}

/* ---------- финал ---------- */
.phrase{font-family:var(--display);font-size:clamp(30px,8vw,52px);font-style:italic;text-align:center;color:var(--gold);margin:12px 0;text-shadow:0 0 30px rgba(201,164,92,.35)}

#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(140%);visibility:hidden;z-index:70;background:#1b1314;border:1px solid var(--blood);padding:10px 16px;border-radius:3px;max-width:92vw;transition:transform .3s;font-size:15px}
#toast.on{transform:translateX(-50%) translateY(0);visibility:visible}

@media (orientation:landscape) and (max-height:520px){
  .art{max-height:58dvh}
  .panel{margin-top:-20px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition:none!important}}