/* ==========================================================================
   bust.fun - MISSIONS panel styles. Reuses the global synthwave design tokens
   (--surface*, --line*, --fg*, --muted, --brand, --accent, --violet, --gold,
   --win, --neon-glow*, --sp-*, --r-*, --fs-*, --fw-*). Feature-scoped: every
   selector is under .mission* / #view-missions so it can never bleed into other
   views. a11y: AA-contrast text on these surfaces; the only motion is the
   progress-bar width transition + tab/button hover, all nulled by the global
   prefers-reduced-motion reset (and again here, defensively).
   ========================================================================== */

#view-missions .missions-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* Widened from a fixed 640px single column so the list can become a 2-up grid on desktop (below) instead
     of a thin strip in a wide empty view. (engagement-css narrow-column fix.) */
  max-width: 920px;
}

/* "Resets in HH:MM" daily/weekly countdown next to the active tab — the habit-loop urgency cue. Rendered as
   a real AMBER PILL (not faint muted text) so it actually reads on the dark surface: filled gold-soft
   background, gold hairline border, a clock glyph, and a bold tabular-nums figure. Display only (never gates
   a claim — the server re-derives the period). */
.missions-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  align-self: center;
  padding: 4px var(--sp-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid var(--gold-glow);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}
.missions-reset-ico { display: inline-flex; }
.missions-reset-ico svg { width: 13px; height: 13px; }
.missions-reset b { color: var(--gold); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* On narrow screens the pill can't share the tab row without crowding — let it wrap to its own line under
   the tabs (still right-aligned) instead of squeezing the Daily/Weekly tabs. */
@media (max-width: 559px) {
  .missions-tabs { flex-wrap: wrap; }
  .missions-reset { margin-left: 0; }
}

/* On wider viewports lay the mission cards out 2-up (the list was a single narrow column on desktop).
   align-items:stretch (grid default) + .mission{height:100%} makes the two cards in a row share a height,
   and the card's own margin-top:auto footer pins the CTA to the bottom — so rows align with no ragged
   bottoms even when one card's title/description wraps to more lines than its neighbour. */
@media (min-width: 760px) {
  #view-missions .mission-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    align-items: stretch;
  }
  #view-missions .mission-list .mission { height: 100%; }
  #view-missions .mission-empty { grid-column: 1 / -1; }
}

#view-missions .missions-status,
#view-missions .status {
  color: var(--muted);
  font-size: var(--fs-sm);
  min-height: 1.2em;
}

/* ---- daily / weekly tabs ---- */
.missions-tabs {
  display: flex;
  gap: var(--sp-2);
  padding-bottom: var(--sp-1);
}
.missions-tab {
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.missions-tab:hover { color: var(--fg); }
.missions-tab:focus-visible { outline: none; box-shadow: var(--ring); }
.missions-tab.is-active {
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: var(--glow-accent);
}

/* ---- the mission list ---- */
.mission-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.mission-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ---- one mission card ---- */
.mission {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.mission.is-complete {
  border-left: 3px solid var(--gold);
}

/* header: icon + title/desc + reward pill */
.mission-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.mission-ico {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--gold);
  flex: 0 0 auto;
}
.mission-ico svg { width: 20px; height: 20px; }
/* Per-KIND accent so the glyph's meaning is reinforced by colour (wager=gold, play=cyan/brand,
   win=win-green, multiplier=violet). Falls back to the default gold for unknown kinds. */
.mission-ico--wager { color: var(--gold); }
.mission-ico--rounds { color: var(--cyan); }
.mission-ico--win_in_game { color: var(--win); }
.mission-ico--multiplier { color: var(--violet); }
.mission-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mission-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--fg);
  margin: 0;
}
.mission-desc {
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  line-height: 1.45;
  margin: 0;
}
/* Reward pill — ELEVATED so the payout (the reason to play) is the loudest thing in the card header: a
   raised win-tinted chip with a tiny "REWARD" eyebrow over a large tabular-nums amount, ring + soft glow. */
.mission-reward {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 4px var(--sp-3);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--win) 20%, transparent), var(--win-soft));
  border: 1px solid color-mix(in srgb, var(--win) 40%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--win) 22%, transparent);
  white-space: nowrap;
}
.mission-reward-label {
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--win) 78%, var(--fg));
  line-height: 1;
}
.mission-reward-amt {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--win);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* progress bar + label */
.mission-progress { display: flex; flex-direction: column; gap: var(--sp-1); }
.mission-bar {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--bg-1);
  border: 1px solid var(--line);
  overflow: hidden;
}
.mission-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow: var(--glow-brand);
  transition: width var(--dur-3) var(--ease-out);
  min-width: 0;
}
.mission.is-complete .mission-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.mission-progress-label {
  align-self: flex-end;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* footer: claim button / claimed / locked. margin-top:auto pins it to the card bottom so 2-up rows keep an
   even baseline regardless of how many lines the title/description above it takes. */
.mission-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--touch);
  margin-top: auto;
}
.mission-locked {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mission-claimed {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--win);
}

/* Claim button (synthwave CTA). >=44px touch target. */
.mission-claim-btn {
  flex: 0 0 auto;
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.mission-claim-btn:hover { box-shadow: var(--glow-accent); }
.mission-claim-btn:active { transform: translateY(1px); }
.mission-claim-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.mission-claim-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: var(--surface-3);
  /* disabled label on the elevated --surface-3 fill — --muted (3.86:1) fails AA; --muted-2 lifts it ≥4.5:1
     (contrast audit, systemic --muted-on-elevated-surface fix). */
  color: var(--muted-2);
  box-shadow: none;
}

/* Motion guard: kill the bar transition + tab/button motion under reduced-motion (the global reset also
   nulls these; this is defensive so a future global change can't re-enable motion here). */
@media (prefers-reduced-motion: reduce) {
  .mission-bar-fill { transition: none !important; }
  .missions-tab { transition: none !important; }
  .mission-claim-btn { transition: none !important; }
  .mission-claim-btn:active { transform: none !important; }
}