Release Healer Man 0.1.4

src/styles.css

@@ -70,10 +70,13 @@ button { font: inherit; }
 .manastorm-affixes img { width: 10px; height: 10px; border-radius: 2px; object-fit: cover; }
 .manastorm-objective {
   position: absolute;
-  top: max(72px, calc(env(safe-area-inset-top) + 60px));
-  left: 50%;
+  top: max(184px, calc(env(safe-area-inset-top) + 172px));
+  right: max(12px, env(safe-area-inset-right));
+  left: auto;
   display: flex;
+  width: min(260px, calc(100vw - 24px));
   align-items: center;
+  justify-content: flex-start;
   gap: 7px;
   padding: 5px 10px;
   border: 1px solid rgba(174,203,211,.2);
@@ -82,8 +85,9 @@ button { font: inherit; }
   color: #d8e7e8;
   font-size: 7px;
   letter-spacing: .08em;
+  text-align: left;
   text-transform: uppercase;
-  transform: translateX(-50%);
+  transform: none;
   backdrop-filter: blur(7px);
 }
 .manastorm-objective > span { color: #ac73ef; font-size: 12px; }
@@ -1021,6 +1025,7 @@ kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; }
 .spellbook-panel__ranks li > p { grid-column: 1 / -1; margin: 2px 0 0; color: #b8c0b5; font-size: 8px; line-height: 1.35; }
 
 .talents-panel { width: min(1180px, 100%); max-height: calc(100vh - 28px); }
+.talents-panel--loading .game-panel__empty { display: grid; min-height: min(360px, 55vh); place-items: center; margin: 0; }
 .talents-panel__points { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; }
 .talents-panel__points strong { color: #f0d477; font: 700 27px Georgia, serif; }
 .talents-panel__points span { max-width: 55px; color: var(--muted); font-size: 8px; line-height: 1.1; text-transform: uppercase; }
@@ -1096,7 +1101,8 @@ kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; }
 .options-panel { width: min(670px, 100%); }
 .options-panel__list { margin-top: 10px; }
 .option-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 42px; padding: 6px 2px; border-bottom: 1px solid rgba(198,214,170,.09); }
-.option-row > span strong, .option-row > span small { display: block; }
+.option-row > span { min-width: 0; }
+.option-row > span strong, .option-row > span small { display: block; overflow-wrap: anywhere; }
 .option-row > span strong { font-size: 11px; }
 .option-row > span small { margin-top: 2px; color: var(--muted); font-size: 8px; }
 .option-row button { min-width: 68px; min-height: 29px; border: 1px solid rgba(191,209,159,.18); border-radius: 7px; background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; }
@@ -1105,6 +1111,9 @@ kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; }
 .option-stepper button { min-width: 30px; }
 .option-stepper output { font-size: 10px; text-align: center; }
 .options-panel__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+.options-panel__section-title { margin: 13px 0 3px; color: #f0d477; font: 700 13px Georgia, serif; letter-spacing: .04em; }
+.options-panel__combat-group { display: contents; }
+.option-audio-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
 
 .ability-bindings-panel { width: min(980px, 100%); max-height: calc(100vh - 28px); }
 .ability-bindings__layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
@@ -1282,6 +1291,9 @@ kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; }
   .action-bar__detail { width: 94px; margin-bottom: 18px; }
   .target-frame { top: 91px; width: 190px; }
   .spellbook-panel__list { grid-template-columns: 1fr; }
+  .options-panel .option-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
+  .options-panel .option-audio-controls { grid-column: 1 / -1; width: 100%; justify-content: space-between; }
+  .options-panel__actions { position: sticky; bottom: -1px; padding-top: 8px; background: linear-gradient(transparent, rgba(5,14,10,.99) 28%); }
   .talents-panel__workspace { grid-template-columns: minmax(0, 1fr); }
   .talent-tree-board { max-width: 250px; }
   .talent-tree-board__canvas { max-width: 202px; }
@@ -2370,17 +2382,27 @@ html[data-display-surface="bottom"] .single-context-toggle { display: none; }
   .manastorm-status > div strong { font-size: 14px; }
   .manastorm-status > p b { font-size: 9px; }
   .manastorm-status > p small { font-size: 5px; }
-  .manastorm-objective { top: 49px; padding-block: 3px; }
+  .manastorm-objective { top: max(156px, calc(env(safe-area-inset-top) + 144px)); width: min(220px, calc(100vw - 24px)); padding-block: 3px; }
   .manastorm-client-overlay { top: 76px; }
   .manastorm-countdown { min-width: 66px; padding-block: 4px; }
   .manastorm-safety-bubble { width: 156px; padding-block: 4px 5px; }
   .hud:has(.manastorm-client-overlay) .manastorm-cache-open { top: 120px; }
 }
 
+@media (max-width: 520px) {
+  .manastorm-objective {
+    top: max(104px, calc(env(safe-area-inset-top) + 94px));
+    right: 7px;
+    width: 92px;
+    padding-inline: 6px;
+    line-height: 1.35;
+  }
+}
+
 @media (max-width: 390px) {
   .manastorm-status { left: 8px; min-width: 0; max-width: calc(100vw - 116px); transform: none; }
   .manastorm-status > p small { overflow: hidden; max-width: 145px; text-overflow: ellipsis; white-space: nowrap; }
-  .manastorm-objective { top: 49px; left: 8px; max-width: calc(100vw - 116px); transform: none; }
+  .manastorm-objective { left: auto; max-width: 92px; }
   .manastorm-client-overlay { right: 8px; left: auto; max-width: calc(100vw - 16px); transform: none; }
 }