* { box-sizing:border-box;font-family:sans-serif; }
html, body { padding:0;margin:0;background:#000f1a; }
body { padding:2rem;background:url("bg.png") repeat; }

main { width:100%;height:100%; }
.controller { position:relative;width:fit-content;overflow: hidden;width:100%;height:auto;aspect-ratio: 2/1;max-width:1000px;margin:0 auto; }


.spinner { aspect-ratio:1/1;width:100%;border-radius:100rem;background:#ebeff0;position: relative;overflow:hidden;transform:rotate(-90deg); }

.spinner-holder { pointer-events:none;height:100%;overflow:hidden;position:relative;width:100%;margin:0 auto; }
.spinner-holder::after { aspect-ratio:1/1;width:15%;min-width:80px;background:#000f1a;content:"";display:block;top:100%;left:50%;position:absolute;z-index:2;transform:translate(-50%, -50%);border-radius:100%;background:#000f1a url("bg.png") repeat; }

.wedge { position: absolute;width:9%;height:50%;
  inset: 0;top:50%;left:50%;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);transform-origin: 0% 0%;text-align:center;padding:2rem 0;display:flex;align-items:flex-start;justify-content: center;font-size:1.6rem;font-weight:bold; }

.wedge-2 {transform: rotate(-20deg) translate(-50%, -100%);background:#f8bb00; }
.wedge-3 {transform: rotate(-10deg) translate(-50%, -100%);background:#fe662c; }
.wedge-4 {transform: rotate(0deg) translate(-50%, -100%);background:#90b6c5; }
.wedge-5 {transform: rotate(10deg) translate(-50%, -100%);background:#fe662c; }
.wedge-6 {transform: rotate(20deg) translate(-50%, -100%);background:#f8bb00; }



.spinner-cover { position:absolute;width:100%;height:100%;background:#87ccba;top:0;left:0;border-top-right-radius:100rem;border-top-left-radius:100rem;transform:rotate(0deg);transform-origin:50% 100%;transition:all 0.8s ease-in-out; }
.spinner-cover.open { transform:rotate(180deg); }


.controls { width:100%; padding:2rem; text-align:center; }


.dial-holder { position: absolute;top:100%;left:0;width:100%;height:100%;z-index:4;border-top-right-radius:100rem;border-top-left-radius:100rem;transition:top 0.4s ease-in-out; }
.dial-holder.visible { top:0%; }
.dial-holder.notouch { pointer-events:none; }

.dial { position: absolute;top:100%;left:50%;transform:translate(-50%, -50%);background:red;border-radius:100rem;width:15%;aspect-ratio:1/1;min-width:80px; }
.dial-stick { width:10px;height:100%;background:red;position:absolute;top:0;left:50%;transform: translateX(-50%) rotate(0deg);transform-origin:50% 100%; }

.hidden { display:none; }

button { background:transparent;border-radius:3rem;border:2px solid #fff;color:#fff;font-size:1.5rem;padding:0.5rem 2rem; }
button:hover { color:#000;background:#fff; }

.team-flex { width:100%;display:flex;width:100%;justify-content:space-between;align-items:center;margin-bottom:1rem; }
.team-flex > div { display:flex;color:#fff;align-items:center;font-size:1.5rem;gap:1rem;padding:1rem; }

.team-box { border:3px solid #fff; flex-wrap:wrap;text-align:center; }
.team-1 { border-color:#f8bb00; }
.team-2 { border-color:#fe662c; }
.team-box > div { width:100%; }


.score-box { background:orange;position:absolute;top:150%;left:50%;width:calc(100% - 2rem);max-width:400px;transform:translate(-50%, -50%);padding:1rem;border-radius:1rem;text-align:center;font-size:1.8rem;transition:all 0.4s ease-in-out;border:5px solid #fff;box-shadow:5px 5px 5px rgba(0,0,0,0.3);z-index:10; }
.score-box > div:first-child { margin-bottom:1rem; }
.score-box.visible { top:50%; }