/* =====================================================================
   mobile.css — телефон как игра.
   ---------------------------------------------------------------------
   Отступы под чёлку и полоску Home, нажатие без задержки и серой
   вспышки, размеры под палец, экран «поверните телефон» в ландшафте,
   режим запуска с домашнего экрана (PWA, см. manifest.json и
   js/mobile.js).

   ПОДКЛЮЧАЕТСЯ ПОСЛЕДНИМ (main.html) и только дополняет остальные
   файлы: одноимённое правило отсюда побеждает за счёт порядка, а не
   специфичности, — так его проще найти и снять.
   ===================================================================== */

/* ---------- safe-area: чёлка, Dynamic Island, полоска Home ----------
   env() отдаёт ненулевые значения только при viewport-fit=cover (meta
   viewport в main.html). Без него страница не заходит под чёлку, и все
   отступы ниже — нули: правила безвредны на любом экране. */
:root{
  --sa-t:env(safe-area-inset-top,0px);
  --sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);
}
header.site-head{padding-top:var(--sa-t)}
.wrap{
  padding-left:max(clamp(10px,2.4vw,24px),var(--sa-l));
  padding-right:max(clamp(10px,2.4vw,24px),var(--sa-r));
}
/* Окна на весь экран: содержимое не должно упираться в чёлку сверху и
   в полоску Home снизу. */
.au-backdrop,.tg-backdrop,.pf-ask-backdrop{
  padding-top:calc(20px + var(--sa-t));
  padding-bottom:calc(20px + var(--sa-b));
}
.lg-cookie{bottom:calc(18px + var(--sa-b))}
.sbs-counter{bottom:calc(20px + var(--sa-b))}

/* ---------- нажатие как в игре ----------
   manipulation снимает задержку в треть секунды, которую браузер держит
   ради двойного тапа, — но только на кнопках и карточках, а не на всей
   странице: приближение двойным тапом по тексту остаётся (см. шапку
   css/site.css). tap-highlight гасит серую вспышку Android и iOS поверх
   нарисованной кнопки; user-select — случайное выделение подписи при
   удержании. Реквизиты, промокоды и ссылки живут в других элементах и
   выделяются как прежде. */
button,[role=button],.nm-item,.bs-card,.free-card,.hud-act,.auth-btn,
.profile-btn,.ug-btn,.nav-burger,.count-btn,.au-provider{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.bs-card,.free-card,.site-head,.hud,.nm-item,.count-btn,.au-provider,.sbs-root,.rot-hint{
  -webkit-user-select:none;user-select:none;
}
/* Резиновый отскок страницы и «потяни, чтобы обновить» — не для игры:
   на витрине за краем ничего нет, а случайная перезагрузка посреди
   открытия ящика обидна. */
html,body{overscroll-behavior-y:none}

/* ---------- под палец ----------
   Площадь нажатия растёт, картинка кнопки — нет: расширяется невидимая
   область ::after, как это уже сделано у «+»/«−» баланса в site.css
   (там же объяснён шов между ними — правила шва остаются в силе). */
@media (pointer:coarse){
  .hud-act::after{inset:-11px}
  .nm-sw-opt{min-height:40px;padding:8px 12px}
  .count-btn{position:relative}
  .count-btn::after{content:"";position:absolute;inset:-5px}
  .nav-burger,.auth-btn{min-height:40px}
}

/* ---------- кегль не ниже читаемого ----------
   Подписи набраны долями ширины карточки (cqw) и на узком экране
   ужимаются. Нижняя граница — чтобы имя не превращалось в штрих на
   самых маленьких телефонах; на обычных значения совпадают с прежними. */
.bs-name{font-size:max(11px,8.75cqw)}
.bs-card[data-case="ultrabox"] .bs-name{font-size:max(9.5px,6.5cqw)}
.free-title{font-size:max(10.5px,8.6cqw)}
.ic-name{font-size:max(10px,11cqw)}

/* ---------- полоса о cookie на телефоне ----------
   На iPhone SE полоса занимала треть экрана и закрывала карточки. Текст
   тот же, набор плотнее, кнопка уходит в правый нижний угол. */
@media (max-width:640px){
  .lg-cookie{
    width:calc(100% - 16px);padding:10px 12px 11px;gap:6px 10px;
    border-width:2px;border-radius:14px;
  }
  .lg-cookie p{flex-basis:100%;font-size:.74rem;line-height:1.4}
  .lg-cookie-ok{margin-left:auto;padding:8px 18px 9px;font-size:.88rem}
}

/* ---------- высота экрана: видимая, а не «с адресной строкой» ----------
   100vh в Safari на iPhone считается без учёта адресной строки, и
   сцена, набранная в vh, не влезала в видимую часть. dvh — высота
   того, что видно прямо сейчас; браузеры без него оставляют прежние vh. */
body{min-height:100dvh}
@media (max-width:640px){
  .sbs-stagearea{height:52dvh}
  .sbs-artwrap{width:min(36dvh,240px);height:min(36dvh,240px)}
}

/* ---------- ландшафт на телефоне: «поверните» ----------
   Сайт набран под вертикальный экран, как мобильная игра: в ландшафте
   ящик уезжает за нижний край, а шапка занимает треть высоты. Вместо
   второй вёрстки — просьба повернуть телефон, как делают игры. Только
   на сенсорных экранах малой высоты: ноутбук с узким окном и планшет
   под это не попадают. */
.rot-hint{
  display:none;position:fixed;inset:0;z-index:200005;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px;text-align:center;color:#fff;
  background:rgba(3,12,48,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.rot-hint p{
  margin:0;max-width:22ch;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.25rem;letter-spacing:.04em;line-height:1.25;
  text-shadow:0 3px 0 #000e3c;
}
.rot-phone{
  width:34px;height:60px;border:4px solid #fff;border-radius:9px;
  box-shadow:0 0 0 3px #000e3c, inset 0 0 0 2px #000e3c;
  animation:rot-turn 1.8s ease-in-out infinite;
}
@keyframes rot-turn{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .rot-hint{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .rot-phone{animation:none;transform:rotate(-90deg)}
}

/* ---------- запуск с домашнего экрана (PWA) ----------
   В standalone нет адресной строки, и статусная полоса телефона
   рисуется поверх страницы (black-translucent в main.html): шапке
   нужен отступ хотя бы под неё. Пункт «Установить приложение» тут не
   нужен — оно уже установлено. */
@media (display-mode:standalone){
  header.site-head{padding-top:max(var(--sa-t),10px)}
  .nm-item[data-menu="install"]{display:none}
}

/* =====================================================================
   МЕГАЯЩИК НА ВЕРТИКАЛЬНОМ ТЕЛЕФОНЕ
   ---------------------------------------------------------------------
   Два экрана сцены Mega Box (css/megabox.scene.css) сняты с кадров
   1280×720 и на вертикальном телефоне ужимаются до трети: итог
   «ПОЛУЧЕНО:» считает всё от ширины карточки --cw, которая на 390 px
   упирается в нижний предел 52 px, а экран звёздной силы вписывает
   кадр 1280×720 в окно целиком — на 390 px это полоса высотой 220 px
   посреди пустого экрана. Остальные экраны набраны в vmin и на
   телефоне в порядке.

   Здесь для портретных телефонов заданы свои пропорции: у итога
   карточка — четверть ширины экрана (три в ряд), у звёздной силы —
   вертикальная композиция: звезда сверху, заголовки над ней, панель
   с описанием под ней. Координаты внутри кадра переопределены в тех
   же процентах, что и в оригинале, — кадр только повёрнут: 720×1280.
   Анимации сцены (подлёт звезды, выезд заголовков) при этом те же —
   они двигают слои целиком, а не координаты внутри.
   ===================================================================== */
@media (orientation:portrait) and (max-width:640px){
  /* ---- итог «ПОЛУЧЕНО:» ---- */
  .sbs-root .mbx-sum{--cw:clamp(84px,26vw,140px)}
  .mbx-sum-top{
    flex-basis:62%;
    padding-top:calc(var(--sa-t) + 4vh);
  }
  .mbx-sum-ctl{padding-bottom:calc(12px + var(--sa-b))}
  /* Кнопки — по верху: подпись под «Забрать» на узком экране идёт в две
     строки, и при выравнивании по низу она поднимала бы саму кнопку. */
  .mbx-sum-acts{align-items:flex-start}
  .mbx-sum-note{max-width:calc(var(--cw) * 1.6)}

  /* ---- звёздная сила: кадр 720×1280 ---- */
  .sbs-root .mbx-sp{--u:min(0.13888889vw, 0.078125vh)}
  .sbs-root .mbx-sp-frame{width:calc(720 * var(--u));height:calc(1280 * var(--u))}
  .sbs-root .mbx-sp .mbx-sp-badge,
  .sbs-root .mbx-sp.is-final .mbx-sp-badge,
  .sbs-root .mbx-sp.is-settled .mbx-sp-badge{left:50%;top:40%;width:46%}
  .sbs-root .mbx-sp-price{left:50%;top:58%;font-size:calc(52 * var(--u))}
  .sbs-root .mbx-sp-kicker,
  .sbs-root .mbx-sp-title,
  .sbs-root .mbx-sp-name{left:50%}
  .sbs-root .mbx-sp-kicker{top:9%;font-size:calc(40 * var(--u))}
  .sbs-root .mbx-sp-title{top:15.5%;font-size:calc(64 * var(--u))}
  .sbs-root .mbx-sp-name{top:21.5%;font-size:calc(46 * var(--u))}
  .sbs-root .mbx-sp-card{left:5%;top:66%;width:90%;height:24%}
}