/* 🔮 Матриця долі — екран УСЕРЕДИНІ застосунку NUMERIQ. * * ЧОМУ ВСЕ ПІД #destinyScreen: це більше не окрема сторінка, а екран поруч із * «Картою Долі», «Матрицею Піфагора» й рештою. У застосунку вже є класи * .btn, .sub, .num, .sheet, .show, .err — без скоупу вони б билися між собою. * Назви keyframes теж із префіксом dm_ із тієї самої причини. * * ЧОМУ РУХ ІНШИЙ, НІЖ У «КАРТІ ДОЛІ»: там 3D-павутина на canvas, яка * обертається. Тут — повільне дихання й орбітальний дрейф SVG. Два екрани * мають відчуватись різними, а не однією анімацією у двох місцях. */ #destinyScreen{ position:fixed; inset:0; z-index:10; display:none; overflow:hidden; /* Полотно застосунку просвічує крізь екран: фон має бути один на всі вкладки, інакше перехід у «Долю» виглядає як стрибок в інший застосунок. */ --dm-bg:#0d0c17; --dm-card:#1b1533; --dm-gold:#f2b23c; --dm-cyan:#43e2c0; --dm-ink:#f1eefc; --dm-muted:#a79ecb; --dm-line:#33294f; --dm-bad:#ff9c9c; /* Скільки місця займає чуже: шапка Telegram + власна панель застосунку зверху і нижнє меню знизу. Без цього екран лягає під них. */ --dm-acid:#b6ff3d; /* Нефрит — родина «куди піти». Мідь лишається за «де я зараз». */ --dm-jade:#43e2c0; /* Геометрія сцени — окремий, СВІТЛІШИЙ колір. Поки лінії бралися з кольору рамок (--dm-line), на темному тлі вони зникали. */ --dm-edge:#8578b0; /* Звʼязки — неон, рисочки — діамант. Обидва «грають»: колір повільно ходить між відтінками, як підсвітка ключового слова в редакторі. */ --dm-neon:#2ff0ff; --dm-neon-2:#9bfcff; --dm-neon-3:#37b7ff; /* Рисочки кільця — бордо. Біле по зеленкуватому тлу губилось: живий фон підсвічує саме ту зону, де кільце. Бордо з зеленим — протилежні тони, тому воно читається навіть поверх світлої плями. */ --dm-wine:#a8264c; --dm-wine-2:#e33a68; --dm-wine-3:#ff8fae; /* літери вершин: отруйно-зелений */ --dm-top:calc(env(safe-area-inset-top,0px) + var(--tg-safe-top,0px) + 56px); --dm-bot:calc(env(safe-area-inset-bottom,0px) + 86px); background:transparent; color:var(--dm-ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-user-select:none; user-select:none; } #destinyScreen.show{display:block} #destinyScreen *{box-sizing:border-box} /* 🔴 Наші правила (.btn{display:block}, .nextchip{display:block}) сильніші за браузерне [hidden]{display:none} — і «приховані» кнопки лишались на екрані. Саме через це на вже відкритому пункті горіла кнопка «Відкрити за N». */ #destinyScreen [hidden]{display:none !important} /* ── живий фон ───────────────────────────────────────────────────────────── * Три розмиті плями повільно пливуть і МІНЯЮТЬ КОЛІР кожна у своєму ритмі — * періоди навмисно не кратні (37/53/71 с), тож візерунок не повторюється й не * читається як цикл. Плюс «числовий пил»: цифри, що ледь помітно спливають. * Усе на transform/opacity, щоб WebView не захлинувся. */ #destinyScreen .dm-bg{position:absolute;inset:-20%;z-index:0;pointer-events:none; /* Було .55: світлі плями підсвічували зону кільця, і тонкі лінії по них губились. Фон має бути глибиною, а не другим шаром малюнка. */ filter:blur(70px);opacity:.34} #destinyScreen .dm-bg i{position:absolute;display:block;border-radius:50%} #destinyScreen .dm-bg i:nth-child(1){width:46%;height:46%;left:4%;top:8%; background:#5b3fd6;animation:dm_drift1 37s ease-in-out infinite alternate, dm_tint1 53s linear infinite} #destinyScreen .dm-bg i:nth-child(2){width:38%;height:38%;right:2%;top:26%; background:#2f5bd6;animation:dm_drift2 53s ease-in-out infinite alternate, dm_tint2 71s linear infinite} #destinyScreen .dm-bg i:nth-child(3){width:52%;height:52%;left:18%;bottom:2%; background:#c9762a;animation:dm_drift3 71s ease-in-out infinite alternate, dm_tint3 37s linear infinite} @keyframes dm_drift1{to{transform:translate(14%,10%) scale(1.25)}} @keyframes dm_drift2{to{transform:translate(-12%,16%) scale(.8)}} @keyframes dm_drift3{to{transform:translate(8%,-14%) scale(1.18)}} @keyframes dm_tint1{0%{background:#5b3fd6}33%{background:#6b4fe0}66%{background:#4a3fb0}100%{background:#5b3fd6}} @keyframes dm_tint2{0%{background:#2f5bd6}33%{background:#7c5cff}66%{background:#3f57c9}100%{background:#2f5bd6}} @keyframes dm_tint3{0%{background:#c9762a}33%{background:#b06a2a}66%{background:#8a5f2a}100%{background:#c9762a}} #destinyScreen .dm-dust{position:absolute;inset:0;z-index:0;pointer-events:none; overflow:hidden} /* Пил має лишатись ФОНОМ. Спершу цифри були великі й чіткі — на екрані вони читались як частина матриці й плутались із реальними числами. Тепер дрібні, ледь помітні й трохи розмиті. */ #destinyScreen .dm-dust span{position:absolute;bottom:-8%;color:var(--dm-muted); font-size:11px;opacity:0;filter:blur(.7px);animation:dm_rise linear infinite} @keyframes dm_rise{ 0%{opacity:0;transform:translateY(0) rotate(0deg)} 12%{opacity:.12} 88%{opacity:.07} 100%{opacity:0;transform:translateY(-108vh) rotate(24deg)} } /* ── сцена ─────────────────────────────────────────────────────────────────*/ /* Сцена живе між ВЛАСНИМИ блоками HUD, а не між панелями застосунку: інакше кнопка «Сьогодні» лягає на верхній ряд чисел. Значення міряються у рантаймі. */ #destinyScreen .dm-vp{position:absolute;top:var(--dm-scene-top,var(--dm-top)); bottom:var(--dm-scene-bot,var(--dm-bot));left:0;right:0;touch-action:none;z-index:1; display:flex;align-items:center;justify-content:center} #destinyScreen .dm-tilt{perspective:1000px;width:100%;height:100%; display:flex;align-items:center;justify-content:center} #destinyScreen .dm-world{width:min(94vw,min(80vh,520px));aspect-ratio:1; transform-origin:50% 50%;will-change:transform} #destinyScreen svg{width:100%;height:100%;display:block;overflow:visible} /* дихання й орбітальний дрейф — саме те, чого немає в «Карті Долі» */ #destinyScreen .dm-breathe{animation:dm_breathe 17s ease-in-out infinite, dm_orbit 43s ease-in-out infinite} @keyframes dm_breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}} /* Нахил ледь помітний: власник сказав, що схема «малюється з нахилом» — на сітці з чисел навіть півтора градуса читаються як перекіс. */ @keyframes dm_orbit{ 0%,100%{transform-origin:50% 50%;rotate:-0.5deg} 50%{rotate:0.5deg} } /* ── ЦЕРЕМОНІЯ ПОЯВИ ─────────────────────────────────────────────────────── * Елементи стоять приховані й отримують клас .in по черзі з JS. Саме JS, а не * CSS-затримки: черга має бути точною й такою, що її можна пропустити тапом. */ #destinyScreen .nd,#destinyScreen .tick{opacity:0} #destinyScreen .nd{transform-box:fill-box;transform-origin:50% 50%} #destinyScreen .spark{fill:var(--dm-cyan)} #destinyScreen .nd.in{animation:dm_pop .9s cubic-bezier(.18,1.5,.35,1) forwards} @keyframes dm_pop{ 0%{opacity:0;transform:scale(.25)} 55%{opacity:1;transform:scale(1.22)} 78%{transform:scale(.96)} 100%{opacity:1;transform:scale(1)} } /* Число народжується РОЗПЕЧЕНИМ і вистигає, лише зайнявши своє місце. Свічення знімається в кінці (filter:none), щоб не тримати WebView. */ #destinyScreen .nd.in circle{animation:dm_flare 1.6s ease-out forwards} @keyframes dm_flare{ 0%{stroke:#fff2cf;stroke-width:4.5;fill:#5b3fd6; filter:drop-shadow(0 0 16px rgba(255,214,140,.95))} 30%{stroke:#f7c65a;stroke-width:3.4;fill:#2a2208; filter:drop-shadow(0 0 11px rgba(247,198,90,.8))} 100%{stroke:var(--dm-line);stroke-width:1.6;fill:#17142b;filter:none} } #destinyScreen .nd.on.in circle{animation:dm_flare_on 1.6s ease-out forwards} @keyframes dm_flare_on{ 0%{stroke:#fff2cf;stroke-width:4.5;filter:drop-shadow(0 0 18px rgba(255,214,140,.95))} 100%{stroke:var(--dm-gold);stroke-width:2.2;fill:#241a06;filter:none} } #destinyScreen .nd.in .num{animation:dm_numflare 1.6s ease-out forwards} @keyframes dm_numflare{ 0%{fill:#fffcf4;filter:drop-shadow(0 0 10px rgba(255,255,255,.95))} 40%{fill:#ffe9b8} 100%{fill:var(--dm-ink);filter:none} } /* підпис (літера вершини) зʼявляється так, наче на нього натиснули: * спершу більший за норму, потім осідає — саме той ефект «натискання». */ #destinyScreen .cap{opacity:0} #destinyScreen .cap.in{animation:dm_letter 1.1s cubic-bezier(.2,1.6,.3,1) forwards, dm_capflare 1.6s ease-out forwards} @keyframes dm_capflare{ 0%{fill:#eeffd8;filter:drop-shadow(0 0 10px rgba(157,255,47,.95))} 45%{fill:#d2ff7a;filter:drop-shadow(0 0 7px rgba(157,255,47,.7))} 100%{fill:var(--dm-acid);filter:none} } @keyframes dm_letter{ 0%{opacity:0;transform:scale(.2)} 45%{opacity:1;transform:scale(1.55)} 72%{transform:scale(.9)} 100%{opacity:1;transform:scale(1)} } /* лінія малюється повільно, а по ній біжить іскра */ #destinyScreen .ln{stroke:var(--dm-neon);stroke-width:1.9;fill:none; stroke-dasharray:var(--len);stroke-dashoffset:var(--len)} /* Три анімації поспіль: лінія малюється, спалахує, а далі вічно переливається. Перелив стартує ПІСЛЯ спалаху — інакше два кольори б'ються за той самий stroke і виграє останній оголошений, а не останній за часом. */ #destinyScreen .ln.in{animation:dm_draw 1.15s ease forwards, dm_lnflare 1.9s ease-out forwards, dm_lnplay 5.5s 1.9s ease-in-out infinite} @keyframes dm_lnflare{ 0%{stroke:#ffffff;stroke-width:3.2;filter:drop-shadow(0 0 12px rgba(47,240,255,.95))} 45%{stroke:var(--dm-neon-2);stroke-width:2.4} /* 🔴 Тут раніше стояв колір рамок — саме цей рядок і гасив усі звʼязки. */ 100%{stroke:var(--dm-neon);stroke-width:1.9; filter:drop-shadow(0 0 3px rgba(47,240,255,.5))} } @keyframes dm_lnplay{ 0%,100%{stroke:var(--dm-neon);stroke-width:1.9; filter:drop-shadow(0 0 3px rgba(47,240,255,.45))} 35%{stroke:var(--dm-neon-2);stroke-width:2.7; filter:drop-shadow(0 0 8px rgba(155,252,255,.85))} 70%{stroke:var(--dm-neon-3);stroke-width:2.1; filter:drop-shadow(0 0 5px rgba(55,183,255,.6))} } @keyframes dm_draw{to{stroke-dashoffset:0}} #destinyScreen .spark{opacity:0} #destinyScreen .spark.in{opacity:1} /* позначка кільця спалахує бірюзовим і осідає у звичайний колір */ /* Рисочка вступає зі своєю затримкою (--i задає JS), тож по кільцю біжить хвиля. Однакова затримка на всі тридцять дві читалась би як блимання. */ #destinyScreen .tick.in{animation:dm_tick 1.4s ease forwards, dm_tickplay 4.2s calc(1.4s + var(--i, 0) * 0.11s) ease-in-out infinite} @keyframes dm_tick{ 0%{opacity:0;stroke:var(--dm-wine-3);stroke-width:5;transform:scale(1.6); filter:drop-shadow(0 0 10px rgba(255,111,150,.9))} 25%{opacity:1;stroke:var(--dm-wine-2);stroke-width:4.2} /* 🔴 Тут колись стояв колір рамок — саме він гасив усі рисочки. */ 100%{opacity:1;stroke:var(--dm-wine);stroke-width:1.9;transform:scale(1); filter:none} } /* Головне в переливі — РОЗМІР, а не відтінок. Чотири відтінки білого формально мінялись, а на екрані не відбувалось нічого: різниця між #f2fbff і #ffffff не видна. Тепер рисочка помітно росте й осідає, а колір іде від темного бордо до яскравого малинового. */ @keyframes dm_tickplay{ 0%,100%{stroke:var(--dm-wine);stroke-width:1.6;transform:scale(1);opacity:.8} 28%{stroke:var(--dm-wine-2);stroke-width:3.4;transform:scale(1.35);opacity:1} 52%{stroke:var(--dm-wine-3);stroke-width:2.8;transform:scale(1.5);opacity:1} 76%{stroke:var(--dm-wine-2);stroke-width:2;transform:scale(1.15);opacity:.9} } /* Відкритий і поточний відрізки — це ІНФОРМАЦІЯ, тому перелив їх не чіпає. */ #destinyScreen .tick.on.in,#destinyScreen .tick.now.in{animation-iteration-count:1} #destinyScreen .tick.on.in{animation:dm_tick_on 1.4s ease forwards} @keyframes dm_tick_on{ 0%{opacity:0;stroke:var(--dm-cyan);stroke-width:4} 100%{opacity:1;stroke:var(--dm-gold);stroke-width:2.4} } #destinyScreen .tick.now.in{animation:dm_tick_now 1.4s ease forwards} @keyframes dm_tick_now{ 0%{opacity:0;stroke-width:5} 100%{opacity:1;stroke:var(--dm-cyan);stroke-width:3.4} } #destinyScreen .nd circle{fill:#17142b;stroke:var(--dm-edge);stroke-width:1.8; transition:stroke .2s} #destinyScreen .nd.on circle{stroke:var(--dm-gold);fill:#241a06;stroke-width:2.4} #destinyScreen .nd.on .num{fill:var(--dm-gold)} #destinyScreen .nd:active circle{stroke:var(--dm-cyan)} #destinyScreen .nd.next circle{stroke:var(--dm-cyan); animation:dm_beat 1.6s ease-in-out infinite} @keyframes dm_beat{0%,100%{stroke-width:1.5}50%{stroke-width:3.4}} #destinyScreen .nd.cur circle{stroke:var(--dm-cyan)} #destinyScreen .nd.dim circle{opacity:.5} #destinyScreen .num{font-size:14px;font-weight:700;fill:var(--dm-ink); text-anchor:middle;dominant-baseline:central;pointer-events:none} #destinyScreen .cap{font-size:10px;font-weight:600;fill:var(--dm-acid);text-anchor:middle; pointer-events:none;transform-box:fill-box;transform-origin:50% 50%} #destinyScreen .capL{font-size:9px;fill:var(--dm-muted);text-anchor:end; pointer-events:none;dominant-baseline:central} #destinyScreen .ctr circle{fill:#2a2208;stroke:var(--dm-gold);stroke-width:2.4} #destinyScreen .tick{stroke:var(--dm-wine);stroke-width:1.9;cursor:pointer; transform-box:fill-box;transform-origin:50% 50%} #destinyScreen .tick.on{stroke:var(--dm-gold);stroke-width:2.4} #destinyScreen .tick.now{stroke:var(--dm-cyan);stroke-width:3.4} #destinyScreen .hit{stroke:transparent;stroke-width:13;cursor:pointer} /* Клітинки квадрата не натискаються: платні ЛІНІЇ, а не самі клітинки — девʼять клітинок у застосунку вже є окремим екраном. */ #destinyScreen .cell{fill:#17142b;stroke:var(--dm-edge);stroke-width:1.3; pointer-events:none} #destinyScreen .cellnum{font-size:15px;font-weight:700;fill:var(--dm-ink); text-anchor:middle;dominant-baseline:central;pointer-events:none; letter-spacing:.5px} /* ── HUD ───────────────────────────────────────────────────────────────────*/ #destinyScreen .dm-hud{position:absolute;left:0;right:0;pointer-events:none;z-index:3} #destinyScreen .dm-hud.top{top:0;padding:var(--dm-top) 12px 0;text-align:center} #destinyScreen .dm-hud.bot{bottom:var(--dm-bot);padding:0 12px 4px} #destinyScreen .dm-h1{margin:0;font-size:17px;letter-spacing:.2px;font-weight:600} #destinyScreen .dm-sub{color:var(--dm-muted);font-size:12px;margin-top:2px} /* Ряд крихт прокручується. Без підказки по краях людина не здогадується, що світів більше, ніж влізло, — тому маска й стрілки. */ #destinyScreen .crumbwrap{position:relative;margin-top:8px} #destinyScreen .crumbs{display:flex;gap:5px;overflow-x:auto;padding:0 22px 2px; scrollbar-width:none;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)} #destinyScreen .arrow{position:absolute;top:50%;transform:translateY(-50%); pointer-events:auto;width:22px;height:26px;border:0;border-radius:8px; background:rgba(13,12,23,.85);color:var(--dm-gold);font:600 15px/1 inherit; cursor:pointer;display:none;z-index:2} #destinyScreen .arrow.on{display:block} #destinyScreen .arrow.l{left:0} #destinyScreen .arrow.r{right:0} #destinyScreen .crumbs::-webkit-scrollbar{display:none} #destinyScreen .crumb{flex:0 0 auto} #destinyScreen .crumb{pointer-events:auto;background:rgba(27,21,51,.8); border:1px solid var(--dm-line);color:var(--dm-muted);border-radius:999px; padding:5px 11px;font-size:12px;cursor:pointer;font-family:inherit} #destinyScreen .crumb.at{color:#0a1a14;border-color:var(--dm-gold); background:var(--dm-gold);font-weight:600} #destinyScreen .bar-t{height:4px;background:#1d1838;border-radius:3px;overflow:hidden; max-width:420px;margin:10px auto 0} #destinyScreen .bar-f{height:100%;width:0; background:linear-gradient(90deg,var(--dm-gold),var(--dm-cyan)); transition:width .8s ease} #destinyScreen .cnt{color:var(--dm-muted);font-size:11px;text-align:center;margin-top:4px} #destinyScreen .nextchip{pointer-events:auto;display:block;margin:0 auto;max-width:420px; background:rgba(27,21,51,.92);border:1px solid var(--dm-line);border-radius:14px; padding:10px 14px;color:var(--dm-ink);font:inherit;font-size:13px;text-align:left; cursor:pointer;width:100%} #destinyScreen .nextchip b{color:var(--dm-cyan);font-weight:600} #destinyScreen .tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px} #destinyScreen .tool{pointer-events:auto;background:rgba(27,21,51,.8); border:1px solid var(--dm-line);color:var(--dm-muted);border-radius:12px; width:40px;height:36px;font-size:16px;cursor:pointer;font-family:inherit} #destinyScreen .tool.wide{width:auto;padding:0 12px;font-size:12px} /* Розділи застосунку — НЕ те саме, що рівень мапи. Поки вони були мідними пігулками, «Ядро матриці» (де я зараз) і «Сьогодні» (куди піти) виглядали однаково підсвіченими, і власник справедливо не зрозумів, що це різне. */ #destinyScreen .todaybtn{pointer-events:auto;margin:8px 3px 0; background:rgba(27,21,51,.92);border:1px solid rgba(67,226,192,.45); color:var(--dm-jade);border-radius:11px;padding:5px 11px;font:inherit; font-size:12px;cursor:pointer;letter-spacing:.2px} #destinyScreen .todaybtn:active{background:rgba(67,226,192,.14)} /* підказка «тапни, щоб пропустити» — тільки поки йде церемонія */ #destinyScreen .skip{position:absolute;left:0;right:0;bottom:calc(var(--dm-bot) + 54px); text-align:center;color:var(--dm-muted);font-size:11px;opacity:.75;z-index:2; pointer-events:none} /* ── накладні панелі ───────────────────────────────────────────────────────*/ /* Межі, а не відступи: вміст фізично не заходить під нижнє меню, тому останній пункт не виглядає підрізаним. */ #destinyScreen .listwrap,#destinyScreen .tdwrap, #destinyScreen .apwrap,#destinyScreen .kinwrap, #destinyScreen .webwrap{position:fixed;left:0;right:0; top:var(--dm-top);bottom:var(--dm-bot);background:var(--dm-bg);z-index:7; overflow-y:auto;-webkit-overflow-scrolling:touch;display:none; padding:10px 14px 18px;border-radius:14px 14px 0 0} #destinyScreen .listwrap.show,#destinyScreen .tdwrap.show, #destinyScreen .apwrap.show,#destinyScreen .kinwrap.show, #destinyScreen .webwrap.show{display:block} /* Кнопка повернення лишається на видноті при прокручуванні, але НЕ під чужою шапкою: липне саме до вільної смуги. */ #destinyScreen .listwrap > .tool,#destinyScreen .tdwrap > .tool, #destinyScreen .apwrap > .tool,#destinyScreen .kinwrap > .tool, #destinyScreen .webwrap > .tool{ position:sticky;top:0;z-index:3;backdrop-filter:blur(8px)} #destinyScreen .dm-h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em; color:var(--dm-muted);margin:20px 0 8px;font-weight:600} #destinyScreen .grid{display:grid;gap:8px} #destinyScreen .item{display:flex;gap:10px;align-items:center;background:var(--dm-card); border:1px solid var(--dm-line);border-radius:12px;padding:10px 12px;cursor:pointer; text-align:left;color:inherit;font:inherit;width:100%} #destinyScreen .item .ar{flex:0 0 36px;height:36px;border-radius:10px;background:#1d1838; display:grid;place-items:center;font-weight:700;color:var(--dm-muted)} #destinyScreen .item.on .ar{background:#241a06;color:var(--dm-gold)} #destinyScreen .item .tx{flex:1;min-width:0} #destinyScreen .item .nm{display:block;font-size:14px} #destinyScreen .item .hn{display:block;font-size:12px;color:var(--dm-muted);margin-top:2px} #destinyScreen .item .st{flex:0 0 auto;font-size:12px;color:var(--dm-muted)} #destinyScreen .item.on .st{color:var(--dm-gold)} #destinyScreen .note{color:var(--dm-muted);font-size:12px;line-height:1.5;margin:0 0 10px; border-left:2px solid var(--dm-line);padding-left:10px} #destinyScreen .tdhead{text-align:center;margin-bottom:14px} #destinyScreen .tdhead .d{font-size:13px;color:var(--dm-muted)} #destinyScreen .dial{display:flex;align-items:center;justify-content:center;gap:14px; margin:14px 0} #destinyScreen .dial .big{width:92px;height:92px;border-radius:50%; border:2px solid var(--dm-gold);background:#241a06;display:grid;place-items:center; color:var(--dm-gold);font-size:38px;font-weight:700} #destinyScreen .dial .side{display:grid;gap:6px} #destinyScreen .pill{background:var(--dm-card);border:1px solid var(--dm-line); border-radius:999px;padding:5px 12px;font-size:12px;color:var(--dm-muted)} #destinyScreen .pill b{color:var(--dm-ink);font-weight:600} #destinyScreen .strip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:14px 0} #destinyScreen .day{background:var(--dm-card);border:1px solid var(--dm-line); border-radius:10px;padding:7px 0;text-align:center} #destinyScreen .day .w{font-size:10px;color:var(--dm-muted)} #destinyScreen .day .d{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums} #destinyScreen .day .n{display:inline-grid;place-items:center;width:22px;height:22px; margin-top:3px;border-radius:50%;background:#1d1838;border:1px solid var(--dm-line); font-size:12px;font-weight:700;font-variant-numeric:tabular-nums} #destinyScreen .day.best .n{border-color:var(--dm-cyan);color:var(--dm-cyan)} #destinyScreen .day.today .n{border-color:var(--dm-gold);color:var(--dm-gold)} #destinyScreen .legend{color:var(--dm-muted);font-size:11px;line-height:1.5; margin:-6px 0 14px} #destinyScreen .legend b{color:var(--dm-ink);font-weight:600} #destinyScreen .day.best{border-color:var(--dm-cyan)} #destinyScreen .day.best .n{color:var(--dm-cyan)} #destinyScreen .day.today{border-color:var(--dm-gold)} #destinyScreen .day.today .n{color:var(--dm-gold)} #destinyScreen .swatch{display:inline-block;width:12px;height:12px;border-radius:3px; vertical-align:-1px;margin-right:6px;border:1px solid rgba(255,255,255,.25)} /* ── картка ────────────────────────────────────────────────────────────────*/ #destinyScreen .sheet{position:fixed;left:0;right:0;top:var(--dm-top); bottom:var(--dm-bot);background:rgba(4,4,14,.82);display:none; align-items:flex-end;justify-content:center;z-index:9} #destinyScreen .sheet.show{display:flex} #destinyScreen .sheet-in{width:100%;max-width:520px;background:var(--dm-card); border:1px solid var(--dm-line);border-bottom:0;border-radius:16px 16px 0 0; padding:18px 16px 18px;max-height:100%;overflow-y:auto; -webkit-overflow-scrolling:touch;border-radius:16px} #destinyScreen .sheet h3{margin:0 0 2px;font-size:16px} #destinyScreen .sheet .ar{color:var(--dm-gold);font-size:13px;margin-bottom:10px} /* Тема аркана й вхід у пояснення — під назвою карти, тихішим тоном: назва мусить лишитись назвою, а не перетворитись на три рівноправні написи. */ #destinyScreen .sheet .ar .arkey{display:block;margin-top:3px;font-size:12px; color:var(--dm-muted);line-height:1.35} #destinyScreen .sheet .ar .arwhy{display:inline-block;margin-top:5px;padding:0; border:0;background:none;font:inherit;font-size:11px;color:var(--dm-jade); text-decoration:underline;cursor:pointer} /* Розшифровка букв: моноширинна, як і сама формула, щоб «=» стояли стовпчиком. */ #destinyScreen .howcnt .leg{margin-top:7px;font-size:11px;line-height:1.5; color:var(--dm-muted)} #destinyScreen .howcnt .leg b{display:block;margin-bottom:3px;font-weight:600; color:var(--dm-jade)} #destinyScreen .howcnt .leg span{display:block} #destinyScreen .howcnt .leg i{font-style:normal; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--dm-ink)} #destinyScreen .sheet p{margin:0 0 10px;color:var(--dm-muted);font-size:14px; line-height:1.6;white-space:pre-line} #destinyScreen .sheet p.body{color:var(--dm-ink)} #destinyScreen .btn{display:block;width:100%;margin-top:8px;padding:12px; border-radius:12px;border:0;background:var(--dm-gold);color:#1a1503;font-weight:700; font-size:15px;cursor:pointer;font-family:inherit} #destinyScreen .btn[disabled]{opacity:.55;cursor:default} #destinyScreen .btn.ghost{background:none;border:1px solid var(--dm-line); color:var(--dm-muted);font-weight:500} #destinyScreen .err{color:var(--dm-bad)} @media (prefers-reduced-motion:reduce){ #destinyScreen .dm-bg i,#destinyScreen .dm-dust span,#destinyScreen .dm-breathe{ animation:none} #destinyScreen .nd.in,#destinyScreen .cap.in,#destinyScreen .ln.in, #destinyScreen .tick.in{animation-duration:.01s} } /* ── прикладна нумерологія ─────────────────────────────────────────────────*/ /* Поле вводу живе в картці, а не в панелі: питання і відповідь мають бути перед очима разом, інакше людина не бачить, ЩО саме порахували. */ #destinyScreen .dm-input{width:100%;box-sizing:border-box;margin:8px 0 2px; background:#15122a;border:1px solid var(--dm-line);border-radius:12px; color:#fff;font:inherit;font-size:15px;padding:10px 12px;outline:none} #destinyScreen .dm-input:focus{border-color:var(--dm-gold)} #destinyScreen .dm-input.err{border-color:#e05a4a} #destinyScreen .aphead{margin:4px 0 10px} #destinyScreen .aphead .d{color:var(--dm-muted);font-size:12px;margin-top:3px} #destinyScreen .item .ref{display:block;font-size:11px;color:var(--dm-gold);margin-top:2px} /* ── родинні матриці ───────────────────────────────────────────────────────*/ /* Числа чужої матриці показуємо ДО платних пунктів і окремою смугою: це безкоштовна частина, і вона має бути очевидно безкоштовною. */ #destinyScreen .kinnums{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px} #destinyScreen .kinnums .pill{font-size:12px} #destinyScreen .kinback{margin:10px 0 2px} #destinyScreen #kinForm .btn{margin-top:8px} /* Числа чужої матриці натискні: тап пояснює, що це за точка. Раніше людина бачила «Б: 12 Повішений» і лишалась із назвою карти сам на сам. */ #destinyScreen .kinnums .pill{cursor:pointer;border:1px solid var(--dm-line); padding:5px 10px;border-radius:10px;background:rgba(27,21,51,.7)} #destinyScreen .kinnums .pill:active{border-color:var(--dm-jade)} #destinyScreen .kinnums .pill .q{color:var(--dm-jade);margin-left:5px;font-weight:600} #destinyScreen .arcnote{color:var(--dm-muted);font-size:11px;line-height:1.45; margin:2px 0 10px} /* Довгий текст у картці: розділ «Що таке аркани» — це пʼять абзаців, а не підпис, тому переноси рядків мають лишатись. */ #destinyScreen .sheet .body.long{white-space:pre-line;text-align:left} /* Назва екрана світиться тим самим переливом, що й звʼязки: по тексту раз на кілька секунд проходить світла смуга. Рівно один такий елемент на екран — якби «грало» все, не грало б ніщо. */ /* Тільки головна назва (#h1). Клас .dm-h1 носять ще заголовки панелей — якби перелив був у всіх, екран перетворився б на гірлянду. Під @supports: без градієнта по літерах прозорий текст просто зник би. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ #destinyScreen #h1{ background:linear-gradient(100deg, var(--dm-neon-3) 0%, var(--dm-neon) 25%, #ffffff 42%, var(--dm-neon-2) 58%, var(--dm-neon-3) 85%); background-size:280% 100%; -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; animation:dm_sweep 6s linear infinite} } @keyframes dm_sweep{0%{background-position:180% 0}100%{background-position:-80% 0}} /* Хто просив менше руху — отримує статичний неон, а не мигтіння. */ @media (prefers-reduced-motion:reduce){ #destinyScreen .ln.in,#destinyScreen .tick.in{animation-iteration-count:1} #destinyScreen #h1{animation:none;color:var(--dm-neon-2); -webkit-text-fill-color:var(--dm-neon-2)} } /* ── світла тема ─────────────────────────────────────────────────────────── * Міняємо ТІЛЬКИ змінні. Неон і бордо на пастельному тлі просто зникли б: * крижаний блакитний по лаванді не видно, тому на світлі звʼязки стають * насиченим морським, а рисочки — глибшим бордо. Гра кольором і розміром * лишається та сама. */ html[data-theme="light"] #destinyScreen{ --dm-bg:#fdf3f0; --dm-card:rgba(255,255,255,.72); --dm-gold:#6d4a08; --dm-cyan:#0a6a75; --dm-ink:#17151f; --dm-muted:#4e4a5e; --dm-line:#cdbfe4; --dm-edge:#8a7aa8; --dm-bad:#c62f2f; --dm-acid:#2f5f06; --dm-jade:#0a6a75; --dm-neon:#0a5a66; --dm-neon-2:#134e5e; --dm-neon-3:#123f8f; --dm-wine:#7a1330; --dm-wine-2:#b81f4e; --dm-wine-3:#e04a77; } /* Вузли на світлому — світла заливка з темним числом, інакше темний кружок на пастелі виглядає діркою. */ html[data-theme="light"] #destinyScreen .nd circle{fill:#fffdfb} html[data-theme="light"] #destinyScreen .nd.on circle{fill:#fff4d9} html[data-theme="light"] #destinyScreen .ctr circle{fill:#fff0cf} html[data-theme="light"] #destinyScreen .cell{fill:#fffdfb} html[data-theme="light"] #destinyScreen .num{fill:#17151f} /* Кінцеві кадри церемонії теж мусять прийти у світлі тони: останній кадр сильніший за правило, тож без цього вузли лишались би темними. */ html[data-theme="light"] #destinyScreen .nd.in circle{animation:dm_flare_l 1.6s ease-out forwards} @keyframes dm_flare_l{ 0%{stroke:#ffffff;stroke-width:4.5;fill:#ffe9b8; filter:drop-shadow(0 0 16px rgba(176,150,250,.95))} 100%{stroke:var(--dm-edge);stroke-width:1.8;fill:#fffdfb;filter:none} } html[data-theme="light"] #destinyScreen .nd.on.in circle{animation:dm_flare_on_l 1.6s ease-out forwards} @keyframes dm_flare_on_l{ 0%{stroke:#ffffff;stroke-width:4.5;filter:drop-shadow(0 0 18px rgba(176,150,250,.95))} 100%{stroke:var(--dm-gold);stroke-width:2.4;fill:#fff4d9;filter:none} } html[data-theme="light"] #destinyScreen .nd.in .num{animation:dm_numflare_l 1.6s ease-out forwards} @keyframes dm_numflare_l{ 0%{fill:#8a7aa8;filter:drop-shadow(0 0 10px rgba(176,150,250,.9))} 100%{fill:#17151f;filter:none} } /* Живий фон екрана на світлі лише заважає — полотно застосунку вже кольорове. */ html[data-theme="light"] #destinyScreen .dm-bg{opacity:.14} html[data-theme="light"] #destinyScreen .dm-dust{opacity:.35} html[data-theme="light"] #destinyScreen .todaybtn{background:rgba(255,255,255,.8)} html[data-theme="light"] #destinyScreen .crumb{background:rgba(255,255,255,.78)} html[data-theme="light"] #destinyScreen .tool{background:rgba(255,255,255,.82)} html[data-theme="light"] #destinyScreen .nextchip{background:rgba(255,255,255,.86)} html[data-theme="light"] #destinyScreen .dm-input{background:#fffdfb;color:#17151f} html[data-theme="light"] #destinyScreen .listwrap, html[data-theme="light"] #destinyScreen .tdwrap, html[data-theme="light"] #destinyScreen .apwrap, html[data-theme="light"] #destinyScreen .kinwrap{background:rgba(253,243,240,.96)} /* Школа — метадані, а не частина тлумачення: дрібно, приглушено й окремим рядком. Позначка «наша угода» стоїть поруч, бо це теж про походження числа, а не про його значення. */ #destinyScreen .school{font-size:11px;color:var(--dm-muted);margin:2px 0 6px; line-height:1.4} #destinyScreen .school b{color:var(--dm-gold);font-weight:600} /* «Як пораховано». Моноширинний саме тут: у формулі важливо, щоб цифри й знаки стояли рівно, інакше вираз читається як суцільний рядок. */ #destinyScreen .howcnt{margin:0 0 8px} #destinyScreen .howcnt summary{font-size:11px;color:var(--dm-jade);cursor:pointer; list-style:none;display:inline-block;padding:2px 0} #destinyScreen .howcnt summary::-webkit-details-marker{display:none} #destinyScreen .howcnt summary::before{content:'\25b8 ';display:inline-block; transition:transform .15s ease} #destinyScreen .howcnt[open] summary::before{transform:rotate(90deg)} #destinyScreen .howcnt .f{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;line-height:1.7;color:var(--dm-ink);background:var(--dm-card); border:1px solid var(--dm-line);border-radius:10px;padding:8px 10px;margin-top:6px; overflow-x:auto;white-space:nowrap} /* Чіп людини — єдине місце, яке відповідає на питання «про кого це взагалі». Тому він мідний і стоїть окремо від нефритових розділів. */ #destinyScreen .personchip{pointer-events:auto;margin:8px 3px 0; background:rgba(var(--chipbg),.95);border:1px solid var(--dm-gold); color:var(--dm-gold);border-radius:999px;padding:5px 12px;font:inherit; font-size:12px;cursor:pointer;font-weight:600} #destinyScreen .personchip:active{background:rgba(242,178,60,.16)} #destinyScreen .item .un{display:block;font-size:11px;color:var(--dm-jade);margin-top:2px} #destinyScreen #webSearch{margin:6px 0 10px} /* Чіп людини переїхав у шапку застосунку — він потрібен на ВСІХ вкладках, а не лише в «Долі». Тутешній лишаємо в розмітці, але не показуємо: два чіпи на одному екрані — це дві відповіді на питання «про кого це». */ #destinyScreen .personchip{display:none !important} /* ── Вибір глибини розбору ──────────────────────────────────────────────── Кнопки стовпчиком: три ціни поруч у рядок читаються як одна ціна з варіантами, а це різні товари. Назва й ціна — в один рядок, підпис — під ним меншим: людина спершу бачить «за скільки», потім «що саме». */ .dm-tiers{display:flex;flex-direction:column;gap:8px;margin-top:10px} .dm-tiers .btn{display:flex;flex-direction:column;align-items:flex-start; gap:2px;text-align:left;line-height:1.25;padding:10px 14px;width:100%} .dm-tiers .btn .row{display:flex;width:100%;justify-content:space-between; align-items:baseline;gap:10px;font-weight:700} .dm-tiers .btn small{opacity:.72;font-weight:400;font-size:.82rem} /* Ціна не мусить тікати за край на вузькому екрані. */ .dm-tiers .btn .price{white-space:nowrap}