*{box-sizing:border-box}html,body,#game{margin:0;width:100%;height:100%;overflow:hidden;background:#050505;color:#eee;font-family:Arial,Helvetica,sans-serif}body{touch-action:none}#game{position:fixed;inset:0}canvas{display:block}
#hud{position:fixed;inset:0;pointer-events:none;padding:18px;text-shadow:0 2px 5px #000}.top{display:flex;justify-content:space-between;align-items:flex-start}.top strong{display:block;font-size:14px;letter-spacing:.12em}.top small{display:block;color:#999;font-size:9px;margin-top:4px;letter-spacing:.1em}.top #clock{font-size:20px;font-variant-numeric:tabular-nums}.task{position:absolute;left:18px;bottom:25px;background:rgba(0,0,0,.62);border-left:2px solid #8f77c9;padding:11px 14px;max-width:80%;font-size:12px;backdrop-filter:blur(4px)}.task span{display:block;color:#888;font-size:8px;letter-spacing:.15em;margin-bottom:4px}.task b{font-weight:400}#message{position:absolute;left:50%;top:70%;transform:translateX(-50%);font-size:14px;text-align:center;opacity:0;transition:.2s;max-width:85%;line-height:1.4;background:rgba(0,0,0,.42);padding:8px 12px;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(4px)}.show{opacity:1!important}#prompt{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);padding:8px 12px;border:1px solid rgba(143,119,201,.45);background:rgba(8,9,10,.72);font-size:10px;letter-spacing:.08em;opacity:0;transition:.15s;white-space:nowrap;backdrop-filter:blur(4px)}.prompt-show{opacity:1!important}
#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:18px;color:rgba(255,255,255,.7);pointer-events:none}
#start{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at center,#24272b,#050607 72%);z-index:10}.panel{width:min(90%,460px);padding:34px;border:1px solid #3a3e42;background:rgba(9,10,11,.91);box-shadow:0 25px 80px #000;backdrop-filter:blur(10px)}.panel p{font-size:10px;letter-spacing:.2em;color:#a9afb3;margin:0 0 12px}.panel h1{font-size:32px;margin:0 0 12px}.panel span{color:#9da2a6;font-size:13px;line-height:1.5}.panel button{display:block;margin-top:28px;width:100%;padding:14px;border:1px solid #bfc3c5;background:#eceeef;color:#0b0c0d;font-weight:bold;cursor:pointer}.panel small{display:block;margin-top:14px;color:#555;font-size:9px}
#mobile{display:none;position:fixed;inset:0;pointer-events:none}.mobile-on #mobile{display:block}.mobile-on #crosshair{display:none}#stick{position:absolute;left:24px;bottom:28px;width:112px;height:112px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.25);pointer-events:auto;box-shadow:0 10px 30px rgba(0,0,0,.25)}.mobile-on #knob{position:absolute;left:31px;top:31px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.2);box-shadow:0 3px 10px rgba(0,0,0,.2)}#interact{position:absolute;right:25px;bottom:32px;pointer-events:auto;border:1px solid rgba(143,119,201,.55);background:rgba(0,0,0,.52);color:#fff;border-radius:50%;width:72px;height:72px;font-size:9px;box-shadow:0 10px 30px rgba(0,0,0,.28)}#touchHint{position:absolute;right:18px;top:18px;padding:8px 10px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.35);color:#aaa;font-size:8px;letter-spacing:.08em;pointer-events:none}
@media(max-width:700px){.top{padding:2px}.task{bottom:155px}.panel h1{font-size:26px}.task{max-width:88%}#prompt{top:49%;font-size:9px}.message{max-width:85%}}