/* ============================================================================
   Roadmap page (roadmap.html)
   Its own look on purpose: Cinzel + Alegreya Sans over an Ashenvale backdrop,
   moonlit panels with gold edges, a medallion per phase joined by a glowing path.
   Loaded by this page only; the nav and footer keep site.css.
   ========================================================================= */
:root{
  --rm-gold:#d8b46a; --rm-gold-hi:#f4dca0; --rm-gold-dim:#9c7c41;
  --rm-moon:#7fd9d0; --rm-moon-dim:#3e8f88;
  --rm-silver:#b9c3d6; --rm-ink:#efe6d2; --rm-text:#c9ccd3; --rm-muted:#959cab;
  --rm-panel:rgba(10,13,24,.74);
  --rm-head:"Cinzel", "Trajan Pro", Georgia, serif;
  --rm-body:"Alegreya Sans", "IBM Plex Sans", system-ui, sans-serif;
}

/* the footer sits above the fixed backdrop */
main.rm + .footer{ position:relative; z-index:1; }
main.rm{ position:relative; isolation:isolate; font-family:var(--rm-body); color:var(--rm-text); background:#06080d; }

/* the backdrop stays put while the page scrolls (a fixed layer, so it also works on iOS) */
.rm-bg{
  position:fixed; inset:0; z-index:-2;
  background:#06080d url("roadmap/ashenvale-1920.jpg") center 30% / cover no-repeat;
}
.rm-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(127,217,208,.16), transparent 70%),
    radial-gradient(1200px 700px at 50% 120%, rgba(6,8,13,.95), transparent 70%),
    linear-gradient(180deg, rgba(6,8,13,.72) 0%, rgba(6,8,13,.38) 28%, rgba(6,8,13,.62) 62%, rgba(6,8,13,.9) 100%);
}
@media (max-width:760px){ .rm-bg{ background-image:url("roadmap/ashenvale-960.jpg"); } }

/* drifting motes, like the wisps over a moonwell */
.rm-motes{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.rm-motes i{
  position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,255,245,.95), rgba(127,217,208,0) 70%);
  animation:mote 18s linear infinite; opacity:0;
}
.rm-motes i:nth-child(1){ left:8%;  animation-delay:0s;   animation-duration:19s; }
.rm-motes i:nth-child(2){ left:22%; animation-delay:4s;   animation-duration:23s; width:3px; height:3px; }
.rm-motes i:nth-child(3){ left:37%; animation-delay:9s;   animation-duration:17s; }
.rm-motes i:nth-child(4){ left:55%; animation-delay:2s;   animation-duration:25s; width:5px; height:5px; }
.rm-motes i:nth-child(5){ left:68%; animation-delay:12s;  animation-duration:20s; }
.rm-motes i:nth-child(6){ left:81%; animation-delay:6s;   animation-duration:22s; width:3px; height:3px; }
.rm-motes i:nth-child(7){ left:93%; animation-delay:15s;  animation-duration:18s; }
@keyframes mote{
  0%{ transform:translate(0,0); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.6; }
  100%{ transform:translate(40px,-105vh); opacity:0; }
}

/* ---------- hero ---------- */
.rm-hero{ text-align:center; padding:112px 0 64px; }
.rm-orn{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--rm-gold); margin-bottom:22px; }
.rm-orn::before, .rm-orn::after{ content:""; width:90px; height:1px; background:linear-gradient(90deg, transparent, var(--rm-gold-dim)); }
.rm-orn::after{ transform:scaleX(-1); }
.rm-orn span{ font-family:var(--rm-head); font-size:12px; letter-spacing:.42em; text-transform:uppercase; padding-left:.42em; }
.rm-title{
  font-family:var(--rm-head); font-weight:900; letter-spacing:.08em;
  font-size:clamp(46px, 8vw, 96px); line-height:1; margin:0;
  background:linear-gradient(180deg, #fff6dc 0%, #ecd08e 45%, #a9813d 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.75));
}
.rm-sub{ max-width:58ch; margin:22px auto 0; font-size:19px; line-height:1.55; color:var(--rm-ink); text-shadow:0 2px 12px rgba(0,0,0,.8); }
.rm-legend{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:28px; padding:0; list-style:none; }

/* status chips */
.rm-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--rm-head); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
  color:var(--rm-silver); border:1px solid rgba(185,195,214,.35); background:rgba(10,13,24,.6);
}
.rm-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.rm-chip.live{ color:var(--rm-moon); border-color:rgba(127,217,208,.5); background:rgba(20,60,58,.45); }
.rm-chip.live::before{ box-shadow:0 0 0 3px rgba(127,217,208,.22); animation:pulse 2.2s ease-in-out infinite; }
.rm-chip.launch{ color:var(--rm-gold-hi); border-color:rgba(216,180,106,.55); background:rgba(60,44,14,.5); }
/* beta: the same moonlit colour as a live phase, without the pulse until it opens */
.rm-chip.beta{ color:var(--rm-moon); border-color:rgba(127,217,208,.5); background:rgba(20,60,58,.45); }
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px rgba(127,217,208,0); } }

/* ---------- the path ---------- */
/* the phase path gets more width than the site column so five cards fit a row */
.rm-wrap{ max-width:1480px; }
.rm-path{
  --cols:5; --cg:40px;
  display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:100px var(--cg);
  padding:40px 0 20px; margin:0; list-style:none;
}
.rm-card{
  position:relative; display:flex; flex-direction:column;
  padding:52px 18px 20px; border-radius:4px;
  background:linear-gradient(180deg, rgba(16,21,36,.82), var(--rm-panel));
  border:1px solid rgba(216,180,106,.38);
  box-shadow:inset 0 0 0 5px rgba(6,8,13,.55), inset 0 0 0 6px rgba(216,180,106,.14), 0 26px 50px -24px #000;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition:transform .25s ease, border-color .25s ease;
}
.rm-card:hover{ transform:translateY(-4px); border-color:rgba(216,180,106,.7); }
/* gold diamonds on the four corners */
.rm-card::after{
  content:""; position:absolute; inset:-5px; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23d8b46a'/%3E%3Cpath d='M5 2.6L7.4 5L5 7.4L2.6 5Z' fill='%23070912'/%3E%3C/svg%3E") left top / 10px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23d8b46a'/%3E%3Cpath d='M5 2.6L7.4 5L5 7.4L2.6 5Z' fill='%23070912'/%3E%3C/svg%3E") right top / 10px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23d8b46a'/%3E%3Cpath d='M5 2.6L7.4 5L5 7.4L2.6 5Z' fill='%23070912'/%3E%3C/svg%3E") left bottom / 10px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23d8b46a'/%3E%3Cpath d='M5 2.6L7.4 5L5 7.4L2.6 5Z' fill='%23070912'/%3E%3C/svg%3E") right bottom / 10px no-repeat;
}
/* the glowing path joining one medallion to the next in a row */
.rm-card::before{
  content:""; position:absolute; top:0; left:50%; width:calc(100% + 2px + var(--cg)); height:2px; margin-top:-1px; z-index:0;
  background:linear-gradient(90deg, rgba(216,180,106,.85), rgba(216,180,106,.25));
  box-shadow:0 0 10px rgba(216,180,106,.35);
}
.rm-card:last-child::before{ display:none; }
.rm-card.is-live::before{ background:linear-gradient(90deg, var(--rm-moon), rgba(216,180,106,.6)); box-shadow:0 0 12px rgba(127,217,208,.5); }

/* arrows between phases: by default it sits in the gap and points right at the next card */
.rm-arrow{
  position:absolute; z-index:3; width:40px; height:31px; pointer-events:none;
  top:50%; right:calc(var(--cg) / -2 - 20px); margin-top:-15.5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2c8'/%3E%3Cstop offset='.5' stop-color='%23e3be72'/%3E%3Cstop offset='1' stop-color='%23a07a36'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 10.5H19V3L36 15L19 27V19.5H2Z' fill='url(%23g)' stroke='%23070912' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M7 13.4H22V9L30 15L22 21V16.6H7Z' fill='%23070912' opacity='.35'/%3E%3C/svg%3E") center / contain no-repeat;
  filter:drop-shadow(0 0 7px rgba(216,180,106,.55)) drop-shadow(0 3px 5px rgba(0,0,0,.9));
}
.rm-card.is-live .rm-arrow{ filter:drop-shadow(0 0 8px rgba(127,217,208,.7)) drop-shadow(0 3px 5px rgba(0,0,0,.9)); }
/* every row reads left to right. The last card of a row turns the path: a line runs down
   from it, back left under the row, and an arrow drops onto the first card of the next row.
   --back is the distance from a row-end card's centre back to the first column's centre. */
.rm-path{ --back:calc((var(--cols) - 1) * (100% + 2px + var(--cg))); }
.rm-medal{
  position:absolute; top:0; left:50%; z-index:1;
  width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%;
  background:#05070c; padding:4px;
  box-shadow:0 0 0 2px var(--rm-gold), 0 0 0 6px rgba(6,8,13,.85), 0 0 0 7px rgba(216,180,106,.45), 0 10px 26px rgba(0,0,0,.8);
}
.rm-medal img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.rm-card.is-live .rm-medal{ box-shadow:0 0 0 2px var(--rm-moon), 0 0 0 6px rgba(6,8,13,.85), 0 0 0 7px rgba(127,217,208,.5), 0 0 30px rgba(127,217,208,.55); }
.rm-card.is-later .rm-medal img{ filter:saturate(.75) brightness(.9); }

.rm-phase{
  text-align:center; font-family:var(--rm-head); font-size:11.5px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--rm-gold); margin:0 0 6px;
}
.rm-card h2{
  text-align:center; font-family:var(--rm-head); font-weight:700; font-size:20px; line-height:1.25;
  letter-spacing:.02em; color:var(--rm-ink); margin:0 0 6px; text-wrap:balance;
}
.rm-patch{ text-align:center; font-size:14px; font-style:italic; color:var(--rm-muted); margin:0 0 14px; }
.rm-card .rm-chip{ align-self:center; margin-bottom:16px; }
.rm-sep{ height:1px; margin:0 6px 14px; background:linear-gradient(90deg, transparent, rgba(216,180,106,.5), transparent); }

.rm-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rm-list li{ display:flex; align-items:flex-start; gap:10px; font-size:16px; line-height:1.4; color:var(--rm-text); }
.rm-list img{ width:24px; height:24px; flex:none; border-radius:4px; border:1px solid #000; box-shadow:0 0 0 1px rgba(216,180,106,.35); margin-top:1px; }
.rm-list b{ color:var(--rm-ink); font-weight:700; }
.rm-list a{ color:var(--rm-gold-hi); text-decoration:underline; text-decoration-color:rgba(244,220,160,.35); text-underline-offset:3px; }
.rm-list a:hover{ text-decoration-color:var(--rm-gold-hi); }

/* ---------- beyond ---------- */
.rm-beyond{
  position:relative; margin:60px 0 0; padding:34px 36px;
  display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center;
  border:1px solid rgba(185,195,214,.3); border-radius:4px;
  background:linear-gradient(90deg, rgba(10,13,24,.88), rgba(14,24,40,.78) 50%, rgba(10,13,24,.88));
  box-shadow:inset 0 0 0 5px rgba(6,8,13,.5), inset 0 0 0 6px rgba(185,195,214,.12), 0 26px 50px -24px #000;
}
.rm-beyond .rm-medal{ position:static; margin:0; width:84px; height:84px; box-shadow:0 0 0 2px var(--rm-silver), 0 0 0 6px rgba(6,8,13,.85), 0 0 0 7px rgba(185,195,214,.4), 0 0 26px rgba(127,170,255,.3); }
.rm-beyond .rm-phase{ text-align:left; color:var(--rm-silver); }
.rm-beyond h2{ font-family:var(--rm-head); font-size:clamp(22px,2.6vw,30px); font-weight:700; color:var(--rm-ink); margin:0 0 8px; }
.rm-beyond p{ margin:0; font-size:17px; color:var(--rm-text); max-width:62ch; }

.rm-foot{ text-align:center; padding:56px 0 110px; font-size:15.5px; color:var(--rm-muted); }
.rm-foot a{ color:var(--rm-gold-hi); }

/* ---------- responsive ---------- */
@media (min-width:1240px){
  /* five per row: Beta, 1, 2, 3, 4 / 5, 6, 7, 8 */
  .rm-card h2{ font-size:18px; }
  .rm-list li{ font-size:15px; }
  .rm-card:nth-child(5n)::before{
    top:100%; left:auto; right:50%; width:var(--back); height:12px; margin:0 -1px 0 0;
    background:none; box-shadow:none; border:2px solid rgba(216,180,106,.6); border-width:0 2px 2px 0;
    filter:drop-shadow(0 0 4px rgba(216,180,106,.45));
  }
  .rm-card:nth-child(5n) .rm-arrow{ top:calc(100% + 18px); right:auto; left:calc(50% - var(--back) - 20px); margin:0; transform:rotate(90deg); }
}
@media (max-width:1239px){
  .rm-wrap{ max-width:var(--wrap); }
  .rm-path{ --cols:2; --cg:44px; }
  .rm-card{ padding:52px 22px 22px; }
}
@media (min-width:701px) and (max-width:1239px){
  /* two per row, each row left to right */
  .rm-card:nth-child(2n)::before{
    top:100%; left:auto; right:50%; width:var(--back); height:12px; margin:0 -1px 0 0;
    background:none; box-shadow:none; border:2px solid rgba(216,180,106,.6); border-width:0 2px 2px 0;
    filter:drop-shadow(0 0 4px rgba(216,180,106,.45));
  }
  .rm-card:nth-child(2n) .rm-arrow{ top:calc(100% + 18px); right:auto; left:calc(50% - var(--back) - 20px); margin:0; transform:rotate(90deg); }
}
@media (max-width:700px){
  .rm-hero{ padding:80px 0 40px; }
  .rm-sub{ font-size:17px; }
  .rm-orn::before, .rm-orn::after{ width:40px; }
  .rm-orn span{ letter-spacing:.28em; padding-left:.28em; white-space:nowrap; }
  .rm-path{ --cols:1; grid-template-columns:1fr; gap:100px; }
  /* one column: every arrow points down */
  .rm-card::before{ display:none; }
  .rm-arrow{ top:calc(100% + 18px); right:auto; left:50%; margin:0 0 0 -20px; transform:rotate(90deg); }
  .rm-beyond{ grid-template-columns:1fr; text-align:center; justify-items:center; padding:30px 22px; }
  .rm-beyond .rm-phase{ text-align:center; }
  .rm-beyond-2{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .rm-motes{ display:none; }
  .rm-card:hover{ transform:none; }
}