*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020e1b}body{display:grid;place-items:center;font-family: 'Trebuchet MS',Arial,sans-serif;color:#fff4bf;user-select:none}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:4px solid white;outline-offset:5px}button{color:inherit}button:disabled{cursor:default}button:hover:not(:disabled){filter:brightness(1.13)}button:active:not(:disabled){translate:0 3px}button, input{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}#viewport{position:relative;overflow:hidden;width:1000px;height:1000px}#game{position:relative;width:1000px;height:1000px;overflow:hidden;transform-origin:top left;background:#082a40}canvas{display:block;width:1000px;height:1000px;position:absolute;inset:0}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 20px #0010277a;border:1px solid #8ae6e32a}#hud{position:absolute;top:24px;left:26px;right:26px;height:92px;display:flex;align-items:center;gap:18px}.jewel{background:linear-gradient(140deg,#163454f2,#081830f5 55%,#071027f5);border:2px solid #f4cf76;box-shadow:inset 0 0 0 3px #3260738c,0 4px 0 #031b25,0 0 18px #efbf5c28}.logo{margin:0;font-family:'Arial Rounded MT Bold','Trebuchet MS',sans-serif;line-height:.93;font-weight:1000;text-align:center;transform:rotate(-4deg);filter:drop-shadow(0 8px 0 #031c27)}.logo span,.logo strong{display:block;-webkit-text-stroke:2px #123e43;paint-order:stroke fill;text-shadow:0 3px #996225,2px 5px #063f42,-3px -2px #d9fff4}.logo span{color:#ffda62;font-size:112px;letter-spacing:-5px}.logo strong{color:#7ff8ef;font-size:63px;letter-spacing:-3px;text-shadow:0 4px #147f95,2px 6px #053344,-3px -2px #e5ffff}.logo.small{width:225px;flex-shrink:0;margin-right:auto}.logo.small span{font-size:50px;letter-spacing:-2px}.logo.small strong{font-size:31px;letter-spacing:-1.5px}.score{border-radius:24px;min-width:257px;height:94px;text-align:center;padding:7px 20px;position:absolute;left:calc(50% - 129px)}.score:before{content:'◆';position:absolute;top:-13px;left:calc(50% - 10px);color:#ffe5a4;text-shadow:0 2px #a15c20}.score span{display:block;font-size:20px;letter-spacing:3px;font-weight:900}.score strong{display:block;font-size:48px;line-height:1.03;color:#ffdf76;text-shadow:0 2px #ac651a,0 0 16px #f9c94140}.flies{border-radius:24px;height:73px;min-width:120px;padding:8px 20px;display:flex;align-items:center;gap:14px}.fly-icon{font-size:43px;color:#ffe086;text-shadow:0 0 15px #ffbf44}.flies strong{font-size:38px}.round{border-radius:50%;height:70px;width:70px;font-size:32px;font-weight:900}.run-info{position:absolute;top:137px;left:34px;display:flex;flex-direction:column;gap:10px;font-size:17px;font-weight:900;letter-spacing:2px;text-shadow:0 2px 6px #000}#level{color:#b5eee1}#lives{color:#ffafad;font-size:24px;letter-spacing:5px}.combo{position:absolute;right:47px;top:252px;transform:rotate(-10deg);text-align:center;color:#ffde75;text-shadow:0 3px #663812,0 0 20px #ffd85c77}.combo span{font-size:27px;font-style:italic;font-weight:900}.combo strong{display:block;font-size:67px;line-height:1}.combo b{font-weight:900}.altitude{position:absolute;bottom:43px;left:27px;min-width:177px;height:74px;border-radius:23px;padding:8px 18px;display:flex;align-items:center;gap:10px}.altitude span{color:#84fff1;font-size:40px;text-shadow:0 0 12px #28ffd5}.altitude strong{font-size:34px}.altitude small{font-size:22px;font-weight:900}.jump-controls{position:absolute;bottom:25px;left:260px;width:480px;text-align:center}.primary{border-radius:40px;border:3px solid #fff0b4;color:#eafffa;box-shadow:0 0 0 3px #bd8d40,0 0 0 6px #153e41, inset 0 3px 2px #d0ffff,inset 0 -9px 1px #00758a,0 9px 0 #041827,0 0 28px #22e4d235;background:linear-gradient(170deg,#76ffeb 0%,#0ee4dc 28%,#08b8cd 66%,#058fb5 100%);font-size:38px;letter-spacing:1px;font-weight:1000;text-shadow:0 3px #116076,-1px -1px #164953,1px -1px #164953,-1px 1px #164953,1px 1px #164953;padding:20px 30px;min-height:93px;transition:filter .15s,translate .15s}.primary span{margin-left:17px;font-size:29px}.primary:disabled{filter:saturate(.7) brightness(.8)}#jump{width:400px;font-size:53px;padding:12px 30px;height:103px}#hint{font-weight:900;font-size:20px;text-shadow:0 2px 3px #062033;letter-spacing:.4px;height:31px;white-space:nowrap;margin-left:-30px;margin-right:-30px}.keyboard-hint{display:block;font-size:12px;letter-spacing:2px;color:#d0f1e7b0;margin-top:10px;font-weight:bold}.timer{height:7px;background:#06192cc2;border-radius:10px;width:320px;margin:18px auto 0;overflow:hidden;box-shadow:0 0 0 1px #67f3e844}.timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#51e7c2,#e3ff99);border-radius:10px;transform-origin:left}.screen{position:absolute;inset:0}.menu-heading{position:absolute;top:95px;width:100%;text-align:center}.eyebrow{font-size:14px;font-weight:bold;letter-spacing:5px;color:#c0eee5;margin-bottom:24px;text-shadow:0 2px 8px #002539}.menu-heading h1{margin-bottom:24px}.menu-heading p{font-size:21px;letter-spacing:1px;color:#d7fff4;text-shadow:0 2px 6px #042637}.menu-actions{position:absolute;top:760px;left:300px;width:400px;display:flex;flex-direction:column;align-items:stretch;gap:20px}.menu-actions .primary{font-size:30px;min-height:88px;padding:19px 20px}.secondary{border:2px solid #b1d9c485;border-radius:22px;background:linear-gradient(#173b51ed,#0b2037f2);font-size:20px;letter-spacing:2px;font-weight:900;padding:14px 25px;box-shadow:inset 0 1px #ffffff26,0 4px 0 #031623}.menu-actions .secondary{width:260px;margin:auto}.overlay{position:absolute;inset:0;background:#0315278c;backdrop-filter:blur(7px);display:grid;place-items:center}.dialog{width:540px;padding:34px 48px 28px;border-radius:38px;text-align:center;position:relative}.dialog-star{position:absolute;top:-30px;left:calc(50% - 25px);font-size:48px;color:#fff0a3;text-shadow:0 0 20px #e6b851}.dialog h2{font-size:44px;color:#ffe08a;margin:16px 0 8px;font-weight:1000;letter-spacing:1px;text-shadow:0 3px #895d27}.dialog-note{font-size:19px;color:#c9eee8;margin:10px 0 30px;line-height:1.5}.dialog button.primary{width:100%;font-size:26px;margin:18px 0}.dialog .secondary{width:100%;margin:5px 0 16px}.text-button{background:none;border:none;display:block;margin:12px auto 0;font-size:16px;letter-spacing:2px;padding:14px;color:#c4e8e4;font-weight:bold}.setting{display:flex;justify-content:space-between;align-items:center;margin-top:27px;font-size:24px;font-weight:bold}.toggle{background:#1e7d71;color:#d5fff1;border:2px solid #84e9b5;border-radius:30px;width:91px;padding:9px;font-weight:900;box-shadow:inset 0 2px #b5ffe333}.toggle[aria-checked=false]{background:#263950;border-color:#768b9b;color:#c3d0d5}.volume-label{display:block;text-align:left;margin:15px 0 6px;font-size:14px;letter-spacing:1px;color:#afcbc8}input[type=range]{width:100%;accent-color:#67eee0;cursor:pointer;height:25px}.result-score{display:flex;flex-direction:column;gap:4px}.result-score span{font-size:17px;letter-spacing:3px;color:#abcec8}.result-score strong{font-size:72px;color:#ffdf76;line-height:1.2}.results{display:flex;justify-content:center;gap:35px;margin:24px 0;color:#bde2d9;font-size:13px;letter-spacing:1px}.results b{display:block;color:#efffcf;font-size:29px;margin-bottom:5px}#toast{position:absolute;top:180px;left:200px;width:600px;text-align:center;color:#fff0ad;font-size:34px;font-weight:900;letter-spacing:1px;text-shadow:0 3px #5b431f,0 0 18px #ffef9866;pointer-events:none;opacity:0;transition:opacity .16s}#toast.show{opacity:1}#loading{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;background:radial-gradient(ellipse at 50% 45%,#164d60,#06182e 70%);z-index:10}.loading-logo{font-size:72px;color:#ffdd6e;font-weight:1000;text-align:center}.loading-logo span{display:block;color:#91fbed;font-size:42px}#loadMessage{font-size:20px;color:#c7eee4;margin:30px} .ready-hint{color:#dbff94!important}
/* The logical square must never become a scroll container when a control receives focus. */
html,body,#viewport{overflow:clip}
#game{position:absolute;left:0;top:0}

.brand-menu{width:485px;height:260px;margin:0 auto 10px}.brand-menu img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 9px #001c3970)}.menu-heading{top:56px}.menu-heading .eyebrow{margin-bottom:9px}.menu-heading h1{margin-bottom:5px}.menu-heading p{margin-top:8px}.brand-small{width:225px;height:120px;flex-shrink:0;margin-right:auto;display:flex;align-items:center}.brand-small img{display:block;width:225px;height:120px;object-fit:contain}.loading-brand{width:470px;height:auto}