/* beauty-hub — «СЦЕНА + СТЕКЛО» (Саша 20.10: «сцена з А мені подобається, але віджет заповненості з третього») СЦЕНА (из A): экран — тёмный театр. Прожектор дот-матрицей сверху, глубокая виньетка, глянцевый пол с красным отсветом борта; свет «зажигается» с короткой дрожью и гаснет по нажатию. Титры по центру («● ТВОЯ КАРТА · Q♣»). СТЕКЛО (из C): панель очков — тёмное стекло с двойным кантом, полутон в углу, крупное белое число с красным подсветом, тонкая неоновая нить миссий. 21.10: главное число — R-банк (на него играешь), рядом стопка фишек — «пот» (фишку R Саша убрал 21.10); нить — R-фишки до следующей тысячи; полная тысяча слетает фишками в стопку. Тексты, порядок блоков и механика — как у Вадима 20.10. Правило стыка с полётом: поверх 3D-окна (.rbh-3d) ничего не лежит — свет только под ним, стекло — ниже окна. */ /* ═════════ ОДНА ЛАМПА на всех экранах рейкбека (Смело d03): токены для хаба, раздачи, «Истории» и «Комбинаций» ═════════ Конус из точек: вершина на 8 px ниже блока шапки (шапка экрана — 104 px, одна и та же везде, поэтому лампа при любом переходе висит на одном месте; на хабе её «горлышко» светит сквозь стекло вкладок); у вершины 110 px, к низу конуса (--pd-lamp-h) — во всю ширину; шаг точек 6 px; точка ярче всего у вершины и гаснет к 60 % высоты. Яркость точки у вершины — как сейчас у раздачи и «Истории» (#ffffffa6): буквальная альфа 0.22 в CSS даёт лампу тусклее прежней хабовой (сравнение — pokerdot-work/bold/full2/hub-polish/try/l5-cmp.png). Подключение: слой position:absolute;left:0;right:0;top:var(--pd-lamp-y);height:var(--pd-lamp-h); clip-path:var(--pd-lamp-clip); точки — background:var(--pd-lamp-dots);mask-image:var(--pd-lamp-mask); ореол (второй слой с тем же клипом) — background:var(--pd-lamp-haze). Отсчёт top — от верха экрана (не прокрутки). */ #device-host{ --pd-lamp-head:104px; --pd-lamp-gap:8px; --pd-lamp-y:calc(var(--pd-lamp-head) + var(--pd-lamp-gap)); --pd-lamp-top-w:110px; --pd-lamp-h:300px; --pd-lamp-pitch:6px; --pd-lamp-a:.65; --pd-lamp-fade:60%; --pd-lamp-dots:radial-gradient(circle,rgb(255 255 255 / var(--pd-lamp-a)) .9px,transparent 1.45px) 50% 0/var(--pd-lamp-pitch) var(--pd-lamp-pitch); --pd-lamp-clip:polygon(calc(50% - var(--pd-lamp-top-w) / 2) 0,calc(50% + var(--pd-lamp-top-w) / 2) 0,100% 100%,0 100%); --pd-lamp-mask:linear-gradient(180deg,#000,transparent var(--pd-lamp-fade)); --pd-lamp-haze:radial-gradient(ellipse 70px 30px at 50% 0,#ffffff66,transparent 75%),linear-gradient(180deg,#ffffff30,#ffffff12 45%,transparent 90%); } #device-host .fr-hub{ --bh-out:cubic-bezier(.22,1,.36,1); --bh-pop:cubic-bezier(.2,1.4,.4,1); --bh-red:#D71921;--bh-glow:#ff3b47;--bh-deep:#8f0f16; --bh-ink:#f0f2f5;--bh-mute:#a1a7b2; --bh-dock:92px; /* геометрия сцены: --rbh-top меряет friday-hub.js (низ вкладок), всё остальное — от него */ --a-top:var(--rbh-top,152px); --a-win:calc(var(--a-top) + 8px); --a-winh:346px; --a-floor:calc(var(--a-win) + var(--a-winh)); --a-stage:calc(var(--a-floor) + 232px); } @keyframes bh-rise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} @keyframes bh-fade{from{opacity:0}to{opacity:1}} /* проявление до своей прозрачности (дежурный свет пола — .22) */ @keyframes bh-in{from{opacity:0}} @keyframes bh-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}} #device-host .fr-hub .rbh .rbh-cta{animation:none} /* ═════════ СЦЕНАРИЙ СВЕТА: data-phase на .rbh (ведёт friday-hub.js) ═════════ wait — под заставкой загрузки; on — вход на экран; still — назад из «Истории»/«Комбинаций»; dark — раздача растворяется поверх; relight — раздача ушла; idle — всё отыграло */ /* две вспышки, как у театрального света: ≈90 мс горит, 60 мс темно, снова горит и доходит за 300 мс */ @keyframes bh-flick{0%{opacity:0}2%{opacity:.9}20%{opacity:.72}21%,33%{opacity:.04}35%{opacity:.7;animation-timing-function:cubic-bezier(.22,1,.36,1)}100%{opacity:1}} /* стол (3D-окно или 2D-сукно) — тем же светом; в конце — как в покое: полный свет или дежурный */ @keyframes bh-flick-f{0%{filter:brightness(0) saturate(1)}2%{filter:brightness(.92) saturate(1)}20%{filter:brightness(.78) saturate(1)}21%,33%{filter:brightness(.1) saturate(1)}35%{filter:brightness(.72) saturate(1);animation-timing-function:cubic-bezier(.22,1,.36,1)}100%{filter:var(--bh-lit-f)}} #device-host .fr-hub .rbh{--bh-lit-f:brightness(1) saturate(1);--bh-go:.15s} /* копим — дежурный свет: стол в полутени (из этого состояния полёта нет) */ #device-host .fr-hub .rbh:not([data-lit]){--bh-f:brightness(.72) saturate(.76);--bh-lit-f:brightness(.72) saturate(.76)} #device-host .fr-hub .rbh[data-phase="on"]{--bh-go:.15s} #device-host .fr-hub .rbh[data-phase="relight"]{--bh-go:.12s} /* сцена погашена: свет, титр, стол и всё под сценой (раздача растворяется поверх тёмного — без двойной экспозиции) */ #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]){--bh-f:brightness(0)} #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]) :is(.rbh-light,.rbh-pill,.rbh-shadow), #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]) .rbh-card>*, #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"])>:not(.rbh-stage){opacity:0;transition:none} #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]) .rbh-stage[data-3d] .rbh-3d, #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]) .rbh-stage:not([data-3d]) .rbh-window{transition:none} /* свет включается: две вспышки (через 150 мс после входа, через 120 мс после раздачи); пол проявляется следом */ #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-light, #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) :is(.rbh-card>*,.rbh-shadow){animation:bh-flick .45s linear var(--bh-go) backwards} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-stage[data-3d] .rbh-3d, #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-stage:not([data-3d]) .rbh-window{animation:bh-flick-f .45s linear var(--bh-go) backwards;transition:none} /* Смело d04: 3D-стол в темноте не красим в чёрное — brightness(0) давал чёрную «дыру» стола и карты на сером полу сцены (2–4 кадра перед вспышкой). В темноте стол растворяется в сцене (opacity 0), загорается теми же двумя вспышками; в паузе между вспышками тоже уходит в темноту, а не в чёрный силуэт */ @keyframes bh-flick-3d{ 0%{opacity:0;filter:brightness(.92) saturate(1)} 2%{opacity:1;filter:brightness(.92) saturate(1)} 20%{opacity:1;filter:brightness(.78) saturate(1)} 21%,33%{opacity:.06;filter:brightness(.78) saturate(1)} 35%{opacity:1;filter:brightness(.72) saturate(1);animation-timing-function:cubic-bezier(.22,1,.36,1)} 100%{opacity:1;filter:var(--bh-lit-f)} } #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]) .rbh-stage[data-3d] .rbh-3d{opacity:0} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-stage[data-3d] .rbh-3d{animation-name:bh-flick-3d} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-floor{animation:bh-in .9s var(--bh-out) calc(var(--bh-go) + .42s) backwards} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-stage>.rbh-pill{animation:bh-fade .3s ease calc(var(--bh-go) + .16s) backwards} /* стол на месте — его открывает свет; своё «подъезжание» холста — только при возврате из списков (в остальных фазах выключено всегда: иначе при переходе в idle оно запускается заново и стол мигает) */ #device-host .fr-hub .rbh:not([data-phase="still"]) .rb3d-canvas{animation:none} /* блоки под сценой: при входе — поднимаются по очереди со второй вспышкой; после раздачи — вместе со светом; назад из списков — коротко (fill backwards — не мешает уходу data-leaving) */ #device-host .fr-hub .rbh:not([data-leaving])[data-phase="on"]>.rbh-points{animation:bh-rise .7s var(--bh-out) calc(var(--bh-go) + .12s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="on"]>.rbh-cta{animation:bh-rise .7s var(--bh-out) calc(var(--bh-go) + .2s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="on"]>.rbh-links{animation:bh-rise .7s var(--bh-out) calc(var(--bh-go) + .28s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="on"]>.rbh-how>h3{animation:bh-rise .7s var(--bh-out) calc(var(--bh-go) + .36s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="relight"]>.rbh-points{animation:bh-rise .5s var(--bh-out) calc(var(--bh-go) + .06s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="relight"]>.rbh-cta{animation:bh-rise .5s var(--bh-out) calc(var(--bh-go) + .12s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="relight"]>.rbh-links{animation:bh-rise .5s var(--bh-out) calc(var(--bh-go) + .18s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="relight"]>.rbh-how{animation:bh-rise .5s var(--bh-out) calc(var(--bh-go) + .24s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="still"]>.rbh-points{animation:bh-rise .45s var(--bh-out) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="still"]>.rbh-cta{animation:bh-rise .45s var(--bh-out) .04s backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="still"]>.rbh-links{animation:bh-rise .45s var(--bh-out) .08s backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="still"]>.rbh-how>h3{animation:bh-rise .45s var(--bh-out) .12s backwards} /* ═════════ СЦЕНА ═════════ */ /* шапка и вкладки висят над сценой: контент рейкбека подтянут под них на их реальную высоту (--rbh-top) */ #device-host .pd-career:has(.fr-hub .rbh)>.pd-route-header{background:transparent} #device-host .pd-career:has(.fr-hub .rbh)>.pd-career-tabs:not([aria-hidden="true"])+div{margin-top:calc(0px - var(--rbh-top,152px))} #device-host .fr-hub:has(.rbh){background:#050607;isolation:isolate} #device-host .fr-hub .fr-hub-scroll:has(>.rbh){padding-top:0;overflow-x:hidden} /* вкладки — стекло над светом */ #device-host .pd-career:has(.fr-hub .rbh)>.pd-career-tabs .pd-tabs{ background:#0b0c0f8c;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%); box-shadow:inset 0 0 0 1px #ffffff1a,inset 0 1px 0 #ffffff14,0 12px 30px -14px #000; } /* при прокрутке под шапкой проявляется тёмная подложка — текст второго акта не лезет под заголовок */ #device-host .pd-career:has(.fr-hub .rbh)>.pd-career-tabs::before{ content:"";position:absolute;z-index:-1;left:0;right:0;top:-240px;bottom:-34px;pointer-events:none; background:linear-gradient(180deg,#050607 0%,#050607 calc(100% - 34px),#05060700 100%); opacity:0;transition:opacity .3s ease; } #device-host .pd-career:has(.fr-hub .rbh[data-scrolled])>.pd-career-tabs::before{opacity:1} /* сцена во всю ширину, от верха экрана; низ уходит в цвет экрана */ #device-host .fr-hub .rbh{margin:0 -20px;gap:0} #device-host .fr-hub .rbh>:not(.rbh-stage){margin-left:16px;margin-right:16px} #device-host .fr-hub .rbh>.rbh-cta{width:auto} #device-host .fr-hub .rbh .rbh-stage{isolation:isolate} #device-host .fr-hub .rbh .rbh-stage,#device-host .fr-hub .rbh .rbh-stage[data-3d]{ height:var(--a-stage);border-radius:0;overflow:hidden;box-shadow:none; background: linear-gradient(180deg,#05060700 78%,#050607 100%), radial-gradient(ellipse 100% 60% at 50% 46%,#05060700 30%,#010102 100%), #0a0b0d; } #device-host .fr-hub .rbh .rbh-stage::before{content:none} /* Смело d04: в коллекцию ведёт только сама сцена — от вкладок до кромки стекла очков. Кнопка сцены во весь рост (фон, пол уходят под стекло), но нажатия ловит лишь прозрачная мишень ::after над окном стола; щели у стекла, над и под кнопкой «Сыграть», поля по бокам — мимо (как в прежней сборке) */ #device-host .fr-hub .rbh .rbh-stage{pointer-events:none} #device-host .fr-hub .rbh .rbh-stage::after{ content:"";position:absolute;left:0;right:0;top:var(--a-top);bottom:auto;height:calc(var(--a-floor) + 6px - var(--a-top)); z-index:5;pointer-events:auto;background:none;border:0;box-shadow:none;border-radius:0; } #device-host .fr-hub .rbh .rbh-stage>.rbh-3d,#device-host .fr-hub .rbh .rbh-stage>.rbh-card,#device-host .fr-hub .rbh .rbh-stage>.rbh-pill{z-index:2} /* 3D-окно: во всю ширину, сразу под вкладками (реальный бокс без transform — его прямоугольник читает полёт); яркость стола — --bh-f (дежурный свет, погашенная сцена), в покое и при полном свете фильтра нет */ #device-host .fr-hub .rbh .rbh-stage[data-3d] .rbh-3d{top:var(--a-win);bottom:auto;height:var(--a-winh);left:0;right:0;z-index:2;filter:var(--bh-f,none);transition:filter .6s ease} /* свет сцены — всё под столом: одна лампа (токены --pd-lamp-*), её горлышко светит сквозь стекло вкладок */ #device-host .fr-hub .rbh .rbh-light{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;transition:opacity .35s ease} #device-host .fr-hub .rbh[data-leaving] .rbh-light{opacity:0} #device-host .fr-hub .rbh .rbh-light>i{position:absolute;inset:0;display:block;transition:opacity .6s ease} /* конус лампы: ореол и точки (подпись PokerDot) — один клип; вершина у шапки, к низу во всю ширину */ #device-host .fr-hub .rbh .rbh-light>.rbh-beam,#device-host .fr-hub .rbh .rbh-light>.rbh-rays{ inset:auto 0;top:var(--pd-lamp-y);height:var(--pd-lamp-h); -webkit-clip-path:var(--pd-lamp-clip);clip-path:var(--pd-lamp-clip); } #device-host .fr-hub .rbh .rbh-beam{background:var(--pd-lamp-haze)} #device-host .fr-hub .rbh .rbh-rays{background:var(--pd-lamp-dots);-webkit-mask-image:var(--pd-lamp-mask);mask-image:var(--pd-lamp-mask)} /* пол: отражение красного борта на глянце прямо у кромки стекла, пятно света под столом и красные контровые по краям */ #device-host .fr-hub .rbh .rbh-floor{ background: radial-gradient(ellipse 38% 9px at 50% calc(var(--a-floor) + 8px),#ff3b47c4,transparent 72%), radial-gradient(ellipse 64% 46px at 50% calc(var(--a-floor) + 14px),#d7192166,transparent 72%), radial-gradient(ellipse 60% 70px at 50% calc(var(--a-floor) - 10px),#ffffff1f,transparent 70%), radial-gradient(ellipse 84% 150px at 50% calc(var(--a-floor) + 60px),#ffffff0d,transparent 70%), radial-gradient(ellipse 50% 260px at -8% calc(var(--a-floor) - 70px),#d7192142,transparent 72%), radial-gradient(ellipse 50% 260px at 108% calc(var(--a-floor) - 70px),#d7192142,transparent 72%); } /* копим — дежурный свет: лампа еле теплится, пол без красного; раздача готова — прожектор на полную */ #device-host .fr-hub .rbh:not([data-lit]) .rbh-beam{opacity:.34} #device-host .fr-hub .rbh:not([data-lit]) .rbh-rays{opacity:.3} #device-host .fr-hub .rbh:not([data-lit]) .rbh-floor{opacity:.22} /* «● ТВОЯ КАРТА · Q♣» — титр сцены по центру луча; огонёк горит красным, когда раздача готова */ #device-host .fr-hub .rbh .rbh-pill{ display:inline-flex;align-items:center;gap:0; top:calc(var(--a-top) + 8px);left:0;right:0;width:max-content;margin:0 auto;padding:0 0 0 15px;border-radius:0;background:none;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;white-space:nowrap; font:700 11px/16px var(--pd-font,'Play',sans-serif);letter-spacing:.22em;text-transform:uppercase;color:#c9cdd4;text-shadow:0 1px 8px #000,0 0 2px #000; transition:transform .2s var(--bh-out),filter .2s ease,opacity .35s ease,color .6s ease; } /* огонёк титра — тот же, что у титров раздачи: чёткая точка 6 px #D71921 с узким свечением (без кольца и «дыхания») */ #device-host .fr-hub .rbh .rbh-pill::before{ content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%; background:#D71921;box-shadow:0 0 6px #ff3b47aa;transition:background-color .6s ease,box-shadow .6s ease; } #device-host .fr-hub .rbh .rbh-pill>b{font-size:12px;font-weight:700;color:#fff;letter-spacing:.12em;white-space:pre} #device-host .fr-hub .rbh:not([data-lit]) .rbh-pill{color:#9298a2} #device-host .fr-hub .rbh:not([data-lit]) .rbh-pill::before{background:#5d626b;box-shadow:0 0 0 2px #ffffff0f} #device-host .fr-hub .rbh .rbh-stage:active .rbh-pill{transform:scale(.98);filter:brightness(1.15)} /* подсказка «Чем старше карта — тем выше шанс…»: под титром места нет (там верх карты), поэтому — на полу сцены, в тени под столом, над стеклом панели; мелко и светлым */ #device-host .fr-hub .rbh .rbh-stage>.rbh-pill-hint{ position:absolute;z-index:3;left:16px;right:16px;top:calc(var(--a-floor) - 22px);text-align:center;pointer-events:none; font:400 11px/14px var(--pd-font,'Play',sans-serif);letter-spacing:.02em;color:#c9cdd4; text-shadow:0 1px 6px #000,0 0 2px #000,0 0 12px #000;transition:opacity .35s ease; } #device-host .fr-hub .rbh:is([data-leaving],[data-phase="wait"],[data-phase="dark"]) .rbh-pill-hint{opacity:0;transition-duration:.2s} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-pill-hint{animation:bh-fade .4s ease calc(var(--bh-go) + .24s) backwards} /* ═════════ СТЕКЛО: панель очков (из C) стоит на полу сцены, ловит красный отсвет борта ═════════ */ #device-host .fr-hub .rbh .rbh-points{ position:relative;z-index:3;isolation:isolate; margin-top:calc(var(--a-floor) + 6px - var(--a-stage)); display:block; padding:18px 18px 16px 20px;border-radius:26px; background:linear-gradient(180deg,#16181dad,#0a0b0ee6 64%); -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35); box-shadow:inset 0 0 0 1px #ffffff1c,inset 0 1px 0 #ffffff2e,0 0 0 1px #000000b3,0 30px 50px -18px #000,0 -12px 40px -22px #d7192180; } /* ядро: внутренний кант с верхним бликом и красный свет в углу */ #device-host .fr-hub .rbh .rbh-points::before{ content:"";position:absolute;inset:5px;z-index:-1;border-radius:21px;pointer-events:none; background:radial-gradient(70% 90% at 100% 0%,#d7192129,transparent 60%),radial-gradient(60% 46% at 50% 0%,#d719211c,transparent 70%); box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 1px 0 #ffffff12; } /* световые рейки на канте: по центру сверху — отражение красного борта стола, справа снизу — короткая рейка */ #device-host .fr-hub .rbh .rbh-points::after{ content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none; background: linear-gradient(90deg,transparent,#ff3b47 22%,#ffc2c6 50%,#ff3b47 78%,transparent) 50% 0/150px 1.5px no-repeat, linear-gradient(90deg,transparent,#ff3b47 30%,#ff3b47 70%,transparent) calc(100% - 30px) 100%/64px 1.5px no-repeat; filter:drop-shadow(0 0 4px #ff3b47); } /* дот-матрица в углу панели (гаснет к центру) */ #device-host .fr-hub .rbh .rbh-glass{ position:absolute;inset:5px;z-index:-1;border-radius:21px;pointer-events:none; background:radial-gradient(circle,#ff6b7338 .9px,transparent 1.5px) 100% 0/7px 7px; -webkit-mask-image:radial-gradient(80% 120% at 100% 0%,#000,#0006 40%,transparent 70%); mask-image:radial-gradient(80% 120% at 100% 0%,#000,#0006 40%,transparent 70%); } /* левая колонка — контейнер: кегль числа вписывается в её ширину (12 800, 128 000 — без переноса) */ #device-host .fr-hub .rbh .rbh-points-main{grid-column:1;min-width:0;container-type:inline-size} #device-host .fr-hub .rbh .rbh-num{ display:flex;align-items:baseline;gap:6px;white-space:nowrap; font-family:var(--pd-font,'Play',sans-serif);font-weight:700; font-size:min(60px,calc((100cqi - 36px) / var(--rbh-em,2.5)));line-height:1; letter-spacing:-.02em;font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff 25%,#ffd9db 70%,#ff8f96);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 18px #d7192166); } #device-host .fr-hub .rbh .rbh-num small{font-size:16px;line-height:1;letter-spacing:.12em;color:#ff5a62;-webkit-text-fill-color:#ff5a62} /* ═════════ R-БАНК (21.10): кикер, число, фишка «R», нить до тысячи, «Всего накоплено» — хаб и виджет одним языком ═════════ */ #device-host .rb-panel{display:block} /* кикер: красный, разрядка, как «● ТВОЯ КАРТА» */ #device-host .rb-panel .rb-kick{ display:block;margin:0 0 6px;font:700 11px/14px var(--pd-font,'Play',sans-serif);letter-spacing:.2em;text-transform:uppercase; color:#ff5a62;text-shadow:0 0 10px #d7192199; } /* заголовок шага (вариант 3) — белым, без капса */ #device-host .rb-panel .rb-kick--w{margin:4px 0 0;font:700 15px/20px var(--pd-font,'Play',sans-serif);letter-spacing:.01em;text-transform:none;color:#f0f2f5;text-shadow:none} /* банк: стопка фишек (сюда летят фишки) + число. Банк — только в R-фишках */ #device-host .rb-panel .rb-bankbox{display:flex;align-items:flex-end;gap:8px;min-width:0;transform-origin:0 70%} #device-host .rb-panel .rb-numbox{flex:1;min-width:0;container-type:inline-size} #device-host .rb-panel .rb-num{ display:flex;align-items:baseline;gap:6px;white-space:nowrap; font-family:var(--pd-font,'Play',sans-serif);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums; font-size:min(var(--rb-max,56px),calc((100cqi - 26px) / var(--rbh-em,2.5))); background:linear-gradient(180deg,#fff 25%,#ffd9db 70%,#ff8f96);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 16px #d7192166); } #device-host .rb-panel .rb-num small{font-size:15px;line-height:1;letter-spacing:.12em;color:#ff5a62;-webkit-text-fill-color:#ff5a62} #device-host .rb-panel[data-empty] .rb-num{filter:none;opacity:.72} #device-host .rb-pot-glyph{position:relative;flex:none;width:56px;height:47px;transition:opacity .5s ease} #device-host .rb-pot-glyph>svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px #d7192166)} /* приход тысячи: банк пульсирует (transform), над стопкой вспыхивает свет (opacity) */ #device-host .rb-pot-glyph::after{ content:"";position:absolute;left:-10px;right:-10px;top:-14px;bottom:-6px;border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(closest-side,#ff3b47aa,#d7192144 55%,transparent); } #device-host .rb-bankbox[data-pulse="a"]{animation:rb-pulse-a .62s cubic-bezier(.2,1.5,.4,1)} #device-host .rb-bankbox[data-pulse="b"]{animation:rb-pulse-b .62s cubic-bezier(.2,1.5,.4,1)} #device-host .rb-bankbox[data-pulse="a"] .rb-pot-glyph::after{animation:rb-ring .8s ease-out} #device-host .rb-bankbox[data-pulse="b"] .rb-pot-glyph::after{animation:rb-ring-b .8s ease-out} @keyframes rb-pulse-a{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}} @keyframes rb-pulse-b{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}} @keyframes rb-ring{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.3)}} @keyframes rb-ring-b{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.3)}} /* пустой банк: стопка тусклая, без свечения */ #device-host :is(.rb-panel,.rb-plate)[data-empty] .rb-pot-glyph{opacity:.32} #device-host :is(.rb-panel,.rb-plate)[data-empty] .rb-pot-glyph>svg{filter:saturate(.35)} #device-host .rb-panel .rb-hint{display:block;margin-top:8px;font:400 13px/18px var(--pd-font,'Play',sans-serif);letter-spacing:.02em;color:#a1a7b2} #device-host .rb-panel .rb-hint--q{color:#8e8e98} /* строки подписи: над нитью (--top), разделитель (--sep), только справа (--end), низ панели (.rb-foot) */ #device-host .rb-panel .rb-cap--top{margin:0} #device-host .rb-panel .rb-cap--top .rb-kick{margin:0} #device-host .rb-panel .rb-cap--top+.ms-bar{margin-top:10px} #device-host .rb-panel .rb-cap--sep{margin-top:14px;padding-top:12px;box-shadow:inset 0 1px 0 #ffffff12} #device-host .rb-panel .rb-cap--kick{margin-bottom:6px} #device-host .rb-panel>.rb-bankbox{--rb-max:48px} #device-host .rb-panel>.rb-bankbox+.rb-hint{margin-top:6px} #device-host .rb-panel .rb-cap--end{justify-content:flex-end;margin-top:8px} #device-host .rb-panel .rb-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-top:12px} #device-host .rb-panel .rb-foot>.rb-hint{margin:0;font-size:12px;line-height:16px} /* ── 1 «Поток»: копишь → стрелка «1 000 в банк» → банк раздачи ── */ #device-host .rb-panel .rb-flow{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.12fr);align-items:end;column-gap:6px} #device-host .rb-panel .rb-flow-l .ms-bar{margin:12px 0 9px} #device-host .rb-panel .rb-flow .rb-kick{letter-spacing:.12em} #device-host .rb-panel .rb-flow-cap .ms-prog{font-size:13px} #device-host .rb-panel .rb-flow-cap .ms-cur{font-size:26px;line-height:30px;letter-spacing:-.01em} #device-host .rb-panel .rb-flow-arrow{display:flex;flex-direction:column;align-items:center;gap:1px;padding-bottom:2px;color:#ff3b47} #device-host .rb-panel .rb-flow-arrow>b{font:700 11px/14px var(--pd-font,'Play',sans-serif);letter-spacing:.04em;color:#fff;white-space:nowrap} #device-host .rb-panel .rb-flow-arrow>small{font:700 9px/12px var(--pd-font,'Play',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#a1a7b2;white-space:nowrap} #device-host .rb-panel .rb-arrow-svg{display:block;width:44px;height:12px;overflow:visible;filter:drop-shadow(0 0 4px #ff3b47)} #device-host .rb-panel .rb-flow-r{--rb-max:34px;min-width:0} #device-host .rb-panel .rb-flow-r .rb-pot-glyph{width:38px;height:32px} #device-host .rb-panel .rb-flow-r .rb-num small{font-size:13px} /* ── 3 «Два шага»: узлы на светящейся нити, как в «Как это работает» ── */ #device-host .rb-panel .rb-steps{position:relative;display:grid;gap:12px;margin:0;padding:0;list-style:none} #device-host .rb-panel .rb-steps>li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:start} #device-host .rb-panel .rb-steps>li>i{ display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:700 13px/1 var(--pd-font,'Play',sans-serif);font-style:normal;color:#fff; background:radial-gradient(circle at 50% 35%,#3a0d11,#14070a 70%);box-shadow:inset 0 0 0 1.5px #d71921,inset 0 1px 0 #ff8a9055,0 0 14px #d7192166; } #device-host .rb-panel .rb-steps>li:first-child::before{ content:"";position:absolute;left:13px;top:32px;bottom:-14px;width:2px;border-radius:2px; background:linear-gradient(180deg,#d71921b3,#d7192166);box-shadow:0 0 6px #d7192155; } #device-host .rb-panel .rb-steps .ms-bar{margin-top:12px} #device-host .rb-panel .rb-steps .rb-bankbox{margin-top:6px} #device-host .rb-panel .rb-steps .rb-hint{margin-top:4px} #device-host .rb-panel .rb-steps{--rb-max:44px} #device-host .rb-panel .rb-steps .rb-pot-glyph{width:46px;height:39px} /* ── 4 «Шкала вливается в банк»: «На кону» справа, нить упирается в стопку, у конца — призрачная «+1 000» ── */ #device-host .rb-panel .rb-stake-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} #device-host .rb-panel .rb-stake-top>:first-child{flex:0 1 46%;min-width:0;padding-bottom:2px} #device-host .rb-panel .rb-stake-top .rb-flow-cap .ms-cur{font-size:22px;line-height:26px} #device-host .rb-panel .rb-stake-r{flex:1;min-width:0;--rb-max:44px} #device-host .rb-panel .rb-stake-r .rb-kick{text-align:right} #device-host .rb-panel .rb-stake-r .rb-num{justify-content:flex-end} #device-host .rb-panel .rb-stake-bar{display:flex;align-items:center;gap:10px;margin-top:16px} #device-host .rb-panel .rb-stake-bar>.ms-bar{flex:1;margin-top:0} #device-host .rb-panel .rb-ghost{ position:absolute;right:-2px;bottom:12px;padding:1px 6px;border-radius:6px;pointer-events:none; font:700 11px/14px var(--pd-font,'Play',sans-serif);letter-spacing:.04em;color:#ffffff73;box-shadow:inset 0 0 0 1px #ffffff2e;white-space:nowrap; } #device-host .rb-panel .rb-ghost::after{content:"";position:absolute;right:6px;top:100%;height:7px;border-left:1px dashed #ffffff40} #device-host .rb-panel .rb-bankbox--end{flex:none} #device-host .rb-panel .rb-bankbox--end .rb-pot-glyph{width:46px;height:39px} /* ── 5 «Банк на столе»: тарелка банка раздачи на переднем крае стола (HTML-слой на сцене, .rbh-3d не трогаем) ── */ /* тарелка банка — как в e04 (Саша 21.10: «банк роздачі верни до попередньої версії»): две строки, крупная стопка слева, кикер «БАНК РАЗДАЧИ» над крупным числом, радиус 16 */ #device-host .fr-hub .rbh .rbh-stage>.rb-plate{ position:absolute;z-index:4;left:50%;top:calc(var(--a-floor) - 118px);transform:translateX(-50%); display:flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border-radius:16px;white-space:nowrap; background:linear-gradient(180deg,#16181de0,#0a0b0eeb);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff29,0 0 0 1px #000a,0 14px 30px -10px #000,0 0 26px -6px #d71921aa; transition:opacity .35s ease; } #device-host .rb-plate .rb-pot-glyph{width:42px;height:36px} #device-host .rb-plate .rb-bankbox{display:block;transform-origin:50% 60%} #device-host .rb-plate-txt{display:flex;flex-direction:column;gap:3px} #device-host .rb-plate-txt>small{font:700 10px/12px var(--pd-font,'Play',sans-serif);letter-spacing:.2em;text-transform:uppercase;color:#ff5a62} #device-host .rb-plate-txt>strong{ font:700 24px/1 var(--pd-font,'Play',sans-serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff 30%,#ffd9db 75%,#ff8f96);-webkit-background-clip:text;background-clip:text;color:transparent; } #device-host .rb-plate[data-empty] .rb-plate-txt>strong{opacity:.7} /* панель под столом в варианте 5 — радиусы кита: карточка-блок 20 px (внутренний кант 15 px) */ #device-host .fr-hub .rbh .rbh-points.rb-panel[data-v="5"]{border-radius:20px} #device-host .fr-hub .rbh .rbh-points.rb-panel[data-v="5"]::before,#device-host .fr-hub .rbh .rbh-points.rb-panel[data-v="5"] .rbh-glass{border-radius:15px} /* кикер — как у плиток «Наград» (rw-kicker: 12px/.08em, капс, приглушённый) */ #device-host .rb-panel[data-v="5"] .rb-kick5{display:block} #device-host .rb-panel[data-v="5"] .rb-kick5+.ms-bar{margin-top:12px} #device-host .rb-panel[data-v="5"] .rb-cap{align-items:center;margin-top:10px} /* «+1 000 в банк» — пилюля кита (24 px, 999) с круглым шевроном вверх красным */ #device-host .rb-panel[data-v="5"] .rb-to-bank{flex:none;gap:6px;padding:0 4px 0 10px;color:#c9cdd4} /* шеврон в пилюле — тот же рисунок кита, без круга и без красного */ #device-host .rb-panel[data-v="5"] .rb-to-bank{padding:0 8px 0 10px} #device-host .rb-panel[data-v="5"] .rb-to-bank>svg{flex:none;width:14px;height:14px;color:var(--pd-muted,#a1a7b2)} #device-host .fr-hub .rbh:is([data-leaving],[data-phase="wait"],[data-phase="dark"]) .rb-plate{opacity:0;transition-duration:.2s} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rb-plate{animation:bh-fade .4s ease calc(var(--bh-go) + .3s) backwards} /* нить — та же сущность миссий (.ms-bar + «700 / 1 000 R»): тонкая неоновая линия, огонёк на конце. Заливка — полоса во всю ширину, сдвинутая transform'ом внутри клипа (клип шире по вертикали и справа — свечение не режется) */ #device-host .rb-panel .ms-bar{ position:relative;height:3px;margin-top:16px;overflow:visible;border-radius:3px; background:#ffffff14;box-shadow:inset 0 1px 1px #0009; } #device-host .rb-panel .rb-clip{position:absolute;left:0;right:-14px;top:-30px;bottom:-30px;overflow:hidden;pointer-events:none} #device-host .rb-panel .rb-clip>i{ position:absolute;left:0;top:30px;width:calc(100% - 14px);height:3px;border-radius:3px; background:linear-gradient(90deg,var(--bh-deep,#8f0f16),#D71921 50%,#ff4d58); box-shadow:0 0 10px #ff3b47,0 0 24px #d71921b3; transition:transform .56s cubic-bezier(.3,.7,.3,1),opacity .3s ease;will-change:transform; } #device-host .rb-panel .rb-clip>i[data-inst]{transition:none} /* тысяча ушла фишками в банк — нить гаснет и начинается с нуля */ #device-host .rb-panel .rb-clip>i[data-drain]{opacity:0} #device-host .rb-panel .rb-clip>i::after{ content:"";position:absolute;right:0;top:50%;width:18px;height:3px;margin-top:-1.5px;border-radius:3px; background:linear-gradient(90deg,transparent,#fff);box-shadow:0 0 10px #ff3b47,0 0 4px #fff; } /* нить дошла до 1 000 — вспышка по всей длине */ #device-host .rb-panel .ms-bar::after{ content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px;border-radius:8px;pointer-events:none;opacity:0; background:radial-gradient(60% 50% at 100% 50%,#ffffffb0,transparent 70%),linear-gradient(90deg,transparent,#ff3b4766 60%,#ff8a90aa); filter:blur(3px);transition:opacity .25s ease; } #device-host .rb-panel .ms-bar[data-full]::after{opacity:1} /* подпись под нитью: «700 / 1 000 R» слева, «Всего накоплено 5 700 R» справа — мельче и тише */ #device-host .rb-panel .rb-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:9px;white-space:nowrap} #device-host .rb-panel .ms-prog{margin:0;font:400 13px/18px var(--pd-font,'Play',sans-serif);letter-spacing:.04em;color:#8e8e98;font-variant-numeric:tabular-nums} #device-host .rb-panel .ms-prog>.ms-cur{color:#fff;font-weight:700} #device-host .rb-panel .rb-total{min-width:0;overflow:hidden;text-overflow:ellipsis;font:400 12px/16px var(--pd-font,'Play',sans-serif);letter-spacing:.03em;color:#7d808a;font-variant-numeric:tabular-nums} #device-host .rb-panel .rb-total>b{font-weight:700;color:#c9cdd4} /* полёт: 6 R-фишек с конца нити в стопку-пот; X — ровно, Y — с замедлением (дуга); только transform/opacity */ #device-host .rb-panel{position:relative} #device-host .rb-fly{position:absolute;left:var(--x0,0);top:var(--y0,0);width:0;height:0;z-index:4;pointer-events:none} #device-host .rb-fly>i{position:absolute;left:0;top:0;opacity:0} #device-host .rb-fly>i>b{ position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%; background:radial-gradient(circle,#3a070c 0 36%,transparent 38%),repeating-conic-gradient(#fff 0 14deg,#d71921 14deg 45deg); box-shadow:0 0 0 1px #ff8a90,0 0 10px #ff3b47,0 2px 3px #000a; } #device-host .rb-fly[data-go]>i{animation:rb-fly-x .78s cubic-bezier(.4,0,.55,1) calc(var(--i) * 55ms) both} #device-host .rb-fly[data-go]>i>b{animation:rb-fly-y .78s cubic-bezier(.2,.7,.4,1) calc(var(--i) * 55ms) both} @keyframes rb-fly-x{0%{opacity:0;transform:translateX(var(--sx))}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(var(--dx))}} /* дуга над числом: поднимаемся выше стопки и опускаемся в неё */ @keyframes rb-fly-y{0%{transform:translateY(0) scale(.4) rotate(0)}45%{transform:translateY(calc(var(--dy) - 30px)) scale(1.05) rotate(140deg);animation-timing-function:cubic-bezier(.5,0,.8,.6)}100%{transform:translateY(var(--dy)) scale(.55) rotate(280deg)}} /* хаб: число R-банка — герой; кегль вписывается в колонку рядом с фишкой */ /* без WebGL (?rb3d=0): окно в 2D-сукно — тот же театр: пятно света на столе, тёмные края и пол (слой .rbh-spot гаснет по нажатию раньше, чем раскрывается сукно раздачи) */ #device-host .fr-hub .rbh .rbh-stage:not([data-3d]) .rbh-spot{ background: radial-gradient(ellipse 78% 58% at 50% 42%,#05060700 38%,#050607d9 100%), linear-gradient(180deg,#050607 0,#05060700 calc(var(--a-top) + 40px),#05060700 calc(var(--a-floor) - 150px),#050607f2 calc(var(--a-floor) + 4px),#050607 100%); } /* пятно прожектора на сукне — отдельным слоем: гаснет по нажатию вместе со светом */ #device-host .fr-hub .rbh .rbh-stage:not([data-3d]) .rbh-spot::before{ content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .3s ease; background:radial-gradient(ellipse 44% 26% at 50% 40%,#ffffff17,transparent 70%); } /* Смело d03: по нажатию виньетка и затемнение сукна остаются как были (сукно не вспыхивает ярче); гаснут только прожектор, свет пола и интерфейс */ #device-host .fr-hub .rbh[data-leaving] .rbh-stage:not([data-3d]) .rbh-spot{opacity:1} #device-host .fr-hub .rbh[data-leaving] .rbh-stage:not([data-3d]) .rbh-spot::before{opacity:0} #device-host .fr-hub .rbh .rbh-stage:not([data-3d]) .rbh-window{filter:var(--bh-f,none);transition:filter .6s ease} /* без WebGL под стеклом — 2D-сукно: стекло темнее */ #device-host .fr-hub .rbh:has(.rbh-stage:not([data-3d])) .rbh-points{background:linear-gradient(180deg,#121419e6,#0a0b0ef2 64%)} /* ═════════ КНОПКА на краю сцены: красная капсула со светом изнутри; одно «дыхание» свечения ═════════ */ #device-host .fr-hub .rbh .rbh-cta{ z-index:3;isolation:isolate;overflow:visible;margin-top:12px;min-height:52px;border-radius:12px;background:transparent;box-shadow:none; font:700 15px/20px var(--pd-font,'Play',sans-serif);letter-spacing:.14em;color:#8e8e98; transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,filter .2s ease; -webkit-tap-highlight-color:transparent; } /* поверхность: пока копим — призрачная капсула (стекло, волосяной кант, точки) */ #device-host .fr-hub .rbh .rbh-cta::after{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background:radial-gradient(circle,#ffffff0d 1px,transparent 1.6px) 0 0/8px 8px,linear-gradient(180deg,#14161acc,#0d0e11e6); box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff14; animation:none; } #device-host .fr-hub .rbh .rbh-cta[data-ready]{color:#fff;text-shadow:0 1px 1px #5c070c80} #device-host .fr-hub .rbh .rbh-cta[data-ready]::after{ background: linear-gradient(105deg,transparent 38%,#ffffff4d 50%,transparent 62%) -160% 0/60% 100% no-repeat, radial-gradient(120% 140% at 50% -30%,#ff5a6380,transparent 55%), linear-gradient(180deg,#ef2733 0%,#d71921 52%,#b0111a 100%); box-shadow:inset 0 1px 0 #ffffff5c,inset 0 -2px 0 #6e0a1059,inset 0 0 0 1px #ff6b7340,0 2px 4px #000a; animation:bh-cta-sheen 1.2s cubic-bezier(.45,0,.2,1) .9s; } @keyframes bh-cta-sheen{from{background-position:-160% 0,0 0,0 0}to{background-position:260% 0,0 0,0 0}} /* свечение под кнопкой — мягкое дыхание только прозрачностью */ #device-host .fr-hub .rbh .rbh-cta[data-ready]::before{ content:"";position:absolute;left:8%;right:8%;top:30%;bottom:-10px;z-index:-2;border-radius:50%;pointer-events:none; background:#d71921;filter:blur(18px);opacity:.5;will-change:opacity; animation:bh-breathe 4.2s ease-in-out 1.6s infinite; } @keyframes bh-breathe{50%{opacity:.85}} #device-host .fr-hub .rbh .rbh-cta:not(:disabled):active{transform:scale(.98);filter:brightness(1.1)} /* копим: «ЕЩЁ 360 R ДО R-БАНКА» — главное сообщение экрана: текст светлее, число белым (капсула остаётся призрачной) */ #device-host .fr-hub .rbh .rbh-cta:disabled{cursor:default;color:#bdbdbd} #device-host .fr-hub .rbh .rbh-cta>b{font-weight:700;color:#fff} #device-host .fr-hub .rbh[data-leaving]>.rbh-cta{transition-delay:.04s} /* ═════════ ВТОРОЙ АКТ: строки и «Как это работает» — тем же стеклом ═════════ */ /* строки: стеклянная панель с двойным кантом, красный огонёк у каждой строки */ #device-host .fr-hub .rbh .rbh-links{ position:relative;margin-top:20px;border-radius:22px;overflow:visible; background:linear-gradient(180deg,#121419,#0a0b0e); box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px 0 #ffffff1f,0 0 0 1px #000a,0 22px 40px -26px #000; } #device-host .fr-hub .rbh .rbh-links::before{content:"";position:absolute;inset:4px;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff0b} #device-host .fr-hub .rbh .rbh-link{position:relative;min-height:62px;padding:0 14px 0 36px;border-radius:0;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent} #device-host .fr-hub .rbh .rbh-link::after{ content:"";position:absolute;left:18px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%; background:#ff3b47;box-shadow:0 0 0 2px #d7192133,0 0 8px #ff3b47; } #device-host .fr-hub .rbh .rbh-link+.rbh-link{box-shadow:none} #device-host .fr-hub .rbh .rbh-link+.rbh-link::before{ content:"";position:absolute;left:18px;right:18px;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,#ff3b4740,#ffffff14 30%,#ffffff0a 80%,transparent); } #device-host .fr-hub .rbh .rbh-link>span{flex:1;font:700 16px/22px var(--pd-font,'Play',sans-serif);letter-spacing:.01em;color:var(--bh-ink)} #device-host .fr-hub .rbh .rbh-link>small{flex:none;font:700 13px/18px var(--pd-font,'Play',sans-serif);font-variant-numeric:tabular-nums;color:#fff} #device-host .fr-hub .rbh .rbh-link>small:not(:empty){padding:3px 10px;border-radius:999px;background:#d719211a;box-shadow:inset 0 0 0 1px #ff3b4759} /* Саша 21.10: стрелки — единый шеврон кита (.rw-chev / .ms-chev в kit-rewards.css): квадрат 36×36, радиус 12, #ffffff08 + кант #ffffff14, иконка приглушённым цветом; не круг */ #device-host .fr-hub .rbh .rbh-link>svg{ box-sizing:content-box;flex:none;width:16px;height:16px;padding:10px;border-radius:12px; background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff14;color:var(--pd-muted,#a1a7b2); transition:color .2s ease; } #device-host .fr-hub .rbh .rbh-link:active{background:#ffffff08} #device-host .fr-hub .rbh .rbh-link:active>svg{color:var(--pd-ink,#fff)} #device-host .fr-hub .rbh .rbh-link:first-child{border-radius:22px 22px 0 0} #device-host .fr-hub .rbh .rbh-link:last-child{border-radius:0 0 22px 22px} /* титр второго акта: «● КАК ЭТО РАБОТАЕТ» по центру, волосяные линии гаснут к краям */ #device-host .fr-hub .rbh .rbh-how{margin-top:30px} #device-host .fr-hub .rbh .rbh-how>h3.rbh-title{ display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:0; font:700 11px/16px var(--pd-font,'Play',sans-serif);letter-spacing:.22em;text-transform:uppercase;color:#c9cdd4; } #device-host .fr-hub .rbh .rbh-how>h3.rbh-title::before,#device-host .fr-hub .rbh .rbh-how>h3.rbh-title::after{ content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#ffffff26); } #device-host .fr-hub .rbh .rbh-how>h3.rbh-title::after{background:linear-gradient(270deg,transparent,#ffffff26)} #device-host .fr-hub .rbh .rbh-how>h3.rbh-title>span{position:relative;flex:none;padding-left:15px} #device-host .fr-hub .rbh .rbh-how>h3.rbh-title>span::before{ content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%; background:#ff3b47;box-shadow:0 0 0 2px #d7192133,0 0 8px #ff3b47; } /* шаги: стекло с двойным кантом, узлы на светящейся нити */ #device-host .fr-hub .rbh .rbh-how>ol{ position:relative;gap:0;padding:8px 18px 8px 16px;border-radius:22px; background:radial-gradient(70% 40% at 0% 0%,#d7192112,transparent 70%),linear-gradient(180deg,#121419,#0a0b0e); box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px 0 #ffffff1f,0 0 0 1px #000a,0 22px 40px -26px #000; } #device-host .fr-hub .rbh .rbh-how>ol::before{content:"";position:absolute;inset:4px;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff0b} #device-host .fr-hub .rbh .rbh-how li{position:relative;gap:16px;padding:14px 0} #device-host .fr-hub .rbh .rbh-how li+li{box-shadow:none} #device-host .fr-hub .rbh .rbh-how li:not(:last-child)::before{ content:"";position:absolute;left:14px;top:48px;bottom:-12px;width:2px;margin-left:-1px;border-radius:2px; background:linear-gradient(180deg,#d71921b3,#d7192133);box-shadow:0 0 6px #d7192155; transform-origin:50% 0; } #device-host .fr-hub .rbh .rbh-how li>i{ position:relative;width:28px;height:28px; background:radial-gradient(circle at 50% 35%,#3a0d11,#14070a 70%); box-shadow:inset 0 0 0 1.5px #d71921,inset 0 1px 0 #ff8a9055,0 0 14px #d7192166; font:700 13px/1 var(--pd-font,'Play',sans-serif);font-style:normal;font-variant-numeric:tabular-nums;color:#fff; } #device-host .fr-hub .rbh .rbh-how li>p{padding-top:3px} /* проявление: узел вспыхивает, текст поднимается, нить дорисовывается вниз */ #device-host .fr-hub .rbh .rbh-how:not([data-in]) li,#device-host .fr-hub .rbh .rbh-how:not([data-in])>blockquote{opacity:0} #device-host .fr-hub .rbh .rbh-how[data-in] li>p{animation:bh-rise .65s var(--bh-out) calc(var(--i,0) * 110ms + 60ms) backwards} #device-host .fr-hub .rbh .rbh-how[data-in] li>i{animation:bh-node .55s var(--bh-pop) calc(var(--i,0) * 110ms) backwards} #device-host .fr-hub .rbh .rbh-how[data-in] li::before{animation:bh-line .5s var(--bh-out) calc(var(--i,0) * 110ms + 200ms) backwards} #device-host .fr-hub .rbh .rbh-how[data-in]>blockquote{animation:bh-rise .7s var(--bh-out) .62s backwards} @keyframes bh-node{from{opacity:0;transform:scale(.4);box-shadow:inset 0 0 0 1.5px #ff3b47,0 0 26px #ff3b47}} @keyframes bh-line{from{transform:scaleY(0)}} /* цитата — стекло, неоновая рейка слева гаснет к концам */ #device-host .fr-hub .rbh .rbh-how>blockquote{ position:relative;margin:14px 0 0;padding:17px 18px 17px 24px;border-radius:20px; background:radial-gradient(90% 160% at 0% 50%,#d719211f,transparent 62%),linear-gradient(180deg,#121419,#0b0c0f); box-shadow:inset 0 0 0 1px #ffffff14,inset 0 1px 0 #ffffff17; font:400 15px/22px var(--pd-font,'Play',sans-serif);color:var(--bh-ink); } #device-host .fr-hub .rbh .rbh-how>blockquote::before{ content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px; background:linear-gradient(180deg,transparent,#ff3b47 30%,#d71921 70%,transparent);box-shadow:0 0 10px #d71921; } /* ═════════ ВИДЖЕТ «Рейкбек за комбинацию» на вкладке «Награды» — то же стекло и та же фишка ═════════ */ #device-host .fr-rb.rw-tile{ --bh-out:cubic-bezier(.22,1,.36,1);--bh-deep:#8f0f16;--bh-ink:#f0f2f5; border:0;border-radius:26px;padding:18px 16px 16px 20px; background:linear-gradient(180deg,#16181d,#0a0b0e 72%); box-shadow:inset 0 0 0 1px #ffffff1c,inset 0 1px 0 #ffffff2e,0 0 0 1px #000000b3,0 24px 44px -22px #000; transition:transform .2s var(--bh-out),filter .2s ease;-webkit-tap-highlight-color:transparent; } /* ядро: внутренний кант и красный свет в углу (полутон в углу — общий у плиток «Наград», ::before) */ #device-host .fr-rb.rw-tile::after{ content:"";position:absolute;inset:5px;z-index:-1;border-radius:21px;pointer-events:none; background:radial-gradient(70% 90% at 100% 0%,#d7192124,transparent 60%); box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 1px 0 #ffffff12; } #device-host .fr-rb.rw-tile:active{transform:scale(.985);filter:brightness(1.06)} #device-host .fr-rb.rw-tile .rw-tile-head{padding-right:4px} /* статус — без зелёного: готово — красный свет, копим — серое стекло */ #device-host .fr-rb.rw-tile .pd-pill{background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff1f;color:#a1a7b2} #device-host .fr-rb.rw-tile .pd-pill--green{background:#d719211f;box-shadow:inset 0 0 0 1px #ff3b4773,0 0 12px #d7192133;color:#fff} #device-host .fr-rb.rw-tile .fr-rb-body{margin-top:12px} #device-host .fr-rb.rw-tile .fr-rb-main{display:flex;flex-direction:column;min-width:0;container-type:inline-size} #device-host .fr-rb.rw-tile .fr-rb-body.rb-panel{display:block;--rb-max:44px} /* кнопка плитки: «Открыть» — призрачная капсула; раздача готова или ждёт — та же красная капсула со светом, что на экране рейкбека */ #device-host .fr-rb.rw-tile .rw-act{border-radius:12px;background:#ffffff06;box-shadow:inset 0 0 0 1px #ffffff24,inset 0 1px 0 #ffffff12;letter-spacing:.1em} #device-host .fr-rb.rw-tile[data-ready] .rw-act{position:relative;isolation:isolate;overflow:visible;background:transparent;box-shadow:none;color:#fff;text-shadow:0 1px 1px #5c070c80} #device-host .fr-rb.rw-tile[data-ready] .rw-act::after{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background: linear-gradient(105deg,transparent 38%,#ffffff4d 50%,transparent 62%) -160% 0/60% 100% no-repeat, radial-gradient(120% 140% at 50% -30%,#ff5a6380,transparent 55%), linear-gradient(180deg,#ef2733 0%,#d71921 52%,#b0111a 100%); box-shadow:inset 0 1px 0 #ffffff5c,inset 0 -2px 0 #6e0a1059,inset 0 0 0 1px #ff6b7340,0 2px 4px #000a; } #device-host .fr-rb.rw-tile[data-ready][data-first] .rw-act::after{animation:bh-cta-sheen 1.2s cubic-bezier(.45,0,.2,1) 1.1s} #device-host .fr-rb.rw-tile[data-ready] .rw-act::before{ content:"";position:absolute;left:8%;right:8%;top:30%;bottom:-10px;z-index:-2;border-radius:50%;pointer-events:none; background:#d71921;filter:blur(18px);opacity:.5;will-change:opacity;animation:bh-breathe 4.2s ease-in-out 1.6s infinite; } /* ═════════ ШАПКА, ПРОКРУТКА, ПЕРЕХОД (Смело d03) ═════════ */ /* «Назад» 36×36 и «i» 21×21 — зона нажатия шире рисунка: 48×48 и 49×49 (на 375 — не меньше 44), вид не меняется; отступ считается от внутреннего края рамки 1 px, поэтому -7 и -15 */ #device-host .pd-career:has(.fr-hub) .pd-route-back{position:relative} #device-host .pd-career:has(.fr-hub) .pd-route-back::after{content:"";position:absolute;inset:-7px;border-radius:16px} #device-host .pd-career:has(.fr-hub) .pd-title-info::after{content:"";position:absolute;inset:-15px;border-radius:50%} /* низ первого экрана над нижним меню уходит в прозрачность (28 px) — видно, что дальше прокрутка, а не обрезано */ #device-host .fr-hub .fr-hub-scroll:has(>.rbh){ -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--bh-dock) - 28px),transparent calc(100% - var(--bh-dock))); mask-image:linear-gradient(180deg,#000 calc(100% - var(--bh-dock) - 28px),transparent calc(100% - var(--bh-dock))); } /* из «Наград» (и по ссылке ?rb=1) «Карьера» открывается сразу на рейкбеке: пока экран рейкбека не смонтирован, содержимое «Карьеры» не показываем — вкладка «Статистика» не мелькает (флаг ставит и снимает friday-hub.js) */ html[data-rb-route] #device-host .pd-career:not(:has(.fr-hub))>*{visibility:hidden} html[data-rb-route] #device-host .pd-career-tabs *{transition:none!important} @media (prefers-reduced-motion:reduce){ #device-host .fr-hub .rbh *,#device-host .fr-hub .rbh *::before,#device-host .fr-hub .rbh *::after, #device-host .fr-hub .rbh .rbh-light,#device-host .fr-hub .rbh .rbh-light>i, #device-host .fr-rb.rw-tile *,#device-host .fr-rb.rw-tile *::before{animation:none!important} } /* ═════════ ТАЛИСМАН вместо карты (Саша 26.10) ═════════ Всё 2D: на сукне под прожектором стоит статуэтка (PdTalismanArt — слои подставки, фигуры и шара), под ней мягкая контактная тень. Под статуэткой — потолок «до N % рейкбека» (герой), температура шара и «Серебро · шаг 5 из 10» с 10 точками. Пока арта нет (assets/talismans генерируется) — место статуэтки держит aspect-ratio, раскладка не прыгает. Отсчёт от --a-top (низ вкладок): титр +8, статуэтка +34…+246, подписи +254…+306, подсказка на полу (floor − 22) */ #device-host .fr-hub .rbh .rbh-stage>.rbh-tal{ position:absolute;z-index:2;left:50%;top:calc(var(--a-top) + 238px - var(--tal-h,220px));transform:translateX(-50%);pointer-events:none; display:flex;align-items:flex-end;filter:var(--bh-f,none);transition:filter .6s ease,opacity .35s ease; } #device-host .fr-hub .rbh .rbh-tal>.pd-tal-art{z-index:1;filter:drop-shadow(0 14px 18px #000c)} /* контактная тень: тёмный эллипс на сукне под подставкой + узкое ядро */ /* статуэтка стоит на сукне: под ней пятно света прожектора (::before), широкая мягкая тень и плотное ядро касания */ #device-host .rbh-tal-shadow{ position:absolute;z-index:0;left:-6%;right:-6%;bottom:-7%;height:13%;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,#000000d9,#0000008c 50%,transparent);filter:blur(4px); } #device-host .rbh-tal-shadow::before{ content:"";position:absolute;left:-30%;right:-30%;top:-160%;bottom:-120%;border-radius:50%;z-index:-1; background:radial-gradient(closest-side,#ffffff24,#ffffff0d 55%,transparent); } #device-host .rbh-tal-shadow::after{content:"";position:absolute;left:10%;right:10%;top:32%;bottom:26%;border-radius:50%;background:#000;filter:blur(2px)} #device-host .fr-rb.rw-tile .rbh-tal-shadow::before{content:none} #device-host .fr-hub .rbh .rbh-stage>.rbh-tal-info{ position:absolute;z-index:3;left:16px;right:16px;top:calc(var(--a-top) + 258px);pointer-events:none; display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .35s ease; } #device-host .rbh-tal-row{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap} /* потолок — капсула стекла с красным кантом: «до 46 % рейкбека» */ #device-host .pd-tal-cap{ display:inline-flex;align-items:baseline;gap:0;height:28px;padding:0 13px;border-radius:999px;box-sizing:border-box;line-height:28px;white-space:nowrap; font:400 12px/28px var(--pd-font,'Play',sans-serif);letter-spacing:.02em;color:#c9cdd4; background:#0b0c0fcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px #ff3b475c,inset 0 1px 0 #ffffff1a,0 0 18px -6px #d71921cc; } #device-host .pd-tal-cap>b{margin:0 5px;font:700 17px/28px var(--pd-font,'Play',sans-serif);letter-spacing:0;color:#fff;font-variant-numeric:tabular-nums} /* температура шара: точка цвета состояния (холодные — голубые, горячие — оранжево-красные) */ #device-host .pd-tal-temp{display:inline-flex;align-items:center;gap:6px;font:400 12px/16px var(--pd-font,'Play',sans-serif);color:#a1a7b2;white-space:nowrap;text-shadow:0 1px 6px #000} #device-host .pd-tal-temp>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--tal-temp,#a1a7b2);box-shadow:0 0 7px var(--tal-temp,transparent)} #device-host .pd-tal-temp>b{font-weight:700;color:#fff} /* шаги: «СЕРЕБРО · ШАГ 5 ИЗ 10» + дот-матрица из 10 точек, заполненная — пройдено */ #device-host .pd-tal-steps{display:inline-flex;align-items:center;gap:9px;white-space:nowrap} #device-host .pd-tal-steps-txt{font:700 11px/14px var(--pd-font,'Play',sans-serif);letter-spacing:.1em;text-transform:uppercase;color:#c9cdd4;text-shadow:0 1px 6px #000} #device-host .pd-tal-dots{display:inline-flex;gap:3px} #device-host .pd-tal-dots>i{width:5px;height:5px;border-radius:50%;background:#ffffff26;box-shadow:inset 0 0 0 .5px #ffffff1a} #device-host .pd-tal-dots>i[data-on]{background:#fff;box-shadow:0 0 4px #ffffff8c} /* вариант 5 «банк на столе»: статуэтка меньше, подписи выше, тарелка банка ниже — к подсказке на полу */ #device-host .fr-hub .rbh .rbh-stage>.rbh-tal[data-v="5"]{top:calc(var(--a-top) + 180px - var(--tal-h,160px))} #device-host .fr-hub .rbh .rbh-stage>.rbh-tal-info[data-v="5"]{top:calc(var(--a-top) + 190px)} #device-host .fr-hub .rbh .rbh-stage:has(>.rbh-tal) >.rb-plate{top:calc(var(--a-floor) - 104px)} /* свет: статуэтка вспыхивает со светом, подписи проявляются после; погашенная сцена и уход в раздачу — гаснут */ #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]) :is(.rbh-tal,.rbh-tal-info){opacity:0;transition:none} #device-host .fr-hub .rbh[data-leaving] :is(.rbh-tal,.rbh-tal-info){opacity:0} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-tal{animation:bh-flick .45s linear var(--bh-go) backwards} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-tal-info{animation:bh-fade .4s ease calc(var(--bh-go) + .2s) backwards} /* виджет «Наград»: тот же талисман меньше — статуэтка слева, справа имя, потолок, шаги и температура */ #device-host .fr-rb.rw-tile .fr-rb-tal{display:flex;align-items:center;gap:12px;margin-top:10px;text-align:left} #device-host .fr-rb.rw-tile .fr-rb-tal-slot{flex:none;display:flex;align-items:flex-end;justify-content:center;width:108px} #device-host .fr-rb.rw-tile .fr-rb-tal-art{position:relative;display:flex;align-items:flex-end} #device-host .fr-rb.rw-tile .fr-rb-tal-art>.pd-tal-art{z-index:1;filter:drop-shadow(0 8px 10px #000b)} #device-host .fr-rb.rw-tile .fr-rb-tal-art>.rbh-tal-shadow{height:14px;filter:blur(3px)} #device-host .fr-rb.rw-tile .fr-rb-tal-txt{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0} #device-host .fr-rb.rw-tile .fr-rb-tal-name{display:flex;flex-direction:column;gap:2px;font:700 10px/12px var(--pd-font,'Play',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#a1a7b2} #device-host .fr-rb.rw-tile .fr-rb-tal-name>b{font:700 16px/20px var(--pd-font,'Play',sans-serif);letter-spacing:0;text-transform:none;color:#fff} #device-host .fr-rb.rw-tile .pd-tal-cap{height:26px;line-height:26px;padding:0 11px;font-size:11px} #device-host .fr-rb.rw-tile .pd-tal-cap>b{font-size:15px;line-height:26px} #device-host .fr-rb.rw-tile .pd-tal-steps{flex-wrap:wrap;row-gap:4px;white-space:normal} #device-host .fr-rb.rw-tile .pd-tal-steps-txt{text-shadow:none} #device-host .fr-rb.rw-tile .pd-tal-temp{font-size:11px;text-shadow:none} /* арт ещё не готов (подставка не загрузилась): тихий 2D-силуэт из точек — подставка и шар, чтобы стол не пустовал */ #device-host :is(.rbh-tal,.fr-rb-tal-art)[data-miss]>.pd-tal-art::before, #device-host :is(.rbh-tal,.fr-rb-tal-art)[data-miss]>.pd-tal-art::after{ content:"";position:absolute;left:50%;pointer-events:none; background:radial-gradient(circle,#ffffff47 .9px,transparent 1.4px) 50% 50%/5px 5px; } #device-host :is(.rbh-tal,.fr-rb-tal-art)[data-miss]>.pd-tal-art::before{bottom:6%;width:58%;height:22%;margin-left:-29%;border-radius:14% 14% 22% 22%/30% 30% 40% 40%;box-shadow:inset 0 0 0 1px #ffffff1f} #device-host :is(.rbh-tal,.fr-rb-tal-art)[data-miss]>.pd-tal-art::after{bottom:24%;width:46%;aspect-ratio:1;margin-left:-23%;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff26,0 0 30px -6px #ffffff33} /* ═════════ t03 (Саша 26.10: «нема R-фішок, статуетка має бути в сцені, прогрес-бари неакуратні, композиція храмає») ═════════ Сетка экрана: один левый край 16 px, отступы кратны 8, один набор кеглей — титр 11/16 капс, заголовок 18/24, текст 13/18, подпись 12/16, герой-число 32/32. Порядок: титр → 2D-сцена во всю ширину → блок талисмана → банк → кнопка. */ /* ── ОДНА шкала прогресса на весь рейкбек ── 4 px, трек #ffffff1f, заливка #D71921 → светлый по длине трека, без свечения и огоньков; подпись под шкалой: слева значение, справа цель (12/16, числа белым) */ .pd-pbar,#device-host .rb-panel .ms-bar.pd-pbar,#device-host .fr-rb .ms-bar.pd-pbar{ position:relative;display:block;height:4px;margin:0;border-radius:2px;overflow:hidden; background:#ffffff1f;box-shadow:none; } .pd-pbar>.pd-pbar-fill{ position:absolute;inset:0;display:block;border-radius:2px; background:linear-gradient(90deg,#D71921,#ff6b73);box-shadow:none; -webkit-clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);clip-path:inset(0 calc(100% - var(--p,0%)) 0 0); transition:clip-path .56s cubic-bezier(.3,.7,.3,1),-webkit-clip-path .56s cubic-bezier(.3,.7,.3,1),opacity .3s ease,filter .25s ease; } .pd-pbar>.pd-pbar-fill[data-inst]{transition:none} .pd-pbar>.pd-pbar-fill[data-drain]{opacity:0} .pd-pbar>.pd-pbar-fill::after,.pd-pbar>.pd-pbar-fill::before{content:none} #device-host .rb-panel .ms-bar.pd-pbar::after{content:none} .pd-pbar[data-full]>.pd-pbar-fill{filter:brightness(1.35)} /* сегменты (шаги, материалы): равные, зазор 2 px; пройдено — свой кусок общего градиента, текущий — вполсилы */ .pd-pseg{display:flex;gap:2px;height:4px;margin:0} .pd-pseg>i{flex:1 1 0;min-width:0;height:4px;border-radius:1px;background-color:#ffffff1f;background-image:none} .pd-pseg>i[data-s]{background-image:linear-gradient(90deg,#D71921,#ff6b73);background-repeat:no-repeat} .pd-pseg>i[data-s="now"]{opacity:.45} .pd-pcap{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px;white-space:nowrap; font:400 12px/16px var(--pd-font,'Play',sans-serif);letter-spacing:.02em;color:#8e8e98;font-variant-numeric:tabular-nums; } .pd-pcap>span{min-width:0;overflow:hidden;text-overflow:ellipsis} .pd-pcap>span:last-child:not(:first-child){flex:none;text-align:right} .pd-pcap b,.pd-pcap .ms-cur{font-weight:700;color:#fff} .pd-pstep{display:block} #device-host .rb-panel .pd-pcap .ms-prog{margin:0;font:inherit;letter-spacing:inherit;color:inherit} #device-host .rb-panel .pd-pcap .ms-prog>.ms-cur{font-size:inherit;line-height:inherit;letter-spacing:inherit} #device-host .rb-panel .rb-bar{display:block} /* ── СЦЕНА: титр над ней, 2D-сцена во всю ширину (402×420, cover); статуэтка и тень — по данным сцены ── */ #device-host .fr-hub .rbh .rbh-stage[data-sc]{ position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px; height:auto;padding:calc(var(--a-top) + 16px) 0 0;margin:0;border:0;border-radius:0;overflow:hidden; background:#050607;box-shadow:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent; } #device-host .fr-hub .rbh .rbh-stage[data-sc]::after{content:none} #device-host .fr-hub .rbh .rbh-stage[data-sc]>.rbh-pill{position:relative;z-index:2;top:auto;left:auto;right:auto;align-self:center;margin:0} #device-host .fr-hub .rbh .rbh-stage[data-sc]>.rbh-light{z-index:0} #device-host .rbh-sc{ position:relative;z-index:1;display:block;width:100%;aspect-ratio:var(--sc-ar,402 / 420);overflow:hidden; filter:var(--bh-f,none);transition:filter .6s ease; /* края сцены растворяются в экране: сверху 6 %, снизу 10 % */ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 90%,transparent 100%); } #device-host .rbh-sc>.rbh-sc-bg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none} /* запасная сцена (сцен ещё нет): сукно под прожектором, тёмные края */ #device-host .rbh-sc[data-felt]>.rbh-sc-bg{background-position:center 40%} #device-host .rbh-sc[data-felt]::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 46% 30% at 50% 44%,#ffffff1a,transparent 70%),radial-gradient(ellipse 80% 66% at 50% 52%,transparent 40%,#050607e6 100%); } #device-host .rbh-sc>.rbh-sc-shadow{position:absolute;z-index:1;display:block;border-radius:50%;pointer-events:none} #device-host .rbh-sc>.rbh-sc-art{position:absolute;z-index:2;display:block;pointer-events:none;filter:var(--sc-tint,none);transition:opacity .35s ease} #device-host .rbh-sc>.rbh-sc-art>.pd-tal-art{width:100%} #device-host .fr-hub .rbh .rbh-stage[data-sc]:active .rbh-sc{filter:var(--bh-f,none) brightness(1.06)} /* свет: сцена вспыхивает со светом, в темноте и при уходе в раздачу статуэтка гаснет */ #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]) .rbh-sc{transition:none} #device-host .fr-hub .rbh:not([data-leaving]):is([data-phase="on"],[data-phase="relight"]) .rbh-sc{animation:bh-flick-f .45s linear var(--bh-go) backwards;transition:none} #device-host .fr-hub .rbh:is([data-phase="wait"],[data-phase="dark"]) .rbh-sc-art,#device-host .fr-hub .rbh[data-leaving] .rbh-sc-art{opacity:0;transition:none} #device-host :is(.rbh-sc-art)[data-miss]>.pd-tal-art::before,#device-host :is(.rbh-sc-art)[data-miss]>.pd-tal-art::after{ content:"";position:absolute;left:50%;pointer-events:none;background:radial-gradient(circle,#ffffff47 .9px,transparent 1.4px) 50% 50%/5px 5px} #device-host .rbh-sc-art[data-miss]>.pd-tal-art::before{bottom:6%;width:58%;height:22%;margin-left:-29%;border-radius:14% 14% 22% 22%/30% 30% 40% 40%} #device-host .rbh-sc-art[data-miss]>.pd-tal-art::after{bottom:24%;width:46%;aspect-ratio:1;margin-left:-23%;border-radius:50%} /* вариант 5: банк раздачи — табличка в левом нижнем углу сцены */ #device-host .fr-hub .rbh .rbh-sc>.rb-plate{ position:absolute;z-index:3;left:16px;bottom:24px;top:auto;transform:none; display:flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:12px;white-space:nowrap; background:#0b0c0fd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px #ffffff1f,0 8px 24px -8px #000;transition:opacity .35s ease; } #device-host .fr-hub .rbh .rbh-sc>.rb-plate .rb-pot-glyph{width:36px;height:30px} #device-host .fr-hub .rbh .rbh-sc>.rb-plate .rb-plate-txt>strong{font-size:20px} #device-host .fr-hub .rbh:is([data-leaving],[data-phase="wait"],[data-phase="dark"]) .rbh-sc>.rb-plate{opacity:0;transition-duration:.2s} /* ── БЛОК ТАЛИСМАНА под сценой: одно стекло, три ряда ── */ #device-host .rbh-ti,#device-host .fr-hub .rbh .rbh-points.rb-panel{ position:relative;z-index:3;border-radius:20px;padding:16px; background:linear-gradient(180deg,#14161b,#0b0c0f); box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px 0 #ffffff1f,0 16px 32px -20px #000; -webkit-backdrop-filter:none;backdrop-filter:none; } #device-host .fr-hub .rbh>.rbh-ti{margin-top:0} #device-host .fr-hub .rbh .rbh-points.rb-panel{margin-top:8px} #device-host .fr-hub .rbh .rbh-points.rb-panel::before,#device-host .fr-hub .rbh .rbh-points.rb-panel::after, #device-host .fr-hub .rbh .rbh-points.rb-panel .rbh-glass{content:none;display:none} #device-host .rbh-ti-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px} #device-host .rbh-ti-id{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0} #device-host .rbh-ti-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 18px/24px var(--pd-font,'Play',sans-serif);letter-spacing:.01em;color:#fff} /* материал — нейтральная пилюля, точка цвета металла */ #device-host .rbh-ti-mat{ display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:999px;box-sizing:border-box; font:700 11px/16px var(--pd-font,'Play',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:#c9cdd4; background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff1f; } #device-host .rbh-ti-mat::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--mat-c,#cbd3de);box-shadow:inset 0 0 0 1px #ffffff40} #device-host .rbh-ti-mat[data-m="wood"]{--mat-c:#a8743f} #device-host .rbh-ti-mat[data-m="bronze"]{--mat-c:#d08a52} #device-host .rbh-ti-mat[data-m="silver"]{--mat-c:#cbd3de} #device-host .rbh-ti-mat[data-m="gold"]{--mat-c:#f0c75e} #device-host .rbh-ti-mat[data-m="platinum"]{--mat-c:#e4ecf6} #device-host .rbh-ti-cap{display:flex;flex-direction:column;align-items:flex-end;gap:0;flex:none;text-align:right} #device-host .rbh-ti-capn{display:flex;align-items:baseline;gap:6px;white-space:nowrap} #device-host .rbh-ti-capn>small{font:400 13px/18px var(--pd-font,'Play',sans-serif);color:#a1a7b2} #device-host .rbh-ti-capn>b{font:700 32px/32px var(--pd-font,'Play',sans-serif);letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums} #device-host .rbh-ti-capn>b>small{font-size:18px;font-weight:700;color:#fff} #device-host .rbh-ti-capk{font:400 12px/16px var(--pd-font,'Play',sans-serif);color:#8e8e98;white-space:nowrap} #device-host .rbh-ti .rbh-ti-steps{margin-top:16px} #device-host .rbh-ti-foot{display:flex;align-items:center;margin-top:16px;padding-top:12px;box-shadow:inset 0 1px 0 #ffffff12} #device-host .rbh-ti-foot .pd-tal-temp{font:400 13px/18px var(--pd-font,'Play',sans-serif);color:#a1a7b2;text-shadow:none} #device-host .rbh-ti-foot .pd-tal-temp>i{width:8px;height:8px;box-shadow:none} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="on"]>.rbh-ti{animation:bh-rise .7s var(--bh-out) calc(var(--bh-go) + .08s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="relight"]>.rbh-ti{animation:bh-rise .5s var(--bh-out) calc(var(--bh-go) + .03s) backwards} #device-host .fr-hub .rbh:not([data-leaving])[data-phase="still"]>.rbh-ti{animation:bh-rise .45s var(--bh-out) backwards} /* ── ПАНЕЛЬ БАНКА: кикеры 11/16, число банка, шкала с подписью; ритм 8 ── */ #device-host .rb-panel .rb-kick{margin:0 0 8px;font:700 11px/16px var(--pd-font,'Play',sans-serif);letter-spacing:.16em;color:#ff5a62;text-shadow:none} #device-host .rb-panel .rb-kick--w{margin:4px 0 0;font:700 15px/20px var(--pd-font,'Play',sans-serif);letter-spacing:.01em;text-transform:none;color:#f0f2f5} #device-host .rb-panel .rb-num{filter:none} #device-host .rb-panel .rb-pot-glyph>svg{filter:none} #device-host .rb-panel .rb-hint{margin-top:8px;font:400 13px/18px var(--pd-font,'Play',sans-serif);color:#8e8e98} #device-host .rb-panel .rb-foot{margin-top:12px} #device-host .rb-panel .rb-foot>.rb-hint{font-size:12px;line-height:16px} #device-host .rb-panel .rb-bar{margin-top:16px} #device-host .rb-panel .rb-sep{margin-top:16px;padding-top:16px;box-shadow:inset 0 1px 0 #ffffff12} #device-host .rb-panel .rb-sep+.rb-bar{margin-top:0} #device-host .rb-panel .rb-cap--kick+.rb-bankbox{--rb-max:44px} /* 1 «Поток» */ #device-host .rb-panel .rb-flow{grid-template-columns:minmax(0,1fr) 56px minmax(0,1.3fr);column-gap:8px;align-items:end} #device-host .rb-panel .rb-flow-unit{display:block;font:700 24px/32px var(--pd-font,'Play',sans-serif);letter-spacing:-.01em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums} #device-host .rb-panel .rb-flow-unit>small{font-size:13px;letter-spacing:.08em;color:#ff5a62} #device-host .rb-panel .rb-flow-arrow{gap:2px;padding-bottom:6px} #device-host .rb-panel .rb-arrow-svg{filter:none} #device-host .rb-panel .rb-flow-r{--rb-max:32px} /* 3 «Два шага» */ #device-host .rb-panel .rb-steps{gap:16px} #device-host .rb-panel .rb-steps>li>i{box-shadow:inset 0 0 0 1.5px #d71921} #device-host .rb-panel .rb-steps>li:first-child::before{top:36px;bottom:-12px;box-shadow:none;background:#d7192166} #device-host .rb-panel .rb-steps .rb-bar{margin-top:16px} #device-host .rb-panel .rb-steps .rb-bankbox{margin-top:8px} /* 4 «Шкала вливается в банк» */ #device-host .rb-panel .rb-stake-top{align-items:flex-end} #device-host .rb-panel .rb-stake-top>.rb-kick{flex:0 1 50%;margin:0;padding-bottom:4px} #device-host .rb-panel .rb-stake-r .rb-kick{margin-bottom:4px} #device-host .rb-panel .rb-stake-bar{display:flex;align-items:flex-start;gap:12px;margin-top:16px} #device-host .rb-panel .rb-stake-bar>.rb-bar{flex:1;min-width:0;margin-top:0} #device-host .rb-panel .rb-stake-bar>.rb-bankbox--end{margin-top:-15px} #device-host .rb-panel .rb-bankbox--end .rb-pot-glyph{width:40px;height:34px} /* 5 «Банк на столе» */ #device-host .rb-panel .rb-head5{display:flex;align-items:center;justify-content:space-between;gap:12px} #device-host .rb-panel[data-v="5"] .rb-kick5{margin:0} #device-host .rb-panel[data-v="5"] .rb-head5+.rb-bar{margin-top:16px} /* кнопка и строки — тот же край и ритм */ #device-host .fr-hub .rbh .rbh-cta{margin-top:16px} #device-host .fr-hub .rbh .rbh-links{margin-top:24px} #device-host .fr-hub .rbh .rbh-how{margin-top:32px} /* ── ВИДЖЕТ «Наград»: тот же блок талисмана в миниатюре и та же шкала ── */ #device-host .fr-rb.rw-tile .fr-rb-tal{display:block;margin-top:16px;padding:12px 0 0;box-shadow:inset 0 1px 0 #ffffff12;text-align:left} #device-host .fr-rb.rw-tile .fr-rb-tal-top{display:flex;align-items:flex-end;gap:16px} #device-host .fr-rb.rw-tile .fr-rb-tal-slot{flex:none;display:flex;align-items:flex-end;justify-content:center;width:72px} #device-host .fr-rb.rw-tile .fr-rb-tal-txt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding-bottom:4px} #device-host .fr-rb.rw-tile .fr-rb-tal-name{display:block;font:700 11px/16px var(--pd-font,'Play',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#8e8e98} #device-host .fr-rb.rw-tile .rbh-ti-id{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap} #device-host .fr-rb.rw-tile .rbh-ti-name{font-size:16px;line-height:20px} #device-host .fr-rb.rw-tile .fr-rb-tal-cap{font:400 13px/18px var(--pd-font,'Play',sans-serif);color:#a1a7b2;white-space:nowrap} #device-host .fr-rb.rw-tile .fr-rb-tal-cap>b{font-size:18px;font-weight:700;color:#fff} #device-host .fr-rb.rw-tile .fr-rb-tal-steps{margin-top:16px} #device-host .fr-rb.rw-tile .rbh-ti-foot{margin-top:12px;padding-top:0;box-shadow:none} #device-host .fr-rb.rw-tile .fr-rb-body{margin-top:16px;padding-top:16px;box-shadow:inset 0 1px 0 #ffffff12} #device-host .fr-rb.rw-tile .fr-rb-body .ms-bar.pd-pbar{margin:0} #device-host .fr-rb.rw-tile .fr-rb-body .ms-prog{margin:0} #device-host .fr-rb.rw-tile .rw-act{margin-top:16px} /* в сцене свой свет — лампа над ней не нужна; блок талисмана заходит на растворённый низ сцены */ #device-host .fr-hub .rbh .rbh-stage[data-sc]:not(:has(.rbh-sc[data-felt]))>.rbh-light{display:none} #device-host .fr-hub .rbh>.rbh-ti{margin-top:-16px} /* «Поток»: кикеры по верху одной линией, числа — по низу */ #device-host .rb-panel .rb-flow{align-items:stretch} #device-host .rb-panel .rb-flow-l,#device-host .rb-panel .rb-flow-r{display:flex;flex-direction:column;justify-content:space-between} #device-host .rb-panel .rb-flow-arrow{justify-content:flex-end;padding-bottom:8px} #device-host .rb-panel .rb-flow-l .rb-flow-unit{line-height:40px} #device-host .rb-panel .rb-flow-r .rb-pot-glyph{width:40px;height:34px} /* строки второго акта — тот же левый край, что у блоков (16 px внутри), радиус блоков 20 */ #device-host .fr-hub .rbh .rbh-links{border-radius:20px} #device-host .fr-hub .rbh .rbh-links::before{border-radius:16px} #device-host .fr-hub .rbh .rbh-link{min-height:56px;padding:0 8px 0 16px} #device-host .fr-hub .rbh .rbh-link::after{content:none} #device-host .fr-hub .rbh .rbh-link+.rbh-link::before{left:16px;right:16px;background:#ffffff12} #device-host .fr-hub .rbh .rbh-link:first-child{border-radius:20px 20px 0 0} #device-host .fr-hub .rbh .rbh-link:last-child{border-radius:0 0 20px 20px} #device-host .fr-hub .rbh .rbh-how>ol{padding:8px 16px;border-radius:20px} #device-host .fr-hub .rbh .rbh-how>ol::before{border-radius:16px} #device-host .fr-hub .rbh .rbh-how>blockquote{margin-top:16px;padding:16px 16px 16px 24px;border-radius:20px} #device-host .rb-panel .rb-stake-top>.rb-kick{white-space:nowrap} #device-host .fr-hub .rbh .rbh-sc>.rb-plate{right:auto;top:auto;width:auto;height:auto} #device-host .fr-hub .rbh .rbh-sc>.rb-plate .rb-pot-glyph>svg{width:100%;height:100%} #device-host .rb-plate .rb-pot-glyph{display:block}