.five-controls,#five-game form{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem}
#five-game label{display:grid;gap:.25rem;min-width:0;max-width:100%}
#five-game select{max-width:100%;min-height:44px;font:inherit}
#five-game time{display:block;margin-top:1rem;font-size:1.3rem;font-variant-numeric:tabular-nums}
.five-board{
  --court-line:#a6c4b9;
  position:relative;isolation:isolate;min-height:300px;aspect-ratio:1.45;
  margin:1rem 0;overflow:hidden;border:.65rem solid #142c28;border-radius:1rem;
  background:#20463c;color:#fff;
  box-shadow:inset 0 0 0 2px var(--court-line),0 .3rem 1rem #0003;
}
.five-board::before,.five-board::after,.five-lines,.five-lines::before,.five-lines::after{
  position:absolute;pointer-events:none;content:"";border:2px solid var(--court-line);
}
.five-board::before{inset:0 8% auto;height:74%;border-top:0;border-radius:0 0 50% 50% / 0 0 88% 88%}
.five-board::after{left:38%;right:38%;bottom:-18%;height:30%;border-radius:50%}
.five-lines{inset:0 34% auto;height:46%;border-top:0}
.five-lines::before{left:0;right:0;bottom:-35%;height:70%;border-radius:50%}
.five-lines::after{
  left:40%;right:40%;top:12%;aspect-ratio:1;border-radius:50%;border-color:#f5c477;
  box-shadow:0 -8px 0 -4px #f5c477;
}
.five-court{
  position:absolute;inset:0;z-index:1;margin:0!important;padding:0!important;
  list-style:none;text-align:center;
}
.five-court li{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:grid;justify-items:center;gap:.2rem;width:29%;margin:0!important;
  font-size:clamp(.72rem,2.6vw,.95rem);line-height:1.15;
}
.five-court li:nth-child(1){--x:50%;--y:80%}
.five-court li:nth-child(2){--x:19%;--y:55%}
.five-court li:nth-child(3){--x:81%;--y:55%}
.five-court li:nth-child(4){--x:26%;--y:25%}
.five-court li:nth-child(5){--x:62%;--y:30%}
.five-court li::before{
  content:attr(data-slot);display:grid;place-items:center;width:2.15rem;aspect-ratio:1;
  border:2px solid #d0e5da;border-radius:50%;background:#193831;color:#fff;font-weight:800;
  box-shadow:0 2px 6px #0005;
}
.five-court li[data-result="found"]::before{background:#b9ecc7;color:#143b22;border-color:#b9ecc7}
.five-court li[data-result="revealed"]::before{background:#f5c477;color:#422911;border-color:#f5c477}
.five-court li span:not(:empty){
  padding:.26rem .45rem;border-radius:.35rem;background:#132f29;overflow-wrap:anywhere;
}
.five-board{width:100%;box-sizing:border-box}
#five-game .five-controls label,#five-game form label{width:min(100%,18rem)}
#five-game select{width:100%;min-width:0}