html,body {height:100%; color:#fff; background-color:#222;}
body {font-size:1.2em; display:flex; flex-direction:column; margin:0;}
main {flex:1;}
menu {flex:0; display:flex; justify-content:left; gap:0.2em; & button {font-size:1em;}}
thead th {background-color:#222; color:#fff; position:sticky; top:-1px; z-index:2; &:first-of-type {left:0; z-index:3;}}
table button {border:none; background:none; font-size:1.4em; margin:0; padding:0 !important;}
tr > *:first-of-type {padding:0.5em; text-align:center;}
tbody tr td:first-of-type {background-color:#222; position:sticky; left:-1px; z-index:1;}
tfoot tr td {background-color:#222; position:sticky; bottom:-1px; text-align:right; padding:0.5em; border:1px solid transparent; z-index:2;}
thead input {color:#fff; padding:0.5em; font-size:inherit; font-family:inherit; background:none; border:0; text-align:center; width:10ch;}
tbody input {padding:0.5em; font-size:inherit; font-family:inherit; background:none; border:0; text-align:right; max-width:10ch;}
input[type="number"] {appearance:textfield; -webkit-appearance:textfield; -moz-appearance:textfield; border:1px solid cyan; color:#fff;}
.play-mode {display:none;}
html[data-play-mode] .edit-mode {display:none;}
html[data-play-mode] .play-mode {display:unset;}
.red {color:red;}
.blue {color:cyan !important;}
.add {display:flex; justify-content:center; align-items:center; height:1.5ch; padding:0.2em !important; font-size:80%; color:cyan !important;}
.add-player {font-size:120% !important;}