*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#e4e6eb;color:#333;font-family:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Nav */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;height:44px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{max-width:100%;height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center;gap:6px;text-decoration:none}
.nav-logo{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,#0052FF,#2563EB);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nav-wordmark{font-size:13px;font-weight:600;color:#333;letter-spacing:-.3px}
.nav-sep{color:#ccc;font-size:13px;font-weight:300}
.nav-project{font-size:13px;font-weight:700;color:#0052FF;letter-spacing:-.3px}
.nav-links{display:flex;align-items:center;gap:12px}
.nav-link{color:#888;text-decoration:none;font-size:12px;font-weight:500;transition:color .2s}
.nav-link:hover{color:#333}
.icon{width:14px;height:14px;display:block}

/* Canvas */
#canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:grab;margin-top:44px}
#canvas:active{cursor:grabbing}

/* HUD */
#hud-left{position:fixed;top:52px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:10;pointer-events:none}
.hud-pill{font-size:10px;font-family:'SF Mono','Menlo',monospace;color:#777;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);padding:3px 8px;border-radius:4px;border:1px solid rgba(0,0,0,.06);pointer-events:none}

/* Join CTA */
#join-cta{position:fixed;top:52px;right:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.06);border-radius:8px;padding:10px 14px;z-index:20;max-width:200px}
.join-title{font-size:11px;font-weight:600;color:#333;margin-bottom:6px}
.join-cmd{display:block;font-family:'SF Mono','Menlo',monospace;font-size:10px;color:#0052FF;background:rgba(0,82,255,.06);border:1px solid rgba(0,82,255,.12);padding:4px 8px;border-radius:4px;margin-bottom:6px;user-select:all;-webkit-user-select:all}
.join-link{font-size:10px;color:#888;text-decoration:none;transition:color .2s}
.join-link:hover{color:#0052FF}

/* Minimap */
#minimap-wrap{position:fixed;bottom:12px;right:10px;width:120px;height:120px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-radius:6px;overflow:hidden;z-index:20;box-shadow:0 2px 12px rgba(0,0,0,.06)}
#minimap{width:120px;height:120px;image-rendering:pixelated}
#minimap-vp{position:absolute;border:1.5px solid #0052FF;border-radius:1px;pointer-events:none;transition:all .15s ease-out}

/* Help */
#help-tip{position:fixed;bottom:12px;left:10px;z-index:20}
.help-icon{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#999;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.04);transition:all .2s}
.help-icon:hover{color:#0052FF;border-color:rgba(0,82,255,.3)}
.help-body{display:none;position:absolute;bottom:36px;left:0;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:12px 14px;min-width:180px;box-shadow:0 4px 20px rgba(0,0,0,.08);font-size:11px;line-height:1.6}
#help-tip.open .help-body{display:block}
.help-title{font-weight:700;color:#333;margin-bottom:6px;font-size:12px}
.help-row{display:flex;align-items:center;gap:8px;color:#666}
.help-key{display:inline-block;background:#f0f1f4;border:1px solid #ddd;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:600;color:#555;min-width:42px;text-align:center}
.help-sep{height:1px;background:#eee;margin:8px 0}
.help-note{color:#aaa;font-size:10px;line-height:1.5}

@media(max-width:600px){
  .nav-wordmark{display:none}
  .nav-sep{display:none}
  .nav-project{font-size:12px}
  .nav-links .nav-link:first-child{display:none}
  #join-cta{top:auto;bottom:140px;right:6px;max-width:170px;padding:8px 10px}
  .join-title{font-size:10px}
  .join-cmd{font-size:9px;padding:3px 6px}
  #minimap-wrap{width:80px;height:80px;bottom:8px;right:6px}
  #minimap{width:80px;height:80px}
  #hud-left{top:50px;left:6px}
  .hud-pill{font-size:9px;padding:2px 6px}
  #help-tip{bottom:8px;left:6px}
  .help-icon{width:24px;height:24px;font-size:11px}
  .help-body{min-width:160px;padding:10px 12px;font-size:10px}
}