.replay-table {
    .winner__button {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    &:has(input[data-winbox]:checked) .winner {
        color: var(--winner-green);
        fill: var(--winner-green);

        .winner__icon { opacity: 1; }
    }

    [data-player] .winner__icon { opacity: 0; }
    .table__icon { display: none; }
    .replay__information { cursor: pointer; }
    .character--two > img { transform: scaleX(-1); }

    .replay__player {
        overflow: hidden;
        position: relative;
        max-width: 100%;
        isolation: isolate;
        padding: 0;
    }

    .player__name {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem;
        margin: 0;

        .player__flag { height: 1rem; }
    }

    .character__control { height: 1.5rem; }

    @container (max-width: 60em) {
        .replay__information {
            height: 10rem;
            background-color: black !important;
            display: grid;
            border: none;
            grid-template-columns: 6rem 1fr 1.5rem 1fr 3rem 3rem;
            grid-template-rows: 1fr 2fr 1fr;
            grid-template-areas:
                "player1 player1 . player2 player2 player2"
                "character1 character1 firstTo character2 character2 character2"
                "playedAt context context context context platform"
            ;

            &:nth-child(odd) { background: black !important; }

            .table__icon {
                display: grid;
                place-content: center;
            }

            .cell__platform {
                grid-area: platform;
                display: grid;
                place-content: center end;
                background-color: white;
                padding-right : 1rem;
            }

            .cell__played-at {
                grid-area: playedAt;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                background-color: white;
                color: black;
                gap: 0.5rem;
            }

            .table--stacked { display: contents; }
            .cell__version { display: none; }

            .cell__context {
                grid-area: context;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                background-color: white;
                gap: 0.5rem;
                color: black;

                .context {
                    flex: 0 2 25%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }

            .cell__note { display: none; }
            .cell__actions { grid-area: actions; }
            .cell__first-to {
                grid-area: firstTo;
                display: grid;
                place-content: center;
                font-weight: bolder;
                color: var(--pink-jinx);
            }

            .cell__player-1 {
                grid-area: player1;
                padding-left: 0.5rem;
            }

            .cell__character-1, & .cell__character-2 {
                & .character { padding-bottom: 0.25rem; }
                & .character__image { opacity: 100%; }
            }

            .cell__character-1 {
                grid-area: character1;
                width: 100%;
                align-items: flex-end;

                .character__image {
                    right: 0;
                    opacity: 100%;
                }
            }

            .cell__player-2 {
                grid-area: player2;
                padding-right: 0.5rem;
                justify-content: flex-end;

                .player__name { flex-direction: row-reverse; }
            }

            .cell__character-2 {
                width: 100%;
                grid-area: character2;
                justify-content: flex-end;
                align-items: flex-end;

                .character__image {
                    left: 0;
                    opacity: 100%;
                }
            }
        }

        .table__player.cell__player-2 { justify-content: flex-end; }
        .player__name { padding: 0; }
        .table__icon { display: block; }
    }

    @container (max-width: 25em) {
        .cell__played-at, & .cell__context, & .cell__platform { font-size: smaller; }

        .cell__context {
            .context { display: none; }

            .event {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}