/*
 * Оформление страницы входа (index.php).
 *
 * Раскладка повторяет эталонный вид: логотип -> подпись "Логин:" -> поле ->
 * подпись "Пароль:" -> поле -> чекбокс "Сохранить" -> две деревянные кнопки.
 *
 * Файл подключается только на index.php, поэтому правила здесь могут
 * переопределять общие стили из default_v_1_0.css (там .buttonregInput
 * залит кремовым rgb(250,255,189) и имеет высоту 50px).
 */

html,
body {
    background-color: #c5af7f;
}

.loginScreen {
    max-width: 420px;
    margin: 0 auto;
    /* Нижний отступ оставляет место под панелью футера. */
    padding: 6px 10px 100px;
    text-align: center;
    font-family: Roboto, Arial, sans-serif;
    color: #000;
}

/* --- Логотип --- */

.loginLogo {
    display: block;
    width: 190px;
    max-width: 62%;
    height: auto;
    margin: 6px auto 10px;
}

/* --- Подписи полей --- */

.loginLabel {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    margin-bottom: 6px;
}

/* --- Поля ввода --- */

.loginField {
    margin-bottom: 14px;
}

/*
 * Класс buttonregInput оставлен для совместимости с остальной игрой,
 * но внешний вид на этой странице задаём заново: прозрачная заливка
 * и тонкая коричневая рамка, как в эталоне.
 */
.loginScreen .buttonregInput {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    background-color: transparent;
    border: 1px solid #704a1d;
    border-radius: 2px;
    font-family: inherit;
    /* Размер шрифта как в эталоне. */
    font-size: 17px;
    color: #000;
    text-align: center;
    outline: none;
}

.loginScreen .buttonregInput::placeholder {
    color: #7d6a49;
}

.loginScreen .buttonregInput:focus {
    border-color: #4a2f10;
}

/* --- Чекбокс "Сохранить" --- */

.loginRemember {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    cursor: pointer;
}

.loginRemember input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #704a1d;
    cursor: pointer;
}

/* --- Кнопки --- */

/*
 * Раньше обе кнопки были одной и той же картинкой buttonreg.png, растянутой
 * до 300x50. Отсюда и вид "будто не смотрятся": картинка тянулась, торцы
 * размывались, а главное - "Вход" и "Начать игру" выглядели одинаково, и
 * глазу было не за что зацепиться.
 *
 * Теперь кнопка рисуется самим браузером: заливка, рамка, скругление. Края
 * остаются резкими на любом размере, а две кнопки различаются по весу -
 * главное действие залито, второстепенное только обведено.
 */
/*
 * РАЗМЕР КНОПОК.
 *
 * Раньше кнопки тянулись во всю ширину поля ввода (width: 100%) и были 46px
 * высотой - на фоне короткой формы они выглядели тяжёлыми плашками.
 *
 * Теперь кнопка занимает столько, сколько нужно её надписи, плюс запас по
 * бокам. Столбик всё равно собран по центру, поэтому "Вход" и "Начать игру"
 * стоят друг под другом ровно, несмотря на разную длину слов.
 */
.loginButton {
    position: relative;
    /*
     * inline-block вместо block: ширина считается по содержимому.
     * Обёртка .loginScreen уже выравнивает по центру (text-align: center),
     * поэтому кнопка встаёт по середине без margin: auto.
     */
    display: inline-block;
    box-sizing: border-box;
    /* Ширина по надписи, но не уже 130px - иначе "Вход" превратится в пятачок. */
    width: auto;
    min-width: 130px;
    max-width: 100%;
    height: 34px;
    /* Запас по бокам делает кнопку соразмерной надписи. */
    padding: 0 18px;
    /*
     * Кнопки идут двумя строками, поэтому нижний отступ небольшой.
     * display: inline-block требует явного margin-left/right: auto убрать -
     * центрирование теперь на стороне обёртки.
     */
    margin: 0 auto 8px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Главное действие: залитая коричневая кнопка. */
.loginButtonMain {
    border: 1px solid #4a2f10;
    background-color: #704a1d;
    color: #f4d9a4;
}

.loginButtonMain:hover {
    background-color: #4a2f10;
}

/* Второстепенное действие: только рамка, поле остаётся фоном страницы. */
.loginButtonAlt {
    border: 1px solid #704a1d;
    background-color: transparent;
    color: #4a2f10;
}

.loginButtonAlt:hover {
    border-color: #4a2f10;
    background-color: rgba(112, 74, 29, 0.12);
}

.loginButton:active {
    transform: translateY(1px);
}

/* --- Ссылки под кнопками --- */

.loginLinks {
    margin-top: 4px;
    font-size: 14px;
}

.loginLinks a {
    color: #4a2f10;
    text-decoration: underline;
    cursor: pointer;
}

.loginTelegram {
    display: inline-block;
    margin-top: 12px;
    line-height: 0;
}

.loginTelegram svg {
    width: 34px;
    height: 34px;
    fill: #4a2f10;
}

.loginTelegram:hover svg {
    fill: #704a1d;
}

/* ==========================================================================
 * Регистрация (registration.php)
 *
 * Раньше семь полей стояли в один столбик, каждое со своей подписью сверху,
 * и форма не влезала в экран - приходилось прокручивать до кнопки. Теперь
 * родственные поля стоят парами в строке, подпись мелкая и прижата к полю,
 * поэтому весь набор виден сразу.
 *
 * Стиль игры не меняется: тот же кремовый фон, коричневая рамка, те же
 * кнопки .loginButton, что и на входе.
 * ========================================================================== */

.regScreen {
    /* Двум полям в строке нужно чуть больше места, чем одному полю входа. */
    max-width: 460px;
    padding-bottom: 60px;
}

.regScreen .loginLogo {
    width: 140px;
    margin: 4px auto 12px;
}

/* Строка формы: одно или два поля рядом. */
.regRow {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.regField {
    /* Поля в строке делят её ровно пополам независимо от длины подписи. */
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    cursor: pointer;
}

/*
 * Подпись мелкая и прижата к полю - глаз читает её как часть поля, а не как
 * отдельную строку. Так экономится по 10px на каждом поле.
 */
.regLabel {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #4a2f10;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* Длинная подпись не ломает строку и не разъезжает раскладку. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Пометка "не обязательно" - тише самой подписи. */
.regHint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #7d6a49;
}

.regScreen .buttonregInput {
    /* Поля ниже, чем на входе: их семь, каждый пиксель заметен. */
    height: 38px;
    font-size: 15px;
    text-align: left;
}

.regScreen select.buttonregInput {
    /* Родная стрелка списка съедает место, поэтому отступ справа больше. */
    padding-right: 6px;
    cursor: pointer;
}

/* Кнопки отделены от последнего поля, но без большого провала. */
.regScreen .loginButton {
    margin-top: 4px;
    /* Тот же компактный размер, что и на входе. */
    height: 34px;
}

/* На узком экране пары разъезжаются в столбик - иначе поля становятся тесными. */
@media (max-width: 380px) {
    .regRow {
        flex-direction: column;
        gap: 8px;
    }
}