:root{--ink:#1a1428;--cream:#fff6dc;--yellow:#ffd23f;--red:#f23b2e;--blue:#2f7fe0;--green:#5fc84a;--font:"Arial Rounded MT Bold", "Helvetica Rounded", "Nunito", system-ui, "Helvetica Neue", Arial, sans-serif}[hidden]{display:none!important}html,body{height:100%;font-family:var(--font);color:var(--ink);overscroll-behavior:none;background:#000;margin:0;font-weight:900;overflow:hidden}canvas#game{touch-action:none;width:100vw;height:100dvh;display:block}#debug{color:#fff;white-space:pre;pointer-events:none;background:#0009;padding:.4rem .6rem;font:12px/1.4 ui-monospace,Menlo,monospace;position:fixed;bottom:.5rem;left:.5rem}#fatal{color:#fff;background:#200;place-items:center;padding:2rem;font-family:system-ui,sans-serif;font-size:1.2rem;display:grid;position:fixed;inset:0}#flash{pointer-events:none;opacity:0;background:radial-gradient(#b4000000 40%,#b40000 100%);position:fixed;inset:0}#hud{pointer-events:none;--timer-size:clamp(1.8rem, 7vmin, 3rem);--corner-size:clamp(.95rem, 3.4vmin, 1.5rem);--corner-top:max(1rem, env(safe-area-inset-top));position:fixed;inset:0}.box{background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;border-radius:14px;padding:.3em .75em}.corner{top:var(--corner-top);font-size:var(--corner-size);position:absolute}.top-left{left:max(1.5rem, env(safe-area-inset-left))}.top-center{font-size:var(--timer-size);color:var(--yellow);background:var(--blue);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);padding:.15em .6em;left:50%;transform:translate(-50%)rotate(-2deg)}@media (orientation:portrait){.top-left{top:calc(var(--corner-top) + var(--timer-size) * 2 + 4px)}}#fps{left:max(1.5rem, env(safe-area-inset-left));top:calc(var(--corner-top) + var(--corner-size) * 2.2 + 8px);font-variant-numeric:tabular-nums;font-size:clamp(.8rem,2.6vmin,1.1rem);position:absolute}@media (orientation:portrait){#fps{top:calc(var(--corner-top) + var(--timer-size) * 2 + 4px + var(--corner-size) * 2.2 + 8px)}}.top-right{right:max(1.5rem, env(safe-area-inset-right));text-align:right}.top-right .label{color:var(--ink);letter-spacing:.15em;opacity:.7;font-size:.6em}#score{color:var(--yellow);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;font-size:1.25em;line-height:1.1}#target{top:calc(var(--corner-top) + 6.2rem);font-size:calc(var(--corner-size) * .75);min-width:5.5rem;transition:opacity .4s}body.touch #target{top:calc(var(--corner-top) + 4.4rem);min-width:3.5rem}#target .bar{border:2px solid var(--ink);background:var(--cream);border-radius:999px;height:.4rem;margin-top:.25rem;overflow:hidden}#target .bar span{background:var(--red);width:0;height:100%;display:block}#target.passed{background:var(--green)}#target.passed .bar span{background:var(--ink)}#timer.urgent{color:var(--red);background:var(--cream);animation:.5s ease-in-out infinite alternate throb}#combo{color:var(--green);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;min-height:clamp(.8rem,3vmin,1.1rem);font-size:clamp(.8rem,3vmin,1.1rem)}#speedo{left:max(1.5rem, env(safe-area-inset-left));bottom:max(1rem, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:.35em;font-size:clamp(.75rem,2.6vmin,1rem);display:flex;position:absolute}#speedo-dial{width:clamp(80px,19vmin,136px);height:clamp(80px,19vmin,136px);filter:drop-shadow(5px 5px 0 var(--ink))}#speedo-readout{background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.05em;border-radius:999px;padding:.2em .8em}body.touch #speedo{left:50%;bottom:max(2vmin, env(safe-area-inset-bottom));transform:translate(-50%)}body.touch #speedo-dial{width:15vmin;height:15vmin}#callout{text-align:center;letter-spacing:.02em;width:100%;color:var(--yellow);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink);opacity:0;font-size:clamp(2.4rem,12vmin,5.5rem);font-weight:900;transition:opacity .1s,transform .1s;position:absolute;top:30%;transform:scale(.6)}#callout.show{opacity:1;transform:scale(1)rotate(-4deg)}#callout-points{color:var(--cream);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);font-size:.55em}#screen{text-align:center;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#1a142859;place-items:center;display:grid;position:fixed;inset:0}#screen:empty{display:none}#screen>div{background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);box-sizing:border-box;border-radius:24px;max-width:min(92vw,46rem);padding:clamp(.6rem,2vmin,1.4rem) clamp(1.2rem,4vmin,2.6rem) clamp(1rem,3vmin,1.8rem)}#screen h1{letter-spacing:.02em;color:var(--red);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink);margin:0 0 .1em;font-size:clamp(2.4rem,12vmin,5.5rem);font-weight:900;line-height:1;transform:rotate(-2deg)}#screen h1.logo{text-shadow:none;-webkit-text-stroke:0;margin:0 0 .2rem;transform:none}#screen h1.logo img{object-fit:contain;width:min(88vw,36rem);max-height:18vmin;margin:0 auto;display:block}body.touch #screen h1.logo img{max-height:13vmin}#screen p{max-width:32rem;margin:.5rem auto .2rem;padding:0 .5rem;font-size:clamp(1rem,3vmin,1.2rem);font-weight:700;line-height:1.45}#seed-label{letter-spacing:.06em;color:var(--blue);margin:.2rem auto 0;font-size:clamp(.85rem,2.6vmin,1.05rem);font-weight:900}#screen #arrival-target{letter-spacing:.04em;color:var(--red);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);margin:.2rem auto 0;font-size:clamp(1.5rem,6vmin,2.4rem);font-weight:900;line-height:1.1}#screen #arrival-sub{letter-spacing:.06em;color:var(--blue);margin:.1rem auto 0;font-size:clamp(.8rem,2.4vmin,1rem);font-weight:900}#screen #arrival-rules{text-wrap:balance;max-width:40rem}#screen ul.keys{flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;margin:clamp(.4rem,2vmin,.9rem) auto;padding:0;list-style:none;display:flex}#screen ul.keys li{align-items:center;gap:.45em;font-size:clamp(.9rem,2.8vmin,1.1rem);font-weight:700;display:flex}#screen ul.keys .key{background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);white-space:nowrap;border-radius:8px;padding:.15em .6em}#screen p.verdict{letter-spacing:.06em;color:var(--red);margin:0 auto .2rem;font-size:clamp(.95rem,3vmin,1.2rem);font-weight:900}#screen table{border-collapse:separate;border-spacing:.6rem .35rem;margin:clamp(.4rem,2vmin,1rem) auto}#screen td{text-align:left;vertical-align:middle;padding:.15em .6em;font-size:clamp(1rem,3vmin,1.2rem);font-weight:700;line-height:1.3}#screen td:first-child{text-align:center;background:var(--yellow);border:2px solid var(--ink);min-width:6.5em;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:8px}body.touch #screen td:first-child{min-width:7.5em}#screen .blink{letter-spacing:.06em;color:var(--cream);background:var(--red);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:999px;margin-top:.8rem;padding:.35em 1.3em;font-size:clamp(1.05rem,4vmin,1.5rem);font-weight:900;animation:.7s ease-in-out infinite alternate bob;display:inline-block}#install-hint{background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:.3em 1em;font-size:clamp(.8rem,2.4vmin,1rem);display:inline-block}#screen button{font:inherit;letter-spacing:.04em;cursor:pointer;color:var(--ink);background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:999px;margin-top:.5rem;padding:.5rem 1.4rem;font-size:1rem;font-weight:900}#screen button:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}body.touch #screen button{min-height:44px;padding:.6rem 1.6rem}#screen .actions{flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.3rem;display:flex}#screen .actions button,body.touch #screen .actions{margin-top:0}body.touch #screen .actions:has(>:nth-child(5)){gap:.4rem}body.touch #screen .actions:has(>:nth-child(5)) button{padding:.6rem .85rem;font-size:.95rem}body.touch #screen .blink{margin-top:.4rem}body.touch #screen p:not(.blink){margin:.3rem auto .1rem}body.touch #intro{display:none}@media (height<=760px){#intro{display:none}}#screen .card h1,#board h1{margin-bottom:.2em;font-size:clamp(2rem,9vmin,4rem)}#settings .settings-rows{gap:clamp(.3rem,1.5vmin,.6rem);min-width:min(22rem,78vw);margin:0 auto clamp(.5rem,2vmin,1rem);display:grid}#settings .setting-row{text-align:left;grid-template-columns:1fr auto;align-items:center;gap:1rem;font-size:clamp(1rem,3vmin,1.2rem);font-weight:700;display:grid}#settings .switch{box-sizing:border-box;background:var(--cream);border:3px solid var(--ink);width:3.4em;height:1.8em;box-shadow:3px 3px 0 var(--ink);border-radius:999px;flex-direction:row-reverse;justify-content:space-between;align-items:center;margin:0;padding:0 .3em;font-size:1em;display:flex;position:relative}#settings .switch[aria-checked=true]{background:var(--green);flex-direction:row}#settings .switch .knob{aspect-ratio:1;background:var(--ink);border-radius:50%;height:calc(100% - .3em);display:block}#settings .switch .switch-text{letter-spacing:.05em;font-size:.6em;line-height:1}body.touch #settings .switch{width:83.1111px;height:44px;padding:0 .35em}#settings .segments{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--cream);border-radius:999px;display:inline-flex;overflow:hidden}#settings .segments button{border:0;border-left:3px solid var(--ink);box-shadow:none;background:var(--cream);border-radius:0;margin:0;padding:.35em .8em;font-size:.8em}#settings .segments button:first-child{border-left:0}#settings .segments button[aria-pressed=true]{background:var(--yellow)}#settings .segments button:active{box-shadow:none;transform:none}body.touch #settings .segments button{min-height:44px;padding:.35em .9em}#screen .tabs{justify-content:center;gap:.4rem;margin:.2rem 0 .6rem;display:flex}#screen .tabs button[aria-pressed=true]{background:var(--yellow)}#screen .tabs button[aria-pressed=false]{background:var(--cream)}#screen #share{color:var(--cream);background:var(--blue);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}#screen .tabs #share{margin-left:1.2rem}#screen .tries{margin-top:.3rem;font-size:clamp(.8rem,2.4vmin,1rem)}#board .scores{border-spacing:.4rem .15rem;margin:.2rem auto}#board .scores th{letter-spacing:.05em;text-transform:uppercase;padding:0 .6em;font-size:clamp(.8rem,2.4vmin,.95rem)}#board .scores td{font-variant-numeric:tabular-nums;padding:.05em .6em;font-size:clamp(.95rem,2.8vmin,1.1rem)}#board .scores td:first-child,body.touch #board .scores td:first-child{min-width:1.6em}#board .scores td:nth-child(3),#board .scores td:nth-child(4){text-align:right}#board .scores tr.you td{color:var(--red)}#board .scores tr.you td:first-child{background:var(--red);color:var(--cream)}body.touch #board .scores{border-spacing:.4rem .05rem}body.touch #board .scores td{padding:0 .5em;font-size:.85rem}body.touch #board h1{margin-bottom:.1em;font-size:1.6rem}body.touch #board .tabs{margin:.1rem 0 .25rem}body.touch #board .tabs button{min-height:40px;padding:.3em .9em}body.touch #board p.blink{margin-top:.15rem}#entry .rank{color:var(--red);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;margin:.2rem auto;font-size:clamp(1.1rem,4vmin,1.5rem)}:is(#entry,#versus-name) .letters{justify-content:center;gap:clamp(.5rem,3vmin,1.2rem);margin:.3rem 0;display:flex}:is(#entry,#versus-name) .letter{justify-items:center;gap:.15rem;display:grid}:is(#entry,#versus-name) .letter button{margin:0}:is(#entry,#versus-name) .arrow{padding:.1em .9em;font-size:.9rem}body.touch :is(#entry,#versus-name) .arrow{min-height:40px;padding:.2em 1em}:is(#entry,#versus-name) .cell{background:var(--cream);border-radius:12px;width:clamp(3rem,12vmin,4.5rem);height:clamp(3.2rem,13vmin,5rem);padding:0;font-size:clamp(2rem,9vmin,3.5rem);line-height:1}:is(#entry,#versus-name) .cursor .cell{background:var(--yellow)}:is(#entry,#versus-name) .hint{margin:.2rem auto;font-size:clamp(.85rem,2.5vmin,1rem)}#countdown{text-align:center;width:100%;color:var(--yellow);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:10px 10px 0 var(--ink);font-size:clamp(4.8rem,24vmin,11rem);line-height:1;position:absolute;top:60%;left:0;transform:translateY(-50%)rotate(-4deg)}#countdown.go{color:var(--green)}#countdown.pop{animation:.25s ease-out count-pop}@keyframes count-pop{0%{opacity:0;transform:translateY(-50%)scale(1.7)rotate(-4deg)}}#rival-tag{letter-spacing:.06em;white-space:nowrap;color:var(--cream);background:var(--blue);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);will-change:transform;border-radius:8px;padding:.1em .6em;font-size:clamp(.75rem,2.4vmin,1rem);position:absolute;top:0;left:0}#rival-tag.away{background:#9a9a9a}#versus-banner{left:50%;top:calc(var(--corner-top) + var(--timer-size) * 2 + 4px);white-space:nowrap;align-items:center;gap:.6em;font-size:clamp(.8rem,2.6vmin,1.1rem);display:flex;position:absolute;transform:translate(-50%)rotate(1deg)}#versus-banner button{pointer-events:auto;font:inherit;letter-spacing:.04em;cursor:pointer;color:var(--cream);background:var(--blue);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:999px;padding:.25em .9em;font-size:.85em;font-weight:900}#versus-banner button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}body.touch #versus-banner{left:calc(50% + 4px);top:calc(var(--corner-top) + var(--timer-size) * 2 + 12px);transform:rotate(1deg)}body.touch #versus-banner button{min-height:40px}@media (orientation:portrait){#versus-banner,body.touch #versus-banner{left:auto;right:max(1.5rem, env(safe-area-inset-right));top:calc(var(--corner-top) + 8.6rem);white-space:normal;text-align:right;flex-wrap:wrap;justify-content:flex-end;max-width:calc(50% - 1.5rem);transform:rotate(1deg)}}#target.flash{background:var(--yellow)}#target-plus{white-space:nowrap;color:var(--yellow);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);font-size:clamp(1.5rem,6.5vmin,2.6rem);font-weight:900;line-height:1;position:absolute;top:50%;right:calc(100% + .5rem);transform:translateY(-50%)rotate(-6deg)}#target-plus.pop{animation:.3s ease-out plus-pop}@keyframes plus-pop{0%{opacity:0;transform:translateY(-50%)scale(1.8)rotate(-6deg)}}#screen #versus-notice{color:var(--red);letter-spacing:.06em;margin:.3rem auto 0;font-weight:900}#screen #versus-notice:has(+#versus-reload){vertical-align:middle;display:inline-block}#screen #versus-reload{vertical-align:middle;margin:.3rem 0 0 .6rem}#versus .versus-you{letter-spacing:.04em;font-size:clamp(1.05rem,3.4vmin,1.35rem);font-weight:900}#screen #versus-change{vertical-align:middle;margin:0 0 0 .5rem;padding:.2rem .9rem;font-size:.8rem}#screen #versus-invite{color:var(--cream);background:var(--red);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;margin:.6rem auto .8rem;font-size:clamp(1.1rem,4vmin,1.5rem);display:block}#screen .versus-row{letter-spacing:.04em;color:var(--blue);margin:.25rem auto;font-size:clamp(1rem,3.4vmin,1.4rem);font-weight:900}#screen .versus-row.you{color:var(--red)}#screen #versus-rematch{letter-spacing:.06em;font-weight:900}@keyframes bob{to{transform:scale(1.06)rotate(1.5deg)}}@keyframes throb{to{transform:translate(-50%)rotate(-2deg)scale(1.08)}}#controls{pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:none;position:fixed;inset:0}body.touch #controls{display:block}#controls>*{pointer-events:auto;touch-action:none;position:absolute}#stick-zone{--stick-travel:12vmin;--stick-puck:10vmin;width:50%;top:20vmin;bottom:0;left:0}#stick-base{left:calc(max(3vmin, env(safe-area-inset-left)) + 6vmin);bottom:calc(max(3vmin, env(safe-area-inset-bottom)) + 4vmin);width:calc(var(--stick-travel) * 2 + var(--stick-puck));height:calc(var(--stick-travel) * 2 + var(--stick-puck));border:3px solid var(--ink);box-shadow:0 0 0 3px #fff6dcb3, 4px 4px 0 var(--ink);box-sizing:border-box;opacity:.9;pointer-events:none;background:#fff6dc8c;border-radius:50%;position:absolute}#stick-base.active{opacity:1;background:#fff6dcbf;bottom:auto}#stick-puck{width:var(--stick-puck);height:var(--stick-puck);margin:calc(var(--stick-puck) / -2) 0 0 calc(var(--stick-puck) / -2);background:var(--cream);border:3px solid var(--ink);box-sizing:border-box;box-shadow:3px 3px 0 var(--ink);pointer-events:none;border-radius:50%;position:absolute;top:50%;left:50%}#controls button{font:inherit;letter-spacing:.05em;color:var(--cream);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;background:var(--red);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);opacity:.75;-webkit-tap-highlight-color:transparent;border-radius:50%;outline:none;padding:0;font-size:3vmin;font-weight:900}#controls button.pressed{opacity:1;box-shadow:1px 1px 0 var(--ink);background:#d63c33;transform:translate(3px,3px)}#handbrake{right:max(3vmin, env(safe-area-inset-right));bottom:max(3vmin, env(safe-area-inset-bottom));width:24vmin;height:24vmin;font-size:4vmin;line-height:1.05}#controls #pause,#controls #reset{top:max(1.5vmin, env(safe-area-inset-top));width:8vmin;height:8vmin;color:var(--ink);-webkit-text-stroke:0;background:var(--cream);box-shadow:3px 3px 0 var(--ink);opacity:1;border-radius:2vmin;font-size:4vmin}#pause{left:calc(50% + 14vmin)}#reset{left:calc(50% - 22vmin)}
