.table-container {
    --max-width: 936px;
    --container-padding: 1rem;

    width: min(var(--max-width), 100% - (var(--container-padding) * 2));
    margin-inline: auto;
}

.table-container[data-type="squads"]{
    display: flex;
    flex-direction: column;
}

.table-container[data-type="group"]{
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    grid-row: auto auto;
    grid-column-gap: 0.25rem;
    grid-row-gap: 1rem;
    gap: 1rem;
    /* font-size: 0.85rem; */
    /* width: 100%; */
}
.table-container[data-type="final"]{
    display: grid;
    grid-template-columns: 1fr;
    grid-row: auto auto;
    grid-column-gap: 0.25rem;
    grid-row-gap: 1rem;
    gap: 1rem;
    /* font-size: 0.85rem; */
    width: 40%;
}

.table-wrap{
    display: grid;
}

.table-stage  {
    border-collapse:collapse;
    border-spacing:0;
    margin:0px;
    width: 100%;
    text-align:center;
    vertical-align:middle;
    justify-self: center;
}

.table-stage .cut_line{
    border-bottom: 1rem solid transparent;
}

.table-stage tbody tr{
    background-color: var(--clr-bg);
}

.table-stage.simple tbody tr:nth-of-type(even){
    background-color: var(--clr-table-accent-200);
}

.table-stage.squad tbody tr:nth-of-type(4n+3),
.table-stage.squad tbody tr:nth-of-type(4n+4){
    background-color: var(--clr-table-accent-200);
}
.table-stage td{
    border-color:var(--clr-neutral-1000);
    border-style:solid;
    border-width:2px;
    font-size:1.125rem;
    font-weight: 500;
    overflow:hidden;
    padding:5px 5px;
    word-break:normal;
}
.table-stage td.games{
    max-width: 2.5rem;
    font-size: 1rem;
}

.table-stage td.name{
    text-align: left;
}

.table-stage td.cell-player{
    text-align: left;
    padding-left: 1rem;
}

.table-stage th{
    text-transform: uppercase;
    background-color: var(--clr-table-accent-400);
    border-color: var(--clr-neutral-1000);
    border-style: solid;
    border-width: 2px;
    font-size: 1.125rem;
    font-weight: 700;
    overflow: hidden;
    padding: 5px;
    word-break: keep-all;
}

.table-stage .th-cell{
    position:-webkit-sticky;
    position:sticky;
    top:-1px;
    will-change:transform;
}

@media screen and (max-width: 50em) {
    .table-stage th{
        font-size: 0.75rem;
    }
    .table-stage td{
        padding:2px 2px;
        font-size: 0.65rem;
    }
    .table-stage td.games{
        font-size: 0.5rem;
    }
    .table-stage {
        width: 100%;
        /* width: auto !important; */
    }
    .table-stage col {
        width: auto !important;
    }
    .table-wrap {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: auto 0px;
    }
    .table-container {
        --max-width: 50em;
        --container-padding: 0.2rem;
    
        width: min(var(--max-width), 100% - (var(--container-padding) * 2));
        margin-inline: auto;
    }
    .table-container[data-type="group"],
    .table-container[data-type="final"]{
        display: grid;
        grid-template-columns: 1fr;
        grid-row-gap: 1rem;
        /* font-size: 0.85rem; */
        width: 100%;
    }
}