/*
 * Сайт WoT 0.8.2 на classic.vibeoftanks.ru. Стиль, шрифты и картинки — копия tools/deploy/www/assets из TankBattles
 * (собственные ассеты Vibe Of Tanks, ничего из World of Tanks), чтобы сайт выглядел как Vibe Of Tanks.
 * Без встроенных скриптов и стилей и без CDN: CSP script-src/style-src 'self' (deploy/caddy/wot082.caddy).
 */
@font-face { font-family: "Russo One"; src: url("fonts/RussoOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PT Sans"; src: url("fonts/PT_Sans-Web-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PT Sans"; font-weight: 700; src: url("fonts/PT_Sans-Web-Bold.ttf") format("truetype"); font-display: swap; }

:root {
  --bg: #0d0b09; --bar: rgba(10, 8, 6, 0.92); --border: #4a4436; --border-light: #8a857a; --border-dim: #2e2a22;
  --text: #dcdcd6; --text-2: #b8b3a3; --dim: #7d796c; --accent: #d9a45a; --gold: #f0c040; --error: #e2412e; --ok: #8fb03c;
  --logo: #cfc7ae; --subtitle: #8d6a3c; --field: #1e1a14;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 16px/1.5 "PT Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}
a { color: var(--accent); }
a:hover { color: #f0c27a; }
h1, h2, h3, .caps { font-family: "Russo One", "PT Sans", sans-serif; font-weight: 400; letter-spacing: 0.04em; }
img { max-width: 100%; }
.hidden { display: none !important; }

/* ---------- шапка и меню ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10; background: var(--bar); border-bottom: 1px solid var(--border);
}
.topbar__in {
  max-width: 1100px; margin: 0 auto; padding: 0 16px; min-height: 52px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.logo {
  font-family: "Russo One", sans-serif; font-size: 20px; letter-spacing: 3px; color: var(--logo);
  text-decoration: none; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9); white-space: nowrap;
}
.logo:hover { color: #ece4c8; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a {
  font-family: "Russo One", sans-serif; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; padding: 14px 10px 12px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.who b { font-family: "Russo One", sans-serif; font-weight: 400; color: var(--accent); }

/* ---------- раскладка ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 56px; }
.hero {
  position: relative; text-align: center; padding: 44px 16px 36px; margin: 0 -16px 24px;
  background: url("kit/HeaderArt.png") center / 100% 100% no-repeat;
}
.hero h1 {
  margin: 0; font-size: clamp(30px, 7vw, 56px); letter-spacing: 0.12em; color: var(--logo);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}
.hero .subtitle { margin: 4px 0 24px; font-family: "Russo One", sans-serif; font-size: 13px; letter-spacing: 4px; color: var(--subtitle); }
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .grid { grid-template-columns: minmax(0, 1fr); } }

/* Окно игры: светлая металлическая рамка, бурое тело, оливковый заголовок. */
.window {
  border: 14px solid transparent; border-image: url("kit/PanelMetal.png") 14 fill / 14px stretch;
  margin-bottom: 16px; min-width: 0;
}
.window__title {
  margin: -8px -8px 12px; padding: 7px 14px 8px; min-height: 38px;
  border: 6px solid transparent; border-width: 6px 12px; border-image: url("kit/WindowTitle.png") 6 12 fill / 6px 12px stretch;
  font-family: "Russo One", sans-serif; font-size: 17px; color: #f6f3e8; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
}
.window__title h2 { margin: 0; font-size: inherit; letter-spacing: 0.02em; }
.window__body { padding: 0 6px 6px; }
.dim { color: var(--dim); }
.text-2 { color: var(--text-2); }
.error { color: var(--error); }
.ok { color: var(--ok); }

/* ---------- кнопки (Kit: ButtonNormal / BattleNormal) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 16px;
  font: 15px "Russo One", sans-serif; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.95);
  border: 8px solid transparent; border-width: 8px; border-image: url("kit/ButtonNormal.png") 8 fill / 8px stretch;
  background: none; cursor: pointer;
}
.btn:hover { color: #fff; border-image-source: url("kit/ButtonHover.png"); }
.btn:active { border-image-source: url("kit/ButtonPressed.png"); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn--battle {
  min-height: 56px; padding: 0 30px; font-size: 22px; border-width: 10px;
  border-image: url("kit/BattleNormal.png") 10 fill / 10px stretch;
}
.btn--battle:hover { border-image-source: url("kit/BattleHover.png"); color: #fff4e0; }
.btn--battle:active { border-image-source: url("kit/BattlePressed.png"); }
.btn--battle small { display: block; font: 13px "PT Sans", sans-serif; color: #f1d6cf; text-shadow: none; }
.btn--battle span { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.btn--small { min-height: 28px; font-size: 13px; padding: 0 8px; border-width: 6px; border-image-width: 6px; }
.btn--link {
  border: 0; border-image: none; padding: 0; min-height: 0; font: inherit; color: var(--text-2); text-decoration: underline;
  text-shadow: none;
}
.btn--link:hover { border-image: none; color: var(--accent); }
.buttons { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .buttons { justify-content: center; }

/* ---------- новости ---------- */
.news { list-style: none; margin: 0; padding: 0; }
.news > li + li { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-dim); }
.news__date { color: var(--dim); font-size: 13px; }
.news__version {
  display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid var(--border); color: var(--text-2); font-size: 12px;
}
.news h3 { margin: 2px 0 6px; font-size: 18px; color: var(--accent); letter-spacing: 0.02em; }
.news p { margin: 0 0 8px; color: var(--text-2); }
.news ul { margin: 0 0 8px; padding-left: 20px; color: var(--text-2); }

/* ---------- формы ---------- */
.tabs { display: flex; gap: 0; margin: -4px 0 14px; }
.tab {
  flex: 1; min-height: 36px; font: 14px "Russo One", sans-serif; color: var(--text-2); background: none; cursor: pointer;
  border: 6px solid transparent; border-image: url("kit/TabNormal.png") 6 fill / 6px stretch;
}
.tab:hover { border-image-source: url("kit/TabHover.png"); color: #fff; }
.tab[aria-selected="true"] { border-image-source: url("kit/TabActive.png"); color: #ffe6a8; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; margin: 0 0 3px 2px; color: var(--text-2); font-size: 13px; }
.field input {
  width: 100%; min-height: 36px; padding: 4px 10px; font: 16px "PT Sans", sans-serif; color: var(--text);
  background: var(--field); border: 1px solid var(--border-light); border-radius: 0; outline: none;
}
.field input:focus { border-color: var(--accent); }
.status { min-height: 22px; margin: 4px 0 10px; white-space: pre-line; }
.narrow { max-width: 440px; margin: 0 auto; }
.note { color: var(--dim); font-size: 14px; }

/* ---------- мои танки ---------- */
.stats { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; margin-bottom: 14px; }
.stat b { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 18px; }
.stat span { margin-left: 5px; color: var(--dim); font-size: 13px; }
.stat--gold b { color: var(--gold); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.carousel {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 10px;
  scrollbar-color: #4a4436 #0b0a08;
}
.card {
  position: relative; flex: 0 0 168px; height: 112px; scroll-snap-align: start; cursor: pointer; padding: 0;
  font: inherit; color: var(--text); text-align: left; background: #14110d center 60% / 92% auto no-repeat;
  border: 2px solid var(--border); outline: none;
}
.card:hover { border-color: var(--border-light); }
.card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.card__tier { position: absolute; left: 6px; top: 3px; font: 13px "Russo One", sans-serif; color: var(--text-2); }
.card__name {
  position: absolute; right: 6px; bottom: 4px; left: 6px; text-align: right; font: 14px "Russo One", sans-serif;
  text-shadow: 1px 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__flag { position: absolute; right: 6px; top: 3px; font-size: 11px; color: var(--dim); text-transform: uppercase; }
.card__battle { position: absolute; left: 6px; bottom: 4px; font-size: 11px; color: var(--error); }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.detail__head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.detail__head img { width: 240px; max-width: 100%; height: auto; }
.detail__head h2 { margin: 0; font-size: 26px; color: #f6f3e8; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 8px 0 0; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; }
.modules { width: 100%; border-collapse: collapse; font-size: 14px; }
.modules th { text-align: left; font: 12px "Russo One", sans-serif; letter-spacing: 0.06em; color: var(--dim); padding: 8px 0 3px; }
.modules td { padding: 3px 0; border-top: 1px solid var(--border-dim); vertical-align: top; }
.modules td + td { text-align: right; white-space: nowrap; padding-left: 8px; }
.badge { font-size: 12px; padding: 0 6px; border: 1px solid var(--border); color: var(--dim); }
.badge--on { color: #ffe6a8; border-color: var(--accent); }
.badge--ok { color: var(--ok); border-color: #4c5e22; }
.crew { list-style: none; margin: 0; padding: 0; }
.crew li { padding: 6px 0; border-top: 1px solid var(--border-dim); }
.crew li:first-child { border-top: 0; }
.crew small { display: block; color: var(--dim); }
.subhead { margin: 14px 0 2px; font-size: 13px; color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chips span { font-size: 13px; padding: 1px 8px; border: 1px solid var(--border); color: var(--text-2); }

/* ---------- загрузка ---------- */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 6px 0 10px; }
.downloads .btn--battle { width: 100%; }
.fallback { font-size: 14px; color: var(--dim); margin: 6px 0 0; }
code {
  background: #15130f; border: 1px solid var(--border); padding: 1px 6px; font-size: 14px; word-break: break-all;
}
ol, ul { padding-left: 22px; }
li + li { margin-top: 6px; }
footer { max-width: 1100px; margin: 0 auto; padding: 0 16px 28px; color: var(--dim); font-size: 13px; }
.filters .btn[aria-pressed="true"] { border-image-source: url("kit/ButtonHover.png"); color: #ffe6a8; }

/* Телефон: логотип и вход в одну строку, меню — строкой под ними (если не влезет — листается вбок внутри себя). */
@media (max-width: 640px) {
  .topbar { position: static; }
  .topbar__in { gap: 0 12px; padding-top: 6px; }
  .logo { font-size: 17px; letter-spacing: 2px; }
  .who { margin-left: auto; }
  .nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 0; overflow-x: auto; margin: 0 -8px; }
  .nav a { padding: 8px 8px 9px; font-size: 13px; white-space: nowrap; }
  main { padding-top: 16px; }
  .hero { padding: 28px 16px 24px; }
}

/* ---------- раздел WoT 0.8.2 ---------- */
.server { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); flex: none; }
.dot--ok { background: var(--ok); }
.dot--bad { background: var(--error); }
.address { font-family: "Russo One", sans-serif; color: var(--text); letter-spacing: 0.03em; }
.steps li::marker { color: var(--accent); font-family: "Russo One", sans-serif; }
.hero .subtitle a { color: inherit; text-decoration: none; }