/* ============================================================
   ОНБОРДИНГ (docs/ONBOARDING-DESIGN.md).

   Один экран — #p-intro, пять карточек, полноэкранный (см. FULLSCREEN в
   src/shell.js: нижней навигации на нём нет). В лобби этот файл не добавляет
   ни одного блока.

   Два макета, как всюду в арене (styles/desktop.css и styles/auth.css): на
   телефоне — колонка с точками прогресса; на 1024+ разворот в две колонки со
   степпером, потому что одна карточка посреди широкой сцены это растянутая
   мобилка, а не веб-версия.

   Витрины карточек нарисованы разметкой и токенами — ни одной картинки: в
   проекте нет ассетов под скриншоты. Две из них показывают ЖИВЫЕ данные
   игрока: своё кольцо ранга с лестницей и свои задачи на сегодня; дрон
   рисуется настоящим ригом из styles/companions.css.

   Цвета, радиусы и кривые — только из /shared/styles/tokens.css.
   ============================================================ */

/* =====================================================================
   ЭКРАН ТУРА (мобильный макет)
   ===================================================================== */
/* Страница тура прокрутки НЕ имеет: её забирает карточка (ниже). Иначе на
   320×568 главная кнопка уезжает под сгиб, и человек ищет «Далее» скроллом. */
#p-intro{inset:0;padding:0;overflow:hidden}

/* Ровно один экран в высоту: тогда прокручивается карточка, а точки и кнопка
   остаются на месте. `min-height` тут не годится — от него блок растёт вместе с
   содержимым, и flex-детям становится некуда сжиматься. */
.ib-wrap{height:100%;display:flex;flex-direction:column;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  font-family:'Manrope',sans-serif}

/* Левая колонка (логотип, степпер, подпись) — только десктоп. */
.ib-side{display:none}

.ib-main{flex:1;display:flex;flex-direction:column;min-height:0}

/* ---- шапка: точки прогресса и выход ----------------------------------- */
.ib-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex:none}
.ib-dots{display:flex;align-items:center;gap:7px}
.ibDot{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.16);cursor:default;
  transition:width .22s var(--ease-glass),background .22s ease}
.ibDot.past{background:var(--p1);cursor:pointer}
.ibDot.on{width:22px;background:linear-gradient(90deg,var(--p2),var(--mag))}

/* «Пропустить» всегда видна и всегда на одном месте: спрятанный выход из тура
   читается как ловушка. */
.ib-skip{margin-left:auto;flex:none;border:0;background:0;cursor:pointer;
  padding:6px 2px;color:var(--dim);font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:700}
.ib-skip:hover{color:var(--muted)}

/* ---- карточка ---------------------------------------------------------
   Прокручивается ОНА, а не страница: точки сверху и кнопка снизу остаются на
   месте на любом экране. Полосу прокрутки не показываем — как у `.page`. */
.ib-card{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  /* Нижние 20px растворяются: обрезанная на полуслове строка иначе выглядит
     как опечатка, а не как «дальше есть текст». Когда содержимое короче
     кадра, растворять нечего — маска не видна. */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 20px),transparent)}
.ib-card::-webkit-scrollbar{display:none}
.ib-card.in{animation:ibIn .24s var(--ease-glass) both}
@keyframes ibIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.ibTech{margin-bottom:8px}
.ibTitle{margin:0 0 8px;font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;
  font-size:clamp(19px,5.4vw,23px);line-height:1.22;letter-spacing:-.2px}
.ibLead{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--muted)}

.ibFacts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ibFacts li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.42}
.ibFacts li i{flex:none;margin-top:1px;width:17px;height:17px;border-radius:50%;font-size:11px;
  display:flex;align-items:center;justify-content:center;color:var(--teal);
  background:rgba(45,226,197,.14);border:1px solid rgba(45,226,197,.3)}
.ibFacts li span{flex:1;color:var(--text)}

/* ---- действия --------------------------------------------------------- */
/* Ряд с переносом: на телефоне вторичное действие уходит на свою строку
   (`flex-basis:100%`), на десктопе встаёт рядом с главной кнопкой. Одна
   разметка, никакой второй копии кнопки. */
.ib-acts{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.ib-back{flex:none;width:46px;height:46px;border-radius:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid var(--bord);color:var(--muted);font-size:19px}
.ib-back:active{transform:scale(.96)}

/* Главная кнопка стоит там же, где `.cta` в лобби и `.au-go` на регистрации:
   палец уже там. */
.ib-go{flex:1;min-width:0;border:0;border-radius:15px;padding:15px 18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--p2),var(--mag));color:#fff;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;letter-spacing:.4px;
  box-shadow:0 10px 26px rgba(124,92,255,.42)}
.ib-go i{font-size:19px}
.ib-go:active{transform:scale(.985)}

.ib-alt{order:3;flex-basis:100%;margin:2px auto 0;border:1px solid var(--bord);border-radius:13px;padding:10px 18px;cursor:pointer;
  background:rgba(255,255,255,.05);color:var(--muted);font-family:'Manrope',sans-serif;font-weight:700;font-size:12.5px}
.ib-alt:active{transform:scale(.97)}

/* Обещание, определяющее всё остальное, — на каждом экране тура. */
.ib-foot{flex:none;margin-top:14px;text-align:center;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)}

/* =====================================================================
   ВИТРИНЫ КАРТОЧЕК
   Общая рамка: стеклянная плита, в которую вписана иллюстрация. Высота
   ограничена долей вьюпорта — на 320×568 иначе не остаётся места под текст,
   а карточка без текста ничего не объясняет.
   ===================================================================== */
.ibArt{flex:none;position:relative;overflow:hidden;
  /* Высота — по содержимому, с потолком: у карточек витрины разной плотности,
     и фиксированная высота оставляла бы под лестницей рангов пустую треть.
     Потолок держит текст на экране (в альбоме телефона это единственное, что
     спасает первый экран от витрины во весь кадр). */
  height:auto;max-height:min(38vh,280px);border-radius:var(--r-lg);
  background:var(--lg);border:1px solid var(--lg-brd);box-shadow:var(--shadow-card);
  backdrop-filter:blur(18px) saturate(150%)}

/* ---- 1. кольцо ранга и лестница --------------------------------------- */
.ibRank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:13px 14px}
.ibrTop{display:flex;align-items:center;gap:13px}
.ibrRing{position:relative;width:68px;height:68px;border-radius:50%;flex:none;
  background:conic-gradient(from -90deg,#F5A623,#FFD873 var(--p,0%),rgba(255,255,255,.07) 0)}
.ibrIn{position:absolute;inset:5px;border-radius:50%;background:#0c0a18;
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 16px rgba(255,194,75,.15)}
.ibrIn i{font-size:30px;color:var(--p1);filter:drop-shadow(0 0 8px rgba(157,134,255,.5))}
.ibrTx b{display:block;font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:16px}
.ibrTx small{display:block;margin-top:2px;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.6px;color:var(--muted)}

/* Лестница рангов целиком: число «1200» ничего не значит, пока не видно, где
   это среди остальных. Подсвечен ранг игрока — на калибровке никакой, и это
   правда, а не пропуск. */
.ibrLadder{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.ibrTier{padding:3px 8px;border-radius:999px;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.4px;color:var(--dim);
  background:rgba(255,255,255,.04);border:1px solid var(--bord)}
.ibrTier.on{color:#2a1900;background:linear-gradient(135deg,#FFD873,var(--gold));border-color:transparent}

/* ---- 2. пари этой раздачи ---------------------------------------------
   Похоже на настоящую шторку пари за столом (#propsheet): строка события и
   пилюля коэффициента справа. Числа коэффициентов не подставляются — их
   считает сервер под конкретную раздачу. */
.ibProps{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:13px 14px}
.ibprHead{display:flex;align-items:center;gap:7px;margin-bottom:2px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.ibprHead i{font-size:15px;color:var(--gold)}
.ibprRow{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid var(--bord);font-size:12px}
.ibprRow span{flex:1;min-width:0}
.ibprRow b{flex:none;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;color:var(--gold)}
.ibprFoot{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ibprOut{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.ibprOut i{font-size:14px;color:var(--dim)}
.ibprOut.ok{color:var(--teal)}
.ibprOut.ok i{color:var(--teal)}

/* ---- 3. компаньон -----------------------------------------------------
   Дрон рисуется НАСТОЯЩИМ ригом (companion/rig.js, styles/companions.css):
   ему нужен только размер через --s и место, где стоять. Своей копии его вида
   здесь нет и быть не может — иначе в туре жил бы второй дрон. */
.ibPet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px}
.ibpStage{position:relative;width:150px;height:130px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(124,92,255,.22),transparent 68%)}
/* Тень-подставка: без неё дрон висит в пустоте и читается как иконка. */
.ibpStage:after{content:"";position:absolute;bottom:16px;width:76px;height:10px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%)}
/* `.pet` приходит из styles/companions.css вместе с классами шасси и краски —
   здесь только кадр: размер и место в витрине. */
.ibpPet{position:relative;z-index:1;--s:108px}

.ibpMks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.ibpMk{padding:3px 9px;border-radius:999px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:1px;color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--bord)}
.ibpMk.on{color:var(--teal);background:rgba(45,226,197,.12);border-color:rgba(45,226,197,.34)}
.ibpMks em{flex-basis:100%;text-align:center;font-style:normal;font-size:10px;color:var(--dim)}

/* ---- 4. задачи на сегодня ---------------------------------------------
   Строки — СВОИ задачи из сообщения `quests`, с настоящим прогрессом. Пока их
   нет, остаётся шапка с объёмом набора и сундук: придумывать названия задач
   нельзя. */
.ibQuests{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:13px 14px}
.ibqHead{display:flex;align-items:center;gap:7px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.ibqHead i{font-size:15px;color:var(--p1)}
.ibqRow.done{opacity:.55}
.ibqTop{display:flex;align-items:baseline;gap:9px}
.ibqTx{flex:1;min-width:0;font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibqCnt{flex:none;font-family:var(--num);font-weight:700;font-size:11.5px;color:var(--muted)}
.ibqBar{height:4px;border-radius:999px;margin-top:5px;overflow:hidden;background:rgba(255,255,255,.07)}
.ibqBar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--p2),var(--p1))}
.ibqRow.done .ibqBar i{background:rgba(45,226,197,.5)}
.ibqChest{display:flex;align-items:center;gap:8px;margin-top:3px;padding:8px 11px;border-radius:11px;
  font-size:11.5px;color:#ffe3ab;background:rgba(255,194,75,.1);border:1px solid rgba(255,194,75,.3)}
.ibqChest i{flex:none;font-size:15px;color:var(--gold)}
.ibqChest span{flex:1;min-width:0}
.ibqChest b{flex:none;font-family:var(--num);font-weight:700;font-size:12px;color:var(--gold)}

/* ---- 5. цикл «арена ⇄ клуб» ------------------------------------------- */
.ibLoop{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px}
.iblSide{flex:1;max-width:132px;text-align:center;padding:14px 10px;border-radius:var(--r-md);
  background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.28)}
.iblSide.club{background:rgba(255,194,75,.09);border-color:rgba(255,194,75,.28)}
.iblSide i{font-size:26px;color:var(--p1)}
.iblSide.club i{color:var(--gold)}
.iblSide b{display:block;margin-top:7px;font-size:13px;font-weight:800}
.iblSide small{display:block;margin-top:1px;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim)}

.iblMid{flex:none;display:flex;flex-direction:column;gap:10px;align-items:center}
.iblArrow{display:flex;flex-direction:column;align-items:center;gap:2px}
.iblArrow i{font-size:15px;color:var(--teal)}
.iblArrow.up i{transform:rotate(180deg);color:var(--gold)}
.iblArrow em{font-style:normal;font-size:9.5px;color:var(--dim);white-space:nowrap}

/* =====================================================================
   ПЛАНШЕТ (769…1023) — мобильная колонка по центру всей сцены.
   Две колонки в такую ширину не влезают, а сжатый степпер хуже точек.
   ===================================================================== */
@media (min-width:769px) and (max-width:1023px){
  body[data-screen="intro"] #scr{max-width:none}
  .ib-wrap{max-width:520px;margin:0 auto}
}

/* =====================================================================
   ДЕСКТОП (≥1024) — две колонки на всю сцену.

   Тот же приём, что у #p-auth: экран забирает ширину сайдбара (навигации на
   нём нет — см. FULLSCREEN в src/shell.js) и отменяет общую для `.page`
   читаемую колонку в 680px из styles/desktop.css. Селекторы через
   body[data-screen="intro"], чтобы правила не задевали другие экраны.
   ===================================================================== */
@media (min-width:1024px){
  body[data-screen="intro"] #shell{padding-left:0}
  /* На широком экране прокрутка возвращается странице: карточка тут не колонка
     фиксированной высоты, а плита в сетке, и внутренний скролл в ней читался бы
     как обрезанный текст. */
  body[data-screen="intro"] #p-intro{left:0;right:0;width:auto;inset:0;overflow-y:auto}

  .ib-wrap{height:auto;min-height:100%;
    display:grid;grid-template-columns:300px minmax(0,1fr);align-items:center;
    gap:clamp(40px,5vw,80px);max-width:1120px;margin:0 auto;padding:48px 40px}

  /* ---- левая колонка: логотип, степпер, обещание ---- */
  .ib-side{display:flex;flex-direction:column;gap:22px;align-self:center}
  .ib-side-logo{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:22px;letter-spacing:.5px}
  .ib-side-logo .a{color:var(--text)}
  .ib-side-logo .b{background:linear-gradient(90deg,#FFD98A,#FF9D2B);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .ib-side-h{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;
    letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)}

  .ib-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .ibStep{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:13px;
    border:1px solid transparent;cursor:default}
  .ibStep.past{cursor:pointer}
  .ibStep.past:hover{background:rgba(255,255,255,.04)}
  .ibStep.on{background:rgba(124,92,255,.13);border-color:rgba(124,92,255,.3)}
  .ibNum{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--num);font-weight:700;font-size:12px;color:var(--dim);
    background:rgba(255,255,255,.05);border:1px solid var(--bord)}
  .ibStep.on .ibNum{color:#fff;background:linear-gradient(135deg,var(--p2),var(--mag));border-color:transparent}
  .ibStep.past .ibNum{color:#04241c;background:var(--teal);border-color:transparent}
  .ibStep.past .ibNum i{font-size:13px}
  .ibStepTx{flex:1;min-width:0;font-size:12.5px;font-weight:700;line-height:1.3;color:var(--muted)}
  .ibStep.on .ibStepTx{color:var(--text)}

  .ib-side-foot{padding-top:18px;border-top:1px solid rgba(255,255,255,.07);
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.6px;
    text-transform:uppercase;color:var(--dim)}

  /* ---- правая колонка: карточка ---- */
  .ib-main{display:block}
  /* Точки и подпись-обещание на десктопе живут в левой колонке. */
  .ib-top .ib-dots,.ib-foot{display:none}
  .ib-top{position:absolute;top:26px;right:30px;margin:0}
  .ib-skip{font-size:13px}

  /* На десктопе карточка не прокручивается — и маску снимаем, иначе она
     растворяла бы её собственную нижнюю кромку. */
  .ib-card{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
    border-radius:var(--r-xl);overflow:hidden;flex:none;
    -webkit-mask-image:none;mask-image:none;
    background:var(--lg);border:1px solid var(--lg-brd);box-shadow:var(--shadow-pop)}
  /* Витрина внутри карточки — уже без своей рамки: рамка теперь у карточки. */
  .ibArt{height:auto;max-height:clamp(240px,32vh,300px);border-radius:0;border:0;border-bottom:1px solid var(--lg-brd);
    box-shadow:none;background:rgba(255,255,255,.02)}
  .ibrRing{width:84px;height:84px}
  .ibrIn i{font-size:34px}
  .ibrTx b{font-size:19px}
  .ibrTier{font-size:11.5px;padding:4px 10px}
  .ibprRow{font-size:13px;padding:9px 13px}
  .ibprOut{font-size:12px}
  .ibqTx{font-size:13px}
  .ibqChest{font-size:12.5px}
  /* Дрон на широком экране крупнее: это единственная карточка, где витрина
     сама и есть предмет разговора. */
  .ibpStage{width:190px;height:170px}
  .ibpPet{--s:124px}
  .ibpMk{font-size:11.5px}
  .ibpMks em{font-size:11px}
  .iblSide{max-width:170px;padding:20px 14px}
  .iblSide i{font-size:32px}

  .ibTx{padding:22px 26px 24px}
  .ibTitle{font-size:26px;margin-bottom:9px}
  .ibLead{font-size:14px;max-width:60ch}
  .ibFacts li{font-size:13px}

  .ib-acts{margin:18px 0 0}
  .ib-go{flex:none;min-width:230px;font-size:18px}
  /* Вторичное действие встаёт в ряд с главным: тянуть его через всю сцену
     незачем, а строки под кнопкой на широком экране нет. */
  .ib-alt{flex-basis:auto;margin:0}
}

/* Отключённая анимация — уважаем системную настройку: смена карточки остаётся
   проявлением без сдвига. */
@media (prefers-reduced-motion:reduce){
  .ib-card.in{animation:none}
  .ibDot{transition:none}
}