/* Infernal Realm skin (2026-10-10): the Diablo-style facelift for the Infernal
   realm only. Unlayered and linked AFTER realm-client.css, because that sheet is
   unlayered too and its :is(... #id ...) selectors carry ID specificity; every
   rule here is scoped `body.cr-realm-infernal:not(#cr-skin)` (the :not(#id)
   adds the ID weight that beats them). Other realms never match.

   What it does: the bottom HUD becomes two socketed orbs at the ends of one
   dark plate (values and LIFE / MANA / RAGE / ENERGY inside, driven by the bar
   text hud.ts already writes), the XP rule with a level diamond above the skill
   row, keybind plates under the slots; the quest tracker, minimap ring and
   centre banners; EVERY .window.panel (both window shapes) in a gold-bracketed
   dark frame with a centred Cinzel title; the quest journal's diamond markers;
   the start screens and the creator's portrait cards. The realm client's ember
   tokens are remapped to antique gold so every token-driven surface follows.
   Original CSS; no third-party art. */
/* ---------- infernal skin: tokens ---------- */
body.cr-realm-infernal {
  --ir-gold: #c9a35c;
  --ir-gold-hi: #ead197;
  --ir-gold-dim: #6e5630;
  --ir-iron: #2a221a;
  --ir-ink: #0a0807;
  --ir-ink-2: #14100c;
  --ir-text: #e9dfc9;
  --ir-mute: #a8987a;
  --ir-rule: linear-gradient(90deg, transparent, var(--ir-gold-dim) 15%, var(--ir-gold) 50%, var(--ir-gold-dim) 85%, transparent);
  --ir-plate: linear-gradient(180deg, #1b1510 0%, #0e0b08 55%, #070505 100%);
}
/* The realm client's ember accent becomes antique gold across every surface
   that reads the shared tokens (windows, tabs, chips, headings, focus rings).
   ID weight beats the client's `:root, body` declaration. */
body.cr-realm-infernal:not(#cr-skin) {
  --gold: #c9a35c;
  --gold-dim: #6e5630;
  --border: #4a3a22;
  --panel-border: #4a3a22;
  --color-primary: #c9a35c;
  --color-primary-dim: #6e5630;
  --color-primary-glow: rgba(201, 163, 92, 0.2);
  --color-primary-glow-heavy: rgba(201, 163, 92, 0.38);
  --color-gold: #d8b673;
  --color-accent: #d8b673;
  --color-border-default: #4a3a22;
  --color-border-showcase: #3a2e1c;
  --color-border-focus: #d8b673;
  --color-text-heading: #f0e2c4;
  --cr-client-ember: #b8924e;
  --cr-client-ember-bright: #dcbc7a;
  --cr-client-copper: #c9a35c;
  --cr-client-line: rgba(201, 163, 92, 0.22);
}

/* ---------- infernal skin: bottom hud ---------- */
/* The Diablo-style bar: two big orbs at the ends of one dark plate, the XP rule
   and level diamond above the skill row, keybinds on plates under each slot.
   Desktop only; the mobile action ring keeps its own layout. */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #bottom-bar {
  bottom: 0;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #actionbar-stack {
  padding: 18px 146px 14px;
  isolation: isolate;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #actionbar-stack::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 84px;
  right: 84px;
  bottom: 0;
  height: 110px;
  background:
    linear-gradient(90deg, #000 0, transparent 9%, transparent 91%, #000 100%),
    repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 7px),
    var(--ir-plate);
  border-top: 1px solid var(--ir-gold-dim);
  box-shadow:
    0 -1px 0 #000,
    inset 0 1px 0 #ffffff12,
    0 -10px 28px #000c;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #actionbar-stack::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 103px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--ir-ink);
  border: 1px solid var(--ir-gold);
  box-shadow: 0 0 6px #c9a35c66;
}

/* The upstream globe overlay and the nameplate row give way to the two orbs. */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #cr-hud-globes {
  display: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
  background: none;
  border: 0;
  box-shadow: none;
  outline: 0;
  pointer-events: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .portrait-wrap,
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars,
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar {
  position: static;
  background: none;
  border: 0;
  box-shadow: none;
  outline: 0;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .portrait,
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars > :not(.bar),
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar-fill {
  display: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar {
  display: block;
  height: 0;
  overflow: visible;
}
/* Orb sockets: an iron band between two gold rings, behind each orb. */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached)::before,
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached)::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 61px, #000 61px 62px, var(--ir-gold) 62px 63.5px, #3a2c1a 63.5px 65px,
      #120d09 65px 71px, var(--ir-gold-dim) 71px 72px, #050403 72px 74px, transparent 74.5px);
  filter: drop-shadow(0 6px 10px #000);
  pointer-events: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached)::before {
  left: 4px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached)::after {
  right: 4px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .hp-orb,
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .mp-orb {
  position: absolute;
  bottom: 20px;
  width: 124px;
  height: 124px;
  margin: 0;
  box-shadow:
    inset 0 0 22px 6px #000c,
    inset 0 -8px 18px #000a;
  background: radial-gradient(circle at 50% 38%, #1a0b08, #030202 78%);
  pointer-events: auto;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .hp-orb {
  left: 18px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .mp-orb {
  right: 18px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame .hp-orb .orb-fill {
  background:
    radial-gradient(circle at 50% 20%, #ff6a52 0, #b3170f 42%, #5e0806 78%, #2a0302 100%);
  box-shadow: inset 0 3px 6px #ffb0a044;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame .mp-orb .orb-fill {
  background:
    radial-gradient(circle at 50% 20%, #6f8fd8 0, #23418e 42%, #0e1d47 78%, #050b1d 100%);
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame .orb-gloss {
  background:
    radial-gradient(ellipse 46% 30% at 42% 24%, #ffffff55, #ffffff00 70%),
    radial-gradient(circle at 50% 118%, #000a, #0000 58%);
}
/* The value and the word inside each orb (hud.ts keeps writing the bar text). */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar-text {
  position: absolute;
  inset: auto;
  bottom: 80px;
  line-height: 1;
  width: 124px;
  z-index: 2;
  text-align: center;
  font: 700 15px/1 var(--font-serif);
  color: #f3e9d4;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
  letter-spacing: 0.5px;
  pointer-events: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar.hp .bar-text {
  left: 18px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar:not(.hp) .bar-text {
  right: 18px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar::after {
  position: absolute;
  bottom: 62px;
  width: 124px;
  z-index: 2;
  text-align: center;
  font: 600 10px/1 var(--font-display);
  letter-spacing: 2px;
  color: #e0c48c;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar.hp::after {
  content: "LIFE";
  left: 18px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar.mana::after {
  content: "MANA";
  right: 18px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar.rage::after {
  content: "RAGE";
  right: 18px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) .uf-bars .bar.energy::after {
  content: "ENERGY";
  right: 18px;
}
/* The level as a diamond at the head of the XP rule. */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) #pf-level {
  position: absolute;
  left: 156px;
  bottom: 86px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  z-index: 3;
  background: none;
  border: 0;
  box-shadow: none;
  font: 700 12px/1 var(--font-display);
  color: var(--ir-gold-hi);
  text-shadow: 0 1px 2px #000;
  isolation: isolate;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #player-frame.has-orbs:not(.pf-detached) #pf-level::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #2a2017, #0a0807);
  border: 1px solid var(--ir-gold);
  box-shadow: 0 0 0 1px #000, 0 0 6px #c9a35c55;
}

/* XP rule above the skill row. */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #xpbar {
  order: 1;
  width: auto;
  height: 6px;
  margin: 0 8px 6px 34px;
  background: #050403;
  border: 1px solid #000;
  outline: 1px solid var(--ir-gold-dim);
  border-radius: 0;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #xpbar .fill {
  background: linear-gradient(#f2c870, #9c5a18);
  box-shadow: 0 0 6px #e0a04866;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #xpbar .ticks i {
  border-right-color: #000a;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #xpbar .label {
  font: 600 9px/6px var(--font-display);
  letter-spacing: 1px;
}

/* The stance/aura row sits above the XP rule, clear of the level diamond. */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #stancebar {
  margin: 0 0 8px 28px;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #chatlog-wrap {
  max-width: 330px;
}

/* Skill row. */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #actionbar {
  order: 2;
  gap: 6px;
  padding: 2px 6px 20px;
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #actionbar2,
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #actionbar3 {
  gap: 6px;
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}
body.cr-realm-infernal:not(#cr-skin) .action-btn {
  border: 1px solid var(--ir-gold-dim);
  border-radius: 2px;
  background: radial-gradient(circle at 50% 38%, #241c15, #090706);
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 0 14px #000,
    0 2px 6px #000b;
}
body.cr-realm-infernal:not(#cr-skin) .action-btn .icon-label {
  inset: 2px;
  border-radius: 1px;
}
body.cr-realm-infernal:not(#cr-skin) .action-btn:hover {
  border-color: var(--ir-gold);
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 0 14px #000,
    0 0 10px #c9a35c55;
}
body.cr-realm-infernal:not(#cr-skin) .action-btn.empty {
  background: radial-gradient(circle at 50% 38%, #15110d, #070505);
}
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #actionbar .action-btn .keybind {
  top: auto;
  right: auto;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 20px;
  padding: 1px 4px;
  font: 600 9px/11px var(--font-display);
  letter-spacing: 0.5px;
  color: var(--ir-mute);
  background: var(--ir-ink);
  border: 1px solid #3c2f1c;
  text-align: center;
  text-shadow: none;
}

/* ---------- infernal skin: minimap + trackers ---------- */
body.cr-realm-infernal:not(#cr-skin) #minimap-disc {
  border-radius: 50%;
  border-color: var(--ir-gold-dim);
  box-shadow:
    0 0 0 2px #000,
    0 0 0 6px #17110c,
    0 0 0 7px var(--ir-gold-dim),
    0 0 0 8px #000,
    0 8px 22px #000c;
}
body.cr-realm-infernal:not(#cr-skin) #zone-label {
  font: 600 13px var(--font-display);
  letter-spacing: 2px;
  color: var(--ir-gold-hi);
  text-shadow: 0 1px 2px #000, 0 0 8px #000;
}
body.cr-realm-infernal:not(#cr-skin) #quest-tracker:not(:empty) {
  background: linear-gradient(180deg, #120e0bf2, #0a0807e8);
  border: 1px solid var(--ir-gold-dim);
  box-shadow: inset 0 0 0 1px #000, 0 6px 18px #000b;
  padding-bottom: 8px;
}
body.cr-realm-infernal:not(#cr-skin) #quest-tracker .qt-header {
  width: 100%;
  padding: 6px 10px;
  background: linear-gradient(180deg, #2a2017, #13100c);
  border: 0;
  border-bottom: 1px solid var(--ir-gold-dim);
  border-radius: 0;
  font: 600 14px var(--font-serif);
  color: var(--ir-gold-hi);
  letter-spacing: 0.5px;
  text-align: left;
}
body.cr-realm-infernal:not(#cr-skin) #quest-tracker .qt-count {
  color: var(--ir-mute);
  font-size: 11px;
}
body.cr-realm-infernal:not(#cr-skin) #quest-tracker .qt-title {
  padding: 7px 12px 2px;
  font: 600 14px var(--font-serif);
  color: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin) #quest-tracker .qt-title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  vertical-align: 2px;
  transform: rotate(45deg);
  background: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin) #quest-tracker .qt-num {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-right: 8px;
  font: 600 11px var(--font-display);
  color: var(--ir-mute);
}
body.cr-realm-infernal:not(#cr-skin) #quest-tracker .qt-obj {
  padding: 1px 12px 1px 30px;
  font: 13px/1.35 var(--font-serif);
  color: var(--ir-text);
}
body.cr-realm-infernal:not(#cr-skin) #quest-tracker .qt-obj.done {
  color: var(--ir-mute);
  text-decoration: line-through;
}

/* Centre banners: the zone, the quest beat, the error line. */
body.cr-realm-infernal:not(#cr-skin) #subzone-banner,
body.cr-realm-infernal:not(#cr-skin) #banner,
body.cr-realm-infernal:not(#cr-skin) #quest-banner {
  font-family: var(--font-display);
  color: var(--ir-gold-hi);
  letter-spacing: 2px;
  text-shadow: 0 2px 10px #000, 0 0 2px #000;
}
body.cr-realm-infernal:not(#cr-skin) #error-msg {
  font-family: var(--font-serif);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
}

/* ---------- infernal skin: windows ---------- */
/* Every .window.panel (bags, quest log, talents, vendor, bank, map...): a dark
   frame, gold hairline, gold corner brackets, a centred Cinzel title over a gold
   rule. The sticky title keeps its position rules; only its paint changes. */
body.cr-realm-infernal:not(#cr-skin) .window.panel {
  background:
    radial-gradient(120% 70% at 50% 0%, #1d1712 0%, #0e0b08 55%, #080605 100%);
  border: 1px solid var(--ir-gold-dim);
  outline: 1px solid #000;
  border-radius: 1px;
  box-shadow:
    0 0 0 4px #0d0a08,
    0 0 0 5px #3d301c,
    0 20px 54px #000e,
    inset 0 0 40px #0008;
  color: var(--ir-text);
}
body.cr-realm-infernal:not(#cr-skin) .window.panel::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 7;
  pointer-events: none;
  background:
    linear-gradient(var(--ir-gold), var(--ir-gold)) left top / 18px 2px no-repeat,
    linear-gradient(var(--ir-gold), var(--ir-gold)) left top / 2px 18px no-repeat,
    linear-gradient(var(--ir-gold), var(--ir-gold)) right top / 18px 2px no-repeat,
    linear-gradient(var(--ir-gold), var(--ir-gold)) right top / 2px 18px no-repeat,
    linear-gradient(var(--ir-gold), var(--ir-gold)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--ir-gold), var(--ir-gold)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--ir-gold), var(--ir-gold)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--ir-gold), var(--ir-gold)) right bottom / 2px 18px no-repeat;
}
body.cr-realm-infernal:not(#cr-skin) .window.panel > .panel-title {
  justify-content: center;
  gap: 10px;
  padding-top: 4px;
  padding-bottom: 10px;
  border-bottom: 0;
  background: var(--ir-rule) center bottom / 100% 1px no-repeat;
  font: 600 15px var(--font-display);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ir-gold-hi);
  text-shadow: 0 1px 2px #000, 0 0 10px #000;
}
body.cr-realm-infernal:not(#cr-skin) .window.panel > .panel-title :is(span, h2, h3, .char-title-text):not(.quest-muted) {
  color: inherit;
}
body.cr-realm-infernal:not(#cr-skin) .window > .panel-title::before {
  display: none;
}
body.cr-realm-infernal:not(#cr-skin) .window.panel > .panel-title > :first-child {
  flex: 1;
  text-align: center;
  padding-left: 28px;
}
body.cr-realm-infernal:not(#cr-skin) .window.panel > .panel-title .quest-muted {
  margin-left: 8px;
  font: 600 10px var(--font-display);
  letter-spacing: 1.5px;
  color: var(--ir-mute);
}
body.cr-realm-infernal:not(#cr-skin) .window.panel .x-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--ir-gold-dim);
  border-radius: 0;
  background: var(--ir-ink);
  color: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin) .window.panel .x-btn:hover {
  border-color: var(--ir-gold);
  color: #fff;
  box-shadow: 0 0 8px #c9a35c55;
}
/* Buttons and filter chips inside windows. */
body.cr-realm-infernal:not(#cr-skin) .window.panel .btn,
body.cr-realm-infernal:not(#cr-skin) .window.panel .btn-secondary,
body.cr-realm-infernal:not(#cr-skin) .window.panel .bag-chip,
body.cr-realm-infernal:not(#cr-skin) .window.panel .mt-tab {
  border: 1px solid #4a3a22;
  border-radius: 0;
  background: linear-gradient(180deg, #1c1611, #0d0a08);
  color: var(--ir-text);
  font-family: var(--font-serif);
  box-shadow: inset 0 1px 0 #ffffff0a;
}
body.cr-realm-infernal:not(#cr-skin) .window.panel .btn:hover,
body.cr-realm-infernal:not(#cr-skin) .window.panel .btn-secondary:hover,
body.cr-realm-infernal:not(#cr-skin) .window.panel .bag-chip:hover,
body.cr-realm-infernal:not(#cr-skin) .window.panel .mt-tab:hover {
  border-color: var(--ir-gold-dim);
  color: var(--ir-gold-hi);
}
body.cr-realm-infernal:not(#cr-skin) .window.panel .btn-primary,
body.cr-realm-infernal:not(#cr-skin) .window.panel .bag-chip.active,
body.cr-realm-infernal:not(#cr-skin) .window.panel .mt-tab.active {
  border: 1px solid var(--ir-gold);
  border-radius: 0;
  background: linear-gradient(180deg, #3a2a16, #1a120a);
  color: var(--ir-gold-hi);
  font-family: var(--font-serif);
}

/* Quest journal. */
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .ql-list {
  border-right: 1px solid #3a2e1c;
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .ql-item {
  position: relative;
  padding: 7px 10px 7px 30px;
  border-left: 2px solid transparent;
  font: 15px var(--font-serif);
  color: var(--ir-text);
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .ql-item::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  transform: rotate(45deg);
  border: 1px solid var(--ir-gold-dim);
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .ql-item.sel {
  border-left-color: var(--ir-gold);
  background: linear-gradient(90deg, #3a2a16b0, #3a2a1620 70%, transparent);
  color: var(--ir-gold-hi);
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .ql-item.sel::before {
  border-color: var(--ir-gold);
  background: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .ql-empty,
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .qd-text {
  font: 15px/1.55 var(--font-serif);
  color: var(--ir-text);
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .ql-detail-title {
  font: 600 24px var(--font-serif);
  color: #f3e8cf;
  letter-spacing: 0.3px;
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .qd-sub:not(.ql-detail-title),
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .qd-reward-label {
  font: 600 11px var(--font-display);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .qd-obj {
  position: relative;
  padding-left: 22px;
  font: 14px/1.5 var(--font-serif);
}
body.cr-realm-infernal:not(#cr-skin) #quest-log-window .qd-obj::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border: 1px solid var(--ir-gold);
}

/* ---------- infernal skin: chat, side buttons, target ---------- */
body.cr-realm-infernal:not(#cr-skin) #chatlog-frame,
body.cr-realm-infernal:not(#cr-skin) #chatlog {
  background: linear-gradient(180deg, #0c0907d9, #070505cc);
  border-color: #3c2f1c;
  border-radius: 1px;
}
body.cr-realm-infernal:not(#cr-skin) .chat-tab {
  font-family: var(--font-display);
  letter-spacing: 1px;
  border-radius: 0;
}
body.cr-realm-infernal:not(#cr-skin) #side-buttons .micro-btn {
  border: 1px solid var(--ir-gold-dim);
  border-radius: 1px;
  background: radial-gradient(circle at 50% 38%, #221a14, #0a0807);
  box-shadow: inset 0 0 0 1px #000, 0 2px 6px #000a;
}
body.cr-realm-infernal:not(#cr-skin) #side-buttons .micro-btn:hover {
  border-color: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin) #target-frame.unitframe {
  background: var(--ir-plate);
  border: 1px solid var(--ir-gold-dim);
  border-radius: 1px;
  box-shadow: 0 0 0 1px #000, 0 8px 20px #000b;
}
body.cr-realm-infernal:not(#cr-skin) #target-frame .uf-name {
  font-family: var(--font-display);
  letter-spacing: 1px;
  color: var(--ir-gold-hi);
}

/* ---------- infernal skin: stance, tooltip, fields ---------- */
body.cr-realm-infernal:not(#cr-skin):not(.mobile-touch) #stancebar {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body.cr-realm-infernal:not(#cr-skin) #stancebar :is(.action-btn, button) {
  border: 1px solid var(--ir-gold-dim);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #000, 0 2px 6px #000b;
}
body.cr-realm-infernal:not(#cr-skin) #stancebar :is(.action-btn, button):is(.active, .on, [aria-pressed="true"]) {
  border-color: var(--ir-gold);
  box-shadow: inset 0 0 0 1px #000, 0 0 8px #c9a35c66;
}
body.cr-realm-infernal:not(#cr-skin) #tooltip {
  border: 1px solid var(--ir-gold-dim);
  border-left: 1px solid var(--ir-gold-dim);
  border-radius: 1px;
  background: linear-gradient(180deg, #16110dfa, #0a0807fa);
  box-shadow: 0 0 0 1px #000, 0 10px 28px #000d;
  color: var(--ir-text);
  font-family: var(--font-serif);
}
body.cr-realm-infernal:not(#cr-skin) .window.panel :is(input, select, textarea) {
  border: 1px solid #4a3a22;
  border-radius: 0;
  background: #090706;
  color: var(--ir-text);
  font-family: var(--font-serif);
}
body.cr-realm-infernal:not(#cr-skin) .window.panel :is(input, select, textarea):focus {
  border-color: var(--ir-gold);
  outline-color: var(--ir-gold);
  box-shadow: 0 0 0 2px #c9a35c22;
}

/* ---------- infernal skin: start screens ---------- */
/* Mode select, character select and the creator wear the window frame; the
   hero roster becomes tall portrait cards ("choose your oath"), the details
   panel a framed page beside them. */
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .auth-panel {
  background: radial-gradient(120% 70% at 50% 0%, #1b1511f2, #0b0908f5 60%, #070505f8);
  border: 1px solid var(--ir-gold-dim);
  border-radius: 1px;
  box-shadow:
    0 0 0 4px #0d0a08,
    0 0 0 5px #3d301c,
    0 24px 60px #000e;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .auth-title {
  padding-bottom: 14px;
  border: 0;
  background: var(--ir-rule) center bottom / 70% 1px no-repeat;
  font: 600 30px var(--font-display);
  letter-spacing: 3px;
  color: #efe3c8;
  text-align: center;
  text-shadow: 0 2px 10px #000;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .auth-label {
  font: 600 11px var(--font-display);
  letter-spacing: 3px;
  color: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen :is(input, select) {
  border: 1px solid #4a3a22;
  border-radius: 0;
  background: #090706;
  color: var(--ir-text);
  font-family: var(--font-serif);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen :is(input, select):focus {
  border-color: var(--ir-gold);
  box-shadow: 0 0 0 2px #c9a35c22;
  outline: 0;
}
/* The hero roster: portrait cards. */
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class {
  position: relative;
  min-height: 196px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ir-gold-dim);
  border-radius: 0;
  background: radial-gradient(90% 70% at 50% 30%, #2a201a, #0b0908 75%);
  box-shadow: inset 0 0 0 1px #000, 0 6px 16px #000b;
  text-align: center;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.92) brightness(0.9);
  transform: none;
  opacity: 1;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 34px 6px 9px;
  background: linear-gradient(180deg, transparent, #000c 48%, #000e);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class-label {
  font: 600 15px/1.1 var(--font-serif);
  letter-spacing: 0.3px;
  color: #efe3c8;
  text-transform: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class-faction {
  font: 600 9px var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class:hover {
  border-color: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class:is(.sel, [aria-pressed="true"]) {
  border-color: var(--ir-gold-hi);
  box-shadow:
    inset 0 0 0 1px #000,
    0 0 0 1px #000,
    0 0 16px #c9a35c66;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class:is(.sel, [aria-pressed="true"])::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--ir-gold-hi);
  box-shadow: 0 0 8px #ead19788;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class-variants {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}
/* The details page beside the roster. */
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .class-details-panel {
  border: 1px solid var(--ir-gold-dim);
  border-radius: 0;
  background: linear-gradient(180deg, #120e0bf2, #0a0807f5);
  box-shadow: inset 0 0 0 1px #000, 0 10px 30px #000c;
  color: var(--ir-text);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .class-details-panel :is(h2, h3) {
  font: 600 28px var(--font-serif);
  color: #f3e8cf;
  letter-spacing: 0.3px;
  text-transform: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .class-details-panel h4 {
  font: 600 10px var(--font-display);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ir-gold);
  border-color: #3a2e1c;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .details-stat-bar-fill {
  background: linear-gradient(90deg, #8a6430, #e2c27e);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .char-preview-container {
  border: 1px solid var(--ir-gold-dim);
  border-radius: 0;
  background: radial-gradient(80% 70% at 50% 40%, #1d1712, #070505);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 40px #000;
}
/* "Begin" and "Back". */
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .auth-actions .btn-primary {
  border: 1px solid var(--ir-gold);
  border-radius: 0;
  background: linear-gradient(180deg, #4a3518, #23180b);
  color: #f3e3bb;
  font: 600 15px var(--font-serif);
  letter-spacing: 0.5px;
  text-transform: none;
  box-shadow: inset 0 1px 0 #ffffff1a, 0 0 14px #c9a35c33;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .auth-actions .btn-primary:hover {
  background: linear-gradient(180deg, #5c4220, #2c1e0e);
  box-shadow: inset 0 1px 0 #ffffff22, 0 0 20px #c9a35c55;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .auth-actions .btn-secondary {
  border: 1px solid #4a3a22;
  border-radius: 0;
  background: linear-gradient(180deg, #17120e, #0b0908);
  color: var(--ir-text);
  font: 15px var(--font-serif);
  text-transform: none;
}

/* ---------- infernal skin: framed windows and chips ---------- */
/* The second window shape (.window-frame > .window-titlebar > .window-title:
   character, talents, crafting...) gets the same title treatment. */
body.cr-realm-infernal:not(#cr-skin) {
  --window-title-color: #ead197;
}
body.cr-realm-infernal:not(#cr-skin) .window .window-titlebar {
  justify-content: center;
  border-bottom: 0;
  background: var(--ir-rule) center bottom / 100% 1px no-repeat;
}
body.cr-realm-infernal:not(#cr-skin) .window .window-titlebar::before {
  display: none;
}
body.cr-realm-infernal:not(#cr-skin) .window .window-title {
  font: 600 15px var(--font-display);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ir-gold-hi);
  text-shadow: 0 1px 2px #000, 0 0 10px #000;
}
body.cr-realm-infernal:not(#cr-skin) .window .window-close {
  border: 1px solid var(--ir-gold-dim);
  border-radius: 0;
  background: var(--ir-ink);
  color: var(--ir-gold);
}
body.cr-realm-infernal:not(#cr-skin) .window .window-close:hover {
  border-color: var(--ir-gold);
  color: #fff;
}
body.cr-realm-infernal:not(#cr-skin) .body-skin-chip {
  border-color: #4a3a22;
  border-radius: 0;
  background: #0e0b08;
  color: var(--ir-text);
}
body.cr-realm-infernal:not(#cr-skin) .body-skin-chip.sel {
  border-color: var(--ir-gold);
  box-shadow: inset 0 0 0 1px var(--ir-gold), 0 0 10px #c9a35c44;
}

/* ---------- infernal skin: start-screen picks ---------- */
/* The realm client forces every pre-game primary button orange with
   !important; the Infernal "Enter Realm" answers in kind. */
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .btn-primary {
  border-color: var(--ir-gold) !important;
  color: #f3e3bb !important;
  background: linear-gradient(180deg, #4a3518, #23180b) !important;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .btn-primary:hover {
  background: linear-gradient(180deg, #5c4220, #2c1e0e) !important;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .offline-realm-card {
  border: 1px solid #3a2e1c;
  border-radius: 0;
  background: #0c0907;
  color: var(--ir-mute);
  font-family: var(--font-display);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .offline-realm-card:is(:hover, :focus-visible) {
  border-color: var(--ir-gold-dim);
  color: var(--ir-text);
  box-shadow: none;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .offline-realm-card.sel {
  border-color: var(--ir-gold);
  color: var(--ir-gold-hi);
  box-shadow: inset 0 0 0 1px #000, 0 0 10px #c9a35c44;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .realm-faction-tab {
  border: 0;
  border-bottom: 1px solid #3a2e1c;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 13px var(--font-display);
  letter-spacing: 2px;
  color: var(--ir-mute);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .realm-faction-tab:is(:hover, :focus-visible) {
  color: var(--ir-text);
  border-bottom-color: var(--ir-gold-dim);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .realm-faction-tab.sel {
  border-bottom: 2px solid var(--ir-gold);
  color: var(--ir-gold-hi);
  box-shadow: none;
}

body.cr-realm-infernal:not(#cr-skin) .window .window-titlebar .window-title {
  flex: 1;
  text-align: center;
  padding-left: 28px;
}
body.cr-realm-infernal:not(#cr-skin) .window .window-titlebar .window-close {
  margin-left: auto;
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class-variant {
  border: 1px solid #4a3a22;
  border-radius: 0;
  background: #0b0908d9;
  color: var(--ir-mute);
}
body.cr-realm-infernal:not(#cr-skin):not(.game-active) #start-screen .infernal-hero-roster .mini-class-variant.sel {
  border-color: var(--ir-gold);
  color: var(--ir-gold-hi);
}