@property --target-hue{syntax: "<number>"; inherits: false; initial-value: 0;}:root{--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace}*{box-sizing:border-box}html{font-size:100%}body{margin:0;background:#000;color:#fff;font-family:var(--font-mono);font-weight:400}#game{display:grid;grid-template-columns:100dvh 1fr;height:100dvh;overflow:hidden;@media(width<=100dvh){grid-template-columns:1fr;grid-template-rows:1fr 100dvw;>:first-child{order:1}}}.wrapper{position:relative}.join{appearance:none;position:absolute;font-size:2em;color:#fff;font-style:italic;background:#0003;inset:0;border:0;user-select:none;font-family:var(--font-mono);opacity:1;transition:opacity .15s ease-out,display .15s allow-discrete;&.hidden{opacity:0;display:none}@starting-style{opacity:0}span{position:absolute;bottom:2em;left:0;right:0}}.sidebar{padding:1em;gap:1em;overflow:hidden;display:flex;flex-direction:column;align-content:flex-start;position:relative;opacity:1;transition:opacity 50ms ease-out 50ms;@starting-style{opacity:0}>*{margin:0;flex:1;overflow:hidden}h2{font-weight:300;display:flex;justify-content:space-between;align-items:center;margin-block:0}details{&[open] svg{transform:rotate(90deg)}>:not(summary){margin-inline-start:1em}&:not(:last-child){padding-block-end:.25em;border-block-end:1px solid oklch(.35 0 0);flex:0 0 auto}&:has(.scoreboard){display:flex;flex-direction:column}}summary{display:block;user-select:none;cursor:pointer;margin-block-end:1em;svg{width:1em;height:1em;transition:transform .15s ease-out}}.modifiers{dt:not(:first-child){margin-block-start:1em}dd{margin-inline-start:0}}small,dd{color:#aaa;font-size:.9rem;font-weight:400}.scoreboard{overflow-y:scroll;scroll-padding-block:10em;scrollbar-width:none}.scores{display:grid;grid-template-columns:5ch 1fr;padding-block-end:2em;>*{overflow-anchor:none}}.score{padding-block:.5em;padding-inline-start:.5em}.name{padding-block:.5em;padding-inline-end:.5em}[data-is-player]{background:oklch(from currentColor l c h / .15)}}text{--text-opacity: .5;fill:oklch(.8 .15 var(--target-hue) / var(--text-opacity));animation:12s linear infinite hue-rotate;user-select:none;font-size:.25em}.countdown{animation:none}.title{--text-opacity: .1;text-transform:uppercase;text-shadow:4px 4px oklch(.8 .15 var(--target-hue) / .15);font-size:1em}.board{box-sizing:border-box;top:0;margin:0 auto;display:block;box-shadow:inset 0 0 min(3dvh,3dvw) 0 oklch(.8 .15 var(--target-hue));animation:12s linear infinite hue-rotate}.ball{transition:transform var(--refresh-rate) linear;fill:currentColor;stroke-width:.25;opacity:.5;&[data-ref=_player]{stroke:oklch(from currentColor calc(l + .15) c h);opacity:1}}.target{fill:none;stroke-width:.5;stroke:oklch(.8 .15 var(--target-hue));animation:3s linear infinite hue-rotate;transition:transform var(--refresh-rate) linear;&:nth-of-type(2){animation-delay:2.5s;animation-duration:2.3s}&:nth-of-type(3){animation-delay:.75s;animation-duration:3.6s}&:nth-of-type(4){animation-delay:1.7s;animation-duration:2.9s}&:nth-of-type(5){animation-delay:.9s}}@keyframes hue-rotate{0%{--target-hue: 0}to{--target-hue: 359}}.particle-spawner{fill:none;color:transparent;opacity:0}.particle{fill:currentColor;stroke:none}