/* Формы аккаунта: крупные поля и читаемые ошибки в обеих темах. */
body.auth-required > header,
body.auth-required > #chat,
body.auth-required #tabs,
body.auth-required #onlineFeedback {
    display: none;
}
body.auth-required #main {
    width: 100%;
    max-width: 480px;
    margin: auto;
    padding: 24px 16px;
    overflow-y: auto;
}
.account-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 420px;
}
.account-apk-download a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    color: inherit;
}
.account-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.account-form label[hidden] {
    display: none;
}
.account-form [data-login-credentials],
.account-form [data-pin-step] {
    display: grid;
    gap: 16px;
}
.account-form [data-pin-fields] {
    display: grid;
    gap: 16px;
}
.account-form [data-pin-fields][hidden] {
    display: none;
}
.account-form [data-login-credentials][hidden],
.account-form [data-pin-step][hidden] {
    display: none;
}
#maintenanceNotice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 12px 16px;
    background: var(--panel);
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
    text-align: center;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    touch-action: none;
}
#maintenanceNotice span {
    flex: 1;
}
#maintenanceNotice button {
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 24px;
}
.account-form input:not([type='checkbox']) {
    width: 100%;
    min-height: 44px;
}
#accountError {
    color: var(--gold);
    overflow-wrap: anywhere;
}
/* Приватный чат не перестраивает основное поле ввода и не открывает клавиатуру сам. */

.online-player {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.online-player [data-online-profile] {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

.account-form label.location-setting {
    flex-direction: row;
    gap: 12px;
}

.online-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #278650;
}
#chatOnlineToggle {
    min-width: 36px;
    padding: 8px;
}
#playerTable {
    width: min(680px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
}
.player-table-heading,
.player-table-filters,
.player-table-pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
#playerTable table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
#playerTable th,
#playerTable td {
    padding: 8px 4px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
}
#playerTable th:first-child {
    width: 28px;
}
#playerTable th:nth-child(3),
#playerTable th:nth-child(4) {
    width: 66px;
}
#playerTable th:nth-child(5) {
    width: 66px;
}
#playerTable [data-player-profile] {
    border: 0;
    padding: 0;
    min-width: 0;
    background: transparent;
    text-align: left;
    overflow-wrap: anywhere;
}
#playerTable select {
    min-width: 0;
    flex: 1;
}

/* The public location remains legible alongside long names on narrow screens. */
.online-player-location {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.85em;
    color: var(--muted);
}