*{margin:0;padding:0}ul{list-style-type:none}:root{--gap:40px;--w:70px;--h:100px}body{background-color:green}main{justify-content:center;align-items:center;gap:var(--gap);min-height:100vh;display:flex}.field>li{margin-top:5px}.field>li>ul{justify-content:center;gap:var(--gap);display:flex}.location{flex-direction:column;gap:10px;display:flex}.location+.location{order:3}.card{width:var(--w);height:var(--h);background-image:url(/deck1.png);background-repeat:no-repeat;position:relative}.card.off{background-image:none}.card.place{opacity:.2}.card.place.filled{opacity:1}.card span{cursor:pointer;background-color:#fff;border-radius:50%;padding:5px;position:absolute;top:-2px;right:-10px;box-shadow:2px 2px 4px #3d691080}.card.on:after{content:" ";box-sizing:border-box;opacity:.5;background-color:#ff0;border-radius:3px;width:100%;height:100%;display:block;position:absolute;top:0;left:0}dialog{text-align:center;border-radius:20px;max-width:70%;margin-top:50px;margin-left:auto;margin-right:auto;padding:10px}dialog p{text-align:justify;margin-top:10px}dialog ul{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;display:flex}dialog button{margin-top:20px;padding:5px}.help{padding:10px;position:fixed;top:10px;right:10px}.state{position:fixed;top:10px;left:10px}.state button{padding:10px}