/* Дело о пропавшем грешнике — интерактивное расследование VIZ.ARTUM.
   Своя атмосфера (тёмная зелень и золото доски Босха), но общая с сайтом
   типографика: Cormorant Garamond для заголовков, Montserrat для текста.
   Шрифты подключаются файлом /fonts/fonts.css, к Google Fonts не ходим. */

:root{
	--ink:#0c0e0b;
	--paper:#d9c9a1;
	--cream:#eee5cf;
	--fog:#8d887a;
	--gold:#c3a45e;
	--rust:#87382c;
	--line:rgba(223,205,159,.22);
	--shadow:0 24px 80px rgba(0,0,0,.72);
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;min-height:100vh;background:var(--ink);color:var(--cream);font-family:Montserrat,sans-serif}
button,a{font:inherit}
img{max-width:100%}

/* ── Общая шапка сайта ─────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:15;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(14px,4vw,64px);background:#0c0e0bdd;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.brand{display:inline-flex;align-items:center;gap:.4em;color:var(--cream);text-decoration:none;font-family:"Cormorant Garamond",serif;font-size:24px;letter-spacing:.14em;transition:color .25s}
.brand:hover{color:var(--gold)}
.brand .dot{color:var(--rust)}
.brand .back-arrow{font-size:.72em;color:var(--fog);transition:transform .25s}
.brand:hover .back-arrow{transform:translateX(-3px);color:var(--gold)}
.case-meta{font-size:11px;letter-spacing:.18em;color:var(--fog)}
.case-meta span{color:var(--gold)}
.progress{position:relative;width:min(240px,32vw);height:3px;background:#42423980}
.progress[hidden]{display:none}
.progress>span{display:block;height:100%;width:0;background:var(--gold);transition:width .4s}
.progress small{position:absolute;right:0;top:10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog);white-space:nowrap}

/* ── Общие элементы ────────────────────────────────────────────────── */
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600;color:var(--gold);margin:0 0 20px}
h1{font-family:"Cormorant Garamond",serif;font-size:clamp(2.9rem,6vw,6rem);line-height:.92;font-weight:600;letter-spacing:-.02em;margin:0;max-width:780px}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--gold);background:var(--gold);color:#16160f;padding:15px 24px;min-height:52px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;cursor:pointer;transition:.2s;width:max-content}
.primary:hover,.primary:focus-visible{background:var(--cream);transform:translateY(-2px)}
.primary:disabled{filter:grayscale(1);opacity:.36;cursor:not-allowed;transform:none}
.secondary{background:transparent;color:var(--cream);border-color:#ffffff55}
.secondary:hover{border-color:var(--gold);color:var(--gold)}
.text-button{background:none;border:0;color:#aaa18b;cursor:pointer;padding:14px 0;text-decoration:underline;text-underline-offset:4px}
.text-button:hover{color:var(--gold)}

/* ── Экран 1: заставка ─────────────────────────────────────────────── */
.case-intro{min-height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(340px,44%) 1fr;background:#0c0e0b;overflow:hidden}
.intro-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,6vw,96px);background:linear-gradient(90deg,#0c0e0b 84%,transparent)}
.lead{max-width:560px;font-family:"Cormorant Garamond",serif;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.45;color:var(--paper);margin:28px 0 22px}
.briefing{display:flex;flex-wrap:wrap;gap:20px;color:var(--fog);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:4px 0 32px}
.briefing span{display:flex;gap:8px;align-items:center}
.briefing svg{color:var(--gold)}
.credit{font-size:12px;color:#6e6b5e;max-width:360px;margin-top:26px;line-height:1.55}
.intro-art{position:relative;min-height:100%}
.intro-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0c0e0b 0,transparent 35%),linear-gradient(0deg,#090a08aa,transparent 40%)}
.intro-art img{width:100%;height:100%;object-fit:cover;object-position:58% center;filter:saturate(.78) contrast(1.08)}
.resume-note{margin-top:18px;font-size:12px;color:var(--fog)}
.resume-note button{margin-left:8px}

/* ── Экран 2: доска с уликами ──────────────────────────────────────── */
.workspace{min-height:calc(100vh - 68px);background:radial-gradient(circle at 35% 20%,#263228,#0d100c 64%)}
.desk{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:calc(100vh - 68px)}
.painting-zone{min-width:0;align-self:center}
.mobile-tip{display:none}
.painting-wrap{position:relative;margin:clamp(14px,3vw,48px);box-shadow:var(--shadow);border:8px solid #332b1c;outline:1px solid #715d33;overflow:hidden;cursor:crosshair}
.painting{display:block;width:100%;height:auto;filter:saturate(.82);user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;translate:-50% -50%;border:0;background:transparent;cursor:crosshair;padding:0}
.hotspot span{display:none;position:absolute;left:50%;top:50%;translate:-50% -50%;width:30px;height:30px;border-radius:50%;place-items:center;border:1px solid #ead28d;background:#11150de8;color:#e8d397;font-size:13px;font-weight:600;box-shadow:0 0 0 7px #c6a45828,0 0 25px #000}
.hotspot.found span{display:grid;animation:found-in .35s ease-out}
.hotspot:focus-visible{outline:2px dashed #e6c96e;outline-offset:-3px}
@keyframes found-in{from{scale:.45;opacity:0}to{scale:1;opacity:1}}
.instruction{position:absolute;left:50%;bottom:18px;translate:-50%;background:#080a07d9;border:1px solid #a3895270;padding:10px 16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.evidence{padding:44px 32px;border-left:1px solid var(--line);background:linear-gradient(180deg,#151914f2,#0e110df2)}
.evidence h2{font-family:"Cormorant Garamond",serif;font-size:2.1rem;font-weight:600;line-height:1.05;margin:0 0 16px}
.evidence>p:not(.eyebrow){color:#aaa18c;line-height:1.65;font-size:14px}
.evidence blockquote{border-left:2px solid var(--gold);margin:24px 0;padding:7px 0 7px 18px;color:var(--paper);font-family:"Cormorant Garamond",serif;font-size:1.15rem;font-style:italic;line-height:1.5}
.clue-list{border-top:1px solid var(--line);margin:26px 0 22px;padding-top:14px;display:grid}
.clue-list button{display:flex;gap:12px;padding:10px 0;background:none;border:0;color:#d4c9af;text-align:left;font-size:13px;cursor:pointer}
.clue-list button:disabled{color:#595a51;cursor:default}
.clue-list span{color:var(--gold)}
.conclusion{width:100%}
.hint{display:block;margin-top:10px;text-align:center;color:#6f7066;font-size:11px;text-transform:uppercase;letter-spacing:.08em}

/* ── Экраны 3 и 4: версия и результат ──────────────────────────────── */
.verdict-screen,.result-screen{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:clamp(20px,5vw,64px);background:radial-gradient(circle at 50% 0,#303b2f,#0b0e0a 70%)}
.verdict-card,.result-card{width:min(950px,100%);border:1px solid var(--line);background:#121610ee;padding:clamp(24px,5vw,64px);box-shadow:var(--shadow)}
.verdict-card h1,.result-card h1{font-size:clamp(2.4rem,5.5vw,4.4rem)}
.verdict-lead,.result-summary{font-family:"Cormorant Garamond",serif;font-size:1.3rem;line-height:1.55;color:var(--paper);max-width:720px;margin:22px 0 30px}
.hypotheses{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hypotheses button{display:flex;gap:16px;min-height:160px;padding:20px;background:#1a1e18;border:1px solid var(--line);color:#d8cbae;text-align:left;cursor:pointer;transition:.2s}
.hypotheses button:hover,.hypotheses button.selected{border-color:var(--gold);background:#25271d}
.hypotheses b{color:var(--gold);font-size:12px;font-weight:600}
.hypotheses strong,.hypotheses small{display:block}
.hypotheses strong{font-family:"Cormorant Garamond",serif;font-size:1.35rem;margin-bottom:10px;color:var(--cream)}
.hypotheses small{color:#918a7b;line-height:1.5;font-size:12px}
.section-label{margin:30px 0 12px;color:var(--gold);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.evidence-picks{display:flex;flex-wrap:wrap;gap:9px}
.evidence-picks button{border:1px solid var(--line);background:#171a15;color:#9f9889;padding:10px 13px;font-size:13px;cursor:pointer}
.evidence-picks button.selected{border-color:#ad9355;color:#e1d3b1;background:#2a2a1c}
.verdict-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:34px}
.result-screen.solved{background:radial-gradient(circle at 50% 0,#3c4c3a,#0a0d09 72%)}
.result-card{width:min(820px,100%)}
.chosen-version{color:#9c927e;border-left:2px solid #77653c;padding-left:15px;font-style:italic;font-size:14px}
.reveal{margin:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}
.reveal span{color:var(--gold);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.reveal p{font-family:"Cormorant Garamond",serif;font-size:1.25rem;line-height:1.55;color:var(--paper)}
.cultural-note{color:#77766c;font-size:12px;line-height:1.6;margin-bottom:28px;max-width:680px}
.result-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ── Всплывающая подсказка ─────────────────────────────────────────── */
.toast{position:fixed;z-index:30;bottom:28px;left:50%;transform:translate(-50%,20px);background:var(--cream);color:#171611;padding:12px 20px;font-size:13px;opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── Узкие экраны ──────────────────────────────────────────────────── */
@media(max-width:900px){
	.case-intro{grid-template-columns:1fr;position:relative}
	.intro-art{position:absolute;inset:0;opacity:.45;min-height:0}
	.intro-copy{min-height:calc(100vh - 68px);background:linear-gradient(90deg,#0c0e0be8,#0c0e0b88);padding:32px 22px}
	.desk{grid-template-columns:1fr;overflow:hidden}
	.painting-zone{padding-top:10px}
	.mobile-tip{display:block;margin:0;padding:10px 18px 4px;color:#a89b80;text-align:center;font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.09em}
	.painting-scroller{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#8f7842 #171a15;-webkit-overflow-scrolling:touch}
	.painting-wrap{width:760px;max-width:none;margin:12px 16px 20px}
	.evidence{border-left:0;border-top:1px solid var(--line)}
	.instruction{display:none}
}
@media(max-width:760px){
	.hypotheses{grid-template-columns:1fr}
	.hypotheses button{min-height:0}
	.verdict-actions{align-items:stretch;flex-direction:column-reverse}
	.verdict-actions .primary,.verdict-actions .text-button{width:100%}
	.evidence-picks{display:grid;grid-template-columns:1fr 1fr}
	.result-actions .primary,.result-actions .secondary{width:100%}
}
@media(max-width:560px){
	.topbar{height:62px;padding:0 14px}
	.case-meta{display:none}
	.progress{width:120px}
	.workspace,.case-intro,.verdict-screen,.result-screen{min-height:calc(100vh - 62px)}
	.desk{min-height:calc(100vh - 62px)}
	.painting-wrap{width:700px;margin-left:12px;margin-right:12px}
	.hotspot span{width:34px;height:34px}
	.evidence{padding:30px 20px}
	.briefing{gap:14px}
}