:root{font-family:Figtree,sans-serif;font-optical-sizing:auto;font-weight:400;color:#fff}*{padding:0;margin:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}main{height:100svh;width:100svw;background-color:#8d9dbd;display:flex;justify-content:center;align-items:center}#container{aspect-ratio:5 / 11;width:100%;max-width:300px;max-height:600px;display:flex;flex-direction:column;gap:10px}#instruction{text-align:center}#winner{width:100%;height:100%;background-color:#fff;border:5px solid black;border-radius:5px;flex-direction:column;justify-content:center;align-items:center}#players{width:100%;height:100%;background-color:#fff;border:5px solid black;border-radius:5px;padding:15px;flex-direction:column;justify-content:center;gap:20px}.input-container{display:flex;justify-content:space-between;align-items:center;gap:3px}p{color:#000;font-size:1rem;font-weight:500;flex:1}input{all:unset;min-height:23px;border:1px solid black;border-radius:5px;color:#000;text-align:center;padding:1px 3px;flex:3}#done{flex:none;height:50px;background-color:#8d9dbd}h2{color:#34a25c;font-size:2rem}h1{color:#000;font-size:2rem}#court{width:100%;height:100%;border:5px solid white;background-color:#34a25c;cursor:pointer;flex-direction:column}#top,#bottom{width:100%;height:50%;display:flex;flex-direction:column;position:relative}#top{border-bottom:2.5px solid white}#bottom{border-top:2.5px solid white}#top:after,#bottom:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff80;opacity:0;transition:opacity .3s ease}@media (hover: hover) and (pointer: fine){#top:hover:after,#bottom:hover:after{opacity:1}}#top:active:after,#bottom:active:after{opacity:1;background-color:#ffffffb3;transition:opacity .1s ease}#kitchen1{width:100%;flex:7;background-color:#4444f0;border-top:5px solid white;display:flex;justify-content:center;align-items:center}#kitchen2{width:100%;flex:7;background-color:#4444f0;border-bottom:5px solid white;display:flex;justify-content:center;align-items:center}.services{width:100%;height:100%;display:flex;flex:15}.service1{width:50%;height:100%;border-right:2.5px solid white;display:flex;justify-content:center;align-items:center}.service2{width:50%;height:100%;border-left:2.5px solid white;display:flex;justify-content:center;align-items:center}footer{width:100%;height:50px;display:flex;gap:5px}#score{background-color:#fff;border-radius:5px;color:#000;display:grid;place-items:center;font-size:2rem;flex:2}button{all:unset;background-color:#fff;text-align:center;color:#000;font-weight:600;border-radius:5px;flex:1;cursor:pointer;transition:background-color .3s ease}@media (hover: hover) and (pointer: fine){button:hover,#done:hover{background-color:#d3d3d3}}button:active{background-color:#b0ffb9;transition:background-color .1s ease}