@property --target-hue{syntax: "<number>"; inherits: true; initial-value: 0;}:root{--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--target-hue: 0}*{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));user-select:none;font-size:.25em;mix-blend-mode:difference}.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}}.player-status{font-size:.1em;transition:transform var(--refresh-rate) linear;fill:oklch(from currentColor calc(l + .15) c h)}.trailblaze{fill:oklch(from currentColor l c h / .25);background:none;stroke:oklch(from currentColor l c h / .25);stroke-linecap:round}.bounty-target{--stroke-dashoffset-start: 0;--stroke-dashoffset-end: 0;stroke:red;stroke-linecap:round;fill:none;fill:url(#bounty-target-fill);animation:6s linear infinite stroke-rotate;transition:transform var(--refresh-rate) linear}.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}}.target-group{transition:opacity .15s ease-in-out;opacity:1}.target-value{font-size:.1em;fill:#fff;mix-blend-mode:difference;transition:transform var(--refresh-rate) linear}.target-shield{--stroke-dashoffset-start: 0;--stroke-dashoffset-end: 0;stroke:#fff;stroke-linecap:round;fill:none;animation:2s linear infinite stroke-rotate;transition:transform var(--refresh-rate) linear}.laser{fill:oklch(1 1 30 / 0);stroke:oklch(1 1 30 / .15);stroke-width:.25;transition:fill .15s ease-in;&.active{fill:oklch(1 1 30 / .5)}}.wall{--hue: min( calc(var(--target-hue) - 180), max(calc(var(--target-hue) + 180), calc(var(--target-hue) - 360)) );filter:drop-shadow(0 0 1px oklch(.8 .15 var(--hue)))}@keyframes stroke-rotate{0%{stroke-dashoffset:var(--stroke-dashoffset-start)}to{stroke-dashoffset:var(--stroke-dashoffset-end)}}@keyframes hue-rotate{0%{--target-hue: 0}to{--target-hue: 359}}.particle-spawner{fill:none;color:transparent;opacity:0}.particle{fill:currentColor;stroke:none}