/* =========================================================
   ДЕСКТОП-АДАПТАЦИЯ — «Крылатые герои земли Нижегородской»
   Подключается ПОСЛЕ styles.css и premium.css (перекрывает их в спорных местах).

   ПРИНЦИП: весь код этого файла — ТОЛЬКО внутри @media (min-width: 900px)
   (+ hover/pointer где нужно). Ниже 900px браузер эти правила не применяет →
   мобильная версия (основной сценарий, через QR) остаётся байт-в-байт прежней.

   Брейкпоинты: 900px (планшет-ландшафт/десктоп), 1280px (широкий десктоп).
   Токены/шрифты/текстуры — те же, что на мобилке (premium-фирстиль сохранён).

   ФАЗА 1 (этот блок): каркас — широкий фон-подложка вместо «телефона в пустоте»,
   экспозиционная рамка контентной колонки, sticky таб-бар (уходит от плавающей
   fixed-пилюли), клавиатурный фокус (:focus-visible), доступность.
   ========================================================= */

@media (min-width: 900px) {

  /* ---- Широкий фон-«зал»: тёмное окружение + мягкая виньетка + стальной верхний свет.
          Раньше на десктопе body был плоской заливкой, и колонка «висела» в пустоте.
          Теперь пустые поля читаются как затемнённый экспозиционный зал. ---- */
  html { background: #0c1117; }
  body {
    min-height: 100vh;
    background:
      radial-gradient(1100px 620px at 50% -6%, rgba(93,125,153,.16), transparent 60%),
      radial-gradient(125% 135% at 50% 32%, transparent 44%, rgba(5,8,12,.62) 100%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 2px, transparent 2px 4px),
      #0c1117;
    background-attachment: fixed;
  }

  /* ---- Контентная колонка как «подсвеченный экспозиционный лист» над тёмным залом.
          Тонкая грань + большая мягкая тень отделяют панель от фона. ---- */
  .pscreen,
  .quest-screen,
  .screen {
    box-shadow:
      0 0 0 1px rgba(52,70,90,.55),
      0 34px 90px rgba(0,0,0,.55);
  }

  /* Нижний таб-бар пока оставляем как на мобилке (position:fixed, всегда виден —
     надёжно, без подрезки). Полноценная десктоп-навигация (верхняя панель вместо
     таб-бара) — отдельная Фаза 4; на широком экране колонка станет шире в Фазе 2,
     и бар с ней согласуется. */

  /* ---- Клавиатурный фокус: латунное кольцо (на мобилке фокус-стилей не было вовсе).
          :focus-visible срабатывает в основном при навигации с клавиатуры — ровно
          то, что нужно десктопу; клик мышью кольцо не рисует. ---- */
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible,
  .pcard:focus-visible,
  .card:focus-visible,
  .ptab:focus-visible,
  .opt:focus-visible,
  .match-item:focus-visible,
  .q-btn:focus-visible,
  .vp-track:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: 6px;
  }
  /* элементы со своим скруглением — кольцо по форме */
  .pcard:focus-visible,
  .card:focus-visible { border-radius: 16px; }
  .ptab:focus-visible { border-radius: 12px; }

}

/* =========================================================
   ФАЗА 2 — ШИРОКИЙ ХАБ + ЧИТАЕМЫЕ КОЛОНКИ
   Хаб/квест-хаб/достижения/архив (все на .pscreen) расширяются в галерейную
   панель; карточки раскладываются в 2 колонки; hero крупнее; таб-бар
   становится футером во всю ширину колонки (уходит от плавающей 560px пилюли).
   ========================================================= */
@media (min-width: 900px) {

  /* ---- Панель шире: галерейные поля по бокам вместо телефонной колонки ---- */
  .pscreen,
  .quest-screen { max-width: 1080px; }
  .pwrap { padding: 0 32px; }

  /* ---- Hero крупнее и «баннернее» на широком экране ---- */
  .phero-img { height: clamp(320px, 32vw, 460px); }
  .ptitle { font-size: clamp(42px, 4.4vw, 58px); }
  /* подпись под hero — держим меру чтения, не тянем на всю ширину */
  .psub { max-width: 48ch; }

  /* ---- Карточки экспонатов/видео/квестов — 2 колонки.
          Секции с одной карточкой (мини-игра, «Квесты») тянутся на всю ширину. ---- */
  .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .plist > .pcard:only-child { grid-column: 1 / -1; }

  /* ---- Достижения: список в 2 колонки (ряды широкие — плотнее и живее) ---- */
  .ach-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* ---- Архив-коллекция: больше колонок ---- */
  .arch-grid { grid-template-columns: repeat(4, 1fr); }

  /* ---- Таб-бар: футер во всю ширину колонки (sticky, всегда виден при скролле,
          в потоке панели — без плавающей 560px пилюли и без containing-block фокусов). ---- */
  .pscreen { padding-bottom: 0; }
  .ptabbar {
    position: sticky;
    left: auto; transform: none;
    width: auto; max-width: none;
    margin-top: auto;
    border-radius: 0;
  }
}

@media (min-width: 1280px) {
  .pscreen,
  .quest-screen { max-width: 1180px; }
  /* карточки экспонатов горизонтальные и широкие — 2 колонки остаются оптимумом */
  .arch-grid { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================
   ФАЗА 3 — ИММЕРСИВ ВО ВСЮ МОЩЬ (двухпанельник) + КРУПНОЕ ВИДЕО

   Боковой рельс сцены живёт в DOM всегда, но показывается только в two-pane.
   (Базовое правило — вне медиазапроса: элемент новый, мобилку не меняет.)
   ========================================================= */
.scene-rail { display: none; }

/* Вход без QR: на десктопе — приветствие вместо «наведите камеру на QR».
   Обе строки в DOM; переключаются по ширине (базово, на мобилке — QR-строка). */
.psub-desktop { display: none; }
@media (min-width: 900px) {
  .psub-mobile { display: none; }
  .psub-desktop { display: inline; }
}

/* ---- Крупный видео-плеер на широком экране (безопасно для любого тача/мыши) ---- */
@media (min-width: 900px) {
  .screen-video { max-width: none; box-shadow: none; }
  .vp-stage { max-width: min(92vw, 960px); }
  .vp-video { max-height: 82vh; }
}

/* ---- Двухпанельные сцены — ТОЛЬКО мышиный десктоп ≥1024px.
        Тач-устройства (телефоны/планшеты, в т.ч. ландшафт ≥900) остаются в
        полноэкранном иммерсиве со сквозной камерой (мобильный сценарий). ---- */
@media (min-width: 1024px) and (pointer: fine) and (hover: hover) {

  /* оболочка сцены — во всю ширину, ряд [сцена | рельс], без экспозиционной рамки */
  .screen-immersive,
  .screen-map {
    max-width: none;
    flex-direction: row;
    height: 100vh; height: 100dvh;
    box-shadow: none;
  }

  /* СЦЕНА — основная площадь (крупный 3D/письмо/кабина/карта) */
  .screen-immersive > model-viewer,
  .screen-immersive > .stage,
  .screen-map > .stage.map {
    flex: 1 1 auto; min-width: 0;
    height: 100vh; height: 100dvh;
    aspect-ratio: auto; border: 0; border-radius: 0;
  }

  /* БОКОВОЙ РЕЛЬС — справка + видео (заменяет модалку «Подробнее») */
  .scene-rail {
    flex: 0 0 clamp(360px, 30vw, 460px);
    height: 100vh; height: 100dvh; min-height: 0;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #1c2632, #121a23);
    border-left: 1px solid var(--panel-line);
    box-shadow: -18px 0 44px rgba(0,0,0,.42);
    animation: fade .35s ease;
  }
  .scene-rail-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: clamp(30px, 5vh, 56px) 32px calc(32px + var(--safe-bottom));
  }
  /* внутри рельса .detail-inner тянется на всю ширину (модальные паддинги не нужны) */
  .scene-rail .detail-inner { max-width: none; margin: 0; padding: 0; }
  .scene-rail .detail-head { text-align: left; }
  .scene-rail-video {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
    padding: 12px 22px; border-radius: 999px; text-decoration: none;
    font-family: var(--font-ui); font-weight: 600; font-size: 14px;
    color: #1a130a; background: var(--brass);
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
  }
  .scene-rail-video .srv-ic { font-size: 12px; }
  .scene-rail-video:hover { filter: brightness(1.05); }

  /* модалка/плавающие кнопки не нужны — справка всегда в рельсе */
  .screen-immersive .scene-actions,
  .screen-immersive .detail-sheet { display: none; }

  /* именная плашка портрета — к низу сцены (кнопок под ней на десктопе нет) */
  .screen-immersive model-viewer .mv-plate { bottom: calc(24px + var(--safe-bottom)); }

  /* КАРТА: навигатор-карта из нижнего листа → полноэкранный правый рельс */
  .screen-map > .map-dock {
    flex: 0 0 clamp(360px, 30vw, 460px);
    height: 100vh; height: 100dvh;
  }
  .screen-map .map-card.pinned {
    max-height: none; height: 100%;
    border-top: 0; border-left: 1px solid var(--panel-line); border-radius: 0;
    box-shadow: -18px 0 44px rgba(0,0,0,.42);
  }
}