players, player, pot {
   display: block;
}

players {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   font-size: 2em;
}

players > * {
   width: 10em;
   flex-grow: 1;
}

player {
   background-color: var(--background);
   margin: .25em;
   padding: .25em;
   border-radius: 6px;
   display: flex;
   flex-direction: column;
}

player > * {
   flex-grow: 1;
}

player:not([participating]) {
   display: none;
}

player:not([active]) {
   opacity: .5;
}

player[current] {
   color: var(--code);
}

player[me] {
   font-weight: bold;
}

player[winner] {
   font-weight: bold;
   font-size: 3em;
}

pot {
   font-size: 3em;
   display: block;
   width: 100%;
   text-align: center;
}

row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

card {
   text-align: center;
   width: 100%;
}