/* Sala de espera. En móvil todo va en una columna; en escritorio, rejilla de dos. */

.lobby-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5);
}
.lobby-status { color: var(--text-dim); margin: 0; }

.connection { display: flex; align-items: center; gap: var(--space-2); font-size: .85rem; color: var(--text-dim); }
.connection .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--text-dim); }
.connection[data-value="live"] .dot { background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); animation: pulse 2.4s ease-out infinite; }
.connection[data-value="connecting"] .dot { background: var(--warn); }
.connection[data-value="polling"] .dot { background: var(--accent-2); }
.connection[data-value="lost"] .dot { background: var(--danger); }
@keyframes pulse { 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.lobby-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 60rem) {
    .lobby-grid { grid-template-columns: 20rem 1fr; align-items: start; }
    .panel-teams { grid-column: 2; grid-row: 1 / span 2; }
}

.panel {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    border: 1px solid var(--line); border-radius: var(--radius-2);
    padding: var(--space-4);
}

/* ─── Invitación ───────────────────────────────────────────────────────────── */
.code-display {
    font-family: var(--font-mono); font-size: clamp(2rem, 9vw, 3rem);
    letter-spacing: .3em; text-align: center; color: var(--accent);
    margin: var(--space-2) 0 var(--space-4); text-indent: .3em;
}
.invite-actions { display: flex; gap: var(--space-2); }
.invite-actions button { flex: 1; }
.qr { display: grid; place-items: center; margin: var(--space-4) 0; }
.qr svg { border-radius: var(--radius-1); max-width: 100%; height: auto; }
.hint { font-size: .8rem; color: var(--text-dim); }
.invite-url { font-size: .75rem; color: var(--text-dim); }

/* ─── Bandos ───────────────────────────────────────────────────────────────── */
.teams { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.team { border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--space-3); }
.team[data-full="true"] .ghost[data-action="join-team"] { display: none; }
.team-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); min-height: 3rem; }
/*
 * La fila de un jugador tiene que aguantar un nombre largo, dos insignias y un botón
 * sin salirse. Tres cosas hacen falta: que pueda partirse en dos líneas, que el
 * nombre sea el que cede (min-width: 0 para que funcione el recorte con puntos
 * suspensivos) y que insignias y botones no se encojan hasta romperse.
 */
.team-list li {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
    background: var(--surface-2); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3);
    min-width: 0;
}
.team-list li > .ghost { flex: none; margin-left: auto; }
.team-list li[data-state="away"] { opacity: .55; }
.team-list li[data-state="gone"] { opacity: .35; text-decoration: line-through; }
.player-name { flex: 1 1 6rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
    flex: none; white-space: nowrap;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent); border-radius: 999px; padding: .1rem .5rem;
}
.badge-you { background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-2); }
.badge-ai { background: color-mix(in srgb, var(--text-dim) 22%, transparent); color: var(--text-dim); }
.avatar {
    width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-weight: 700; font-size: .8rem;
    background: var(--accent); color: var(--accent-ink);
}
.empty-slot { color: var(--text-dim); font-size: .85rem; }

.lobby-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }
.lobby-actions .big { flex: 1; min-width: 12rem; }

/* ─── Configuración ────────────────────────────────────────────────────────── */
.config-form { display: grid; gap: var(--space-3); }
.config-row { display: grid; gap: var(--space-1); }
.config-row label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.config-row.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.config-row.switch input { width: auto; }

/* ─── Chat acoplado ────────────────────────────────────────────────────────
   Vive fuera del flujo de la página: fijo abajo a la derecha en escritorio y
   como hoja inferior en móvil. Se anima con transform y opacity (nada que
   provoque relayout) y se queda quieto si el sistema pide menos movimiento. */

.chat-dock {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    pointer-events: none;
}
.chat-dock > * { pointer-events: auto; }

/* ─── Lanzador ─────────────────────────────────────────────────────────── */
.chat-launcher {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    box-shadow: var(--shadow-2);
    order: 2;
}
.chat-launcher svg { width: 1.6rem; height: 1.6rem; }
.chat-launcher:not(:disabled):hover { transform: translateY(-2px); }
.chat-dock[data-open="true"] .chat-launcher { background: var(--surface-2); color: var(--text); }

.chat-unread {
    position: absolute;
    top: -.15rem;
    right: -.15rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid var(--bg);
    animation: unread-pop 240ms cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes unread-pop { from { transform: scale(.4); } }

/* Un mensaje nuevo con el panel cerrado: un pulso corto, como el eco del sonar. */
.chat-launcher[data-ping="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent);
    animation: echo 1.1s ease-out 2;
}
@keyframes echo {
    from { transform: scale(1); opacity: .8; }
    to   { transform: scale(1.7); opacity: 0; }
}

/* ─── Panel ────────────────────────────────────────────────────────────── */
.chat-panel {
    order: 1;
    width: min(22rem, calc(100vw - var(--space-4) * 2));
    max-height: min(60vh, 30rem);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    transform-origin: bottom right;
    animation: chat-in 180ms cubic-bezier(.2, .7, .3, 1);
}
@keyframes chat-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

.chat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.chat-panel-head h2 { margin: 0; font-size: .8rem; }
.chat-close {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--text-dim);
    padding: 0;
    cursor: pointer;
}
.chat-close:hover { color: var(--text); }

.chat-log {
    list-style: none;
    margin: 0;
    padding: var(--space-3);
    display: grid;
    gap: var(--space-1);
    align-content: start;
    overflow-y: auto;
    flex: 1;
    min-height: 8rem;
    font-size: .9rem;
    overscroll-behavior: contain;
}
.chat-log li { padding: var(--space-1) var(--space-2); border-radius: var(--radius-1); }
.chat-log .who { font-weight: 700; color: var(--accent); }
.chat-log li[data-scope="team"] { background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.chat-log li[data-kind="feed"] { color: var(--text-dim); font-style: italic; }
.chat-log li[data-mine="true"] .who { color: var(--accent-2); }
.chat-log:empty::after {
    content: attr(data-empty);
    color: var(--text-dim);
    font-style: italic;
    font-size: .85rem;
}

.chat-form {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
.chat-form select { width: auto; font-size: .8rem; padding: var(--space-2); }
.chat-form input { min-width: 0; }
.chat-form button { display: grid; place-items: center; padding: var(--space-2) var(--space-3); }
.send-icon { width: 1.15rem; height: 1.15rem; }

/* ─── Móvil: hoja inferior a lo ancho ──────────────────────────────────── */
@media (max-width: 40rem) {
    .chat-dock { left: 0; right: 0; bottom: 0; align-items: stretch; gap: 0; }
    .chat-launcher {
        position: fixed;
        right: var(--space-4);
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }
    .chat-panel {
        width: 100%;
        max-height: 70vh;
        border-radius: var(--radius-3) var(--radius-3) 0 0;
        border-bottom: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform-origin: bottom center;
        animation: sheet-in 200ms cubic-bezier(.2, .7, .3, 1);
    }
    @keyframes sheet-in { from { transform: translateY(100%); } }
    /* Con la hoja abierta, el lanzador estorba. */
    .chat-dock[data-open="true"] .chat-launcher { display: none; }
    .chat-form { grid-template-columns: auto 1fr auto; }
}

/* El aviso flotante no debe taparse con el lanzador del chat. */
.toasts { padding-inline-end: 5rem; }

/* ─── Cuenta atrás ─────────────────────────────────────────────────────────── */
.countdown { font-family: var(--font-mono); font-size: 1.1rem; color: var(--warn); }
.countdown[data-urgent="true"] { color: var(--danger); animation: beat .6s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.12); } }

/* Controles del rival de IA en la sala. */
.team-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ai-level { display: flex; align-items: center; gap: var(--space-2); font-size: .8rem; color: var(--text-dim); }
.ai-level select { width: auto; padding: var(--space-2); }
.team-list li[data-ai="true"] .avatar { filter: grayscale(.35); }