html,body{height:100%;margin:0;background:#eee;font-family:system-ui,Segoe UI,Arial}
canvas{display:block;width:100%;height:100vh;background:#fff}
#cursor{
    position:fixed;
    width:20px;
    height:20px;
    margin-left:-10px; margin-top:-10px;
    border-radius:50%;
    background:#e33;
    box-shadow:0 0 6px rgba(0,0,0,.25);
    pointer-events:none;
    z-index:20;
}

#hud{
    position:fixed;left:8px;top:8px;padding:8px 10px;border-radius:8px;
    background:rgba(0,0,0,.6);color:#fff;font-size:13px;z-index:25;
}
.hint{opacity:.85;margin-top:6px;font-size:12px}
#menu{
    position:fixed;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:240px;
    background:rgba(0,0,0,.75);
    color:#fff;
    padding:12px;
    border-radius:10px;
    box-shadow:0 8px 30px rgba(0,0,0,.35);
    z-index:30;
    display:none;
}
#menu .menu-title{font-weight:700;margin-bottom:8px}
.menu-items{display:flex;flex-direction:column;gap:8px}
.menu-item{padding:8px;border-radius:6px;background:rgba(255,255,255,0.03);display:flex;justify-content:space-between;align-items:center}
.menu-item.selected{outline:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,0.06)}
.menu-foot{margin-top:10px;font-size:12px;opacity:.85}

#menu.open{display:block}