:root{
  --bg:#14110d;
  --bg2:#1d1812;
  --ink:#f2e9d6;
  --muted:#b6a888;
  --gold:#e3b24b;
  --gold-dim:#a8842f;
  --wood:#5a4a38;
  --parch:#efe4c8;
  --parch-ink:#2a2216;
  --green:#7bbf5a;
  --red:#d9694e;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --serif:Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
/* дежурное «музейное» освещение — чуть колышется, как свеча */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(227,178,75,.10), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 60%);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

#sound-toggle{
  position:fixed;top:12px;right:12px;z-index:50;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--gold-dim);background:rgba(20,17,13,.8);
  color:var(--gold);font-size:20px;cursor:pointer;backdrop-filter:blur(4px);
}
#sound-toggle:hover{border-color:var(--gold)}
#sound-toggle.off{opacity:.5}

#museum{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:0 18px 40px}

.screen{display:none;animation:fade .5s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- ИНТРО ---------- */
#screen-intro{min-height:100vh;display:none;place-items:center;text-align:center}
#screen-intro.active{display:grid}
.intro-inner{padding:40px 8px}
.kicker{color:var(--gold);letter-spacing:.28em;text-transform:uppercase;font-size:12px;margin:18px 0 6px}
.museum-title{
  font-size:clamp(40px,12vw,74px);line-height:1.02;margin:.1em 0 .35em;
  color:var(--ink);text-shadow:0 2px 0 #000,0 0 30px rgba(227,178,75,.15);letter-spacing:.01em;
}
.lead{max-width:44ch;margin:0 auto 26px;color:var(--muted);font-size:17px}
.hint{margin-top:20px;color:var(--muted);font-size:13px;opacity:.8}

/* свеча */
.candle{width:14px;height:40px;margin:0 auto;background:linear-gradient(#f2e9d6,#cdbf9c);border-radius:3px;position:relative;box-shadow:0 0 20px rgba(227,178,75,.2)}
.flame{position:absolute;top:-20px;left:50%;width:12px;height:22px;transform:translateX(-50%);
  background:radial-gradient(circle at 50% 65%,#fff 0,#ffd469 35%,#ff9a2e 70%,transparent 72%);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;filter:blur(.3px);
  animation:flicker 1.4s ease-in-out infinite;transform-origin:bottom center}
@keyframes flicker{0%,100%{transform:translateX(-50%) scale(1) rotate(-2deg);opacity:.95}
  50%{transform:translateX(-52%) scale(1.08,.94) rotate(2deg);opacity:1}}

/* ---------- ОБЩЕЕ ДЛЯ ЭКСПОНАТОВ ---------- */
#topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 58px 12px 2px;margin-bottom:6px;background:linear-gradient(var(--bg),rgba(20,17,13,.85));backdrop-filter:blur(3px)}
#topbar[hidden]{display:none}
.topbar-name{color:var(--gold);letter-spacing:.16em;font-size:11px;text-transform:uppercase}
#ticket{display:flex;gap:8px;list-style:none;margin:0;padding:0}
#ticket li{width:30px;height:26px;display:grid;place-items:center;font-size:11px;color:var(--muted);
  border:1px solid var(--wood);border-radius:4px;background:rgba(0,0,0,.2)}
#ticket li.done{color:#1a140c;background:var(--gold);border-color:var(--gold);font-weight:bold}
#ticket li.current{border-color:var(--gold);color:var(--gold)}

.exh-no{color:var(--gold);letter-spacing:.24em;text-transform:uppercase;font-size:12px;margin:14px 0 2px}
.exh-title{font-size:clamp(26px,7vw,40px);margin:.05em 0 .3em;line-height:1.1}
.exh-desc{color:var(--muted);font-size:16px;max-width:56ch;margin:0 0 18px}

.stage{margin:6px 0 14px}
.photo-frame{position:relative;display:block;width:100%;max-width:460px;margin:0 auto;
  border:6px solid #0d0b08;border-radius:6px;box-shadow:var(--shadow),0 0 0 1px var(--wood);overflow:hidden}
.photo{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}

/* ---------- ВАРИАНТЫ ---------- */
.options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:4px 0 12px}
.options-num{grid-template-columns:repeat(4,1fr);max-width:360px;margin-left:auto;margin-right:auto}
.opt{
  appearance:none;cursor:pointer;font-family:var(--serif);
  background:linear-gradient(#241d14,#1a150e);color:var(--ink);
  border:1px solid var(--wood);border-radius:8px;padding:14px 8px;font-size:15px;
  display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .1s,border-color .15s,background .15s}
.opt:hover{border-color:var(--gold);transform:translateY(-2px)}
.opt:disabled{cursor:default;opacity:.55;transform:none}
.opt .opt-ic{font-size:26px}
.opt-num{font-size:24px;padding:16px 0;justify-content:center}
.opt.correct{border-color:var(--green);background:linear-gradient(#22331c,#1a2815);color:#dff3d2;box-shadow:0 0 18px rgba(123,191,90,.35)}
.opt.wrong{border-color:var(--red);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.note{color:var(--muted);font-size:14px;text-align:center;min-height:1.4em;margin:6px 0}
.note.good{color:var(--green)}
.note.bad{color:var(--red)}

/* ---------- ТАБЛИЧКА-ПЕРГАМЕНТ ---------- */
.plaque{
  background:linear-gradient(#f3e9cd,#e6d8b4);color:var(--parch-ink);
  border:1px solid #b39e6f;border-left:5px solid var(--gold-dim);border-radius:4px;
  padding:14px 16px;margin:8px auto 2px;max-width:56ch;font-size:15.5px;box-shadow:var(--shadow);
  animation:fade .5s ease}
.plaque b{color:#5a3d12}

/* ---------- НАВИГАЦИЯ ---------- */
.btn{
  appearance:none;cursor:pointer;font-family:var(--serif);font-size:17px;
  background:linear-gradient(#e9be57,#c9972f);color:#20180b;font-weight:bold;
  border:none;border-radius:999px;padding:13px 26px;letter-spacing:.02em;
  box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .1s,filter .15s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:disabled{cursor:default;filter:grayscale(.6) brightness(.8);opacity:.55}
.nav{display:flex;align-items:center;gap:18px;margin:20px 0 6px}
.nav.center{justify-content:center}
.skip{color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline dotted;opacity:.7}
.skip:hover{color:var(--gold)}

/* ---------- ЭКСПОНАТ 1: пэд, влетающий в гнездо ---------- */
.pad-piece{position:absolute;left:70.6%;top:72.5%;width:25.4%;height:14.1%;
  transform:translate(-50%,-50%) rotate(-6deg);z-index:5;
  background:#3a322a;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.pad-inner{position:absolute;left:8%;top:8%;width:84%;height:84%;background:#111113;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  box-shadow:inset 0 3px 6px rgba(255,255,255,.06)}
.pad-piece.drop{animation:dropIn .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes dropIn{
  0%{opacity:0;transform:translate(-50%,-180%) rotate(-40deg) scale(1.3)}
  70%{opacity:1;transform:translate(-50%,-42%) rotate(-2deg) scale(1)}
  85%{transform:translate(-50%,-54%) rotate(-7deg) scale(1)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}

/* ---------- ЭКСПОНАТ 2: скретч ---------- */
.scratch-wrap{position:relative;display:block;width:100%;max-width:400px;margin:0 auto;
  border:6px solid #0d0b08;border-radius:6px;box-shadow:var(--shadow),0 0 0 1px var(--wood);overflow:hidden}
#scratch{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
#scratch:active{cursor:grabbing}
.scratch-wrap.done #scratch{transition:opacity .5s;opacity:0;pointer-events:none}
.stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);
  z-index:6;color:#b8362a;border:4px double #b8362a;border-radius:8px;padding:8px 14px;
  font-weight:bold;text-transform:uppercase;letter-spacing:.08em;font-size:20px;text-align:center;
  background:rgba(245,240,230,.35);opacity:0;animation:stampIn .4s .1s forwards}
@keyframes stampIn{from{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(1.8)}
  to{opacity:.92;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}

/* ---------- ЭКСПОНАТ 3: найди воробья ---------- */
.find-layer{position:absolute;inset:0;cursor:crosshair;z-index:4}
.ring{position:absolute;width:22%;padding-bottom:22%;transform:translate(-50%,-50%);
  border:3px solid var(--gold);border-radius:50%;z-index:5;box-shadow:0 0 20px rgba(227,178,75,.6);
  animation:ringPulse 1.2s ease-out}
@keyframes ringPulse{0%{opacity:0;width:6%;padding-bottom:6%}40%{opacity:1}100%{opacity:.9;width:22%;padding-bottom:22%}}
.magnifier{position:absolute;width:34%;padding-bottom:34%;transform:translate(-50%,-50%);
  border-radius:50%;border:4px solid var(--parch);z-index:6;box-shadow:var(--shadow);
  background-repeat:no-repeat;animation:fade .4s ease}
.miss{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid var(--red);color:var(--red);z-index:5;pointer-events:none;animation:missFade 1s forwards}
@keyframes missFade{0%{opacity:.9;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}

/* ---------- ЭКСПОНАТ 4: маркеры сосисок ---------- */
.markers{position:absolute;inset:0;z-index:5;pointer-events:none}
.marker{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%) scale(0);
  border-radius:50%;background:var(--gold);color:#1a140c;font-weight:bold;font-size:13px;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.5);border:2px solid #fff5df}
.marker.show{animation:pop .35s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes pop{to{transform:translate(-50%,-50%) scale(1)}}

/* ---------- ФИНАЛ ---------- */
.tag{position:absolute;z-index:5;background:rgba(20,17,13,.82);color:var(--gold);
  border:1px solid var(--gold-dim);border-radius:4px;padding:4px 8px;font-size:12px;letter-spacing:.04em}
.tag-l{left:6%;top:52%}
.tag-r{right:6%;top:40%}
.equip{color:var(--muted);font-size:14px;text-align:center;max-width:52ch;margin:14px auto}
.diag{max-width:420px;margin:16px auto 4px;text-align:center}
.diag-label{color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.diag-bar{height:18px;border:1px solid var(--wood);border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden}
.diag-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));
  transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.diag-val{margin-top:6px;color:var(--gold);font-size:15px;letter-spacing:.05em}

/* ---------- ЭПИЛОГ ---------- */
#screen-epilogue.active{display:block}
.epilogue{min-height:100vh;margin:0 -18px;background-size:cover;background-position:center;display:grid;place-items:center}
.epilogue-veil{background:linear-gradient(rgba(20,15,10,.28),rgba(20,15,10,.60));
  min-height:100vh;width:100%;display:grid;place-content:center;text-align:center;padding:30px}
.epi-title{font-size:clamp(30px,9vw,52px);margin:0 0 .3em;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.epi-text{color:#f0e6d2;max-width:40ch;margin:0 auto 20px;font-size:17px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.epi-sign{color:var(--gold);margin:0 0 26px;font-size:16px;text-shadow:0 1px 8px rgba(0,0,0,.8)}

#footer{position:relative;z-index:1;text-align:center;color:var(--muted);opacity:.5;
  font-size:12px;padding:18px;border-top:1px solid rgba(255,255,255,.05);margin-top:10px}
body.intro-mode #footer,body.epi-mode #footer{display:none}

@media(max-width:420px){
  .options{grid-template-columns:1fr 1fr 1fr;gap:7px}
  .opt{padding:11px 5px;font-size:13px}
  .opt .opt-ic{font-size:22px}
}