Release Healer Man 0.1.29

src/styles.css

@@ -3711,3 +3711,67 @@ button.equipment-slot:hover { background: rgba(174,191,131,.1); }
   color: #bdb6a5;
   font-size: 0.68rem;
 }
+
+.arena-player-hud {
+  position: absolute;
+  z-index: 4;
+  left: 50%;
+  bottom: max(.6rem, env(safe-area-inset-bottom));
+  transform: translateX(-50%);
+  width: min(56rem, calc(100% - 1.2rem));
+  display: grid;
+  justify-items: center;
+  gap: .3rem;
+  pointer-events: none;
+}
+.arena-player-hud > .action-bar { position: relative; inset: auto; transform: none; width: min(100%, 38rem); pointer-events: auto; }
+.arena-player-status, .arena-cast-status, .arena-action-feedback {
+  padding: .25rem .6rem;
+  border: 1px solid #88966b77;
+  border-radius: .25rem;
+  background: #07130fe8;
+  text-align: center;
+  font-size: .75rem;
+}
+.arena-player-status { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
+.arena-player-status span { color: #d1dbc8; }
+.arena-action-feedback { color: #ffe4a1; }
+.arena-control-hints { font-size: .65rem; color: #e0e7d5; background: #07130fd9; padding: .2rem .4rem; text-align: center; }
+.arena-personal-bars { display: grid; gap: .25rem; max-width: 100%; pointer-events: auto; }
+.arena-personal-bars section { display: grid; gap: .2rem; max-width: 100%; }
+.arena-personal-bars button {
+  position: relative; width: clamp(2.6rem, 5vw, 4.1rem); min-width: 0; min-height: 3.9rem;
+  display: grid; justify-items: center; gap: .1rem; padding: .2rem;
+  border: 1px solid #9dad8277; background: #08130feb; color: #fff;
+}
+.arena-personal-bars button:disabled { opacity: .55; }
+.arena-personal-bars button kbd { position: absolute; top: .1rem; right: .2rem; z-index: 1; color: #fff5aa; font-size: .7rem; text-shadow: 1px 1px #000; }
+.arena-personal-bars button .action-slot__icon { width: 1.9rem; height: 1.9rem; }
+.arena-personal-bars button > span:last-of-type { font-size: .58rem; line-height: 1.15; overflow: hidden; }
+.arena-personal-bars button em { position: absolute; top: 1rem; font-size: .9rem; background: #000b; }
+.arena-runtime .arena-exit { z-index: 5; bottom: auto; top: .7rem; }
+.arena-result-panel { z-index: 8; }
+.arena-countdown { top: 28%; pointer-events: none; }
+@media (max-width: 760px) {
+  .arena-player-hud { width: calc(100% - .5rem); }
+  .arena-player-hud .action-slot strong { font-size: .55rem; }
+  .arena-player-hud .action-bar--compact { padding: .25rem; }
+  .arena-team-frames { width: min(10rem, 33vw); font-size: .72rem; }
+  .arena-team-frames button small { font-size: .55rem; }
+.arena-control-hints { font-size: .55rem; }
+  .arena-countdown { top: 38%; min-width: 8rem; padding: .4rem; }
+}
+.arena-toolbar { position: absolute; z-index: 6; right: .8rem; bottom: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; max-width: 26rem; justify-content: flex-end; }
+.arena-toolbar button, .arena-pet-orders button { padding: .35rem .6rem; background: #17241fe8; border: 1px solid #69837a; border-radius: .3rem; color: #dcece4; text-transform: capitalize; }
+.arena-reference-panel svg { display: block; width: 100%; height: 250px; background: #11201b; border: 1px solid #728376; }
+.arena-reference-panel { max-height: 85vh; overflow: auto; }
+.arena-ground-hint { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); z-index: 5; padding: .6rem 1rem; border-radius: .4rem; color: #c5ffdd; background: #13291dec; pointer-events: none; }
+.arena-summon-name { color: #e1eee4; font-size: 10px; white-space: nowrap; text-shadow: 0 1px 3px #000; pointer-events: none; }
+.arena-extra-resources, .arena-aura-strip, .arena-pet-orders { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; font-size: .7rem; }
+.arena-extra-resources span, .arena-aura-strip span { background: #12201dda; border: 1px solid #4a6860; border-radius: .25rem; padding: .2rem .4rem; }
+.arena-aura-strip img { width: 20px; height: 20px; vertical-align: middle; margin-right: .25rem; }
+.arena-aura-strip .is-debuff { border-color: #c65a58; }
+.arena-player-hud { bottom: 3rem; }
+.arena-combat-log { position: absolute; left: .7rem; top: 47%; color: #e4e3cc; font-size: .75rem; pointer-events: none; max-width: 18rem; }
+.arena-team-frames button.is-selected { outline: 2px solid #ffda8b; }
+@media (max-width: 760px) { .arena-toolbar { max-width: 100%; left: .5rem; justify-content: center; } .arena-toolbar button { font-size: .6rem; padding: .25rem; } }