/* Стили экрана работы боевой страницы.
 *
 * Всё ограничено `#screen` намеренно. Исходная таблица стенда самостоятельная: у неё
 * свой `:root`, сброс `*` и общие имена `h1`, `h2`, `.btn`, `.screen`. На боевой
 * странице `.screen` — класс ОБОИХ экранов, и незакрытое правило переломало бы
 * загрузку. Переменные берутся сайтовые, свои не заводятся.
 */
#screen { position: relative }
#screen h1 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 24px }
#screen h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em;
             color: var(--fg-muted, #8A8480); margin: 0 0 12px }
#screen .cols { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start }
#screen .shot { margin: 0 }
#screen .shot img { display: block; width: 100%; height: 400px; object-fit: cover;
                    border-radius: 3px; background: var(--border-default, #E4DED5) }
#screen .shot figcaption { margin-top: 8px; font-size: 13px; color: var(--fg-muted, #8A8480) }
#screen .feed { min-height: 400px }
#screen .feed ol { list-style: none; margin: 0; padding: 0 }
#screen .feed li { display: flex; gap: 12px; padding: 7px 0;
                   border-bottom: 1px solid var(--border-default, #E4DED5); font-size: 15px }
#screen .feed li i { flex: 0 0 62px; font-style: normal; color: var(--fg-muted, #8A8480);
                     font-variant-numeric: tabular-nums }
#screen .feed li[data-unknown] span::after { content: " ·"; color: var(--fg-accent, #8F3D42) }
#screen .clock { margin: 24px 0 0; font-size: 14px; color: var(--fg-muted, #8A8480) }
#screen .clock b { color: var(--fg-default, #171414); font-variant-numeric: tabular-nums }
#screen .acts { margin-top: 16px; display: flex; gap: 12px }
#screen .result { margin-top: 40px; padding: 20px;
                  border: 1px solid var(--border-default, #E4DED5); border-radius: 3px; background: #fff }
#screen .result h2 { font-size: 22px; text-transform: none; letter-spacing: -.01em;
                     color: var(--fg-default, #171414) }
#screen .result dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0 }
#screen .result dt { color: var(--fg-muted, #8A8480); font-size: 14px }
#screen .result dd { margin: 0 }
#screen .feed li.touched { animation: touch .9s var(--ease, ease-out) }
@keyframes touch { 0% { background: rgba(143,61,66,.16) } 100% { background: transparent } }

/* Прокрутка останавливается НИЖЕ прилипшей шапки. Без этого `scrollIntoView`
   подводит строку ленты и карточку под неё, и человек смотрит на пустое место. */
#screen .feed li, #screen .result { scroll-margin-top: calc(var(--header-height, 64px) + 16px) }

/* Мобильная раскладка: снимок и лента в одну колонку. */
@media (max-width: 720px) {
  #screen .cols { grid-template-columns: 1fr; gap: 20px }
  #screen .shot img { height: 260px }
  #screen .feed { min-height: 0 }
}

/* Запас под карточкой: маскот финала стоит у неё, и без запаса ему остаётся только
   подвал. Число ЗАМЕРЕНО на боевой странице: с запасом 220 фигура кончалась на 785, а
   подвал начинался на 716 — ноги ложились на ссылки «Как это работает» и
   «Политика обработки». Не хватало 69 px; 320 даёт их и запас на строку-другую
   в карточке. По виду фигуры это число угадать не вышло дважды. */
#screen { padding-bottom: 320px }

/* Виджеты обогащения: похожие вина со ссылкой на «Своё Вино» и магазины. Ссылка
   занимает всю карточку — щёлкают по вину, а не по слову «подробнее». */
#screen .result .portal { margin-top: 16px }
#screen .result .similar, #screen .result .shops { margin-top: 24px }
#screen .result h3 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
       color: var(--fg-muted, #8A8480); margin: 0 0 10px }
#screen .result .similar ul { list-style: none; margin: 0; padding: 0;
                display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
#screen .result .similar a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 10px;
               border: 1px solid var(--border-default, #E4DED5); border-radius: 6px; color: inherit; text-decoration: none;
               transition: border-color .15s }
#screen .result .similar a:hover { border-color: #8F3D42 }
#screen .result .similar img { width: 100%; height: 120px; object-fit: contain; margin-bottom: 4px }
#screen .result .similar b, #screen .result .shops b { font-weight: 600; font-size: 15px; line-height: 1.3 }
#screen .result .similar i, #screen .result .shops i { font-style: normal; font-size: 13px; line-height: 1.35; color: var(--fg-muted, #8A8480) }
#screen .result .shops ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
#screen .result .shops a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
             padding: 10px 12px; border: 1px solid var(--border-default, #E4DED5); border-radius: 6px;
             color: inherit; text-decoration: none }
#screen .result .shops a:hover { border-color: #8F3D42 }
#screen .result .shops i.ok { color: #426B50 }
@media (max-width: 720px) {
  #screen .result .similar ul { grid-template-columns: repeat(2, 1fr) }
  #screen .result .shops a { flex-direction: column; gap: 2px }
}