/* Подсказки при первом входе (tour.js): окошко вокруг настоящей кнопки, всё остальное притушено; крупный текст и кнопки */
.tour{position:fixed;inset:0;z-index:120;touch-action:none;overscroll-behavior:contain}
.tour.dim{background:rgba(0,0,0,.62)}
body.touring{overflow:hidden}
/* окошко едет к кнопке трансформом (центр → центр, tour.js place); новый размер встаёт сразу — ширину и высоту не анимирую */
.tour-hole{position:fixed;left:0;top:0;box-shadow:0 0 0 200vmax rgba(0,0,0,.62);outline:3px solid #FFFFFF;outline-offset:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-radius .35s}
.tour-hole[hidden]{display:none}
/* мягкая волна от окошка: глаз сам находит, куда смотреть */
.tour-hole::after{content:"";position:absolute;inset:-3px;border:3px solid #FFFFFF;border-radius:inherit;opacity:0;animation:tour-wave 1.8s ease-out infinite}
@keyframes tour-wave{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}

.tour-card{position:fixed;left:16px;right:16px;max-width:440px;margin:0 auto;padding:20px 20px 16px;border-radius:24px;background:var(--card);color:var(--label);
  box-shadow:0 18px 50px rgba(0,0,0,.35);outline:none;animation:tour-in .28s cubic-bezier(.2,.8,.2,1) both}
.tour-card.mid{top:50%;transform:translateY(-50%);animation-name:tour-in-mid}
@keyframes tour-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tour-in-mid{from{opacity:0;transform:translateY(calc(-50% + 8px))}to{opacity:1;transform:translateY(-50%)}}
.tour-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;color:var(--label2)}
.tour-x .ti{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--fill)}
.tour-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:12px;border-radius:16px;background:var(--tint);color:var(--link)}
.tour-ic .ti{width:30px;height:30px}
.tour-n{margin:0 48px 6px 0;font:600 15px/1.3 InterMM;color:var(--label2)}
.tour-card h2{margin-right:44px;font:750 22px/1.25 InterMM;text-wrap:balance}
.tour-text{margin-top:8px;font:500 18px/1.45 InterMM;color:var(--label);text-wrap:pretty}
.tour-nav{display:flex;gap:10px;margin-top:18px}
.tour-nav .btn.big{min-height:56px;font-size:18px}

@media (prefers-reduced-motion:reduce){
  .tour-hole,.tour-hole::after,.tour-card{transition:none;animation:none}
  .tour-card.mid{transform:translateY(-50%)}
}
/* шеф-маскот говорит подсказку: сбоку от заголовка, на вступлении — машет крупно */
.tour-chef{float:left;width:58px;margin:-4px 12px 4px -4px}
.tour-chef.big{float:none;width:92px;margin:-6px 0 6px}