/* ---------- stars (glyphs are aria-hidden; the count is in sr-only text) ---------- */
.stars {
  display: inline-flex;
  gap: 0.05em;
  line-height: 1;
}
.star {
  display: inline-block;
}
.star.is-on {
  color: var(--star);
}
.star:not(.is-on) {
  opacity: 0.55;
}

/* ---------- player card (header) ---------- */
.player {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'medal level side'
    'medal bar side'
    'medal xp side';
  align-items: center;
  gap: 0.2rem var(--space-2);
  width: min(100%, 31rem);
  padding: var(--space-2);
  border: 2px solid var(--ink);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--ink);
}
/* flash layer behind the content, faded in on level-up */
.player::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  opacity: 0;
  pointer-events: none;
}
.player-medal {
  grid-area: medal;
  display: grid;
  place-items: center;
  align-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-right: 0.15rem;
  border: 2px solid var(--ink);
  background: var(--green);
  color: var(--signal);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-4deg);
}
.player-medal-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--surface);
}
.player-medal-n {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}
.player.is-max .player-medal {
  background: var(--signal);
}
.player.is-max .player-medal-label,
.player.is-max .player-medal-n {
  color: var(--ink);
}
.player-level {
  grid-area: level;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
}
.xp-bar {
  grid-area: bar;
  height: 0.75rem;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
}
.xp-fill {
  display: block;
  height: 100%;
  background: var(--green) repeating-linear-gradient(-45deg, transparent 0 5px, rgb(255 255 255 / 0.18) 5px 10px);
  transform: scaleX(var(--xp, 0));
  transform-origin: left center;
  transition: transform 700ms var(--ease-out);
}
.player.is-max .xp-fill {
  background-color: var(--star);
}
.player-xp {
  grid-area: xp;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.player-side {
  grid-area: side;
  display: grid;
  justify-items: end;
  gap: 0.35rem;
  padding-left: var(--space-1);
}
.player-stars {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.player-star {
  color: var(--star);
}
.badge-btn {
  min-height: 2.25rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.badge-btn::before {
  content: '';
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--signal);
}

/* ---------- step strip ---------- */
.step-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.step-stars {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.step[aria-current='step'] .star.is-on {
  color: var(--signal);
}
.step.is-locked {
  background-image: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(18 35 28 / 0.05) 7px 9px);
}
.step.is-locked .step-stars {
  visibility: hidden;
}
.step.is-locked .step-num {
  position: relative;
  border-style: dashed;
  font-size: 0;
}
/* padlock: shackle and body */
.step.is-locked .step-num::before,
.step.is-locked .step-num::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.step.is-locked .step-num::before {
  top: 0.32rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0;
}
.step.is-locked .step-num::after {
  top: 0.74rem;
  width: 0.74rem;
  height: 0.56rem;
  border-radius: 2px;
  background: currentColor;
}

/* ---------- lesson panel ---------- */
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-1);
}
.lesson-meta .lesson-count {
  margin: 0;
}
.run-line {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.1rem 0.65rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
}
.run-line .stars {
  font-size: 1rem;
}
.run-line.is-record {
  background: var(--ink);
  color: var(--surface);
}
.run-line.is-record .star.is-on {
  color: var(--signal);
}
.cost {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--error-wash);
  color: var(--error);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.btn .cost {
  margin-left: 0;
}
.cost[hidden],
.btn[hidden] {
  display: none;
}

/* ---------- "+10 XP" chip on a task ---------- */
.xp-chip {
  position: absolute;
  top: 0.4rem;
  right: var(--space-2);
  padding: 0.05rem 0.5rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  pointer-events: none;
}

/* ---------- finish card ---------- */
.finish {
  border-top: 6px solid var(--signal);
}
.finish-stars {
  margin: var(--space-2) 0 0;
  font-size: 2.4rem;
}
.finish .star.is-on {
  color: var(--signal);
}
.finish-note {
  margin: var(--space-1) 0 0;
  color: var(--head-hl);
  font-size: 0.92rem;
}
.finish-gains {
  display: grid;
  gap: 0.3rem;
  margin: var(--space-2) 0 0;
  padding: var(--space-2) 0 0;
  border-top: 1px dashed rgb(255 255 255 / 0.3);
  list-style: none;
  font-size: 0.92rem;
  font-weight: 600;
}
.finish-gains[hidden] {
  display: none;
}
.finish-gains li::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  background: var(--signal);
  transform: translateY(-0.1em) rotate(45deg);
}
.finish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ---------- dialogs ---------- */
.badges-dialog {
  max-width: min(34rem, calc(100% - 2rem));
}
.badge-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.badge-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.15rem 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1.5px dashed var(--grid);
  border-radius: 4px;
  color: var(--ink-soft);
}
.badge-tile.is-earned {
  border: 2px solid var(--ink);
  background: var(--signal-wash);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.badge-medal {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px dashed var(--grid);
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
}
.is-earned .badge-medal {
  border: 2px solid var(--ink);
  background: var(--signal);
}
.badge-text {
  display: grid;
  min-width: 0;
}
.badge-name {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
}
.badge-desc {
  font-size: 0.82rem;
  line-height: 1.35;
}
.badge-status {
  grid-column: 2;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.is-earned .badge-status {
  color: var(--green);
}
.trial-note {
  padding: 0.45rem 0.7rem;
  border-left: 4px solid var(--signal);
  background: var(--signal-wash);
  font-size: 0.88rem;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .xp-chip {
    animation: xp-rise 1100ms var(--ease-out) forwards;
  }
  .player.is-levelup .player-medal {
    animation: medal-up 700ms var(--ease-out);
  }
  .player.is-levelup::after {
    animation: card-glow 1200ms ease-out;
  }
  .finish.is-new .finish-star-row .star {
    animation: star-in 520ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 160ms + 150ms);
  }
}
@keyframes xp-rise {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }
  70% {
    opacity: 1;
    transform: translateY(-6px);
  }
  to {
    opacity: 0;
    transform: translateY(-16px);
  }
}
@keyframes medal-up {
  40% {
    transform: rotate(6deg) scale(1.25);
  }
}
@keyframes card-glow {
  from {
    opacity: 0.9;
  }
}
@keyframes star-in {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-40deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.3) rotate(8deg);
  }
}

/* ---------- narrow screens: badges and stars move under the bar ---------- */
@media (max-width: 30rem) {
  .player {
    grid-template-areas:
      'medal level'
      'medal bar'
      'medal xp'
      'side side';
    grid-template-columns: auto minmax(0, 1fr);
  }
  .player-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-1);
    padding: var(--space-1) 0 0;
    border-top: 1px dashed var(--grid);
  }
}