/* ═══════════════════════════════════════════════════════════
   USER MENU — no fluxo do layout (position: static)
   Movido para dentro de .user-menu-slot de cada screen ativa
═══════════════════════════════════════════════════════════ */
.user-menu-container {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

/* Código da sala */
.room-code-top {
    background: var(--prf-blue);
    border: 1.5px solid var(--prf-yellow);
    border-radius: 6px;
    padding: 5px 11px;
    color: var(--prf-yellow);
    font-size: 0.82em;
    font-weight: 900;
    letter-spacing: 3px;
    cursor: pointer;
    white-space: nowrap;
    user-select: all;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.room-code-top:hover { background: #001a33; }

/* Botão nome de usuário */
.user-menu-btn {
    background: var(--prf-blue) !important;
    border: 2px solid var(--prf-yellow) !important;
    color: var(--prf-yellow) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    font-size: 0.82em !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    transition: background .2s !important;
    margin: 0 !important;
}
.user-menu-btn:hover { background: #001a33 !important; }

/* Dropdown — relativo ao .user-menu-slot */
.user-menu-slot { position: relative; }
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 2px solid var(--prf-blue);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    min-width: 170px;
    overflow: hidden;
    z-index: 1100;
}
.umd-item {
    display: block !important;
    width: 100% !important;
    padding: 11px 16px !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,51,102,0.1) !important;
    cursor: pointer !important;
    font-size: 0.9em !important;
    color: var(--prf-blue) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: background .15s !important;
}
.umd-item:hover { background: rgba(0,51,102,0.06) !important; }
.umd-logout { color: #c00 !important; border-bottom: none !important; }
.umd-logout:hover { background: rgba(200,0,0,0.05) !important; }
.umd-hr { margin: 0; border: none; border-top: 2px solid rgba(0,51,102,0.1); }

#game-room-code-badge { display: none !important; }

/* ── SCREEN TOP BAR ──────────────────────────────────────── */
.screen-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    gap: 8px;
}
.screen-top-bar h1 {
    flex: 1;
    margin: 0;
    text-align: center;
}
.screen-top-bar .back-btn {
    flex-shrink: 0;
    margin: 0 !important;
}
.user-menu-slot {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    min-width: 40px; /* ocupa mesmo espaço do back-btn para manter h1 centralizado */
}

/* ── MOBILE ────────────────────────────────────── */
@media (max-width: 768px) {
    .user-menu-container {
        gap: 3px;
        flex-direction: column-reverse;
        align-items: flex-end;
    }
    .room-code-top {
        font-size: 0.62em;
        padding: 3px 7px;
        letter-spacing: 1.5px;
    }
    .user-menu-btn {
        font-size: 0.62em !important;
        padding: 3px 8px !important;
        border-radius: 12px !important;
    }
    .user-menu-slot {
        min-width: 30px;
    }
}