:root {
  color-scheme: dark;
  --ink: #f4effa;
  --muted: #aaa6c6;
  --line: #33315a;
  --paper: #191b36;
  --page: #0d1124;
  --gold: #ffb347;
  --sunset: linear-gradient(135deg, #ffc46b 0%, #ff8f4a 45%, #d9486f 100%);
  --ok: #2eae4e;
  --err: #f15b4c;
}

* { box-sizing: border-box; }

html { background: #1a1230; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% -10%, #2a2450 0%, transparent 60%), linear-gradient(180deg, #121633 0%, #0d1124 45%, #1a1230 100%), #1a1230;
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--gold); }

main { flex: 1; width: min(1040px, 100% - 32px); margin: 0 auto; padding: clamp(14px, 3vh, 32px) 0 clamp(8px, 2vh, 20px); }

/* Home */
main > .hero { text-align: center; }
.hero h1.crest { margin: 0 auto 6px; line-height: 0; }
.hero .crest img { height: clamp(110px, 19vh, 220px); width: auto; max-width: 80vw; object-fit: contain; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .55)); }

/* Animated scene banner; the logo and name sit over the seam in the middle. */
.banner { position: relative; height: clamp(140px, 25vh, 300px); margin-bottom: clamp(10px, 1.8vh, 18px); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); background: #1a1230 url("/img/hero.webp") center / cover; }
.banner-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(13, 17, 36, .55)); pointer-events: none; }
.banner .crest { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; margin: 0; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); padding: clamp(8px, 1.6vh, 16px) clamp(18px, 2.6vw, 34px) clamp(8px, 1.6vh, 16px) clamp(10px, 1.4vw, 18px); line-height: 1; white-space: nowrap; background: radial-gradient(closest-side, rgba(10, 10, 22, .78), rgba(10, 10, 22, .5) 65%, rgba(10, 10, 22, 0)); }
.banner .crest img { height: clamp(74px, 14vh, 168px); width: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .7)); }
.wordmark { display: flex; flex-direction: column; align-items: stretch; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-weight: 700; font-size: clamp(24px, min(5.2vh, 6.6vw), 60px); line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.wm-main { background: linear-gradient(180deg, #fff4cc 0%, #ffd27a 38%, #f5a623 62%, #b8701c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #4a2a08) drop-shadow(0 6px 14px rgba(0, 0, 0, .85)); }
.wordmark small { display: flex; align-items: center; gap: .7em; margin-top: .5em; font-size: .34em; letter-spacing: .55em; color: #f4effa; text-shadow: 0 2px 8px rgba(0, 0, 0, .95); }
.wordmark small::before, .wordmark small::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #f5a623); }
.wordmark small::after { background: linear-gradient(270deg, transparent, #f5a623); }

/* Alliance and Horde art down the empty sides of the home page on wide screens.
   Faded toward the page, the top and the bottom, and tinted dusk so they melt into the background. */
@media (min-width: 1280px) {
  body.home::before, body.home::after {
    content: ""; position: fixed; top: 0; bottom: 0; z-index: 0; pointer-events: none;
    width: calc((100vw - 1040px) / 2 + 60px);
    background-repeat: no-repeat; background-size: 100% 100%, cover;
    opacity: .82; filter: saturate(.85) brightness(.9);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  body.home::before {
    left: 0;
    background-image: linear-gradient(90deg, rgba(26, 18, 48, 0) 35%, rgba(26, 18, 48, .7)), url("/img/side-alliance.webp");
    background-position: 0 0, right top;
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 96%), linear-gradient(180deg, transparent, #000 12%, #000 72%, transparent);
    mask-image: linear-gradient(90deg, #000 40%, transparent 96%), linear-gradient(180deg, transparent, #000 12%, #000 72%, transparent);
  }
  body.home::after {
    right: 0;
    background-image: linear-gradient(270deg, rgba(26, 18, 48, 0) 35%, rgba(26, 18, 48, .7)), url("/img/side-horde.webp");
    background-position: 0 0, left top;
    -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent 96%), linear-gradient(180deg, transparent, #000 12%, #000 72%, transparent);
    mask-image: linear-gradient(270deg, #000 40%, transparent 96%), linear-gradient(180deg, transparent, #000 12%, #000 72%, transparent);
  }
}

/* Home page content sits above the side art. */
@media (min-width: 1280px) {
  main, .mini-foot { position: relative; z-index: 1; }
}

/* One class figure per inner page, set into the text so paragraphs wrap around it. */
.doc-art {
  float: right; width: clamp(120px, 30%, 230px); height: auto;
  margin: 4px -12px 12px 18px;
  shape-outside: url("/img/class-warrior.webp"); shape-image-threshold: .2; shape-margin: 14px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6));
}
.page-privacy .doc-art { shape-outside: url("/img/class-priest.webp"); }
.doc-art.left { float: left; margin: 18px 18px 12px -12px; }
.doc .clear { clear: both; }
.doc h2 { clear: none; }
.lost { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 48px); min-height: 80vh; text-align: left; }
.lost-art { width: clamp(140px, 26vw, 300px); height: auto; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .65)); }
.lost .logo { width: 110px; }
@media (max-width: 560px) {
  .lost { flex-direction: column; text-align: center; min-height: 0; padding-top: 24px; }
  .lost-art { width: 150px; }
}
.logo { width: 220px; height: auto; }
.hero h1 { margin: 12px 0 6px; }
.hero .lede { margin: 0 auto; max-width: 760px; text-wrap: balance; }
h1 { margin: 16px 0 8px; font-size: clamp(28px, 5vw, 38px); line-height: 1.15; }
.lede { margin: 0; max-width: 520px; color: var(--muted); }
.free { margin: clamp(6px, 1.2vh, 14px) 0 0; }
.free strong { color: var(--gold); }
.small { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

/* Upload left, addon + MPR right on wide screens; stacked on small ones. */
.cards { display: grid; gap: clamp(14px, 2.4vh, 22px); margin-top: clamp(14px, 2.6vh, 26px); }
.side { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 22px); }
.side .install-card { flex: 1; }
@media (min-width: 760px) {
  .cards { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* Install card: same idea as mprscore.com/info, in Open Road colors. */
.install-card {
  padding: clamp(14px, 2.2vh, 20px) 20px;
  background: radial-gradient(circle at 0 0, rgba(255, 143, 74, .16), transparent 55%), linear-gradient(180deg, #221c3c, #171a33);
  border: 1px solid rgba(255, 143, 74, .35);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
}
.install-head { display: flex; gap: 12px; align-items: center; }
.install-head img { flex: none; width: 48px; height: 48px; }
.install-head h2 { margin: 0 0 2px; font-size: clamp(19px, 2.4vh, 22px); line-height: 1.2; }
.install-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.install-steps { flex: 1; list-style: none; margin: clamp(10px, 1.8vh, 16px) 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 8px; }
.install-steps li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: clamp(7px, 1.2vh, 10px) 12px; background: rgba(13, 17, 36, .55); border: 1px solid #36305a; border-radius: 10px; }
.step-txt { display: flex; flex-direction: column; line-height: 1.35; }
.step-txt strong { font-size: 15px; }
.step-txt > span { color: var(--muted); font-size: 13.5px; }
.step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sunset); color: #fff; font-weight: 700; font-size: 14px; }
.step-art { height: 36px; width: auto; }
.install-card .curse-cta { justify-content: center; padding: 8px 14px; font-size: 16px; }
.dl {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 6px; border-radius: 8px;
  font-weight: 700; text-decoration: none; color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dl:hover { transform: translateY(-1px); }
.dl img { width: 26px; height: 26px; }
.dl.companion-cta {
  color: #fff;
  background: var(--sunset);
  border: 1px solid rgba(255, 210, 170, .5);
  box-shadow: 0 0 0 1px rgba(30, 10, 30, .4), 0 4px 18px rgba(255, 120, 80, .3);
}
.dl.companion-cta:hover { box-shadow: 0 0 0 1px rgba(30, 10, 30, .4), 0 6px 24px rgba(255, 120, 80, .5); }
.dl.curse-cta {
  background: linear-gradient(135deg, #ff7a3d 0%, #f16436 45%, #c94418 100%);
  border: 1px solid rgba(255, 196, 168, .45);
  box-shadow: 0 0 0 1px rgba(30, 10, 4, .4), 0 4px 18px rgba(241, 100, 54, .35);
}
.dl.curse-cta:hover { box-shadow: 0 0 0 1px rgba(30, 10, 4, .4), 0 6px 24px rgba(241, 100, 54, .55); }
.curse-tile { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #161a30; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.curse-tile img { width: 20px; height: auto; }
.companion-cta .curse-tile img { width: 22px; height: 22px; }

.path { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; background: var(--page); border: 1px solid var(--line); padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.how .path { white-space: normal; word-break: break-all; }

.more { margin: 4px 0; color: var(--muted); }
.more summary { cursor: pointer; padding: 6px 0; color: var(--gold); font-size: 14px; }
.more p { margin: 8px 0; }
.how { margin: 8px 0 16px; padding-left: 22px; }
.how li { margin-bottom: 8px; }

.sister {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none;
}
.sister:hover { border-color: #8b5cf6; }
.sister img { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.sister span { display: flex; flex-direction: column; }
.sister small { color: var(--muted); font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border-radius: 8px; border: 1px solid transparent;
  background: var(--sunset); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; font-size: 15px;
}
.btn:hover { filter: brightness(1.1); }
.btn.alt { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.alt:hover { border-color: var(--gold); }

/* Inner pages */
.mini-top { width: min(720px, 100% - 32px); margin: 0 auto; padding: 18px 0 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; text-decoration: none; }
.brand img { width: 30px; height: 30px; }

.doc { max-width: 720px; }
.doc h1 { margin-top: 8px; }
.doc h2 { margin-top: 28px; font-size: 19px; }
.doc .updated { color: var(--muted); margin-top: 0; }
.doc li { margin-bottom: 6px; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-top: 20px; }
.status { min-height: 1.5em; margin: 10px 0 0; color: var(--muted); }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }

/* Upload: the main action on the home page. */
.upload-card {
  padding: clamp(12px, 2vh, 18px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.drop {
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, .9vh, 8px);
  border: 2px dashed #4b4778; border-radius: 12px; padding: clamp(14px, 3vh, 40px) 16px;
  text-align: center; cursor: pointer; background: var(--page);
  transition: border-color .15s ease, background .15s ease;
}
.drop:hover, .drop.over { border-color: var(--gold); background: #1a1734; }
.drop.over { transform: scale(1.01); }
.drop-icon { height: clamp(52px, 8.5vh, 84px); width: auto; filter: drop-shadow(0 4px 14px rgba(255, 170, 60, .25)); transition: transform .2s ease; }
.drop:hover .drop-icon, .drop.over .drop-icon { transform: translateY(-3px); }
.drop strong { font-size: clamp(17px, 2.4vh, 20px); }
.drop > span { color: var(--muted); font-size: 14px; }
.drop .btn { color: #fff; margin-top: 2px; }
.drop.busy { pointer-events: none; opacity: .7; }
.upload-card .consent { margin: clamp(10px, 1.6vh, 14px) 0 0; font-size: 14px; }
.upload-card .status { text-align: center; font-weight: 600; }
.upload-card .status:empty { display: none; }
.upload-card .stats { text-align: center; margin: 0; }
.upload-card .more { margin-top: 6px; }
.or-auto { margin: clamp(10px, 1.8vh, 16px) 0 0; text-align: center; }
.or-auto p { margin: clamp(6px, 1.2vh, 10px) auto; max-width: 520px; color: var(--muted); font-size: 14.5px; }
.or-auto .small { margin: 8px 0 0; font-size: 13px; }
.or-auto p strong { color: var(--ink); }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; color: var(--muted); }
.consent input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--gold); }
code { background: var(--page); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; font-size: 0.88em; word-break: break-all; }

/* Footer */
.mini-foot { padding: clamp(10px, 2vh, 20px) 16px clamp(14px, 2.6vh, 28px); text-align: center; font-size: 13px; color: var(--muted); }
.mini-foot a { color: var(--muted); text-decoration: none; margin: 0 8px; }
.mini-foot a:hover { color: var(--ink); }
.mini-foot p { margin: 10px 0 0; }

@media (min-width: 900px) {
  .mini-foot p { display: inline; margin-left: 14px; }
}