/* lalawar enchant order — тёмная тема в духе Modrinth. Зелёный акцент = цвет шаров опыта. */
:root {
  color-scheme: dark;
  --bg: #16181c;
  --card: #26292f;
  --inset: #1d2025;
  --raised: #33363d;
  --raised-hover: #3d414a;
  --line: rgb(255 255 255 / 0.07);
  --line-strong: rgb(255 255 255 / 0.12);
  --fg: #e9edf1;          /* 14.8:1 на --card */
  --muted: #b0bac5;       /* 7.4:1 на --card */
  --subtle: #96a0aa;      /* 5.3:1 на --card */
  --accent: #1bd96a;      /* 8.0:1 на --card */
  --accent-hover: #3be37f;
  --accent-fg: #0b130e;   /* текст на зелёной кнопке, 10.6:1 */
  --accent-soft: rgb(27 217 106 / 0.13);
  --accent-line: rgb(27 217 106 / 0.45);
  --warn: #ffb35c;
  --warn-soft: rgb(255 179 92 / 0.1);
  --error: #ff6b86;
  --error-soft: rgb(255 107 134 / 0.1);
  --glint: rgb(176 112 255 / 0.85);

  --font: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-display: "Unbounded", var(--font);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font: 500 15px/1.55 var(--font);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgb(27 217 106 / 0.07), transparent 60%),
    var(--bg);
}
body.has-mobilebar { padding-bottom: 84px; }
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.px { image-rendering: crisp-edges; image-rendering: pixelated; display: block; }

* { scrollbar-width: thin; scrollbar-color: var(--raised) transparent; }
/* Полоса прокрутки страницы — обычной ширины и светлая, чтобы её легко было поймать мышкой */
html { scrollbar-width: auto; scrollbar-color: #8a929e var(--inset); }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 50;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-fg); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgb(22 24 28 / 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner, .wrap, .footer__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.topbar__inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; min-width: 0; }
.brand:hover { color: var(--fg); }
.brand__logo { display: block; flex: none; }
.brand__name { font: 700 18px/1 var(--font-display); letter-spacing: -0.01em; }
.brand__sub { font-weight: 600; color: var(--muted); white-space: nowrap; }
.brand--small .brand__name { font-size: 14px; }
.brand--small { gap: 8px; }
.topbar__right { display: flex; align-items: center; gap: 16px; }
.toplink { color: var(--muted); font-weight: 600; text-decoration: none; }
.toplink:hover { color: var(--fg); }

/* ---------- первый экран ---------- */
.wrap { flex: 1; padding-block: clamp(16px, 3vw, 28px) 48px; }
.intro { margin-bottom: clamp(16px, 2.4vw, 24px); }
.intro h1 {
  font: 700 clamp(24px, 1rem + 1.6vw, 32px)/1.05 var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lead { margin-top: 10px; color: var(--muted); font-size: clamp(15px, 0.9rem + 0.2vw, 16px); max-width: 80ch; }
.about { margin-top: 12px; }
.about summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--fg); font-weight: 700; font-size: 14px;
  list-style: none; cursor: pointer; user-select: none;
  transition: background 0.15s;
}
.about summary::-webkit-details-marker { display: none; }
.about summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s var(--ease);
}
.about[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.about summary:hover { background: var(--raised); }
.about__body {
  margin-top: 12px; padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  color: var(--muted); display: grid; gap: 10px; max-width: 72ch;
}

/* ---------- раскладка ---------- */
.layout { display: grid; gap: 16px; }
.col-main, .col-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
  .col-main { gap: 24px; }
  /* Пока итога нет, настройки едут рядом с длинным списком чар; с итогом колонка растёт вместе со страницей */
  .col-side { position: sticky; top: 88px; }
  .has-result .col-side { position: static; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.4vw, 22px);
  min-width: 0;
}
.card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 32px; }
.card__head h2 { font: 700 18px/1.2 var(--font); letter-spacing: -0.01em; }
.num {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--raised); color: var(--muted);
  font: 700 13px/1 var(--font-display);
  transition: background 0.2s, color 0.2s;
}
.is-current .num { background: var(--accent-soft); color: var(--accent); }
.card__head h2:focus-visible { outline-offset: 4px; }
.counter {
  margin-left: auto; padding: 4px 10px; border-radius: 999px;
  background: var(--inset); color: var(--muted);
  font-weight: 700; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.counter:empty { display: none; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px;
  border: 0; border-radius: var(--r-md);
  font-weight: 700; text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.1s, filter 0.15s;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { cursor: not-allowed; opacity: 0.45; }
.btn--primary { background: var(--accent); color: var(--accent-fg); min-height: 48px; font-size: 16px; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--primary:disabled { background: var(--raised); color: var(--subtle); opacity: 1; }
.calc-hint { text-align: center; }
.btn--ghost { background: var(--raised); color: var(--fg); }
.btn--ghost:hover { background: var(--raised-hover); }
.btn--sm { min-height: 32px; padding: 4px 12px; font-size: 14px; border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.card__head .btn--sm { margin-left: 4px; }
.counter + .btn--sm { margin-left: 8px; }

/* ---------- предмет ---------- */
.search {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px; margin-bottom: 14px;
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--subtle);
  transition: border-color 0.15s;
}
.search:focus-within { border-color: var(--accent-line); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--fg); font-weight: 600; }
.search input::placeholder { color: var(--subtle); }
.search input::-webkit-search-cancel-button { filter: invert(0.7); }

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px 10px;
  background: var(--inset); border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.25; text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.tile:hover { background: var(--raised); color: var(--fg); }
.tile:active { transform: scale(0.97); }
.tile[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
/* Не больше двух строк, чтобы ряды сетки были ровными; полное название — в подсказке */
.tile__name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; min-height: 2.5em; text-wrap: balance;
}
.tile .slot { width: 52px; height: 52px; }
.tile .px { width: 40px; height: 40px; }
.slot {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tile .slot { background: rgb(0 0 0 / 0.22); }
.slot--lg { width: 76px; height: 76px; border-radius: 14px; }
.slot--lg .px { width: 64px; height: 64px; }

/* Отблеск зачарования поверх иконки — по форме самой иконки */
.glint.glint--burst { opacity: 1; animation: glint 1.2s linear, glint 3.2s linear 1.2s infinite; }
.glint {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, var(--glint) 46%, rgb(230 200 255 / 0.9) 50%, var(--glint) 54%, transparent 70%);
  background-size: 320% 100%;
  -webkit-mask: var(--icon) center / 64px 64px no-repeat;
  mask: var(--icon) center / 64px 64px no-repeat;
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: glint 3.2s linear infinite;
}
@keyframes glint { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.picked {
  display: flex; align-items: center; gap: 16px;
  padding: 12px; border-radius: var(--r-md);
  background: var(--inset); border: 1px solid var(--line);
}
.picked__name { flex: 1; min-width: 0; font: 700 clamp(18px, 1rem + 0.6vw, 22px)/1.2 var(--font); }

/* ---------- чары ---------- */
.hint { color: var(--muted); font-size: 14px; margin: -4px 0 14px; }
.groups { display: grid; gap: 10px; }
.group {
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.group--linked { box-shadow: inset 3px 0 0 var(--raised-hover); }
.group--linked.has-pick { box-shadow: inset 3px 0 0 var(--accent-line); }
.group__label { padding: 8px 12px 0 16px; color: var(--subtle); font-size: 13px; font-weight: 600; }
.group__label + .ench { padding-top: 6px; }
.ench {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 10px 12px 10px 16px;
  transition: background 0.15s;
}
.ench + .ench { border-top: 1px solid var(--line); }
.ench.is-on { background: rgb(27 217 106 / 0.05); }
.ench__name { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 160px; }
.ench__link { color: var(--fg); font-weight: 700; text-decoration: none; width: fit-content; }
.ench__link:hover { color: var(--accent); text-decoration: underline; }
.ench__conflict { color: var(--warn); font-size: 13px; font-weight: 600; }
/* Конфликтующие кнопки нажимаются (заменят выбранную), поэтому не гасим, а делаем контурными */
.ench.is-conflict .lvl { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.ench.is-conflict .lvl:hover { background: var(--raised); color: var(--fg); }

.levels { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.lvl {
  min-width: 44px; height: 40px; padding: 0 8px;
  border: 0; border-radius: 10px;
  background: var(--raised); color: var(--muted);
  font-weight: 800; font-size: 14px; letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s, transform 0.1s, opacity 0.15s;
}
.lvl:hover { background: var(--raised-hover); color: var(--fg); }
.lvl:active { transform: scale(0.94); }
.lvl[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.lvl[aria-pressed="true"]:hover { background: var(--accent-hover); }

.empty { color: var(--subtle); font-size: 14px; }
.hint.empty { margin: 0; padding: 20px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }

.notice { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; }
.notice--warn { background: var(--warn-soft); color: var(--warn); }
.notice--error { background: var(--error-soft); color: var(--error); }

/* ---------- расчёт ---------- */
.field { margin-bottom: 14px; }
.field__label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.field__hint { margin-top: 8px; color: var(--subtle); font-size: 13px; line-height: 1.45; }

.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 4px; border-radius: var(--r-md);
  background: var(--inset); border: 1px solid var(--line);
}
.seg__btn {
  min-height: 38px; padding: 4px 12px;
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--muted); font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.seg__btn:hover { color: var(--fg); }
.seg__btn[aria-checked="true"], .seg__btn[aria-pressed="true"] { background: var(--raised); color: var(--fg); box-shadow: 0 1px 0 rgb(255 255 255 / 0.05) inset; }
.seg--small { padding: 3px; }
.seg--small .seg__btn { min-height: 32px; padding: 2px 10px; font-size: 13px; }

.switch {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; cursor: pointer;
  border-top: 1px solid var(--line);
}
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  flex: none; position: relative; width: 40px; height: 24px; margin-top: 1px;
  border-radius: 999px; background: var(--raised);
  transition: background 0.2s;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--muted);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.switch:hover .switch__track { background: var(--raised-hover); }
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(16px); background: var(--accent-fg); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch__text { display: grid; gap: 1px; font-weight: 600; line-height: 1.35; }
.switch__text small { color: var(--subtle); font-size: 13px; font-weight: 500; }
.switch:last-of-type { margin-bottom: 14px; border-bottom: 1px solid var(--line); }

.progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-weight: 600; font-size: 14px; }
.progress .btn { margin-left: auto; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--raised); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- итог ---------- */
.result { scroll-margin-top: 80px; }
.result .empty { text-align: center; padding: 28px 12px; }
.result__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.result__head h2 { font: 700 17px/1.25 var(--font); }
.result__sub { margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.result__time { margin-top: 12px; color: var(--subtle); font-size: 13px; }
.result .notice { margin: 0 0 12px; }

.total {
  display: grid; gap: 2px;
  padding: 14px 16px; margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid rgb(27 217 106 / 0.25);
}
.total__label { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.total__levels { display: flex; align-items: baseline; gap: 8px; color: var(--accent); font-weight: 700; font-size: 18px; }
.total__levels b { font: 700 40px/1.05 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.total__xp { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.total__note { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }

.steps__title { color: var(--fg); font-size: 15px; font-weight: 700; }
.steps__hint { margin: 2px 0 12px; color: var(--subtle); font-size: 13px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; container-type: inline-size; }
.step { padding: 12px; border-radius: var(--r-md); background: var(--inset); border: 1px solid var(--line); }
.step__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.step__n { font: 700 13px/1 var(--font-display); color: var(--fg); }
.chip { padding: 3px 10px; border-radius: 999px; background: var(--raised); color: var(--fg); font-size: 13px; font-weight: 700; white-space: nowrap; }
.step__parts { display: grid; gap: 4px; }
.part { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; min-width: 0; }
.part__text { display: grid; min-width: 0; line-height: 1.35; }
.part__main { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.part__sub { color: var(--subtle); font-size: 13px; font-weight: 600; }
.step__plus { width: 44px; text-align: center; color: var(--subtle); font-weight: 800; line-height: 1; }
@container (min-width: 330px) {
  .step__parts { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 8px; align-items: center; }
  .part { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; }
  .part .slot { width: 40px; height: 40px; }
  .step__plus { width: auto; }
}
.step__foot {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--subtle); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---------- подвал и нижняя панель ---------- */
.footer { border-top: 1px solid var(--line); }
.footer__inner { padding-block: 24px 32px; display: grid; gap: 6px; color: var(--subtle); font-size: 13px; }
.footer__inner .brand { margin-bottom: 4px; }

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgb(22 24 28 / 0.9); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

/* ---------- вкладки «Один предмет / Партия» ---------- */
.tabs {
  display: inline-grid; grid-auto-flow: column; gap: 4px;
  padding: 4px; margin-bottom: clamp(14px, 2vw, 20px); border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line);
}
.tabs__link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 16px;
  border-radius: var(--r-sm); color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.tabs__link:hover { color: var(--fg); background: var(--raised); }
.tabs__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

/* ---------- партия: список ---------- */
.orders { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.orders:empty { display: none; }
/* Телефон: название и чары — во всю ширину, кнопки и количество — строкой ниже */
.order {
  display: grid; align-items: center; gap: 2px 12px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "icon name name" "icon ench ench" "tools tools count";
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--inset); border: 1px solid var(--line);
}
.order > .slot { grid-area: icon; align-self: start; }
.order.is-editing { border-color: var(--accent-line); }
.order__name { grid-area: name; font-weight: 800; font-size: 16px; line-height: 1.3; }
.order__ench { grid-area: ench; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.order .stepper { grid-area: count; margin-top: 8px; }
.order__tools { grid-area: tools; display: flex; gap: 4px; margin-top: 8px; margin-left: -8px; }
@media (min-width: 640px) {
  .order {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    grid-template-areas: "icon name count tools" "icon ench ench ench";
  }
  .order .stepper, .order__tools { margin: 0; }
}
.iconbtn {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--subtle);
  transition: background 0.15s, color 0.15s;
}
.iconbtn:hover { background: var(--raised); color: var(--fg); }
.iconbtn--remove:hover { color: var(--error); background: var(--error-soft); }
.btn--add { border: 1px dashed var(--line-strong); background: transparent; min-height: 48px; }
.btn--add:hover { background: var(--raised); border-color: transparent; }
.saved-note { margin-top: 10px; text-align: center; }
#list-card .hint.empty { margin-bottom: 12px; }

.stepper {
  display: inline-grid; grid-template-columns: 36px 56px 36px; align-items: center;
  height: 40px; border-radius: var(--r-md); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
}
.stepper__btn {
  height: 100%; border: 0; background: none; color: var(--fg); font-weight: 800; font-size: 18px; line-height: 1;
  border-radius: var(--r-md); transition: background 0.15s;
}
.stepper__btn:hover:not(:disabled) { background: var(--raised); }
.stepper__btn:disabled { color: var(--subtle); opacity: 0.4; cursor: default; }
.stepper__input {
  width: 100%; height: 100%; border: 0; background: none; text-align: center;
  font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.stepper__input::-webkit-inner-spin-button, .stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stepper--lg { grid-template-columns: 48px 72px 48px; height: 48px; }

/* ---------- партия: редактор ---------- */
.editor { border-color: var(--accent-line); scroll-margin-top: 80px; }
.editor .num { background: var(--accent-soft); color: var(--accent); font-size: 16px; }
.editor__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin: 16px 0 14px; }
.editor__count { margin: 0; }
.editor__best { display: grid; gap: 4px; }
.editor__best .field__hint { margin: 0; }
.editor .hint { margin: 0 0 12px; }
.editor__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 16px; }
.editor__hint { margin-top: 8px; }
span.ench__link { cursor: default; }
span.ench__link:hover { color: var(--fg); text-decoration: none; }

/* ---------- партия: код партии ---------- */
.share { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.share__head { display: grid; gap: 2px; margin-bottom: 10px; }
.share__head .field__label { margin: 0; }
.share__head .field__hint { margin: 0; }
.share__row { display: flex; flex-wrap: wrap; gap: 6px; }
.share__row .btn { min-height: 36px; }
.share__status { margin-top: 8px; color: var(--accent); font-size: 13px; font-weight: 600; }
.share__status:empty { display: none; }
.paste { margin-top: 12px; display: grid; gap: 8px; }
.paste .field__label { margin: 0; }
.paste__text {
  width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--inset);
  color: var(--fg); font: 600 13px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere;
}
.paste__text:focus { outline: none; border-color: var(--accent-line); }
.paste .notice { margin: 0; }
.paste__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.paste__actions .btn--primary { min-height: 36px; font-size: 14px; }
.editor .num svg { display: block; }

/* ---------- партия: итог ---------- */
.summary .notice { margin: 0 0 12px; }
.summary__grid { display: grid; gap: 10px; }
.hero { margin: 0; align-content: center; }
.hero .total__levels b { font-size: clamp(44px, 2rem + 2vw, 56px); }
.hero__where { color: var(--muted); font-size: 14px; font-weight: 600; }
.linkbtn {
  padding: 0; border: 0; background: none; color: var(--accent); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linkbtn:hover { color: var(--accent-hover); }
.facts { margin: 0; display: grid; gap: 8px; }
.fact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  padding: 10px 14px; border-radius: var(--r-md); background: var(--inset); border: 1px solid var(--line);
}
.fact dt { color: var(--muted); font-size: 14px; font-weight: 700; }
.fact dd { display: contents; }
.fact dd b { justify-self: end; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact dd small { grid-column: 1 / -1; color: var(--subtle); font-size: 13px; font-weight: 600; line-height: 1.4; }
.fact dd small:empty { display: none; }
.fact--accent dd b { color: var(--accent); }
@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact { grid-template-columns: 1fr; align-content: start; }
  .fact dd b { justify-self: start; font-size: 20px; }
}
@media (min-width: 1100px) {
  .summary__grid { grid-template-columns: minmax(260px, 0.9fr) 2fr; }
}
.overall { margin-top: 14px; }
.overall__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.bar { height: 8px; border-radius: 999px; background: var(--inset); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.bar__fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 0.3s var(--ease); }

/* ---------- партия: план ---------- */
.plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); }
.plan > .notice { margin: 0; }
.plan .summary { scroll-margin-top: 80px; }
.card__head .plan__title { font: 700 clamp(19px, 1rem + 0.5vw, 22px)/1.1 var(--font-display); letter-spacing: -0.02em; }
.plan .hint { margin: -4px 0 14px; max-width: 80ch; }
.books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.bookline {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px; border-radius: var(--r-md); background: var(--inset); border: 1px solid var(--line);
}
.bookline__name { font-weight: 700; line-height: 1.3; }
.bookline__n { font: 700 18px/1 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .books { grid-template-columns: 1fr 1fr; gap: 6px; }
  .bookline { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px 6px 6px; }
  .bookline .slot { width: 32px; height: 32px; border-radius: 8px; }
  .bookline .px { width: 24px; height: 24px; }
  .bookline__name { font-size: 13px; letter-spacing: -0.01em; }
  .bookline__n { font-size: 15px; }
}

/* Шаги идут одной колонкой — порядок здесь главное */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; container-type: inline-size; }
.task {
  position: relative; overflow: hidden; container-type: inline-size;
  padding: 12px; border-radius: var(--r-md); background: var(--inset); border: 1px solid var(--line);
  scroll-margin-block: 96px;
  transition: border-color 0.2s, background 0.2s;
}
.task:focus-visible { outline-offset: 2px; border-radius: var(--r-md); }
/* Полоска прогресса по нижнему краю */
.task::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px;
  width: calc(var(--done, 0) * 100%); background: var(--accent); transition: width 0.25s var(--ease);
}
.task.is-next { border-color: var(--accent-line); background: rgb(27 217 106 / 0.05); }
.task.is-done { border-color: rgb(27 217 106 / 0.2); }
.task.is-done .step__parts, .task.is-done .task__extra, .task.is-done .task__chips { opacity: 0.5; }
.task__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.task__label { font-weight: 800; font-size: 14px; color: var(--fg); }
.task__chips { display: flex; gap: 6px; }
.chip--times { background: var(--accent-soft); color: var(--accent); }
.task__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.task__extra { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--subtle); font-size: 13px; font-weight: 600; }
.done { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.done__text { min-width: 64px; text-align: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.done__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: var(--raised); color: var(--fg); font-weight: 800; font-size: 20px; line-height: 1;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.done__btn:hover:not(:disabled) { background: var(--raised-hover); }
.done__btn:active:not(:disabled) { transform: scale(0.94); }
/* Ярко-зелёная ✓ — только у следующего шага, у остальных спокойная */
.done__btn--do { width: 56px; background: var(--accent-soft); color: var(--accent); }
.done__btn--do:hover:not(:disabled) { background: rgb(27 217 106 / 0.22); }
.is-next .done__btn--do { background: var(--accent); color: var(--accent-fg); }
.is-next .done__btn--do:hover:not(:disabled) { background: var(--accent-hover); }
.done__btn:disabled { opacity: 0.35; cursor: default; }
.task.is-done .done__btn--do:disabled { opacity: 1; background: transparent; color: var(--accent); }

/* Слоты рядом уже на телефоне: карточка шага не выше ~150 px */
@container (min-width: 250px) {
  .task .step__parts { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); gap: 8px; align-items: center; }
  .task .part { grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; }
  .task .part .slot { width: 36px; height: 36px; border-radius: 8px; }
  .task .part .px { width: 28px; height: 28px; }
  .task .step__plus { width: auto; }
  .task .part__main { font-size: 14px; }
}
@media (max-width: 479px) {
  .task .part__main { font-size: 13.5px; line-height: 1.3; }
}
/* Широко: шаг — одна строка «метка · слот + слот · отметка» */
@container (min-width: 640px) {
  .task {
    display: grid; align-items: center; column-gap: 20px; row-gap: 4px;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    grid-template-areas: "head parts done" "extra parts done";
  }
  .task__head { grid-area: head; flex-direction: column; align-items: flex-start; margin: 0; gap: 6px; }
  .task .step__parts { grid-area: parts; }
  .task__foot { display: contents; }
  .task__extra { grid-area: extra; white-space: normal; }
  .done { grid-area: done; }
}

.apply { display: grid; gap: 20px; }
.applyblock + .applyblock { padding-top: 20px; border-top: 1px solid var(--line); }
.applyblock__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.applyblock__titles { display: grid; min-width: 0; line-height: 1.4; }
.applyblock__title { font-size: 16px; font-weight: 800; }
.applyblock__done { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: 2px; }
.applyblock__sub { color: var(--muted); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.applyblock__sub + .applyblock__sub { color: var(--subtle); }

/* Полоса «дальше» липнет к низу экрана, пока план на экране */
.planbar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 16px;
  background: rgb(22 24 28 / 0.92); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.planbar__text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.planbar__text b { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.planbar__text span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 600; }
.planbar .btn { flex: none; min-height: 40px; font-size: 14px; }
.nowrap { white-space: nowrap; }

@media (max-width: 639px) {
  .toplink { display: none; }
  .brand__sub { font-size: 14px; }
  .items { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
  .tile { font-size: 13px; padding: 10px 3px 8px; gap: 6px; }
  .tile .slot { width: 48px; height: 48px; }
  .ench { padding: 10px 12px; }
  .lvl { min-width: 42px; }
}
@media (max-width: 359px) {
  .brand__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .glint { display: none; }
  .spinner { animation: none; border-color: var(--accent); }
}
.share__status.is-warn { color: var(--warn); }
.paste.is-copy #paste-replace, .paste.is-copy #paste-add, .paste.is-copy label { display: none; }
.list-full { margin: 8px 0 0; color: var(--warn); text-align: center; }
@media (max-width: 639px) {
  .share__row .btn, .paste__actions .btn { min-height: 44px; }
}
/* Большие партии: длинные числа переносятся внутри плитки, а не вылезают за край */
.fact { min-width: 0; }
.fact dd b { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.fact dd small { overflow-wrap: anywhere; }

/* Книги к покупке: отметка «собрал» строкой под названием, как у шагов; вид карточки прежний */
.bookline {
  position: relative; overflow: hidden; row-gap: 6px;
  grid-template-areas: "icon name n" "icon done done";
  transition: border-color 0.2s;
}
.bookline > .slot { grid-area: icon; }
.bookline__name { grid-area: name; }
.bookline__n { grid-area: n; transition: opacity 0.2s; }
.bookline .done { grid-area: done; justify-self: start; margin: 0; gap: 4px; }
.bookline .done__btn { width: 32px; height: 30px; border-radius: 8px; font-size: 16px; }
.bookline .done__btn--do { width: 40px; }
.bookline .done__btn--do svg { width: 16px; height: 16px; }
.bookline .done__text { min-width: 52px; font-size: 13px; }
.bookline::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px;
  width: calc(var(--done, 0) * 100%); background: var(--accent); transition: width 0.25s var(--ease);
}
.bookline.is-done { border-color: rgb(27 217 106 / 0.2); }
.bookline.is-done .bookline__name, .bookline.is-done .bookline__n, .bookline.is-done > .slot { opacity: 0.5; }
.bookline.is-done .done__btn--do:disabled { opacity: 1; background: transparent; color: var(--accent); }
.bookline__name { min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
/* Телефон: название — во всю ширину рядом с иконкой, отметка — строкой ниже; «×9» не нужен: в «2 из 9» он уже есть */
@media (max-width: 479px) {
  .bookline { grid-template-areas: "icon name name" "done done done"; }
  .bookline__n { display: none; }
  .bookline .done { justify-self: stretch; justify-content: space-between; }
  .bookline .done__btn { height: 36px; }
}

/* ---------- жители ---------- */
@media (max-width: 479px) {
  .tabs { display: grid; grid-template-columns: repeat(3, auto); width: 100%; }
  .tabs__link { justify-content: center; padding: 4px 8px; font-size: 13px; }
}
.vic {
  display: block; flex: none; width: 32px; height: 32px;
  background: url("../images/villagers/icons.png") 0 0 / calc(var(--v-cols) * 100%) calc(var(--v-rows) * 100%) no-repeat;
  image-rendering: crisp-edges; image-rendering: pixelated;
}
.vic--sm { width: 20px; height: 20px; }
.vic--mini { width: 18px; height: 18px; }
.vface {
  display: block; flex: none; width: 32px; height: 44px;
  background: url("../images/villagers/faces.png") 0 0 / calc(var(--v-faces) * 100%) 100% no-repeat;
  image-rendering: crisp-edges; image-rendering: pixelated;
}

.vbadge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px; font-weight: 700;
}
.vbadge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.vtools { display: grid; gap: 10px; margin-bottom: 16px; }
.vtools > * { min-width: 0; }
.vtools .search { margin: 0; height: 48px; }
.vtools .field__hint { margin: 0; }
.vtools .field__hint:empty { display: none; }
@media (min-width: 900px) {
  .vtools { grid-template-columns: minmax(0, 1fr) 380px; align-items: center; }
  .vtools .field__hint { grid-column: 1 / -1; }
}

.vnav { margin-bottom: 16px; }
.vnav__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
.vnav__link {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 8px;
  border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line);
  color: var(--fg); font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.vnav__link:hover { color: var(--fg); background: var(--raised); border-color: var(--line-strong); }
.vnav__link[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.vnav__link .vface { width: 24px; height: 33px; }
@media (max-width: 639px) {
  .vnav__list { display: flex; overflow-x: auto; padding-bottom: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x proximity; }
  .vnav__list li { flex: none; scroll-snap-align: start; }
  .vnav__link { min-height: 48px; white-space: nowrap; }
}

.vlist { display: grid; gap: 16px; }
.vcard { scroll-margin-top: 80px; }
.vcard__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.vcard__face {
  flex: none; display: grid; place-items: center; width: 60px; height: 68px; border-radius: 14px;
  background: var(--inset); box-shadow: inset 0 0 0 1px var(--line);
}
.vcard__face .vface { width: 40px; height: 55px; }
.vcard__title { min-width: 0; display: grid; gap: 4px; }
.vcard__title h2 { font: 700 clamp(19px, 1rem + 0.5vw, 22px)/1.1 var(--font-display); letter-spacing: -0.02em; }
.vcard__station { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.vcard__station-label { color: var(--subtle); }
.vcard__station-item { display: inline-flex; align-items: center; gap: 6px; }

.vcols { display: none; }
.vlevels { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vlevel {
  display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md);
  background: var(--inset); border: 1px solid var(--line);
}
.vlevel__label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vlevel__badge {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  font: 700 12px/1 var(--font-display); color: #121418;
}
.vlevel__badge--stone { background: #9a9a9a; }
.vlevel__badge--iron { background: #e2e2e2; }
.vlevel__badge--gold { background: #f6cf3f; }
.vlevel__badge--emerald { background: #2fd472; }
.vlevel__badge--diamond { background: #5ce6dc; }
.vlevel__name { display: grid; line-height: 1.25; min-width: 0; }
.vlevel__name b { font-weight: 800; font-size: 15px; }
.vlevel__pick { color: var(--subtle); font-size: 12.5px; font-weight: 600; }

.vcell { display: grid; gap: 6px; min-width: 0; }
.vcell__cap { color: var(--subtle); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.vcell--sell .vcell__cap { color: var(--accent); }
.vlevels--trader .vcell__cap { display: none; } /* у торговца сторона уже названа в подписи ряда */
.vtrades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vcell.is-none .vtrades::after { content: "—"; color: var(--subtle); font-weight: 700; padding: 4px 2px; }
.vtrade {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  padding: 5px 10px 5px 5px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
}
.vtrade > .vic { border-radius: 6px; background-color: rgb(0 0 0 / 0.22); }
.vtrade.is-hit { border-color: var(--accent-line); background: rgb(27 217 106 / 0.08); }
.vtrade__text { display: grid; gap: 2px; min-width: 0; }
.vtrade__name { font-weight: 700; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.vtrade__n { color: var(--muted); font-weight: 600; }
.vtrade__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.vtag {
  padding: 1px 7px; border-radius: 999px; background: var(--raised);
  color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.vtag--plus { color: var(--fg); }
.vtag--glint { background: rgb(176 112 255 / 0.16); color: #d2b4ff; }
.vtag--only { background: var(--warn-soft); color: var(--warn); white-space: normal; }
.vswatches { display: flex; flex-wrap: wrap; gap: 2px; max-width: 220px; }
.vswatches .vic--mini { border-radius: 3px; }

.vbooks { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.vbooks__title { font-size: 16px; font-weight: 800; }
.vbooks__hint { margin: 4px 0 12px; color: var(--muted); font-size: 14px; max-width: 80ch; }
.vbooks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.vbook {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: var(--inset); border: 1px solid var(--line); font-weight: 700; font-size: 14px;
}
.vbook.is-hit { border-color: var(--accent-line); background: rgb(27 217 106 / 0.08); }
.vbook__star { margin-left: auto; color: #d2b4ff; }

.vnotes { margin-top: 16px; }
.vnotes__title { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.vnotes__list { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 14px; max-width: 90ch; }
#v-empty { margin-top: 4px; }

@media (min-width: 900px) {
  .vcols {
    display: grid; grid-template-columns: 170px minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px;
    padding: 0 13px 6px; color: var(--subtle); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .vcols__sell { color: var(--accent); }
  .vlevel { grid-template-columns: 170px minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .vlevel__label { padding-top: 4px; }
  .vlevel .vcell--sell { grid-column: 2; }
  .vlevel .vcell--buy { grid-column: 3; }
  .vlevel .vcell__cap { display: none; }
  .vcard--one-side .vcols, .vcard--one-side .vlevel { grid-template-columns: 170px minmax(0, 1fr); }
  .vcard--one-side .vlevel .vcell { grid-column: 2; }
  .vlevels--trader .vlevel { grid-template-columns: 170px minmax(0, 1fr); }
  .vlevels--trader .vcell { grid-column: 2; }
}
@media (max-width: 639px) {
  .vtools { padding: 12px; border-radius: var(--r-md); }
  .vlevel { padding: 10px; }
}