:root{--teal:#72C2CF;--teal2:#37A2B7;--ink:#111;--pill:rgba(20,20,30,.55);--red:#d11}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:'Fredoka',sans-serif;color:#fff;user-select:none;-webkit-user-select:none;touch-action:none}
#scene-container{position:fixed;inset:0}
#fx-scan{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);opacity:0;transition:opacity 2s}
#fx-noise{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;mix-blend-mode:screen}
#fx-red{position:fixed;inset:0;pointer-events:none;background:radial-gradient(transparent 40%,rgba(180,0,0,.6));opacity:0;transition:opacity .15s}
body.glitch #scene-container{filter:invert(1) hue-rotate(90deg)}
#topbar{position:fixed;top:0;left:0;right:0;height:42px;display:flex;justify-content:space-between;align-items:center;padding:0 10px;background:linear-gradient(rgba(0,0,0,.5),transparent);z-index:5}
.tb-left{display:flex;gap:10px;align-items:center}
.burger{width:34px;height:34px;border-radius:9px;background:var(--pill);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 8px}
.burger span{height:3px;background:#fff;border-radius:2px}
.gname{font-weight:700;text-shadow:0 2px 0 #000;font-size:15px}
.pill{background:var(--pill);padding:5px 12px;border-radius:20px;font-weight:700;margin-left:6px;font-size:14px}
#playerlist{position:fixed;top:50px;right:10px;width:170px;background:var(--pill);border-radius:10px;padding:6px 8px;font-size:13px;z-index:5}
.pl-h{font-weight:700;opacity:.7;margin-bottom:4px}
#plist div{padding:2px 0;transition:opacity 1s}
#plist .me{color:#ffe36e}
#plist .g6{color:#f55;font-family:'VT323',monospace;font-size:16px}
#objective{position:fixed;top:50px;left:10px;background:var(--pill);padding:6px 12px;border-radius:10px;font-size:14px;max-width:260px;z-index:5}
#chat{position:fixed;left:10px;bottom:10px;width:min(360px,60vw);z-index:6}
#chatlog{max-height:170px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-size:14px;text-shadow:0 1px 2px #000}
#chatlog div{background:rgba(0,0,0,.35);margin-top:2px;padding:2px 8px;border-radius:6px;animation:pop .3s}
#chatlog b{color:#8fe}
#chatlog .sys b{color:#ffcc33}
#chatlog .creep{font-family:'VT323',monospace;font-size:17px;color:#f66}
#chatin{width:100%;margin-top:4px;border:none;border-radius:8px;padding:7px 10px;font-family:inherit;background:rgba(0,0,0,.5);color:#fff;outline:none;font-size:14px}
#chatin:focus{background:rgba(0,0,0,.8);box-shadow:0 0 0 2px var(--teal)}
@keyframes pop{from{transform:translateY(6px);opacity:0}}
#prompt{position:fixed;left:50%;top:62%;transform:translateX(-50%);background:#fff;color:#111;font-weight:700;padding:8px 18px;border-radius:30px;box-shadow:0 4px 0 #0005;display:none;z-index:5}
#prompt kbd{background:#111;color:#fff;border-radius:6px;padding:1px 7px;margin-right:6px}
#cross{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0006;z-index:4}
#jobs{position:fixed;left:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:5}
#jobs button{font-family:inherit;font-weight:700;border:none;border-radius:12px;padding:8px 10px;background:#fff;box-shadow:0 4px 0 #0006;cursor:pointer;font-size:13px}
#jobs button.on{background:#ffe36e}
#servermsg{position:fixed;top:22%;left:50%;transform:translateX(-50%);font-size:clamp(18px,3vw,30px);font-weight:700;color:#ffcc33;text-shadow:0 3px 0 #000;text-align:center;opacity:0;transition:opacity .6s;z-index:7;pointer-events:none}
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;background:linear-gradient(var(--teal),var(--teal2))}
.overlay.soft{background:rgba(0,0,0,.55)}
.logo{width:80px;height:80px;background:#111;border-radius:14px;animation:spin 1.6s linear infinite;position:relative}
.logo:after{content:'';position:absolute;inset:28px;background:var(--teal)}
@keyframes spin{to{transform:rotate(360deg)}}
.overlay h1{font-size:clamp(34px,7vw,64px);margin:16px 0 4px;color:#111;font-weight:700;letter-spacing:-1px}
.bar{width:min(320px,80vw);height:12px;background:#0003;border-radius:8px;overflow:hidden;margin:10px}
#loadbar{height:100%;width:0;background:#111}
#loadtxt{color:#111;font-weight:700}
.tip{color:#123;opacity:.8}
.big{font-family:inherit;font-size:22px;font-weight:700;border:none;border-radius:16px;padding:12px 34px;background:#111;color:#fff;box-shadow:0 5px 0 #0007;cursor:pointer}
.small{font-size:13px;opacity:.8;text-align:center}
.err{background:#2b2d31;border-radius:12px;padding:20px 26px;max-width:360px;text-align:center;box-shadow:0 10px 40px #000}
.err-h{font-weight:700;font-size:20px;border-bottom:1px solid #fff2;padding-bottom:8px;margin-bottom:8px}
.err button{font-family:inherit;border:none;border-radius:8px;background:#fff;color:#111;padding:8px 30px;font-weight:700;cursor:pointer}
.kp{background:#1a0606;border:2px solid #600;border-radius:12px;padding:16px;font-family:'VT323',monospace}
#kpdisp{font-size:44px;text-align:center;color:#f33;letter-spacing:10px;margin-bottom:8px}
#kpgrid{display:grid;grid-template-columns:repeat(3,64px);gap:6px}
#kpgrid button,.kp>button,.jr button{font-family:'VT323',monospace;font-size:28px;background:#300;color:#fbb;border:1px solid #700;border-radius:6px;height:56px;cursor:pointer}
.kp>button{width:100%;margin-top:8px;height:40px;font-size:20px}
.jr{background:#f3ecd9;color:#2a2318;border-radius:6px;padding:20px;width:min(420px,90vw);max-height:80vh;overflow:auto;font-family:'VT323',monospace;font-size:20px;box-shadow:0 0 0 6px #0003}
.jr h2{margin:0 0 8px}.jr .note{border-bottom:1px dashed #0003;padding:6px 0}
.jr button{width:100%;height:40px;font-size:20px;margin-top:10px}
#console{position:fixed;top:0;left:0;right:0;height:40vh;background:rgba(0,0,0,.88);font-family:'VT323',monospace;color:#7f7;font-size:18px;padding:10px;z-index:30;overflow:auto;border-bottom:2px solid #0f0}
#scare{position:fixed;inset:0;background:#000;z-index:40;display:none;align-items:center;justify-content:center}
#scare.on{display:flex;animation:shake .08s infinite}
.face{width:60vmin;height:60vmin;background:#e8d36a;position:relative;filter:contrast(1.4)}
.eye{position:absolute;top:30%;width:14%;height:20%;background:#000;border-radius:50%;box-shadow:0 0 30px red inset}
.eye.l{left:22%}.eye.r{right:22%}
.mouth{position:absolute;left:20%;right:20%;bottom:16%;height:22%;background:#000;border-radius:0 0 50% 50%}
@keyframes shake{0%{transform:translate(4px,-3px)}50%{transform:translate(-5px,4px)}}
.end{text-align:center;padding:20px}
#ending{background:#000}
.glitch{color:#f22!important;font-family:'VT323',monospace;font-size:clamp(40px,9vw,90px)!important;text-shadow:3px 0 #0ff,-3px 0 #f0f;animation:shake .2s infinite}
.coords{font-family:'VT323',monospace;font-size:24px;color:#aaa}
.cryptic{font-family:'VT323',monospace;font-size:30px;color:#f55}
#lb{font-family:'VT323',monospace;font-size:18px;color:#ccc;margin:10px 0 20px}
#endtime{font-size:20px}
#mobile button{position:fixed;width:64px;height:64px;border-radius:50%;border:none;background:#fffc;font-weight:700;font-size:22px;font-family:inherit;z-index:8}
#mE{right:24px;bottom:110px}#mJ{right:100px;bottom:40px}#mC{right:24px;bottom:30px}
#joy{position:fixed;left:30px;bottom:200px;width:120px;height:120px;border-radius:50%;background:#fff3;border:2px solid #fff6;z-index:8}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#fffa}
#remix{position:fixed;right:10px;bottom:8px;font-size:11px;color:#fff;background:#c22;padding:3px 9px;border-radius:6px;text-decoration:none;z-index:9;opacity:.85}
body.touch #remix{bottom:auto;top:46px;right:190px}
body.touch #chat{bottom:auto;top:110px;width:46vw}
body.touch #chatlog{max-height:110px;font-size:12px}
body.touch #jobs{top:auto;bottom:16px;left:auto;right:110px;flex-direction:row;transform:none}
body.touch #jobs{display:none}