/* Result sheets: the celebration after training, work, building, a mission reward and a level-up
   or promotion. A dialog-sized panel with a gold glow at the top and rising sparks: what you gained,
   what changed (.total), what it cost (.spent) and one green Continue. Works on both themes.
   Tokens and shared components only (see docs/DESIGN.md). */
@layer pages {
  .sheet { position: relative; width: min(440px, 100%); max-height: calc(100vh - var(--sp-8)); overflow: hidden auto; padding: var(--sp-8) var(--sp-6) var(--sp-6);
    text-align: center; border-radius: var(--r-xl); border: 1px solid var(--brand-border);
    background: radial-gradient(120% 55% at 50% 0%, var(--brand-soft), transparent 72%), var(--surface-overlay);
    box-shadow: var(--shadow-3), 0 0 80px -20px var(--brand-glow), var(--highlight); animation: sheet-in var(--t-slow) var(--ease); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
  .sheet > .eyebrow { color: var(--gold-text); }
  .sheet .up-name { margin-top: var(--sp-2); font: var(--fw-bold) var(--fs-h2) / var(--lh-snug) var(--font-display); letter-spacing: var(--ls-display); overflow-wrap: anywhere; }
  /* The reward medal stands on the sheet itself, never on a tile (the profile's achievement tiles share the class name). */
  .sheet .medal { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .sheet > .btn.go { width: 100%; margin-top: var(--sp-6); }

  /* The gain: a hero number in your success colour. */
  .gain-big { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2);
    font: var(--fw-bold) var(--fs-display) / 1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--green-text); }
  [data-theme="dark"] .gain-big { text-shadow: 0 0 24px color-mix(in srgb, var(--green) 45%, transparent); }
  .gain-big img { width: 48px; height: 48px; object-fit: contain; }
  /* A salary: the currency code follows the amount. */
  .gain-big .code { font-size: var(--fs-h3); color: var(--text-2); }

  /* What changed: "Strength 12.0 → 13.4". */
  .sheet .total { margin-top: var(--sp-1); color: var(--text-2); }
  .sheet .total b { color: var(--text); font-variant-numeric: tabular-nums; }
  .sheet .total b.up { color: var(--green-text); }

  /* A milestone reached on the way (a strength tier, the top quality). */
  .tier-up { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); text-align: left;
    position: relative; border-radius: var(--r-md); background: var(--brand-soft); border: 1px solid var(--brand-border); }
  /* The glow is a fixed shadow on a layer that only fades: opacity is composited, a pulsing
     box-shadow repaints every frame. */
  .tier-up::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 24px -4px var(--brand-glow); opacity: 0; animation: tier-glow 1.6s ease-in-out infinite; }
  .tier-up img { width: 44px; height: 50px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--ink) 40%, transparent)); }
  .tier-up b { display: block; font: var(--fw-semibold) var(--fs-xs) / 1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--brand-text); }
  .tier-up span { font-size: var(--fs-sm); color: var(--text-2); }
  @keyframes tier-glow { 50% { opacity: 1; } }

  /* What it cost and what else it gave, as value chips. */
  .spent { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
  .spent li { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-pill); white-space: nowrap;
    font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .spent img { width: 18px; height: 18px; object-fit: contain; }

  /* Sparks rising from the bottom edge: gold and energy green. */
  .sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .sparks i { position: absolute; bottom: -10px; width: 8px; height: 8px; border-radius: 50%; opacity: 0; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: rise 3.2s ease-out infinite; }
  .sparks i:nth-child(even) { background: var(--lime); box-shadow: 0 0 12px var(--lime); }
  .sparks i:nth-child(1) { left: 10%; animation-delay: .1s; }
  .sparks i:nth-child(2) { left: 26%; animation-delay: .9s; }
  .sparks i:nth-child(3) { left: 44%; animation-delay: .4s; }
  .sparks i:nth-child(4) { left: 62%; animation-delay: 1.4s; }
  .sparks i:nth-child(5) { left: 78%; animation-delay: .7s; }
  .sparks i:nth-child(6) { left: 92%; animation-delay: 1.9s; }
  @keyframes rise { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-420px) scale(1.3); } }

  /* Level-up and promotion: the reward medal with the new level or the rank insignia in its disc. */
  .promotion .medal .disc .lvl-num { font: var(--fw-bold) var(--fs-display) / 1 var(--font-display); font-variant-numeric: tabular-nums; }
  .promotion .medal .disc .insignia { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--ink) 45%, transparent)); }
  .promo-note { margin-top: var(--sp-2); }
  .promo-refill { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); text-align: left;
    border-radius: var(--r-md); background: var(--lime-soft); border: 1px solid color-mix(in srgb, var(--lime) 35%, transparent); }
  .promo-refill img { width: 32px; height: 32px; object-fit: contain; flex: none; }
  .promo-refill b { display: block; }
  .promo-refill small { color: var(--lime-text); font-weight: var(--fw-semibold); }
  .promo-next { margin-top: var(--sp-5); }
  .promo-next small { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); }
  /* Above any other open result sheet (training, work, build): a level-up is never mixed into them. */
  .modal.promo-modal { z-index: calc(var(--z-modal) + 5); }

  /* Training: the strength arm pumps as the gain counts up (cause first, then the number). */
  .gain-big .flex-arm { transform-origin: 40% 80%; animation: flex-arm .9s var(--ease) .15s 2 both; }
  @keyframes flex-arm { 0%, 100% { transform: rotate(0) scale(1); } 40% { transform: rotate(-12deg) scale(1.18); } }
  /* Company work: each product drops in like a crate, one after the other. */
  .work-done .made .good { animation: crate-drop .5s cubic-bezier(.2, 1.4, .3, 1) both; }
  .work-done .made .good:nth-child(2) { animation-delay: .12s; } .work-done .made .good:nth-child(3) { animation-delay: .24s; }
  .work-done .made .good:nth-child(4) { animation-delay: .36s; } .work-done .made .good:nth-child(n + 5) { animation-delay: .48s; }
  @keyframes crate-drop { 0% { transform: translateY(-28px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }

  /* An achievement earned: the medal turns from gunmetal to gold (the art of both exists), the
     rays spin behind it, then the reward and the share buttons. */
  .medal-turn { position: relative; width: 168px; height: 168px; margin: var(--sp-4) auto var(--sp-3); perspective: 600px; }
  .medal-turn .rays { position: absolute; inset: -36px; border-radius: 50%;
    background: repeating-conic-gradient(rgba(250, 216, 4, .34) 0 10deg, transparent 10deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
    opacity: 0; animation: medal-spin 14s linear infinite, rays-in .4s var(--ease) .55s forwards; }
  .medal-turn img { position: absolute; inset: 0; width: 100%; height: 100%; filter: var(--art-shadow); backface-visibility: hidden; }
  .medal-turn .off { animation: turn-off .5s var(--ease-in-out) .15s forwards; }
  .medal-turn .on { transform: rotateY(-90deg); animation: turn-on .55s var(--ease) .6s forwards; }
  .medal-up .medal-gold, .promotion .level-gold { margin: var(--sp-2) auto 0; animation: loot-in .4s var(--ease) 1s both; }
  .medal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-3); }
  .medal-actions .btn { --btn-h: var(--h-md); min-height: var(--h-md); padding: 0 var(--sp-4); font-size: var(--fs-md); }
  @keyframes turn-off { to { transform: rotateY(90deg); } }
  @keyframes turn-on { 0% { transform: rotateY(-90deg) scale(1); } 70% { transform: rotateY(0) scale(1.12); } 100% { transform: rotateY(0) scale(1); } }
  @keyframes rays-in { to { opacity: 1; } }
  /* Opened again from the profile: the medal is already gold, no turn. */
  .medal-turn.shown .off { display: none; } .medal-turn.shown .on { transform: none; animation: none; } .medal-turn.shown .rays { opacity: 1; animation: medal-spin 14s linear infinite; }
  @media (prefers-reduced-motion: reduce) {
    .medal-turn .off { display: none; } .medal-turn .on { transform: none; } .medal-turn .rays { opacity: 1; }
  }

  @media (max-width: 560px) { .sheet { padding: var(--sp-6) var(--sp-5) var(--sp-5); } }
}