:root{color-scheme:dark;--cyan:#66f7ef;--amber:#ffb15a;--ink:#050b19;--glass:rgba(7,18,36,.82);font-family:"Arial Narrow","Segoe UI",sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030713;color:#f2fbff;touch-action:none}body{display:grid;place-items:center}button,a{font:inherit}#app{position:relative;width:min(100vw,75vh);height:min(100vh,133.333vw);max-width:900px;max-height:1200px;overflow:hidden;background:#071224;isolation:isolate}canvas{display:block;width:100%;height:100%;background:#071224}.hud{position:absolute;z-index:4;left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));display:flex;gap:7px;align-items:center;pointer-events:none}.hud div{min-width:0;flex:1;padding:7px 8px;border:1px solid rgba(102,247,239,.28);background:rgba(3,9,22,.73);backdrop-filter:blur(8px);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}.hud span{display:block;color:#82a3b7;font:700 9px/1 monospace;letter-spacing:.12em}.hud b{display:block;margin-top:3px;font:800 13px/1 monospace;color:#fff}.mini{pointer-events:auto;min-width:44px;min-height:44px;border:1px solid rgba(102,247,239,.4);background:#08172d;color:white;border-radius:50%}.panel{position:absolute;z-index:10;inset:0;display:none;place-content:center;text-align:left;padding:clamp(28px,7vw,72px);background:linear-gradient(145deg,rgba(3,10,27,.93),rgba(8,33,56,.91));backdrop-filter:blur(10px)}.panel.visible{display:grid}.panel[hidden]{display:none}.hero{background:linear-gradient(180deg,rgba(3,8,20,.1),rgba(3,8,20,.65) 42%,#050b19 82%),url("cover.png") center/cover}.hero:before{content:"";position:absolute;inset:0;border:1px solid rgba(102,247,239,.25);pointer-events:none}.eyebrow{font:800 11px/1.2 monospace;letter-spacing:.22em;color:var(--cyan);margin:0 0 13px}.hero h1{font-size:clamp(42px,12vw,92px);line-height:.77;letter-spacing:-.07em;margin:0 0 24px;text-shadow:0 8px 40px #000}.hero h1 i{font-style:normal;color:var(--amber);font-size:.63em;letter-spacing:-.03em}.panel h2{font-size:clamp(36px,10vw,68px);line-height:.9;margin:0 0 18px;letter-spacing:-.05em}.panel p{max-width:560px;font-size:clamp(15px,3.8vw,22px);line-height:1.45;color:#d8e9ef}.primary{min-height:58px;margin:18px 0 14px;border:0;background:linear-gradient(90deg,var(--amber),#ff6f66);color:#11101a;font-weight:900;letter-spacing:.08em;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);cursor:pointer}.panel a{color:#bfe9f0;text-align:center;min-height:44px;display:grid;place-items:center}.keys{font:600 11px/1.5 monospace;color:#9fbdc8;text-align:center}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.results span{padding:12px 8px;background:rgba(102,247,239,.08);font:700 10px monospace;color:#98b8c3}.results b{display:block;font-size:16px;color:#fff;margin-top:6px}#toast{position:absolute;z-index:8;top:21%;left:50%;width:80%;transform:translate(-50%,-10px);opacity:0;text-align:center;font:900 clamp(16px,4vw,28px) monospace;letter-spacing:.08em;text-shadow:0 3px 14px #000;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}#touch{position:absolute;z-index:6;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));height:145px;display:flex;align-items:end;justify-content:space-between;padding:0 calc(18px + env(safe-area-inset-right)) 0 calc(18px + env(safe-area-inset-left));pointer-events:none}.joystick{position:relative;width:128px;height:128px;pointer-events:auto;touch-action:none}.ring{position:absolute;inset:6px;border:2px solid rgba(102,247,239,.45);border-radius:50%;background:radial-gradient(circle,rgba(102,247,239,.06) 0 35%,rgba(5,12,28,.52) 36%)}.stick{position:absolute;width:58px;height:58px;left:35px;top:35px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9ffff,var(--cyan) 24%,#147f91 68%);box-shadow:0 0 24px rgba(102,247,239,.45);transform:translate(0,0)}.actions{pointer-events:none;display:flex;gap:10px;align-items:end}.actions button{pointer-events:auto;touch-action:none;border-radius:50%;border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:900;font-size:10px;letter-spacing:.05em;width:76px;height:76px;background:radial-gradient(circle at 35% 30%,#2e6e86,#092139 67%);box-shadow:0 7px 25px rgba(0,0,0,.35)}.actions #charge{width:66px;height:66px;background:radial-gradient(circle at 35% 30%,#ffca78,#9d442f 68%)}.actions button.active{transform:scale(.92);filter:brightness(1.35)}@media(pointer:fine){#touch{opacity:.22}}@media(max-aspect-ratio:3/4){#app{width:100vw;height:100vh;max-width:none}.hud div:nth-child(3){display:none}#touch{height:138px}.joystick{width:118px;height:118px}.stick{left:30px;top:30px}.actions button{width:70px;height:70px}.actions #charge{width:62px;height:62px}}@media(min-aspect-ratio:4/3){#app{width:min(75vh,100vw);height:100vh}.panel{padding:36px}.hero h1{font-size:56px}.panel p{font-size:15px}.joystick{width:108px;height:108px}.ring{inset:8px}.stick{left:25px;top:25px}.actions button{width:64px;height:64px}#touch{height:112px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}