* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a12; }
#gl-canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: none; }
#hud {
   position: fixed; top: 16px; left: 16px; z-index: 10;
   font-family: 'Courier New', monospace; color: rgba(220, 210, 255, 0.7);
   font-size: 13px; letter-spacing: 0.5px; pointer-events: none;
   text-shadow: 0 0 6px rgba(140, 120, 255, 0.3);
}
#hud > div { margin-bottom: 4px; transition: opacity 0.3s ease; }
#score-val, #state-val, #beat-val { font-weight: bold; }
#state-val.active { color: rgba(255, 200, 120, 0.9); }
#state-val.drift { color: rgba(150, 180, 255, 0.9); }