html,body{color:#fff;-webkit-user-select:none;user-select:none;background:#000;height:100%;margin:0;font-family:Trebuchet MS,system-ui,sans-serif;overflow:hidden}#game{object-fit:contain;width:100vw;height:100vh;image-rendering:pixelated;display:block;position:fixed;inset:0}.hidden{display:none!important}#hud{pointer-events:none;text-shadow:3px 3px #000;font-size:clamp(16px,2.4vw,30px);font-weight:800;position:fixed;inset:0}.hud-tl{gap:.3em;display:grid;position:absolute;top:2%;left:2%}.rings{color:#ffd21f}.rings.zero{animation:.6s infinite blink}.rings.low{animation:.4s infinite blink}.flight{align-items:center;gap:.5em;width:46%;font-size:.8em;display:flex;position:absolute;top:3%;left:50%;transform:translate(-50%)}.flight .bar{background:#10143a;border:3px solid #000;border-radius:.4em;flex:1;height:.6em;overflow:hidden}.flight .fill{background:linear-gradient(90deg,#6ff3ff,#ffd21f);height:100%}@keyframes blink{0%,49%{color:#ffd21f}50%,to{color:#ff3030}}.shield{font-size:.75em}.shop{white-space:nowrap;gap:1.5em;font-size:.65em;display:flex;position:absolute;bottom:3%;left:50%;transform:translate(-50%)}.shop span{opacity:.45}.shop span.can{opacity:1;color:#fff36b}.boss{text-align:center;width:40%;font-size:.8em;position:absolute;top:3%;left:50%;transform:translate(-50%)}.boss .bar{background:#400;border:3px solid #000;height:.7em;margin-top:.2em}.boss .fill{background:linear-gradient(#ff5a3a,#c0200a);height:100%;transition:width .2s}.msg{text-align:center;color:#fff36b;width:100%;font-size:1.6em;position:absolute;top:33%}.qte{text-align:center;background:#3c1400b3;border:4px solid #ffd21f;border-radius:.4em;padding:.4em .8em .6em;position:absolute;top:24%;left:50%;transform:translate(-50%)}.qte-title{color:#fff36b;font-size:.9em}.qte-keys{justify-content:center;gap:.3em;margin:.3em 0;display:flex}.qte-keys span{color:#1f3fbf;min-width:1.6em;text-shadow:none;background:#fff;border-radius:.2em;padding:.1em .2em;font-size:1.6em;display:inline-block}.qte-keys span.done{color:#fff;background:#3ec43a}.qte-keys span.next{outline:.15em solid #ffd21f;transform:scale(1.15)}.qte-keys.wrong span{color:#fff;background:#ff3030}.qte-bar{background:#400;border:3px solid #000;height:.5em}.qte-fill{background:linear-gradient(#ffe066,#ff9a1a);height:100%}#screen{text-align:center;text-shadow:3px 3px #000;background:#0000288c;place-items:center;padding:16px;font-weight:700;display:grid;position:fixed;inset:0}#screen:empty{display:none}#screen.clear{background:linear-gradient(#0000281a,#00002873);place-items:start center;padding-top:8vh}.the-end h1{letter-spacing:.08em;margin:0!important;font-size:clamp(48px,13vw,170px)!important}.the-end h1 span{animation:.7s cubic-bezier(.2,1.6,.4,1) both end-drop,1.6s ease-in-out 1s infinite end-bob;display:inline-block}@keyframes end-drop{0%{opacity:0;transform:translateY(-70vh)rotate(-25deg)}to{opacity:1;transform:none}}@keyframes end-bob{50%{transform:translateY(-.08em)}}@media (prefers-reduced-motion:reduce){.the-end h1 span{animation:none}}#screen h1{color:#ffd21f;letter-spacing:.05em;margin:0 0 .3em;font-size:clamp(32px,7vw,90px)}#screen h2{color:#ffd21f;margin:0 0 .4em;font-size:clamp(24px,4vw,48px)}#screen p{margin:.4em;font-size:clamp(16px,2.2vw,28px)}#screen .howto p{margin:.28em;font-size:clamp(12px,1.55vw,21px)}#screen .small{opacity:.8;font-size:clamp(12px,1.6vw,20px)}#screen .soon{color:#7fe0ff;font-style:italic}#screen .key{color:#1f3fbf;text-shadow:none;background:#fff;border-radius:.2em;padding:0 .4em;font-weight:800;display:inline-block}#screen.opaque{background:#000}#screen.title-mode{padding:0}#screen .menu{place-items:center;width:100%;height:100%;display:grid}.title-wrap{aspect-ratio:16/9;width:min(100vw,177.778vh)}.title-canvas{width:100%;height:100%;display:block}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.credits{background:radial-gradient(1px 1px at 20% 30%,#fff 50%,#0000 51%) 0 0/180px 180px,radial-gradient(1px 1px at 70% 60%,#fff 50%,#0000 51%) 0 0/230px 230px,radial-gradient(2px 2px at 40% 80%,#9ff6ff 50%,#0000 51%) 0 0/310px 310px,radial-gradient(1px 1px at 85% 15%,#fff 50%,#0000 51%) 0 0/270px 270px,radial-gradient(2px 2px at 10% 70%,#ffd21f 50%,#0000 51%) 0 0/350px 350px,radial-gradient(at 50% 120%,#2a1a6a 0%,#050818 60%) 0 0/100% 100%;animation:3s steps(3,end) infinite twinkle;position:fixed;inset:0;overflow:hidden}@keyframes twinkle{50%{background-position:4px 2px,-3px 5px,2px -4px,5px 3px,-2px -2px,0 0}}.credits .roll{width:min(90vw,900px);animation:75s linear forwards roll;position:absolute;left:50%;transform:translate(-50%,100vh)}@keyframes roll{to{transform:translate(-50%,calc(40vh - 100%))}}.credits h1{font-size:clamp(36px,7vw,96px)!important}.credits h2{margin-top:2.5em!important}.credits .lang{letter-spacing:.15em;text-transform:uppercase;color:#7fe0ff!important;margin-top:2.2em!important;font-size:clamp(14px,1.8vw,22px)!important}.credits .line{line-height:1.4;font-size:clamp(16px,2.3vw,30px)!important}.credits .cast{color:#fff36b;margin:.2em!important;font-size:clamp(15px,2vw,26px)!important}.credits .star{color:#ffd21f;letter-spacing:.5em}.credits .end{margin-top:3em!important}.credits .skip{opacity:.7;position:absolute;bottom:2%;right:2%;font-size:clamp(12px,1.4vw,18px)!important}@media (prefers-reduced-motion:reduce){.credits .roll{animation-duration:150s}}
