/* ============================================================
   wide_mode.css — «широкий режим» для планшетов и десктопа.
   Подключается ПОСЛЕ styles.css. Все правила строго под
   html.lmx-wide / html.lmx-desk, поэтому на телефонах (≤420px,
   где класс не ставится) этот файл не меняет НИ ОДНОГО пикселя.

   Этап 0: рамка-«папка» вместо телефона + дыхание контента.
   (Этап 1 — двухколоночные раскладки — будет дописан ниже
   в этом же файле, отдельным блоком.)
   ============================================================ */

/* ---------- Сцена ---------- */
/* align-items:flex-start + небольшой отступ сверху: на iPad центрирование
   по vh (который в мобильном Safari не учитывает панели браузера) давало
   огромный пустой зазор над рамкой. */
html.lmx-wide .stage{
  align-items: flex-start;
  padding: 18px 20px 24px;
}

/* ---------- Рамка приложения: телефон → папка дела ---------- */
/* Планшет (портрет): ~720px реальной ширины.
   Вторая строка height с dvh перекрывает первую в браузерах, где dvh
   поддержан (iPadOS 16+, все актуальные) — это высота ВИДИМОЙ области. */
html.lmx-wide .phone{
  width: min(96vw, 720px);
  height: min(96vh, 1080px);
  height: min(96dvh, 1080px);
  min-height: 560px;
  border-radius: 18px;
  /* Страховка от старого scale-патча, если где-то остался кэш */
  transform: none !important;
}

/* Десктоп / планшет альбом: ~880px */
html.lmx-desk .phone{
  width: min(90vw, 880px);
  height: min(94vh, 1080px);
  height: min(94dvh, 1080px);
}

/* ---------- Шапка ---------- */
html.lmx-wide .topbar{
  padding: 16px 22px 12px;
}
html.lmx-wide .brand{
  font-size: 20px;
}
html.lmx-desk .brand{
  font-size: 22px;
}
html.lmx-wide .iconbtn{
  width: 42px;
  height: 42px;
}

/* Экраны начинаются чуть ниже — под подросшую шапку */
html.lmx-wide .screen{
  inset: 70px 0 0 0;
}

/* ---------- Дыхание контента ---------- */
html.lmx-wide .view{
  padding: 20px 26px 28px;
}
html.lmx-desk .view{
  padding: 24px 34px 32px;
}

/* Заголовки чуть крупнее — площадь позволяет */
html.lmx-wide .h1{
  font-size: 30px;
}
html.lmx-desk .h1{
  font-size: 34px;
}

/* ---------- Помощь / подсказки сбоку сцены ---------- */
html.lmx-wide .help{
  max-width: 320px;
}

/* ---------- Карта: выше окно на больших экранах ---------- */
/* В styles.css высота окна карты — clamp(340px, 62vh, 580px): телефонная
   норма. На широкой рамке карта «вписана по ширине» становится выше окна,
   и видна лишь горизонтальная полоса. Даём окну больше вертикали. */
html.lmx-wide .mapViewport{
  height: clamp(420px, 72vh, 880px);
}

/* Фото локации: телефонная лента 170px на широком экране режет снимки
   в узкую полосу. Даём высоту и делаем кадры компактнее по ширине,
   чтобы в ленте было видно соседний снимок. */
html.lmx-wide .mapPanel__photo{
  height: 320px;
}
html.lmx-wide .mapGallery__item{
  flex: 0 0 64%;
  height: 340px;
}

/* ============================================================
   ЭТАП 1: раскладки широкого режима.
   Всё по-прежнему строго под html.lmx-wide — телефоны не задеты.
   ============================================================ */

/* ---------- Каталоги: вертикальные карточки в 2 колонки ---------- */
/* Серии подряд идущих карточек оборачивает wide_mode.js в .lmxCards
   (см. wrapCardRuns) — каждая секция каталога получает СВОЮ сетку,
   заголовки/кнопки/разделители между сериями не участвуют. */
html.lmx-wide .lmxCards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

/* Нечётная последняя карточка серии — в т.ч. единственная (обучение,
   дело дня, баннер клуба) — во всю ширину, горизонтальной «featured»:
   обложка слева, текст справа. Ничего не «повисает» в полколонки. */
html.lmx-wide .lmxCards > .caseCard:last-child:nth-child(odd){
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
html.lmx-wide .lmxCards > .caseCard:last-child:nth-child(odd) .polaroid{
  width: 260px;
  height: 156px;
  flex-shrink: 0;
}

/* Сама карточка: обложка сверху во всю ширину, под ней — название,
   плашки (цена, возраст, сложность) и кусочек анонса. */
html.lmx-wide .caseCard{
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  margin-bottom: 0 !important; /* сетка даёт свой gap; гасим inline-отступы */
}
html.lmx-wide .caseCard .polaroid{
  width: 100%;
  height: 190px;
}
html.lmx-desk .caseCard .polaroid{
  height: 210px;
}
html.lmx-wide .caseCard__body{
  padding-top: 0;
}
html.lmx-wide .caseCard__title{
  font-size: 17px;
}

/* ---------- Досье агента: блоки в две «газетные» колонки ---------- */
/* Все секции досье (уровень, статистика, профиль детектива, значки,
   питомец, вещдоки, шпаргалки, кнопки) — это .dossierBlock внутри
   .dossierBody. CSS-колонки раскладывают их плотной мозаикой без
   изменения app.js; порядок чтения — сверху вниз по колонкам. */
html.lmx-wide .dossierBody{
  column-count: 2;
  column-gap: 16px;
  padding: 10px 10px 8px;
}
html.lmx-wide .dossierBody > *{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Во всю ширину — только шапка с данными+фото. Спаннер в середине потока
   (как раньше «Уровень») заставляет колонки дробить соседний блок и
   обрезать заголовки, поэтому «Уровень» теперь обычный блок колонки. */
html.lmx-wide .dossierBody > .dossierMain{
  column-span: all;
}

/* Карточка «ДАННЫЕ» + фото: фото крупнее, как настоящий снимок в деле */
html.lmx-wide .dossierMain{
  grid-template-columns: 1fr 230px;
  gap: 18px;
}
html.lmx-wide .dossierPhoto .polaroid{
  width: 230px;
  height: 288px;
}

/* ---------- Рейтинг: строки плотнее и весомее ---------- */
html.lmx-wide .rankRow{
  padding: 12px 18px;
}
html.lmx-wide .rankScore{
  font-size: 20px;
}

/* ---------- Спайк (информатор): крупный портрет, компактные плашки ---------- */
html.lmx-wide .spikeGrid{
  grid-template-columns: 1fr 300px;
  gap: 18px;
}
html.lmx-wide .spikePortrait img{
  height: 340px;
}
html.lmx-wide .spikeGrid .labelBlock{
  padding: 34px 14px 10px; /* верхние 34px — место под «ленту»-ярлык */
}

/* ---------- Команда: ровная раскладка ---------- */
/* Grid выравнивает ряды по самому высокому блоку, поэтому высокие
   блоки (участники, награды) идут ВО ВСЮ ШИРИНУ с внутренней сеткой
   2-в-ряд (становятся вдвое ниже), а компактные (профиль детектива +
   активировать награду) спарены между собой через order. */
html.lmx-wide #teamRoot,
html.lmx-wide #teamProfileRoot .pad{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  align-items: start;
}

/* Во всю ширину: шапки, участники, настройки, награды, футер */
html.lmx-wide #teamRoot > .h1,
html.lmx-wide #teamRoot > .subbar,
html.lmx-wide #teamRoot > .subbar + .card,
html.lmx-wide #teamRoot > .notice,
html.lmx-wide #teamRoot > #teamMembersCard,
html.lmx-wide #teamRoot > .card:has(#teamLogoInput),
html.lmx-wide #teamRoot > .card:has(.achList),
html.lmx-wide #teamRoot > .rowBtns,
html.lmx-wide #teamRoot > .toast,
html.lmx-wide #teamProfileRoot .pad > .pageHead,
html.lmx-wide #teamProfileRoot .pad > .pageHead + .card,
html.lmx-wide #teamProfileRoot .pad > .card:has(.achList),
html.lmx-wide #teamProfileRoot .pad > .rowBtns,
html.lmx-wide #teamProfileRoot .pad > .toast{
  grid-column: 1 / -1;
}

/* Порядок в широком режиме: профиль ↔ активировать — парой */
html.lmx-wide #teamRoot > .dossierBlock{ order: 1; }
html.lmx-wide #teamRoot > .card:has(#achCodeInputTeam){ order: 2; }
html.lmx-wide #teamRoot > #teamMembersCard{ order: 3; }
html.lmx-wide #teamRoot > .card:has(#teamLogoInput){ order: 4; }
html.lmx-wide #teamRoot > .card:has(.achList){ order: 5; }
html.lmx-wide #teamRoot > .rowBtns{ order: 8; }
html.lmx-wide #teamRoot > .toast{ order: 9; }

/* Участники: список парами внутри карточки */
html.lmx-wide #teamMembersCard{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
html.lmx-wide #teamMembersCard > .cardTitle,
html.lmx-wide #teamMembersCard > .hr,
html.lmx-wide #teamMembersCard > .rowBtns{
  grid-column: 1 / -1;
}
html.lmx-wide #teamMembersCard > .rankRow{
  margin: 0;
}

/* Награды: значки парами внутри карточки (и у своей команды,
   и в профайле из рейтинга) */
html.lmx-wide #teamRoot .achList,
html.lmx-wide #teamProfileRoot .achList{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
html.lmx-wide #teamRoot .achList > .achCard,
html.lmx-wide #teamProfileRoot .achList > .achCard{
  margin: 0;
}

/* ============================================================
   ГЛОБАЛЬНЫЕ ПРАВИЛА (работают и на телефоне, и на десктопе):
   дыхание между блоками, слипавшимися на мобильной вёрстке.
   ============================================================ */

/* Баннеры хаба (клуб → зал детективов): на телефоне идут столбиком —
   даём зазор между ними; на широких экранах зазор даёт grid-gap. */
.homeBanner + .homeBanner{
  margin-top: 24px;
}
html.lmx-wide .homeBanner + .homeBanner{
  margin-top: 0;
}

/* Жёлтая CTA-кнопка перед заголовком следующей секции («ВСЕ РАССЛЕДОВАНИЯ»
   → «НЕРАСКРЫТЫЕ ДЕЛА» и т.п.) — добавляем воздуха над заголовком. */
.cta + .subbar,
.cta + .hr + .subbar,
.homeBanners + .hr + .subbar{
  margin-top: 22px;
}

/* ---------- Хаб: клуб + зал детективов парой ---------- */
html.lmx-wide .homeBanners{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  align-items: start;
}
/* Если включён только один баннер — во всю ширину */
html.lmx-wide .homeBanners > .homeBanner:only-child{
  grid-column: 1 / -1;
}
/* Карточка внутри половинки баннера — всегда вертикальная,
   без «featured»-переворота одиночных карточек */
html.lmx-wide .homeBanner .caseCard{
  flex-direction: column !important;
  align-items: stretch !important;
}
html.lmx-wide .homeBanner .caseCard .polaroid{
  width: 100% !important;
  height: 180px !important;
}

/* ---------- Мои питомцы: крупные портреты в 2 колонки ---------- */
/* Разметка карточек — на inline-стилях (телефонная строка с фото 76px),
   поэтому здесь переопределяем с !important, строго под html.lmx-wide. */
html.lmx-wide .mpList{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
html.lmx-wide .mpCard{
  flex-direction: column !important;
  align-items: stretch !important;
}
html.lmx-wide .mpMedia{
  width: 100% !important;
  height: 230px !important;
  font-size: 72px; /* заглушка-иконка, если у питомца нет картинки */
}
/* Нечётный последний питомец — во всю ширину, портрет слева */
html.lmx-wide .mpList > .mpCard:last-child:nth-child(odd){
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: center !important;
}
html.lmx-wide .mpList > .mpCard:last-child:nth-child(odd) .mpMedia{
  width: 240px !important;
  height: 190px !important;
  flex-shrink: 0;
}

/* Вертикальный ритм: гасим inline margin-top карточек */
html.lmx-wide #teamRoot > .card,
html.lmx-wide #teamRoot > .dossierBlock,
html.lmx-wide #teamRoot > .rowBtns,
html.lmx-wide #teamProfileRoot .pad > .card,
html.lmx-wide #teamProfileRoot .pad > .dossierBlock,
html.lmx-wide #teamProfileRoot .pad > .rowBtns{
  margin-top: 0 !important;
  margin-bottom: 14px;
}

/* ============================================================
   ЭТАП 2: «Стол детектива» — лор-оформление вокруг рамки.
   Только CSS: градиенты, псевдоэлементы, ноль новых ассетов
   и ноль изменений в app.js. Телефоны (≤420px) не задеты.
   ============================================================ */

/* ---------- Стол: тёплая кожа + виньетка поверх bg.jpg ---------- */
html.lmx-wide body{
  background:
    radial-gradient(1400px 900px at 68% 12%, rgba(242,196,0,.05), transparent 60%),
    radial-gradient(1800px 1200px at 50% 115%, rgba(0,0,0,.8), transparent 55%),
    linear-gradient(160deg, rgba(26,20,10,.92), rgba(12,10,7,.94) 55%, rgba(7,6,4,.96)),
    url("assets/bg.jpg") center/cover fixed no-repeat;
}

/* Папка всегда поверх настольного декора (кольцо/штамп частично
   уходят ПОД неё, как бумаги на столе) */
html.lmx-wide .stage{
  position: relative;
  z-index: 1;
}

/* ---------- Рамка — «папка дела»: тёплый край и глубокая тень ---------- */
html.lmx-wide .phone{
  border-color: rgba(242,196,0,.28);
  box-shadow:
    0 30px 70px rgba(0,0,0,.75),
    0 8px 22px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Скотч на верхних углах папки (внутри рамки, кликам не мешает) */
html.lmx-wide .phone::before,
html.lmx-wide .phone::after{
  content: '';
  position: absolute;
  top: -14px;
  width: 92px;
  height: 34px;
  background: linear-gradient(180deg, rgba(242,214,120,.20), rgba(242,214,120,.12));
  border: 1px solid rgba(242,214,120,.12);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 6;
}
html.lmx-wide .phone::before{ left: 26px;  transform: rotate(-8deg); }
html.lmx-wide .phone::after{  right: 26px; transform: rotate(7deg); }

/* ---------- Декор на столе рядом с папкой (только широкие мониторы,
   чтобы не налезать на рамку) ---------- */
@media (min-width: 1280px){
  /* Кофейное кольцо от кружки — справа от папки */
  html.lmx-desk body::before{
    content: '';
    position: fixed;
    right: 5vw;
    bottom: 12vh;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 9px solid rgba(122, 82, 34, .15);
    box-shadow:
      inset 0 0 10px rgba(122, 82, 34, .10),
      0 0 14px rgba(0,0,0,.2);
    filter: blur(.6px);
    pointer-events: none;
    z-index: 0;
  }
  /* Штамп «СОВЕРШЕННО СЕКРЕТНО» — слева на столе */
  html.lmx-desk body::after{
    content: 'СОВЕРШЕННО\A СЕКРЕТНО';
    white-space: pre;
    position: fixed;
    left: 3.5vw;
    top: 22vh;
    padding: 14px 20px;
    border: 3px solid rgba(200, 60, 50, .28);
    border-radius: 8px;
    color: rgba(200, 60, 50, .30);
    font-family: var(--mono, monospace);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: .22em;
    line-height: 1.35;
    text-align: center;
    transform: rotate(-11deg);
    mask-image: radial-gradient(140% 120% at 30% 40%, #000 55%, transparent 98%);
    -webkit-mask-image: radial-gradient(140% 120% at 30% 40%, #000 55%, transparent 98%);
    pointer-events: none;
    z-index: 0;
  }
}