#ui-layer > .arena-interface {
  --arena-red: #ef3b2d;
  --arena-cyan: #60d9ff;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 310;
  color: #eee9df;
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
}

#ui-layer > .arena-interface.hidden,
.arena-interface .hidden { display: none !important; }

.arena-hud {
  position: absolute;
  top: calc(var(--hud-bottom, 50px) + 8px);
  left: 50%;
  translate: -50% 0;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px 18px;
  align-items: center;
  padding: 9px 14px;
  background: linear-gradient(100deg, rgba(5,7,15,.94), rgba(17,23,34,.88));
  border: 1px solid rgba(96,217,255,.34);
  border-left: 4px solid var(--arena-red);
  box-shadow: 0 10px 34px rgba(0,0,0,.42);
  letter-spacing: .11em;
  font: 11px/1.2 monospace;
}
.arena-hud > * { white-space: nowrap; }

.arena-hud::after,
.arena-beacon::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background-image: linear-gradient(rgba(96,217,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(96,217,255,.035) 1px, transparent 1px);
  background-size: 12px 12px;
}

.arena-kicker {
  grid-column: 1 / -1;
  color: var(--arena-red);
  font: 9px/1.1 monospace;
  letter-spacing: .2em;
}

#arenaWave { color: white; font-size: 14px; }
#arenaEnemies { color: var(--arena-red); }
#arenaDifficulty { color: var(--arena-cyan); }
#arenaRunReward { color: #a58aff; }

.arena-interface .arena-beacon {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: max(24px, calc(var(--hud-bottom, 0px) + 16px));
  translate: -50% 0;
  width: min(650px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 18px;
  overflow: hidden;
  background: rgba(5,7,15,.95);
  border: 1px solid rgba(238,233,223,.18);
  border-top: 3px solid var(--arena-red);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}

.arena-beacon h2 { margin: 6px 0; letter-spacing: .13em; font-size: 24px; }
.arena-beacon p { margin: 7px 0 13px; color: rgba(238,233,223,.72); font: 12px/1.45 monospace; }
.arena-summary { display: flex; gap: 20px; color: var(--arena-cyan); font: 11px monospace; }
.arena-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; position: relative; z-index: 1; }
.arena-actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--arena-red);
  background: var(--arena-red);
  color: white;
  font: 700 11px monospace;
  letter-spacing: .08em;
  cursor: pointer;
}
.arena-actions .arena-secondary { background: #111722; border-color: rgba(96,217,255,.45); color: var(--arena-cyan); }
.arena-actions .arena-danger { margin-left: auto; background: transparent; color: #eee9df; }
.arena-actions button:disabled { opacity: .42; cursor: default; }

.arena-boss {
  position: absolute;
  top: 116px;
  left: 50%;
  translate: -50% 0;
  width: min(520px, calc(100vw - 36px));
  text-align: center;
  color: #eee9df;
  font: 11px monospace;
  letter-spacing: .16em;
}
.arena-boss > div { height: 8px; margin-top: 6px; padding: 2px; border: 1px solid rgba(239,59,45,.7); background: #05070f; }
.arena-boss i { display: block; height: 100%; background: linear-gradient(90deg, #ef3b2d, #ff8a46); transition: width .15s linear; }

@media (max-width: 620px) {
  .arena-hud { top: calc(var(--hud-bottom, 125px) + 164px); width: calc(100vw - 28px); grid-template-columns: 1fr 1fr; box-sizing: border-box; gap: 5px 10px; }
  .arena-beacon { bottom: 12px; }
  .arena-actions button { flex: 1 1 44%; }
  .arena-actions .arena-danger { margin-left: 0; flex-basis: 100%; }
}

@media (max-height: 600px) and (min-width: 621px) {
  .arena-hud { left: calc(50% + 72px); }
}