:root{
  --night:#0D0A13; --crypt:#1a1324; --crypt2:#241a33; --line:#3a2b4d;
  --ink:#F1EAF6; --mist:#B3A5C4; --pumpkin:#F28C28; --pumpkin-d:#a85a12;
  --emerald:#43C59E; --blood:#E5566B;
  --display:"Underdog", "Comic Sans MS", cursive; --body:"Nunito", system-ui, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--night);color:var(--ink);font-family:var(--body);font-size:16px;overflow:hidden}
button{font:inherit;color:inherit}
#scene{position:fixed;inset:0;overflow:hidden;z-index:0}
#sceneImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
#sceneShade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,10,19,.15) 0%,rgba(13,10,19,0) 30%,rgba(13,10,19,.55) 62%,rgba(13,10,19,.92) 100%);pointer-events:none;transition:opacity .3s}
#scene.dim #sceneShade{background:rgba(13,10,19,.72)}
#hotspots{position:absolute;inset:0}
.hot{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:transparent;border:0;cursor:pointer}
.hot.found{display:none}
#hud[hidden],#toast[hidden],#soundBtn[hidden],#langBtn[hidden]{display:none!important}
#hud{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;background:linear-gradient(to bottom,rgba(13,10,19,.85),rgba(13,10,19,0))}
.hud-room{font-family:var(--display);font-size:18px;color:var(--pumpkin)}
.hud-stats{display:flex;gap:10px;align-items:center}
.stat{display:flex;align-items:center;gap:4px;background:rgba(26,19,36,.8);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 4px;font-weight:800}
.stat img{width:24px;height:24px;object-fit:contain}
.egg-dots{display:flex;gap:3px;padding-left:6px}
.egg-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.egg-dots i.on{background:var(--pumpkin);box-shadow:0 0 6px var(--pumpkin)}
#ui{position:fixed;left:0;right:0;top:0;height:var(--vh,100vh);z-index:4;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 56px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)}
#ui > *{pointer-events:auto}
#ui.center{justify-content:center}
#ui.top{justify-content:flex-start}
.card{background:rgba(26,19,36,.94);border:1px solid var(--line);border-radius:22px;padding:18px 16px;display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px;align-self:center;
  box-shadow:0 -10px 40px rgba(0,0,0,.45);max-height:100%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:rise .25s ease}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pumpkin);font-weight:800}
h1,h2{font-family:var(--display);font-weight:400;margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:30px;color:var(--pumpkin);text-shadow:0 0 18px rgba(242,140,40,.35)}
h2{font-size:22px}
p{margin:0;line-height:1.5}
.rule{white-space:pre-line}
.muted{color:var(--mist);font-size:14px}
.small{font-size:12px;color:var(--mist);line-height:1.4}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px 16px;font-weight:800;font-size:17px;cursor:pointer;
  background:var(--pumpkin);color:#1b0e02;box-shadow:0 4px 0 var(--pumpkin-d)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--pumpkin-d)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.green{background:var(--emerald);color:#04241a;box-shadow:0 4px 0 #22856a}
.btn[disabled]{opacity:.5}
.link{background:none;border:0;color:var(--emerald);text-decoration:underline;padding:4px 0;cursor:pointer;font-size:14px;text-align:left}
.rules-list{display:grid;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--crypt2);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:13px;font-weight:600}
.checks{display:grid;gap:8px}
.check{display:flex;gap:10px;align-items:center}
.check i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px}
.check.ok i{background:var(--emerald);color:#04241a}
.check.bad i{background:var(--blood);color:#fff}
input.field{width:100%;background:#120d1a;border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--ink);font-size:20px;
  letter-spacing:.06em;font-family:var(--body)}
input.field:focus{outline:2px solid var(--emerald)}
.err{color:var(--blood);font-size:14px;font-weight:600}
.uid-big{font-family:var(--display);font-size:32px;letter-spacing:.08em;text-align:center;color:var(--emerald)}
.options{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:center;text-align:left;width:100%;background:var(--crypt2);border:1px solid var(--line);border-radius:14px;
  padding:12px;cursor:pointer;font-size:16px;line-height:1.3}
.opt .l{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#120d1a;font-weight:800;color:var(--pumpkin)}
.opt.right{border-color:var(--emerald);background:rgba(67,197,158,.18)}
.opt.wrong{border-color:var(--blood);background:rgba(229,86,107,.18)}
.opt.removed{opacity:.3;text-decoration:line-through;pointer-events:none}
.opt[disabled]{cursor:default}
.doors .opt{background:linear-gradient(90deg,#3a2a1a,#241a12);border-color:#5a4126;border-radius:22px 14px 14px 22px;min-height:56px}
.doors .opt .l{width:auto;min-width:44px;padding:0 6px;height:34px;gap:2px;display:flex;align-items:center;justify-content:center;border-radius:14px 8px 8px 14px}
.doors .opt.right{border-color:var(--emerald);background:rgba(67,197,158,.18)}
.doors .opt.wrong{border-color:var(--blood);background:rgba(229,86,107,.18)}
.mf{grid-template-columns:1fr 1fr}
.mf .opt{justify-content:center;font-size:18px;font-weight:800}
.qimg{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.qimg img{display:block;width:100%}
.candle-mark{position:absolute;border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 3px var(--pumpkin),0 0 22px 6px rgba(242,140,40,.8);
  animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 3px var(--pumpkin),0 0 10px 2px rgba(242,140,40,.5)}}
.qtext{font-size:17px;font-weight:600;line-height:1.45;white-space:pre-line}
.verdict{font-family:var(--display);font-size:24px}
.verdict.ok{color:var(--emerald)} .verdict.bad{color:var(--blood)}
.delta{display:inline-block;margin-left:8px;font-family:var(--body);font-weight:800;font-size:15px}
.hintbox{background:#120d1a;border-left:3px solid var(--emerald);padding:10px 12px;border-radius:8px;font-size:14px}
.row{display:flex;gap:8px}
.row > *{flex:1}
.timer{height:8px;border-radius:99px;background:#120d1a;overflow:hidden}
.timer i{display:block;height:100%;background:linear-gradient(90deg,var(--blood),var(--pumpkin));transition:width 1s linear}
.timer-n{font-weight:800;color:var(--pumpkin);text-align:right;font-size:14px}
.badge{width:62%;max-width:240px;margin:0 auto;display:block;filter:drop-shadow(0 0 24px rgba(242,140,40,.45))}
.score{font-size:15px;color:var(--mist);text-align:center}
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.stats4 div{background:var(--crypt2);border-radius:12px;padding:8px 2px}
.stats4 b{display:block;font-size:20px}
.stats4 span{font-size:11px;color:var(--mist)}
.prize{display:flex;gap:12px;align-items:center;background:var(--crypt2);border:1px solid var(--line);border-radius:16px;padding:12px}
.prize .ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:10px;font-weight:800;text-align:center;
  background:repeating-linear-gradient(45deg,#2c2140,#2c2140 6px,#33264a 6px,#33264a 12px);color:var(--mist);border:1px dashed var(--line)}
.prize b{display:block;font-size:17px}
.status{display:inline-block;background:rgba(242,140,40,.15);color:var(--pumpkin);border-radius:99px;padding:2px 10px;font-size:12px;font-weight:800}
.promo{display:flex;gap:8px;align-items:center}
.promo code{flex:1;background:#120d1a;border:1px dashed var(--pumpkin);border-radius:10px;padding:10px;font-size:17px;font-weight:800;text-align:center;user-select:all}
.promo .btn{width:auto;padding:10px 14px;font-size:14px}
.section{display:grid;gap:8px;border-top:1px dashed var(--line);padding-top:12px}
.puzzles{display:grid;gap:8px}
.pz{display:flex;gap:12px;align-items:center;background:var(--crypt2);border:1px solid var(--line);border-radius:16px;padding:8px;
  text-align:start;color:var(--ink);font:inherit;cursor:pointer}
.pz.done{border-color:var(--emerald);box-shadow:0 0 0 1px rgba(67,197,158,.25),0 0 18px rgba(67,197,158,.18)}
.pinfo{display:flex;flex-direction:column;gap:3px;min-width:0}
.pinfo b{font-size:16px}
.pcount{font-weight:800;font-size:13px;color:var(--pumpkin)}
.pz.done .pcount{color:var(--emerald)}
.pgrid{flex:none;display:grid;grid-template-columns:1fr 1fr;width:104px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#0a0812;direction:ltr}
.pgrid.big{width:100%;border-radius:14px;margin:6px 0}
.pc{display:grid;place-items:center;background-size:cover;background-position:center;font-style:normal;font-size:14px;
  outline:1px solid rgba(0,0,0,.55)}
.pgrid.big .pc{font-size:26px}
.pc.on{outline:none}
.pc.new{animation:pcIn .9s ease}
@keyframes pcIn{0%{transform:rotateY(90deg) scale(.6);filter:brightness(2.2)}60%{transform:rotateY(0) scale(1.08)}100%{transform:none;filter:none}}
#pzSheet{position:fixed;inset:0;z-index:20;background:rgba(5,3,9,.78);display:flex;align-items:center;justify-content:center;padding:16px;animation:rise .2s ease}
.pz-card{width:min(100%,460px);background:rgba(26,19,36,.98);border:1px solid var(--line);border-radius:18px;padding:14px;text-align:center}
.pz-card.done .pgrid{box-shadow:0 0 28px rgba(67,197,158,.35)}
.pz-card .card-head{position:static;background:none;padding:0;margin:0 0 4px;text-align:start;align-items:center}
.ok-msg{color:var(--emerald);font-weight:700;font-size:14px}
.tabs{display:flex;gap:8px}
.tabs .btn{font-size:14px;padding:10px}
.footer{text-align:center}
#toast{position:fixed;left:14px;right:14px;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:10;background:var(--crypt);border:1px solid var(--pumpkin);
  border-radius:14px;padding:12px 14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:rise .2s ease}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--pumpkin);margin:0 auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.opt.compact{padding:8px 10px;font-size:14px}
.qtext.dim{font-size:14px;color:var(--mist);font-weight:600}

#soundBtn{position:fixed;z-index:6;right:12px;top:calc(env(safe-area-inset-top,0px) + 10px);width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:rgba(26,19,36,.85);font-size:18px;cursor:pointer;padding:0}
body.with-hud #soundBtn{top:calc(env(safe-area-inset-top,0px) + 52px)}
.qimg{cursor:zoom-in}
.zoom-hint{position:absolute;right:6px;top:6px;background:rgba(13,10,19,.75);border-radius:8px;padding:2px 7px;font-size:14px}
.zoom{position:fixed;inset:0;z-index:20;background:rgba(5,3,8,.94);display:flex;align-items:center;justify-content:center;padding:12px}
.zoom-inner{position:relative;width:100%;max-width:1200px}
.zoom-inner img{display:block;width:100%;border-radius:10px}
@media (orientation:portrait) and (max-width:600px){.zoom-inner{width:calc(var(--vh,100vh) - 40px);max-width:none;transform:rotate(90deg)}}
.zoom-x{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--crypt);font-size:18px}
.stash-cta{display:flex;gap:12px;align-items:center;width:100%;text-align:left;cursor:pointer;border-radius:16px;padding:14px;
  border:1px solid var(--pumpkin);background:linear-gradient(120deg,rgba(242,140,40,.22),rgba(67,197,158,.12));
  box-shadow:0 0 0 0 rgba(242,140,40,.6);animation:glow 2s ease-in-out infinite}
.stash-cta b{display:block;font-size:17px;color:var(--pumpkin)}
.stash-cta span span, .stash-cta > span:nth-child(2) > span{display:block;font-size:13px;color:var(--ink);margin-top:2px}
.stash-ico{font-size:30px}
.stash-go{margin-left:auto;font-size:28px;color:var(--pumpkin)}
@keyframes glow{50%{box-shadow:0 0 18px 2px rgba(242,140,40,.45)}}
@media (prefers-reduced-motion:reduce){.stash-cta{animation:none}}
.myp{display:flex;gap:10px;align-items:center;background:var(--crypt2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.myp i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:#120d1a;color:var(--mist)}
.myp.ok i{background:var(--emerald);color:#04241a}
.myp b{display:block}
.myp .status{margin-left:auto;white-space:nowrap}
#toast{white-space:pre-line}

.card > *{flex-shrink:0}
.qimg img{width:100%;height:auto;aspect-ratio:12/7}
/* маленькие кнопки (регистрация) */
.btn.sm{padding:9px 12px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--pumpkin-d)}
.btn.ghost.sm{box-shadow:none}
.section.reg{gap:6px}
/* хаб наград */
.hub-rank{display:flex;gap:12px;align-items:center;background:var(--crypt2);border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.hub-rank img{flex:none;width:64px;height:64px;object-fit:contain}
.hub-rank b{display:block;font-size:17px;margin:2px 0}
.hub-prog{display:grid;gap:6px;font-weight:800;font-size:14px}
.hub-prog .bar{height:8px;border-radius:99px;background:#120d1a;border:1px solid var(--line);overflow:hidden}
.hub-prog .bar i{display:block;height:100%;background:var(--emerald);border-radius:99px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;
  background:var(--crypt2);border:1px solid var(--line);border-radius:16px;padding:12px;min-height:96px}
.tile .ti{font-size:22px;line-height:1;margin-bottom:4px}
.tile b{font-size:15px;line-height:1.2}
.tile .ts{font-size:12px;color:var(--pumpkin);font-weight:800}
.tile.done{border-color:var(--emerald);background:rgba(67,197,158,.12)}
.tile.done .ts{color:var(--emerald)}
.tile .tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-weight:800;font-size:13px;background:var(--emerald);color:#04241a}
.tile:active{transform:translateY(1px)}
.footer{display:flex;justify-content:center;gap:16px}
/* эпилог */
.timeline{margin:0;padding:0 0 0 4px;list-style:none;display:grid;gap:8px;counter-reset:st}
.timeline li{position:relative;padding-left:30px;font-size:14px;line-height:1.4;counter-increment:st}
.timeline li::before{content:counter(st);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:#120d1a;border:1px solid var(--pumpkin);color:var(--pumpkin)}
.true-end{background:rgba(67,197,158,.15);border:1px solid var(--emerald);border-radius:14px;padding:12px;font-weight:800;color:var(--emerald)}
/* старт комнаты: без карточки, сцена видна целиком */
#ui.scene{justify-content:flex-end}
.room-start{width:100%;max-width:560px;align-self:center;display:flex;flex-direction:column;gap:6px;padding:0 4px;animation:rise .25s ease}
.room-start h1{font-size:34px;text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 18px rgba(242,140,40,.35)}
.room-start .eyebrow{text-shadow:0 1px 6px rgba(0,0,0,.9)}
.rs-hint{font-size:13px;font-weight:700;color:var(--ink);text-shadow:0 1px 6px rgba(0,0,0,.95);margin-bottom:4px}
.rs-row{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.rs-row .btn.ghost{background:rgba(26,19,36,.75);backdrop-filter:blur(4px)}

/* шапка с крестиком (правила): прилипает к верху карточки при прокрутке */
.card-head{position:sticky;top:-18px;z-index:3;display:flex;align-items:flex-start;gap:12px;margin:-18px -16px 0;padding:16px 16px 10px;
  background:#1a1324;border-radius:22px 22px 0 0;box-shadow:0 8px 12px -6px rgba(0,0,0,.5)}
.card-head h2{flex:1;min-width:0}
.xclose{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);
  font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.xclose:active{transform:scale(.94)}

/* язык: кнопка рядом со звуком и список языков */
#langBtn{position:fixed;z-index:6;right:58px;top:calc(env(safe-area-inset-top,0px) + 10px);height:38px;min-width:38px;padding:0 10px;border-radius:19px;
  border:1px solid var(--line);background:rgba(13,10,19,.72);backdrop-filter:blur(6px);color:var(--ink);font:800 13px/1 Nunito,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer}
body.with-hud #langBtn{top:calc(env(safe-area-inset-top,0px) + 52px)}
#langSheet{position:fixed;inset:0;z-index:20;background:rgba(5,3,9,.6);display:flex;align-items:flex-start;justify-content:flex-end;
  padding:calc(env(safe-area-inset-top,0px) + 56px) 12px 12px}
#langSheet .lang-card{background:rgba(26,19,36,.98);border:1px solid var(--line);border-radius:16px;padding:6px;display:flex;flex-direction:column;min-width:190px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);animation:rise .18s ease}
#langSheet .lang-opt{background:none;border:0;color:var(--ink);text-align:start;padding:11px 14px;border-radius:10px;font:700 15px/1.2 Nunito,system-ui,sans-serif;cursor:pointer}
#langSheet .lang-opt.on{background:rgba(242,140,40,.16);color:var(--accent,#F28C28)}
#langSheet .lang-opt:active{background:rgba(255,255,255,.06)}
/* RTL: арабский и фарси */
html[dir="rtl"] body{font-family:Nunito,Tahoma,"Segoe UI",system-ui,sans-serif}
html[dir="rtl"] .card,html[dir="rtl"] .rule,html[dir="rtl"] .hintbox{text-align:right}
html[dir="rtl"] #langSheet{justify-content:flex-start}

/* поле секретного кода над пазлами */
.codebox{display:grid;gap:8px}
/* иконки призов */
.picos{display:flex;flex-wrap:wrap;gap:6px;margin:3px 0}
.pi{position:relative;display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:2px 7px 2px 3px}
.pi img{width:26px;height:26px;object-fit:contain}
.pi em{font-style:normal;font-weight:800;font-size:12px;color:var(--ink)}
.picos.big{justify-content:center;gap:10px;margin:8px 0}
.picos.big .pi{padding:4px 10px 4px 5px;border-radius:12px}
.picos.big .pi img{width:44px;height:44px}
.picos.big .pi em{font-size:15px}
.rprizes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rprizes div{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--crypt2);border:1px solid var(--line);border-radius:12px;padding:6px 4px}
.rprizes div.top{grid-column:1/-1;flex-direction:row;justify-content:center;gap:10px;border-color:var(--pumpkin)}
.rprizes b{color:var(--pumpkin);font-size:13px}
.rprizes .picos,.rprizes .picos.big{margin:0}