/* ===============================
   Vampire Resources — CSS (clean)
   =============================== */

/* Контейнер */
.vrares{ font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#0c2030; }

/* Секции */
.vrares .vrares__section{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin:14px 0; }
.vrares .vrares__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.vrares .vrares__summary{ color:#0c2030; font-weight:700; }

/* Кнопки */
.vrares .vrares-btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.4em; padding:6px 12px; border:1px solid #c9d6df; background:#f7fbff; color:#0b2948; border-radius:10px; font:600 14px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; cursor:pointer; }
.vrares .vrares-btn:hover{ filter:brightness(1.03); }
.vrares .vrares-btn:active{ transform:translateY(.5px); }
.vrares .vrares-btn:focus{ outline:2px solid rgba(11,92,128,.35); outline-offset:2px; }
.vrares .vrares-btn:disabled{ opacity:.55; cursor:not-allowed; }
.vrares .vrares-btn--primary{ border-color:#0f6aa6; background:#0f6aa6; color:#fff; }

/* Таблицы/ячейки */
.vrares .vrares__table{ width:100%; }
.vrares .vrarow{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-bottom:6px; }
.vrares .vrarow--head{ font-weight:700; }
.vrares .vracell{ padding:8px; border:1px solid #e5e7eb; border-radius:10px; background:#fafafa; color:#0c2030; text-align:left; }
.vrares .vracell.center{ text-align:center; }
.vrares .vracell--attr, .vrares .vracell--book{ cursor:pointer; background:#fff; }
.vrares .vracell--attr:hover, .vrares .vracell--book:hover{ background:#f8fbff; }
.vrares .vraqty{ font-weight:700; color:#0c2030; }

/* Иконки через CSS-переменные (ставятся из JS) */
.vrares .vraicon{ display:inline-block; width:22px; height:22px; border-radius:50%; vertical-align:middle; background:#eee center/cover no-repeat; margin-right:6px; }
.vrares .vraicon--str{ background-image: var(--icon-str); }
.vrares .vraicon--cha{ background-image: var(--icon-cha); }
.vrares .vraicon--int{ background-image: var(--icon-int); }
.vrares .vraicon--wil{ background-image: var(--icon-wil); }
.vrares .vraicon--unk{ background:#ddd; position:relative; }
.vrares .vraicon--unk::after{ content:'?'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#666; }

/* Модалка */
.vrares-modal{ position:fixed; inset:0; display:none; z-index:100000; }
.vrares-modal[aria-hidden="false"]{ display:block; }
.vrares-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.vrares-modal__window{ position:relative; z-index:1; width:min(480px,calc(100% - 24px)); margin:10vh auto; background:#fff; color:#0c2030; border-radius:14px; border:1px solid #e5e7eb; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden; }
.vrares-modal__header, .vrares-modal__footer{ background:#fff; border-color:#eee; border-style:solid; }
.vrares-modal__header{ border-width:0 0 1px 0; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; }
.vrares-modal__footer{ border-width:1px 0 0 0; padding:10px 12px; display:flex; gap:8px; justify-content:flex-end; }
.vrares-modal__body{ padding:12px; }
.vrares-modal__close{ appearance:none; background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:#0c2030; }

/* Спиннер +/− и поле */
.vrares .vrares-spin{ display:flex; align-items:center; gap:8px; }
.vrares .vrares-spin__btn{ appearance:none; width:44px; height:44px; border-radius:50%; background:#fff; color:#0c2030; border:1px solid #e5e7eb; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; line-height:1; cursor:pointer; }
.vrares .vrares-spin__btn:hover{ background:#f7fafc; }
.vrares .vrares-spin__btn:active{ transform:translateY(1px); }
.vrares .vrares-input{ flex:1; height:44px; border:1px solid #e5e7eb; border-radius:10px; padding:0 10px; font-size:16px; background:#fff; color:#0c2030; }
.vrares .vrares-input:focus{ outline:2px solid rgba(11,92,128,.25); outline-offset:2px; }

/* Чипы единиц */
.vrares .vrares-unit{ display:flex; gap:6px; margin-top:10px; }
.vrares .vrares-chip{ appearance:none; background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:700; }
.vrares .vrares-chip.is-active{ background:#0f6aa6; border-color:#0f6aa6; color:#fff; }

/* Для тач-экранов чуть больше */
@media (pointer: coarse){ .vrares .vrares-spin__btn{ width:52px; height:52px; } }


/* === VRA overrides to fight theme styles (chips & +/- look) === */
#vrares.vrares .vrares-modal .vrares-spin { background: transparent !important; box-shadow: none !important; border: 0 !important; }
#vrares.vrares .vrares-modal .vrares-spin__btn,
#vrares.vrares .vrares-modal .vrares-chip {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff !important;
  color: #0c2030 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#vrares.vrares .vrares-modal .vrares-spin__btn{
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
#vrares.vrares .vrares-modal .vrares-spin__btn:hover{ background:#f7fafc !important; }
#vrares.vrares .vrares-modal .vrares-spin__btn:active{ transform: translateY(1px) !important; }
#vrares.vrares .vrares-modal .vrares-spin__btn::before,
#vrares.vrares .vrares-modal .vrares-spin__btn::after{ content:none !important; }

#vrares.vrares .vrares-modal .vrares-chip{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 700 !important;
}
#vrares.vrares .vrares-modal .vrares-chip.is-active{
  background:#0f6aa6 !important; border-color:#0f6aa6 !important; color:#fff !important;
}
#vrares.vrares .vrares-modal .vrares-chip::before,
#vrares.vrares .vrares-modal .vrares-chip::after{ content:none !important; }

/* чуть аккуратнее цифры */
#vrares.vrares .vrares-modal .vrares-input{
  font-variant-numeric: tabular-nums;
}
@media (pointer: coarse){
  #vrares.vrares .vrares-modal .vrares-spin__btn{ width:52px !important; height:52px !important; }
}