#rx-build-help {
  width: min(596px, calc(100% - 24px));
  max-height: min(92dvh, 900px);
  color: var(--text);
  background: #1b2d23;
  border-color: #8e825b;
  overscroll-behavior: contain;
  overflow: auto;
  scrollbar-color: #70795d #20332a;
}
#rx-build-help [hidden] {display: none}
#rx-build-help button {min-height: 42px}
#rx-build-help h3 {font-size: 17px; letter-spacing: .04em}
#rx-build-help .rh-head {
  padding: 16px 24px 18px;
  background: linear-gradient(100deg,#16271df7 20%,#192c21ed 53%,#2433209c),url("assets/combat/maple-yard.webp") 50% 52% / cover;
  border-bottom: 1px solid #706b4a;
}
#rx-build-help .rh-headline {display: flex; align-items: center; justify-content: space-between; gap: 10px}
#rx-build-help .rh-headline h2 {font-size: clamp(22px,5vw,28px); color: #f3dcaa}
#rx-build-help .rh-headline h2:focus {outline: none}
#rx-build-help .rh-close {width: 42px; flex: none; font-size: 25px; line-height: 1; background: #1a2a21b3}
#rx-build-help .rh-loadout {display: flex; align-items: center; gap: 10px; margin-top: 9px; overflow-wrap: anywhere}
#rx-build-help .rh-loadout img {width: 44px; height: 44px; padding: 2px; object-fit: contain; border: 1px solid #91865e; border-radius: 4px; background:#1e3024}
#rx-build-help .rh-loadout small {display: block; color: #c7c8ae; margin-top: 2px}
#rx-build-help .rh-body {display: grid; gap: 15px; padding: 15px 24px 20px}
#rx-build-help .rh-context {display: grid; grid-template-columns: 1.5fr 1fr; gap: 6px 16px; margin: 0; padding-bottom: 13px; border-bottom: 1px solid #42523f}
#rx-build-help .rh-context dt, #rx-build-help .rh-scores span, #rx-build-help .rh-reply label {font-size: 12px; color: #c0c4ad}
#rx-build-help .rh-context dd {margin: 1px 0 0; font-size: 14px; overflow-wrap: anywhere}
#rx-build-help .rh-context dd small {display: block}
#rx-build-help .rh-sockets {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; padding: 0; margin: 7px 0 0; list-style: none}
#rx-build-help .rh-sockets li {display: grid; align-content: start; padding: 7px 8px; gap: 3px; border: 1px solid #465342; border-radius: 3px; background: #192920}
#rx-build-help .rh-sockets .rh-chosen {border-color: #948053; background: #303829}
#rx-build-help .rh-sockets .rh-chosen small {color: var(--gold)}
#rx-build-help .rh-sockets b {font-size: 13px; font-weight: 500; overflow-wrap: anywhere}
#rx-build-help .rh-edit, #rx-build-help .rh-outcome {min-width: 0}
#rx-build-help .rh-choices {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 8px 0}
#rx-build-help .rh-choices button {color: #dddcc4; background: #25392d}
#rx-build-help .rh-choices button[aria-pressed=true] {color: #f6df9f; border-color: #c5a767; background: #3e4630; box-shadow: inset 0 -2px #b8a169; font-weight: 700}
#rx-build-help .rh-value {display: flex; align-items: center; gap: 8px; font-size: 14px}
#rx-build-help .rh-value input, #rx-build-help .rh-reply input {height: 40px; padding: 6px 10px; color: var(--text); border: 1px solid #61705a; border-radius: 4px; background: #15251c; font: 16px var(--sans)}
#rx-build-help .rh-value input {width: 110px; margin-left: 4px}
#rx-build-help .rh-value input[aria-invalid=true] {border-color: #dd9b78}
#rx-build-help .rh-value input:disabled {opacity: .7}
#rx-build-help .rh-tip {font-size: 12px; color: var(--muted); margin-top: 5px}
#rx-build-help .rh-outcome {border-top: 1px solid #42523f; padding-top: 12px}
#rx-build-help .rh-scores {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 6px; gap: 7px}
#rx-build-help .rh-scores > div {display: grid; gap: 1px; padding: 8px 12px; border-radius: 4px; border: 1px solid #4a5645; background: #192a21}
#rx-build-help .rh-scores > div + div {border-color: #74815a; background: #283a29}
#rx-build-help .rh-scores strong {font: 700 clamp(23px,5vw,31px)/1.15 var(--serif); color: #ead5a1; overflow-wrap: anywhere; font-variant-numeric: tabular-nums}
#rx-build-help .rh-scores small {overflow-wrap: anywhere}
#rx-build-help .rh-delta {font-size: 14px; margin-top: 7px; color: #d4d8c0}
#rx-build-help .rh-delta[data-trend=up] {color: #c0e2ac}
#rx-build-help .rh-delta[data-trend=down] {color: #f5b79d}
#rx-build-help .rh-share {width: 100%; min-height: 44px}
#rx-build-help .rh-reply label {display: block; margin-bottom: 4px}
#rx-build-help .rh-reply > div {display: flex; align-items: center; gap: 6px}
#rx-build-help .rh-reply input {min-width: 0; flex: 1; font-size: 14px}
#rx-build-help .rh-reply button {padding: 5px 12px}
#rx-build-help .rh-reply small:not(:empty) {display: block; margin-top: 6px; color: #e6ca94}
#rx-build-help .rh-status {font-size: 13px; color: #e6dcad; overflow-wrap: anywhere}
#rx-build-help .rh-status:empty {display: none}
@media (max-width: 500px) {
  #rx-build-help {width: calc(100% - 14px); max-height: 95dvh}
  #rx-build-help .rh-head {padding: 10px 14px 12px}
  #rx-build-help .rh-body {padding: 12px 14px 16px; gap: 12px}
  #rx-build-help .rh-context {grid-template-columns: minmax(0,1.7fr) minmax(72px,1fr); gap: 8px}
  #rx-build-help .rh-sockets {gap: 4px}
  #rx-build-help .rh-sockets li {padding: 6px}
  #rx-build-help .rh-sockets small {font-size: 11px}
}
@media (max-width: 350px) {
  #rx-build-help .rh-sockets {grid-template-columns: repeat(2,minmax(0,1fr))}
}