/* ============================================================
   Diablo III atmosphere — scoped to body.d3.

   RULE: this file dresses the PAGE SHELL only — background,
   hero, ambient light, marketing headings, section bands.
   It must never restyle the product mockups: cards, tabs,
   tables, tiles, rings, bars and equipment lists stay exactly
   as the Supernova app renders them, and the brand nav, logo,
   buttons and progress bar stay brand.
   ============================================================ */

body.d3 {
  background: #0b0707
}

/* ---- ambient layers (behind the UI, never interactive) ---------------- */
#embers,
#torch,
#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0
}

#embers {
  opacity: .85
}

#grain {
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")
}

#torch {
  background: radial-gradient(circle 340px at var(--tx, 50%) var(--ty, 40%), rgba(255, 150, 60, .16), rgba(255, 90, 20, .06) 45%, transparent 70%);
  mix-blend-mode: screen;
  transition: opacity .4s;
  opacity: 0
}

body.d3.lit #torch {
  opacity: 1
}

/* page content sits above the atmosphere */
body.d3 .gswitch-bar,
body.d3 header.hero,
body.d3 .navcards,
body.d3 section,
body.d3 footer {
  position: relative;
  z-index: 1
}

/* translucent bands so embers glow through behind the app panels */
body.d3 section.blk {
  background: transparent
}

body.d3 section.blk.alt {
  background: rgba(26, 21, 22, .66)
}

/* ---- hero: the gate to Sanctuary -------------------------------------- */
body.d3 .hero {
  min-height: 700px
}

body.d3 .hero .art-d3 {
  background-image:
    radial-gradient(ellipse 26% 46% at 50% 44%, rgba(255, 110, 25, .24), rgba(255, 40, 0, .08) 55%, rgba(11, 7, 7, 0) 72%),
    url('https://files.supernova-analytics.com/supernova-app-assets/Diablo%203/Realm/Diablo_realm_Image.png'),
    linear-gradient(180deg, #1b0d0a, #0b0707 72%);
  background-position: center center, center 32%, center;
  background-size: auto, cover, auto;
  background-repeat: no-repeat
}

/* molten fissure behind the wordmark */
body.d3 .hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8%;
  width: min(360px, 46vw);
  height: 116%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 24% 46% at 50% 46%, rgba(255, 140, 50, .32), rgba(255, 60, 10, .12) 48%, transparent 72%);
  filter: blur(8px);
  animation: fissure 5.5s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none
}

@keyframes fissure {
  from {
    opacity: .72;
    transform: translateX(-50%) scaleY(.97)
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.03)
  }
}

body.d3 .hero .veil {
  background:
    radial-gradient(ellipse 58% 62% at 50% 42%, rgba(11, 7, 7, 0) 0%, rgba(11, 7, 7, .5) 58%, rgba(11, 7, 7, .93) 100%),
    linear-gradient(180deg, rgba(11, 7, 7, .5), rgba(11, 7, 7, .12) 34%, rgba(11, 7, 7, .95))
}

body.d3 .wordmark .logo-d3 {
  height: 168px;
  padding: 18px 0;
  max-width: 92vw;
  object-fit: contain;
  animation: emberGlow 4.5s ease-in-out infinite alternate
}

@keyframes emberGlow {
  from {
    filter: drop-shadow(0 0 18px rgba(255, 90, 24, .32)) drop-shadow(0 3px 10px rgba(0, 0, 0, .85))
  }

  to {
    filter: drop-shadow(0 0 34px rgba(255, 110, 40, .58)) drop-shadow(0 3px 10px rgba(0, 0, 0, .85))
  }
}

/* ---- marketing typography (page copy only, never widget chrome) ------- */
body.d3 h1,
body.d3 .sec-title,
body.d3 .fcopy h2,
body.d3 .cta h2 {
  font-family: 'Cinzel', 'Work Sans', serif;
  font-weight: 700;
  letter-spacing: .8px
}

body.d3 h1 {
  font-size: 42px;
  line-height: 1.24;
  text-shadow: 0 2px 4px #000, 0 0 34px rgba(255, 110, 30, .26)
}

body.d3 .sec-title {
  font-size: 29px
}

body.d3 .fcopy h2 {
  font-size: 26px
}

body.d3 .eyebrow {
  color: #d9a94c;
  letter-spacing: 4px
}

body.d3 .lede {
  font-style: italic;
  color: #e6cfa8 !important
}

/* ornamental rule under centred section titles */
body.d3 .sec-title::after {
  content: "";
  display: block;
  width: 180px;
  height: 9px;
  margin: 14px auto 0;
  background:
    linear-gradient(90deg, transparent, rgba(212, 165, 83, .5) 22%, rgba(212, 165, 83, .5) 78%, transparent) center 4px/100% 1px no-repeat,
    conic-gradient(from 45deg, rgba(224, 166, 58, .95) 0 25%, transparent 0 100%) center/9px 9px no-repeat
}

/* ---- closing sections ------------------------------------------------- */
body.d3 .cta {
  background:
    radial-gradient(ellipse 60% 120% at 50% 130%, rgba(160, 40, 14, .45), transparent 70%),
    linear-gradient(180deg, rgba(21, 13, 12, .8), rgba(11, 7, 7, .92))
}

body.d3 footer {
  background: linear-gradient(180deg, rgba(14, 9, 9, .9), rgba(8, 5, 5, .95))
}

/* sections resolve out of the dark */
body.d3 .reveal {
  filter: blur(6px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease
}

body.d3 .reveal.in {
  filter: blur(0)
}

/* ---- motion / small screens ------------------------------------------- */
@media(prefers-reduced-motion:reduce) {

  body.d3 .hero::before,
  body.d3 .wordmark .logo-d3 {
    animation: none
  }

  body.d3 .reveal {
    filter: none
  }

  #embers,
  #torch {
    display: none
  }
}

@media(max-width:820px) {
  body.d3 h1 {
    font-size: 31px
  }

  body.d3 .sec-title {
    font-size: 23px
  }

  body.d3 .wordmark .logo-d3 {
    height: 104px
  }

  #torch {
    display: none
  }
}

/* Top Hero: the app's Top SC Hero widget (supernova-desktop-application
   css/diablo-3/analytics.css), re-flowed for the wider demo card: identity
   and quick stats across the top, stats as tiles underneath */
body.d3 .thc {
  container: thc / inline-size
}

body.d3 .thc-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff
}

body.d3 .thc-header img {
  width: 17px;
  height: 15px;
  object-fit: contain
}

body.d3 .thc-mode {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 4px
}

body.d3 .thc-mode-sc {
  background: rgba(52, 152, 219, .18);
  color: #5dade2;
  border: 1px solid rgba(52, 152, 219, .28)
}

body.d3 .thc-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #454857
}

body.d3 .thc-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0
}

body.d3 .thc-portrait {
  width: 61px;
  height: 61px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid #454857;
  background: #222
}

body.d3 .thc-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px
}

body.d3 .thc-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.d3 .thc-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a8aaaf
}

body.d3 .thc-qs {
  display: flex;
  gap: 26px;
  margin-left: auto
}

body.d3 .thc-qs-l {
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a8aaaf
}

body.d3 .thc-qs-v {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

body.d3 .thc-stats-h {
  margin: 10px 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

body.d3 .thc-core,
body.d3 .thc-attr {
  display: grid;
  gap: 8px
}

body.d3 .thc-core {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

body.d3 .thc-attr {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px
}

body.d3 .thc-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 6px;
  padding: 10px 10px;
  background: #24252C;
  border: 1px solid #454857;
}

body.d3 .thc-tile span {
  font-size: 12px;
  color: #a8aaaf;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.d3 .thc-tile b {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.d3 .thc-core b {
  font-size: 16px
}

@container thc (max-width: 480px) {
  body.d3 .thc-qs {
    margin-left: 0
  }

  body.d3 .thc-core {
    grid-template-columns: 1fr
  }

  body.d3 .thc-attr {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* Build > Equipment: item icons in the slot tiles, edged green for set
   pieces and orange for legendaries, as the app does */
body.d3 .eqr .eic {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 0 .5px rgba(69, 72, 87, .95)
}

body.d3 .eqr .eic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px 1px 3px 0;
  box-sizing: border-box;
  border-left: 2px solid
}

body.d3 .eqr .eic.set {
  background: rgba(0, 197, 105, .15)
}

body.d3 .eqr .eic.set img {
  border-left-color: #00c569
}

body.d3 .eqr .eic.leg {
  background: rgba(224, 123, 57, .15)
}

body.d3 .eqr .eic.leg img {
  border-left-color: #e07b39
}

body.d3 .eqh img {
  width: 16px;
  height: 16px;
  object-fit: contain
}

/* Build > Skills: actives as a 2-up tile grid with their rune, passives as
   a row of icon cards */
body.d3 .skx-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: white;
}

body.d3 .skx-h span {
  font-size: 10px;
  color: white;
  background: rgb(255 255 255 / 9%);
  border-radius: 10px;
  padding: 1px 7px;
}

body.d3 .skx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px
}

body.d3 .skx {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-radius: 6px;
  padding: 9px 10px;
  background: #24252C;
  border: 1px solid #454857;
}

body.d3 .skx img,
body.d3 .skp img {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35)
}

body.d3 .skx-t {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.d3 .skx-t b,
body.d3 .skp b {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.d3 .skx-t i {
  font-style: normal;
  font-size: 13px;
  color: #a8aaaf;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

body.d3 .skp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px
}

body.d3 .skp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-radius: 6px;
  padding: 12px 8px 10px;
  text-align: center;
  background: #24252C;
  border: 1px solid #454857;
}

body.d3 .skp img {
  border-radius: 50%
}

body.d3 .skp b {
  font-size: 12px;
  line-height: 1.3;
  white-space: normal
}

@media(max-width:560px) {
  body.d3 .skx-grid {
    grid-template-columns: 1fr
  }

  body.d3 .skp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* equipment boxes use the same lifted tile as the skills grid, not the
   near-black shared panel */
body.d3 .eqbox {
  border-radius: 6px;
  background: #24252C;
  border: 1px solid #454857;
}

/* one line per slot: the label never wraps, long item names end in an ellipsis */
body.d3 .eqr .esl {
  flex: none;
  white-space: nowrap
}

body.d3 .eqr .enm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.d3 .eqgrid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr)
}

body.d3 .eqgrid>* {
  min-width: 0
}

/* the last row's own padding is enough breathing room at the bottom */
body.d3 .eqbox {
  padding-bottom: 0
}

/* Greater Rifts > career widget: the app's Historical Softcore card
   (career-stats-widget-3), with a mode switch that swaps its figures */
body.d3 .cw {
  border: 1px solid #454857;
  border-radius: 9px;
  padding: 16px;
  color: #a8aaaf;
  background: linear-gradient(rgba(20, 20, 26, .55), rgba(20, 20, 26, .55)), url("https://files.supernova-analytics.com/supernova-app-assets/Diablo%203/Images/Diablo_Career_Stat.png") no-repeat center / cover
}

body.d3 .cw-body {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px
}

body.d3 .cw-ring {
  flex: none;
  padding: 0 24px
}

body.d3 .cw-ring svg {
  display: block
}

body.d3 .cw-track {
  stroke: rgba(255, 255, 255, .08)
}

body.d3 .cw-arc {
  transition: stroke .3s
}

body.d3 .cw-rl {
  font-size: 10px;
  fill: #a8aaaf
}

body.d3 .cw-rv {
  font-size: 21px;
  font-weight: 600;
  fill: #fff;
  font-variant-numeric: tabular-nums
}

body.d3 .cw-div {
  width: 1px;
  height: 110px;
  flex: none;
  background: #454857
}

body.d3 .cw-stats {
  flex: 1;
  min-width: 0;
  display: grid;
  row-gap: 14px;
  padding-right: 4px
}

body.d3 .cw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 14px
}

body.d3 .cw-row span {
  color: #a8aaaf;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.d3 .cw-row b {
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

@media(max-width:560px) {
  body.d3 .cw-body {
    flex-direction: column;
    gap: 14px
  }

  body.d3 .cw-div {
    width: 100%;
    height: 1px
  }

  body.d3 .cw-stats {
    width: 100%
  }
}

/* the widget is the card now: a plain widget heading (icon + title, like Best
   Gem Rank) naming the mode the auto-roll is showing; it crossfades on change */
body.d3 .cw-top {
  display: flex;
  align-items: center
}

body.d3 .cw-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff
}

body.d3 .cw-h img {
  width: 16px;
  height: 16px;
  object-fit: contain
}

body.d3 .cw-h span {
  transition: opacity .2s ease
}

body.d3 .cw-h span.is-swapping {
  opacity: 0
}

/* .cw-row's flex display would otherwise beat the hidden attribute */
body.d3 .cw-row[hidden] {
  display: none
}

body.d3 .cw-body {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Greater Rifts > Gem Ranks: the app's Best Gem Rank widget, three gem tiles */
body.d3 .gm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff
}

body.d3 .gm-head img {
  width: 16px;
  height: 16px;
  object-fit: contain
}

body.d3 .gm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px
}

body.d3 .gm {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #24252c;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 9px;
  padding: 14px
}

body.d3 .gm-ic {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5))
}

body.d3 .gm-t {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.d3 .gm-r {
  margin-top: 3px;
  font-size: 12px;
  color: #a8aaaf
}

/* same track as the page's other progress bars (.dst .mini, .l10 .bar) */
body.d3 .gm-bar {
  height: 6px;
  margin-top: 10px;
  border-radius: 22px;
  background: #2a2333;
  overflow: hidden
}

body.d3 .gm-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--arc-win);
  transition: width .9s ease
}

@media(max-width:560px) {
  body.d3 .gm-grid {
    grid-template-columns: 1fr
  }
}

/* KPI tiles use the same lifted tile as skills/equipment, not the near-black panel */
body.d3 .dst {
  background: #24252c;
  border-radius: 6px;
  border: 1px solid #454857;
}

/* Career totals: four KPIs as two rows of two */
body.d3 .dstats-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

/* Leaderboards: board info chips sit top-right, level with the SC/HC tabs */
body.d3 .tabcard {
  position: relative
}

body.d3 .lbm {
  position: absolute;
  top: 13px;
  right: 14px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px
}

body.d3 .lbm-mode,
body.d3 .lbm-c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap
}

body.d3 .lbm-mode {
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 10.5px
}

body.d3 .lbm-mode.sc {
  background: rgba(52, 152, 219, .18);
  color: #5dade2;
  border: 1px solid rgba(52, 152, 219, .3)
}

body.d3 .lbm-mode.hc {
  background: rgba(231, 76, 60, .18);
  color: #ec7063;
  border: 1px solid rgba(231, 76, 60, .32)
}

body.d3 .lbm-c {
  background: #24252c;
  border: 1px solid rgba(255, 255, 255, .06);
  color: #fff
}

body.d3 .lbm-c i {
  font-style: normal;
  font-weight: 500;
  color: #a8aaaf
}

body.d3 .lbm-c b {
  color: #3cb4cc;
  font-variant-numeric: tabular-nums
}

/* not enough room beside the tabs: drop the chips into the flow above the table */
@media(max-width:900px) {
  body.d3 .lbm {
    position: static;
    height: auto;
    flex-wrap: wrap;
    margin: -6px 0 12px
  }
}

/* Leaderboard table: the app's Diablo 3 leaderboard rows (zebra, hover,
   gold/silver/bronze medals and a tinted rank cell for the top three) */
/* bleeds to the card edges (card padding 13px 14px 12px) so the table is the card body, not a box inside it */
body.d3 .lbt-wrap {
  margin: 0 -14px -12px;
  border-top: 1px solid #454857;
  border-radius: 0 0 10px 10px;
  overflow: auto
}

body.d3 .lbt {
  font-size: 13px
}

body.d3 .lbt th {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: #24252c;
  border-bottom: 1px solid #454857
}

body.d3 .lbt td {
  padding: 10px 16px;
  border-top: 0;
  border-bottom: 1px solid #454857;
  vertical-align: middle;
  color: #fff
}

body.d3 .lbt tr:last-child td {
  border-bottom: 0
}

body.d3 .lbt th:first-child,
body.d3 .lbt td:first-child {
  width: 68px;
  text-align: center
}

body.d3 .lbt td:nth-child(3) {
  color: #a8aaaf
}

body.d3 .lbt td:nth-child(4) {
  font-size: 14px
}

body.d3 .lbt td:last-child {
  font-variant-numeric: tabular-nums
}

/* the header is the table's first row, so data rows count from 2 */
body.d3 .lbt tr:nth-child(odd):not(:first-child) {
  background: rgba(36, 37, 44, .57)
}

body.d3 .lbt tr:not(:first-child):hover {
  background: #2b2d35
}

body.d3 .lbt tr:nth-child(2) td:first-child {
  background: linear-gradient(to right, rgba(249, 189, 44, .12), transparent)
}

body.d3 .lbt tr:nth-child(3) td:first-child {
  background: linear-gradient(to right, rgba(180, 180, 190, .12), transparent)
}

body.d3 .lbt tr:nth-child(4) td:first-child {
  background: linear-gradient(to right, rgba(180, 100, 50, .12), transparent)
}

body.d3 .lb-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700
}

body.d3 .lb-medal.gold {
  background: rgba(249, 189, 44, .18);
  color: #f9bd2c;
  border: 1px solid rgba(249, 189, 44, .35)
}

body.d3 .lb-medal.silver {
  background: rgba(180, 180, 190, .2);
  color: #c0c0cc;
  border: 1px solid rgba(180, 180, 190, .35)
}

body.d3 .lb-medal.bronze {
  background: rgba(180, 100, 50, .2);
  color: #c06030;
  border: 1px solid rgba(180, 100, 50, .35)
}

@media(max-width:768px) {

  body.d3 .lbt th:nth-child(3),
  body.d3 .lbt td:nth-child(3),
  body.d3 .lbt th:nth-child(5),
  body.d3 .lbt td:nth-child(5) {
    display: none
  }
}

body.d3 .lbt th:nth-child(2) {
  text-align: left
}

/* Leaderboard SC/HC panes crossfade in place instead of the slide-up fade,
   so the auto-roll between seasons reads as a soft swap */
body.d3 .card.tabcard>.subpane {
  visibility: hidden;
  opacity: 0;
  animation: none;
  transition: opacity .7s ease, visibility 0s linear .7s
}

body.d3 .card.tabcard>.subpane.on {
  visibility: inherit;
  opacity: 1;
  transition: opacity .7s ease, visibility 0s
}

@media(prefers-reduced-motion: reduce) {

  body.d3 .card.tabcard>.subpane,
  body.d3 .card.tabcard>.subpane.on {
    transition: none
  }
}

/* demo banner: the Diablo III mark is tall, not a wordmark like Dota's, so it
   needs more height to read at the same visual weight */
body.d3 .dplogo {
  height: 46px;
  margin: -8px 0 -2px auto
}

/* the Blizzard mark is a ~2.2:1 wordmark, so size it by height rather than
   squeezing it into the square icon box */
body.d3 .dchip img.dlogo {
  width: auto;
  height: 24px;
  margin-bottom: 6px
}

/* All Heroes strip: every card at full strength (no 40% resting state), and the
   rail drifts on its own, so hide its scrollbar and soften the two edges */
body.d3 .hcard .hport,
body.d3 .hcard .hbody {
  opacity: 1
}

body.d3 .hstrip {
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent)
}

body.d3 .hstrip::-webkit-scrollbar {
  display: none
}

/* no "selected" highlight in a strip that drifts on its own: the first card
   keeps the plain border, and fallen heroes keep only their red Graveyard edge */
body.d3 .hcard.on {
  border-color: var(--line);
  box-shadow: none
}

body.d3 .hcard.on .hport {
  border-color: var(--line)
}

body.d3 .hcard.hgone.on {
  border-color: rgba(180, 50, 50, .5)
}

/* Heroes > Set Diversity: the app's segmented set-diversity donut with a
   linked, hoverable legend (desktop app css/diablo-3/analytics.css) */
body.d3 .sd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff
}

body.d3 .sd-head img {
  width: 16px;
  height: 16px;
  object-fit: contain
}

body.d3 .sd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  margin-top: 12px
}

body.d3 .sd-donut {
  position: relative;
  width: 218px;
  height: 218px;
  margin: 0 auto
}

body.d3 .sd-ring {
  display: block;
  width: 100%;
  height: 100%
}

body.d3 .sd-seg {
  fill: none;
  stroke: #80858f;
  stroke-width: 7;
  stroke-linecap: round;
  cursor: pointer;
  transition: opacity .16s ease, filter .16s ease, stroke-width .16s ease
}

body.d3 .sd-seg.sd-top {
  stroke: #4fd1da
}

body.d3 .sd-seg.is-active {
  stroke-width: 9;
  filter: brightness(1.12)
}

body.d3 .sd-seg.is-dimmed {
  opacity: .3
}

body.d3 .sd-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none
}

body.d3 .sd-label {
  max-width: 122px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  color: #a8aaaf;
}

body.d3 .sd-count {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums
}

body.d3 .sd-legend {
  display: grid;
  row-gap: 4px;
  padding-left: 18px;
  border-left: 1px solid #454857
}

body.d3 .sdl-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .16s ease, opacity .16s ease
}

body.d3 .sdl-item.is-active {
  background: rgba(255, 255, 255, .06)
}

body.d3 .sdl-item.is-dimmed {
  opacity: .45
}

body.d3 .sdl-item:focus-visible {
  outline: 1px solid rgba(123, 224, 231, .8);
  outline-offset: 1px
}

body.d3 .sdl-sw {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(174, 174, 174, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset
}

body.d3 .sdl-item.sd-top .sdl-sw {
  background: #7be0e7
}

body.d3 .sdl-name {
  font-size: 13px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.d3 .sdl-pct {
  font-size: 13px;
  color: #a8aaaf;
  font-variant-numeric: tabular-nums
}

@media(max-width:560px) {
  body.d3 .sd-body {
    grid-template-columns: 1fr;
    gap: 14px
  }

  body.d3 .sd-legend {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid #454857
  }
}

/* Set diversity rolls on its own now: no pointer affordances, slower and
   softer state changes, and the centre text crossfades between sets */
body.d3 .sd-seg,
body.d3 .sdl-item {
  cursor: default
}

body.d3 .sd-seg {
  transition: opacity .6s ease, filter .6s ease, stroke-width .6s ease
}

body.d3 .sdl-item {
  transition: background-color .6s ease, opacity .6s ease
}

body.d3 .sd-center>div {
  transition: opacity .22s ease
}

body.d3 .sd-center.is-swapping>div {
  opacity: 0
}

/* whichever set the roll lands on turns cyan (segment and its legend swatch),
   not just the top set */
body.d3 .sd-seg.is-active {
  stroke: #4fd1da
}

body.d3 .sdl-item.is-active .sdl-sw {
  background: #7be0e7
}

body.d3 .sdl-sw {
  transition: background-color .6s ease
}

/* while another set is active, the top set drops to grey so only one reads blue */
body.d3 .sd-seg.sd-top.is-dimmed {
  stroke: #80858f
}

body.d3 .sdl-item.sd-top.is-dimmed .sdl-sw {
  background: rgba(174, 174, 174, .55)
}

/* Hero Roster: the app's pill toggle (.roster-toggle / .roster-tab) and its
   Alive / Deceased metric chips (.hcr-metric) */
body.d3 .rtabs {
  display: flex;
  width: fit-content;
  border: 1px solid #454857;
  border-radius: 999px;
  background: rgba(36, 37, 44, .95)
}

body.d3 .rtab {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #a8aab0;
  padding: 5px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease
}

body.d3 .rtab+.rtab {
  border-left: 1px solid rgba(69, 72, 87, .9)
}

body.d3 .rtab:first-child {
  border-radius: 999px 0 0 999px
}

body.d3 .rtab:last-child {
  border-radius: 0 999px 999px 0
}

body.d3 .rtab:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff
}

/* the app's 1px white border, drawn inset so the pill doesn't shift */
body.d3 .rtab.on {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 0 0 1px #fff;
  font-weight: 500
}

body.d3 .rkv {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  white-space: nowrap
}

body.d3 .rkv b {
  font-size: 12px;
  line-height: 1
}

body.d3 .rkv span {
  font-size: 11.5px;
  line-height: 1;
  color: rgba(255, 255, 255, .7)
}

body.d3 .rkv.alive {
  background: rgba(62, 197, 105, .07)
}

body.d3 .rkv.alive b {
  color: #3ec569
}

body.d3 .rkv.gone {
  background: rgba(244, 39, 70, .1)
}

body.d3 .rkv.gone b {
  color: #f42746
}

/* thinner ring: base arcs 5, the active set lifts to 7 */
body.d3 .sd-seg {
  stroke-width: 6
}

body.d3 .sd-seg.is-active {
  stroke-width: 7
}

/* Build > Equipment hero header: avatar with name stacked over class on the
   left, mode/level/paragon/GR tags on the right, wrapping when space runs out */
body.d3 .bd-hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 9px
}

body.d3 .bd-av {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: #24252c;
  border: 1px solid #454857
}

body.d3 .bd-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0
}

body.d3 .bd-nm {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

body.d3 .bd-cl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a8aaaf;
}

body.d3 .bd-tags {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 0 0 auto
}

/* narrow: the tags drop to their own full-width row, aligned left */
@media(max-width:560px) {
  body.d3 .bd-tags {
    width: 100%;
    justify-content: flex-start;
    margin: 0
  }
}

/* Skills / Stats: the hero pill sits at the top-right of the card, level with the title */
body.d3 .cs-head-rb {
  display: flex;
  align-items: center;
  gap: 8px
}

body.d3 .cs-head-rb .repbadge {
  margin-left: auto
}

/* Progress bars (stat tiles + gem ranks): the fill and the #444 unfilled part
   are two separate pills with a 3px gap, both fully rounded. The unfilled
   part hangs off the fill's right end; the track clips it at its own
   rounded right edge. */
body.d3 .dst .mini,
body.d3 .gm-bar {
  background: transparent;
  border-radius: 22px;
  overflow: hidden
}

body.d3 .dst .mini>span,
body.d3 .gm-bar span {
  position: relative;
  border-radius: 22px
}

body.d3 .dst .mini>span::after,
body.d3 .gm-bar span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + 3px);
  width: 2000px;
  border-radius: 22px;
  background: #444
}

/* Build header reuses the Top Hero "Softcore" badge; it sits first in the tag
   row, so drop the header-only auto margin and centre it with the other tags */
body.d3 .bd-tags {
  align-items: center
}

body.d3 .bd-mode {
  margin-left: 0
}

/* Best GR in the Build header: same badge as Softcore, in the grade green */
body.d3 .bd-mode-gr {
  background: rgba(62, 197, 105, .16);
  color: #3ec569;
  border: 1px solid rgba(62, 197, 105, .3)
}

/* Build > Stats: attribute list in two columns to condense it; the top row
   on both sides drops its divider */
body.d3 .slist-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px
}

body.d3 .slist-2 .kv:nth-child(-n+2) {
  border-top: none
}

@media(max-width:560px) {
  body.d3 .slist-2 {
    grid-template-columns: 1fr
  }

  body.d3 .slist-2 .kv:nth-child(2) {
    border-top: 1px solid var(--line)
  }
}

/* Career ring: the unfilled part is its own round-capped arc in the same
   #444 as the progress bars, separated from the fill by a small gap */
body.d3 .cw-track {
  stroke: #444;
  transition: opacity .2s
}
/* Career totals: the demo account's widget icons in place of the old glyphs */
body.d3 .dst .dh {
  gap: 7px
}

body.d3 .dh-ic {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: none
}

/* SC and HC boards stack in the same spot; with auto layout each sized its
   columns to its own content, so the right four shifted on every toggle.
   Fixed layout with the app's leaderboard column widths keeps both identical. */
body.d3 .lbt {
  table-layout: fixed
}

body.d3 .lbt th:nth-child(1) { width: 68px }
body.d3 .lbt th:nth-child(3) { width: 130px }
body.d3 .lbt th:nth-child(4) { width: 90px }
body.d3 .lbt th:nth-child(5) { width: 100px }
body.d3 .lbt th:nth-child(6) { width: 90px }

body.d3 .lbt td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis
}

/* Hero logo at 220px without moving anything under it: the wordmark box keeps
   its old 204px footprint (168px logo + 2×18px padding) and the larger logo
   overflows it evenly, centred where it was. The logo's glow filter lifts it
   into its own paint layer, so the copy below is raised to stay on top if the
   two ever meet. Phones keep the smaller logo from the 820px rule. */
@media(min-width:821px) {
  body.d3 .wordmark {
    height: 204px
  }

  body.d3 .wordmark .logo-d3 {
    height: 220px;
    padding: 0;
    margin: -8px 0;
    max-width: none
  }

  body.d3 .hero-inner > :not(.wordmark) {
    position: relative;
    z-index: 1
  }
}

/* the game switcher follows the page under the fixed site header (sticky, as
   in styles.css); the block above sets it relative to lift it over the
   atmosphere, so restate sticky here — it still stacks above the effects */
body.d3 .gswitch-bar {
  position: sticky;
  top: 0;
  z-index: 1000
}

/* two-by-two KPI tiles (Career totals, Build > Stats) drop to one column at the
   same 560px point as the gem tiles and the career widget */
@media(max-width:450px) {
  body.d3 .dstats-2 {
    grid-template-columns: 1fr
  }
}

@media(max-width:620px) {
  body.d3 .gswitch-bar {
    position: relative
  }
}

/* Phones (620px and below): Build > Equipment stacks Armour, Jewellery and
   Weapons in one column, and the mode/level/paragon/GR tags drop to their own
   row under the hero name, aligned left */
@media(max-width:620px) {
  body.d3 .eqgrid {
    grid-template-columns: minmax(0, 1fr)
  }

  body.d3 .bd-tags {
    width: 100%;
    justify-content: flex-start;
    margin: 0
  }
}

/* skill name + rune sit a little closer than the page's 1.6 line height */
body.d3 .skx-t b,
body.d3 .skx-t i {
  line-height: 1.4
}