@font-face{font-family:Patrick;src:url('../fonts/patrick-hand.ttf') format('truetype');font-display:swap}
:root{--paper:#f7f4e9;--ink:#2539a2;--dark:#172867;--red:#c44350;--line:#2539a226;font:16px 'Trebuchet MS',system-ui,sans-serif;color:var(--dark);background:var(--paper);color-scheme:light}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}button,select,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:wait;opacity:.55}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--red);outline-offset:3px}header{height:74px;display:flex;align-items:center;gap:24px;padding:12px 30px;border-bottom:1px solid var(--line);position:relative;z-index:2;background:var(--paper)}.logo{font:44px/1 Patrick,cursive;transform:rotate(-7deg);text-decoration:none;border-bottom:2px solid var(--ink)}.logo span{color:var(--red)}.edition{font-size:12px;letter-spacing:2px}nav{margin-left:auto;display:flex;gap:20px}nav button,.view-controls button{border:0;background:var(--paper);padding:8px 0;font-size:14px;text-decoration:underline;text-underline-offset:5px}
.arena{position:fixed;top:74px;bottom:0;left:365px;right:0;background:repeating-linear-gradient(0deg,transparent 0 31px,#7095c215 31px 32px)}#court{display:block;width:100%;height:100%;touch-action:none}.annotation{position:absolute;top:8%;right:6%;font:25px/1.1 Patrick,cursive;color:var(--red);transform:rotate(7deg);pointer-events:none}.panel{position:relative;width:365px;padding:32px 30px 22px;min-height:calc(100dvh - 74px);border-right:1px solid var(--line);background:var(--paper)}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:bold}h1{font:75px/.8 Patrick,cursive;color:var(--ink);transform:rotate(-3deg);margin:30px 0}h1 span{font-size:.72em}h1 i{font-style:normal;color:var(--red)}.intro{font:26px Patrick,cursive;margin:30px 0}label{display:block;font-size:14px;margin:16px 0 7px}select{width:100%;padding:9px 0;border:0;border-bottom:1px solid #9296b0;background:transparent;font-size:14px}input[type=range]{width:100%;accent-color:var(--ink);height:28px;margin:0}output{float:right;font-variant-numeric:tabular-nums}.primary,.secondary{display:block;text-align:center;width:100%;text-decoration:none;min-height:46px;padding:10px 14px;border:1px solid var(--ink);background:var(--paper);margin:14px 0;font:22px Patrick,cursive}.primary{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--paper),4px 4px 0 var(--ink);border-radius:3px 6px 2px 5px}.primary:hover{filter:brightness(1.15)}.secondary{font-size:18px}.small,.credit{font-size:13px;line-height:1.5;color:#626a85}.credit{margin-top:28px}.scoreboard{display:flex;align-items:center;justify-content:space-between;border-block:1px solid var(--ink);padding:9px 0;color:var(--ink)}.scoreboard div{display:grid;text-align:center;font-size:12px;letter-spacing:1px}.scoreboard b{font:44px/1 Patrick,cursive}.scoreboard small{font-size:12px}.red{color:var(--red)}.end-info{display:flex;justify-content:space-between;font-size:13px;margin-top:12px}.status{font:24px/1.1 Patrick,cursive;min-height:27px;margin:14px 0}fieldset{border:0;padding:0;margin:0}legend{font-size:12px;color:#626a85}fieldset:disabled{opacity:.5}.view-controls{position:fixed;bottom:14px;left:390px;right:25px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f7f4e9de;padding:5px 12px}.view-controls span{font-size:12px}.playing h1{font-size:49px;margin:22px 0}.playing .panel{padding-top:15px}.playing .annotation{display:none}dialog{position:fixed;width:min(570px,calc(100vw - 32px));max-height:86dvh;overflow:auto;background:var(--paper);color:var(--dark);border:2px solid var(--ink);padding:30px;box-shadow:6px 6px 0 #2539a244}dialog::backdrop{background:#eeeaddc0;backdrop-filter:blur(4px)}dialog h2{font:44px/1 Patrick,cursive;margin:15px 0 24px}dialog p,dialog li{line-height:1.55}dialog li{margin:12px 0}dialog ol{padding-left:22px}.close{position:absolute;right:13px;top:8px;font-size:28px;border:0;background:none}.result-score{font:68px Patrick,cursive;margin:10px 0}#error{position:fixed;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:min(430px,90vw);background:var(--paper);padding:28px;border:2px solid var(--red)}
@media(max-width:950px){.panel{width:310px;padding-inline:20px}.arena{left:310px}.view-controls{left:325px}.view-controls span{display:none}.edition{display:none}.annotation{font-size:20px}.playing h1{font-size:43px}}
@media(max-width:650px){header{height:62px;padding:10px 16px;gap:12px}nav{gap:12px}nav button{font-size:13px}.logo{font-size:36px}.arena{position:relative;inset:auto;height:43dvh;width:100%}.annotation{top:10%;right:5%;font-size:18px}.panel{width:100%;min-height:auto;border:0;border-top:1px solid var(--line);padding:18px 22px}h1{font-size:55px;margin:18px 0}.intro{margin:12px 0}.view-controls{position:absolute;top:65px;bottom:auto;left:auto;right:12px;padding:0 9px}.playing .panel h1,.playing .panel>.eyebrow{display:none}.scoreboard{padding:7px 0}.scoreboard div{grid-template-columns:auto auto;align-items:center;gap:10px}.scoreboard b{font-size:32px}.end-info{margin-top:8px}.status{font-size:24px;margin:10px 0}fieldset{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px}fieldset legend{display:none}fieldset label{grid-column:1/-1;margin:7px 0 2px}fieldset select,fieldset input{grid-column:1/-1}fieldset .primary,fieldset .secondary{margin:7px 0}fieldset .secondary{font-size:16px}.credit{margin-top:15px}dialog{padding:25px}.playing .arena{height:42dvh}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}