/* missions — page styles. Tokens and shared components only (see docs/DESIGN.md). */
@layer pages {
  /* ── Missions (#/missions) ── */
  .missions .mission-loading { display: flex; flex-direction: column; gap: var(--sp-3); }

  /* Reward art inside chips and lists: game art at its natural colours, line icons at rest colour. */
  .missions .reward-img { object-fit: contain; flex: none; }
  .missions .reward-ico { flex: none; color: var(--text-3); }

  /* Tutorial orders: the mission, its checklist, the rewards and the one action. */
  .missions .orders .card-head { margin-bottom: var(--sp-5); }
  .missions .orders .card-head h3 { margin-top: var(--sp-1); }
  .missions .orders .card-head p { max-width: 64ch; }
  .missions .orders-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; width: 200px; padding-top: var(--sp-1); }
  .missions .orders-progress .meter { width: 100%; }
  .missions .checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
  .missions .checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 48px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); }
  .missions .checklist li.done .checklist-text { color: var(--text-2); }
  .missions .checklist .num { font-size: var(--fs-ui); }
  .missions .orders-foot { justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 0; border-top: 0; }
  .missions .orders.done { display: flex; align-items: center; gap: var(--sp-4); }
  .missions .orders-done-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-md); color: var(--green-text); background: var(--green-soft); }

  /* A requirement's tick box: empty until done, then a green check. */
  .missions .tick { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--surface-sunken); color: var(--green-text); }
  .missions li.done > .tick, .missions li.done .tick { border-color: color-mix(in srgb, var(--green) 35%, transparent); background: var(--green-soft); }

  /* Today's activity: the points track and the four rewards along it. */
  .missions .activity .card-head { align-items: center; }
  .missions .activity .card-head p { max-width: 60ch; }
  .missions .ap-total { flex: none; padding-right: var(--sp-5); }
  .missions .ap-of { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-3); }
  .missions .ap-track { position: relative; margin: var(--sp-2) var(--sp-2) var(--sp-8); }
  .missions .ap-notch { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
  .missions .ap-notch i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-raised); border: 2px solid var(--border-strong); box-shadow: var(--shadow-1); }
  .missions .ap-notch.reached i { background: var(--blue); border-color: var(--blue-text); }
  .missions .ap-notch small { position: absolute; top: 18px; font: var(--fw-semibold) var(--fs-xs) / 1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
  .missions .ap-notch.reached small { color: var(--blue-text); }
  .missions .ap-notch:last-child { transform: translate(-100%, -50%); }
  .missions .ap-rewards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
  .missions .ap-reward { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
  .missions .ap-reward.done { opacity: .7; }
  .missions .ap-reward.locked .ap-loot { opacity: .75; }
  .missions .ap-reward-head { display: flex; align-items: center; gap: var(--sp-3); }
  .missions .ap-reward-head img { width: 32px; height: 32px; object-fit: contain; flex: none; }
  .missions .ap-reward-head b { display: block; font: var(--fw-semibold) var(--fs-stat) / 1 var(--font-display); font-variant-numeric: tabular-nums; }
  .missions .ap-reward-head small { display: block; margin-top: 2px; font: var(--fw-semibold) var(--fs-xs) / 1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
  .missions .ap-loot { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
  .missions .ap-loot li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui); font-weight: var(--fw-medium); }
  .missions .ap-loot .reward-img { width: 20px; height: 20px; }

  /* Mission tiles: daily missions, event missions and milestones. */
  .missions .mission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
  .missions .mission { display: flex; flex-direction: column; gap: var(--sp-3); }
  .missions .mission.collected { opacity: .7; }
  .missions .mission.locked { opacity: .6; }
  .missions .mission h3 { overflow-wrap: anywhere; }
  .missions .mission > .hint { margin-top: calc(-1 * var(--sp-2)); }
  .missions .mission-event { align-self: flex-start; }
  .missions .mission-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); }
  .missions .mission-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
  .missions .mission-reqs li { display: flex; flex-direction: column; gap: 6px; }
  .missions .mission-req { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-ui); }
  .missions .mission-req .tick { width: 18px; height: 18px; margin-top: 1px; }
  .missions .mission-rewards { margin-top: auto; padding-top: var(--sp-1); }
  .missions .mission-action { display: flex; align-items: center; justify-content: center; min-height: var(--h-md); }

  /* Limited-time events: an amber-tinted banner over the event's missions. */
  .missions .event-banner { display: flex; align-items: center; gap: var(--sp-5); border-color: color-mix(in srgb, var(--amber) 35%, transparent);
    background: linear-gradient(110deg, var(--amber-soft), transparent 62%), var(--surface-1); }
  .missions .event-banner.upcoming { border-color: var(--border-subtle); background: var(--surface-1); }
  .missions .event-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-md); color: var(--amber-text); background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }
  .missions .upcoming .event-ico { color: var(--text-3); background: var(--surface-2); border-color: var(--border-subtle); }
  .missions .event-text { flex: 1; min-width: 0; }
  .missions .event-text h2 { margin-top: 2px; }
  .missions .event-text p { margin-top: var(--sp-1); color: var(--text-2); max-width: 64ch; }
  .missions .event-banner .t-overline { color: var(--amber-text); }
  .missions .event-banner.upcoming .t-overline { color: var(--text-3); }
  .missions .event-clock { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); flex: none; min-width: 96px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
  .missions .event-clock b { font: var(--fw-semibold) var(--fs-stat) / 1 var(--font-display); font-variant-numeric: tabular-nums; }
  .missions .event-clock small { font: var(--fw-semibold) var(--fs-xs) / 1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); white-space: nowrap; }

  @media (max-width: 900px) {
    .missions .ap-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    /* Phones: one reward per row, its action beside the points and the loot underneath. */
    .missions .ap-rewards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .missions .ap-reward { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head action" "loot loot"; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
    .missions .ap-reward-head { grid-area: head; }
    .missions .ap-reward .btn { grid-area: action; width: auto; }
    .missions .ap-loot { grid-area: loot; flex-direction: row; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
  }
  @media (max-width: 720px) {
    .missions .orders .card-head, .missions .activity .card-head { flex-direction: column; align-items: stretch; }
    .missions .orders-progress { width: 100%; align-items: flex-start; }
    .missions .ap-total { align-self: flex-start; }
    .missions .orders-foot .btn-group, .missions .orders-foot .btn-group .btn { width: 100%; }
    .missions .orders-foot .btn-group .btn { flex: 1; }
    .missions .event-banner { flex-wrap: wrap; gap: var(--sp-4); }
    .missions .event-text { flex-basis: calc(100% - 64px); }
    .missions .event-clock { flex-direction: row; gap: var(--sp-2); width: 100%; justify-content: center; }
  }

  /* ── The mission reward modal (here and on the home page). The sheet, the sparks and Continue
     come from results.css; the medal is shared with the level-up sheet (.reward-sheet.promotion). ── */
  .reward-sheet .medal { position: relative; width: 120px; height: 120px; margin: var(--sp-4) auto var(--sp-2); display: grid; place-items: center; }
  /* Game art: the gold medal looks the same in both themes. */
  .reward-sheet .medal .rays { position: absolute; inset: -30px; border-radius: 50%;
    background: repeating-conic-gradient(rgba(250, 216, 4, .3) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
    animation: medal-spin 14s linear infinite; }
  .reward-sheet .medal .disc { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; color: #5a4200;
    background: radial-gradient(circle at 35% 30%, #fff6b0, #fad804 45%, #c79a00 80%); border: 4px solid #8a6a00; box-shadow: 0 0 0 4px rgba(250, 216, 4, .25), 0 0 40px rgba(250, 216, 4, .5), inset 0 -6px 10px rgba(0, 0, 0, .25);
    animation: medal-in .7s cubic-bezier(.2, 1.4, .3, 1); }
  .reward-sheet .medal-star { fill: currentColor; stroke-width: 1.5; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
  .reward-sheet .loot { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
  .reward-sheet .loot li { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle);
    animation: loot-in .45s cubic-bezier(.2, 1.3, .3, 1) both; animation-delay: calc(.35s + var(--i) * .12s); }
  .reward-sheet .loot img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--ink) 35%, transparent)); }
  .reward-sheet .loot .reward-ico { color: var(--text-2); }
  .reward-sheet .loot b { font-size: var(--fs-ui); font-weight: var(--fw-semibold); color: var(--text); }
  .reward-sheet .next-order span:not(.next-order-ico) { color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
  .next-order-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); color: var(--brand-text); background: var(--surface-overlay); border: 1px solid var(--brand-border); }
  @keyframes medal-in { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
  @keyframes medal-spin { to { transform: rotate(360deg); } }
  @keyframes loot-in { from { opacity: 0; transform: translateY(14px) scale(.85); } }
  @media (prefers-reduced-motion: reduce) {
    .reward-sheet .medal .rays, .reward-sheet .medal .disc, .reward-sheet .loot li { animation: none; }
  }
}