:root {
    --spacing: 10px;
    --background: #ccc;
}

body {font-family:'Open Sans', sans-serif; padding: var(--spacing); color: #333; background-color: var(--background);}

a, img {outline:0; border:0;}
input {border-radius: 5px; border:0; font-size: 14px; padding: 5px;}

.clear {clear: both;}
.count {margin: 10px 0;}

.button {display:block; font-size: 20px; border-radius: 5px; background: #eee; padding:10px; cursor:pointer; border:1px solid #ccc; width: 140px; text-align: center; margin: 0 auto;}
a.button {text-decoration: none; margin-bottom: 10px; color:#333;}
.button:active { opacity: 50%;}
.buttonbox {margin: 10px 0;}

#list {display:flex; flex-direction: column; align-items: center;}
#list .add {position: sticky; top: var(--spacing); padding: var(--spacing) 0;}
#list .add input {font-size: 20px; padding: 7px; box-shadow: 0 10px 10px var(--background);}
#list .items {margin-top: var(--spacing);}
#list .items input {margin-bottom: 5px;}
#list .remove {cursor: pointer; color: crimson;}
#list .remove svg {vertical-align: middle;}
#list .bar {position: fixed; top: 0; width: 100%; height: calc(var(--spacing) * 2); background-color: var(--background);}

#play .players i {margin-right: 5px;}
#play .donebox {display:none; margin: 10px 0;}
#play .done, #play .reset {width: 50px; float:left; border-radius: 0; border-right-width: 0; min-width: 0; transition: .4s;}
#play .done:first-of-type {border-radius: 5px 0 0 5px;}
#play .done:last-of-type {border-radius: 0 5px 5px 0; border-right-width: 1px;}
#play .donelist {list-style: inside; margin: 10px 0 10px 10px;}
#play .donelist .location {color:gray; font-size: 14px;}
#play .reset {overflow:hidden; width:0; background:#eaa; padding-left:0; padding-right:0; border-left-width:0;}
#play .reset.active {width: 35px;}
#play .button.pressed {background: #aaa;}
#play .limit {padding: 5px; font-size:1em; width:140px;}
#play .wait {display:none; margin-top:10px;}
#play .error {text-align: center;}
#play .result {font-size: 20px; margin:20px 0; justify-content: center; text-align: center;}
#play .result .col {display:inline-block; text-align: center; max-width:300px; min-width:280px; vertical-align: top;}
#play .result img {width:200px; height:300px; margin: 10px 0; border-radius: 5px; object-fit: cover;}
#play .result .to {width:50px; min-width:50px;}
#play .left .name:last-of-type {display:none;}

@media (max-width: 680px) {
    #play .result .col {display: block; margin: 0 auto;}
    #play .result .to {width: auto; margin: 10px auto;}
    #play .done:first-of-type {border-radius: 5px 0 0 0;}
    #play .done:nth-of-type(5) {border-radius: 0 5px 0 0; border-right-width: 1px;}
    #play .done:nth-of-type(6) {clear:left; border-radius: 0 0 0 5px;}
    #play .done:last-of-type {border-radius: 0 0 5px 0;}
    #play .done:nth-of-type(n + 6) {border-top-width: 0;}
    #play .left .name:first-of-type {display:none;}
    #play .left .name:last-of-type {display:block;}
}