:root{--color-bg-dark: rgba(13, 19, 26, .85);--color-border: rgba(42, 55, 68, .6);--color-text: #e9e2d0;--color-accent: #9be7a3;--color-hp: #5d9d71;--color-xp: #597dce;--radius: 12px;--blur: blur(8px)}body{margin:0;padding:0;background-color:#11161f;font-family:Inter,system-ui,sans-serif}#ui-layer{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:10;overflow:hidden}#ui-layer>*,.interactive{pointer-events:auto}.glass-panel{background:var(--color-bg-dark);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 8px 32px #0003;color:var(--color-text)}.hud-container{position:absolute;top:12px;left:12px;padding:12px 16px;display:flex;flex-direction:column;gap:8px;min-width:220px}.hud-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}.hud-level{font-weight:700;font-size:16px;color:var(--color-accent)}.hud-hp-text{font-size:13px;color:#b9c6d6}.progress-bar-container{width:100%;height:8px;background:#0006;border-radius:4px;overflow:hidden;position:relative}.progress-bar-fill{height:100%;border-radius:4px;transition:width .3s ease-out}.progress-bar-fill.hp{background:var(--color-hp);box-shadow:0 0 8px #5d9d7180}.progress-bar-fill.xp{background:var(--color-xp);height:4px;border-radius:2px;margin-top:4px}