/* ONN in the World of Warcraft look: a dark stone frame with gold trim, and parchment for reading.
   Textures come from the WoW: Forever interface files, built on the server into /ui/ (lib/uiart.js).
   Every rule has a plain colour behind the texture, so pages look right even before the art exists. */

:root {
  --wow-gold: #ffd100;          /* the game's title gold */
  --wow-gold-soft: #f3d58a;
  --wow-bronze: #7a5c2e;
  --wow-bronze-hi: #b08a4a;
  --wow-ink: #2b1b0c;           /* text on parchment */
  --wow-ink-soft: #46301b;
  --wow-ink-head: #4a1404;      /* headings on parchment */
  --wow-ink-link: #651f03;
  --wow-red: #8b0f0f;
  --stone: #141210;
  --stone-2: #1d1914;
  --frame-w: 13px;
  --parch: #e7d3a4;
}

/* ---------- the page: carved dark stone ---------- */
html { background: #0b0a08; }
body {
  background-color: #0e0c0a;
  background-image:
    radial-gradient(1100px 520px at 50% -160px, rgba(190, 120, 40, .22), transparent 70%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)),
    url(/ui/stone.jpg);
  background-size: auto, 100% 100%, 256px 256px;
  background-attachment: scroll, fixed, scroll;
}
::selection { background: rgba(255, 209, 0, .35); color: #fff; }

/* ---------- header ---------- */
.masthead {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .65)),
    url(/ui/rock.jpg) center / 512px;
  border-bottom: 0;
  position: relative;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
.masthead::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 14px; pointer-events: none;
  background: url(/ui/divider.png) center / 100% 14px no-repeat;
  filter: sepia(.9) saturate(2.2) hue-rotate(-12deg) brightness(1.05);
}
.brand-name { color: var(--wow-gold); text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 190, 60, .25); }
.brand-long { color: var(--wow-gold-soft); }
.brand-tag { color: #c9b98f; }

/* Menu tabs: the character-sheet tabs from the game, turned to sit on top of the page. */
.navrow { gap: 2px; align-items: flex-end; padding-top: 6px; }
.navrow > a, .navdd > summary {
  border: 0 !important; border-radius: 0 !important; position: relative;
  padding: 9px 18px 8px !important; margin: 0 !important;
  color: #e9dcb8 !important; font-family: var(--display); font-weight: 700; letter-spacing: .02em; font-size: 14px;
  text-shadow: 0 1px 0 #000;
  background: url(/ui/tab-off.png) center bottom / 100% 100% no-repeat, linear-gradient(#2a221a, #17120d);
  box-shadow: none !important;
}
.navrow > a:hover, .navdd > summary:hover { color: var(--wow-gold) !important; filter: brightness(1.15); }
.navrow > a[aria-current="page"], .navrow > a.on, .navdd > summary.on, .navdd[open] > summary {
  color: var(--wow-gold) !important;
  background: url(/ui/tab-on.png) center bottom / 100% 100% no-repeat, linear-gradient(#3a2c18, #1a140c);
}
.navdd-menu, .langdd-menu {
  background: rgba(10, 9, 8, .97);
  border: var(--frame-w) solid #6a5230; border-image: url(/ui/tip-border.png) 16 / 10px stretch;
  border-radius: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .7); padding: 6px;
}
.navdd-menu a, .langdd-menu a { border-radius: 2px; color: #eee3c4; }
.navdd-menu a:hover, .langdd-menu a:hover, .navdd-menu a[aria-current] { background: rgba(255, 209, 0, .12); color: var(--wow-gold); }

/* ---------- frames: dark stone with the game's gold border ---------- */
.panel, .gd-info, .gd-toc, .tc-tree, .wz-side, .wl-wrap, .idb-form, .table-wrap, .live, .rhead-n,
.df-edit[open], .gcompose[open], .chat-panel-in, .c3-dl, .rp-stats, .idb-info, section.mcard:not(.gd-part) {
  background:
    linear-gradient(rgba(16, 13, 10, .9), rgba(16, 13, 10, .94)),
    url(/ui/rock.jpg) center / 640px;
  border: var(--frame-w) solid #6a5230;
  border-image: url(/ui/gold-border.png) 32 / var(--frame-w) stretch;
  border-radius: 0 !important; background-clip: padding-box;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 0 40px rgba(0, 0, 0, .5);
}
/* Cards in a grid: lighter trim so a page of them doesn't get heavy. */
.story, .gd-card, .pcard, .vcard, .tile, .addon, .df-card, .df-pcard, .rcard, .rgroup, .wz-card, .sreq, .grow,
.gevent, .prow, .shame-row, .gpost:not(.full):not(.parch):not(.guide-sec), .gpost.full:has(input, textarea, select), .gpost.signin-box, .gd-part:not(.mcard) {
  background:
    linear-gradient(rgba(22, 18, 13, .88), rgba(14, 11, 8, .94)),
    url(/ui/rock.jpg) center / 640px;
  border: 1px solid #4a3a22 !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 220, 150, .06), 0 6px 16px rgba(0, 0, 0, .45);
}
.story:hover, .gd-card:hover, .pcard:hover, .wz-card:hover, .vcard:hover, .tile:hover {
  border-color: var(--wow-bronze-hi) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 209, 0, .18), 0 8px 22px rgba(0, 0, 0, .6);
}
/* Box headers inside frames read like a frame title bar. */
.gd-info-h, .panel-h {
  font-family: var(--display); color: var(--wow-gold) !important; text-shadow: 0 1px 0 #000; letter-spacing: .04em;
}
.gd-info-h {
  background: linear-gradient(180deg, rgba(90, 60, 20, .55), rgba(30, 20, 10, .2)) !important;
  border-bottom: 1px solid #5a4424 !important;
}
.gd-kv th { color: #c8b48a; }
.gd-kv tr + tr th, .gd-kv tr + tr td { border-top-color: rgba(122, 92, 46, .35) !important; }

/* ---------- headings ---------- */
.page-h, h1.page-h {
  color: var(--wow-gold); text-shadow: 0 2px 0 #000, 0 0 22px rgba(255, 180, 40, .18);
  font-family: var(--display); letter-spacing: .02em;
}
.gd-h2, .gd-ph, .panel-h, h2.upl-h { color: var(--wow-gold); }
.gd-h2 { text-shadow: 0 2px 0 #000; }
/* Section titles on dark frames sit on a thin gold rule. */
.gd-ph { border-bottom: 1px solid rgba(176, 138, 74, .4); }

/* ---------- buttons: the red buttons from the game's login screen ---------- */
.btn, button.btn, a.btn, .b.go {
  border: 11px solid transparent !important; border-image: url(/ui/btn.png) 13 fill / 11px stretch !important;
  background: none !important; border-radius: 0 !important;
  color: var(--wow-gold) !important; font-family: var(--display); font-weight: 700; letter-spacing: .03em;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .6);
  padding: 0 14px !important; min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none !important; line-height: 1.1;
}
.btn:hover, .b.go:hover { filter: brightness(1.25) saturate(1.1); }
.btn:active, .b.go:active { border-image-source: url(/ui/btn-down.png) !important; transform: translateY(1px); }
.btn-ghost, a.btn.btn-ghost, button.btn.btn-ghost, .b:not(.go) {
  border: 1px solid #6a5230 !important; border-image: none !important; border-radius: 3px !important;
  background: linear-gradient(180deg, #2b231a, #15110c) !important;
  color: #f0e2bd !important; text-shadow: 0 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .1), inset 0 0 0 1px rgba(0, 0, 0, .6) !important;
  padding: 8px 14px !important;
}
.btn-ghost:hover, .b:not(.go):hover { border-color: var(--wow-bronze-hi) !important; color: var(--wow-gold) !important; }
.chip { border-color: #5a4628 !important; background: rgba(20, 16, 11, .8) !important; color: #eadbb5 !important; border-radius: 3px !important; }
.chip-app, .acct { border-radius: 3px !important; }

/* Small pill toggles (tabs inside pages, filters). */
.wtabs a, .wl-chip, .tc-cls, .df-chip, .gfilter a {
  border-radius: 3px !important; border-color: #5a4628 !important;
  background: linear-gradient(180deg, #2a2219, #15110c); color: #e8dab4 !important;
}
.wtabs a.on, .wl-chip.on, .tc-cls.on, .tc-cls[aria-pressed="true"] {
  background: linear-gradient(180deg, #8a1a10, #4d0a06) !important; border-color: #c8952e !important;
  color: var(--wow-gold) !important; text-shadow: 0 1px 0 #000;
}
.wtabs .wtabs-r { background: none !important; }

/* ---------- inputs: inset stone ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .wz-find {
  background: #0c0a08 !important; border: 1px solid #4f3e24 !important; border-radius: 2px !important;
  color: #f0e6d2 !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--wow-gold) !important; outline-offset: 0; border-color: #a07c3c !important; }
input::placeholder, textarea::placeholder { color: #8a7c62 !important; }

/* ---------- tooltips: the in-game tooltip frame ---------- */
.tt, .wm-tip, .ttw, .itt {
  background: rgba(6, 8, 18, .94) !important;
  border: 10px solid #9a9a9a !important; border-image: url(/ui/tip-border.png) 16 / 8px stretch !important;
  border-radius: 0 !important;
}

/* ---------- parchment: the reading areas ---------- */
.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text) {
  background-color: var(--parch) !important;
  background-image: url(/ui/parchment.jpg) !important;
  background-size: 100% 100% !important; background-repeat: no-repeat !important;
  border: var(--frame-w) solid #6a5230 !important;
  border-image: url(/ui/gold-border.png) 32 / var(--frame-w) stretch !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 0 28px rgba(90, 55, 15, .2) !important;
  background-clip: padding-box !important;
  color: var(--wow-ink) !important;
}
:is(.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) :is(p, li, td, span, div, strong, b, em, label, dd, dt, small) { color: inherit; }
:is(.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif; font-size: 17.5px; line-height: 1.6;
}
:is(.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) :is(.gd-ph, h1, h2, h3, h4, .page-h, .panel-h) {
  color: var(--wow-ink-head) !important; text-shadow: none !important;
  border-bottom-color: rgba(92, 26, 8, .3) !important; font-family: var(--display);
}
:is(.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) :is(.muted, .small.muted, .gd-step-n) { color: var(--wow-ink-soft) !important; }
:is(.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) a:not(.btn):not([class*="q"]) { color: var(--wow-ink-link) !important; text-decoration: underline; text-decoration-color: rgba(122, 42, 6, .45); text-underline-offset: 3px; }
:is(.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) a.gd-glink { color: var(--wow-ink-link) !important; }
:is(.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) strong, :is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec) b { color: #1d1006 !important; }
/* Notes and callouts on parchment: a darker inked box. */
:is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec) :is(.gd-callout, .note, .gd-box, blockquote) {
  background: rgba(92, 55, 20, .12) !important; border-left: 3px solid rgba(92, 26, 8, .55) !important; color: var(--wow-ink) !important;
}
/* Tables on parchment. */
:is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec) :is(table, .gd-table) { background: transparent !important; }
:is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec) :is(th) { background: rgba(92, 26, 8, .12) !important; color: var(--wow-ink-head) !important; }
:is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec) :is(td, th) { border-color: rgba(92, 55, 20, .25) !important; }
:is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec) .gd-tablewrap { border-color: rgba(92, 55, 20, .3) !important; background: rgba(255, 245, 220, .15) !important; }
/* Step checkboxes become little wax-ink boxes. */
.gd-main .gd-part input[type=checkbox] { accent-color: var(--wow-ink-head); filter: sepia(.5); }
.gd-main .gd-part .gd-step.done, .gd-main .gd-part li.done { opacity: .55; }
/* Item links keep their quality colours but get a dark outline so they read on paper. */
:is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) :is(.idb-link, .gd-item) {
  text-shadow: 0 0 1px #000, 0 1px 1px rgba(0, 0, 0, .9); padding: 0 2px; border-radius: 2px; background: rgba(30, 18, 6, .55);
  text-decoration: none !important;
}
:is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) .gd-item:not([class*=" q"]) { color: #ffe7a3 !important; }
/* Faction badges stay readable on paper. */
:is(.gd-main .gd-part, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec) .gd-fac { text-shadow: none; }
/* The quest-style text on parchment. */
.wq-text { color: var(--wow-ink) !important; font-family: 'Crimson Pro', Georgia, serif; font-size: 18px; }
.gd-part:has(.wq-text) .wq-tok { color: var(--wow-ink-head) !important; }
.gd-part:has(.wq-text) .wq-link { color: var(--wow-ink-link) !important; text-decoration-color: rgba(122, 42, 6, .45); }
.gd-part:has(.wq-text) .wq-obj li, .gd-part:has(.wq-text) .wn-opts li { color: var(--wow-ink); }
.gd-part:has(.wq-text) .wn-opts li { background: rgba(92, 55, 20, .12) !important; }
.gd-part:has(.wq-text) .wn-opts li::before { color: var(--wow-ink-head) !important; }

/* The full story page: the article reads like a page from a book. */
.gpost.full:not(.signin-box):not(:has(input, textarea, select)) .lede, .gpost.full:not(.signin-box):not(:has(input, textarea, select)) .prose, .gpost.full:not(.signin-box):not(:has(input, textarea, select)) .article-body, .gpost.full:not(.signin-box):not(:has(input, textarea, select)) .keypoints, .gpost.full:not(.signin-box):not(:has(input, textarea, select)) .excerpt { color: var(--wow-ink) !important; }
.gpost.full:not(.signin-box):not(:has(input, textarea, select)) .meta, .gpost.full:not(.signin-box):not(:has(input, textarea, select)) .muted { color: var(--wow-ink-soft) !important; }
.gpost.full:not(.signin-box):not(:has(input, textarea, select)) .source-cta { background: rgba(92, 55, 20, .12) !important; border-color: rgba(92, 55, 20, .35) !important; color: var(--wow-ink) !important; }
.gpost.full:not(.signin-box):not(:has(input, textarea, select)) .kp-h, .gpost.full:not(.signin-box):not(:has(input, textarea, select)) .ch-t { color: var(--wow-ink-head) !important; }

/* ---------- small details ---------- */
.crumbs a { color: #e6cf93; }
a:not(.btn):hover { color: var(--wow-gold); }
.footer { border-top: 1px solid #3b2f1d; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .5)); }
hr { border: 0; height: 12px; background: url(/ui/divider.png) center / 60% 12px no-repeat; filter: sepia(.9) saturate(2) hue-rotate(-12deg); }
.wbadge { border-radius: 2px !important; }
.countdown .cd-num { text-shadow: 0 2px 0 #000; }
.cd-nr .cd-num { color: var(--wow-gold) !important; }
/* The age / unofficial-site gate. */
.gate-card, .gate-box { border: var(--frame-w) solid #6a5230; border-image: url(/ui/gold-border.png) 32 / var(--frame-w) stretch; border-radius: 0 !important; background: linear-gradient(rgba(16, 13, 10, .94), rgba(16, 13, 10, .97)), url(/ui/rock.jpg) center / 640px !important; }

@media (max-width: 760px) {
  :root { --frame-w: 10px; }
  .navrow > a, .navdd > summary { padding: 8px 12px 7px !important; font-size: 13px; }
  :is(.gd-main .gd-part, .gd-main .gd-toc, .gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-part:has(.wq-text)) { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* Contents list on parchment. */
.gd-main .gd-toc a, .gd-main .gd-toc li { color: var(--wow-ink-link) !important; }
.gd-main .gd-toc strong, .gd-main .gd-toc .gd-toc-h { color: var(--wow-ink-head) !important; font-family: var(--display); }

/* Top banners: a carved bar instead of blue. */
.banner-app, .banner-video {
  background: linear-gradient(90deg, rgba(20, 14, 8, .96), rgba(70, 44, 14, .92) 50%, rgba(20, 14, 8, .96)), url(/ui/rock.jpg) center / 512px !important;
  color: var(--wow-gold-soft) !important; border-bottom: 1px solid #6a5230 !important;
}
.banner-app strong, .banner-video strong { color: var(--wow-gold); text-shadow: 0 1px 0 #000; }
.banner-video .muted { color: #cdbb92 !important; }
.banner-cta, .banner-app .banner-cta, .banner-video .banner-cta {
  background: none !important; border: 9px solid transparent; border-image: url(/ui/btn.png) 13 fill / 9px stretch;
  border-radius: 0 !important; color: var(--wow-gold) !important; padding: 0 10px !important; font-family: var(--display); text-shadow: 0 1px 0 #000;
}

/* Code and keys on parchment. */
:is(.gpost.full:not(:has(input, textarea, select)):not(.signin-box), .gpost.parch, .guide-sec, .gd-main .gd-part) :is(code, kbd) { background: rgba(60, 35, 10, .14) !important; color: #3a1d06 !important; border: 1px solid rgba(92, 55, 20, .3) !important; }
/* Story and post header line on parchment. */
:is(.gpost.full:not(.signin-box):not(:has(input, textarea, select)), .gpost.parch) .meta { color: #2b1b0c !important; font-family: var(--sans); font-size: 13px; font-weight: 600; opacity: 1 !important; }
:is(.gpost.full:not(.signin-box):not(:has(input, textarea, select)), .gpost.parch) .meta :is(span, a, time) { color: #2b1b0c !important; }
:is(.gpost.full:not(.signin-box):not(:has(input, textarea, select)), .gpost.parch) .meta .sec { color: #fff !important; background: #5c1a08 !important; padding: 1px 7px; border-radius: 2px; text-shadow: none; }

/* Download cards: light text on stone; the main pick gets the red-and-gold treatment. */
a.c3-dl, a.c3-dl:visited { color: #eee3c4; }
a.c3-dl strong { color: var(--wow-gold); font-family: Cinzel, Georgia, serif; }
a.c3-dl .c3-sha { color: #b9a77f; }
a.c3-dl.c3-primary, a.c3-dl.c3-primary:visited {
  background: linear-gradient(180deg, rgba(138, 26, 16, .92), rgba(77, 10, 6, .95)), url(/ui/rock.jpg) center / 640px;
  background-clip: padding-box; color: #f3e6c4;
}
a.c3-dl.c3-primary .c3-sha { color: #e0c48a; }
a.c3-dl:hover, a.c3-dl:focus-visible { color: #fff6dc; filter: brightness(1.12); }
a.c3-dl:hover strong { color: #ffe26a; }