/* Посадочная страница jBK (index.php; макет одобрен владельцем 09.10.2026).

   ПЛАН ДИЗАЙНА
   Идея: главная - это экран боя БК. Две куклы бойцов с полосками HP стоят друг против друга, а между ними,
   на месте формы «удар / блок», - форма входа. Над ареной - кованый знак jBK. Ночь Нижнего города (единственного
   уцелевшего): луна, летучие мыши, всё остальное тонет во тьме.

   Палитра (6):
     --night   #0d0b0a  Ночь       - фон, тёплый почти-чёрный (не синий: куклы нарисованы на чёрном)
     --stone   #1b1714  Камень     - плиты карточек
     --iron    #3b332c  Железо     - рамки, разделители
     --steel   #b8b1a5  Сталь      - второстепенный текст, металл знака
     --blood   #a3241b  Кровь      - главное действие («Начать играть», «Войти»), урон
     --gold    #c8a35a  Старое золото - заклёпки, ссылки, фокус
     (+ --parch #ece3d2 Пергамент - основной текст; --life #4f9a3a - полоска HP, как в игре)

   Шрифты: Alegreya SC 700/900 (капитель с кириллицей; знак jBK, заголовки) + Golos Text 400/500/600 (текст, формы).
   Шкала: 13 / 15 / 17 / 21 / 28 / 40 / знак clamp(88px..176px). Строка текста <= 62ch.

   Сетка - компьютер (>= 1000px):
     +------------------------------------------------------------------+
     | jBK   Новости Форум Библиотека Законы Рейтинг        * 9 в клубе  |
     |                          j B K                                    |
     |              Just BK · Просто Бойцовский Клуб                     |
     |        лид (1-2 строки)      [ Начать играть ]                    |
     |   Вы [0] ====HP====   +--------------+   ====HP==== Соперник [0]  |
     |   [кукла 180x330]     | Вход в клуб  |     [кукла 180x330]        |
     |                       | логин/пароль |                            |
     |                       +--------------+                            |
     |   9 в клубе сейчас  ·  34 боя сегодня  ·  139 бойцов              |
     +------------------------------------------------------------------+
     | Что тебя ждёт: 4x2 плиты (портрет-кукла сверху, текст снизу)      |
     | Как начать: 3 шага в ряд (настоящая последовательность - номера)  |
     | Новости клуба (2 последние) | подвал: ссылки, вид игры, 18+       |

   Телефон (375px):
     | jBK                [Войти] |
     |          j B K             |
     |  Just BK · Просто БК       |
     |  лид                       |
     |  [   Начать играть   ]     |
     |  [кукла]  vs  [кукла]      |  куклы 140px, HP над ними
     |  +----------------------+  |
     |  | Вход в клуб          |  |
     |  +----------------------+  |
     |  цифры столбиком 3 в ряд   |
     |  плиты: картинка слева 88px, текст справа                    |

   Принципы: материалы мира (железо, заклёпки, кровь, золото), без градиентной «каши» и подписей-над-заголовками;
   одно движение - при загрузке у Соперника падает HP и всплывает «-11» (prefers-reduced-motion - без него);
   видимый фокус (золотая обводка), контраст текста >= 4.5:1, ничего не шире экрана. */

:root {
  --night: #0d0b0a;
  --stone: #1b1714;
  --stone2: #241f1b;
  --iron: #3b332c;
  --steel: #b8b1a5;
  --blood: #a3241b;
  --blood-hi: #c03025;
  --gold: #c8a35a;
  --parch: #ece3d2;
  --life: #4f9a3a;
  --display: 'Alegreya SC', 'Georgia', 'Times New Roman', serif;
  --body: 'Golos Text', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1180px;
  --pad: 16px;
}

*, *::before, *::after {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%;}
body {margin: 0; background: var(--night); color: var(--parch); font: 400 16px/1.55 var(--body); overflow-x: hidden;}
img {max-width: 100%;}
a {color: var(--gold); text-decoration: none;}
a:hover {text-decoration: underline; text-underline-offset: 3px;}
:focus-visible {outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;}
.wrap {max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);}
.sr {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}

/* ---------- Шапка ---------- */
.top {position: relative; z-index: 3;}
.top .wrap {display: flex; align-items: center; gap: 24px; min-height: 60px;}
.top-mark {font: 900 26px/1 var(--display); color: var(--parch); letter-spacing: .02em;}
.top-mark:hover {text-decoration: none; color: #fff;}
.top-nav {display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px;}
.top-nav a {color: var(--steel);}
.top-nav a:hover {color: var(--parch);}
.top-online {margin-left: auto; font-size: 14px; color: var(--steel); white-space: nowrap;}
.top-online b {color: var(--parch); font-weight: 600;}
.dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--life); margin-right: 7px; box-shadow: 0 0 0 3px rgba(79,154,58,.18); vertical-align: 1px;}
.top .top-login {display: none;}

/* ---------- Первый экран ---------- */
.hero {--sky: 900px; position: relative; padding: 8px 0 56px; isolation: isolate;}
.hero::before {           /* ночь Нижнего города: луна и мыши, края картинки (светлая виньетка) - за экраном */
  content: ''; position: absolute; inset: -60px 0 auto; height: var(--sky); z-index: -2;
  background: url(../img/room/strash/vesna_cap_strash_night.png) 50% 4% / max(150%, 1300px) auto no-repeat;
  filter: saturate(.6) brightness(.85) contrast(1.05);
}
.hero::after {
  content: ''; position: absolute; inset: -60px 0 auto; height: calc(var(--sky) + 2px); z-index: -1;
  background:
    radial-gradient(ellipse 75% 60% at 50% 16%, rgba(13,11,10,0) 0%, rgba(13,11,10,.35) 55%, var(--night) 100%),
    linear-gradient(180deg, rgba(13,11,10,.1) 0%, rgba(13,11,10,.3) 45%, var(--night) 100%);
}
.brand {text-align: center; padding-top: 18px;}
.wordmark {
  margin: 0; font: 900 clamp(88px, 15vw, 176px)/.86 var(--display); letter-spacing: .01em;
  background: linear-gradient(180deg, #f6f0e4 0%, #cfc7b9 44%, #6e665b 50%, #a59d90 62%, #e9e1d2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 10px 28px rgba(0,0,0,.8));
}
.tagline {margin: 10px 0 0; font: 700 clamp(19px, 2.3vw, 26px)/1.25 var(--display); color: var(--gold); letter-spacing: .02em;}
.tagline span {color: var(--steel); padding: 0 .35em;}
.lead {max-width: 34em; margin: 14px auto 0; font-size: 17px; color: var(--steel);}
.cta-row {display: flex; justify-content: center; gap: 14px; margin-top: 22px; flex-wrap: wrap;}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px;
  font: 600 16px/1 var(--body); border-radius: 3px; cursor: pointer; text-decoration: none; border: 1px solid transparent;
}
.btn:hover {text-decoration: none;}
.btn-blood {background: linear-gradient(180deg, var(--blood-hi), var(--blood)); color: #fff; border-color: #5e140f;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(163,36,27,.35);}
.btn-blood:hover {background: linear-gradient(180deg, #d1392d, var(--blood-hi));}
.btn-ghost {color: var(--parch); border-color: var(--iron); background: rgba(27,23,20,.6);}
.btn-ghost:hover {border-color: var(--gold);}
.btn-lg {min-height: 54px; padding: 0 36px; font-size: 17px;}

/* арена: кукла - форма - кукла */
.arena {display: grid; grid-template-columns: 1fr minmax(320px, 380px) 1fr; align-items: start; gap: 28px; margin-top: 40px;}
.fighter {display: flex; flex-direction: column; align-items: center; gap: 10px;}
.fighter-left {justify-self: end;}
.fighter-right {justify-self: start;}
.hp {width: 180px; font-size: 13px; color: var(--steel);}
.hp-name {display: flex; justify-content: space-between; margin-bottom: 4px;}
.hp-name b {color: var(--parch); font-weight: 600;}
.hp-bar {position: relative; height: 8px; background: #2a0f0c; border: 1px solid #000; box-shadow: 0 0 0 1px var(--iron);}
.hp-bar i {position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(180deg, #6cc04f, var(--life) 60%, #326423);}
.hp-num {font-variant-numeric: tabular-nums;}
.doll {position: relative; width: 180px; height: 330px;}
.doll img {
  width: 100%; height: 100%; display: block; clip-path: inset(2px);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 62%, transparent 100%);
}
.fighter-right .doll img {transform: scaleX(-1);}
.fighter-right .hp-bar i {width: 63%;}   /* после удара; при движении - анимация hit от 100% */
.dmg {position: absolute; top: 34%; left: 50%; transform: translateX(-50%); font: 900 40px/1 var(--display); color: #e2382b;
      text-shadow: 0 2px 0 #000, 0 0 18px rgba(226,56,43,.5); opacity: 0; pointer-events: none;}

/* форма входа - кованая плита с заклёпками */
.gate {
  position: relative; padding: 26px 26px 22px; background: linear-gradient(180deg, var(--stone2), var(--stone));
  border: 1px solid var(--iron); border-radius: 4px; box-shadow: 0 0 0 4px rgba(0,0,0,.55), 0 24px 60px rgba(0,0,0,.6);
}
.gate::before, .gate::after {
  content: ''; position: absolute; top: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0d79a, var(--gold) 45%, #6b5226 100%);
}
.gate::before {left: 9px;}
.gate::after {right: 9px;}
.gate h2 {margin: 0 0 16px; text-align: center; font: 700 28px/1.1 var(--display); color: var(--parch);}
.field {display: block; margin-bottom: 12px;}
.field span {display: block; margin-bottom: 5px; font-size: 14px; color: var(--steel);}
.field input {
  width: 100%; height: 46px; padding: 0 12px; font: 400 16px var(--body); color: var(--parch);
  background: #0f0d0c; border: 1px solid var(--iron); border-radius: 3px;
}
.field input:focus {outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,163,90,.22);}
.field input[aria-invalid=true] {border-color: var(--blood-hi);}
.pass-row {display: flex; gap: 6px;}
.pass-row input {flex: 1; min-width: 0;}
.kbd-toggle {
  flex: none; width: 46px; height: 46px; border: 1px solid var(--iron); border-radius: 3px; background: #0f0d0c; color: var(--steel);
  cursor: pointer; font-size: 22px; line-height: 1;
}
.kbd-toggle[aria-expanded=true] {border-color: var(--gold); color: var(--gold);}
.gate .btn-blood {width: 100%; margin-top: 4px;}
.gate-links {display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 14px; flex-wrap: wrap;}
.gate-links span {color: var(--steel);}
.note {margin: 0 0 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; border-radius: 3px; border-left: 3px solid var(--blood-hi);
       background: rgba(163,36,27,.14); color: #f3c9c4;}
.form-err {min-height: 0; margin: 0 0 8px; font-size: 14px; color: #f08a80;}
.form-err:empty {display: none;}
.keypad {display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: 0 0 12px;}
.keypad[hidden] {display: none;}
.keypad button {
  height: 32px; padding: 0; font: 500 14px var(--body); color: var(--parch); background: #0f0d0c;
  border: 1px solid var(--iron); border-radius: 2px; cursor: pointer;
}
.keypad button:hover {border-color: var(--gold);}
.keypad .wide {grid-column: span 5; font-size: 13px; color: var(--steel);}

/* цифры */
.numbers {display: flex; justify-content: center; gap: 0; margin: 36px auto 0; padding: 0; list-style: none; max-width: 720px;}
.numbers li {flex: 1; text-align: center; padding: 0 12px; border-left: 1px solid var(--iron); font-size: 14px; color: var(--steel);}
.numbers li:first-child {border-left: 0;}
.numbers b {display: block; font: 700 34px/1.1 var(--display); color: var(--parch); font-variant-numeric: tabular-nums;}

/* ---------- Разделы ---------- */
.section {padding: 72px 0;}
.section + .section {padding-top: 8px;}
.section h2 {margin: 0 0 8px; font: 700 clamp(30px, 4vw, 40px)/1.1 var(--display); color: var(--parch);}
.section-lead {margin: 0 0 32px; max-width: 40em; color: var(--steel);}
.rule {height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--iron) 15%, var(--iron) 85%, transparent);}

.feats {display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none;}
.feat {background: var(--stone); border: 1px solid var(--iron); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;}
.feat-pic {height: 150px; background: #000; overflow: hidden; position: relative;}
.feat-pic img {display: block; width: 150px; height: auto; margin: -8px auto 0; translate: 0 var(--shift, 0); clip-path: inset(2px);
                -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);}
.feat-pic::after {content: ''; position: absolute; inset: auto 0 0; height: 50px; background: linear-gradient(transparent, var(--stone));}
.feat-body {padding: 6px 18px 20px;}
.feat h3 {margin: 0 0 6px; font: 700 21px/1.2 var(--display); color: var(--gold);}
.feat p {margin: 0; font-size: 15px; line-height: 1.5; color: var(--steel);}

.steps {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: step;}
.step {position: relative; padding: 22px 20px 22px 76px; border: 1px solid var(--iron); border-radius: 4px; background: var(--stone); counter-increment: step;}
.step::before {
  content: counter(step); position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; display: grid; place-items: center;
  font: 900 22px/1 var(--display); color: var(--night); background: radial-gradient(circle at 35% 30%, #f0d79a, var(--gold) 50%, #7a5d2a);
  border-radius: 50%;
}
.step h3 {margin: 0 0 4px; font: 700 21px/1.2 var(--display); color: var(--parch);}
.step p {margin: 0; font-size: 15px; color: var(--steel);}
.steps-cta {margin-top: 28px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;}
.steps-cta span {color: var(--steel); font-size: 15px;}

.news {display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none;}
.news li {padding: 18px 20px; border-left: 3px solid var(--gold); background: var(--stone);}
.news li:only-child {grid-column: 1 / -1; max-width: 46em;}   /* одна новость - не в половину ширины */
.news time {font-size: 13px; color: var(--steel);}
.news h3 {margin: 2px 0 6px; font: 700 20px/1.25 var(--display);}
.news h3 a {color: var(--parch);}
.news p {margin: 0; font-size: 15px; color: var(--steel);}

/* ---------- Подвал ---------- */
.foot {margin-top: 24px; padding: 28px 0 36px; border-top: 1px solid var(--iron); font-size: 14px; color: var(--steel);}
.foot .wrap {display: flex; gap: 18px 32px; align-items: center; flex-wrap: wrap;}
.foot-mark {font: 700 20px/1 var(--display); color: var(--parch);}
.foot nav {display: flex; gap: 18px; flex-wrap: wrap;}
.foot nav a {color: var(--steel);}
.foot nav a:hover {color: var(--parch);}
.age {margin-left: auto; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--blood-hi); border-radius: 50%;
      font-weight: 600; color: var(--parch); font-size: 13px;}
.view {display: none; width: 100%;}
.view button {background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--gold); cursor: pointer;}
.view button[aria-pressed=true] {text-decoration: underline; text-underline-offset: 3px; color: var(--parch);}

/* ---------- Движение: одно, при загрузке ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fighter-left {animation: in-left .7s cubic-bezier(.2,.7,.2,1) both;}
  .fighter-right {animation: in-right .7s cubic-bezier(.2,.7,.2,1) both;}
  .fighter-right .hp-bar i {animation: hit .35s 1.1s ease-out both;}
  .fighter-right .dmg {animation: dmg 1.1s 1.05s ease-out both;}
  @keyframes in-left {from {opacity: 0; transform: translateX(-40px);}}
  @keyframes in-right {from {opacity: 0; transform: translateX(40px);}}
  @keyframes hit {from {width: 100%;} to {width: 63%;}}
  @keyframes dmg {0% {opacity: 0; transform: translate(-50%, 10px);} 20% {opacity: 1;} 70% {opacity: 1;} 100% {opacity: 0; transform: translate(-50%, -26px);}}
}

/* ---------- Планшет ---------- */
@media (max-width: 999px) {
  .arena {grid-template-columns: 1fr 1fr; gap: 20px 12px;}
  .fighter-left {grid-column: 1; grid-row: 1;}
  .fighter-right {grid-column: 2; grid-row: 1;}
  .gate {grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 420px; justify-self: center;}
  .feats {grid-template-columns: repeat(2, 1fr);}
  .steps {grid-template-columns: 1fr;}
}

/* ---------- Телефон ---------- */
@media (max-width: 640px) {
  .top .wrap {gap: 12px; min-height: 54px;}
  .top-nav, .top-online {display: none;}
  .top .top-login {display: inline-flex; margin-left: auto; min-height: 38px; padding: 0 16px; font-size: 15px;}
  .hero {padding-bottom: 40px;}
  .hero {--sky: 560px;}
  .hero::before {background-size: 1100px auto; background-position: 50% 0; filter: saturate(.55) brightness(.6);}
  .brand {padding-top: 6px;}
  .lead {font-size: 16px;}
  .cta-row .btn {width: 100%;}
  .cta-row .btn-ghost {display: none;}
  .arena {margin-top: 28px; gap: 16px 8px;}
  .doll {width: 140px; height: 257px;}
  .hp {width: 140px; font-size: 12px;}
  .hp-name {gap: 4px; white-space: nowrap;}
  .dmg {font-size: 32px;}
  .gate {padding: 22px 18px 18px;}
  .numbers li {padding: 0 6px; font-size: 13px;}
  .numbers b {font-size: 28px;}
  .section {padding: 52px 0;}
  .feats {grid-template-columns: 1fr; gap: 12px;}
  .feat {flex-direction: row;}
  .feat-pic {flex: none; width: 92px; height: auto; min-height: 120px;}
  .feat-pic img {width: 92px; margin-top: -4px; translate: 0 var(--shift, 0); -webkit-mask-image: none; mask-image: none;}
  .feat-pic::after {inset: 0 0 0 auto; width: 30px; height: auto; background: linear-gradient(90deg, transparent, var(--stone));}
  .feat-body {padding: 14px 14px 14px 10px;}
  .feat h3 {font-size: 19px;}
  .feat p {font-size: 14px;}
  .news {grid-template-columns: 1fr;}
  .view {display: block;}
  .age {margin-left: 0;}
}