body {
    margin: 1vh 1vw;
    background-color: #eeffee;
}


fieldset {
    border: 1px solid;
    background-color: #ffffff;
}

legend {
    border: 1px solid;
    list-style-type: none;
    padding: 0.2em 0.5em;
    background-color: #ccffcc;
}

.grid {
    display: grid;
    gap: 5px;
    margin-top: 20px;
}

.grid-header {
    background: #f4f4f4;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.grid-player {
    background: #e0e0e0;
    padding: 10px;
    border: 1px solid #ddd;
    display: flex;
}

.grid-player-name {
    margin-right: 8px;
}

.remove-button {
    cursor: pointer;
}

.grid-cell {
    background: #ffffff;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}

.grid-cell:hover {
    background: #f0f0f0;
}

.grid-cell.active {
    background: #4caf50;
    color: white;
}

.grid-total {
    background: #f4f4f4;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}