:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;background:#071019}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071019}canvas{display:block}
#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 2px 10px #000b}
#topbar{position:absolute;left:16px;top:14px;display:flex;gap:9px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 245px)}
.pill{background:#08111ddd;border:1px solid #ffffff22;border-radius:999px;padding:8px 12px;font-size:12px;backdrop-filter:blur(10px);box-shadow:0 8px 28px #0005}
#title{font-weight:900;letter-spacing:.09em}#mode{color:#8fdcff}.accent{color:#ffd98a}
#crosshair{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);opacity:.72}
#crosshair:before,#crosshair:after{content:"";position:absolute;background:#fff;border-radius:2px;box-shadow:0 0 8px #000}
#crosshair:before{width:10px;height:2px;left:0;top:4px}.crosshair:after{width:2px;height:10px;left:4px;top:0}
#prompt{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);padding:11px 16px;background:#06101ddd;border:1px solid #ffffff28;border-radius:13px;font-size:14px;opacity:0;transition:opacity .15s;white-space:nowrap}
#help{position:absolute;right:15px;bottom:15px;max-width:420px;padding:12px 14px;background:#061019d9;border:1px solid #ffffff20;border-radius:13px;font-size:12px;line-height:1.55;backdrop-filter:blur(10px)}
#help b{color:#fff}#help span{color:#aebdce}
#map{position:absolute;right:15px;top:15px;width:190px;height:190px;border-radius:15px;border:1px solid #ffffff2a;background:#071019e8;overflow:hidden;box-shadow:0 16px 50px #0008}
#map canvas{width:100%;height:100%}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#09131c,#071018);color:#fff;font-size:16px;z-index:20;transition:opacity .5s}
#loading.hide{opacity:0;pointer-events:none}.sub{opacity:.65;font-size:12px;margin-top:5px}.brand{font-size:26px;font-weight:900;letter-spacing:.08em}
#toast{position:absolute;left:50%;top:20%;transform:translate(-50%,-50%);padding:12px 16px;border-radius:12px;background:#061019e8;border:1px solid #ffffff1f;opacity:0;transition:opacity .2s;max-width:min(600px,90vw);text-align:center}
#clickToPlay{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#071018b0,#07101855);z-index:15;opacity:0;pointer-events:none;transition:opacity .2s}
#clickToPlay.show{opacity:1;pointer-events:auto}.card{padding:24px 28px;border:1px solid #ffffff22;background:#08111de8;border-radius:18px;box-shadow:0 20px 80px #0009;text-align:center;backdrop-filter:blur(12px)}
.card h1{margin:0 0 8px;font-size:24px}.card p{margin:0;color:#b6c5d6;font-size:13px}