@import url("onb-style-b.css");
/* ONB · Варіант B туру онбордингу PokerDot. Вигляд — розділ 2 ТЗ; точки екрана 402 × 874. */
#onb-layer{position:absolute;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden;border-radius:inherit;font-family:Play,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#fff;visibility:hidden}
#onb-layer.on{visibility:visible}
#onb-layer *{box-sizing:border-box}
#onb-layer button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;margin:0}
#onb-layer button:focus{outline:none}
#onb-layer button:focus-visible{outline:2px solid #ff5a63;outline-offset:2px}

/* 2.1 затемнення з вирізами і рамки: геометрію щокадру задає рушій */
.onb-dim{position:absolute;inset:0;width:402px;height:874px;display:block}
.onb-rings i{position:absolute;left:0;top:0;display:block;border:2px solid #e4202e;box-shadow:0 0 0 5px rgba(228,32,46,.22);will-change:transform,width,height}
.onb-rings i:after{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 2px rgba(228,32,46,.0);animation:onbGlow 2.4s ease-in-out infinite}
@keyframes onbGlow{0%,100%{box-shadow:0 0 0 2px rgba(228,32,46,0)}50%{box-shadow:0 0 0 9px rgba(228,32,46,.10)}}
/* ТР-4: обводка статусу всередині підсвітки, затемнення не вирізає */
.onb-marks i{position:absolute;left:0;top:0;display:block;border:2px solid #ff5a63;box-shadow:0 0 0 4px rgba(255,90,99,.18);border-radius:8px;transition:opacity .25s}

/* 2.2 підказка */
.onb-tip{position:absolute;left:0;top:0;width:370px;background:#121418;border:1px solid #25282d;border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.55);
  opacity:0;scale:.96;transition:opacity .16s ease-in,scale .16s ease-in;will-change:transform,height;pointer-events:none}
.onb-tip.show{opacity:1;scale:1;pointer-events:auto;transition:opacity .22s ease-out,scale .3s cubic-bezier(.2,.9,.3,1.2)}
.onb-tip.onb-measure{visibility:hidden;transition:none}
.onb-tip>.onb-in{padding:18px 18px 16px;transition:opacity .14s ease}
.onb-in.out{opacity:0}
.onb-tail{position:absolute;width:14px;height:14px;background:#121418;border:1px solid #25282d;transform:rotate(45deg);transition:opacity .2s}
.onb-tail.up{top:-8px;border-right:0;border-bottom:0}
.onb-tail.down{bottom:-8px;border-left:0;border-top:0}
.onb-title{margin:0;font-weight:700;font-size:22px;line-height:1.2;color:#fff;text-wrap:balance}
.onb-text{margin:12px 0 0;font-size:15px;line-height:1.45;color:#c4c6c2;text-wrap:pretty}
.onb-text .nw,.onb-list .nw{white-space:nowrap}
.onb-ltitle{margin:12px 0 0;font-size:15px;line-height:1.45;color:#fff;font-weight:700}
.onb-list{margin:10px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.4;color:#d6d8d3}
.onb-list li{position:relative;padding-left:16px;margin-top:6px}
.onb-list li:first-child{margin-top:0}
.onb-list li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#e4202e}
.onb-list .st{display:inline-block;padding:1px 6px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:16px;vertical-align:1px;margin-right:2px}
.onb-bal{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding:14px 16px;border-radius:14px;background:#17191d;border:1px solid #25282d;color:#8f908b;font-size:13px}
.onb-bal b{font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.onb-link{display:inline-block;margin-top:10px !important;padding:0;background:none;border:0;font-size:14px;color:#ff5a63;text-decoration:underline;text-underline-offset:3px}

/* 2.3 лічильник */
.onb-seg{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.onb-seg span{display:flex;gap:4px}
.onb-seg i{height:4px;border-radius:2px;background:#2c2f34;position:relative;overflow:hidden}
.onb-seg i.on:after{content:"";position:absolute;inset:0;background:#e4202e}
.onb-seg i.now:after{animation:onbSeg .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes onbSeg{from{transform:translateX(-100%)}}
.onb-seg em{font-style:normal;font-size:11px;letter-spacing:1.6px;color:#8f908b;white-space:nowrap}

/* кнопки */
.onb-btns{display:flex;gap:8px;margin-top:16px}
.onb-btns.col{flex-direction:column}
.onb-b{height:50px;flex:1;border:0;border-radius:14px;background:linear-gradient(180deg,#ec2b38,#d4191f);color:#fff;font:700 15px/1 Play,system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:transform .12s ease,filter .12s}
.onb-b:active{transform:scale(.97);filter:brightness(.92)}
.onb-b.sec{flex:none;padding:0 18px;background:#101216;border:1px solid #292b2f;color:#b9bbb6;font-size:14px;letter-spacing:0;text-transform:none;font-weight:400;box-shadow:none}
.onb-b.sec.wide,.onb-btns.col .onb-b.sec{flex:1}
/* 2.4 плашка «Нажмите…» */
.onb-plate{flex:1;min-height:50px;border-radius:14px;background:rgba(228,32,46,.1);border:1px solid rgba(228,32,46,.4);color:#ffd9dc;font-size:13px;line-height:1.3;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;text-align:center}
.onb-plate b{color:#ff5a63;font-size:16px;display:inline-block;animation:onbArr 1.4s ease-in-out infinite}
@keyframes onbArr{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--d,-3px))}}

/* 2.6 / 2.8 шторка */
.onb-sheet{position:absolute;left:0;right:0;bottom:0;background:#101215;border-top:1px solid #24272b;border-radius:28px 28px 0 0;box-shadow:0 -18px 40px rgba(0,0,0,.35);
  transform:translateY(105%);transition:transform .28s cubic-bezier(.5,0,.75,0);pointer-events:none}
.onb-sheet.show{transform:none;pointer-events:auto;transition:transform .46s cubic-bezier(.2,.85,.25,1)}
.onb-sheet>.onb-in{padding:10px 20px 30px;transition:opacity .14s ease}
.onb-grip{width:40px;height:4px;border-radius:2px;background:#3a3d42;margin:0 auto 16px}

/* 2.5 значок натискання */
.onb-badge{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .25s;pointer-events:none}
.onb-badge.show{opacity:1}
.onb-badge:before{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:onbPulse 1.4s ease-out infinite}
.onb-badge:after{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(228,32,46,.5);animation:onbDot 1.4s ease-in-out infinite}
@keyframes onbPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes onbDot{0%,100%{transform:scale(1)}15%{transform:scale(.86)}}

/* жест руки: підїзд до точки, натискання, відпускання. Кінчик пальця — у точці значка */
.onb-hand{position:absolute;left:-25px;top:-6px;width:58px;height:58px;opacity:0;transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.onb-badge.hand .onb-hand{animation:onbHand 2.8s cubic-bezier(.45,0,.25,1) infinite}
/* тап: стиск до 66 % висоти від основи (spec.md), кінчик пальця = точка значка */
@keyframes onbHand{0%{opacity:0;transform:translate(34px,46px)}18%{opacity:1;transform:translate(34px,46px)}42%{opacity:1;transform:none}52%{transform:scaleY(.66)}62%{transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translate(10px,14px)}}
.onb-badge.hand:after{animation:onbDot 2.8s ease-in-out infinite}

/* 2.7 підписи зі стрілками */
.onb-calls{position:absolute;inset:0;pointer-events:none}
.onb-callsvg{position:absolute;inset:0;width:402px;height:874px;overflow:visible}
.onb-callsvg .ln{fill:none;stroke:#ff5a63;stroke-width:1.6;stroke-linejoin:round;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
.onb-callsvg .dt{fill:#ff5a63;opacity:0;transition:opacity .2s}
.onb-calls.show .dt{opacity:1}
.onb-call{position:absolute;background:#121418;border:1px solid #3a3d42;border-radius:10px;padding:6px 9px;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease}
.onb-calls.show .onb-call{opacity:1;transform:none}
.onb-call b{display:block;font-size:12px;line-height:1.2;color:#fff}
.onb-call span{display:block;font-size:11px;line-height:1.25;color:#a9aba6;margin-top:2px}

/* натискання повз ціль */
#onb-layer.nudge .onb-tip.show,#onb-layer.nudge .onb-sheet.show>.onb-in{animation:onbNudge .36s ease}
#onb-layer.nudge .onb-rings i{animation:onbRing .5s ease}
@keyframes onbNudge{20%{translate:-5px 0}45%{translate:4px 0}70%{translate:-2px 0}}
@keyframes onbRing{40%{box-shadow:0 0 0 9px rgba(228,32,46,.35)}}

.onb-toast{position:absolute;left:50%;top:58px;transform:translate(-50%,-6px);opacity:0;background:#1d1f24;border:1px solid #33363c;border-radius:12px;padding:10px 14px;font-size:13px;white-space:nowrap;transition:opacity .2s,transform .2s;pointer-events:none}
.onb-toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){#onb-layer *,#onb-layer *:before,#onb-layer *:after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important}
  .onb-badge.hand .onb-hand{opacity:1;transform:none}}

/* ── панель керування збоку (поза телефоном) ── */
#onb-panel{position:fixed;left:12px;top:12px;bottom:12px;width:240px;z-index:2147483600;background:rgba(14,15,18,.94);border:1px solid #26282d;border-radius:16px;color:#e7e8ea;font:13px/1.35 Play,system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#onb-panel.min{bottom:auto;width:auto}
#onb-panel.min .onb-pbody{display:none}
#onb-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid #26282d;font-weight:700;letter-spacing:.04em}
#onb-panel header button{background:#1b1d22;border:1px solid #2c2f35;color:#cfd1d4;border-radius:8px;padding:3px 8px;font:inherit;cursor:pointer}
#onb-panel .onb-pbody{overflow:auto;padding:8px 10px 12px}
#onb-panel h4{margin:12px 2px 6px;font-size:11px;letter-spacing:.14em;color:#8b8d93;text-transform:uppercase}
#onb-panel .pb{display:block;width:100%;text-align:left;background:#17191d;border:1px solid #26282d;color:#e7e8ea;border-radius:10px;padding:7px 9px;font:inherit;cursor:pointer;margin-bottom:6px}
#onb-panel .pb small{display:block;color:#8b8d93;font-size:11px;margin-top:1px}
#onb-panel .pb.on{border-color:#e4202e;background:#2a1214}
#onb-panel .pb:hover{border-color:#44474e}
#onb-panel label{display:flex;gap:8px;align-items:center;padding:4px 2px;cursor:pointer}
#onb-panel .note{color:#8b8d93;font-size:11px;margin:8px 2px 0}
@media (max-width:900px){#onb-panel{width:200px}}

/* ТР-3 (ТЗ 0.2): метки статусів у списку */
#onb-layer .onb-st { display: inline-block; font-size: 11px; letter-spacing: 1px; margin-right: 6px; white-space: nowrap; }
#onb-layer .onb-st i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }