/* ---------- countdown ---------- */
.countdown {
  position: relative; overflow: hidden; text-align: center;
  padding: var(--s6) var(--s5); display: grid; gap: var(--s4); justify-items: center;
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(217, 164, 65, .16), transparent 70%),
    radial-gradient(420px 260px at 90% 100%, rgba(79, 127, 214, .10), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.cd-title { font: 700 clamp(18px, 2.6vw, 24px)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
.cd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); width: min(100%, 560px); }
.cd-cell {
  display: grid; gap: 2px; padding: var(--s4) var(--s2) var(--s3); border-radius: var(--r2);
  background: rgba(8, 10, 16, .55); border: 1px solid rgba(242, 201, 110, .18);
  box-shadow: 0 1px 0 rgba(255, 236, 196, .05) inset, 0 10px 24px rgba(0, 0, 0, .35);
}
.cd-cell b {
  display: block; font: 700 clamp(30px, 6vw, 52px)/1 var(--font-display); color: var(--gold-hi);
  text-shadow: 0 0 24px rgba(242, 201, 110, .25);
}
.cd-cell b.tick { animation: cd-tick .45s var(--spring); }
@keyframes cd-tick { from { transform: translateY(-6px); opacity: .35; } to { transform: none; opacity: 1; } }
.cd-cell span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cd-when { color: var(--muted); font-size: 15px; display: grid; gap: 2px; }
.cd-when span { font-size: 13px; color: var(--faint); }
.countdown.is-live .cd-title { font-size: clamp(24px, 4vw, 36px); color: var(--gold-hi); }
@media (max-width: 420px) { .cd-grid { gap: var(--s2); } .cd-cell { padding: var(--s3) 4px var(--s2); } .cd-cell span { font-size: 10px; letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { .cd-cell b.tick { animation: none; } }
.roadmap-countdown { margin-bottom: var(--s5); }
.page-countdown main .wrap { max-width: 760px; }

/* ---------- roadmap poster ----------
   Laid out in the 800×450 space of Blizzard's roadmap art; --u is one design pixel. */
.rp-scroll { overflow-x: auto; border-radius: var(--r3); box-shadow: var(--shadow-2); }
.rp {
  --u: calc(100cqw / 800);
  --poster-font: 'Marcellus', 'Cinzel', serif;
  position: relative; aspect-ratio: 16 / 9; min-width: 760px; container-type: inline-size;
  overflow: hidden; border-radius: var(--r3); isolation: isolate; color: #fff;
}
.rp-sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #2b3450;
}
.rp-sky::before {
  content: ''; position: absolute; inset: 0;
  background: url("roadmap/backdrop.webp") center 30% / cover no-repeat;
  filter: blur(calc(var(--u) * 3)) saturate(.85) brightness(.92);
  transform: scale(1.08);
}
.rp-sky::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 16, 34, .5) 0%, rgba(18, 16, 34, .14) 32%, rgba(18, 16, 34, .08) 50%, rgba(14, 12, 26, .45) 88%, rgba(14, 12, 26, .7) 100%);
}

.rp-head { position: absolute; inset: 0 0 auto; height: calc(var(--u) * 120); pointer-events: none; }
.rp-years, .rp-word {
  position: absolute; top: calc(var(--u) * 50); font: 400 calc(var(--u) * 25)/1 var(--poster-font);
  letter-spacing: .16em; color: #fff; text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(90, 40, 60, .35);
}
.rp-years { right: calc(var(--u) * 476); }
.rp-word { left: calc(var(--u) * 476); letter-spacing: .32em; }
.rp-word.is-long { font-size: calc(var(--u) * 19); top: calc(var(--u) * 54); letter-spacing: .16em; }
.rp-emblem { position: absolute; left: calc(var(--u) * 342); top: calc(var(--u) * 4); width: calc(var(--u) * 116); height: auto; }

.rp-band {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 230, 190, .18) 0, rgba(255, 230, 190, .18) calc(var(--u) * .8), transparent calc(var(--u) * .8)),
    linear-gradient(180deg, #735a3d 0%, #5f4830 45%, #4a3824 100%);
  box-shadow: 0 calc(var(--u) * 1) 0 rgba(20, 12, 4, .6), 0 calc(var(--u) * -1) 0 rgba(120, 95, 60, .35) inset, 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 10, 20, .35);
}
.rp-band span, .rp-band i {
  position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  font: 400 calc(var(--u) * 9.5)/1 var(--poster-font); letter-spacing: .5em; color: #d8bf93;
}
.rp-band span { padding-left: .5em; }
.rp-band i { font-style: italic; letter-spacing: 0; font-size: calc(var(--u) * 12); color: #a88a62; }

.rb-logo { position: absolute; z-index: 1; max-width: none; pointer-events: none; }
.rp-foot {
  position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 9); text-align: center; pointer-events: none;
  font: 400 calc(var(--u) * 4.6)/1.3 var(--poster-font); letter-spacing: .06em; color: rgba(255, 255, 255, .45);
  padding: 0 calc(var(--u) * 150);
}

/* banners */
.rb {
  position: absolute; z-index: 1; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  font-family: var(--poster-font); -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--spring), filter .25s var(--ease);
}
.rb::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));
}
.rb:hover { transform: translateY(calc(var(--u) * -2)); filter: brightness(1.08); }
.rb:active { transform: translateY(0) scale(.99); }
.rb[aria-selected="true"], .rb:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(255, 228, 160, .95)) drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 200, 110, .5));
}

.rb-top, .rb-bottom { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(var(--u) * 9); }
.rb-top { top: 0; justify-content: center; gap: calc(var(--u) * 2.5); padding: 0 calc(var(--u) * 3) calc(var(--u) * 2); }
.rb-bottom { bottom: 0; justify-content: flex-start; padding-top: calc(var(--u) * 12); }
.rb-title { text-wrap: balance; font-weight: 400; letter-spacing: .03em; text-shadow: 0 0 .4px currentColor; font-size: calc(var(--u) * 12 * var(--fit, 1)); line-height: 1.05; letter-spacing: .01em; }
.rb-date { font-weight: 400; font-size: calc(var(--u) * 7.2 * var(--fit, 1)); letter-spacing: .04em; opacity: .95; }
.rb ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 7.5 * var(--fit, 1)); }
.rb li { text-wrap: balance; font-weight: 400; text-shadow: 0 0 .3px currentColor; font-size: calc(var(--u) * 8.2 * var(--fit, 1)); line-height: 1.2; letter-spacing: .01em; hyphens: manual; }
.rb li small { display: block; font-size: calc(var(--u) * 4.9 * var(--fit, 1)); font-weight: 400; letter-spacing: .04em; margin-top: calc(var(--u) * 1); }
.rb-big { font: 400 calc(var(--u) * 19 * var(--fit, 1))/1 var(--poster-font); letter-spacing: .1em; white-space: nowrap; }

.rb-blue::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, .38) 0, rgba(255, 255, 255, .38) calc(var(--u) * .8), transparent calc(var(--u) * .8)),
    linear-gradient(90deg, rgba(0, 20, 40, .18), transparent 9%, transparent 91%, rgba(0, 20, 40, .18)),
    linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 18%),
    linear-gradient(180deg, #0c95c0 0%, #0b8cb5 34%, rgba(19, 128, 156, .9) 42%, rgba(24, 124, 150, .86) 100%);
}
.rb-blue .rb-bottom { padding-top: calc(var(--u) * 9); }

.rb-parchment { color: #6b563d; }
.rb-parchment::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(60% 40% at 50% 70%, rgba(120, 90, 50, .10), transparent 70%),
    linear-gradient(90deg, rgba(120, 90, 50, .14), transparent 12%, transparent 88%, rgba(120, 90, 50, .14)),
    linear-gradient(180deg, #dcb991 0%, #cfa982 25%, #bc9974 54%, #bfad8c 100%);
}
.rb-parchment .rb-top { justify-content: flex-end; padding-bottom: calc(var(--u) * 5); }
.rb-parchment .rb-big { color: #fbf4e4; text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(95, 65, 30, .55); }

.rb-dark::before, .rb-burnt::before {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 96%, 88% 93%, 80% 98%, 71% 94%, 63% 99%, 55% 95%, 47% 100%, 39% 95%, 30% 98%, 22% 94%, 13% 98%, 6% 94%, 0 97%);
}
.rb-dark::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 30% at 50% 78%, rgba(255, 255, 255, .05), transparent 70%),
    linear-gradient(180deg, #2c2c2c 0%, #1b1b1b 35%, #121212 100%);
}
.rb-burnt::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(90% 12% at 50% 100%, rgba(255, 110, 30, .85), rgba(160, 40, 10, .45) 45%, transparent 75%),
    linear-gradient(180deg, #0e0e0e 0%, #0b0b0b 85%, #2a0f08 100%);
}
.rb-burnt .rb-bottom { padding-top: calc(var(--u) * 12); }

/* ---------- detail panel ---------- */
.rm-panel { margin-top: var(--s4); padding: var(--s5); display: grid; grid-template-columns: 64px 1fr; gap: var(--s4); align-content: start; }
.rm-panel-icon { width: 64px; height: 64px; border-radius: var(--r2); }
.rm-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.rm-panel-head h2 { font-size: clamp(22px, 3vw, 28px); }
.rm-panel-date { color: var(--muted); margin-top: 2px; font-size: 15px; }
.rm-panel ul { margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2) var(--s5); }
@media (min-width: 760px) { .rm-panel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rm-panel li { position: relative; padding-left: var(--s5); line-height: 1.5; }
.rm-panel li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }
.rm-pill { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--muted); }
.rm-pill.is-live { color: #0c1a0d; background: var(--green); border-color: transparent; }
.rm-pill.is-soon { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; }
@media (max-width: 559px) {
  .rm-panel { grid-template-columns: 1fr; padding: var(--s4); }
  .rm-panel-icon { width: 48px; height: 48px; }
}

/* pencil drawings on the Launch and Hardcore banners (as on Blizzard's art), cut to the banner shape */
.rb-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rb-art img { position: absolute; max-width: none; object-fit: cover; }
.rb-parchment .rb-art {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));
}
.rb-parchment .rb-art img {
  mix-blend-mode: multiply; opacity: .42; filter: blur(.45px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
}
.rb-dark .rb-art {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 96%, 88% 93%, 80% 98%, 71% 94%, 63% 99%, 55% 95%, 47% 100%, 39% 95%, 30% 98%, 22% 94%, 13% 98%, 6% 94%, 0 97%);
}
.rb-dark .rb-art img { opacity: .9; filter: blur(.6px); }
.rb-top, .rb-bottom, .rb-logo { z-index: 1; }

/* countdown with the Skyborne-and-hourglass art: figure on the right, standing on the card's
   bottom edge, a warm glow behind the hourglass; the timer takes the rest */
.countdown.has-art {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: center;
  padding: var(--s6) 0 0 var(--s5); min-height: 340px; text-align: center;
  background:
    radial-gradient(260px 220px at 78% 55%, rgba(255, 196, 90, .28), transparent 70%),
    radial-gradient(520px 220px at 35% 0%, rgba(217, 164, 65, .14), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.cd-body { display: grid; gap: var(--s4); justify-items: center; padding-bottom: var(--s6); }
.cd-art {
  grid-column: 2; grid-row: 1; align-self: end; justify-self: center;
  width: 100%; height: auto; max-height: 420px; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)) drop-shadow(0 0 40px rgba(255, 190, 90, .18));
  pointer-events: none; user-select: none;
}
.countdown.has-art .cd-body { grid-column: 1; grid-row: 1; }
@media (max-width: 639px) {
  .countdown.has-art { grid-template-columns: 1fr; padding: var(--s5) var(--s4) 0; }
  .cd-art { grid-row: 2; grid-column: 1; max-height: 240px; width: auto; margin-top: calc(var(--s4) * -1); }
  .cd-body { padding-bottom: 0; }
}

/* hover like the roadmap banners: lift, grow slightly, golden glow */
.cd-art {
  pointer-events: auto; cursor: default; transform-origin: 50% 100%;
  transition: transform .45s var(--spring), filter .3s var(--ease);
}
.cd-art:hover {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)) drop-shadow(0 0 3px rgba(255, 228, 160, .45)) drop-shadow(0 0 11px rgba(255, 200, 110, .28));
}
@media (prefers-reduced-motion: reduce) { .cd-art:hover { transform: none; } }

/* the countdown is a display, not text to copy: no selection highlight, no image drag */
.countdown, .countdown * { -webkit-user-select: none; user-select: none; }
.cd-art { -webkit-user-drag: none; }

.roadmap-compact { display: grid; gap: var(--s3); margin-bottom: var(--s5); }