.level-hero{
  display:flex; align-items:center; gap:22px; margin:0 0 26px;
  padding:22px clamp(18px,3vw,28px); border-radius:var(--radius-l);
  background:linear-gradient(165deg, var(--ink-2), var(--ink)); border:1px solid var(--gold-dim);
}
.level-hero__badge{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:84px; height:84px; border-radius:50%;
  background:rgba(205,166,95,0.08); border:1px solid var(--gold-dim);
}
.level-hero__number{ font-family:var(--font-display); font-weight:600; font-size:2rem; color:var(--gold); line-height:1; }
.level-hero__label{ font-size:0.6rem; letter-spacing:0.1em; color:var(--paper-dim); margin-top:2px; }
.level-hero__body{ flex:1; min-width:0; }
.level-hero__rank{ margin:0 0 10px; font-family:var(--font-display); font-size:1.15rem; color:var(--paper); }
.level-hero__bar{
  position:relative; height:12px; border-radius:999px; background:rgba(0,0,0,0.35);
  border:1px solid var(--line); overflow:hidden;
}
.level-hero__bar-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent-dim), var(--gold));
  transition:width .5s var(--ease);
}
.level-hero__xp-text{
  margin:8px 0 0; font-size:0.78rem; color:var(--paper-dim); font-variant-numeric:tabular-nums;
}

.level-intro{ font-size:0.86rem; color:var(--paper-dim); line-height:1.6; max-width:640px; margin:0 0 36px; }

.level-section{ margin-bottom:34px; }
.level-section__title{
  margin:0 0 4px; font-family:var(--font-display); font-weight:500; font-size:1.1rem; color:var(--paper);
}
.level-section__subtitle{ margin:0 0 14px; font-size:0.8rem; color:var(--paper-dim); }
.level-section__timer{
  display:inline-block; vertical-align:middle; margin-left:10px;
  font-size:0.76rem; color:var(--gold); font-variant-numeric:tabular-nums;
  padding:5px 12px; border-radius:999px; background:rgba(205,166,95,0.08); border:1px solid var(--gold-dim);
  white-space:nowrap;
}

/* ---- Roadmap -- one node per LEVEL_REWARDS entry, connected by a running
   line so it reads as a path/journey rather than a plain list (see
   levels.js's renderRoadmap). Horizontally scrollable since 12 nodes at a
   readable size don't fit most viewports -- same scroll+custom-scrollbar
   idiom as .leaderboard__table-wrap--scroll. ---- */
.level-roadmap{
  display:flex; align-items:flex-start; overflow-x:auto; padding:10px 4px 16px;
  scrollbar-width:thin; scrollbar-color:var(--gold-dim) transparent;
}
.level-roadmap::-webkit-scrollbar{ height:6px; }
.level-roadmap::-webkit-scrollbar-track{ background:transparent; }
.level-roadmap::-webkit-scrollbar-thumb{ background-color:var(--gold-dim); border-radius:999px; }
.level-roadmap__node{
  position:relative; flex:0 0 122px; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding-top:2px; text-align:center;
}
.level-roadmap__badge{
  position:relative; z-index:1; width:56px; height:56px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-2); border:2px solid var(--line); color:var(--paper-dim);
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
}
.level-roadmap__node:not(:first-child) .level-roadmap__badge::before{
  content:""; position:absolute; top:50%; right:100%; width:66px; height:2px;
  background:var(--line); transform:translateY(-50%);
}
.level-roadmap__node--reached .level-roadmap__badge{
  background:linear-gradient(165deg, rgba(205,166,95,0.24), rgba(205,166,95,0.06));
  border-color:var(--gold); color:var(--gold);
}
.level-roadmap__node--reached .level-roadmap__badge::before{ background:var(--gold-dim); }
.level-roadmap__node--current .level-roadmap__badge{
  border-color:var(--gold); color:var(--gold);
  box-shadow:0 0 0 4px rgba(205,166,95,0.14), 0 0 20px -4px rgba(205,166,95,0.65);
  animation:level-roadmap-pulse 2.4s ease-in-out infinite;
}
@keyframes level-roadmap-pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(205,166,95,0.14), 0 0 20px -4px rgba(205,166,95,0.65); }
  50%{ box-shadow:0 0 0 7px rgba(205,166,95,0.07), 0 0 26px -2px rgba(205,166,95,0.85); }
}
.level-roadmap__check{
  position:absolute; top:-3px; right:-3px; z-index:2; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0.62rem; font-weight:700;
  background:var(--gold); color:var(--ink); border:2px solid var(--ink-2);
}
/* A link (equip this title from the Shop -- see levels.js/shop.js's
   openDeepLinkFromUrl), styled to still read primarily as the plain label
   it used to be: no underline/color shift until hover, just the small 🏷
   tag hinting it's clickable. */
.level-roadmap__title{
  display:block; font-size:0.72rem; font-weight:600; color:var(--paper-dim); line-height:1.25; max-width:110px;
  text-decoration:none; transition:color .2s var(--ease);
}
.level-roadmap__title:hover{ color:var(--gold); }
.level-roadmap__title-tag{ font-size:0.62rem; opacity:0.7; }
.level-roadmap__node--reached .level-roadmap__title,
.level-roadmap__node--current .level-roadmap__title{ color:var(--paper); }
.level-roadmap__coins{
  display:inline-flex; align-items:center; gap:3px; font-size:0.7rem; font-weight:600;
  color:var(--paper-dim); font-variant-numeric:tabular-nums;
}
.level-roadmap__node--reached .level-roadmap__coins,
.level-roadmap__node--current .level-roadmap__coins{ color:var(--gold); }
/* Cosmetic-unlock links (see levels.js) -- small pill tags, not a repeat of
   the Shop's own swatch preview; clicking one opens that real preview. */
.level-roadmap__cosmetics{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:4px; }
.level-roadmap__cosmetic{
  display:inline-block; max-width:118px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--gold-dim); background:rgba(205,166,95,0.08);
  font-size:0.6rem; font-weight:600; letter-spacing:0.02em; line-height:1.3;
  color:var(--gold-dim); text-decoration:none; transition:color .2s var(--ease), border-color .2s var(--ease);
}
.level-roadmap__cosmetic:hover{ color:var(--gold); border-color:var(--gold); }
.level-roadmap__node--reached .level-roadmap__cosmetic,
.level-roadmap__node--current .level-roadmap__cosmetic{ color:var(--gold); }

.level-source-list{ display:flex; flex-direction:column; gap:1px; border-radius:var(--radius-m); overflow:hidden; }
.level-source-row{
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:rgba(236,231,220,0.02); border:1px solid var(--line);
}
.level-source-list .level-source-row + .level-source-row{ border-top:none; }
.level-source-row__label{ flex:1; min-width:0; font-size:0.86rem; color:var(--paper); }
.level-source-row__xp{
  flex-shrink:0; font-size:0.82rem; font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums;
  text-align:right;
}
.level-source-row__cap{
  flex-shrink:0; font-size:0.68rem; color:var(--paper-dim); letter-spacing:0.02em;
  padding:3px 9px; border-radius:999px; background:rgba(236,231,220,0.06);
}
@media (max-width:640px){
  .level-source-row{ flex-wrap:wrap; }
  .level-source-row__xp{ text-align:left; }
}