/* «Легко не будет, будет интересно!» — вертикальная игра 9:16, основной ориентир 390 × 844.
   Типографика: Cormorant Garamond (заголовки, цифры) + Manrope (интерфейс). Оба шрифта лежат локально в assets/fonts. */

/* ---------- шрифты (кириллица + латиница, без внешних сетей) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/cormorant-garamond-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-garamond-cyrillic-500-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/fonts/manrope-vf-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../assets/fonts/manrope-vf-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --white:#FFFFFF; --blue:#1761BF; --navy:#092D68; --ice:#EDF4FE; --gold:#C9A05A; --gold-l:#E9D3A5;
  --b1:#4A86D6; --b2:#86AEE6; --b3:#BFD5F2; --b4:#DCE8F8; --ink:#173A73;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --k:1;
  --r-card:18px; --r-btn:30px; --bd:1.5px solid #D6E4F7; --sh-card:0 6px 18px rgba(9,45,104,.07);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}      /* WebKit/Chrome iOS не должны сами увеличивать текст: иначе заголовки и описания перестраиваются по-разному на разных телефонах */
html,body{height:100%;overflow:hidden;background:var(--navy);overscroll-behavior:none}
body{font-family:var(--sans);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;color:var(--navy);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  background:radial-gradient(120% 70% at 50% 0%,#12408b 0%,var(--navy) 60%,#061c45 100%)}
img,svg{-webkit-user-drag:none;user-drag:none;pointer-events:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus{outline:none} button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Игровая область: на телефоне — весь экран, на широких окнах — по центру в пропорции 9:16 */
#app{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100vw,calc(100dvh*9/16));height:min(100dvh,calc(100vw*16/9));
  overflow:hidden;background:var(--white);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 80px rgba(0,0,0,.45)}
@media (max-aspect-ratio:9/16){#app{width:100vw;height:100dvh}}
@supports not (height:100dvh){#app{width:min(100vw,calc(100vh*9/16));height:min(100vh,calc(100vw*16/9))}@media (max-aspect-ratio:9/16){#app{width:100vw;height:100vh}}}

.screen{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
  transition:opacity .42s ease,transform .42s ease,visibility 0s linear .42s;background:var(--white)}
.screen.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .42s ease,transform .42s ease,visibility 0s}

/* ---------- кнопка: тёмно-синее стекло с тонкой золотой окантовкой ---------- */
.cta{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:0 26px;border-radius:var(--r-btn);color:var(--white);
  font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:.03em;
  background:linear-gradient(180deg,#1C5FB8 0%,#0E3E86 52%,#082A60 100%);
  box-shadow:0 10px 24px rgba(9,45,104,.28),0 2px 0 rgba(255,255,255,.16) inset,0 0 0 1.5px rgba(201,160,90,.9),0 0 0 4px rgba(255,255,255,.7);
  transition:transform .14s ease,box-shadow .14s ease,opacity .2s ease,filter .2s}
.cta::before{content:"";position:absolute;left:18px;right:18px;top:2px;height:46%;border-radius:28px 28px 40px 40px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0));pointer-events:none}
.cta svg{flex:none;width:22px;height:22px;color:var(--gold-l)}
.cta:active{transform:scale(.975);box-shadow:0 6px 14px rgba(9,45,104,.3),0 2px 0 rgba(255,255,255,.16) inset,0 0 0 1.5px rgba(201,160,90,.9),0 0 0 4px rgba(255,255,255,.7)}
.cta[disabled]{background:linear-gradient(180deg,#D3E0F3,#BCCDE8);color:rgba(255,255,255,.96);cursor:default;box-shadow:0 6px 14px rgba(9,45,104,.10),0 0 0 1.5px rgba(201,160,90,.5),0 0 0 4px rgba(255,255,255,.7)}
.cta[disabled]::before{opacity:.5}
/* лёгкая кнопка карты: белое стекло с золотой окантовкой — заметна, но не давит на карту */
.cta.light{min-height:54px;font-size:16.5px;color:var(--navy);background:linear-gradient(180deg,#FFFFFF,#EFF5FE);box-shadow:0 10px 24px rgba(9,45,104,.16),0 0 0 1.5px rgba(201,160,90,.95),0 0 0 4px rgba(255,255,255,.55)}
.cta.light::before{display:none}.cta.light svg{color:var(--gold);width:24px;height:24px}
.cta.light{min-height:60px;justify-content:space-between;padding:0 22px 0 28px}
.cta.light .txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1;text-align:left}
.cta.light small{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#B8903F}
.cta.light b{font-size:17px;font-weight:800;letter-spacing:.01em;color:var(--navy)}
.chip{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:20px;background:rgba(255,255,255,.95);
  box-shadow:0 6px 16px rgba(9,45,104,.14),0 0 0 1px rgba(191,213,242,.8);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--navy);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.chip i{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.chip b{font-family:var(--sans);font-weight:800;font-size:16px;line-height:1}
.chip.small{height:34px;padding:0 12px;box-shadow:none;background:var(--ice)}

/* ---------- 1. стартовый экран: обложка ---------- */
#start{background:#F4F8FF}
#heroSvg{position:absolute;inset:0;width:100%;height:100%;display:block}
#heroSvg .drift{animation:drift 26s ease-in-out infinite alternate}
#heroSvg .drift.b{animation-duration:34s;animation-delay:-8s}#heroSvg .drift.c{animation-duration:30s;animation-delay:-15s}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(18px)}}
.start-top{position:absolute;left:0;right:0;top:calc(var(--st) + 6.4%);padding:0 7%;text-align:center}
.title{font-family:var(--serif);font-weight:700;font-size:calc(48px*var(--k));line-height:.96;letter-spacing:-.012em;color:var(--navy);font-feature-settings:"liga","kern"}
.title span{display:block;white-space:nowrap}
.title .l2{font-style:italic;font-weight:500;color:var(--blue);font-size:1em;margin-top:.03em;letter-spacing:-.005em}
.orn{display:block;width:calc(158px*var(--k));height:16px;margin:calc(18px*var(--k)) auto calc(14px*var(--k));filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.subtitle{font-family:var(--sans);font-size:calc(14.5px*var(--k));font-weight:500;letter-spacing:.07em;color:#4F72B0}
.start-bottom{position:absolute;left:0;right:0;bottom:0;padding:46px 32px calc(var(--sb) + 30px);background:linear-gradient(to top,rgba(244,248,255,.98) 46%,rgba(244,248,255,0))}
#start .title .l1,#start .title .l2,#start .orn,#start .subtitle,#start .start-bottom{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
#start.on.ready .title .l1{opacity:1;transform:none;transition-delay:.1s}
#start.on.ready .title .l2{opacity:1;transform:none;transition-delay:.28s}
#start.on.ready .orn{opacity:1;transform:none;transition-delay:.5s}
#start.on.ready .subtitle{opacity:1;transform:none;transition-delay:.62s}
#start.on.ready .start-bottom{opacity:1;transform:none;transition-delay:.85s}

/* ---------- 2. карта ---------- */
#map{background:var(--ice)}
#mapScroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}
#mapScroll::-webkit-scrollbar{display:none}
#world{position:relative;width:100%;height:calc(1700px*var(--k))}
#worldSvg{position:absolute;inset:0;width:100%;height:100%;display:block}
#markers{position:absolute;inset:0}
.maptop{position:absolute;z-index:10;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--st) + 18px) calc(var(--sr) + 18px) 0 calc(var(--sl) + 18px);pointer-events:none}
.maptop::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--st) + 92px);background:linear-gradient(to bottom,rgba(237,244,254,.94) 0%,rgba(237,244,254,.62) 55%,rgba(237,244,254,0));z-index:-1}
.maptop .chip{pointer-events:auto}
.mapcta{position:absolute;z-index:20;left:0;right:0;bottom:0;padding:0 30px calc(var(--sb) + 28px);pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.mapcta.show{opacity:1;transform:none}.mapcta.show .cta{pointer-events:auto}

.mk{position:absolute;width:calc(62px*var(--k));height:calc(62px*var(--k));min-width:48px;min-height:48px;margin:calc(-31px*var(--k)) 0 0 calc(-31px*var(--k));padding:0;border-radius:50%;transition:transform .2s ease;z-index:3}
.mk .sh{position:absolute;left:50%;top:70%;width:92%;height:34%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(9,45,104,.34),rgba(9,45,104,0) 68%);pointer-events:none}
.mk .disc{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center}
.mk b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-family:var(--serif);font-weight:700;line-height:1;font-size:calc(31px*var(--k))}
.mk .lbl{position:absolute;top:100%;left:50%;transform:translate(-50%,9px);white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--navy);
  background:rgba(255,255,255,.96);padding:5px 12px;border-radius:12px;box-shadow:0 4px 12px rgba(9,45,104,.16),0 0 0 1px rgba(191,213,242,.9);pointer-events:none}
.mk.locked .disc{background:linear-gradient(160deg,#FBFDFF,#DCE8F8);color:#9DB9E3;border:3px solid #fff;box-shadow:inset 0 3px 7px rgba(9,45,104,.13),0 6px 14px rgba(9,45,104,.14)}
.mk.locked .disc svg{width:42%;height:42%}
.mk.locked .lbl{display:none}
.mk.done .disc{background:radial-gradient(circle at 34% 26%,#4B93E8,#1761BF 55%,#0E4A97);color:#fff;border:3px solid #fff;box-shadow:0 0 0 1.5px rgba(201,160,90,.85),0 9px 18px rgba(23,97,191,.38),inset 0 -4px 8px rgba(9,45,104,.28)}
.mk.active .disc{background:linear-gradient(#FFFFFF,#EDF4FE) padding-box,conic-gradient(from 200deg,#F4E6C2,#C9A05A,#8F6B2D,#E6CF9C,#C9A05A,#F4E6C2) border-box;border:5px solid transparent;color:var(--navy);
  box-shadow:0 0 0 3px #fff,0 12px 24px rgba(9,45,104,.30),inset 0 -5px 10px rgba(23,97,191,.10)}
.mk.active b{font-size:calc(34px*var(--k));text-shadow:0 1px 0 #fff}
.mk.active .lbl{background:var(--navy);color:#fff;box-shadow:0 6px 14px rgba(9,45,104,.35),0 0 0 1px var(--gold)}
.mk.active::before{content:"";position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(circle,rgba(244,223,168,.55),rgba(244,223,168,0) 68%);animation:glow 2.8s ease-in-out infinite;pointer-events:none}
.mk.active::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);animation:ping 2.4s ease-out infinite;opacity:0;pointer-events:none}
@keyframes glow{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.65);opacity:0}}
.mk:active{transform:scale(.94)}
.mk.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mk.reveal{animation:reveal .9s cubic-bezier(.2,.9,.2,1)}
@keyframes reveal{0%{transform:scale(.6)}55%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Д.А.: приземлён на карту — мягкая контактная тень и светлое «пятно» под ногами */
.da{position:absolute;left:0;top:0;display:block;will-change:transform;z-index:4;pointer-events:none}
#heroShadow{position:absolute;left:0;top:0;z-index:3;pointer-events:none}
#heroShadow::before{content:"";position:absolute;left:-6%;right:-6%;top:-4%;bottom:-18%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.75),rgba(255,255,255,0) 70%)}
#heroShadow::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(9,45,104,.50) 0%,rgba(9,45,104,.24) 42%,rgba(9,45,104,0) 74%)}

/* ---------- 3–4. вопрос и результат: без прокрутки, всё видно сразу ---------- */
#question,#result{background:linear-gradient(180deg,var(--white) 0%,#F4F8FF 100%);display:flex;flex-direction:column;--fs:18px;--gap:12px}
.qbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(var(--st) + 8px) calc(var(--sr) + 16px) 4px calc(var(--sl) + 12px);min-height:calc(var(--st) + 52px)}
.back{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--navy);background:var(--ice)}
.back[hidden]{display:block;visibility:hidden}
.qlevel{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}.qlevel b{color:var(--navy);font-weight:800}
.qprogress{flex:none;margin:0 20px;height:5px;border-radius:3px;background:var(--b4);overflow:hidden}
.qprogress i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--gold));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.qbody{flex:1;min-height:0;overflow:hidden;padding:clamp(6px,1.4vh,14px) 20px 6px;display:flex;flex-direction:column}
.qart{flex:none;height:clamp(54px,11vh,102px);display:flex;justify-content:center;align-items:flex-end;margin-bottom:6px}
.qart svg{height:100%;width:auto;max-width:100%;display:block}
#question h2,#result h2{flex:none;font-family:var(--serif);font-weight:700;font-size:calc(32px*var(--ts,1));line-height:1.02;text-align:center;color:var(--navy);margin:2px 0 clamp(8px,1.5vh,14px);letter-spacing:-.005em}
.situation{flex:none;font-size:var(--fs);line-height:1.42;color:var(--ink);font-weight:500}
.ask{flex:none;font-size:calc(var(--fs) + 1px);font-weight:800;letter-spacing:.005em;color:var(--navy);margin:clamp(10px,1.9vh,18px) 0 clamp(8px,1.3vh,12px)}
.opts{flex:none;display:flex;flex-direction:column;gap:clamp(6px,1.1vh,10px)}
.opt{position:relative;display:flex;align-items:center;gap:13px;width:100%;min-height:clamp(54px,8.2vh,72px);padding:9px 14px;border-radius:var(--r-card);text-align:left;background:linear-gradient(180deg,#FFFFFF,#FAFCFF);
  border:var(--bd);box-shadow:var(--sh-card);transition:transform .16s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.opt .n{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:21px;line-height:1;background:var(--ice);color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--b4);transition:background .18s,color .18s,box-shadow .18s}
.opt .t{font-size:var(--fs);line-height:1.28;font-weight:600;color:var(--navy);padding-right:26px}
.opt::after{content:"";position:absolute;right:13px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;opacity:0;transform:scale(.5);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.2,1);
  background:#C9A05A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.opt:active{transform:scale(.985)}
.opt.sel{border-color:var(--blue);background:linear-gradient(180deg,#F4F8FF,#EAF2FD);box-shadow:0 0 0 3px rgba(23,97,191,.13),0 8px 18px rgba(23,97,191,.16)}
.opt.sel .n{background:var(--blue);color:var(--white);box-shadow:none}
.opt.sel::after{opacity:1;transform:none}
.qfoot{flex:none;padding:10px 28px calc(var(--sb) + 22px)}
.qin{animation:qin .46s cubic-bezier(.2,.8,.2,1) both}
.qin:nth-child(2){animation-delay:.05s}.qin:nth-child(3){animation-delay:.1s}.qin:nth-child(4){animation-delay:.15s}.qin:nth-child(5){animation-delay:.2s}
@keyframes qin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.nomo,.nomo *{animation:none!important;transition:none!important}

@media (min-height:820px){#question,#result{--fs:19px}.opts{gap:12px}.ask{margin-top:18px}}
/* результат: вердикт и «+1» в одной строке, остальное — карточки */
.rbody{position:relative;text-align:center}
.vrow{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;margin:clamp(2px,1.2vh,12px) 0 4px}
.verdict{font-family:var(--serif);font-weight:700;font-size:calc(42px*var(--ts,1));line-height:1;letter-spacing:-.01em}
.verdict.right{color:var(--navy)} .verdict.wrong{color:var(--blue);font-style:italic;font-weight:600}
.point{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px 0 10px;border-radius:17px;background:linear-gradient(180deg,#123F86,#082A60);color:var(--white);font-weight:800;font-size:16px;box-shadow:0 0 0 1.5px var(--gold),0 6px 14px rgba(9,45,104,.28)}
.point svg{width:18px;height:18px}.point[hidden]{display:none}
.rule{flex:none;display:block;width:76px;height:2px;margin:2px auto 8px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
#result h2{font-size:calc(21px*var(--ts,1));font-weight:600;font-style:italic;color:var(--blue);margin:0 0 clamp(6px,1.1vh,10px)}
.quip{flex:none;margin:2px 4px clamp(10px,1.7vh,16px);padding:2px 0 2px 14px;border-left:2px solid var(--gold);background:none;text-align:left;font-family:var(--serif);font-style:italic;font-size:calc(var(--fs) + 3px);line-height:1.22;color:#2A5498;font-weight:600;letter-spacing:.005em}
.quip[hidden]{display:none}
.story{flex:none;margin-top:auto;margin-bottom:auto;padding:14px 18px 16px;border-radius:var(--r-card);background:var(--white);border:var(--bd);box-shadow:var(--sh-card);text-align:left;position:relative}
.story::before{content:"";position:absolute;left:18px;top:-1.5px;width:44px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--gold),#E9D3A5)}
.story-label{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#B8903F;margin-bottom:8px}
.story p{font-size:var(--fs);line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:.003em}
.rbody.rin>*{animation:qin .5s cubic-bezier(.2,.8,.2,1) both}
.rbody.rin>*:nth-child(2){animation-delay:.06s}.rbody.rin>*:nth-child(3){animation-delay:.12s}.rbody.rin>*:nth-child(4){animation-delay:.18s}.rbody.rin>*:nth-child(5){animation-delay:.24s}.rbody.rin>*:nth-child(6){animation-delay:.3s}.rbody.rin>*:nth-child(7){animation-delay:.36s}
.rbody.rin .verdict.right{animation:pop .6s cubic-bezier(.2,.9,.2,1) both}
@keyframes pop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.07)}100%{opacity:1;transform:none}}
.burst{position:absolute;left:50%;top:38px;width:0;height:0;pointer-events:none;z-index:2}
.burst i{position:absolute;left:0;top:0;width:var(--s,7px);height:var(--s,7px);margin:calc(var(--s,7px)/-2);background:var(--gold);border-radius:50%;opacity:0;animation:spark .95s cubic-bezier(.15,.7,.3,1) forwards;animation-delay:var(--d,0s)}
.burst i.st{border-radius:2px;transform:rotate(45deg)}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}

/* автоподгонка (JS добавляет fit1…fit3 только если контент не помещается): никогда не мельче 16 px и никогда с прокруткой */
#question.fit1 .qart,#result.fit1 .qart{display:none}
#question.fit2,#result.fit2{--fs:17px}
.fit2 .opt{min-height:52px;padding:7px 12px}.fit2 .qbody{padding-top:4px}.fit2 .story{padding:11px 15px 13px}.fit2 .story p{line-height:1.44}.fit2 .quip{margin-bottom:8px}.fit2 .rule{margin:0 auto 5px}
#question.fit3,#result.fit3{--fs:16px;--ts:.88}
.fit3 .opt{min-height:48px;padding:5px 12px}.fit3 .ask{margin:6px 0 6px}.fit3 .opts{gap:6px}.fit3 .qfoot{padding-bottom:calc(var(--sb) + 10px);padding-top:4px}.fit3 .rule{display:none}.fit3 .story-label{margin-bottom:4px}.fit3 .story{padding:9px 14px 11px}.fit3 .story p{line-height:1.4}.fit3 .quip{margin-bottom:6px;font-size:calc(var(--fs) + 2px)}.fit3 .vrow{margin:0}.fit3 .qbar{min-height:calc(var(--st) + 46px)}
/* шаг 4 — самый плотный (для самых коротких экранов): шрифт по-прежнему не меньше 16 px, сжимаются только межстрочный интервал и отступы */
#question.fit4,#result.fit4{--fs:16px;--ts:.8}
.fit4 .situation,.fit4 .story p,.fit4 .quip,.fit4 .opt .t{line-height:1.3}
#result.fit4 h2{display:none}
.fit4 .verdict{font-size:30px}.fit4 .vrow{margin:0}.fit4 .qbody{padding:2px 18px 4px}
.fit4 .story{padding:7px 12px 9px}.fit4 .story-label{margin-bottom:3px;font-size:11px}.fit4 .story::before{display:none}
.fit4 .quip{margin:0 0 5px;padding:1px 0 1px 10px;line-height:1.2}
.fit4 .opt{min-height:46px;padding:4px 12px}.fit4 .opt .n{width:30px;height:30px;font-size:19px}
.fit4 .ask{margin:4px 0 4px}.fit4 .opts{gap:5px}.fit4 .qfoot{padding:6px 24px calc(var(--sb) + 8px)}.fit4 .cta{min-height:50px}
.fit4 .qbar{min-height:calc(var(--st) + 40px);padding-top:calc(var(--st) + 2px)}.fit4 #question h2{margin-bottom:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- подписи глав на дороге ---------- */
.chapchip{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:16px;white-space:nowrap;pointer-events:none;
  background:rgba(255,255,255,.93);box-shadow:0 5px 14px rgba(9,45,104,.14),0 0 0 1px rgba(191,213,242,.9);color:var(--navy)}
.chapchip b{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1;color:var(--navy);letter-spacing:.02em}
.chapchip i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold)}
.chapchip span{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:#4F72B0;text-transform:uppercase}

/* ---------- поздравление с главой ---------- */
#chapter{background:linear-gradient(180deg,#FFFFFF,#EDF4FE);display:flex;flex-direction:column}
.chap-card{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 32px}
.chap-roman{font-family:var(--serif);font-weight:700;font-size:calc(96px*var(--k));line-height:.9;color:var(--blue);text-shadow:0 2px 0 #fff,0 10px 26px rgba(23,97,191,.18)}
.chap-title{font-family:var(--serif);font-weight:700;font-size:calc(36px*var(--k));line-height:1.05;color:var(--navy);margin-top:10px}
.chap-name{font-family:var(--serif);font-style:italic;font-weight:600;font-size:calc(26px*var(--k));color:var(--blue);margin-top:6px}
.chap-card .rule{margin:18px auto 14px;width:92px}
.chap-phrase{font-size:18px;font-weight:500;line-height:1.4;color:var(--ink);max-width:290px}
.chap-card.rin>*:not(.burst){animation:qin .6s cubic-bezier(.2,.8,.2,1) both}
.chap-card.rin>*:nth-child(3){animation-delay:.08s}.chap-card.rin>*:nth-child(4){animation-delay:.16s}.chap-card.rin>*:nth-child(5){animation-delay:.24s}.chap-card.rin>*:nth-child(6){animation-delay:.3s}
.chap-card .burst{top:34%}

/* ---------- финал: Дубай, золото, итог ---------- */
#final{background:#F4F8FF}
#finSvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fin-top{position:absolute;left:0;right:0;top:calc(var(--st) + 6.4%);padding:0 26px;text-align:center}
.fin-title{font-family:var(--serif);font-style:italic;font-weight:600;font-size:calc(44px*var(--k));line-height:1;color:var(--navy);letter-spacing:-.01em}
.fin-orn{margin:calc(14px*var(--k)) 0 calc(10px*var(--k))}.fin-orn .orn{display:block;width:calc(158px*var(--k));height:16px;margin:0 auto;opacity:1!important;transform:none!important}
.fin-score{font-family:var(--serif);font-weight:600;font-size:calc(31px*var(--k));line-height:1.1;color:var(--navy)}
.fin-score b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-weight:700;font-size:1.5em;color:var(--blue)}
.fin-score span{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.fin-note{position:absolute;left:22px;right:22px;bottom:calc(var(--sb) + 112px);overflow:hidden;padding:14px 18px;border-radius:var(--r-card);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:var(--bd);box-shadow:var(--sh-card);text-align:left;--fs:17px}
.fin-note[hidden]{display:none}
.fin-note p{white-space:pre-line;font-size:var(--fs);line-height:1.45;color:var(--ink);font-weight:500}
#final.fit1 .fin-note{--fs:16.5px;padding:11px 16px}#final.fit2 .fin-note{--fs:16px;padding:9px 14px}
#final.fit3 .fin-top{top:calc(var(--st) + 2.4%)}#final.fit3 .fin-title{font-size:calc(34px*var(--k))}#final.fit3 .fin-orn{margin:7px 0 4px}#final.fit3 .fin-score{font-size:calc(26px*var(--k))}
#final.fit4 .fin-note p{line-height:1.34}#final.fit4 .fin-note{padding:8px 13px}#final.fit4 .fin-bottom{padding-top:18px}
.fin-bottom{padding-top:30px}
#final .fin-title,#final .fin-orn,#final .fin-score{animation:qin .8s cubic-bezier(.2,.8,.2,1) both}
#final .fin-orn{animation-delay:.15s}#final .fin-score{animation-delay:.3s}

/* демо-режим (только ?demo=1): заметная метка, чтобы не перепутать с настоящей игрой */
.demotag{position:absolute;z-index:30;left:50%;top:calc(var(--st) + 66px);transform:translateX(-50%);white-space:nowrap;padding:3px 10px;border-radius:9px;background:#092D68;color:#E9D3A5;font-size:10px;font-weight:800;letter-spacing:.14em;pointer-events:none}

/* ---- просмотр пройденного уровня ---- */
.rev{flex:none;display:flex;flex-direction:column;gap:6px;margin:0 0 clamp(8px,1.4vh,12px);text-align:left}
.rev[hidden]{display:none}
.rv{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-radius:14px;background:var(--white);border:var(--bd);font-size:16px;line-height:1.3;color:var(--ink);font-weight:600}
.rv .ic{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--ice);color:var(--blue)}
.rv .ic svg{width:16px;height:16px}
.rv-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.rv-k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7C8FB0}
.rv.good{border-color:var(--gold);background:linear-gradient(180deg,#fff,#FFF9EC)}
.rv.good .ic{background:var(--gold);color:#fff}.rv.good .rv-k{color:#B8903F}
.rv.bad .rv-t{color:#4A5F86}
.fit3 .rv,.fit4 .rv{padding:5px 10px}.fit3 .rev,.fit4 .rev{gap:4px;margin-bottom:6px}.fit4 .rv{line-height:1.22}
/* ---- настройки карты ---- */
.mt-right{display:flex;align-items:center;gap:8px}
.gear{pointer-events:auto;flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-2px -4px -2px 0;border-radius:50%;background:none;color:var(--navy)}
.gear svg{width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(9,45,104,.12),0 0 0 1px #D6E4F7;opacity:.92}
.gear:active svg{transform:scale(.92)}
.menu-back{position:absolute;inset:0;z-index:30}
.menu-back[hidden],.menu[hidden],.sheet[hidden]{display:none}
.menu{position:absolute;z-index:31;top:calc(var(--st) + 66px);right:calc(var(--sr) + 18px);min-width:200px;padding:6px;border-radius:16px;background:var(--white);border:var(--bd);box-shadow:0 14px 34px rgba(9,45,104,.22)}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 14px;border-radius:12px;font-size:16.5px;font-weight:700;color:var(--navy);text-align:left}
.menu-item svg{width:20px;height:20px;color:var(--gold)}
.menu-item:active{background:var(--ice)}
.sheet{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:calc(var(--st) + 16px) 22px calc(var(--sb) + 16px);background:rgba(9,45,104,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:qin .25s ease both}
.sheet-card{width:100%;max-width:346px;padding:26px 22px 20px;border-radius:24px;background:linear-gradient(180deg,#fff,#F4F8FF);border:1.5px solid rgba(201,160,90,.7);box-shadow:0 24px 60px rgba(9,45,104,.35);text-align:center}
.sheet-card h2{font-family:var(--serif);font-weight:700;font-size:30px;line-height:1.05;color:var(--navy)}
.sheet-card .rule{margin:14px auto 12px}
.sheet-card p{font-size:17px;line-height:1.45;color:var(--ink);font-weight:500}
.sheet-btns{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.sheet-danger{min-height:48px;border-radius:var(--r-btn);font-size:16.5px;font-weight:700;color:#8A5A1E;background:#fff;border:1.5px solid rgba(201,160,90,.9)}
.sheet-danger:active{background:#FFF6E3}
.fit4 .rv-k{display:none}.fit4 .rv{padding:4px 10px;align-items:center}

.chapchip{transition:opacity .2s ease}.chapchip.behind{opacity:0}

/* ---- «просторные» состояния для коротких текстов (включаются только если всё помещается; сами по себе ничего не обрезают) ---- */
#question,#result{--sa:0px;--sh:0px;--sk:0px;--sg:0px;--st0:0px}
#question .qbody{padding-top:calc(clamp(6px,1.4vh,14px) + var(--st0))}
#question .qart{margin-bottom:calc(6px + var(--sa))}
#question h2{margin-bottom:calc(clamp(8px,1.5vh,14px) + var(--sh))}
#question .ask{margin-top:calc(clamp(10px,1.9vh,18px) + var(--sk))}
#question .opts{gap:calc(clamp(6px,1.1vh,10px) + var(--sg))}
.g1 .qart{height:clamp(80px,15vh,134px)}
.g1 .opt{min-height:clamp(60px,9vh,76px)}
.g1 #qTitle,.g1 #rTitle{font-size:calc(34px*var(--ts,1))}
.g2 .qart{height:clamp(100px,19vh,170px)}
.g2 .opt{min-height:clamp(66px,9.8vh,84px)}
#question.g2,#result.g2{--fs:20px}
.g2 .story{padding:18px 20px 20px}
.g3 .qart{height:clamp(116px,23vh,205px)}
.g3 .opt{min-height:clamp(72px,10.5vh,92px)}
#question.g3,#result.g3{--fs:21px}
.g3 .story{padding:22px 22px 24px}
.g1 .story{padding:16px 19px 18px}

/* ---- финал: поздравление с днём рождения — главный акцент ---- */
.fin-bday{margin:calc(2px*var(--k)) 0 calc(8px*var(--k));font-family:var(--serif);text-align:center;color:var(--navy);animation:qin .8s cubic-bezier(.2,.8,.2,1) .22s both}
.fin-bday span{display:block}
.fin-bday .b1{font-style:italic;font-weight:600;font-size:calc(26px*var(--k));line-height:1.1;color:#9C7326}
.fin-bday .b2{font-weight:700;font-size:calc(35px*var(--k));line-height:1.04;letter-spacing:-.01em;background:linear-gradient(180deg,#092D68 30%,#1761BF);-webkit-background-clip:text;background-clip:text;color:transparent}
.fin-burst{top:calc(var(--st) + 6.4% + 112px*var(--k))}
.fin-score{font-size:calc(24px*var(--k))!important}
#final.fit3 .fin-bday{margin-bottom:4px}#final.fit3 .fin-bday .b1{font-size:calc(21px*var(--k))}#final.fit3 .fin-bday .b2{font-size:calc(29px*var(--k))}
#final.fit5 .fin-orn{display:none}#final.fit5 .fin-title{font-size:calc(28px*var(--k))}#final.fit5 .fin-score{font-size:20px!important}#final.fit5 .fin-bday .b1{font-size:19px}#final.fit5 .fin-bday .b2{font-size:26px}#final.fit5 .fin-top{top:calc(var(--st) + 1.5%)}#final.fit5 .fin-bottom{padding-top:12px}
.fin-top{z-index:1}
.fin-top::before{content:"";position:absolute;left:0;right:0;top:-40px;bottom:-22px;z-index:-1;background:linear-gradient(to bottom,rgba(244,248,255,.97) 0,rgba(244,248,255,.95) 72%,rgba(244,248,255,0));pointer-events:none}
.fin-bday .b2{font-size:calc(37px*var(--k))}
.fin-top::before{bottom:-26px;background:linear-gradient(to bottom,rgba(244,248,255,.98) 0,rgba(244,248,255,.97) 86%,rgba(244,248,255,0))}
.fin-bottom .cta{padding:0 14px;white-space:nowrap}.fin-bottom .cta .txt{font-size:16px}
/* телефон повернут горизонтально: игра только вертикальная — мягкая подсказка поверх (не на настольных окнах) */
#rotate{display:none}
@media (orientation:landscape) and (max-height:520px) and (hover:none){#rotate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--navy);color:#fff;text-align:center;font-size:17px;line-height:1.4;font-weight:600}#rotate svg{display:block;margin:0 auto 10px}}

#question.fit1.mini .qart,#result.fit1.mini .qart{display:flex;height:var(--amh,60px)}
.pack .story{margin-top:0!important;margin-bottom:0!important}

/* ---- интерактивные выборы (js/choice.js): один экран — одно касание, варианты не дублируются ---- */
#qIx{display:none}
#question.ix #qIx{display:flex;flex:1;min-height:0;flex-direction:column;gap:8px;margin-top:6px;position:relative}
#question.ix #qOpts,#question.ix .qart,#question.ix .qfoot{display:none}
#question.ix .qbody{padding-bottom:calc(var(--sb) + 14px)}
.ixhost{position:relative}
.ixhost.ix-n5{justify-content:center}
.ix-scene{flex:1 1 0;min-height:150px;display:flex;align-items:center;justify-content:center}
.ix-stage{position:relative;flex:none}
.ix-art{width:100%;height:100%;display:block;pointer-events:none}
.ix-stage>.ix-art{border-radius:22px;filter:drop-shadow(0 8px 18px rgba(9,45,104,.16))}
.ix-zone{position:absolute;z-index:1;border-radius:20px;background:transparent;transition:box-shadow .25s,background .25s}
.ix-zone:active{background:rgba(255,255,255,.2)}
.ix-zone.gold{box-shadow:0 0 0 3px rgba(201,160,90,.95),0 0 26px 4px rgba(244,223,168,.85);background:rgba(255,246,222,.18)}
.ix-zone.blue{box-shadow:0 0 0 3px rgba(23,97,191,.7),0 0 20px rgba(23,97,191,.3)}
.ix-lbl{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;padding:6px 13px 8px;border-radius:15px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1.5px solid #D6E4F7;box-shadow:0 5px 16px rgba(9,45,104,.2);line-height:1.08;cursor:pointer;transition:border-color .25s,background .25s}
.ix-lbl b{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--navy);letter-spacing:-.005em}
.ix-lbl i{font-style:normal;font-weight:600;font-size:16px;color:#2A5498}
.ix-lbl.gold{border-color:var(--gold);background:#FFF9EC}.ix-lbl.blue{border-color:var(--blue)}
.ix-hint{flex:none;text-align:center;font-size:16px;font-weight:600;color:#6B7FA3;letter-spacing:.005em}
.ix-foot{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;padding-top:2px}
.ix-stack{width:46px;height:32px;flex:none}
/* L5: три вертикальные карточки */
.ix-cards{flex:1 1 0;min-height:200px;max-height:360px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ix-card{display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;border-radius:20px;background:#fff;border:1.5px solid #D6E4F7;box-shadow:0 8px 20px rgba(9,45,104,.13);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .3s,border-color .3s}
.ix-card:active{transform:scale(.98)}
.ix-cart{flex:1;min-height:0;display:block;position:relative;overflow:hidden}
.ix-cart .ix-art{position:absolute;inset:0;width:100%;height:100%}
.ix-card b{flex:none;display:flex;align-items:center;justify-content:center;min-height:54px;padding:6px 4px 8px;font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.04;color:var(--navy);text-align:center;background:linear-gradient(#fff,#F4F8FF)}
.ix-card.lift{transform:translateY(-8px)}
.ix-card.gold{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,160,90,.9),0 16px 30px rgba(201,160,90,.38)}
.ix-card.blue{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,97,191,.5),0 16px 28px rgba(23,97,191,.25)}
.ix-card.dim{opacity:.62}
.ix-cart.glint::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);animation:ixglint .85s ease both}
@keyframes ixglint{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.ix-flyer{position:absolute;left:0;top:0;width:40px;height:28px;z-index:6;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(9,45,104,.35))}
.ix-flyer svg{width:100%;height:100%;display:block}
/* L10: подписи городов, «Сергей» и три решения */
.ix-city{position:absolute;bottom:3%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.ix-city b{display:inline-block;padding:4px 13px 6px;border-radius:14px;background:rgba(255,255,255,.94);border:1.5px solid #D6E4F7;box-shadow:0 4px 12px rgba(9,45,104,.18);font-family:var(--serif);font-weight:700;font-size:20px;color:var(--navy)}
.ix-serg{position:absolute;right:4%;top:5%;padding:4px 14px 6px;border-radius:14px;background:#FFF9EC;border:1.5px solid var(--gold);box-shadow:0 4px 12px rgba(201,160,90,.35);font-family:var(--serif);font-weight:700;font-size:20px;color:var(--navy);opacity:0;pointer-events:none}
.ix-rows{flex:none;display:flex;flex-direction:column;gap:8px}
.ix-row{min-height:56px;padding:7px 14px}
.ix-row.ico .ix-ico{flex:none;width:58px;height:38px}.ix-row.ico .ix-ico svg{width:100%;height:100%;display:block}
.ixhost.busy{pointer-events:none}
.ixhost.busy .ix-row:not(.sel){opacity:.7}
.fit3 .ix-row,.fit4 .ix-row{min-height:46px;padding:4px 12px}.fit3 .ix-rows,.fit4 .ix-rows{gap:5px}
#question.ix #qTitle{font-size:calc(28px*var(--ts,1))}
.lcompact .ix-lbl i{display:none}.lcompact .ix-lbl{padding:6px 13px}

/* ---- уровень 1: готовая иллюстрация + спрайт автомобиля ---- */
.ix-photo{border-radius:22px;overflow:hidden;box-shadow:0 8px 20px rgba(9,45,104,.18),0 0 0 1.5px #D6E4F7;background:#CFE3F9}
.ix-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.ix-fxlayer{position:absolute;inset:0;pointer-events:none;z-index:1}
.ix-car{position:absolute;z-index:1;width:12%;pointer-events:none;transform:translate(-50%,-86%);will-change:left,top,transform}
.ix-car img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.ix-cshadow{position:absolute;left:4%;right:2%;bottom:-3%;height:16%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(9,45,104,.5) 0%,rgba(9,45,104,.28) 45%,rgba(9,45,104,0) 72%);filter:blur(1.5px);transform:skewX(-14deg)}
.ix-ripple{position:absolute;width:34px;height:12px;margin:0;border:2px solid rgba(255,255,255,.95);border-radius:50%;transform:translate(-50%,-50%)}
.ix-coin{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6E5B0,#C9A05A 60%,#8F6B2D);border:1.5px solid #F4E6C2;box-shadow:0 2px 4px rgba(9,45,104,.3)}
.ix-photo .ix-lbl{padding:5px 11px 7px;border-radius:13px}
.ix-photo .ix-lbl b{font-size:19px}
.ix-photo .ix-zone.gold{box-shadow:inset 0 0 0 2px rgba(233,211,165,.95),inset 0 0 34px rgba(244,223,168,.75);background:rgba(255,246,222,.12)}
.ix-photo .ix-zone.blue{box-shadow:inset 0 0 0 2px rgba(23,97,191,.7),inset 0 0 26px rgba(23,97,191,.3)}
.ix-car img{transform:scaleX(-1)}.ix-cshadow{left:2%;right:4%;transform:skewX(14deg)}
.fin-note .fp{display:block}.fin-note .fp+.fp{margin-top:.5em}
.fit4 .fin-note .fp+.fp,#final.fit5 .fin-note .fp+.fp{margin-top:.3em}

/* ---- уровень 1: зоны выбора — SVG-контуры в координатах иллюстрации ---- */
.ix-hit{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.ix-photo .ix-hit .ix-zone{position:static;pointer-events:all;fill:transparent;stroke:transparent;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;cursor:pointer;box-shadow:none;background:none;border-radius:0;transition:fill .25s,stroke .25s}
.ix-photo .ix-hit .ix-zone:active{fill:rgba(255,255,255,.16)}
.ix-photo .ix-hit .ix-zone.gold{fill:rgba(244,223,168,.2);stroke:#C9A05A;filter:drop-shadow(0 0 5px rgba(244,223,168,.95))}
.ix-photo .ix-hit .ix-zone.blue{fill:rgba(23,97,191,.14);stroke:#1761BF;filter:drop-shadow(0 0 4px rgba(23,97,191,.5))}
.ix-photo .ix-hit .ix-zone{stroke-width:3}
.ix-photo .ix-hit .ix-zone.gold{fill:rgba(244,223,168,.24);stroke:#BE9548;filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(244,223,168,.9))}

/* ---- кнопка «Начать заново»: отдельная полоса под картой (карта и карточка уровня её не перекрывают) ---- */
:root{--mapfoot:calc(var(--sb) + 58px)}
#mapScroll{inset:0 0 var(--mapfoot) 0}
.mapfoot{position:absolute;left:0;right:0;bottom:0;height:var(--mapfoot);padding-bottom:var(--sb);display:flex;align-items:center;justify-content:center;background:#fff;border-top:1px solid #E3EDFA;z-index:15}
.mapcta{bottom:var(--mapfoot);padding-bottom:14px}
.reset-btn:active{background:var(--ice)}
.mk .lbl{transition:opacity .2s ease}.mk .lbl.behind{opacity:0}

/* ---- чистая иллюстрация: зоны выбора невидимы, состояние читается по плашке ---- */
.ix-photo .ix-hit .ix-zone,.ix-photo .ix-hit .ix-zone:active,.ix-photo .ix-hit .ix-zone.gold,.ix-photo .ix-hit .ix-zone.blue{fill:transparent;stroke:none;filter:none}
.ix-lbl{transition:border-color .25s,background .25s,box-shadow .25s,opacity .25s,transform .25s}
.ix-lbl.gold{border:2.5px solid #C9A05A;background:linear-gradient(180deg,#FFFBF0,#FFF3D6);box-shadow:0 0 0 3px rgba(201,160,90,.28),0 8px 22px rgba(201,160,90,.45);padding:4.5px 11.5px 6.5px}
.ix-lbl.blue{border:2.5px solid #1761BF;background:linear-gradient(180deg,#F7FAFF,#E6F0FD);box-shadow:0 0 0 3px rgba(23,97,191,.22),0 8px 22px rgba(23,97,191,.38);padding:4.5px 11.5px 6.5px}
.ix-lbl.dim{opacity:.62}
/* ---- «Начать заново»: компактная второстепенная пилюля, без отдельной полосы ---- */
:root{--mapfoot:calc(var(--sb) + 64px)}
#mapScroll{inset:0}

/* ---- «Начать заново»: круглая кнопка в верхней панели рядом со счётчиком; нижней полосы больше нет ---- */
:root{--mapfoot:0px}
.mapcta{bottom:0;padding-bottom:calc(var(--sb) + 28px)}
.mt-right{gap:8px}
.reset-btn{position:relative;pointer-events:auto;flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;background:#fff;border:1px solid #C9DCF3;color:var(--navy);box-shadow:0 4px 12px rgba(9,45,104,.14)}
.reset-btn::after{content:"";position:absolute;inset:-3px}   /* область касания 44×44 при визуальных 40 px */
.reset-btn svg{width:20px;height:20px;display:block}
.reset-btn:active{background:var(--ice)}
.maptop .chap{white-space:nowrap;flex-shrink:0}

/* ---- уровень 2: боксёрский зал и три карточки-предмета ---- */
.ix-gym{position:relative;flex:0 1 auto;aspect-ratio:2/1;min-height:118px;border-radius:20px;overflow:hidden;background:#BFD5F2;box-shadow:0 8px 20px rgba(9,45,104,.16),0 0 0 1.5px #D6E4F7}
.ix-gym img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%;display:block;pointer-events:none;-webkit-user-drag:none}
.ix-iimg{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(54px,9.2vh,78px)}
.ix-iimg img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 4px 5px rgba(9,45,104,.22))}
.ix-n2,.ix-n3,.ix-n4{justify-content:flex-start}


/* текстовые карточки ответов (уровни 1–3): полные формулировки, изображение — слева (L2, L3) или номер (L1) */
.ix-tcs{flex:none;display:flex;flex-direction:column;gap:8px}
.ix-tc{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:56px;padding:10px 14px;text-align:left;border-radius:16px;background:linear-gradient(180deg,#fff,#F6F9FE);border:1.5px solid #D6E4F7;box-shadow:0 5px 14px rgba(9,45,104,.10);font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.3;color:var(--navy);transition:border-color .22s,box-shadow .22s,background .22s,opacity .22s;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.ix-tc:active{transform:scale(.985)}
.ix-tt{flex:1;min-width:0}
.ix-tn{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#EAF1FB;color:var(--blue);font-style:normal;font-weight:700;font-size:13px;line-height:1;transition:background .22s,color .22s}
.ix-ti{flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ix-ti img{display:block;max-width:100%;max-height:100%;pointer-events:none;-webkit-user-drag:none}
.ix-ti.t2{width:88px;height:68px}
.ix-ti.t2 img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}   /* светлая подложка картинки сливается с фоном карточки без обработки файла */
.ix-tc.gold{border-color:var(--gold);background:linear-gradient(180deg,#FFFCF3,#FFF3D6);box-shadow:0 0 0 3px rgba(201,160,90,.25),0 6px 16px rgba(201,160,90,.32)}
.ix-tc.gold .ix-tn{background:var(--gold);color:#fff}
.ix-tc.blue{border-color:var(--blue);background:linear-gradient(180deg,#F7FAFF,#E6F0FD);box-shadow:0 0 0 3px rgba(23,97,191,.16),0 6px 16px rgba(23,97,191,.26)}
.ix-tc.blue .ix-tn{background:var(--blue);color:#fff}
.ix-tc.dim{opacity:.62}
.ix-n2,.ix-n3,.ix-n4{justify-content:flex-start}
/* уровень 3: сетка 2×2 из квадратных карточек, подпись — полный текст ответа */
.ix-sq{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ix-sqc{display:flex;flex-direction:column;align-items:stretch;min-width:0;box-sizing:border-box;padding:6px 6px 9px;border-radius:18px;background:linear-gradient(180deg,#fff,#F6F9FE);border:1.5px solid #D6E4F7;box-shadow:0 5px 14px rgba(9,45,104,.12);text-align:center;transition:border-color .22s,box-shadow .22s,background .22s,opacity .22s}
.ix-sqc:active{transform:scale(.985)}
.ix-sqi{display:block;width:min(100%,var(--sq,100%));margin:0 auto;aspect-ratio:1/1;border-radius:13px;overflow:hidden;background:#EAF1FB;flex:none}
.ix-sqi img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ix-sqc b{display:flex;align-items:center;justify-content:center;flex:1;box-sizing:border-box;min-width:0;padding:7px 2px 0;font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:14px;line-height:1.25;color:var(--navy);overflow-wrap:normal;word-break:normal;hyphens:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.ix-sqc.gold{border-color:var(--gold);background:linear-gradient(180deg,#FFFCF3,#FFF3D6);box-shadow:0 0 0 3px rgba(201,160,90,.25),0 6px 16px rgba(201,160,90,.32)}
.ix-sqc.blue{border-color:var(--blue);background:linear-gradient(180deg,#F7FAFF,#E6F0FD);box-shadow:0 0 0 3px rgba(23,97,191,.16),0 6px 16px rgba(23,97,191,.26)}
.ix-sqc.dim{opacity:.62}

/* уровень 2: вводный блок по центру (эксперимент; для остальных уровней — после согласования) */
#question.ixc .situation,#question.ixc .ask{text-align:center;text-wrap:balance}
#question.ixc .situation{padding:0 6px}

/* надпись-«событие» после верного ответа (уровни 2 и 3) */
.ix-cap{position:absolute;left:50%;z-index:6;box-sizing:border-box;width:max-content;max-width:88%;padding:9px 16px 10px;border-radius:16px;background:rgba(255,255,255,.95);border:1.5px solid #C9A05A;box-shadow:0 6px 18px rgba(9,45,104,.25);font-family:"Manrope",system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1.25;color:var(--navy);text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%);-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* уровень 4: гостиная (пропорции картинки сохраняются) и летящий предмет */
.ix-room{position:relative;flex:none;width:min(100%,var(--rw,100%));margin:0 auto;aspect-ratio:1536/582;border-radius:20px;overflow:hidden;background:#BFD5F2;box-shadow:0 8px 20px rgba(9,45,104,.16),0 0 0 1.5px #D6E4F7}
.ix-room img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.ix-ti.t4{width:80px;height:62px}
.ix-ti.t4 img{width:100%;height:100%;object-fit:contain}
.ix-fly{position:absolute;z-index:7;pointer-events:none;transform-origin:50% 50%;will-change:transform}
.ix-fly>img{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(9,45,104,.25))}
.ix-screen{position:absolute;inset:0;opacity:0;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(150,200,255,.75));clip-path:polygon(11.5% 19.5%,66% 14.5%,71.3% 53.5%,16.8% 63.2%);mix-blend-mode:screen}
.ix-aura{position:absolute;left:-12%;right:-12%;top:-20%;bottom:-8%;opacity:0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(244,214,140,.75),rgba(244,214,140,.28) 60%,rgba(244,214,140,0) 100%)}

/* уровень 1: плашки с полным текстом ответа поверх иллюстрации */
.ix-photo .ix-lbl.ix-pl{display:block;box-sizing:border-box;width:max-content;padding:7px 10px 8px;border-radius:14px;background:rgba(255,255,255,.88);border:1.5px solid #BFD7F5;box-shadow:0 4px 12px rgba(9,45,104,.16);text-align:left;font-family:"Manrope",system-ui,sans-serif}
.ix-photo .ix-lbl.ix-pl b{display:block;font-family:"Manrope",system-ui,sans-serif;font-weight:600;font-size:13px;line-height:1.25;letter-spacing:0;color:var(--navy);overflow-wrap:normal;word-break:normal;hyphens:none}
.ix-photo .ix-lbl.ix-pl.gold{padding:7px 10px 8px;border:2px solid #C9A05A;background:linear-gradient(180deg,#FFFCF3,#FFF3D6)}
.ix-photo .ix-lbl.ix-pl.blue{padding:7px 10px 8px;border:2px solid #1761BF;background:linear-gradient(180deg,#F7FAFF,#E6F0FD)}

/* режим разработчика (?dev=1): вкладка у левого края и панель выбора уровня; в обычной игре этих элементов нет */
.dev-tab{position:absolute;left:0;top:56%;z-index:950;width:26px;height:116px;padding:0;border:0;border-radius:0 12px 12px 0;background:rgba(9,45,104,.92);color:#fff;box-shadow:0 4px 12px rgba(9,45,104,.3)}
.dev-tab::after{content:"";position:absolute;left:0;right:-14px;top:-8px;bottom:-8px}
.dev-tab span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font:700 13px/1 "Manrope",system-ui,sans-serif;letter-spacing:.02em}
.dev-sheet{position:absolute;inset:0;z-index:960;display:flex;align-items:flex-end;background:rgba(9,45,104,.38)}
.dev-sheet[hidden]{display:none}
.dev-card{width:100%;max-height:82%;display:flex;flex-direction:column;box-sizing:border-box;padding:12px 14px calc(var(--sb,0px) + 14px);border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -10px 30px rgba(9,45,104,.25);font-family:"Manrope",system-ui,sans-serif}
.dev-head{display:flex;align-items:center;gap:10px;flex:none;color:var(--navy)}
.dev-head b{font-size:18px}
.dev-note{flex:1;min-width:0;font-size:12px;color:#6B7FA3;line-height:1.2}
.dev-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:#EAF1FB;color:var(--navy);font-size:18px}
.dev-again{flex:none;margin:6px 0 8px;min-height:46px;border:0;border-radius:14px;background:linear-gradient(180deg,#F0C873,#C9A05A);color:var(--navy);font:700 16px "Manrope",system-ui,sans-serif}
.dev-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px}
.dev-lv{display:flex;align-items:center;gap:12px;flex:none;min-height:46px;width:100%;box-sizing:border-box;padding:6px 12px;border:1.5px solid #D6E4F7;border-radius:14px;background:#F6F9FE;color:var(--navy);text-align:left;font:600 16px "Manrope",system-ui,sans-serif}
.dev-lv i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#EAF1FB;color:var(--blue);font-style:normal;font-weight:700;font-size:14px}
.dev-lv.on{border-color:var(--gold);background:#FFF8E8}
.dev-row{display:none;gap:8px;margin-bottom:8px}
.devmode .dev-row{display:flex}
.dev-row button{flex:1;min-height:44px;border:1.5px solid #D6E4F7;border-radius:14px;background:#fff;color:var(--navy);font:700 15px "Manrope",system-ui,sans-serif}

/* уровень 5: карта двух городов — слой простых SVG-эффектов поверх изображения */
.ix-n6{justify-content:flex-start}
.ix-mapfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ix-mapfx *{transform-box:view-box;transform-origin:0 0}
.ix-sergey{position:absolute;left:26.7%;top:43%;transform:translateX(-50%);z-index:3;padding:4px 12px 5px;border-radius:12px;background:rgba(255,255,255,.92);border:1.5px solid #C9A05A;box-shadow:0 3px 10px rgba(9,45,104,.2);font:700 14px/1.2 "Manrope",system-ui,sans-serif;color:var(--navy);pointer-events:none}
.ix-sergey[hidden]{display:none}

/* уровень 5: четыре ответа — компактные карточки, чтобы всё помещалось без прокрутки */
.ix-n6 .ix-tcs{gap:7px}
.ix-n6 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}

/* уровень 6: автомастерская и коза-спрайт (анимируются только transform и opacity) */
.ix-n7{justify-content:flex-start}
.ix-n7 .ix-tcs{gap:7px}
.ix-n7 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-goat{position:absolute;z-index:4;pointer-events:none;will-change:transform;-webkit-user-drag:none}
.ix-loss{position:absolute;z-index:4;left:67%;top:2.5%;width:22%;pointer-events:none}
.ix-loss svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 6px rgba(9,45,104,.2))}

/* уровень 7: цельная иллюстрация переговорной и символы спора поверх неё */
.ix-n8{justify-content:flex-start}
.ix-n8 .ix-tcs{gap:7px}
.ix-n8 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-meet img{object-fit:cover;object-position:50% 50%}
.ix-syms{position:absolute;inset:0;pointer-events:none}
.ix-sym{position:absolute;font:800 22px/1 "Manrope",system-ui,sans-serif;font-style:normal;color:#D9544C;text-shadow:0 0 3px #fff,0 0 6px #fff;opacity:0;pointer-events:none}
.ix-bubble{position:absolute;left:50%;top:3%;z-index:5;max-width:70%;box-sizing:border-box;padding:7px 14px 8px;border-radius:16px;background:#fff;border:2px solid #C9A05A;box-shadow:0 4px 12px rgba(9,45,104,.22);font:800 15px/1.2 "Manrope",system-ui,sans-serif;color:var(--navy);text-align:center;opacity:0;transform:translate(-50%,0);pointer-events:none}
.ix-bubble::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid #C9A05A;border-bottom:2px solid #C9A05A;transform:translateX(-50%) rotate(45deg)}

/* уровень 8: подиум (цельная иллюстрация; эффекты — слой SVG поверх, как на карте уровня 5) */
.ix-n9{justify-content:flex-start}
.ix-n9 .ix-tcs{gap:7px}
.ix-n9 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-podium img{object-fit:cover;object-position:50% 50%}
.ix-podium .ix-win{position:absolute;z-index:3;display:flex;align-items:center;box-sizing:border-box;white-space:nowrap;overflow:hidden;font:800 13px/1 "Manrope",system-ui,sans-serif;color:var(--navy);letter-spacing:0;pointer-events:none;text-shadow:0 0 2px rgba(255,255,255,.8)}

/* уровень 9: парк, зоны посадки, деревья (transform/opacity) */
.ix-n10{justify-content:flex-start}
.ix-n10 .ix-tcs{gap:7px}
.ix-n10 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-pbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ix-trees,.ix-zones{position:absolute;inset:0;pointer-events:none}
.ix-tree9{position:absolute;width:auto;pointer-events:none;transform-origin:48.8% 100%;will-change:transform,opacity;-webkit-user-drag:none}
.ix-zone9{position:absolute;z-index:4;width:30%;height:44%;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;pointer-events:auto;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.ix-zone9 i{display:block;width:62%;height:62%;border-radius:50%;border:3px dashed rgba(255,255,255,.95);background:rgba(255,246,214,.28);box-shadow:0 0 14px 2px rgba(201,160,90,.6)}
.ix-hint9{position:absolute;left:50%;bottom:3%;z-index:6;transform:translateX(-50%);width:max-content;max-width:94%;box-sizing:border-box;padding:4px 10px 5px;border-radius:12px;background:rgba(255,255,255,.9);border:1px solid #C9A05A;box-shadow:0 2px 8px rgba(9,45,104,.18);font:700 12.5px/1.2 "Manrope",system-ui,sans-serif;color:var(--navy);text-align:center;pointer-events:none}
.ix-count9{position:absolute;left:50%;top:4%;z-index:6;transform:translateX(-50%);padding:5px 14px 6px;border-radius:14px;background:rgba(9,45,104,.9);color:#fff;font:800 15px/1.1 "Manrope",system-ui,sans-serif;pointer-events:none}
.ix-count9.full{background:linear-gradient(180deg,#F0C873,#C9A05A);color:var(--navy)}
.ix-final9{position:absolute;left:50%;bottom:6%;z-index:6;transform:translateX(-50%);padding:7px 16px 8px;border-radius:16px;background:#fff;border:2px solid #C9A05A;box-shadow:0 4px 14px rgba(201,160,90,.45);font:800 17px/1.1 "Manrope",system-ui,sans-serif;color:var(--navy);pointer-events:none}
.ix-park .ix-tree9{inset:auto;width:auto;max-width:none;object-fit:contain}
.ix-final9{white-space:nowrap}

/* уровень 10: палуба (кадр смещён вправо: виден Кремль) и сюрпризы */
.ix-n11{justify-content:flex-start}
.ix-n11 .ix-tcs{gap:7px}
.ix-n11 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-dbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;display:block;pointer-events:none}
.ix-deck .ix-sp{position:absolute;inset:auto;max-width:none;pointer-events:none;z-index:3;will-change:transform,opacity;-webkit-user-drag:none}
.ix-bub10{position:absolute;z-index:6;white-space:nowrap;padding:6px 12px 7px;border-radius:14px;background:#fff;border:1.5px solid #C9A05A;box-shadow:0 3px 10px rgba(9,45,104,.25);font:800 13px/1.15 "Manrope",system-ui,sans-serif;color:var(--navy);pointer-events:none;transform-origin:0 100%}
.ix-therm{position:absolute;z-index:6;width:26px;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.ix-therm .tube{position:relative;width:14px;height:64px;border-radius:8px;background:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(9,45,104,.35);overflow:hidden;display:flex;align-items:flex-end}
.ix-therm .fill{display:block;width:100%;height:100%;border-radius:6px;background:#3C86DD;transform-origin:50% 100%;transform:scaleY(.12)}
.ix-lab10,.ix-fin10{position:absolute;z-index:6;left:50%;box-sizing:border-box;white-space:nowrap;padding:6px 13px 7px;border-radius:14px;background:#fff;border:2px solid #C9A05A;box-shadow:0 3px 10px rgba(9,45,104,.25);font:800 14px/1.15 "Manrope",system-ui,sans-serif;color:var(--navy);pointer-events:none;transform:translateX(-50%)}
.ix-fin10{top:4%;background:linear-gradient(180deg,#FFFCF3,#FFF3D6)}

/* уровень 11: совещание, мини-игра «Услышать каждого» */
.ix-n12{justify-content:flex-start}
.ix-n12 .ix-tcs{gap:7px}
.ix-n12 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-team img{object-fit:cover}
.ix-tglow{position:absolute;top:56%;width:34%;height:18%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(240,190,90,.95),rgba(240,190,90,0));opacity:0;pointer-events:none;z-index:2}
.ix-talk{flex:none;display:flex;flex-direction:column;gap:8px}
.tk-h,.tk-p{margin:0;text-align:center;font:700 16px/1.25 "Manrope",system-ui,sans-serif;color:var(--navy)}
.tk-b{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;width:100%;box-sizing:border-box;padding:8px 16px;border-radius:18px;background:#fff;border:2px solid #BFD7F5;color:var(--navy);font:700 16px/1.2 "Manrope",system-ui,sans-serif;text-align:left;transition:background .25s,border-color .25s}
.tk-b i{font-style:normal;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#EAF1FB;color:transparent;font-size:14px;transition:background .25s,color .25s}
.tk-b.done{background:linear-gradient(180deg,#FFFCF3,#FFF3D6);border-color:#C9A05A}
.tk-b.done i{background:#C9A05A;color:#fff}
.tk-m{box-sizing:border-box;margin-top:6px;padding:14px 16px;border-radius:18px;background:#fff;border:2px solid #C9A05A;box-shadow:0 6px 18px rgba(201,160,90,.3);text-align:center}
.tk-m b{font:700 19px/1.3 "Cormorant Garamond",serif;color:var(--navy)}

/* уровень 11: облачки над сотрудниками и карточка миссии поверх иллюстрации */
.ix-bub11{position:absolute;z-index:5;white-space:nowrap;padding:5px 10px 6px;border-radius:12px;background:#fff;border:1.5px solid #1761BF;box-shadow:0 2px 8px rgba(9,45,104,.18);font:700 12px/1.1 "Manrope",system-ui,sans-serif;color:var(--navy);pointer-events:none;opacity:0;transform:translate(-50%,-100%)}
.ix-bub11::after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:#fff;border-right:1.5px solid #1761BF;border-bottom:1.5px solid #1761BF;transform:translateX(-50%) rotate(45deg)}

/* уровень 12: кабинет, листы календаря, конверт */
.ix-n13{justify-content:flex-start}
.ix-n13 .ix-tcs{gap:7px}
.ix-n13 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-office{container-type:inline-size}
.ix-obg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ix-calpage{position:absolute;pointer-events:none;z-index:2}
.ix-leafwrap{position:absolute;pointer-events:none;z-index:3;perspective:700px;perspective-origin:50% 0}
.ix-leaf{position:absolute;inset:0;transform-origin:50% 0;background:linear-gradient(180deg,#E3E9F6 0,#E3E9F6 19%,#F3F6FC 19%,#F7F9FD 100%);clip-path:polygon(0 0,88% 3%,100% 100%,8% 100%);backface-visibility:hidden;will-change:transform,opacity}
.ix-mlabel{position:absolute;left:46%;top:19%;transform:translate(-50%,-50%) rotate(1.4deg);white-space:nowrap;font:800 13px/1 "Manrope",system-ui,sans-serif;font-size:4cqw;letter-spacing:.04em;color:#0F3F8F}
.ix-envhost{position:absolute;z-index:4;pointer-events:none}
.ix-office .ix-envhost .ix-envo{position:absolute;inset:auto auto auto 50%;top:0;width:100%;height:auto;opacity:0;transform:translate(-50%,-100%);will-change:transform,opacity;max-width:none}
.ix-envglow{position:absolute;left:-20%;right:-20%;top:-70%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,200,115,.85),rgba(240,200,115,0));opacity:0;pointer-events:none}

/* уровень 13: карта России и сеть офисов (слой SVG поверх картинки; анимируются transform/opacity) */
.ix-n14{justify-content:flex-start}
.ix-n14 .ix-tcs{gap:7px}
.ix-n14 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-net .ix-nbg{position:absolute;max-width:none;display:block;pointer-events:none;inset:auto;object-fit:fill}
.ix-netfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.ix-net{container-type:inline-size}
.ix-lights{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ix-lights .nl{position:absolute;width:0;height:0}
.ix-lights .nh,.ix-lights .nc{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%);opacity:0}
.ix-lights .nh{width:4.4cqw;height:4.4cqw;background:radial-gradient(closest-side,rgba(140,200,255,.85),rgba(80,150,240,.35) 55%,rgba(80,150,240,0))}
.ix-lights .nc{width:1.15cqw;height:1.15cqw;background:radial-gradient(circle,#fff 0,#EAF6FF 35%,#8CC8FF 100%);box-shadow:0 0 .8cqw .2cqw rgba(120,190,255,.9)}
.ix-lights .nl.gold .nh{background:radial-gradient(closest-side,rgba(255,226,150,.9),rgba(240,190,90,.38) 55%,rgba(240,190,90,0))}
.ix-lights .nl.gold .nc{background:radial-gradient(circle,#fff 0,#FFF3CF 35%,#F0C873 100%);box-shadow:0 0 .8cqw .2cqw rgba(255,210,120,.95)}
.ix-lights .nl.on .nh,.ix-lights .nl.on .nc{opacity:1}
.ix-lights .nl.on.dim .nh{opacity:.6}
.ix-lights .nl.on:not(.dim) .nh{animation:ixTw 2.4s ease-in-out infinite}
.ix-lights .nl:nth-child(3n) .nh{animation-delay:-.8s}.ix-lights .nl:nth-child(3n+1) .nh{animation-delay:-1.6s}
@keyframes ixTw{0%,100%{opacity:.8}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.ix-lights .nl.on .nh{animation:none}}
.ix-netfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.ix-netlab{position:absolute;left:50%;top:3%;z-index:5;white-space:nowrap;padding:5px 12px 6px;border-radius:12px;background:rgba(255,255,255,.94);border:1.5px solid #C9A05A;box-shadow:0 2px 8px rgba(9,45,104,.2);font:700 13px/1.1 "Manrope",system-ui,sans-serif;color:var(--navy);pointer-events:none;opacity:0;transform:translateX(-50%)}

/* уровень 14: панорама Дубая, офис DDA, подсветка вывески */
.ix-n15{justify-content:flex-start}
.ix-n15 .ix-tcs{gap:7px}
.ix-n15 .ix-tc{min-height:50px;padding:7px 12px;gap:10px}
.ix-dbg2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ix-office14{position:absolute;left:34%;bottom:2.5%;width:48%;opacity:0;pointer-events:none;z-index:3}
.ix-office14 img{display:block;width:100%;height:auto;position:static;inset:auto;max-width:none;filter:drop-shadow(0 4px 6px rgba(9,45,104,.25))}

/* уровень 14: локальный золотой свет на вывеске, окнах и ламелях (без заливки всего здания) */
.ix-office14 i{position:absolute;pointer-events:none;opacity:0;mix-blend-mode:screen}
.ix-sign14{left:4%;top:40.5%;width:78%;height:12.5%;overflow:hidden;border-radius:6px;background:linear-gradient(100deg,rgba(255,255,255,0) 10%,rgba(255,236,170,.95) 45%,rgba(255,255,255,.7) 55%,rgba(255,255,255,0) 90%);box-shadow:0 0 14px 3px rgba(255,226,150,.6)}
.ix-win14.up{left:13%;top:17%;width:47%;height:22%;border-radius:4px;background:linear-gradient(180deg,rgba(255,226,150,.55),rgba(255,214,120,.25))}
.ix-win14.lo{left:13%;top:59%;width:49%;height:27%;border-radius:4px;background:radial-gradient(ellipse at 50% 60%,rgba(255,224,140,.7),rgba(255,214,120,.22) 70%,rgba(255,214,120,0))}
.ix-fins14{left:59%;top:8%;width:16%;height:82%;background:linear-gradient(180deg,rgba(255,226,150,.5),rgba(255,226,150,.1) 60%,rgba(255,226,150,.35));border-radius:3px}
.ix-halo14{left:-4%;top:36%;width:88%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,150,.45),rgba(255,226,150,0))}

/* уровень 15: игровое поле внутри экрана на картинке офиса (камера приближается к монитору после верного ответа) */
.ix-n16{justify-content:flex-start}
.ix-robo{-webkit-user-select:none;user-select:none}
.ix-robo .zw{position:absolute}
.ix-robo .zw img{position:static;inset:auto;width:100%;height:auto;display:block}
.ix-robo svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none;overflow:visible}
.ix-robo .rbg{fill:rgba(6,18,48,.82)}
.ix-robo .rguide line{stroke:#6FA8E8;stroke-width:2;stroke-dasharray:6 8;opacity:.28}
.ix-robo .rm,.ix-robo .rcore{cursor:pointer}
.ix-robo .rm.lock,.ix-robo .rcore.lock{pointer-events:none}
.ix-robo .rm-hit,.ix-robo .rc-hit{fill:transparent}
.ix-robo .rm-c{fill:url(#r15p);stroke:#6FB0F0;stroke-width:2.5;transition:stroke .3s}
.ix-robo .rm-edge{fill:none;stroke:rgba(150,200,255,.25);stroke-width:1.5}
.ix-robo .rm-t{fill:#fff;font:700 21px "Manrope",system-ui,sans-serif;text-anchor:middle}
.ix-robo .rm-i{transform-box:fill-box}
.ix-robo .rm.on .rm-c{stroke:#F0C873;stroke-width:3.5;filter:drop-shadow(0 0 7px rgba(124,196,255,.8))}
.ix-robo .rm.on .rm-edge{stroke:rgba(240,200,115,.55)}
.ix-robo .rm.sel .rm-c{stroke:#F0C873;stroke-width:4}
.ix-robo .rc-sq{fill:#0C2252;stroke:#4C7FC4;stroke-width:2}
.ix-robo .rc-pins path{stroke:#4C7FC4;stroke-width:4;stroke-linecap:round}
.ix-robo .rc-r3{fill:none;stroke:rgba(111,176,240,.45);stroke-width:2;stroke-dasharray:3 9}
.ix-robo .rc-r2{fill:none;stroke:#6FB0F0;stroke-width:3;transition:stroke .4s}
.ix-robo .rc-c{fill:url(#r15k);stroke:#1E4A9A;stroke-width:3}
.ix-robo .rc-r1{fill:none;stroke:rgba(150,200,255,.35);stroke-width:1.6}
.ix-robo .rc-glow{opacity:.25;transform-box:fill-box;transform-origin:center;pointer-events:none}
.ix-robo .rcore.hot .rc-r2{stroke:#F0C873;stroke-width:5}
.ix-robo .rc-t{fill:#fff;font:800 16px "Manrope",system-ui,sans-serif;text-anchor:middle;letter-spacing:0}
.ix-robo .rcore.gold .rc-c{fill:url(#r15c);stroke:#F0C873}
.ix-robo .rcore.gold .rc-r2,.ix-robo .rcore.gold .rc-r3{stroke:#F0C873}
.ix-robo .rcore.gold .rc-r1{stroke:rgba(255,255,255,.7)}
.ix-robo .rcore.gold .rc-t{fill:#0B2E73}
.ix-robo .rline{stroke:#7CC4FF;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(124,196,255,.9));transition:stroke .6s}
.ix-robo.x .rline,.ix-robo svg.golden .rline{stroke:#F0C873;filter:drop-shadow(0 0 5px rgba(240,200,115,.9))}
.ix-robo svg.golden .rm .rm-c{stroke:#F0C873}
.ix-robo .rdrag{stroke:#7CC4FF;stroke-width:5;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 5px rgba(124,196,255,.9));pointer-events:none}
.ix-robo .rpulse{fill:#fff;filter:drop-shadow(0 0 7px #9ED2FF);opacity:0;pointer-events:none}
.ix-robo .rwave{fill:none;stroke:#F0C873;stroke-width:5;opacity:0;filter:drop-shadow(0 0 7px rgba(240,200,115,.8));pointer-events:none}
.ix-robo .rprog rect{fill:rgba(12,34,82,.9);stroke:#6FB0F0;stroke-width:2}
.ix-robo .rprog text{fill:#fff;font:800 20px "Manrope",system-ui,sans-serif;text-anchor:middle;transform-box:fill-box;transform-origin:center}
.ix-robo .rwin{fill:#fff;font:800 17px "Manrope",system-ui,sans-serif;opacity:0;letter-spacing:0;filter:drop-shadow(0 0 7px rgba(240,200,115,.9));pointer-events:none}

/* уровень 16: книга «ИСТОРИЯ Д.А.», воспоминания, печать */

/* ---------- финал 2.0: сценка семи сотрудников и поздравление ---------- */
#party,#fin2{background:#0E2150}
.pt-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;user-select:none;-webkit-user-drag:none}
.pt-stage{position:absolute;inset:0;overflow:hidden}
.pt-figs{position:absolute;inset:0;pointer-events:none;z-index:2}
.pt-fig{position:absolute;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.pt-fig img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;animation:ptsway 3.4s ease-in-out infinite}
.pt-fig:nth-child(2n) img{animation-delay:-1.1s}.pt-fig:nth-child(3n) img{animation-delay:-2.2s}
.pt-fig::after{content:"";position:absolute;left:6%;right:6%;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(6,12,38,.55),rgba(6,12,38,0) 70%);z-index:-1}
.pt-fig.in{opacity:1;transform:none}
.pt-fig.dim{filter:brightness(.7) saturate(.85)}
.pt-fig.on::before{content:"";position:absolute;left:-30%;right:-30%;top:10%;bottom:-6%;z-index:-1;background:radial-gradient(ellipse at 50% 80%,rgba(255,226,150,.5),rgba(255,226,150,0) 66%)}
@keyframes ptsway{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.35deg)}}
.pt-label{position:absolute;z-index:3;left:0;right:0;top:calc(var(--st) + 22px);text-align:center;font:700 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#E9D3A5;opacity:0;transition:opacity .8s ease}
.pt-label.on{opacity:.95}
.pt-bub{position:absolute;z-index:5;padding:12px 16px 14px;border-radius:20px;background:#fff;color:#0B2A63;border:2px solid #D9B25F;box-shadow:0 12px 28px rgba(4,12,40,.5);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pt-bub.on{opacity:1;transform:none}
.pt-bub::after{content:"";position:absolute;left:var(--tail,50%);bottom:-11px;width:18px;height:18px;margin-left:-9px;background:#fff;border-right:2px solid #D9B25F;border-bottom:2px solid #D9B25F;border-radius:0 0 5px 0;transform:rotate(45deg)}
.pt-bub i{display:block;font:700 11.5px/1 var(--sans);font-style:normal;letter-spacing:.1em;color:#9C7326;margin-bottom:7px}
.pt-bub span{display:block;font:600 17px/1.32 var(--sans)}
.pt-bub.shout{text-align:center;padding:14px 12px 16px}
.pt-bub.shout b{display:block;font:700 35px/1.05 var(--serif);letter-spacing:.01em;background:linear-gradient(180deg,#0B2A63 20%,#1B5BB8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pt-conf{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.pt-skip{position:absolute;z-index:6;right:14px;bottom:calc(var(--sb) + 14px);min-height:44px;padding:0 16px;border-radius:22px;border:1px solid rgba(255,255,255,.38);background:rgba(10,24,70,.55);color:#fff;font:600 14px var(--sans)}
#fin2{display:flex;flex-direction:column;padding-top:calc(var(--st) + 36px)}
.f2-title{position:relative;z-index:2;flex:0 0 auto;margin:0;padding:0 14px;text-align:center;font-family:var(--serif);font-weight:700;color:#FFF3CF;text-shadow:0 2px 12px rgba(5,14,45,.65)}
.f2-title span{display:block;font-size:calc(27px*var(--k));line-height:1.1;letter-spacing:.01em}
.f2-card{position:relative;z-index:2;flex:0 0 auto;margin:0 16px;padding:14px 16px 15px;border-radius:var(--r-card);background:rgba(255,255,255,.96);color:#12295C;box-shadow:0 12px 30px rgba(4,12,40,.42),0 0 0 1.5px rgba(201,160,90,.9)}
.f2-card p{margin:0;font:500 16.5px/1.42 var(--sans)}.f2-card p+p{margin-top:.5em}
@media (prefers-reduced-motion:reduce){.pt-fig img,.pt-fig.jump img{animation:none!important}.pt-fig,.pt-bub{transition:none}}
.ix-robo svg{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
.ix-robo .rm,.ix-robo .rcore{touch-action:none}
.ix-robo .rcore.await .rc-r2{stroke:#F0C873;stroke-width:5}

/* ---------- кнопка звука ---------- */
.snd{position:absolute;z-index:60;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy,#0B2E73);background:rgba(255,255,255,.92);border:1.5px solid rgba(201,160,90,.7);box-shadow:0 2px 8px rgba(9,45,104,.14);
  top:calc(var(--st) + 17px);right:calc(var(--sr) + 18px);-webkit-tap-highlight-color:transparent;transition:opacity .2s,transform .12s}
.snd:active{transform:scale(.94)}.snd.off{color:#8A97B3}
#app[data-scr="question"] .snd,#app[data-scr="result"] .snd{right:calc(var(--sr) + 86px);top:calc(var(--st) + 18px);width:34px;height:34px}
#app[data-scr="map"] .snd{top:calc(var(--st) + 66px)}
#app[data-scr="party"] .snd,#app[data-scr="fin2"] .snd,#app[data-scr="final"] .snd{right:auto;left:calc(var(--sl) + 8px);top:calc(var(--st) + 6px);background:rgba(10,24,70,.55);color:#fff;border-color:rgba(255,255,255,.4);width:34px;height:34px}

/* уровень 3: увеличенный офис после верного ответа */
.ix-sq.one{grid-template-columns:minmax(0,1fr);justify-items:center}
.ix-sq.one .ix-sqc{width:calc(var(--sq,100%) + 14px);max-width:100%}
.ix-bub3{position:absolute;left:50%;z-index:6;width:max-content;max-width:86%;box-sizing:border-box;padding:8px 14px 9px;border-radius:14px;background:#fff;border:1.5px solid #C9A05A;box-shadow:0 5px 14px rgba(9,45,104,.28);font:700 14px/1.25 "Manrope",system-ui,sans-serif;color:#0B2E73;text-align:center;opacity:0}

#rStory strong{font-weight:800}
#rStory .rs-p{display:block}#rStory .rs-p+.rs-p{margin-top:.6em}

/* единое отображение вопросов во всех уровнях: заголовок, ситуация и вопрос по центру, аккуратные переносы, без выхода за края */
#question h2,#question .situation,#question .ask{text-align:center;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
#question .situation{padding:0 6px}
#question h2{padding:0 4px}

/* финал: текст по центру в карточке, значок заработанных звёзд на верхней кромке карточки */
.f2-card p{text-align:center;text-wrap:balance}
/* уровень 4: крупные карточки ответов (только .ix-n4): одинаковая высота, предмет заполняет карточку без искажений */
.ix-n4{--c4:clamp(88px,14.4vh,126px)}
.ix-n4 .ix-tc{height:var(--c4);min-height:var(--c4);padding:8px 14px 8px 10px;gap:12px}
.ix-n4 .ix-ti.t4{width:calc((var(--c4) - 14px) * 1.3);height:calc(var(--c4) - 14px)}
.ix-n4 .ix-ti.t4 img{width:100%;height:100%;object-fit:contain}
.ix-n4 .ix-tcs{gap:10px}

/* уровень 5: внутренняя «полная» картинка со своим кадрированием */
.ix-map-in{position:absolute;aspect-ratio:1672/941}
/* уровень 5 (класс хоста ix-n6): три ответа одинаковой высоты вместо четырёх, карта сохраняет крупное кадрирование */
.ix-n6 .ix-tcs{display:grid;grid-auto-rows:1fr;gap:9px}
.ix-n6 .ix-tc{align-self:stretch;height:100%;box-sizing:border-box;min-height:clamp(62px,10.4vh,92px);padding:9px 14px 9px 12px;gap:12px}
@media (max-height:720px){.ix-n6 .ix-tc{min-height:0;padding:6px 12px 6px 10px}.ix-n6 .ix-tcs{gap:7px}}

/* уровень 9: четыре компактные иллюстрированные карточки 2×2 под парком (класс хоста ix-n10) */
.ix-g9{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.ix-gc9{display:flex;flex-direction:column;align-items:stretch;min-width:0;box-sizing:border-box;padding:5px 5px 7px;border-radius:16px;background:linear-gradient(180deg,#fff,#F6F9FE);border:1.5px solid #D6E4F7;box-shadow:0 3px 10px rgba(9,45,104,.1);text-align:center;transition:transform .14s,opacity .25s,box-shadow .25s}
.ix-gc9:active{transform:scale(.985)}
.ix-gi9{display:block;aspect-ratio:3/2;border-radius:11px;overflow:hidden;background:#fff}
.ix-gi9 img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;-webkit-user-drag:none}
.ix-gc9 b{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 3px 0;font:700 14px/1.22 "Manrope",system-ui,sans-serif;color:#0B2E73}
.ix-gc9.gold{border-color:var(--gold);background:linear-gradient(180deg,#FFFCF3,#FFF3D6);box-shadow:0 0 0 3px rgba(201,160,90,.25),0 6px 16px rgba(201,160,90,.32)}
.ix-gc9.blue{border-color:var(--blue);background:linear-gradient(180deg,#F7FAFF,#E6F0FD);box-shadow:0 0 0 3px rgba(23,97,191,.16),0 6px 16px rgba(23,97,191,.26)}
.ix-gc9.dim{opacity:.6}

/* уровень 11 (класс хоста ix-n12): три карточки с крупной иллюстрацией слева (≈33 % ширины) и полным текстом справа */
.ix-n12 .ix-tcs{gap:8px}
.ix-n12 .ix-tc{min-height:0;padding:5px 12px 5px 5px;gap:12px;align-items:center}
.ix-ti.t11{width:32.5%;max-width:132px;aspect-ratio:420/368;height:auto;border-radius:11px;background:#fff}
.ix-ti.t11 img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ix-n12 .ix-tc .ix-tt{flex:1;min-width:0}

/* уровень 13 (класс хоста ix-n14): три карточки с иллюстрацией слева (≈33 %) и полным текстом справа; карта не сжимается */
.ix-n14 .ix-tcs{gap:8px}
.ix-n14 .ix-tc{min-height:0;padding:5px 12px 5px 5px;gap:12px;align-items:center}
.ix-ti.t13{width:35%;max-width:146px;aspect-ratio:780/520;height:auto;border-radius:11px;background:#fff}
.ix-ti.t13 img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ix-n14 .ix-tc .ix-tt{flex:1;min-width:0}

/* принтер-шутка (уровень 15) */
.ix-prn{position:absolute;left:50%;bottom:3%;width:30%;aspect-ratio:240/150;z-index:5;pointer-events:none;transform:translateX(-50%);opacity:0}
.ix-prn svg{display:block;width:100%;height:100%;overflow:visible}
.ix-prn .prn-led{animation:prnled .3s steps(2) infinite}
@keyframes prnled{50%{opacity:.25}}
.prn-sheet{position:absolute;left:34%;top:56%;width:25%;height:34%;border-radius:2px;background:#fff;border:1.5px solid #9DB6DA;box-shadow:0 2px 5px rgba(9,45,104,.25);opacity:0;background-image:linear-gradient(#C9D8EE,#C9D8EE),linear-gradient(#C9D8EE,#C9D8EE),linear-gradient(#C9D8EE,#C9D8EE);background-size:70% 2px,55% 2px,62% 2px;background-position:50% 24%,50% 46%,50% 68%;background-repeat:no-repeat}
.ix-prnb{top:6%;max-width:90%}

/* уровень 16: развилка (класс хоста ix-n17) */
.ix-n17{justify-content:flex-start}
.ix-fork{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;background:#8FC1F0}
.ix-fork .fk-bg{position:absolute;left:0;width:100%;display:block;pointer-events:none}
.fk-cards{position:absolute;left:2.5%;right:2.5%;top:1.6%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.5%;z-index:4}
.fk-card{box-sizing:border-box;padding:6px 7px 6px;border-radius:12px;background:linear-gradient(180deg,#FFFFFF,#F4F8FF);border:1.5px solid #4A86D6;box-shadow:inset 0 3px 0 var(--gold),0 5px 12px rgba(9,45,104,.2);font:700 12.5px/1.18 "Manrope",system-ui,sans-serif;color:#0B2E73;text-align:center;text-wrap:balance;display:flex;align-items:center;justify-content:center;min-height:0;transition:opacity .25s,box-shadow .25s,transform .12s}
.fk-card:active{transform:scale(.985)}
.fk-card.gold{border-color:var(--gold);background:linear-gradient(180deg,#FFFCF3,#FFF0CC);box-shadow:inset 0 3px 0 var(--gold),0 0 0 3px rgba(201,160,90,.3),0 6px 16px rgba(201,160,90,.4)}
.fk-card.blue{background:linear-gradient(180deg,#F7FAFF,#E2EEFD);box-shadow:0 0 0 3px rgba(23,97,191,.2),0 6px 16px rgba(23,97,191,.28)}
.fk-card.dim{opacity:.6}
.fk-hint{position:absolute;left:50%;top:29%;transform:translateX(-50%);z-index:4;padding:4px 11px 5px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(74,134,214,.7);color:#0B2E73;font:700 12px/1.2 "Manrope",system-ui,sans-serif;white-space:nowrap;pointer-events:none;animation:fkpulse 1.8s ease-in-out infinite}
@keyframes fkpulse{50%{transform:translateX(-50%) scale(1.04)}}
.fk-da{position:absolute;pointer-events:none;z-index:3;-webkit-user-drag:none}
.fk-glow{position:absolute;z-index:2;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,150,.7),rgba(255,226,150,0));opacity:0;pointer-events:none}
.fk-say{position:absolute;left:50%;top:31%;width:84%;transform:translateX(-50%);z-index:5;box-sizing:border-box;padding:10px 14px 11px;border-radius:16px;background:#fff;border:1.5px solid #C9A05A;box-shadow:0 6px 18px rgba(9,45,104,.3);font:700 15px/1.3 "Manrope",system-ui,sans-serif;color:#0B2E73;text-align:center;opacity:0;pointer-events:none}
/* уровень 16: сценарный текст компактнее, абзацы по центру, «Что выбрать?» не нужен */
#question.fork #qAsk{display:none}
#question.fork .situation{font-size:15px;line-height:1.3}
.situation .sp{display:block}.situation .sp+.sp{margin-top:.34em}

#question.fork .situation strong{font-weight:800;color:#0B2E73}
#question.fork .situation .sp+.sp{margin-top:.22em}

/* персональные поздравления: ФИО отдельной подписью, итоговое поздравление в две строки + девиз */
.pt-bub i{display:inline-block;font:700 12px/1.25 var(--sans);letter-spacing:.04em;color:#7A5714;background:#FBF1D6;border-radius:10px;padding:4px 9px;margin-bottom:8px}
.pt-bub.shout b{font-size:29px;line-height:1.1}
.pt-bub.shout b.sub{font:700 19px/1.2 var(--serif);margin-top:8px;background:none;-webkit-text-fill-color:#9C7326;color:#9C7326}
.pt-fig.in.on{transform:scale(1.07);transform-origin:50% 100%}
.pt-fig.dim{filter:brightness(.62) saturate(.8)}

/* общее поздравление: одна строка-заголовок, компактное облачко */
.pt-bub.shout{padding:16px 14px 18px}
.pt-bub.shout b{font-size:31px;line-height:1.12;text-wrap:balance}
/* итоговый экран без сотрудников: заголовок, карточка, блок звёзд, кнопка — по центру */
#fin2{display:block;overflow:hidden;padding:0}
.f2-wrap{position:relative;z-index:2;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:14px;padding:calc(var(--st) + 44px) 16px calc(var(--sb) + 22px)}
.f2-title{margin:0 0 2px}
.f2-title span{font-size:min(calc(25px*var(--k)),6.9vw);white-space:nowrap}
.f2-card{margin:0;padding:18px 18px 20px}
.f2-card p{font:500 17px/1.42 var(--sans);text-wrap:balance}
.f2-card p+p{margin-top:.75em}
.f2-card p strong{font-weight:800;color:#0B2E73}
.f2-card p.last{margin-top:.95em;font:700 italic 23px/1.15 var(--serif);color:#9C7326}
.f2-score{align-self:center;display:flex;align-items:center;gap:10px;margin:2px 0 0;padding:8px 26px 9px;border-radius:999px;background:linear-gradient(180deg,#0F3E86,#082A60);box-shadow:0 6px 16px rgba(4,12,40,.45),0 0 0 2px #E4C477;color:#fff;font:700 18px var(--sans)}
.f2-score i{font-style:normal;color:#F4CF6A;font-size:32px;line-height:1}
.f2-score b{font-size:34px;line-height:1;font-weight:800}
.f2-score span{font-size:22px;font-weight:700;color:#CFE0FA}
.f2-wrap .cta{padding:0 14px;white-space:nowrap;margin-top:2px}.f2-wrap .cta .txt{font-size:16px}

/* ---------- уплотнение интерактивных уровней (fitIx в game.js): ни прокрутки, ни миниатюр ---------- */
.ix-ti.t2{width:calc(88px*var(--ci,1));height:calc(68px*var(--ci,1))}
.ix-ti.t4{width:calc(80px*var(--ci,1));height:calc(62px*var(--ci,1))}
.ix-ti.t11{width:calc(31%*var(--ci,1));max-width:calc(126px*var(--ci,1))}
.ix-ti.t13{width:calc(33%*var(--ci,1));max-width:calc(138px*var(--ci,1))}
.ix-n12 .ix-tc{padding:4px 11px 4px 4px;gap:11px}.ix-n12 .ix-tcs{gap:7px}
.ix-n14 .ix-tc{padding:4px 11px 4px 4px;gap:11px}.ix-n14 .ix-tcs{gap:7px}
/* уровень 9: компактный блок 2×2 сразу под парком */
.ix-g9{gap:7px;margin-top:8px}
.ix-gc9{padding:4px 4px 5px;border-radius:14px}
.ix-gi9{aspect-ratio:auto;height:calc(clamp(52px,9vh,80px)*var(--ci,1))}
.ix-gc9 b{padding:4px 3px 0;font-size:13.5px;line-height:1.2}
#question.ix.fit2{--ci:.96}#question.ix.fit3{--ci:.9}#question.ix.fit4{--ci:.8}
#question.ix.fit2 .ix-tc{min-height:46px;padding-top:5px;padding-bottom:5px}
#question.ix.fit3 .ix-tc{min-height:42px;padding-top:3px;padding-bottom:3px;padding-left:10px}
#question.ix.fit4 .ix-tc{min-height:40px;padding-top:2px;padding-bottom:2px;padding-left:9px}
#question.ix.fit3 .ix-n12 .ix-tc,#question.ix.fit3 .ix-n14 .ix-tc,#question.ix.fit4 .ix-n12 .ix-tc,#question.ix.fit4 .ix-n14 .ix-tc{padding-left:3px}
#question.ix.fit3 .ix-tcs,#question.ix.fit4 .ix-tcs{gap:5px}
#question.ix.fit3 .ix-g9,#question.ix.fit4 .ix-g9{gap:5px;margin-top:5px}
#question.ix.fit3 .ix-n4{--c4:clamp(66px,10.4vh,94px)}#question.ix.fit4 .ix-n4{--c4:clamp(58px,9.2vh,80px)}
#question.ix.fit3 #qIx,#question.ix.fit4 #qIx{gap:5px;margin-top:3px}
#question.ix.fit4 h2{display:block;margin-bottom:4px}
.ix-photo .ix-lbl.ix-pl.gold{box-shadow:0 0 0 3px rgba(201,160,90,.28),0 6px 16px rgba(201,160,90,.4)}
@media (max-height:640px){
  .f2-wrap{gap:9px;padding-top:calc(var(--st) + 38px);padding-bottom:calc(var(--sb) + 12px)}
  .f2-card{padding:13px 14px 14px}.f2-card p{font-size:16px;line-height:1.34}.f2-card p+p{margin-top:.55em}.f2-card p.last{margin-top:.6em;font-size:21px}
  .f2-score{padding:4px 22px 5px}.f2-score i{font-size:26px}.f2-score b{font-size:28px}
}

/* уровень 16: последняя фраза — одна строка, жирная, финальный акцент */
#question.fork .situation .sp:last-child{white-space:nowrap;font-weight:800;color:#0B2E73;font-size:clamp(12px,3.75vw,16px);margin-top:.5em}

/* уровень 16: картинка обрезается во внутренней обёртке, сама сцена не обрезает карточки; карточки шире картинки на ≈ 13 % с каждой стороны, но не шире экрана */
.ix-fork{overflow:visible;background:none}
.fk-clip{position:absolute;inset:0;overflow:hidden;border-radius:20px;background:#8FC1F0}
.fk-cards{left:50%;right:auto;transform:translateX(-50%);width:var(--fkw,100%);gap:12px;top:1.4%}
.fk-card{padding:6px 8px 7px;font-size:12.5px;line-height:1.2}

/* самые низкие/узкие экраны (320×568): пятый уровень уплотнения интерактивных уровней — ничего не обрезается, шрифт карточек ≥ 14 px */
#question.ix.fit5{--fs:15px;--ts:.74;--ci:.7}
#question.ix.fit5 .qbar{min-height:calc(var(--st) + 44px)}
#question.ix.fit5 .qbody{padding-top:2px}
#question.ix.fit5 .situation{line-height:1.2}
#question.ix.fit5 .ask{margin:2px 0 3px;font-size:16px}
#question.ix.fit5 h2{margin:0 0 3px}
#question.ix.fit5 .ix-tc{min-height:36px;padding:2px 9px 2px 4px;font-size:14.5px;line-height:1.15;gap:8px}
#question.ix.fit5 .ix-tc .ix-tn{width:22px;height:22px}
#question.ix.fit5 .ix-tcs{gap:4px}
#question.ix.fit5 #qIx{gap:3px;margin-top:2px}
/* узкие экраны: подпись уровня и кнопка звука не накладываются */
@media (max-width:359px){
  .qlevel{font-size:11.5px;letter-spacing:.02em;white-space:nowrap}
  .qbar{gap:6px;padding-left:calc(var(--sl) + 8px);padding-right:calc(var(--sr) + 10px)}
  #app[data-scr="question"] .snd,#app[data-scr="result"] .snd{right:calc(var(--sr) + 78px)}
}
#replayBtn .txt{white-space:nowrap;font-size:16px}
@media (max-width:359px){#replayBtn .txt{font-size:14.5px}}

/* уровень 16: сцена «Отпуск не согласован» */
.fk-bar{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;filter:drop-shadow(0 3px 4px rgba(9,45,104,.28))}
.fk-say2{top:15%;width:92%;padding:8px 12px 10px;text-align:center}
.fk-say2 small{display:inline-block;margin-bottom:4px;padding:2px 9px 3px;border-radius:9px;background:#EAF1FB;color:#1761BF;font:800 11px/1.1 "Manrope",system-ui,sans-serif;letter-spacing:.08em}
.fk-say2 span{display:block}
.fk-say2.co{border:2px solid #C9A05A;background:linear-gradient(180deg,#FFFDF5,#FFF1CC);box-shadow:0 0 0 3px rgba(201,160,90,.3),0 8px 20px rgba(201,160,90,.45);font-weight:800;font-size:16px;color:#0B2E73}
.fk-say2.co small{background:#C9A05A;color:#fff}
.fk-say2.tiny{padding:4px 8px 5px;border-radius:12px}.fk-say2.tiny small{display:none}