/* 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-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; }

.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; }
}