/* Map & Quest Log window styling. Texture attribution: images/dragonui/NOTICE.md. */
:root {
  --paper: #151412;
  --ink: #eee6cf;
  --gold: #f4d447;
  --muted: #c0b9a7;
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --hud-panel: #171612 url('../images/dragonui/ui-background-marble.png');
  --hud-border: 1px solid #777367;
  --hud-bevel: inset 0 0 0 1px #070706, inset 0 0 0 3px #8d87783d, 0 8px 24px #0008;
}
html { scroll-padding-top: 90px; scroll-padding-bottom: 130px; }
body {
  padding-bottom: 120px;
  background: linear-gradient(#13151288, #10120fea), url('../images/hero-icecrown.png') center / cover fixed;
}
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; color: #fff; background: #222; }
.skip-link:focus { top: 12px; }
.site-header, .site-header.scrolled {
  height: 72px;
  background: linear-gradient(#33302bd9, #11110ff5);
  border-top: 1px solid #868174;
  border-bottom: 3px ridge #69665d;
  box-shadow: inset 0 -2px #000, 0 4px 18px #0009;
}
.brand-logo { width: 103px; height: auto; max-height: 68px; object-fit: contain; }
.site-nav { gap: clamp(12px, 1.4vw, 24px); }
.site-nav a { padding-block: 24px; font-size: 12px; letter-spacing: .02em; text-transform: none; color: #e7d9b3; }
.site-nav a:hover, .site-nav a.active { color: #ffdf30; text-shadow: 1px 2px #000; }
.button {
  min-height: 42px;
  padding: 11px 24px;
  border: 2px ridge #9b9789;
  border-radius: 3px;
  background: linear-gradient(#9a130f, #620704 55%, #81100b);
  box-shadow: inset 0 0 0 2px #250603, inset 0 3px #df76364d, 0 0 0 1px #080805, 0 3px 8px #0008;
  color: #ffdf35;
  font: bold 15px var(--serif);
  text-shadow: 1px 2px 1px #000;
  letter-spacing: .02em;
  text-transform: none;
}
.button:hover { transform: none; background: linear-gradient(#be2118, #7e0b05); color: #fff080; }
.button-small { min-height: 34px; padding: 7px 16px; font-size: 13px; }
.button-amber, .button-light { background: linear-gradient(#79100b, #4c0805); color: #ffdf35; }
.button-amber:hover, .button-light:hover { background: #971d12; color: #ffed8a; }

/* The title rail uses the same repeating metal texture as the addon window. */
.hero.game-window {
  width: min(1500px, calc(100% - 48px));
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 111px auto 36px;
  padding: 0 7px 7px;
  overflow: visible;
  background: #302e29;
  border: 2px ridge #969184;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #12110f, inset 0 0 0 5px #55534b, 0 12px 45px #000b;
}
.hero.game-window:after { content: none; }
.window-titlebar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 37px;
  margin: 0 -4px;
  padding: 4px 58px 4px 90px;
  background: #37332e url('../images/dragonui/uiframemetalhorizontal2x.png') 0 -1px / 32px 128px repeat-x;
  border-bottom: 2px solid #080807;
}
.window-titlebar h2 { margin: 0; color: #ffdc1d; font: 19px var(--serif); text-shadow: 1px 2px 1px #000; }
.window-portrait {
  position: absolute;
  z-index: 2;
  top: -19px;
  left: -12px;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 4px ridge #d2b14c;
  border-radius: 50%;
  background: radial-gradient(at 40% 25%, #344c81, #090c18 70%);
  color: #f7d977;
  box-shadow: 0 0 0 3px #0a0907, 0 5px 8px #0009;
}
.window-portrait svg { width: 44px; height: 44px; filter: drop-shadow(2px 3px 1px #000); }
.window-help {
  position: absolute;
  right: 4px;
  top: 3px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #ffda00;
  background: linear-gradient(#a71610, #570801);
  border: 2px ridge #a5a195;
  border-radius: 4px;
  font: bold 22px Georgia, serif;
  text-decoration: none;
  text-shadow: 1px 2px #000;
}
.window-toolbar, .journal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.window-toolbar { gap: 8px; padding: 7px 0; background: #282723; }
.window-tabs { display: flex; min-width: 0; padding-left: 50px; background: linear-gradient(#040404, #171715); border: 2px groove #77736a; }
.window-tabs a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 9px 23px;
  color: #f5d72b;
  background: linear-gradient(#35322e, #121212 48%, #211e1c);
  border-right: 3px ridge #736d65;
  text-decoration: none;
  font: 16px var(--serif);
  text-shadow: 1px 2px #000;
  white-space: nowrap;
}
.window-tabs .selected, .window-tabs a:hover { background: linear-gradient(#92160d, #3f0402 60%, #660e07); }
.journal-search { display: flex; align-items: center; gap: 8px; margin: 5px 9px 5px 1px; padding: 1px 8px; background: #070908; border: 2px groove #7f7d6a; border-radius: 4px; }
.journal-search > span:first-child { font-size: 24px; line-height: 1; color: #ccc; }
.journal-search input { width: 100%; min-width: 0; padding: 3px 0; color: #eee7ce; border: 0; background: transparent; font: 14px var(--serif); }
.journal-search input::placeholder { color: #aaa79d; }
.journal-search:focus-within { outline: 2px solid #eed251; outline-offset: 2px; }
.journal-search input:focus { outline: none; }
.journal-layout { gap: 8px; min-height: 570px; }
.realm-canvas { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-width: 0; background: #94703c; border: 1px solid #141009; }
.realm-canvas:before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/hero-icecrown.png') 66% center / cover;
  filter: sepia(.85) saturate(.7) brightness(.8);
}
.realm-canvas:after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 40px 12px #211306; background: linear-gradient(0deg, #17100cf5, #17100c77 48%, transparent 78%); }
.map-zone { position: relative; z-index: 1; align-self: center; margin: 34px 18px auto; color: #f5d477; text-align: center; text-shadow: 1px 2px 2px #241706; }
.map-zone > span { display: block; padding: 4px 28px; border-block: 1px solid #c4a15180; background: #563e20b3; font: 26px var(--serif); letter-spacing: .19em; }
.map-zone small { display: block; margin-top: 8px; color: #e2d3ab; font-size: 11px; }
.hero-story { position: relative; z-index: 1; padding: 50px 50px 36px; }
.hero .eyebrow { margin-bottom: 15px; font-size: 11px; letter-spacing: .13em; color: #e1c991; }
.hero h1 { max-width: 680px; font-size: clamp(42px, 4.8vw, 68px); font-weight: 400; line-height: 1.08; text-transform: none; letter-spacing: -.03em; color: #fff0c4; }
.hero h1 i { font-weight: 400; color: #f5d56e; }
.hero h1 i:before { content: none; }
.hero-copy { max-width: 470px; margin: 19px 0 23px; color: #dfd9c4; font-size: 14px; line-height: 1.8; }
.hero-actions { flex-wrap: wrap; gap: 22px; }
.hero-actions .text-link { color: #f5d56e; font: 13px var(--serif); letter-spacing: 0; text-transform: none; }
.map-caption { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 10px 55px 10px 16px; color: #e5d8b3; background: #08080599; font: 12px var(--serif); }
.map-corner { position: absolute; z-index: 2; width: 68px; height: 68px; display: grid; place-items: center; color: #e2b529; border: 5px double #b49336; background: #39260988; box-shadow: 0 0 0 2px #302006; font-size: 35px; text-shadow: 2px 2px #251904; pointer-events: none; }
.map-corner-top { top: -7px; left: -7px; border-radius: 0 0 70px 0; padding: 0 12px 12px 0; }
.map-corner-bottom { right: -7px; bottom: -7px; border-radius: 70px 0 0 0; padding: 12px 0 0 12px; }
.journal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 21px 20px 15px;
  background: #0b0b08 url('../images/dragonui/questlog-background.png') left top / 166.78% 100.4% no-repeat;
  border: 3px ridge #6d6753;
  border-radius: 9px 9px 5px 5px;
  box-shadow: inset 0 0 12px #000, 0 0 0 1px #070706;
}
.journal-trim {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  background: url('../images/dragonui/questlog.png') no-repeat;
}
.trim-top-left { top: -1px; left: -1px; background-position: -1px -39px; }
.trim-top-right { top: -1px; right: -1px; background-position: -84px -39px; }
.trim-bottom-left { bottom: -1px; left: -1px; background-position: -1px -122px; }
.trim-bottom-right { bottom: -1px; right: -1px; background-position: -84px -122px; }
.journal-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid #78603766; }
.journal-heading h2 { margin: 0; color: #ffdb3c; font: 18px var(--serif); text-shadow: 1px 2px #000; }
.journal-heading > span { color: #99917f; font-size: 10px; }
.journal-intro { margin: 15px 0 11px; color: #b6ae99; font: 13px var(--serif); }
.journal-entry { display: flex; gap: 11px; padding: 14px 4px; text-decoration: none; border-bottom: 1px solid #93816026; }
.journal-entry:hover { background: linear-gradient(90deg, #b7953a28, transparent); }
.journal-entry[hidden] { display: none; }
.quest-mark { flex: 0 0 20px; color: #ffd728; font: bold 30px Georgia, serif; text-shadow: 2px 2px 1px #000, 0 0 8px #dca52344; line-height: 1.1; }
.quest-mark-daily { color: #6bb6eb; }
.journal-entry strong { display: block; margin-bottom: 5px; color: #eed171; font: 16px var(--serif); }
.journal-entry small { display: block; color: #bfb9a8; font-size: 11px; line-height: 1.6; }
.journal-footer { margin-top: auto; padding-top: 24px; text-align: center; color: #96876a; font: italic 12px var(--serif); }
.journal-footer > span { padding-right: 5px; color: #b39652; }
.journal-empty { color: #bfb9a8; font-size: 13px; }

/* Parchment content and recessed stone panels share the window's material palette. */
.section { padding-block: 65px; }
.section-kicker { margin-bottom: 32px; padding: 10px 18px; color: #ffda32; background: #35312c url('../images/dragonui/uiframemetalhorizontal2x.png') 0 -1px / 32px 128px repeat-x; border: 2px ridge #777367; font: 15px var(--serif); letter-spacing: .02em; }
.intro-grid, .join-grid { padding: 35px 42px; gap: 50px; border: 3px ridge #8d713f; background: url('../images/dragonui/questbg-parchment.png') 0 0 / 341.34% 249.76% no-repeat; }
.intro h2, .join h2, .intro h2 i, .join h2 i { color: #442b15; text-shadow: 0 1px #f9dfa277; }
.intro-copy, .join-grid > div:last-child, .join small, .join small a { color: #49331f; }
.intro .eyebrow, .join .eyebrow, .intro .text-link { color: #654216; }
.features, .docs-section-ink, .rally-loop, .docs-section-code { background: #131310 url('../images/dragonui/ui-background-marble.png'); border-block: 4px ridge #555147; }
.feature-card, .feature-card.featured, .module-card, .module-card-featured,
.docs-section-ink .module-card, .docs-section-ink .module-card:nth-child(2n),
.docs-section-code .module-card, .command-channel-grid article, .command-reference-columns section {
  border: 3px ridge #77705d;
  border-radius: 4px;
  background: #12120e url('../images/dragonui/questlog-background.png') left top / 166.78% 100.4% no-repeat;
  box-shadow: inset 0 0 12px #0009, 0 4px 12px #0005;
}
.feature-card.featured, .module-card-featured { border-color: #aa8c40; }
.feature-card:after { content: none; }
.feature-card h3, .module-card h3 { color: #f5d26a; }
.feature-icon { border: 2px ridge #a79a76; background: radial-gradient(at 35% 20%, #675f34, #222312); }
.timeline { padding: 0 20px; border: 3px ridge #77705d; background: var(--hud-panel); }
.timeline-item:last-child { border-bottom: 0; }
.docs-jump a { background: linear-gradient(#423c31, #171613); color: #f7d661; border: 2px ridge #7c7461; border-radius: 2px; }
.command-sidebar nav { padding: 8px; background: var(--hud-panel); border: 3px ridge #77705d; }
.command-sidebar nav a:hover, .command-sidebar nav a.active { color: #ffde3c; background: #a884372b; }
.docs-notice, .doc-callout, .automatic-system, .rally-note { border-color: #887347; background: #28251b; }
.syntax-card { border: 3px ridge #77705d; background: #12130f; box-shadow: inset 0 0 0 2px #090907; }
.site-footer { background: #131310 url('../images/dragonui/ui-background-marble.png'); border-top: 3px ridge #77705d; }

.action-bar {
  position: fixed;
  z-index: 30;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 9px 15px 15px;
  border: 2px ridge #9f9b80;
  border-radius: 9px 9px 14px 14px;
  background: linear-gradient(#374149, #151b21 45%, #252b2e);
  box-shadow: inset 0 0 0 2px #070d14, inset 0 0 0 4px #b2afa02a, 0 8px 35px #000c;
}
.action-bar-crest { width: 35px; color: #a89a74; font-size: 27px; text-align: center; text-shadow: 0 2px #000; }
.action-bar-slots { display: flex; gap: 8px; }
.action-slot { display: grid; justify-items: center; gap: 4px; width: 62px; color: #d7d1c0; text-decoration: none; }
.action-icon {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  color: #d3dfdb;
  background: radial-gradient(at 40% 20%, #486a60, #152e28 75%);
  border: 2px ridge #a0a594;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #080e16, inset 0 0 12px #070c14, 0 2px 5px #0009;
  transition: border-color .15s, box-shadow .15s;
}
.action-icon svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px #000); }
.action-slot-features .action-icon { background: radial-gradient(at 40% 20%, #83493d, #371d20 75%); color: #f0c9a2; }
.action-slot-rally-tascas .action-icon { background: radial-gradient(at 40% 20%, #9b7638, #3b2c17 75%); color: #f4d494; }
.action-slot-addons .action-icon { background: radial-gradient(at 40% 20%, #628870, #27382b 75%); color: #daf3ce; }
.action-slot-docs .action-icon { background: radial-gradient(at 40% 20%, #786545, #302b22 75%); color: #ecd6a9; }
.action-slot-commands .action-icon { background: radial-gradient(at 40% 20%, #79578e, #2e1f45 75%); color: #d7b8ec; }
.action-slot-join .action-icon { background: radial-gradient(at 40% 20%, #4287a0, #172f45 75%); color: #b8edff; }
.action-label { white-space: nowrap; font-size: 9px; text-shadow: 0 2px 2px #000; }
.action-slot:hover, .action-slot[aria-current], .action-slot:focus-visible { color: #ffe3a0; }
.action-slot:hover .action-icon, .action-slot[aria-current] .action-icon, .action-slot:focus-visible .action-icon {
  border-color: #f3d489;
  box-shadow: inset 0 0 0 1px #e7c57488, 0 0 12px #e2ba6866;
}
.exploration-track { position: absolute; bottom: 5px; left: 20px; right: 20px; height: 4px; background: #070d15; border: 1px solid #666550; }
.exploration-track span { display: block; width: 100%; height: 100%; background: #659dc6; box-shadow: 0 0 5px #74b7e8; transform: scaleX(0); transform-origin: left; }


.action-bar { background: linear-gradient(#48433a, #1b1a16 45%, #343027); border-color: #a39c87; }

.addons-preview { padding: 88px 0; background: #171510 url('../images/dragonui/ui-background-marble.png'); border-block: 4px ridge #605849; }
.addons-preview-inner { display: grid; grid-template-columns: 1fr .8fr; gap: 70px; align-items: center; }
.addons-preview h2 { margin: 0; color: #f2e4bf; font: bold clamp(42px, 5vw, 68px)/1.04 var(--serif); }
.addons-preview h2 i { color: #f1d369; font-style: normal; }
.addons-preview-heading > p:not(.eyebrow) { max-width: 470px; margin: 22px 0; color: #c2baaa; }
.addons-preview-list { padding: 18px 28px; border: 3px ridge #7a705a; background: #0b0b08 url('../images/dragonui/questlog-background.png') left top / 166.78% 100.4% no-repeat; }
.addons-preview-list > div { display: flex; gap: 17px; padding: 18px 0; border-bottom: 1px solid #a08a583d; }
.addons-preview-list > div:last-child { border-bottom: 0; }
.addons-preview-list > div > span { color: #edc241; font-size: 22px; }
.addons-preview-list strong { display: block; color: #f2d686; font: 20px var(--serif); }
.addons-preview-list small { display: block; margin-top: 5px; color: #b8b1a4; font-size: 12px; }

.addons-hero { background: linear-gradient(90deg, #15130fe8, #17130fc8), url('../images/dragonui/questbg-parchment.png') left top / 341.34% 249.76%; }
.addon-notice { align-items: flex-start; }
.addon-section { padding: 95px 0; }
.addon-section:nth-of-type(2n) { background: #171510 url('../images/dragonui/ui-background-marble.png'); }
.addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.addon-card { min-height: 215px; padding: 23px; border: 3px ridge #77705d; border-radius: 4px; background: #12120e url('../images/dragonui/questlog-background.png') left top / 166.78% 100.4% no-repeat; box-shadow: inset 0 0 12px #0009, 0 4px 12px #0005; }
.addon-card-mark { color: #f3cd55; font-size: 17px; }
.addon-card h3 { margin: 10px 0; color: #f5d77f; font: 24px var(--serif); }
.addon-card > p { margin: 0; color: #c6beae; font-size: 13px; line-height: 1.7; }
.addon-card .addon-requirement { margin-top: 14px; padding-top: 11px; border-top: 1px solid #9e84513e; color: #aebdc0; font-size: 11px; }
.addon-bottom { display: flex; align-items: center; gap: 28px; padding-block: 70px; }
.addon-bottom .text-link { color: #f5d77f; }
@media (max-width: 1240px) {
  .site-nav { top: 72px; max-height: calc(100dvh - 72px); background: #1c1b17; }
  .site-nav a { padding: 14px 4px; }
  .window-toolbar, .journal-layout { grid-template-columns: minmax(0, 1fr) 295px; }
  .window-tabs a { padding-inline: 16px; font-size: 14px; }
  .window-tabs { padding-left: 35px; }
  .journal-panel { padding-inline: 15px; }
  .hero-story { padding-inline: 32px; }
}
@media (max-width: 1000px) {
  .hero.game-window { width: calc(100% - 32px); margin-top: 104px; }
  .window-toolbar, .journal-layout { grid-template-columns: minmax(0, 1fr) 265px; }
  .window-tabs { padding-left: 0; }
  .window-tabs a { flex: 1; padding-inline: 10px; font-size: 12px; }
  .hero-story { padding-inline: 24px; }
  .hero h1 { font-size: 46px; }
  .journal-heading h2 { font-size: 16px; }
  .journal-entry strong { font-size: 15px; }
}
@media (max-width: 760px) {
  .brand-logo { width: 90px; }
  .hero.game-window { display: grid; width: calc(100% - 24px); padding: 0 5px 5px; }
  .window-titlebar { grid-row: 1; min-height: 42px; padding: 8px 38px 8px 51px; }
  .window-titlebar h2 { font-size: 15px; }
  .window-portrait { width: 55px; height: 55px; top: -9px; left: -7px; border-width: 3px; }
  .window-portrait svg { width: 30px; height: 30px; }
  .window-toolbar, .journal-layout { display: contents; }
  .window-tabs { grid-row: 2; margin-block: 7px; }
  .window-tabs a { padding: 10px 8px; font-size: 13px; }
  .journal-search { grid-row: 4; margin: 8px 2px; min-height: 34px; }
  .realm-canvas { grid-row: 3; min-height: 510px; }
  .hero-story { padding: 55px 27px 30px; }
  .hero h1 { font-size: clamp(40px, 7vw, 52px); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .map-zone { margin-top: 30px; }
  .map-zone > span { font-size: 22px; }
  .journal-panel { grid-row: 5; padding: 20px; }
  .journal-heading h2 { font-size: 20px; }
  .journal-entry strong { font-size: 17px; }
  .journal-entry small { font-size: 12px; }
  .intro-grid, .join-grid { padding: 30px 24px; gap: 28px; }
  .action-bar { padding-inline: 7px; }
  .action-bar-crest { width: 24px; font-size: 22px; }
  .action-bar-slots { gap: 3px; }
  .action-slot { width: 50px; }
  .action-label { font-size: 8px; }
  .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addons-preview-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 479px) {
  body { padding-bottom: 110px; }
  .window-titlebar h2 { font-size: 13px; }
  .window-tabs a { font-size: 11px; padding-inline: 6px; gap: 5px; }
  .hero-story { padding-inline: 20px; }
  .hero h1 { font-size: 42px; }
  .hero-copy { font-size: 13px; }
  .hero-actions .button { width: 100%; padding-inline: 14px; font-size: 14px; }
  .map-caption { padding-inline: 11px 40px; font-size: 10px; }
  .map-corner { width: 48px; height: 48px; font-size: 24px; border-width: 3px; }
  .intro-grid, .join-grid { padding: 27px 20px; }
  .action-bar { width: calc(100% - 20px); max-width: 370px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .action-bar-crest { display: none; }
  .action-bar-slots { width: 100%; gap: 2px; }
  .action-slot { width: auto; flex: 1; min-width: 0; }
  .action-icon { width: 36px; height: 36px; }
  .action-icon svg { width: 22px; height: 22px; }
  .action-label { font-size: 7px; }
  .addons-preview { padding: 65px 0; }
  .addons-preview-list { padding: 14px 20px; }
  .addon-grid { grid-template-columns: 1fr; }
  .addon-card { min-height: 0; }
  .addon-section { padding: 65px 0; }
  .addon-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .action-icon { transition: none; }
}