body,html{margin:0;padding:0;width:100%;height:100%;background-color:#0a0a0a;color:#e0e0e0;font-family:Courier New,Courier,monospace;overflow:hidden}canvas{display:block}#hud{position:absolute;top:20px;left:20px;pointer-events:none;opacity:1;transition:opacity .3s ease;background:#000000d9;border:1px solid #333;padding:15px;border-radius:4px;font-family:Courier New,monospace;min-width:250px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mode-controls{position:absolute;top:20px;right:20px;display:flex;gap:10px}.mode-btn{background:#0009;border:1px solid #444;color:#888;padding:8px 16px;font-family:Courier New,monospace;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mode-btn:hover{border-color:#fff;color:#fff}.mode-btn.active{background:#ffffff1a;border-color:#fff;color:#fff;text-shadow:0 0 5px rgba(255,255,255,.5)}.hud-section{margin-bottom:15px;border-bottom:1px solid #333;padding-bottom:10px}.hud-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.hud-title{font-size:12px;color:#888;margin-bottom:8px;font-weight:700}.hud-row{display:flex;align-items:center;font-size:12px;margin-bottom:4px;height:16px}.label{width:70px;color:#aaa}.bar-container{flex-grow:1;height:4px;background:#222;margin:0 10px;position:relative}.bar{height:100%;background:#fff;width:0%;transition:width .2s}.value{width:60px;text-align:right;color:#fff;font-weight:700}.hud-info{font-size:11px;color:#666;line-height:1.4;white-space:pre-wrap}.controls-hint{position:absolute;bottom:20px;right:20px;font-size:12px;color:#333;pointer-events:none;opacity:.5}