/* @vendor-fonts:start */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(static/fonts/montserrat-cyrillic-ext.0f7f5f2f.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(static/fonts/montserrat-cyrillic.a187b077.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(static/fonts/montserrat-latin-ext.54d9a78b.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(static/fonts/montserrat-latin.06b16db7.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: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(static/fonts/montserrat-cyrillic-ext.0f7f5f2f.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(static/fonts/montserrat-cyrillic.a187b077.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(static/fonts/montserrat-latin-ext.54d9a78b.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(static/fonts/montserrat-latin.06b16db7.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: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(static/fonts/montserrat-cyrillic-ext.0f7f5f2f.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(static/fonts/montserrat-cyrillic.a187b077.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(static/fonts/montserrat-latin-ext.54d9a78b.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(static/fonts/montserrat-latin.06b16db7.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: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(static/fonts/montserrat-cyrillic-ext.0f7f5f2f.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(static/fonts/montserrat-cyrillic.a187b077.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(static/fonts/montserrat-latin-ext.54d9a78b.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(static/fonts/montserrat-latin.06b16db7.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; }
/* @vendor-fonts:end */
/* ══════════ ДИЗАЙН 24.09 — финальный макет (Figma, кадры шириной 320) ══════════
   --u — один пиксель макета. Экран шире 320 — всё растёт пропорционально, как в макете;
   дальше 480 (десктопный Telegram, веб ВКонтакте) не растёт. */
:root{
  --city:url("static/img/city.c48ce265.png");
  --karat:url("static/img/karat.104f1893.png");
  --tasks-hero:url("static/img/tasks-hero.ade34364.jpg");
  --rewards-hero:url("static/img/rewards-hero.e0e5f7bf.jpg");
  --wheel-rotunda:url("static/img/wheel-rotunda.6e296561.jpg");
  --wheel-boat:url("static/img/wheel-boat.3f473a03.jpg");
}
:root{
  --u:calc(min(100vw, 480px) / 320);
  --bg:#29282E;            /* фон экранов */
  --bg-path:#2E2B31;       /* фон «Пути» — как у подложки */
  --card:#353840;          /* карточки */
  --tile:#535157;          /* плашки под картинки */
  --tile-line:#909090;
  --line:rgba(255,255,255,.1);
  --line2:rgba(255,255,255,.3);
  --white:#FFFFFF;
  --grey:#9DA2AC;
  --dim:#707683;
  --ink:#1D1F24;           /* меню, таблетки */
  --orange:#FB7809;
  --gold:#F6D179;
  --glow:rgba(255,249,191,.33);
  --pad:calc(var(--u) * 16);
  --r:calc(var(--u) * 10);
  --hdr-h:calc(var(--u) * 72);
  --nav-h:calc(var(--u) * 56);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --app-h:100vh;           /* высота окна; где браузер умеет — видимая (dvh), см. ниже */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* прежние имена — чтобы экраны, не перерисованные макетом, сами взяли новую палитру */
  --graphite:var(--bg); --slate:var(--card); --slate-hi:#40444D; --pearl:var(--white);
  --mist:var(--grey); --gold-lt:var(--gold); --rowan:var(--orange);
  --silver:#E4E5E9; --silver-dp:#8A8F99; --sapphire:#3A5CC4; --ok:#4FA97A;
}
@supports (height:100dvh){:root{--app-h:100dvh}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);color:var(--white);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  font-size:calc(var(--u) * 12);line-height:1.35;
  overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
h1,h2,h3{font-family:'Montserrat',system-ui,sans-serif;font-weight:600;margin:0;letter-spacing:-.01em}
img{-webkit-user-drag:none;user-select:none}

/* ---------- оболочка ---------- */
#app{max-width:480px;margin:0 auto;min-height:100%;position:relative;background:var(--bg)}
#app.on-path{background:var(--bg-path)}
#main{position:relative;z-index:1;
  padding-top:var(--hdr-h);padding-bottom:calc(var(--nav-h) + var(--safe-b) + var(--u) * 14)}
#app.on-path #main{padding-top:0}
.tab{display:none;padding:calc(var(--u) * 26) var(--pad) calc(var(--u) * 56)}
.tab#tab-path{padding:0}
.tab.on{display:block;animation:tabIn .32s var(--ease-out)}
@keyframes tabIn{from{opacity:0;transform:translateY(calc(var(--u) * 8))}to{opacity:1;transform:none}}

/* ---------- шапка ---------- */
#hdr{position:fixed;top:0;left:0;right:0;z-index:40;max-width:480px;margin:0 auto;
  height:calc(var(--hdr-h) + var(--safe-t));padding-top:var(--safe-t);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 78%,rgba(41,40,46,0) 100%);pointer-events:none}
#app.on-path #hdr{background:linear-gradient(180deg,rgba(46,43,49,.96) 0%,rgba(46,43,49,.9) 70%,rgba(46,43,49,0) 100%)}
#app.sheet-open #hdr{background:var(--bg)}
#hdr > *{pointer-events:auto}
#brand{position:absolute;left:50%;top:calc(var(--safe-t) + var(--u) * 8);transform:translateX(-50%);
  width:calc(var(--u) * 104);height:calc(var(--u) * 58);object-fit:contain;display:block}
.ava-wrap{position:absolute;left:calc(var(--u) * 16);top:calc(var(--safe-t) + var(--u) * 11.4);
  width:calc(var(--u) * 43.66);height:calc(var(--u) * 56);display:block}
.ava-box{position:relative;display:block;width:100%;height:calc(var(--u) * 43.66)}
.ava{display:grid;place-items:center;width:calc(var(--u) * 43.66);height:calc(var(--u) * 43.66);border-radius:50%;
  background:#40444D;box-shadow:inset 0 0 0 calc(var(--u) * .5) rgba(255,255,255,.1);
  color:var(--gold);font-weight:600;font-size:calc(var(--u) * 18);line-height:1;padding-bottom:calc(var(--u) * 6)}
.lvl-badge{position:absolute;left:0;top:calc(var(--u) * 31.6);width:100%;height:calc(var(--u) * 14.55);
  border-radius:calc(var(--u) * 8);background:#1D1F23;box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--gold);
  display:grid;place-items:center;font-size:calc(var(--u) * 8);font-weight:600;color:var(--gold);
  letter-spacing:-.02em;white-space:nowrap;line-height:1}
.ava-hint{position:absolute;left:50%;top:calc(var(--u) * 50);transform:translateX(-50%);
  font-size:calc(var(--u) * 7);font-weight:600;color:var(--gold);white-space:nowrap;line-height:1;letter-spacing:-.02em}
.hdr-name{display:none}
.hdr-right{position:absolute;right:calc(var(--u) * 17.4);top:calc(var(--safe-t) + var(--u) * 11);
  display:flex;flex-direction:column;gap:calc(var(--u) * 5)}
.chip{position:relative;display:flex;align-items:center;justify-content:center;
  width:calc(var(--u) * 58.64);height:calc(var(--u) * 25);border-radius:calc(var(--u) * 15);
  background:var(--card);box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--line);
  font-size:calc(var(--u) * 11);font-weight:600;color:var(--white);letter-spacing:-.03em;white-space:nowrap;
  padding-left:calc(var(--u) * 14)}
.chip img{position:absolute;left:calc(var(--u) * 8);top:50%;transform:translateY(-50%);pointer-events:none}
#karatChip img{width:calc(var(--u) * 10.1);height:calc(var(--u) * 12.6)}
#ticketChip img{width:calc(var(--u) * 16);height:calc(var(--u) * 15);left:calc(var(--u) * 6)}
#ticketChip.hot{animation:chipPulse 2.6s ease-in-out infinite}
#ticketChip.hot::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 calc(var(--u) * .5) var(--orange),0 0 calc(var(--u) * 6) rgba(251,120,9,.55);
  opacity:0;animation:chipRing 2.6s ease-in-out infinite}
@keyframes chipPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes chipRing{0%,100%{opacity:0}50%{opacity:1}}
.chip .num{display:inline-block;min-width:1ch;text-align:center}
.chip.bump .num{animation:bump .5s var(--ease-spring)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- чат поддержки: плавающая кнопка над меню ---------- */
#chatBtn{position:fixed;z-index:38;right:max(calc(var(--u) * 12), calc((100vw - 480px) / 2 + var(--u) * 12));
  bottom:calc(var(--nav-h) + var(--safe-b) + var(--u) * 12);
  width:calc(var(--u) * 36);height:calc(var(--u) * 36);border-radius:50%;
  background:var(--ink);box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--line),0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(0,0,0,.45);
  display:grid;place-items:center}
#chatBtn svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18);fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
#chatBadge{position:absolute;top:calc(var(--u) * -3);right:calc(var(--u) * -3);min-width:calc(var(--u) * 15);height:calc(var(--u) * 15);
  padding:0 calc(var(--u) * 4);border-radius:calc(var(--u) * 8);background:var(--orange);color:#fff;
  font-size:calc(var(--u) * 9);font-weight:700;line-height:calc(var(--u) * 15);text-align:center}
#chatBadge[hidden]{display:none}
#app.sheet-open #chatBtn{display:none}
/* «i» на пути: путь — это настоящий браслет. Зеркально кнопке чата, только на «Пути» */
#infoBtn{position:fixed;z-index:38;left:max(calc(var(--u) * 12), calc((100vw - 480px) / 2 + var(--u) * 12));
  bottom:calc(var(--nav-h) + var(--safe-b) + var(--u) * 12);
  width:calc(var(--u) * 36);height:calc(var(--u) * 36);border-radius:50%;
  background:var(--ink);box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--line),0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(0,0,0,.45);
  display:none;place-items:center}
#app.on-path #infoBtn{display:grid}
#app.sheet-open #infoBtn{display:none}
#infoBtn svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18);fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round}
#infoBtn svg circle{fill:var(--gold);stroke:none}
#infoBtn:active{transform:scale(.94)}
/* пока «i» не открывали ни разу — мягко зовёт */
#infoBtn.hint::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 calc(var(--u) * 1) var(--gold);animation:infoHint 2.6s ease-out infinite}
@keyframes infoHint{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.55)}}

/* ---------- нижнее меню ---------- */
#nav{position:fixed;bottom:0;left:0;right:0;z-index:40;max-width:480px;margin:0 auto;
  height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:var(--ink);box-shadow:0 calc(var(--u) * -1) calc(var(--u) * 4) rgba(0,0,0,.1);
  display:grid;grid-template-columns:repeat(5,1fr)}
.nav-b{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:calc(var(--u) * 5);padding-bottom:calc(var(--u) * 10);color:var(--dim);
  font-size:calc(var(--u) * 8);font-weight:500;letter-spacing:.01em;transition:color .25s}
.nav-b svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20);stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-spring)}
.nav-b.on{color:var(--gold)}
.nav-b.on svg{transform:translateY(calc(var(--u) * -1.5)) scale(1.08)}
.nav-b::before{content:'';position:absolute;top:0;left:50%;width:calc(var(--u) * 22);height:calc(var(--u) * 2);
  margin-left:calc(var(--u) * -11);border-radius:0 0 calc(var(--u) * 2) calc(var(--u) * 2);background:var(--gold);
  transform:scaleX(0);transition:transform .3s var(--ease-out)}
.nav-b.on::before{transform:scaleX(1)}

/* ---------- общие детали ---------- */
.card{background:var(--card);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line);border-radius:var(--r);
  padding:calc(var(--u) * 12)}
.card + .card{margin-top:calc(var(--u) * 6)}
.muted{color:var(--grey)}
.tiny{font-size:calc(var(--u) * 10)}
.gold{color:var(--gold)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u) * 8);
  margin:calc(var(--u) * 20) 0 calc(var(--u) * 10)}
.sec-h h2{font-size:calc(var(--u) * 14);color:var(--white)}
.sec-h span{font-size:calc(var(--u) * 10);color:var(--grey)}
.btn{position:relative;display:block;width:100%;text-align:center;padding:calc(var(--u) * 13) calc(var(--u) * 12);
  border-radius:calc(var(--u) * 8);font-weight:600;font-size:calc(var(--u) * 13);letter-spacing:.01em;
  background:var(--orange);color:#fff;box-shadow:0 calc(var(--u) * 1) calc(var(--u) * 10) rgba(251,120,9,.35);
  transition:transform .12s,opacity .2s,background .2s}
.btn:active{transform:scale(.98)}
.btn.sec{background:transparent;color:var(--white);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line2)}
.btn.rowan{background:var(--orange);color:#fff}
.btn[disabled]{opacity:.45;pointer-events:none;box-shadow:none}
.pill{display:inline-flex;align-items:center;gap:calc(var(--u) * 4);font-size:calc(var(--u) * 9);font-weight:600;
  padding:calc(var(--u) * 3) calc(var(--u) * 8);border-radius:999px;background:#40444D;color:var(--grey);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.pill.gold{background:rgba(246,209,121,.14);color:var(--gold)}
.pill.sap{background:rgba(58,92,196,.2);color:#9DB2EE}
.pill.done{background:rgba(79,169,122,.16);color:#7BC9A0}
.note{background:rgba(251,120,9,.08);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(251,120,9,.28);
  border-radius:var(--r);padding:calc(var(--u) * 10) calc(var(--u) * 12);font-size:calc(var(--u) * 10.5);
  color:#F3C9A2;margin-top:calc(var(--u) * 12);line-height:1.45}
.warn{background:rgba(217,98,43,.11);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(217,98,43,.34);
  border-radius:var(--r);padding:calc(var(--u) * 10) calc(var(--u) * 12);font-size:calc(var(--u) * 10.5);
  color:#EDA98A;margin-top:calc(var(--u) * 12)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + var(--u) * 16);
  transform:translate(-50%,calc(var(--u) * 12));max-width:calc(min(100vw, 480px) - var(--u) * 32);
  background:var(--ink);box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--gold),0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(0,0,0,.4);
  color:var(--gold);padding:calc(var(--u) * 9) calc(var(--u) * 16);border-radius:999px;
  font-size:calc(var(--u) * 11);font-weight:600;z-index:90;opacity:0;pointer-events:none;
  transition:opacity .24s,transform .3s var(--ease-spring);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* заготовки экрана, пока данные в пути */
.skel{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r)}
.skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:skel 1.3s infinite}
@keyframes skel{to{transform:translateX(100%)}}

/* ══════════ ПУТЬ ══════════ */
#pathWrap{position:relative;background:var(--bg-path);overflow:hidden}
#pathSvg{display:block;width:100%;height:auto;touch-action:pan-y}
#pathSvg text,.lv-art svg text{font-family:'Montserrat',sans-serif;font-weight:500;font-size:27px;fill:#fff;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;user-select:none}
.node-hit{cursor:pointer}
.nd-lit{opacity:0}
.nd-lit.on{opacity:1}
.nd-lit.pop{animation:ndPop .9s var(--ease-spring) both;animation-delay:var(--d,0s)}
@keyframes ndPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.nd-lit,.dot-lit{transform-box:fill-box;transform-origin:center}
.dot-lit{opacity:0}
.dot-lit.on{opacity:1}
.dot-lit.pop{animation:dotPop .5s ease-out both;animation-delay:var(--d,0s)}
@keyframes dotPop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
.nd-cur{transform-box:fill-box;transform-origin:center;animation:curGlow 2.4s ease-in-out infinite}
@keyframes curGlow{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulseRing 2.4s ease-out infinite}
@keyframes pulseRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
/* веха — кольцо света вокруг медальона (25.09); у текущей — дышит */
.mile-glow{mix-blend-mode:screen;opacity:.8;transform-box:fill-box;transform-origin:center}
.mile-glow.pop{animation:glowIn .9s var(--ease-out) both;animation-delay:var(--d,0s)}
.mile-glow.cur{opacity:1;animation:glowBreath 3s ease-in-out infinite}
.mile-glow.cur.pop{animation:glowIn .9s var(--ease-out) var(--d,0s) both,glowBreath 3s ease-in-out calc(var(--d,0s) + .9s) infinite}
@keyframes glowIn{from{opacity:0;transform:scale(.7)}to{opacity:.8;transform:none}}
@keyframes glowBreath{0%,100%{opacity:.7;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
.gift-hit{cursor:pointer}
/* изделия: жёлтый пунктир бежит по контуру по часовой стрелке */
.tech-hit{cursor:pointer}
.tech-halo{fill:none;stroke:var(--gold);stroke-width:10;opacity:.08;filter:blur(3px)}
.tech-edge{fill:none;stroke:var(--gold);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:8 10;
  opacity:.85;animation:ants 6s linear infinite;animation-delay:calc(var(--i) * -.9s)}
@keyframes ants{to{stroke-dashoffset:-216}}
.tech-hit:active .tech-edge{opacity:1;stroke-width:3.6}
.tech-hit:active .tech-halo{opacity:.3}
.tech-fill{fill:transparent}
.spark{fill:#fff;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--gold))}
/* полоса отметки дня: липнет к низу, пока открыт «Путь» */
#ciBar{position:sticky;z-index:20;margin:calc(var(--u) * 12) var(--pad) 0;
  bottom:calc(var(--nav-h) + var(--safe-b) + var(--u) * 12)}
#ciBar:empty{display:none}
#ciBar .btn{height:calc(var(--u) * 44);padding:0;font-size:calc(var(--u) * 14);border-radius:calc(var(--u) * 8);
  box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(255,255,255,.85),0 calc(var(--u) * 1) calc(var(--u) * 13.5) calc(var(--u) * 3) rgba(255,243,218,.45);
  overflow:hidden}
#ciBar .btn::before{content:'';position:absolute;inset:0;background:var(--city) center bottom/ auto 100% repeat-x;
  mix-blend-mode:multiply;opacity:.9;pointer-events:none}
#ciBar .btn span{position:relative}
#ciBar .note{margin:0;text-align:center;background:rgba(29,31,36,.92);color:var(--gold);
  box-shadow:inset 0 0 0 calc(var(--u) * .5) rgba(246,209,121,.5)}
.btn.shine::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  background-size:250% 100%;animation:shine 2.8s ease-in-out infinite}
@keyframes shine{0%{background-position:130% 0}60%,100%{background-position:-30% 0}}

/* заставка нового уровня */
#lvlUp{position:fixed;inset:0;z-index:80;max-width:480px;margin:0 auto;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(246,209,121,.28),rgba(20,19,23,.9) 58%);
  animation:fadeIn .3s ease-out;cursor:pointer}
#lvlUp[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lu-box{text-align:center;padding:0 calc(var(--u) * 24)}
.lu-burst{position:relative;width:calc(var(--u) * 150);height:calc(var(--u) * 150);margin:0 auto calc(var(--u) * 14)}
.lu-burst::before{content:'';position:absolute;inset:calc(var(--u) * -40);border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(246,209,121,.28) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);
  animation:spin 14s linear infinite}
.lu-art{position:absolute;inset:0;border-radius:50%;background-repeat:no-repeat;
  box-shadow:0 0 0 calc(var(--u) * 2) var(--gold),0 0 calc(var(--u) * 30) rgba(246,209,121,.6);
  animation:luPop .8s var(--ease-spring) both}
.lu-num{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--u) * 56);font-weight:700;color:var(--gold);
  text-shadow:0 0 calc(var(--u) * 18) rgba(246,209,121,.7);animation:luPop .8s var(--ease-spring) both}
@keyframes luPop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.lu-box h2{font-size:calc(var(--u) * 22);color:#fff;animation:rise .5s .15s var(--ease-out) both}
.lu-box p{margin:calc(var(--u) * 6) 0 0;color:var(--gold);font-size:calc(var(--u) * 12);font-weight:600;
  animation:rise .5s .25s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(calc(var(--u) * 10))}to{opacity:1;transform:none}}
.lu-sp{position:absolute;width:calc(var(--u) * 6);height:calc(var(--u) * 6);border-radius:50%;background:var(--gold);
  left:50%;top:50%;animation:sparkOut 1.1s ease-out both;animation-delay:var(--d)}
@keyframes sparkOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;
  transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.2)}}

/* Каратики летят в шапку */
.fly{position:fixed;z-index:95;width:calc(var(--u) * 14);height:calc(var(--u) * 17);pointer-events:none;
  background:var(--karat) center/contain no-repeat;will-change:transform,opacity}

/* ══════════ ЗАДАНИЯ ══════════ */
.tk-hero{position:relative;height:calc(var(--u) * 100);border-radius:var(--r);overflow:hidden;
  background:var(--card) var(--tasks-hero) center/cover no-repeat;box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line)}
.tk-hero-t{position:absolute;left:calc(var(--u) * 12);top:calc(var(--u) * 14);width:calc(var(--u) * 150)}
.tk-hero h2{font-size:calc(var(--u) * 16);line-height:calc(var(--u) * 16);color:#fff}
.tk-hero p{margin:calc(var(--u) * 6) 0 0;font-size:calc(var(--u) * 10);line-height:calc(var(--u) * 11);color:var(--grey);
  width:calc(var(--u) * 132)}
.tk-hero b{display:block;margin-top:calc(var(--u) * 12);font-size:calc(var(--u) * 12);line-height:calc(var(--u) * 12);
  color:var(--orange);font-weight:600}
.tk-fs{position:relative;display:flex;gap:calc(var(--u) * 10);margin:calc(var(--u) * 20) calc(var(--u) * -16) 0;
  padding:calc(var(--u) * 3) calc(var(--u) * 16);overflow-x:auto;scrollbar-width:none}
.tk-fs::-webkit-scrollbar{display:none}
.tk-f{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;gap:calc(var(--u) * 10);
  height:calc(var(--u) * 25);padding:0 calc(var(--u) * 10);border-radius:calc(var(--u) * 15);
  background:var(--card);box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--line2);
  color:#fff;font-size:calc(var(--u) * 12);font-weight:600;letter-spacing:-.03em;white-space:nowrap;transition:box-shadow .25s}
.tk-f i{font-style:normal;font-size:calc(var(--u) * 10)}
.tk-f.on{box-shadow:inset 0 0 0 calc(var(--u) * .5) transparent}
.tk-fs-ind{position:absolute;z-index:2;top:calc(var(--u) * 3);left:0;height:calc(var(--u) * 25);width:0;
  border-radius:calc(var(--u) * 15);pointer-events:none;
  box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--orange),0 0 calc(var(--u) * 5.3) rgba(255,248,187,.25);
  transition:transform .38s var(--ease-spring),width .38s var(--ease-spring)}
.tk-prog{position:relative;height:calc(var(--u) * 126);margin-top:calc(var(--u) * 20);border-radius:var(--r);overflow:hidden;
  background:var(--card);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line)}
.tk-prog::after{content:'';position:absolute;left:calc(var(--u) * 126);top:calc(var(--u) * 62);
  width:calc(var(--u) * 183);height:calc(var(--u) * 68);background:var(--city) calc(var(--u) * -211) 0/calc(var(--u) * 394) 100% no-repeat;
  pointer-events:none}
/* кольца целиком в карточке при любом заполнении (правка 28.09): в макете центр на 41,5 от края, и внешняя
   дуга со свечением после половины срезалась слева. Теперь квадрат 108 (0,9 от макета): внешняя дуга —
   42,3 от центра со свечением ~4,5, центр — на 50 от края, до края остаётся ~3 */
.tk-rings{position:absolute;left:calc(var(--u) * -4);top:calc(var(--u) * 14);width:calc(var(--u) * 108);height:calc(var(--u) * 108);
  overflow:visible}
.tk-rings .ring{transition:stroke-dashoffset 1.4s var(--ease-out)}
.tk-rings .ring.go{stroke-dashoffset:var(--to)}
.tk-rings .ring.zero.go{opacity:0;transition:stroke-dashoffset 1.4s var(--ease-out),opacity .3s 1.1s}
.tk-prog-t .cnt{font-style:normal}
/* текст — справа от колец и не дальше 6 от правого края; самая длинная строка не влезает — fitProg()
   уменьшает шрифт строк через --fit, высота строк и отступы не меняются */
.tk-prog-t{position:absolute;left:calc(var(--u) * 105);right:calc(var(--u) * 6);top:calc(var(--u) * 21);display:flex;
  flex-direction:column;gap:calc(var(--u) * 17)}
.tk-prog-t b{display:block;font-size:calc(var(--u) * 14 * var(--fit, 1));line-height:calc(var(--u) * 16);font-weight:600;
  color:#fff;white-space:nowrap}
.tk-prog-t .c-gold{color:var(--gold)}
.tk-prog-t .c-orange{color:var(--orange)}
.tk-list{margin-top:calc(var(--u) * 15);display:flex;flex-direction:column;gap:calc(var(--u) * 5)}
.tk-card{position:relative;display:grid;grid-template-columns:calc(var(--u) * 56) 1fr;column-gap:calc(var(--u) * 14);
  min-height:calc(var(--u) * 98);padding:calc(var(--u) * 11) calc(var(--u) * 16) calc(var(--u) * 11) calc(var(--u) * 14);
  background:var(--card);border-radius:var(--r);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line);cursor:pointer;
  animation:cardIn .45s var(--ease-out) both;animation-delay:calc(var(--k, 0) * 45ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(calc(var(--u) * 12))}to{opacity:1;transform:none}}
.tk-card:active{transform:scale(.99)}
.tk-card.is-locked,.tk-card.is-done{opacity:.6}
.tk-card.has-badge{margin-top:calc(var(--u) * 7)}
.tk-badge{font-weight:400;position:absolute;left:calc(var(--u) * -5);top:calc(var(--u) * -5);min-width:calc(var(--u) * 64);height:calc(var(--u) * 14);
  padding:0 calc(var(--u) * 8);border-radius:calc(var(--u) * 9);background:var(--card);
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange);color:var(--orange);font-size:calc(var(--u) * 10);
  line-height:calc(var(--u) * 14);text-align:center;white-space:nowrap}
/* левая колонка карточки: картинка и под ней, посередине, Каратики за задание (правка 28.09) */
.tk-l{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 4);min-width:0}
.tk-l .tk-k{line-height:calc(var(--u) * 14);white-space:nowrap}
.tk-pic{position:relative;display:grid;place-items:center;width:calc(var(--u) * 56);height:calc(var(--u) * 56);
  border-radius:var(--r);background:var(--tile);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--tile-line),0 0 calc(var(--u) * 4.6) var(--glow);
  overflow:hidden}
.tk-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tk-pic svg{width:calc(var(--u) * 26);height:calc(var(--u) * 26);fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.tk-k{display:flex;align-items:center;gap:calc(var(--u) * 2);font-size:calc(var(--u) * 12);font-weight:600;color:var(--gold);
  letter-spacing:-.03em}
.tk-k img{width:calc(var(--u) * 10);height:calc(var(--u) * 11)}
.tk-r{display:flex;flex-direction:column;min-width:0}
.tk-t{font-size:calc(var(--u) * 12);line-height:calc(var(--u) * 14);font-weight:600;color:#fff}
.tk-note{margin:0;font-size:calc(var(--u) * 10);line-height:calc(var(--u) * 14);color:var(--grey);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8);margin-top:auto;
  padding-top:calc(var(--u) * 7)}
.tk-lv{font-size:calc(var(--u) * 10);color:#fff;white-space:nowrap}
.tk-go,.tk-st{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u) * 4);
  min-width:calc(var(--u) * 88);height:calc(var(--u) * 23);padding:0 calc(var(--u) * 10);border-radius:var(--r);
  font-size:calc(var(--u) * 10);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap}
.tk-go{background:var(--orange);color:#fff}
.tk-st{background:transparent;color:var(--grey);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line2)}
.tk-st svg{width:calc(var(--u) * 11);height:calc(var(--u) * 11)}
.tk-auto{color:var(--grey);box-shadow:none;text-transform:none;font-weight:500;letter-spacing:0;padding:0;min-width:0}
.tk-ok{color:#7BC9A0;box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(123,201,160,.45)}
.tk-wait{color:var(--gold);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(246,209,121,.4)}
.tk-card.just-done .tk-ok{animation:okPop .7s var(--ease-spring)}
@keyframes okPop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}

/* ══════════ НАГРАДЫ ══════════ */
.rw-top{position:relative;height:calc(var(--u) * 174);border-radius:var(--r);overflow:hidden;background:var(--card);
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line)}
.rw-top::before{content:'';position:absolute;inset:0;background:var(--rewards-hero) center bottom/100% auto no-repeat;opacity:.55}
.rw-top h1{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 12);
  margin-top:calc(var(--u) * 13);font-size:calc(var(--u) * 17);line-height:calc(var(--u) * 20);color:#fff}
.rw-top h1 img{width:calc(var(--u) * 14);height:calc(var(--u) * 17);animation:twinkle 3.2s ease-in-out infinite}
.rw-top h1 img:last-child{animation-delay:-1.6s}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);filter:none}50%{transform:scale(1.15) rotate(-6deg);
  filter:drop-shadow(0 0 calc(var(--u) * 4) rgba(246,209,121,.8))}}
.rw-top p{position:relative;width:calc(var(--u) * 213);margin:calc(var(--u) * 9) auto 0;text-align:center;
  font-size:calc(var(--u) * 14);line-height:calc(var(--u) * 14);font-weight:600;color:var(--orange)}
.rw-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 11) calc(var(--u) * 19);margin-top:calc(var(--u) * 20)}
.rw-t{position:relative;min-height:calc(var(--u) * 134);padding:calc(var(--u) * 12) calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line);
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;cursor:pointer;
  animation:cardIn .45s var(--ease-out) both;animation-delay:calc(var(--k, 0) * 60ms)}
.rw-pic{position:relative;display:grid;place-items:center;width:calc(var(--u) * 83);height:calc(var(--u) * 83);flex:0 0 auto;
  border-radius:var(--r);background:var(--tile);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--tile-line),0 0 calc(var(--u) * 4.6) var(--glow);
  overflow:hidden}
.rw-pic img{width:88%;height:88%;object-fit:contain}
.rw-pic .pz-ic{width:100%!important;height:100%!important;border-radius:0;background:transparent;box-shadow:none}
.rw-pic .pz-ic i{font-size:calc(var(--u) * 18)}
.rw-cap{margin-top:calc(var(--u) * 6);font-size:calc(var(--u) * 12);line-height:calc(var(--u) * 14);font-weight:600;color:#fff}
.rw-sub{margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 9.5);line-height:calc(var(--u) * 12);color:var(--grey)}
.rw-i{position:absolute;right:calc(var(--u) * 7);top:calc(var(--u) * 6);width:calc(var(--u) * 11);height:calc(var(--u) * 11)}
.rw-t.slot .rw-pic{background:rgba(83,81,87,.35);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(144,144,144,.35)}
.rw-t.slot .rw-pic svg{width:calc(var(--u) * 30);height:calc(var(--u) * 30);fill:none;stroke:var(--dim);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.rw-t.slot .rw-cap{color:var(--grey);font-weight:500;font-size:calc(var(--u) * 11)}
.rw-t.ready .rw-pic{box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange),0 0 calc(var(--u) * 6.8) calc(var(--u) * 1) var(--glow);
  animation:breathe 2.4s ease-in-out infinite}
.rw-t.ready .rw-pic svg{stroke:var(--orange)}
.rw-t.ready .rw-cap{color:var(--orange);font-weight:600}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.rw-t.fresh::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,244,214,.28) 50%,transparent 70%);background-size:260% 100%;
  animation:shine 3.4s ease-in-out infinite}

/* ══════════ ДРУЗЬЯ — по холсту Claude Design (артборд «Друзья», 25.09) ══════════
   Размеры холста (390 px) переведены в единицы макета: 1 px холста = 0,82 u. */
.fr2-h{margin:calc(var(--u) * 18) 0 calc(var(--u) * 8)}
.fr2-h:first-child{margin-top:0}
.fr2-h h2{font-size:calc(var(--u) * 14);line-height:1.2;font-weight:700;letter-spacing:.02em;color:#D2D3D7}
.fr2-card{background:#343841;border:1px solid #474C57;border-radius:calc(var(--u) * 11.5)}
.fr2-card + .fr2-card{margin-top:calc(var(--u) * 11.5)}
.fr2-hero{padding:calc(var(--u) * 13) calc(var(--u) * 11.5) calc(var(--u) * 11.5);text-align:center}
.fr2-scene{display:block;width:calc(var(--u) * 197);height:calc(var(--u) * 115);margin:0 auto}
.fr2-sun{transform-box:fill-box;transform-origin:center;animation:sunSpin 40s linear infinite}
@keyframes sunSpin{to{transform:rotate(360deg)}}
.fr2-birds{animation:birds 9s ease-in-out infinite}
@keyframes birds{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-1.5px)}}
.fr2-weed{transform-box:fill-box;transform-origin:center;animation:weedRock 5s ease-in-out infinite}
@keyframes weedRock{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(2px) rotate(12deg)}}
.fr2-label{display:block;margin-top:calc(var(--u) * 5);font-size:calc(var(--u) * 11.5);line-height:1.3;font-weight:700;color:#D2D3D7}
.fr2-figs + .fr2-label{margin-top:calc(var(--u) * 8.2)}
.fr2-sub{margin:calc(var(--u) * 3.3) 0 0;font-size:calc(var(--u) * 10.25);line-height:calc(var(--u) * 13.5);color:#9BA2AD}
.fr2-figs{display:flex;justify-content:center;align-items:flex-end;gap:calc(var(--u) * 5)}
.fr2-fig{display:flex;flex-direction:column;align-items:center;width:calc(var(--u) * 41)}
.fr2-fig.new{animation:hopIn .7s var(--ease-spring) both}
@keyframes hopIn{0%{transform:translateY(calc(var(--u) * -14)) scale(.5);opacity:0}100%{transform:none;opacity:1}}
.fr2-ava{display:grid;place-items:center;width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:50%;
  background:#3F444E;border:1px solid #474C57;font-size:calc(var(--u) * 11.5);font-weight:700;color:#E7C97E;line-height:1}
.fr2-sh{display:block;width:calc(var(--u) * 41);height:calc(var(--u) * 18.9);margin-top:calc(var(--u) * 1.6);
  fill:none;stroke:#9BA2AD;stroke-width:1.6;stroke-linecap:round}
.fr2-more{display:grid;place-items:center;width:calc(var(--u) * 24.6);height:calc(var(--u) * 24.6);margin-bottom:calc(var(--u) * 4.9);
  border-radius:50%;border:1px dashed #6E7684;font-size:calc(var(--u) * 14.8);font-weight:700;line-height:1;color:#9BA2AD}
.fr2-inv,.fr2-lad{padding:calc(var(--u) * 11.5)}
.fr2-t{display:block;font-size:calc(var(--u) * 13.1);line-height:1.3;font-weight:700;color:#F1F3F6}
.fr2-p{margin:calc(var(--u) * 4.9) 0 0;font-size:calc(var(--u) * 10.7);line-height:calc(var(--u) * 13.9);color:#9BA2AD}
.fr2-soc{display:grid;grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr));gap:calc(var(--u) * 6.6);margin-top:calc(var(--u) * 10.7)}
.fr2-soc button{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 7.4);
  padding:calc(var(--u) * 10.7) calc(var(--u) * 3.3) calc(var(--u) * 9);border-radius:calc(var(--u) * 9.8);
  background:#3F444E;border:1px solid #474C57;transition:border-color .25s,transform .12s}
.fr2-soc button:active{transform:scale(.97)}
.fr2-soc button.on{border-color:#C89A3C}
.fr2-soc img{display:block;width:calc(var(--u) * 37.7);height:calc(var(--u) * 37.7);border-radius:calc(var(--u) * 9.8)}
.fr2-soc span{font-size:calc(var(--u) * 9.4);font-weight:700;letter-spacing:.02em;color:#D2D3D7;white-space:nowrap}
.fr2-st{display:none;margin-top:calc(var(--u) * 9);text-align:center;font-size:calc(var(--u) * 9.8);line-height:1.35;font-weight:700;color:#4FA97A}
.fr2-st.on{display:block;animation:riseIn .35s var(--ease-out) both}
.fr2-tiles{display:grid;grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr));gap:calc(var(--u) * 5.7)}
.fr2-tile{text-align:center;padding:calc(var(--u) * 9) calc(var(--u) * 3.3);border-radius:calc(var(--u) * 9);
  background:#3F444E;border:1px solid #474C57}
.fr2-tile.hit{border-color:#C89A3C}
.fr2-tile b{display:block;font-size:calc(var(--u) * 15.6);line-height:1.2;font-weight:700;color:#F1F3F6}
.fr2-tile.hit b{color:#E7C97E}
.fr2-tile span{font-size:calc(var(--u) * 8.6);font-weight:600;color:#9BA2AD}
.fr2-lad .fr2-p{margin-top:calc(var(--u) * 9.8);font-size:calc(var(--u) * 10.25);line-height:calc(var(--u) * 13.5)}

/* ══════════ ПОДЭКРАНЫ (между шапкой и меню) ══════════ */
#sheet{position:fixed;left:0;right:0;z-index:30;max-width:480px;margin:0 auto;
  top:calc(var(--hdr-h) + var(--safe-t));bottom:calc(var(--nav-h) + var(--safe-b));background:var(--bg);
  display:none;flex-direction:column;animation:sheetIn .3s var(--ease-out)}
#sheet.on{display:flex}
@keyframes sheetIn{from{transform:translateX(calc(var(--u) * 24));opacity:0}to{transform:none;opacity:1}}
.sh-top{display:flex;align-items:center;gap:calc(var(--u) * 10);padding:calc(var(--u) * 14) var(--pad) calc(var(--u) * 10);
  flex:0 0 auto}
/* длинный заголовок («Кто будет рядом на вашем пути?», название задания) — в две строки, а не «…» */
.sh-top h2{flex:1;min-width:0;font-size:calc(var(--u) * 16);line-height:calc(var(--u) * 18);
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:balance}
/* подпись справа (только у карусели) — до двух строк: длинная «Билет за серию входов» не переносит заголовок,
   и шторка не прыгает, когда между прокрутками подряд подпись меняется на подпись следующего билета */
#shAside{flex:0 1 auto;max-width:calc(var(--u) * 86);font-size:calc(var(--u) * 10);line-height:1.2;font-weight:500;
  color:#fff;text-align:right;text-wrap:balance}
.sh-x{flex:0 0 auto;width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:50%;background:var(--card);
  box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--line);display:grid;place-items:center}
.sh-x svg{width:calc(var(--u) * 13);height:calc(var(--u) * 13);stroke:#fff;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.sh-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:calc(var(--u) * 4) var(--pad) calc(var(--u) * 22);
  -webkit-overflow-scrolling:touch}

/* награда уровня */
.rw-hero{text-align:center;padding:calc(var(--u) * 14) 0 calc(var(--u) * 16)}
.rw-badge{width:calc(var(--u) * 92);height:calc(var(--u) * 92);margin:0 auto calc(var(--u) * 14);
  animation:badgeIn .8s var(--ease-spring) both}
@keyframes badgeIn{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.rw-hero h1{font-size:calc(var(--u) * 19);margin-bottom:calc(var(--u) * 6)}
.rw-hero p{color:var(--grey);font-size:calc(var(--u) * 11.5);margin:0 auto;max-width:calc(var(--u) * 240)}
.task{display:flex;gap:calc(var(--u) * 10);align-items:center}
.task-ic{width:calc(var(--u) * 32);height:calc(var(--u) * 32);border-radius:calc(var(--u) * 8);background:#40444D;flex:0 0 auto;
  display:grid;place-items:center;font-size:calc(var(--u) * 14);color:var(--gold)}
.task-b{flex:1;min-width:0}
.task-b b{display:block;font-size:calc(var(--u) * 12);font-weight:600;line-height:1.3}
.task-rw{display:flex;gap:calc(var(--u) * 8);margin-top:calc(var(--u) * 3);font-size:calc(var(--u) * 10);color:var(--grey);font-weight:600}

/* ══════════ КАРУСЕЛЬ НАГРАД ══════════ */
/* Отсчёт по вертикали — от верха ленты призов: во фрейме Figma «рулетка» (15674:2474) это y 186, шапку фрейма
   заменяет шапка игры. Ротонда 236 → 50 (стоит над карточками, основание — у их верхнего края), пароход
   447 → 261 (между нижней меткой и кнопкой), метки 301 и 477, карточки 343 — на своих местах, «Крутить»
   579 → 393: на 64 ниже нижней метки. Вторая таблетка билетов (y 259) убрана 28.09 — её место остаётся ротонде. */
.cz{position:relative;overflow:hidden;margin:0 calc(var(--u) * -16);padding:0 var(--pad)}
.cz-bg1{position:absolute;left:calc(var(--u) * -1);top:calc(var(--u) * 50);width:calc(var(--u) * 175);height:calc(var(--u) * 180);
  background:var(--wheel-rotunda) left top/cover no-repeat;opacity:.65;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,#000 70%,transparent);mask:linear-gradient(90deg,#000 70%,transparent)}
.cz-bg2{position:absolute;left:calc(var(--u) * 72);top:calc(var(--u) * 261);width:calc(var(--u) * 256);height:calc(var(--u) * 137);
  background:var(--wheel-boat) center/cover no-repeat;opacity:.8;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.pz-grid{position:relative;height:calc(var(--u) * 61);border-radius:var(--r);background:var(--card);overflow:hidden;
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange),0 0 calc(var(--u) * 6.8) calc(var(--u) * 2) var(--glow)}
.pz-track{position:absolute;left:0;top:calc(var(--u) * 8.5);display:flex;gap:calc(var(--u) * 5);padding-left:calc(var(--u) * 11);
  animation:drift var(--drift, 40s) linear infinite;will-change:transform}
.pz-grid:active .pz-track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(calc(-1 * var(--shift)))}}
.pz-grid .pz,.pz-grid .pzc{flex:0 0 auto;width:calc(var(--u) * 44);height:calc(var(--u) * 44);border-radius:var(--r);
  background:var(--tile);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--tile-line),0 0 calc(var(--u) * 4.6) var(--glow);
  display:grid;place-items:center;overflow:hidden;padding:0}
.pz-grid .pz > :not(.pz-v),.pz-grid .pzc > :not(.pz-v){display:none}
.pz-grid .pz-v{width:100%;height:100%;display:grid;place-items:center}
.pz-grid .pz-v img{width:86%;height:86%;object-fit:contain}
.pz-grid .pz-ic,.pz-grid .pz-img{width:100%!important;height:100%!important;border-radius:0;background:transparent;box-shadow:none}
.pz-grid .pz-ic i{font-size:calc(var(--u) * 11)}
.pz-grid .pz-ic em{font-size:calc(var(--u) * 6)}
.pz-grid .pz-ic svg{width:60%;height:60%}
/* лента призов 0–61, метки 115 и 291–329: зазор 54 — прежние 12 + 25 таблетки + 17 */
.reel-wrap{position:relative;margin:calc(var(--u) * 54) calc(var(--u) * -16) 0;height:calc(var(--u) * 214);overflow:hidden}
.reel-mark{position:absolute;left:50%;z-index:4;width:calc(var(--u) * 31);height:calc(var(--u) * 38);margin-left:calc(var(--u) * -15.5);
  background:var(--karat) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 calc(var(--u) * 6) rgba(246,209,121,.45))}
.reel-mark.top{top:0}
.reel-mark.bot{bottom:0;transform:rotate(180deg)}
.reel-wrap.spinning .reel-mark{animation:markBlink .5s ease-in-out infinite alternate}
@keyframes markBlink{to{filter:drop-shadow(0 0 calc(var(--u) * 12) rgba(246,209,121,.95)) brightness(1.2)}}
.reel{position:absolute;left:0;top:calc(var(--u) * 49);display:flex;gap:calc(var(--u) * 10.5);will-change:transform}
.reel .pz{position:relative;flex:0 0 auto;width:calc(var(--u) * 89);height:calc(var(--u) * 116);border-radius:var(--r);
  background:var(--card);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--tile-line),0 0 calc(var(--u) * 3.4) calc(var(--u) * 2) var(--glow);
  display:flex;flex-direction:column;align-items:center;padding:calc(var(--u) * 11) calc(var(--u) * 5) 0;text-align:center;
  transition:transform .6s var(--ease-spring),background .4s,box-shadow .4s}
.reel .pz-v{width:calc(var(--u) * 63);height:calc(var(--u) * 63);display:grid;place-items:center;flex:0 0 auto}
.reel .pz-v img{width:100%;height:100%;object-fit:contain;filter:blur(calc(var(--u) * 1.2));transition:filter .4s,transform .6s var(--ease-spring)}
.reel .pz-ic,.reel .pz-img{width:calc(var(--u) * 54)!important;height:calc(var(--u) * 54)!important}
.reel .pz-n{margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 11);line-height:calc(var(--u) * 11);font-weight:600;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel .pz-s{margin-top:calc(var(--u) * 3);font-size:calc(var(--u) * 9);line-height:calc(var(--u) * 10);color:var(--grey);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.reel .pz.mid,.reel .pz.hit{transform:scale(1.12);background:var(--tile);z-index:2;
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange),0 0 calc(var(--u) * 6.8) calc(var(--u) * 2) var(--glow)}
.reel .pz.mid .pz-v img,.reel .pz.hit .pz-v img{filter:none;transform:scale(1.25) translateY(calc(var(--u) * -6))}
.reel .pz.hit{animation:winLift .9s var(--ease-spring) both}
@keyframes winLift{0%{transform:scale(1.12) rotateY(0)}45%{transform:scale(1.18) translateY(calc(var(--u) * -8)) rotateY(180deg)}
  100%{transform:scale(1.12) rotateY(360deg)}}
/* «Крутить» — как в макете: на 64 ниже нижней метки, над самым меню. На низком экране кнопка поднимается
   к метке (не ближе 14), чтобы не уходить под меню; 457 = 329 до низа метки + 50 кнопки + 52 заголовка
   шторки + 4 и 22 её отступов. Совсем низкий экран — шторка прокручивается. */
.cz-go{position:relative;margin-top:max(calc(var(--u) * 14), min(calc(var(--u) * 64),
  calc(var(--app-h) - var(--hdr-h) - var(--safe-t) - var(--nav-h) - var(--safe-b) - var(--u) * 457)))}
#spinBtn{height:calc(var(--u) * 50);padding:0;font-size:calc(var(--u) * 16);border-radius:calc(var(--u) * 8);overflow:hidden;
  box-shadow:inset 0 0 0 calc(var(--u) * 1) #fff,0 calc(var(--u) * 1) calc(var(--u) * 13.5) calc(var(--u) * 3) rgba(255,243,218,.7)}
#spinBtn::before{content:'';position:absolute;inset:0;background:var(--city) center bottom/auto 100% repeat-x;mix-blend-mode:multiply;
  pointer-events:none}
#spinBtn span{position:relative}
#spinBtn:not([disabled])::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:250% 100%;
  animation:shine 2.6s ease-in-out infinite}
#spinBtn[disabled]{opacity:.55}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.confetti i{position:absolute;left:50%;top:45%;width:calc(var(--u) * 7);height:calc(var(--u) * 9);
  background:var(--karat) center/contain no-repeat;animation:confetti 1.4s ease-out both;animation-delay:var(--d)}
@keyframes confetti{0%{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.1) rotate(var(--r))}}
.won{position:relative;display:flex;align-items:center;gap:calc(var(--u) * 12);margin-top:calc(var(--u) * 14);padding:calc(var(--u) * 12);
  background:rgba(251,120,9,.1);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange);border-radius:var(--r);
  animation:rise .5s var(--ease-out) both}
.won b{display:block;font-size:calc(var(--u) * 15);color:#fff;margin-top:calc(var(--u) * 2)}
.won .won-sub{display:block;font-style:normal;font-size:calc(var(--u) * 10.5);color:var(--grey);margin-top:calc(var(--u) * 2)}
.won-l{font-size:calc(var(--u) * 9);font-weight:700;letter-spacing:.08em;color:var(--orange)}
.won .pz-v{width:calc(var(--u) * 56);height:calc(var(--u) * 56);flex:0 0 auto;border-radius:var(--r);background:var(--tile);
  display:grid;place-items:center;overflow:hidden}
.won .pz-v img{width:90%;height:90%;object-fit:contain}
/* визуал призов */
.pz-img{display:block;border-radius:calc(var(--u) * 8);overflow:hidden;flex:0 0 auto;position:relative;background:var(--card)}
.pz-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pz-ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:calc(var(--u) * 8);flex:0 0 auto;background:#40444D}
.pz-ic i{font-style:normal;font-size:calc(var(--u) * 13);font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em}
.pz-ic em{font-style:normal;font-size:calc(var(--u) * 7.5);color:var(--grey)}
.pz-ic .amt{font-size:calc(var(--u) * 9);color:var(--gold);font-weight:700}
.pz-ic svg{width:calc(var(--u) * 22);height:calc(var(--u) * 22)}
.pz-ic.tech{padding:3px}
.pz-ic.tech svg{width:100%;height:100%}
.pz-ic.cert i{color:#B9C8F5}
.pz-ic.bonus i{color:#E4E5E9}
.pz-ic.disc i{color:#D7B6EE;font-size:calc(var(--u) * 15)}
.pz-ic.karat{background:rgba(246,209,121,.12)}

/* сертификат */
.cert-code{margin-top:calc(var(--u) * 10);padding:calc(var(--u) * 10) calc(var(--u) * 12);border-radius:var(--r);
  border:1px dashed var(--gold);background:rgba(246,209,121,.08);text-align:center}
.cert-code span{display:block;font-size:calc(var(--u) * 9);color:var(--grey);letter-spacing:.05em;text-transform:uppercase}
.cert-code b{display:block;margin-top:calc(var(--u) * 4);font-size:calc(var(--u) * 16);letter-spacing:.08em;color:var(--gold);word-break:break-all}
.cert-inline b{color:var(--gold);letter-spacing:.05em}

/* ══════════ ПРОФИЛЬ, ИСТОРИЯ, ПРАВИЛА ══════════ */
.pf-head{display:flex;align-items:center;gap:calc(var(--u) * 12);margin-bottom:calc(var(--u) * 14)}
.pf-head .ava{width:calc(var(--u) * 52);height:calc(var(--u) * 52);font-size:calc(var(--u) * 20);padding:0}
.pf-head b{font-size:calc(var(--u) * 15)}
.pf-head span{display:block;font-size:calc(var(--u) * 10);color:var(--gold);margin-top:calc(var(--u) * 2)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 6)}
.pf-hist-h{align-items:center}
/* та же таблетка, что в шапке: размер, картинка, число; правый край — на одной линии с ней */
.k-chip{flex:0 0 auto;margin-right:calc(var(--u) * 1.4)}
.sec-h .k-chip,.sec-h .k-chip .num{font-size:calc(var(--u) * 11);color:var(--white)}
.k-chip img{width:calc(var(--u) * 10.1);height:calc(var(--u) * 12.6)}
.stat{background:var(--card);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line);border-radius:var(--r);padding:calc(var(--u) * 10) calc(var(--u) * 12)}
.stat b{display:block;font-size:calc(var(--u) * 20);line-height:1.1;font-weight:700}
.stat span{font-size:calc(var(--u) * 9.5);color:var(--grey)}
.hist-filter{display:flex;gap:calc(var(--u) * 6);overflow-x:auto;margin:0 calc(var(--u) * -16) calc(var(--u) * 4);
  padding:0 calc(var(--u) * 16) calc(var(--u) * 2);scrollbar-width:none}
.hist-filter::-webkit-scrollbar{display:none}
.hist-filter button{flex:0 0 auto;height:calc(var(--u) * 25);padding:0 calc(var(--u) * 11);border-radius:calc(var(--u) * 15);
  background:var(--card);box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--line2);font-size:calc(var(--u) * 11);font-weight:600}
.hist-filter button.on{box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--orange),0 0 calc(var(--u) * 5.3) rgba(255,248,187,.25)}
.hist-day{font-size:calc(var(--u) * 10);font-weight:600;color:var(--grey);margin:calc(var(--u) * 12) calc(var(--u) * 2) calc(var(--u) * 6)}
.hist{display:flex;align-items:center;gap:calc(var(--u) * 10);padding:calc(var(--u) * 9) 0;border-top:1px solid var(--line)}
.card .hist:first-child{border-top:0;padding-top:calc(var(--u) * 2)}
.hist-d{width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:calc(var(--u) * 8);background:#40444D;display:grid;
  place-items:center;font-size:calc(var(--u) * 11);font-weight:700;color:var(--gold);flex:0 0 auto}
.hist-b{flex:1;min-width:0}
.hist-b b{display:block;font-size:calc(var(--u) * 11.5);font-weight:600}
.hist-t{text-align:right;flex:0 0 auto;font-size:calc(var(--u) * 9.5);color:var(--grey)}
.rules p{margin:0 0 calc(var(--u) * 8);font-size:calc(var(--u) * 11);color:#D5D8DE;line-height:1.55}
.rule-h{font-size:calc(var(--u) * 13);font-weight:600;margin:calc(var(--u) * 16) 0 calc(var(--u) * 6);color:var(--gold)}
.rule-h:first-child{margin-top:0}
.ord-line{display:flex;justify-content:space-between;gap:calc(var(--u) * 10);padding:calc(var(--u) * 9) 0;
  border-top:1px solid var(--line);font-size:calc(var(--u) * 11.5)}
.ord-line:first-child{border-top:0}
.ord-line b{font-weight:600;text-align:right}
.ord-total{display:flex;justify-content:space-between;align-items:baseline;padding:calc(var(--u) * 12) 0 calc(var(--u) * 4);
  border-top:1px solid var(--orange);margin-top:calc(var(--u) * 6)}
.ord-total b{font-size:calc(var(--u) * 19);font-weight:700}
.res{margin-bottom:calc(var(--u) * 8)}
.res-h{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u) * 10);padding-bottom:calc(var(--u) * 6)}
.res-h b{font-size:calc(var(--u) * 12);line-height:1.35}
.old-price{text-decoration:line-through;color:var(--grey);font-weight:600}
.save{color:#7BC9A0}

/* ══════════ ШТОРКА СНИЗУ (25.09): уровень, браслет, приз ══════════
   Как карточка изделия в первом прототипе: затемнение, лист выезжает снизу, ручка сверху, смахивается вниз. */
#pop{position:fixed;inset:0;z-index:70;max-width:480px;margin:0 auto;display:none;align-items:flex-end;
  background:rgba(18,19,22,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#pop.on{display:flex;animation:fadeIn .2s ease-out}
#pop.out{animation:fadeOut .2s ease-in forwards;pointer-events:none}
@keyframes fadeOut{to{opacity:0}}
#popCard{position:relative;width:100%;background:var(--card);border-radius:calc(var(--u) * 18) calc(var(--u) * 18) 0 0;
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line),0 calc(var(--u) * -10) calc(var(--u) * 30) rgba(0,0,0,.35);
  padding:calc(var(--u) * 12) var(--pad) calc(var(--safe-b) + var(--u) * 20);
  animation:sheetUp .32s cubic-bezier(.2,.9,.3,1);transition:transform .25s var(--ease-out);
  max-height:86%;overflow-y:auto;overscroll-behavior:contain;text-align:center}
#pop.out #popCard{animation:sheetDown .2s ease-in forwards}
@keyframes sheetUp{from{transform:translateY(calc(var(--u) * 44));opacity:0}to{transform:none;opacity:1}}
@keyframes sheetDown{to{transform:translateY(calc(var(--u) * 60));opacity:.4}}
#popCard .grab{width:calc(var(--u) * 38);height:calc(var(--u) * 4);border-radius:2px;background:rgba(255,255,255,.18);
  margin:0 auto calc(var(--u) * 12)}
#popCard h3{font-size:calc(var(--u) * 16);margin:calc(var(--u) * 10) 0 calc(var(--u) * 4)}
#popCard p{margin:0;font-size:calc(var(--u) * 11);line-height:1.5;color:var(--grey)}
#popCard.lv{text-align:left}
/* кусок пути крупно: тот же рисунок, что на экране, в своём окне */
#popCard .lv-art{position:relative;height:calc(var(--u) * 150);border-radius:calc(var(--u) * 12);overflow:hidden;
  background:var(--bg-path);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line);animation:fadeIn .5s ease-out both}
#popCard .lv-art svg{position:absolute;inset:0;width:100%;height:100%;animation:artZoom 1.6s var(--ease-out) both}
#popCard .lv-art::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 95% at 50% 50%,transparent 58%,rgba(22,21,26,.6) 100%)}
#popCard .lv-art.locked svg{filter:grayscale(.55) brightness(.78)}
@keyframes artZoom{from{transform:scale(1.14)}to{transform:none}}
#popCard .lv-lock{position:absolute;right:calc(var(--u) * 10);top:calc(var(--u) * 10);z-index:2;display:grid;place-items:center;
  width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;background:rgba(29,31,36,.85);
  box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--line2);color:var(--grey)}
#popCard .lv-lock svg{width:calc(var(--u) * 13);height:calc(var(--u) * 13)}
#popCard .lv-meta{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u) * 8);margin-top:calc(var(--u) * 14);
  animation:riseIn .42s .06s var(--ease-out) both}
#popCard .lv-pill{padding:calc(var(--u) * 4) calc(var(--u) * 9);border-radius:999px;background:#40444D;color:var(--grey);
  font-size:calc(var(--u) * 9);line-height:1.2;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
#popCard .lv-pill.hot{background:rgba(251,120,9,.16);color:var(--orange)}
#popCard .lv-pill.gold{background:rgba(246,209,121,.15);color:var(--gold)}
#popCard .lv-sub{font-size:calc(var(--u) * 10);font-weight:600;color:var(--dim);letter-spacing:.02em}
#popCard .lv-title{margin:calc(var(--u) * 10) 0 calc(var(--u) * 6);font-size:calc(var(--u) * 18);line-height:1.2;font-weight:600;
  color:#fff;text-wrap:balance;animation:riseIn .42s .1s var(--ease-out) both}
#popCard .lv-text{margin:0;font-size:calc(var(--u) * 11.5);line-height:1.55;color:#C4CAD4;text-wrap:pretty;
  animation:riseIn .42s .14s var(--ease-out) both}
#popCard .lv-cap{margin:calc(var(--u) * 16) 0 calc(var(--u) * 8);font-size:calc(var(--u) * 9);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
#popCard .lv-list{padding:0 calc(var(--u) * 12);border-radius:calc(var(--u) * 12);background:#2E3037;
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line);animation:riseIn .42s .18s var(--ease-out) both}
#popCard .lv-row{display:flex;align-items:center;gap:calc(var(--u) * 10);padding:calc(var(--u) * 10) 0}
#popCard .lv-row + .lv-row{border-top:1px solid var(--line)}
#popCard .lv-ic{flex:0 0 auto;display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);
  border-radius:calc(var(--u) * 9);background:#40444D;font-size:calc(var(--u) * 14)}
#popCard .lv-row b{display:block;font-size:calc(var(--u) * 12);font-weight:600;color:#fff}
#popCard .lv-row div span{display:block;margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 10);line-height:1.4;color:var(--grey)}
/* полученная награда: кнопка остаётся на месте, золотая, с галочкой */
#popCard .pop-btns .btn.sec[disabled]{opacity:1;color:var(--gold);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(246,209,121,.28)}
#popCard .pop-btns .btn.sec[disabled]::before{content:'\2713';margin-right:calc(var(--u) * 6)}
#popCard .lv-wheel{margin-top:calc(var(--u) * 16)}
#popCard .lv-note{margin-top:calc(var(--u) * 14)}
#popCard.two .pop-btns .btn:last-child{flex:1.35}
#popCard .pop-btns .btn{padding-left:calc(var(--u) * 8);padding-right:calc(var(--u) * 8);white-space:nowrap}
@keyframes riseIn{from{opacity:0;transform:translateY(calc(var(--u) * 8))}to{opacity:1;transform:none}}
.pop-pic{width:calc(var(--u) * 110);height:calc(var(--u) * 110);margin:0 auto;border-radius:calc(var(--u) * 14);background:var(--tile);
  display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--tile-line),0 0 calc(var(--u) * 8) var(--glow);
  animation:badgeIn .7s var(--ease-spring) both}
.pop-pic img{width:88%;height:88%;object-fit:contain}
.pop-pic .pz-ic{width:100%!important;height:100%!important;background:transparent;border-radius:0}
.pop-pic .pz-ic i{font-size:calc(var(--u) * 24)}
.pop-btns{display:flex;gap:calc(var(--u) * 8);margin-top:calc(var(--u) * 16)}
.pop-btns .btn{flex:1}
.pop-btns .btn{margin:0}

/* ══════════ ЭКРАН ПОВЕРХ ИГРЫ ══════════ */
#screen{position:fixed;inset:0;z-index:90;max-width:480px;margin:0 auto;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:calc(var(--u) * 24) var(--pad)}
#screen[hidden]{display:none}
.scr-card{width:100%;text-align:center;animation:rise .45s var(--ease-out) both}
.scr-card h2{font-size:calc(var(--u) * 19);font-weight:600;color:#fff;margin:0 0 calc(var(--u) * 10)}
.scr-card p{font-size:calc(var(--u) * 12);line-height:1.5;color:var(--grey);margin:0 0 calc(var(--u) * 20)}
.scr-brand{display:block;width:calc(var(--u) * 130);margin:0 auto calc(var(--u) * 22)}
.scr-text p{font-size:calc(var(--u) * 12);line-height:1.5;color:var(--grey);margin:0 0 calc(var(--u) * 20)}
.scr-note{color:var(--grey);opacity:.7;line-height:1.45;margin:calc(var(--u) * 12) 0 0;text-align:left}
.scr-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.scr-msg{color:var(--grey);min-height:1.4em;margin:calc(var(--u) * 12) 0 0}
.countdown{font-size:calc(var(--u) * 30);font-weight:700;color:var(--gold);margin:calc(var(--u) * 6) 0 calc(var(--u) * 16)}

/* ══════════ ЗАДАНИЯ: формы и тест ══════════ */
.form{margin-top:calc(var(--u) * 12)}
.field{display:block;margin-bottom:calc(var(--u) * 10)}
.field span{display:block;font-size:calc(var(--u) * 10);font-weight:600;color:var(--grey);margin-bottom:calc(var(--u) * 5)}
.field input{width:100%;padding:calc(var(--u) * 11) calc(var(--u) * 12);border-radius:var(--r);border:1px solid var(--line2);
  background:var(--card);color:#fff;font:inherit;font-size:16px;color-scheme:dark}
.field input:focus{outline:none;border-color:var(--orange)}
.task-msg{font-size:calc(var(--u) * 11);color:var(--grey);min-height:1.4em;margin:calc(var(--u) * 10) 0 0;text-align:center}
.quiz-meta{display:flex;justify-content:space-between;font-size:calc(var(--u) * 10);color:var(--grey);margin:calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 8)}
.quiz-q b{font-size:calc(var(--u) * 13);line-height:1.45;font-weight:600}
.quiz-opts{display:flex;flex-direction:column;gap:calc(var(--u) * 8);margin-top:calc(var(--u) * 10)}
.quiz-opt{text-align:left;padding:calc(var(--u) * 11) calc(var(--u) * 13)}
.quiz-wrong{margin-top:calc(var(--u) * 12)}
.quiz-wrong[hidden]{display:none}

/* ══════════ МАГАЗИН — конструктор изделия (макет 24.09) ══════════
   Сцена во весь экран между шапкой и меню; координаты — пиксели кадра 320 от верха вкладки
   (в макете это y − 131). Город внизу ложится режимом screen: фон картинки вычтен при сборке. */
#app.on-shop #main{padding-bottom:calc(var(--nav-h) + var(--safe-b))}
#app.on-shop #chatBtn{display:none}
.tab#tab-shop{padding:0}
.shop-closed{padding:calc(var(--u) * 26) var(--pad) 0}
.shop{--stage:calc(var(--app-h) - var(--hdr-h) - var(--safe-t) - var(--nav-h) - var(--safe-b));
  position:relative;overflow:hidden;isolation:isolate;background:var(--bg);
  height:max(calc(var(--u) * 432), var(--stage))}
.shop.pay{height:max(calc(var(--u) * 510), var(--stage))}
.shop.now,.shop.now *{transition:none!important}
.shop .ki{display:inline-block;width:.82em;height:1em;object-fit:contain;vertical-align:-.12em}

/* без z-index: иначе город смешивается сам с собой, а не со сценой */
.sp-city{position:absolute;inset:0;pointer-events:none}
.sp-city img{position:absolute;bottom:0;object-fit:cover;object-position:50% 100%;mix-blend-mode:screen}

.sp-h{position:absolute;left:calc(var(--u) * 16);top:calc(var(--u) * 24);margin:0;z-index:2;
  display:flex;align-items:flex-start;gap:calc(var(--u) * 1);
  font-size:calc(var(--u) * 16);font-weight:600;line-height:calc(var(--u) * 10);white-space:nowrap}
.sp-h .ki{width:calc(var(--u) * 9);height:calc(var(--u) * 11);vertical-align:0}
.sp-n{position:absolute;right:calc(var(--u) * 17);top:calc(var(--u) * 25);z-index:2;
  font-size:calc(var(--u) * 8);font-weight:600;line-height:calc(var(--u) * 10);color:rgba(255,255,255,.8);
  text-transform:uppercase;white-space:nowrap}
.sp-prog{position:absolute;left:calc(var(--u) * 16);top:calc(var(--u) * 55);width:calc(var(--u) * 285);
  height:calc(var(--u) * 3);display:flex;gap:calc(var(--u) * 5);transition:opacity .35s}
.sp-prog.off{opacity:0}
.sp-prog i{flex:1;position:relative;overflow:hidden;border-radius:calc(var(--u) * 1.5);background:rgba(255,255,255,.15)}
.sp-prog i::after{content:'';position:absolute;inset:0;background:#EC6C00;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.sp-prog i.on::after{transform:none}

.sp-tt{position:absolute;left:calc(var(--u) * 16);top:calc(var(--u) * 75);width:calc(var(--u) * 288);z-index:2;
  transition:top .45s var(--ease-out)}
.shop.pay .sp-tt{top:calc(var(--u) * 50)}
.sp-tt h3{margin:0;font-size:calc(var(--u) * 14);font-weight:600;line-height:calc(var(--u) * 10);letter-spacing:0}
.sp-tt p{margin:calc(var(--u) * 8) 0 0 calc(var(--u) * 1);max-width:calc(var(--u) * 285);
  font-size:calc(var(--u) * 10);line-height:calc(var(--u) * 10);color:var(--grey)}
.sp-tt p .ki{width:calc(var(--u) * 7.5);height:calc(var(--u) * 9);vertical-align:calc(var(--u) * -1)}
.sp-tt a{color:var(--grey);text-decoration:underline;text-underline-offset:calc(var(--u) * 1.5)}

.sp-back{position:absolute;left:calc(var(--u) * 16);top:calc(var(--u) * 123);z-index:6;
  width:calc(var(--u) * 32);height:calc(var(--u) * 21);transition:transform .15s}
.sp-back:active{transform:translateX(calc(var(--u) * -3))}
.sp-back img,.sp-info img{display:block;width:100%;height:100%;object-fit:contain}
.sp-info{position:absolute;left:calc(var(--u) * 245);top:calc(var(--u) * 123);z-index:6;
  width:calc(var(--u) * 25);height:calc(var(--u) * 25);animation:tipIn .4s var(--ease-out)}

/* кольцо лучей: рисует canvas, здесь только появление и уход */
.sp-ring{position:absolute;left:calc(var(--u) * 62);top:calc(var(--u) * 110);z-index:1;
  width:calc(var(--u) * 196);height:calc(var(--u) * 196);pointer-events:none;
  opacity:0;transform:scale(.62);transition:opacity .45s ease,transform .75s var(--ease-spring)}
.sp-ring.on{opacity:1;transform:none}
.sp-ring.burst:not(.on){transform:scale(1.35);transition:opacity .5s ease,transform .6s var(--ease-out)}
.sp-ring canvas{display:block;width:100%;height:100%}

.sp-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
#spOpts{z-index:4}
#spFoot{z-index:5}
#spOpts > *,#spFoot > *{pointer-events:auto}

/* части в круге: переезжают между шагами плавно */
.sp-part{position:absolute;will-change:transform;
  transition:left .52s var(--ease-out),top .52s var(--ease-out),width .52s var(--ease-out),
             height .52s var(--ease-out),transform .52s var(--ease-out)}
.sp-part img{display:block;width:100%;height:100%;object-fit:contain}
.sp-part[data-p="bar"]{z-index:1}
.sp-part[data-p="base"]{z-index:2}
.sp-part[data-p="stone"]{z-index:3}
.sp-part.txt{z-index:4;width:calc(var(--u) * 80);text-align:center;white-space:nowrap;
  font-size:calc(var(--u) * 12);font-weight:600;line-height:calc(var(--u) * 12)}
.sp-part[data-p="prod"]{z-index:2}
.sp-glow{position:absolute;left:50%;top:50%;width:133%;height:133%;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-52%);
  background:radial-gradient(closest-side,rgba(255,255,255,.29) 0,rgba(255,255,255,.27) 55%,
    rgba(255,255,255,.14) 74%,rgba(255,255,255,.03) 90%,rgba(255,255,255,0) 100%)}
.sp-part[data-p="prod"] img{position:relative}
.sp-kw{display:block;width:100%;height:100%;transform:scale(1.3)}

/* варианты шага: коробка — это картинка; подпись висит под ней, но нажимается вместе с ней */
.sp-o{position:absolute;display:block;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sp-g{position:absolute;left:50%;top:50%;width:calc(var(--u) * 110);height:calc(var(--u) * 110);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:var(--a);
  background:radial-gradient(closest-side,rgb(var(--c)) 0,rgba(var(--c),.92) 40%,rgba(var(--c),.5) 62%,
    rgba(var(--c),.1) 85%,rgba(var(--c),0) 100%)}
.sp-pi{position:relative;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;
  transition:transform .16s var(--ease-out),opacity .3s}
.sp-pi.alt2{transform:scaleX(-1)}
.sp-o:active .sp-pi{transform:scale(.93)}
.sp-o:active .sp-pi.alt2{transform:scaleX(-1) scale(.93)}
.sp-l{position:absolute;left:50%;width:calc(var(--u) * 84);margin-left:calc(var(--u) * -42);
  text-align:center;font-size:calc(var(--u) * 8);font-weight:600;line-height:calc(var(--u) * 10);color:#fff}
.sp-l i{display:block;margin-top:calc(var(--u) * 1);font-style:normal;font-weight:400;white-space:nowrap;
  font-size:calc(var(--u) * 10);line-height:calc(var(--u) * 11);color:var(--grey)}
/* название камня — в две строки у длинных, как в макете: «Выращенный / бриллиант», «Кристаллы / Karatov»;
   строка и отступ цены — как у подписей макета (цена на 12u ниже однострочной подписи, на 21u — двустрочной) */
.sp-l.nm{width:calc(var(--u) * 64);margin-left:calc(var(--u) * -32);line-height:calc(var(--u) * 9.75)}
.sp-l.nm i{margin-top:calc(var(--u) * 2)}
.sp-l.big{font-size:calc(var(--u) * 10);line-height:calc(var(--u) * 12)}
.sp-l.big i{margin-top:calc(var(--u) * 2)}
.sp-l em{display:block;font-style:normal;font-weight:400;font-size:calc(var(--u) * 6);line-height:calc(var(--u) * 8);color:var(--grey)}
.sp-o.lack .sp-pi{opacity:.5}
.sp-o.off{opacity:.3;filter:grayscale(.7)}
.sp-tag{position:absolute;left:calc(var(--u) * 40);top:calc(var(--u) * 16);height:calc(var(--u) * 17);
  padding:0 calc(var(--u) * 7);border-radius:calc(var(--u) * 12);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange);
  background:rgba(41,40,46,.35);color:#fff;font-size:calc(var(--u) * 8);line-height:calc(var(--u) * 17);white-space:nowrap}
.sp-bar{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.sp-wt,.sp-fly-tag{display:inline-block;height:calc(var(--u) * 17);padding:0 calc(var(--u) * 7);border-radius:calc(var(--u) * 12);
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange);background:rgba(41,40,46,.55);color:#fff;font-size:calc(var(--u) * 8);
  font-weight:400;line-height:calc(var(--u) * 17);white-space:nowrap}
.sp-fly-tag{box-sizing:border-box;text-align:center}
.sp-part[data-p="wt"]{line-height:0}
.sp-bar .sp-pi{height:129.2%}
.sp-sz .sp-pi{display:grid;place-items:center;border-radius:calc(var(--u) * 7);background:#353840;
  box-shadow:inset 0 0 0 calc(var(--u) * .5) rgba(255,255,255,.1);
  font-size:calc(var(--u) * 14);font-weight:600;color:#fff;line-height:1}

/* название изделия и кнопка */
.sp-name{position:absolute;left:calc(var(--u) * 93);width:calc(var(--u) * 134);text-align:center}
.sp-name b{display:block;font-size:calc(var(--u) * 14);font-weight:600;line-height:calc(var(--u) * 17)}
.sp-name span{display:block;font-size:calc(var(--u) * 12);line-height:calc(var(--u) * 13)}
.sp-btn{position:absolute;height:calc(var(--u) * 29);overflow:hidden;border-radius:calc(var(--u) * 8);
  background:var(--orange);color:#fff;font-size:calc(var(--u) * 14);font-weight:600;
  box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 14) rgba(251,120,9,.3);transition:transform .12s}
.sp-btn::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
  background-size:250% 100%;animation:shine 2.8s ease-in-out infinite}
.sp-btn:active,.sp-buy:active{transform:scale(.97)}

/* оформление: слева — с Каратиками, справа — то же на сайте */
.sp-card{position:absolute;top:calc(var(--u) * 313);height:calc(var(--u) * 184);border-radius:calc(var(--u) * 10);
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(255,255,255,.1)}
.sp-card.k{left:calc(var(--u) * 16);width:calc(var(--u) * 134.82);box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange)}
.sp-card.s{left:calc(var(--u) * 170.04);width:calc(var(--u) * 132.96)}
.sp-card.single{width:calc(var(--u) * 287)}
.sp-ch{position:absolute;left:calc(var(--u) * 9.19);top:calc(var(--u) * 15);
  font-size:calc(var(--u) * 14);font-weight:600;line-height:calc(var(--u) * 10);white-space:nowrap}
.sp-cl{position:absolute;left:calc(var(--u) * 8.17);margin-top:calc(var(--u) * -1.6);
  font-size:calc(var(--u) * 10);line-height:1;color:var(--grey);white-space:nowrap}
.sp-cv{position:absolute;left:calc(var(--u) * 9);margin-top:calc(var(--u) * -.9);display:flex;align-items:center;
  gap:calc(var(--u) * 2);font-size:calc(var(--u) * 12);font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.sp-cv .ki{width:calc(var(--u) * 9);height:calc(var(--u) * 11.5)}
.sp-i{display:block;width:calc(var(--u) * 14);height:calc(var(--u) * 14);margin-left:calc(var(--u) * 1);padding:calc(var(--u) * 2)}
.sp-i img{display:block;width:100%;height:100%}
.sp-save{position:absolute;left:calc(var(--u) * 9.19);top:calc(var(--u) * 135.4);font-size:calc(var(--u) * 10);
  line-height:1;color:#57D76A;white-space:nowrap}
.sp-buy{position:absolute;left:calc(var(--u) * 10.2);right:calc(var(--u) * 10.2);top:calc(var(--u) * 153);
  height:calc(var(--u) * 21);border-radius:calc(var(--u) * 6);background:var(--orange);color:#fff;
  font-size:calc(var(--u) * 12);font-weight:600;transition:transform .12s,opacity .2s}
.sp-buy.sec{background:#4F4F54}
.sp-buy[disabled]{opacity:.6}

/* подсказки оформления — то же стекло, что у подсказок на пути */
.sp-tip{position:absolute;z-index:20;border-radius:var(--r);text-align:center;color:#fff;
  background:rgba(186,128,97,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 calc(var(--u) * .5) rgba(255,255,255,.16),0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(0,0,0,.25);
  animation:tipIn .28s var(--ease-out)}
.sp-tip.big{left:calc(var(--u) * 44);top:calc(var(--u) * 153);width:calc(var(--u) * 229);min-height:calc(var(--u) * 147);
  padding:calc(var(--u) * 26) calc(var(--u) * 18) calc(var(--u) * 20)}
.sp-tip.big b{display:block;font-size:calc(var(--u) * 20);font-weight:600;line-height:calc(var(--u) * 19)}
.sp-tip.big span{display:block;margin-top:calc(var(--u) * 13);font-size:calc(var(--u) * 14);line-height:calc(var(--u) * 15)}
.sp-tip.small{left:calc(var(--u) * 76);top:calc(var(--u) * 308);width:calc(var(--u) * 227);
  padding:calc(var(--u) * 15) calc(var(--u) * 14);font-size:calc(var(--u) * 12);line-height:calc(var(--u) * 13)}
@keyframes tipIn{from{opacity:0;transform:translateY(calc(var(--u) * 6)) scale(.97)}to{opacity:1;transform:none}}

/* полёт выбранного варианта, вспышка сборки, искры */
.sp-fly{position:absolute!important;z-index:25;margin:0;pointer-events:none;visibility:visible!important}
.sp-flash{position:absolute;left:calc(var(--u) * 60);top:calc(var(--u) * 108);z-index:30;
  width:calc(var(--u) * 200);height:calc(var(--u) * 200);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,250,236,.95),rgba(255,214,150,.5) 42%,rgba(255,160,60,0) 100%)}
.sp-spark{position:absolute;z-index:31;width:calc(var(--u) * 4);height:calc(var(--u) * 4);border-radius:50%;pointer-events:none;
  background:#FFE3A3;box-shadow:0 0 calc(var(--u) * 5) #FFC76B}
.tint-wait{opacity:0}
img[data-tint]{transition:opacity .3s}

/* ══════════ ЧАТ ПОДДЕРЖКИ ══════════ */
.chat-list{display:flex;flex-direction:column;gap:calc(var(--u) * 6);padding-bottom:calc(var(--u) * 6)}
.msg{max-width:82%;padding:calc(var(--u) * 8) calc(var(--u) * 11);border-radius:calc(var(--u) * 12);font-size:calc(var(--u) * 11.5);
  line-height:1.35;word-wrap:break-word;animation:rise .3s var(--ease-out) both}
.msg.me{align-self:flex-end;background:rgba(251,120,9,.16);box-shadow:inset 0 0 0 1px rgba(251,120,9,.35);border-bottom-right-radius:4px}
.msg.sup{align-self:flex-start;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:4px}
.msg-who{font-size:calc(var(--u) * 9);font-weight:700;color:var(--gold);margin-bottom:calc(var(--u) * 2)}
.msg-text{white-space:pre-wrap}
.msg-at{font-size:calc(var(--u) * 8.5);color:var(--grey);margin-top:calc(var(--u) * 3);text-align:right}
.chat-form{position:sticky;bottom:0;display:flex;gap:calc(var(--u) * 6);align-items:flex-end;padding-top:calc(var(--u) * 8);background:var(--bg)}
.chat-form textarea{flex:1;min-height:calc(var(--u) * 38);max-height:140px;resize:none;padding:calc(var(--u) * 9) calc(var(--u) * 11);
  border-radius:var(--r);border:1px solid var(--line2);background:var(--card);color:inherit;font:inherit;font-size:16px}
.chat-form textarea:focus{outline:none;border-color:var(--orange)}
.chat-send{flex:0 0 calc(var(--u) * 38);height:calc(var(--u) * 38);border-radius:var(--r);background:var(--orange);display:grid;place-items:center}
.chat-send svg{width:calc(var(--u) * 17);height:calc(var(--u) * 17);fill:#fff}
.chat-send[disabled]{opacity:.4;pointer-events:none}
.chat-err{color:#ff8a80;min-height:0;margin:calc(var(--u) * 5) 0 0}
/* помощник и режимы (S1): шапка с аватаром, «Позвать оператора», системные строки, «печатает…», выбор помощника */
.chat-head{display:flex;align-items:center;gap:calc(var(--u) * 8);margin-bottom:calc(var(--u) * 10)}
.chat-ava{flex:0 0 calc(var(--u) * 36);height:calc(var(--u) * 36);border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--gold);font-size:calc(var(--u) * 15)}
.chat-ava img{width:100%;height:100%;object-fit:cover}
.chat-person{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-person small{font-size:calc(var(--u) * 9);color:var(--grey)}
.chat-act{flex:0 0 auto;padding:calc(var(--u) * 6) calc(var(--u) * 9);border-radius:var(--r);font-size:calc(var(--u) * 10);
  color:var(--gold);box-shadow:inset 0 0 0 1px var(--line2)}
.chat-act[hidden]{display:none}
.chat-ask{margin-bottom:calc(var(--u) * 10);padding:calc(var(--u) * 10) calc(var(--u) * 12);border-radius:calc(var(--u) * 12);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);font-size:calc(var(--u) * 11)}
.chat-ask[hidden]{display:none}
.chat-ask p{margin:calc(var(--u) * 4) 0 calc(var(--u) * 8)}
.chat-ask-b{display:flex;gap:calc(var(--u) * 6)}
.chat-ask-b .btn{flex:1}
.msg.sys{align-self:center;max-width:90%;background:none;box-shadow:none;text-align:center;color:var(--grey);
  font-size:calc(var(--u) * 10);padding:calc(var(--u) * 2) 0}
.msg.sys .msg-at{text-align:center}
.msg-ava{width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:50%;object-fit:cover;vertical-align:-3px;
  margin-right:calc(var(--u) * 4)}
.chat-typing{font-size:calc(var(--u) * 10);color:var(--grey);padding:0 0 calc(var(--u) * 6)}
.chat-typing[hidden]{display:none}
.persona-text{color:var(--grey);font-size:calc(var(--u) * 11.5);margin:0 0 calc(var(--u) * 12)}
.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 10)}
.persona{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 4);padding:calc(var(--u) * 10);
  border-radius:calc(var(--u) * 14);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:inherit;text-align:center}
.persona img{width:100%;aspect-ratio:2/3;object-fit:contain}
.persona b{font-size:calc(var(--u) * 13)}
.persona small{font-size:calc(var(--u) * 9.5);color:var(--grey)}
.persona[disabled]{opacity:.5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .tech-edge{animation:none!important}
}
/* вне экрана и в свёрнутом приложении анимации стоят (класс ставит app.js) */
#app.paused *,#app.paused *::before,#app.paused *::after{animation-play-state:paused!important}
.fly{left:0;top:0;margin:calc(var(--u) * -8.5) 0 0 calc(var(--u) * -7);opacity:0}
#app.on-path.ci-on #chatBtn,#app.on-path.ci-on #infoBtn{bottom:calc(var(--nav-h) + var(--safe-b) + var(--u) * 66)}

/* s4: фото награды уровня и приза карусели из панели */
#popCard .lv-art.lv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:artZoom 1.6s var(--ease-out) both}
#popCard .lv-art.lv-photo.locked img{filter:grayscale(.55) brightness(.78)}
.pz-img.pz-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pop-pic .pz-photo,.rw-pic .pz-photo,.won .pz-v .pz-photo{width:100%!important;height:100%!important}
.hist-d img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
#popCard p.pz-about{margin-top:calc(var(--u) * 8);color:#C4CAD4;text-wrap:pretty}

/* ══════════ w9: окно изделия на пути и раздел «Розыгрыш» ══════════ */
/* окно изделия — как «i» про браслет: фото целиком, с полями, на тёмном фоне пути с мягким светом за изделием */
#popCard .lv-art.lv-jewel{height:calc(var(--u) * 190);
  background:radial-gradient(60% 70% at 50% 52%,#3D3944 0%,var(--bg-path) 74%)}
#popCard .lv-jewel img{position:absolute;left:calc(var(--u) * 14);top:calc(var(--u) * 12);
  width:calc(100% - var(--u) * 28);height:calc(100% - var(--u) * 24);object-fit:contain;
  filter:drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(0,0,0,.45));animation:artZoom 1.6s var(--ease-out) both}
/* шторка уровня-вехи: ссылка на раздел «Розыгрыш» под кнопкой карусели */
#popCard .lv-link{display:block;width:100%;margin-top:calc(var(--u) * 10);padding:calc(var(--u) * 6) 0;
  font-size:calc(var(--u) * 11.5);font-weight:600;color:var(--gold);text-align:center;
  text-decoration:underline;text-underline-offset:calc(var(--u) * 3)}
/* раздел: вступление, этапы с датами, под этапом — его группы призов */
.dr-intro{margin:calc(var(--u) * 2) 0 0;font-size:calc(var(--u) * 11.5);line-height:1.55;color:#C4CAD4;text-wrap:pretty}
.dr-sec{margin-top:calc(var(--u) * 14)}
.dr > .dr-sec:first-child{margin-top:0}
/* заголовок этапа липнет к верху раздела, пока листаются его группы: этап и дата — всегда перед глазами */
.dr-stage{position:sticky;top:calc(var(--u) * -4);z-index:3;margin:0 calc(var(--u) * -4) calc(var(--u) * 3);
  padding:calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 6);background:var(--bg)}
.dr-stage-h{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u) * 10)}
.dr-stage-h b{font-size:calc(var(--u) * 15);font-weight:600;color:#fff}
.dr-date{font-size:calc(var(--u) * 11.5);font-weight:600;color:var(--gold);text-align:right}
.dr-date.tbd{color:var(--grey);font-weight:500}
.dr-lv{display:block;margin-top:calc(var(--u) * 3);font-size:calc(var(--u) * 10);color:var(--dim)}
.dr-group{position:relative;overflow:hidden;border-radius:var(--r);background:var(--card);
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line)}
.dr-group + .dr-group{margin-top:calc(var(--u) * 8)}
.dr-art{position:relative;height:calc(var(--u) * 128);background:var(--bg-path);overflow:hidden}
.dr-art svg,.dr-art img{position:absolute;inset:0;width:100%;height:100%}
.dr-art img{object-fit:cover}
.dr-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(53,56,64,.7) 100%)}
.dr-group.locked .dr-art svg,.dr-group.locked .dr-art img{filter:grayscale(.55) brightness(.78)}
.dr-lock{position:absolute;right:calc(var(--u) * 10);top:calc(var(--u) * 10);z-index:2;display:grid;place-items:center;
  width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;background:rgba(29,31,36,.85);
  box-shadow:inset 0 0 0 calc(var(--u) * .5) var(--line2);color:var(--grey)}
.dr-lock svg{width:calc(var(--u) * 13);height:calc(var(--u) * 13)}
.dr-body{padding:calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 12)}
.dr-meta{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8)}
.dr-st{font-size:calc(var(--u) * 10);font-weight:600;color:var(--grey);text-align:right}
.dr-st.on{display:inline-flex;align-items:center;gap:calc(var(--u) * 4);color:#7BC9A0}
.dr-st svg{width:calc(var(--u) * 12);height:calc(var(--u) * 12)}
.dr-group h3{margin:calc(var(--u) * 8) 0 0;font-size:calc(var(--u) * 14);line-height:1.25;color:#fff;text-wrap:balance}
.dr-group p{margin:calc(var(--u) * 4) 0 0;font-size:calc(var(--u) * 11);line-height:1.5;color:var(--grey);text-wrap:pretty}
/* группа, на которой открыли раздел (подарок у медальона, шторка уровня): золотая рамка и вспышка */
.dr-group.hl{box-shadow:inset 0 0 0 calc(var(--u) * 1.5) rgba(246,209,121,.8);animation:drHl 1.2s ease-out 2}
@keyframes drHl{from{box-shadow:inset 0 0 0 calc(var(--u) * 1.5) rgba(246,209,121,.8),0 0 0 0 rgba(246,209,121,.5)}
  to{box-shadow:inset 0 0 0 calc(var(--u) * 1.5) rgba(246,209,121,.8),0 0 0 calc(var(--u) * 9) rgba(246,209,121,0)}}

/* ══════════ ЗАДАНИЯ (s5): фото задания и теста, секретные, ответ словами ══════════ */
.task-photo,.quiz-img{display:block;width:100%;max-height:calc(var(--u) * 200);object-fit:cover;border-radius:var(--r);
  margin:0 0 calc(var(--u) * 12);background:var(--tile)}
.task-reward{color:var(--gold)}
.tk-secret{display:block;margin:calc(var(--u) * 2) 0 calc(var(--u) * 1);font-size:calc(var(--u) * 10);
  line-height:calc(var(--u) * 13);color:var(--orange)}
.ans-info{min-height:1.4em}
/* ══════════ S6: серия входов в профиле и обучение новичка (механика; дизайн — позже) ══════════ */
.streak-card{margin-top:calc(var(--u) * 6)}
.streak-h{display:flex;justify-content:space-between;align-items:baseline;gap:calc(var(--u) * 8)}
.streak-dots{display:flex;gap:calc(var(--u) * 4);margin:calc(var(--u) * 8) 0 calc(var(--u) * 6)}
.streak-dots i{flex:1;height:calc(var(--u) * 6);border-radius:calc(var(--u) * 3);background:var(--line2)}
.streak-dots i.on{background:var(--gold)}
.ob{position:fixed;inset:0;z-index:85;max-width:480px;margin:0 auto;overflow:hidden}
.ob.dim{background:rgba(10,12,16,.72)}
.ob-hole{position:absolute;border-radius:calc(var(--u) * 14);box-shadow:0 0 0 9999px rgba(10,12,16,.72);
  outline:calc(var(--u) * 2) solid var(--gold);pointer-events:none;transition:left .25s,top .25s,width .25s,height .25s}
/* w9: обучение ведёт помощник — портрет рядом с репликой, как сцена о выгоде в магазине (ss-*): в реплике
   имя помощника и счётчик шагов, фото шага, заголовок, текст и кнопки. Карточка — под целью или над ней
   (card-top), как раньше; портрет стоит по низу реплики. */
.ob-card{position:absolute;left:calc(var(--u) * 10);right:calc(var(--u) * 10);bottom:calc(var(--u) * 96);
  display:flex;align-items:flex-end;gap:calc(var(--u) * 2)}
.ob.card-top .ob-card{top:calc(var(--u) * 96);bottom:auto}
.ob-person{flex:0 0 calc(var(--u) * 84);width:calc(var(--u) * 84);height:calc(var(--u) * 128);object-fit:contain;
  object-position:50% 100%;filter:drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0,0,0,.45))}
.ob-bubble{flex:1;min-width:0;padding:calc(var(--u) * 12) calc(var(--u) * 13);border-radius:calc(var(--u) * 14);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line2),0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0,0,0,.45)}
.ob-head{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u) * 8)}
.ob-name{min-width:0;font-size:calc(var(--u) * 10);font-weight:700;color:var(--gold)}
.ob-step{flex:0 0 auto;font-size:calc(var(--u) * 9);color:var(--grey)}
.ob-title{margin:calc(var(--u) * 3) 0 calc(var(--u) * 6);font-size:calc(var(--u) * 14)}
.ob-text{margin:0 0 calc(var(--u) * 10);font-size:calc(var(--u) * 11.5);line-height:1.42;min-height:4.2em}
.ob-img{display:block;width:100%;max-height:calc(var(--u) * 120);object-fit:cover;border-radius:calc(var(--u) * 10);
  margin:calc(var(--u) * 6) 0 calc(var(--u) * 4)}
.ob-btns{display:flex;gap:calc(var(--u) * 6)}
.ob-btns .btn{flex:1 1 0;min-width:0;padding:calc(var(--u) * 11) calc(var(--u) * 6);font-size:calc(var(--u) * 12)}

/* фото изделия из панели (s7): на готовом изделии — вместо рисунка, в брони — над карточкой */
.sp-part img.sp-photo{position:relative;object-fit:cover;border-radius:50%}
.res-photo{display:block;width:100%;height:calc(var(--u) * 150);object-fit:cover;border-radius:calc(var(--u) * 12);
  margin:0 0 calc(var(--u) * 10);background:#2B2E35}

/* ══════════ w6: задания — баннер категории, карточки как у trust (наша палитра), секретные, серия ══════════ */
.tk-hero.has-photo{background-image:none}
.tk-hero-img{position:absolute;right:0;top:0;width:58%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);mask-image:linear-gradient(90deg,transparent,#000 38%)}
.tk-hero-t{z-index:1}
.tk-hero p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* карточка: картинка и под ней Каратики · название, описание, таймер секретного; внизу — уровни и кнопка;
   плашки сверху. Высота — не меньше колонки с Каратиками (12 + 56 + 4 + 14 + 12, как карточка в макете):
   короткие карточки с Каратиками и без них одной высоты */
.tk-card{grid-template-columns:calc(var(--u) * 56) minmax(0,1fr);align-items:center;column-gap:calc(var(--u) * 12);
  min-height:calc(var(--u) * 98);padding:calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 12)}
.tk-card .tk-r{justify-content:center;gap:calc(var(--u) * 3)}
.tk-card .tk-foot{padding-top:calc(var(--u) * 5)}
.tk-card .tk-go,.tk-card .tk-st{min-width:calc(var(--u) * 76);height:calc(var(--u) * 24);padding:0 calc(var(--u) * 10);
  border-radius:calc(var(--u) * 12)}
.tk-rw{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 2) calc(var(--u) * 8);min-width:0}
.tk-rw .tk-lv{font-size:calc(var(--u) * 10);color:#fff}
.tk-rw-secret{font-size:calc(var(--u) * 10);color:var(--gold)}
.tk-timer{display:block;font-size:calc(var(--u) * 10);line-height:calc(var(--u) * 13);font-weight:700;color:var(--orange);
  font-variant-numeric:tabular-nums}
.tk-timer.is-over{color:var(--grey);font-weight:500}
.tk-badges{position:absolute;left:calc(var(--u) * -5);top:calc(var(--u) * -7);z-index:1;display:flex;gap:calc(var(--u) * 4)}
.tk-badges .tk-badge{position:static}
.tk-sbadge{display:inline-block;height:calc(var(--u) * 14);padding:0 calc(var(--u) * 8);border-radius:calc(var(--u) * 9);
  background:linear-gradient(95deg,#FFAD59,var(--orange));color:#251B17;font-size:calc(var(--u) * 9);font-weight:700;
  line-height:calc(var(--u) * 14);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* секретное: оранжевая рамка и свечение; движение — только без «уменьшить движение» */
.tk-card.is-secret{box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange),0 0 calc(var(--u) * 14) rgba(251,120,9,.35);
  animation:cardIn .45s var(--ease-out) calc(var(--k, 0) * 45ms) both,tkSecretGlow 2.6s ease-in-out .6s infinite alternate}
@keyframes tkSecretGlow{
  from{box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange),0 0 calc(var(--u) * 8) rgba(251,120,9,.25)}
  to{box-shadow:inset 0 0 0 calc(var(--u) * 1.5) var(--orange),0 0 calc(var(--u) * 22) rgba(251,120,9,.55)}}
.tk-pic.is-secret{box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange),0 0 calc(var(--u) * 6) rgba(251,120,9,.5)}
.tk-pic.is-secret svg{stroke:var(--orange)}
.tk-card.is-over{opacity:.6}
.tk-empty{margin-top:calc(var(--u) * 4)}
.ts-left{margin:0 0 calc(var(--u) * 10);color:var(--orange);font-weight:700;font-variant-numeric:tabular-nums}
/* «Вы готовы?» перед запуском личного таймера */
.ts-confirm{text-align:center;padding:calc(var(--u) * 6) 0}
.ts-q{margin:calc(var(--u) * 14) 0 calc(var(--u) * 8);font-size:calc(var(--u) * 14);line-height:1.5;color:#fff}
.ts-for{margin:0 0 calc(var(--u) * 16);color:var(--orange);font-weight:700;font-variant-numeric:tabular-nums}
.ts-actions{display:flex;gap:calc(var(--u) * 8)}
.ts-actions .btn{flex:1}
/* подсказка помощника: затемнение, вырез вокруг карточки, текст печатается по буквам */
.tsg{position:fixed;inset:0;z-index:90;max-width:480px;margin:0 auto;overflow:hidden}
.tsg.dim{background:rgba(10,12,16,.8)}
.tsg-hole{position:absolute;border-radius:calc(var(--r) + 4px);pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,12,16,.8),0 0 calc(var(--u) * 26) calc(var(--u) * 6) rgba(251,120,9,.5);
  outline:calc(var(--u) * 1.5) solid var(--orange);animation:tsgIn .3s var(--ease-out) both}
@keyframes tsgIn{from{opacity:.3;transform:scale(.97)}to{opacity:1;transform:none}}
.tsg-timer{display:block;margin:calc(var(--u) * -4) 0 calc(var(--u) * 12);color:var(--orange);font-size:calc(var(--u) * 11);
  font-weight:700;font-variant-numeric:tabular-nums}
.tsg-dlg{position:absolute;left:calc(var(--u) * 12);right:calc(var(--u) * 12);bottom:calc(var(--u) * 24);display:flex;
  align-items:flex-end;gap:calc(var(--u) * 6)}
.tsg.dlg-top .tsg-dlg{top:calc(var(--u) * 24);bottom:auto;align-items:flex-start}
.tsg-person{flex:0 0 auto;width:calc(var(--u) * 96);max-height:calc(var(--u) * 180);object-fit:contain;object-position:bottom}
.tsg-bubble{flex:1;min-width:0;padding:calc(var(--u) * 14);border-radius:calc(var(--u) * 18);background:var(--card);
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--orange),0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0,0,0,.45)}
.tsg-name{display:block;font-size:calc(var(--u) * 10);color:var(--gold)}
.tsg-title{margin:calc(var(--u) * 4) 0 calc(var(--u) * 6);font-size:calc(var(--u) * 15);color:#fff}
.tsg-text{position:relative;margin:0 0 calc(var(--u) * 12);font-size:calc(var(--u) * 12);line-height:1.45;color:#E8E6E1}
.tsg-ghost{visibility:hidden}
.tsg-typed{position:absolute;left:0;top:0;right:0}
.tsg .btn{width:100%}
@media (prefers-reduced-motion:reduce){
  .tk-card.is-secret,.tsg-hole{animation:none}
}
/* ══════════ w7: обучение (п. 16), экран загрузки (п. 17), мини-профиль друга (п. 18) ══════════ */
/* обучение: подсветка повторяет форму элемента — кольцо и затемнение тенью, не outline (в старом WebKit
   outline игнорирует скругление и рисует квадрат); круглая кнопка — круг, «таблетка» — таблетка */
.ob-hole{outline:none;background:none;border-radius:calc(var(--u) * 12);
  box-shadow:0 0 0 calc(var(--u) * 2) var(--gold),0 0 calc(var(--u) * 16) calc(var(--u) * 3) rgba(246,209,121,.32),
    0 0 0 9999px rgba(10,12,16,.72);
  transition:left .3s var(--ease-out),top .3s var(--ease-out),width .3s var(--ease-out),height .3s var(--ease-out),
    border-radius .3s var(--ease-out)}
.ob-hole.round{border-radius:50%}
.ob-test{display:inline-block;margin-bottom:calc(var(--u) * 8);padding:calc(var(--u) * 3) calc(var(--u) * 8);
  border-radius:999px;background:rgba(251,120,9,.16);color:var(--orange);font-size:calc(var(--u) * 9);font-weight:700}
/* текст печатается по буквам: разметка готова сразу, буквы только проявляются — строки не прыгают */
.ob-text.typing span{opacity:0;transition:opacity .12s linear}
.ob-text.typing span.on{opacity:1}
.ob-card{cursor:default}
/* пауза перед «Далее»: полоска заполняется за время паузы (компоновщик, без пересчёта раскладки) */
#obNext.ob-wait::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 2);
  border-radius:0 0 var(--r) var(--r);background:var(--gold);transform-origin:left center;
  animation:obWait var(--ob-wait, 3s) linear forwards}
@keyframes obWait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#obNext:not([disabled]).ob-wait::after{display:none}

/* экран загрузки: в духе экранов поверх игры — логотип, индикатор, объём; ниже #screen (ошибки — поверх) */
#boot{position:fixed;inset:0;z-index:88;max-width:480px;margin:0 auto;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:calc(var(--u) * 24) var(--pad);
  transition:opacity .25s ease-out}
#boot[hidden]{display:none}
#boot.out{opacity:0;pointer-events:none}
.boot-card{width:100%;text-align:center}
.boot-bar{position:relative;height:calc(var(--u) * 4);margin:calc(var(--u) * 4) auto 0;width:calc(var(--u) * 180);
  border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.boot-bar i{position:absolute;inset:0;border-radius:inherit;background:var(--gold);transform-origin:left center;
  transform:scaleX(0);transition:transform .35s var(--ease-out)}
.boot-cap{margin:calc(var(--u) * 14) 0 0;font-size:calc(var(--u) * 12);color:var(--grey)}
.boot-vol{min-height:1.4em;margin:calc(var(--u) * 6) 0 0;font-size:calc(var(--u) * 10);color:var(--grey);opacity:.75;
  font-variant-numeric:tabular-nums}
.boot-slow{margin-top:calc(var(--u) * 18)}
.boot-slow[hidden]{display:none}
.boot-slow p{margin:0 0 calc(var(--u) * 12);font-size:calc(var(--u) * 11);line-height:1.5;color:var(--grey)}

/* друзья: список приглашённых и мини-профиль */
button.fr2-fig{padding:0;background:none;border:0;color:inherit;cursor:pointer}
.fr2-ava,.fr-ava,.fp-ava{position:relative;overflow:hidden}
.fr2-ava img,.fr-ava img,.fp-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.fr-list{padding:calc(var(--u) * 4) calc(var(--u) * 11.5)}
.fr-row{display:flex;align-items:center;gap:calc(var(--u) * 10);width:100%;padding:calc(var(--u) * 9) 0;
  background:none;border:0;color:inherit;text-align:left;font:inherit}
.fr-row + .fr-row{border-top:1px solid #474C57}
button.fr-row{cursor:pointer}
button.fr-row:active{opacity:.8}
.fr-ava{flex:0 0 auto;display:grid;place-items:center;width:calc(var(--u) * 34);height:calc(var(--u) * 34);border-radius:50%;
  background:#3F444E;border:1px solid #474C57;font-size:calc(var(--u) * 13);font-weight:700;color:#E7C97E;line-height:1}
.fr-who{flex:1;min-width:0}
.fr-who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(var(--u) * 12);color:#F1F3F6}
.fr-who span{display:block;margin-top:calc(var(--u) * 2);font-size:calc(var(--u) * 9.8);color:#9BA2AD}
.fr-row .fr-ok{color:#4FA97A}
.fr-plat,.fp-plat{display:inline-flex;gap:calc(var(--u) * 3);align-items:center}
.fr-plat img{width:calc(var(--u) * 15);height:calc(var(--u) * 15);border-radius:calc(var(--u) * 4)}
.fr-chev{flex:0 0 auto;color:#9BA2AD;font-size:calc(var(--u) * 16);line-height:1}
#popCard.friend{text-align:center}
.fp-ava{display:grid;place-items:center;width:calc(var(--u) * 72);height:calc(var(--u) * 72);margin:0 auto;border-radius:50%;
  background:#3F444E;box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line2),0 0 calc(var(--u) * 10) var(--glow);
  font-size:calc(var(--u) * 28);font-weight:700;color:var(--gold);line-height:1;animation:badgeIn .6s var(--ease-spring) both}
.fp-plat{justify-content:center;margin-top:calc(var(--u) * 6);gap:calc(var(--u) * 5)}
.fp-plat img{width:calc(var(--u) * 18);height:calc(var(--u) * 18);border-radius:calc(var(--u) * 5)}
.fp-stats{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:calc(var(--u) * 7);margin-top:calc(var(--u) * 14)}
.fp-st{padding:calc(var(--u) * 10) calc(var(--u) * 6);border-radius:calc(var(--u) * 11);background:#2E3037;
  box-shadow:inset 0 0 0 calc(var(--u) * 1) var(--line)}
.fp-st b{display:block;font-size:calc(var(--u) * 16);line-height:1.2;font-weight:700;color:#fff;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fp-st span{display:block;margin-top:calc(var(--u) * 3);font-size:calc(var(--u) * 9);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grey)}
.fp-st.wait b{color:var(--dim)}
#popCard .fp-note{margin-top:calc(var(--u) * 12)}
#popCard .fp-note.ok{color:#4FA97A}
#popCard .fp-err{margin-top:calc(var(--u) * 10);color:var(--orange)}
/* ══════════ w8: окно чата (документ 25.09 п. 22) ══════════
   Крупное окно почти во всю высоту экрана; открывается и закрывается по диагонали из угла кнопки чата
   (точка — --chat-ox/--chat-oy, ставит app.js); аватары прозрачные, без подложки и рамки. */
.chat-panel{position:fixed;z-index:70;top:calc(var(--safe-t) + var(--u) * 8);bottom:calc(var(--safe-b) + var(--u) * 8);
  left:max(calc(var(--u) * 8), calc((100vw - 480px) / 2 + var(--u) * 8));
  right:max(calc(var(--u) * 8), calc((100vw - 480px) / 2 + var(--u) * 8));
  display:flex;flex-direction:column;overflow:hidden;border-radius:calc(var(--u) * 18);background:var(--bg);
  box-shadow:0 0 0 100vmax rgba(8,9,12,.55),0 calc(var(--u) * 20) calc(var(--u) * 60) rgba(0,0,0,.55),
    inset 0 0 0 1px var(--line);
  transform-origin:var(--chat-ox, calc(100% - 26px)) var(--chat-oy, calc(100% - 26px));will-change:transform,opacity}
.chat-panel[hidden]{display:none}
.chat-panel.is-opening{animation:chatDiagIn .34s var(--ease-out) both}
.chat-panel.is-closing{animation:chatDiagOut .28s ease-in both;pointer-events:none}
@keyframes chatDiagIn{from{opacity:0;transform:translate(calc(var(--u) * 18), calc(var(--u) * 26)) scale(.1)}
  to{opacity:1;transform:none}}
@keyframes chatDiagOut{from{opacity:1;transform:none}
  to{opacity:0;transform:translate(calc(var(--u) * 18), calc(var(--u) * 26)) scale(.1)}}
#app.chat-open #chatBtn{visibility:hidden}
.chat-panel .chat-head{flex:0 0 auto;margin:0;padding:calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 12);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));border-bottom:1px solid var(--line)}
.chat-panel .chat-ava{flex:0 0 calc(var(--u) * 44);height:calc(var(--u) * 44);background:transparent;box-shadow:none;
  overflow:visible;border-radius:0}
.chat-panel .chat-ava img{width:100%;height:100%;object-fit:contain;background:transparent;border-radius:50%}
.chat-panel .chat-ava.letter{border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2)}
.chat-person b{font-size:calc(var(--u) * 13)}
.chat-panel .chat-person b,.chat-panel .chat-person small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* кнопки шапки («Позвать оператора», «Завершить диалог») переносятся на две строки — имя и подпись помощника
   не обрезаются на 320–390 */
.chat-panel .chat-act{max-width:calc(var(--u) * 84);white-space:normal;text-align:center;line-height:1.2;
  padding:calc(var(--u) * 5) calc(var(--u) * 9)}
.chat-x{flex:0 0 calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;display:grid;place-items:center;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.chat-x svg{width:calc(var(--u) * 13);height:calc(var(--u) * 13);stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
.chat-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 6);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.chat-foot{flex:0 0 auto;padding:0 calc(var(--u) * 12) calc(var(--u) * 10);border-top:1px solid var(--line)}
.chat-panel .chat-form{position:static;padding-top:calc(var(--u) * 8)}
.chat-panel .chat-typing{padding:calc(var(--u) * 7) 0 0;color:var(--gold)}
.chat-panel .chat-typing::after{content:'';display:inline-block;width:calc(var(--u) * 4);height:calc(var(--u) * 4);
  margin-left:calc(var(--u) * 4);border-radius:50%;background:var(--gold);vertical-align:middle;
  animation:chatDot 1.1s ease-in-out infinite}
@keyframes chatDot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.chat-panel .chat-left{margin:calc(var(--u) * 4) 0 0}
.msg-ava{background:transparent;object-fit:contain}
/* подтверждения поверх чата: «Позвать оператора?», «Завершить разговор?» */
.chat-confirm{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:calc(var(--u) * 18);
  background:rgba(11,12,13,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chat-confirm[hidden]{display:none}
.chat-confirm-box{width:100%;max-width:calc(var(--u) * 280);padding:calc(var(--u) * 18) calc(var(--u) * 16);
  border-radius:calc(var(--u) * 16);background:var(--card);box-shadow:inset 0 0 0 1px var(--line2),0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(0,0,0,.5);
  font-size:calc(var(--u) * 11.5);text-align:center;animation:tipIn .24s var(--ease-out)}
.chat-confirm-box b{display:block;font-size:calc(var(--u) * 14)}
.chat-confirm-box p{margin:calc(var(--u) * 8) 0 calc(var(--u) * 14);color:var(--grey);line-height:1.45}
@media (prefers-reduced-motion:reduce){
  .chat-panel.is-opening,.chat-panel.is-closing,.chat-confirm-box,.chat-panel .chat-typing::after{animation:none}
}

/* ══════════ w8: сцена помощника о выгоде (документ 25.09 п. 21) ══════════ */
.ss{position:fixed;inset:0;z-index:86;max-width:480px;margin:0 auto;overflow:hidden}
.ss.dim{background:rgba(10,12,16,.74)}
.ss-hole{position:absolute;border-radius:calc(var(--u) * 14);pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,12,16,.74),0 0 0 calc(var(--u) * 1.5) var(--orange),0 0 calc(var(--u) * 18) rgba(251,120,9,.45);
  transition:left .35s var(--ease-out),top .35s var(--ease-out),width .35s var(--ease-out),height .35s var(--ease-out)}
.ss-hole[hidden]{display:none}
.ss-card{position:absolute;left:calc(var(--u) * 10);right:calc(var(--u) * 10);display:flex;align-items:flex-end;
  gap:calc(var(--u) * 2)}
.ss-person{flex:0 0 calc(var(--u) * 84);width:calc(var(--u) * 84);height:calc(var(--u) * 128);object-fit:contain;
  object-position:50% 100%;background:transparent;filter:drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0,0,0,.45))}
.ss-bubble{flex:1;min-width:0;position:relative;padding:calc(var(--u) * 12) calc(var(--u) * 13);border-radius:calc(var(--u) * 14);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line2),0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0,0,0,.45)}
.ss-step{position:absolute;right:calc(var(--u) * 12);top:calc(var(--u) * 12);font-size:calc(var(--u) * 9);color:var(--grey)}
.ss-name{display:block;font-size:calc(var(--u) * 10);font-weight:700;color:var(--gold)}
.ss-title{margin:calc(var(--u) * 3) 0 calc(var(--u) * 6);font-size:calc(var(--u) * 14)}
.ss-text{margin:0 0 calc(var(--u) * 10);font-size:calc(var(--u) * 11.5);line-height:1.42;min-height:4.2em}
.ss-w{opacity:0;animation:ssWord .3s var(--ease-out) forwards}
@keyframes ssWord{from{opacity:0}to{opacity:1}}
.ss-next{width:100%}
.sp-scene{position:absolute;left:calc(var(--u) * 268);top:calc(var(--u) * 262);z-index:6;width:calc(var(--u) * 36);
  height:calc(var(--u) * 36);padding:0;border-radius:50%;overflow:hidden;background:transparent;
  box-shadow:inset 0 0 0 calc(var(--u) * 1) rgba(246,209,121,.55),0 0 calc(var(--u) * 10) rgba(246,209,121,.25)}
.sp-scene img{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.sp-scene:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.ss-w{animation:none;opacity:1}.ss-hole{transition:none}}