*{box-sizing:border-box}html,body{margin:0;background:#0b2424;color:#fff;font-family:system-ui,-apple-system,sans-serif;overscroll-behavior:none}body{background:radial-gradient(ellipse at 50% 0,#225048,#0b2424 65%)}main{max-width:800px;margin:auto;padding:16px 16px max(16px,env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center;gap:12px}small{font-size:.75rem;letter-spacing:.06em;color:#d4b477}h1{font-size:clamp(1.6rem,5vw,2.5rem);margin:2px 0 10px;letter-spacing:.035em}nav{display:flex;gap:6px}button,select{font:inherit}button{color:#fff;border:1px solid #ffffff40;border-radius:9px;padding:10px 12px;background:#ffffff09;cursor:pointer}button:hover{background:#ffffff20}button:focus-visible,select:focus-visible{outline:3px solid #f6c96c}button:disabled{opacity:.5}.dashboard{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:10px;border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25;text-align:center}.dashboard span{display:block;font-size:.75rem;letter-spacing:.08em;color:#e4d5b7}.dashboard strong{font-size:1.35rem}.dashboard .clock strong{font-size:2rem;font-variant-numeric:tabular-nums}.clock small{display:block;font-size:.75rem}.scores{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;padding:7px 0;font-size:.875rem}.score{padding:4px 8px;border-radius:7px;background:#ffffff09;border:1px solid transparent}.score.active{border-color:#e9c57a;background:#ffffff13}.arena{position:relative;width:min(100%,650px,calc((100svh - 270px)*.72));aspect-ratio:720/1000;margin:auto;min-width:230px}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.countdown{position:absolute;inset:30% 0 auto;text-align:center;font-size:4rem;font-weight:800;text-shadow:0 3px 20px #000;background:#0b2424bb;padding:20px 0;pointer-events:none}.countdown[hidden]{display:none}#message{font-size:.875rem;line-height:1.4;text-align:center;margin:6px auto;max-width:55ch}.actions{display:flex;justify-content:center;gap:20px;align-items:center}.sound{font-size:.875rem}footer{text-align:center;font-size:.875rem;color:#e7d6b2;margin-top:10px;line-height:1.6}dialog{color:#fff;background:#123831;border:1px solid #d4b477;border-radius:18px;padding:24px;width:min(94vw,460px);max-height:90svh;overflow:auto}dialog::backdrop{background:#031717bb}dialog h2{font-size:1.6rem;margin:6px 0 14px}dialog p,li{font-size:1rem;line-height:1.55}li{margin-bottom:8px}dialog label{display:block;margin:14px 0}select{display:block;width:100%;margin-top:6px;padding:12px;background:#0b2424;color:#fff;border:1px solid #ffffff55;border-radius:9px}.primary{width:100%;color:#162f2c;background:#ecc575;font-weight:700;border:0;padding:14px;margin-top:14px}.primary:hover{background:#f5d795}.rank{display:flex;justify-content:space-between;padding:9px;border-bottom:1px solid #ffffff22}@media(max-width:500px){main{padding:10px}nav button{font-size:.875rem;padding:8px}small{font-size:.7rem}.dashboard{padding:5px}.dashboard strong{font-size:1.1rem}.dashboard .clock strong{font-size:1.7rem}.arena{width:min(100%,calc((100svh - 255px)*.72))}}

/* Backbox sits in the open space behind the rounded head of the board. */
.arena .dashboard{position:absolute;z-index:1;top:0;left:2%;width:96%;padding:6px 4px;border:2px solid #c8a25c;border-radius:12px;background:linear-gradient(#1b2929,#060f10);box-shadow:0 4px 0 #050d0d,0 8px 22px #0008;pointer-events:none}
.arena .dashboard>div+div{border-left:1px solid #ffffff25}
.arena .dashboard span{font-size:.75rem;line-height:1.2;letter-spacing:.025em;color:#e9d5ae}
.arena .dashboard strong{font-size:1rem;line-height:1.45;font-variant-numeric:tabular-nums;text-shadow:0 0 12px currentColor}
.arena .dashboard .clock strong{font-size:1.35rem;line-height:1.1;color:#ffcf71}
.arena .dashboard .clock small{display:none}
#points{color:#b5ffbf}
.arena{width:min(100%,650px,calc((100svh - 215px)*.72))}
@media(max-width:500px){.arena{width:min(100%,calc((100svh - 200px)*.72))}}

html{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:fixed;inset:0;height:100%;overflow:hidden;overscroll-behavior:none}
main{height:100dvh;width:100%;display:flex;flex-direction:column;overflow:hidden;padding:10px 10px max(10px,env(safe-area-inset-bottom));gap:3px}
header,.scores,.status,.dashboard,#message,.actions,footer,.controls{flex-shrink:0}
.arena{flex:1;position:relative;min-height:0;min-width:0;width:100%;max-width:none;aspect-ratio:auto;margin:0;overflow:hidden}
.arena canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%;width:auto;height:auto;touch-action:none;-webkit-user-select:none}
header h1{margin-bottom:4px}header small{letter-spacing:.04em}#message{font-size:.875rem;margin:3px 0;min-height:0}
footer{font-size:.75rem;line-height:1.4;margin-top:3px}.scores{margin:3px 0;padding:0}.status{margin:3px 0}
dialog{overflow:auto;overscroll-behavior:contain;touch-action:pan-y}dialog label{margin:10px 0}
.controls{margin:3px auto;max-height:130px;overflow:auto;touch-action:pan-y}

main>.dashboard{width:min(100%,500px);align-self:center;padding:5px;border:2px solid #c8a25c;border-radius:12px;background:linear-gradient(#1b2929,#060f10);box-shadow:0 3px 0 #050d0d;pointer-events:none}
main>.dashboard>div+div{border-left:1px solid #ffffff25}
main>.dashboard span{font-size:.75rem;line-height:1.2;letter-spacing:.02em;color:#e9d5ae}
main>.dashboard strong{font-size:1rem;line-height:1.3;font-variant-numeric:tabular-nums;text-shadow:0 0 12px currentColor}
main>.dashboard .clock strong{font-size:1.35rem;line-height:1.1;color:#ffcf71}
main>.dashboard .clock small{display:none}

header{gap:8px}header h1{font-size:clamp(1.4rem,6vw,2rem);line-height:1.15}header small{font-size:.75rem;letter-spacing:.025em}nav button{padding:7px 9px;font-size:.875rem;white-space:nowrap}
.actions button{padding:6px 12px;font-size:.875rem}.scores{gap:4px}.score{padding:3px 7px}
#message{line-height:1.25;max-width:42ch}
@media(max-width:520px){main{gap:2px;padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}footer{line-height:1.25}footer small{font-size:.7rem;letter-spacing:0}}