/*
 * «Друг прислал код комнаты? [ABCD] Войти» (client/assets/js/room-code-entry.js).
 * A compact 4-letter room code row for pages without the room UI: the landing pages under the hero
 * buttons. Colors come from the page tokens (landing.css / game-ui.css) with RoomPlay Core fallbacks.
 */
.room-code-entry {
    width: 100%;
    max-width: 366px;
    margin: 18px 0 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.room-code-entry-prompt {
    color: var(--text-secondary, #aeb7d3);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.room-code-entry-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.room-code-entry-input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--line-strong, rgba(255, 255, 255, 0.22));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.065);
    color: var(--text-primary, #ffffff);
    font: inherit;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.room-code-entry-input::placeholder {
    color: var(--text-muted, #8892b0);
    opacity: 0.55;
}

.room-code-entry-input:focus {
    border-color: var(--accent-blue, #4a6cf7);
    background: rgba(255, 255, 255, 0.09);
}

.room-code-entry-btn {
    flex: 0 0 auto;
    min-width: 96px;
    height: 48px;
    padding: 0 20px;
    border: 1.5px solid var(--line-strong, rgba(255, 255, 255, 0.22));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.065);
    color: var(--text-primary, #ffffff);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

/* Four letters typed: the button becomes the page's primary gradient. */
.room-code-entry.is-ready .room-code-entry-btn {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent, #ec494f), var(--accent-pink, #ff3b6f));
    box-shadow: 0 10px 26px rgba(255, 59, 111, 0.26);
}

.room-code-entry-btn:active {
    transform: translateY(1px) scale(0.97);
}

.room-code-entry-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
}

.room-code-entry.is-error .room-code-entry-input {
    border-color: var(--accent-pink, #ff3b6f);
}