/* Concept G: completion halo, warm white card and a springing gold star.
   2026-10-14, size review with the user: the 380 px card is theirs; then every
   length was re-derived from the user's sample screenshot (card 348 px, disc
   78 px, measured band by band) and scaled by 380/348: disc 85 with the
   outlined ring the disc's own size and 8 px to its left, title 15 (user: smaller), amount 72
   (digit height 51, as the sample's 47 at 348), unit 16, rule 35×1, reason 15,
   status 13, and the vertical gaps as measured; finally the user's pick on the
   real-size page (2026-10-14): card 330, every length × 0.9, amount × 0.95 on top (→ 62) (disc 39 below the card edge,
   34 to the title, 40 to the amount, 26 to the unit, 35 to the rule, 24 to the
   reason, 20 to the status, 43 to the bottom edge). */
.reward-spotlight {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(330px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); z-index: 10610;
    pointer-events: none; text-align: center; color: #292c25;
    font-family: var(--f-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    isolation: isolate;
}
.reward-spotlight__content {
    position: relative; padding: 35px 29px 38px; border-radius: 25px;
    background: #fffef9; border: 1px solid #e4e5da;
    box-shadow: 0 24px 80px #39341d1a, 0 4px 14px #39341d08;
    max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box;
    pointer-events: auto; animation: reward-spotlight-in 650ms cubic-bezier(.2,.8,.2,1) both;
}
.reward-spotlight__close {
    position: absolute; right: 18px; top: 13px; width: 32px; height: 32px;
    border: 0; border-radius: 50%; background: transparent; color: #787467;
    font: 22px/1 sans-serif; cursor: pointer; pointer-events: auto;
}
.reward-spotlight__close:hover { background: #bda66e20; color: #34372f; }
.reward-spotlight__close:focus-visible { outline: 2px solid #9e885b; outline-offset: 3px; }
.reward-spotlight__star {
    position: relative; display: grid; place-items: center; width: 76px; height: 76px;
    border-radius: 50%; background: #f5f0d8; color: #ac8c35;
    font-size: 37px; line-height: normal; margin: 0 auto 24px;
    /* Match the original G sample, independent of the application's theme font.
       38 / 78 preserves the sample's glyph-to-medallion ratio. */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
    font-weight: 400;
}
.reward-spotlight__star span { position: relative; z-index: 1; animation: reward-halo-stamp 600ms 550ms both; }
.reward-spotlight__halo {
    /* The ring is the disc's own size (r = 27/60 of it, just inside the edge)
       and sits 8 px to the left of the centred disc, as in the sample. */
    position: absolute; display: block; left: -7px; top: 0; width: 76px; height: 76px;
    overflow: visible; transform: rotate(-90deg);
}
.reward-spotlight__halo circle {
    fill: none; stroke: #c3a44c; stroke-width: 1.4; stroke-linecap: round;
    stroke-dasharray: 170; stroke-dashoffset: 0; animation: reward-halo-ring 1s both;
}
.reward-spotlight__title { font-size: 13.5px; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; color: #77715f; }
.reward-spotlight__money {
    display: flex; justify-content: center; align-items: baseline; gap: 4px; margin: 22px 0 0; color: #39432b;
    animation: reward-spotlight-in 650ms 150ms both;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.reward-spotlight__money span { font-size: 27px; font-weight: 300; color: #7d8c62; }
.reward-spotlight__money strong { font-size: clamp(36px, 5vw, 62px); font-weight: 400; letter-spacing: -.045em; line-height: 1.1; }
.reward-spotlight--long .reward-spotlight__money strong { font-size: clamp(25px, 3.4vw, 41px); }
.reward-spotlight__unit { font-size: 14.5px; line-height: 1.2; letter-spacing: .26em; color: #8b7a57; margin-top: 6px; }
/* Under an invitation's total: which part came when (2026-10-21 review, option E). */
.reward-spotlight__note { font-size: 12px; line-height: 1.45; color: #77715f; margin-top: 12px; overflow-wrap: anywhere; }
.reward-spotlight__rule { width: 32px; height: 1px; background: #dfdfd0; margin: 27px auto 18px; }
.reward-spotlight__reason { font-size: 13.5px; line-height: 1.5; color: #606251; overflow-wrap: anywhere; }
.reward-spotlight__status { font-size: 12px; line-height: 1.5; color: #817e70; margin-top: 11px; }
.reward-spotlight__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.reward-spotlight__particle {
    position: absolute; left: 50%; top: 45%; width: 4px; height: 4px; border-radius: 50%; background: #be9b51;
    z-index: 1; pointer-events: none; animation: reward-spotlight-particle 1700ms ease-out both;
}
@keyframes reward-spotlight-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes reward-halo-ring { from { stroke-dashoffset: 170; } to { stroke-dashoffset: 0; } }
@keyframes reward-halo-stamp {
    0% { transform: scale(.2) rotate(-40deg); opacity: 0; }
    65% { transform: scale(1.12) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes reward-spotlight-particle {
    0% { opacity: 0; transform: translate(0, 0) scale(0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(.2); }
}
@media (max-height: 480px) {
    .reward-spotlight__content { padding-top: 16px; padding-bottom: 16px; }
    .reward-spotlight__star { margin-bottom: 14px; }
    .reward-spotlight__rule { margin: 12px auto 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .reward-spotlight *, .reward-spotlight { animation: none !important; }
    .reward-spotlight__particle { display: none; }
}