/* Missões & recompensas: level hero, quest cards, daily streak and the badge collection. */
.quest-page {
  --quest-gold: #ffcf6b;
  --quest-ready: #b88cff;
  --quest-done: var(--green);
  --quest-glass: #ffffff08;
  --quest-line: #ffffff14;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
:root[data-theme='light'] .quest-page {
  --quest-gold: #b57a0c;
  --quest-ready: #7741dc;
  --quest-glass: #7741dc08;
  --quest-line: #7741dc1c;
}
.quest-page > .page-top { margin-bottom: -6px; }
.quest-page .missions-layout { margin: 0; }

/* Section headings shared by missions and the collection. */
.quest-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.quest-section-head h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.quest-section-head h2 > .icon { width: 22px; height: 22px; color: var(--quest-gold); }
.quest-count { padding: 5px 12px; border: 1px solid var(--quest-line); border-radius: 999px; background: var(--quest-glass); color: var(--muted); font-size: 12px; font-weight: 600; }

/* Level hero. */
.quest-hero {
  --family: #a57aff;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'badge copy' 'stats stats';
  align-items: center;
  gap: 22px 34px;
  padding: 30px 34px 24px;
  overflow: hidden;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--family) 38%, var(--border));
  background:
    radial-gradient(ellipse 46% 90% at 8% 30%, color-mix(in srgb, var(--family) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 80% at 100% 0%, #8a52ff2e, transparent 70%),
    linear-gradient(120deg, #241a3a, #17131f 62%);
  color: #fff;
  box-shadow: 0 22px 60px #0a051a40, inset 0 1px #ffffff14;
}
/* A faint pixel grid nods to the badge art without competing with it. */
.quest-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.quest-hero-badge { grid-area: badge; position: relative; display: grid; place-items: center; width: 168px; aspect-ratio: 1; }
.quest-hero-badge img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 14px 22px #0008) drop-shadow(0 0 26px color-mix(in srgb, var(--family) 55%, transparent));
  animation: quest-float 5s ease-in-out infinite;
}
.quest-hero-rays {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--family) 30%, transparent) 0 8deg, transparent 8deg 24deg);
  mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  animation: quest-spin 28s linear infinite;
}
.quest-hero-copy { grid-area: copy; min-width: 0; }
.quest-kicker { display: inline-flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--family) 65%, #fff); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.quest-kicker .icon { width: 15px; height: 15px; }
.quest-hero h2 { margin-top: 8px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -1.2px; text-shadow: 0 4px 24px #0006; }
.quest-level { margin-top: 10px; display: inline-flex; padding: 4px 12px; border: 1px solid #ffffff26; border-radius: 999px; background: #ffffff10; color: #e9defc; font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 14px; }
.quest-level strong { margin-left: 4px; color: #fff; }
.quest-xp { margin-top: 20px; max-width: 560px; }
.quest-xp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.quest-xp-head strong { font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 22px; }
.quest-xp-head small { color: #cbbfe0; font-size: 13px; font-weight: 500; }
.quest-xp-head span { color: #cbbfe0; font-size: 12px; }
.quest-page .quest-xp-track { height: 12px; border-radius: 99px; background: #ffffff14; box-shadow: inset 0 1px 3px #0006; }
.quest-page .quest-xp-track > span { border-radius: 99px; background: linear-gradient(90deg, #8950fa, color-mix(in srgb, var(--family) 60%, #d6a8ff)); box-shadow: 0 0 16px color-mix(in srgb, var(--family) 55%, transparent); min-width: 12px; }


.quest-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding-top: 20px; border-top: 1px solid #ffffff14; }
.quest-stats > div { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'icon value' 'icon label'; align-items: center; column-gap: 12px; padding: 10px 12px; border-radius: 12px; background: #ffffff08; }
.quest-stats .icon { grid-area: icon; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 10px; background: color-mix(in srgb, var(--family) 20%, #ffffff0a); color: color-mix(in srgb, var(--family) 70%, #fff); }
.quest-stats dt { grid-area: label; color: #b9aed0; font-size: 11px; }
.quest-stats dd { grid-area: value; margin: 0; font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 19px; font-weight: 700; line-height: 1.2; }

/* Each mission is a small game world; the artwork stays decorative. */
.quest-page .mission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.quest-page .mission-card {
  --mission-color: #ba91ff;
  --mission-art: url('assets/missions/favorites-pixel.webp');
  --state: #ba91ff;
  --quest-gold: #ffd585;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 312px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mission-color) 35%, #202334);
  border-radius: 16px;
  background: #10131d;
  color: #f6f4ff;
  box-shadow: 0 12px 28px #03051130, inset 0 1px #ffffff0d;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.quest-page .mission-card[data-mission='play'] { --mission-color: #68e6ad; --mission-art: url('assets/missions/first-play-pixel.webp'); }
.quest-page .mission-card[data-mission='social'] { --mission-color: #6bdbff; --mission-art: url('assets/missions/community-pixel.webp'); }
.quest-page .mission-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--mission-art) right top / cover no-repeat;
  image-rendering: pixelated;
}
.quest-page .mission-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #080b1818 0%, #10131d05 26%, #10131dba 48%, #10131df5 64%, #10131d 80%);
  box-shadow: inset 0 1px color-mix(in srgb, var(--mission-color) 45%, transparent);
}
.quest-page .mission-card.is-ready { --state: #d0adff; border-color: #b88cff9c; box-shadow: 0 0 0 1px #b88cff24, 0 14px 38px #8a52ff26; }
.quest-page .mission-card.is-claimed { --state: #72e8b4; }
.quest-page .mission-card.is-pending { --state: #d0c5e4; }
.quest-page .mission-card:focus-within { border-color: var(--mission-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mission-color) 25%, transparent), 0 16px 36px #03051155; }
.mission-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 48px; margin-bottom: 60px; }
.mission-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--mission-color) 40%, transparent); border-radius: 12px; background: #10131dd9; color: var(--mission-color); box-shadow: 0 4px 16px #0003, inset 0 1px #ffffff12; }
.mission-icon .icon { width: 24px; height: 24px; }
.mission-status { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 5px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--state) 30%, transparent); border-radius: 999px; background: #10131deb; color: var(--state); font-size: 11px; font-weight: 700; text-align: center; line-height: 1.4; }
.mission-status .icon { width: 13px; height: 13px; }
.quest-page .mission-card.is-ready .mission-status { animation: quest-pulse 2s ease-in-out infinite; }
.quest-page .mission-card h3 { color: #f6f4ff; font-size: 18px; line-height: 1.25; text-shadow: 0 2px 10px #07091480; }
.quest-page .mission-card p { margin: 7px 0 20px; color: #c1bfce; font-size: 13px; line-height: 1.55; }
.quest-page .mission-card .progress-track { height: 6px; margin-top: auto; background: #ffffff12; box-shadow: inset 0 1px 3px #0004; }
.quest-page .mission-card.is-claimed .progress-track > span { background: linear-gradient(90deg, #2fbf86, #6ff0bf); box-shadow: 0 0 12px #4bdba366; }
.quest-page .mission-card .mission-reward { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.xp-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--quest-gold) 14%, transparent); color: var(--quest-gold); font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 14px; font-weight: 700; }
.xp-pill .icon { width: 14px; height: 14px; }
.quest-page .mission-card .xp-pill { color: #ffd585; background: #ffd58514; border: 1px solid #ffd58520; font-size: 13px; }
.quest-page .mission-card.is-claimed .xp-pill { color: #d7be8f; background: #ffd5850a; }
.quest-page .mission-reward .button { width: auto; min-height: 34px; margin: 0; color: #f6f4ff; background: #ffffff0b; border-color: #ffffff20; }
.quest-page .mission-reward .button:hover:not(:disabled) { background: #ffffff16; border-color: var(--mission-color); }
.quest-page .mission-reward .button.primary { color: #fff; background: #8950e6; border-color: #b88cff80; box-shadow: 0 4px 16px #8950e633; }
.quest-page .mission-reward .button.primary:hover:not(:disabled) { background: #9b65f1; }
.quest-page .mission-reward .button:disabled { color: #b2aec2; background: #ffffff05; border-color: #ffffff10; opacity: 1; }
.quest-page .mission-reward .button:focus-visible { outline: 2px solid var(--mission-color); outline-offset: 4px; }
.quest-page .mission-reward .button .icon { width: 14px; height: 14px; }

/* Keep the artwork and copy at the same contrast in both themes. */
:root[data-theme='light'] .quest-page .mission-card { box-shadow: 0 10px 26px #1c144b22; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .quest-page .mission-card:hover { transform: translateY(-4px); border-color: var(--mission-color); box-shadow: 0 16px 36px #03051155, 0 0 24px color-mix(in srgb, var(--mission-color) 12%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  /* The shared motion layer also sets inline tilt and transition styles. */
  .quest-page .mission-card, .quest-page .mission-card::before { transition: none !important; }
  .quest-page .mission-card { transform: none !important; }
  .quest-page .mission-card.is-ready .mission-status { animation: none; }
}

/* Daily reward with a seven day streak track. */
.daily-quest { display: flex; flex-direction: column; gap: 16px; }
.daily-quest .panel-title { margin: 0; }
.daily-reward { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--quest-line); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--quest-gold) 12%, transparent), transparent 70%), var(--quest-glass); }
.daily-chest { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(140deg, #ffcf6b, #e8873a); color: #3b1d05; box-shadow: 0 8px 22px #e8973a40; }
.daily-chest .icon { width: 26px; height: 26px; }
.daily-reward strong { display: block; font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 22px; line-height: 1.1; color: var(--quest-gold); }
.daily-reward small { color: var(--muted); }
.streak-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.streak-track li { position: relative; display: grid; place-items: center; }
.streak-track span { display: grid; place-items: center; width: 100%; max-width: 38px; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--faint); font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 12px; font-weight: 700; }
.streak-track .icon { width: 15px; height: 15px; }
.streak-track .is-done span { border-color: transparent; background: linear-gradient(140deg, #ffb55c, #ff7a45); color: #fff; box-shadow: 0 4px 12px #ff8a4a40; }
.streak-track .is-today span { border: 1px dashed var(--quest-ready); color: var(--quest-ready); background: color-mix(in srgb, var(--quest-ready) 10%, transparent); animation: quest-pulse 2s ease-in-out infinite; }
.daily-streak { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.daily-streak .icon { width: 16px; height: 16px; color: #ff8a4a; }
.daily-streak strong { color: var(--text); }
.daily-quest > .button { margin: 0; min-height: 44px; font-size: 14px; }
.daily-reset { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--faint); font-size: 11px; line-height: 1.45; }
.daily-reset .icon { width: 14px; height: 14px; margin-top: 1px; }

/* Badge collection. */
.badge-families { display: flex; flex-direction: column; gap: 12px; }
.badge-family {
  --family: #a57aff;
  border: 1px solid color-mix(in srgb, var(--family) 28%, var(--border));
  border-radius: 16px;
  background: radial-gradient(ellipse 50% 120% at 0% 0%, color-mix(in srgb, var(--family) 10%, transparent), transparent 70%), var(--surface);
  box-shadow: var(--shadow);
}
.badge-family > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: 16px; }
.badge-family > summary::-webkit-details-marker { display: none; }
.badge-family > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.badge-family > summary > .icon { width: 18px; height: 18px; color: var(--muted); transition: transform .25s var(--soft-ease, ease); }
.badge-family[open] > summary > .icon { transform: rotate(180deg); }
.badge-family-gem { width: 14px; height: 14px; flex: none; transform: rotate(45deg); border-radius: 3px; background: var(--family); box-shadow: 0 0 12px color-mix(in srgb, var(--family) 70%, transparent), inset -3px -3px #0003; }
.badge-family-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.badge-family-title strong { font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 16px; }
.badge-family-count { color: var(--muted); font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin: 0; padding: 4px 18px 18px; list-style: none; }
.badge-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 10px; border: 1px solid var(--quest-line); border-radius: 14px; background: var(--quest-glass); text-align: center; transition: transform .25s var(--soft-ease, ease), border-color .25s, box-shadow .25s; }
.badge-art { display: grid; place-items: center; width: 84px; aspect-ratio: 1; margin-bottom: 6px; }
.badge-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.badge-tile strong { max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.badge-tile small { color: var(--muted); font-size: 11px; }
.badge-tile.is-earned .badge-art img { filter: drop-shadow(0 6px 10px #0005); transition: transform .3s var(--soft-ease, ease); }
.badge-tile.is-earned:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--family) 50%, transparent); box-shadow: 0 12px 26px color-mix(in srgb, var(--family) 18%, transparent); }
.badge-tile.is-earned:hover .badge-art img { transform: scale(1.06) rotate(-2deg); }
.badge-tile.is-current { border-color: color-mix(in srgb, var(--family) 65%, transparent); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--family) 22%, transparent), transparent 70%), var(--quest-glass); box-shadow: 0 0 0 1px color-mix(in srgb, var(--family) 35%, transparent), 0 10px 28px color-mix(in srgb, var(--family) 22%, transparent); }
.badge-tile.is-current small { color: color-mix(in srgb, var(--family) 70%, var(--text)); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }


.achievement-strip { margin-top: 24px; }
.achievement-strip h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 16px; }
.achievement-strip h3 .icon { width: 18px; height: 18px; color: var(--quest-gold); }
.achievement-strip ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.achievement-chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--quest-gold) 30%, var(--border)); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--quest-gold) 10%, transparent), transparent 70%), var(--surface); }
.achievement-chip > .icon { flex: none; width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 11px; background: color-mix(in srgb, var(--quest-gold) 18%, transparent); color: var(--quest-gold); }
.achievement-chip strong { display: block; font-size: 13px; }
.achievement-chip small { color: var(--muted); }

@keyframes quest-float { 50% { transform: translateY(-6px); } }
@keyframes quest-spin { to { transform: rotate(1turn); } }
@keyframes quest-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--quest-ready) 18%, transparent); } }

@media (min-width: 1100px) {
  .quest-page .missions-layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px); align-items: start; }
}
@media (max-width: 1100px) {
  .quest-hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'badge copy' 'stats stats'; padding: 24px; }
  .quest-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .quest-page { gap: 22px; }
  .quest-hero { grid-template-columns: 1fr; grid-template-areas: 'badge' 'copy' 'stats'; justify-items: center; gap: 18px; padding: 22px 16px 18px; text-align: center; }
  .quest-hero-badge { width: 136px; }
  .quest-hero-copy { width: 100%; }
  .quest-xp { margin-inline: auto; }
  .quest-xp-head { justify-content: center; }
  .quest-stats { width: 100%; }
  .quest-stats > div { text-align: left; }
  .quest-stats dd { font-size: 17px; }
  .quest-page .mission-grid { grid-template-columns: 1fr; }
  .badge-family > summary { padding: 12px 14px; }
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 2px 12px 14px; }
  .badge-art { width: 68px; }
}