/* ═══════════════ Montserrat (bundled, offline) ═══════════════ */
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;
  src:url(assets/fonts/montserrat-cyrillic-400.woff2) format('woff2'),
      url(assets/fonts/montserrat-latin-400.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;
  src:url(assets/fonts/montserrat-cyrillic-500.woff2) format('woff2'),
      url(assets/fonts/montserrat-latin-500.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;
  src:url(assets/fonts/montserrat-cyrillic-600.woff2) format('woff2'),
      url(assets/fonts/montserrat-latin-600.woff2) format('woff2')}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;
  src:url(assets/fonts/montserrat-cyrillic-700.woff2) format('woff2'),
      url(assets/fonts/montserrat-latin-700.woff2) format('woff2')}

:root{
  --blue:#0236DA;      /* акцент      */
  --blue-mut:#3C5AB9;  /* приглушённый */
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:Montserrat,sans-serif;-webkit-font-smoothing:antialiased;user-select:none}

#viewport{
  position:fixed;inset:0;overflow:hidden;
  background:#c9d6f2;
  display:flex;align-items:center;justify-content:center;
}

/* координатное пространство макета 1080×1920 */
#stage{
  position:relative;width:1080px;height:1920px;flex:none;
  transform:scale(var(--s,1));transform-origin:center center;
  border-radius:0;overflow:hidden;
  background:
    radial-gradient(120% 80% at 15% 0%, #EAF1FF 0%, rgba(234,241,255,0) 55%),
    radial-gradient(100% 60% at 100% 100%, #C6D5FF 0%, rgba(198,213,255,0) 60%),
    linear-gradient(160deg,#DCE6F7 0%,#DFE8F7 45%,#D5DFFC 100%);
  box-shadow:0 40px 120px rgba(20,40,110,.35);
}

/* ─── экраны ─── */
.screen{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .35s ease;z-index:0}
.screen.active{opacity:1;visibility:visible;z-index:1}

/* ─── общий хедер ─── */
.logo{position:absolute;left:80px;top:80px;width:385px;height:90px;z-index:3}
.q-theme{position:absolute;right:80px;top:104px;
  font-weight:500;font-size:36px;color:var(--blue-mut);letter-spacing:2px;z-index:3}

/* ─── кнопки ─── */
.btn{position:absolute;height:144px;border-radius:1000px;border:none;cursor:pointer;
  font-family:Montserrat;font-weight:700;font-size:48px;
  display:flex;align-items:center;justify-content:center;transition:transform .1s,filter .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(180deg,#1E52F0,#0530CE);color:#fff;
  box-shadow:0 18px 40px rgba(5,48,206,.35)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:#F7FAFF;color:var(--blue);border:3px solid #C9D8FF;
  box-shadow:0 14px 34px rgba(30,60,130,.14)}

/* ═══════════ 00 · Настройки (запуск) ═══════════ */
[data-screen=settings] .set-title{position:absolute;left:80px;top:250px;
  font-weight:700;font-size:82px;color:var(--blue);letter-spacing:-1px}
[data-screen=settings] .set-sub{position:absolute;left:80px;top:392px;
  font-weight:500;font-size:30px;color:var(--blue-mut)}
.set-block{position:absolute;left:80px;width:920px}
.set-block.b-pav{top:560px}
.set-block.b-idle{top:900px}
.set-label{font-weight:700;font-size:42px;color:var(--blue);margin-bottom:30px}
.set-hint{font-weight:500;font-size:26px;color:var(--blue-mut);margin-left:12px}
.set-options{display:flex;gap:24px;flex-wrap:wrap}
.set-opt{height:118px;padding:0 46px;border-radius:1000px;cursor:pointer;
  font-family:Montserrat;font-weight:700;font-size:40px;
  background:#F7FAFF;color:var(--blue);border:3px solid #C9D8FF;
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s,filter .15s,background .15s,color .15s}
.set-opt:active{transform:scale(.97)}
.set-opt.sel{background:linear-gradient(180deg,#1E52F0,#0530CE);color:#fff;border-color:transparent;
  box-shadow:0 14px 34px rgba(5,48,206,.3)}
/* ползунок времени бездействия (5 сек – 1 мин) */
.idle-slider-wrap{width:800px}
.idle-value{font-weight:700;font-size:54px;color:var(--blue);margin-bottom:26px}
.idle-slider{-webkit-appearance:none;appearance:none;width:100%;height:20px;border-radius:1000px;cursor:pointer;
  background:linear-gradient(90deg,#0530CE 0%,#1E52F0 var(--fill,45%),#C9D8FF var(--fill,45%),#C9D8FF 100%)}
.idle-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:74px;height:74px;border-radius:50%;background:#fff;border:9px solid #0530CE;
  box-shadow:0 10px 26px rgba(5,48,206,.35)}
.idle-slider::-moz-range-thumb{width:74px;height:74px;border-radius:50%;background:#fff;border:9px solid #0530CE;
  box-shadow:0 10px 26px rgba(5,48,206,.35)}
.idle-ends{display:flex;justify-content:space-between;margin-top:20px;
  font-weight:500;font-size:26px;color:var(--blue-mut)}
.set-start{left:80px;width:920px;top:1650px}

/* ═══════════ 01 · Заставка ═══════════ */
[data-screen=splash] .splash-t1{position:absolute;left:80px;top:250px;
  font-weight:700;font-size:108px;color:var(--blue);letter-spacing:-2px}
[data-screen=splash] .splash-t2{position:absolute;left:80px;top:400px;
  font-weight:700;font-size:78px;line-height:1.12;color:var(--blue)}
[data-screen=splash] .splash-sub{position:absolute;left:80px;top:632px;
  font-weight:500;font-size:30px;color:var(--blue-mut)}
.splash-hero{position:absolute;left:80px;top:760px;width:920px;height:809px;z-index:2}
.hero-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* кольцо-клетка (верх+низ) движется как одно целое, сердце колышется внутри неё */
.layer-bottom,.layer-top{animation:floatCage 5.4s ease-in-out infinite}
.layer-middle{animation:floatHeart 4s ease-in-out infinite}
@keyframes floatCage{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes floatHeart{0%,100%{transform:translateY(-6px)}50%{transform:translateY(-40px)}}
.splash-btn{left:80px;top:1696px;width:920px}

/* ═══════════ 02 · Выбор темы ═══════════ */
.choose-title{position:absolute;left:80px;top:255px;font-weight:700;font-size:74px;color:var(--blue)}
.choose-sub{position:absolute;left:80px;top:397px;font-weight:500;font-size:30px;color:var(--blue-mut)}
.wheel-wrap{position:absolute;left:80px;top:646px;width:920px;height:920px}
/* колесо собрано из 4 секторов; при выборе один увеличивается, остальные приглушаются */
.sector{position:absolute;left:0;top:0;width:920px;height:920px;object-fit:contain;
  transform-origin:center center;
  transition:transform .5s cubic-bezier(.34,1.35,.5,1),opacity .35s ease,filter .35s ease}
/* раздвижка секторов от центра на 10px в каждую из 4 сторон (смещением, чтобы не мешать scale при выборе) */
.sector[data-sect="stress"]{top:-10px}   /* верхний  */
.sector[data-sect="move"]{left:10px}     /* правый   */
.sector[data-sect="food"]{top:10px}      /* нижний   */
.sector[data-sect="body"]{left:-10px}    /* левый    */
.wheel-wrap.choosing .sector{opacity:.7;filter:brightness(.95) saturate(.9)}
.wheel-wrap.choosing .sector.sel{opacity:1;transform:scale(1.1);z-index:4;
  filter:drop-shadow(0 14px 30px rgba(5,48,206,.3))}
.wheel-hit{position:absolute;inset:0;background:transparent;border:none;cursor:pointer;z-index:6}
.hit-stress{clip-path:polygon(50% 50%,7% 7%,93% 7%)}
.hit-move{clip-path:polygon(50% 50%,93% 7%,93% 93%)}
.hit-food{clip-path:polygon(50% 50%,93% 93%,7% 93%)}
.hit-body{clip-path:polygon(50% 50%,7% 93%,7% 7%)}
.choose-footer{position:absolute;left:80px;top:1806px;width:920px;text-align:center;
  font-weight:500;font-size:30px;color:var(--blue-mut)}

/* ═══════════ 03–05 · Вопрос ═══════════ */
.q-ecg{position:absolute;left:0;top:1014px;width:1080px;height:906px;object-fit:contain;opacity:.9;z-index:1}
.q-step{position:absolute;left:80px;top:198px;font-weight:400;font-size:36px;color:var(--blue-mut);z-index:2}
.q-track{position:absolute;left:80px;top:259px;width:920px;height:25px;border-radius:29px;
  background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(60,90,185,.12);overflow:hidden;z-index:2}
.q-fill{height:100%;border-radius:29px;background:var(--blue);width:0;transition:width .9s cubic-bezier(.45,0,.2,1)}
.q-text{position:absolute;left:80px;top:392px;width:920px;text-align:center;
  font-weight:700;font-size:48px;line-height:1.16;color:var(--blue);z-index:2;
  transition:opacity .45s ease,transform .45s ease}
.q-grid{position:absolute;left:80px;top:669px;width:920px;height:520px;
  display:grid;grid-template-columns:452px 452px;grid-template-rows:252px 252px;gap:16px;z-index:2;
  transition:opacity .45s ease,transform .45s ease}
/* плавный переход между вопросами */
.q-swap .q-text,.q-swap .q-grid{opacity:0;transform:translateY(28px)}
.q-card{border-radius:64px;border:none;cursor:pointer;padding:24px;
  background:linear-gradient(180deg,#FFFFFF 0%,#EAF0FF 100%);
  box-shadow:0 16px 34px rgba(30,60,130,.16);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:Montserrat;font-weight:600;font-size:36px;line-height:1.15;color:var(--blue);
  transition:transform .1s,filter .15s}
.q-card:hover{filter:brightness(1.02)}
.q-card:active{transform:scale(.98)}
.q-card.correct{background:linear-gradient(180deg,#DDE8FF,#C7D8FF);box-shadow:0 0 0 4px var(--blue) inset}
.q-card.wrong{background:linear-gradient(180deg,#FFE2E0,#FFC9C6);box-shadow:0 0 0 4px #E0342C inset;color:#C22}

/* overlay ответа */
.q-overlay{position:absolute;inset:0;z-index:5;
  background:linear-gradient(180deg,rgba(8,18,54,.72),rgba(8,18,54,.82));
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s}
.q-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.q-pop{position:absolute;left:80px;top:669px;width:920px;min-height:560px;
  border-radius:64px;background:#fff;box-shadow:0 30px 80px rgba(4,20,80,.4)}
.pop-head{position:absolute;left:80px;top:80px;width:760px;height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.pop-verdict{font-weight:700;font-size:52px;color:var(--blue);white-space:nowrap;flex:none}
.pop-verdict.bad{color:#E0342C}
.pop-pill{display:flex;align-items:center;gap:12px;height:72px;padding:0 30px;
  border-radius:100px;background:#DDE7FB;white-space:nowrap}
.pill-label{font-weight:600;font-size:24px;color:var(--blue-mut)}
.pill-value{font-weight:700;font-size:30px;color:var(--blue)}
.pop-explain{position:absolute;left:80px;top:196px;width:760px;
  font-weight:500;font-size:32px;line-height:1.32;color:var(--blue-mut)}
.pop-next{left:80px;top:336px;width:760px}

/* ═══════════ 06 · Результат ═══════════ */
.res-lead{position:absolute;left:80px;top:270px;width:920px;text-align:center;
  font-weight:700;font-size:38px;color:var(--blue)}
.res-big{position:absolute;left:0;top:420px;width:1080px;text-align:center;
  font-weight:700;font-size:120px;color:var(--blue);letter-spacing:-2px}
.res-sub{position:absolute;left:80px;top:578px;width:920px;text-align:center;
  font-weight:600;font-size:50px;color:var(--blue)}
.res-note{position:absolute;left:80px;top:762px;width:920px;display:flex;gap:26px;align-items:flex-start;
  font-weight:500;font-size:32px;line-height:1.28;color:var(--blue-mut)}
.res-warn{width:26px;height:98px;object-fit:contain;flex:none}
.res-card{position:absolute;left:80px;top:1077px;width:920px;height:295px;border-radius:64px;
  background:linear-gradient(180deg,#FFFFFF,#EEF3FF);box-shadow:0 18px 44px rgba(30,60,130,.16);
  display:flex;align-items:center;padding:0 60px;
  font-weight:500;font-size:40px;line-height:1.3;color:var(--blue)}
.res-card b{font-weight:700}
.res-bookmark{position:absolute;right:70px;top:-16px;width:67px;height:90px}
.res-map{left:80px;top:1512px;width:920px}
.res-home{left:80px;top:1696px;width:920px}

/* ═══════════ 07 · Навигация (Карта 1 → Карта 2) ═══════════ */
.map-title{position:absolute;left:95px;top:255px;font-weight:700;font-size:74px;color:var(--blue);z-index:4}
.map-scene{position:absolute;inset:0;z-index:1;opacity:1;transition:opacity .9s ease}
.map-scene2{opacity:0;z-index:2}
[data-screen=map].to2 #scene1{opacity:0}
[data-screen=map].to2 #scene2{opacity:1}
.map-plan{position:absolute;object-fit:contain}
.scene-label{position:absolute;height:113px;border-radius:100px;background:#F7FAFF;
  border:4px solid var(--blue);display:flex;align-items:center;justify-content:center;padding:0 30px;
  font-weight:700;font-size:42px;color:var(--blue);white-space:nowrap}
.scene-line{position:absolute;background:var(--blue);border-radius:3px}
.scene-marker{position:absolute;width:140px;height:140px}
.map-home{left:80px;top:1696px;width:920px;z-index:4}
/* анимированная дорожка-маршрут (по раскадровке) */
.map-route{position:absolute;left:0;top:0;width:1080px;height:1920px;z-index:3;pointer-events:none}
/* Бегущая волна следов задаётся через Web Animations API в buildRoute() (app.js):
   одновременно видно 3 пары, остальные полностью исчезают. Базовая прозрачность — 0. */
.route-foot{position:absolute;width:52px;height:52px;
  background-position:center;background-size:contain;background-repeat:no-repeat;
  opacity:0}

/* ─── toast ─── */
#toast{position:fixed;left:50%;bottom:6%;transform:translateX(-50%) translateY(20px);
  background:rgba(5,48,206,.95);color:#fff;padding:14px 28px;border-radius:100px;
  font-weight:600;font-size:18px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:100}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}