:root{--night:#0d0a1c;--ink:#1c1532;--saffron:#f2a23a;--gold:#ffd95a;--lanka:#c8323c;--parch:#f1e6c8;--dim:#a79cc4;--display:"Press Start 2P", ui-monospace, Menlo, Consolas, monospace;--body:"VT323", ui-monospace, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{background:var(--night);color:var(--parch);font-family:var(--body);justify-content:center;padding-block:20px;padding-inline:16px;font-size:22px;line-height:1.2;display:flex}.cab{flex-direction:column;gap:14px;width:min(100%,960px,max(288px,177.778dvh - 515.556px));display:flex}.head{align-items:center;gap:16px;display:flex}.titles{flex-direction:column;gap:4px;display:flex}.logo{width:72px;height:72px;display:block}h1{font-family:var(--display);color:var(--gold);text-shadow:2px 2px 0 var(--lanka);letter-spacing:.04em;text-wrap:balance;margin:0;font-size:clamp(18px,3.4vw,24px);font-weight:400;line-height:1.4}.sub{color:var(--saffron);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:20px}.screen{aspect-ratio:16/9;background:var(--ink);border:4px solid var(--ink);max-width:100%;box-shadow:0 0 0 2px var(--saffron), 0 0 0 6px var(--ink), 0 0 0 8px var(--lanka);margin:8px;position:relative}canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;display:block}canvas:focus-visible{outline:2px solid var(--gold);outline-offset:10px}.keys{color:var(--parch);flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0;padding:0;list-style:none;display:flex}.keys li{white-space:nowrap;align-items:center;gap:6px;display:flex}kbd{font-family:var(--display);color:var(--night);background:var(--saffron);border-bottom:3px solid var(--lanka);text-align:center;min-width:24px;padding:5px 6px 4px;font-size:10px}.note{text-align:center;color:var(--dim);margin:0}.bar{gap:6px;display:flex;position:absolute;top:6px;left:50%;transform:translate(-50%)}.snd{font-family:var(--display);white-space:nowrap;cursor:pointer;color:var(--saffron);background:color-mix(in srgb, var(--night) 72%, transparent);border:1px solid var(--saffron);border-radius:0;margin:0;padding:5px 6px 4px;font-size:8px;line-height:1}.snd[aria-pressed=false]{color:var(--dim);border-color:var(--dim)}.snd:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.snd.save{color:var(--night);background:var(--gold);border-color:var(--gold)}.board{width:min(100% - 32px,420px);max-height:calc(100dvh - 32px);color:var(--parch);background:var(--ink);border:4px solid var(--ink);box-shadow:0 0 0 2px var(--saffron), 0 0 0 6px var(--ink), 0 0 0 8px var(--lanka);font-family:var(--body);border-radius:0;padding:18px 16px 16px;font-size:22px;line-height:1.2;overflow:auto}.board::backdrop{background:#0d0a1ccc}.board h2{font-family:var(--display);color:var(--gold);text-shadow:2px 2px 0 var(--lanka);text-align:center;text-transform:uppercase;margin:0 0 14px;font-size:14px;font-weight:400;line-height:1.4}.board form{gap:10px;margin-bottom:16px;display:grid}.board p{margin:0}.board label{color:var(--saffron);letter-spacing:.08em;text-transform:uppercase;gap:4px;font-size:18px;display:grid}.board input{width:100%;min-width:0;font-family:var(--body);color:var(--parch);background:var(--night);border:2px solid var(--dim);border-radius:0;padding:4px 8px;font-size:22px}.board input:focus-visible{border-color:var(--gold);outline:none}.board input::placeholder{color:var(--dim);opacity:.7}.tel{display:flex}.tel span{letter-spacing:0;color:var(--night);background:var(--saffron);place-items:center;padding:0 8px;font-size:22px;display:grid}.tel input{border-left:0}.yours b{color:var(--gold);font-weight:400}.fine,.status{color:var(--dim);font-size:18px}.status{text-align:center;margin-block:10px}.btn{font-family:var(--display);color:var(--night);background:var(--saffron);border:0;border-bottom:4px solid var(--lanka);cursor:pointer;text-transform:uppercase;border-radius:0;width:100%;margin:0;padding:12px 10px 9px;font-size:10px;line-height:1}.btn:disabled{opacity:.6;cursor:default}.btn.alt{color:var(--parch);background:var(--night);border:2px solid var(--dim);padding-block:10px 8px}.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.top{counter-reset:rank;margin:0 0 14px;padding:0;list-style:none}.top li{counter-increment:rank;border-bottom:1px dashed color-mix(in srgb, var(--dim) 45%, transparent);grid-template-columns:2ch 1fr auto;align-items:baseline;gap:0 10px;padding:3px 0;display:grid}.top li:before{content:counter(rank);color:var(--dim);text-align:right}.top span{overflow-wrap:anywhere;text-transform:uppercase}.top small{color:var(--dim);font-size:18px}.top b{color:var(--gold);font-weight:400}.pad{display:none}.dpad,.acts{touch-action:none;gap:6px;display:flex}.dpad span,.tb{width:60px;height:60px;font-family:var(--display);color:var(--night);background:var(--saffron);border:0;border-bottom:4px solid var(--lanka);border-radius:0;place-items:center;margin:0;padding:0;font-size:10px;line-height:1;display:grid}.dpad span{font-size:18px}.dpad[data-dir=l] span:first-child,.dpad[data-dir=r] span:last-child,.tb.on{background:var(--gold);border-bottom-width:2px;transform:translateY(2px)}.tb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.touch .pad{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.touch .keys,.touch .note{display:none}.touch canvas{touch-action:manipulation}.touch .cab{width:min(100%,960px,max(288px,177.778dvh - 426.667px))}@media (orientation:landscape) and (height<=520px){.touch body{padding-block:6px}.touch .head{display:none}.touch .cab{width:min(100%,177.778dvh - 64px)}.touch .pad{left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(12px, env(safe-area-inset-left,0px));padding-right:max(12px, env(safe-area-inset-right,0px));pointer-events:none;opacity:.85;position:fixed}.touch .dpad,.touch .acts{pointer-events:auto}}@media (orientation:portrait){.touch body{overscroll-behavior:none;touch-action:manipulation;padding:0;overflow:hidden}.touch .cab{gap:0;width:100%;height:100%}.touch .head{padding:12px 16px 10px}.touch .screen{box-shadow:0 -2px 0 var(--saffron), 0 2px 0 var(--saffron), 0 -6px 0 var(--lanka), 0 6px 0 var(--lanka);border-width:0;margin:0}.touch .bar{gap:10px;top:calc(100% + 22px)}.touch .snd{padding:13px 12px 11px;font-size:10px}.touch .pad{padding:84px 16px calc(28px + env(safe-area-inset-bottom,0px));flex:1;gap:8px}.touch .dpad span,.touch .tb{width:clamp(64px,21vw,96px);height:clamp(64px,21vw,96px)}.touch .dpad span{font-size:24px}}:root{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}body{margin:0}[hidden]{display:none!important}#root{display:contents}