/* ==========================================================================
   Sanctuary theme — Circle of Nine
   Shared visual layer for every portal page: design tokens, the stone
   header/footer chrome, D2 main-menu buttons and the
   restyled shared primitives (.hero, .panel, .btn, .field, tables, .notice,
   .quest-scroll, .char-sheet). Loaded right after c9.css so page sheets can
   still refine it. Inventory/stash geometry and data hooks live in c9.css
   and are deliberately untouched here.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Base tones: worked obsidian, wet flagstone, old iron. These override the
     c9.css defaults; since round 7 they follow the cold, grim stone of the D2R UI. */
  --void: #050505;
  --night: #080808;
  --night-2: #0b0b0b;
  --obsidian: #0d0d0d;
  --stone: #121212;
  --stone-raised: #181818;
  --iron: #262626;
  --iron-bright: #45423d;
  --bone: #d4cbb8;
  --bone-bright: #ebe3d0;
  --ash: #a39b8b;
  --dim: #8f887b;
  /* Accents straight from the game: blood, crimson, ember, mana, poison, unique gold. */
  --blood: #6e0b0b;
  --blood-bright: #a3141c;
  --crimson: #c41e2a;
  --ember: #a88a52;
  --mana: #3a5ec4;
  --mana-bright: #8a9ee0;
  --poison: #5aa65a;
  --gold: #a8884a;
  --gold-bright: #c9a85f;
  --gold-pale: #d9c79c;
  --gold-deep: #5e4d2a;
  --frost: #c4c9d2;
  --parchment: #e6d19f;
  --parchment-dark: #c6a86d;
  --ink: #d4cbb8;
  --line: rgba(168, 136, 74, .16);
  --line-strong: rgba(168, 136, 74, .32);
  --gold-line: rgba(201, 168, 95, .38);
  --blood-line: rgba(163, 20, 28, .45);
  --shadow: 0 28px 70px rgba(0, 0, 0, .72);
  --inset: inset 0 0 0 1px rgba(0, 0, 0, .7);
  --radius: 2px;
  --display: "C9DiabloUI", "C9Serif", Georgia, serif;
  --serif: "C9Serif", Georgia, "Times New Roman", serif;
  --label: "C9Nav", Arial, sans-serif;
  --stone-tile: url("/assets/dark-stone.svg");
  --parchment-noise: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --header-height: 118px;
}

html { background: var(--void); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 12px); }
body {
  color: var(--bone);
  font-family: var(--serif);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(139, 0, 0, .22), transparent 38rem),
    radial-gradient(ellipse at 100% 110%, rgba(65, 105, 225, .07), transparent 32rem),
    linear-gradient(rgba(6, 4, 4, .82), rgba(6, 4, 4, .94)),
    var(--stone-tile) center top / 480px 480px repeat,
    var(--void);
}
body::before { background: none; }
body::after { color: transparent; -webkit-text-stroke: 1px rgba(233, 197, 106, .035); }
::selection { background: rgba(139, 0, 0, .85); color: #fff3d6; }
a { color: var(--gold-bright); }
a:hover { color: var(--gold-pale); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--bone-bright); letter-spacing: .02em; }
code, pre, .code { color: var(--gold-pale); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; padding: 10px 16px; background: var(--blood); color: #fff; font-family: var(--label); }
.skip-link:focus { left: 8px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Backdrop: a slow bank of fog and the old operator-hero hook. */
.sanctuary-backdrop {
  position: fixed; inset: 0 0 auto; z-index: -4; height: min(70vh, 760px); opacity: .55;
  background:
    linear-gradient(to bottom, rgba(6, 4, 4, .2), rgba(6, 4, 4, .9) 70%, var(--void)),
    radial-gradient(circle at 50% 20%, rgba(139, 0, 0, .25), transparent 45%);
  filter: none;
}
.sanctuary-vignette { position: fixed; inset: 0; z-index: -2; pointer-events: none; box-shadow: inset 0 0 220px 70px rgba(0, 0, 0, .9); background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 18%, transparent 82%, rgba(0,0,0,.55)); }
.sanctuary-fog {
  position: fixed; inset: -20% -10%; z-index: -3; pointer-events: none; opacity: .32;
  background:
    radial-gradient(ellipse 40% 30% at 20% 70%, rgba(120, 90, 60, .14), transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 40%, rgba(65, 60, 55, .12), transparent 70%),
    radial-gradient(ellipse 35% 25% at 50% 90%, rgba(139, 0, 0, .08), transparent 70%);
  animation: fog-drift 70s ease-in-out infinite alternate;
}
@keyframes fog-drift { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.06); } }

/* Embers rising out of hero sections. */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.embers i {
  position: absolute; bottom: -12px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #ffd9a0 0, var(--ember) 40%, rgba(176, 132, 60, 0) 70%);
  box-shadow: 0 0 10px rgba(176, 132, 60, .9), 0 0 24px rgba(196, 30, 58, .5);
  opacity: 0; animation: ember-rise 9s linear infinite;
}
.embers-mana i { background: radial-gradient(circle, #e2ecff 0, var(--mana-bright) 40%, rgba(65, 105, 225, 0) 70%); box-shadow: 0 0 10px rgba(125, 162, 255, .9), 0 0 24px rgba(65, 105, 225, .5); }
.embers i:nth-child(1) { left: 4%; animation-duration: 11s; animation-delay: 0s; }
.embers i:nth-child(2) { left: 11%; animation-duration: 8s; animation-delay: 1.3s; width: 3px; height: 3px; }
.embers i:nth-child(3) { left: 17%; animation-duration: 12s; animation-delay: 3s; }
.embers i:nth-child(4) { left: 24%; animation-duration: 9s; animation-delay: .6s; width: 5px; height: 5px; }
.embers i:nth-child(5) { left: 31%; animation-duration: 13s; animation-delay: 2.2s; }
.embers i:nth-child(6) { left: 37%; animation-duration: 8.5s; animation-delay: 4.1s; width: 3px; height: 3px; }
.embers i:nth-child(7) { left: 43%; animation-duration: 10s; animation-delay: 1.8s; }
.embers i:nth-child(8) { left: 50%; animation-duration: 12.5s; animation-delay: 5s; width: 5px; height: 5px; }
.embers i:nth-child(9) { left: 56%; animation-duration: 9.5s; animation-delay: .2s; }
.embers i:nth-child(10) { left: 62%; animation-duration: 11s; animation-delay: 3.6s; width: 3px; height: 3px; }
.embers i:nth-child(11) { left: 68%; animation-duration: 8s; animation-delay: 2.7s; }
.embers i:nth-child(12) { left: 74%; animation-duration: 13s; animation-delay: 1s; width: 5px; height: 5px; }
.embers i:nth-child(13) { left: 80%; animation-duration: 10.5s; animation-delay: 4.6s; }
.embers i:nth-child(14) { left: 86%; animation-duration: 9s; animation-delay: .9s; width: 3px; height: 3px; }
.embers i:nth-child(15) { left: 92%; animation-duration: 12s; animation-delay: 2.4s; }
.embers i:nth-child(16) { left: 97%; animation-duration: 8.8s; animation-delay: 5.4s; }
.embers i:nth-child(17) { left: 8%; animation-duration: 14s; animation-delay: 6.2s; width: 2px; height: 2px; }
.embers i:nth-child(18) { left: 46%; animation-duration: 11.5s; animation-delay: 7s; width: 2px; height: 2px; }
.embers i:nth-child(19) { left: 28%; animation-duration: 10s; animation-delay: 6.6s; }
.embers i:nth-child(20) { left: 65%; animation-duration: 9.2s; animation-delay: 7.7s; width: 3px; height: 3px; }
.embers i:nth-child(21) { left: 83%; animation-duration: 12.8s; animation-delay: 8.1s; }
.embers i:nth-child(22) { left: 14%; animation-duration: 10.8s; animation-delay: 8.8s; width: 2px; height: 2px; }
@keyframes ember-rise {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate3d(14px, -45vh, 0) scale(1); opacity: .9; }
  100% { transform: translate3d(-18px, -95vh, 0) scale(.3); opacity: 0; }
}
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--poison); box-shadow: 0 0 10px var(--poison); animation: live-pulse 2.4s ease-in-out infinite; vertical-align: middle; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --------------------------------------------------------------------------
   Header: an iron beam (world switch, season, language) over a stone bar
   (seal, navigation, gem, profile, download). Sticky on every page.
   -------------------------------------------------------------------------- */
.rh { position: sticky; top: 0; z-index: 200; }
.rh-top {
  position: relative; height: 34px;
  background: linear-gradient(#1d1b1a, #100f0f 55%, #0a0908);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(233, 197, 106, .16), inset 0 -1px 0 rgba(0, 0, 0, .8);
}
.rh-top-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.realm-switch { display: flex; align-items: stretch; height: 34px; gap: 2px; font: 600 10px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.realm-switch a { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: #a99a7e; border-bottom: 2px solid transparent; transition: color .2s, background .2s; }
.realm-switch a:hover { color: var(--gold-pale); background: rgba(233, 197, 106, .05); }
.realm-switch a[aria-current] { color: var(--gold-pale); border-bottom-color: var(--gold); background: linear-gradient(rgba(233, 197, 106, .06), transparent); }
.realm-switch-home { padding-left: 0 !important; font-family: var(--display); font-size: 13px; letter-spacing: .2em; color: var(--gold-bright) !important; }
.realm-switch-home b { color: var(--blood-bright); font-weight: 400; }
.realm-switch-world i { width: 7px; height: 7px; transform: rotate(45deg); flex: none; }
.realm-switch-lod i { background: var(--blood-bright); box-shadow: 0 0 10px rgba(220, 20, 60, .8); }
.realm-switch-d2r i { background: var(--mana); box-shadow: 0 0 10px rgba(65, 105, 225, .8); }
.rh-top-right { display: flex; align-items: center; gap: 22px; }
.rh-season { display: flex; align-items: center; gap: 9px; max-width: 320px; color: #a99a7e; font: 600 9px/1 var(--label); letter-spacing: .13em; text-transform: uppercase; }
.rh-season i { width: 7px; height: 7px; border-radius: 50%; background: var(--poison); box-shadow: 0 0 10px var(--poison); }
.rh-season small { color: #6e6250; font-size: 8px; }
.rh-season strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold-bright); font-weight: 600; }
.rh-lang { display: flex; align-items: center; gap: 7px; font: 600 10px/1 var(--label); letter-spacing: .12em; color: #6e6250; }
.rh-lang a { color: #8e8068; }
.rh-lang a:hover, .rh-lang a[aria-current] { color: var(--gold-bright); }

.rh-bar {
  position: relative;
  background:
    linear-gradient(rgba(21, 20, 19, .97), rgba(10, 10, 10, .98)),
    var(--stone-tile) center / 480px repeat;
  box-shadow: inset 0 1px 0 rgba(233, 197, 106, .08), 0 18px 40px rgba(0, 0, 0, .7);
}
.rh-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-deep) 18%, var(--gold-bright) 50%, var(--gold-deep) 82%, transparent); opacity: .9; }
.rh-bar::after {
  /* iron spikes under the cornice */
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; pointer-events: none;
  background:
    linear-gradient(135deg, #262422 25%, transparent 25%) 0 0 / 14px 9px,
    linear-gradient(225deg, #171514 25%, transparent 25%) 0 0 / 14px 9px;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .8));
}
.rh-bar-inner { height: 84px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; }
.rh-brand { display: inline-flex; align-items: center; gap: 13px; color: var(--bone-bright); }
.rh-seal {
  position: relative; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 38%, #7a0a0f 0, #2d0509 45%, #0c0607 72%);
  box-shadow: 0 0 0 2px #141210, 0 0 0 3px var(--gold-deep), 0 0 0 4px #0a0605, inset 0 0 18px rgba(220, 20, 60, .45), 0 0 26px rgba(139, 0, 0, .5);
}
.rh-seal::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(233, 197, 106, .4); border-radius: 50%; }
.rh-seal::after { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(233, 197, 106, .25); transform: rotate(45deg); }
.rh-seal span { position: relative; z-index: 1; color: var(--gold-bright); font: 400 22px/1 var(--display); text-shadow: 0 0 14px rgba(176, 132, 60, .9), 0 1px 0 #000; }
.rh-brand-copy strong { display: block; font: 400 21px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-pale); text-shadow: 0 1px 0 #000, 0 0 18px rgba(0, 0, 0, .9); }
.rh-brand-copy small { display: block; margin-top: 5px; color: #8e8068; font: 600 8px/1 var(--label); letter-spacing: .26em; text-transform: uppercase; }

.rh-nav { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0; min-width: 0; overflow: visible; }
.rh-nav > a, .rh-nav .nav-more > summary {
  position: relative; display: block; padding: 12px 13px; color: #cdb98a; border: 0; background: none;
  font: 400 14px/1 var(--display); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 0 #000; transition: color .2s, text-shadow .2s;
}
.rh-nav > a::after, .rh-nav .nav-more > summary::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1px; background: linear-gradient(90deg, transparent, var(--ember), transparent); opacity: 0; transition: opacity .2s; }
.rh-nav > a:hover, .rh-nav > a.active, .rh-nav .nav-more[open] > summary, .rh-nav .nav-more > summary:hover { color: var(--gold-pale); background: none; border: 0; text-shadow: 0 0 14px rgba(176, 132, 60, .75), 0 1px 0 #000; }
.rh-nav > a:hover::after, .rh-nav > a.active::after, .rh-nav .nav-more[open] > summary::after { opacity: 1; }
.rh-nav .nav-more > summary { list-style: none; cursor: pointer; }
.rh-nav .nav-more > summary::-webkit-details-marker { display: none; }
.rh-nav .nav-more > summary::before { content: "▾"; position: absolute; right: 1px; top: 12px; color: var(--dim); font: 10px/1 Arial, sans-serif; }
.rh-nav .nav-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; min-width: 250px; padding: 10px;
  border: 1px solid var(--line-strong); border-top: 2px solid var(--gold);
  background: linear-gradient(rgba(19, 18, 17, .99), rgba(9, 8, 8, .99)), var(--stone-tile);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 40px rgba(0, 0, 0, .5);
}
.rh-nav .nav-menu::before { inset: 5px; border-color: rgba(233, 197, 106, .14); }
.rh-nav .nav-menu a { display: block; padding: 10px 12px; border: 0; color: #b9a98a; font: 600 10px/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(233, 197, 106, .06); }
.rh-nav .nav-menu a:last-child { border-bottom: 0; }
.rh-nav .nav-menu a:hover { color: var(--gold-pale); background: linear-gradient(90deg, rgba(139, 0, 0, .35), transparent); }

.rh-actions { display: flex; align-items: center; justify-content: end; gap: 12px; }
.rh-discord { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(125, 162, 255, .3); background: linear-gradient(rgba(65, 105, 225, .16), rgba(20, 30, 70, .35)); color: #cbd7ff; font: 600 9px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; box-shadow: var(--inset); transition: .2s; }
.rh-discord svg { width: 16px; height: 16px; fill: currentColor; }
.rh-discord:hover { border-color: var(--mana-bright); color: #fff; box-shadow: var(--inset), 0 0 18px rgba(65, 105, 225, .45); }
.rh-account .header-account-toggle { min-height: 42px; border-color: rgba(199, 154, 60, .3); background: linear-gradient(135deg, rgba(60, 20, 14, .45), rgba(7, 6, 6, .85)); box-shadow: var(--inset); }
.rh-account .header-account-toggle:hover, .rh-account.is-open .header-account-toggle { border-color: var(--gold); box-shadow: var(--inset), 0 0 16px rgba(176, 132, 60, .25); }
.header-account-panel { border: 1px solid var(--line-strong) !important; border-top: 2px solid var(--gold) !important; background: linear-gradient(rgba(19, 18, 17, .99), rgba(9, 8, 8, .99)), var(--stone-tile) !important; box-shadow: 0 30px 60px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .8) !important; }
.rh-cta { white-space: nowrap; }

.rh-mobile { display: none; position: relative; }
.rh-mobile > summary { list-style: none; cursor: pointer; display: grid; gap: 5px; width: 46px; height: 42px; padding: 11px 10px; border: 1px solid var(--line-strong); background: linear-gradient(#1f1d1c, #0f0e0d); box-shadow: var(--inset); }
.rh-mobile > summary::-webkit-details-marker { display: none; }
.rh-mobile > summary span { display: block; height: 2px; background: var(--gold-bright); box-shadow: 0 0 6px rgba(176, 132, 60, .6); }
.rh-mobile .mobile-menu-panel {
  position: fixed; left: 0; right: 0; top: var(--header-height); bottom: 0; z-index: 900; overflow: auto; padding: 18px 20px 120px;
  background: linear-gradient(rgba(14, 10, 9, .98), rgba(7, 6, 6, .99)), var(--stone-tile);
  border-top: 2px solid var(--gold);
}
.rh-mobile .mobile-language { display: flex; gap: 10px; margin-bottom: 14px; }
.rh-mobile .mobile-language a { flex: 1; padding: 11px; text-align: center; border: 1px solid var(--line-strong); color: #b9a98a; font: 600 10px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.rh-mobile .mobile-language a[aria-current="true"] { color: var(--gold-pale); border-color: var(--gold); background: rgba(139, 0, 0, .25); }
.rh-mobile .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.rh-mobile .nav a { padding: 15px 14px; border: 1px solid rgba(199, 154, 60, .14); background: rgba(0, 0, 0, .35); color: #d8c8a4; font: 400 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.rh-mobile .nav a.active, .rh-mobile .nav a:hover { color: var(--gold-pale); border-color: var(--gold); background: linear-gradient(90deg, rgba(139, 0, 0, .35), rgba(0, 0, 0, .35)); }
.rh-mobile .mobile-menu-secondary { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rh-mobile .mobile-menu-secondary a { color: var(--dim); font: 600 9px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Buttons: heavy iron slabs with a gold rim, lit red/amber on hover, in the
   spirit of the game's main menu. .btn (used across the portal) inherits
   the same metal so every page agrees.
   -------------------------------------------------------------------------- */
.d2-button, .btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 24px;
  border: 1px solid #0a0605; border-radius: 3px; cursor: pointer; text-decoration: none; text-align: center;
  background: linear-gradient(180deg, #514740 0%, #292726 16%, #171615 50%, #1e1c1b 84%, #0d0908 100%);
  color: var(--gold-bright); font: 400 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, .8);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, .18), inset 0 -2px 0 rgba(0, 0, 0, .7), 0 0 0 1px rgba(199, 154, 60, .55), 0 0 0 2px #060606, 0 10px 22px rgba(0, 0, 0, .55);
  transition: color .18s, background .18s, box-shadow .18s, transform .08s;
}
.d2-button::before, .btn::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(233, 197, 106, .2); border-radius: 2px; pointer-events: none; }
.d2-button > span { position: relative; }
.d2-button:hover, .btn:hover {
  color: #fff4d6; border-color: #0a0605;
  background: linear-gradient(180deg, #7a3f24 0%, #4a2114 18%, #2d130d 50%, #3a1810 84%, #140806 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .3), inset 0 -2px 0 rgba(0, 0, 0, .7), 0 0 0 1px var(--gold), 0 0 0 2px #060606, 0 0 26px rgba(176, 132, 60, .45), 0 10px 22px rgba(0, 0, 0, .6);
  text-shadow: 0 0 12px rgba(176, 132, 60, .9), 0 1px 0 #000;
}
.d2-button:active, .btn:active { transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8), 0 0 0 1px var(--gold), 0 0 0 2px #060606; }
.d2-button-primary, .btn-primary {
  background: linear-gradient(180deg, #a3161f 0%, #6e0a10 18%, #4a0408 50%, #5b070c 84%, #230205 100%);
  color: var(--gold-pale); box-shadow: inset 0 1px 0 rgba(255, 200, 170, .25), inset 0 -2px 0 rgba(0, 0, 0, .7), 0 0 0 1px var(--gold), 0 0 0 2px #060606, 0 0 20px rgba(139, 0, 0, .5), 0 10px 22px rgba(0, 0, 0, .6);
}
.d2-button-primary:hover, .btn-primary:hover { background: linear-gradient(180deg, #d2283a 0%, #951019 18%, #5e0a10 50%, #7a0f16 84%, #2d0407 100%); box-shadow: inset 0 1px 0 rgba(255, 200, 170, .35), inset 0 -2px 0 rgba(0, 0, 0, .7), 0 0 0 1px var(--gold-bright), 0 0 0 2px #060606, 0 0 32px rgba(220, 20, 60, .6), 0 10px 22px rgba(0, 0, 0, .6); }
.d2-button-mana { background: linear-gradient(180deg, #2f4ea8 0%, #1b2f74 18%, #0f1c4a 50%, #152457 84%, #060a1e 100%); color: #dbe6ff; box-shadow: inset 0 1px 0 rgba(200, 215, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .7), 0 0 0 1px rgba(125, 162, 255, .6), 0 0 0 2px #060606, 0 0 20px rgba(65, 105, 225, .4), 0 10px 22px rgba(0, 0, 0, .6); }
.d2-button-mana:hover { color: #fff; background: linear-gradient(180deg, #4169e1 0%, #2742a0 18%, #16255f 50%, #1d2f72 84%, #080d26 100%); box-shadow: inset 0 1px 0 rgba(200, 215, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .7), 0 0 0 1px var(--mana-bright), 0 0 0 2px #060606, 0 0 32px rgba(65, 105, 225, .65), 0 10px 22px rgba(0, 0, 0, .6); text-shadow: 0 0 12px rgba(125, 162, 255, .9), 0 1px 0 #000; }
.d2-button-large { min-height: 58px; padding: 0 34px; font-size: 17px; letter-spacing: .16em; }
.d2-button-small { min-height: 38px; padding: 0 16px; font-size: 12px; }
.btn { min-height: 40px; padding: 0 16px; font-size: 12px; }
.btn-ghost { background: linear-gradient(180deg, rgba(54, 52, 50, .6), rgba(10, 10, 10, .7)); }
.btn-danger { color: #f3b1b1; box-shadow: inset 0 1px 0 rgba(255, 235, 190, .1), inset 0 -2px 0 rgba(0, 0, 0, .7), 0 0 0 1px rgba(196, 30, 58, .6), 0 0 0 2px #060606; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.text-link { margin-top: 14px; color: var(--gold-bright); font: 400 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; transition: color .2s, text-shadow .2s; }
.text-link:hover { color: var(--gold-pale); text-shadow: 0 0 12px rgba(176, 132, 60, .7); }

/* --------------------------------------------------------------------------
   Page banners (.hero) and type rhythm.
   -------------------------------------------------------------------------- */
.page-main { padding-top: 30px; }
.hero { position: relative; padding: 58px 28px 44px; margin: 10px 0 36px; text-align: center; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(139, 0, 0, .28), transparent 60%),
    linear-gradient(rgba(20, 19, 18, .85), rgba(9, 8, 8, .92)),
    var(--stone-tile) center / 480px;
  border: 1px solid var(--line-strong);
  box-shadow: var(--inset), inset 0 0 80px rgba(0, 0, 0, .7), 0 30px 70px rgba(0, 0, 0, .6);
}
.hero::after { content: ""; position: absolute; inset: 7px; z-index: -1; border: 1px solid rgba(233, 197, 106, .16); pointer-events: none; }
.compact-hero { padding-top: 52px; }
.hero h1 { margin: 14px 0 16px; font-size: clamp(42px, 6vw, 80px); line-height: .98; color: var(--gold-pale); text-shadow: 0 2px 0 #2b2720, 0 0 36px rgba(176, 132, 60, .3), 0 4px 18px rgba(0, 0, 0, .9); }
.hero p { color: var(--ash); }
.eyebrow, .kicker { color: var(--ember); font: 600 10px/1.3 var(--label); letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 0 10px rgba(176, 132, 60, .35); }
.eyebrow-mana { color: var(--mana-bright); text-shadow: 0 0 10px rgba(65, 105, 225, .45); }
.rune-divider::before, .rune-divider::after { background: linear-gradient(90deg, transparent, var(--gold-line)); }
.rune-divider span { border-color: var(--gold-bright); box-shadow: 0 0 14px rgba(176, 132, 60, .45); background: radial-gradient(circle, rgba(176, 132, 60, .6), transparent 70%); }
.rune-divider-mana span { border-color: var(--mana-bright); box-shadow: 0 0 14px rgba(65, 105, 225, .6); background: radial-gradient(circle, rgba(125, 162, 255, .6), transparent 70%); }
.rune-divider-mana::before, .rune-divider-mana::after { background: linear-gradient(90deg, transparent, rgba(125, 162, 255, .5)); }
.section-title h2 { color: var(--gold-pale); }

/* --------------------------------------------------------------------------
   Stone panels. Shared by .panel (portal-wide), .stone-panel (new pages)
   and the lighter cards.
   -------------------------------------------------------------------------- */
.panel, .stone-panel, .framed-panel, .realm-frame.panel {
  position: relative; padding: 24px 26px; border: 1px solid rgba(199, 154, 60, .26); border-radius: 2px;
  background:
    linear-gradient(rgba(22, 21, 20, .9), rgba(10, 10, 10, .96)),
    var(--stone-tile) center / 480px;
  box-shadow: var(--inset), inset 0 0 70px rgba(0, 0, 0, .55), 0 24px 60px rgba(0, 0, 0, .55);
}
.panel::before, .stone-panel::before, .framed-panel::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(233, 197, 106, .13); pointer-events: none;
  background:
    radial-gradient(circle at 0 0, var(--gold) 0 2px, transparent 3px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 100% 0, var(--gold) 0 2px, transparent 3px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 0 100%, var(--gold) 0 2px, transparent 3px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 100% 100%, var(--gold) 0 2px, transparent 3px) 0 0 / 100% 100% no-repeat;
  width: auto; height: auto; border-left: 1px solid rgba(233, 197, 106, .13); border-top: 1px solid rgba(233, 197, 106, .13);
}
.framed-panel::after { display: none; }
.panel-head { padding-bottom: 18px; border-bottom: 1px solid var(--line-strong); }
.panel-head h2, .panel-head h3 { color: var(--gold-pale); }
.panel-head p { color: var(--dim); font: 12px/1.55 var(--label); }
.stone-panel { margin-bottom: 26px; }
.stone-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.stone-panel-head h2, .stone-panel-head h3 { margin: 6px 0 0; font-size: 24px; color: var(--gold-pale); }
.stone-panel-head h3 { font-size: 20px; }
.stone-panel-head .text-link { margin: 0; }
.stone-panel-count { color: var(--poison); font: 400 18px/1 var(--display); text-shadow: 0 0 10px rgba(95, 242, 90, .5); }
.stone-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); color: var(--dim); font: 600 10px/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.stone-panel-foot .text-link { margin: 0; }
.status-card, .content-card, .news-card, .zone-card, .trade-card, .grail-progress-card, .admin-card, .lab-card {
  border: 1px solid rgba(199, 154, 60, .2); background: linear-gradient(rgba(24, 23, 22, .82), rgba(10, 10, 10, .9)); box-shadow: var(--inset), 0 14px 30px rgba(0, 0, 0, .4);
}
.content-card h3, .news-card h3, .zone-card h3 { color: var(--gold-pale); }
.trust-number { color: var(--gold-bright); font-family: var(--display); }
.status-icon { border-color: var(--line-strong) !important; background: radial-gradient(circle at 50% 40%, rgba(139, 0, 0, .45), rgba(7, 6, 6, .9)) !important; color: var(--gold-bright) !important; }

/* Tables: carved rows, gold column heads. */
th { color: var(--gold); font: 400 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); }
td { border-bottom: 1px solid rgba(199, 154, 60, .1); }
tbody tr:hover { background: linear-gradient(90deg, rgba(139, 0, 0, .16), transparent 70%); }
.rank, .level { color: var(--gold-bright); font-family: var(--display); font-size: 17px; }
.char-name { color: var(--bone-bright); font-family: var(--display); font-size: 17px; letter-spacing: .03em; }
.char-name:hover { color: var(--gold-pale); text-shadow: 0 0 10px rgba(176, 132, 60, .6); }
.ladder-account { display: block; margin-top: 3px; color: var(--dim); font: 10px/1.2 var(--label); letter-spacing: .06em; }
.hc { color: #f0565f; text-shadow: 0 0 8px rgba(220, 20, 60, .4); }
tr.dead .char-name { text-decoration: line-through; text-decoration-color: rgba(220, 20, 60, .7); }
.class-badge {
  display: inline-grid; place-items: center; width: 34px; height: 30px; margin-right: 9px; vertical-align: middle;
  border: 1px solid var(--line-strong); border-radius: 2px; color: var(--class-color, var(--gold-bright));
  background: linear-gradient(#1a1917, #0b0a0a); box-shadow: var(--inset), inset 0 0 10px rgba(0, 0, 0, .8), 0 0 10px color-mix(in srgb, var(--class-color, var(--gold)) 35%, transparent);
  font: 400 10px/1 var(--display); letter-spacing: .08em; text-shadow: 0 0 8px currentColor;
}
.class-badge[data-class="amazon"] { --class-color: #e2b85c; }
.class-badge[data-class="sorceress"] { --class-color: #7da2ff; }
.class-badge[data-class="necromancer"] { --class-color: #a6e0a8; }
.class-badge[data-class="paladin"] { --class-color: #f3e07a; }
.class-badge[data-class="barbarian"] { --class-color: #ec8a46; }
.class-badge[data-class="druid"] { --class-color: #7fd65c; }
.class-badge[data-class="assassin"] { --class-color: #ef4c6a; }
.class-name { vertical-align: middle; color: var(--ash); }
.sanctuary-ladder-message { color: var(--dim); font-style: italic; text-align: center; }

/* Forms. */
.field { border: 1px solid #34312f; background: linear-gradient(#0a0a0a, #11100f) #0b0b0a; color: var(--bone); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8), 0 1px 0 rgba(233, 197, 106, .08); font-family: var(--serif); }
.field:focus { border-color: var(--gold); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8), 0 0 0 2px rgba(233, 197, 106, .12), 0 0 16px rgba(176, 132, 60, .25); }
.field::placeholder { color: #6a5c48; }
.form-row label { color: var(--gold); font: 600 9px/1.2 var(--label); letter-spacing: .16em; }
.segment { gap: 0; border: 1px solid var(--line-strong); background: #080808; box-shadow: var(--inset); }
.segment button { min-height: 42px; border: 0; border-right: 1px solid rgba(199, 154, 60, .18); background: linear-gradient(#1a1917, #0c0b0a); color: #b9a98a; font: 400 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: .2s; }
.segment button:last-child { border-right: 0; }
.segment button:hover { color: var(--gold-pale); }
.segment button.active { color: var(--gold-pale); background: linear-gradient(#3a1a12, #180b08); box-shadow: inset 0 -2px 0 var(--ember), inset 0 0 18px rgba(139, 0, 0, .45); text-shadow: 0 0 10px rgba(176, 132, 60, .7); }
.notice {
  border: 1px solid #6b5425; color: var(--ink); font: 13px/1.6 var(--serif);
  background: linear-gradient(rgba(255, 244, 214, .08), rgba(0, 0, 0, .08)), var(--parchment-noise), linear-gradient(170deg, #ead7a7, #d4b77c 60%, #c6a86d);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .5), inset 0 0 30px rgba(120, 80, 30, .25), 0 10px 24px rgba(0, 0, 0, .5);
}
.notice strong, .notice a { color: #5a0d12; }
.notice code { color: #2b2520; background: rgba(64, 56, 46, .12); padding: 1px 4px; }
.notice-danger { border-color: var(--blood-bright); color: #4a0a0e; background: var(--parchment-noise), linear-gradient(170deg, #e8c7a0, #d3a67c); }
.status-badge, .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line-strong); background: linear-gradient(#1a1917, #0b0a0a); color: var(--gold-bright); font: 600 9px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; box-shadow: var(--inset); }
.status-pill-mana { border-color: rgba(125, 162, 255, .45); color: var(--mana-bright); }
.skeleton { background: linear-gradient(100deg, #121110 25%, #23201f 39%, #121110 53%); background-size: 300% 100%; }
.source-strip, .pagination { color: var(--dim); font: 600 10px/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; }

/* Quest scroll: unrolled parchment with wax seal. */
.quest-scroll {
  position: relative; padding: 42px 46px; color: var(--ink); border: 1px solid #5a4421; border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(66, 58, 49, .22), transparent 7%, transparent 93%, rgba(66, 58, 49, .22)),
    var(--parchment-noise),
    linear-gradient(175deg, #efdcae 0%, #e3cc98 35%, #d6bb82 70%, #c9ab70 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 214, .55), inset 0 0 60px rgba(120, 80, 30, .3), 0 30px 70px rgba(0, 0, 0, .65);
}
.quest-scroll::before, .quest-scroll::after {
  content: ""; position: absolute; left: -10px; right: -10px; height: 18px; border-radius: 9px;
  background: linear-gradient(#8a6a3c, #5a4221 40%, #2d2823 60%, #6e5330); box-shadow: 0 6px 14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 230, 180, .35);
}
.quest-scroll::before { top: -9px; }
.quest-scroll::after { bottom: -9px; }
.quest-scroll h2, .quest-scroll h3 { color: #2a241f; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.quest-scroll p { color: #2f2a25; line-height: 1.7; }
.quest-scroll .eyebrow { color: #8b0000; text-shadow: none; }
.quest-scroll a:not(.d2-button):not(.btn) { color: #7a0e16; }
.quest-scroll code { color: #5a0d12; background: rgba(64, 56, 46, .14); padding: 1px 5px; }
.quest-scroll small { color: #6a5230; }
.quest-seal {
  position: absolute; top: -22px; right: 34px; z-index: 2; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e0313f 0, #a30e1a 35%, #5f0409 75%, #3a0205 100%);
  color: #f6d7a4; font: 400 24px/1 var(--display); text-shadow: 0 1px 0 #3a0205, 0 0 10px rgba(0, 0, 0, .5);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .65), inset 0 -4px 10px rgba(0, 0, 0, .55), inset 0 3px 6px rgba(255, 170, 170, .35);
}
.quest-seal::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(255, 220, 190, .4); border-radius: 50%; }
.quest-seal-mana { background: radial-gradient(circle at 35% 30%, #5b7ff0 0, #2b47b5 35%, #142663 75%, #0a1338 100%); color: #e4ecff; }
.quest-log { padding: 30px 34px; }

/* Character-sheet panel: realm facts set like item stats. */
.char-sheet { position: relative; border: 1px solid rgba(199, 154, 60, .32); background: linear-gradient(rgba(17, 16, 15, .95), rgba(8, 7, 7, .98)), var(--stone-tile) center / 480px; box-shadow: var(--inset), inset 0 0 80px rgba(0, 0, 0, .6), 0 30px 70px rgba(0, 0, 0, .6); }
.char-sheet::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(233, 197, 106, .14); pointer-events: none; }
.char-sheet-head { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px 26px; border-bottom: 1px solid var(--line-strong); background: linear-gradient(90deg, transparent, rgba(139, 0, 0, .35), transparent); }
.char-sheet-head > span { color: var(--dim); font: 600 9px/1 var(--label); letter-spacing: .26em; text-transform: uppercase; }
.char-sheet-head > span:last-child { text-align: right; }
.char-sheet-head h2, .char-sheet-head h3 { margin: 0; font-size: 26px; text-align: center; color: var(--gold-pale); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 18px rgba(176, 132, 60, .35); }
.char-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; padding: 10px 26px 18px; }
.char-sheet-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.char-sheet-col { margin: 0; padding: 10px 26px; }
.char-sheet-grid .char-sheet-col { padding: 0; }
.char-sheet-col > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(199, 154, 60, .1); }
.char-sheet-col > div:last-child { border-bottom: 0; }
.char-sheet-col dt { color: var(--ash); font: 15px/1.3 var(--serif); }
.char-sheet-col dd { margin: 0; text-align: right; font: 400 15px/1.3 var(--display); letter-spacing: .04em; }
.char-sheet-col dd code { font: inherit; color: inherit; }
.char-sheet-note { margin: 0; padding: 0 26px 18px; color: var(--dim); font-size: 13px; line-height: 1.6; }
.char-sheet-foot { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 14px 26px 20px; border-top: 1px solid var(--line); }
.char-sheet-foot .text-link { margin: 0; }
.char-sheet-mana .char-sheet-head { background: linear-gradient(90deg, transparent, rgba(65, 105, 225, .3), transparent); }
.char-sheet-mana .char-sheet-head h3 { text-shadow: 0 0 18px rgba(65, 105, 225, .5); }
.stat-magic { color: var(--poison); text-shadow: 0 0 10px rgba(95, 242, 90, .45); }
.stat-unique { color: var(--gold-bright); text-shadow: 0 0 10px rgba(233, 197, 106, .4); }
.stat-set { color: #49c864; text-shadow: 0 0 10px rgba(73, 200, 100, .45); }
.stat-runeword { color: #e0b05c; text-shadow: 0 0 10px rgba(224, 176, 92, .45); }
.stat-mana { color: var(--mana-bright); text-shadow: 0 0 10px rgba(125, 162, 255, .5); }
.stat-plain { color: var(--bone); }

/* --------------------------------------------------------------------------
   Footer: a stone cornice with the eight runes and the three doors.
   -------------------------------------------------------------------------- */
.rf-discord-wrap { margin: 70px auto 0; }
.rf-discord {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 24px 28px;
  border: 1px solid rgba(125, 162, 255, .3); color: var(--bone);
  background: linear-gradient(90deg, rgba(20, 30, 80, .55), rgba(9, 8, 8, .9) 60%), var(--stone-tile) center / 480px;
  box-shadow: var(--inset), 0 24px 60px rgba(0, 0, 0, .55); transition: border-color .2s, box-shadow .2s;
}
.rf-discord:hover { border-color: var(--mana-bright); box-shadow: var(--inset), 0 0 30px rgba(65, 105, 225, .35), 0 24px 60px rgba(0, 0, 0, .55); color: var(--bone); }
.rf-discord-seal { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3752b8, #141f58 65%, #090d2a); box-shadow: 0 0 0 2px #0a0d20, 0 0 0 3px rgba(125, 162, 255, .5), 0 0 24px rgba(65, 105, 225, .5); }
.rf-discord-seal svg { width: 30px; height: 30px; fill: #dbe6ff; }
.rf-discord-copy small { display: block; color: var(--mana-bright); font: 600 9px/1 var(--label); letter-spacing: .26em; }
.rf-discord-copy strong { display: block; margin: 8px 0 6px; font: 400 26px/1.1 var(--display); color: var(--bone-bright); }
.rf-discord-copy em { font-style: normal; color: var(--ash); font-size: 14px; }
.rf { position: relative; margin-top: 70px; padding: 0 0 26px; background: linear-gradient(rgba(14, 10, 9, .96), rgba(6, 4, 4, 1)), var(--stone-tile) center / 480px; border-top: 1px solid var(--gold-deep); box-shadow: inset 0 1px 0 rgba(233, 197, 106, .18), 0 -30px 60px rgba(0, 0, 0, .55); }
.rf::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; pointer-events: none;
  background: linear-gradient(45deg, #262422 25%, transparent 25%) 0 0 / 14px 10px, linear-gradient(-45deg, #171514 25%, transparent 25%) 0 0 / 14px 10px;
}
.rune-procession { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 26px 20px 10px; }
.rune-procession span { flex: 1; max-width: 280px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.rune-procession span:last-child { transform: rotate(180deg); }
.rune-procession img { width: 28px; height: 28px; filter: drop-shadow(0 0 8px rgba(176, 132, 60, .55)); opacity: .95; }
.rf-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 26px 0 30px; }
.rf-brand p { max-width: 460px; margin: 10px 0 0; color: var(--dim); font-size: 13px; line-height: 1.6; }
.rf-brand .rh-brand { margin-bottom: 8px; }
.rf-links, .rf-worlds { display: flex; flex-direction: column; gap: 10px; }
.rf-links small, .rf-worlds small { margin-bottom: 6px; color: var(--gold); font: 600 9px/1 var(--label); letter-spacing: .26em; text-transform: uppercase; }
.rf-links a { color: #b9a98a; font: 400 14px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.rf-links a:hover { color: var(--gold-pale); text-shadow: 0 0 10px rgba(176, 132, 60, .6); }
.rf-world { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--bone); transition: .2s; }
.rf-world i { grid-row: span 2; width: 10px; height: 10px; transform: rotate(45deg); }
.rf-world span { font: 400 14px/1.2 var(--display); letter-spacing: .08em; }
.rf-world em { font-style: normal; color: var(--dim); font: 10px/1.2 var(--label); letter-spacing: .08em; }
.rf-world-lod i { background: var(--blood-bright); box-shadow: 0 0 10px rgba(220, 20, 60, .8); }
.rf-world-d2r i { background: var(--mana); box-shadow: 0 0 10px rgba(65, 105, 225, .8); }
.rf-world-hub i { background: var(--gold); box-shadow: 0 0 10px rgba(233, 197, 106, .8); }
.rf-world:hover { border-color: var(--gold); color: var(--gold-pale); box-shadow: 0 0 18px rgba(176, 132, 60, .2); }
.rf-bottom { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); font: 600 9px/1.4 var(--label); letter-spacing: .18em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Responsive chrome.
   -------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  .rh-nav > a, .rh-nav .nav-more > summary { padding: 12px 9px; font-size: 13px; letter-spacing: .08em; }
  .rh-brand-copy strong { font-size: 18px; }
}
@media (max-width: 1180px) {
  :root { --header-height: 106px; }
  .rh-bar-inner { height: 72px; grid-template-columns: auto 1fr auto; }
  .rh-wing, .rh-discord, .rh-cta { display: none; }
  .rh-mobile { display: block; }
  .rh-season { display: none; }
  .rf-inner { grid-template-columns: 1fr 1fr; }
  .rf-brand { grid-column: span 2; }
  .char-sheet-grid, .char-sheet-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --header-height: 98px; }
  .rh-top-inner { gap: 8px; }
  .realm-switch a { padding: 0 8px; letter-spacing: .08em; }
  .realm-switch-world { font-size: 9px; }
  .rh-brand-copy small { display: none; }
  .rh-brand-copy strong { font-size: 16px; }
  .rh-seal { width: 42px; height: 42px; }
  .rh-account .header-account-toggle > span:nth-child(2) { display: none; }
  .rh-mobile .nav { grid-template-columns: 1fr; }
  .rf-inner { grid-template-columns: 1fr; }
  .rf-brand { grid-column: auto; }
  .rf-discord { grid-template-columns: auto 1fr; }
  .rf-discord > .d2-button { grid-column: span 2; }
  .panel, .stone-panel, .framed-panel { padding: 18px 16px; }
  .hero { padding: 40px 18px 32px; }
  .quest-scroll { padding: 34px 22px; }
  .quest-seal { right: 16px; width: 54px; height: 54px; font-size: 20px; }
  .char-sheet-head { grid-template-columns: 1fr; text-align: center; }
  .char-sheet-head > span:last-child { text-align: center; }
  .d2-button-large { min-height: 52px; padding: 0 22px; font-size: 15px; }
  .rune-procession { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
}

/* Parchment-aware refinements for existing page components. */
.quest-scroll .section-heading > p, .quest-scroll .onboarding-step p { color: #2f2a25; }
.quest-scroll .onboarding-roadmap { margin-top: 26px; padding: 0; background: none; gap: 0; }
.quest-scroll .onboarding-step { background: none; border-top: 1px dashed rgba(66, 58, 49, .45); padding: 22px 6px; }
.quest-scroll .onboarding-step:first-child { border-top: 0; }
.quest-scroll .onboarding-step > b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0313f, #a30e1a 40%, #5f0409 100%); color: #f6d7a4; font-size: 16px; box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 -2px 5px rgba(0, 0, 0, .5); }
.quest-scroll .onboarding-step h3 { color: #2a241f; }
.quest-scroll .onboarding-step strong { color: #5a0d12; }
.quest-scroll .onboarding-step .text-link { color: #7a0e16; }
.installer-placeholder { border-color: rgba(199, 154, 60, .4); }
.installer-placeholder > span { font-family: var(--display); font-size: 14px; }

/* Film grain over hero art: masks the softness of upscaled panoramas on very
   wide screens and reads as the game's own grainy cinematics. */
.hero-grain { position: absolute; inset: 0; pointer-events: none; background: var(--parchment-noise); background-size: 220px 220px; mix-blend-mode: overlay; opacity: .55; }

/* ==========================================================================
   Round 5 — more of the original game (2026-10-04).
   ========================================================================== */

/* Gauntlet cursor from the D2R HD sprites (cursor/ohand, cursor/protate).
   Hotspot at the fingertip. */
html, body { cursor: url("/assets/sanctuary/d2r/cursor.png") 1 1, auto; cursor: -webkit-image-set(url("/assets/sanctuary/d2r/cursor.png") 1x, url("/assets/sanctuary/d2r/cursor@2x.png") 2x) 1 1, auto; }
a, button, summary, label, select, [role="button"], [role="tab"], .item-tile, .stash-slot { cursor: url("/assets/sanctuary/d2r/cursor-active.png") 1 1, pointer; cursor: -webkit-image-set(url("/assets/sanctuary/d2r/cursor-active.png") 1x, url("/assets/sanctuary/d2r/cursor-active@2x.png") 2x) 1 1, pointer; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea { cursor: text; }

/* Game sprites at an exact integer scale stay crisp. */
.game-icon-2x { width: 56px !important; height: 56px !important; image-rendering: pixelated; }
.landing-find-icon img { image-rendering: pixelated; }


/* Item quality colours as the game prints them. */
.quality-unique, .quality-runeword { color: #c7b377 !important; }
.quality-set { color: #00ff00 !important; }
.quality-rare { color: #ffff64 !important; }
.quality-magic { color: #6969ff !important; }
.quality-crafted, .quality-rune { color: #ffa800 !important; }

/* Item description box as in game: translucent black, no frame, centred
   lines, colours from the item's own palette. The text is plain Arial as on
   production: the operator found the display font harder to read here. */
.item-tooltip {
  padding: 12px 20px 14px; border: 0; background: rgba(0, 0, 0, .86); color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .8); font: 13px/1.38 Arial, sans-serif; letter-spacing: normal;
}
.item-tooltip h3 { margin: 0 0 2px; font: 600 16px/1.25 Arial, sans-serif; letter-spacing: normal; text-shadow: 0 1px #000; }
.item-tooltip .item-base, .item-tooltip .item-base-stats, .item-tooltip .item-requirement, .item-tooltip .item-stat.white { color: #fff; }
.item-tooltip .item-stat, .item-tooltip .item-stat.blue, .item-tooltip .item-socket-sequence.contents { color: #6969ff; text-shadow: none; }
.item-tooltip .item-stat.red, .item-tooltip .item-unidentified { color: #ff4d4d; }
.item-tooltip .item-stat.green { color: #00ff00; }
.item-tooltip .item-stat.gold, .item-tooltip .item-socket-sequence { color: #c7b377; }
.item-tooltip .item-stat.gray, .item-tooltip .item-ethereal { color: #696969; }
.item-tooltip .item-stack-count { color: #c7b377; }
.item-tooltip .item-rule { height: 0; margin: 6px 0; background: none; }

/* Waypoint window: the "More" menu as the game's travel panel. */
.rh-nav .nav-menu.wp {
  width: 440px; min-width: 0; padding: 0 0 12px; border: 1px solid #3c3834; border-top: 1px solid #3c3834;
  background: linear-gradient(rgba(17, 15, 14, .98), rgba(8, 7, 7, .99)), var(--stone-tile);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .9), inset 0 0 0 2px #090808, inset 0 0 0 3px rgba(199, 154, 60, .35), inset 0 0 50px rgba(0, 0, 0, .7);
}
.rh-nav .nav-menu.wp::before { display: none; }
.wp-head { padding: 12px 16px 8px; text-align: center; }
.wp-head span { color: var(--gold-bright); font: 400 16px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; text-shadow: 0 0 12px rgba(176, 132, 60, .5), 0 1px 0 #000; }
.wp-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 0 12px; border-bottom: 1px solid #5a4630; }
.wp-tab { position: relative; top: 1px; padding: 9px 0 8px; border: 1px solid #302d29; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#171614, #0c0b0b); color: #8e7c5e; font: 400 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.wp-tab:hover { color: var(--gold-pale); }
.wp-tab.active { border-color: #5a4630; background: linear-gradient(#2d2823, #151311); color: var(--gold-pale); text-shadow: 0 0 10px rgba(176, 132, 60, .7); box-shadow: inset 0 2px 0 rgba(233, 197, 106, .25); }
.wp-panel { display: grid; gap: 2px; padding: 12px 14px 0; }
.wp.wp-ready .wp-panel:not(.active) { display: none; }
.wp-act-name { margin: 0 0 6px; color: var(--dim); font: 600 8px/1 var(--label); letter-spacing: .26em; text-transform: uppercase; }
.rh-nav .nav-menu.wp a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid transparent; border-bottom: 1px solid transparent; color: #c9b893; font: 400 14px/1.15 var(--display); letter-spacing: .08em; text-transform: none; }
.rh-nav .nav-menu.wp a:hover { background: linear-gradient(90deg, rgba(65, 105, 225, .18), transparent 80%); border-color: rgba(125, 162, 255, .25); color: #fff; }
.rh-nav .nav-menu.wp a.active { color: var(--gold-pale); border-color: rgba(199, 154, 60, .35); background: linear-gradient(90deg, rgba(199, 154, 60, .14), transparent 80%); }
.wp-icon-unused { position: relative; flex: none; width: 18px; height: 18px; border: 1px solid #6d5a3c; background: radial-gradient(circle at 50% 45%, #9fc1ff 0, #3d63c9 35%, #0d1638 75%); box-shadow: 0 0 8px rgba(65, 105, 225, .55), inset 0 0 0 2px rgba(0, 0, 0, .45); transform: rotate(45deg) scale(.78); }
.rh-nav .nav-menu.wp a:hover .wp-icon-unused { box-shadow: 0 0 14px rgba(125, 162, 255, .95), inset 0 0 0 2px rgba(0, 0, 0, .45); }

/* Footer lines from the game. */
.rf-quote { margin: 4px auto 0; padding: 0 20px; max-width: 760px; text-align: center; }
.rf-quote blockquote { margin: 0; animation: quote-in .8s ease both; }
.rf-quote p { margin: 0; color: #d9c79b; font: italic 400 18px/1.4 var(--serif); text-shadow: 0 0 18px rgba(0, 0, 0, .9); }
.rf-quote cite { display: block; margin-top: 6px; color: var(--ember); font: 600 9px/1 var(--label); font-style: normal; letter-spacing: .28em; text-transform: uppercase; }
.rf-quote cite::before { content: "— "; }
@keyframes quote-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* A belt of potions as a section divider. */
.potion-belt { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 34px 0; }
.potion-belt-rule { flex: 1; max-width: 360px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.potion-belt-rule:last-child { transform: rotate(180deg); }
.potion-belt-slots { display: flex; gap: 3px; padding: 4px; border: 1px solid #3c3834; background: linear-gradient(#171514, #0a0908); box-shadow: inset 0 0 0 1px #000, 0 10px 24px rgba(0, 0, 0, .6); }
.potion-belt-slots i { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #252220; background: radial-gradient(circle at 50% 40%, #181716, #070505 75%); box-shadow: inset 0 0 8px rgba(0, 0, 0, .9); }
.potion-belt-slots img { width: 28px; height: 28px; }
.potion-belt-slots b { position: absolute; right: 2px; bottom: 0; color: #d9c79b; font: 400 9px/1 var(--display); text-shadow: 0 1px 0 #000; }

/* Sigils on guide pages: the item that belongs to the page. */
.hero-sigil { display: grid; place-items: center; width: 84px; height: 84px; margin: -14px auto 6px; border: 1px solid rgba(199, 154, 60, .35); border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(139, 0, 0, .35), rgba(7, 6, 6, .95) 70%); box-shadow: inset 0 0 18px rgba(0, 0, 0, .9), 0 0 24px rgba(139, 0, 0, .35); }
.hero-sigil img { max-width: 64px; max-height: 64px; filter: drop-shadow(0 0 10px rgba(176, 132, 60, .45)); }

/* Ladder titles, when the realm reports one (Slayer, Champion, Patriarch…). */
.char-title { display: block; margin-bottom: 2px; color: var(--gold); font: 400 10px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; }

/* ==========================================================================
   Round 6 — Diablo II: Resurrected lobby art (exported from the local D2R
   install by tools/export_d2r_portal_art.py; provenance in d2r/MANIFEST.json).
   ========================================================================== */

/* Header: the lobby medallion in the middle of the bar (the menu rail it is
   set into is Round 9). */
.rh-bar {
  background:
    linear-gradient(rgba(12, 11, 11, .62), rgba(6, 5, 5, .86)),
    #0a0909;
  border-bottom: 1px solid #000;
}
.rh-bar::before { height: 3px; background: linear-gradient(90deg, transparent, #6b5326 10%, #e0b86a 50%, #6b5326 90%, transparent); }
.rh-bar-inner { height: 92px; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 14px; }
.rh-nav { display: contents; }
.rh-wing { display: flex; align-items: center; gap: 0; min-width: 0; }
.rh-wing-left { justify-content: flex-end; }
.rh-wing-right { justify-content: flex-start; }
.rh-medallion { position: relative; z-index: 6; display: grid; place-items: center; width: 118px; height: 92px; }
.rh-gem-button.lobby-gem { position: relative; z-index: 2; width: 112px; height: 112px; margin-top: 30px; padding: 0; border-radius: 50%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .9)); transition: transform .15s ease, filter .2s ease; }
.rh-gem-button.lobby-gem:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .9)) drop-shadow(0 0 14px rgba(176, 132, 60, .45)); }
.rh-gem-button.lobby-gem:active { transform: translateY(1px) scale(.98); }
.rh-gem-button .lobby-gem-art { display: block; width: 112px; height: 112px; aspect-ratio: auto; background: url("/assets/sanctuary/d2r/medallion-flawless.webp") center / contain no-repeat; }
.rh-gem-state { position: absolute; top: calc(100% + 54px); left: 50%; z-index: 7; transform: translateX(-50%); margin: 0; padding: 6px 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; background: rgba(0, 0, 0, .86); font-size: 9px; }
.rh-gem-state strong { margin-bottom: 3px; font: 400 13px/1.2 var(--display); color: #ffa800; }
.rh-medallion:hover .rh-gem-state, .rh-medallion:has(.rh-gem-button:focus-visible) .rh-gem-state { opacity: 1; }
.lobby-gem.perfect { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .9)) drop-shadow(0 0 22px rgba(255, 60, 60, .55)); }

/* Buttons: the D2R main-menu plate (gold corners, blue gems), three-slice so
   it stretches to any label. Hover lights the gems, press uses the pressed
   frame; primary and mana tint the stone, not the frame. */
.d2-button, .btn {
  isolation: isolate; min-height: 50px; padding: 0 10px; border: 0 solid transparent; border-width: 0 26px; border-radius: 0;
  border-image: url("/assets/sanctuary/d2r/button.webp") 0 52 fill / 0 26px stretch;
  background: none; box-shadow: none; color: #e8cf94;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .9);
}
.d2-button::before, .btn::before { content: ""; position: absolute; inset: 7px -12px; z-index: -1; border: 0; border-radius: 0; pointer-events: none; background: transparent; transition: background .18s; }
.d2-button:hover, .btn:hover { border-image-source: url("/assets/sanctuary/d2r/button-hover.webp"); background: none; box-shadow: none; color: #fff2cf; text-shadow: 0 0 12px rgba(176, 132, 60, .85), 0 1px 0 #000; }
.d2-button:active, .btn:active { border-image-source: url("/assets/sanctuary/d2r/button-pressed.webp"); box-shadow: none; transform: translateY(1px); }
.btn:disabled { border-image-source: url("/assets/sanctuary/d2r/button-disabled.webp"); }
.d2-button-primary::before, .btn-primary::before { background: radial-gradient(ellipse at 50% 50%, rgba(170, 10, 24, .55), rgba(90, 0, 8, .35) 75%); mix-blend-mode: screen; }
.d2-button-primary:hover::before, .btn-primary:hover::before { background: radial-gradient(ellipse at 50% 50%, rgba(220, 30, 40, .65), rgba(120, 0, 10, .4) 75%); }
.d2-button-primary, .btn-primary { background: none; box-shadow: none; color: #ffe2a8; }
.d2-button-primary:hover, .btn-primary:hover { background: none; box-shadow: none; }
.d2-button-mana { background: none; box-shadow: none; color: #dbe6ff; }
.d2-button-mana::before { background: radial-gradient(ellipse at 50% 50%, rgba(40, 80, 220, .5), rgba(10, 25, 90, .35) 75%); mix-blend-mode: screen; }
.d2-button-mana:hover { background: none; box-shadow: none; text-shadow: 0 0 12px rgba(125, 162, 255, .9), 0 1px 0 #000; }
.d2-button-large { min-height: 59px; border-width: 0 30px; border-image-width: 0 30px; font-size: 16px; }
.d2-button-small, .btn { min-height: 40px; border-width: 0 18px; border-image-width: 0 18px; font-size: 12px; }
.btn-danger { color: #f3b1b1; box-shadow: none; }

/* Section headings carry the D2R bracket studs with their blue gem. */
.landing-section-title .eyebrow, .gate-heading .eyebrow, .stone-panel-head .eyebrow, .hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.landing-section-title .eyebrow::before, .gate-heading .eyebrow::before, .hero .eyebrow::before,
.landing-section-title .eyebrow::after, .gate-heading .eyebrow::after, .hero .eyebrow::after { content: ""; width: 27px; height: 22px; flex: none; background: url("/assets/sanctuary/d2r/bracket-left.webp") center / contain no-repeat; }
.landing-section-title .eyebrow::after, .gate-heading .eyebrow::after, .hero .eyebrow::after { background-image: url("/assets/sanctuary/d2r/bracket-right.webp"); }

/* Waypoint window: the D2R tabs and travel buttons. */
.wp-tabs { gap: 2px; border-bottom: 0; }
.wp-tab { top: 0; height: 36px; padding: 0; border: 0; border-radius: 0; background: url("/assets/sanctuary/d2r/wp-tab.webp") center / 100% 100% no-repeat; color: #9b8763; box-shadow: none; }
.wp-tab.active { background: url("/assets/sanctuary/d2r/wp-tab-active.webp") center / 100% 100% no-repeat; box-shadow: none; }
.rh-nav .nav-menu.wp a { min-height: 40px; padding: 0 12px 0 0; border: 0 solid transparent; border-width: 0 6px 0 40px; border-image: url("/assets/sanctuary/d2r/wp-button.webp") 0 12 0 80 fill / 0 6px 0 40px stretch; background: none; }
.rh-nav .nav-menu.wp a:hover, .rh-nav .nav-menu.wp a.active { border-image-source: url("/assets/sanctuary/d2r/wp-button-hover.webp"); background: none; border-color: transparent; }
.rh-nav .nav-menu.wp a.active { color: var(--gold-pale); text-shadow: 0 0 10px rgba(125, 162, 255, .8); }

/* Terror zone emblem from the D2R waypoint panel: dark at rest, lit when a
   zone burns. */
.tz-icon { display: inline-block; width: 44px; height: 35px; background: url("/assets/sanctuary/d2r/tz-icon.webp") center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(0, 0, 0, .9)); }
.landing-desecration-card[data-state="active"] .tz-icon { background-image: url("/assets/sanctuary/d2r/tz-icon-active.webp"); filter: drop-shadow(0 0 10px rgba(125, 162, 255, .7)); }

/* HD items and runes scale smoothly; no pixel snapping. */
.rune-procession img { width: 36px; height: 36px; image-rendering: auto; filter: drop-shadow(0 0 8px rgba(0, 0, 0, .9)); }
.hero-sigil img { max-width: 64px; max-height: 64px; }
.potion-belt-slots img { width: 30px; height: 30px; }
.mode-banner { width: 20px; height: 26px; margin-right: 8px; vertical-align: middle; }

/* The D2R logo stands in for the title on the Resurrected page. */
.d2r-logo { display: block; width: min(460px, 82vw); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 0 30px rgba(220, 70, 20, .35)); }

/* Footer crowned with the angel crest from the D2R front end. */
.rf { margin-top: 170px; }
.rf-crest { display: block; width: min(420px, 80vw); height: auto; margin: -128px auto -34px; position: relative; z-index: 1; pointer-events: none; filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, .7)); }

@media (max-width: 1180px) {
  .rh-wing { display: none; }
  .rh-bar-inner { height: 80px; grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .rh-medallion { justify-self: center; width: 92px; height: 80px; }
  .rh-gem-button.lobby-gem, .rh-gem-button .lobby-gem-art { width: 86px; height: 86px; }
  .rh-gem-button.lobby-gem { margin-top: 24px; }
}
@media (max-width: 760px) {
  .rh-bar-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; }
  .rh-medallion { justify-self: center; width: 64px; height: 72px; }
  .rh-gem-button.lobby-gem, .rh-gem-button .lobby-gem-art { width: 64px; height: 64px; }
  .rh-gem-button.lobby-gem { margin-top: 10px; }
  .rh-brand-copy { display: none; }
  .rf { margin-top: 120px; }
  .rf-crest { margin-top: -84px; }
}

/* ==========================================================================
   Round 7 — grim D2R palette, header in the medallion's metals, D2R frames.
   Audit 2026-10-04: one cold stone palette; gold only for frames, titles and
   unique items; blue only for magic stats and D2R gems; red only for blood,
   hardcore and danger; no bright parchment.
   ========================================================================== */

body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(110, 11, 11, .12), transparent 34rem),
    linear-gradient(rgba(5, 5, 5, .86), rgba(5, 5, 5, .95)),
    var(--stone-tile) center top / 480px 480px repeat,
    var(--void);
}
.sanctuary-fog { opacity: .22; }
.embers i { filter: saturate(.75) brightness(.85); }

/* ---- Header in the medallion's iron, pewter and bronze ------------------ */
.rh-top { background: linear-gradient(#151515, #0b0b0b 60%, #070707); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 #000; }
.realm-switch a { color: #8d877c; }
.realm-switch a:hover { color: #ddd3bf; background: rgba(255, 255, 255, .03); }
.realm-switch a[aria-current] { color: #e6dcc7; border-bottom-color: #7d7466; background: linear-gradient(rgba(255, 255, 255, .04), transparent); }
.realm-switch-home { color: #c9bfa9 !important; }
.realm-switch-home b { color: #9a1c1c; }
.rh-season, .rh-season strong { color: #b7ae9c; }
.rh-season i { background: #4f8f4f; box-shadow: 0 0 6px rgba(79, 143, 79, .7); }
.rh-lang a { color: #7d776c; }
.rh-lang a:hover, .rh-lang a[aria-current] { color: #ddd3bf; }

.rh-bar {
  background:
    linear-gradient(rgba(8, 8, 8, .74), rgba(4, 4, 4, .9)),
    #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 16px 34px rgba(0, 0, 0, .8);
}
/* The rim under the bar is the medallion's own dark iron with a pewter
   highlight in the middle, not a gold stripe. */
.rh-bar::before { height: 3px; background: linear-gradient(90deg, transparent, #1d1b18 6%, #3e3a33 28%, #6f675a 50%, #3e3a33 72%, #1d1b18 94%, transparent); box-shadow: 0 1px 0 #000; }
.rh-bar::after { background: linear-gradient(135deg, #1b1a18 25%, transparent 25%) 0 0 / 14px 9px, linear-gradient(225deg, #111 25%, transparent 25%) 0 0 / 14px 9px; }
.rh-seal { background: radial-gradient(circle at 50% 38%, #4a0d0d 0, #1c0606 50%, #090606 74%); box-shadow: 0 0 0 2px #0d0c0b, 0 0 0 3px #5d564b, 0 0 0 4px #070707, inset 0 0 14px rgba(120, 10, 10, .45), 0 0 18px rgba(0, 0, 0, .8); }
.rh-seal::before { border-color: rgba(185, 176, 160, .3); }
.rh-seal::after { border-color: rgba(185, 176, 160, .18); }
.rh-seal span { color: #cfc5b1; text-shadow: 0 0 10px rgba(120, 10, 10, .9), 0 1px 0 #000; }
.rh-brand-copy strong { color: #d2c9b6; text-shadow: 0 1px 0 #000; }
.rh-brand-copy small { color: #7d776c; }
.rh-nav > a, .rh-nav .nav-more > summary, .rh-wing > a, .rh-wing > details > summary { color: #b0a999; font-size: 13px; letter-spacing: .16em; text-shadow: 0 1px 0 #000; }
.rh-wing > a:hover, .rh-wing > a.active, .rh-wing > details[open] > summary, .rh-wing > details > summary:hover { color: #efe5cf; text-shadow: 0 0 10px rgba(176, 132, 60, .55), 0 1px 0 #000; }
.rh-wing > a::after, .rh-wing > details > summary::after { background: linear-gradient(90deg, transparent, #8a7f6b, transparent); }
/* Iron studs between the links echo the medallion's filigree. */
.rh-wing > a + a::before, .rh-wing > a + details::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%) rotate(45deg); background: #3a3630; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(185, 176, 160, .25); pointer-events: none; }
.rh-wing > details { position: relative; }
.rh-account .header-account-toggle { border-color: #3a3630; background: linear-gradient(135deg, rgba(40, 38, 35, .6), rgba(8, 8, 8, .9)); }
.rh-account .header-account-toggle:hover, .rh-account.is-open .header-account-toggle { border-color: #7d7466; box-shadow: var(--inset), 0 0 14px rgba(176, 132, 60, .2); }

/* The medallion carries the ruby in its own art (no overlay to load late).
   The perfect stone is preloaded underneath and fades in on activation. */
.rh-gem-button .lobby-gem-art { position: relative; }
.rh-gem-button .lobby-gem-art::after { content: ""; position: absolute; inset: 0; opacity: 0; background: url("/assets/sanctuary/d2r/medallion-perfect.webp") center / contain no-repeat; transition: opacity .6s ease; }
.rh-gem-button[data-stage="perfect"] .lobby-gem-art::after { opacity: 1; animation: medallion-glow 2.8s ease-in-out infinite; }
@keyframes medallion-glow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(200, 30, 30, .5)); } 50% { filter: drop-shadow(0 0 12px rgba(220, 40, 40, .85)); } }
.rh-gem-state { background: rgba(0, 0, 0, .88); border: 1px solid #2c2925; }
.rh-medallion, .rh-gem-button.lobby-gem, .rh-gem-button .lobby-gem-art { transition: width .25s ease, height .25s ease, margin .25s ease, opacity .25s ease, transform .25s ease; }
/* Scrolled: the medallion folds into the bar so it never covers content. */
.rh.rh-scrolled .rh-gem-button.lobby-gem, .rh.rh-scrolled .rh-gem-button .lobby-gem-art { width: 78px; height: 78px; }
.rh.rh-scrolled .rh-gem-button.lobby-gem { margin-top: 2px; }

/* ---- Frames from the D2R UI ----------------------------------------------
   Panels: the stone modal frame with iron corner caps (nine-slice).
   Featured panels: gold celtic corners on top of it, and thorny lobby vines
   under the page banners. The old tooltip-tile frame is retired. */
.panel::before, .stone-panel::before, .framed-panel::before, .char-sheet::before { content: none; border-image: none; }
.panel, .stone-panel, .framed-panel, .char-sheet, .landing-dashboard, .rf-discord, .rh-nav .nav-menu.wp, .gate-door {
  border: 22px solid transparent;
  border-image: url("/assets/sanctuary/d2r/panel-frame.webp") 30 / 22px stretch;
  background-clip: padding-box;
}
.panel, .stone-panel, .framed-panel { padding: 10px 12px; background: linear-gradient(rgba(16, 16, 16, .94), rgba(9, 9, 9, .97)), var(--stone-tile) center / 480px; box-shadow: 0 22px 50px rgba(0, 0, 0, .6); }
.char-sheet { background: linear-gradient(rgba(14, 14, 14, .96), rgba(7, 7, 7, .98)), var(--stone-tile) center / 480px; box-shadow: 0 24px 60px rgba(0, 0, 0, .65); }
.char-sheet-head { margin: -8px -8px 0; background: linear-gradient(90deg, transparent, rgba(110, 11, 11, .22), transparent); }
.landing-dashboard { padding: 4px; box-shadow: 0 26px 60px rgba(0, 0, 0, .7); }
.landing-dashboard::before { content: none; }
.rh-nav .nav-menu.wp { padding: 0 0 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, .9); }
.gate-door { box-shadow: 0 34px 80px rgba(0, 0, 0, .7); }
.status-card, .content-card, .news-card, .zone-card, .trade-card, .grail-progress-card, .admin-card, .lab-card {
  border: 14px solid transparent; border-image: url("/assets/sanctuary/d2r/card-frame.webp") 22 / 14px stretch;
  background: linear-gradient(rgba(18, 18, 18, .9), rgba(9, 9, 9, .95)) padding-box; box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
}
body:not(.home-page):not(.admin-page):not(.admin-login-page) .panel::after, .realm-frame::after,
body:not(.home-page) .status-card::after, body:not(.home-page) .content-card::after, body:not(.home-page) .news-card::after,
body:not(.home-page) .zone-card::after, body:not(.home-page) .trade-card::after, body:not(.home-page) .grail-progress-card::after { content: none; background: none; }

/* Gold celtic corners on the panels that matter most. The gold rule of each
   corner lies exactly on the inner edge of the stone frame (the padding box,
   which an absolute child measures from), so corners and frame line up. */
.char-sheet::after, .gate-door::after, .landing-dashboard::after, .stash-grid::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 2;
  background:
    url("/assets/sanctuary/d2r/corner-tl.webp") left top / 64px 64px no-repeat,
    url("/assets/sanctuary/d2r/corner-tr.webp") right top / 64px 64px no-repeat,
    url("/assets/sanctuary/d2r/corner-bl.webp") left bottom / 64px 64px no-repeat,
    url("/assets/sanctuary/d2r/corner-br.webp") right bottom / 64px 64px no-repeat;
  opacity: .85;
}
.landing-dashboard, .stash-grid { position: relative; }

/* Page banners: dark stone in the D2R modal frame, with the same gold celtic
   corner at all four corners, set on the frame's inner edge (22 px in). */
.hero { margin-bottom: 40px; }
.hero::before {
  background: radial-gradient(ellipse at 50% 120%, rgba(110, 11, 11, .16), transparent 60%), linear-gradient(rgba(13, 13, 13, .9), rgba(7, 7, 7, .95)), var(--stone-tile) center / 480px;
  border: 22px solid transparent; border-image: url("/assets/sanctuary/d2r/panel-frame.webp") 30 / 22px stretch; background-clip: padding-box;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .65);
}
.hero::after {
  inset: 20px; border: 0; border-image: none;
  background:
    url("/assets/sanctuary/d2r/corner-tl.webp") left top / 70px 70px no-repeat,
    url("/assets/sanctuary/d2r/corner-tr.webp") right top / 70px 70px no-repeat,
    url("/assets/sanctuary/d2r/corner-bl.webp") left bottom / 70px 70px no-repeat,
    url("/assets/sanctuary/d2r/corner-br.webp") right bottom / 70px 70px no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}
.hero h1 { color: #ddd1b8; text-shadow: 0 2px 0 #000, 0 0 24px rgba(0, 0, 0, .9); }
.hero p { color: var(--ash); }

/* Dividers: the pause-menu rule with its studs. */
.rune-divider::before, .rune-divider::after { height: 8px; background: url("/assets/sanctuary/d2r/divider.webp") left center / auto 8px no-repeat; }
.rune-divider::after { transform: scaleX(-1); }
.rune-divider span { border-color: #8a7f6b; background: #1a1916; box-shadow: 0 0 0 1px #000; }

/* ---- Eyebrows, titles, stats ------------------------------------------- */
.eyebrow, .kicker { color: #a08a5c; text-shadow: none; }
.stat-magic { color: #8a8aff; text-shadow: none; }
.stat-unique, .stat-runeword { color: #c7b377; text-shadow: none; }
.stat-set { color: #3cc23c; text-shadow: none; }
.stat-mana { color: #8a9ee0; text-shadow: none; }
.char-sheet-head h2, .char-sheet-head h3 { color: #ddd1b8; text-shadow: 0 1px 0 #000; }
.stone-panel-count { color: var(--bone); text-shadow: none; }
.live-dot { background: #4f8f4f; box-shadow: 0 0 6px rgba(79, 143, 79, .7); }
.text-link { color: #c2a464; }
.text-link:hover { color: #e6d6ad; text-shadow: 0 0 10px rgba(176, 132, 60, .55); }
.hc { color: #c8464e; text-shadow: none; }

/* ---- Buttons: one plate; tints are dark, never pink or neon ------------- */
.d2-button-primary::before, .btn-primary::before { background: radial-gradient(ellipse at 50% 50%, rgba(120, 8, 14, .7), rgba(60, 0, 4, .5) 75%); mix-blend-mode: multiply; }
.d2-button-primary:hover::before, .btn-primary:hover::before { background: radial-gradient(ellipse at 50% 50%, rgba(160, 14, 22, .65), rgba(80, 0, 6, .45) 75%); mix-blend-mode: multiply; }
.d2-button-primary, .btn-primary { color: #ead9b4; }
.d2-button-mana::before { background: none; }
.d2-button-mana { color: #c6cfe6; }
.d2-button-mana:hover { text-shadow: 0 0 10px rgba(138, 158, 224, .7), 0 1px 0 #000; }

/* ---- Parchment: the Scroll of Inifuss sheet, read by candlelight -------- */
.quest-scroll {
  color: var(--bone); border: 1px solid #2c2822;
  background: linear-gradient(rgba(8, 7, 6, .74), rgba(8, 7, 6, .82)), url("/assets/sanctuary/d2r/parchment.webp") center / cover no-repeat, #15130f;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .85), 0 30px 70px rgba(0, 0, 0, .7);
}
.quest-scroll::before, .quest-scroll::after { background: linear-gradient(#4a3f30, #2a231a 40%, #17130e 60%, #3a3126); }
.quest-scroll h2, .quest-scroll h3 { color: #ddd1b8; text-shadow: 0 1px 0 #000; }
.quest-scroll p, .quest-scroll .section-heading > p, .quest-scroll .onboarding-step p { color: #c2b9a6; }
.quest-scroll .eyebrow { color: #b08f58; }
.quest-scroll a:not(.d2-button):not(.btn), .quest-scroll .onboarding-step .text-link { color: #d1b06b; }
.quest-scroll code { color: #e6d6ad; background: rgba(0, 0, 0, .35); }
.quest-scroll small { color: #9a917f; }
.quest-scroll .onboarding-step { border-top-color: rgba(201, 168, 95, .16); }
.quest-scroll .onboarding-step h3 { color: #ddd1b8; }
.quest-scroll .onboarding-step strong { color: #e6d6ad; }
.quest-seal { background: radial-gradient(circle at 35% 30%, #a3141c 0, #6e0b0b 40%, #3a0505 80%, #220303 100%); color: #e6d6ad; }
.notice { color: var(--ash); border: 1px solid #2c2925; border-left: 3px solid #8a7f6b; background: linear-gradient(rgba(18, 18, 18, .95), rgba(10, 10, 10, .95)); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); font: 13px/1.6 var(--serif); }
.notice strong, .notice a { color: var(--gold-pale); }
.notice code { color: var(--gold-pale); background: rgba(255, 255, 255, .04); }
.notice-danger { border-left-color: var(--blood-bright); color: #e3b3b3; background: linear-gradient(rgba(30, 10, 10, .9), rgba(12, 6, 6, .95)); }

/* ---- Footer: the crest stands above the runes, never on them ------------ */
.rf { margin-top: 190px; }
.rf-crest { margin: -150px auto 0; }
.rune-procession { padding-top: 16px; }
.rf-discord { background: linear-gradient(90deg, rgba(14, 18, 32, .9), rgba(9, 9, 9, .95) 60%); }
.rf-discord:hover { border-color: transparent; }

@media (max-width: 760px) {
  .hero::before { border-width: 16px; border-image-width: 16px; }
  .hero::after { inset: 14px; background-size: 52px 52px; }
  .panel, .stone-panel, .framed-panel, .char-sheet, .gate-door { border-width: 16px; border-image-width: 16px; }
  .rf { margin-top: 140px; }
  .rf-crest { margin-top: -110px; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-gem-button[data-stage="perfect"] .lobby-gem-art::after { animation: none; }
}

/* ==========================================================================
   Round 7b — subpage parity. c9.css scopes an older subpage theme under
   `body:not(.home-page)…`, which outranks plain class selectors: it kept a
   1 px banner frame offset 28 px down (so the gold corners floated off it),
   1 px panel borders, warm card fills, orange eyebrows, an orange primary
   button and a 3.8:1 dim text token. These rules match that specificity.
   ========================================================================== */
body:not(.home-page) {
  --bone: #d4cbb8; --bone-bright: #ebe3d0; --ash: #a39b8b; --dim: #8f887b;
  --line: rgba(168, 136, 74, .16); --line-strong: rgba(168, 136, 74, .32); --gold-line: rgba(201, 168, 95, .38);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(110, 11, 11, .12), transparent 34rem),
    linear-gradient(rgba(5, 5, 5, .86), rgba(5, 5, 5, .95)),
    var(--stone-tile) center top / 480px 480px repeat,
    var(--void);
}
body:not(.home-page) .sanctuary-backdrop { filter: saturate(.35) contrast(1.1) brightness(.42); }
body:not(.home-page) .eyebrow, body:not(.home-page) .kicker { color: #a08a5c; }
body:not(.home-page) .hero h1 { color: #ddd1b8; }
body:not(.home-page) .hero p { color: var(--ash); }
body:not(.home-page) .panel-head { border-color: var(--line-strong); }
body:not(.home-page):not(.admin-page):not(.admin-login-page) .hero::before {
  inset: 0; border: 22px solid transparent; border-image: url("/assets/sanctuary/d2r/panel-frame.webp") 30 / 22px stretch;
  background: radial-gradient(ellipse at 50% 120%, rgba(110, 11, 11, .16), transparent 60%), linear-gradient(rgba(13, 13, 13, .9), rgba(7, 7, 7, .95)) padding-box;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .65);
}
body:not(.home-page):not(.admin-page):not(.admin-login-page) .panel {
  padding: 10px 12px; border: 22px solid transparent; border-image: url("/assets/sanctuary/d2r/panel-frame.webp") 30 / 22px stretch;
  background: linear-gradient(rgba(16, 16, 16, .94), rgba(9, 9, 9, .97)) padding-box; box-shadow: 0 22px 50px rgba(0, 0, 0, .6);
}
body:not(.home-page) .status-card, body:not(.home-page) .content-card, body:not(.home-page) .news-card,
body:not(.home-page) .zone-card, body:not(.home-page) .trade-card, body:not(.home-page) .grail-progress-card {
  background: linear-gradient(rgba(18, 18, 18, .9), rgba(9, 9, 9, .95)) padding-box;
}
body:not(.home-page) .btn-primary, body:not(.home-page) .btn-primary:hover { background: none; color: #ead9b4; }
@media (max-width: 760px) {
  body:not(.home-page):not(.admin-page):not(.admin-login-page) .hero::before { inset: 0; border-width: 16px; border-image-width: 16px; }
  body:not(.home-page):not(.admin-page):not(.admin-login-page) .panel { padding: 8px; border-width: 16px; border-image-width: 16px; }
}

/* ==========================================================================
   Round 8 — header symmetry (2026-10-04).
   The side columns are equal, so the medallion sits on the page's true
   centre rather than halfway between a wide brand and narrower actions.
   The links are set a touch tighter so both wings fit their columns.
   ========================================================================== */
:root { --rh-side: clamp(236px, 19vw, 300px); }
.rh-bar-inner { grid-template-columns: var(--rh-side) minmax(0, 1fr) auto minmax(0, 1fr) var(--rh-side); }
.rh-brand { justify-self: start; min-width: 0; }
.rh-actions { justify-self: end; min-width: 0; }
.rh-wing-left { justify-content: flex-end; }
.rh-wing-right { justify-content: flex-start; }
.rh-wing > a, .rh-wing > details > summary { padding: 12px 10px; letter-spacing: .12em; }
@media (max-width: 1500px) {
  .rh-wing > a, .rh-wing > details > summary { padding: 12px 8px; font-size: 12px; letter-spacing: .08em; }
}
@media (max-width: 1320px) {
  .rh-wing { display: none; }
  .rh-discord, .rh-cta { display: none; }
  .rh-mobile { display: block; }
  .rh-bar-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .rh-brand { grid-column: 1; }
  .rh-medallion { grid-column: 2; justify-self: center; }
  .rh-actions { grid-column: 3; grid-row: 1; margin-right: 58px; }
  .rh-mobile { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ==========================================================================
   Round 9 — the menu rail (2026-10-04).
   The links stand on the D2R controller UI's top tab bar: one stone plate
   per link with its diamond (lit on the current page and on hover), the
   lobby's silver arrows as the rail's pointed ends, and between the wings
   the knotwork belt of the lobby centre panel, which carries the medallion
   as it does in the game. The bar behind is plain dark iron.
   ========================================================================== */
.rh-bar { background: linear-gradient(#050505, #0c0c0c 50%, #050505); }
@media (min-width: 1321px) {
  .rh-wing { position: relative; z-index: 1; align-self: center; align-items: flex-start; height: 46px; gap: 0; }
  .rh-wing > details { display: flex; }
  /* State selectors listed too: older hover/active rules reset `border`
     (and with it the border image) and tint the active link red. */
  .rh-wing > a, .rh-wing > a:hover, .rh-wing > a.active,
  .rh-wing > details.nav-more > summary, .rh-wing > details.nav-more > summary:hover, .rh-wing > details.nav-more[open] > summary {
    position: relative; isolation: isolate; display: flex; align-items: center; box-sizing: border-box; height: 45px;
    padding: 0 10px 6px; border: 0; border-radius: 0; background: none; letter-spacing: .08em; list-style: none;
    border-image: url("/assets/sanctuary/d2r/rail-plate.webp") 0 12 20 12 fill / 0 6px 10px 6px stretch;
  }
  .rh-wing > a + a, .rh-wing > a + details { margin-left: -1px; }
  /* The diamond under each plate; lit where you are and where you point. */
  .rh-wing > a::after, .rh-wing > details.nav-more > summary::after {
    content: ""; position: absolute; left: 50%; right: auto; top: auto; bottom: 0; width: 17px; height: 20px;
    transform: translateX(-50%); border: 0; opacity: 1; background: url("/assets/sanctuary/d2r/rail-gem.webp") center / contain no-repeat;
  }
  .rh-wing > a:hover::after, .rh-wing > a.active::after, .rh-wing > details.nav-more[open] > summary::after, .rh-wing > details.nav-more > summary:hover::after { background-image: url("/assets/sanctuary/d2r/rail-gem-lit.webp"); }
  /* The lit diamond's cold glow rises into the plate, under the label. */
  .rh-wing > a + details::before { content: none; }
  .rh-wing > a::before, .rh-wing > a + a::before, .rh-wing > details.nav-more > summary::before {
    content: ""; position: absolute; inset: 0 6px 10px; z-index: -1; width: auto; height: auto; transform: none; box-shadow: none;
    background: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(120, 185, 220, .3), transparent 70%); opacity: 0; transition: opacity .2s; pointer-events: none;
  }
  .rh-wing > a:hover::before, .rh-wing > a.active::before, .rh-wing > details.nav-more[open] > summary::before, .rh-wing > details.nav-more > summary:hover::before { opacity: 1; }
  /* Pointed silver ends outside the end plates (touching, never over a
     label), the knotwork belt inside, running under the medallion's rim. */
  .rh-wing-left::before, .rh-wing-right::after {
    content: ""; position: relative; z-index: 2; flex: 0 0 34px; height: 40px; margin-top: -1px; pointer-events: none;
    background: center / contain no-repeat; filter: drop-shadow(0 2px 3px #000);
  }
  .rh-wing-left::before { margin-right: -2px; background-image: url("/assets/sanctuary/d2r/rail-tip-left.webp"); }
  .rh-wing-right::after { margin-left: -2px; background-image: url("/assets/sanctuary/d2r/rail-tip-right.webp"); }
  .rh-wing-left::after, .rh-wing-right::before {
    content: ""; flex: 0 0 78px; height: 46px; pointer-events: none;
    background: center / 100% 100% no-repeat; filter: drop-shadow(0 2px 3px #000);
  }
  .rh-wing-left::after { margin: -3px -28px 0 -6px; background-image: url("/assets/sanctuary/d2r/rail-knot-left.webp"); }
  .rh-wing-right::before { margin: -3px -6px 0 -28px; background-image: url("/assets/sanctuary/d2r/rail-knot-right.webp"); }
  /* The medallion's centre on the rail's centre line. */
  .rh-gem-button.lobby-gem { margin-top: -14px; }
}
/* The hub's and the D2R page's links are long ("Lord of Destruction", four
   links a side on D2R); set them tighter so the
   rail's tip clears the brand before the wings fold into the menu button. */
@media (min-width: 1321px) {
  body[data-realm="hub"] .rh-wing > a, body[data-realm="d2r"] .rh-wing > a { padding: 0 8px 6px; font-size: 12px; letter-spacing: .04em; }
}
@media (min-width: 1321px) and (max-width: 1500px) {
  body[data-realm="hub"] .rh-wing > a, body[data-realm="d2r"] .rh-wing > a { padding: 0 7px 6px; font-size: 11px; letter-spacing: .02em; }
}

/* ==========================================================================
   Round 10 — the medallion as the lobby ships it (2026-10-04).
   Its own stone recoloured ruby at export (no pasted gem, no other size),
   so it matches the belt and plates around it. It no longer lifts, shrinks
   or pulses; a click strikes a short flash from the stone, and nothing else
   moves. On narrow screens it still folds on scroll so it never covers text.
   ========================================================================== */
.rh-gem-button.lobby-gem, .rh-gem-button.lobby-gem:hover, .rh-gem-button.lobby-gem:active, .rh-gem-button.lobby-gem.perfect {
  transform: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .9));
}
.rh-gem-button[data-stage="perfect"] .lobby-gem-art::after { animation: none; }
.rh-gem-button .lobby-gem-art::before {
  content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 48.8% 46.5%, rgba(255, 210, 200, .95) 0, rgba(255, 60, 50, .75) 6%, rgba(200, 10, 10, .35) 13%, transparent 24%);
  mix-blend-mode: screen;
}
.rh-gem-button.lobby-gem.struck .lobby-gem-art::before { animation: ruby-strike .7s ease-out; }
@keyframes ruby-strike { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@media (min-width: 1321px) {
  .rh.rh-scrolled .rh-gem-button.lobby-gem, .rh.rh-scrolled .rh-gem-button .lobby-gem-art { width: 112px; height: 112px; }
  .rh.rh-scrolled .rh-gem-button.lobby-gem { margin-top: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-gem-button.lobby-gem.struck .lobby-gem-art::before { animation: none; }
}
/* The click-count bubble: shown on hover, keyboard focus and for a moment
   after a click, then it fades on its own even if the pointer stays (site.js
   sets .gem-state-open / .gem-state-done; leaving the medallion resets it). */
.rh-medallion.gem-state-open .rh-gem-state { opacity: 1; }
.rh-medallion.gem-state-done .rh-gem-state { opacity: 0; }
/* Room for the rail: the header (top strip and bar together, so the brand
   stays under "C9 Realm") may run wider than the 1420 px page column, and
   below 1500 px every realm's links are set tighter, so neither tip reaches
   the brand or the account box (measured on every page, PL and EN). */
@media (min-width: 1321px) {
  .rh-top-inner, .rh-bar-inner { width: min(1640px, calc(100% - 40px)); }
}
@media (min-width: 1321px) and (max-width: 1500px) {
  .rh-wing > a, .rh-wing > details.nav-more > summary { padding: 0 8px 6px; letter-spacing: .04em; }
  body[data-realm="hub"] .rh-wing > a, body[data-realm="d2r"] .rh-wing > a { padding: 0 6px 6px; font-size: 11px; letter-spacing: 0; }
}
/* With a Discord invite configured (staging, production) the actions need
   323 px: Discord, account and the download button. The side column is at
   most 300 px, so the account label was cut to "Zalo...". In the header the
   Discord link is an icon (its aria-label stays), and between 1321 and 1500 px
   it steps out of the header, as it does below 1320 px; the footer and the
   page heroes still carry it. */
@media (min-width: 1321px) {
  .rh-discord { padding: 9px; }
  .rh-discord b { display: none; }
}
@media (min-width: 1321px) and (max-width: 1500px) {
  .rh-discord { display: none; }
}
/* Open dropdown lists: Chrome on Windows paints the list with the select's
   background colour, which the gradient left transparent, so the list came
   up white under light text. Options get the dark stone explicitly. */
select option, select optgroup { background-color: #0d0c0b; color: #d4cbb8; }
select option:checked { background-color: #2a2620; color: #fff; }
/* Phones: the medallion is 64 px; the scrolled rule (78 px) made it grow on
   scroll, and past its 64 px column, to the right. It keeps its size. */
@media (max-width: 760px) {
  .rh.rh-scrolled .rh-gem-button.lobby-gem, .rh.rh-scrolled .rh-gem-button .lobby-gem-art { width: 64px; height: 64px; }
  .rh.rh-scrolled .rh-gem-button.lobby-gem { margin-top: 10px; }
}
/* A tap shows the item's tooltip (item-tooltip.js); a long press must not
   open the phone's save-image menu over it. */
[data-item], [data-item] img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Phones: a panel header with a title and a Hardcore/Softcore switch was
   13 px wider than the LoD page; it wraps instead. */
.stone-panel-head { flex-wrap: wrap; }
.stone-panel-head > :first-child { min-width: 0; }
/* Download page on narrow screens: a "1fr" column cannot shrink below its
   content's min-content width, and the installer card and steps were 702 px
   wide on a 375 px phone. Columns may shrink; long strings break. */
@media (max-width: 1100px) {
  .download-layout, .download-steps { grid-template-columns: minmax(0, 1fr); }
}
.installer-card, .download-steps > * { min-width: 0; overflow-wrap: anywhere; }
.release-card { grid-template-columns: minmax(0, 1fr) auto; }
.release-card > .status-badge { align-self: start; }
@media (max-width: 560px) {
  .release-card { grid-template-columns: minmax(0, 1fr); }
  .release-card > .status-badge { grid-row: 1; justify-self: start; }
}
/* Character Armory and trade on phones: the one "1fr" column could not
   shrink below the paper-doll's 328 px, so the panel (with its 22 px stone
   frame) ran 13 px past a 375 px screen and its right frame was cut. */
@media (max-width: 1080px) {
  .armory-layout, .trade-page-grid { grid-template-columns: minmax(0, 1fr); }
}
.armory-left-stack { min-width: 0; }

/* ==========================================================================
   Round 12 — audit (2026-10-05). FAQ, features and the build lab still wore
   their own pre-redesign banners and the FAQ its warm brown cards. The
   banners are now the framed .hero of every other subpage; the FAQ's cards,
   filters and answers take the cold stone of the panels (gold only on
   numbers, rules and titles). Runeword cards could not shrink below their
   longest name on a phone (1fr grows to min-content).
   ========================================================================== */
.hero.compact-hero .hero-actions { justify-content: center; margin-top: 22px; }
.faq-banner, .c9-feature-banner, .lab-banner { margin-bottom: 18px; }
.lab-banner .eyebrow span { margin-left: 8px; padding: 2px 6px; border: 1px solid var(--line-strong); color: var(--gold-pale); }
.lab-banner .lab-back { display: inline-block; margin-top: 12px; font-family: var(--label); font-size: 13px; letter-spacing: .08em; }
.c9-feature-page > .c9-review-note { justify-content: center; margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }

.faq-command-card {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px 26px;
  min-height: 0; margin: 0 0 18px; padding: 16px 24px; clip-path: none; text-align: left;
  border: 14px solid transparent; border-image: url("/assets/sanctuary/d2r/card-frame.webp") 22 / 14px stretch;
  background: radial-gradient(ellipse at 22% 50%, rgba(110, 11, 11, .14), transparent 40%), linear-gradient(rgba(18, 18, 18, .9), rgba(9, 9, 9, .95)) padding-box;
}
.faq-command-card::before { content: none; }
.faq-command-card span { color: var(--gold); font: 600 11px/1.3 var(--label); letter-spacing: .16em; }
.faq-command-card strong { margin: 0; color: var(--gold-pale); font: 30px/1 Consolas, "Courier New", monospace; text-shadow: 0 0 18px rgba(0, 0, 0, .9); }
.faq-command-card p { max-width: none; color: var(--ash); font-size: 14px; line-height: 1.55; }

.faq-start-grid { border-color: var(--line); background: var(--line); }
.faq-start-grid article { background: linear-gradient(rgba(18, 18, 18, .94), rgba(10, 10, 10, .97)); }
.faq-start-grid b { color: var(--gold); }
.faq-start-grid span { color: var(--dim); font: 600 10px/1.2 var(--label); letter-spacing: .14em; }
.faq-start-grid strong { color: var(--bone); font: 15px/1.35 var(--serif); }

.faq-toolbar, .faq-side, .faq-item, .faq-no-results, .faq-final {
  border: 1px solid var(--line); background: linear-gradient(rgba(16, 16, 16, .94), rgba(9, 9, 9, .97));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.faq-search > span { color: var(--gold); }
.faq-search input { border-color: var(--line-strong); background: linear-gradient(#0a0a0a, #11100f) #0b0b0a; color: var(--bone); font: 15px var(--serif); }
.faq-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(168, 136, 74, .14); }
.faq-search input::placeholder { color: var(--dim); }
.faq-filters button { border-color: var(--line); background: #121212; color: var(--ash); font: 600 11px/1 var(--label); letter-spacing: .1em; }
.faq-filters button:hover { border-color: var(--gold-line); color: var(--bone-bright); }
.faq-filters button[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(#2a2418, #14110c); color: var(--gold-pale); }
.faq-toolbar > small { color: var(--dim); font: 600 11px/1 var(--label); }

.faq-side > span { color: var(--gold); font: 600 11px/1 var(--label); }
.faq-side nav a { border-bottom-color: var(--line); color: var(--ash); font-size: 14px; }
.faq-side nav a::before { background: var(--gold-deep); }
.faq-side nav a:hover { color: var(--bone-bright); }
.faq-side nav a:hover::before { background: var(--gold-bright); }
.faq-help p { font-size: 13px; }
.faq-help a { font-size: 12px; }

.faq-item summary > span { border-color: var(--gold-line); background: rgba(168, 136, 74, .06); color: var(--gold-bright); }
.faq-item summary > strong { color: var(--bone); }
.faq-item summary > i::before, .faq-item summary > i::after { background: var(--gold); }
.faq-item[open] summary { border-bottom-color: var(--line); background: linear-gradient(90deg, rgba(168, 136, 74, .07), transparent 55%); }
.faq-item[open] summary > strong, .faq-item summary:hover > strong { color: var(--bone-bright); }
.faq-item.faq-featured { border-color: var(--gold-line); box-shadow: inset 2px 0 var(--gold), 0 12px 26px rgba(0, 0, 0, .45); }
.faq-answer { color: var(--ash); font-size: 15px; }
.faq-answer strong { color: var(--bone-bright); }
.faq-answer a { color: var(--gold-bright); text-decoration-color: rgba(201, 168, 95, .35); }
.faq-answer li::marker { color: var(--gold); }
.faq-hero-copy code, .faq-answer code, .faq-banner code, .download-faq-cta code { border-color: var(--line-strong); background: rgba(0, 0, 0, .45); color: var(--gold-pale); }
.faq-example { border-color: var(--line-strong); background: rgba(8, 8, 8, .7); }
.faq-example > span { color: var(--gold); font: 600 10px/1 var(--label); }
.faq-example > strong { color: var(--bone-bright); font-size: 15px; }
.faq-example > small { color: var(--dim); font-size: 13px; }
.faq-no-results p, .faq-final p { color: var(--ash); font-size: 14px; }
.faq-final { background: radial-gradient(ellipse at 85% 50%, rgba(110, 11, 11, .14), transparent 40%), linear-gradient(rgba(16, 16, 16, .94), rgba(9, 9, 9, .97)); }

@media (max-width: 1050px) {
  .faq-command-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 850px) {
  .runeword-grid { grid-template-columns: minmax(0, 1fr); }
  .runeword-card header > div { min-width: 0; }
  .runeword-card h2 { font-size: clamp(22px, 6.6vw, 35px); overflow-wrap: anywhere; }
}
@media (max-width: 359px) {
  /* A 320 px phone scrolled sideways on every page: the world switch with the language pair
     (348 px), the footer's eight runes (347 px), a download heading, a stash label;
     with live data also the D2R journal, its stat sheet and the ladder pager. */
  .rh-top-inner { gap: 4px; }
  .realm-switch a { padding-inline: 4px; font-size: 9px; letter-spacing: .04em; }
  .rune-procession { gap: 6px; padding-inline: 8px; }
  .rune-procession img { width: 28px; height: 28px; }
  .onboarding-section > .section-heading h2 { font-size: 27px; overflow-wrap: anywhere; }
  .landing-stash .stash-slot-copy strong { font-size: 17px; }
  .pagination { flex-wrap: wrap; }
  .char-sheet-col dd { min-width: 0; overflow-wrap: anywhere; }
}

/* Round 12b — the reference guides (runewords, cube) in stone. Their cards,
   filters and the warning above them were the last warm brown on the site
   (operator 05.10). Gold stays on names and runes; statuses are quiet. */
.reference-warning {
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  background: linear-gradient(rgba(16, 16, 16, .94), rgba(9, 9, 9, .97)); color: var(--ash); font-size: 14px;
}
.reference-warning strong { color: var(--gold-bright); font: 600 11px/1.3 var(--label); letter-spacing: .14em; }
.reference-count { color: var(--dim); font: 600 11px/1 var(--label); }
/* c9.css capped this banner at 850 px and the frame stood left of the content. */
.hero.reference-hero { max-width: none; }
.reference-filters button { border-color: var(--line); background: #121212; color: var(--ash); font: 600 11px/1 var(--label); letter-spacing: .08em; }
.reference-filters button:hover { border-color: var(--gold-line); background: #121212; color: var(--bone-bright); }
.reference-filters button.active { border-color: var(--gold); background: linear-gradient(#2a2418, #14110c); color: var(--gold-pale); }

.runeword-card, .cube-card {
  border: 14px solid transparent; border-image: url("/assets/sanctuary/d2r/card-frame.webp") 22 / 14px stretch;
  background: radial-gradient(ellipse at 50% 0, rgba(168, 136, 74, .06), transparent 55%), linear-gradient(rgba(18, 18, 18, .92), rgba(9, 9, 9, .96)) padding-box;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
}
.runeword-card { padding: 16px 18px; }
.cube-card { padding: 14px 18px; }
.runeword-card header small { color: var(--dim); font: 600 11px/1.3 var(--label); letter-spacing: .1em; }
.runeword-card h2 { color: var(--gold-bright); }
.runeword-status { font: 600 10px/1 var(--label); letter-spacing: .1em; }
.runeword-status.common { color: #8fae8f; }
.runeword-status.ladder { color: var(--ash); }
.runeword-status.realm { color: var(--gold-bright); }
.runeword-runes span { border-color: var(--gold-line); background: radial-gradient(circle, #1c1b19, #070707 72%); box-shadow: inset 0 0 14px rgba(0, 0, 0, .8), 0 0 10px rgba(0, 0, 0, .6); }
.runeword-runes b { color: var(--gold-pale); font-size: 13px; }
.runeword-runes small { color: var(--dim); font: 600 9px/1 var(--label); }
.runeword-card footer { border-top-color: var(--line); }
.runeword-card footer small, .cube-equation small { color: var(--dim); font: 600 10px/1 var(--label); letter-spacing: .12em; }
.runeword-card footer strong { color: var(--bone); font-size: 14px; }

.cube-card header > span { color: var(--gold); font: 600 11px/1 var(--label); letter-spacing: .12em; }
.cube-card header > b { border-color: var(--line-strong); color: var(--ash); font: 600 10px/1 var(--label); }
.cube-card header > b.realm { border-color: var(--gold-line); color: var(--gold-bright); }
.cube-card h2 { color: var(--bone-bright); }
.cube-equation > div { border-color: var(--line); background: rgba(6, 6, 6, .72); }
.cube-equation strong { color: var(--bone); font-size: 14px; }
.cube-equation > i { color: var(--gold); }
.cube-card > p { color: var(--ash); font-size: 13px; }
@media (max-width: 760px) {
  .runeword-card, .cube-card { padding: 10px 12px; }
  .cube-equation strong, .cube-card h2 { overflow-wrap: anywhere; }
}