/* Знакомство с Clubflow — три экрана перед первым входом (только телефон).
   Графит почти до чёрного, лайм — акцент, крупные заголовки с лаймовой
   второй строкой, лаймовые «мазки». Контраст: белый на фоне 18:1,
   приглушённый текст 9:1, тёмный текст на лайме 13:1. */

.onb{
  --onb-bg:#16170F; --onb-card:#25261D; --onb-line:rgba(255,255,255,.12);
  --onb-ink:#FFFFFF; --onb-muted:rgba(255,255,255,.7);
  --onb-lime:#D3F308; --onb-lime-ink:#16170F;

  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;
  background:var(--onb-bg);color:var(--onb-ink);
  font-family:"Manrope","Golos Text","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:contain;
}
.onb[hidden]{display:none;}
/* На широком экране про сервис рассказывает панель слева от формы. */
@media (min-width:960px){ .onb{display:none;} }

/* ---------- шапка: знак, точки, «Пропустить» ---------- */

.onb-top{
  position:absolute;left:0;right:0;top:0;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
  font-weight:800;font-size:17px;letter-spacing:-.01em;
}
.onb-top img{border-radius:9px;display:block;}
.onb-skip{
  margin-left:auto;min-height:44px;padding:0 4px;
  display:inline-flex;align-items:center;
  color:var(--onb-muted);font-size:14px;font-weight:700;text-decoration:none;
}
.onb-skip:hover,.onb-skip:focus-visible{color:var(--onb-ink);}

/* Полоски, как в историях: видно, сколько осталось. */
.onb-dots{
  position:absolute;z-index:3;
  top:calc(62px + env(safe-area-inset-top));
  left:calc(20px + env(safe-area-inset-left));right:calc(20px + env(safe-area-inset-right));
  display:flex;gap:6px;
}
.onb-dots i{flex:1;height:3px;border-radius:3px;background:var(--onb-line);transition:background .25s;}
.onb-dots i.is-on{background:var(--onb-lime);}

/* ---------- лента экранов ---------- */

.onb-track{
  position:relative;
  flex:1;min-height:0;
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.onb-track::-webkit-scrollbar{display:none;}

.onb-slide{
  flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;min-height:0;
}

.onb-art{position:relative;flex:1;min-height:300px;overflow:hidden;}

.onb-copy{
  padding:8px calc(24px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
}
.onb-copy h2{
  margin:0 0 12px;
  font-size:clamp(31px, 8.8vw, 40px);line-height:1.04;font-weight:800;letter-spacing:-.025em;
}
.onb-copy em{font-style:normal;color:var(--onb-lime);}
.onb-copy p{margin:0 0 22px;max-width:34ch;font-size:15.5px;line-height:1.5;color:var(--onb-muted);}

.onb-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;padding:0 24px;border-radius:99px;
  background:var(--onb-lime);color:var(--onb-lime-ink);
  font-family:inherit;font-size:16px;font-weight:800;line-height:1;text-decoration:none;
  transition:transform .12s ease-out, filter .15s;
  -webkit-tap-highlight-color:transparent;
}
.onb-btn svg{width:18px;height:18px;flex:0 0 auto;}
.onb-btn:active{transform:scale(.98);}
.onb-btn:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px;}
.onb-btn-ghost{background:transparent;color:var(--onb-ink);border:1.5px solid rgba(255,255,255,.3);}
/* Общее a:hover со страницы входа перекрашивало кнопки — держим свои цвета. */
.onb .onb-btn:hover,.onb .onb-btn:focus-visible{color:var(--onb-lime-ink);}
.onb .onb-btn-ghost:hover,.onb .onb-btn-ghost:focus-visible{color:var(--onb-ink);border-color:rgba(255,255,255,.55);}
.onb-pair{display:flex;flex-direction:column;gap:10px;}

/* ---------- общие детали иллюстраций ---------- */

.onb-card{
  position:absolute;
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:18px;
  background:#FFFFFF;color:#16170F;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.onb-card b{display:block;font-size:15px;font-weight:800;}
.onb-card small{display:block;font-size:11.5px;color:#5E6155;margin-top:1px;}

/* Пометка «от руки»: лаймовая, наискосок, с волнистым подчёркиванием. */
.onb-note{
  position:absolute;z-index:2;
  font-size:15px;line-height:1.15;font-weight:800;color:var(--onb-lime);
  transform:rotate(-7deg);
}
.onb-note i{
  display:block;width:78%;height:9px;margin-top:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 9'%3E%3Cpath d='M2 6 Q 12 1 22 5 T 42 5 T 62 5 T 78 4' fill='none' stroke='%23D3F308' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center/100% 100%;
}


/* Сквозная лента: одна на три экрана, лежит в самой ленте и едет со свайпом.
   Над фото катка, под карточками; толщина не зависит от растяжения. */
.onb-ribbon{
  position:absolute;left:0;top:13%;width:300%;height:36%;
  pointer-events:none;z-index:1;overflow:visible;
}
.onb-ribbon path{
  fill:none;stroke:var(--onb-lime);stroke-width:30;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.onb-card,.onb-sticker,.onb-note,.onb-sports{z-index:2;}

/* ---------- 1. каток ---------- */

.onb-rink{
  position:absolute;inset:0;
  background:url(/img/rink.jpg) center 30%/cover no-repeat;
  filter:grayscale(1) brightness(.7) contrast(1.15);
  -webkit-mask-image:linear-gradient(to bottom, #000 45%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 45%, transparent 96%);
}
.onb-note-1{left:24px;top:calc(96px + env(safe-area-inset-top));}
.onb-card-ice{left:20px;right:56px;bottom:14%;transform:rotate(-2.5deg);}
.onb-tag{
  padding:5px 10px;border-radius:99px;flex:0 0 auto;
  background:#16170F;color:#FFFFFF;font-size:10px;font-weight:800;letter-spacing:.06em;
}
.onb-card-ice > div{flex:1;min-width:0;}
.onb-today{
  padding:5px 10px;border-radius:99px;flex:0 0 auto;
  background:rgba(31,138,80,.12);color:#1F8A50;font-size:10.5px;font-weight:800;
}
.onb-sticker{
  position:absolute;right:20px;top:calc(120px + env(safe-area-inset-top));
  padding:14px 18px;border-radius:46% 54% 50% 50% / 55% 45% 55% 45%;
  background:var(--onb-lime);color:var(--onb-lime-ink);
  font-size:13px;line-height:1.25;font-weight:700;text-align:center;
  transform:rotate(7deg);box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.onb-sticker b{display:block;font-size:17px;font-weight:800;}

/* ---------- 2. тренер и семьи ---------- */

.onb-art-2{
  background:radial-gradient(420px 300px at 80% 20%, rgba(211,243,8,.10), transparent 70%);
}
.onb-note-2{right:24px;top:calc(96px + env(safe-area-inset-top));transform:rotate(6deg);text-align:right;}
.onb-note-2 i{margin-left:auto;}
.onb-push{
  left:20px;right:20px;top:calc(158px + env(safe-area-inset-top));
  background:var(--onb-card);color:var(--onb-ink);border:1px solid var(--onb-line);
}
.onb-push small{color:var(--onb-muted);}
.onb-push > div{flex:1;min-width:0;}
.onb-push-ico,.onb-doc-ico{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--onb-lime);color:var(--onb-lime-ink);
}
.onb-push-ico svg,.onb-doc-ico svg{width:19px;height:19px;}
.onb-time{font-size:11px;color:var(--onb-muted);align-self:flex-start;}
.onb-poll{
  left:34px;right:34px;top:calc(248px + env(safe-area-inset-top));
  flex-direction:column;align-items:stretch;gap:8px;transform:rotate(-2deg);
}
.onb-poll b{font-size:19px;}
.onb-poll-row{display:flex;gap:8px;}
.onb-poll-row span{
  flex:1;text-align:center;padding:9px 0;border-radius:99px;
  border:1.5px solid #D9DBCE;font-size:13px;font-weight:800;
}
.onb-poll-row .is-yes{background:var(--onb-lime);border-color:var(--onb-lime);}
.onb-poll-bar{height:6px;border-radius:6px;background:#ECEDE6;overflow:hidden;}
.onb-poll-bar i{display:block;height:100%;background:#16170F;border-radius:6px;}
.onb-doc{
  left:56px;right:20px;bottom:6%;transform:rotate(2.5deg);
  background:var(--onb-card);color:var(--onb-ink);border:1px solid var(--onb-line);
}
.onb-doc small{color:var(--onb-muted);}

/* ---------- 3. любая команда ---------- */

.onb-note-3{left:24px;top:calc(96px + env(safe-area-inset-top));}
.onb-sports{
  position:absolute;left:0;right:0;margin-inline:auto;
  width:min(300px, calc(100% - 48px));top:calc(150px + env(safe-area-inset-top));
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.onb-sport{
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  padding:14px 16px;border-radius:20px;min-height:104px;
  background:var(--onb-card);border:1px solid var(--onb-line);color:var(--onb-ink);
}
.onb-sport svg{width:34px;height:34px;}
.onb-sport b{font-size:16px;font-weight:800;}
.onb-sport.is-lime{background:var(--onb-lime);border-color:var(--onb-lime);color:var(--onb-lime-ink);transform:rotate(-4deg);}
.onb-sport:nth-child(4){transform:rotate(3deg);}
.onb-made{left:0;right:0;margin-inline:auto;width:min(270px, calc(100% - 80px));bottom:7%;transform:rotate(-2deg);}
.onb-made > div{flex:1;min-width:0;}
.onb-made-ico{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--onb-lime);color:var(--onb-lime-ink);
}
.onb-made-ico svg{width:18px;height:18px;}

/* ---------- невысокие телефоны: иллюстрации плотнее ---------- */

@media (max-height:700px){
  .onb-art{min-height:250px;}
  .onb-sticker{top:calc(104px + env(safe-area-inset-top));padding:11px 14px;}
  .onb-poll{top:calc(222px + env(safe-area-inset-top));}
  /* Три карточки на невысокий экран не помещаются — справку убираем. */
  .onb-doc{display:none;}
  .onb-ribbon{top:11%;height:32%;}
  .onb-sports{top:calc(136px + env(safe-area-inset-top));gap:8px;}
  .onb-sport{min-height:72px;padding:10px 12px;gap:10px;flex-direction:row;align-items:center;justify-content:flex-start;}
  .onb-sport svg{width:26px;height:26px;}
  .onb-sport b{font-size:14px;}
  /* «Команда создана» на невысокий экран не помещается рядом с плитками. */
  .onb-made{display:none;}
  .onb-copy p{margin-bottom:16px;}
}

/* ---------- появление: только со скриптом и без «уменьшить движение» ---------- */

@media (prefers-reduced-motion:no-preference){
  .onb.is-live .onb-slide .onb-card,
  .onb.is-live .onb-slide .onb-sticker,
  .onb.is-live .onb-slide .onb-sport{
    transition:opacity .4s ease-out, translate .4s cubic-bezier(.2,.8,.2,1);
  }
  .onb.is-live .onb-slide:not(.is-active) .onb-card,
  .onb.is-live .onb-slide:not(.is-active) .onb-sticker,
  .onb.is-live .onb-slide:not(.is-active) .onb-sport{opacity:0;translate:0 18px;}
  .onb.is-live .onb-slide.is-active .onb-card:nth-of-type(2){transition-delay:.08s;}
  .onb.is-live .onb-slide.is-active .onb-card:nth-of-type(3){transition-delay:.16s;}
  .onb.is-live .onb-track{scroll-behavior:smooth;}
}
@media (prefers-reduced-motion:reduce){
  .onb-track{scroll-behavior:auto;}
}