:root{
  --bg:#0b0a09; --bg2:#100f0d; --panel:rgba(10,9,8,.62);
  --line:rgba(214,200,175,.22);
  --txt:#e8dfcc; --txt-dim:#c4b7a1; --txt-faint:#8d8171;
  --red:#f04234; --red-deep:#a3281e;
  --ok:#4ea86e; --no:#e0483a;
  --cond:'Oswald','Arial Narrow',sans-serif;
  --slab:'Bebas Neue',Impact,sans-serif;
  --type:'Special Elite','Courier New',monospace;
  --body:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--txt); font-family:var(--cond); font-weight:300;
  min-height:100vh; overflow-x:hidden}

/* ═══════ шапка ═══════ */
.wrap{position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:0 26px 60px}
.topbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 0 14px}
.brand{display:flex; align-items:center; gap:11px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--txt-faint); background:none; border:none; padding:6px 8px;
  margin-left:-8px; cursor:pointer; transition:.15s; text-align:left; font-family:var(--cond); font-weight:300}
.brand:hover{color:var(--red)}
.brand:hover .logo{transform:rotate(-9deg) scale(1.06); opacity:1}
.logo{width:30px; height:auto; flex:0 0 auto; opacity:.7; display:block; filter:brightness(0) invert(1);
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .2s}
.spacer{flex:1}
.counter{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-faint)}
.score-chip{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--line);
  color:var(--txt-dim); padding:6px 13px}
.score-chip b{font-family:var(--slab); font-weight:400; font-size:16px; color:var(--red); letter-spacing:.02em}
.bar{height:2px; background:rgba(214,200,175,.14); overflow:hidden; margin:0 0 22px}
.bar i{display:block; height:100%; width:0; background:var(--red); transition:width .45s cubic-bezier(.4,0,.2,1)}

.slide{display:none; animation:fade .4s ease both}
.slide.on{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ═══════════════ ТИТУЛЬНАЯ — КИНОЗАСТАВКА ═══════════════ */
#slide-intro.on{position:fixed; inset:0; z-index:60; display:block; background:var(--bg); overflow:hidden}
body.at-intro{overflow:hidden}
body.at-intro .topbar, body.at-intro .bar{display:none}
body.at-intro .wrap{padding:0; max-width:none}

.cine{position:absolute; inset:0; cursor:default}
.layer{position:absolute; inset:-4%; will-change:transform}
.shots{overflow:hidden}
.shots .shot{position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 2.6s ease, transform 9s linear; transform:scale(1.06);
  filter:grayscale(.85) contrast(1.06) brightness(.5)}
.shots .shot.live{opacity:1; transform:scale(1.14)}
.blurwrap{filter:blur(16px) saturate(.4); opacity:.5}
.blurwrap .shot{filter:grayscale(.85) contrast(1) brightness(.66)}

.vig{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(11,10,9,.16) 0%, rgba(11,10,9,.66) 58%, var(--bg) 94%)}
.scrim{position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(9,8,7,.88) 0%, rgba(9,8,7,.6) 46%, transparent 78%)}
.bars{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(var(--bg) 0 9.5%, transparent 9.5% 90.5%, var(--bg) 90.5% 100%)}
.grain{position:absolute; inset:-60px; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  animation:grain 1.1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-24px,12px)}
  50%{transform:translate(16px,-18px)}75%{transform:translate(-12px,-8px)}100%{transform:translate(0,0)}}
.scan{position:absolute; inset:0; pointer-events:none; opacity:.03;
  background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}
.glow{position:absolute; left:50%; top:52%; width:120vmin; height:120vmin; transform:translate(-50%,-50%);
  pointer-events:none; background:radial-gradient(circle, rgba(240,66,52,.1), transparent 62%)}

/* 成龍 — иероглифы на фоне, как на обложке книги */
.hanzi{position:absolute; z-index:5; pointer-events:none; user-select:none;
  left:clamp(10px,4vw,72px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; line-height:.9;
  font-family:'Noto Serif SC','Songti SC','Hiragino Mincho ProN',serif; font-weight:900;
  font-size:clamp(110px,26vh,270px); color:#f0e7d6; opacity:.11;
  text-shadow:0 0 80px rgba(240,66,52,.45), 0 6px 40px rgba(0,0,0,.85)}

.cine-in{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:8vh 6vw; z-index:6; text-shadow:0 2px 18px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.8)}
.cine-in > div{max-width:860px; width:100%}
.credits{font-size:clamp(10px,1.05vw,12px); font-weight:400; letter-spacing:.42em; text-transform:uppercase;
  color:var(--txt-dim); margin-bottom:clamp(18px,3.2vh,34px); display:flex; align-items:center;
  justify-content:center; gap:13px}
.credits img{width:26px; opacity:.85; filter:brightness(0) invert(1)}
.ctitle{margin:0; line-height:.88; font-family:var(--slab); font-weight:400; letter-spacing:.01em}
.ctitle .a{display:block; font-size:clamp(16px,2.1vw,28px); color:#f0e7d6; letter-spacing:.26em}
.ctitle .b{display:block; font-size:clamp(58px,10.5vw,158px); color:var(--red); margin:.06em 0 .03em;
  text-shadow:0 3px 20px rgba(0,0,0,.85), 0 0 14px rgba(240,66,52,.5), 0 0 70px rgba(240,66,52,.3)}
.ctitle .c{display:block; font-size:clamp(13px,1.55vw,19px); color:var(--txt-dim); letter-spacing:.38em}
.ctagline{font-size:clamp(15px,1.65vw,19px); line-height:1.6; color:#ded3bf;
  margin:clamp(20px,3.4vh,34px) auto clamp(18px,3vh,28px); max-width:490px}
.ctagline b{color:#fff8e9; font-weight:500}
.cchips{display:flex; gap:9px; justify-content:center; flex-wrap:wrap}
.cchip{font-size:10.5px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(12,10,9,.55); border:1px solid rgba(214,200,175,.4); color:var(--txt-dim);
  padding:8px 16px; cursor:pointer; transition:.16s; line-height:1.4; text-align:center;
  backdrop-filter:blur(3px); font-family:var(--cond)}
.cchip b{display:block; font-family:var(--slab); font-weight:400; font-size:23px; color:#f4ecdb}
.cchip:hover{border-color:rgba(240,66,52,.75); color:#e2d7c2; background:rgba(12,10,9,.72)}
.cchip.sel{border-color:var(--red); background:rgba(240,66,52,.16); color:#f4ecdb}
.cchip.sel b{color:#ff5c4d}
.cstart{margin-top:clamp(20px,3.4vh,32px); font-weight:500; font-size:12.5px; letter-spacing:.24em;
  text-transform:uppercase; background:var(--red); color:#fff; border:none; padding:14px 34px;
  cursor:pointer; transition:.18s; text-shadow:none; box-shadow:0 4px 22px rgba(0,0,0,.5); font-family:var(--cond)}
.cstart:hover{box-shadow:0 0 34px rgba(240,66,52,.5), 0 4px 22px rgba(0,0,0,.5); transform:translateY(-1px)}
.cstart:active{transform:translateY(1px)}
/* негромкие копирайты на титульной */
.colophon{margin-top:clamp(26px,5vh,52px); max-width:660px; margin-left:auto; margin-right:auto;
  font-size:9px; line-height:1.75; letter-spacing:.06em; color:var(--txt-faint);
  opacity:.4; transition:opacity .3s ease; text-shadow:0 1px 6px rgba(0,0,0,.9)}
.colophon:hover{opacity:.85}
.colophon p{margin:0 0 6px}
.colophon p:last-child{margin:0; opacity:.75}
.colophon a{color:var(--txt-dim); text-decoration:none; border-bottom:1px solid rgba(196,183,161,.35);
  transition:.15s; padding-bottom:1px}
.colophon a:hover{color:var(--red); border-color:var(--red)}

/* ═══ выезд титульной: проектор запускается, шторки открываются ═══ */
.cine.roll::before, .cine.roll::after{content:''; position:absolute; left:0; right:0; height:50%;
  background:var(--bg); z-index:8; pointer-events:none}
.cine.roll::before{top:0;    animation:curtain 1.25s cubic-bezier(.16,.84,.24,1) both .1s}
.cine.roll::after {bottom:0; animation:curtain 1.25s cubic-bezier(.16,.84,.24,1) both .1s}
@keyframes curtain{from{height:50%} to{height:9.5%}}

/* лампа проектора «схватывается» не с первого раза */
.cine.roll .shots{animation:striker 2.4s ease both}
@keyframes striker{0%{opacity:0} 10%{opacity:.5} 16%{opacity:.12} 26%{opacity:.75}
  34%{opacity:.4} 48%{opacity:.92} 100%{opacity:1}}
.cine.roll .hanzi{animation:hanziIn 2.6s cubic-bezier(.2,.7,.2,1) both .5s}
@keyframes hanziIn{from{opacity:0; transform:translateY(-50%) translateX(-26px)}
  to{opacity:.11; transform:translateY(-50%)}}

.cine.roll .credits {animation:riseIn .85s ease both .55s}
.cine.roll .ctitle .a{animation:riseIn .85s ease both .9s}
.cine.roll .ctitle .b{animation:titleIn 1.1s cubic-bezier(.16,.84,.24,1) both 1.15s}
.cine.roll .ctagline{animation:riseIn .8s ease both 1.75s}
.cine.roll .cchips  {animation:riseIn .8s ease both 1.95s}
.cine.roll .cstart  {animation:riseIn .8s ease both 2.15s}
.cine.roll .colophon{animation:colIn .9s ease both 2.45s}
@keyframes riseIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes colIn {from{opacity:0} to{opacity:.4}}
@keyframes titleIn{from{opacity:0; transform:scale(1.16); filter:blur(16px)}
  55%{opacity:1} to{opacity:1; transform:none; filter:blur(0)}}

/* ═══════════════ ВОПРОС — IMMERSIVE ═══════════════ */
.qstage{position:relative; min-height:clamp(460px,66vh,660px); display:grid; align-items:end;
  overflow:hidden; border:1px solid rgba(214,200,175,.1)}
.qbg{position:absolute; inset:0; overflow:hidden}
.qbg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) brightness(.88)}
#qimg{animation:slowzoom 22s ease-out both}
@keyframes slowzoom{from{transform:scale(1.02)}to{transform:scale(1.09)}}
/* оригинальный кадр проявляется поверх после ответа — целиком, без обрезки */
.qbg img.revbg{opacity:0; transform:scale(1.02); object-fit:contain; object-position:center;
  background:#0b0a09; transition:opacity .85s ease, transform 6s ease-out}
.qstage.answered .revbg{opacity:1; transform:scale(1)}
.qstage.answered #qimg{opacity:0; transition:opacity .85s ease}
/* при переходе к следующему вопросу переключаем кадры мгновенно, без затухания */
.qstage.noanim .revbg,
.qstage.noanim #qimg,
.qstage.noanim .qtop,
.qstage.noanim .askblock,
.qstage.noanim .opts,
.qstage.noanim .verdict,
.qstage.noanim .locname,
.qstage.noanim .ansrow,
.qstage.noanim .qbg::after{transition:none !important}
/* затемнение под текстом: слабое, пока курсор вне кадра */
.qbg::after{content:''; position:absolute; inset:0; transition:opacity .35s ease; opacity:.42; background:
  linear-gradient(180deg, rgba(11,10,9,.86) 0%, rgba(11,10,9,.2) 26%, rgba(11,10,9,.72) 60%, rgba(11,10,9,.97) 100%)}
.qstage:hover .qbg::after{opacity:1}
.qstage.answered .qbg::after{background:
  linear-gradient(180deg, rgba(11,10,9,.9) 0%, rgba(11,10,9,.45) 22%, rgba(11,10,9,.82) 52%, rgba(11,10,9,.98) 100%)}

/* всё, что лежит поверх фотографии, проявляется по наведению */
.qtop, .askblock{opacity:.34; transition:opacity .35s ease}
.opts, .reprow{opacity:0; transition:opacity .35s ease}
/* после ответа гаснет всё, кроме кнопки «дальше» */
.verdict, .locname, .ansrow{opacity:0; transition:opacity .35s ease}
.qstage.answered .qtop{opacity:0}
.navrow{opacity:1}

.qstage:hover .qtop,
.qstage:hover .askblock,
.qstage:hover .opts,
.qstage:hover .verdict,
.qstage:hover .locname,
.qstage:hover .ansrow,
.qstage:focus-within .qtop,
.qstage:focus-within .askblock,
.qstage:focus-within .opts,
.qstage:focus-within .verdict,
.qstage:focus-within .locname,
.qstage:focus-within .ansrow,
.qstage:hover .reprow,
.qstage:focus-within .reprow{opacity:1}
.qstage:focus-within .qbg::after{opacity:1}

@media (hover:none){
  .qtop, .askblock, .opts, .reprow, .verdict, .locname, .ansrow{opacity:1}
  .qbg::after{opacity:1}
}
.qgrain{position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode:overlay; z-index:2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>")}

.qtop{position:absolute; top:0; left:0; right:0; z-index:4; display:flex; align-items:center; gap:14px;
  padding:20px 30px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim);
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
.qtop .num{font-family:var(--slab); font-weight:400; font-size:28px; color:var(--red); line-height:1;
  letter-spacing:.02em; text-shadow:0 2px 14px rgba(0,0,0,.9)}
.qtop .sp{flex:1}
.lvl{border:1px solid currentColor; padding:3px 9px; font-size:9.5px; letter-spacing:.14em; white-space:nowrap}
.lvl.l1{color:#6fbe8c} .lvl.l2{color:#d8a04a} .lvl.l3{color:var(--no)}

.qfg{position:relative; z-index:3; padding:34px 40px 40px; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:36px; align-items:end}
.qask{font-family:var(--slab); font-weight:400; letter-spacing:.02em; line-height:1;
  font-size:clamp(28px,3.2vw,48px); color:#fff; margin:0 0 14px; text-shadow:0 3px 22px rgba(0,0,0,.92)}

/* ── подсказки ── */
.tips{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.tip{display:none; align-items:baseline; gap:10px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-dim); text-shadow:0 2px 12px rgba(0,0,0,.92);
  border-left:2px solid var(--red); padding-left:11px}
.tip.on{display:flex; animation:fade .4s ease both}
.tip em{font-style:normal; font-size:9.5px; letter-spacing:.2em; color:var(--txt-faint)}
.tip b{font-family:var(--slab); font-weight:400; font-size:19px; letter-spacing:.04em; color:#f0e7d6}
.tipbtn{font-family:var(--cond); font-weight:400; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(12,10,9,.55); border:1px solid rgba(214,200,175,.35); color:var(--txt-dim);
  padding:9px 16px; cursor:pointer; transition:.16s; backdrop-filter:blur(4px); align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px}
.tipbtn .dots{display:inline-flex; gap:4px}
.tipbtn .dots i{width:5px; height:5px; border:1px solid currentColor; border-radius:50%; display:block}
.tipbtn .dots i.used{background:var(--red); border-color:var(--red)}
.tipbtn .dots i.off{opacity:.25; border-style:dashed}
.tipbtn:hover:not(:disabled){border-color:var(--red); color:#e8dfcc}
.tipbtn:disabled{opacity:.4; cursor:default}

/* вспышка кадра из фильма по третьей подсказке */
.flash{position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:rgba(6,5,5,.92);
  cursor:pointer; opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility 0s .7s}
.flash.on{opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s}
.flash img{max-width:min(74%,760px); max-height:76%; object-fit:contain;
  border:1px solid rgba(214,200,175,.25); box-shadow:0 24px 70px rgba(0,0,0,.8);
  transform:scale(.985); filter:blur(2px); transition:transform .7s ease, filter .7s ease}
.flash.on img{transform:scale(1); filter:blur(0); transition:transform .35s ease, filter .35s ease}

.opts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.opt{display:flex; gap:14px; align-items:center; width:100%; text-align:left; cursor:pointer;
  font-family:var(--cond); font-weight:300; font-size:clamp(15px,1.55vw,17.5px); letter-spacing:.01em;
  color:#eee5d3; background:var(--panel); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(7px); padding:14px 17px; transition:.15s}
.opt .k{flex:0 0 auto; font-family:var(--slab); font-weight:400; font-size:15px; width:26px; height:26px;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); opacity:.8}
.opt:hover:not(:disabled){border-color:var(--red); background:rgba(240,66,52,.22)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--ok); background:rgba(78,168,110,.2); color:#d3f0df}
.opt.right .k{border-color:var(--ok); background:var(--ok); color:#0b0a09; opacity:1}
.opt.wrong{border-color:var(--no); background:rgba(224,72,58,.18); color:#f5cfca; text-decoration:line-through}
.opt.wrong .k{border-color:var(--no); background:var(--no); color:#fff; opacity:1}
.opt.dim{opacity:.35}

/* ═══════ два состояния левой колонки ═══════ */
.askblock{display:block}
.ansblock{display:none}
.qstage.answered .askblock{display:none}
.qstage.answered .ansblock{display:block; animation:fade .45s ease both}

.verdict{display:flex; align-items:center; gap:12px; font-size:11.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px; flex-wrap:wrap;
  text-shadow:0 2px 12px rgba(0,0,0,.92)}
.verdict.ok{color:var(--ok)} .verdict.no{color:var(--no)}
.stamp{border:2px solid currentColor; padding:4px 11px; font-family:var(--type); font-size:10.5px;
  letter-spacing:.16em; transform:rotate(-5deg)}
.locname{font-family:var(--slab); font-weight:400; font-size:clamp(20px,2.1vw,26px); color:var(--red);
  margin:0 0 14px; letter-spacing:.02em; line-height:1.1; text-shadow:0 2px 16px rgba(0,0,0,.9)}
.ansrow{display:flex; gap:16px; align-items:flex-start}
.thumb{flex:0 0 clamp(110px,13vw,168px); background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; text-align:center; transition:.16s}
.thumb img{display:block; width:100%; height:auto; border:1px solid rgba(214,200,175,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.6); transition:.16s; background:#0b0a09}
.thumb:hover img{border-color:var(--red); box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 22px rgba(240,66,52,.35)}
.thumb span{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px;
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-faint)}
.thumb:hover span{color:var(--red)}
.thumb.nofilm{cursor:default}
.thumb.nofilm:hover img{border-color:rgba(214,200,175,.25); box-shadow:0 10px 30px rgba(0,0,0,.6)}
.thumb.nofilm:hover span{color:var(--txt-faint)}
.thumb.nofilm svg{display:none}
.thumb svg{width:10px; height:10px; flex:0 0 auto; opacity:.8}
.why{font-family:var(--body); font-size:clamp(15px,1.5vw,17px); line-height:1.5; color:#ded3bf; margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
.why b{color:#fff8e9} .why i{color:var(--txt-dim)}
.navrow{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap}
.next{font-family:var(--cond); font-weight:500; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  background:var(--red); color:#fff; border:none; padding:13px 28px; cursor:pointer; transition:.16s}
.next:hover{box-shadow:0 0 26px rgba(240,66,52,.45)}
.hint{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-faint)}

/* ═══════ итоги ═══════ */
.result{text-align:center; padding:clamp(40px,9vh,90px) 20px; position:relative; overflow:hidden;
  border:1px solid rgba(214,200,175,.1); background:var(--bg2)}
.result::before{content:''; position:absolute; left:50%; top:34%; width:90vmin; height:90vmin;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(240,66,52,.12), transparent 62%)}
.result > *{position:relative}
.kicker{font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--txt-faint)}
.bigscore{font-family:var(--slab); font-weight:400; font-size:clamp(64px,13vw,150px); line-height:1;
  color:#fff; margin:14px 0 0; letter-spacing:.02em}
.bigscore span{color:var(--red)}
.bigscore .sl{color:var(--txt-faint); font-size:.44em}
.rank{font-family:var(--slab); font-weight:400; font-size:clamp(22px,3.4vw,40px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin:12px 0 10px}
.rankdesc{font-family:var(--body); font-size:19px; line-height:1.55; color:#cfc4b0; max-width:540px;
  margin:0 auto 30px}
.endtips{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-faint); margin:-16px 0 26px}
.endtips b{font-family:var(--slab); font-weight:400; font-size:17px; color:var(--red); letter-spacing:.04em}
.review{text-align:left; max-width:840px; margin:36px auto 0; border-top:1px solid rgba(214,200,175,.14);
  padding-top:22px}
.review h3{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-faint); margin:0 0 14px}
.miss{display:flex; gap:14px; padding:11px 0; border-bottom:1px solid rgba(214,200,175,.09);
  font-family:var(--body); font-size:17.5px; line-height:1.45; color:#cfc4b0}
.miss .mn{font-family:var(--slab); font-size:15px; color:var(--red); flex:0 0 30px; padding-top:2px}
.miss b{color:#fff8e9; font-weight:600}
.allright{font-family:var(--body); font-size:20px; color:var(--ok); font-style:italic}

/* ═══════ книга в конце ═══════ */
.book{max-width:840px; margin:44px auto 0; padding-top:30px; text-align:left;
  border-top:1px solid rgba(214,200,175,.14);
  display:flex; gap:clamp(20px,3vw,38px); align-items:center}
.bookcov{flex:0 0 clamp(148px,17vw,200px); display:block; transition:transform .35s cubic-bezier(.4,0,.2,1)}
.bookcov img{width:100%; height:auto; display:block; border:1px solid rgba(214,200,175,.16);
  box-shadow:0 20px 46px rgba(0,0,0,.62)}
.bookcov:hover{transform:translateY(-5px) rotate(-1.2deg)}
.bookin{flex:1 1 auto; min-width:0}
.book .kicker{text-align:left}
.booktitle{font-family:var(--slab); font-weight:400; font-size:clamp(27px,3.6vw,42px); line-height:1.02;
  letter-spacing:.04em; color:#f4ecdb; margin:11px 0 5px}
.booktitle b{display:block; font-weight:400; color:var(--red)}
.booksub{font-family:var(--cond); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-faint); margin:0 0 15px}
.booktext{font-family:var(--body); font-size:18px; line-height:1.5; color:#cfc4b0; margin:0 0 18px}
.bookfacts{display:flex; gap:26px; flex-wrap:wrap; margin:0 0 18px; padding:0; list-style:none}
.bookfacts li{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-faint)}
.bookfacts b{display:block; font-family:var(--slab); font-weight:400; font-size:23px; color:#f4ecdb;
  letter-spacing:.03em; margin-bottom:1px}
.booknote{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-faint); margin:0}
.booknote a{color:var(--txt-dim); text-decoration:none; border-bottom:1px solid rgba(196,183,161,.35)}
.booknote a:hover{color:var(--red); border-color:var(--red)}


@media (prefers-reduced-motion:reduce){
  .grain{animation:none} .qbg img{animation:none} .shots .shot{transition:opacity .4s}
  .cine.roll::before, .cine.roll::after{display:none}
  .cine.roll *{animation:none !important}
}
/* ── планшет ── */
@media (max-width:900px){
  .wrap{padding:0 14px 40px}
  .qfg{grid-template-columns:1fr; gap:22px; padding:24px 20px 26px}
  .qstage{min-height:clamp(420px,58vh,560px)}
  .qtop{padding:16px 20px; gap:10px}
  .credits{letter-spacing:.3em; gap:9px}
  .ctitle .a{letter-spacing:.16em} .ctitle .c{letter-spacing:.24em}
  .bars{background:linear-gradient(var(--bg) 0 4%, transparent 4% 96%, var(--bg) 96% 100%)}
  /* шторки должны сойтись ровно на кромку узких полей */
  @keyframes curtain{from{height:50%} to{height:4%}}
}

/* ═══════════ ТЕЛЕФОН ═══════════
   Текст поверх фото на узком экране нечитаем, поэтому карточка
   разбирается: сверху сам кадр, под ним тёмная панель с вопросом.  */
@media (max-width:680px){
  .wrap{padding:0 12px 28px; padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right))}
  .topbar{padding:12px 0 10px; gap:10px}
  .brand{font-size:9px; letter-spacing:.14em; gap:8px; padding:4px 6px}
  .logo{width:24px}
  .counter{font-size:9px; letter-spacing:.14em; order:3; width:100%}
  .score-chip{font-size:9px; padding:5px 10px}
  .score-chip b{font-size:14px}
  .bar{margin-bottom:14px}

  /* карточка вопроса раскладывается по вертикали */
  .qstage{min-height:0; display:block; border-left:none; border-right:none; margin:0 -12px}
  .qbg{position:relative; inset:auto; width:100%; height:46vh; min-height:220px; max-height:400px}
  .qbg::after{background:linear-gradient(180deg,
    rgba(11,10,9,.8) 0%, rgba(11,10,9,.05) 26%, rgba(11,10,9,.15) 62%, rgba(11,10,9,.9) 100%); opacity:1}
  /* после ответа кадр не притемняем — текст лежит ниже, а не на фото */
  .qstage.answered .qbg::after{background:linear-gradient(180deg,
    rgba(11,10,9,.62) 0%, rgba(11,10,9,0) 22%, rgba(11,10,9,0) 74%, rgba(11,10,9,.72) 100%)}
  .qstage.answered .qbg img{filter:contrast(1.03) brightness(1)}
  .qfg{position:relative; z-index:3; display:block; padding:18px 16px 22px; background:var(--bg2)}
  /* текст больше не лежит на фото — прятать его незачем */
  .qtop, .askblock, .opts, .verdict, .locname, .ansrow,
  .qstage.answered .qtop{opacity:1 !important}
  .qtop{padding:14px 16px; font-size:9.5px; letter-spacing:.14em; gap:9px}
  .qtop .num{font-size:22px}
  .qask{font-size:clamp(21px,7vw,30px); margin-bottom:12px}
  .qask br{display:none}

  /* подсказки и варианты */
  .tips{gap:6px; margin-bottom:12px}
  .tip{font-size:10.5px; letter-spacing:.1em}
  .tip b{font-size:16px}
  .tipbtn{font-size:9.5px; padding:10px 14px; width:100%; justify-content:space-between}
  .opts{margin-top:16px; gap:7px}
  .opt{font-size:15.5px; padding:13px 13px; gap:11px}
  .opt .k{width:23px; height:23px; font-size:13px}

  /* разбор ответа */
  .verdict{font-size:10.5px; letter-spacing:.12em; gap:9px; margin-bottom:8px}
  .stamp{font-size:9.5px; padding:3px 8px}
  .locname{font-size:19px; margin-bottom:10px}
  .ansrow{flex-direction:column; gap:12px}
  .thumb{flex:none; width:150px}
  .why{font-size:15.5px; line-height:1.45}
  .navrow{margin-top:16px; gap:10px}
  .next{width:100%; text-align:center; padding:15px 20px; font-size:11px}
  .hint{display:none}

  /* заставка: даём прокрутку, иначе кнопка уезжает за экран */
  #slide-intro.on{overflow:hidden}
  .cine-in{padding:0; display:block; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .cine-in > div{max-width:none; min-height:100%; display:flex; flex-direction:column;
    justify-content:center; padding:64px 20px 40px}
  .credits{font-size:9px; letter-spacing:.24em; margin-bottom:18px}
  .credits img{width:20px}
  .ctitle .a{font-size:14px; letter-spacing:.14em}
  .ctitle .b{font-size:clamp(46px,15vw,74px)}
  .ctitle .c{font-size:11.5px; letter-spacing:.2em}
  .ctagline{font-size:14.5px; margin:18px auto 20px; max-width:340px}
  .cchips{gap:7px}
  .cchip{padding:7px 12px; font-size:9px; letter-spacing:.1em; flex:1 1 40%}
  .cchip b{font-size:19px}
  .cstart{width:100%; padding:15px 20px; font-size:11.5px; letter-spacing:.18em; margin-top:20px}
    .glow{width:150vmin; height:150vmin}
  .colophon{font-size:8.5px; line-height:1.7; margin-top:26px; opacity:.42}
  /* иероглифы уходят за левый край — работают как фактура, а не как текст */
  .hanzi{left:-18px; font-size:clamp(88px,15vh,150px); opacity:.075}
  @keyframes hanziIn{from{opacity:0; transform:translateY(-50%) translateX(-22px)}
    to{opacity:.075; transform:translateY(-50%)}}
  @keyframes colIn{from{opacity:0} to{opacity:.42}}

  /* итоги */
  .result{padding:34px 16px}
  .bigscore{font-size:clamp(56px,20vw,86px)}
  .rank{font-size:clamp(18px,6vw,26px); letter-spacing:.1em}
  .rankdesc{font-size:16.5px}
  .endtips{margin:-10px 0 20px}
  .review{margin-top:26px}
  .miss{font-size:15.5px; gap:10px}
  .result .cstart{width:100%}

  /* книга: обложка сверху, текст под ней */
  .book{display:block; margin-top:30px; padding-top:24px; text-align:center}
  .bookcov{width:168px; margin:0 auto 20px}
  .book .kicker{text-align:center; font-size:9px; letter-spacing:.28em}
  .booktitle{font-size:clamp(22px,7vw,32px)}
  .booksub{font-size:9.5px; letter-spacing:.14em}
  .booktext{font-size:16px; text-align:left}
  .bookfacts{justify-content:center; gap:18px; margin-bottom:16px}
  .bookfacts b{font-size:20px}
  .booknote{font-size:9px; line-height:1.7}

      .flash img{max-width:92%; max-height:70%}
}

/* очень узкие экраны */
@media (max-width:380px){
  .qask{font-size:20px}
  .opt{font-size:14.5px; padding:12px 11px}
  .cchip{flex:1 1 100%}
  .ctitle .b{font-size:44px}
}
/* ══════ сообщение об ошибке ══════ */
.replink{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--cond); font-size:12px; letter-spacing:.06em;
  color:var(--txt-faint); text-decoration:underline;
  text-decoration-color:rgba(214,200,175,.28); text-underline-offset:3px;
  transition:color .18s, text-decoration-color .18s;
}
.replink:hover,.replink:focus-visible{ color:var(--txt-dim); text-decoration-color:var(--red); }
.navrow .replink{ margin-left:auto; }
.reprow{ margin-top:12px; text-align:right; }

.repwrap{
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(6,5,4,.78); backdrop-filter:blur(3px);
}
.repwrap.on{ display:flex; }
.repbox{
  width:min(520px,100%); max-height:88vh; overflow:auto;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:clamp(18px,4vw,28px); box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.repbox h3{
  font-family:var(--slab); font-weight:400; font-size:26px; letter-spacing:.03em;
  color:var(--txt); margin:0 0 6px;
}
.rephint{ font-family:var(--cond); font-size:13px; color:var(--txt-faint); margin:0 0 16px; }
.repctx{
  border:1px dashed var(--line); border-radius:7px; padding:11px 13px; margin-bottom:16px;
  font-family:var(--cond); font-size:13px; line-height:1.55; color:var(--txt-dim);
}
.repctx b{ color:var(--txt); font-weight:500; }
.repctx .none{ color:var(--txt-faint); font-style:italic; }
.repctx .qid{
  font-family:var(--type); font-size:12px; color:var(--red);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; margin-left:6px;
}
.repbox label{
  display:block; font-family:var(--cond); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt-faint); margin:0 0 6px;
}
.repbox textarea,.repbox input[type=text]{
  width:100%; background:rgba(0,0,0,.32); color:var(--txt);
  border:1px solid var(--line); border-radius:7px; padding:10px 12px;
  font-family:var(--cond); font-size:15px; line-height:1.5; margin-bottom:14px;
}
.repbox textarea{ min-height:104px; resize:vertical; }
.repbox textarea:focus,.repbox input[type=text]:focus{ outline:none; border-color:var(--red); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.repfoot{ display:flex; gap:10px; align-items:center; }
.repsend{
  font-family:var(--cond); font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--red); color:#fff; border:0; border-radius:7px;
  padding:11px 20px; cursor:pointer; transition:background .18s;
}
.repsend:hover:not(:disabled){ background:var(--red-deep); }
.repsend:disabled{ opacity:.55; cursor:default; }
.repcancel{
  font-family:var(--cond); font-size:13px; color:var(--txt-faint);
  background:none; border:0; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;
}
.repcancel:hover{ color:var(--txt-dim); }
.repstatus{ font-family:var(--cond); font-size:13px; margin-left:auto; }
.repstatus.ok{ color:var(--ok); }
.repstatus.err{ color:var(--no); }

/* ── актёрский квиз: имя человека над вопросом ──
   Портрет отвечает «кто», строка под ним — «сколько вы с ним видели».
   Живёт только на actors.html, локационному квизу этот блок не встречается. */
.person{ margin-bottom:.6rem; }
.person .pname{ display:block; font-family:'Bebas Neue',sans-serif; font-size:clamp(1.9rem,4.4vw,3.1rem);
  line-height:.98; letter-spacing:.01em; color:var(--ink); }
.person .pmeta{ display:block; margin-top:.3rem; font-family:'Special Elite',monospace; font-size:.76rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
/* ── актёрский квиз: портрет не режем ──
   Локацию можно обрезать по краям: там важна геометрия улицы, а не рамка.
   С человеком так нельзя — cover срезает макушку и плечи, а медленный зум
   доедает остальное. Раз портрет нельзя резать, ему нужна своя половина
   кадра: вопрос и варианты уезжают в одну колонку слева и идут строками,
   правая остаётся под лицо. */
/* padding-top больше обычного: в одной колонке текст поднимается к самому
   верху стейджа и наезжает на номер вопроса */
body.quiz-actors .qfg{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:end; padding-top:72px }
body.quiz-actors .qleft,
body.quiz-actors .optswrap{ grid-column:1 }
body.quiz-actors .optswrap{ margin-top:18px }

body.quiz-actors #qimg{
  object-fit:contain; object-position:center;
  animation:none; transform:none;
  padding:clamp(14px,2.4vh,28px) clamp(14px,2.6vw,36px) clamp(14px,2.4vh,28px) 51%;
  box-sizing:border-box;
}
/* После ответа портрет уходит, а кадр из фильма широкий и лежит фоном во весь
   стейдж — своя колонка ему не нужна. Возвращаем обычные две: разбор слева,
   варианты справа, иначе текст «Together: …» душится в половину ширины. */
body.quiz-actors .qbg img.revbg{ padding:0 }
body.quiz-actors .qstage.answered .qfg{ padding-top:34px }
body.quiz-actors .qstage.answered .optswrap{ grid-column:2; grid-row:1; margin-top:0 }

@media (max-width:860px){
  /* на телефоне картинка живёт в своей полосе над текстом: делить нечего */
  body.quiz-actors #qimg{ padding:.5rem }
  body.quiz-actors .optswrap{ margin-top:0 }
}

/* Финальный вопрос играется вживую: портрета нет, имени нет — вместо имени
   строка про человека, который стоит перед залом. Она длиннее любого имени,
   поэтому набирается тем же шрифтом, но мельче и в две строки. */
.person .pname.anon{ font-size:clamp(1.4rem,3.2vw,2.2rem); line-height:1.04; color:var(--dim); }

.thumb[hidden]{ display:none; }
#qimg[hidden]{ display:none; }