/* styles/map.css — a single era page (one rampart + its station path) */
.era-wrap{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 clamp(.4rem,2vw,1rem)}

/* era intro plate */
.era-plate{display:flex;align-items:center;gap:1rem;padding:1.3rem clamp(.6rem,3vw,1rem) .8rem;text-align:start}
.era-emblem{width:64px;height:64px;border-radius:1.1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--ec),var(--ec2));box-shadow:0 8px 22px -4px var(--ec);animation:floaty 5s ease-in-out infinite}
.era-emblem svg{width:38px;height:38px}
.era-titles{flex:1;min-width:0}
.era-tier{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ec2)}
.era-titles h2{font-size:clamp(1.4rem,4.6vw,2rem);color:var(--fg);line-height:1.08}
.era-titles h2 .era-en{font-family:'Fredoka',sans-serif;font-weight:500;font-size:.6em;color:var(--fg-dim);letter-spacing:.02em;margin-inline-start:.4rem}
.era-titles p{font-size:.82rem;color:var(--fg-dim);font-family:'Amiri',serif;margin-top:.15rem}
[dir="ltr"] .era-titles p{font-family:'Nunito',sans-serif}
.era-prog{flex-shrink:0;text-align:center}
.era-prog .ring{width:54px;height:54px;display:block}
.era-prog .ring circle{fill:none;stroke-width:5}
.era-prog .ring .bg{stroke:rgba(255,255,255,.12)}
[data-theme="parchment"] .era-prog .ring .bg{stroke:rgba(120,90,40,.18)}
.era-prog .ring .fg{stroke:var(--ec);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease-out)}
.era-prog small{display:block;font-size:.62rem;font-weight:800;color:var(--fg-dim);margin-top:.1rem}
.era-points{flex-shrink:0;text-align:center;background:linear-gradient(135deg,#FFE0B2,#FFCC80);border:2px solid #FB8C00;border-radius:.9rem;padding:.4rem .65rem;color:#7A4A00;font-weight:800;font-size:.7rem}
.era-points b{display:block;font-family:'Fredoka',sans-serif;font-size:1.25rem;color:#E65100;line-height:1}

/* the path field */
.field{position:relative;width:100%;aspect-ratio:.92;min-height:420px;border-radius:1.6rem;overflow:hidden;
  border:1px solid var(--stone-line);background:linear-gradient(180deg,var(--stone-lt),var(--stone));
  box-shadow:0 20px 50px rgba(0,0,0,.32);margin-bottom:1.4rem}
@media(min-width:560px){.field{aspect-ratio:1.45}}
[data-theme="parchment"] .field{box-shadow:0 14px 34px rgba(120,90,40,.18)}
.field-battlement{position:absolute;top:0;left:0;right:0;height:16px;z-index:3;
  background:repeating-linear-gradient(90deg,var(--ec) 0 24px,transparent 24px 44px);opacity:.85;-webkit-mask:linear-gradient(180deg,#000 60%,transparent);mask:linear-gradient(180deg,#000 60%,transparent)}
.field-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.path-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@keyframes draw{to{stroke-dashoffset:0}}
.field-stations{position:absolute;inset:0;z-index:2}

/* station node */
.st{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%);opacity:0;animation:pop .5s both var(--ease-spring)}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(0)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.st-btn{position:relative;width:clamp(48px,11vw,62px);height:clamp(48px,11vw,62px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:3px solid var(--paper);
  background:linear-gradient(135deg,var(--ec2),var(--ec));box-shadow:0 6px 16px rgba(0,0,0,.4);transition:transform .25s var(--ease-spring)}
.st-btn svg{width:60%;height:60%}
.st-btn:hover{transform:scale(1.09)}
.st.locked .st-btn{background:linear-gradient(135deg,#8C8597,#5E586E);border-color:rgba(255,255,255,.6);opacity:.8}
.st.done .st-btn{box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.2)}
.st.active .st-btn{animation:bob 2.8s var(--ease-out) infinite,breathe 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes breathe{0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 0 0 var(--halo)}50%{box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 22px 6px var(--halo)}}
.st-tile{position:absolute;left:50%;top:calc(50% + 6px);width:clamp(48px,11vw,62px);height:clamp(18px,4.5vw,24px);
  transform:translate(-50%,-50%) rotateX(60deg);border-radius:50%;z-index:-1;opacity:.6;background:radial-gradient(ellipse,var(--ec2),transparent 72%)}
.st-num{position:absolute;top:-5px;inset-inline-end:-5px;width:20px;height:20px;border-radius:50%;background:var(--ec);color:#fff;
  font-weight:800;font-size:.6rem;display:flex;align-items:center;justify-content:center;border:2px solid var(--paper);font-family:'Fredoka',sans-serif}
.st.locked .st-num{background:#6B6480}
.st-name{margin-top:.42rem;background:var(--paper);padding:.18rem .55rem;border-radius:.7rem;border:2px solid var(--ec);
  text-align:center;line-height:1.05;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.22);transition:transform .25s}
.st:hover .st-name{transform:translateY(-2px)}
.st-name b{display:block;font-size:.64rem;color:var(--ec);font-family:'Amiri',serif;font-weight:700}
.st-name i{display:block;font-size:.54rem;color:var(--ink-dim);font-family:'Fredoka',sans-serif;font-style:normal;margin-top:1px}
.st.locked .st-name{border-color:#9890a8}.st.locked .st-name b{color:#6B6480}
/* "coming soon" — content not authored yet. Still clickable (no lock), just gently faded. */
.st.soon .st-btn{filter:saturate(.55);opacity:.72}
.st.soon .st-name{opacity:.82}
.st.soon .st-btn::after{content:"…";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  font-size:.7rem;font-weight:800;color:#fff;line-height:1}
.st-stars{display:flex;gap:1px;position:absolute;top:-13px;left:50%;transform:translateX(-50%)}
.st-stars svg{width:11px;height:11px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.st-stars .on{fill:var(--gold-lt);stroke:var(--gold-dk)}.st-stars .off{fill:#5A5468;stroke:#3a3548}
.st-orbit{position:absolute;top:50%;left:50%;width:clamp(62px,13vw,80px);height:clamp(62px,13vw,80px);transform:translate(-50%,-50%);animation:spin 4.5s linear infinite;z-index:3;pointer-events:none}
.st-orbit i{position:absolute;top:-3px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle,#fff,var(--accent2));box-shadow:0 0 8px 2px var(--halo)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.st-coach{position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:var(--paper);color:var(--ec);font-weight:800;font-size:.6rem;
  padding:.2rem .55rem;border-radius:.8rem;white-space:nowrap;border:2px solid var(--accent2);box-shadow:0 4px 12px rgba(0,0,0,.3);animation:coach 1.5s var(--ease-spring) infinite;z-index:5}
.st-coach::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--paper)}
@keyframes coach{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}

/* prev/next era footer nav */
.era-nav{display:flex;gap:.7rem;justify-content:space-between;padding:0 .2rem 3.2rem}
.era-nav a{flex:1;display:flex;align-items:center;gap:.5rem;justify-content:center;padding:.7rem 1rem;border-radius:1rem;
  background:linear-gradient(180deg,var(--stone-lt),var(--stone));border:1px solid var(--stone-line);color:var(--fg);font-weight:800;font-size:.8rem;transition:.2s}
.era-nav a:hover{border-color:var(--accent);transform:translateY(-2px)}
.era-nav a.disabled{opacity:.35;pointer-events:none}
.era-nav a .ar-small{font-family:'Amiri',serif;font-size:.86rem}
@media (prefers-reduced-motion:reduce){.st-orbit,.st-coach{display:none!important}}

/* ── "Getting to know the Prophet ﷺ" — a separate panel below the journey ── */
.aspects{position:relative;z-index:2;margin:.4rem 0 1.6rem;padding:1.2rem clamp(.7rem,3vw,1.3rem) 1.4rem;
  border-radius:1.4rem;border:1px solid var(--stone-line);
  background:linear-gradient(180deg,var(--stone-lt),var(--stone));box-shadow:0 16px 40px rgba(0,0,0,.26)}
[data-theme="parchment"] .aspects{box-shadow:0 12px 30px rgba(120,90,40,.16)}
.aspects-head{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1rem}
.aspects-bar{flex-shrink:0;width:5px;align-self:stretch;border-radius:3px;background:linear-gradient(180deg,var(--ec),var(--ec2))}
.aspects-head h3{font-size:clamp(1.1rem,3.4vw,1.4rem);color:var(--fg);line-height:1.15}
.aspects-head p{font-size:.8rem;color:var(--fg-dim);margin-top:.2rem;font-family:'Amiri',serif;text-wrap:pretty}
[dir="ltr"] .aspects-head p{font-family:'Nunito',sans-serif}
.aspects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem}
.aspect-card{position:relative;display:flex;align-items:center;gap:.75rem;text-align:start;
  background:var(--paper);color:var(--ink);border-radius:1rem;padding:.75rem .85rem;
  border:2px solid transparent;box-shadow:0 6px 16px rgba(0,0,0,.16);
  transition:transform .2s var(--ease-spring),border-color .2s;
  animation:aspectIn .4s var(--ease-out) both}
@keyframes aspectIn{from{transform:translateY(10px)}to{transform:translateY(0)}}
.aspect-card:hover{transform:translateY(-3px);border-color:var(--ec)}
.aspect-ic{flex-shrink:0;width:46px;height:46px;border-radius:.8rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ec2),var(--ec));box-shadow:0 5px 14px -4px var(--ec)}
.aspect-ic svg{width:60%;height:60%}
.aspect-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.aspect-body b{font-family:'Amiri',serif;font-weight:700;font-size:.94rem;color:var(--ink)}
[dir="ltr"] .aspect-body b{font-family:'Nunito',sans-serif}
.aspect-body i{font-style:normal;font-family:'Fredoka',sans-serif;font-size:.6rem;color:var(--ink-dim);margin-top:1px}
.aspect-hook{font-size:.72rem;color:var(--ink-dim);margin-top:.32rem;font-family:'Amiri',serif;text-wrap:pretty}
[dir="ltr"] .aspect-hook{font-family:'Nunito',sans-serif}
.aspect-meta{display:flex;align-items:center;gap:.34rem;margin-top:.4rem;padding-top:.36rem;border-top:1px dashed color-mix(in oklab,var(--ink) 16%,transparent);
  font-size:.7rem;font-weight:700;color:var(--ec);font-family:'Amiri',serif;text-wrap:pretty}
[dir="ltr"] .aspect-meta{font-family:'Nunito',sans-serif}
.aspect-meta svg{flex-shrink:0;width:13px;height:13px;opacity:.85}
.aspect-go{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--paper2);color:var(--ec);
  display:flex;align-items:center;justify-content:center;font-weight:800}
[dir="rtl"] .aspect-go{transform:scaleX(-1)}
.aspect-card.soon{filter:saturate(.72)}
.aspect-card.soon .aspect-go{font-size:0}
.aspect-card.soon .aspect-go::after{content:"…";font-size:1rem;line-height:1}

/* ── Categorized era (Heroes): grouped hero cards instead of a map ── */
.cats{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.5rem;margin:.4rem 0 1.4rem}
.cat-sec{position:relative}
.cat-head{display:flex;align-items:center;gap:.7rem;margin:0 .2rem .8rem;padding-bottom:.6rem;border-bottom:1px solid var(--stone-line)}
.cat-ic{flex-shrink:0;width:42px;height:42px;border-radius:.8rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ec),var(--ec2));box-shadow:0 6px 16px -4px var(--ec)}
.cat-ic svg{width:60%;height:60%}
.cat-tt{flex:1;min-width:0}
.cat-tt h3{font-size:clamp(1.05rem,3.2vw,1.35rem);color:var(--fg);line-height:1.12}
.cat-tt .cat-en{font-family:'Fredoka',sans-serif;font-weight:500;font-size:.56em;color:var(--fg-dim);margin-inline-start:.4rem}
.cat-tt p{font-size:.76rem;color:var(--fg-dim);margin-top:.1rem;font-family:'Amiri',serif}
[dir="ltr"] .cat-tt p{font-family:'Nunito',sans-serif}
.cat-count{flex-shrink:0;min-width:30px;height:30px;padding:0 .5rem;border-radius:2rem;display:flex;align-items:center;justify-content:center;
  background:var(--stone-lt);border:1px solid var(--stone-line);color:var(--fg-dim);font-family:'Fredoka',sans-serif;font-weight:700;font-size:.74rem}
.hero-hon{font-style:normal;font-family:'Amiri',serif;font-size:.62rem;color:var(--gold-dk);font-weight:700}
/* "Coming soon" category section (e.g. Pure Heart corner placeholders) */
.cat-soon{opacity:.92}
.cat-count.soon{background:transparent;border-style:dashed;font-size:.9rem}
.cat-soon-note{display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:1.4rem 1rem;border:1.5px dashed var(--stone-line);border-radius:1rem;
  background:var(--stone-lt);color:var(--fg-dim);font-family:'Fredoka',sans-serif;
  font-weight:600;font-size:.9rem;text-align:center}
[dir="ltr"] .cat-soon-note{font-family:'Nunito',sans-serif;font-weight:800}
[data-theme="dusk"] .hero-hon,[data-theme="navy"] .hero-hon{color:var(--gold-lt)}
.aspect-card.done{border-color:#7DB344}
.hero-card .aspect-ic{position:relative}
.aspect-card.done .aspect-ic::after{content:"✓";position:absolute;top:-6px;inset-inline-end:-6px;width:18px;height:18px;
  border-radius:50%;background:#2A9D4A;color:#fff;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--paper)}

/* Challenge-Hall gate station (appended after the last prophet) */
.st.gate .st-btn{background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));border-color:var(--paper);box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 0 4px rgba(245,204,90,.18)}
.st.gate .st-coach{border-color:var(--gold-dk);color:var(--gold-dk)}
.st.gate .st-name{border-color:var(--gold)}
.st.gate .st-name b{color:var(--gold-dk)}
[data-theme="dusk"] .st.gate .st-name b,[data-theme="navy"] .st.gate .st-name b{color:#9A6E08}
.st.gate .st-num{background:#2A9D4A}