/* Страницы до входа: регистрация (register.php), напоминание пароля (reminder.php), ошибка входа (enter.php).
   Подключается после styles/landing.css и берёт оттуда всё: палитру (Ночь/Камень/Железо/Сталь/Кровь/Старое золото/Пергамент),
   шрифты, шапку .top, кнопки .btn, поля .field, плашку .note, клавиатуру .keypad, подвал .foot.
   Здесь - только своё: та же ночь Нижнего города за шапкой, кованая карточка формы (как .gate), индикатор шагов,
   подсказки, «Подробнее», ошибки у полей. Ширина карточки 560px, на телефоне - во всю ширину с полями 16px. */

.acc {min-height: 100vh; display: flex; flex-direction: column;}
.acc-main {position: relative; flex: 1; padding: 12px 0 56px; isolation: isolate;}
.acc-main::before {     /* та же ночь, что на главной, только приглушённее: форма важнее неба */
  content: ''; position: absolute; inset: -60px 0 auto; height: 620px; z-index: -2;
  background: url(../img/room/strash/vesna_cap_strash_night.png) 50% 4% / max(150%, 1300px) auto no-repeat;
  filter: saturate(.5) brightness(.55) contrast(1.05);
}
.acc-main::after {
  content: ''; position: absolute; inset: -60px 0 auto; height: 622px; z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 50% 10%, rgba(13,11,10,.2) 0%, rgba(13,11,10,.55) 55%, var(--night) 100%),
              linear-gradient(180deg, rgba(13,11,10,.2), var(--night));
}
.acc .top .top-login {display: inline-flex; margin-left: auto; min-height: 40px; padding: 0 18px; font-size: 15px;}

/* карточка - та же кованая плита с заклёпками, что форма входа на главной */
.card {max-width: 560px; margin: 24px auto 0;}
.card.gate {padding: 28px 30px 26px;}
.card h1 {margin: 0 0 6px; text-align: center; font: 700 32px/1.1 var(--display); color: var(--parch);}
.card .sub {margin: 0 0 18px; text-align: center; font-size: 15px; color: var(--steel);}
.card .btn-wide {width: 100%;}

/* шаги */
.steps-bar {margin: 0 0 20px;}
.steps-text {margin: 0 0 8px; text-align: center; font-size: 14px; color: var(--steel);}
.steps-text b {color: var(--parch); font-weight: 600;}
.steps-line {display: flex; gap: 4px; margin: 0; padding: 0; list-style: none;}
.steps-line li {flex: 1; height: 4px; background: var(--iron); border-radius: 2px; position: relative;}
.steps-line li.done {background: #8a7140;}
.steps-line li.cur {background: var(--gold); box-shadow: 0 0 8px rgba(200,163,90,.45);}
.steps-line span {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}

/* «Имя персонажа: Вася» на шагах 2-5 */
.who {display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 16px; padding: 10px 12px;
      background: rgba(15,13,12,.7); border: 1px solid var(--iron); border-radius: 3px; font-size: 14px; color: var(--steel);}
.who b {color: var(--parch); font-weight: 600; font-size: 16px; overflow-wrap: anywhere;}
.who a {font-size: 13px; white-space: nowrap;}

/* поля: в landing.css «.field span» - подпись поля; здесь внутри полей есть и другие span (пометки, примеры, образец цвета) -
   подписью остаётся только первый span поля/метки */
.acc .field span {display: inline; margin: 0; font-size: inherit; color: inherit;}
.acc .field > span:first-child, .acc .field > label > span:first-child, .acc .field > label:first-child > span:first-child {
  display: block; margin-bottom: 5px; font-size: 14px; color: var(--steel);}
.acc /* селекты как инпуты, подсказки, ошибки у полей */
.field > label {display: block;}
.field select {
  width: 100%; height: 46px; padding: 0 34px 0 10px; font: 400 16px var(--body); color: var(--parch); background: #0f0d0c;
  border: 1px solid var(--iron); border-radius: 3px; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-size: 5px 5px; background-repeat: no-repeat;
}
.field select:focus {outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,163,90,.22);}
.field select[aria-invalid=true] {border-color: var(--blood-hi);}
.field select option {background: #0f0d0c; color: var(--parch);}
.hint {margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #9d968b;}
.hint b {color: var(--steel); font-weight: 600;}
.field-err {margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #f08a80;}
.field-err:empty {display: none;}
.field-err::before {content: '! '; font-weight: 600;}
.form-err a, .field-err a {color: var(--gold);}
.card .form-err:not(:empty) {padding: 10px 12px; margin-bottom: 14px; line-height: 1.45; border-left: 3px solid var(--blood-hi); border-radius: 3px; background: rgba(163,36,27,.14); color: #f3c9c4;}
.row3 {display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px;}
.row2 {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}

/* «Подробнее» - правила под подсказкой */
.more {margin: 8px 0 0; font-size: 14px; color: var(--steel);}
.more summary {cursor: pointer; color: var(--gold); font-size: 13px; width: max-content; list-style: none;}
.more summary::-webkit-details-marker {display: none;}
.more summary::before {content: '▸ '; display: inline-block; width: 1em;}
.more[open] summary::before {content: '▾ ';}
.more ol {margin: 10px 0 0; padding: 12px 14px 12px 32px; background: rgba(15,13,12,.7); border: 1px solid var(--iron); border-radius: 3px;}
.more li {margin: 0 0 8px; line-height: 1.45;}
.more li:last-child {margin-bottom: 0;}
.acc .more .ex {display: block; font-size: 13px; color: #9d968b;}
.acc .more .ok {color: #9fcf88;}
.acc .more .bad {color: #f08a80;}

/* пол - две кнопки-переключателя; галочки соглашений */
.seg {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0;}
.seg legend {padding: 0; margin-bottom: 5px; font-size: 14px; color: var(--steel);}
.seg label {position: relative;}
.seg input {position: absolute; opacity: 0; inset: 0;}
.acc .seg span {display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--iron); border-radius: 3px;
           background: #0f0d0c; color: var(--steel); cursor: pointer; margin: 0; font-size: 16px;}
.seg input:checked + span {border-color: var(--gold); color: var(--parch); background: rgba(200,163,90,.12);}
.seg input:focus-visible + span {outline: 2px solid var(--gold); outline-offset: 2px;}
.check {display: flex; gap: 10px; align-items: flex-start; margin: 0 0 4px; font-size: 15px; line-height: 1.45; cursor: pointer;}
.check input {flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blood-hi);}
.check + .field-err {margin: 0 0 10px 30px;}
.checks {margin: 0 0 14px;}

/* цвет сообщений в чате - образец рядом со списком */
.color-row {display: flex; gap: 8px; align-items: stretch;}
.color-row select {flex: 1; min-width: 0;}
.acc .field .swatch {flex: none; display: grid; place-items: center; padding: 0 12px; min-width: 112px; border-radius: 3px; background: #f2e5b1;
         border: 1px solid var(--iron); font-size: 14px; font-weight: 600;}

/* капча */
.captcha {display: flex; gap: 8px; align-items: center;}
.captcha img {display: block; width: 157px; height: 49px; border: 1px solid var(--iron); border-radius: 3px; background: #c8c8c8;}
.captcha input {flex: 1; min-width: 0; letter-spacing: .2em;}
.captcha .refresh {flex: none; width: 46px; height: 46px; border: 1px solid var(--iron); border-radius: 3px; background: #0f0d0c;
                   color: var(--steel); cursor: pointer; font-size: 20px;}
.captcha .refresh:hover {border-color: var(--gold); color: var(--gold);}

/* кнопки шага: «Назад» слева, главное действие справа и шире */
.actions {display: flex; gap: 10px; margin-top: 18px;}
.actions .btn-blood {flex: 1;}
.actions .btn[disabled] {opacity: .6; cursor: progress;}
.card .gate-links {justify-content: center; gap: 8px 22px;}

/* итог и простые сообщения */
.done-ic {display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; font: 900 28px/1 var(--display);
          color: var(--night); background: radial-gradient(circle at 35% 30%, #f0d79a, var(--gold) 50%, #7a5d2a);}
.plain {margin: 0 0 16px; text-align: center; color: var(--steel);}
.note-ok {border-left-color: var(--gold); background: rgba(200,163,90,.12); color: var(--parch);}

@media (max-width: 640px) {
  .acc .top-nav {display: none;}
  .acc-main {padding-top: 0;}
  .card {margin-top: 10px;}
  .card.gate {padding: 22px 16px 18px;}
  .card h1 {font-size: 28px;}
  .row3 {grid-template-columns: 1fr 1.5fr 1.2fr; gap: 6px;}
  .row3 select {padding-right: 24px; background-position: calc(100% - 13px) 20px, calc(100% - 8px) 20px;}
  .acc .field .swatch {min-width: 92px;}
  .captcha img {width: 120px; height: auto;}
  .actions .btn {padding: 0 16px;}
}