:root{--bmp-scale:2;--koules-font:ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;--koules-text:#fff;--koules-shadow:#000;--koules-select:#eb8282;--koules-select-shadow:#590000;--koules-arrow:#eb8282}*{box-sizing:border-box}a{color:var(--koules-text);text-decoration:none}h1,h2,p,ul{margin:0}html,body{width:100%;height:100%;color:var(--koules-text);font-family:var(--koules-font);-webkit-font-smoothing:antialiased;touch-action:none;background:#04050a;margin:0;padding:0;overflow:hidden}#container,#container canvas{width:100%;height:100%;display:block;position:fixed;inset:0}.bmp{image-rendering:pixelated;background-repeat:no-repeat;background-size:100% 100%;flex:none;display:block}.bmp.shadowed{filter:drop-shadow(1px 1px 0 var(--koules-shadow))}#overlay{pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}#playfield{width:100px;height:100px;position:relative}#hud{flex-direction:column;gap:6px;display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0}#hud-players{flex-wrap:wrap;gap:6px 22px;display:flex}#hud-players .player{white-space:nowrap;align-items:center;gap:6px;display:flex}#hud-players .pip{background:currentColor;border-radius:50%;flex:none;width:.7em;height:.7em;font-size:12px;box-shadow:0 0 .5em}#hud-players .dead{opacity:.4}#views{gap:calc(2px * var(--bmp-scale));pointer-events:auto;display:none;position:absolute;top:calc(100% + 10px);right:0}#views.visible{display:flex}#views .view{appearance:none;color:var(--koules-text);padding:calc(1px * var(--bmp-scale)) calc(2px * var(--bmp-scale));cursor:pointer;opacity:.72;background:0 0;border:1px solid #0000;transition:opacity .15s,border-color .15s}#views .view:hover,#views .view:focus-visible{opacity:1;outline:none}#views .view.selected{opacity:1;border-color:var(--koules-select);box-shadow:1px 1px 0 var(--koules-select-shadow)}#menu{justify-content:space-between;align-items:center;gap:calc(2px * var(--bmp-scale));pointer-events:auto;flex-direction:column;padding:3% 4%;display:none;position:absolute;inset:0;overflow:hidden}#menu.visible{display:flex}#menu.paused:before{content:"";z-index:-1;background:#04050abd;position:fixed;inset:0}#menu.paused header,#menu.paused footer{display:none}#menu.paused{justify-content:center}#menu header,#menu footer{align-items:center;gap:calc(2px * var(--bmp-scale));flex-direction:column;display:flex}#menu header .gap{height:calc(6px * var(--bmp-scale))}#menu .port a{border-bottom:1px solid #0000;transition:border-color .2s;display:block}#menu .port a:hover,#menu .port a:focus-visible{border-bottom-color:var(--koules-select);outline:none}#menu-rows{position:relative}#menu-items{align-items:center;gap:calc(2px * var(--bmp-scale));flex-direction:column;margin:0;padding:0;list-style:none;display:flex;position:relative}#menu-items li{align-items:center;gap:calc(3px * var(--bmp-scale));cursor:pointer;z-index:1;display:flex;position:relative}#menu-items li .spinner{cursor:pointer}#menu-selector{border:1px solid var(--koules-select);box-shadow:1px 1px 0 var(--koules-select-shadow);pointer-events:none;opacity:0;z-index:0;transition:transform .2s,width .2s,height .2s,opacity .15s;position:absolute;top:0;left:0}#menu-selector.visible{opacity:1}#menu footer a{opacity:.5;transition:opacity .2s}#menu footer a:hover,#menu footer a:focus-visible{opacity:1;outline:none}#banner{justify-content:center;align-items:center;display:none;position:absolute;inset:0}#banner.visible{display:flex}#labels{position:absolute;inset:0;overflow:hidden}#labels .bmp{pointer-events:none;position:absolute;top:0;left:0}#boot{z-index:10;user-select:none;background:#04050a;place-content:center;justify-items:center;gap:42px;transition:opacity .5s;display:grid;position:fixed;inset:0}#boot.hidden{opacity:0;pointer-events:none}#boot-spinner{width:44px;height:44px;position:relative}#boot-spinner i{opacity:.22;background:radial-gradient(circle at 34% 30%,#ffd8d8 0%,#f24a4a 42%,#a11414 76%,#3a0606 100%);border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite boot-koule;position:absolute}#boot-spinner i:first-child{top:0;left:17px}#boot-spinner i:nth-child(2){top:8.5px;left:31.72px}#boot-spinner i:nth-child(3){top:25.5px;left:31.72px}#boot-spinner i:nth-child(4){top:34px;left:17px}#boot-spinner i:nth-child(5){top:25.5px;left:2.28px}#boot-spinner i:nth-child(6){top:8.5px;left:2.28px}#boot-spinner i:nth-child(2){animation-delay:.2s}#boot-spinner i:nth-child(3){animation-delay:.4s}#boot-spinner i:nth-child(4){animation-delay:.6s}#boot-spinner i:nth-child(5){animation-delay:.8s}#boot-spinner i:nth-child(6){animation-delay:1s}@keyframes boot-koule{0%,62%,to{opacity:.22}28%{opacity:1}}@media (prefers-reduced-motion:reduce){#boot-spinner i{opacity:.75;animation:none}}#boot p{text-align:center;letter-spacing:.08em;color:#ff8080;max-width:44ch;font-size:12px;line-height:1.7}#boot p:empty,#boot.error #boot-spinner{display:none}#sound{z-index:6;appearance:none;color:var(--koules-text);cursor:pointer;opacity:.75;background:0 0;border:1px solid #0000;place-items:center;min-width:44px;min-height:44px;transition:opacity .2s,border-color .2s;display:grid;position:fixed;top:14px;right:14px}#sound:hover,#sound:focus-visible{opacity:1;border-color:var(--koules-select);outline:none}#sound.muted{color:var(--koules-select);opacity:.55}#sound.muted:after{content:"";width:calc(12px * var(--bmp-scale));height:calc(1px * var(--bmp-scale));background:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)}#sound.waiting{opacity:1;animation:1.8s ease-in-out infinite sound-waiting}@keyframes sound-waiting{0%,to{opacity:.45}50%{opacity:1}}@media (prefers-reduced-motion:reduce){#sound.waiting{animation:none}}#stick{pointer-events:none;opacity:0;z-index:5;width:0;height:0;transition:opacity .15s;position:fixed;top:0;left:0}#stick.visible{opacity:1}#stick-base,#stick-knob{border-radius:50%;position:absolute;transform:translate(-50%,-50%)}#stick-base{border:2px solid var(--koules-select);opacity:.35}#stick-knob{background:var(--koules-select);box-shadow:0 0 18px var(--koules-select);opacity:.6}