/* ─── Онбординг: слайды-знакомство (телефон) и приветствие+тур (десктоп) ───
   Оверлей поверх всего интерфейса: z-index 900 — выше тап-бара (70), меню (95)
   и маскота, ниже тоста (1001), чтобы финальный тост было видно.
   §1: анимации только transform/opacity; squiggle-фильтры гаснут под
   body.light-fx и prefers-reduced-motion автоматически (base.css). */

#ob-root{position:fixed; inset:0; z-index:900; opacity:1; transition:opacity .25s;}
#ob-root.ob-bye{opacity:0; pointer-events:none;}
body.ob-open{overflow:hidden;}   /* слайды: фон не скроллится */

/* ══ режим «слайды» (телефон): непрозрачная бумага во весь экран ══ */
.ob-slides{
  display:flex; flex-direction:column; overflow:hidden;
  background-color:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 1.1px, transparent 1.3px);
  background-size:26px 26px;
  padding:calc(8px + var(--safe-top, 0px)) 0 calc(12px + var(--safe-b, 0px));
}
.ob-skip{
  position:absolute; top:calc(6px + var(--safe-top, 0px)); right:8px; z-index:3;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:.9rem; color:var(--pencil); padding:10px 14px; min-height:44px;
}
.ob-skip:hover{color:var(--graphite);}

.ob-track{
  flex:1; min-height:0; display:flex;
  transition:transform .32s cubic-bezier(.3,1,.4,1); touch-action:pan-y;
}
.ob-track.drag{transition:none;}
.ob-slide{
  flex:0 0 100%; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:34px 22px 6px;
  user-select:none; -webkit-user-select:none;
}
.ob-art{
  width:100%; max-width:340px; height:236px; max-height:36vh;
  display:flex; align-items:flex-end; justify-content:center;
  position:relative; overflow:hidden;
}
.ob-art svg{overflow:visible; max-height:100%;}
.ob-t{
  font-family:'Caveat',cursive; font-weight:700; font-size:1.65rem;
  line-height:1.1; text-align:center; margin-top:16px;
}
.ob-s{
  font-size:.95rem; color:var(--graphite-soft); text-align:center;
  margin-top:7px; max-width:270px; overflow-wrap:anywhere;
}

/* точки-шаги (общие для слайдов и приветствия) */
.ob-dots{display:flex; gap:9px; justify-content:center; padding:12px 0 6px; flex:none;}
.ob-dot{
  width:11px; height:11px; border-radius:50%; background:#FFFDF6; border:none;
  box-shadow:inset 0 0 0 1.8px var(--pencil); position:relative; padding:0; cursor:pointer;
}
.ob-dot::after{content:""; position:absolute; inset:-9px;}   /* зона тапа ≥29px */
.ob-dot.on{background:var(--graphite); box-shadow:inset 0 0 0 1.8px var(--graphite);}
.ob-dot.on::before{
  content:""; position:absolute; inset:-5px; border:1.8px solid var(--graphite);
  border-radius:50%; filter:url(#squiggle);
}

.ob-foot{
  flex:none; display:flex; gap:10px; justify-content:center; align-items:stretch;
  padding:6px 18px 2px;
}
.ob-foot .btn{min-height:48px; flex:1; max-width:300px; font-size:1.02rem;}
.ob-foot .btn.primary{font-family:'Caveat',cursive; font-weight:700; font-size:1.25rem;}
.ob-ghost{display:none;}
.ob-last .ob-ghost{display:block;}

/* ── арт-помощники слайдов (горизонты) ── */
.ob-hwrap{width:100%; padding:0 2px 6px; align-self:flex-end;}
.ob-hrow{display:flex; align-items:center; gap:7px; width:100%; margin:5px 0;}
.ob-zone{
  font-family:'Caveat',cursive; font-weight:700; font-size:.85rem; color:var(--pencil);
  width:64px; text-align:right; flex:none; padding-right:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ob-hpill{
  display:flex; align-items:center; gap:6px; background:#FFFDF6; flex:1; min-width:0;
  padding:5px 10px; border-radius:var(--r-pill); position:relative; font-size:.74rem;
}
.ob-hpill::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.8px solid var(--ink-blue); border-radius:var(--r-pill); filter:url(#squiggle);
}
.ob-hpill.g::before{border-color:var(--green);} .ob-hpill.a::before{border-color:var(--amber);}
.ob-hpill.v::before{border-color:var(--violet);} .ob-hpill.t::before{border-color:var(--teal);}
.ob-hpill .tx{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ob-rom{
  font-family:'Caveat',cursive; font-weight:700; font-size:.72rem; color:var(--graphite-soft);
  width:20px; height:20px; border-radius:50%; background:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1.6px var(--pencil);
}
.ob-mini{width:16px; height:16px; border-radius:50%; flex:none; margin-left:auto;}

/* конфетти (внутри оверлея; transform/opacity only, гаснет с reduced-motion) */
.ob-cfw{position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden;}
.ob-cf{position:absolute; width:8px; height:12px; top:-16px; animation:ob-cff 1.6s ease-in forwards;}
@keyframes ob-cff{to{transform:translateY(110vh) rotate(520deg);}}

/* ══ режим «приветствие + тур» (широкие экраны) ══ */
.ob-dim{position:absolute; inset:0; background:rgba(44,42,38,.5);}
.ob-dlg{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-.35deg);
  width:min(620px,94%); display:flex; background:#FFFDF6;
  border-radius:22px 18px 20px 16px; box-shadow:7px 10px 0 rgba(44,42,38,.18);
  overflow:hidden;
}
.ob-dlg::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  border:2.4px solid var(--graphite); border-radius:inherit; filter:url(#squiggle);
}
.ob-d-art{
  flex:0 0 44%; min-width:0; background:var(--paper); position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  padding:14px 8px 0; overflow:hidden; min-height:238px;
}
.ob-d-art::after{
  content:""; position:absolute; top:10px; bottom:10px; right:0;
  border-right:1.8px dashed var(--pencil-faint);
}
.ob-d-art svg{overflow:visible;}
.ob-d-right{flex:1; min-width:0; display:flex; flex-direction:column; padding:18px 18px 12px;}
.ob-d-t{font-family:'Caveat',cursive; font-weight:700; font-size:1.6rem; line-height:1.05;}
.ob-d-s{font-size:.94rem; color:var(--graphite-soft); margin-top:8px; flex:1; overflow-wrap:anywhere;}
.ob-d-foot{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap;}
.ob-d-foot .ob-dots{margin-right:auto; padding:0;}
.ob-link{
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:.85rem; color:var(--pencil); text-decoration:underline dashed;
  min-height:44px; display:inline-flex; align-items:center; padding:0 4px;
}
.ob-link:hover{color:var(--graphite);}
.ob-d-foot .btn.primary{
  font-family:'Caveat',cursive; font-weight:700; font-size:1.1rem; min-height:44px;
}
.ob-kbd{font-size:.7rem; color:var(--pencil-faint); text-align:right; margin-top:6px;}

/* тур: прозрачный щит ловит клики мимо подсказки (Esc/«пропустить» всегда работают) */
.ob-shield{position:absolute; inset:0;}
.ob-ring{
  position:fixed; z-index:2; pointer-events:none; border-radius:16px;
  box-shadow:0 0 0 200vmax rgba(44,42,38,.5);
  transition:opacity .18s;
}
.ob-ring.moving{opacity:0;}
.ob-ring::before{
  content:""; position:absolute; inset:-3px; border:3px solid var(--marker);
  outline:2.4px solid var(--graphite); outline-offset:-1px;
  border-radius:18px; filter:url(#squiggle);
}
.ob-tip{
  position:fixed; z-index:3; width:min(276px, calc(100vw - 24px));
  background:#FFFDF6; padding:12px 13px 10px; border-radius:16px 20px 14px 18px;
  box-shadow:5px 7px 0 rgba(44,42,38,.2); transition:opacity .18s;
}
.ob-tip.moving{opacity:0;}
.ob-tip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2.2px solid var(--graphite); border-radius:inherit; filter:url(#squiggle);
}
.ob-tt{font-family:'Caveat',cursive; font-weight:700; font-size:1.22rem;}
.ob-ts{font-size:.86rem; color:var(--graphite-soft); margin-top:3px; overflow-wrap:anywhere;}
.ob-tf{display:flex; align-items:center; gap:8px; margin-top:10px;}
.ob-cnt{
  font-family:'Caveat',cursive; font-weight:700; font-size:.95rem;
  color:var(--pencil); margin-right:auto;
}
.ob-tf .btn{min-height:36px; font-size:.85rem; padding:4px 12px;}

/* совсем низкие/узкие ландшафты: приветствие без арта, чтобы всё влезло */
@media (max-height:430px){
  .ob-d-art{display:none;}
}