:root{--accent:#00e676;--text:#fff;--bg:#000}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:#fff;font-family:"Space Grotesk",system-ui,sans-serif;overflow:hidden;touch-action:none}
canvas{display:block}
#loading{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;z-index:20;font-family:monospace;color:#aaa;transition:opacity .4s}
#loading .brand{color:var(--accent);font-size:48px;font-weight:700}
#hud{position:fixed;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;z-index:5;flex-wrap:wrap}
#room{background:rgba(0,0,0,.7);border:1px solid #222;border-left:3px solid var(--accent);padding:8px 12px}
.eyebrow{display:block;font:11px monospace;color:var(--accent);text-transform:uppercase;letter-spacing:.1em}
#links{display:flex;gap:8px;pointer-events:auto;align-items:flex-start}
#links a{background:rgba(0,0,0,.7);border:1px solid var(--accent);color:var(--accent);padding:8px 10px;text-decoration:none;font:12px monospace}
#hint{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);border:1px solid #222;padding:8px 12px;font:12px monospace;color:#ccc;z-index:5;text-align:center;max-width:94vw}
#prompt{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);background:var(--accent);color:#000;padding:6px 12px;font:600 13px monospace;z-index:5}
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10}
#overlay[hidden],#prompt[hidden],#readBtn[hidden]{display:none}
.card{position:relative;background:#0a0a0a;border:1px solid var(--accent);max-width:560px;width:92vw;max-height:80vh;overflow:auto;padding:24px}
.card h2{margin:0 0 6px}.card p{line-height:1.5;color:#ddd}.card .meta{font:12px monospace;color:var(--accent);text-transform:uppercase}
.card a{color:var(--accent)}
#closeOv{position:absolute;top:8px;right:10px;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}
#joy{display:none;position:fixed;left:24px;bottom:70px;width:120px;height:120px;border-radius:50%;border:2px solid rgba(0,230,118,.5);background:rgba(0,0,0,.3);z-index:6}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(0,230,118,.7)}
#readBtn{position:fixed;right:24px;bottom:100px;width:72px;height:72px;border-radius:50%;background:var(--accent);color:#000;border:0;font:700 14px monospace;z-index:6}
#jumpBtn{display:none;position:fixed;right:24px;bottom:190px;width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.6);color:#00e676;border:2px solid #00e676;font:700 14px monospace;z-index:6}
@media (pointer:coarse){#joy{display:block}#jumpBtn{display:block}#hint{font-size:11px}}