.eqd { --cell: 5.6rem; --gap: calc(var(--cell) * .1); position: relative; display: grid; grid-template-columns: repeat(3, var(--cell)); grid-template-rows: repeat(5, var(--cell)); gap: var(--gap); justify-content: center; }
.eqd-bones { position: absolute; top: 0; left: 50%; width: calc(3 * var(--cell) + 2 * var(--gap)); height: calc(5 * var(--cell) + 4 * var(--gap)); translate: -50% 0; overflow: visible; pointer-events: none; }
.eqd-bones path { fill: none; stroke: rgba(242, 198, 106, .3); stroke-width: 1px; }
.eqd-cell { position: relative; min-width: 0; min-height: 0; }
.eqd-cell > .well { width: 100%; height: 100%; aspect-ratio: auto; border-radius: calc(var(--cell) * .14); }
.eqd-cell > .well > img { width: 62%; height: 62%; }
.eqd-cell > .well.is-ghost > img { width: 56%; height: 56%; }
.eqd-cell > .well .qty { font-size: max(.72rem, calc(var(--cell) * .17)); }
.eqd-cell > .well .spell-icon { width: 64%; height: 64%; }
.eqd-cell > .well .ia-emblem { width: 55%; height: 55%; }
.eqd-ammo.is-warn { border-color: color-mix(in srgb, var(--ember) 55%, transparent); }
.eqd-cell .eqd-pips { position: absolute; left: 50%; bottom: calc(var(--cell) * .07); translate: -50% 0; gap: .16rem; min-height: 0; pointer-events: none; }
.eqd-cell .eqd-pips .pk-pip { width: max(.34rem, calc(var(--cell) * .075)); height: max(.34rem, calc(var(--cell) * .075)); }
.eqd-cell .eqd-pips .pk-anvil { width: max(.6rem, calc(var(--cell) * .13)); height: max(.6rem, calc(var(--cell) * .13)); }
.pk-pips.r-uncommon { --pip: var(--rar-uncommon); } .pk-pips.r-rare { --pip: var(--rar-rare); } .pk-pips.r-epic { --pip: var(--rar-epic); }
.pk-pips.r-legendary { --pip: var(--rar-legendary); } .pk-pips.r-mythic { --pip: var(--rar-mythic); } .pk-pips.r-common { --pip: var(--rar-common); }
.pc-slot > .pc-pips { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; gap: .16rem; pointer-events: none; }
.eqd-rank { position: absolute; right: calc(var(--cell) * .07); top: calc(var(--cell) * .05); font: 700 max(.7rem, calc(var(--cell) * .15))/1 var(--font-num); color: var(--gold-1); text-shadow: 0 1px 0 #000, 0 0 .2rem #000; pointer-events: none; }
.eqd.is-compact { --cell: 4.4rem; }
@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) { .is-hud .hud-panel .eqd.is-compact { --cell: clamp(3.4rem, calc((100vh - 29rem) / 5.4), 4.4rem); } }
.eqd-open { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.eqd-open .ia-emblem { flex: none; width: 1.2rem; height: 1.2rem; }

.gear-body .eqd.is-compact { --cell: min(4.8rem, calc((100vw - 3rem) / 3.4)); margin: .2rem 0; }

.eqw-page { container: eqw / inline-size; display: flex; flex-direction: column; gap: 1rem; }
.eqw-tabs { display: none; }
.eqw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(22rem, 1.15fr) minmax(20rem, 1fr); grid-template-rows: minmax(0, 1fr); gap: 1.2rem; }
.eqw-side { display: contents; }
.eqw-col { display: flex; flex-direction: column; gap: .8rem; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(242, 198, 106, .5) transparent; padding: 0 .35rem .35rem 0; }
.eqw-col > .win-caps { flex: none; display: flex; align-items: baseline; gap: .5rem; }
.eqw-space { margin-left: auto; font-size: .82rem; letter-spacing: .02em; text-transform: none; color: var(--text-3); }
.eqw-doll { align-items: center; }
.eqw-doll > .win-caps { align-self: stretch; }
.eqw-doll { --cell: 5.6rem; }
.eqw-doll .eqd { --cell: inherit; }
.eqw-doll .stance-row { width: calc(3 * var(--cell) + .6rem); max-width: 100%; }
.eqw-doll .stance-picker { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.eqw-doll .stance-picker button { border-radius: .5rem; }
.eqw-doll .stance-auto { width: 100%; }
.eqw-loadout .lo-cards { gap: .6rem; }
.eqw-phone-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; }
.eqw-phone-head > .ia-emblem { width: 2.4rem; height: 2.4rem; }
.eqw-phone-head h1 { margin: 0; font-size: 1.5rem; }
.eqw-phone-head small { color: var(--text-3); }
.eqw-phone-head small b { color: var(--gold-1); font-weight: 600; }
@container eqw (max-width: 70rem) {
  .eqw-body { grid-template-columns: auto minmax(0, 1fr); }
  .eqw-side { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: .35rem; }
  .eqw-side > .eqw-col { overflow: visible; padding: 0; }
}
@container eqw (max-width: 50rem) {
  .eqw-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .eqw-body { grid-template-columns: minmax(0, 1fr); }
  .eqw-side { display: contents; }
  .eqw-page[data-tab="doll"] [data-col]:not([data-col="doll"]), .eqw-page[data-tab="stats"] [data-col]:not([data-col="stats"]), .eqw-page[data-tab="loadout"] [data-col]:not([data-col="loadout"]) { display: none; }
  .eqw-doll > .win-caps, .eqw-stats > .win-caps { display: none; }
}

.eqs { display: grid; gap: 1rem; align-content: start; }
.eqs .gear-stats { align-items: flex-end; }
.eqs .gear-power { font: 400 2.1rem/1 var(--font-num); color: var(--gold-0); }
.eqs .gear-power small { margin-top: .3rem; font: 400 .82rem var(--font-ui); letter-spacing: .09em; color: var(--gold-3); white-space: nowrap; }
.eqs .gear-hp { position: static; gap: .45rem; font-size: .85rem; }
.eqs .gear-hp .eq-hp-bar { width: 6rem; height: .45rem; }
.eqs-block { display: grid; gap: .2rem; }
.eqs-block > .win-caps { margin-bottom: .2rem; }
.eqs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .8rem; padding: .32rem .55rem; border-radius: .45rem; font-size: .95rem; }
.eqs-row:nth-of-type(odd) { background: rgba(255, 255, 255, .035); }
.eqs-row > span { min-width: 0; color: var(--text-2); }
.eqs-row > b { font: 600 1rem var(--font-num); color: var(--text-1); text-align: right; }
.eqs-row > small { grid-column: 1 / -1; justify-self: end; font-size: .8rem; color: var(--text-3); text-align: right; }
.eqs-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9rem; }
.eqs-table th, .eqs-table td { padding: .3rem .25rem; text-align: right; white-space: nowrap; }
.eqs-table thead th { font: 600 .8rem var(--font-ui); color: var(--text-3); border-bottom: 1px solid var(--edge-soft); }
.eqs-table thead th:first-child, .eqs-table tbody th { width: 5.2rem; text-align: left; }
.eqs-table tbody th { font: 500 .85rem var(--font-ui); color: var(--text-2); }
.eqs-table td { font: 700 .92rem var(--font-num); color: var(--text-1); }
.eqs-table td.is-bad { color: var(--crimson); }
.eqs-table .is-now { background: rgba(242, 198, 106, .08); color: var(--gold-0); }
.eqs-table thead th.is-now { color: var(--gold-1); }
.eqs-table tbody tr + tr > * { border-top: 1px solid rgba(255, 255, 255, .05); }
.eqs-str { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .45rem; }
.eqs-str-cell { display: grid; gap: .1rem; padding: .4rem .5rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .2); }
.eqs-str-cell small { font-size: .78rem; color: var(--text-3); }
.eqs-str-cell b { font: 700 1rem var(--font-num); color: var(--text-1); }
.eqs-str-cell.is-now { border-color: rgba(242, 198, 106, .45); background: rgba(242, 198, 106, .08); }
.eqs-str-cell.is-now b { color: var(--gold-0); }

@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .hud-panel .eqd .well, .is-hud .bank-gear .eqd .well, .is-hud .eqw-doll .eqd .well { background: rgba(255, 255, 255, .05); }
  .is-hud .hud-panel .eqd .well:not([class*=" r-"]), .is-hud .bank-gear .eqd .well:not([class*=" r-"]), .is-hud .eqw-doll .eqd .well:not([class*=" r-"]) { border-color: rgba(255, 255, 255, .08); }
  .is-hud .hud-panel .eqd .well.is-selected, .is-hud .eqw-doll .eqd .well.is-selected { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-2), inset 0 0 .9rem rgba(242, 198, 106, .2); }
  .is-hud .hud-panel .eqd-open, .is-hud .bank-gear .eqd-open { --tone-top: rgba(242, 198, 106, .13); --tone-mid: rgba(242, 198, 106, .1); --tone-bottom: rgba(242, 198, 106, .08); --tone-edge: rgba(242, 198, 106, .45); --tone-text: var(--gold-1); box-shadow: none; text-shadow: none; border-radius: .675rem; }
  .is-hud .bank-gear .eqd.is-compact { --cell: clamp(2.6rem, calc((100vh - 38rem) / 5.4), 3.5rem); margin: .1rem 0 .2rem; }
  .is-hud .bank-gear .eqd-pips { display: none; }
  .is-hud .bank-gear:not(.is-folded) .bank-gear-head { position: sticky; top: -.95rem; z-index: 5; margin: -.95rem -1.05rem 0; padding: .95rem 1.05rem .45rem; background: #111722; }
  .is-hud .bank-gear-head .bank-gear-window { flex: none; margin-left: .25rem; }
  .is-hud .bank-gear-head .bank-gear-window span { display: none; }
  .is-hud .eqw-doll { --cell: clamp(3.4rem, calc((100vh - 31rem) / 5.4), 5.6rem); }
  .is-hud .stage .eqw-loadout .lo-card { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
  .is-hud .stage .eqw-loadout .lo-card.is-active { border-color: color-mix(in srgb, var(--emerald) 40%, transparent); }
  .is-hud .stage .eqw-loadout .lo-card.is-warn, .is-hud .stage .eqw-loadout .lo-card.is-out { border-color: color-mix(in srgb, var(--ember) 45%, transparent); }
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .eqw-page .eqw-col, .eqw-page .eqw-side { overflow: visible; padding: 0; }
  .eqw-page .eqw-doll { --cell: min(5.6rem, calc((100vw - 3rem) / 3.4)); }
  .eqw-tabs { margin: 0 0 .2rem; }
  .eqw-tabs button { min-height: 2.6rem; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .eqw-page .eqw-tabs button { min-height: 44px; font-size: .9rem; }
  .eqw-page .stance-picker button, .eqw-page .stance-auto, .eqw-page .eqw-look-slot { min-height: 44px; }
  .eqw-page :is(.eqw-phone-head small, .stance-row .t-caps, .stance-picker button, .stance-picker small, .stance-auto, .stance-auto small, .eqw-looks .win-caps, .eqw-look-note, .eqw-look-copy b, .eqw-look-copy small,
    .eqw-space, .eqs-row > small, .eqs-table th, .eqs-str-cell small, .gear-power small, .eq-hp b) { font-size: .9rem; }
  :is(.eqw-page, .dock.gear) .eqd-rank { font-size: .9rem; }
  .dock.gear .dock-head { min-height: 44px; }
  .dock.gear :is(.dock-head .meta, .gear-power small, .eq-hp b, .gear-build span, .attr-cell small, .attr-cell b, .eqd-open, .gear-divide strong, .gear-divide .meta, .pet-cell-copy small, .pet-cell-acts .btn) { font-size: .9rem; }
  .dock.gear :is(.gear-power small, .attr-cell small, .pet-cell-copy small) { letter-spacing: .05em; }
  .dock.gear :is(.gear-power, .gear-build, .eqd-open, .pet-cell-acts .btn) { min-height: 44px; }
  .dock.gear .gear-divide .btn-icon { width: 44px; min-height: 44px; }
}