/* AJUSTES ONLINE: móvil, ranking, avatares y ventanas modales */

/* Ajustes de lectura y controles para celulares. */
@media(max-width:900px),(pointer:coarse) and (max-height:650px) {
    body.in-game .header-actions #onlineStatus {
        flex:0 0 auto;
        max-width:none;
        width:auto;
        white-space:nowrap;
        overflow-wrap:normal;
        position:static;
    }

    body.in-game .header-actions #leaveRoomBtn {
        flex:0 0 auto;
        position:static;
    }

    .table-layoff .layoff-no-moves {
        display:block;
        font-size:14px;
        font-weight:600;
        line-height:1.3;
        padding:6px 8px;
    }

}

.next-round-countdown {
    text-align:center;
    font-weight:600;
    color:var(--gold)!important;
}

.rooms-in-progress {
    font-size:14px;
    color:var(--gold);
    margin:12px 0;
    min-height:1.5em;
}

@media(max-width:900px),(pointer:coarse) and (max-height:650px) {
    /* Espacio constante para los títulos y mensajes de hasta dos líneas. */
    body.in-game .game-heading {
        height:44px;
        min-height:44px;
        max-height:44px;
        flex:0 0 44px;
    }

    body.in-game .game-heading>div:first-child {
        min-width:0;
        flex:1;
    }

    body.in-game .game-heading h2 {
        line-height:1.2;
        height:2.4em;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
        overflow-wrap:anywhere;
    }

    body.in-game .game-meta {
        flex:0 0 auto;
        max-width:52%;
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-end;
    }

    body.in-game .action-copy {
        max-width:none;
        min-width:0;
        flex:0 0 100%;
        height:2.5em;
        min-height:2.5em;
        max-height:2.5em;
        line-height:1.25;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
        overflow-wrap:anywhere;
    }

}

/* Contador discreto al pie del panel de entrada. */
#setup .setup-copy {
    position:relative;
    padding-bottom:52px;
}

#setup #roomsInProgress {
    position:absolute;
    left:20px;
    bottom:14px;
    margin:0;
    font-size:11px;
    line-height:1.4;
    min-height:0;
    color:var(--muted);
}

/* Firma legible y compacta en el inicio desde celulares. */
@media(max-width:900px),(pointer:coarse) and (max-height:650px) {
    body:not(.in-game)>footer.site-signature {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:5px;
        padding:14px 12px 18px;
        max-width:100%;
        box-sizing:border-box;
        font-size:11px;
        line-height:1.5;
        letter-spacing:normal;
        text-align:center;
    }

    body:not(.in-game)>footer.site-signature>span {
        display:block;
        max-width:100%;
    }

    body:not(.in-game)>footer.site-signature a {
        white-space:nowrap;
    }

}

/* Encabezado de una línea y controles compactos para celulares. */
@media(max-width:900px),(pointer:coarse) and (max-height:650px) {
    body.in-game .game-heading {
        height:30px;
        min-height:30px;
        max-height:30px;
        flex:0 0 30px;
        gap:4px;
    }

    body.in-game .game-heading h2 {
        display:block;
        height:auto;
        line-height:1.2;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.in-game #deckInfo {
        display:none;
    }

    body.in-game .game-meta {
        max-width:48%;
        flex-wrap:nowrap;
        min-width:0;
    }

    body.in-game .game-meta span {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.in-game #fastFinishBtn {
        position:static;
        flex:0 1 auto;
        min-width:0;
        max-width:52%;
        height:28px;
        min-height:28px;
        padding:4px 7px;
        font-size:10px;
        line-height:1.1;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        align-self:center;
    }

    body.in-game #cutBtn:not(:disabled) {
        background:#f7c948;
        color:#17382a;
        border:2px solid #ffe99a;
        font-weight:800;
        box-shadow:0 0 0 1px #f7c94855;
    }

    body.in-game #cutBtn {
        font-weight:800;
        letter-spacing:.5px;
    }

}

.room-ranking {
    margin:16px 0;
}

.ranking-scroll {
    overflow-x:auto;
}

.room-ranking table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.room-ranking th,.room-ranking td {
    padding:8px;
    text-align:left;
    border-bottom:1px solid #ffffff25;
}

.room-ranking p {
    font-size:12px;
}

.game-version {
    font-size:10px;
    white-space:nowrap;
}

/* Avatares de la sala y selector compartido con los otros juegos. */
.player-avatar {
    display:inline-block;
    width:28px;
    height:28px;
    min-width:28px;
    max-width:28px;
    object-fit:contain;
    border-radius:50%;
    vertical-align:middle;
    margin-right:6px;
    flex-shrink:0;
}

.avatar-picker {
    margin:14px 0;
    padding:8px;
    border:1px solid #ffffff25;
    border-radius:10px;
}

.avatar-picker summary {
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-size:13px;
}

.avatar-picker summary .player-avatar {
    width:40px;
    height:40px;
    max-width:40px;
}

.avatar-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(65px,1fr));
    gap:6px;
    margin-top:10px;
    max-height:270px;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.avatar-option {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:5px;
    border:2px solid transparent;
    border-radius:8px;
    background:#173e35;
    color:#eef5ed;
    font-size:10px;
    min-width:0;
}

.avatar-option img {
    width:48px;
    height:48px;
    object-fit:contain;
}

.avatar-option[aria-pressed="true"] {
    border-color:#f7c948;
    background:#315446;
}

.avatar-option:focus-visible {
    outline:2px solid white;
    outline-offset:1px;
}

@media(max-width:900px),(pointer:coarse) and (max-height:650px) {
    .opponent-name .player-avatar {
        width:20px;
        height:20px;
        min-width:20px;
        max-width:20px;
        margin-right:3px;
    }

    #humanName .player-avatar {
        width:24px;
        height:24px;
        min-width:24px;
        max-width:24px;
    }

    .avatar-grid {
        max-height:240px;
    }

}

/* Ventanas modales: avisos y selección de avatares. */
.online-dialog {
    width:min(680px,calc(100vw - 24px));
    max-height:85dvh;
    box-sizing:border-box;
    overflow:auto;
    background:#10382e;
    color:#e5eee7;
    border:1px solid #d5b47880;
    border-radius:16px;
    padding:22px;
    box-shadow:0 20px 70px #0008;
}

.online-dialog::backdrop {
    background:#031a18d9;
    backdrop-filter:blur(5px);
}

.online-dialog h2 {
    margin:0 0 14px;
    font:normal 26px Georgia,serif;
    color:var(--gold);
}

.online-dialog p {
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.dialog-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.dialog-heading button {
    font-size:25px;
    padding:3px 9px;
}

.dialog-actions {
    display:flex;
    justify-content:flex-end;
    margin-top:18px;
}

.notice-dialog {
    width:min(460px,calc(100vw - 24px));
}

.avatar-picker {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    text-align:left;
    background:#173e35;
    color:inherit;
    cursor:pointer;
}

.avatar-picker .player-avatar {
    width:40px;
    height:40px;
    max-width:40px;
}

.avatar-dialog .avatar-grid {
    max-height:min(60dvh,600px);
    grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
}

@media(max-width:900px),(pointer:coarse) and (max-height:650px) {
    .online-dialog {
        padding:16px;
    }

    .online-dialog h2 {
        font-size:22px;
    }

    .mobile-layoff-tabs {
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
    }

    .mobile-layoff-tabs button {
        min-width:0;
        font-size:10px;
        padding:6px 2px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    body.in-game.five-player-room .opponents {
        gap:3px;
        padding-left:3px;
        padding-right:3px;
    }

    body.in-game.five-player-room .opponent {
        min-width:0;
    }

    body.in-game.five-player-room .opponent .mini-card {
        width:18px;
        min-width:18px;
        margin-left:-12px;
    }

    body.in-game.five-player-room .opponent .mini-card:first-child {
        margin-left:0;
    }

}

/* Acomodo de cinco participantes: tres columnas y dos filas en escritorio. */
@media (min-width: 901px) and (min-height: 651px), (min-width: 901px) and (pointer: fine) {
    body.five-player-room .table-layoff .layoff-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        gap: 8px;
        margin: 5px 0;
    }
    body.five-player-room .table-layoff .layoff-player {
        padding: 6px 8px;
    }
    body.five-player-room .table-layoff .layoff-player h3 {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 3px;
    }
    body.five-player-room .table-layoff .player-avatar {
        width: 22px;
        height: 22px;
        min-width: 22px;
        max-width: 22px;
    }
    body.five-player-room .table-layoff .layoff-label {
        font-size: 10px;
        line-height: 1.2;
        margin: 3px 0;
    }
    body.five-player-room .table-layoff .layoff-groups,
    body.five-player-room .table-layoff .layoff-loose {
        gap: 3px;
    }
    body.five-player-room .table-layoff .layoff-group {
        padding: 4px;
        gap: 3px;
    }
    body.five-player-room .table-layoff .layoff-group .card,
    body.five-player-room .table-layoff .layoff-loose-card .card {
        width: clamp(28px, calc((100dvh - 300px) / 8), 52px);
        min-width: clamp(28px, calc((100dvh - 300px) / 8), 52px);
        height: auto;
        aspect-ratio: 420 / 640;
    }
    body.five-player-room .table-layoff h2 {
        font-size: 22px;
        margin: 2px 0;
    }
    body.five-player-room .table-layoff .layoff-top {
        margin: 4px 0;
    }
    body.five-player-room .table-layoff .layoff-events {
        max-height: 24px;
        margin-top: 3px;
        padding: 3px 6px;
    }
    body.five-player-room .table-layoff-buttons {
        margin-top: 4px;
    }
}