/* ===== UI bits: score bar, particles, quest/event badges ===== */
#scorebar {
  position: relative; margin: 6px auto 4px; width: min(860px, 92vw);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Press Start 2P', monospace; color: #e9efff;
}
#scorebar .chip {
  display:inline-block; padding:6px 10px; border:2px solid var(--border,#2a3f9e);
  background:#0a0f20; border-radius:0; font-size:12px; line-height:1; 
}
#scorebar .title { opacity:.85 }
#scorebar .best { color:#ffd34d }

/* quest/event badges row */
#qebar {
  position: relative; margin: 0 auto 6px; width: min(860px, 92vw);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.badge {
  font-family: inherit; font-size: 10px; color:#cfe1ff; background:#0b1733;
  border: 2px solid var(--border,#2a3f9e); padding: 4px 6px; border-radius: 0;
}
.badge.done { color:#2cff7a; border-color:#2cff7a; background:#0d1f12; }

/* particles (+HYPE, -FUD, etc.) */
.fx {
  position:absolute; left:50%; bottom:36px; transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace; font-size: 11px; pointer-events:none;
}
.fx.up   { color:#2cff7a; }
.fx.down { color:#ff4e57; }
@keyframes fxFloat {
  from { transform: translate(-50%, 0); opacity:1 }
  to   { transform: translate(-50%, -26px); opacity:0 }
}
.fx { animation: fxFloat .9s ease-out forwards; }

/* animations for hero */
@keyframes blink { 0%,92%,100%{ transform: scaleY(1) } 96%{ transform: scaleY(0.05) } }
.sunglasses .eyes, #alon8 .eyes { transform-origin:center; animation: blink 5s infinite; }

@keyframes typeL { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
@keyframes typeR { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(3px) } }
#alon-character.typing .arm.left, #alon8.typing .arm.left  { animation: typeL .18s steps(2) infinite }
#alon-character.typing .arm.right,#alon8.typing .arm.right { animation: typeR .18s steps(2) infinite }

@keyframes banGlare { 0%{opacity:0} 30%{opacity:1} 100%{opacity:0} }
#alon-character .glare, #alon8 .glare { opacity:0 }
#alon-character.ban .glare, #alon8.ban .glare { animation: banGlare .25s linear 1 }

/* tiny helper if .hud-text had width:100% раньше */
.hud-text { width:auto }

/* ── Music button + tiny volume popover (8-bit) ── */
#ux-music{ position:relative; }
#vol-pop{
  position:absolute; right:0; top:44px; display:none; z-index:20;
  background:#0a0f20; border:2px solid var(--border,#2a3f9e); padding:6px; white-space:nowrap;
}
#vol-pop.open{ display:block; }
#vol-pop .vbtn{
  display:inline-block; min-width:28px; padding:4px 6px; margin:0 2px;
  text-align:center; border:2px solid var(--border,#2a3f9e); background:#0b1733; color:#e9efff;
  cursor:pointer; user-select:none;
}
#vol-pop .vlabel{ font-size:11px; color:#cfe1ff; margin-right:6px; }