/* src/components/jr/rewards/rewards.css — SJ2 Rewards.
   Every number transcribed from art-source/design-sj2-2026-09-12/screens/SJ2 Rewards.dc.html. */

.jr-r-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sj-chrome-h);
  bottom: var(--sj-nav-h);
  overflow: hidden;
}

.jr-r-scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 253, 248, .9) 0%, rgba(255, 253, 248, .62) 44%, rgba(255, 253, 248, .2) 76%, rgba(255, 253, 248, 0) 100%);
}

/* Her two leaf clusters, one mirrored, tucked into the bottom corners of the grove. */
.jr-r-leaves {
  position: absolute;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
}
.jr-r-leaves-l { left: -46px; bottom: -40px; width: 230px; height: 230px; }
.jr-r-leaves-r { right: -52px; bottom: -46px; width: 212px; height: 212px; transform: scaleX(-1); }

.jr-r-body {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 14px 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------------------------------------------------------------- the hanging sign */
.jr-r-sign {
  position: relative;
  flex: none;
  width: 306px;
  height: 230px;
  margin: -10px auto -20px;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 12px 18px rgba(35, 50, 44, .18));
}

/* The measured cream board inside the picture. */
.jr-r-sign-plate {
  position: absolute;
  left: 10.4%;
  right: 7.8%;
  top: 40.3%;
  bottom: 13.5%;
  box-sizing: border-box;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.jr-r-sign-title {
  margin: 0;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.04;
  letter-spacing: -.01em;
  color: #5a3410;
  text-align: center;
  text-wrap: balance;
}

.jr-r-sign-sub {
  margin: 0;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  color: #7a5228;
  text-align: center;
}

/* ---------------------------------------------------------------- the two top panels */
.jr-r-top {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: 16px;
  align-items: stretch;
}

.jr-r-eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.jr-r-eyebrow-sun { margin-bottom: 14px; color: var(--sj-sun-ink); }
.jr-r-eyebrow-teal { color: var(--sj-teal-ink); }

.jr-r-journey {
  min-width: 0;
  padding: 14px 20px;
  border: 2px solid #f6d98a;
  border-radius: var(--sj-r-panel);
  background: var(--sj-card);
  box-shadow: 0 12px 30px rgba(35, 50, 44, .16);
}

.jr-r-journey-row { display: flex; gap: 24px; align-items: center; }
.jr-r-journey-now { flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; }

.jr-r-level { display: flex; align-items: center; gap: 14px; }

.jr-r-level-art {
  flex: none;
  display: block;
  width: 92px;
  height: 92px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.jr-r-level-text { min-width: 0; }
.jr-r-level-no {
  display: block;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sj-sun-ink);
}
.jr-r-level-name {
  display: block;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.02;
  color: var(--sj-ink);
}
.jr-r-level-stars {
  display: block;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 19px;
  color: var(--sj-ink);
}

/* The star track: a cream capsule with an amber fill behind it, and the six stars themselves
   sitting ON the rail. */
.jr-r-rail {
  position: relative;
  display: block;
  height: 38px;
  border-radius: var(--sj-r-pill);
  background: #f5eedc;
  border: 2px solid #f0c96a;
  box-shadow: inset 0 2px 4px rgba(35, 50, 44, .08);
}

.jr-r-rail-fill {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  min-width: 0;
  border-radius: var(--sj-r-pill);
  background: linear-gradient(180deg, #ffc72c 0%, #f5a300 100%);
}

.jr-r-rail-stars {
  position: absolute;
  left: 6px;
  right: 6px;
  top: -8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jr-r-railstar { display: block; filter: drop-shadow(0 2px 2px rgba(35, 50, 44, .16)); }

.jr-r-next-line {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sj-ink);
  text-wrap: pretty;
}

/* ---- the five level nodes ---- */
.jr-r-path-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; }
.jr-r-path { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; }

.jr-r-node { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; }

.jr-r-node-col {
  flex: 0 0 auto;
  width: 94px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.jr-r-node-disc {
  position: relative;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-r-node-plate { position: absolute; inset: 2px; border-radius: 50%; }

.jr-r-node-art {
  position: relative;
  display: block;
  width: 74px;
  height: 74px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.jr-r-node-name {
  padding: 5px 11px;
  border: 1px solid var(--sj-line-warm);
  border-radius: var(--sj-r-pill);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--sj-ink);
  text-align: center;
}

.jr-r-node-link {
  flex: 1 1 auto;
  min-width: 4px;
  height: 5px;
  margin-top: 37px;
  border-radius: var(--sj-r-pill);
  background: repeating-linear-gradient(90deg, #c9bfa9 0 7px, transparent 7px 13px);
}

/* ---- the little dark lock disc, at her three sizes ---- */
.jr-r-lockdisc {
  position: absolute;
  border-radius: 50%;
  background: var(--sj-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-card);
}
.jr-r-lockdisc-sm { right: -3px; bottom: -1px; width: 26px; height: 26px; border: 2px solid var(--sj-card); }
.jr-r-lockdisc-lg { right: -8px; bottom: -8px; width: 32px; height: 32px; border: 2.5px solid var(--sj-card); }

/* ---------------------------------------------------------------- next unlock */
.jr-r-unlock {
  min-width: 0;
  padding: 18px 22px;
  border: 2px solid var(--sj-teal-line);
  border-radius: var(--sj-r-panel);
  background: var(--sj-card);
  box-shadow: 0 12px 30px rgba(35, 50, 44, .16);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jr-r-unlock-row { display: flex; gap: 16px; align-items: center; }

.jr-r-gift {
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-r-gift-plate {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff6dd 0%, #ffefc4 100%);
  border: 3px dashed var(--sj-teal);
}

.jr-r-gift-art {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 4px 5px rgba(35, 50, 44, .2));
}

.jr-r-unlock-text { flex: 1 1 auto; min-width: 0; }

.jr-r-unlock-title {
  margin: 0 0 5px;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-r-unlock-note {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--sj-ink);
  text-wrap: pretty;
}

/* The same "n of m" the badge's own tile prints, so the panel and the tile cannot disagree. */
.jr-r-unlock-progress {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--sj-ink-soft);
}

.jr-r-cta {
  margin-top: auto;
  min-height: 60px;
  padding: 0 26px;
  border: none;
  border-radius: 20px;
  font-size: 21px;
  gap: 11px;
  box-shadow: 0 5px 0 var(--sj-orange-deep), 0 10px 20px rgba(181, 69, 10, .18);
}
.jr-r-cta:hover { transform: none; box-shadow: 0 5px 0 var(--sj-orange-deep), 0 10px 20px rgba(181, 69, 10, .18); }
.jr-r-cta:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sj-orange-deep), 0 4px 10px rgba(181, 69, 10, .2); }

/* ---------------------------------------------------------------- the badge collection */
.jr-r-collection {
  flex: none;
  padding: 14px 20px 16px;
  border: 2px solid var(--sj-line);
  border-radius: var(--sj-r-panel);
  background: var(--sj-card);
  box-shadow: 0 12px 30px rgba(35, 50, 44, .16);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.jr-r-collection-head { display: flex; align-items: center; gap: 16px; }

.jr-r-chest {
  flex: none;
  display: block;
  width: 72px;
  height: 72px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.jr-r-collection-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-r-collection-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.jr-r-collection-label {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sj-teal-ink);
}

.jr-r-collection-count {
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 20px;
  color: var(--sj-ink);
}

.jr-r-collection-note {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-r-badges {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.jr-r-badge {
  position: relative;
  min-width: 0;
  padding: 12px 10px 11px;
  border-radius: 18px;
  background: var(--sj-stage);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: transform 120ms cubic-bezier(.2, .75, .25, 1);
}
.jr-r-badge:hover { transform: translateY(-3px); }

.jr-r-badge-next {
  position: absolute;
  left: 10px;
  top: -11px;
  padding: 4px 11px;
  border: 1.5px solid var(--sj-sun-ink);
  border-radius: var(--sj-r-pill);
  background: var(--sj-sun);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sj-ink);
}

.jr-r-badge-disc {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px solid var(--sj-line-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-r-badge-glyph {
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 23px;
}

.jr-r-badge-name {
  display: block;
  text-align: center;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.12;
  color: var(--sj-ink);
}

.jr-r-badge-how {
  display: block;
  text-align: center;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.28;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-r-badge-progress {
  display: block;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 14.5px;
}

/* ---------------------------------------------------------------- the arrival banner */
/* It greets from the sky at the right, not over the cards: a toast that lands on top of the
   badges hides the very thing it is congratulating. */
.jr-r-banner {
  position: absolute;
  right: 30px;
  top: 84px;
  z-index: 6;
  width: 412px;
  height: 232px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 14px 22px rgba(35, 50, 44, .22));
  animation: sj2-pop 420ms cubic-bezier(.2, .75, .25, 1) both, sj2-banner-out 600ms ease 4.2s both;
}

/* THE ONE OPACITY KEYFRAME ON THIS SCREEN, and it is the allowed shape: an animation whose
   whole job is to DISAPPEAR must end invisible (CLAUDE.md; the same exception as lsnStarUp
   and sj2-drift). It is named in tools/audit/rules_audit.mjs, never silent. */
@keyframes sj2-banner-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}