@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--cyan:#70e7ed;--violet:#a78bfa;--gold:#ffe18b}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080d1c;color:#f6f7ff;font-family:'DM Sans',system-ui,sans-serif;touch-action:none}#game{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}
#boot{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#080d1c;transition:opacity .6s}.boot-logo,.brand{font:800 22px 'Space Grotesk';letter-spacing:2px}.boot-logo span,.brand span{color:var(--cyan)}#boot p{color:#9eafd1;font-size:13px}.loader{width:160px;height:3px;background:#253153;margin-top:20px;overflow:hidden;border-radius:5px}.loader:after{content:"";display:block;width:40%;height:100%;background:var(--cyan);animation:load 1s infinite}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
#topbar{position:absolute;z-index:4;top:0;left:0;right:0;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#080d1cbb,transparent)}.brand{font-size:18px}.brand small{display:block;color:#a5b4d5;font:700 8px 'DM Sans';letter-spacing:2px;margin-top:3px}.stats{display:flex;gap:10px}.stat,.glass{border:1px solid #c2d2ff33;background:#111a35a8;backdrop-filter:blur(10px);border-radius:12px;padding:9px 13px;font-size:10px;letter-spacing:1px;color:#bdc9e6}.stat b{color:var(--gold);margin-left:6px}.glass{color:#e7eeff;cursor:pointer}
#quest{position:absolute;top:93px;left:24px;width:260px;padding:15px 17px;background:#0c1530c9;border:1px solid #a8b8ff38;border-radius:14px;backdrop-filter:blur(12px);z-index:3}.quest-label,.eyebrow{font-size:9px;letter-spacing:2px;color:var(--cyan);font-weight:800}#quest b{display:block;margin:7px 0 4px;font:600 16px 'Space Grotesk'}#quest p{font-size:11px;line-height:1.5;color:#aab9d9;margin:0}.progress{height:4px;background:#2a3558;border-radius:5px;margin-top:12px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8d7cff,#70e7ed);transition:width .3s}
#hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:11px;color:#e0e8ff;background:#0a1230a8;border:1px solid #c5d2ff33;border-radius:30px;padding:9px 15px;z-index:3;white-space:nowrap}.message{position:absolute;left:50%;top:25%;transform:translate(-50%,-10px);opacity:0;transition:.25s;background:#111a35e8;border:1px solid #7de8ee66;border-radius:12px;padding:12px 18px;text-align:center;font-size:13px;z-index:6;pointer-events:none}.message.show{opacity:1;transform:translate(-50%,0)}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ffffff77;font-size:16px;pointer-events:none}
.overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(90deg,#080d1cbb,#080d1c55,#080d1cbb)}.hidden{display:none!important}.intro-card{width:min(490px,100%);padding:30px;border:1px solid #b8c8ff55;border-radius:22px;background:linear-gradient(145deg,#121d3cf2,#0b1430f2);box-shadow:0 25px 100px #0009;text-align:center}.intro-card h1{font:700 clamp(36px,7vw,60px)/.98 'Space Grotesk';letter-spacing:-2px;margin:14px 0}.intro-card h1 span{color:var(--cyan)}.intro-card p{font-size:14px;line-height:1.7;color:#b9c8e8;max-width:390px;margin:0 auto 18px}.intro-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:20px 0}.intro-tags span{font-size:8px;letter-spacing:1px;border:1px solid #7e8db855;border-radius:20px;padding:7px 9px;color:#c6d4f2}.primary{width:100%;padding:15px 20px;border:0;border-radius:12px;color:white;font-weight:900;letter-spacing:.5px;background:linear-gradient(100deg,#7567ec,#29bfc9);box-shadow:0 8px 30px #5c72ed44;cursor:pointer}.primary b{float:right;font-size:18px}.intro-card small{display:block;color:#899cbe;font-size:10px;line-height:1.6;margin-top:15px}
#mobileControls{display:none;position:absolute;bottom:18px;left:18px;right:18px;z-index:5;justify-content:space-between;align-items:end;pointer-events:none}#stick{width:116px;height:116px;border-radius:50%;background:#17244988;border:1px solid #aabaff66;position:relative;pointer-events:auto;touch-action:none}#stickKnob{width:48px;height:48px;border-radius:50%;background:#8c9de9bb;border:1px solid #dce4ff88;position:absolute;left:33px;top:33px}.rightControls{display:flex;gap:10px;pointer-events:auto}.rightControls button{width:65px;height:65px;border-radius:50%;background:#172449dd;border:1px solid #aabaff88;color:white;font-size:10px;font-weight:900}
@media(max-width:700px){#topbar{padding:12px}.brand{font-size:15px}.stats{gap:5px}.stat{padding:7px 8px;font-size:8px}.stat b{display:block;margin:3px 0 0;font-size:11px}#quest{top:70px;left:12px;width:210px;padding:11px}#quest b{font-size:13px}#quest p{font-size:10px}#hint{display:none}#mobileControls{display:flex}.intro-card{padding:24px 19px}}
