/* Оформление Хаба, W-lib и Wiki: стекло, свет, движение (18.10.2026).
 *
 * Владелец 18.10.2026: «Хаб и W-lib слишком простые и некрасивые — добавить
 * анимации и эффекты с текстурами. В Wiki ничего не понятно и всё сливается:
 * тоже анимации, эффекты, текстуры и больше картинок».
 *
 * Слой подключён последним и только украшает: разметку не меняет (кроме
 * плиток разделов Wiki — их рисует wiki.js). Всё движение — transform и
 * opacity; при data-fx="off" и «меньше движения» стоит на месте.
 * Появление при прокрутке — webapp/skin.js (класс .sk-rev → .is-in).
 */

:root {
  --sk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ */
/* Появление при прокрутке (skin.js ставит .sk-rev только тому, что     */
/* ещё ниже экрана: без скрипта ничего не прячется).                    */
/* ------------------------------------------------------------------ */
.sk-rev { opacity: 0; transform: translateY(18px) scale(0.985); }
.sk-rev.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--sk-ease), transform 0.7s var(--sk-ease);
  transition-delay: var(--sk-d, 0ms);
}
html[data-fx="off"] .sk-rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sk-rev { opacity: 1; transform: none; } }

/* Блик: полоса света по карточке при касании и наведении. */
.sk-shine { position: relative; overflow: hidden; }
.sk-shine::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0;
}
.sk-shine:hover::after, .sk-shine:active::after, .sk-shine.is-glint::after {
  animation: sk-glint 0.9s var(--sk-ease);
}
@keyframes sk-glint { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 20% { opacity: 1; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
html[data-fx="off"] .sk-shine::after { display: none; }

/* ================================================================== */
/* ХАБ — онлайн-кинотеатр и жидкое стекло (владелец 18.10.2026: «хаб в     */
/* стиле онлайн-кинотеатров, жидкое стекло, убери зерно»).                 */
/* ================================================================== */
/* Фон — свет текущей обложки, размытый на весь экран (skin.js кладёт её
   в --hub-amb), как в Apple TV и Кинопоиске; поверх — виньетка. Стеклу
   есть что преломлять: цвет фона просвечивает сквозь шапку и карточки. */
.hub {
  isolation: isolate;
  --glass: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.09));
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  background: #050507;
}
.hub::before {
  content: ""; position: fixed; inset: -18%; z-index: -2; pointer-events: none;
  background: var(--hub-amb, none) center 20% / cover no-repeat,
              radial-gradient(60% 45% at 30% 20%, var(--h-tint), transparent 70%);
  filter: blur(64px) saturate(1.5) brightness(0.62);
  transform: translateZ(0);
  transition: opacity 0.8s;
}
.hub::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 75% at 50% 0, transparent 35%, rgba(5, 5, 7, 0.75) 78%),
    linear-gradient(to bottom, rgba(5, 5, 7, 0) 30%, rgba(5, 5, 7, 0.85) 100%);
}

/* Жидкое стекло: полупрозрачная заливка, размытие с насыщением, светлый
   кант сверху и блик в углу — общее для шапки, вкладок, карточек, кнопок. */
.hub .hub-top, .hub .hub-tabs, .hub .hub-pill, .hub .hub-ava, .hub .hero-more,
.hub .season-card, .hub .wallet, .hub .hub-tool, .hub .hub-invite, .hub .news-row, .hub .tile, .hub .poster-badge {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), 0 12px 32px rgba(0, 0, 0, 0.38);
}
.hub .season-card, .hub .wallet, .hub .hub-tool, .hub .hub-invite, .hub .news-row, .hub .tile {
  position: relative; overflow: hidden; border-radius: 20px;
  transition: transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease), border-color 0.3s;
}
.hub .season-card::before, .hub .wallet::before, .hub .hub-tool::before, .hub .hub-invite::before,
.hub .news-row::before, .hub .tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 70% at 0 0, rgba(255, 255, 255, 0.16), transparent 45%);
}
.hub .season-card:hover, .hub .wallet:hover, .hub .hub-tool:hover, .hub .hub-invite:hover,
.hub .news-row:hover, .hub .tile:hover {
  transform: translateY(-3px) scale(1.01); border-color: rgba(255, 255, 255, 0.28);
  box-shadow: var(--glass-rim), 0 22px 44px rgba(0, 0, 0, 0.5);
}
.hub .hub-tool-donate {
  background: linear-gradient(135deg, rgba(255, 90, 54, 0.85), rgba(255, 46, 99, 0.75));
  border-color: rgba(255, 255, 255, 0.28);
}

/* Шапка — стеклянная полоса, кнопки — стеклянные капсулы. */
.hub .hub-top {
  background: linear-gradient(to bottom, rgba(5, 5, 7, 0.55), rgba(5, 5, 7, 0.25));
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.hub .hub-pill { border-radius: 999px; }
.hub .hub-ava { border-radius: 50%; }

/* Вкладки модулей — стеклянный переключатель, как у стримингов. */
.hub .hub-tabs {
  gap: 4px; margin: 4px 16px 14px; padding: 4px; width: max-content; max-width: calc(100% - 32px);
  border-radius: 999px;
}
.hub .hub-tab {
  padding: 8px 14px; border: 0; border-radius: 999px; font-size: 13.5px; color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s, background 0.25s var(--sk-ease);
}
.hub .hub-tab.is-on { color: #0A0A0C; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

/* Афиши модулей — билборды: скругление, стеклянный кант, длинная тень,
   медленный наезд камеры на обложку. */
.poster.hub-slide {
  border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 30px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s var(--sk-ease), box-shadow 0.4s var(--sk-ease);
}
.poster.hub-slide:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 40px 70px rgba(0, 0, 0, 0.65); }
.hub-slide .hero-cover, .hub-slide .poster-cover { transform-origin: 50% 30%; animation: sk-kenburns 22s ease-in-out infinite alternate; }
@keyframes sk-kenburns { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.1) translateY(-2%); } }
.hub-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 28%);
  mix-blend-mode: screen;
}
.hub .hub-slide .poster-badge { border-radius: 999px; padding: 5px 11px; letter-spacing: 0.1em; }
.hub .poster:not(.is-soon) .poster-badge { background: linear-gradient(135deg, rgba(255, 90, 54, 0.9), rgba(255, 46, 99, 0.85)); }
.hub .hero-play { border-radius: 999px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.hub .hero-more { border-radius: 999px; color: #FFFFFF; }
.hub .hub-slide.theme-ink .hero-play { border-radius: 999px; }
.hub-dots i { background: rgba(255, 255, 255, 0.3); }
.hub-dots i.is-on { box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }

/* Ряды — как на витрине стриминга: крупный заголовок и стрелка. */
.hub .row-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hub .row-title::after { content: "›"; font-size: 24px; line-height: 1; color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); }
.hub .season-thumb { border-radius: 16px; margin: 6px; min-height: 80px;
  background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.hub .season-bar { background: rgba(255, 255, 255, 0.14); }
.hub .season-bar i { position: relative; overflow: hidden; }
.hub .season-bar i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%); animation: sk-run 2.6s ease-in-out infinite;
}
@keyframes sk-run { to { transform: translateX(100%); } }
.poster { transition: transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease); }
.row-scroll .poster { border-radius: 16px; }
.row-scroll .poster:hover:not(:disabled) { transform: translateY(-4px) scale(1.03); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.6); }

/* Без поддержки размытия стекло темнее, чтобы текст читался. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hub .season-card, .hub .wallet, .hub .hub-tool, .hub .hub-invite, .hub .news-row, .hub .tile,
  .hub .hub-tabs, .hub .hub-top { background: rgba(28, 28, 34, 0.94); }
}
html[data-fx="off"] .hub-slide .hero-cover, html[data-fx="off"] .hub-slide .poster-cover,
html[data-fx="off"] .hub .season-bar i::after { animation: none; }
html[data-fx="lite"] .hub::before { filter: blur(40px) saturate(1.3) brightness(0.6); }
@media (prefers-reduced-motion: reduce) {
  .hub-slide .hero-cover, .hub-slide .poster-cover, .hub .season-bar i::after { animation: none; }
}

/* ================================================================== */
/* W-LIB — бумага, тушь, скринтон                                       */
/* ================================================================== */
.wlib {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, 0.55), transparent 60%),
    var(--wl-paper);
}
/* Шапка: линии скорости и красный мазок под названием. */
.wl-head {
  background:
    repeating-linear-gradient(90deg, rgba(27, 23, 18, 0.05) 0 1px, transparent 1px 9px),
    var(--wl-paper);
}
.wl-head-title { position: relative; display: inline-block; justify-self: center; isolation: isolate; }
.wl-head-title::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 6px; height: 7px; z-index: -1;
  background: var(--wl-red); opacity: 0.85; transform: skewX(-14deg) scaleX(0); transform-origin: left;
  animation: sk-stroke 0.9s 0.2s var(--sk-ease) forwards;
}
@keyframes sk-stroke { to { transform: skewX(-14deg) scaleX(1); } }

/* Баннер: скринтон в тени, лёгкое покачивание панели при касании. */
.wl-banner { transition: transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease); }
.wl-banner:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--wl-ink); }
.wl-banner > img { transform-origin: 60% 30%; animation: sk-kenburns 26s ease-in-out infinite alternate; }
.wl-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(27, 23, 18, 0.28) 1px, transparent 1.5px) 0 0 / 5px 5px;
  -webkit-mask-image: linear-gradient(200deg, transparent 35%, #000 95%);
          mask-image: linear-gradient(200deg, transparent 35%, #000 95%);
  mix-blend-mode: multiply; opacity: 0.55;
}
.wl-banner-body h1 { text-shadow: 3px 3px 0 rgba(216, 53, 42, 0.35); }

/* Заголовки разделов: тушевая плашка-выноска. */
.wl-section-head { position: relative; border-bottom: 3px solid var(--wl-ink); }
.wl-section-head::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 54px; height: 3px; background: var(--wl-red);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--sk-ease);
}
.wl-section.is-in .wl-section-head::after, .wl-section-head.is-in::after { transform: scaleX(1); }
.wl-section h2, .wl-h2 { letter-spacing: -0.01em; }

/* Обложки: сдвинутая тень растёт при касании, как у вырезанной панели. */
.wl-card img, .wl-card-blank, .wl-tile img, .wl-tile .wl-card-blank {
  transition: transform 0.25s var(--sk-ease), box-shadow 0.25s var(--sk-ease);
  box-shadow: 4px 4px 0 var(--wl-ink);
}
.wl-card:hover img, .wl-tile:hover img, .wl-card:active img, .wl-tile:active img {
  transform: translate(-3px, -3px) rotate(-0.8deg); box-shadow: 8px 8px 0 var(--wl-red);
}
.wl-card-blank, .wl-tile .wl-card-blank {
  background:
    radial-gradient(rgba(27, 23, 18, 0.18) 1px, transparent 1.4px) 0 0 / 6px 6px,
    var(--wl-white);
}
/* Строки топа и новых глав: номер выезжает, бумага темнеет под пальцем. */
.wl-line { transition: background 0.2s, padding 0.25s var(--sk-ease); }
.wl-line:hover, .wl-line:active { background: rgba(27, 23, 18, 0.05); padding-left: 6px; }
.wl-num { text-shadow: 2px 2px 0 rgba(27, 23, 18, 0.15); }
/* Шкала очков: кольцо крутится, пока страница открыта. */
.wl-ring { position: relative; }
.wl-ring::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px dashed rgba(216, 53, 42, 0.55); animation: sk-spin 14s linear infinite;
}
@keyframes sk-spin { to { transform: rotate(360deg); } }
.wl-meter, .wl-empty {
  background:
    radial-gradient(rgba(27, 23, 18, 0.07) 1px, transparent 1.4px) 0 0 / 6px 6px,
    var(--wl-white);
  box-shadow: 5px 5px 0 var(--wl-ink);
}
.wl-btn { transition: transform 0.15s var(--sk-ease), box-shadow 0.15s var(--sk-ease); box-shadow: 3px 3px 0 var(--wl-ink); }
.wl-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--wl-ink); }
.wl-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--wl-ink); }
.wl-btn-red { box-shadow: 3px 3px 0 var(--wl-ink); }
.wl-chip { transition: transform 0.15s var(--sk-ease); }
.wl-chip:active { transform: scale(0.95); }

html[data-fx="off"] .wl-banner > img, html[data-fx="off"] .wl-ring::before,
html[data-fx="off"] .wl-head-title::after { animation: none; }
html[data-fx="off"] .wl-head-title::after { transform: skewX(-14deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .wl-banner > img, .wl-ring::before { animation: none; }
  .wl-head-title::after { animation: none; transform: skewX(-14deg) scaleX(1); }
}

/* ================================================================== */
/* WIKI — досье архива: читать легче, разделы с лицами                  */
/* ================================================================== */
.wiki {
  /* Контраст выше: прежний тусклый текст сливался с фоном. */
  --wk-dim: #8DB59A;
  --wk-text: #DCEFE2;
  --wk-line: #355A44;
  --wk-card: #101D16;
  font-size: 14px;
  background:
    radial-gradient(90% 40% at 50% -6%, rgba(159, 224, 176, 0.14), transparent 70%),
    radial-gradient(70% 40% at 100% 70%, rgba(229, 72, 77, 0.06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(159, 224, 176, 0.045) 0 1px, transparent 1px 16px),
    var(--wk-bg);
  background-attachment: fixed, fixed, local, fixed;
}
.wk-head-title { text-shadow: 0 0 14px rgba(159, 224, 176, 0.55); }
.wk-head-title::after {
  content: "▌"; margin-left: 4px; color: var(--wk-mint); animation: sk-blink 1.05s steps(1) infinite;
}
@keyframes sk-blink { 50% { opacity: 0; } }
.wk-lab { font-size: 11.5px; color: #A9CDB4; }
.wk-note, .wk-small { color: #A3C7AE; }
.wk-h2 { position: relative; padding-left: 12px; font-size: 13.5px; }
.wk-h2::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: var(--wk-mint); box-shadow: 0 0 10px var(--wk-mint); }

/* Карточки-досье: уголки скобками и сканлайн. */
.wk-box {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(159, 224, 176, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, rgba(159, 224, 176, 0.06), transparent 50%),
    var(--wk-card);
  transition: border-color 0.2s, transform 0.25s var(--sk-ease), box-shadow 0.25s var(--sk-ease);
}
.wk-box::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--wk-mint), var(--wk-mint)) 0 0 / 12px 2px no-repeat,
    linear-gradient(var(--wk-mint), var(--wk-mint)) 0 0 / 2px 12px no-repeat,
    linear-gradient(var(--wk-mint), var(--wk-mint)) 100% 100% / 12px 2px no-repeat,
    linear-gradient(var(--wk-mint), var(--wk-mint)) 100% 100% / 2px 12px no-repeat;
  opacity: 0.8;
}
button.wk-box:hover { border-color: var(--wk-mint); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(159, 224, 176, 0.15); }

/* Плитки разделов: две колонки, лица справа, свой цвет у каждого. */
.wk-secs {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: none; border: 0;
}
.wk-sec {
  --c: var(--wk-mint);
  position: relative; overflow: hidden; min-height: 92px; padding: 12px 12px 10px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 2px; align-content: start;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background:
    linear-gradient(100deg, var(--wk-card) 42%, color-mix(in srgb, var(--wk-card) 30%, transparent) 78%),
    radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%),
    var(--wk-card);
  transition: transform 0.25s var(--sk-ease), border-color 0.2s, box-shadow 0.25s var(--sk-ease);
  animation: sk-rise 0.5s var(--sk-ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.wk-sec:hover, .wk-sec:active { transform: translateY(-2px); border-color: var(--c);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in srgb, var(--c) 22%, transparent); }
.wk-sec-art { position: absolute; inset: 0 0 0 auto; width: 62%; display: flex; justify-content: flex-end; z-index: 0; pointer-events: none; }
.wk-sec-art img {
  width: 46%; height: 100%; object-fit: cover; margin-left: -14%;
  filter: grayscale(1) contrast(1.2) brightness(0.85);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
          mask-image: linear-gradient(90deg, transparent, #000 45%);
  transition: filter 0.3s, transform 0.5s var(--sk-ease);
}
.wk-sec:hover .wk-sec-art img { filter: grayscale(1) contrast(1.3) brightness(1); transform: scale(1.05); }
.wk-sec-ic, .wk-sec b, .wk-sec span.wk-sec-name { position: relative; z-index: 1; }
.wk-sec-ic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: rgba(0, 0, 0, 0.35); }
.wk-sec-ic .ic { width: 16px; height: 16px; }
.wk-sec b { font-size: 26px; line-height: 1.05; margin-top: 6px; color: var(--c); text-shadow: 0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
.wk-sec span.wk-sec-name { font-size: 11.5px; letter-spacing: 0.1em; color: var(--wk-hi); text-shadow: 0 1px 6px #000; }
.wk-sec[data-kind="character"] { --c: #9FE0B0; }
.wk-sec[data-kind="organization"] { --c: #F2B35B; }
.wk-sec[data-kind="series"] { --c: #8EC5FF; }
.wk-sec[data-kind="mastery"] { --c: #C59BFF; }
.wk-sec[data-kind="skill"] { --c: #FF7A7F; }
.wk-sec[data-kind="card"] { --c: #4FE3D8; }
.wk-sec[data-kind="path"] { --c: #FFD36E; }
.wk-sec[data-kind="term"] { --c: #B8D4C2; }
.wk-sec[data-kind="place"] { --c: #7FD3FF; }
.wk-sec[data-kind="system"] { --c: #4FE3D8; }
@keyframes sk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Списки: крупнее портрет, полоса цвета у строки под пальцем. */
.wk-line { position: relative; transition: background 0.2s, padding 0.25s var(--sk-ease); }
.wk-line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--wk-mint); transform: scaleY(0); transition: transform 0.25s var(--sk-ease); }
.wk-line:hover, .wk-line:active { background: #13241A; padding-left: 14px; }
.wk-line:hover::before, .wk-line:active::before { transform: scaleY(1); }
.wk-thumb { width: 46px; height: 56px; box-shadow: 0 0 0 1px rgba(159, 224, 176, 0.25), 0 6px 14px rgba(0, 0, 0, 0.4); }
.wk-line-body b { font-size: 14.5px; }
.wk-line-body span { font-size: 12px; color: #9DC2A8; }

/* Портрет досье: лёгкая рамка-свечение и сканлайн поверх. */
.wk-photo { box-shadow: 0 0 0 1px rgba(159, 224, 176, 0.3), 0 10px 24px rgba(0, 0, 0, 0.5); }
.wk-id-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
.wk-stamp { animation: sk-stamp 0.5s 0.15s var(--sk-ease) both; }
@keyframes sk-stamp { from { opacity: 0; transform: scale(1.8) rotate(-24deg); } to { opacity: 1; transform: none; } }
.wk-chip { transition: border-color 0.2s, color 0.2s, background 0.2s; }
.wk-chip:hover { border-color: var(--wk-mint); background: rgba(159, 224, 176, 0.08); }
.wk-btn { transition: transform 0.15s var(--sk-ease), box-shadow 0.2s; }
.wk-btn:not(.wk-btn-line):not(.wk-btn-ghost):not(.wk-btn-red) { box-shadow: 0 0 18px rgba(159, 224, 176, 0.25); }
.wk-btn:active:not(:disabled) { transform: scale(0.97); }
.wk-search { transition: border-color 0.2s, box-shadow 0.2s; }
.wk-search:focus-within { box-shadow: 0 0 0 3px rgba(159, 224, 176, 0.15), 0 0 24px rgba(159, 224, 176, 0.15); }

html[data-fx="off"] .wk-head-title::after, html[data-fx="off"] .wk-sec, html[data-fx="off"] .wk-stamp { animation: none; }
@media (prefers-reduced-motion: reduce) { .wk-head-title::after, .wk-sec, .wk-stamp { animation: none; } }

/* Колокольчик и лента уведомлений (webapp/inbox.js, 18.10.2026). */
.hub-bell {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  color: #FFFFFF; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.09));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 8px 22px rgba(0, 0, 0, 0.35);
}
.hub-bell .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hub-bell i {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center; font: 800 10.5px/1 var(--font-body); font-style: normal; color: #FFFFFF;
  background: linear-gradient(135deg, #FF5A36, #FF2E63); box-shadow: 0 0 0 2px #050507, 0 0 12px rgba(255, 46, 99, 0.7);
}
.hub-bell.has-new .ic { animation: sk-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes sk-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); }
  85% { transform: rotate(8deg); } 90% { transform: rotate(-5deg); } }
.inbox-push {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 90, 54, 0.16), rgba(255, 46, 99, 0.08)); border: 1px solid rgba(255, 255, 255, 0.12);
}
.inbox-push.is-on { background: linear-gradient(135deg, rgba(79, 227, 216, 0.14), rgba(79, 227, 216, 0.05)); }
.inbox-push > span { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; min-width: 0; }
.inbox-push > span .ic { grid-row: span 2; width: 20px; height: 20px; color: #FF7A59; }
.inbox-push.is-on > span .ic { color: #4FE3D8; }
.inbox-push em { font-style: normal; font-size: 12px; color: var(--ink-dim, #A1A1AA); }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 56vh; overflow-y: auto; }
.inbox-list li {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07);
  animation: sk-rise 0.4s var(--sk-ease) both; animation-delay: calc(min(var(--i, 0), 10) * 30ms);
}
.inbox-list li.is-new { background: rgba(255, 90, 54, 0.1); border-color: rgba(255, 90, 54, 0.35); }
.inbox-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); }
.inbox-ic .ic { width: 18px; height: 18px; }
.inbox-body { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.inbox-body em { font-style: normal; font-size: 11px; color: var(--ink-dim, #A1A1AA); }
html[data-fx="off"] .hub-bell.has-new .ic, html[data-fx="off"] .inbox-list li { animation: none; }

.inbox-push.is-hint { background: rgba(255, 198, 92, 0.08); border-color: rgba(255, 198, 92, 0.3); }
.inbox-push.is-hint > span { grid-template-columns: auto 1fr; }
.inbox-push.is-hint > span .ic { color: #FFC65C; }
.inbox-push.is-hint em { line-height: 1.45; }

/* Версия и обновления в Хабе (18.10.2026). */
.hub-version {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.09));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 12px 32px rgba(0, 0, 0, 0.38);
}
.hub-version-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(79, 227, 216, 0.35), rgba(79, 227, 216, 0.08)); }
.hub-version-ic .ic { width: 20px; height: 20px; color: #BFF7F2; }
.hub-version-text { display: grid; gap: 3px; min-width: 0; }
.hub-version-text b { font-size: 14px; }
.hub-version-text small { font-size: 12px; color: rgba(255, 255, 255, 0.62); line-height: 1.35; }
.hub-version-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Двойной день (18.10.2026). */
.hub-double { display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; padding: 12px 16px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(255, 198, 92, 0.32), rgba(255, 90, 54, 0.22));
  border: 1px solid rgba(255, 220, 140, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 30px rgba(255, 170, 60, 0.25);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: sk-glow 2.8s ease-in-out infinite; }
.hub-double .ic { width: 24px; height: 24px; color: #FFD27A; flex: none; }
.hub-double span { display: grid; gap: 2px; }
.hub-double small { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
@keyframes sk-glow { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 44px rgba(255, 170, 60, 0.45); } }
html[data-fx="off"] .hub-double { animation: none; }

/* «Продолжить чтение» в Хабе (18.10.2026). */
.hub-read { position: relative; flex: 0 0 150px; padding: 0; border-radius: 16px; overflow: hidden; text-align: left;
  aspect-ratio: 3 / 4; border: 1px solid rgba(255, 255, 255, 0.16); scroll-snap-align: start; background: #1A1A20;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); transition: transform 0.3s var(--sk-ease); }
.hub-read:hover { transform: translateY(-4px) scale(1.02); }
.hub-read img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-read-w { position: absolute; inset: 0; display: grid; place-items: center; font: 900 70px Georgia, serif; color: #F2EBDD; }
.hub-read-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 30px 10px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 40%, transparent); color: #FFF; }
.hub-read-body b { font-size: 14px; line-height: 1.15; }
.hub-read-body small { font-size: 11.5px; color: rgba(255, 255, 255, 0.75); }
.hub-read-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: linear-gradient(90deg, #FF5A36, #FF2E63); }

/* Своё превью раздела Wiki — во всю правую часть плитки. */
.wk-sec-art.is-cover { width: 72%; }
.wk-sec-art.is-cover img { width: 100%; margin-left: 0; filter: grayscale(0.35) contrast(1.1) brightness(0.85); }
.wk-sec:hover .wk-sec-art.is-cover img { filter: grayscale(0) contrast(1.1) brightness(0.95); }

/* ================================================================== */
/* LOOKISM RATE — движение (владелец 18.10.2026)                        */
/* ================================================================== */
.rate.rt-enter > * { animation: rt-screen-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes rt-screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rate.rt-enter .rt-tier-row, .rate.rt-enter .rt-box, .rate.rt-enter .rt-person,
.rate.rt-enter .rt-hero-row, .rate.rt-enter .rt-vs-row {
  animation: rt-row-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes rt-row-in { from { opacity: 0; transform: translateX(-22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.rate.rt-enter .rt-ava-wrap { animation: rt-ava-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(120ms + var(--j, 0) * 28ms); }
@keyframes rt-ava-pop { from { opacity: 0; transform: scale(0.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
.rt-ava-wrap { transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), filter 0.25s; }
.rt-ava-wrap:hover, .rt-ava-wrap:active { transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 0 12px rgba(255, 46, 166, 0.6)); }
.rt-tier-name { transition: letter-spacing 0.4s, text-shadow 0.4s; }
.rate.rt-enter .rt-tier-name { animation: rt-name-in 0.7s ease both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rt-name-in { from { letter-spacing: 0.4em; opacity: 0; } to { opacity: 1; } }
.rt-tier-row:first-child .rt-tier-name { animation: rt-glow 3s ease-in-out infinite; }
@keyframes rt-glow { 50% { text-shadow: 0 0 18px currentColor, 0 0 34px currentColor; } }
/* Батл: бойцы влетают с краёв, «VS» бьёт, полосы растут */
.rate.rt-enter .rt-fighter:first-child { animation: rt-from-left 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rate.rt-enter .rt-fighter:last-child { animation: rt-from-right 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes rt-from-left { from { opacity: 0; transform: translateX(-60px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes rt-from-right { from { opacity: 0; transform: translateX(60px) rotate(6deg); } to { opacity: 1; transform: none; } }
.rt-vs-mark { animation: rt-vs-beat 1.6s ease-in-out infinite; }
@keyframes rt-vs-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.25); } 24% { transform: scale(1); } }
.rate.rt-enter .rt-bar i { animation: rt-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.25s; transform-origin: left; }
@keyframes rt-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Кнопки и вкладки — пружина */
.rt-btn, .rt-chip, .rt-pill { transition: transform 0.18s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.2s, background 0.2s; }
.rt-btn:active, .rt-chip:active, .rt-pill:active { transform: scale(0.94); }
.rt-btn:hover { box-shadow: 0 0 22px rgba(255, 46, 166, 0.35); }
html[data-fx="off"] .rate *, html[data-fx="off"] .rate.rt-enter > * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .rate *, .rate.rt-enter > * { animation: none !important; } }

/* Lookism rate: тест «Кто ты» и дуэль (18.10.2026). */
.rt-pill-hot { background: linear-gradient(120deg, #FF2EA6, #7B2FF7); color: #FFF; border-color: transparent;
  box-shadow: 0 0 18px rgba(255, 46, 166, 0.45); animation: rt-glow 2.6s ease-in-out infinite; }
.rt-duel { background: linear-gradient(135deg, rgba(255, 46, 166, 0.18), rgba(123, 47, 247, 0.12)); border-color: rgba(255, 46, 166, 0.45); }
.rt-who-progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.rt-who-progress i { display: block; height: 100%; background: linear-gradient(90deg, #7B2FF7, #FF2EA6); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.rt-who-q b { font-size: 20px; line-height: 1.3; }
.rt-who-answers { display: grid; gap: 10px; }
.rt-who-a { text-align: left; justify-content: flex-start; min-height: 54px; animation: rt-row-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms); }
.rt-who-a:hover { border-color: #FF2EA6; box-shadow: 0 0 20px rgba(255, 46, 166, 0.35); }
.rt-who-card { text-align: center; }
.rt-who-face { width: 170px; height: 170px; border-radius: 50%; overflow: hidden; margin: 8px auto; display: block;
  box-shadow: 0 0 0 3px #FF2EA6, 0 0 40px rgba(255, 46, 166, 0.6); animation: rt-ava-pop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.rt-who-face img { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================== */
/* LOOKISM RATE — вид 2 (владелец 18.10.2026: «улучши дизайн»).          */
/* Скринтон вместо шума, цвет тира везде, кольцо и полоса до тира.      */
/* ================================================================== */
.rate {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1.6px) 0 0 / 10px 10px,
    radial-gradient(80% 40% at 90% 0%, rgba(255, 46, 166, 0.42), transparent 70%),
    radial-gradient(70% 35% at 0% 40%, rgba(22, 217, 227, 0.24), transparent 70%),
    radial-gradient(60% 30% at 70% 100%, rgba(123, 47, 247, 0.35), transparent 70%),
    var(--rt-bg);
  background-attachment: fixed;
}
.rt-head { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

/* Тир-лист: у каждого ряда — полоса и свет своего цвета. */
.rt-tierlist { padding: 6px 8px; }
.rt-tier-row {
  position: relative; padding: 8px 8px 8px 12px; margin: 4px 0; border-radius: 14px; border-bottom: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, #B06CFF) 20%, transparent), transparent 70%);
}
.rt-tier-row::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--c, #B06CFF); box-shadow: 0 0 12px var(--c, #B06CFF);
}
.rt-tier-row:first-child { overflow: hidden; }
.rt-tier-row:first-child::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-100%); animation: rt-sheen 4.5s ease-in-out infinite;
}
@keyframes rt-sheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.rt-person .rt-ava { transition: transform 0.2s; }
.rt-person:hover .rt-ava, .rt-person:active .rt-ava { transform: translateY(-2px) scale(1.07); }

/* Карточка: свет тира, водяной знак, вращающееся кольцо. */
.rt-hero {
  overflow: hidden; border-color: color-mix(in srgb, var(--tc, #FF2EA6) 70%, white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 18px 50px color-mix(in srgb, var(--tc, #FF2EA6) 35%, transparent);
}
.rt-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, 0.05) 22px 24px);
}
.rt-hero > * { position: relative; }
.rt-hero > .rt-chip { position: absolute; }
.rt-hero > .rt-hero-mark {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; rotate: -8deg;
  font-family: var(--rt-display); font-size: 82px; line-height: 1; white-space: nowrap; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--tc, #FF2EA6) 45%, transparent); opacity: 0.55;
}
.rt-ring { position: relative; display: block; padding: 6px; border-radius: 50%; }
.rt-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--tc, #FF2EA6), #7B2FF7, #16D9E3, var(--tc, #FF2EA6));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: rt-spin 6s linear infinite; filter: drop-shadow(0 0 8px var(--tc, #FF2EA6));
}
.rt-psl {
  background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--tc, #FF2EA6) 60%, white));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tc, #FF2EA6) 60%, transparent));
}
.rt-next { display: block; width: min(220px, 70%); height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.rt-next i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--tc, #FF2EA6), #16D9E3); box-shadow: 0 0 10px var(--tc, #FF2EA6);
  animation: rt-bar-grow 1s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: left;
}
.rt-bar i { background: linear-gradient(90deg, #7B2FF7, #FF2EA6 70%, #FFB8E2); box-shadow: 0 0 8px rgba(255, 46, 166, 0.45); }

/* Дуэль на главной. */
.rt-duel { position: relative; overflow: hidden; display: grid; gap: 6px; }
.rt-duel-ic {
  position: absolute; right: -6px; top: -14px; font-size: 92px; line-height: 1; opacity: 0.12; rotate: 12deg; pointer-events: none;
}
.rt-duel-title { font-family: var(--rt-display); font-size: 17px; letter-spacing: 0.01em; }

/* Батл: стороны в своих цветах, вспышка на итоге, победитель светится. */
.rt-vs {
  position: relative; padding: 14px 8px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(105deg, rgba(255, 46, 166, 0.28) 0 48%, rgba(22, 217, 227, 0.22) 52% 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.rt-vs-mark {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #FF2EA6, #7B2FF7); box-shadow: 0 0 24px rgba(255, 46, 166, 0.6);
}
.rt-vs.is-done::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: #FFF;
  animation: rt-flash 0.5s ease-out both;
}
@keyframes rt-flash { from { opacity: 0.55; } to { opacity: 0; } }
.rt-vs.is-a .rt-fighter:first-child .rt-ava, .rt-vs.is-b .rt-fighter:last-child .rt-ava {
  box-shadow: 0 0 0 3px #FFD84D, 0 0 28px rgba(255, 216, 77, 0.7);
}
.rt-verdict {
  font-size: 22px; background: linear-gradient(90deg, #FFB8E2, #FFFFFF, #9EF5FA);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(22, 217, 227, 0.5));
  animation: rt-ava-pop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
html[data-fx="off"] .rt-ring::before, html[data-fx="off"] .rt-tier-row:first-child::after,
html[data-fx="off"] .rt-vs.is-done::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rt-ring::before, .rt-tier-row:first-child::after, .rt-vs.is-done::after, .rt-next i { animation: none !important; }
}

/* Уведомление ведёт в раздел (18.10.2026): строка ленты нажимается. */
.inbox-list li.is-go { cursor: pointer; }
.inbox-list li.is-go:active { background: rgba(255, 255, 255, 0.06); }
.inbox-go { margin-left: auto; align-self: center; opacity: 0.6; display: flex; }
.inbox-go { font-size: 22px; line-height: 1; padding-left: 6px; }

/* Версия сверху Хаба (18.10.2026): тонкая стеклянная строка под шапкой. */
.hub-verbar { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; padding: 6px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.hub-verbar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0; background: none;
  border: 0; color: inherit; font-size: 12px; text-align: left; }
.hub-verbar-main svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: 0.8; }
.hub-verbar-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.hub-verbar-up { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: #FFD84D; color: #111;
  font-size: 12px; font-weight: 800; text-decoration: none; }
.hub-verbar.is-old { border-color: rgba(255, 216, 77, 0.6); }

/* Достижения в Хабе (18.10.2026): условие, прогресс, награда. */
.ach-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ach { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ach.is-done { border-color: rgba(255, 216, 77, 0.55); background: rgba(255, 216, 77, 0.08); }
.ach-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); }
.ach.is-done .ach-ic { background: #FFD84D; color: #111; }
.ach-ic svg { width: 18px; height: 18px; }
.ach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-body b { font-size: 15px; }
.ach-how { font-size: 13px; font-weight: 700; color: #9EF5FA; }
.ach-body em { font-style: normal; font-size: 12px; opacity: 0.65; }
.ach-bar { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ach-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7B2FF7, #FF2EA6); }
.ach-side { flex: 0 0 auto; text-align: right; font-size: 13px; font-weight: 800; display: flex; flex-direction: column; gap: 2px; }
.ach-side small { font-size: 11px; font-weight: 600; opacity: 0.75; display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.ach-side small svg { width: 12px; height: 12px; }

/* Wiki → Система → «Статы и шкала» (18.10.2026). */
.wk-grade-stats { display: grid; gap: 6px; }
.wk-grade-stats .wk-row-sb { gap: 10px; align-items: baseline; }
.wk-grade-stats .wk-dim { text-align: right; font-size: 11px; }
.wk-grade-wrap { overflow-x: auto; border: 1px solid var(--wk-line); }
.wk-grades { width: 100%; border-collapse: collapse; font-size: 12px; }
.wk-grades th { text-align: left; padding: 6px 8px; color: var(--wk-dim); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; border-bottom: 1px solid var(--wk-line); background: var(--wk-card); }
.wk-grades td { padding: 5px 8px; border-bottom: 1px solid rgba(46, 74, 56, 0.5); white-space: nowrap; }
.wk-grades td b { color: var(--wk-mint); }
.wk-grades tr.is-over td { color: var(--wk-dim); }
.wk-grades tr.is-over td b { color: #E5484D; }

/* Шпаргалка к правке Wiki (18.10.2026). */
.wk-cheat summary { cursor: pointer; list-style: none; color: var(--wk-mint); }
.wk-cheat summary::-webkit-details-marker { display: none; }
.wk-cheat[open] summary { margin-bottom: 8px; }
.wk-cheat-tips { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; line-height: 1.45; }
.wk-cheat-row { width: 100%; padding: 5px 0; background: none; border: 0; border-bottom: 1px dashed var(--wk-line);
  color: inherit; font: inherit; text-align: left; }
.wk-cheat-grades { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--wk-dim); margin-top: 4px; }
.wk-cheat-grades b { color: var(--wk-mint); }

/* Свои тир-листы в Wiki (18.10.2026). */
.wk-tl-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.wk-tl { display: grid; gap: 6px; }
.wk-tl-row { display: flex; gap: 6px; align-items: stretch; min-height: 60px; border: 1px solid var(--wk-line); background: var(--wk-card); }
.wk-tl-row.is-on { border-color: var(--wk-mint); box-shadow: 0 0 0 1px var(--wk-mint) inset; }
.wk-tl-tier { flex: 0 0 52px; border: 0; font: 900 26px var(--wk-mono); color: #111; cursor: pointer; }
.wk-tl-tier.t-S { background: #E5484D; } .wk-tl-tier.t-A { background: #F0963C; } .wk-tl-tier.t-B { background: #F0D250; }
.wk-tl-tier.t-C { background: #78C878; } .wk-tl-tier.t-D { background: #5AA0E6; }
.wk-tl-cells { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; align-content: flex-start; }
.wk-tl-empty { align-self: center; font-size: 11px; padding: 0 6px; }
.wk-tl-face { width: 48px; height: 48px; padding: 0; border: 1px solid var(--wk-line); background: #0B110E; overflow: hidden; cursor: pointer; }
.wk-tl-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-tl-face span { display: grid; place-items: center; height: 100%; color: var(--wk-mint); font-weight: 800; }
.wk-tl-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
.wk-tl-pool .wk-tl-face { width: 100%; height: auto; aspect-ratio: 1; }
.wk-tl.is-looks .wk-tl-row { border-color: rgba(255, 46, 166, 0.35); }

/* Тир-лист — красивее (владелец 18.10.2026: «сделай тир-лист красивее»). */
.wk-tl-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 16px;
  border: 1px solid var(--wk-line); background: linear-gradient(120deg, rgba(229, 72, 77, 0.18), rgba(240, 210, 80, 0.10) 45%, rgba(90, 160, 230, 0.14)); }
.wk-tl-hero::after { content: "S A B C D"; position: absolute; right: -6px; top: -12px; font: 900 64px var(--wk-mono);
  letter-spacing: -4px; color: rgba(255, 255, 255, 0.05); pointer-events: none; }
.wk-tl-hero b { font-size: 18px; letter-spacing: 0.18em; color: var(--wk-hi); }
.wk-tl-hero span { font-size: 12px; color: var(--wk-mint); }
.wk-tl-hero.is-looks { background: linear-gradient(120deg, rgba(255, 46, 166, 0.28), rgba(123, 47, 247, 0.2) 55%, rgba(22, 217, 227, 0.15)); }
.wk-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 3px;
  border: 1px solid var(--wk-line); background: #0B110E; }
.wk-seg button { padding: 9px 6px; border: 0; background: none; color: var(--wk-dim); font: 700 12px var(--wk-mono);
  letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s, color 0.2s; }
.wk-seg button.is-on { background: var(--wk-mint); color: #0B110E; }
.wk-tl { gap: 8px; }
.wk-tl-row { --tc: #9FE0B0; min-height: 72px; border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 16%, #0F1A14), #0F1A14 60%); transition: box-shadow 0.25s, border-color 0.25s; }
.wk-tl-row.r-S { --tc: #E5484D; } .wk-tl-row.r-A { --tc: #F0963C; } .wk-tl-row.r-B { --tc: #F0D250; }
.wk-tl-row.r-C { --tc: #78C878; } .wk-tl-row.r-D { --tc: #5AA0E6; }
.wk-tl-row.is-on { border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc) inset, 0 0 22px color-mix(in srgb, var(--tc) 45%, transparent);
  animation: wk-tl-pulse 1.8s ease-in-out infinite; }
@keyframes wk-tl-pulse { 50% { box-shadow: 0 0 0 1px var(--tc) inset, 0 0 8px color-mix(in srgb, var(--tc) 25%, transparent); } }
.wk-tl-tier { flex: 0 0 60px; font-size: 30px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 100%, white 25%), var(--tc)) !important; }
.wk-tl-face { position: relative; width: 56px; height: 56px; border-radius: 6px; border-color: rgba(255, 255, 255, 0.12);
  transition: transform 0.18s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.2s; }
.wk-tl-face:hover, .wk-tl-face:active { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); }
.wk-tl-face.is-fresh { animation: wk-tl-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes wk-tl-pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
.wk-tl-face i { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 2px 2px; font-style: normal; font-size: 9px;
  line-height: 1.1; color: #fff; text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-tl-pool { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.wk-tl.is-looks .wk-tl-row { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 18%, #1a1030), #160d28 60%); }
html[data-fx="off"] .wk-tl-row.is-on, html[data-fx="off"] .wk-tl-face.is-fresh { animation: none; }
@media (prefers-reduced-motion: reduce) { .wk-tl-row.is-on, .wk-tl-face.is-fresh { animation: none; } }

/* ================================================================== */
/* LOOKISM RATE — тир-лист как на tiermaker (владелец 18.10.2026:       */
/* «сделай тир-лист красивее»): цветной блок тира слева, крупные лица.  */
/* ================================================================== */
.rt-tierlist { padding: 8px; display: grid; gap: 8px; background: rgba(12, 6, 32, 0.55); }
.rate .rt-tier-row { margin: 0; padding: 0; gap: 0; align-items: stretch; min-height: 84px; border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c, #B06CFF) 45%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, #B06CFF) 14%, rgba(20, 10, 40, 0.9)), rgba(20, 10, 40, 0.75) 70%); }
.rate .rt-tier-row::before { display: none; }
.rate .rt-tier-name { width: 96px; justify-content: center; align-items: center; text-align: center; gap: 4px; padding: 8px 4px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, white 18%), color-mix(in srgb, var(--c) 70%, black 25%)); }
.rate .rt-tier-name b { color: #0C0620; font-size: 12px; line-height: 1.1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); word-break: keep-all; white-space: nowrap; letter-spacing: -0.02em; }
.rate .rt-tier-name i { color: rgba(12, 6, 32, 0.75); font-weight: 800; font-size: 10px; }
.rate .rt-tier-people { flex: 1; padding: 8px; gap: 8px 6px; align-content: flex-start; }
.rate .rt-person { width: 58px; }
.rate .rt-person .rt-ava { --s: 52px !important; width: 52px; height: 52px; border-radius: 14px !important;
  box-shadow: 0 0 0 2px var(--ring), 0 6px 14px rgba(0, 0, 0, 0.45); }
.rate .rt-person span { font-size: 10px; max-width: 58px; color: #EDE3FF; }
.rate .rt-ava.is-canon img { filter: none; } /* лица — без фильтров */
.rate .rt-tier-row:first-child { border-color: #FFD84D; box-shadow: 0 0 26px rgba(255, 216, 77, 0.35); }
.rate .rt-tier-row:first-child .rt-tier-name { background: linear-gradient(160deg, #FFF3B0, #FFD84D 45%, #E0A800); }

/* Wiki: «Гора» и «Сильнейшие» — красивее (18.10.2026). */
.wk-hh-ph { display: block; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--wk-line); flex: 0 0 auto; }
.wk-hh-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-hh-ph.is-sm { width: 40px; height: 40px; }
.wk-hh-ph.is-big { width: 132px; height: 132px; border: 2px solid #FFD84D; box-shadow: 0 0 30px rgba(255, 216, 77, 0.35); }
.wk-hh-king { position: relative; padding: 18px 14px; border: 1px solid rgba(255, 216, 77, 0.45); text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 216, 77, 0.16), transparent 60%), var(--wk-card); }
.wk-hh-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; margin-top: 8px; }
.wk-hh-hero b { font-size: 22px; letter-spacing: 0.06em; color: #FFE89A; }
.wk-hh-dots { display: flex; gap: 6px; }
.wk-hh-dots i { width: 10px; height: 10px; border: 1px solid #FFD84D; }
.wk-hh-dots i.is-on { background: #FFD84D; box-shadow: 0 0 8px #FFD84D; }
.wk-hh-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.wk-hh-who { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; background: #0B110E;
  border: 1px solid var(--wk-line); color: inherit; font: inherit; cursor: pointer; }
.wk-hh-who .wk-hh-ph { width: 72px; height: 72px; }
.wk-hh-who.is-a { border-color: rgba(229, 72, 77, 0.6); } .wk-hh-who.is-b { border-color: rgba(90, 160, 230, 0.6); }
.wk-hh-vsmark { font-size: 20px; color: var(--wk-mint); text-shadow: 0 0 10px var(--wk-mint); }
.wk-hh-board { display: grid; gap: 6px; }
.wk-hh-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--wk-line);
  background: var(--wk-card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wk-hh-rank { width: 26px; text-align: center; font-size: 16px; color: var(--wk-dim); }
.wk-hh-row.m-1 { border-color: #FFD84D; } .wk-hh-row.m-1 .wk-hh-rank { color: #FFD84D; }
.wk-hh-row.m-2 { border-color: #C9D3DD; } .wk-hh-row.m-2 .wk-hh-rank { color: #C9D3DD; }
.wk-hh-row.m-3 { border-color: #D08A4E; } .wk-hh-row.m-3 .wk-hh-rank { color: #D08A4E; }
.wk-hh-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.wk-hh-bar, .wk-top-bar { display: block; height: 4px; background: rgba(159, 224, 176, 0.12); }
.wk-hh-bar i, .wk-top-bar i { display: block; height: 100%; background: var(--wk-mint); }
.wk-hh-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.wk-hh-champ { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 8px; border: 1px solid var(--wk-line); background: var(--wk-card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wk-hh-champ .wk-hh-ph { grid-row: span 2; }
.wk-hh-champ span { font-size: 10px; }
.wk-pod { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; margin: 4px 0 10px; }
.wk-pod-col { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer; text-align: center; }
.wk-pod-ph { position: relative; display: block; width: 72px; height: 72px; border: 2px solid var(--pc); }
.wk-pod-ph img, .wk-pod-ph .wk-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-pod-ph i { position: absolute; right: -8px; bottom: -8px; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--pc); color: #111; font-style: normal; font-weight: 900; font-size: 13px; }
.wk-pod-col b { font-size: 12px; line-height: 1.2; }
.wk-pod-col .wk-dim { font-size: 11px; }
.wk-pod-step { display: block; width: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 45%, transparent), transparent);
  border-top: 2px solid var(--pc); }
.wk-pod-col.p-1 { --pc: #FFD84D; } .wk-pod-col.p-1 .wk-pod-ph { width: 92px; height: 92px; box-shadow: 0 0 24px rgba(255, 216, 77, 0.35); }
.wk-pod-col.p-1 .wk-pod-step { height: 70px; }
.wk-pod-col.p-2 { --pc: #C9D3DD; } .wk-pod-col.p-2 .wk-pod-step { height: 48px; }
.wk-pod-col.p-3 { --pc: #D08A4E; } .wk-pod-col.p-3 .wk-pod-step { height: 34px; }
.wk-top-line .wk-line-body { gap: 4px; }
.wk-top-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.wk-top-tabs .wk-chip { flex: 0 0 auto; }

/* Категории достижений (18.10.2026). */
.ach-cats { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none; }
.ach-cat { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06); color: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.ach-cat b { margin-left: 4px; opacity: 0.7; }
.ach-cat.is-on { background: #FFD84D; color: #111; border-color: transparent; }
.ach-cat.is-on b { opacity: 1; }

/* Выдача карты в панели владельца (18.10.2026). */
.admin-grant-card { grid-column: 1 / -1; }

/* Как открыть черту (18.10.2026). */
.trait-how { margin: 6px 0 0; color: #9EF5FA; display: flex; gap: 6px; align-items: flex-start; }
.trait-how svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }

/* Обложки входов на главной Wiki (18.10.2026). */
.wk-covers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wk-cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 168px; padding: 0;
  overflow: hidden; border: 1px solid var(--wk-line); background: var(--wk-card); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform 0.2s, border-color 0.2s; }
.wk-cover:active { transform: scale(0.98); }
.wk-cover:hover { border-color: var(--wk-mint); }
.wk-cover-tl { grid-column: 1 / -1; min-height: 150px; }
.wk-cover-art { position: absolute; inset: 0 0 52px 0; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 10px; }
.wk-cover-text { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px;
  background: linear-gradient(transparent, rgba(11, 17, 14, 0.96) 35%); }
.wk-cover-text b { font-size: 14px; letter-spacing: 0.14em; color: var(--wk-hi); }
.wk-cover-text span { font-size: 11px; color: var(--wk-mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-cover-top { background: radial-gradient(90% 70% at 50% 100%, rgba(255, 216, 77, 0.18), transparent 70%), var(--wk-card); }
.wk-cover-pod { position: relative; display: block; width: 44px; height: 44px; border: 2px solid var(--pc); }
.wk-cover-pod img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-cover-pod i { position: absolute; right: -6px; bottom: -6px; width: 18px; height: 18px; display: grid; place-items: center;
  background: var(--pc); color: #111; font: 900 11px var(--wk-mono); font-style: normal; }
.wk-cover-pod.p-1 { --pc: #FFD84D; width: 60px; height: 60px; margin-bottom: 14px; box-shadow: 0 0 18px rgba(255, 216, 77, 0.4); }
.wk-cover-pod.p-2 { --pc: #C9D3DD; margin-bottom: 4px; } .wk-cover-pod.p-3 { --pc: #D08A4E; }
.wk-cover-hill { background: radial-gradient(80% 70% at 50% 35%, rgba(229, 72, 77, 0.22), transparent 70%), var(--wk-card); }
.wk-cover-king { position: relative; display: block; width: 76px; height: 76px; border: 2px solid #FFD84D; margin-bottom: 6px;
  box-shadow: 0 0 22px rgba(255, 216, 77, 0.35); }
.wk-cover-king img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-cover-king em { position: absolute; left: 50%; top: -18px; translate: -50% 0; font-style: normal; font-size: 22px; }
.wk-cover-king.is-empty { border-style: dashed; }
.wk-cover-tiers { flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; padding: 10px 12px; }
.wk-cover-tier { display: flex; align-items: center; gap: 3px; height: 26px; background: rgba(255, 255, 255, 0.03); }
.wk-cover-tier b { width: 26px; height: 26px; display: grid; place-items: center; color: #111; font: 900 14px var(--wk-mono); }
.wk-cover-tier.t-S b { background: #E5484D; } .wk-cover-tier.t-A b { background: #F0963C; } .wk-cover-tier.t-B b { background: #F0D250; }
.wk-cover-tier img { width: 26px; height: 26px; object-fit: cover; }
.wk-cover-tl .wk-cover-tier { height: 34px; }
.wk-cover-tl .wk-cover-tier b, .wk-cover-tl .wk-cover-tier img { width: 34px; height: 34px; }

/* Плитки разделов Wiki (19.10.2026: «слева зелёный прозрачный градиент
   перекрывает превью»): лица больше не растворяются по одному — мягкий край
   один, у всей полосы превью, и узкий. */
.wk-sec-art { -webkit-mask-image: none !important; mask-image: none !important; border-left: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.wk-sec-art img { -webkit-mask-image: none; mask-image: none; width: 34%; margin-left: 0; border-left: 1px solid rgba(0, 0, 0, 0.6); }
.wk-sec-art.is-cover img { width: 100%; border-left: 0; }
.wk-sec { background: var(--wk-card); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c) 70%, transparent); }
.wk-sec-ic, .wk-sec b, .wk-sec span.wk-sec-name { text-shadow: 0 1px 8px #000, 0 0 2px #000; }

/* ================================================================== */
/* WAR → Империя (18.10.2026): уголь, кровь, латунь — как весь WAR.     */
/* ================================================================== */
.emp-list { display: grid; gap: 10px; }
.emp-biz, .emp-base { position: relative; overflow: hidden; border: 1px solid rgba(231, 176, 74, 0.28); border-radius: 14px;
  background: linear-gradient(160deg, rgba(40, 30, 26, 0.9), rgba(18, 14, 14, 0.95)); animation: sk-rise 0.45s both;
  animation-delay: calc(var(--i, 0) * 50ms); }
.emp-biz.is-closed { filter: saturate(0.4); }
.emp-sign { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid rgba(231, 176, 74, 0.2); }
.emp-biz-body { display: grid; gap: 6px; padding: 10px 12px 12px; }
.emp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.emp-row b { font-size: 16px; }
.emp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.emp-stats span, .emp-cash span { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.emp-stats small, .emp-cash small { font-size: 10px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.06em; }
.emp-stats b { font-size: 13px; color: #e7b04a; }
.emp-perk { margin: 0; font-size: 12px; color: #e7b04a; display: flex; gap: 6px; align-items: center; }
.emp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.emp-cash { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.emp-cash b { font-size: 18px; color: #e7b04a; }
.emp-cash .btn { grid-column: 1 / -1; }
.emp-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.emp-kind { display: grid; gap: 3px; padding: 10px; border-radius: 12px; text-align: left; color: inherit; cursor: pointer;
  border: 1px solid hsl(var(--h) 60% 50% / 0.35); background: linear-gradient(150deg, hsl(var(--h) 70% 40% / 0.25), rgba(18, 14, 14, 0.9)); }
.emp-kind.is-on { border-color: hsl(var(--h) 90% 65%); box-shadow: 0 0 18px hsl(var(--h) 90% 60% / 0.45); }
.emp-kind-ic { font-size: 24px; }
.emp-kind small { font-size: 11px; opacity: 0.75; line-height: 1.35; }
.emp-kind em { font-style: normal; font-size: 11px; color: hsl(var(--h) 90% 75%); }
.emp-budgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.emp-budget { display: grid; gap: 2px; padding: 8px; border-radius: 12px; color: inherit; text-align: left; cursor: pointer;
  border: 1px solid rgba(231, 176, 74, 0.25); background: rgba(255, 255, 255, 0.03); }
.emp-budget.is-on { border-color: #e7b04a; background: rgba(231, 176, 74, 0.14); }
.emp-budget span { color: #e7b04a; font-weight: 800; font-size: 13px; }
.emp-budget small { font-size: 10px; opacity: 0.7; }
.emp-roll { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.emp-gold { background: linear-gradient(135deg, #f7d774, #e7b04a 50%, #b07a1a); color: #1a1208; border: 0; font-weight: 800; }
.emp-odds { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; margin: 8px 0; }
.emp-odds span { color: var(--rc); }
.emp-men, .emp-targets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.emp-man, .emp-target { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--rc, #e2483a); animation: sk-rise 0.4s both;
  animation-delay: calc(var(--i, 0) * 30ms); }
.emp-man-ava { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; font-weight: 900;
  background: color-mix(in srgb, var(--rc) 35%, #1a1414); color: #fff; }
.emp-man-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.emp-man-body b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-man-body small { font-size: 11px; opacity: 0.7; }
.emp-job, .emp-station { max-width: 46%; font-size: 12px; padding: 6px; }
.emp-legs { display: grid; gap: 8px; }
.emp-leg { display: flex; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03); animation: sk-rise 0.4s both; animation-delay: calc(var(--i, 0) * 30ms); }
.emp-leg.is-mine { border-color: #e7b04a; box-shadow: 0 0 16px rgba(231, 176, 74, 0.25); }
.emp-leg-face { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; border: 1px solid rgba(231, 176, 74, 0.4); }
.emp-leg-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.emp-leg-body small { font-size: 11px; opacity: 0.75; }
.emp-trust { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.emp-trust i { display: block; height: 100%; background: linear-gradient(90deg, #e2483a, #e7b04a); }
.emp-base { display: flex; }
.emp-base-lvl { flex: 0 0 56px; display: grid; place-items: center; font: 900 30px var(--font-display, sans-serif); color: #1a1208;
  background: linear-gradient(160deg, #f7d774, #b07a1a); }
.emp-squad { display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.emp-pick { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.emp-pick.is-leg { color: #e7b04a; }
.emp-result { margin: 0 0 10px; padding: 12px; border-radius: 14px; white-space: pre-line; font-size: 13px; }
.emp-result.is-won { background: rgba(124, 197, 138, 0.15); border: 1px solid #7cc58a; }
.emp-result.is-lost { background: rgba(226, 72, 58, 0.15); border: 1px solid #e2483a; }
.emp-gov { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.emp-gov.is-held { border: 1px solid #e7b04a; box-shadow: 0 0 20px rgba(231, 176, 74, 0.25); }
.emp-gov-ic { font-size: 36px; }
.emp-gov div { display: grid; gap: 2px; }
.emp-gov small { font-size: 12px; opacity: 0.75; }
.emp-laws { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.emp-law { display: grid; gap: 2px; padding: 8px; border-radius: 12px; text-align: left; color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.emp-law.is-on { border-color: #e7b04a; background: rgba(231, 176, 74, 0.12); }
.emp-law small { font-size: 11px; opacity: 0.7; }
.emp-crest { width: 88px; height: 100px; margin: 0 auto 8px; display: grid; place-items: center; color: #111;
  background: var(--cc); clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%); }
.emp-crest svg { width: 40px; height: 40px; }
.emp-colors, .emp-emblems { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
.emp-color { width: 30px; height: 30px; border-radius: 50%; background: var(--cc); border: 2px solid transparent; cursor: pointer; }
.emp-color.is-on { border-color: #fff; box-shadow: 0 0 10px var(--cc); }
.emp-emblem { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.emp-emblem.is-on { border-color: #e7b04a; color: #e7b04a; }
/* 19.10.2026, второй заход: никакой маски и затемнения на превью разделов. */
.wk-sec-art img, .wk-sec-art.is-cover img { -webkit-mask-image: none !important; mask-image: none !important; filter: grayscale(1) contrast(1.15); }
.wk-sec:hover .wk-sec-art img { filter: grayscale(0.4) contrast(1.15); }

/* Фильтры бойцов и перетаскивание в тир-листе (19.10.2026). */
.wk-flt-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; }
.wk-flt-sel { display: grid; gap: 3px; min-width: 0; }
.wk-flt-sel span { font-size: 10px; letter-spacing: 0.12em; color: var(--wk-dim); }
.wk-flt-sel select { width: 100%; min-width: 0; padding: 8px 6px; background: #0B110E; color: var(--wk-text);
  border: 1px solid var(--wk-line); font: 12px var(--wk-mono); }
.wk-flt-chk { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--wk-text); }
.wk-flt-bar .wk-btn { grid-column: 1 / -1; }
.wk-tl-tier { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.wk-tl-tier small { font: 700 10px var(--wk-mono); opacity: 0.7; }
.wk-tl-row.is-over, .wk-tl-pool.is-over { box-shadow: 0 0 0 2px var(--wk-mint) inset, 0 0 24px rgba(159, 224, 176, 0.35); }
.wk-tl-face { touch-action: none; user-select: none; -webkit-user-select: none; }
.wk-tl-face.is-dragging { opacity: 0.3; }
.wk-tl-ghost { position: fixed; left: 0; top: 0; width: 56px !important; height: 56px !important; z-index: 9999; pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--wk-mint); transform-origin: center; opacity: 0.95; }
.wk-tl-hint { font-size: 11px; }

/* Плитки разделов Wiki (владелец 19.10.2026: «ты не убрал» — слева тёмная заливка
   закрывала превью). Картинка — на всю плитку, своё превью без фильтров; число и
   название — на маленьких плашках, а не на дымке поверх картинки. */
.wk-sec { background: var(--wk-card) !important; }
.wk-sec-art, .wk-sec-art.is-cover { inset: 0 !important; width: 100% !important; border-left: 0 !important; }
.wk-sec-art img { flex: 1 1 0; min-width: 0; width: auto !important; height: 100% !important; display: block;
  object-fit: cover; margin: 0 !important; border-left: 1px solid rgba(0, 0, 0, 0.6); }
.wk-sec-art img:first-child { border-left: 0; }
.wk-sec-art.is-cover img { flex: 1 1 100%; border-left: 0; filter: none !important; }
.wk-sec:hover .wk-sec-art.is-cover img { filter: none !important; }
.wk-sec-ic, .wk-sec b, .wk-sec span.wk-sec-name { justify-self: start; text-shadow: none !important; }
.wk-sec-ic { background: rgba(5, 9, 7, 0.82) !important; }
.wk-sec b, .wk-sec span.wk-sec-name { background: rgba(5, 9, 7, 0.82); padding: 1px 6px; }
.wk-sec-art img, .wk-sec:hover .wk-sec-art img { filter: none !important; }
/* Подписи плиток мельче (владелец 19.10.2026: «сделай текст для превью категорий меньше»). */
.wk-sec b { font-size: 17px !important; margin-top: 4px; padding: 0 5px; }
.wk-sec span.wk-sec-name { font-size: 9px !important; letter-spacing: 0.08em; padding: 1px 5px; }
.wk-sec-ic { width: 20px; height: 20px; }
.wk-sec-ic .ic { width: 12px; height: 12px; }
/* Подпись — слева снизу одной строкой на прозрачной плашке (владелец 19.10.2026:
   «сделай прозрачнее и расположи слева снизу»). Значок — маленький, сверху. */
.wk-sec { grid-template-columns: auto 1fr !important; grid-template-rows: 1fr auto !important; align-items: end; gap: 0 !important; padding: 7px !important; }
.wk-sec-ic { grid-column: 1; grid-row: 1; align-self: start; width: 18px !important; height: 18px !important; background: rgba(5, 9, 7, 0.45) !important; border-color: transparent !important; opacity: 0.85; }
.wk-sec b, .wk-sec span.wk-sec-name { grid-row: 2; align-self: end; margin: 0 !important; line-height: 20px !important; background: rgba(5, 9, 7, 0.5) !important; }
.wk-sec b { grid-column: 1; padding: 0 3px 0 6px !important; }
.wk-sec span.wk-sec-name { grid-column: 2; justify-self: start; padding: 0 6px 0 3px !important; }
.wk-sec b, .wk-sec span.wk-sec-name { text-shadow: 0 1px 2px #000, 0 0 1px #000 !important; }
/* Мелкие правки 19.10.2026 (обход глазами игрока на телефоне). */
/* Плитки: название в одну строку — «Уникальные приёмы» не налезает на число. */
.wk-sec { grid-template-columns: auto minmax(0, 1fr) !important; }
.wk-sec span.wk-sec-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Обложка тир-листов: ряды S/A/B не срезаны сверху и не лезут на заголовок. */
.wk-cover-tl { min-height: 184px; }
.wk-cover-tl .wk-cover-tiers { padding: 8px 12px; }
/* Портреты в досье и списках — исходник, без серого и без полос поверх. */
.wk-photo, .wk-thumb { filter: none !important; }
.wk-id-photo::after { content: none !important; }
/* Тир-лист: пустой ряд ниже — список бойцов ближе, тащить недалеко. */
.wk-tl-row { min-height: 52px; }
.wk-tl-tier { flex-basis: 52px; font-size: 26px; }
/* Lookism rate: вкладки ровной сеткой 2×2, кнопки дуэли в одну строку. */
.rate .rt-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.rate .rt-tabs .rt-pill { justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-duel .rt-btn { white-space: nowrap; font-size: 14px; padding-left: 8px; padding-right: 8px; }
.rt-tier-none { align-self: center; padding: 0 6px; font-size: 12px; opacity: 0.55; }
.rate .rt-tabs .rt-pill { font-size: 12px; padding-left: 6px; padding-right: 6px; letter-spacing: 0; }
.rt-tier-none { margin: auto 0; }
.wk-sec span.wk-sec-name { letter-spacing: 0.02em !important; }
.wk-sec b { padding-right: 2px !important; } .wk-sec span.wk-sec-name { padding-left: 2px !important; }

/* Четыре фильтра (с «Проверкой» у владельца) — сеткой 2×2. */
.wk-flt-bar:has(> .wk-flt-sel:nth-of-type(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rate .rt-tier-people:has(> .rt-tier-none) { align-content: center; align-items: center; }

/* Мелкие правки Lvl Up 19.10.2026 (обход на телефоне). */
/* Шапка: имя над уровнем — «Тестовый» было «ТЕСТ…». */
@media (max-width: 440px) {
  .hud-id { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hud-id .hud-name { max-width: 12ch; font-size: 12px; }
  .hud-id .chip { font-size: 9px; padding: 1px 5px; }
}
/* Полосы без своего цвета были пустыми (полоса Великого зла 60 000 / 60 000). */
.meter-fill { background: var(--sys); }
.boss-alive .meter-fill, .lv-boss .meter-fill { background: linear-gradient(90deg, #FF6B6B, #E5484D); }
/* Плитки мест: «сейчас» и цена — в углу, подпись во всю ширину, а не столбиком. */
.tile.obj { position: relative; grid-template-columns: auto minmax(0, 1fr); }
.tile.obj .obj-badge { position: absolute; top: 6px; right: 6px; font-size: 11px; }
.tile.obj:has(.obj-badge) .tile-title { display: inline-block; padding-right: 46px; }
/* Сетка плашек: нечётная последняя — во всю ширину, без пустой клетки (Арена). */
.lv-tiles.is-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Подвкладки: пять в сетке на три — «Прочее» занимает пустое место. */
.subbar > :last-child:nth-child(3n+2) { grid-column: span 2; }
.subbar > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
/* «Перед боем»: кнопки «Покормить» и «Раны» поровну на всю ширину. */
.ready-warn .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
/* Карта Сеула: «+ / −» компактнее и полупрозрачные — не закрывают районы справа. */
.mapview-zoom { opacity: 0.8; transform: scale(0.85); transform-origin: right center; }
.mapview-zoom:hover, .mapview-zoom:focus-within { opacity: 1; }