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

    &: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); }

    .cell__platform { padding: 0.25rem; }

    .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; }

    .replay__button { display: none; }

    .replay__actions { display: none; }

    .actions__popover { display: contents; }

    .replay__icon { height: 2rem; }

    .cell__actions .replay__icon:not(.replay__icon--always) { display: none; }

    @container (max-width: 60em) {
        .replay__platform { display: none; }

        .replay__information {
            background-color: black;
            display: grid;
            border: none;
            grid-template-columns: 7rem 1fr 1.5rem 1fr 4rem 3rem;
            grid-template-rows: 2fr 5fr 2fr;
            grid-template-areas:
                "player1 player1 . player2 player2 player2"
                "character1 character1 firstTo character2 character2 character2"
                "playedAt context context context context actions"
            ;

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

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

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

                .replay__actions {
                    display: flex;
                    border: none;
                    padding: 0;
                    height: 1.5rem;
                    width: 1.5rem;
                }
            }

            .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;

                .replay__icon:not(.replay__icon--always) { display: contents; }

                .actions__popover {
                    display: none;

                    &:popover-open {
                        display: grid;
                        gap: 0.5rem;

                        .action {
                            display: flex;
                            justify-content: space-between;
                            gap: 1rem;
                            border: none;
                            &:before { content: attr(title); }
                        }
                    }
                }
            }

            .replay__button {
                display: flex;
                height: 1.5rem;
                width: 1.5rem;
            }

            .replay__icon:not(.replay__icon--always) {
                display: none;
            }

            .cell__first-to {
                grid-area: firstTo;
                display: grid;
                place-content: center;
                font-weight: bolder;
                color: var(--violet);
            }

            .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;
            }
        }
    }
}