/*
 * Lobby v2 - CSS unificato
 *
 *   1. Elenco lobby / adattamenti
 *   2. Lobby base (layout, card, componenti)
 *   3. Creazione partita
 *   4. Dettaglio lobby
 */

/* ==========================================================
   1. Elenco lobby / adattamenti
   ========================================================== */
.user-banner .user-avatar {
  Nwidth: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
}
.user-banner .user-frame {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
}
.user-details > .user-nickname {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 2px;
    text-shadow: -2px -2px 0px var(--text-stroke-color), 0px -2px 0px var(--text-stroke-color), 2px -2px 0px var(--text-stroke-color), 2px 0px 0px var(--text-stroke-color), 2px 2px 0px var(--text-stroke-color), 0px 2px 0px var(--text-stroke-color), -2px 2px 0px var(--text-stroke-color), -2px 0px 0px var(--text-stroke-color);
}
.user-nickname {
    text-shadow: -2px -2px 0px var(--text-stroke-color), 0px -2px 0px var(--text-stroke-color), 2px -2px 0px var(--text-stroke-color), 2px 0px 0px var(--text-stroke-color), 2px 2px 0px var(--text-stroke-color), 0px 2px 0px var(--text-stroke-color), -2px 2px 0px var(--text-stroke-color), -2px 0px 0px var(--text-stroke-color);
}

/* ==========================================================
   2. Lobby base (layout, card, componenti)
   ========================================================== */

/* ════════════════════════════════════════════════════════════════════
   lobby.css — Layout a 3 colonne per lobby2.html
   Colonne: #chatDiv | lista partite (.lobby-panel) | #lobbyDetailDiv
   Da caricare in: static/css/lobby.css
   (richiede base.css e main.css già inclusi prima di questo file)
   ════════════════════════════════════════════════════════════════════ */

.lobby-slot--mini {
    display: flex;
    gap: 0.5rem;
}
.lobby-slot--mini .lobby-badge.lobby-badge--color {
    border: none;
    font-size: 0.666rem;
    padding-bottom: 0.06125rem;
}

.lobby-list--col-name {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.lobby-list--header > .lobby-list--col-name,
.lobby-filters--extra > .lobby-list--col-name {
    justify-content: center;
}

.lobby-list--col-players,
.lobby-list--col-mode,
.lobby-list--col-param,
.lobby-list--col-status {
    flex: 0 0 auto;
    font-weight: 600;
    text-align: center;
    width: 100px;
}
.lobby-list--col-status {
    font-size: 0.875rem;
    width: 140px;
}
.lobby-list--col-action {
    width: 80px;
}

.lobby-list--mobile-info {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.lobby-list--action {
    flex-shrink: 0;
    text-align: center;
    width: 75px;
}
.lobby-list--action.btn {
    flex-direction: column;
    padding: 0px;
}
.lobby-list--action > .fa-solid {
    font-size: 1.5rem;
    margin: 0px;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
}
.lobby-list--action > .d-lg-inline {
    font-size: 0.875rem;
    margin: 0px;
}

.lobby-actions {
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
}
.lobby-actions--create {
    font-size: 1.5rem;
}
.lobby-actions--chat {
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .lobby-actions--chat {
        bottom: 1rem;
        position: fixed;
        right: 1rem;
        z-index: 100;
    }
}

/* ── Lobby - Details ── */

.lobby-details--timer {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
}

.lobby-details--info-bar {
    width: 100%;
}
.lobby-details--name-field {
    align-items: center;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 1rem;
    box-shadow: 0px 4px 0px #00384F;
    display: flex;
    font-size: 1.125rem;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}
.lobby-details--name-field > .bold {
    color: cyan;
    text-transform: uppercase;
}
.lobby-details--name-field > .color-accent {
    color: #FFFFFF;
    font-weight: 900;
}

.lobby-details--player-bar {
    align-items: stretch;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    width: 100%
}

.lobby-details--player-bar > .flex--center {
    align-items: center;
    display: flex;
}

.lobby-details--settings {
    align-items: center;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    height: 100%;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    text-align: center;
    width: 135px;
}
.lobby-details--settings .color-accent {
    color: cyan;
}

.lobby-slot {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 1rem;
    height: 100%;
    padding: 1rem;
    position: relative;
    width: 370px;
}
.lobby-slot--badge {
    left: 1rem;
    position: absolute;
    top: -0.625rem;
    z-index: 1;
}

.lobby-badge.lobby-badge--color {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
}
.lobby-badge.lobby-badge--color.lobby-badge--giallo {
    background-color: #FCDC00;
    color: #000000;
}
.lobby-badge.lobby-badge--color.lobby-badge--blu {
    background-color: #1E58FE;
}
.lobby-badge.lobby-badge--color.lobby-badge--viola {
    background-color: #B03EEC;
}
.lobby-badge.lobby-badge--color.lobby-badge--verde {
    background-color: #05EB05;
    color: #000000;
}
.lobby-badge.lobby-badge--color.lobby-badge--rosso {
    background-color: #FC1313;
}
.lobby-badge.lobby-badge--color.lobby-badge--nero {
    background-color: #3C3D3F;
}
.lobby-badge.lobby-badge--color.lobby-badge--dropdown {
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    gap: 0.25rem;
    text-transform: uppercase;
    transition: filter 0.15s ease-in-out;
}
.lobby-badge.lobby-badge--color.lobby-badge--dropdown:hover {
    filter: brightness(1.1);
}
.lobby-badge.lobby-badge--color.lobby-badge--dropdown:active {
    filter: brightness(0.9);
}

.lobby-slot--remove {
    aspect-ratio: 1 / 1;
    background-color: #DC3545;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.75rem;
    height: 1.5rem;
    padding: 0;
    position: absolute;
    right: -0.5rem;
    top: -0.5rem;
    transition: filter 0.15s ease-in-out;
    width: 1.5rem;
    z-index: 2;
}
.lobby-slot--remove:hover {
    filter: brightness(1.1);
}
.lobby-slot--remove:active {
    filter: brightness(0.9);
}

@media (max-width: 991.98px) {
    .lobby-slot.lobby-slot--compact {
        backdrop-filter: none;
        background-color: transparent;
        border: none;
        height: auto;
        padding: 0;
        width: auto;
    }
    .lobby-slot.lobby-slot--compact > .lobby-slot--badge {
        left: 35px;
        top: -0.625rem;
    }
    .lobby-slot.lobby-slot--compact > .lobby-slot--remove {
        right: 0.25rem;
        top: -0.5rem;
    }
}

.lobby-actions--ready {
    align-items: center;
    font-size: 1.25rem;
    gap: 1rem;
    justify-content: center;
}
.lobby-actions--ready > .form-check-input {
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
}

/* ── Container allargato ──
   Su questa pagina il container Bootstrap occupa tutta la larghezza
   disponibile, così le colonne laterali hanno spazio reale da riempire. */
.lobby-page--wide {
    max-width: 100%;
}

/* ── Riga del layout ──
   Flexbox a 3 colonne. `align-items: stretch` (default) fa sì che le
   colonne laterali abbiano la stessa altezza del pannello centrale e
   partano esattamente dalla sua stessa quota verticale.
   Il margine verticale sostituisce il `my-4` che prima stava sul
   pannello (rimosso nell'HTML per non disallineare le colonne). */
.lobby-layout {
    display: flex;
    align-items: stretch;
    gap: 1rem;   /* mobile: mantiene spazio */
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

@media (min-width: 992px) {
    .lobby-layout {
        gap: 0;   /* desktop: pannelli adiacenti senza spazio */
    }
}

/* ── Colonna centrale: lista partite ──
   Larghezza preferita fissa ma comprimibile (flex-shrink attivo) se lo
   schermo è stretto. `min-width: 0` evita che il contenuto interno
   impedisca la compressione. */
.lobby-layout > .lobby-panel {
    flex: 0 1 880px;
    margin-bottom: 0;
    min-width: 0;
}

/* ── Colonne laterali ──
   `flex: 1 1 0` su entrambe: si spartiscono in parti uguali TUTTO lo
   spazio rimanente a sinistra e a destra della lista partite.
   Aspetto grafico ripreso da `.user-panel` di main.css per coerenza
   con il resto del sito. */
.lobby-side {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 1rem;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 200px;
}

/* Titolo della colonna, in stile tab bar del pannello centrale */
.lobby-side--title {
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    padding: 0.875rem 0.75rem;
    text-align: center;
    text-transform: uppercase;
}

/* Corpo della colonna: occupa tutta l'altezza restante.
   Qui andranno i messaggi della chat / i dettagli della partita. */
.lobby-side--body {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.75rem;
}

/* Testo segnaposto, centrato verticalmente e orizzontalmente */
.lobby-side--placeholder {
    color: rgba(255, 255, 255, 0.666);
    font-size: 0.875rem;
    margin: auto;
    text-align: center;
}

/* ── Responsive ──
   Sotto il breakpoint lg (992px, lo stesso usato dal resto del sito)
   le tre colonne si impilano verticalmente: chat sopra, lista al
   centro, dettaglio sotto. Le colonne laterali ricevono un'altezza
   minima per restare visibili e utilizzabili. */
@media (max-width: 991.98px) {
    .lobby-layout {
        flex-direction: column;
    }
    .lobby-layout > .lobby-panel {
        flex: 0 0 auto;
    }
    .lobby-side {
        flex: 0 0 auto;
        min-height: 180px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Sezione aggiuntiva per lobby3.html — Testata: banner + Crea Partita
   (le regole sopra servono sia a lobby2.html che a lobby3.html;
    quelle qui sotto sono usate solo da lobby3.html)
   ════════════════════════════════════════════════════════════════════ */

/* ── Riga di testata ──
   Replica la stessa griglia flex di .lobby-layout: due "spaziatori"
   laterali identici (per flex e min-width) alle colonne .lobby-side,
   così la cella centrale inizia e finisce ESATTAMENTE dove inizia e
   finisce la lista partite sottostante, a qualunque larghezza. */
.lobby-header {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Sicurezza: bordi inclusi nelle larghezze, così spaziatori e colonne
   con bordo (.lobby-side) misurano uguale e le due righe combaciano
   al pixel anche se il reset di Bootstrap non fosse caricato. */
.lobby-layout > *,
.lobby-header > * {
    box-sizing: border-box;
}
.lobby-header--spacer {
    flex: 1 1 0;          /* speculare a .lobby-side */
    min-width: 200px;     /* speculare a .lobby-side */
}

/* ── Cella centrale ──
   Stessi valori flex della colonna centrale (.lobby-panel).
   Banner a sinistra, pulsante a destra (space-between).
   `container-type: inline-size` la rende interrogabile con una
   container query per la gestione responsive (vedi sotto). */
.lobby-header--center {
    align-items: center;
    container-type: inline-size;
    display: flex;
    flex: 0 1 880px;      /* speculare a .lobby-layout > .lobby-panel */
    gap: 1rem;
    justify-content: space-between;
    min-width: 0;
}

/* Il banner perde il `margin: 1rem auto` di main.css (che lo
   centrerebbe) e si appoggia al bordo sinistro della cella. */
.lobby-header--center > .lobby-banner {
    margin: 0;
}

/* Il pulsante non deve restringersi quando lo spazio cala. */
.lobby-header--create {
    flex-shrink: 0;
}

/* ── Responsive: banner e pulsante uno sopra l'altro, centrati ──
   Container query: scatta in base alla larghezza REALE della cella
   centrale (non del viewport), quindi copre anche i casi in cui le
   colonne laterali comprimono il centro. Soglia = banner + pulsante
   + gap, con margine di sicurezza. */
@container (max-width: 660px) {
    .lobby-header--center {
        flex-direction: column;
        justify-content: center;
    }
    .lobby-header--center > .lobby-banner {
        margin: 0 auto;
    }
}

/* Caso mobile: la header si impila verticalmente MA
   lobby-header--center rimane sempre in riga con
   bottone fisso a destra e banner flessibile a sinistra. */
@media (max-width: 991.98px) {
    .lobby-header {
        align-items: center;
        flex-direction: column;
    }
    .lobby-header--spacer {
        display: none;
    }
    .lobby-header--center {
        flex: 0 0 auto;
        flex-direction: row;        /* sempre in riga */
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.5rem;
    }
    .lobby-header--center > .lobby-banner {
        flex: 1 1 0;                /* occupa lo spazio rimanente */
        min-width: 0;
        margin: 0;
        overflow: visible;
    }
    .lobby-header--create {
        flex: 0 0 auto;             /* dimensione fissa */
    }
}

/* Mobile/iPad portrait (< 768px): banner e bottone in colonna centrati */
@media (max-width: 767.98px) {
    .lobby-header--center {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .lobby-header--center > .lobby-banner {
        flex: 0 0 auto;
        margin: 0 auto !important;  /* azzera margin-left da regole precedenti */
    }
    .lobby-header--create {
        margin: 0 auto;
    }
}
/* ════════════════════════════════════════════════════════════════════
   delta2b.css — Modifiche incrementali per lobby5b.html
   Aggiunge:
     1. Evidenziazione riga attiva nella lista partite
     2. Stile del pannello #lobbyDetailDiv quando contiene il dettaglio
     3. Override mirati delle sole proprietà hardcoded in main.css
        che non si adattano alla larghezza ridotta della sidebar
        (width fissa su .lobby-slot, grid su .lobby-slots, ecc.)
   Richiede: base.css, main.css, lobby.css, lobby3.css già inclusi.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Riga selezionata nella lista ── */
.lobby-list--item--active {
    background-color: rgba(0, 82, 114, 0.45);
}

/* ── 2. Pannello dettaglio attivo: bordo accent ── */
.lobby-side--detail--active {
    border-color: #FFFFFF;
}

/* ── 3. Contenitore del frammento iniettato ── */
.lobby-detail-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

/* ── 4. Wrapper interno del template ──
   Flex colonna, gap uniforme tra le sezioni. */
.lobby-detail-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

/* ── 5. Timer: ridotto per adattarsi alla sidebar ── */
.lobby-detail-inner .lobby-details--timer {
    font-size: 1rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── 6. Info-bar: permette al nome di andare a capo ── */
.lobby-detail-inner .lobby-details--info-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── 7. Nome partita: rimuove padding laterale fisso ── */
.lobby-detail-inner .lobby-details--name-field {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    min-width: 0;
    flex: 1;
}

/* ── 8. Player bar: impila host e settings verticalmente ──
   In main.css è `display:flex` orizzontale, adatto alla pagina intera.
   Nella sidebar non c'è spazio — si impila. */
.lobby-detail-inner .lobby-details--player-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── 9. Slot host nella player-bar: rimuove width fissa ──
   main.css → .lobby-slot { width: 332px }
   Nella sidebar deve occupare tutta la larghezza disponibile. */
.lobby-detail-inner .lobby-details--player-bar .lobby-slot {
    width: 100%;
}

/* ── 10. Settings box: rimuove width fissa e adatta altezza ──
   main.css → .lobby-details--settings { width: 135px; height: 100% }
   Nella sidebar si allarga a tutta la larghezza. */
.lobby-detail-inner .lobby-details--settings {
    width: 100%;
    height: auto;
}

/* ── 11. Griglia slot giocatori ──
   Sostituisce il grid a 2 colonne (minmax 332px) con una colonna
   fluida che si adatta alla larghezza reale della sidebar.
   Usiamo una classe dedicata `.lobby-detail--slots` per non
   toccare `.lobby-slots` usato altrove. */
.lobby-detail--slots {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── 12. Slot compatto nella sidebar ──
   Forzato sempre nella variante "compact" (come mobile in main.css)
   indipendentemente dalla larghezza del viewport, perché la sidebar
   è sempre stretta anche su desktop. */
.lobby-detail--slots .lobby-slot.lobby-slot--compact {
    backdrop-filter: none;
    background-color: transparent;
    border: none;
    height: auto;
    padding: 0;
    width: auto;
}
.lobby-detail--slots .lobby-slot.lobby-slot--compact > .lobby-slot--badge {
    left: 35px;
    top: -0.625rem;
}

/* ── 14. Barra azioni del dettaglio ──
   Rimuove `position: fixed` che main.css applica a .lobby-actions--chat
   sopra i 992px (sarebbe posizionato rispetto al viewport, non alla sidebar). */
.lobby-detail--actions .lobby-actions--chat {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
}

/* Scala font e padding per adattarsi allo spazio ridotto */
.lobby-detail--actions {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.5rem !important;
}
.lobby-detail--actions .btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}
/* ════════════════════════════════════════════════════════════════════
   delta3c.css — Modifiche incrementali per lobby6c.html
   Come delta3b.css, con la correzione del bottone X nel pannello
   dettaglio su mobile: la X è posizionata in `absolute` all'interno
   del titolo (che diventa `position: relative`), così non dipende
   dal contesto flex e resta sempre visibile indipendentemente da
   text-align, overflow, o altri stili ereditati.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Desktop: nascosto ma occupa spazio nel flex layout ── */
.lobby-side.lobby-side--hidden {
    pointer-events: none;
    visibility: hidden;
}

/* ── 2. Mobile: nascosto e rimosso dal flusso ── */
@media (max-width: 991.98px) {
    .lobby-side.lobby-side--hidden {
        display: none;
    }
}

/* ── 3. Overlay fullscreen su mobile ── */
.lobby-side.lobby-side--overlay {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto;
    position: fixed;
    inset: 0;
    z-index: 200;
    border-radius: 0;
    border: none;
    background-color: rgba(0, 28, 43, 0.98);
    backdrop-filter: blur(6px);
    flex-direction: column;
    overflow: hidden;
}

body.lobby-overlay--open {
    overflow: hidden;
}

/* ── 4. Titolo del pannello ──
   `position: relative` permette al bottone X di ancorarsi in
   absolute rispetto al titolo stesso, indipendentemente da qualsiasi
   contesto flex/inline del genitore.
   Il padding-right lascia spazio alla X (44px) senza che si sovrapponga
   al testo centrato. */
.lobby-side--title {
    position: relative;
    padding-right: 3rem;    /* spazio per la X a destra */
}

/* ── 5. Bottone X ──
   Posizionato in absolute top-right del titolo.
   Funziona su desktop (sidebar) e mobile (overlay) senza dipendere
   da display:flex del titolo. */
.lobby-side--close {
    align-items: center;
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    font-size: 1.125rem;
    justify-content: center;
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: 0.25rem;
    /* Ancoraggio assoluto in alto a destra nel titolo */
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.15s ease-in-out;
    z-index: 1;
}

.lobby-side--close:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
.lobby-side--close:active {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Su mobile nell'overlay leggermente più grande */
.lobby-side--overlay .lobby-side--close {
    font-size: 1.375rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
}
/* ════════════════════════════════════════════════════════════════════
   delta6.css — Modifiche incrementali per lobby9.html
   Aggiunge: popup modale bloccante per partite private
   Richiede: base.css, main.css, lobby.css, lobby3.css,
             delta2b.css, delta3c.css già inclusi.
   ════════════════════════════════════════════════════════════════════ */

/* ── Lock scroll quando il modale è aperto ── */
body.modal-risiko--open {
    overflow: hidden;
}

/* ── Backdrop ──
   z-index 1055: sopra navbar (1000) e sopra overlay pannelli (200) */
.modal-backdrop-risiko {
    align-items: center;
    background-color: rgba(0, 10, 20, 0.75);
    backdrop-filter: blur(3px);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 1rem;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1055;
}

.modal-backdrop-risiko[hidden] {
    display: none;
}

/* ── Box del modale ── */
.modal-risiko {
    background-color: rgba(0, 28, 43, 0.97);
    border: 3px solid #FFFFFF;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 420px;
    padding: 1.75rem;
    width: 100%;
}

/* ── Titolo ── */
.modal-risiko--title {
    align-items: center;
    color: #F4C845;
    display: flex;
    font-size: 1.375rem;
    font-weight: 800;
    gap: 0.5rem;
    margin: 0;
    text-transform: uppercase;
}

/* ── Corpo ── */
.modal-risiko--body {
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* ── Footer ── */
.modal-risiko--footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.modal-risiko--close,
.modal-risiko--link {
    min-width: 120px;
}

/* ════════════════════════════════════════════════════════════════════
   Fix overflow: quando la pagina è molto stretta, le colonne della
   lista partite (larghezze fisse in main.css) non escono dal layout
   ma scorrono orizzontalmente dentro il pannello centrale.
   ════════════════════════════════════════════════════════════════════ */

/* Il pannello centrale non lascia uscire nulla */
.lobby-layout > .lobby-panel {
    overflow: hidden;
}

/* La lista (tabs + filtri + righe) scorre in orizzontale
   se è più larga del pannello */
.lobby-panel .lobby-tabs,
.lobby-panel .lobby-filters,
.lobby-panel .lobby-filters--extra,
.lobby-panel .lobby-list,
.lobby-panel .lobby-list--header {
    min-width: 0;
}

/* Scroll orizzontale sul contenuto interno del pannello */
.lobby-panel.user-panel--contents {
    overflow-x: auto;
}

/* Anche la testata (bottone Crea Partita + banner) non deve uscire */
.lobby-header--center {
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   lobby12c1 — Avatar come primo elemento (ordine: avatar → username → summary)
   ════════════════════════════════════════════════════════════════════ */

/* ── Fix overlay mobile: z-index sopra navbar (1000) ── */
.lobby-side.lobby-side--overlay {
    z-index: 1100 !important;
}

/* ════════════════════════════════════════════════════════════════════
   lobby14r — Risparmio spazio verticale + margine banner--info
   ════════════════════════════════════════════════════════════════════ */

/* Testata più vicina alla navbar */
.lobby-header {
    margin-top: 0.75rem !important;
}

/* Meno gap verticale tra header e layout */
.lobby-layout {
    margin-top: 0.375rem;
}

/* ── Distacco aggiuntivo del banner dal bordo sinistro ── */
.lobby-header--center > .lobby-banner {
    margin-left: 20px;
}

/* ════════════════════════════════════════════════════════════════════
   lobby14r
   ════════════════════════════════════════════════════════════════════ */

/* +10px distacco banner da sinistra (totale: 30px dal precedente 20px) */
.lobby-header--center > .lobby-banner {
    margin-left: 30px;
}

/* ── Fix overlay mobile: copertura totale viewport ── */
@media (max-width: 991.98px) {
    .lobby-side.lobby-side--overlay {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   lobby21g — Colonna modalità abbreviata (PRE) visibile solo su tablet
   (768px–991px), stessa larghezza di lobby-list--col-mode
   ════════════════════════════════════════════════════════════════════ */
.lobby-list--col-mode-short {
    flex: 0 0 auto;
    font-weight: 600;
    text-align: center;
    width: 60px;   /* più stretta di col-mode dato che è solo 3 char */
}

/* ── Override per iPad in modalità landscape ──
   Condizione: orientamento landscape + larghezza tipica iPad
   (1024px iPad standard, 1180px iPad Air, 1366px iPad Pro 12.9")
   Nasconde "Prestige" e mostra "PRE" solo in questo contesto. */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-mode.d-none.d-lg-inline {
        display: none !important;
    }
    .lobby-list--col-mode-short {
        display: inline !important;
    }
}

/* ── Nasconde colonna azione (ENTRA) su iPad landscape ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-action,
    .lobby-list--action {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   lobby21g — Banner scalabile, bottone Crea Partita fisso.
   Il banner ha la sua dimensione piena quando c'è spazio e si restringe
   quando manca, senza mai tagliare il bottone: le misure interne sono in
   cqi (risiko.css, "User Banner") e scalano tutte in proporzione.
   ════════════════════════════════════════════════════════════════════ */

/* Bottone: dimensione fissa, non si muove mai */
.lobby-header--create {
    flex: 0 0 auto;
    align-self: center;
}

/* Banner: parte dalla sua dimensione piena,
   cede spazio al bottone se necessario (flex-shrink: 1) */
.lobby-header--center > .lobby-banner {
    flex: 0 1 auto;
    min-width: 0;
    overflow: visible;
}

/* ════════════════════════════════════════════════════════════════════
   lobby21g — Colonna icona stato, visibile solo su iPad landscape
   ════════════════════════════════════════════════════════════════════ */

.lobby-list--col-status-icon {
    flex: 0 0 auto;
    text-align: center;
    width: 48px;
}

.lobby-status-icon {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
}

/* Visibile solo su iPad landscape (1024-1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-status-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ── Icone affiancate nella colonna status per confronto ── */
.lobby-list--col-status-icon {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

/* ── Dimensione uniforme tutte le icone status ── */
.lobby-status-icon {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   lobby21g — Mutua esclusione colonna testi / colonna icone status
   Desktop (>1366px): testi visibili, icone nascoste
   iPad landscape (1024-1366px): icone visibili, testi nascosti
   Mobile (<992px): testi visibili, icone nascoste
   ════════════════════════════════════════════════════════════════════ */

/* Su iPad landscape: nasconde testi, mostra icone */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-status.d-none.d-lg-inline {
        display: none !important;
    }
    .lobby-list--col-status-icon {
        display: inline-flex !important;
    }
    /* Nasconde anche l'header "Stato" e mette quello icone */
    .lobby-list--col-status:not(.d-none) {
        display: none !important;
    }
}

/* Su desktop (>1366px) e mobile: nasconde icone, testi visibili normalmente */
@media (min-width: 1367px) {
    .lobby-list--col-status-icon {
        display: none !important;
    }
}
@media (max-width: 1023px) {
    .lobby-list--col-status-icon {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   lobby24b — Solo le 2 aggiunte necessarie su iPad landscape
   ════════════════════════════════════════════════════════════════════ */

/* col-name: width fissa su iPad landscape per allineare header e righe */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-name {
        flex: 0 0 auto !important;
        width: 310px !important;
    }
}

/* ── iPad landscape: nasconde header Modalità e Parametro,
   mostra MOD e D. al loro posto ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* Nasconde header Modalità */
    .lobby-list--header .lobby-list--col-mode {
        display: none !important;
    }
    /* Mostra header MOD */
    .lobby-list--header .lobby-list--col-mode-short {
        display: inline !important;
    }
    /* Nasconde header Parametro */
    .lobby-list--header .lobby-list--col-param {
        display: none !important;
    }
    /* Mostra header D. */
    .lobby-list--header .lobby-list--col-param-short {
        display: inline !important;
    }
}

/* ── Colonne header abbreviate: nascoste di default ── */
.lobby-list--col-players-short,
.lobby-list--col-param-short {
    display: none;
}

/* Su iPad landscape: mostra abbreviate, nasconde originali */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-players-short {
        display: inline !important;
    }
    .lobby-list--header .lobby-list--col-players {
        display: none !important;
    }
    .lobby-list--col-param-short {
        display: inline !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   lobby24b — Su iPad landscape tutte le colonne abbreviate
   hanno la stessa larghezza delle colonne originali di main.css
   così header e righe si allineano automaticamente
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* col-players-short: ridotta a 50px */
    .lobby-list--col-players-short {
        width: 50px !important;
        flex: 0 0 auto;
        text-align: center;
        font-weight: 600;
    }
    /* Stessa width di col-mode (100px) */
    .lobby-list--col-mode-short {
        width: 100px !important;
        flex: 0 0 auto;
        text-align: center;
        font-weight: 600;
    }
    /* Stessa width di col-param (100px) */
    .lobby-list--col-param-short {
        width: 100px !important;
        flex: 0 0 auto;
        text-align: center;
        font-weight: 600;
    }
    /* Stessa width di col-status (140px) */
    .lobby-list--col-status-icon {
        width: 140px !important;
        flex: 0 0 auto;
        justify-content: center;
    }
}

/* ── col-param-short nelle righe: nascosta di default ── */
.lobby-list--col-param-short {
    display: none;
}

/* Su iPad landscape: mostra D., nasconde Dato */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-param-short {
        display: inline !important;
        flex: 0 0 auto;
        font-weight: 600;
        text-align: center;
        width: 100px;
    }
    .lobby-list--col-param.d-none.d-lg-inline {
        display: none !important;
    }
}

/* ── col-players nelle righe: 50px su iPad landscape ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-players.d-none.d-lg-inline {
        width: 50px !important;
    }
}

/* ── Col-name cliccabile ── */
.lobby-list--col-name[data-lobby-id] {
    cursor: pointer;
}
.lobby-list--col-name[data-lobby-id]:hover {
    opacity: 0.85;
}

/* ── Tutta la riga cliccabile ── */
.lobby-list--item[data-lobby-id] {
    cursor: pointer;
}
.lobby-list--item[data-lobby-id]:hover {
    background-color: rgba(0, 82, 114, 0.3);
}

/* ── Su iPad landscape: azzera padding laterale del container
   così chat e dettaglio partita toccano i bordi dello schermo ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-page--wide {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── Col-players: 30px su iPad landscape (titolo e valore) ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-players-short,
    .lobby-list--col-players.d-none.d-lg-inline {
        width: 30px !important;
    }
}

/* ── Col-param-short: 80px su iPad landscape (titolo e valore) ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-param-short {
        width: 80px !important;
    }
}

/* ── Col-status-icon: 30px su iPad landscape (titolo e valore) ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    .lobby-list--col-status-icon {
        width: 30px !important;
    }
}

/* ── Mobile: nascondi bottone + e colonna Dato... ── */
@media (max-width: 991.98px) {
    .lobby-list--action {
        display: none !important;
    }
    .lobby-list--mobile-info {
        display: none !important;
    }
    /* Mostra GIOC., MOD, ST. su mobile */
    .lobby-list--col-players.d-none.d-lg-inline {
        display: inline !important;
    }
    .lobby-list--col-mode-short.d-none.d-md-inline.d-lg-none {
        display: inline !important;
    }
    .lobby-list--col-status.d-none.d-lg-inline {
        display: inline !important;
    }
}

/* ── Mobile: header visibile con solo HOST, MOD, ST. ── */
@media (max-width: 991.98px) {

    /* Rende visibile l'header su mobile */
    .lobby-list--header {
        display: flex !important;
    }
    /* Nasconde colonne non necessarie nell'header su mobile */
    .lobby-list--header .lobby-list--col-players,
    .lobby-list--header .lobby-list--col-players-short,
    .lobby-list--header .lobby-list--col-param,
    .lobby-list--header .lobby-list--col-param-short,
    .lobby-list--header .lobby-list--col-status,
    .lobby-list--header .lobby-list--col-status-icon,
    .lobby-list--header .lobby-list--col-action,
    .lobby-list--header .lobby-list--col-mode,
    .lobby-list--header .lobby-list--col-mode-short {
        display: none !important;
    }
    /* Mostra solo MOD (abbreviato) */
    .lobby-list--header .lobby-list--col-mode-short {
        display: inline !important;
    }
    /* Mostra ST. come titolo colonna stato */
    .lobby-list--header .lobby-list--col-status-icon {
        display: inline !important;
    }

    /* Nelle righe: mostra icona stato, nasconde testo lungo */
    .lobby-list--col-status.d-none.d-lg-inline {
        display: none !important;
    }
    .lobby-list--col-status-icon {
        display: inline-flex !important;
    }
}

/* ── Mobile: correzioni header e lobby-filters--extra ── */
@media (max-width: 991.98px) {

    /* Nasconde la riga gialla lobby-filters--extra */
    .lobby-filters--extra {
        display: none !important;
    }

    /* Header: mostra HOST (col-name) e GIOC. */
    .lobby-list--header .lobby-list--col-name {
        display: inline !important;
    }
    .lobby-list--header .lobby-list--col-players-short {
        display: inline !important;
    }
}

/* ── Mobile: lista lobbies a tutto schermo ── */
@media (max-width: 991.98px) {
    .lobby-page--wide {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── Mobile: colonna giocatori a 30px ── */
@media (max-width: 991.98px) {
    .lobby-list--col-players.d-none.d-lg-inline,
    .lobby-list--col-players-short {
        width: 30px !important;
    }
}

/* ── Mobile: allinea larghezze header alle colonne delle righe ── */
@media (max-width: 991.98px) {

    /* HOST: flex:1 come col-name nelle righe */
    .lobby-list--header .lobby-list--col-name {
        display: inline !important;
        flex: 1 !important;
    }

    /* G.: stessa width dei valori giocatori (30px) */
    .lobby-list--header .lobby-list--col-players-short {
        display: inline !important;
        width: 30px !important;
        flex: 0 0 auto;
        text-align: center;
    }

    /* MOD: stessa width di col-mode-short (60px) */
    .lobby-list--header .lobby-list--col-mode-short {
        display: inline !important;
        width: 60px !important;
        flex: 0 0 auto;
        text-align: center;
    }

    /* ST.: stessa width di col-status-icon (48px) */
    .lobby-list--header .lobby-list--col-status-icon {
        display: inline !important;
        width: 48px !important;
        flex: 0 0 auto;
        text-align: center;
    }
}

/* ── Mobile: fix HOST visibile e width 185px per col-name ── */
@media (max-width: 991.98px) {
    /* HOST: forza visibilità e larghezza fissa */
    .lobby-list--header .lobby-list--col-name {
        display: inline !important;
        visibility: visible !important;
        width: 185px !important;
        flex: 0 0 auto !important;
    }
    /* Stessa larghezza anche nelle righe */
    .lobby-list--col-name {
        width: 165px !important;
        flex: 0 0 auto !important;
    }
}

/* ── Mobile: banner attaccato al bordo sinistro (1px stacco) ── */
@media (max-width: 991.98px) {
    .lobby-list--col-name {
        gap: 0 !important;
        padding-left: 1px !important;
    }
}

/* ── Mobile: banner attaccato al bordo sinistro (1px) ── */
@media (max-width: 991.98px) {
    .lobby-list--item {
        padding-left: 1px !important;
    }
    .lobby-list--header {
        padding-left: 1px !important;
    }
    .lobby-list--col-name {
        gap: 0 !important;
    }
}

.user-banner-small .user-banner-content .user-nickname {
    -webkit-text-stroke: 0.5px #000 !important;
}

/* ════════════════════════════════════════════════════════════════════
   lobby28c — Correzione allineamento header/righe su mobile
   Tutte le colonne header con stessa width delle corrispondenti righe
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* HOST: stessa width di col-name nelle righe (165px) */
    .lobby-list--header .lobby-list--col-name {
        display: flex !important;
        visibility: visible !important;
        width: 165px !important;
        flex: 0 0 auto !important;
    }

    /* Mostra badge HOST */
    .lobby-list--header .lobby-badge--host {
        display: inline-block !important;
    }

    /* G.: stessa width di col-players nelle righe (30px) */
    .lobby-list--header .lobby-list--col-players-short {
        display: inline !important;
        width: 30px !important;
        flex: 0 0 auto !important;
        text-align: center;
    }

    /* MOD: stessa width di col-mode-short nelle righe (60px) */
    .lobby-list--header .lobby-list--col-mode-short {
        display: inline !important;
        width: 60px !important;
        flex: 0 0 auto !important;
        text-align: center;
    }

    /* ST.: stessa width di col-status-icon nelle righe (48px) */
    .lobby-list--header .lobby-list--col-status-icon {
        display: inline !important;
        width: 48px !important;
        flex: 0 0 auto !important;
        text-align: center;
    }
}

/* ════════════════════════════════════════════════════════════════════
   lobby28c — Tab con icone SVG su mobile, testo su desktop
   ════════════════════════════════════════════════════════════════════ */

/* Icona SVG: eredita il colore del tab (currentColor) */
.lobby-tab--icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Tab Pro su mobile: lente + badge PRO affiancati */
.lobby-tab--icon-pro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lobby-tab--icon-pro svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Badge PRO più piccolo su mobile */
.lobby-tab--pro-badge {
    font-size: 0.6rem !important;
    padding: 1px 4px !important;
    line-height: 1.2;
}

/* Su mobile: tab più compatti (solo icona) */
@media (max-width: 991.98px) {
    .lobby-tabs--tab {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.75rem !important;
        gap: 0.25rem;
    }
}

/* ── Mobile: nasconde dropdown e checkbox nei filtri ── */
@media (max-width: 991.98px) {
    .lobby-filters--hide-mobile {
        display: none !important;
    }
    .lobby-filters--search {
        width: 100%;
    }
}

/* ── Div password nel dettaglio partita ── */
.lobby-detail--password {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0;
}

.lobby-detail--password-label {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lobby-detail--password-input {
    width: 100% !important;
    background-color: #FFFFFF;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    color: #000000;
    text-align: left;
}

.lobby-detail--password-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.lobby-detail--password-input:focus {
    background-color: #FFFFFF;
    border-color: #60CECE;
    color: #000000;
    box-shadow: 0 0 0 0.2rem rgba(96, 206, 206, 0.25);
}

/* ── Label errore password ── */
.lobby-detail--password-error {
    display: block;
    width: 100%;
    background-color: #CC0000;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.375rem;
    border: 2px solid #FF4444;
    box-shadow: 0 0 8px rgba(204, 0, 0, 0.6);
    white-space: normal;
    word-wrap: break-word;
}

/* ── Div premium ── */
.lobby-detail--premium {
    display: block;
    width: 100%;
    background-color: #1a7a3a;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-top: 0.5rem;
    border: 2px solid #2ecc71;
    box-shadow: 0 0 8px rgba(26, 122, 58, 0.5);
    line-height: 1.8;
}

.lobby-detail--shop-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    vertical-align: middle;
    text-decoration: none;
}

/* ── Premium div cliccabile: rimuove decorazione link ── */
a.lobby-detail--premium {
    text-decoration: none !important;
    cursor: pointer;
}
a.lobby-detail--premium:hover {
    filter: brightness(1.15);
}

/* ── Gruppo bottoni Crea Partita: colonna verticale ── */
.lobby-header--create-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* ==========================================================
   3. Creazione partita
   ========================================================== */

/* ════════════════════════════════════════════════════════════════════
   creaPartita3.css — Stili per creaPartita3.html
   Richiede: base.css, main.css, utils.css, lobby11.css già inclusi.
   Riutilizza da lobby11.css:
     .lobby-layout, .lobby-side, .lobby-side--hidden,
     .lobby-side--overlay, .lobby-side--close, .lobby-actions--chat,
     .lobby-overlay--open
   Aggiunge:
     layout a 2 colonne (chat + cp-wrap),
     tutti gli stili del card Crea Partita (da creaPartita2.css)
   ════════════════════════════════════════════════════════════════════ */

/* ── Layout: 2 colonne invece di 3 ──
   .lobby-layout da lobby11.css è già `display:flex; gap:1rem`.
   Su desktop: chat (flex:1, nascosta ma occupa spazio) + cp-wrap (centro).
   Usiamo cp3-layout per sovrascrivere solo ciò che serve. */
.cp3-layout {
    align-items: flex-start;    /* il card non si allunga a tutta altezza */
    justify-content: center;
    min-height: calc(100dvh - var(--risiko-navbar-height) - 5rem);
}

/* ── Colonna centrale: il card Crea Partita ──
   Prende lo spazio disponibile ma con un max ragionevole. */
.cp3-main {
    flex: 0 1 520px;
    min-width: 0;
}

/* ── cp-wrap come contenitore flex ──
   In creaPartita2 era un flex centrato nella viewport;
   qui è un figlio del layout a 2 colonne, quindi togliamo
   min-height e centering verticale che non servono. */
.cp3-main.cp-wrap {
    align-items: stretch;
    justify-content: flex-start;
    min-height: unset;
    padding: 0;
    width: 100%;
}

/* Il card occupa tutta la larghezza della colonna */
.cp3-main .cp-card {
    max-width: 100%;
    width: 100%;
}

/* ── Responsive: sotto 992px le colonne si impilano ──
   .lobby-layout già passa a flex-direction:column in lobby11.css.
   Il card torna centrato e con larghezza massima. */
@media (max-width: 991.98px) {
    .cp3-main {
        flex: 0 0 auto;
        width: 100%;
    }
    .cp3-main .cp-card {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* ── Chat a destra del card (come in lobbiesIndex_v2) ──
   Il layout è align-items: flex-start: senza stretch la chat sarebbe alta
   quanto il suo contenuto e l'iframe collasserebbe */
@media (min-width: 992px) {
    .cp3-layout > #chatDiv {
        align-self: stretch;
    }
    /* La barra contiene solo il pulsante Chat, che è fixed: niente margine vuoto sotto il card */
    .cp3-layout + .lobby-actions {
        display: flex;
        margin-bottom: 0;
    }
}
/* ════════════════════════════════════════════════════════════════════
   Stili card Crea Partita (da creaPartita2.css, invariati)
   ════════════════════════════════════════════════════════════════════ */

.cp-card {
    gap: 1rem;
    padding: 1.5rem;
}

.cp-header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
.cp-header--tank {
    height: 2rem;
    width: auto;
}
.cp-header--title {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin: 0;
    text-transform: uppercase;
}

.cp-selectors {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cp-selector {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.cp-selector--btn {
    align-items: center;
    background: rgba(0, 40, 59, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.5rem;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    height: 2.75rem;
    justify-content: center;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    width: 2.25rem;
}
.cp-selector--btn:hover {
    background: rgba(0, 82, 114, 0.8);
    border-color: rgba(255, 255, 255, 0.75);
}
.cp-selector--btn:active {
    background: rgba(0, 95, 132, 0.9);
}
.cp-selector--btn:disabled,
.cp-selector--btn:disabled:hover,
.cp-selector--btn:disabled:active {
    background: rgba(0, 40, 59, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}
.cp-selector--locked .cp-selector--field {
    opacity: 0.7;
}
.cp-selector--field {
    background: rgba(0, 30, 46, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.625rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.25rem 0.75rem;
    text-align: center;
}
.cp-selector--label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.cp-selector--value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Azzurro/teal per i valori selezionati */
.color-value {
    color: #60CECE;
}

.cp-options {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}
.cp-option {
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    text-align: left;
    user-select: none;
}
.cp-option--label {
    line-height: 1.3;
}
.cp-option--check {
    flex-shrink: 0;
    height: 1.25rem;
    margin: 0;
    width: 1.25rem;
}

.cp-field-row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.cp-field-row--box {
    align-items: center;
    background: rgba(0, 30, 46, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.625rem;
    display: flex;
    flex: 1;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem;
}
.cp-field-row--key {
    color: #FFFFFF;
    font-size: 0.875rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.cp-field-row--input {
    background: none;
    border: none;
    color: #60CECE;
    flex: 1;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 0;
    outline: none;
    padding: 0;
}
.cp-field-row--input:focus {
    color: #80E0E0;
}
.cp-field-row--box-pin .cp-field-row--key {
    font-size: 0.75rem;
}

.cp-start {
    font-size: 1.375rem;
    justify-content: center;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
    width: 100%;
}
.cp-start--icon {
    height: 2rem;
    margin-right: 0.5rem;
    width: auto;
}

/* ── Responsive mobile ── */
@media (max-width: 399.98px) {
    .cp-options {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: flex-start;
    }
    .cp-field-row--box-pin {
        flex-wrap: wrap;
    }
    
.cp-field-row--input {
    background: none;
    border: none;
    color: #60CECE;
    flex: 1;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 0;
    outline: none;
    padding: 0;
}
.cp-field-row--input:focus {
    color: #80E0E0;
}
.cp-field-row--box-pin .cp-field-row--key {
        white-space: normal;
        font-size: 0.7rem;
    }
    .cp-header--title {
        font-size: 1.05rem;
    }
    .cp-start {
        font-size: 1.15rem;
    }
}
@media (min-width: 400px) and (max-width: 575.98px) {
    
.cp-field-row--input {
    background: none;
    border: none;
    color: #60CECE;
    flex: 1;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 0;
    outline: none;
    padding: 0;
}
.cp-field-row--input:focus {
    color: #80E0E0;
}
.cp-field-row--box-pin .cp-field-row--key {
        font-size: 0.7rem;
    }
}
@media (pointer: coarse) {
    .cp-selector--btn {
        height: 3rem;
        width: 2.75rem;
    }
    .cp-option--check {
        height: 1.5rem;
        width: 1.5rem;
    }
}

/* ==========================================================
   4. Dettaglio lobby
   ========================================================== */

/* ════════════════════════════════════════════════════════════════════
   lobby-detailsB4.css — Modifiche incrementali per lobby-detailsB3.html
   Dropdown colore: menu come figlio di <body> con position:fixed
   calcolata via JS — sempre in sovrimpressione su tutto.
   Tank a sinistra del bottone, fuori dal wrapper .color-picker.
   Richiede: base.css, main.css, utils.css già inclusi.
   ════════════════════════════════════════════════════════════════════ */

.lobby-slot--mini {
    display: flex;
    gap: 0.5rem;
}
.lobby-slot--mini .lobby-badge.lobby-badge--color {
    border: none;
    font-size: 0.666rem;
    padding-bottom: 0.06125rem;
}

.lobby-list--col-name {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.lobby-list--header > .lobby-list--col-name,
.lobby-filters--extra > .lobby-list--col-name {
    justify-content: center;
}

.lobby-list--col-players,
.lobby-list--col-mode,
.lobby-list--col-param,
.lobby-list--col-status {
    flex: 0 0 auto;
    font-weight: 600;
    text-align: center;
    width: 100px;
}
.lobby-list--col-status {
    font-size: 0.875rem;
    width: 140px;
}
.lobby-list--col-action {
    width: 80px;
}

.lobby-list--mobile-info {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.lobby-list--action {
    flex-shrink: 0;
    text-align: center;
    width: 75px;
}
.lobby-list--action.btn {
    flex-direction: column;
    padding: 0px;
}
.lobby-list--action > .fa-solid {
    font-size: 1.5rem;
    margin: 0px;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
}
.lobby-list--action > .d-lg-inline {
    font-size: 0.875rem;
    margin: 0px;
}

.lobby-actions {
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
}
.lobby-actions--create {
    font-size: 1.5rem;
}
.lobby-actions--chat {
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .lobby-actions--chat {
        bottom: 1rem;
        position: fixed;
        right: 1rem;
        z-index: 100;
    }
}

/* ── Lobby - Details ── */

.lobby-details--timer {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
}

.lobby-details--info-bar {
    width: 100%;
}
.lobby-details--name-field {
    align-items: center;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 1rem;
    box-shadow: 0px 4px 0px #00384F;
    display: flex;
    font-size: 1.125rem;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}
.lobby-details--name-field > .bold {
    color: cyan;
    text-transform: uppercase;
}
.lobby-details--name-field > .color-accent {
    color: #FFFFFF;
    font-weight: 900;
}

.lobby-details--player-bar {
    align-items: stretch;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    width: 100%
}

.lobby-details--player-bar > .flex--center {
    align-items: center;
    display: flex;
}

.lobby-details--settings {
    align-items: center;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    height: 100%;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    text-align: center;
    width: 135px;
}
.lobby-details--settings .color-accent {
    color: cyan;
}

.lobby-slot {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 1rem;
    height: 100%;
    padding: 10px;
    position: relative;
    width: 400px;
}
.lobby-slot--badge {
    left: 1rem;
    position: absolute;
    top: -0.625rem;
    z-index: 1;
}

.lobby-badge.lobby-badge--color {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
}
.lobby-badge.lobby-badge--color.lobby-badge--giallo {
    background-color: #FCDC00;
    color: #000000;
}
.lobby-badge.lobby-badge--color.lobby-badge--blu {
    background-color: #1E58FE;
}
.lobby-badge.lobby-badge--color.lobby-badge--viola {
    background-color: #B03EEC;
}
.lobby-badge.lobby-badge--color.lobby-badge--verde {
    background-color: #05EB05;
    color: #000000;
}
.lobby-badge.lobby-badge--color.lobby-badge--rosso {
    background-color: #FC1313;
}
.lobby-badge.lobby-badge--color.lobby-badge--nero {
    background-color: #3C3D3F;
}
.lobby-badge.lobby-badge--color.lobby-badge--dropdown {
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    gap: 0.25rem;
    text-transform: uppercase;
    transition: filter 0.15s ease-in-out;
}
.lobby-badge.lobby-badge--color.lobby-badge--dropdown:hover {
    filter: brightness(1.1);
}
.lobby-badge.lobby-badge--color.lobby-badge--dropdown:active {
    filter: brightness(0.9);
}

.lobby-slot--remove {
    aspect-ratio: 1 / 1;
    background-color: #DC3545;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.75rem;
    height: 1.5rem;
    padding: 0;
    position: absolute;
    right: -0.5rem;
    top: -0.5rem;
    transition: filter 0.15s ease-in-out;
    width: 1.5rem;
    z-index: 2;
}
.lobby-slot--remove:hover {
    filter: brightness(1.1);
}
.lobby-slot--remove:active {
    filter: brightness(0.9);
}

@media (max-width: 991.98px) {
    .lobby-slot.lobby-slot--compact {
        backdrop-filter: none;
        background-color: transparent;
        border: none;
        height: auto;
        padding: 0;
        width: auto;
    }
    .lobby-slot.lobby-slot--compact > .lobby-slot--badge {
        left: 35px;
        top: -0.625rem;
    }
    .lobby-slot.lobby-slot--compact > .lobby-slot--remove {
        right: 0.25rem;
        top: -0.5rem;
    }
}

.lobby-actions--ready {
    align-items: center;
    font-size: 1.25rem;
    gap: 1rem;
    justify-content: center;
}
.lobby-actions--ready > .form-check-input {
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
}

/* ── Menu: position:fixed, coordinate via JS
   z-index 2000: sopra tutto (navbar 1000, modali 1055, overlay 200) ── */
.color-picker--menu {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0.375rem;
    position: fixed;
    z-index: 2000;
    background-color: rgba(0, 28, 43, 0.97);
    backdrop-filter: blur(6px);
    border: 2px solid #FFFFFF;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    min-width: max-content;
    animation: colorMenuOpen 0.15s ease-out;
}

@keyframes colorMenuOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Singola opzione: stessa grafica del badge trigger ── */
.color-picker--option {
    cursor: pointer;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: filter 0.12s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
}

.color-picker--option:hover {
    filter: brightness(1.15);
}

.color-picker--option:active {
    filter: brightness(0.88);
    transform: scale(0.97);
}

/* ── Mobile: settings su riga separata sotto il banner ── */
@media (max-width: 991.98px) {
    .lobby-details--player-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .lobby-details--settings {
        width: 100% !important;
        height: auto !important;
    }
}

/* ── Mobile: lobby-slot a tutta larghezza, niente overflow ── */
@media (max-width: 991.98px) {
    .lobby-details--player-bar .lobby-slot {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }
    /* Evita overflow su schermi stretti */
    .lobby-details--player-bar {
        overflow: hidden;
    }
    .page {
        overflow-x: hidden;
    }
}

/* ── Riduzione spazi nel lobby-slot su mobile ── */
@media (max-width: 991.98px) {
    .lobby-details--player-bar .lobby-slot {
        padding: 4px !important;
    }
}

/* ── Settings compatto su mobile: 3 colonne affiancate ── */
@media (max-width: 991.98px) {
    .lobby-details--settings {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        justify-content: space-around;
        padding: 4px 8px !important;
        gap: 4px;
        height: auto !important;
        width: 100% !important;
    }
}

/* ── Desktop: spazio verticale tra i div principali ── */
@media (min-width: 992px) {
    .page {
        padding-top: 1.5rem;
    }
    .lobby-details--info-bar {
        margin-bottom: 1rem;
    }
    .lobby-details--player-bar {
        margin-bottom: 1rem;
    }
}

/* ── Mobile: banner e status su 2 righe consecutive ── */
@media (max-width: 991.98px) {
    .lobby-slot--mini {
        flex-direction: column !important;
        gap: 4px;
    }
}

/* ── iPhone SE 1st gen (320px): info-bar compatta ── */
@media (max-width: 375px) {
    .lobby-details--name-field {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
        gap: 0.25rem !important;
    }
    .lobby-details--info-bar .btn {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.75rem !important;
    }
}

/* ── Fix badge HOST tagliato: rimuove overflow:hidden e aggiunge
   padding-top per fare spazio al badge che sporge sopra ── */
@media (max-width: 991.98px) {
    .lobby-details--player-bar {
        overflow: visible !important;
    }
    .lobby-details--player-bar .lobby-slot {
        overflow: visible !important;
        padding-top: 1.2rem !important;
    }
}

/* ── Mobile: più spazio tra info-bar e player-bar ── */
@media (max-width: 991.98px) {
    .lobby-details--player-bar {
        margin-top: 1rem !important;
    }
}

/* ── Desktop: avatar-wrapper con bg e frame ── */
.avatar-wrapper {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.avatar-wrapper .user-avatar {
    position: relative;
    z-index: 1;
    display: block;
}

/* ── Desktop fix: avatar-wrapper centrato e dimensionato correttamente ── */
.avatar-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}

.avatar-wrapper .user-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

/* ════════════════════════════════════════════════════════════════════
   Banner ridotto (userBannerSmall.tag) — solo lo spazio dei contenitori:
   il banner ne occupa tutta la larghezza e scala in proporzione
   (stile del componente in risiko.css).
   ════════════════════════════════════════════════════════════════════ */
.lobby-list--item > .lobby-list--col-name {
    flex: 1 1 0;
    min-width: 0;
}
.lobby-list .lobbyFieldBannerDiv {
    width: 100%;
    max-width: 320px;
    cursor: pointer;
}
.lobby-slot--mini > .user-banner-small {
    flex: 1 1 auto;
    min-width: 0;
}
.lobby-detail--slots .lobby-slot.lobby-slot--compact {
    width: 100%;
}

/* ── Lista partite: righe compatte (meno padding, più spazio ai contenuti) ── */
.lobby-list--header,
.lobby-list--item {
    gap: 0.375rem;
    padding: 0.25rem 0.375rem;
}

/* ════════════════════════════════════════════════════════════════════
   lobbiesIndex_v2 — Pannelli centrati con animazione (solo desktop)
   Ordine: lista partite | dettaglio | chat. I pannelli chiusi hanno
   larghezza 0; il gruppo dei pannelli aperti resta sempre centrato e
   la lista scivola a sinistra quando se ne apre uno a destra.
   Con poco spazio i laterali restano fissi e si restringe la lista.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .lobby-layout--centered {
        --lobby-side-w: clamp(260px, 22vw, 380px);
        --lobby-anim: 0.35s ease;
        justify-content: center;
    }
    .lobby-layout--centered > .lobby-side {
        flex: 0 0 var(--lobby-side-w);
        margin-left: 0.5rem;   /* margine tra i pannelli */
        min-width: 0;
        opacity: 1;
        overflow: hidden;
        transition: flex-basis var(--lobby-anim), margin-left var(--lobby-anim),
                    border-width var(--lobby-anim), opacity var(--lobby-anim),
                    visibility 0s linear 0s;
    }
    /* Altezza minima della riga (= quella che prima dava la chat aperta):
       la lista non cambia altezza all'apertura/chiusura della chat, e
       dettaglio e chat si allungano con lei (align-items: stretch) */
    .lobby-layout--centered > .lobby-panel {
        min-height: 408px;
    }
    /* Contenuto a larghezza fissa: nessun reflow durante l'animazione */
    .lobby-layout--centered > .lobby-side > * {
        flex-shrink: 0;
        width: calc(var(--lobby-side-w) - 6px);   /* 6px = bordi da 3px */
    }
    .lobby-layout--centered > .lobby-side.lobby-side--hidden {
        border-width: 0;
        flex-basis: 0;
        margin-left: 0;
        opacity: 0;
        /* visibility: hidden solo a fine animazione */
        transition: flex-basis var(--lobby-anim), margin-left var(--lobby-anim),
                    border-width var(--lobby-anim), opacity var(--lobby-anim),
                    visibility 0s linear 0.35s;
    }
}

/* Chat in iframe (chatRoom?embed=true): occupa tutto il corpo del
   pannello, senza padding né scroll propri (scrolla solo la lista
   messaggi dentro l'iframe). Vale sia desktop che overlay mobile. */
.lobby-side--body:has(> .lobby-side--iframe) {
    min-height: 0;
    overflow: hidden;
    padding: 0;
}
.lobby-side--iframe {
    background: transparent;
    border: 0;
    display: block;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   lobbiesIndex_v2 — mobile
   ════════════════════════════════════════════════════════════════════ */

/* Chat aperta (overlay mobile): il pulsante OneTrust coprirebbe la casella di testo */
body:has(> #chatDiv.lobby-side--overlay:not(.lobby-side--hidden)) #ot-sdk-btn-floating {
    display: none !important;
}

@media (max-width: 991.98px) {
    /* Stacco minimo della lista dai bordi dello schermo */
    .lobby-layout > .lobby-panel {
        margin-left: 3px;
        margin-right: 3px;
    }

    /* Righe compatte: lo spazio recuperato va al banner */
    .lobby-list--item,
    .lobby-list--header {
        gap: 4px !important;
        padding: 2px !important;
    }

    /* Colonna banner elastica (righe e header restano allineati) */
    .lobby-list--col-name,
    .lobby-list--header .lobby-list--col-name {
        flex: 1 1 0 !important;
        min-width: 0;
        padding-left: 0 !important;
        width: auto !important;
    }
    .lobby-list .lobbyFieldBannerDiv {
        max-width: none;
    }
    /* Landscape: la colonna è molto larga e il banner, che scala con la
       larghezza, risulterebbe enorme: ridotto del 45% */
    @media (orientation: landscape) {
        .lobby-list .lobbyFieldBannerDiv {
            width: 55%;
        }
    }

    /* Colonne a destra ristrette al contenuto.
       Modalità: le etichette arrivano a "COUNTDOWN", quindi testo piccolo
       e a capo dentro la colonna invece di sovrapporsi alle vicine */
    .lobby-list--col-mode-short,
    .lobby-list--header .lobby-list--col-mode-short {
        width: 64px !important;
    }
    .lobby-list--item > .lobby-list--col-mode-short {
        font-size: 0.7rem;
    }
    .lobby-list--item > .lobby-list--col-players {
        white-space: nowrap;
    }
    .lobby-list--col-status-icon,
    .lobby-list--header .lobby-list--col-status-icon {
        width: 34px !important;
    }

    /* Crea Partita / Gioca Subito: nell'header solo su desktop,
       su mobile stanno nella barra in fondo insieme alla Chat */
    .lobby-header--create-group {
        display: none !important;
    }
    /* Crea Partita è nella barra in basso: nell'header resta solo il banner,
       che con space-between e il margine sinistro finirebbe a sinistra */
    .lobby-header--center {
        justify-content: center;
    }
    .lobby-header--center > .lobby-banner {
        margin-left: 0;
    }

    /* hidden (vedi .page nel blocco lobby-slot) renderebbe .page un contenitore
       di scroll e la barra sticky non funzionerebbe: clip taglia senza crearlo */
    .lobby-page--wide .page {
        overflow-x: clip;
    }

    /* Barra azioni in fondo: Crea Partita | Gioca Subito | Chat.
       Sticky, non fixed: resta appena sopra il menu di navigazione mobile
       (#header-mobile-bottom) e in fondo alla pagina si ferma dopo la lista,
       sopra il footer del sito.
       stretch: se un'etichetta va su due righe, i tre pulsanti restano alti uguali */
    .lobby-page--wide .page > .lobby-actions {
        align-items: stretch;
        bottom: calc(var(--header-mobile-bottom-h) + env(safe-area-inset-bottom, 0px));
        display: flex !important;
        gap: 4px;
        margin: 0 3px !important;   /* allineata alla lista */
        padding: 4px 3px;
        position: sticky;
        transition: bottom 0.25s ease;  /* stessa durata del menu (header--tucked) */
        z-index: 100;               /* sotto il menu (1030) e l'overlay chat (1100) */
    }
    /* Menu ritratto scrollando (header.js): la barra scende con lui.
       bottom e non transform, così lo sticky resta vincolato a .page e la barra
       non scende sotto la linea tra contenuto e footer */
    body:has(#header-mobile-bottom.header--tucked) .lobby-page--wide .page > .lobby-actions {
        bottom: env(safe-area-inset-bottom, 0px);
    }
    .lobby-page--wide .page > .lobby-actions > .lobby-actions--bar-btn {
        align-items: center;
        display: flex !important;
        flex: 1 1 0;
        font-size: 0.9rem;
        gap: 0.35rem;
        justify-content: center;
        line-height: 1.1;
        margin: 0;
        min-width: 0;
        padding: 0.4rem 0.35rem;
        text-align: center;
        white-space: normal;
    }
    .lobby-page--wide .page > .lobby-actions > .lobby-actions--bar-btn > .fa-ml {
        margin-left: 0;
    }
    /* Etichetta su due righe: il box dello span occuperebbe tutto lo spazio
       libero e, col testo centrato, l'icona resterebbe lontana dall'etichetta.
       Quando il pulsante è stretto (le etichette vanno a capo) lo span si
       restringe alla parola più lunga, così icona+testo restano un gruppo
       centrato come in Chat */
    .lobby-page--wide .page > .lobby-actions > .lobby-actions--bar-btn {
        container-type: inline-size;
    }
    @container (max-width: 125px) {
        .lobby-page--wide .page > .lobby-actions > .lobby-actions--bar-btn > span:not(.fa-solid):not(.notification-gui-dot) {
            width: min-content;
        }
    }
}

/* Tablet: nella lista il banner ridotto occuperebbe tutta la riga (fino a ~740px).
   La colonna del banner ne prende il 40% (circa quanto su desktop) e lo spazio
   restante va in parti uguali a Giocatori, Modalità e Stato, sia nelle righe
   che nell'header, così le colonne restano allineate */
@media (min-width: 768px) and (max-width: 991.98px) {
    .lobby-list--col-name,
    .lobby-list--header .lobby-list--col-name {
        flex: 0 0 40% !important;
    }
    .lobby-list--item > .lobby-list--col-players,
    .lobby-list--header > .lobby-list--col-players-short,
    .lobby-list--col-mode-short,
    .lobby-list--header .lobby-list--col-mode-short,
    .lobby-list--col-status-icon,
    .lobby-list--header .lobby-list--col-status-icon {
        flex: 1 1 0 !important;
        min-width: 0;
        text-align: center;
        width: auto !important;
    }
    .lobby-list--item > .lobby-list--col-mode-short {
        font-size: 0.9rem;
    }
}

/* Modalità: se l'etichetta non entra nella colonna va a capo invece di uscirne */
.lobby-list--item > .lobby-list--col-mode,
.lobby-list--item > .lobby-list--col-mode-short {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.1;
    min-width: 0;
}

/* ════════════════════════════════════════════════════════════════════
   lobbiesIndex_v2 — Altezza massima = spazio visibile dello schermo
   Desktop: la riga lista | dettaglio | chat non supera lo schermo, i tre
   pannelli restano alti uguali e ognuno scorre al proprio interno.
   Mobile: solo la lista (dettaglio e chat sono overlay a tutto schermo).
   --lobby-row-max-h e --lobby-list-max-h le calcola lobbiesIndex_v2.jsp
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .lobby-layout--centered {
        max-height: var(--lobby-row-max-h, none);
    }
    /* Lista: si restringe dentro il pannello e scorre sotto l'intestazione colonne */
    .lobby-layout--centered > .lobby-panel > .lobby-list {
        flex: 1 1 auto;
        min-height: 0;
    }
    /* Laterali: il corpo si restringe in altezza e scorre
       (la larghezza resta fissa per l'animazione) */
    .lobby-layout--centered > .lobby-side > .lobby-side--body {
        flex-shrink: 1;
        min-height: 0;
    }
}
@media (max-width: 991.98px) {
    .lobby-panel .lobby-list {
        max-height: var(--lobby-list-max-h, none);
    }
}
.lobby-panel .lobby-list {
    overflow-y: auto;
    overscroll-behavior: contain;
}
.lobby-panel .lobby-list::-webkit-scrollbar {
    width: 8px;
}
.lobby-panel .lobby-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.lobby-panel .lobby-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ════════════════════════════════════════════════════════════════════
   lobbiesIndex_v2 — Spazi compatti (.lobbies-page): meno spazio sopra
   e sotto i pannelli e più righe visibili nella lista partite
   ════════════════════════════════════════════════════════════════════ */

/* Navbar → banner */
@media (min-width: 992px) {
    .page.lobbies-page {
        padding-top: 0.25rem;
    }
}
.lobbies-page > .lobby-header {
    margin-top: 0;
}

/* Pannelli → footer */
.lobbies-page > .lobby-layout {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}
/* Su desktop la barra contiene solo il pulsante Chat, che è fixed: margine e riga di testo
   (la barra è inline-flex) resterebbero vuoti */
@media (min-width: 992px) {
    .lobbies-page > .lobby-actions {
        display: flex;
        margin-bottom: 0;
    }
}

/* Pannello partite: tab, filtri e intestazione più bassi */
@media (min-width: 992px) {
    .lobbies-page .lobby-tabs--tab {
        padding: 0.35rem 0.75rem;
    }
}
.lobbies-page .lobby-filters {
    padding: 0.3rem 0.75rem;
}
/* Etichetta sulla stessa riga del campo di ricerca */
.lobbies-page .lobby-filters--search {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.lobbies-page .lobby-filters--search > .form-label {
    white-space: nowrap;
}
.lobbies-page .lobby-list--header {
    padding-bottom: 0.125rem;
    padding-top: 0.125rem;
}
.lobbies-page .lobby-list--item {
    padding-bottom: 1px;
    padding-top: 1px;
}

/* Banner nella lista: meno margine sopra e sotto i pannelli (era 3.6cqi/3.3cqi).
   Il quadrato dell'avatar è alto quanto il banner e si accorcia: avatar e cornice
   crescono in proporzione per restare grandi come prima (avatar = 75% della cornice),
   la cornice sporge di poco dal banner */
.lobby-list .user-banner-small--body {
    margin-bottom: 2.2cqi;
    margin-top: 2.4cqi;
}
.lobby-list .user-banner-small .user-avatar {
    width: 82%;
}
.lobby-list .user-banner-small .user-frame {
    width: calc(82% / 0.75) !important;
}

/* Hover: le righe scure (dispari) si schiariscono, quelle chiare (pari) si scuriscono */
.lobby-list--item[data-lobby-id]:nth-child(even):not(.lobby-list--item--active):hover {
    background-color: rgba(1, 30, 45, 0.6);
}

/* Pallino messaggi non letti della chat generale: in alto a destra, dentro il pulsante */
.lobby-actions--chat .notification-gui-dot {
    right: 0.3rem;
    top: 0.3rem;
    transform: none;
}
/* Mobile: riferimento per il pallino (su desktop lo fa già position: fixed) */
@media (max-width: 991.98px) {
    .lobby-actions--chat {
        position: relative;
    }
}


/* ════════════════════════════════════════════════════════════════════
   lobbyDetail — Stanza di attesa
   In alto: nome partita, utente corrente e impostazioni; sotto gli altri
   giocatori (host per primo) e i posti liberi; in fondo Pronto / Non pronto.
   La chat si affianca su desktop ed e' un overlay su mobile (come lobbyCreate).
   ════════════════════════════════════════════════════════════════════ */
.ld-layout {
    align-items: flex-start;
    justify-content: center;
}
.ld-main {
    /* Gap tra le colonne degli slot: serve anche a dimensionare il pannello dell'utente corrente */
    --ld-slots-gap-x: 1.5rem;
    align-items: center;
    display: flex;
    flex: 0 1 840px;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
@media (min-width: 992px) {
    /* Il layout e' align-items: flex-start: senza stretch l'iframe della chat collasserebbe.
       Altezza = spazio visibile (--ld-chat-h, calcolata in lobbyDetail.jsp), indipendente
       dal numero di giocatori; se .ld-main e' piu' alto la chat si allunga con lui */
    .ld-layout > #chatDiv {
        align-self: stretch;
        min-height: var(--ld-chat-h, 408px);
    }
}

/* ── Nome partita: copia | nome | esci/elimina ── */
.ld-namebar {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    max-width: 100%;
}
.ld-namebar--field {
    min-width: 0;
    padding-left: 2rem;
    padding-right: 2rem;
}
.ld-namebar--field > .color-accent {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ld-namebar--btn {
    flex-shrink: 0;
}
.ld-namebar--copied {
    background-color: #75B798 !important;
}
.ld-namebar--exit {
    background-color: #DC3545;
    border: 2px solid #FFFFFF;
    border-radius: 0.5rem;
    color: #FFFFFF;
    height: 2.25rem;
    padding: 0;
    transition: filter 0.15s ease-in-out;
    width: 2.25rem;
}
.ld-namebar--exit:hover {
    filter: brightness(1.1);
}
.ld-namebar--exit:active {
    filter: brightness(0.9);
}

/* ── Utente corrente + impostazioni ── */
.ld-top {
    align-items: stretch;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    /* Stessa larghezza della griglia degli altri giocatori (.ld-slots) */
    max-width: 840px;
    width: 100%;
}
.ld-settings {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 0.75rem;
    display: flex;
    flex: 0 0 135px;
    flex-direction: column;
    font-size: 0.8rem;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem;
    text-align: center;
}
.ld-settings--item {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ld-settings--label {
    color: #FFFFFF;
    font-weight: 700;
}
.ld-settings--value {
    color: cyan;
    font-weight: 700;
}

/* ── Slot giocatore ── */
.ld-slot {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 40, 59, 0.5);
    border: 3px solid #FFFFFF;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem 0.5rem 0.5rem;
    position: relative;
}
/* Larga quanto una colonna di .ld-slots: i banner hanno le stesse dimensioni */
.ld-slot--self {
    width: calc((100% - var(--ld-slots-gap-x)) / 2);
}
.ld-slot--host {
    left: 50%;
    position: absolute;
    top: -0.7rem;
    transform: translateX(-50%);
    z-index: 3;
}
.ld-slot--remove {
    font-size: 0.7rem;
}
.ld-slot--banner {
    display: flex;
    justify-content: center;
    min-width: 0;
    width: 100%;
}
/* Se il banner e' piu' stretto dello slot (su desktop d-lg-block annulla il flex) resta centrato */
.ld-slot--banner > .user-banner-container {
    margin-left: auto;
    margin-right: auto;
}
.ld-slot--banner:empty,
.ld-slot--banner-small:empty {
    min-height: 60px;
}
.ld-slot--info {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

/* Stato pronto (sola lettura) */
.ld-ready {
    align-items: center;
    background-color: #EC6C2B;
    border: 2px solid #FFFFFF;
    border-radius: 0.5rem;
    color: #FFFFFF;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.1rem 0.6rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.ld-ready.ld-ready--no {
    background-color: transparent;
    border-color: transparent;
}

/* Carro + colore */
.ld-color {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    min-width: 0;
}
.ld-color--tank {
    flex-shrink: 0;
    height: 22px;
}
.ld-color--label.lobby-badge--color {
    font-size: 0.75rem;
    padding: 0.1rem 0.6rem;
}
.ld-color--label:disabled {
    cursor: default;
    filter: none;
}

/* ── Griglia degli altri giocatori ── */
.ld-slots {
    display: grid;
    gap: 1rem var(--ld-slots-gap-x);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 840px;
    width: 100%;
}
.ld-slot--empty {
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    justify-content: center;
    min-height: 140px;
    text-transform: uppercase;
}

/* ── Pronto / Non pronto ── */
.ld-actions {
    margin-top: 0.5rem;
}
.ld-ready-btn {
    align-items: center;
    border: 3px solid #FFFFFF;
    border-radius: 1rem;
    display: inline-flex;
    font-size: 1.5rem;
    font-weight: 800;
    gap: 1.5rem;
    justify-content: center;
    padding: 0.5rem 2rem;
    text-transform: uppercase;
}
.ld-ready-btn--check {
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 0.4rem;
    color: #DC3545;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.25rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}
.ld-ready-btn:not(.ld-ready-btn--on) .ld-ready-btn--check > .fa-solid {
    visibility: hidden;
}

/* ── Popup: Annulla | Conferma ── */
.ld-modal--footer {
    gap: 0.75rem;
}

/* ── Mobile ── */
@media (max-width: 991.98px) {
    .ld-main {
        flex: 0 0 auto;
        padding: 0 3px;
        width: 100%;
    }
    .ld-namebar {
        width: 100%;
    }
    .ld-namebar--field {
        flex: 1 1 auto;
        justify-content: center;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .ld-top {
        width: 100%;
    }

    /* Barra in fondo: Pronto / Non pronto largo, Chat stretto */
    .lobby-page--wide .page > .ld-actions > .ld-ready-btn {
        flex-grow: 3;
        font-size: 1rem;
        gap: 0.75rem;
    }
    .ld-ready-btn--check {
        font-size: 1rem;
        height: 1.75rem;
        width: 1.75rem;
    }
}

/* ── Telefoni: i tablet (iPad Mini, Surface Pro) usano i pannelli desktop ── */
@media (max-width: 767.98px) {
    .ld-slot--self {
        flex: 1 1 auto;
        width: auto;
    }
    /* Pannello utente corrente: stato e colore restano dentro il pannello */
    .ld-slot--self .ld-slot--info {
        flex-wrap: wrap;
        gap: 0.35rem;
        justify-content: center;
    }
    .ld-slot--self .ld-ready {
        font-size: 0.7rem;
        padding: 0.1rem 0.45rem;
    }
    .ld-slot--self .ld-color {
        max-width: 100%;
    }
    .ld-slot--self .ld-color--tank {
        height: 18px;
    }
    .ld-slot--self .ld-color--label.lobby-badge--color {
        font-size: 0.7rem;
        min-width: 0;
        padding: 0.1rem 0.45rem;
    }
    .ld-slot--self .ld-color--text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ld-settings {
        flex-basis: 95px;
        font-size: 0.7rem;
        padding: 0.35rem;
    }

    /* Altri giocatori: una colonna, banner ridotto | colore e stato a destra */
    .ld-slots {
        gap: 0.9rem;
        grid-template-columns: minmax(0, 1fr);
    }
    .ld-slots > .ld-slot {
        align-items: center;
        flex-direction: row;
        padding: 0.35rem 0.5rem;
    }
    .ld-slots > .ld-slot:not(.ld-slot--empty) {
        justify-content: space-between;
    }
    /* Il banner ridotto scala con la larghezza: oltre i telefoni va limitato */
    .ld-slots .ld-slot--banner-small {
        flex: 1 1 auto;
        max-width: 340px;
        min-width: 0;
    }
    .ld-slots .ld-slot--info {
        align-items: stretch;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 0.25rem;
    }
    .ld-slots .ld-color {
        justify-content: center;
    }
    .ld-slots .ld-color--tank {
        height: 16px;
    }
    .ld-slots .ld-color--label.lobby-badge--color,
    .ld-slots .ld-ready {
        font-size: 0.65rem;
    }
    .ld-slots .ld-ready {
        justify-content: center;
    }
    .ld-slot--empty {
        min-height: 56px;
    }
}