:root{
  --bg:#14120e;
  --surface:#1b1813;
  --surface-2:#221e18;
  --surface-3:#2a251d;
  --border:#37301f;
  --border-soft:#2b251b;
  --text:#eee6d6;
  --text-muted:#a3977f;
  /* Третья ступень текста. Светлее, чем просится глазу: на самом светлом фоне
     (--surface-3, у кодов предметов) должно оставаться 4.5:1 по WCAG AA.
     #968c74 даёт 4.6:1 там и 5.6:1 на общем фоне; прежний #726957 держал 2.8. */
  --text-faint:#968c74;
  --gold:#c9963f;
  --gold-hi:#e3b45c;
  /* Цвет предупреждений. Прежний #c2571f давал 3.7:1 к подложке карточки
     станка — текстом это не проходило по WCAG AA. Осветлён до 4.8–5.2:1;
     полупрозрачные рамки рядом остались на старом тоне, они нетекстовые. */
  --ember:#e0763a;
  /* Шрифты Valheim: Norse — логотип и заголовки (в игре им набран логотип и
     руны), Averia Serif Libre — весь текст интерфейса. Лежат в fonts/game/,
     достаются из игры (tools/extract_fonts.py). Inter — запасной вариант,
     он в репозитории есть всегда. */
  --font-display:'Norse','Inter',system-ui,sans-serif;
  --font-body:'Averia Serif Libre','Inter',system-ui,sans-serif;
  --r:10px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 28px -18px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Вырезы под камеру. env() на обычном экране равен нулю, так что эти четыре
   переменные ничего не сдвигают нигде, кроме iPhone. */
:root{
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
}
/* Холст красит корневой элемент. Полагаться на то, что цвет поднимется сюда
   из body, нельзя: у body полупрозрачная шапка сверху, и в полосе под камерой
   сквозь неё просвечивала прокручиваемая страница. */
html{background:var(--bg)}
body{
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(201,150,63,.10), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(194,87,31,.08), transparent 60%),
    var(--bg);
  /* Фон body растекается на весь холст, но привязан к коробке body. На
     короткой странице (404, приватность на широком экране) коробка ниже окна,
     и градиент повторялся плиткой — по экрану шли три полосы со швами.
     Нижним слоем лежит сплошной цвет, так что без повтора пустоты не будет. */
  background-repeat:no-repeat;
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,150,63,.35)}
a:hover{color:var(--gold-hi)}
button{font-family:inherit}
.muted{color:var(--text-faint);font-size:12px}

/* Заголовок для скринридера там, где рисованной надписи нет. Каталог занимает
   пол-экрана, но своего заголовка у него не было: при переходе по заголовкам
   вся левая колонка выпадала из оглавления. clip-path вместо display:none —
   спрятанное таким способом голос читает, а display:none пропускает. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* ——— шапка ——— */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(14px + var(--safe-t)) calc(22px + var(--safe-r)) 14px calc(22px + var(--safe-l));
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg, rgba(34,30,24,.92), rgba(20,18,14,.72));
  position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
/* на privacy.html и 404.html шапка — ссылка домой, но выглядит так же */
/* у ссылок в тексте подчёркивание — граница снизу; знаку и кнопкам оно ни к чему */
a.brand{text-decoration:none;border-bottom:0;transition:filter .15s ease}
a.brand:hover{filter:brightness(1.08)}
.logo{width:48px;height:48px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.brandtext{display:flex;flex-direction:column;min-width:0}
/* Norse — прописные, поэтому крупнее и с разрядкой, иначе выглядит мелко.
   Цвет и тень — как на большом логотипе: светлый камень с тёмной подложкой. */
/* на главной это <h1>, на остальных страницах — <span> внутри ссылки домой;
   margin гасим, чтобы заголовок не разъезжал шапку */
.brandname{
  margin:0;
  font-family:var(--font-display);font-size:26px;line-height:1.1;font-weight:700;
  letter-spacing:.02em;color:#e7ccaf;   /* тот же камень, что в знаке */
  text-shadow:0 1px 0 #1d1710, 0 2px 3px rgba(0,0,0,.45);
}
/* подпись золотом — как на логотипе */
.brandsub{
  font-size:12px;color:var(--gold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topactions{display:flex;gap:8px;flex:none}

.btn{
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  padding:8px 13px;border-radius:8px;font-size:13px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
.btn:hover{background:var(--surface-3);border-color:#4a3f27}
.btn:active{transform:translateY(1px)}
.btn.small{padding:5px 10px;font-size:12px}

/* ——— раскладка ——— */
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:22px;align-items:start;max-width:1560px;margin:0 auto;
  padding:22px calc(22px + var(--safe-r)) 22px calc(22px + var(--safe-l));
}
.catalog{min-width:0}

/* ——— поиск ——— */
.searchrow{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:0 12px;box-shadow:var(--shadow);
}
/* Индикатор фокуса в строке поиска. Прежний #584a2c давал к фону 2.05:1, а
   WCAG 1.4.11 требует 3:1: поле, на которое ведёт клавиша «/», при табуляции
   было почти не отличить от расфокусированного. Золото даёт 6.7:1 — и тем же
   цветом подсвечивается поле «уже есть», так что рамка фокуса на сайте одна. */
.searchrow:focus-within{
  border-color:var(--gold);
  box-shadow:var(--shadow), 0 0 0 1px rgba(201,150,63,.45);
}
.searchicon{width:18px;height:18px;color:var(--text-faint);flex:none}
#search{
  flex:1;background:none;border:0;outline:0;color:var(--text);
  font:inherit;padding:13px 0;min-width:0;
}
#search::placeholder{color:var(--text-faint)}
/* свой крестик вместо системного: тот виден не во всех браузерах и слишком мелкий */
#search::-webkit-search-cancel-button{display:none}
.searchclear{
  flex:none;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface-3);color:var(--text-muted);
  font-size:17px;line-height:1;padding:0;
}
.searchclear:hover{background:var(--surface-2);color:var(--text)}
.searchclear[hidden]{display:none}

/* переключатель языка в шапке */
.langsw{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;flex:none}
.langbtn{
  background:none;border:0;cursor:pointer;color:var(--text-muted);
  font:inherit;font-size:12px;letter-spacing:.04em;padding:8px 11px;
}
.langbtn+.langbtn{border-left:1px solid var(--border)}
.langbtn:hover{background:var(--surface-3);color:var(--text)}
.langbtn.on{background:var(--surface-2);color:var(--gold)}
.searchrow kbd{
  border:1px solid var(--border);border-radius:5px;padding:1px 6px;
  font-size:11px;color:var(--text-faint);background:var(--surface-2);flex:none;
}

/* ——— фильтры ——— */
.filters{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.filterrow[hidden]{display:none}
.filterrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:baseline}
.rowlabel{font-size:12px;color:var(--text-faint);text-align:right;padding-top:5px}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--border-soft);background:var(--surface);color:var(--text-muted);
  padding:5px 11px;border-radius:999px;font-size:12.5px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{color:var(--text);border-color:var(--border)}
.chip.on{background:rgba(201,150,63,.15);border-color:rgba(201,150,63,.5);color:var(--gold-hi)}
.chip.preset{border-style:dashed}
.chip.preset:hover{border-color:var(--gold);color:var(--gold-hi)}

/* чипы биомов носят цвет локации */
.biomechip{display:inline-flex;align-items:center;gap:6px}
.biomechip .dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.biomechip:hover{border-color:color-mix(in srgb, var(--c) 55%, transparent)}
.biomechip.on{
  background:color-mix(in srgb, var(--c) 14%, transparent);
  border-color:color-mix(in srgb, var(--c) 55%, transparent);
  color:var(--c);
}

.tabs.big{margin:16px 0 0;padding:4px}
.tabs.big .tab{font-size:13.5px;padding:8px 10px}

.linkbtn{
  border:0;background:none;color:var(--gold);font:inherit;font-size:inherit;
  cursor:pointer;border-bottom:1px solid rgba(201,150,63,.35);padding:0;
}
.linkbtn:hover{color:var(--gold-hi)}

.gridhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px;flex-wrap:wrap}
.mini{font-size:12px;color:var(--text-faint);display:flex;align-items:center;gap:6px;cursor:pointer}

/* ——— иконки ——— */
.ico{flex:none;object-fit:contain;image-rendering:auto;display:block}
.ico-m{width:46px;height:46px}
.ico-s{width:22px;height:22px}
.noico{
  border-radius:6px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%);
  border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
}

/* ——— карточки ——— */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:12px}
.card{
  position:relative;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r);
  padding:13px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);
  transition:border-color .16s,transform .16s;
}
/* Цвет биома — уголком снизу слева, а не полосой во всю левую грань.
   Сплошная цветная полоса сбоку — примета шаблона, её узнают и она злит;
   уголок читается как метка на карточке, а не как чужой акцент. Лежит
   поверх собственной рамки (сдвиг на её толщину), поэтому не двоится. */
.card::after{
  content:'';position:absolute;left:-1px;bottom:-1px;width:46%;height:50%;
  border-left:2px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-bottom:2px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-bottom-left-radius:var(--r);
  pointer-events:none;transition:border-color .16s;
}
.card:hover{border-color:var(--border);transform:translateY(-1px)}
.card:hover::after{border-left-color:var(--c);border-bottom-color:var(--c)}
.card.incart{background:linear-gradient(180deg,rgba(201,150,63,.07),transparent);border-color:rgba(201,150,63,.4)}
.cardtop{display:flex;gap:11px;align-items:flex-start}
.cardname{min-width:0;flex:1}
.cname{font-weight:600;line-height:1.25}
.cen{font-size:12px;color:var(--text-faint);font-weight:400}
.cmeta{display:flex;flex-wrap:wrap;gap:5px}
.tag{
  font-size:11px;padding:2px 7px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text-muted);
}
.tag.biome{
  color:var(--c);
  border-color:color-mix(in srgb, var(--c) 38%, transparent);
  background:color-mix(in srgb, var(--c) 10%, transparent);
}
.tag.st{color:var(--text-muted);border-style:dashed}
.tag.lv{color:var(--gold);border-color:rgba(201,150,63,.3)}

.mats{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--text-muted);flex:1}
.mchip{display:inline-flex;align-items:center;gap:4px;line-height:1.4}
.mchip b{color:var(--text);font-weight:600}
.cardbtns{margin-top:2px}
.addbtn{
  width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  padding:8px;border-radius:8px;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s;
}
.addbtn:hover{background:rgba(201,150,63,.14);border-color:rgba(201,150,63,.5);color:var(--gold-hi)}

.morerow{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
/* без этого display:flex перебивает браузерное [hidden]{display:none} */
.morerow[hidden]{display:none}
.empty{color:var(--text-muted);text-align:center;padding:36px 12px}
.sourcenote{font-size:12px;color:var(--text-faint);line-height:1.6;margin-top:26px;max-width:78ch}

/* ——— группы списка крафта ——— */
.cgroup{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-faint);margin:12px 0 4px;
}
.cgroup:first-child{margin-top:2px}
.cgroup::after{content:'';flex:1;height:1px;background:var(--border-soft)}
.cgroup span{
  order:3;font-size:10.5px;color:var(--text-faint);
  border:1px solid var(--border-soft);border-radius:999px;padding:0 6px;
}

/* ——— фильтр итога по группам ——— */
.gfilter{margin:2px 0 4px}
.gfilter[hidden]{display:none}
.chip.small{padding:3px 9px;font-size:11.5px}

/* ——— планировщик станков ——— */
.stations{display:flex;flex-direction:column;gap:9px}
.stcard{
  background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:9px;padding:9px 10px;
}
.stcard.short{border-color:rgba(194,87,31,.45);background:rgba(194,87,31,.06)}
.sthead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sthead .ico{width:22px;height:22px;flex:none}
.sthead .stname{font-size:13.5px;flex:1;min-width:90px}
.sthave{
  font-size:11px;flex:none;border-radius:5px;padding:1px 6px;
  border:1px solid var(--border);color:var(--text-muted);
}
.sthave.good{color:#8BCF70;border-color:rgba(139,207,112,.32)}
.sthave.bad{color:var(--ember);border-color:rgba(194,87,31,.4)}
.stplan{font-size:11px;flex:none;color:var(--gold);border:1px dashed rgba(201,150,63,.4);border-radius:5px;padding:1px 6px}
.stwarn{font-size:11.5px;color:var(--ember);line-height:1.45;margin-top:7px}
.stbuilt{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12px;color:var(--text-muted);cursor:pointer;margin-top:7px;
}
.stbuilt input{flex:none}

.extbox{margin-top:7px}
.extbox summary{
  font-size:11.5px;color:var(--text-faint);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:6px;padding:2px 0;
}
.extbox summary::-webkit-details-marker{display:none}
.extbox summary::before{content:'▸';color:var(--text-faint);transition:transform .15s}
.extbox[open] summary::before{content:'▾'}
.extbox summary:hover{color:var(--text-muted)}
.extlist{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.extrow{
  display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:6px;
  font-size:12.5px;color:var(--text-muted);cursor:pointer;
}
.extrow:hover{background:var(--surface-3)}
.extrow input{flex:none}
.extrow .ico{width:20px;height:20px;flex:none}
.extname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inlist{font-size:11px;flex:none;color:var(--gold);opacity:.8}

/* код объекта из файлов игры — тот же, что в графе «Код» на вики */
.pcode{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:11px;color:var(--text-faint);
  background:var(--surface-3);border-radius:4px;padding:1px 5px;
  white-space:nowrap;
}
.extcost{display:flex;gap:6px;flex:none;font-size:11.5px;color:var(--text-faint)}
.extcost .mchip{gap:3px}
.extcost .ico{width:16px;height:16px}
.note{font-size:11.5px;color:var(--text-faint);line-height:1.55;margin:0}
.stationblock .note{margin-top:9px}
.stationblock[hidden]{display:none}

/* ——— счётчики ——— */
.stepper{display:flex;align-items:center;gap:4px;flex:none}
.stepper.wide{width:100%;justify-content:space-between}
.sbtn{
  width:28px;height:28px;flex:none;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);border-radius:7px;font-size:15px;line-height:1;cursor:pointer;
}
.sbtn:hover{background:var(--surface-3);border-color:#4a3f27}
.snum{
  width:52px;height:28px;text-align:center;background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:7px;font:inherit;font-size:13px;padding:0 2px;
  -moz-appearance:textfield;
}
.snum.grow{flex:1;width:auto}
.snum::-webkit-outer-spin-button,.snum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper.big .sbtn{width:34px;height:34px;font-size:17px}
.stepper.big .snum{width:60px;height:34px;font-size:15px}

/* ——— панель: два отдельных блока ——— */
/* min-width:0 — не косметика: колонка панели лежит в грид-дорожке 1fr, а у
   такой дорожки нижняя граница по умолчанию равна min-content содержимого.
   Блок «Станки» не ужимается уже 371px, и на узком экране он распирал всю
   раскладку — страница ехала вбок на 8px при вьюпорте 375. */
.panel{
  position:sticky;top:78px;display:flex;flex-direction:column;gap:14px;
  max-height:calc(100vh - 100px);overflow-y:auto;min-width:0;
}
.block{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;
  padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;
}
.totalsblock{border-color:var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.blockhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.blockhead h2{font-family:var(--font-display);font-size:19px;margin:0;font-weight:700;letter-spacing:.03em}

.players{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r);padding:11px 13px;
}
/* это <label for="players">: по надписи попадаем в поле, поэтому block и курсор */
.plabel{display:block;font-size:13.5px;font-weight:500;cursor:pointer}
.phint{font-size:11.5px;color:var(--text-faint)}

.cart{display:flex;flex-direction:column;gap:6px}
.cartempty{color:var(--text-faint);font-size:13px;text-align:center;padding:20px 8px;line-height:1.7}
.crow{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px 9px;align-items:start;
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:9px;padding:9px 10px;
}
.crow .ico{margin-top:2px}
.cinfo{min-width:0}
.cinfo .n{font-size:13.5px;line-height:1.3}
.cinfo .s{font-size:11.5px;color:var(--text-faint)}
.crowctl{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px}
.del{
  width:24px;height:24px;flex:none;border:0;background:none;color:var(--text-faint);
  font-size:17px;line-height:1;cursor:pointer;border-radius:6px;
}
.del:hover{color:var(--ember);background:rgba(194,87,31,.12)}

/* уровень качества */
.lvpick{display:flex;align-items:center;gap:3px;flex:none}
.lvlabel{font-size:11px;color:var(--text-faint);margin-right:2px}
.lvlabel.dim{opacity:.6}
.lvbtn{
  width:23px;height:24px;border:1px solid var(--border-soft);background:var(--surface);
  color:var(--text-faint);font-size:11.5px;cursor:pointer;border-radius:5px;padding:0;
}
.lvbtn:hover{color:var(--text)}
.lvbtn.on{background:rgba(201,150,63,.2);border-color:rgba(201,150,63,.55);color:var(--gold-hi);font-weight:600}

/* ——— итог ——— */
.tabs{display:flex;gap:4px;background:var(--surface-3);padding:3px;border-radius:9px;border:1px solid var(--border-soft)}
.tab{
  flex:1;border:0;background:none;color:var(--text-muted);padding:7px 8px;
  border-radius:7px;font-size:12.5px;cursor:pointer;transition:background .15s,color .15s;
}
.tab:hover{color:var(--text)}
.tab.active{background:var(--surface);color:var(--gold-hi)}

.opts{display:flex;flex-wrap:wrap;gap:4px 14px}
.opts label{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;cursor:pointer}

.totallist{min-height:40px}
.tgroup{
  display:flex;align-items:center;gap:7px;
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--c);
  margin:14px 0 6px;padding-bottom:4px;
  border-bottom:1px solid color-mix(in srgb, var(--c) 28%, transparent);
}
.tgroup::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.tgroup:first-child{margin-top:0}
.trow{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13.5px}
.tn{flex:1;color:var(--text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv{font-variant-numeric:tabular-nums;font-weight:600;flex:none;min-width:48px;text-align:right}
.trow.done .tn{text-decoration:line-through;opacity:.5}
.trow.done .ico{opacity:.35}
.trow.done .tv{color:#8BCF70}
.thave{flex:none}
.havenum{
  width:54px;height:24px;text-align:center;background:var(--surface-3);color:var(--text-muted);
  border:1px solid var(--border-soft);border-radius:6px;font:inherit;font-size:12px;
  -moz-appearance:textfield;
}
.havenum:focus{outline:0;border-color:var(--gold);color:var(--text)}
.havenum::-webkit-outer-spin-button,.havenum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.summary{font-size:12px;color:var(--text-faint);line-height:1.6;border-top:1px solid var(--border-soft);padding-top:10px}
.summary b{color:var(--text-muted)}
.summary .note{opacity:.85;margin-top:5px;font-size:11.5px}
.sline{margin-bottom:8px}
.sblock{margin-top:9px}
.slabel{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-faint);margin-bottom:5px;
}
.stchips{display:flex;flex-wrap:wrap;gap:5px}
.stchips.col{flex-direction:column;gap:4px}
.stchip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:8px;
  padding:4px 9px 4px 5px;color:var(--text-muted);font-size:12px;
}
.stchip.wide{width:100%}
.stchip .ico{width:20px;height:20px}
.stname{flex:1;color:var(--text)}
.stnum{font-variant-numeric:tabular-nums;color:var(--text-muted)}
.stlv{
  font-size:11px;color:var(--gold);flex:none;
  border:1px solid rgba(201,150,63,.32);border-radius:5px;padding:1px 6px;
}
.sttime{
  font-variant-numeric:tabular-nums;color:var(--gold);
  border-left:1px solid var(--border-soft);padding-left:8px;min-width:72px;text-align:right;
}

/* ——— тост ——— */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--surface-3);border:1px solid var(--border);color:var(--text);
  padding:10px 18px;border-radius:9px;font-size:13.5px;box-shadow:0 12px 30px -12px rgba(0,0,0,.85);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* Тост обычно сквозной для мыши, но когда в нём кнопка «Вернуть» — по ней
   надо попадать, поэтому клики включаем только в этом случае. */
.toast.act{pointer-events:auto;display:flex;align-items:center;gap:14px}
.toastbtn{
  border:1px solid rgba(201,150,63,.5);background:rgba(201,150,63,.14);
  color:var(--gold-hi);font:inherit;font-size:12.5px;
  padding:4px 11px;border-radius:7px;cursor:pointer;flex:none;
  transition:background .15s,border-color .15s;
}
.toastbtn:hover{background:rgba(201,150,63,.24);border-color:var(--gold)}

/* ——— чекбоксы и полоса прокрутки в стиле игры ———
   Рамка, галочка и ромбы нарисованы SVG прямо в CSS: картинок нет, всё резкое
   на любом экране. Состояния (наведение, фокус, выключено) — это фильтры поверх
   одной и той же картинки, поэтому вариантов рисовать не нужно. */
:root{
  --cb-frame:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3.6' y='3.6' width='16.8' height='16.8' fill='%231a1610'/><g fill='%23e7ccaf' stroke='%238a6a33' stroke-width='.6'><rect x='5' y='2.7' width='14' height='2.6'/><rect x='5' y='18.7' width='14' height='2.6'/><rect x='2.7' y='5' width='2.6' height='14'/><rect x='18.7' y='5' width='2.6' height='14'/></g><g fill='%23d9a441' stroke='%23785a28' stroke-width='.6'><path d='M4 .7 7.3 4 4 7.3 .7 4Z'/><path d='M20 .7 23.3 4 20 7.3 16.7 4Z'/><path d='M4 16.7 7.3 20 4 23.3 .7 20Z'/><path d='M20 16.7 23.3 20 20 23.3 16.7 20Z'/></g><g fill='%23241c12'><path d='M4 2.7 5.3 4 4 5.3 2.7 4Z'/><path d='M20 2.7 21.3 4 20 5.3 18.7 4Z'/><path d='M4 18.7 5.3 20 4 21.3 2.7 20Z'/><path d='M20 18.7 21.3 20 20 21.3 18.7 20Z'/></g></svg>");
  --cb-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 12.3 10.4 16.3 17.6 7.5' fill='none' stroke='%23785a28' stroke-width='5.2' stroke-linecap='round' stroke-linejoin='round'/><path d='M6.6 12.3 10.4 16.3 17.6 7.5' fill='none' stroke='%23e7ccaf' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --sb-diamond:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 .5 11.5 6 6 11.5 .5 6Z' fill='%23d9a441' stroke='%23785a28'/><path d='M6 3.6 8.4 6 6 8.4 3.6 6Z' fill='%23241c12'/></svg>");
}

input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:19px;height:19px;cursor:pointer;
  background:var(--cb-frame) center/100% 100% no-repeat;
  transition:filter .12s ease, transform .08s ease;
}
input[type="checkbox"]:checked{
  background:var(--cb-check) center/100% 100% no-repeat,
             var(--cb-frame) center/100% 100% no-repeat;
}
input[type="checkbox"]:hover:not(:disabled){
  filter:brightness(1.12) drop-shadow(0 0 3px rgba(233,178,74,.6));
}
input[type="checkbox"]:active:not(:disabled){transform:scale(.93)}
input[type="checkbox"]:focus-visible{
  outline:none;filter:brightness(1.18) drop-shadow(0 0 5px rgba(245,190,90,.9));
}
input[type="checkbox"]:disabled{filter:grayscale(1) brightness(.85);opacity:.6;cursor:default}

/* ——— полоса прокрутки ———

   Родную полосу через ::-webkit-scrollbar можно раскрасить, но не оживить:
   Chromium не применяет к ней ни transition, ни filter — проверено, значения
   меняются, а картинка нет. Поэтому её прячет scrollbar.js (класс nosb, чтобы
   без скрипта осталась хотя бы родная) и кладёт поверх свою, из обычных
   элементов: с ними работают и переходы, и свечение. */
.nosb{scrollbar-width:none}
.nosb::-webkit-scrollbar{width:0;height:0;display:none}

.vsb{
  position:fixed;top:0;left:0;width:14px;z-index:60;
  border-radius:5px;background:#14110c;
  box-shadow:inset 0 0 0 1px rgba(201,150,63,.12);
  user-select:none;touch-action:none;
}
.vsb.off{display:none}
/* направляющие не доходят до навершия: иначе полоски торчат из-за ромба */
.vsb-rails{
  position:absolute;left:0;right:0;top:15px;bottom:15px;
  background:linear-gradient(90deg,
    #14110c 0 3px, rgba(201,150,63,.35) 3px 4px,
    #1c1812 4px 10px, rgba(201,150,63,.35) 10px 11px, #14110c 11px);
}
.vsb-cap{
  position:absolute;left:2px;width:10px;height:10px;
  background:var(--sb-diamond) center / 100% 100% no-repeat;
}
.vsb-top{top:3px}
.vsb-bot{bottom:3px}

/* Ползунок — каменная планка с золотой окантовкой по торцам. В покое
   притушен, чтобы не спорил с содержимым; под курсором и при перетаскивании
   разгорается. Переход здесь обычный, CSS-ный: свой элемент, не псевдо. */
.vsb-thumb{
  position:absolute;top:0;left:1px;width:12px;box-sizing:border-box;
  border-radius:7px;border-top:2px solid #d9a441;border-bottom:2px solid #d9a441;
  background:
    var(--sb-diamond) center / 8px 8px no-repeat,
    linear-gradient(90deg,
      #8a6a33 0 1px, #f0e0c4 1px 3px, #e0c8a2 3px 7px,
      #c0a377 7px 10px, #8a6a33 10px 12px);
  background-clip:padding-box;
  opacity:.4;filter:brightness(.8);
  transition:opacity .3s ease, filter .3s ease;
}
.vsb.on .vsb-thumb{opacity:1;filter:brightness(1.06) drop-shadow(0 0 4px rgba(233,178,74,.5))}
.vsb.drag .vsb-thumb{opacity:1;filter:brightness(1.16) drop-shadow(0 0 6px rgba(245,190,90,.85))}
@media (prefers-reduced-motion:reduce){.vsb-thumb{transition:none}}

/* ——— адаптив ——— */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr;
    padding:16px calc(16px + var(--safe-r)) 16px calc(16px + var(--safe-l))}
  .panel{position:static;max-height:none;overflow:visible;order:-1}
}
@media (max-width:620px){
  .topbar{flex-wrap:wrap;
    padding:calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) 12px calc(14px + var(--safe-l))}
  .topactions{width:100%}
  .topactions .btn{flex:1}
  .grid{grid-template-columns:1fr}
  .layout{gap:16px;padding:12px calc(12px + var(--safe-r)) 12px calc(12px + var(--safe-l))}
  .filterrow{grid-template-columns:1fr;gap:4px}
  .rowlabel{text-align:left;padding-top:0}
}

/* ——— место под свою полосу прокрутки ———

   Родная полоса раздвигала содержимое сама, своя лежит поверх — значит место
   ей надо отвести руками, иначе она прижимается вплотную к блокам справа.
   Колонка панели шире ровно на свой жёлоб, чтобы блоки в ней остались прежней
   ширины. Всё привязано к классу nosb: без скрипта полоса родная и жёлоб не
   нужен. */
html.nosb .topbar{padding-right:36px}
html.nosb .layout{padding-right:36px;grid-template-columns:minmax(0,1fr) 426px}
.panel.nosb{padding-right:26px}
@media (max-width:1080px){
  html.nosb .layout{padding-right:30px;grid-template-columns:1fr}
  .panel.nosb{padding-right:0}
}
@media (max-width:620px){
  html.nosb .topbar{padding-right:28px}
  html.nosb .layout{padding-right:26px}
}

/* ——— подвал и текстовые страницы (privacy.html, 404.html) ——— */
.sitefoot{
  max-width:1560px;margin:0 auto;border-top:1px solid var(--border-soft);
  padding:26px calc(22px + var(--safe-r)) calc(34px + var(--safe-b)) calc(22px + var(--safe-l));
  color:var(--text-muted);font-size:12.5px;line-height:1.6;
  display:flex;flex-direction:column;gap:8px;
}
html.nosb .sitefoot{padding-right:36px}
.sitefoot p{margin:0;max-width:70ch}
.footmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.agemark{
  border:1px solid var(--border);border-radius:4px;padding:1px 6px;
  color:var(--text-muted);font-size:11px;letter-spacing:.04em;cursor:help;
}
.sitefoot a{color:var(--gold-hi)}

.textpage{
  max-width:74ch;margin:0 auto;
  padding:28px calc(22px + var(--safe-r)) calc(60px + var(--safe-b)) calc(22px + var(--safe-l));
  color:var(--text);line-height:1.65;
}
.textpage h1{font-family:var(--font-display);font-size:26px;margin:22px 0 10px;letter-spacing:.03em}
.textpage h2{font-family:var(--font-display);font-size:18px;margin:26px 0 8px;color:var(--gold)}
.textpage p{margin:0 0 12px}
.textpage .upd{color:var(--text-muted);font-size:13px}
.textpage code{background:var(--surface-2);border-radius:4px;padding:1px 5px;font-size:13px}
.textpage hr{border:0;border-top:1px solid var(--border-soft);margin:36px 0}
a.btn{border-bottom-color:var(--border)}
.textpage .btn{display:inline-block;margin-top:18px}