/* =====================================================================
   SCAVLAND — Roadmap (horizontal timeline, hairline + dots navigation)
   Content comes from /roadmap.json (edit it with tools/roadmap-editor.html)
   ===================================================================== */
:root{
  --rm-done:#DDC67F;              /* completed features */
  --rm-green:#7EE85A;             /* progress line */
  --rm-glow:rgba(126,232,90,.55);
  --rm-px:170px;
}
.rm{position:relative;overflow:hidden}
.rm > .wrap{position:relative;z-index:1}
.rm-bgyear{position:absolute;right:-2vw;bottom:-6vh;font-family:var(--display);font-weight:900;font-size:36vh;line-height:.8;color:rgba(215,206,177,.035);pointer-events:none;user-select:none;transition:opacity .4s ease}
.rm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.rm-title{font-family:var(--display);font-weight:900;font-size:clamp(56px,7vw,112px);line-height:.85;text-transform:uppercase;color:var(--white);margin:12px 0 0}
.rm-hint{display:flex;align-items:center;gap:10px;color:rgba(215,206,177,.6)}
.rm-hint i{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border:1px solid var(--rm-done);color:var(--rm-done);font-style:normal;font-size:13px;line-height:1}
.rm-legend{display:flex;gap:20px;flex-wrap:wrap;color:rgba(215,206,177,.55)}
.rm-legend span{display:inline-flex;align-items:center;gap:8px}
.rm-legend b{display:inline-block;width:16px;height:8px}
.rm-legend .l-done{background:var(--rm-done)}
.rm-legend .l-prog{background:rgba(221,198,127,.15);box-shadow:inset 0 0 0 1px rgba(221,198,127,.7)}
.rm-legend .l-plan{box-shadow:inset 0 0 0 1px rgba(215,206,177,.35)}
.rm-legend .l-line{height:4px;background:var(--rm-green);box-shadow:0 0 8px var(--rm-glow)}
.rm-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* strip */
.rm-row{position:relative;height:360px;margin-top:clamp(18px,3vh,32px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.rm-row::-webkit-scrollbar{display:none}
.rm-row.drag{cursor:grabbing;user-select:none}
.rm-row.drag .rm-clip{pointer-events:none}
.rm-strip{position:relative;height:100%;margin-inline:calc(max(0px,(100% - var(--maxw))/2) + var(--pad))}   /* same left edge as .wrap content */
.rm-line{position:absolute;left:0;right:0;top:86px;height:2px;background:rgba(215,206,177,.18)}
.rm-glowwrap{position:absolute;left:0;top:79px;height:16px;width:0;filter:drop-shadow(0 0 6px var(--rm-glow)) drop-shadow(0 0 16px rgba(126,232,90,.35))}
.rm-paint{position:absolute;inset:0;background:var(--rm-green);-webkit-mask:url(/assets/btn-dirt.png) left/100% 100% no-repeat;mask:url(/assets/btn-dirt.png) left/100% 100% no-repeat}
.rm-mo{position:absolute;top:104px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(215,206,177,.42);white-space:nowrap}
.rm-mo::before{content:"";position:absolute;left:0;top:-14px;width:1px;height:8px;background:rgba(215,206,177,.25)}
.rm-yr{position:absolute;top:23px;font-family:var(--display);font-weight:800;font-size:34px;line-height:1;color:var(--khaki);letter-spacing:.02em;white-space:nowrap;transform:translateX(-50%)}   /* centred over its diamond */
.rm-yr.start{transform:none}                       /* EA Release: left-aligned to the page edge */
.rm-yr.beyond{transform:none;font-size:26px;top:27px;opacity:.7}

/* navigation: hairline position + page dots (no boxes) */
.rm-nav{margin-top:6px}
.rm-hair{position:relative;height:18px;cursor:pointer;touch-action:none;outline:none}
.rm-hair::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:rgba(215,206,177,.1)}
.rm-hair i{position:absolute;top:8px;left:0;height:2px;background:rgba(215,206,177,.6);transition:background-color .2s ease}
.rm-hair:hover i,.rm-hair.on i{background:var(--sand)}
.rm-hair:focus-visible i{box-shadow:0 0 0 2px var(--accent)}
.rm-dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.rm-dots button{width:6px;height:6px;padding:0;border:0;border-radius:3px;background:rgba(215,206,177,.25);cursor:pointer;transition:width .3s var(--ease),background-color .3s ease}
.rm-dots button:hover{background:rgba(215,206,177,.55)}
.rm-dots button.on{width:22px;background:var(--sand)}
.rm-foot{margin-top:14px}

/* year checkpoint — diamond */
.rm-cp{position:absolute;top:87px;width:0;height:0}
.rm-cp::before{content:"";position:absolute;left:-19px;top:-19px;width:38px;height:38px;
  background-image:radial-gradient(rgba(215,206,177,.22) 1px,transparent 1.2px);background-size:4px 4px;opacity:.9}
.rm-cp i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;transform:rotate(45deg);background:#1a1813;border:2px solid #8f8660;box-shadow:0 0 0 3px #111;transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.rm-cp.hit i{background:#D2C487;border-color:#5b5536;box-shadow:0 0 0 3px #111,0 0 14px rgba(221,198,127,.55)}
/* the start of the timeline: Early Access release, always lit green */
.rm-cp.start::before{background-image:radial-gradient(rgba(126,232,90,.5) 1px,transparent 1.2px);filter:drop-shadow(0 0 4px var(--rm-glow))}
.rm-yr.start{color:var(--rm-green);text-shadow:0 0 12px var(--rm-glow)}
.rm-cp.start i,.rm-cp.start.hit i{background:var(--rm-green);border-color:#2f5a22;box-shadow:0 0 0 3px #111,0 0 14px var(--rm-glow),0 0 28px rgba(126,232,90,.35)}

/* you are here */
.rm-here{position:absolute;top:80px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--rm-green);box-shadow:0 0 10px var(--rm-glow);animation:rmPulse 1.8s ease-out infinite;z-index:3;opacity:0;transition:opacity .4s ease}
.rm-here.on{opacity:1}
.rm-here span{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--rm-green);white-space:nowrap;text-shadow:0 0 8px var(--rm-glow)}
@keyframes rmPulse{0%{box-shadow:0 0 0 0 rgba(126,232,90,.6),0 0 10px var(--rm-glow)}70%{box-shadow:0 0 0 14px rgba(126,232,90,0),0 0 10px var(--rm-glow)}100%{box-shadow:0 0 0 0 rgba(126,232,90,0),0 0 10px var(--rm-glow)}}

/* feature blocks */
.rm-clip{position:absolute;height:52px;padding:0 40px 0 14px;display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:left;white-space:nowrap;overflow:hidden;border:0;font:inherit;cursor:pointer;
  color:var(--sand);background:transparent;opacity:.35;min-width:200px;transform:translateY(10px);transition:opacity .5s ease,transform .5s var(--ease),background-color .3s ease,box-shadow .3s ease,color .3s ease}
.rm-clip b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.rm-clip small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;opacity:.7}
.rm-clip .plus{position:absolute;right:12px;top:50%;width:18px;height:18px;margin-top:-9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;line-height:1;border:1px solid currentColor;opacity:.7;transition:transform .3s var(--ease),opacity .2s ease}
.rm-clip.lit{opacity:1;transform:none}
.rm-clip.lit:hover,.rm-clip.lit:focus-visible{transform:translateY(-3px)}
.rm-clip:hover .plus,.rm-clip:focus-visible .plus{opacity:1;transform:rotate(90deg)}
.rm-clip.done{background:var(--rm-done);color:#1a1108}
.rm-clip.done:hover{box-shadow:0 8px 24px rgba(221,198,127,.25)}
.rm-clip.progress{background:rgba(221,198,127,.12);box-shadow:inset 0 0 0 1px rgba(221,198,127,.6);color:var(--rm-done)}
.rm-clip.progress small::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rm-green);box-shadow:0 0 6px var(--rm-glow);margin-right:7px;vertical-align:1px}
.rm-clip.progress:hover{background:rgba(221,198,127,.2)}
.rm-clip.planned{box-shadow:inset 0 0 0 1px rgba(215,206,177,.28)}
.rm-clip.planned:hover{box-shadow:inset 0 0 0 1px var(--sand);background:rgba(215,206,177,.05)}

/* details dialog */
.rm-dlg{width:min(640px,calc(100vw - 32px));max-height:min(80vh,720px);padding:0;border:1px solid rgba(215,206,177,.24);background:#151311;color:var(--sand);overflow:auto}
.rm-dlg::backdrop{background:rgba(5,5,5,.72);backdrop-filter:blur(3px)}
.rm-dlg[open]{animation:rmIn .35s var(--ease)}
@keyframes rmIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rm-dlg-in{padding:32px 32px 28px;display:flex;flex-direction:column;gap:16px}
.rm-dlg .tag{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:5px 9px}
.rm-dlg .tag.done{background:var(--rm-done);color:#1a1108}
.rm-dlg .tag.progress{color:var(--rm-done);box-shadow:inset 0 0 0 1px var(--rm-done)}
.rm-dlg .tag.planned{color:var(--sand);box-shadow:inset 0 0 0 1px rgba(215,206,177,.4)}
.rm-dlg h3{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(34px,4vw,48px);line-height:.92;text-transform:uppercase;color:var(--white)}
.rm-dlg .when{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:rgba(215,206,177,.55)}
.rm-dlg p{margin:0;font-size:16px;line-height:1.65;color:rgba(215,206,177,.85)}
.rm-dlg h4{margin:8px 0 0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--khaki)}
.rm-dlg ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(215,206,177,.12);padding-top:14px}
.rm-dlg li{position:relative;padding-left:22px;font-size:15px;line-height:1.55}
.rm-dlg li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;transform:rotate(45deg);background:var(--rm-done)}
.rm-dlg .x{position:sticky;top:0;float:right;margin:12px 12px 0 0;width:40px;height:40px;border:1px solid rgba(215,206,177,.24);background:#151311;color:var(--sand);font-size:16px;cursor:pointer;z-index:2}
.rm-dlg .x:hover{background:var(--sand);color:#111}

/* phones */
@media (max-width:720px){
  :root{--rm-px:120px}
  .rm-title{font-size:56px}
  .rm-head{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .rm-yr{font-size:28px;top:29px}
  .rm-yr.beyond{top:31px}
  .rm-row{height:340px}
  .rm-dlg-in{padding:24px 20px 22px}
}
@media (prefers-reduced-motion:reduce){
  .rm-clip{opacity:1;transform:none;transition:none}
  .rm-here,.rm-dlg[open]{animation:none}
}