/* Forged Gear: artwork-backed stone rails and worn metal, with original item rarities. */
body.hero-gear-page {
  --forge-gold: #c5a466;
  --forge-gold-light: #f0d49a;
  --forge-muted: #c1b3c7;
  --forge-emerald: #8fe7ad;
  --forge-frame: url('assets/interface/throgg-forged-v1/frame-stone-gold.png');
  --forge-stone: url('assets/interface/throgg-forged-v1/stone-texture.webp');
  background: radial-gradient(ellipse at 50% 0, #45265755, transparent 1200px), linear-gradient(#100b18e8, #100b18f2), var(--forge-stone) center top / 512px 512px;
  color: #eee5e6;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}
body.hero-gear-page::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0; left: 0; right: 0; height: 1000px;
  background: linear-gradient(#100b1859, #100b1880 35%, #100b18e6 82%, #100b18), url('assets/interface/throgg-forged-v1/world-backdrop.webp') center top / cover no-repeat;
  mask-image: linear-gradient(#000 0%, #000 65%, transparent 100%);
}

body.hero-gear-page .site-nav {
  border: 0;
  background: linear-gradient(#080a0ce8, #08090af8), var(--forge-stone) center / 512px;
  box-shadow: 0 4px 22px #000b;
  backdrop-filter: blur(12px);
}
body.hero-gear-page .site-nav .nav-inner {
  width: min(1500px, calc(100% - 44px));
  min-height: 126px;
  padding: 8px 0;
  gap: 24px;
}
body.hero-gear-page .site-nav .brand { display: block; flex: 0 1 292px; min-width: 180px; text-shadow: none; }
body.hero-gear-page .site-nav .brand img { display: block; width: 100%; height: auto; max-height: 112px; object-fit: contain; }
body.hero-gear-page .site-nav .nav-links { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
body.hero-gear-page .site-nav .nav-links a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 12px 7px;
  border: 10px solid transparent;
  border-image: var(--forge-frame) 32 / 12px / 0 stretch;
  border-radius: 0;
  background: linear-gradient(#0d1012d9,#080a0cef), var(--forge-stone) center / 380px;
  color: #d8c09a;
  font: 700 14px/1.25 Georgia, serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .055em;
  white-space: normal;
}
body.hero-gear-page .site-nav .nav-links a.active {
  color: #eaffdf;
  background: linear-gradient(#10251ddd,#0c2119ef), var(--forge-stone) center / 380px;
  box-shadow: inset 0 -2px #8fe7ad, inset 0 -14px 16px #3f9f5428;
}
body.hero-gear-page .site-nav .nav-links a.active::after {
  content: ''; position: absolute; width: 8px; height: 8px; background: #a7e9b8; border: 1px solid #e6d195;
  transform: rotate(45deg); bottom: -7px; left: calc(50% - 4px); box-shadow: 0 0 8px #51d28788;
}
body.hero-gear-page .site-nav a:focus-visible { outline: 2px solid var(--forge-emerald); outline-offset: 3px; }
body.hero-gear-page .site-nav .nav-links a:hover { color: #fff0cd; background-color: #2b2116; }
body.hero-gear-page .gear-account-bar {
  margin-top: 14px;
  padding: 8px 14px;
  border: 10px solid transparent;
  border-image: var(--forge-frame) 32 / 18px / 0 stretch;
  border-radius: 0;
  background: linear-gradient(110deg,#19131ce8,#0d0b12f5), var(--forge-stone) center / 512px;
  box-shadow: 0 10px 28px #0007;
}
body.hero-gear-page .gear-account-name {
  padding: 8px 12px; border-color: #7e694944; border-radius: 0; background: #0b0c10c7; box-shadow: inset 0 1px #e3c38a18;
}
body.hero-gear-page .gear-account-emblem { background: #c6ad75; }
body.hero-gear-page .gear-account-player { color: #ddcda7; }
body.hero-gear-page .gear-account-details { color: var(--forge-muted); }
body.hero-gear-page .gear-account-mode { color: #d6bd89; border-left-color: #86704588; }
body.hero-gear-page .gear-account-actions button, body.hero-gear-page .gear-account-actions a,
body.hero-gear-page .hg button:not(.equip-slot):not(.hg-item):not(.hg-icon-button):not([role=tab]) {
  border-color: #8f7548; border-radius: 1px; background: linear-gradient(#272428d9,#111016f2), var(--forge-stone) center / 350px;
  color: #eddbb4; box-shadow: inset 0 1px #f5d79122, inset 0 -2px #0008;
}
body.hero-gear-page .gear-account-actions button:hover:not(:disabled), body.hero-gear-page .gear-account-actions a:hover,
body.hero-gear-page .hg button:not(.equip-slot):not(.hg-item):not(.hg-icon-button):not([role=tab]):hover:not(:disabled) {
  border-color: #d6b66f; background-color: #332a25; color: #fff0cd;
}
body.hero-gear-page .hg .inventory-shell {
  grid-template-columns: minmax(0,1.65fr) minmax(0,1fr);
  gap: 18px;
  align-items: start;
}
body.hero-gear-page .hg .inventory-panel, body.hero-gear-page .hg .detail-panel,
body.hero-gear-page .hg .gear-section-card, body.hero-gear-page .hg .gear-rewards-grid>.cr {
  position: relative;
  padding: 22px;
  border: 18px solid transparent;
  border-image: var(--forge-frame) 32 / 30px / 0 stretch;
  border-radius: 0;
  background: linear-gradient(125deg,#1d1420f2,#100d15f5 70%), var(--forge-stone) center / 512px;
  box-shadow: inset 0 0 40px #0008, 0 12px 28px #0007;
}
body.hero-gear-page .hg .hg-panel-heading {
  position: relative; margin-bottom: 18px; padding: 0 0 14px; border-bottom: 1px solid #977d454f;
}
body.hero-gear-page .hg h2, body.hero-gear-page .hg .bonus-title {
  color: var(--forge-gold-light); font-family: Georgia, serif; font-weight: 700; text-shadow: 0 2px 2px #000;
}
body.hero-gear-page .hg .hg-panel-heading h2 { font-size: clamp(21px,2vw,28px); letter-spacing: .06em; font-variant: small-caps; }
body.hero-gear-page .hg .hg-panel-heading>span { color: #baadba; }
body.hero-gear-page .hg .equip-grid { max-width: 800px; gap: 14px; }
body.hero-gear-page .hg .equip-slot {
  position: relative;
  border: 8px solid transparent;
  border-image: var(--forge-frame) 32 / 12px / 0 stretch;
  border-radius: 0;
  padding: 0;
  background: #090a0e;
  box-shadow: 0 4px 10px #0008;
  overflow: visible;
  transition: box-shadow .15s;
}
body.hero-gear-page .hg .equip-slot:hover, body.hero-gear-page .hg .equip-slot:focus-visible {
  background: #111019;
  box-shadow: 0 0 0 1px var(--rarity),0 0 16px color-mix(in srgb,var(--rarity) 22%,transparent);
}
body.hero-gear-page .hg .equip-slot:focus-visible { outline: 2px solid #b5edbf; outline-offset: 4px; }
body.hero-gear-page .hg .equip-slot .art {
  order: 1; margin: 3px 3px 0; width: calc(100% - 6px); aspect-ratio: 4/3; height: auto;
  border: 2px solid color-mix(in srgb,var(--rarity) 80%,#252129); border-radius: 0;
  box-shadow: inset 0 0 12px #000a;
}
body.hero-gear-page .hg .slot-type {
  order: 2; min-height: 25px; padding: 6px 3px 4px; border: 0;
  background: linear-gradient(#141417,#090b0e),var(--forge-stone) center / 350px;
  color: #eaddc6; font: 700 11px/1.2 Georgia,serif; letter-spacing: .045em;
}
body.hero-gear-page .hg .rarity-dot { width: 6px; height: 6px; border-radius: 0; transform: rotate(45deg); box-shadow: 0 0 4px color-mix(in srgb,var(--rarity) 50%,transparent); }
body.hero-gear-page .hg .item-name {
  order: 3; height: auto; min-height: 35px; padding: 5px 5px 7px;
  border-top: 1px solid color-mix(in srgb,var(--rarity) 40%,#28232b);
  color: var(--rarity); background: #0c0a11; text-shadow: 0 1px 2px #000;
  font-size: 10px; line-height: 1.35; text-transform: none; white-space: normal;
}
body.hero-gear-page .hg .item-name>span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
body.hero-gear-page .hg .equip-slot.is-inspected .slot-type { box-shadow: inset 0 -2px #86cba14d; }
body.hero-gear-page .hg .equip-slot.is-inspected::after {
  content: ''; position: absolute; width: 6px; height: 6px; background: #8fe7ad; border: 1px solid #ded29e;
  transform: rotate(45deg); left: calc(50% - 3px); bottom: -10px; z-index: 3;
}
body.hero-gear-page .hg .hg-empty-art { order: 1; min-height: 105px; color: #8e8194; }
body.hero-gear-page .hg .resist-strip {
  position: relative; flex-wrap: nowrap; justify-content: space-evenly; gap: 8px;
  margin-top: 24px; padding: 20px 5px 10px; border: 0; border-top: 1px solid #a38a4f75;
  background: linear-gradient(90deg,transparent,#090a0d77,transparent);
}
body.hero-gear-page .hg .resist-strip::before { content: 'Resistances'; position: absolute; top: -10px; left: 0; padding-right: 10px; color: #d9c297; background: #17111c; font: 700 14px/1.3 Georgia,serif; font-variant: small-caps; }
body.hero-gear-page .hg .resist { width: 54px; height: 54px; border-radius: 0; background: #0b0b11; box-shadow: inset 0 0 15px color-mix(in srgb,currentColor 9%,transparent); }
body.hero-gear-page .hg .resist-icon { filter: drop-shadow(0 0 3px currentColor); }
body.hero-gear-page .hg .resist-number { border-radius: 1px; }
body.hero-gear-page .hg .gear-context-panel { padding: 22px; }
.gear-context-heading { min-width: 0; padding-bottom: 15px; }
.gear-context-eyebrow { display: block; margin-bottom: 7px; font: 700 10px/1.3 Arial,sans-serif; color: #bdacbe; text-transform: uppercase; letter-spacing: .13em; }
body.hero-gear-page .hg .gear-context-heading h2 { margin: 0; color: var(--rarity); font-size: clamp(23px,2vw,29px); line-height: 1.15; overflow-wrap: anywhere; }
.gear-context-art { position: relative; border: 8px solid transparent; border-image: var(--forge-frame) 32 / 12px / 0 stretch; background: #07080b; }
body.hero-gear-page .hg .gear-context-art .art { display: block; width: 100%; aspect-ratio: 16/10; border: 1px solid color-mix(in srgb,var(--rarity) 70%,#33283c); }
.gear-context-equipped { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 31px; border-top: 1px solid #81734366; background: linear-gradient(#17211be8,#0a100de8); color: #a1dfa9; font: 700 13px/1.2 Georgia,serif; letter-spacing: .07em; text-transform: uppercase; }
.gear-context-equipped .hg-icon { width: 13px; height: 13px; flex-basis: 13px; filter: brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(577%) hue-rotate(67deg); }
.gear-context-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 13px 0 10px; color: #bbafc2; font-size: 11px; }
.gear-context-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; margin: 0 0 14px; font-size: 12px; }
.gear-context-stats>div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #7b67432a; }
.gear-context-stats dt { color: #c5b9cd; overflow-wrap: anywhere; }
.gear-context-stats dd { margin: 0; color: #f1dfbd; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.hero-gear-page .hg .gear-context-action { width: 100%; min-height: 48px; margin: 3px 0 8px; text-transform: uppercase; font: 700 14px Georgia,serif; letter-spacing: .04em; }
body.hero-gear-page .hg [data-gear-sets]:not(:empty) { margin-top: 18px; padding-top: 5px; border-top: 1px solid #a38a4f75; }
body.hero-gear-page .hg [data-gear-sets]>.bonus-title { margin: 10px 0 14px; font-size: 21px; font-variant: small-caps; letter-spacing: .045em; text-transform: none; }
body.hero-gear-page .hg .gear-set { border-top-color: #89703e44; padding-top: 12px; }
body.hero-gear-page .hg .gear-set:first-child { border-top: 0; padding-top: 0; }
body.hero-gear-page .hg .gear-set-head strong { color: #e2c38c; font-size: 19px; }
body.hero-gear-page .hg .gear-set-head span { color: #d6bd94; font-size: 12px; }
body.hero-gear-page .hg .gear-set-build { color: #c6b4d4; font-size: 11px; margin-top: 8px; }
body.hero-gear-page .hg .gear-set-tier { grid-template-columns: 44px minmax(0,1fr); gap: 10px; padding: 9px 0; color: #ab9db2; }
body.hero-gear-page .hg .gear-set-tier>span { padding-top: 2px; }
body.hero-gear-page .hg .gear-set-tier strong { font-size: 12px; }
body.hero-gear-page .hg .gear-set-tier p { margin-top: 5px; line-height: 1.5; font-size: 12px; }
body.hero-gear-page .hg .gear-set-tier.active { color: #d1c6d9; }
body.hero-gear-page .hg .gear-set-tier.active>span, body.hero-gear-page .hg .gear-set-tier.active strong, body.hero-gear-page .hg .gear-set-tier.active .gear-set-state { color: #9cdda9; }
body.hero-gear-page .hg .gear-set-rules { border-color: #89703e44; font-size: 11px; line-height: 1.5; color: #b7a8c2; }
body.hero-gear-page .hg .character-panel { grid-column: 1/-1; display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.75fr); grid-template-rows: auto 1fr; gap: 18px 26px; }
body.hero-gear-page .hg .character-heading { grid-column: 1; grid-row: 1; align-self: start; align-items: center; border: 0; margin: 0; padding: 0; flex-wrap: wrap; }
body.hero-gear-page .hg .character-panel>[data-gear-stats] { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
body.hero-gear-page .hg .character-panel>.hc-gold { grid-column: 1; grid-row: 2; align-self: start; min-height: 58px; margin: 0; padding: 12px 14px; border-radius: 0; background: #15101ed9; }
body.hero-gear-page .hg .character-portrait-frame { border-radius: 0; border-color: #ab8d55; background: radial-gradient(ellipse at 50% 30%,#342b38,#0d0b12 76%); }
body.hero-gear-page .hg .character-title h2 { font-size: 19px; }
body.hero-gear-page .hg .character-name { color: #ebd6ac; }
body.hero-gear-page .hg .character-class { color: #bcaec7; }
body.hero-gear-page .hg .character-stats tbody th, body.hero-gear-page .hg .character-stats tbody td { border-color: #71603c45; background: #0b0910b0; }
body.hero-gear-page .hg .character-stats td.gear-value { color: #a5d7a5; }
body.hero-gear-page .hg .bonus { border-color: #71603c45; background: #0b0910b0; }
body.hero-gear-page .hg .bonus strong { color: #a5d7a5; }
body.hero-gear-page .hg .hero-roster-bar { padding: 10px 16px; border: 10px solid transparent; border-image: var(--forge-frame) 32 / 18px / 0 stretch; border-radius: 0; background: linear-gradient(110deg,#19131ce8,#0d0b12f5),var(--forge-stone) center / 512px; }
body.hero-gear-page .hg .gear-workspace>.hero-roster-bar { margin-top: 14px; }
body.hero-gear-page .hg .hero-roster-actions button, body.hero-gear-page .hero-roster-heading button { min-height: 44px; }
body.hero-gear-page .hg .hero-roster-bar strong { color: #ead19d; font-variant: small-caps; letter-spacing: .035em; }
body.hero-gear-page .hg .gear-section-tabs { position: relative; border: 10px solid transparent; border-image: var(--forge-frame) 32 / 18px / 0 stretch; border-radius: 0; padding: 0; background: linear-gradient(#100e15e8,#0b0a0ff2),var(--forge-stone) center / 512px; }
body.hero-gear-page .hg .gear-section-tabs button { min-height: 48px; color: #bcadbf; font: 700 16px/1.3 Georgia,serif; font-variant: small-caps; letter-spacing: .045em; border: 0; border-right: 1px solid #73613e55; border-bottom: 2px solid transparent; background: transparent; box-shadow: none; }
body.hero-gear-page .hg .gear-section-tabs button:last-child { border-right: 0; }
body.hero-gear-page .hg .gear-section-tabs button[aria-selected=true] { color: #e5f4db; border-bottom-color: #92d6a4; background: linear-gradient(transparent,#316f4222); }
body.hero-gear-page .hg .gear-section-tabs button:hover { color: #f2ddba; background: #32273466; }
body.hero-gear-page .hg .hg-dialog { border: 12px solid transparent; border-image: var(--forge-frame) 32 / 22px / 0 stretch; border-radius: 0; background: #100c18; }
body.hero-gear-page .hg .hg-dialog-bar { background: linear-gradient(#151319e8,#0c0b10ef),var(--forge-stone) center / 512px; border-bottom-color: #9a7d4755; }
body.hero-gear-page .hg .hg-dialog-bar h2 { color: #ead5a9; }
body.hero-gear-page .hg .hg-dialog-footer { border-top-color: #9a7d4755; background: #15101c; }
body.hero-gear-page .hg .hg-primary { color: #b2e6b6!important; border-color: #8db398!important; background: #17251c!important; }
body.hero-gear-page .hg .hg-item { border-radius: 0; }
body.hero-gear-page .hg .hg-detail-heading .hg-art { border-radius: 0; }
body.hero-gear-page .hg .hg-set-comparison { border-radius: 0; border-color: #947641; background: #19111f; }
body.hero-gear-page .hg .hg-set-change.loss, body.hero-gear-page .hg .hg-set-change.loss>span, body.hero-gear-page .hg .hg-set-change.loss strong, body.hero-gear-page .hg .hg-set-change.loss .gear-set-state { color: #ffb1ac; }
@media(max-width:1100px) {
  body.hero-gear-page .site-nav .nav-inner { gap: 14px; min-height: 104px; }
  body.hero-gear-page .site-nav .brand { flex-basis: 220px; }
  body.hero-gear-page .site-nav .nav-links a { font-size: 12px; padding-inline: 4px; }
  body.hero-gear-page .hg .inventory-shell { grid-template-columns: minmax(0,1fr); max-width: 780px; }
  body.hero-gear-page .hg .gear-context-panel { grid-column: 1; }
  body.hero-gear-page .hg [data-gear-context] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 22px; align-items: start; }
  .gear-context-heading { grid-column: 1/-1; }
  .gear-context-art { grid-column: 1; grid-row: 2/5; }
  .gear-context-meta { grid-column: 2; }
  .gear-context-stats { grid-column: 2; grid-template-columns: minmax(0,1fr); }
  body.hero-gear-page .hg .gear-context-action { grid-column: 1/-1; margin-top: 16px; }
  body.hero-gear-page .hg .character-panel { display: block; }
  body.hero-gear-page .hg .character-heading { margin-bottom: 16px; }
}
@media(max-width:760px) {
  body.hero-gear-page .site-nav .nav-inner { flex-direction: column; gap: 3px; width: calc(100% - 24px); padding-bottom: 12px; }
  body.hero-gear-page .site-nav .brand { flex: none; width: 218px; }
  body.hero-gear-page .site-nav .brand img { max-height: 80px; }
  body.hero-gear-page .site-nav .nav-links { width: 100%; gap: 2px; }
  body.hero-gear-page .site-nav .nav-links a { border-width: 6px; border-image-width: 6px; padding: 7px 3px; min-height: 44px; font-size: 11px; letter-spacing: 0; }
}
@media(max-width:600px) {
  body.hero-gear-page .site-nav { position: relative; }
  body.hero-gear-page .site-nav .nav-inner { width: calc(100% - 16px); }
  body.hero-gear-page .site-nav .brand { width: 196px; }
  body.hero-gear-page .site-nav .nav-links a { min-width: 0; padding-inline: 1px; border-width: 4px; border-image-width: 6px; font-size: clamp(9px,2.5vw,10px); overflow-wrap: normal; word-break: normal; hyphens: none; }
  body.hero-gear-page .gear-account-bar { margin: 12px; padding: 10px; border-width: 8px; border-image-width: 8px; }
  body.hero-gear-page .gear-account-name { padding: 10px; flex-wrap: wrap; }
  body.hero-gear-page .gear-account-copy { min-width: 110px; }
  body.hero-gear-page .gear-account-mode { padding-left: 8px; }
  body.hero-gear-page .hg .inventory-shell { padding: 12px; gap: 14px; }
  body.hero-gear-page .hg .inventory-panel, body.hero-gear-page .hg .detail-panel, body.hero-gear-page .hg .gear-section-card, body.hero-gear-page .hg .gear-rewards-grid>.cr { padding: 12px; border-width: 8px; border-image-width: 16px; }
  body.hero-gear-page .hg .hg-panel-heading { margin-bottom: 14px; padding-bottom: 12px; }
  body.hero-gear-page .hg .hg-panel-heading h2 { font-size: 21px; }
  body.hero-gear-page .hg .equip-grid { gap: 12px 9px; }
  body.hero-gear-page .hg .equip-slot { border-width: 5px; border-image-width: 8px; min-height: 122px; }
  body.hero-gear-page .hg .equip-slot .art { aspect-ratio: auto; height: 88px; margin: 2px 2px 0; width: calc(100% - 4px); border-width: 1px; }
  body.hero-gear-page .hg .slot-type { font-size: 10px; min-height: 24px; }
  body.hero-gear-page .hg .item-name { min-height: 35px; font-size: 9px; line-height: 12px; padding: 5px 4px; }
  body.hero-gear-page .hg .resist-strip { gap: 5px; padding-inline: 0; margin-top: 23px; }
  body.hero-gear-page .hg .resist { width: 34px; height: 42px; }
  body.hero-gear-page .hg .resist-icon { font-size: 22px; }
  body.hero-gear-page .hg .resist-number { font-size: 9px; padding: 2px; top: 1px; right: 0; }
  body.hero-gear-page .hg [data-gear-context] { display: block; }
  body.hero-gear-page .hg .gear-context-heading h2 { font-size: 25px; }
  .gear-context-art { border-width: 7px; border-image-width: 10px; }
  .gear-context-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; font-size: 11px; }
  .gear-context-stats>div { gap: 5px; }
  body.hero-gear-page .hg .gear-context-action { margin-top: 6px; }
  body.hero-gear-page .hg .gear-set-tier { gap: 7px; }
  body.hero-gear-page .hg .gear-set-tier p { font-size: 11px; }
  body.hero-gear-page .hg .hero-roster-bar { padding: 12px; border-width: 8px; border-image-width: 12px; }
  body.hero-gear-page .hg .gear-section-tabs { border-width: 7px; border-image-width: 12px; }
  body.hero-gear-page .hg .gear-section-tabs button { font-size: 13px; min-height: 48px; letter-spacing: 0; }
  body.hero-gear-page .hg .hg-dialog { border-width: 7px; border-image-width: 12px; }
}
@media(prefers-reduced-motion:reduce) { body.hero-gear-page * { transition: none!important; scroll-behavior: auto!important; } }