.hudbar.is-actionbar {
  --ab-h: 4.05rem;
  --ab-r: .62rem;
  --ab-gap: .4rem;
  display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0;
}
.ab-row { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .55rem .6rem; }
.ab-group { display: flex; align-items: center; gap: var(--ab-gap); min-width: 0; }
.ab-group + .ab-group { padding-left: .5rem; border-left: 1px solid rgba(242, 198, 106, .15); }
.ab-group.is-acts { margin-left: auto; }
.ab-cap { display: flex; align-items: center; gap: .3rem; min-width: 0; font: 700 .58rem/1.15 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-cap .dg-glyph { flex: none; width: .9rem; height: .9rem; }
.ab-note { display: flex; align-items: center; gap: .45rem; margin: 0; padding: 0 .3rem; font-size: .86rem; color: var(--text-3); white-space: nowrap; }
.ab-note .ia-glyph { width: .95rem; height: .95rem; }

.ab-slot {
  position: relative; flex: none; display: grid; place-items: center;
  width: var(--ab-h); height: var(--ab-h); padding: 0;
  border-radius: var(--ab-r); border: 1px solid rgba(255, 255, 255, .09);
  background: radial-gradient(120% 110% at 50% 18%, var(--well-top) 0%, #0f1828 55%, var(--well-bottom) 100%);
  box-shadow: inset 0 .15rem .45rem rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .04);
  color: inherit; transition: border-color .15s, box-shadow .15s;
}
button.ab-slot { cursor: pointer; }
button.ab-slot:hover { border-color: var(--edge-strong); box-shadow: inset 0 .15rem .45rem rgba(0, 0, 0, .75), 0 0 .55rem rgba(242, 198, 106, .25); }
.ab-art { display: grid; place-items: center; width: 70%; height: 70%; pointer-events: none; }
.ab-art > img, .ab-art > .ia-emblem, .ab-art > .spell-icon { width: 100%; height: 100%; object-fit: contain; }
.ab-art > img, .ab-art > .ia-emblem { filter: drop-shadow(0 .12rem .12rem rgba(0, 0, 0, .7)); }
.ab-slot .ab-count { right: .26rem; bottom: .16rem; font-size: .84rem; }
.ab-corner { position: absolute; left: .26rem; top: .2rem; display: inline-flex; align-items: center; font: 700 .62rem/1 var(--font-num); color: var(--gold-2); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; }
.ab-corner .ia-glyph { width: .8rem; height: .8rem; }
.ab-ready { position: absolute; right: -.32rem; top: -.32rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #2a1a07; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); pointer-events: none; }
.ab-ready .ia-glyph { width: .72rem; height: .72rem; }
.ab-slot.is-warn { border-color: rgba(255, 143, 79, .7); box-shadow: inset 0 .15rem .45rem rgba(0, 0, 0, .75), inset 0 -.8rem 1rem -.7rem rgba(255, 143, 79, .5); }
.ab-slot.is-warn .ab-count { color: var(--ember); }
.ab-slot.is-empty, .ab-slot.is-ghost { border-style: dashed; border-color: rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .28); box-shadow: none; }
.ab-slot.is-empty .ab-art, .ab-slot.is-ghost .ab-art { opacity: .45; filter: grayscale(.7); }
.ab-slot.is-ghost .ab-corner { color: var(--text-2); }
.hudbar.is-actionbar .hud-eat { flex: none; min-height: 0; height: var(--ab-h); padding: 0 .9rem 0 .75rem; gap: .45rem; border-radius: var(--ab-r); font-size: 1rem; }
.hudbar.is-actionbar .hud-eat .ia-emblem { width: 1.45rem; height: 1.45rem; }
.hudbar.is-actionbar .hud-eat small { font-size: .68rem; }
.hudbar.is-actionbar .ab-slot.is-food { border-top-right-radius: .22rem; border-bottom-right-radius: .22rem; }
.hudbar.is-actionbar .ab-slot.is-food + .hud-eat { margin-left: calc(.18rem - var(--ab-gap)); border-top-left-radius: .22rem; border-bottom-left-radius: .22rem; }

.ab-control {
  flex: none; display: grid; grid-template-areas: "cap cue" "value cue"; grid-template-columns: minmax(0, 1fr) auto;
  align-content: center; column-gap: .5rem; row-gap: .14rem;
  height: var(--ab-h); min-width: 0; max-width: 11rem; padding: 0 .6rem 0 .8rem;
  border-radius: var(--ab-r); border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .045);
  color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.ab-control.has-art { grid-template-areas: "art cap cue" "art value cue"; grid-template-columns: 2.35rem minmax(0, 1fr) auto; padding-left: .45rem; }
.ab-control > .ab-cap { grid-area: cap; }
.ab-control > .ab-value { grid-area: value; }
.ab-control > .ab-cue { grid-area: cue; align-self: center; width: .85rem; height: .85rem; color: var(--text-3); }
.ab-control-art { grid-area: art; position: relative; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; }
.ab-control-art .ab-tag { position: absolute; left: -.3rem; top: -.35rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.ab-control-art > img, .ab-control-art > .ia-emblem { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .12rem .12rem rgba(0, 0, 0, .7)); }
.ab-value { display: flex; align-items: baseline; gap: .4rem; min-width: 0; font: 400 1.04rem/1.15 var(--font-display); color: var(--gold-0); white-space: nowrap; }
.ab-value > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ab-tag { flex: none; padding: .02rem .36rem; border-radius: .35rem; background: #3a2c12; border: 1px solid rgba(242, 198, 106, .45); font: 700 .64rem/1.3 var(--font-num); color: var(--gold-1); }
.ab-control:hover, .ab-control[aria-expanded="true"] { border-color: rgba(242, 198, 106, .5); background: rgba(242, 198, 106, .09); }
.ab-control:hover .ab-cue, .ab-control[aria-expanded="true"] .ab-cue { color: var(--gold-1); }
.ab-anchor { position: relative; display: flex; }

.ab-status {
  flex: none; display: grid; align-content: center; gap: .1rem;
  height: var(--ab-h); min-width: 10rem; max-width: 13.5rem; padding: 0 .8rem;
  border-radius: var(--ab-r); border: 1px solid color-mix(in srgb, var(--skill, var(--gold-2)) 42%, transparent); background: rgba(255, 255, 255, .045);
  color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.ab-status-main { display: flex; align-items: center; gap: .28rem; min-width: 0; white-space: nowrap; }
.ab-status-main > b { font: 700 1.02rem/1.1 var(--font-num); color: var(--text-1); }
.ab-status-main > small { font-size: .72rem; color: var(--text-3); }
.ab-status-main > .dg-pips, .ab-status-main > .bar { flex: 1; min-width: 3.4rem; height: .32rem; margin-left: .5rem; }
.ab-status-main > .bar { background: rgba(255, 255, 255, .1); box-shadow: none; }
.ab-status-main > .bar > i { background: var(--skill, var(--gold-2)); box-shadow: none; }
.ab-status > em { font-style: normal; font-size: .7rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-status:hover, .ab-status.is-active { border-color: var(--edge-strong); background: rgba(242, 198, 106, .08); }
.ab-status.is-shielded { border-color: rgba(154, 164, 184, .65); }
.ab-status.is-shielded > em { color: #dbe2ee; }
.ab-status.is-core { border-color: rgba(240, 166, 74, .7); }
.ab-status.is-core > em { color: #ffd39c; }

.ab-stat { flex: none; display: grid; align-content: center; gap: .1rem; height: var(--ab-h); min-width: 0; padding: 0 .25rem; }
.ab-stat > b { display: flex; align-items: center; gap: .3rem; font: 400 1.12rem/1.1 var(--font-num); color: var(--text-1); white-space: nowrap; }
.ab-stat > b .item-img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.ab-stat > em { font-style: normal; font-size: .7rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-stat > em b { font-weight: 600; color: var(--text-2); }
.ab-stat.is-ended > b { color: #ff9f8a; }

.ab-button {
  flex: none; display: inline-flex; align-items: center; gap: .55rem;
  height: var(--ab-h); padding: 0 .9rem 0 .7rem;
  border-radius: var(--ab-r); border: 1px solid rgba(242, 198, 106, .42); background: linear-gradient(180deg, rgba(242, 198, 106, .13), rgba(242, 198, 106, .06));
  color: var(--gold-1); text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.ab-button > .ia-emblem { flex: none; width: 1.75rem; height: 1.75rem; }
.ab-button-copy { display: grid; gap: .14rem; min-width: 0; }
.ab-button-copy strong { font: 650 .95rem/1.1 var(--font-ui); color: var(--gold-1); }
.ab-button-copy small { display: inline-flex; align-items: center; gap: .22rem; font-size: .72rem; color: var(--text-2); white-space: nowrap; }
.ab-button-copy small .ia-emblem { width: .95rem; height: .95rem; }
.ab-button-copy small b { font: 600 .74rem var(--font-num); color: var(--text-1); }
.ab-button-copy small b.t-gold { color: var(--gold-1); }
.ab-dot { color: var(--text-4); margin: 0 .1rem; }
.ab-button:hover, .ab-button.is-active { border-color: var(--gold-2); background: rgba(242, 198, 106, .18); }
.ab-stop {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: var(--ab-h); min-width: 5.4rem; padding: 0 1rem 0 .85rem;
  border-radius: var(--ab-r); border: 1px solid rgba(255, 93, 87, .55); background: linear-gradient(180deg, rgba(255, 93, 87, .2), rgba(255, 93, 87, .1));
  color: #ff9a94; font: 650 .98rem var(--font-ui); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.ab-stop .ia-glyph { width: 1rem; height: 1rem; }
.ab-more { display: none; }
.ab-stop:hover:not(:disabled) { border-color: #ff8a84; background: rgba(255, 93, 87, .26); color: #ffc0bb; }
.ab-stop:disabled { opacity: .55; }

.ab-moment { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .45rem .65rem; border-bottom: 1px solid rgba(242, 198, 106, .22); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: linear-gradient(180deg, rgba(242, 198, 106, .1), rgba(242, 198, 106, .03)); }
.ab-choice { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ab-choice > .ab-cap { color: var(--gold-2); }
.ab-seg { margin: 0; }
.ab-seg button { display: inline-flex; align-items: baseline; gap: .32rem; padding: .32rem .62rem; font-size: .85rem; line-height: 1.15; white-space: nowrap; }
.ab-seg button small { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.ab-choice.is-drift { gap: .55rem; }
.ab-choice.is-drift .dg-drift-icon { width: 1.9rem; height: 1.9rem; }
.ab-choice.is-drift.is-open .dg-drift-icon { color: #f0a64a; }
.ab-choice.is-drift .dg-drift-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; }

.hudbar.is-actionbar .hud-pop.ab-pop { left: 50%; right: auto; bottom: calc(100% + 1.05rem); width: max-content; min-width: 12.5rem; max-width: 22rem; translate: -50% 0; padding: .6rem .6rem .65rem; }
.ab-choices { display: grid; gap: .3rem; margin-top: .45rem; }
.ab-choices button { display: grid; justify-items: start; gap: .12rem; padding: .45rem .75rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04); color: var(--text-2); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.ab-choices button b { font: 600 .95rem/1.15 var(--font-ui); color: var(--text-1); }
.ab-choices button small { font-size: .72rem; color: var(--text-3); }
.ab-choices button:hover:not(:disabled) { border-color: rgba(242, 198, 106, .45); background: rgba(242, 198, 106, .07); }
.ab-choices button[aria-pressed="true"] { border-color: var(--gold-2); background: rgba(242, 198, 106, .15); }
.ab-choices button[aria-pressed="true"] b { color: var(--gold-1); }
.hud-pop.is-loot header { justify-content: flex-start; gap: .75rem; }
.hud-pop.is-loot header > strong { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-tabs button { padding: .3rem .85rem; font-size: .82rem; }

@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .world-foot > .hudbar.is-actionbar { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; }
  .is-hud .world-foot .hudbar.is-actionbar .hud-pop { left: 0; right: 0; }
  .is-hud .world-foot .hudbar.is-actionbar > .hud-pop:not(.ab-pop) { right: auto; width: max(100%, 46rem); }
  .is-hud .world-foot .hudbar.is-actionbar .hud-pop.ab-pop { left: 50%; right: auto; }
  .is-hud .world-foot .hudbar.is-actionbar .hud-eat { padding: 0 .9rem 0 .75rem; font-size: 1rem; }
  .is-hud .world-foot .ab-row { flex-wrap: wrap; row-gap: .45rem; }
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .hudbar.is-actionbar { --ab-h: 3.35rem; --ab-gap: .35rem; padding: 0; }
  .ab-row { flex-wrap: wrap; gap: .45rem; padding: .5rem; }
  .ab-group { flex-wrap: wrap; }
  .ab-group + .ab-group { padding-left: 0; border-left: 0; }
  .ab-control { max-width: 100%; }
  .ab-group.is-status, .ab-group.is-stats { flex: 1 1 calc(100% - 6.8rem); }
  .ab-row:has(.ab-button) .ab-group.is-status, .ab-row:has(.ab-button) .ab-group.is-stats { flex-basis: calc(100% - 15.5rem); }
  .ab-row:not(:has(.ab-group.is-status, .ab-group.is-stats)) .ab-group.is-acts { flex: 1 1 100%; }
  .ab-group.is-acts { justify-content: flex-end; flex-wrap: nowrap; }
  .ab-row:not(:has(.ab-group.is-status, .ab-group.is-stats)) .ab-button { flex: 1 1 auto; }
  .ab-status { flex: 1 1 auto; max-width: none; }
  .ab-moment { padding: .5rem; }
  .ab-choice { flex: 1 1 100%; flex-wrap: wrap; gap: .35rem .6rem; }
  .ab-seg { display: flex; width: 100%; }
  .ab-seg button { flex: 1 1 0; justify-content: center; min-height: 2.4rem; }
  .fx-layer:has(.loot-pop, .loot-tally) { padding-bottom: calc(var(--nav) + var(--foot-h) + .8rem); }
  .hudbar.is-actionbar .hud-pop.ab-pop { left: 0; translate: none; }
  .ab-choices button { min-height: 2.8rem; }
  .ab-cap { font-size: .9rem; letter-spacing: .08em; }
  .ab-corner, .ab-tag, .ab-status-main > small, .ab-status > em, .ab-stat > em, .ab-button-copy small, .ab-button-copy small b, .ab-seg button small, .ab-choices button small,
  .hudbar.is-actionbar .hud-eat small, .ab-slot .ab-count { font-size: .9rem; }
  .ab-seg button, .ab-tabs button, .ab-choices button { min-height: 3.3rem; font-size: .95rem; }
  .ab-seg button { align-items: center; }
  .ab-status, .ab-stat { height: auto; min-height: var(--ab-h); padding-top: .3rem; padding-bottom: .3rem; }
}