/* LOOTHOOD — core v1 · фундамент для всех экранов
   ------------------------------------------------------------------
   Подключается ПОСЛЕ loothood-hunt-v1.css и ДО экранных файлов.
   Здесь живут три вещи и больше ничего:
     1. токены движения (кривые + длительности)
     2. примитивы взаимодействия (нажатие, фокус, защита hover от тача)
     3. починка золотого обода по периметру
   Экранные файлы не должны переобъявлять кнопки — только раскладку.  */

/* ============ 1 · ТОКЕНЫ ДВИЖЕНИЯ ============
   Кривая --lh-ease-out уже была вписана литералом в hb-promo-art;
   вынесена сюда, чтобы у всех экранов был один характер движения. */
.hb-app,
.desktop-main-menu {
  /* Вход, отклик, всё что появляется — стартует быстро. */
  --lh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Перемещение уже видимого элемента по экрану. */
  --lh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Выдвижные панели, iOS-подобная кривая. */
  --lh-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --lh-dur-press: 120ms;   /* отклик кнопки на нажатие */
  --lh-dur-hover: 140ms;   /* hover, смена цвета */
  --lh-dur-pop: 180ms;     /* тултипы, мелкие поповеры */
  --lh-dur-panel: 240ms;   /* выпадающие списки, вкладки */
  --lh-dur-sheet: 320ms;   /* модалки, шторки */

  /* Золото обода — взято пипеткой из hb-ingame-ornament-frame-v1.png. */
  --lh-frame-gold: #bb942c;
}

/* ============ 2 · ПРИМИТИВЫ ВЗАИМОДЕЙСТВИЯ ============ */

/* 2.1 Отклик на нажатие.
   Раньше :active лишь отменял подъём от hover — при нажатии пальцем,
   без hover, не происходило вообще ничего. Теперь любой кликабельный
   элемент подтверждает нажатие сжатием. */
.hb-app button,
.hb-app [role="button"],
.hb-app .hb-nav-item,
.hb-app summary {
  transition: transform var(--lh-dur-press) var(--lh-ease-out);
}

.hb-app button:active:not(:disabled),
.hb-app [role="button"]:active,
.hb-app .hb-nav-item:active,
.hb-app summary:active {
  transform: scale(0.97);
}

/* Крупные CTA сжимаются мягче — 0.97 на широкой кнопке читается как рывок. */
.hb-app .hb-hunt-primary:active,
.hb-app .hb-hunt-card > button:active,
.hb-app .hb-featured__footer > button:active,
.hb-app .hb-ledger-button:active {
  transform: scale(0.985);
}

/* Пункты навигации и мелкие иконки — почти незаметно, но ощутимо. */
.hb-app .hb-nav-item:active,
.hb-app .hb-add:active,
.hb-app .hb-audio-toggle:active {
  transform: scale(0.98);
}

.hb-app button:disabled,
.hb-app button:disabled:active {
  transform: none;
}

/* 2.2 Защита hover от тача.
   На тач-устройстве тап вызывает hover и он залипает до следующего тапа.
   Подъёмы на hover оставляем только там, где есть настоящий курсор. */
@media not all and (hover: hover) and (pointer: fine) {
  .hb-app .hb-hunt-card:hover,
  .hb-app .hb-hunt-card > button:hover,
  .hb-app .hb-hunt-primary:hover,
  .hb-app .hb-featured__footer > button:hover {
    transform: none;
    filter: none;
  }
}

/* 2.3 Фокус с клавиатуры — единый по всем экранам. */
.hb-app :is(button, [role="button"], a, input, select, summary):focus-visible {
  outline: 2px solid var(--lime, #b7f24a);
  outline-offset: 2px;
  border-radius: 9px;
}

/* 2.4 Уважение к prefers-reduced-motion.
   Убираем перемещение, оставляем прозрачность и цвет — они помогают понимать. */
@media (prefers-reduced-motion: reduce) {
  .hb-app *,
  .hb-app *::before,
  .hb-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hb-app button:active,
  .hb-app [role="button"]:active {
    transform: none;
  }
}

/* ============ 3 · ЗОЛОТОЙ ОБОД ПО ПЕРИМЕТРУ ============
   У орнамента было две золотые линии: внешняя по краю окна и внутренняя
   штриховка на четверти толщины рамки. Внутренняя рвалась — она нарисована
   от руки, гуляет между строками картинки, и девятислайс при растягивании
   на ширину окна терял её куски. Её убрали совсем.

   Убираем так: в исходнике полоса вокруг штриховки чёрная, поэтому просто
   закрываем её чёрной лентой на той же глубине. Резной узор в углах и
   деревянная фактура рамки при этом остаются нетронутыми — лента не
   доходит до углов 26 пикселей.

   Внешнюю линию рисуем сами: у орнамента снизу и слева её фактически не
   было (яркость крайних пикселей 6 и 19 против 192 справа). */

/* ГЕОМЕТРИЯ. Легаси задаёт .hb-app { width:100vw; height:100vh }. Единица
   vw считается ВМЕСТЕ с полосой прокрутки, поэтому в настоящем браузере с
   видимым скроллбаром окно приложения шире видимой области: правый край
   уезжает за экран, снизу вылезает горизонтальная полоса прокрутки и
   поднимает нижнюю грань на свою высоту. Внешне это читается как
   «золотая линия висит над низом окна, а справа её нет вовсе». Замер по
   скриншоту владельца подтвердил: сверху и слева линия на глубине 0,
   снизу на 9 CSS-пикселях, справа не найдена. Проценты считаются от
   родителя и полосу прокрутки не включают. */
.desktop-main-menu .hb-app {
  width: 100% !important;
  height: 100dvh !important;
  max-width: 100%;
}

.hb-app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Слой 52: 50 у орнамента, 51 занят --hb-ui-layer-utility. */
  z-index: 52;

  /* Одна золотая линия по самому краю окна. */
  box-shadow: inset 0 0 0 1px var(--lh-frame-gold);

  /* Четыре ленты, гасящие ВСЁ внутреннее содержимое орнамента.
     В картинке рамки на каждой стороне не одна лишняя линия, а две:
     штриховка на 6–7 строке из 22 и ещё одна яркая линия на самой
     последней, 21-й строке — то есть по внутреннему краю рамки. Первую
     версию ленты я сделал высотой 4px и она погасила только штриховку,
     а внутренняя линия осталась и читалась как прерывистая полоса под
     контентом. Поэтому лента теперь во всю толщину рамки: от 2.5px
     (ниже внешней линии) до внутреннего края. Остаётся ровно одна
     золотая линия по краю окна. */
  --lh-strip: #080b0a;
  --lh-frame-w: clamp(10px, .84cqw, 14px);
  --lh-strip-off: 2.5px;
  --lh-strip-h: calc(var(--lh-frame-w) - 2.5px);
  --lh-strip-pad: 26px;    /* отступ от углов, чтобы не тронуть резьбу */
  background-image:
    linear-gradient(var(--lh-strip), var(--lh-strip)),
    linear-gradient(var(--lh-strip), var(--lh-strip)),
    linear-gradient(var(--lh-strip), var(--lh-strip)),
    linear-gradient(var(--lh-strip), var(--lh-strip));
  background-repeat: no-repeat;
  background-position:
    left var(--lh-strip-pad) top var(--lh-strip-off),
    left var(--lh-strip-pad) bottom var(--lh-strip-off),
    left var(--lh-strip-off) top var(--lh-strip-pad),
    right var(--lh-strip-off) top var(--lh-strip-pad);
  background-size:
    calc(100% - var(--lh-strip-pad) * 2) var(--lh-strip-h),
    calc(100% - var(--lh-strip-pad) * 2) var(--lh-strip-h),
    var(--lh-strip-h) calc(100% - var(--lh-strip-pad) * 2),
    var(--lh-strip-h) calc(100% - var(--lh-strip-pad) * 2);
}

/* Обрывки легаси-уголков возле углов топбара. */
.hb-app .hb-topbar::before,
.hb-app .hb-topbar::after {
  border-width: 0 !important;
  content: none !important;
}