/* Версия игры */
#gameVersion {
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: #80796d;
    font-family: Georgia, serif;
    font-size: 14px;
    z-index: 101;
    pointer-events: none;
}

/* Главное меню */
#mainMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(10, 12, 18, 0.92);
    z-index: 100;
}

#mainLogo {
    display: block;
    width: 300px;
    max-width: 80vw;
    height: auto;
    margin-bottom: 45px;
}

#mainMenu button {
    width: 260px;
    padding: 14px 20px;
    background: linear-gradient(#303039, #19191f);
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 19px;
    cursor: pointer;
    transition: 0.2s;
}

#mainMenu button:hover {
    background: linear-gradient(#494039, #29231f);
    border-color: #c5a66b;
    color: #fff0ce;
}
/* Экран авторизации */
#loginScreen {
    align-items: center;
}

#loginScreen h2 {
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: normal;
    color: #d6bd83;
    margin: 0 0 20px 0;
}

/* Центрирование текста во всех полях ввода */
input {
    text-align: center;
}

#loginScreen input {
    width: 260px;
    box-sizing: border-box;
    padding: 14px 16px;
    background: #17171d;
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 17px;
    outline: none;
}

#loginScreen input:focus {
    border-color: #c5a66b;
    box-shadow: 0 0 8px rgba(197, 166, 107, 0.2);
}

#loginScreen input::placeholder {
    color: #80796d;
}

#loginScreen button {
    width: 260px;
}

/* Экран восстановления доступа */
#recoveryScreen {
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}

#recoveryScreen h2 {
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: normal;
    color: #d6bd83;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(214, 189, 131, 0.3);
    text-align: center;
    margin: 0 0 20px;
}

#recoveryScreen p {
    font-family: Georgia, serif;
    font-size: 17px;
    color: #c9ad72;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 15px;
}

#recoveryScreen input {
    width: 260px;
    box-sizing: border-box;
    padding: 14px 16px;
    background: #17171d;
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 17px;
    text-align: center;
    outline: none;
}

#recoveryScreen input:focus {
    border-color: #c5a66b;
    box-shadow: 0 0 8px rgba(197, 166, 107, 0.2);
}

#recoveryScreen input::placeholder {
    color: #80796d;
}

#recoveryScreen button {
    width: 260px;
}

/* Экран регистрации */
#registerScreen {
    align-items: center;
}

#registerScreen h2 {
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: normal;
    color: #d6bd83;
    margin: 0 0 20px 0;
}

#registerScreen input {
    width: 260px;
    box-sizing: border-box;
    padding: 14px 16px;
    background: #17171d;
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 17px;
    outline: none;
}

#registerScreen input:focus {
    border-color: #c5a66b;
    box-shadow: 0 0 8px rgba(197, 166, 107, 0.2);
}

#registerScreen input::placeholder {
    color: #80796d;
}

#registerScreen button {
    width: 260px;
}

/* Экран установки нового пароля */
body:has(#resetScreen) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 20px;
    background: rgba(10, 12, 18, 0.92);
    color: #e0d4bc;
    font-family: Georgia, serif;
    text-align: center;
}

body:has(#resetScreen) #mainLogo {
    width: 300px;
    max-width: 80vw;
    margin: 0 0 45px;
}

#resetScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 650px;
}

#resetScreen h2 {
    margin: 0 0 20px;
    color: #d6bd83;
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: normal;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(214, 189, 131, 0.3);
    text-align: center;
}

#resetScreen #message {
    color: #c9ad72;
    font-size: 17px;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}

#resetScreen #message:empty {
    display: none;
}

#resetForm {
    width: 100%;
    text-align: center;
}

#resetScreen .accountInfo {
    margin: 0 0 15px;
    color: #e0d4bc;
    font-size: 17px;
    text-align: center;
    overflow-wrap: anywhere;
}

#resetScreen input {
    display: block;
    width: 260px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    margin: 15px auto;
    background: #17171d;
    border: 1px solid #74664d;
    border-radius: 0;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 17px;
    text-align: center;
    outline: none;
}

#resetScreen input:focus {
    border-color: #c5a66b;
    box-shadow: 0 0 8px rgba(197, 166, 107, 0.2);
}

#resetScreen input::placeholder {
    color: #80796d;
}

#resetScreen button {
    display: block;
    width: 260px;
    max-width: 100%;
    padding: 14px 20px;
    margin: 15px auto 0;
    background: linear-gradient(#303039, #19191f);
    border: 1px solid #74664d;
    border-radius: 0;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 19px;
    cursor: pointer;
    transition: 0.2s;
}

#resetScreen button:hover:not(:disabled) {
    background: linear-gradient(#494039, #29231f);
    border-color: #c5a66b;
    color: #fff0ce;
}

#resetScreen button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Экран выбора персонажа */
#characterSelectScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(10, 12, 18, 0.96);
    z-index: 100;
    text-align: center;
    padding: 60px 20px;
    color: #e0d4bc;
    font-family: Georgia, serif;
}

#characterSelectScreen h2 {
    font-size: 42px;
    font-weight: normal;
    color: #d6bd83;
    letter-spacing: 4px;
    margin: 0 0 50px;
    text-shadow: 0 0 20px rgba(214, 189, 131, 0.3);
}

#characterList {
    max-width: 900px;
    margin: 0 auto 40px;
}

#createCharacterButton {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

#characterSelectScreen #logoutButton {
    display: block;
    position: static;
    margin: 12px auto 0;
}

#characterSelectScreen button {
    width: 260px;
    padding: 14px 20px;
    background: linear-gradient(#303039, #19191f);
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 19px;
    cursor: pointer;
    transition: 0.2s;
}

#characterSelectScreen button:hover {
    background: linear-gradient(#494039, #29231f);
    border-color: #c5a66b;
    color: #fff0ce;
}

/* Экран создания персонажа */
#characterCreateScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(10, 12, 18, 0.96);
    z-index: 100;
    text-align: center;
    padding: 60px 20px;
    color: #e0d4bc;
    font-family: Georgia, serif;
}

#characterCreateScreen h2 {
    font-size: 42px;
    font-weight: normal;
    color: #d6bd83;
    letter-spacing: 4px;
    margin: 0 0 50px;
    text-shadow: 0 0 20px rgba(214, 189, 131, 0.3);
}

#characterCreateContent {
    max-width: 900px;
    margin: 0 auto;
}

#characterCreateScreen button {
    width: 260px;
    padding: 14px 20px;
    background: linear-gradient(#303039, #19191f);
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 19px;
    cursor: pointer;
    transition: 0.2s;
}

#characterCreateScreen button:hover {
    background: linear-gradient(#494039, #29231f);
    border-color: #c5a66b;
    color: #fff0ce;
}

#backToCharacterSelectButton {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

/* Карточки выбора персонажа */
#characterList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

#characterList > div {
    width: 220px;
    min-height: 300px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(#25252d, #101015);
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 19px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#characterList > div:hover {
    border-color: #c5a66b;
}

#characterList > div.selected {
    border-color: #e4bd72;
    box-shadow: 0 0 16px rgba(228, 189, 114, 0.45);
}

/* Основная область создания персонажа */
#characterCreationLayout {
    display: grid;
    grid-template-columns: 280px minmax(300px, 1fr) 280px;
    gap: 24px;
    width: 100%;
    height: 65vh;
    min-height: 400px;
}

/* Колонки кланов и классов */
#clanList,
#classList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

/* Центральная область с 3D-персонажем */
#characterPreview {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: radial-gradient(ellipse, #292933 0%, #101015 75%);
    border: 1px solid #74664d;
}

/* Холст Babylon.js */
#characterPreviewCanvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
}

/* Карточки кланов */
.clanCard  {
    flex: 1 1 0;
    min-height: 0;
    padding: 6px 12px;
    background: linear-gradient(#25252d, #15151b);
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.classCard  {
    flex: 1 1 0;
    min-height: 0;
    padding: 0px 12px;
    background: linear-gradient(#25252d, #15151b);
    border: 1px solid #74664d;
    color: #e0d4bc;
    font-family: Georgia, serif;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.clanCard h3 {
    margin: 0 0 20px;
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    color: #e4bd72;
}

.classCard h3 {
    margin: 0 0 6px;
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    color: #e4bd72;
}

/* Пять характеристик в одной строке */
.clanCard .characterStats,
.classCard .characterStats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
}

/* Название характеристики и значение */
.clanCard .characterStat,
.classCard .characterStat  {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 13px;
}

.clanCard .characterStat span:first-child,
.classCard .characterStat span:first-child  {
    color: #a99b83;
    font-size: 12px;
}

.clanCard .characterStat span:last-child,
.classCard .characterStat span:last-child  {
    color: #e0d4bc;
    font-size: 16px;
}

.clanCard:hover,
.classCard:hover  {
    border-color: #c5a66b;
}

.clanCard.selected,
.classCard.selected  {
    border-color: #e4bd72;
    box-shadow: 0 0 12px rgba(228, 189, 114, 0.35);
}

/* Центральная колонка создания персонажа */
#characterPreviewColumn {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

#characterPreviewColumn #characterNameInput {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    text-align: center;
}

#characterPreviewColumn #characterPreview {
    flex: 1;
    min-height: 0;
}

/* Переключатель пола персонажа */
#characterGenderSelector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
    padding: 8px 0;
    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 17px;
}

#characterGenderSelector label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

#characterGenderSelector input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #d6bd83;
    cursor: pointer;
}

#submitCreateCharacterButton {
    margin-top: 20px;
}

/* Информация о персонаже в карточке выбора */
.characterInfo {
    width: 100%;
    text-align: center;
}

.characterName {
    color: #e4bd72;
    font-size: 20px;
    margin-bottom: 8px;
}

.characterLevel {
    color: #a99b83;
    font-size: 15px;
}

/* Холст 3D-модели внутри карточки персонажа */
.characterCardCanvas {
    display: block;
    width: 100%;
    height: 210px;
    flex-shrink: 0;
    outline: none;
    touch-action: none;
}

#characterSelectButtons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#characterSelectButtons button {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    margin: 0 auto;
}

/* Выбранный персонаж */
#characterList > .selected {
    border: 2px solid #d4af37;
    background-color: rgba(212, 175, 55, 0.12);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
    transform: scale(1.03);
    transition: all 0.2s ease;
}

/* Кнопка перехода в административную панель */
#adminPanelButton {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;

    width: 160px;
    padding: 10px 20px;
    background: linear-gradient(#303039, #19191f);
    border: 1px solid #74664d;
    border-radius: 0;

    color: #e0d4bc;
    font-family: Georgia, serif;
    font-size: 17px;

    cursor: pointer;
    transition: 0.2s;
}

#adminPanelButton:hover {
    background: linear-gradient(#494039, #29231f);
    border-color: #c5a66b;
    color: #fff0ce;
}

#adminPanelButton[hidden] {
    display: none;
}