/* Express pool — блок на головній під «Завданнями» + покрокове пояснення в шторці (власник 13–14.09.2026, розкадровка v3).
   Граматика інтро: світле тло #F5F3FA, графіт замість кольору, фіолет лише в «рідині» пулу; частка людини — біла смуга нагорі рідини, як на головній.
   Блок на головній — у каркасі темних карток головної (#1C1924, біла кнопка). */

/* ── Блок на головній (пас 2, власник 14.09.2026: банка на всю висоту картки і справжній рівень, інтро зі стрілками) ── */
.xpool{margin:0 0 22px}
.xpool-cd{font-variant-numeric:tabular-nums;margin-left:4px}
.xpool-card{position:relative;display:flex;align-items:stretch;gap:16px;padding:16px;background:radial-gradient(ellipse at 100% 0,rgba(255,255,255,.15),transparent 65%),linear-gradient(145deg,#302C39,#1C1924 72%);border:1px solid #3C3647;border-radius:22px;color:#fff;overflow:hidden}
.xpool-jar-w{flex:none;display:block;width:96px;min-height:150px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xpool-jar{position:relative;display:block;width:100%;height:100%;border-radius:18px;background:#3A3446;overflow:hidden}   /* порожня частина світліша за картку (власник 14.09.2026) */
/* Рідина: контейнер висотою рівня (--lv); фіолет — перегляди всіх, біла смуга НАГОРІ — твої (--mf — частка висоти рідини). Власник 14.09.2026. */
.xpool-liq{position:absolute;left:0;right:0;bottom:0;display:block;height:var(--lv);transition:height 1.1s cubic-bezier(.16,1,.3,1)}
.xpool-all{position:absolute;left:0;right:0;top:0;bottom:0;display:block;background:linear-gradient(180deg,#A855F7,#7C3AED)}
.xpool-me{position:absolute;left:0;right:0;top:0;display:block;height:var(--mf);background:#fff;transition:height 1.1s cubic-bezier(.16,1,.3,1)}
.xpool-b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;transition:opacity .45s ease}
.xpool-t{font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.25}
.xpool-s{margin:4px 0 0;font-size:13px;line-height:1.4;color:#A09BB0}
.xpool-q{display:inline-flex;align-items:center;gap:6px;height:28px;margin:10px 0 14px;padding:0 11px;border:0;border-radius:99px;background:#2C2836;color:#E4DEF0;font:600 12.5px/1 var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent}
.xpool-q svg{width:14px;height:14px;flex:none}
/* icons1 (16.09.2026): знак питання — гліф у білому кружечку, як кнопка «?» на сторінці завдання. */
.xpool-q .xpool-qi{flex:none;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#fff;color:#17141F}
.xpool-q .xpool-qi svg{width:12px;height:12px}
.xpool-go{margin-top:auto;width:100%;height:42px;border:0;border-radius:999px;background:#fff;color:#17141F;font:600 14.5px/1 var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
.xpool-q:active,.xpool-go:active,.xpool-jar-w:active{opacity:.7}
.xpool-s b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.xpool-go.is-off{background:#2C2836;color:#A09BB0}
.xpool-go.is-done{background:#2C2836;color:#fff;pointer-events:none}
/* Банер частки (власник 16.09.2026): розраховані доби — біла зона зверху картки, як обкладинка в картці завдання; картка під нею без верхніх кутів.
   Після «Забрати» зона на мить «Забрано», монети летять у баланс, зона складається (.is-clg), кути картки повертаються. */
.xpool-cl{display:grid;grid-template-rows:1fr;background:#fff;border:1px solid #3C3647;border-bottom:0;border-radius:22px 22px 0 0;color:#17141F;transition:grid-template-rows .45s cubic-bezier(.2,.8,.3,1),opacity .3s ease}
.xpool-cl-in{min-height:0;overflow:hidden}
.xpool-cl-row{display:flex;align-items:center;gap:12px;padding:14px 16px}
.xpool-cl-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.xpool-cl-e,.xpool-cl-m{font-size:13px;line-height:18px;color:#6E6A78;font-variant-numeric:tabular-nums}
.xpool-cl-e{font-weight:500}
.xpool-cl-m>span{white-space:nowrap}
.xpool-cl-n{display:inline-flex;align-items:center;gap:8px;font-size:clamp(24px,7.7vw,30px);line-height:34px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xpool-cl-go{flex:none;height:42px;padding:0 22px;border:0;border-radius:999px;background:#17141F;color:#fff;font:600 14.5px/1 var(--f);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s ease,color .25s ease}
@media (max-width:340px){.xpool-cl-go{padding:0 18px}}
.xpool-cl-go:active{opacity:.7}
.xpool-cl.is-done .xpool-cl-go{background:#F1EFF5;color:#17141F;opacity:1;cursor:default}
.xpool-card.has-cl{border-top:0;border-radius:0 0 22px 22px;transition:border-radius .45s cubic-bezier(.2,.8,.3,1)}
.xpool.is-clg .xpool-cl{grid-template-rows:0fr;opacity:0}
.xpool.is-clg .xpool-card.has-cl{border-radius:22px}
/* Рисочки інтро (власник 14.09.2026: без наконечників, лише рисочки) — поверх правої колонки, висота шару = висота банки; «Загальний» фіолетова, як рідина, «Ти» біла, як твоя смуга. */
.xpool-mk{position:absolute;top:16px;bottom:16px;left:112px;right:16px;pointer-events:none;display:none}
/* 15.09.2026 (власник): «Твоя частка» / «Загальна частка» довші за «Ти» / «Загальний» і в один рядок не влазили на 320–360 px.
   Підпис над числом, як eyebrow над score в інших блоках; рисочка на рівні числа. bottom — центр рядка числа (translate 11 px = половина 22 px). */
.xpool-mk-i{position:absolute;left:0;display:grid;grid-template-columns:34px auto;grid-template-rows:auto 22px;column-gap:8px;row-gap:3px;align-items:center;white-space:nowrap;line-height:1;transform:translate(0,11px)}
/* Рисочка: місце 34 px по горизонталі; сама лінія (::before) тягнеться від підпису до своєї зони в банці — довжина --ll, кут --la. */
.xpool-mk-i i{position:relative;display:block;grid-column:1;grid-row:2;width:34px;height:2px}
.xpool-mk-i i::before{content:"";position:absolute;right:0;top:0;width:var(--ll,34px);height:2px;border-radius:2px;background:currentColor;transform-origin:100% 50%;transform:rotate(var(--la,0deg))}
.xpool-mk-i em{grid-column:2;grid-row:1;font-style:normal;font-weight:500;font-size:14px;color:#A09BB0}
.xpool-mk-i b{grid-column:2;grid-row:2;font-weight:700;font-size:22px;line-height:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.xpool-mk-i.is-all{color:#B794F6}
.xpool-mk-i.is-me{color:#fff}
/* Інтро (app.js poolIntroStart): банка → рідина → твоя смуга → рисочки з числами → текст і кнопка. is-pre — блок чекає, доки його видно,
   і виглядає як перший кадр. Затримки --xd* рахуються від старту: перемальовка посеред інтро продовжує з того ж кадру. */
.xpool.is-pre .xpool-jar{opacity:0;transform:scale(.92)}
.xpool.is-pre .xpool-liq{height:0;transition:none}
.xpool.is-pre .xpool-b{opacity:0;transition:none}
.xpool.is-intro .xpool-jar{animation:xpJarIn .45s cubic-bezier(.16,1,.3,1) var(--xd1,0ms) both}
.xpool.is-intro .xpool-liq{transition:none;animation:xpRise 1.2s cubic-bezier(.33,1,.68,1) var(--xd2,0ms) both}
.xpool.is-intro .xpool-me{transition:none;animation:xpRise .825s cubic-bezier(.33,1,.68,1) var(--xd2m,0ms) both}
.xpool.is-intro .xpool-mk{display:block;animation:xpMkOut .3s ease var(--xd4,0ms) both}
.xpool.is-intro .xpool-mk-i{animation:xpMkIn .45s cubic-bezier(.16,1,.3,1) var(--xd3,0ms) both}
.xpool.is-intro .xpool-mk-i.is-me{animation-delay:var(--xd3m,0ms)}
.xpool.is-intro .xpool-b{transition:none;animation:xpBodyIn .375s ease var(--xd4,0ms) both}
@keyframes xpJarIn{from{opacity:0;transform:scale(.92)}}
@keyframes xpRise{from{height:0}}
@keyframes xpMkIn{from{opacity:0;transform:translate(16px,11px)}}
@keyframes xpMkOut{to{opacity:0}}
@keyframes xpBodyIn{from{opacity:0}}

/* ── Банка ── */
/* Банка — як блок на головній (власник 14.09.2026): темна, фіолетова рідина — перегляди всіх, біла смуга нагорі рідини — твоя частка.
   .xp-mine живе всередині .xp-fill і їде разом із рівнем; власний зсув задає лише товщину смуги. */
.xp-jar{position:relative;display:block;width:100%;height:100%;border-radius:22px;background:#1C1924;overflow:hidden;box-shadow:0 22px 44px -28px rgba(40,20,80,.55)}
.xp-fill,.xp-mine{position:absolute;inset:0;display:block}
.xp-fill{overflow:hidden;background:linear-gradient(180deg,#A855F7,#7C3AED)}
.xp-mine{background:#fff}
.xp-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:3px;height:30px;padding:0 11px;border-radius:99px;background:#fff;box-shadow:0 6px 14px -8px rgba(40,20,80,.45);font-weight:700;font-size:17px;line-height:1;color:#15131A;white-space:nowrap;font-variant-numeric:tabular-nums}
.xp-pill small{font-size:13px;font-weight:600}
.xp-pill b{min-width:5ch;text-align:right}
.xp-pill .xp-coin{width:18px;height:18px;margin-right:4px}
.xp-pill .xp-coin svg{width:100%;height:100%}
.xp-jar.is-small{border-radius:18px}
.xp-jar.is-small .xp-pill{height:28px;font-size:16px}
.xp-jar.is-small .xp-pill,.xp-jar.is-ready .xp-pill{background:#15131A;color:#fff;box-shadow:none}

/* ── Шторка ── */
#xp{position:fixed;inset:0;z-index:99;font-family:var(--f);color:#15131A;-webkit-tap-highlight-color:transparent}
.xp-back{position:absolute;inset:0;background:rgba(21,19,26,.34)}
.xp-sheet{position:absolute;left:0;right:0;bottom:0;top:calc(34px + var(--tg-safe-top,0px));max-width:480px;margin:0 auto;border-radius:24px 24px 0 0;background:#F5F3FA;overflow:hidden;box-shadow:0 -18px 40px -24px rgba(21,19,26,.4);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.xp-grab{position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:9px;background:rgba(60,60,67,.16)}
.xp-snd{position:absolute;top:14px;left:8px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;color:rgba(60,60,67,.45)}
.xp-snd svg{width:20px;height:20px;display:block}
.xp-snd.is-on{color:rgba(21,19,26,.7)}
.xp-bars{position:absolute;top:32px;left:56px;right:76px;display:flex;gap:5px}
.xp-bars i{flex:1;height:3px;border-radius:3px;background:rgba(21,19,26,.12);overflow:hidden}
.xp-bars b{display:block;height:100%;background:#15131A;transform:scaleX(0);transform-origin:0 50%}
.xp-skip{position:absolute;top:14px;right:8px;height:40px;padding:0 10px;border:0;background:none;cursor:pointer;font:600 14px/1 var(--f);color:rgba(60,60,67,.5)}
.xp-q{position:absolute;top:62px;left:16px;right:16px;margin:0;text-align:center;font-weight:600;font-size:13px;line-height:18px;color:rgba(60,60,67,.62)}
.xp-stage{position:absolute;left:0;right:0;top:94px;bottom:calc(140px + var(--tg-safe-bottom,0px))}
.xp-box{position:absolute;left:50%;top:50%;width:360px;height:440px;transform-origin:50% 50%}
.xp-box>*{position:absolute}
.xp-foot{position:absolute;left:16px;right:16px;bottom:calc(12px + var(--tg-safe-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.xp-cap{min-height:25px;margin:0;display:flex;justify-content:center;font-weight:600;font-size:19px;line-height:25px;letter-spacing:-.01em;color:rgba(21,19,26,.9)}
.xp-cap-w{position:relative;display:inline-block;max-width:340px;text-align:left}
.xp-ghost{visibility:hidden}
.xp-type{position:absolute;left:0;top:0;right:0}
.xp-type.is-typing::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.16em;background:currentColor;animation:tkCaret 1.4s steps(1) infinite}
.xp-sub{margin:0;text-align:center;font-weight:500;font-size:13px;line-height:18px;color:rgba(60,60,67,.58);opacity:0}
.xp-next{margin:10px 0 0;text-align:center;font-weight:600;font-size:12.5px;line-height:16px;color:rgba(60,60,67,.42);opacity:0}

/* ── Цеглини сцени ── */
.xp-jar-at{display:block}
.xp-av{display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(21,19,26,.07),0 8px 18px -12px rgba(40,20,80,.5);color:#A09BB0}
.xp-av svg{width:19px;height:19px}
.xp-lines{pointer-events:none}
.xp-lines path{fill:none;stroke:rgba(124,58,237,.28);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 1}
.xp-drop{border-radius:50%;background:#7C3AED;opacity:0}
.xp-drop.is-mine{background:#fff;box-shadow:0 0 0 1.5px rgba(21,19,26,.2),0 4px 10px -3px rgba(21,19,26,.4)}
.xp-row-c{display:flex;justify-content:center;pointer-events:none}
.xp-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(21,19,26,.07),0 8px 18px -12px rgba(40,20,80,.45);font-weight:600;font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.xp-chip b{font-weight:700}
.xp-chip svg{width:16px;height:16px}
.is-big .xp-chip{height:40px;padding:0 16px;font-size:17px;gap:8px}
.is-day .xp-chip{height:32px;font-weight:700;font-size:14px;gap:7px;box-shadow:0 0 0 1px rgba(21,19,26,.07)}
.xp-coin{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(140deg,#A855F7,#7C3AED);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);flex:none}
.xp-coin svg{display:block;width:100%;height:100%;flex:none}
.xp-btn .xp-coin{width:20px;height:20px;margin-left:-2px}
.xp-plus .xp-coin{display:inline-flex;width:28px;height:28px;margin-left:6px;vertical-align:-3px;box-shadow:0 2px 12px rgba(21,19,26,.35)}
.xp-plus .xp-coin svg{width:100%;height:100%}
/* Крок 3: твоя біла смуга відділяється від пулу дня і летить управо; монетки вилітають із твоєї банки. */
.xp-slab{background:#fff;border-radius:22px 22px 0 0;box-shadow:0 14px 28px -18px rgba(40,20,80,.55)}
.xp-cpop{display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(140deg,#A855F7,#7C3AED);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);opacity:0;pointer-events:none}
.xp-cpop svg{display:block;width:100%;height:100%}
.xp-btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;background:#15131A;color:#fff;font-weight:600;font-size:16px;overflow:hidden}
.xp-btn svg{width:19px;height:19px;flex:none}
.xp-btn .xp-coin svg{width:100%;height:100%}
.xp-btn.is-done{background:#fff;color:#15131A;box-shadow:0 0 0 1.5px #15131A}
.xp-ripple{border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 8px rgba(255,255,255,.18);pointer-events:none}
.xp-lead{height:1.5px;background:rgba(21,19,26,.35)}
.xp-you{display:flex;align-items:center;height:30px;padding:0 11px;border-radius:99px;background:#fff;color:#15131A;box-shadow:0 0 0 1px rgba(21,19,26,.07),0 8px 18px -12px rgba(40,20,80,.45);font-weight:700;font-size:13px}
.xp-arrow{color:rgba(21,19,26,.4)}
.xp-arrow svg{width:100%;height:100%}
.xp-lbl{text-align:center;font-weight:600;font-size:12.5px;color:rgba(60,60,67,.62);white-space:nowrap}
.xp-plus{text-align:center;font-weight:700;font-size:32px;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(21,19,26,.5);font-variant-numeric:tabular-nums;pointer-events:none}

/* ── Фінал ── */
.xp-final{position:absolute;left:24px;right:24px;top:72px;bottom:calc(92px + var(--tg-safe-bottom,0px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;visibility:hidden;cursor:default}
.xp-final.is-on{visibility:visible}
.xp-final>*{opacity:0}
.xp-fin-art{width:84px;height:112px}
.xp-fin-art .xp-jar{border-radius:18px}
.xp-fin-h{margin:22px 0 18px;font-family:var(--f-d,var(--f));font-weight:600;font-size:30px;letter-spacing:-.03em}
.xp-rows{align-self:stretch;max-width:380px;margin:0 auto;display:flex;flex-direction:column;gap:9px;text-align:left}
.xp-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(21,19,26,.05)}
.xp-n{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#15131A;color:#fff;font-weight:700;font-size:13px}
.xp-row p{margin:0;font-weight:600;font-size:14.5px;line-height:1.3}
.xp-row small{display:block;margin-top:2px;font-weight:500;font-size:12.5px;color:rgba(60,60,67,.56)}
.xp-fin-n{margin-top:14px;font-weight:500;font-size:12.5px;color:rgba(60,60,67,.5);text-wrap:balance}
.xp-cta{position:absolute;left:0;right:0;bottom:0;padding:8px 20px calc(20px + var(--tg-safe-bottom,0px));opacity:0;pointer-events:none;cursor:default}
.xp-cta.is-on{opacity:1;pointer-events:auto}
.xp-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;padding:0;border:0;border-radius:14px;background:#15131A;color:#fff;cursor:pointer;font:600 16px/1 var(--f)}
.xp-go svg{width:19px;height:19px}
.xp-go:active{opacity:.75}
.xp-skip.is-close{color:rgba(21,19,26,.62)}
/* Палець на екрані — пауза: верхні кнопки й смужки притихають. */
.xp-bars,.xp-skip,.xp-snd{transition:opacity .2s ease}
.xp-sheet.is-held .xp-bars,.xp-sheet.is-held .xp-skip,.xp-sheet.is-held .xp-snd{opacity:.3}

@media (max-width:340px){.xp-cap{font-size:17px;line-height:23px;min-height:23px}.xp-fin-h{font-size:26px;margin:16px 0 14px}.xp-row{padding:9px 12px}.xpool-card{gap:12px;padding:14px}.xpool-jar-w{width:84px}.xpool-mk{top:14px;bottom:14px;left:98px;right:14px}.xpool-mk-i b{font-size:19px}}
@media (max-height:640px){.xp-fin-art{display:none}.xp-fin-h{margin-top:0}}
@media (prefers-reduced-motion:reduce){.xpool-liq,.xpool-me{transition:none}}

/* 16.09.2026: «Вчорашню частку рахуємо» — зі прокруткою: стан у процесі видно, а не лише написом. */
.xpool-calc{display:inline-flex;align-items:center;gap:7px}
.xpool-spin{width:12px;height:12px;flex:none;border-radius:50%;border:2px solid rgba(160,155,176,.28);border-top-color:#A09BB0;animation:spin .85s linear infinite}
@media(prefers-reduced-motion:reduce){.xpool-spin{animation-duration:2.4s}}

/* econ1 (17.09.2026): незабрана частка — окремий стан: кнопка «Забрати» акцентна (єдина «грошова» дія на головній), зона зʼявляється з рухом. Забирають 42–54% — має бути видно. */
.xpool-cl:not(.is-done) .xpool-cl-go{background:#6D28D9;color:#fff;box-shadow:0 10px 22px -12px rgba(109,40,217,.7)}
@media(prefers-reduced-motion:no-preference){.xpool-cl:not(.is-done){animation:xcl-in .5s cubic-bezier(.2,.8,.3,1) both}}
@keyframes xcl-in{0%{transform:translateY(6px);opacity:0}100%{transform:none;opacity:1}}