/* Downloads page (downloads/index.html, js/downloads.js): the launcher download card over the Act III painting and
   the How to play steps on iron panels. */
.dl-page {
  position: relative; isolation: isolate; overflow: hidden; min-height: 62vh;
  background:
    linear-gradient(180deg, rgba(10, 3, 2, 0.45), rgba(10, 3, 2, 0.7) 40%, rgba(10, 3, 2, 0.92) 70%, var(--bg) 96%),
    url('../img/theme/client/loading-act3-arreat-hellfire.webp') center top / cover no-repeat;
}
.dl { position: relative; z-index: 2; padding: 56px 20px 100px; max-width: 980px; }
.dl-head { text-align: center; }
.dl-head h1 { font: clamp(42px, 6vw, 64px)/1.1 var(--title); letter-spacing: 0.05em; margin: 0 0 12px; display: inline-block; }
.dl-head h1.dl-logo { display: block; margin: -16px auto 6px; line-height: 0; }
.dl-logo img {
  display: block; width: min(560px, 86vw); height: auto; margin: 0 auto;
  filter: drop-shadow(0 0 26px rgba(255, 50, 10, 0.4)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.9));
}
.dl-latest { margin: 0 auto; max-width: 680px; color: #e2cfb4; font-size: 16px; text-shadow: 0 2px 8px #000; }
.dl-latest span { font: 12px/1 var(--title); letter-spacing: 0.16em; text-transform: uppercase; color: #ffb27a; margin-right: 4px; }
.dl-latest a { white-space: nowrap; }

.dl-card {
  position: relative; margin: 104px auto 0; max-width: 640px; padding: 26px 28px 24px; text-align: center;
  background: var(--el-panel-bg); box-shadow: var(--el-frame), 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 60, 10, 0.12);
}
.dl-crest { display: block; width: 190px; height: auto; margin: -82px auto 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 18px rgba(255, 70, 10, 0.35)); }
.dl-card h2 { font: 30px/1.1 var(--title); letter-spacing: 0.08em; color: var(--gold-hi); margin: 4px 0 6px; text-shadow: 0 0 14px rgba(255, 70, 10, 0.5), 0 2px 2px #000; }
.dl-meta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 26px; margin: 0; color: #e7c79a; font-size: 16px; letter-spacing: 0.02em; white-space: pre-wrap; }
.dl-card .btn.play { --w: 400px; max-width: 100%; margin: 6px auto 0; }
.dl-notes { margin: 2px auto 14px; max-width: 520px; color: #d9c6ac; font-style: italic; }
.dl-hash { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 10px; max-width: 100%; }
.dl-hash span { font: 11px/1 var(--title); letter-spacing: 0.16em; color: var(--ink-dim); flex: none; }
.dl-hash code {
  font: 11px/1.3 Consolas, 'Courier New', monospace; color: #c7b49a; background: rgba(0, 0, 0, 0.45); padding: 5px 8px;
  box-shadow: inset 0 0 0 1px #3a2418; overflow-wrap: anywhere; user-select: all; min-width: 0; text-align: left;
}
.dl-hash .mbtn { padding: 2px 6px; font-size: 11px; flex: none; }
.dl-fallback { margin: 10px auto 12px; max-width: 520px; font-size: 15px; overflow-wrap: anywhere; }
.dl-sys { margin: 8px 0 0; font-size: 14px; }

/* Steam Deck & Linux card (second card under the Windows one, no crest) */
.dl-linux { margin-top: 30px; }
.dl-linux h2 { font-size: 26px; }
.dl-tag {
  display: inline-block; margin: 0 0 6px; padding: 4px 12px; font: 12px/1 var(--title); letter-spacing: 0.16em; text-transform: uppercase;
  color: #ffd9a8; background: rgba(120, 28, 10, 0.6); box-shadow: 0 0 0 1px #8a5a24, 0 0 12px rgba(255, 70, 10, 0.35);
}
.dl-lsteps { list-style: decimal; text-align: left; margin: 14px auto 0; padding: 0 0 0 26px; max-width: 520px; color: #dccab2; font-size: 16px; }
.dl-lsteps li { margin: 0 0 6px; padding-left: 4px; }
.dl-lsteps b { color: var(--gold-hi); font-weight: normal; font-family: var(--title); letter-spacing: 0.03em; }
.dl-lsteps code, .dl-linux .dl-sys code { font: 0.9em Consolas, 'Courier New', monospace; color: #f0d2a4; overflow-wrap: anywhere; }
.dl-linux .dl-sys { max-width: 520px; margin: 12px auto 0; }
.dl-linux .dl-sys em { color: #ffcf8f; font-style: normal; }
.dl-linux.is-mine { box-shadow: var(--el-frame), 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 70px rgba(255, 110, 20, 0.4); }

.dl-h2 { display: table; margin: 64px auto 22px; font: clamp(30px, 4vw, 40px)/1.1 var(--title); letter-spacing: 0.06em; }
.dl-steps { list-style: none; counter-reset: dl; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 12px; }
.dl-steps li {
  counter-increment: dl; position: relative; padding: 16px 20px 16px 76px; background: var(--el-panel-bg); box-shadow: var(--el-frame);
  color: #dccab2; font-size: 17px;
}
.dl-steps li::before {
  content: counter(dl); position: absolute; left: 16px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 24px/1 var(--title); color: var(--gold-hi);
  background: radial-gradient(circle at 50% 40%, #7a1a0a, #2a0705 70%); box-shadow: 0 0 0 2px #8a5a24, 0 0 0 4px #150a07, 0 0 14px rgba(255, 70, 10, 0.5);
  text-shadow: 0 0 8px rgba(255, 120, 40, 0.8), 0 1px 1px #000;
}
.dl-steps b { color: var(--gold-hi); font-weight: normal; font-family: var(--title); letter-spacing: 0.04em; }
.dl-steps code, .dl-extra code { font: 0.9em Consolas, 'Courier New', monospace; color: #f0d2a4; }
.dl-steps em, .dl-extra em { color: #ffcf8f; font-style: normal; }

.dl-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; margin: 26px auto 0; }
.dl-extra > div { padding: 16px 20px; background: var(--el-panel-bg); box-shadow: var(--el-frame); }
.dl-extra h3 { font: 19px/1.2 var(--title); letter-spacing: 0.06em; color: var(--gold-hi); margin: 0 0 6px; }
.dl-extra p { margin: 0; color: #c9b8a2; font-size: 16px; }

@media (max-width: 760px) {
  .dl { padding-top: 40px; }
  .dl-card { padding: 22px 16px 20px; margin-top: 96px; }
  .dl-card .btn.play { --w: 84vw; }
  .dl-hash { flex-wrap: wrap; }
  .dl-steps li { padding: 14px 14px 14px 64px; font-size: 16px; }
  .dl-steps li::before { left: 12px; width: 38px; height: 38px; margin-top: -19px; font-size: 20px; }
  .dl-extra { grid-template-columns: 1fr; }
}

/* ---- Download page, Elite Level HUD theme (skill elite-level-hud-theme; tokens from the launcher/overlay palette) ----
   Tokens live on .dl-page so the rest of the site keeps the hellfire look. Glass (tint + backdrop blur) only on the two
   big download panels; the steps and notes are tint only. */
@font-face { font-family: 'Crimson Pro'; src: url('../fonts/crimson-pro-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
.dl-page {
  --eld-ground: #0D0A09; --eld-line: #3A2F27; --eld-edge: rgba(201, 180, 138, 0.20); --eld-head: #D6C6AE; --eld-tan: #C9B48A;
  --eld-cream: #E6DCD2; --eld-cream-soft: #CDBFAE; --eld-muted: #9C8F84; --eld-ember: #D8481C; --eld-ember-light: #FF8A4C;
  --eld-serif: 'Crimson Pro', Georgia, 'Palatino Linotype', serif; --eld-sans: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --eld-tint: linear-gradient(160deg, rgba(24, 18, 16, 0.58), rgba(10, 7, 6, 0.74));
  --eld-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.3);
  background:
    radial-gradient(ellipse 60% 40% at 50% 38%, rgba(216, 72, 28, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(13, 10, 9, 0.6), rgba(13, 10, 9, 0.82) 45%, rgba(13, 10, 9, 0.95) 75%, var(--eld-ground) 96%),
    url('../img/theme/client/loading-act3-arreat-hellfire.webp') center top / cover no-repeat;
  font-family: var(--eld-sans);
}
.dl-page .dl-latest { color: var(--eld-cream-soft); font-family: var(--eld-sans); }
.dl-page .dl-latest span { color: var(--eld-ember-light); font-family: var(--eld-serif); font-weight: 600; letter-spacing: 0.16em; }
.dl-page .eyebrow { font-family: var(--eld-serif); font-weight: 600; letter-spacing: 0.2em; color: var(--eld-tan); }
.dl-page .lead { font-family: var(--eld-sans); color: var(--eld-cream-soft); }

.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 44px auto 0; align-items: stretch; }
.dl-page .dl-card, .dl-page .dl-linux {
  position: relative; margin: 0; max-width: none; padding: 24px 24px 22px; text-align: center; display: flex; flex-direction: column; align-items: center;
  background: var(--eld-tint); border: 1px solid var(--eld-edge); border-radius: 3px; box-shadow: var(--eld-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.dl-page .dl-card::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--eld-ember), transparent); opacity: 0.7; }
.dl-page .dl-card h2 {
  font: 600 28px/1.1 var(--eld-serif); text-transform: uppercase; letter-spacing: 0.1em; color: var(--eld-head); margin: 8px 0 8px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
}
.dl-page .dl-meta { color: var(--eld-cream); font: 600 15px/1.3 var(--eld-sans); min-height: 24px; margin: 0 0 14px; white-space: normal; flex-wrap: wrap; }
.dl-tag {
  display: inline-block; margin: 0; padding: 4px 10px; font: 600 11px/1 var(--eld-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--eld-tan); border: 1px solid var(--eld-edge); border-radius: 8px; background: rgba(201, 180, 138, 0.06);
}
.dl-tag-beta { color: #E8B84A; border-color: rgba(232, 184, 74, 0.45); background: rgba(232, 184, 74, 0.08); }
.dl-dl {
  display: block; width: 100%; max-width: 320px; box-sizing: border-box; padding: 14px 20px; text-align: center; text-decoration: none;
  font: 600 20px/1.1 var(--eld-serif); letter-spacing: 0.1em; text-transform: uppercase; color: #FAF7F0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, var(--eld-ember-light) -80%, var(--eld-ember) 45%, #A8340F); border: 1px solid #FF8A4C66; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.25), 0 4px 14px rgba(216, 72, 28, 0.3); transition: filter 0.12s, transform 0.08s;
}
.dl-dl:hover { filter: brightness(1.12); }
.dl-dl:active { transform: translateY(1px); filter: brightness(0.95); }
.dl-dl:focus-visible { outline: 2px solid var(--eld-tan); outline-offset: 3px; }
.dl-page .dl-notes { margin: 12px auto 0; max-width: none; color: var(--eld-cream-soft); font: italic 14px/1.4 var(--eld-sans); }
.dl-page .dl-fallback { font-size: 13px; color: var(--eld-muted); max-width: none; }
.dl-page .dl-sys { margin: auto 0 0; padding-top: 14px; font: 13px/1.45 var(--eld-sans); color: var(--eld-muted); }
.dl-page .dl-sys em { color: var(--eld-cream-soft); font-style: normal; }
.dl-lsteps { list-style: none; counter-reset: ls; text-align: left; margin: 16px 0 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.dl-lsteps li { counter-increment: ls; position: relative; padding: 0 0 0 34px; color: var(--eld-cream); font: 14px/1.4 var(--eld-sans); }
.dl-lsteps li::before {
  content: counter(ls); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--eld-serif); color: var(--eld-ember-light); border: 1px solid rgba(216, 72, 28, 0.55); background: rgba(216, 72, 28, 0.12);
}
.dl-lsteps b { color: var(--eld-head); font: 600 14px/1.4 var(--eld-sans); letter-spacing: 0; text-transform: none; }
.dl-lsteps code { font: 0.9em Consolas, 'Courier New', monospace; color: var(--eld-tan); }
.dl-linux.is-mine { border-color: rgba(216, 72, 28, 0.7); box-shadow: var(--eld-shadow), 0 0 36px rgba(216, 72, 28, 0.28); }

/* How to play + extras in the same theme (tint only, no blur) */
.dl-page .dl-h2 { font: 600 clamp(28px, 4vw, 38px)/1.1 var(--eld-serif); text-transform: uppercase; letter-spacing: 0.12em; color: var(--eld-head); background: none; -webkit-text-fill-color: currentColor; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); filter: none; }
.dl-page .dl-steps li, .dl-page .dl-extra > div { background: var(--eld-tint); border: 1px solid var(--eld-edge); border-radius: 3px; box-shadow: none; color: var(--eld-cream); font-family: var(--eld-sans); font-size: 15.5px; }
.dl-page .dl-steps li::before { font-family: var(--eld-serif); color: var(--eld-ember-light); background: rgba(216, 72, 28, 0.12); box-shadow: 0 0 0 1px rgba(216, 72, 28, 0.55); text-shadow: none; }
.dl-page .dl-steps b, .dl-page .dl-extra h3 { font-family: var(--eld-serif); font-weight: 600; letter-spacing: 0.06em; color: var(--eld-head); }
.dl-page .dl-extra h3 { font-size: 18px; text-transform: uppercase; }
.dl-page .dl-extra p { color: var(--eld-cream-soft); font-size: 15px; }
.dl-page .dl-steps code, .dl-page .dl-extra code { color: var(--eld-tan); }
.dl-page .dl-steps em, .dl-page .dl-extra em { color: var(--eld-ember-light); }
.dl-page .dl-steps a, .dl-page .dl-extra a, .dl-page .dl-latest a { color: var(--eld-ember-light); }

@media (max-width: 760px) {
  .dl-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .dl-page .dl-card, .dl-page .dl-linux { padding: 20px 16px 18px; }
  .dl-dl { max-width: none; }
}