/* ============================================================
   КАРТОЧКА МАШИНЫ (/tank/<tank_id>) — подробная информация об одном танке.
   Визуальный язык тот же, что у топа (top-tanks.css) и сравнения
   (tank-hud.css): тёмные стеклянные панели, мелкие капслок-подписи и
   янтарь/циан акцентами. Токены — style.css.

   Раскладка «витрина» (дизайн «Карточка танка — варианты», вариант 1b):
   меньше рамок и колонок, крупный арт с камуфляжами прямо на странице,
   место среди одноклассников — в подсказке по наведению, а не отдельной
   колонкой таблицы. Тот же контент, что и раньше, — просто перестал
   расползаться на четыре ячейки в строке.
   Функционал пока скрытый: страницы нет в меню сайта.
   ============================================================ */
#tankBox{
  display:flex; flex-direction:column; gap:1rem;
  color:var(--text); line-height:1.45;
}

/* ---- шапка карточки ---- */
.tk-hero{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:
    radial-gradient(110% 90% at 85% 10%, rgba(255,201,77,0.1), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(73,243,214,0.06), transparent 55%),
    rgba(7,10,9,0.85);
}
.tk-hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:1.5rem; align-items:center;
  padding:1.6rem 1.75rem 1.4rem;
}
.tk-hero-info{min-width:0; display:flex; flex-direction:column; gap:0.85rem; justify-content:center;}
.tk-crumb{
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-faint);
}
.tk-crumb-bar{
  width:1.25rem; height:2px; flex:none; border-radius:1px;
  background:var(--accent-grad, linear-gradient(90deg,#ffd166,#f2a93b));
}
/* Стрелка «назад»: карточку открывают из списка техники, топа или профиля,
   и без неё оставался тупик — только кнопка браузера. */
.tk-crumb-back{
  display:inline-flex; align-items:center; gap:0.3rem;
  margin-right:0.15rem; padding:0.3rem 0.55rem 0.3rem 0.4rem;
  border-radius:0.4rem; border:1px solid var(--line, rgba(255,255,255,0.10));
  background:rgba(255,255,255,0.03);
  color:var(--text-dim); letter-spacing:0.1em;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.tk-crumb-back svg{
  width:0.95rem; height:0.95rem; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.tk-crumb-back:hover{color:var(--amber); border-color:rgba(255,201,77,0.45); background:rgba(255,201,77,0.08);}

.tk-crumb a{color:var(--text-dim); text-decoration:none;}
.tk-crumb a:hover{color:var(--amber);}
.tk-crumb i{font-style:normal; opacity:0.5;}

/* Имя и «X · СТ · Китай» — одной строкой: раньше класс, уровень и нация
   были отдельным рядом бейджей под заголовком и читались как второй
   заголовок. Это подпись к имени, ей и место рядом с именем. */
.tk-title{display:flex; align-items:baseline; flex-wrap:wrap; gap:0.5rem 0.9rem;}
.tk-name{
  margin:0; font-size:2.85rem; font-weight:900; line-height:1;
  letter-spacing:-0.015em; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.7);
}
.tk-hero.tank-rare .tk-name{color:var(--tank-rarity);}
.tk-idline{
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim);
}
.tk-idline-tier{font-weight:900; color:var(--text);}
.tk-hero.tank-rare .tk-idline-tier{color:var(--tank-rarity);}
.tk-idline-type{width:1.05rem; height:1.05rem; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.9));}
.tk-hero.tank-rare .tk-idline-type{filter:var(--tank-rarity-tint) drop-shadow(0 1px 2px rgba(0,0,0,0.9));}
.tk-idline-dot{font-style:normal; opacity:0.4;}
.tk-idline-flag{width:1.35rem; height:0.85rem; object-fit:cover; border-radius:2px;}
.tk-tag{
  padding:0.15rem 0.5rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-dim);
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line-soft); border-radius:3px;
}
.tk-tag-prem{color:var(--tank-prem); border-color:color-mix(in srgb, var(--tank-prem) 40%, transparent);}
.tk-tag-coll{color:var(--tank-coll); border-color:color-mix(in srgb, var(--tank-coll) 40%, transparent);}
.tk-desc{margin:0; font-size:0.86rem; color:var(--text-dim); max-width:34rem;}

/* Пять главных цифр — полосой между двумя линиями, без рамок у каждой:
   пилюли-плашки прежней шапки на широком экране расползались в два ряда,
   а сама полоса делает то же самое одной строкой. */
.tk-key{
  display:flex; align-items:stretch;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:0.75rem 0;
}
.tk-key-item{
  /* min-content, а не 0: число неразрывное, и при min-width:0 ячейка сжималась
     уже своего содержимого — число вылезало за неё и наезжало на соседнее
     («255 мм2 398»). Здесь же ячейка не уже, чем её самое широкое слово, а
     flex-basis:auto отдаёт лишнее место туда, где оно нужно: «460» не держит
     ту же ширину, что «35 км/ч». */
  flex:1 1 auto; min-width:min-content;
  display:flex; flex-direction:column; gap:0.1rem;
  padding:0 0.75rem;
  border-left:1px solid var(--line-soft);
}
.tk-key-item:first-child{padding-left:0; border-left:none;}
.tk-key-item:last-child{padding-right:0;}
.tk-key-item b{
  font-size:1.35rem; font-weight:800; line-height:1.1; color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tk-key-item b.is-top{color:var(--amber);}
.tk-key-item i{font-style:normal; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint);}
/* Шесть цифр в одну строку помещаются только на широком экране. Полоса живёт
   не во всю ширину окна, а в левой колонке шапки, и та колонка узкая задолго
   до телефона: на 1000 px ей достаётся 436 px, то есть по 73 px на ячейку при
   32 px одних отступов. Числа неразрывные, а min-width:0 разрешает ячейке
   сжаться уже своего содержимого — вот они и налезали друг на друга
   («255 мм2 398»), причём молча, без прокрутки.
   Ниже порога раскладываем той же плиткой, что и на телефоне: три колонки,
   подпись под числом. Порог по окну, а не по колонке, — как и вся остальная
   вёрстка карточки; 1400 px, потому что колонка примерно вдвое уже окна, а
   строке нужно около 550 px на числа с отступами. */
@media (max-width: 1400px){
  .tk-key{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
    padding:0; border:1px solid var(--line-soft); border-radius:8px;
    background:var(--line-soft); overflow:hidden;
  }
  .tk-key-item{padding:0.55rem 0.6rem; border-left:none; background:rgba(7,10,9,0.9);}
  .tk-key-item:first-child{padding-left:0.6rem;}
  .tk-key-item:last-child{padding-right:0.6rem;}
  .tk-key-item b{font-size:1.05rem;}
  .tk-key-item i{font-size:0.55rem;}
}
/* Место среди одноклассников: значок у значения + подсказка на всей ячейке */
.tk-sup{font-size:0.6em; font-weight:800; color:var(--amber);}
.tk-help{cursor:help;}
/* Своя подсказка вместо title: на тач-экранах родная не показывается вовсе.
   Стоит в координатах экрана, поэтому прокрутка её убирает (см. tank.js). */
.tk-tip{
  position:fixed; z-index:60; width:max-content; max-width:min(20rem, calc(100vw - 1rem));
  padding:0.45rem 0.6rem;
  font-size:0.72rem; line-height:1.35; color:#fff;
  background:rgba(12,16,14,0.97); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  pointer-events:none;
}

/* Кнопки — сеткой два на два, а не строкой с переносом: в строку они не
   помещаются (у одной подпись длинная), и «Найти в топе» болталась одна на
   второй строке. Нечётную последнюю растягиваем на обе колонки. */
.tk-actions{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.5rem;}
.tk-actions .tk-btn:last-child:nth-child(odd){grid-column:span 2;}
.tk-btn{
  /* Кнопки в ряду разной высоты (длинные подписи переносятся на две строки) —
     текст центрируем и по горизонтали, и по вертикали, иначе короткая подпись
     липнет к верху своей рамки. */
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:0.6rem 1.1rem;
  font:inherit; font-size:0.78rem; font-weight:800; letter-spacing:0.02em;
  color:var(--text); text-decoration:none; cursor:pointer;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line); border-radius:5px;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.tk-btn:hover{color:#fff; border-color:var(--border-strong); background:rgba(255,255,255,0.09);}
/* Главная кнопка — не заливка янтарём во всю плашку (рядом с тремя тёмными
   она выжигала весь блок), а янтарная рамка с лёгкой подложкой: акцент виден,
   но ряд кнопок читается как один. */
.tk-btn-primary{
  color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 10%, rgba(7,10,9,0.55));
}
.tk-btn-primary:hover{
  color:var(--amber);
  background:color-mix(in srgb, var(--amber) 18%, rgba(7,10,9,0.55));
  border-color:var(--amber);
}
.tk-btn-ghost{color:var(--text-dim); background:transparent;}

/* Окно с артом. Высота задана явно и почти не зависит от ширины экрана:
   арты Лесты нарисованы в одной пропорции, поэтому машина, вписанная по
   высоте, выходит на телефоне и на десктопе примерно одного размера.
   overflow скрывает всё, что вылезает за окно: флаг взят с запасом. */
.tk-hero-side{min-width:0; display:flex; flex-direction:column; gap:0.75rem; justify-content:center;}
.tk-hero-art{
  position:relative; min-width:0;
  height:clamp(11rem, 17vw, 15.5rem);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:height 0.25s ease;
}
/* Арт и 3D-сцена меняются местами в этом слое. Слой растянут по окну, чтобы
   флаг, у которого позиционирование абсолютное, вставал так же, как раньше. */
.tk-hero-art-body{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
/* В 3D окно выше картинки: машину крутят, а не разглядывают в миниатюре. */
.tk-hero-art--3d{height:clamp(15rem, 26vw, 21rem);}
/* Флаг нации — полотнищем за машиной: ассет нарисован в левом верхнем углу
   файла 1024×256 и занимает 55.7% его ширины и 62.1% высоты, дальше
   прозрачность. Поэтому размер и сдвиг считаются от видимой части:
     width:180%  → 100% / 0.557, видимая ширина = ширина окна с артом;
     translateY → под полотнищем в картинке ещё 37.9% пустоты, сдвигаем
                  картинку на эту долю вниз, и нижний край флага садится
                  ровно на низ окна.
   Верх флага растворяется в панели — низ остаётся ровным краем. */
.tk-hero-flag{
  position:absolute; left:0; bottom:0;
  width:180%; max-width:none; height:auto;
  transform:translateY(37.9%);
  opacity:0.45;
  filter:brightness(1.35) saturate(1.15);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 22%);
  pointer-events:none; z-index:0;
}
/* Сам арт машины — поверх флага (:not, иначе правило перекрыло бы флагу
   и позиционирование, и ограничение по ширине). */
.tk-hero-art img:not(.tk-hero-flag){
  position:relative; z-index:1;
  height:100%; width:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 1.2rem 1.5rem rgba(0,0,0,0.7));
}
.tk-hero-canvas{
  width:100%; height:100%; display:block;
  border-radius:10px; border:1px solid var(--line-soft);
  background:#12140f;
  cursor:grab;
  /* pan-y, а не none: на телефоне 3D-окно занимает пол-экрана, и запрет всех
     жестов запер бы страницу — вертикальным свайпом её всё равно надо листать.
     Поперёк остаётся вращение, а это и есть главное, зачем сюда заходят. */
  touch-action:pan-y;
}
.tk-hero-canvas:active{cursor:grabbing;}
.tk-hero-3d-status{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:0.72rem; letter-spacing:0.04em; color:var(--text-dim);
  pointer-events:none;
}

/* ---- шашки камуфляжей под артом ----
   Видны и до включения 3D: список скинов лежит рядом с моделью и известен
   ещё до сборки сцены, а клик по шашке сам поднимает 3D и надевает камуфляж.
   Полный список с анимациями остаётся в панели под сценой. */
.tk-camo-row{display:flex; flex-direction:column; align-items:center; gap:0.35rem;}
.tk-camo-row[hidden]{display:none;}
.tk-camo-title{
  font-size:0.6rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint);
}
/* Шашки всегда одной строкой: сколько бы скинов ни было, они делят ширину и
   ужимаются вместе с названием, а не переносятся на второй ряд. */
.tk-camo-list{display:flex; justify-content:center; gap:0.4rem; width:100%; min-width:0;}
.tk-camo{
  display:inline-flex; align-items:center; gap:0.4rem; min-width:0;
  padding:0.25rem 0.75rem 0.25rem 0.3rem;
  font:inherit; font-size:0.68rem; color:var(--text-dim); cursor:pointer;
  border:1px solid var(--line); border-radius:999px; background:rgba(7,10,9,0.55);
  transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
/* Название ужимается многоточием — полное остаётся в подсказке кнопки. */
.tk-camo-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.tk-camo-pic, .tk-camo-glyph{
  width:1.3rem; height:1.3rem; flex:none;
  border-radius:999px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
}
/* Магазинная иконка скина широкая (512×256), машина стоит в её левой
   половине: по центру, как режет обычный cover, у неё пропадал нос со
   стволом. Показываем левые ~62% картинки во всю её высоту — машина влезает
   в кружок целиком, пустой правый край в него не попадает (тот же приём, что
   в ангаре, см. .camo-pop-item img). */
.tk-camo-pic{position:relative; display:block;}
.tk-camo-pic img{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:160%; height:auto; display:block;
}
.tk-camo-glyph{background:linear-gradient(135deg, #5b6247, #2b2f24);}
.tk-camo:hover{color:var(--text); border-color:var(--border-strong);}
/* Выбор камуфляжа закрыт на время доработки показа: шашки видно, но они
   приглушены и не нажимаются — см. CAMO_LOCKED в tank.js. */
.tk-camo[disabled], .tk-skin[disabled]{opacity:0.45; cursor:not-allowed; filter:grayscale(0.6);}
.tk-camo[disabled]:hover, .tk-skin[disabled]:hover{color:inherit; border-color:var(--border);}
.tk-camo-soon{font-style:normal; font-size:0.72em; letter-spacing:0.02em; color:var(--amber); opacity:0.85; margin-left:0.35em;}
.tk-camo.is-on{
  color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, rgba(7,10,9,0.55));
}

/* ---- подвал шапки: как на нём играют ----
   Живая статистика — не отдельная секция через полкарточки, а полоса под
   паспортными ттх: одной строкой шесть чисел и подпись о выборке справа. */
.tk-hero-foot{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0.5rem 1.5rem;
  padding:0.75rem 1.75rem;
  border-top:1px solid var(--line-soft);
  background:rgba(255,255,255,0.02);
}
.tk-hero-foot-title{
  font-size:0.6rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);
}
.tk-comm-item{display:flex; align-items:baseline; gap:0.35rem;}
.tk-comm-item b{font-size:0.95rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums;}
.tk-comm-item i{font-style:normal; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint);}
/* Винрейт красится по тем же порогам, что и везде на сайте (профиль, сессии,
   таблица техники) — 50/60/70%. Своя копия правил: profile.css на эту
   страницу не подключается, а тащить его целиком ради четырёх цветов ни к чему. */
.tk-comm-item b.wr-white{color:#dfe5df;}
.tk-comm-item b.wr-green{color:#8fd13f;}
.tk-comm-item b.wr-blue{color:#4fa8ff;}
.tk-comm-item b.wr-purple{color:#c26bff;}
.tk-hero-foot-note{margin-left:auto; font-size:0.66rem; color:var(--text-faint); cursor:help;}
.tk-hero-foot-note a{color:var(--text-dim);}

/* ---- секции ---- */
.tk-columns{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; align-items:start;}
/* Комплектация шире ветки исследования: у первой два столбца модулей,
   у второй — два-три тайла в строку. */
.tk-columns-wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
.tk-columns:empty{display:none;}
.tk-section{
  padding:1rem 1.15rem 1.15rem;
  border:1px solid var(--line-soft); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.tk-section-title{
  margin:0 0 0.75rem;
  display:flex; align-items:center; gap:0.55rem;
  font-size:0.88rem; font-weight:800; letter-spacing:-0.01em; color:var(--text);
}
.tk-section-bar{
  width:4px; height:1rem; flex:none; border-radius:2px;
  background:var(--accent-grad, linear-gradient(180deg,#ffd166,#f2a93b));
}
.tk-section-note{
  margin-left:auto; text-align:right;
  font-size:0.62rem; font-weight:600; letter-spacing:0.02em; text-transform:none; color:var(--text-faint);
}

/* ---- сворачиваемая секция ----
   Живое сведение и разворот — витрина, а не справка: их смотрят, когда
   специально захотели. Поэтому они лежат свёрнутыми, а заголовок секции
   работает кнопкой. */
.tk-fold details{margin:0;}
.tk-fold summary{
  cursor:pointer; list-style:none; user-select:none;
  margin:0; padding-right:0.25rem;
}
.tk-fold summary::-webkit-details-marker{display:none;}
.tk-fold details[open] summary{margin-bottom:0.75rem;}
.tk-fold summary:hover{color:var(--amber);}
.tk-fold summary:hover .tk-fold-arrow{border-color:var(--amber);}
.tk-fold summary:focus-visible{outline:1px solid var(--amber); outline-offset:3px; border-radius:4px;}
.tk-fold .tk-section-note{margin-left:auto;}
.tk-fold-arrow{
  flex:none; margin-left:0.55rem;
  width:0.42rem; height:0.42rem;
  border-right:2px solid var(--text-faint); border-bottom:2px solid var(--text-faint);
  transform:rotate(45deg) translate(-0.1rem, -0.1rem);
  transition:transform .18s, border-color .18s;
}
.tk-fold details[open] .tk-fold-arrow{transform:rotate(-135deg) translate(-0.06rem, -0.06rem);}

/* ---- строки характеристик ---- */
.tk-rows{display:flex; flex-direction:column;}
.tk-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:0.25rem 0.75rem; flex-wrap:wrap;
  padding:0.4rem 0.15rem;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.tk-row:last-child{border-bottom:none;}
.tk-row-label{font-size:0.78rem; color:var(--text-dim); display:flex; align-items:center; gap:0.3rem;}
.tk-row-hint{
  display:inline-flex; align-items:center; justify-content:center;
  width:0.85rem; height:0.85rem; flex:none;
  font-style:normal; font-size:0.55rem; font-weight:800;
  color:var(--text-faint); border:1px solid var(--line); border-radius:50%;
  cursor:help;
}
.tk-row-value{
  font-size:0.92rem; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tk-row-value.is-top{color:var(--amber);}
/* Строка, которую сдвинули оборудование или амуниция: «было → стало». Старое
   число приглушено и зачёркнуто, новое — зелёное, если стало лучше, и красное,
   если хуже (у перезарядки, сведения и разброса «лучше» значит «меньше»). */
.tk-row-change{display:inline-flex; align-items:baseline; gap:0.3rem; white-space:nowrap;}
.tk-row-was{
  font-size:0.74rem; color:var(--text-faint);
  text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.25);
  font-variant-numeric:tabular-nums;
}
.tk-row-arrow{font-style:normal; font-size:0.7rem; color:var(--text-faint);}
.tk-row-value.is-up{color:#6ec85a;}
.tk-row-value.is-down{color:#e05555;}

/* Пока цифра доезжает до нового значения, она подсвечена: зелёным, если стало
   лучше, красным — если хуже. К концу подсветка гаснет в тот цвет, который у
   ячейки и был (его ставит tank.js в --tick-end), чтобы не было рывка. */
@keyframes tk-tick-up{
  0%, 45%{color:#6ec85a;}
  100%{color:var(--tick-end, inherit);}
}
@keyframes tk-tick-down{
  0%, 45%{color:#e05555;}
  100%{color:var(--tick-end, inherit);}
}
.tk-tick-up{animation:tk-tick-up 1.1s ease-out;}
.tk-tick-down{animation:tk-tick-down 1.1s ease-out;}
/* Кому анимация мешает — тому только конечное значение, без бега цвета. */
@media (prefers-reduced-motion: reduce){
  .tk-tick-up, .tk-tick-down{animation:none;}
}

/* Подблок секции: снаряды, проекции брони. Без своей рамки — продолжение
   той же таблицы, отделённое линией и капслок-подписью. */
.tk-sub{margin-top:0.85rem; padding-top:0.75rem; border-top:1px solid var(--line-soft);}
.tk-sub-title{
  display:block; margin-bottom:0.5rem;
  font-size:0.6rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint);
}

/* ---- снаряды ----
   Три кнопки над огневой мощью: иконка и короткое имя. Числа снаряда стоят
   строками ниже — по выбранному они и считаются, поэтому на самой кнопке им
   места не нужно. */
.tk-shell-picks{display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.75rem;}
.tk-shell-pick{
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.3rem 0.55rem 0.3rem 0.35rem;
  font:inherit; font-size:0.7rem; font-weight:800; letter-spacing:0.06em;
  color:var(--text-dim); background:transparent;
  border:1px solid var(--line-soft); border-radius:6px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s, opacity .15s;
  opacity:0.72;
}
.tk-shell-pick img{width:1.15rem; height:1.15rem; object-fit:contain;}
.tk-shell-pick:hover{color:#fff; border-color:var(--border-strong); opacity:1;}
.tk-shell-pick.is-on{
  opacity:1; color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 10%, transparent);
}
.tk-shell-pick.tk-shell-gold.is-on{
  color:var(--tank-prem, #ffd166);
  border-color:color-mix(in srgb, var(--tank-prem, #ffd166) 60%, transparent);
}

/* ---- броня по проекциям ---- */
.tk-armor{display:flex; flex-direction:column; gap:0.3rem;}
.tk-armor-row{
  display:grid; grid-template-columns:4.6rem repeat(3, minmax(0,1fr));
  align-items:center; gap:0.4rem;
  padding:0.4rem 0.55rem;
  background:rgba(255,255,255,0.03); border-radius:6px;
}
.tk-armor-label{font-size:0.62rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint);}
.tk-armor-cell{display:flex; flex-direction:column;}
.tk-armor-cell b{font-size:0.86rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums;}
.tk-armor-cell i{font-style:normal; font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint);}

/* ---- комплектация ---- */
.tk-mods{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.6rem 1rem;}
.tk-mod{display:flex; flex-direction:column; gap:0.25rem; min-width:0;}
.tk-mod-type{font-size:0.6rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);}
.tk-mod-list{display:flex; flex-direction:column; gap:0.2rem;}
.tk-mod-item{
  display:flex; align-items:center; gap:0.4rem;
  padding:0.32rem 0.5rem;
  font-size:0.76rem; color:var(--text-dim);
  background:rgba(255,255,255,0.03);
  border:1px solid transparent; border-radius:4px;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.tk-mod-icon{width:1.05rem; height:1.05rem; object-fit:contain; flex:none; opacity:0.75;}
.tk-mod-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Топ — топовый набор карточки (тот, что стоит в справочнике по умолчанию):
   держит цвет всегда, даже когда сейчас выбран другой модуль, — это
   справочная метка, а не состояние выбора. */
.tk-mod-top{color:#fff; font-weight:700;}
.tk-mod-mark{
  flex:none; margin-left:auto;
  font-style:normal; font-size:0.56rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cyan); opacity:0.85;
}
/* Активный — то, что сейчас подставлено в ттх выше: акцентная рамка, а не
   просто цвет текста, иначе на телефоне активный модуль было не отличить от
   топового беглым взглядом. */
.tk-mod-active{background:rgba(255,201,77,0.1); border-color:rgba(255,201,77,0.4);}
.tk-mod-active .tk-mod-name{color:var(--amber);}
.tk-mod-clickable{cursor:pointer;}
.tk-mod-clickable:hover{background:rgba(255,255,255,0.07); border-color:var(--line-soft);}
.tk-mod-clickable:focus-visible{outline:2px solid var(--amber); outline-offset:1px;}
/* Пока едет запрос — блокируем повторный клик визуально, не только в JS. */
.tk-modules-loading .tk-mod-clickable{cursor:progress; opacity:0.6; pointer-events:none;}

/* ---- бронирование в окне карточки ----
   Тот же канвас, что и у 3D-модели: под ним подпись о точке под курсором и
   шкала толщин. */
/* Шкала толщин — одной строкой по низу сцены: подписей семь, и на второй ряд
   они не переносятся, а ужимаются вместе с кеглем (см. .tk-armor-keys). */
.tk-armor-hud{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center;
  padding:0.5rem 0.7rem;
  background:linear-gradient(0deg, rgba(4,6,5,0.85), rgba(4,6,5,0));
  pointer-events:none;
}
.tk-armor-keys{
  display:flex; flex-wrap:nowrap; justify-content:space-between;
  gap:0.35rem; width:100%; min-width:0;
}
.tk-armor-key{
  display:inline-flex; align-items:center; gap:0.2rem; min-width:0;
  font-size:clamp(0.46rem, 1.1vw, 0.58rem); color:var(--text-faint);
  white-space:nowrap;
}
.tk-armor-key i{width:0.55rem; height:0.55rem; border-radius:2px; display:inline-block; flex:none;}

/* ---- ветка исследования ----
   Одна строка: предок(и) → текущая машина → потомок(и). Тайлы едут в
   горизонтальный скролл, а не переносятся: строка не должна расползаться
   на вторую по высоте на широком экране. */
.tk-tree-line{
  display:flex; align-items:center; gap:0.5rem;
  overflow-x:auto; padding-bottom:2px; /* запас, чтобы фокус-кольцо тайла не срезалось */
  scrollbar-width:none;
}
.tk-tree-line::-webkit-scrollbar{display:none;}
.tk-tree-row{display:flex; gap:0.5rem; flex:none;}
.tk-tree-arrow{flex:none; font-size:1.05rem; color:var(--text-faint);}
.tk-tree-item{
  flex:none; width:8rem;
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  padding:0.5rem;
  text-decoration:none;
  border:1px solid transparent; border-radius:8px;
  transition:border-color .15s ease, background .15s ease;
}
.tk-tree-item img{width:100%; height:2.6rem; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.7)); opacity:0.85;}
.tk-tree-item:hover{background:rgba(255,255,255,0.05); border-color:var(--line-soft);}
.tk-tree-item:hover img{opacity:1;}
.tk-tree-name{
  font-size:0.7rem; font-weight:700; color:var(--text-dim); text-align:center;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:underline; text-decoration-color:rgba(169,182,172,0.4);
}
.tk-tree-item.tank-rare .tk-tree-name{color:var(--tank-rarity);}
/* Текущая машина — не ссылка: другой курсор и акцентная рамка вместо
   ховера, чтобы взгляд сразу находил «мы здесь» между двумя стрелками. */
.tk-tree-current{
  cursor:default;
  background:rgba(255,201,77,0.08);
  border-color:rgba(255,201,77,0.35);
}
.tk-tree-current:hover{background:rgba(255,201,77,0.08); border-color:rgba(255,201,77,0.35);}
.tk-tree-current img{opacity:1;}
.tk-tree-current .tk-tree-name{color:var(--amber); font-weight:800; text-decoration:none;}
.tk-tree-foot{margin:0.75rem 0 0; font-size:0.68rem; line-height:1.5; color:var(--text-faint);}

/* ---- мастерская внешнего вида: полный список камуфляжей и обвесы ----
   Панель под окном модели с вкладками: у ИС-7 два камуфляжа и четыре десятка
   обвесов, и раскладывать их в одну строку значило бы прятать половину
   каталога за краем экрана. Появляется только в 3D. */
.tk-skins{display:flex; flex-direction:column; gap:0.45rem;}
/* display у класса перебивает встроенное [hidden], поэтому прячем явно. */
.tk-skins[hidden]{display:none;}
.tk-skins-tabs{display:flex; flex-wrap:wrap; gap:0.35rem;}
.tk-skins-tab{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.34rem 0.75rem;
  font:inherit; font-size:0.66rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); cursor:pointer;
  border:1px solid var(--line); border-radius:999px; background:rgba(7,10,9,0.55);
  transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tk-skins-tab i{
  font-style:normal; font-size:0.6rem; font-weight:700;
  padding:0.05rem 0.35rem; border-radius:999px;
  color:var(--text-dim); background:rgba(255,255,255,0.08);
}
.tk-skins-tab:hover{color:var(--text); border-color:var(--border-strong);}
.tk-skins-tab.is-on{
  color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, rgba(7,10,9,0.55));
}
.tk-skins-tab.is-on i{color:var(--amber); background:color-mix(in srgb, var(--amber) 18%, transparent);}
/* Высота ограничена и прокручивается внутри — четыре десятка обвесов иначе
   растягивают шапку на два экрана и отпихивают характеристики машины вниз. */
.tk-skins-pane{
  display:flex; flex-direction:column; gap:0.5rem;
  max-height:16rem; overflow-y:auto; overscroll-behavior:contain;
  padding:0.65rem 0.7rem;
  border:1px solid var(--line-soft); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  scrollbar-width:thin;
}
.tk-skins-pane[hidden]{display:none;}
.tk-skins-hint{margin:0; font-size:0.66rem; line-height:1.35; color:var(--text-dim);}
/* Плитки одной ширины: подписи у обвесов разной длины, и на «резиновых»
   кнопках сетка получалась бы рваной от строки к строке. */
.tk-skins-grid{display:grid; gap:0.4rem; grid-template-columns:repeat(auto-fill, minmax(5.4rem, 1fr));}
.tk-skin{
  display:flex; flex-direction:column; gap:0.3rem;
  padding:0.35rem 0.35rem 0.4rem;
  font:inherit; color:var(--text-dim); text-align:center; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:rgba(7,10,9,0.55);
  transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tk-skin-art{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:2.6rem; border-radius:7px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(0,0,0,0.35));
}
.tk-skin-art img{width:100%; height:100%; object-fit:cover; display:block;}
/* Заглушка вместо превью: у обвесов и родной окраски своего арта нет. */
.tk-skin-glyph{
  width:1.7rem; height:1.7rem; border-radius:6px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, #5b6247, #2b2f24);
}
.tk-skin-glyph.is-reset{border-radius:999px; background:linear-gradient(135deg, #3a4030, #1b1e17);}
/* Метка «с анимацией» — угловой значок, чтобы не отнимать строку у подписи. */
.tk-skin-anim{
  position:absolute; right:0.2rem; top:0.2rem;
  font-size:0.5rem; font-style:normal; line-height:1;
  padding:0.12rem 0.22rem; border-radius:999px;
  color:var(--amber); background:rgba(7,10,9,0.75);
}
.tk-skin-name{
  font-size:0.63rem; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tk-skin:hover{color:var(--text); border-color:var(--border-strong);}
.tk-skin.is-on{
  color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, rgba(7,10,9,0.55));
}
.tk-skin.is-on .tk-skin-art{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent);}
.tk-skin-plays{display:flex; flex-wrap:wrap; gap:0.35rem;}
.tk-skin-plays:empty{display:none;}
.tk-skin-play{
  padding:0.3rem 0.7rem;
  font:inherit; font-size:0.68rem; font-weight:700; color:var(--amber); cursor:pointer;
  border:1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius:999px;
  background:color-mix(in srgb, var(--amber) 10%, rgba(7,10,9,0.55));
}
.tk-skin-play[disabled]{opacity:0.55; cursor:default;}

.tk-empty{
  padding:1.2rem; text-align:center; color:var(--text-dim);
  border:1px dashed var(--line); border-radius:10px;
}
.tk-empty a{color:var(--amber);}

/* ---- телефон ----
   Та же витрина в один столбец: арт первым (ради него сюда и заходят),
   пять главных цифр — сеткой 3×2 вместо строки из пяти колонок, кнопки
   тянутся на всю ширину. Ничего из контента не прячем. */
/* ---- оборудование и амуниция ----
   Сборка как в ангаре игры: девять ячеек оборудования (3 категории × 3 уровня,
   в каждой один из двух вариантов) и список амуниции на три ячейки. */
.tk-supply-head{
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
  margin-bottom:0.6rem;
}
.tk-supply-count{
  font-size:0.62rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-faint); font-variant-numeric:tabular-nums;
}
.tk-supply-reset{
  padding:0.25rem 0.6rem;
  font:inherit; font-size:0.68rem; font-weight:700; color:var(--text-dim);
  background:transparent; border:1px solid var(--line); border-radius:6px; cursor:pointer;
}
.tk-supply-reset:hover{color:#fff; border-color:var(--amber);}
.tk-supply-legend{margin:0.7rem 0 0; font-size:0.65rem; line-height:1.45; color:var(--text-faint);}
.tk-supply-empty{margin:0; font-size:0.75rem; color:var(--text-faint);}

/* Основная раскладка карточки. Первый ряд: стопка сборки (оборудование и
   амуниция), огневая мощь и живучесть — все три кончаются на одной высоте,
   её задаёт самая длинная. Второй ряд: ветка исследования под сборкой,
   снаряды под огневой мощью. Комплектация идёт ниже, во всю ширину. */
.tk-layout{
  display:grid;
  grid-template-columns:24rem minmax(0,1fr) minmax(0,1fr);
  gap:1rem; align-items:stretch; margin-bottom:1rem;
}
.tk-supply-stack{grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:1rem; min-width:0;}
/* Снаряды стоят в узкой колонке — колонки цифр ужимаем, а лигу снаряда
   уводим под название, иначе оно обрезается многоточием. */
/* Средняя колонка — огневая мощь и комплектация модулей под ней. */
.tk-stats-stack{grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:1rem; min-width:0;}
.tk-stats-stack > #tkModules{flex:1;}
#tkSurv{grid-column:3; grid-row:1;}
/* Ветка исследования — лентой во всю ширину под всем рядом. */
#tkTree{grid-column:1 / -1; grid-row:2;}
/* Стопки нет (каталоги не пришли) — таблицы занимают всю ширину. */
.tk-layout-nosupply{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.tk-layout-nosupply #tkFire{grid-column:1;}
.tk-layout-nosupply #tkSurv{grid-column:2;}

/* Остаток высоты в ряду добирают соседние блоки, а не строки таблиц: шаг
   строк у огневой мощи и живучести одинаковый, иначе одна «играет» полосками
   относительно другой. В стопке сборки остаток берёт амуниция, в средней
   колонке — комплектация, в живучести — блок бронирования, прижатый к низу. */
#tkProv{flex:1; display:flex; flex-direction:column;}
/* Припасов у машины две-четыре штуки — в растянутой рамке они стоят по
   центру, а не липнут к заголовку с пустотой под собой. */
#tkProv .tk-prov-list{flex:1; align-content:center;}
#tkSurv{display:flex; flex-direction:column;}
#tkSurv > .tk-sub{margin-top:auto;}

/* Двум таблицам ттх рядом тесно уже на среднем экране — весь блок
   раскладывается в одну колонку, в порядке разметки. */
@media (max-width: 1180px){
  .tk-layout, .tk-layout-nosupply{grid-template-columns:1fr;}
  .tk-supply-stack, .tk-stats-stack, #tkSurv, #tkTree{grid-column:auto; grid-row:auto;}
  /* Порядок на узком экране: сперва ттх машины, потом снаряды со сборкой и
     ветка — за характеристиками сюда и приходят. */
  .tk-layout{display:flex; flex-direction:column;}
  .tk-stats-stack{order:1;}
  #tkSurv{order:2;}
  .tk-supply-stack{order:3;}
  #tkTree{order:4;}
}


/* ---- бронирование в окне карточки ----
   Тот же канвас, что и у 3D-модели: под ним подпись о точке под курсором и
   шкала толщин. */
/* Шкала толщин — одной строкой по низу сцены: подписей семь, и на второй ряд
   они не переносятся, а ужимаются вместе с кеглем (см. .tk-armor-keys). */
.tk-armor-hud{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center;
  padding:0.5rem 0.7rem;
  background:linear-gradient(0deg, rgba(4,6,5,0.85), rgba(4,6,5,0));
  pointer-events:none;
}
.tk-armor-keys{
  display:flex; flex-wrap:nowrap; justify-content:space-between;
  gap:0.35rem; width:100%; min-width:0;
}
.tk-armor-key{
  display:inline-flex; align-items:center; gap:0.2rem; min-width:0;
  font-size:clamp(0.46rem, 1.1vw, 0.58rem); color:var(--text-faint);
  white-space:nowrap;
}
.tk-armor-key i{width:0.55rem; height:0.55rem; border-radius:2px; display:inline-block; flex:none;}

/* ---- ветка исследования ----
   Одна строка: предок(и) → текущая машина → потомок(и). Тайлы едут в
   горизонтальный скролл, а не переносятся: строка не должна расползаться
   на вторую по высоте на широком экране. */
.tk-tree-line{
  display:flex; align-items:center; gap:0.5rem;
  overflow-x:auto; padding-bottom:2px; /* запас, чтобы фокус-кольцо тайла не срезалось */
  scrollbar-width:none;
}
.tk-tree-line::-webkit-scrollbar{display:none;}
.tk-tree-row{display:flex; gap:0.5rem; flex:none;}
.tk-tree-arrow{flex:none; font-size:1.05rem; color:var(--text-faint);}
.tk-tree-item{
  flex:none; width:8rem;
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  padding:0.5rem;
  text-decoration:none;
  border:1px solid transparent; border-radius:8px;
  transition:border-color .15s ease, background .15s ease;
}
.tk-tree-item img{width:100%; height:2.6rem; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.7)); opacity:0.85;}
.tk-tree-item:hover{background:rgba(255,255,255,0.05); border-color:var(--line-soft);}
.tk-tree-item:hover img{opacity:1;}
.tk-tree-name{
  font-size:0.7rem; font-weight:700; color:var(--text-dim); text-align:center;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:underline; text-decoration-color:rgba(169,182,172,0.4);
}
.tk-tree-item.tank-rare .tk-tree-name{color:var(--tank-rarity);}
/* Текущая машина — не ссылка: другой курсор и акцентная рамка вместо
   ховера, чтобы взгляд сразу находил «мы здесь» между двумя стрелками. */
.tk-tree-current{
  cursor:default;
  background:rgba(255,201,77,0.08);
  border-color:rgba(255,201,77,0.35);
}
.tk-tree-current:hover{background:rgba(255,201,77,0.08); border-color:rgba(255,201,77,0.35);}
.tk-tree-current img{opacity:1;}
.tk-tree-current .tk-tree-name{color:var(--amber); font-weight:800; text-decoration:none;}
.tk-tree-foot{margin:0.75rem 0 0; font-size:0.68rem; line-height:1.5; color:var(--text-faint);}

/* ---- мастерская внешнего вида: полный список камуфляжей и обвесы ----
   Панель под окном модели с вкладками: у ИС-7 два камуфляжа и четыре десятка
   обвесов, и раскладывать их в одну строку значило бы прятать половину
   каталога за краем экрана. Появляется только в 3D. */
.tk-skins{display:flex; flex-direction:column; gap:0.45rem;}
/* display у класса перебивает встроенное [hidden], поэтому прячем явно. */
.tk-skins[hidden]{display:none;}
.tk-skins-tabs{display:flex; flex-wrap:wrap; gap:0.35rem;}
.tk-skins-tab{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.34rem 0.75rem;
  font:inherit; font-size:0.66rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); cursor:pointer;
  border:1px solid var(--line); border-radius:999px; background:rgba(7,10,9,0.55);
  transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tk-skins-tab i{
  font-style:normal; font-size:0.6rem; font-weight:700;
  padding:0.05rem 0.35rem; border-radius:999px;
  color:var(--text-dim); background:rgba(255,255,255,0.08);
}
.tk-skins-tab:hover{color:var(--text); border-color:var(--border-strong);}
.tk-skins-tab.is-on{
  color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, rgba(7,10,9,0.55));
}
.tk-skins-tab.is-on i{color:var(--amber); background:color-mix(in srgb, var(--amber) 18%, transparent);}
/* Высота ограничена и прокручивается внутри — четыре десятка обвесов иначе
   растягивают шапку на два экрана и отпихивают характеристики машины вниз. */
.tk-skins-pane{
  display:flex; flex-direction:column; gap:0.5rem;
  max-height:16rem; overflow-y:auto; overscroll-behavior:contain;
  padding:0.65rem 0.7rem;
  border:1px solid var(--line-soft); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  scrollbar-width:thin;
}
.tk-skins-pane[hidden]{display:none;}
.tk-skins-hint{margin:0; font-size:0.66rem; line-height:1.35; color:var(--text-dim);}
/* Плитки одной ширины: подписи у обвесов разной длины, и на «резиновых»
   кнопках сетка получалась бы рваной от строки к строке. */
.tk-skins-grid{display:grid; gap:0.4rem; grid-template-columns:repeat(auto-fill, minmax(5.4rem, 1fr));}
.tk-skin{
  display:flex; flex-direction:column; gap:0.3rem;
  padding:0.35rem 0.35rem 0.4rem;
  font:inherit; color:var(--text-dim); text-align:center; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:rgba(7,10,9,0.55);
  transition:color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tk-skin-art{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:2.6rem; border-radius:7px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(0,0,0,0.35));
}
.tk-skin-art img{width:100%; height:100%; object-fit:cover; display:block;}
/* Заглушка вместо превью: у обвесов и родной окраски своего арта нет. */
.tk-skin-glyph{
  width:1.7rem; height:1.7rem; border-radius:6px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, #5b6247, #2b2f24);
}
.tk-skin-glyph.is-reset{border-radius:999px; background:linear-gradient(135deg, #3a4030, #1b1e17);}
/* Метка «с анимацией» — угловой значок, чтобы не отнимать строку у подписи. */
.tk-skin-anim{
  position:absolute; right:0.2rem; top:0.2rem;
  font-size:0.5rem; font-style:normal; line-height:1;
  padding:0.12rem 0.22rem; border-radius:999px;
  color:var(--amber); background:rgba(7,10,9,0.75);
}
.tk-skin-name{
  font-size:0.63rem; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tk-skin:hover{color:var(--text); border-color:var(--border-strong);}
.tk-skin.is-on{
  color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, rgba(7,10,9,0.55));
}
.tk-skin.is-on .tk-skin-art{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent);}
.tk-skin-plays{display:flex; flex-wrap:wrap; gap:0.35rem;}
.tk-skin-plays:empty{display:none;}
.tk-skin-play{
  padding:0.3rem 0.7rem;
  font:inherit; font-size:0.68rem; font-weight:700; color:var(--amber); cursor:pointer;
  border:1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius:999px;
  background:color-mix(in srgb, var(--amber) 10%, rgba(7,10,9,0.55));
}
.tk-skin-play[disabled]{opacity:0.55; cursor:default;}

.tk-empty{
  padding:1.2rem; text-align:center; color:var(--text-dim);
  border:1px dashed var(--line); border-radius:10px;
}
.tk-empty a{color:var(--amber);}

/* ---- телефон ----
   Та же витрина в один столбец: арт первым (ради него сюда и заходят),
   пять главных цифр — сеткой 3×2 вместо строки из пяти колонок, кнопки
   тянутся на всю ширину. Ничего из контента не прячем. */
/* ---- оборудование и амуниция ----
   Сборка как в ангаре игры: девять ячеек оборудования (3 категории × 3 уровня,
   в каждой один из двух вариантов) и список амуниции на три ячейки. */
.tk-supply-head{
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
  margin-bottom:0.6rem;
}
.tk-supply-count{
  font-size:0.62rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-faint); font-variant-numeric:tabular-nums;
}
.tk-supply-reset{
  padding:0.25rem 0.6rem;
  font:inherit; font-size:0.68rem; font-weight:700; color:var(--text-dim);
  background:transparent; border:1px solid var(--line); border-radius:6px; cursor:pointer;
}
.tk-supply-reset:hover{color:#fff; border-color:var(--amber);}
.tk-supply-legend{margin:0.7rem 0 0; font-size:0.65rem; line-height:1.45; color:var(--text-faint);}
.tk-supply-empty{margin:0; font-size:0.75rem; color:var(--text-faint);}


/* Зазор подобран так, чтобы все три категории вставали в один ряд внутри
   узкой левой колонки, а не переносились «2 + 1». */
/* Блок ровно по содержимому: девять ячеек и всё — под ними сразу амуниция,
   а следом ветка исследования, чтобы колонка не пустовала. */
.tk-eq-grid{display:flex; flex-wrap:wrap; gap:0.6rem 0.7rem;}
.tk-eq-col{display:flex; flex-direction:column; gap:0.4rem; min-width:0;}
/* Подпись категории шире пары квадратиков («Специализация») — ей разрешено
   не растягивать колонку, иначе третья группа переносится на вторую строку. */
.tk-eq-col-title{
  font-size:0.55rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint); white-space:nowrap;
}
.tk-eq-cell{display:flex; align-items:center; gap:0.3rem;}
.tk-eq-lvl{
  width:0.8rem; flex:none; text-align:center;
  font-size:0.5rem; font-weight:800; color:var(--text-faint);
}
/* Плитка — квадратик 2.2rem с одной иконкой: название и описание в подсказке,
   как в ангаре игры, где оборудование тоже узнают по картинке. */
.tk-eq-sq, .tk-prov-tile{
  position:relative; flex:none;
  width:2.4rem; height:2.4rem; padding:0.2rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.03); border:1px solid var(--line-soft); border-radius:7px;
  cursor:pointer;
}
.tk-eq-sq:hover, .tk-prov-tile:hover{border-color:var(--line);}
.tk-eq-sq.active, .tk-prov-tile.active{border-color:var(--amber); background:rgba(255,176,32,0.14);}
.tk-eq-sq-empty{background:transparent; border-style:dashed; cursor:default;}
.tk-eq-sq-empty:hover{border-color:var(--line-soft);}
.tk-eq-icon{width:100%; height:100%; object-fit:contain;}
/* ∅ — бонус есть, но он не про показанные в карточке строки */
/* Все три ячейки заняты — четвёртый припас в игре тоже не поставить */
.tk-prov-tile.is-locked{opacity:0.3;}
.tk-prov-list{display:flex; flex-wrap:wrap; gap:0.35rem;}

.tk-supply-head{
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
  margin-bottom:0.5rem;
}
.tk-supply-count{
  font-size:0.6rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-faint); font-variant-numeric:tabular-nums;
}
.tk-supply-reset{
  padding:0.2rem 0.5rem;
  font:inherit; font-size:0.64rem; font-weight:700; color:var(--text-dim);
  background:transparent; border:1px solid var(--line); border-radius:6px; cursor:pointer;
}
.tk-supply-reset:hover{color:#fff; border-color:var(--amber);}
.tk-supply-legend{margin:0.6rem 0 0; font-size:0.6rem; line-height:1.4; color:var(--text-faint);}
.tk-supply-empty{margin:0; font-size:0.75rem; color:var(--text-faint);}

@media (max-width: 900px){
  #tankBox{gap:0.75rem;}
  .tk-hero{border-radius:14px;}
  .tk-hero-grid{grid-template-columns:1fr; gap:1rem; padding:1.1rem 1rem 1rem;}
  .tk-hero-side{order:-1;}
  .tk-hero-art{height:clamp(9.5rem, 42vw, 13rem);}
  .tk-hero-art--3d{height:clamp(14rem, 62vw, 20rem);}
  .tk-name{font-size:2.1rem;}
  .tk-desc{font-size:0.8rem;}
  /* «Как на нём играют» на телефоне — не строка вперемешку, а сетка ячеек,
     как паспортные цифры выше: подпись сверху, шесть чисел в три колонки,
     сноска о выборке отдельной строкой снизу. */
  .tk-hero-foot{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:1px; padding:0; background:var(--line-soft);
  }
  .tk-hero-foot-title{
    grid-column:1 / -1; padding:0.6rem 1rem 0.4rem;
    background:rgba(7,10,9,0.9);
  }
  .tk-comm-item{
    flex-direction:column; align-items:flex-start; gap:0.1rem;
    padding:0.5rem 0.6rem; background:rgba(7,10,9,0.9); min-width:0;
  }
  .tk-comm-item b{font-size:1rem;}
  .tk-comm-item i{font-size:0.55rem; line-height:1.2;}
  .tk-hero-foot-note{
    grid-column:1 / -1; margin-left:0; padding:0.5rem 1rem 0.6rem;
    background:rgba(7,10,9,0.9); line-height:1.4;
  }
  .tk-columns, .tk-columns-wide{grid-template-columns:1fr;}
  .tk-mods{grid-template-columns:1fr;}
  /* Квадратики узкие — три категории встают в ряд и на телефоне; на совсем
     тесном экране они просто переносятся (flex-wrap). */
}

/* ---- живое сведение ----
   Круг разброса, который сжимается в реальном времени: то же, что игрок
   видит в прицеле, только рядом с цифрами сборки. Круг рисует SVG, радиус
   каждый кадр ставит tank.js. */
.tk-aim{display:flex; flex-direction:column; gap:0.75rem;}
.tk-aim-scenes{display:flex; flex-wrap:wrap; gap:0.4rem;}
/* Второй ряд: угол доворота и грунт — только у сценариев с поворотом. */
.tk-aim-opts{display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem;}
.tk-aim-opts-title{
  font-size:0.6rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-faint);
}
.tk-aim-opts-title + .tk-aim-chip{margin-right:0;}
.tk-aim-chip{
  font:inherit; cursor:pointer;
  padding:0.3rem 0.55rem;
  font-size:0.66rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); background:transparent;
  border:1px solid var(--line-soft); border-radius:5px;
  transition:color .15s, border-color .15s, background .15s;
}
.tk-aim-chip i{font-style:normal; color:var(--text-faint);}
.tk-aim-chip:hover{color:#fff; border-color:var(--border-strong);}
.tk-aim-chip.is-on{
  color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, transparent);
}
.tk-aim-chip.is-on i{color:var(--amber);}
.tk-aim-stage{
  position:relative;
  aspect-ratio:1/1; max-width:19rem; width:100%; margin:0 auto;
  border-radius:12px; border:1px solid var(--line-soft);
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(73,243,214,0.05), transparent 70%),
    rgba(6,9,8,0.6);
}
.tk-aim-svg{position:absolute; inset:0; width:100%; height:100%;}
.tk-aim-circle{fill:color-mix(in srgb, var(--amber) 7%, transparent); stroke:var(--amber); stroke-width:2;}
.tk-aim-final{fill:none; stroke:rgba(73,243,214,0.45); stroke-width:1; stroke-dasharray:4 5;}
/* Круг «без сборки» — тем же движением, но приглушённо: он для сравнения,
   а следят глазами всё-таки за янтарным. */
.tk-aim-was{fill:none; stroke:rgba(255,255,255,0.32); stroke-width:2; stroke-dasharray:7 6;}
.tk-aim-tick{stroke:rgba(255,255,255,0.18); stroke-width:2;}
.tk-aim-cross{stroke:var(--amber); stroke-width:2;}
.tk-aim.is-aiming .tk-aim-circle{stroke:#fff;}
/* Выстрел: круг и перекрестье коротко вспыхивают — иначе момент, когда
   сведение сбивается, проходит незаметно. */
.tk-aim.is-flash .tk-aim-circle{stroke:#fff; fill:rgba(255,255,255,0.16);}
.tk-aim.is-flash .tk-aim-cross{stroke:#fff;}
.tk-aim-stage{transition:box-shadow .18s;}
.tk-aim.is-flash .tk-aim-stage{box-shadow:inset 0 0 40px rgba(255,201,77,0.35);}
.tk-aim-play{position:absolute; left:50%; bottom:0.6rem; transform:translateX(-50%);}
.tk-aim-read{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(6rem, 1fr)); gap:0.5rem;
  text-align:center;
}
.tk-aim-read span{display:flex; flex-direction:column; gap:0.15rem; min-width:0;}
.tk-aim-read i{font-style:normal; font-size:0.6rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint);}
.tk-aim-read b{font-size:0.95rem; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums;}

.tk-aim-legend{
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  margin:0; font-size:0.62rem; font-weight:800; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-faint);
}
.tk-aim-key{width:1.1rem; height:0; border-top:2px solid var(--amber); margin-left:0.5rem;}
.tk-aim-key-was{border-top-style:dashed; border-top-color:rgba(255,255,255,0.45);}

/* ---- разворот ----
   Иконка машины крутится ровно со скоростью её поворота: цифра «26 °/с»
   ничего не говорит, а полтора круга за минуту — говорит. Вращение на CSS,
   длительность оборота ставит tank.js. */
.tk-turn{display:flex; flex-direction:column; gap:0.75rem;}
.tk-turn-stage{
  position:relative;
  aspect-ratio:1/1; max-width:19rem; width:100%; margin:0 auto;
  border-radius:12px; border:1px solid var(--line-soft);
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(255,201,77,0.05), transparent 70%),
    rgba(6,9,8,0.6);
}
.tk-turn-dial{position:absolute; inset:0; width:100%; height:100%;}
/* Живая модель вместо нарисованного силуэта: пока она едет, в кадре стоит
   тот же силуэт, что и раньше, — окно не пустует. */
.tk-turn-canvas{
  position:absolute; inset:0; width:100%; height:100%; border-radius:11px;
  /* Сцена смотровая: машину крутит блок, а не человек. Мышь и палец сквозь
     канву проходят — страница под ней прокручивается как обычно. */
  pointer-events:none;
}
.tk-turn.has-3d .tk-turn-spin.is-standin{display:none;}
/* Стрелка «без сборки»: где смотрела бы машина с прежней скоростью. Две
   модели друг в друге читались бы кашей, поэтому здесь только курс. */
.tk-turn-ghost{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  animation:tk-turn-spin linear infinite; animation-play-state:paused;}
.tk-turn-ghost.is-spinning{animation-play-state:running;}
.tk-turn-ghost.is-sweep{animation-name:tk-turn-sweep; animation-direction:alternate;}
/* Сток снизу: та же машина, бледная и обесцвеченная. Верхняя сцена идёт
   поверх неё с прозрачным фоном, поэтому отставание видно как вторая
   машина, выезжающая из-под первой. */
.tk-turn-canvas-was{opacity:0.45; filter:grayscale(1) brightness(0.8);}
.tk-turn-ring{fill:none; stroke:rgba(255,255,255,0.12); stroke-width:1; stroke-dasharray:3 7;}
.tk-turn-tick{stroke:rgba(255,255,255,0.18); stroke-width:2;}
.tk-turn-head{fill:var(--amber);}
.tk-turn-spin{
  position:absolute; inset:14%;
  display:flex; align-items:center; justify-content:center;
}
/* Крутят корпус — вращается вся машина; крутят башню — только она, вокруг
   своего погона, а корпус стоит. */
.tk-turn-spin.is-hull,
.tk-turn-spin.is-turret .tk-turn-rot{animation:tk-turn-spin linear infinite; animation-play-state:paused;}
.tk-turn-spin.is-turret .tk-turn-rot{transform-box:view-box; transform-origin:60px 100px;}
.tk-turn-spin.is-hull.is-spinning,
.tk-turn-spin.is-turret.is-spinning .tk-turn-rot{animation-play-state:running;}
/* Башня с ограниченным сектором ходит от упора до упора и обратно, а не по
   кругу: те же градусы в секунду, только маятником. */
.tk-turn-spin.is-sweep.is-hull,
.tk-turn-spin.is-sweep.is-turret .tk-turn-rot{
  animation-name:tk-turn-sweep; animation-direction:alternate;
}
@keyframes tk-turn-sweep{
  from{transform:rotate(var(--tk-arc-from, -45deg));}
  to{transform:rotate(var(--tk-arc-to, 45deg));}
}
/* Силуэт «без сборки» — та же машина, но бледная: она отстаёт (или уходит
   вперёд) ровно на то, что дали оборудование и амуниция. */
.tk-turn-was{opacity:0.3;}
.tk-turn-was .tk-turn-tank rect, .tk-turn-was .tk-turn-tank circle,
.tk-turn-was .tk-turn-grouser, .tk-turn-was .tk-turn-line{stroke:#fff;}
.tk-turn-tank{width:100%; height:100%; overflow:visible;}
.tk-turn-tank rect, .tk-turn-tank circle{fill:#0b0f0d; stroke:var(--amber); stroke-width:3;}
.tk-turn-track{fill:#12140f !important;}
.tk-turn-grouser, .tk-turn-line{stroke:var(--amber); stroke-width:2.5; opacity:0.55;}
.tk-turn-turret{fill:#151509 !important;}
.tk-turn-hatch{stroke-width:2.5; opacity:0.7;}
@keyframes tk-turn-spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.tk-turn-spin, .tk-turn-rot{animation:none;}}
.tk-turn-play-cell{display:flex; align-items:center; justify-content:center;}
/* Кнопка пуска — своим рядом по центру, сразу под окном разворота. */
.tk-turn-play-row{display:flex; justify-content:center;}
.tk-turn-play{white-space:nowrap; min-width:7.5rem;}
/* Ряды чипов у разворота: узел по центру, грунт — отдельной строкой под ним,
   подпись и три кнопки в один ряд. */
.tk-turn-nodes, .tk-turn-grounds{justify-content:center; align-items:center;}
/* Ряды и слои, которые нужны не при каждом узле, из разметки не убираются, а
   гаснут: так смена корпуса на башню не пересобирает секцию (и не роняет
   вместе с ней сцены). */
.tk-turn .is-off{display:none;}
.tk-turn-grounds{gap:0.35rem;}

/* Заставка на время загрузки модели: раньше на её месте на секунду
   показывался нарисованный силуэт и тут же сменялся машиной — мигание
   читалось как сбой. */
.tk-turn-loading{
  position:absolute; inset:0; z-index:3;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem;
  border-radius:11px;
  background:radial-gradient(60% 60% at 50% 50%, rgba(255,201,77,0.06), transparent 70%), rgba(6,9,8,0.82);
  backdrop-filter:blur(2px);
}
.tk-turn.is-loading .tk-turn-loading{display:flex;}
/* Пока грузимся, нарисованный силуэт не показываем вовсе. */
.tk-turn.is-loading .tk-turn-spin{visibility:hidden;}
.tk-turn-loading-ring{
  width:2.4rem; height:2.4rem; border-radius:50%;
  border:2px solid rgba(255,255,255,0.14); border-top-color:var(--amber);
  animation:tk-turn-load 0.9s linear infinite;
}
.tk-turn-loading-text{
  font-size:0.62rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-faint);
}
@keyframes tk-turn-load{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.tk-turn-loading-ring{animation:none;}}

/* Счётчик кругов: пока машина крутится, видно, какой оборот идёт. */
.tk-turn-lap{
  position:absolute; left:0.7rem; top:0.6rem;
  display:flex; flex-direction:column; gap:0.1rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
}
.tk-turn-lap b{color:var(--amber); font-size:0.72rem;}
.tk-turn-lap i{font-style:normal; color:rgba(255,255,255,0.4);}

/* Разрыв между стволами: две точки на дулах и дуга между ними — видно, на
   сколько башня со сборкой ушла вперёд от стоковой. */
.tk-turn-gap{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.tk-turn-gap-arc{fill:none; stroke:var(--amber); stroke-width:4; stroke-linecap:round; opacity:0.9;}
.tk-turn-gap-dot{stroke:rgba(7,10,9,0.9); stroke-width:2;}
.tk-turn-gap-now{fill:var(--amber);}
.tk-turn-gap-was{fill:rgba(255,255,255,0.65);}

/* Амуниция внутри рамки сборки: та же сборка, те же плитки — отдельной
   рамкой она только дробила колонку. Отделяем линией и подписью. */
.tk-prov{margin-top:0.9rem; padding-top:0.75rem; border-top:1px solid var(--line-soft);}
.tk-sub-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem;
  margin-bottom:0.5rem;
}
.tk-sub-head .tk-sub-title{margin:0;}

/* «Было» рядом с усиленной толщиной в подсказке к схеме брони. */
.tk-armor-was{font-style:normal; font-size:0.85em; color:var(--text-faint); margin-left:0.25rem;}


/* ---- разворот и сведение на телефоне ----
   Кнопки не должны раскладываться в столбик и рвать ряды: у сведения три
   сценария встают тремя равными колонками (множитель уходит на вторую
   строку внутри кнопки), у разворота узел стоит по центру, а «Грунт» с
   тремя кнопками держится одной строкой — для этого кегль и внутренние
   отступы чипов на узком экране меньше. */
@media (max-width: 560px){
  .tk-aim > .tk-aim-scenes{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:0.35rem;
  }
  .tk-aim > .tk-aim-scenes .tk-aim-chip{
    white-space:normal; padding:0.3rem 0.25rem; font-size:0.58rem; letter-spacing:0.04em;
  }
  .tk-aim > .tk-aim-scenes .tk-aim-chip i{display:block; margin-top:0.1rem;}

  .tk-turn-grounds{flex-wrap:nowrap;}
  .tk-turn-grounds .tk-aim-chip{
    flex:1 1 0; min-width:0;
    padding:0.3rem 0.2rem; font-size:0.58rem; letter-spacing:0.04em;
  }
  .tk-turn-grounds .tk-aim-opts-title{flex:none; font-size:0.55rem; letter-spacing:0.08em;}
  .tk-turn-nodes .tk-aim-chip{min-width:5.5rem;}
}

/* ---- живое сведение ----
   Круг разброса, который сжимается в реальном времени: то же, что игрок
   видит в прицеле, только рядом с цифрами сборки. Круг рисует SVG, радиус
   каждый кадр ставит tank.js. */
.tk-aim{display:flex; flex-direction:column; gap:0.75rem;}
.tk-aim-scenes{display:flex; flex-wrap:wrap; gap:0.4rem;}
/* Второй ряд: угол доворота и грунт — только у сценариев с поворотом. */
.tk-aim-opts{display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem;}
.tk-aim-opts-title{
  font-size:0.6rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-faint);
}
.tk-aim-opts-title + .tk-aim-chip{margin-right:0;}
.tk-aim-chip{
  font:inherit; cursor:pointer;
  padding:0.3rem 0.55rem;
  font-size:0.66rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim); background:transparent;
  border:1px solid var(--line-soft); border-radius:5px;
  transition:color .15s, border-color .15s, background .15s;
}
.tk-aim-chip i{font-style:normal; color:var(--text-faint);}
.tk-aim-chip:hover{color:#fff; border-color:var(--border-strong);}
.tk-aim-chip.is-on{
  color:var(--amber); border-color:var(--amber);
  background:color-mix(in srgb, var(--amber) 12%, transparent);
}
.tk-aim-chip.is-on i{color:var(--amber);}
.tk-aim-stage{
  position:relative;
  aspect-ratio:1/1; max-width:19rem; width:100%; margin:0 auto;
  border-radius:12px; border:1px solid var(--line-soft);
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(73,243,214,0.05), transparent 70%),
    rgba(6,9,8,0.6);
}
.tk-aim-svg{position:absolute; inset:0; width:100%; height:100%;}
.tk-aim-circle{fill:color-mix(in srgb, var(--amber) 7%, transparent); stroke:var(--amber); stroke-width:2;}
.tk-aim-final{fill:none; stroke:rgba(73,243,214,0.45); stroke-width:1; stroke-dasharray:4 5;}
/* Круг «без сборки» — тем же движением, но приглушённо: он для сравнения,
   а следят глазами всё-таки за янтарным. */
.tk-aim-was{fill:none; stroke:rgba(255,255,255,0.32); stroke-width:2; stroke-dasharray:7 6;}
.tk-aim-tick{stroke:rgba(255,255,255,0.18); stroke-width:2;}
.tk-aim-cross{stroke:var(--amber); stroke-width:2;}
.tk-aim.is-aiming .tk-aim-circle{stroke:#fff;}
/* Выстрел: круг и перекрестье коротко вспыхивают — иначе момент, когда
   сведение сбивается, проходит незаметно. */
.tk-aim.is-flash .tk-aim-circle{stroke:#fff; fill:rgba(255,255,255,0.16);}
.tk-aim.is-flash .tk-aim-cross{stroke:#fff;}
.tk-aim-stage{transition:box-shadow .18s;}
.tk-aim.is-flash .tk-aim-stage{box-shadow:inset 0 0 40px rgba(255,201,77,0.35);}
.tk-aim-play{position:absolute; left:50%; bottom:0.6rem; transform:translateX(-50%);}
.tk-aim-read{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(6rem, 1fr)); gap:0.5rem;
  text-align:center;
}
.tk-aim-read span{display:flex; flex-direction:column; gap:0.15rem; min-width:0;}
.tk-aim-read i{font-style:normal; font-size:0.6rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint);}
.tk-aim-read b{font-size:0.95rem; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums;}

.tk-aim-legend{
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  margin:0; font-size:0.62rem; font-weight:800; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-faint);
}
.tk-aim-key{width:1.1rem; height:0; border-top:2px solid var(--amber); margin-left:0.5rem;}
.tk-aim-key-was{border-top-style:dashed; border-top-color:rgba(255,255,255,0.45);}

/* ---- разворот ----
   Иконка машины крутится ровно со скоростью её поворота: цифра «26 °/с»
   ничего не говорит, а полтора круга за минуту — говорит. Вращение на CSS,
   длительность оборота ставит tank.js. */
.tk-turn{display:flex; flex-direction:column; gap:0.75rem;}
.tk-turn-stage{
  position:relative;
  aspect-ratio:1/1; max-width:19rem; width:100%; margin:0 auto;
  border-radius:12px; border:1px solid var(--line-soft);
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(255,201,77,0.05), transparent 70%),
    rgba(6,9,8,0.6);
}
.tk-turn-dial{position:absolute; inset:0; width:100%; height:100%;}
/* Живая модель вместо нарисованного силуэта: пока она едет, в кадре стоит
   тот же силуэт, что и раньше, — окно не пустует. */
.tk-turn-canvas{
  position:absolute; inset:0; width:100%; height:100%; border-radius:11px;
  /* Сцена смотровая: машину крутит блок, а не человек. Мышь и палец сквозь
     канву проходят — страница под ней прокручивается как обычно. */
  pointer-events:none;
}
.tk-turn.has-3d .tk-turn-spin.is-standin{display:none;}
/* Стрелка «без сборки»: где смотрела бы машина с прежней скоростью. Две
   модели друг в друге читались бы кашей, поэтому здесь только курс. */
.tk-turn-ghost{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  animation:tk-turn-spin linear infinite; animation-play-state:paused;}
.tk-turn-ghost.is-spinning{animation-play-state:running;}
.tk-turn-ghost.is-sweep{animation-name:tk-turn-sweep; animation-direction:alternate;}
/* Сток снизу: та же машина, бледная и обесцвеченная. Верхняя сцена идёт
   поверх неё с прозрачным фоном, поэтому отставание видно как вторая
   машина, выезжающая из-под первой. */
.tk-turn-canvas-was{opacity:0.45; filter:grayscale(1) brightness(0.8);}
.tk-turn-ring{fill:none; stroke:rgba(255,255,255,0.12); stroke-width:1; stroke-dasharray:3 7;}
.tk-turn-tick{stroke:rgba(255,255,255,0.18); stroke-width:2;}
.tk-turn-head{fill:var(--amber);}
.tk-turn-spin{
  position:absolute; inset:14%;
  display:flex; align-items:center; justify-content:center;
}
/* Крутят корпус — вращается вся машина; крутят башню — только она, вокруг
   своего погона, а корпус стоит. */
.tk-turn-spin.is-hull,
.tk-turn-spin.is-turret .tk-turn-rot{animation:tk-turn-spin linear infinite; animation-play-state:paused;}
.tk-turn-spin.is-turret .tk-turn-rot{transform-box:view-box; transform-origin:60px 100px;}
.tk-turn-spin.is-hull.is-spinning,
.tk-turn-spin.is-turret.is-spinning .tk-turn-rot{animation-play-state:running;}
/* Башня с ограниченным сектором ходит от упора до упора и обратно, а не по
   кругу: те же градусы в секунду, только маятником. */
.tk-turn-spin.is-sweep.is-hull,
.tk-turn-spin.is-sweep.is-turret .tk-turn-rot{
  animation-name:tk-turn-sweep; animation-direction:alternate;
}
@keyframes tk-turn-sweep{
  from{transform:rotate(var(--tk-arc-from, -45deg));}
  to{transform:rotate(var(--tk-arc-to, 45deg));}
}
/* Силуэт «без сборки» — та же машина, но бледная: она отстаёт (или уходит
   вперёд) ровно на то, что дали оборудование и амуниция. */
.tk-turn-was{opacity:0.3;}
.tk-turn-was .tk-turn-tank rect, .tk-turn-was .tk-turn-tank circle,
.tk-turn-was .tk-turn-grouser, .tk-turn-was .tk-turn-line{stroke:#fff;}
.tk-turn-tank{width:100%; height:100%; overflow:visible;}
.tk-turn-tank rect, .tk-turn-tank circle{fill:#0b0f0d; stroke:var(--amber); stroke-width:3;}
.tk-turn-track{fill:#12140f !important;}
.tk-turn-grouser, .tk-turn-line{stroke:var(--amber); stroke-width:2.5; opacity:0.55;}
.tk-turn-turret{fill:#151509 !important;}
.tk-turn-hatch{stroke-width:2.5; opacity:0.7;}
@keyframes tk-turn-spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.tk-turn-spin, .tk-turn-rot{animation:none;}}
.tk-turn-play-cell{display:flex; align-items:center; justify-content:center;}
.tk-turn-play{white-space:nowrap;}

/* Счётчик кругов: пока машина крутится, видно, какой оборот идёт. */
.tk-turn-lap{
  position:absolute; left:0.7rem; top:0.6rem;
  display:flex; flex-direction:column; gap:0.1rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
}
.tk-turn-lap b{color:var(--amber); font-size:0.72rem;}
.tk-turn-lap i{font-style:normal; color:rgba(255,255,255,0.4);}

/* Разрыв между стволами: две точки на дулах и дуга между ними — видно, на
   сколько башня со сборкой ушла вперёд от стоковой. */
.tk-turn-gap{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.tk-turn-gap-arc{fill:none; stroke:var(--amber); stroke-width:4; stroke-linecap:round; opacity:0.9;}
.tk-turn-gap-dot{stroke:rgba(7,10,9,0.9); stroke-width:2;}
.tk-turn-gap-now{fill:var(--amber);}
.tk-turn-gap-was{fill:rgba(255,255,255,0.65);}

/* Амуниция внутри рамки сборки: та же сборка, те же плитки — отдельной
   рамкой она только дробила колонку. Отделяем линией и подписью. */
.tk-prov{margin-top:0.9rem; padding-top:0.75rem; border-top:1px solid var(--line-soft);}
.tk-sub-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem;
  margin-bottom:0.5rem;
}
.tk-sub-head .tk-sub-title{margin:0;}

/* «Было» рядом с усиленной толщиной в подсказке к схеме брони. */
.tk-armor-was{font-style:normal; font-size:0.85em; color:var(--text-faint); margin-left:0.25rem;}

/* ---- замер брони по клику ----
   Отметка стоит на точке брони, окошко — рядом с ней; при вращении машины
   оба едут вслед за точкой (см. placePin в tank.js). Точку закрыл корпус —
   гаснут до полупрозрачных, но не исчезают: замер никуда не делся. */
.tk-armor-dot{
  position:absolute; z-index:3; width:0.7rem; height:0.7rem; margin:-0.35rem 0 0 -0.35rem;
  border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,0.35);
  box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 0 10px rgba(255,255,255,0.45);
  pointer-events:none;
}
/* Замер брони. Размер окошка — одна ручка, font-size на самом окне: всё
   внутри считается в em от неё, поэтому окно ужимается целиком и на глаз
   остаётся тем же самым, только мельче. Раньше тут были rem, то есть размер
   от корня страницы: на телефоне сцена ужимается вдвое, а окошко оставалось
   прежним и закрывало собой пол-машины.

   Позицию окна считает placePin в tank.js по его же offsetWidth/offsetHeight,
   так что от смены размера она едет сама — подгонять там нечего. */
.tk-armor-pop{
  position:absolute; z-index:4; font-size:1rem;
  min-width:9.5em; max-width:13em;
  padding:0.45em 0.55em 0.4em;
  border-radius:0.5em; border:1px solid var(--line-soft);
  background:rgba(8,10,9,0.92); backdrop-filter:blur(2px);
  box-shadow:0 0.6em 1.4em rgba(0,0,0,0.55);
  font-variant-numeric:tabular-nums;
}
.tk-armor-dot.is-hidden{opacity:0.3;}
.tk-armor-pop.is-hidden{opacity:0.45;}
.tk-armor-pop-mm{color:#fff; font-size:1.05em; line-height:1.2; margin-bottom:0.24em;}
.tk-armor-pop-mm b{font-size:1.29em;}
.tk-armor-pop-mm .tk-armor-was{margin-left:0.33em;}
.tk-armor-pop-row{
  display:flex; justify-content:space-between; gap:0.88em;
  font-size:0.68em; color:var(--text-dim); line-height:1.5;
}
.tk-armor-pop-row b{color:#fff; font-weight:600;}
.tk-armor-pop-part{
  margin-top:0.4em; padding-top:0.4em; border-top:1px solid var(--line-soft);
  font-size:0.62em; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-faint);
}
.tk-armor-pop-x{
  position:absolute; right:0.16em; top:0.05em;
  border:0; background:none; color:var(--text-faint);
  font-size:0.95em; line-height:1; padding:0.16em 0.32em; cursor:pointer;
}
.tk-armor-pop-x:hover{color:#fff;}
/* Крестик — единственное, что нельзя ужимать вместе с окном: пальцем в него
   надо попадать и на мелком окошке. Область нажатия растягиваем невидимой
   зоной внутрь окна, а не полями самой кнопки: поля сдвинули бы крестик из
   угла на строку с цифрой. Наружу зона почти не выходит — иначе промах мимо
   окна ставил бы новый замер вместо закрытия. */
@media (pointer: coarse){
  .tk-armor-pop-x::after{
    content:''; position:absolute; inset:-0.2em -0.2em -0.9em -0.9em;
  }
}
/* Сцена на телефоне вдвое ниже настольной — окно ужимаем вслед за ней.
   Ужимается только кегль: остальное в em и едет само. */
@media (max-width: 900px){
  .tk-armor-pop{font-size:0.82rem;}
}
@media (max-width: 560px){
  .tk-armor-pop{font-size:0.72rem;}
}


/* ---- Народная оценка машины (public/tank.js, lib/tankVotes.js) ---- */
.tk-opinion {
  display: grid; gap: 8px; margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}
.tk-opinion.is-busy { opacity: 0.6; pointer-events: none; }
.tk-op-title { font: 700 10.5px Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.tk-op-score { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tk-op-avg { font: 600 26px Oswald, sans-serif; color: var(--text); line-height: 1; }
.tk-op-score i { font-style: normal; font-size: 12.5px; color: var(--text-dim); }
.tk-op-played { margin-left: auto; font-size: 12.5px; color: var(--text-dim); }
.tk-op-played b { font: 600 16px Oswald, sans-serif; color: var(--accent); }
.tk-op-played i { font-style: normal; color: var(--text-faint); }
.tk-op-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-op-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  padding: 6px 10px; min-width: 62px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.03); color: var(--text-dim); font: inherit;
}
.tk-op-btn b { font: 600 15px Oswald, sans-serif; color: var(--text); }
.tk-op-btn i { font-style: normal; font-size: 10.5px; color: var(--text-faint); }
.tk-op-btn:hover { border-color: var(--accent); }
.tk-op-btn.active { background: var(--accent); border-color: var(--accent); }
.tk-op-btn.active b, .tk-op-btn.active i { color: var(--accent-ink, #1a1300); }
.tk-op-note { font-size: 11.5px; color: var(--text-faint); line-height: 1.45; }
.tk-op-note a { color: var(--accent); text-decoration: none; }
/* Расшифровка краёв шкалы нужна только там, где скрыты подписи кнопок. */
.tk-op-legend { display: none; }

/* На телефоне пять кнопок с подписями («Нормальная», «Сильная») в строку не
   помещаются и рвутся на два ряда. Оставляем цифры: шкала 1-5 понятна сама,
   а расшифровка крайних значений уходит подписью под ней. */
@media (max-width: 560px) {
  .tk-opinion { padding: 10px 12px; gap: 7px; }
  .tk-op-scale { flex-wrap: nowrap; gap: 5px; }
  .tk-op-btn { flex: 1 1 0; min-width: 0; padding: 7px 0; min-height: 40px; justify-content: center; }
  .tk-op-btn i { display: none; }
  .tk-op-btn b { font-size: 16px; }
  /* Что означают края шкалы — одной строкой вместо пяти подписей. */
  .tk-op-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); }
  .tk-op-avg { font-size: 22px; }
  .tk-op-note { font-size: 11px; }
}