/* ═══════════════════════════════════════════════════════════════
   Quests — Apple Spatial × Level Roadmap
   VisionOS materials · SF type · calm Candy Crush path energy
   ═══════════════════════════════════════════════════════════════ */

.quest-studio {
  --q-blue: #0a84ff;
  --q-blue-soft: oklch(0.62 0.16 250 / 0.55);
  --q-fill: oklch(1 0 0 / 0.08);
  --q-fill-hi: oklch(1 0 0 / 0.12);
  --q-stroke: oklch(1 0 0 / 0.12);
  --q-stroke-hi: oklch(1 0 0 / 0.22);
  --q-label: oklch(0.93 0.01 260);
  --q-secondary: oklch(0.72 0.015 260);
  --q-tertiary: oklch(0.55 0.012 260);
  --q-radius: 22px;
  --q-radius-sm: 14px;
  --q-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --q-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --q-done: #30d158;
  --q-ready: #ff9f0a;
  --q-lock: oklch(0.45 0.02 260);

  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(100dvh - var(--nav-h, 72px));
  padding-bottom: calc(var(--page-pb, 72px) + var(--mobile-nav-h, 0px));
  font-family: var(--font-ui), -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  color: var(--q-label);
  background:
    radial-gradient(90% 55% at 50% -8%, oklch(0.42 0.08 250 / 0.32), transparent 58%),
    radial-gradient(50% 40% at 0% 40%, oklch(0.38 0.06 145 / 0.12), transparent 55%),
    radial-gradient(45% 35% at 100% 60%, oklch(0.4 0.06 40 / 0.1), transparent 50%),
    oklch(0.09 0.015 260);
}

.quest-studio__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.quest-studio__aurora {
  position: absolute;
  inset: -25% -15% auto;
  height: 65%;
  background:
    radial-gradient(42% 50% at 28% 40%, oklch(0.55 0.1 250 / 0.26), transparent 70%),
    radial-gradient(36% 42% at 70% 30%, oklch(0.58 0.06 145 / 0.14), transparent 68%);
  filter: blur(42px);
}
.quest-studio__meadow {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: min(720px, 92vw);
  height: 70%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 70% 55% at 50% 80%, oklch(0.35 0.05 150 / 0.18), transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 70%, oklch(0.4 0.05 250 / 0.1), transparent 70%),
    radial-gradient(ellipse 35% 28% at 80% 65%, oklch(0.42 0.05 40 / 0.1), transparent 70%);
  filter: blur(8px);
  opacity: 0.9;
}
.quest-studio__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) var(--page-px, 20px) 0;
}

/* ── Header ─────────────────────────────────────────────── */
.quest-hero {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(18px, 3vw, 26px);
}
.quest-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quest-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--q-stroke);
  border-radius: 980px;
  background: var(--q-fill);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: var(--q-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s var(--q-ease), color 0.2s ease;
}
.quest-hero__back:hover {
  background: var(--q-fill-hi);
  color: var(--q-label);
}
.quest-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 980px;
  border: 1px solid var(--q-stroke);
  background: var(--q-fill);
  color: var(--q-secondary);
  font-size: 12px;
  font-weight: 500;
}
.quest-hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--q-blue);
  box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.25);
}
.quest-hero__copy { display: grid; gap: 8px; max-width: 520px; }
.quest-hero__title {
  margin: 0;
  font-size: clamp(34px, 6vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--q-label);
}
.quest-hero__sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--q-secondary);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Stats — compact glass chips */
.quest-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.quest-stat {
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--q-stroke);
  background: var(--q-fill);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08);
}
.quest-stat__val {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--q-label);
  font-variant-numeric: tabular-nums;
}
.quest-stat__val--accent { color: var(--q-ready); }
.quest-stat__val--blue { color: var(--q-blue); }
.quest-stat__val--green { color: var(--q-done); }
.quest-stat__lbl {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--q-tertiary);
  letter-spacing: -0.01em;
}

/* ── Segmented control ──────────────────────────────────── */
.quest-seg {
  display: flex;
  gap: 3px;
  padding: 4px;
  margin-bottom: 22px;
  border-radius: 14px;
  border: 1px solid var(--q-stroke);
  background: oklch(0 0 0 / 0.28);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.quest-seg::-webkit-scrollbar { display: none; }
.quest-seg__btn {
  flex: 1 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--q-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--q-ease), color 0.2s ease, box-shadow 0.2s ease;
}
.quest-seg__btn:hover { color: var(--q-label); }
.quest-seg__btn.on {
  color: var(--q-label);
  background: oklch(1 0 0 / 0.12);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.08), 0 6px 16px oklch(0 0 0 / 0.22);
}

/* ── Candy Crush winding map ────────────────────────────── */
.quest-map-wrap {
  display: grid;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto 40px;
}

/* Wide screens: map on the left, sticky detail sheet on the right */
@media (min-width: 860px) {
  .quest-map-wrap {
    max-width: 820px;
    grid-template-columns: minmax(0, 400px) minmax(280px, 1fr);
    grid-template-areas:
      'head head'
      'map  sheet';
    align-items: start;
    column-gap: 28px;
  }
  .quest-map-head { grid-area: head; }
  .quest-map { grid-area: map; }
  .quest-sheet {
    grid-area: sheet;
    position: sticky;
    top: calc(var(--nav-h, 72px) + 16px);
  }
}
.quest-map-head {
  display: flex;
  justify-content: center;
}
.quest-map-head__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 980px;
  border: 1px solid var(--q-stroke);
  background: var(--q-fill);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--q-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.quest-map-head__chip svg { color: #ffd60a; }
.quest-map {
  position: relative;
  width: min(380px, 100%);
  margin: 0 auto;
  isolation: isolate;
  border-radius: 28px;
  overflow: visible;
  container-type: inline-size;
  box-shadow:
    0 24px 48px oklch(0 0 0 / 0.28),
    inset 0 0 0 1px oklch(1 0 0 / 0.06);
}
.quest-map__terrain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(120% 60% at 50% 0%, oklch(0.4 0.08 200 / 0.22), transparent 55%),
    radial-gradient(80% 40% at 20% 70%, oklch(0.42 0.1 145 / 0.18), transparent 50%),
    linear-gradient(180deg, oklch(0.16 0.04 250 / 0.55), oklch(0.14 0.05 145 / 0.4));
}
.quest-hill {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
}
.quest-hill--a {
  width: 180px; height: 90px; left: -40px; top: 8%;
  background: radial-gradient(ellipse, oklch(0.4 0.08 145 / 0.35), transparent 70%);
}
.quest-hill--b {
  width: 220px; height: 110px; right: -50px; top: 28%;
  background: radial-gradient(ellipse, oklch(0.42 0.08 250 / 0.28), transparent 70%);
}
.quest-hill--c {
  width: 200px; height: 100px; left: -30px; top: 52%;
  background: radial-gradient(ellipse, oklch(0.45 0.08 80 / 0.22), transparent 70%);
}
.quest-hill--d {
  width: 240px; height: 120px; right: -60px; bottom: 6%;
  background: radial-gradient(ellipse, oklch(0.4 0.08 200 / 0.25), transparent 70%);
}

/* Ambient floating sparks — subtle map life */
.quest-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: oklch(0.95 0.05 90 / 0.8);
  box-shadow: 0 0 8px 2px oklch(0.9 0.1 90 / 0.35);
  animation: quest-spark-float 7s ease-in-out infinite;
}
.quest-spark--1 { left: 14%; top: 12%; animation-delay: 0s; }
.quest-spark--2 { right: 12%; top: 26%; animation-delay: 1.6s; width: 3px; height: 3px; }
.quest-spark--3 { left: 10%; top: 48%; animation-delay: 3.1s; width: 4px; height: 4px; }
.quest-spark--4 { right: 16%; top: 64%; animation-delay: 4.4s; }
.quest-spark--5 { left: 20%; top: 84%; animation-delay: 2.2s; width: 3px; height: 3px; }
@keyframes quest-spark-float {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  50%      { transform: translateY(-14px); opacity: 0.9; }
}

.quest-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.quest-map__trail-bg { opacity: 0.95; }
.quest-map__trail-shine { opacity: 0.7; }
.quest-map__trail-dots { opacity: 0.85; }
.quest-map__trail-done {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: quest-trail-draw 1.1s var(--q-ease) both;
}
@keyframes quest-trail-draw {
  from { stroke-dashoffset: 1000; opacity: 0.35; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

/* Level nodes — absolute on the winding path.
   Sized in cqw so they scale fluidly with the map at any width. */
.quest-node {
  position: absolute;
  z-index: 2;
  /* px fallback first, fluid cqw when container queries are supported */
  width: 78px;
  height: 78px;
  width: clamp(52px, 21.5cqw, 84px);
  height: clamp(52px, 21.5cqw, 84px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  animation: quest-node-pop 0.55s var(--q-spring) both;
}
@keyframes quest-node-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.quest-node__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease, transform 0.25s var(--q-spring);
}
.quest-node__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--q-label);
  background:
    radial-gradient(circle at 32% 28%, oklch(1 0 0 / 0.4), transparent 45%),
    linear-gradient(160deg, oklch(0.36 0.05 260), oklch(0.2 0.03 260));
  box-shadow:
    0 12px 24px oklch(0 0 0 / 0.4),
    0 3px 0 oklch(1 0 0 / 0.14) inset,
    0 -4px 10px oklch(0 0 0 / 0.28) inset,
    0 0 0 4px oklch(1 0 0 / 0.1);
  transition: transform 0.25s var(--q-spring), box-shadow 0.25s ease, filter 0.2s ease;
}
.quest-node__n {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: grid;
  place-items: center;
  background: oklch(0.12 0.02 260);
  border: 1px solid var(--q-stroke-hi);
  color: var(--q-label);
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.35);
  z-index: 3;
}
.quest-node__you {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px 2px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1c1200;
  background: linear-gradient(180deg, #ffd60a, #ff9f0a);
  box-shadow: 0 4px 12px oklch(0.75 0.16 80 / 0.45);
  animation: quest-you-bob 1.6s ease-in-out infinite;
}
.quest-node__you::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: #ff9f0a;
  border-radius: 2px;
}

/* Three stars over cleared levels — Candy Crush trophy moment */
.quest-node__stars {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 1px;
  color: #ffd60a;
  filter: drop-shadow(0 2px 6px oklch(0 0 0 / 0.5));
  pointer-events: none;
  z-index: 3;
}
.quest-node__stars svg {
  animation: quest-star-in 0.5s var(--q-spring) both;
}
.quest-node__stars svg:nth-child(1) { animation-delay: 0.05s; transform: rotate(-14deg); }
.quest-node__stars svg:nth-child(2) { animation-delay: 0.15s; margin-bottom: 4px; }
.quest-node__stars svg:nth-child(3) { animation-delay: 0.25s; transform: rotate(14deg); }
@keyframes quest-star-in {
  from { opacity: 0; scale: 0.3; }
  to   { opacity: 1; scale: 1; }
}
@keyframes quest-you-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

.quest-node:hover:not(:disabled) .quest-node__core {
  transform: scale(1.08) translateY(-2px);
}
.quest-node:active:not(:disabled) .quest-node__core {
  transform: scale(0.96);
}
.quest-node:focus-visible {
  outline: none;
}
.quest-node:focus-visible .quest-node__ring {
  border-color: var(--q-blue);
  transform: scale(1.08);
}
.quest-node.is-selected .quest-node__ring {
  border-color: oklch(1 0 0 / 0.45);
  transform: scale(1.06);
}
.quest-node.done .quest-node__core {
  background:
    radial-gradient(circle at 32% 28%, oklch(1 0 0 / 0.45), transparent 45%),
    linear-gradient(160deg, #34c759, #30d158 60%, #248a3d);
  color: #fff;
  box-shadow:
    0 12px 26px oklch(0.45 0.14 145 / 0.4),
    0 3px 0 oklch(1 0 0 / 0.25) inset,
    0 0 0 4px oklch(0.55 0.14 145 / 0.4);
}
.quest-node.done .quest-node__n {
  background: var(--q-done);
  border-color: transparent;
  color: #fff;
}
.quest-node.ready .quest-node__core,
.quest-node.current .quest-node__core {
  background:
    radial-gradient(circle at 32% 28%, oklch(1 0 0 / 0.5), transparent 45%),
    linear-gradient(160deg, #ffd60a, #ff9f0a 55%, #ff6b00);
  color: #1c1200;
  box-shadow:
    0 12px 28px oklch(0.7 0.16 55 / 0.45),
    0 3px 0 oklch(1 0 0 / 0.35) inset,
    0 0 0 5px oklch(0.8 0.16 55 / 0.35);
}
/* Pulse via transform/opacity halo — GPU-composited, no box-shadow anim */
.quest-node.ready .quest-node__core::after,
.quest-node.current .quest-node__core::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid oklch(0.85 0.16 80 / 0.55);
  animation: quest-halo 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  will-change: transform, opacity;
}
@keyframes quest-halo {
  0%        { transform: scale(1); opacity: 0.85; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}
.quest-node.ready .quest-node__n,
.quest-node.current .quest-node__n {
  background: #1c1200;
  border-color: transparent;
  color: #ffd60a;
}
.quest-node.locked {
  cursor: not-allowed;
}
.quest-node.locked .quest-node__core {
  opacity: 0.42;
  filter: grayscale(0.4);
  box-shadow:
    0 8px 16px oklch(0 0 0 / 0.3),
    0 0 0 3px oklch(1 0 0 / 0.06);
}

/* Finish flag at the last level */
.quest-map__finish {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 980px;
  border: 1px solid oklch(0.8 0.14 90 / 0.35);
  background: oklch(0.18 0.03 80 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffd60a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px oklch(0 0 0 / 0.35);
  pointer-events: none;
}

/* Selected level sheet under the map */
.quest-sheet {
  padding: 16px 18px 18px;
  border-radius: 20px;
  border: 1px solid var(--q-stroke);
  background: oklch(0.16 0.02 260 / 0.78);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    0 16px 40px oklch(0 0 0 / 0.32),
    inset 0 1px 0 oklch(1 0 0 / 0.1);
  animation: quest-sheet-in 0.35s var(--q-spring) both;
}
.quest-sheet.is-ready {
  border-color: oklch(0.8 0.16 55 / 0.45);
}
.quest-sheet.is-locked {
  opacity: 0.85;
}
.quest-sheet__fill.is-done {
  background: linear-gradient(90deg, var(--q-done), #63e6a0);
}
@keyframes quest-sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.quest-sheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.quest-sheet__lvlchip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--q-label);
  background: oklch(1 0 0 / 0.1);
  border: 1px solid var(--q-stroke-hi);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12);
}
.quest-sheet__lvlchip.is-done {
  color: #fff;
  background: linear-gradient(160deg, #34c759, #248a3d);
  border-color: transparent;
}
.quest-sheet__lvlchip.is-ready {
  color: #1c1200;
  background: linear-gradient(160deg, #ffd60a, #ff9f0a);
  border-color: transparent;
}
.quest-sheet__lvl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--q-tertiary);
}
.quest-sheet__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--q-label);
}
.quest-sheet__desc {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--q-secondary);
}
.quest-sheet__bar {
  margin-top: 12px;
  height: 6px;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.08);
  overflow: hidden;
}
.quest-sheet__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9f0a, #ffd60a);
  transition: width 0.55s var(--q-spring);
}
.quest-sheet__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.quest-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
}

.quest-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--q-secondary);
  background: oklch(1 0 0 / 0.06);
  border: 1px solid var(--q-stroke);
}
.quest-pill.xp { color: #63e6a0; border-color: oklch(0.7 0.14 145 / 0.3); }
.quest-pill.gift { color: #ffd60a; border-color: oklch(0.8 0.14 90 / 0.3); }

.quest-claim {
  margin-top: 10px;
  min-height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 980px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #1c1200;
  background: linear-gradient(180deg, #ffd60a, #ff9f0a);
  box-shadow: 0 4px 12px oklch(0.7 0.16 55 / 0.35);
  cursor: pointer;
  transition: transform 0.2s var(--q-spring), filter 0.15s ease;
}
.quest-claim:hover { filter: brightness(1.05); transform: translateY(-1px); }
.quest-claim:active { transform: scale(0.97); }

/* ── Daily / weekly lists ───────────────────────────────── */
.quest-list { display: flex; flex-direction: column; gap: 12px; }
.quest-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--q-stroke);
  background: oklch(0.16 0.02 260 / 0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  cursor: default;
  transition: border-color 0.2s ease, transform 0.2s var(--q-spring);
  animation: quest-level-in 0.4s var(--q-spring) both;
}
.quest-card:nth-child(1) { animation-delay: 0.04s; }
.quest-card:nth-child(2) { animation-delay: 0.08s; }
.quest-card:nth-child(3) { animation-delay: 0.12s; }
.quest-card:nth-child(4) { animation-delay: 0.16s; }
.quest-card.ready { border-color: oklch(0.8 0.16 55 / 0.4); }
.quest-card.done { opacity: 0.72; }
.quest-card:hover { transform: translateY(-2px); border-color: var(--q-stroke-hi); }
.quest-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: oklch(0.55 0.14 250 / 0.18);
  color: var(--q-blue);
  border: 1px solid oklch(0.55 0.14 250 / 0.25);
}
.quest-card.ready .quest-card-icon {
  background: oklch(0.75 0.14 55 / 0.2);
  color: var(--q-ready);
  border-color: oklch(0.8 0.16 55 / 0.35);
}
.quest-card-body { flex: 1; min-width: 0; }
.quest-card-title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--q-label);
}
.quest-card-desc {
  font-size: 12.5px;
  color: var(--q-secondary);
  margin-top: 3px;
  line-height: 1.4;
}
.quest-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Back-compat reward pills */
.quest-reward-pill,
.quest-card-meta .quest-reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--q-secondary);
  background: oklch(1 0 0 / 0.06);
  border: 1px solid var(--q-stroke);
  font-family: inherit;
  text-transform: none;
}
.quest-reward-pill.xp { color: #63e6a0; border-color: oklch(0.7 0.14 145 / 0.3); }
.quest-reward-pill.gift { color: #ffd60a; border-color: oklch(0.8 0.14 90 / 0.3); }

.quest-claim-btn {
  min-height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 980px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #1c1200;
  background: linear-gradient(180deg, #ffd60a, #ff9f0a);
  box-shadow: 0 4px 12px oklch(0.7 0.16 55 / 0.3);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s var(--q-spring), filter 0.15s ease;
}
.quest-claim-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

.quest-go {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 980px;
  border: 1px solid var(--q-stroke-hi);
  background: var(--q-fill);
  color: var(--q-label);
  font-family: inherit;
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.quest-go:hover { background: var(--q-fill-hi); }
.quest-done-chip {
  font-size: 12px;
  font-weight: 560;
  color: var(--q-done);
  flex-shrink: 0;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.badge-card {
  position: relative;
  padding: 20px 14px 16px;
  border-radius: 18px;
  text-align: center;
  background: oklch(0.16 0.02 260 / 0.7);
  border: 1px solid var(--q-stroke);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 0.22s var(--q-spring), border-color 0.2s ease;
  cursor: default;
}
.badge-card.unlocked:hover {
  transform: translateY(-3px);
  border-color: var(--q-stroke-hi);
}
.badge-card.locked { opacity: 0.4; filter: grayscale(0.7); }
.badge-emoji { font-size: 36px; line-height: 1; margin-bottom: 8px; }
.badge-name {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--q-label);
}
.badge-rarity {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--q-tertiary);
  text-transform: capitalize;
  letter-spacing: -0.01em;
  font-family: inherit;
}
.badge-rarity.rare { color: var(--q-blue); }
.badge-rarity.epic { color: var(--q-ready); }
.badge-rarity.legendary { color: #ffd60a; }

/* ── Rewards ────────────────────────────────────────────── */
.quest-section-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 560;
  color: var(--q-tertiary);
  letter-spacing: -0.01em;
}
.quest-section-label + .quest-section-label,
.title-showcase + .quest-section-label { margin-top: 22px; }

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.gift-card {
  position: relative;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px solid var(--q-stroke);
  background: oklch(0.16 0.02 260 / 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 0.22s var(--q-spring);
}
.gift-card:hover { transform: translateY(-2px); }
.gift-card.claimed { opacity: 0.75; }
.gift-card-emoji { font-size: 32px; margin-bottom: 10px; }
.gift-card-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffd60a;
}
.gift-card-label {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--q-label);
  margin-top: 4px;
}
.gift-card-partner {
  margin-top: 6px;
  font-size: 11px;
  color: var(--q-tertiary);
  letter-spacing: -0.01em;
}
.gift-card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 560;
  padding: 3px 8px;
  border-radius: 99px;
  background: oklch(0.55 0.14 145 / 0.18);
  color: var(--q-done);
  border: 1px solid oklch(0.55 0.14 145 / 0.3);
}

.title-showcase { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: oklch(0.16 0.02 260 / 0.65);
  border: 1px solid var(--q-stroke);
}
.title-row.unlocked { border-color: oklch(0.55 0.14 250 / 0.3); }
.title-row.locked { opacity: 0.4; }
.title-row.active {
  border-color: oklch(0.55 0.14 145 / 0.4);
  background: oklch(0.35 0.08 145 / 0.15);
}
.title-crown { font-size: 18px; }
.title-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--q-label);
}
.title-tier {
  margin-left: auto;
  font-size: 12px;
  color: var(--q-tertiary);
  font-weight: 500;
}
.quest-footnote {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--q-tertiary);
  max-width: 480px;
}

/* ── Mission Complete overlay — gold celebration ────────── */
.quest-reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(60% 50% at 50% 42%, oklch(0.55 0.12 80 / 0.14), transparent 70%),
    oklch(0 0 0 / 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  animation: qr-overlay-in 0.3s var(--q-ease) both;
}
@keyframes qr-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.quest-reward-card {
  position: relative;
  text-align: center;
  max-width: 400px;
  width: 100%;
  border-radius: 28px;
  border: 1px solid oklch(0.8 0.12 85 / 0.28);
  background: oklch(0.13 0.02 260 / 0.94);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    0 32px 80px oklch(0 0 0 / 0.55),
    0 0 60px oklch(0.7 0.14 80 / 0.14),
    inset 0 1px 0 oklch(1 0 0 / 0.14);
  overflow: hidden;
  animation: qr-card-in 0.55s var(--q-spring) both;
}
@keyframes qr-card-in {
  from { opacity: 0; transform: translateY(28px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.quest-reward-card__aurora {
  position: absolute;
  inset: -30% -20% auto;
  height: 60%;
  background:
    radial-gradient(45% 55% at 50% 45%, oklch(0.75 0.15 85 / 0.3), transparent 70%),
    radial-gradient(35% 45% at 25% 55%, oklch(0.65 0.14 55 / 0.16), transparent 70%);
  filter: blur(34px);
  pointer-events: none;
}
.quest-reward-body {
  position: relative;
  z-index: 1;
  padding: 34px 30px 30px;
}

/* Three arcing stars */
.quest-reward-stars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  color: #ffd60a;
  filter: drop-shadow(0 4px 14px oklch(0.75 0.16 80 / 0.5));
  margin-bottom: 4px;
}
.quest-reward-stars svg { animation: qr-star-pop 0.55s var(--q-spring) both; }
.quest-reward-stars svg:nth-child(1) { animation-delay: 0.22s; transform: rotate(-16deg) translateY(6px); }
.quest-reward-stars svg:nth-child(2) { animation-delay: 0.34s; margin-bottom: 10px; }
.quest-reward-stars svg:nth-child(3) { animation-delay: 0.46s; transform: rotate(16deg) translateY(6px); }
@keyframes qr-star-pop {
  0%   { opacity: 0; scale: 0.2; }
  60%  { scale: 1.25; }
  100% { opacity: 1; scale: 1; }
}

/* Gold medallion */
.quest-reward-medal {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 6px auto 0;
}
.quest-reward-medal__halo {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid oklch(0.85 0.15 85 / 0.5);
  animation: qr-halo 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite 0.6s;
}
@keyframes qr-halo {
  0%        { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
.quest-reward-medal__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #1c1200;
  background:
    radial-gradient(circle at 32% 26%, oklch(1 0 0 / 0.5), transparent 46%),
    linear-gradient(160deg, #ffd60a, #ff9f0a 60%, #ff6b00);
  box-shadow:
    0 16px 36px oklch(0.7 0.16 55 / 0.45),
    0 3px 0 oklch(1 0 0 / 0.4) inset,
    0 -5px 12px oklch(0.5 0.14 45 / 0.5) inset,
    0 0 0 5px oklch(0.85 0.14 85 / 0.25);
  animation: qr-star-pop 0.6s var(--q-spring) both 0.1s;
}
.quest-reward-medal__emoji { font-size: 40px; line-height: 1; }

.quest-reward-heading {
  margin-top: 18px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: inherit;
  background: linear-gradient(180deg, #ffe58f, #ffd60a 55%, #ff9f0a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffd60a;
  animation: qr-rise 0.5s var(--q-spring) both 0.25s;
}
.quest-reward-sub {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 550;
  color: var(--q-secondary);
  font-family: inherit;
  letter-spacing: -0.01em;
  text-transform: none;
  animation: qr-rise 0.5s var(--q-spring) both 0.32s;
}
@keyframes qr-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Reward tiles */
.quest-reward-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.qr-tile {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 86px;
  max-width: 130px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  border: 1px solid var(--q-stroke);
  background: oklch(1 0 0 / 0.06);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08);
  animation: qr-star-pop 0.5s var(--q-spring) both;
}
.quest-reward-items .qr-tile:nth-child(1) { animation-delay: 0.42s; }
.quest-reward-items .qr-tile:nth-child(2) { animation-delay: 0.5s; }
.quest-reward-items .qr-tile:nth-child(3) { animation-delay: 0.58s; }
.quest-reward-items .qr-tile:nth-child(4) { animation-delay: 0.66s; }
.qr-tile__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-bottom: 4px;
  color: var(--q-label);
  background: oklch(1 0 0 / 0.08);
}
.qr-tile__ico--emoji { font-size: 19px; }
.qr-tile__val {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--q-label);
  line-height: 1.2;
}
.qr-tile__lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--q-tertiary);
}
.qr-tile--xp .qr-tile__ico { color: #63e6a0; background: oklch(0.6 0.14 145 / 0.18); }
.qr-tile--xp .qr-tile__val { color: #63e6a0; }
.qr-tile--title .qr-tile__ico { color: #64d2ff; background: oklch(0.6 0.12 240 / 0.2); }
.qr-tile--gift .qr-tile__ico { color: #ffd60a; background: oklch(0.75 0.14 85 / 0.18); }
.qr-tile--gift .qr-tile__val { color: #ffd60a; }

/* Gold CTA with shine sweep */
.quest-reward-close {
  position: relative;
  margin-top: 24px;
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 980px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #1c1200;
  background: linear-gradient(180deg, #ffd60a, #ff9f0a);
  box-shadow:
    0 10px 26px oklch(0.7 0.16 55 / 0.4),
    inset 0 1px 0 oklch(1 0 0 / 0.45);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s var(--q-spring), filter 0.15s ease;
  animation: qr-rise 0.5s var(--q-spring) both 0.55s;
}
.quest-reward-close::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 / 0.5), transparent);
  transform: skewX(-18deg);
  animation: qr-shine 2.6s ease-in-out infinite 1.2s;
}
@keyframes qr-shine {
  0%, 55%  { left: -60%; }
  85%, 100% { left: 130%; }
}
.quest-reward-close:hover { filter: brightness(1.06); transform: translateY(-1px); }
.quest-reward-close:active { transform: scale(0.98); }

.quest-nav-dot {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--q-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px oklch(0.1 0.02 260);
}
.nav-tab { position: relative; }
.xp-hud { cursor: pointer; }

/* Legacy path class hooks (if any remain) */
.quest-path-wrap { position: relative; }
.quest-path-line { display: none; }
.quest-hero-strip { display: contents; }
.quest-stat-card { display: contents; }

@keyframes quest-level-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .quest-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quest-map-wrap { max-width: none; }
  .quest-map { width: 100%; }
  .quest-sheet { border-radius: 18px; }
  .quest-card { flex-wrap: wrap; }
  .quest-claim, .quest-claim-btn, .quest-go { width: 100%; }
}

/* Phones (<=480px): comfortable touch sizes, no cramped grids */
@media (max-width: 480px) {
  .quest-seg__btn { min-height: 42px; }
  .quest-node { width: clamp(56px, 22cqw, 72px); height: clamp(56px, 22cqw, 72px); }
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .badge-emoji { font-size: 30px; }
  .rewards-grid { grid-template-columns: 1fr; }
  .quest-sheet { padding: 14px 15px 16px; }
  .quest-sheet__title { font-size: 16.5px; }
  .title-row { padding: 12px 14px; }
  .title-label { font-size: 15px; }
  .quest-reward-body { padding: 26px 20px 22px; }
  .quest-reward-medal { width: 80px; height: 80px; }
  .quest-reward-medal__emoji { font-size: 34px; }
  .quest-reward-heading { font-size: 24px; }
  .qr-tile { min-width: 78px; padding: 10px 10px 9px; }
}

/* Very narrow phones (<=380px): tighten badges so nothing collides */
@media (max-width: 380px) {
  .quest-stat__val { font-size: 22px; }
  .quest-hero__badge { display: none; }
  .quest-node__n { font-size: 10.5px; min-width: 20px; height: 19px; bottom: -8px; }
  .quest-node__you { top: -23px; font-size: 9px; }
  .quest-node__stars { top: -13px; }
  .quest-map__finish { font-size: 10px; padding: 4px 10px; }
}

/* Short landscape phones: keep the sheet reachable, trim padding */
@media (max-height: 480px) and (orientation: landscape) {
  .quest-hero__title { font-size: 28px; }
  .quest-studio__inner { padding-top: 12px; }
  .quest-map-wrap {
    max-width: 760px;
    grid-template-columns: minmax(0, 340px) minmax(240px, 1fr);
    grid-template-areas:
      'head head'
      'map  sheet';
    align-items: start;
    column-gap: 20px;
  }
  .quest-map-head { grid-area: head; }
  .quest-map { grid-area: map; }
  .quest-sheet { grid-area: sheet; position: sticky; top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .quest-node,
  .quest-node.ready .quest-node__core,
  .quest-node.current .quest-node__core,
  .quest-node.ready .quest-node__core::after,
  .quest-node.current .quest-node__core::after,
  .quest-node__you,
  .quest-node__stars svg,
  .quest-spark,
  .quest-map__trail-done,
  .quest-sheet,
  .quest-card,
  .quest-reward-overlay,
  .quest-reward-card,
  .quest-reward-stars svg,
  .quest-reward-medal__halo,
  .quest-reward-medal__core,
  .quest-reward-heading,
  .quest-reward-sub,
  .qr-tile,
  .quest-reward-close,
  .quest-reward-close::after {
    animation: none !important;
  }
  .quest-node:hover:not(:disabled) .quest-node__core,
  .quest-card:hover { transform: none; }
}