.hud{display:flex;align-items:center;gap:16px;padding:4px 2px 10px}
.hud-item{display:flex;flex-direction:column;min-width:56px}
.hud-item .label{font-size:.75rem;color:var(--muted)}
.hud-item b{font-size:1.4rem;font-variant-numeric:tabular-nums}
#hud-score.bump{animation:bump .18s ease-out}
@keyframes bump{50%{transform:scale(1.25);color:var(--snack)}}
.hud-actions{margin-left:auto;display:flex;gap:6px}

#arena-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.arena-box{position:relative;border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line),0 0 30px rgba(34,211,238,.12)}
#arena{touch-action:none}

.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:16px;text-align:center;background:rgba(7,11,26,.78);backdrop-filter:blur(2px)}
.overlay h2{font-size:1.8rem;color:var(--cyan)}
.overlay.danger h2{color:var(--danger)}
.overlay.win h2{color:var(--snack)}
.overlay p{color:var(--muted);max-width:28ch}
.ov-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}

.dpad{display:none;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,56px);gap:6px;
  justify-content:center;padding-top:10px;touch-action:none}
.dpad button{border-radius:14px;background:var(--panel-2);border:1px solid var(--line);font-size:1.2rem;touch-action:none}
.dpad button:active{background:var(--cyan);color:#021a22}
.dpad .up{grid-column:2;grid-row:1}
.dpad .left{grid-column:1;grid-row:2}
.dpad .down{grid-column:2;grid-row:2}
.dpad .right{grid-column:3;grid-row:2}

.hud-extra{display:flex;gap:16px}

#arena-wrap{touch-action:none}
#ov-text{white-space:pre-line;max-width:34ch}
.overlay{animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.arena-box.shake{animation:shake .32s}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}