/* LOOTHOOD — Plots v1 · «Участки»
   ------------------------------------------------------------------
   Экран выглядел депрессивно и заслуженно: резной золотой фрейм из
   старого IP по периметру сетки, поверх травяной текстуры лежали два
   тёмных градиента и внутренняя тень, так что земли не было видно
   вообще, а сами участки были шестью одинаковыми пунктирными
   прямоугольниками с надписью «Empty Plot».

   Что делаем:
     1. снимаем резной фрейм, сетка получает нашу рамку с радиусом
     2. открываем травяную текстуру — она уже лежит в images/
     3. пустой участок получает деревянную вешку: это не «пусто»,
        а «место застолблено, можно строить»
     4. счётчики сверху становятся чипами

   Scoped к .hb-app. */

/* ============ ЗАГОЛОВОК ============ */

.hb-app .hb-plots-heading h1 {
  font-family: var(--disp);
  color: var(--ivory);
}
.hb-app .hb-plots-heading .hb-diamond-rule { display: none !important; }

/* Счётчики Unlocked / Occupied / Empty — чипы вместо трёх коробок. */
.hb-app .hb-plots-heading dl {
  display: flex !important;
  gap: 8px;
  margin: 0;
}
.hb-app .hb-plots-heading dl > div {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface2);
}
.hb-app .hb-plots-heading dt {
  font-family: var(--body);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dim);
}
.hb-app .hb-plots-heading dd {
  margin: 0;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  color: var(--lime);
}
.hb-app .hb-plots-heading__note {
  color: var(--dim) !important;
  font-size: 12.5px;
}

/* ============ ПОЛЕ ============ */

.hb-app .hb-plot-board {
  padding: 0 !important;
  background: none !important;
}

.hb-app .hb-plot-grid {
  gap: 12px;
  padding: 18px !important;
  border: 1px solid color-mix(in srgb, var(--lime) 16%, var(--line));
  border-radius: 16px;
  /* Было два тёмных градиента поверх травы плюс внутренняя тень 28px —
     текстура полностью тонула. Оставляем лёгкую виньетку. */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(8,11,10,.18), rgba(8,11,10,.62) 78%),
    url("../images/empty_plot_ground_tile_v3.png") center / min(34cqw, 520px) auto repeat !important;
  box-shadow: inset 0 0 90px -30px #000 !important;
}

/* Резной лесной фрейм вокруг сетки — самый громкий остаток старого IP. */
.hb-app .hb-plot-grid::after {
  border-image-source: none !important;
  border-width: 0 !important;
  content: none !important;
}

/* ============ УЧАСТОК ============ */

.hb-app .hb-plot {
  min-height: 148px;
  display: grid !important;
  place-items: center;
  padding: 14px !important;
  border-radius: 13px !important;
  cursor: pointer;
  transition: transform 140ms var(--lh-ease-out),
              border-color 140ms var(--lh-ease-out),
              background 140ms var(--lh-ease-out);
}

/* Пустой участок: полупрозрачная земля под пунктиром и деревянная вешка.
   Читается как застолблённое место, а не как дырка в интерфейсе. */
.hb-app .hb-plot--empty {
  border: 1px dashed color-mix(in srgb, var(--lime) 26%, var(--line)) !important;
  background: rgba(8,11,10,.42) !important;
}
.hb-app .hb-plot--empty .hb-plot__empty {
  display: grid !important;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.hb-app .hb-plot--empty .hb-plot__empty::before {
  content: "";
  display: block;
  width: 62px;
  height: 62px;
  margin-bottom: 6px;
  background: url("../images/plot-stake-v1.png") center / contain no-repeat;
  opacity: .62;
  transition: opacity 140ms var(--lh-ease-out),
              transform 140ms var(--lh-ease-out);
}
.hb-app .hb-plot--empty .hb-plot__empty strong {
  font-family: var(--disp);
  font-size: 16px;
  letter-spacing: .3px;
  color: var(--ivory) !important;
}
.hb-app .hb-plot--empty .hb-plot__empty small {
  font-family: var(--body);
  font-size: 11.5px;
  color: var(--dim) !important;
}

@media (hover: hover) and (pointer: fine) {
  .hb-app .hb-plot--empty:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lime) 60%, var(--line)) !important;
    background: color-mix(in srgb, var(--lime) 8%, rgba(8,11,10,.42)) !important;
  }
  .hb-app .hb-plot--empty:hover .hb-plot__empty::before {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* Занятый участок — сплошная рамка и лаймовый подтон: видно с одного
   взгляда, где уже стоит постройка. */
.hb-app .hb-plot:not(.hb-plot--empty):not(.hb-plot--locked) {
  border: 1px solid color-mix(in srgb, var(--lime) 34%, var(--line)) !important;
  background: linear-gradient(180deg, rgba(20,29,25,.72), rgba(12,18,15,.72)) !important;
}

/* Закрытый участок — тише всех, без приглашения к действию. */
.hb-app .hb-plot--locked {
  border: 1px solid var(--line2) !important;
  background: rgba(8,11,10,.66) !important;
  cursor: default;
}
.hb-app .hb-plot--locked * { color: var(--dim) !important; }

/* Внутренняя коробка под подписью осталась от легаси и читалась как
   второй, вложенный участок внутри участка. Убираем — рамка есть у
   самой кнопки, дублировать её не нужно. */
.hb-app .hb-plot__empty {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}