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

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

/* ---------- Сцена ---------- */
html.lmx-wide .stage{
  padding: 24px 20px;
}

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

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

/* ============================================================
   ЭТАП 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 — место под «ленту»-ярлык */
}

/* ============================================================
   ЭТАП 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;
  }
}