/* Rewards: the bonus spin wheel, the forward box, friend counts. Loaded after
   app.css on /spin and /friends. Nothing under 15px; motion off under
   prefers-reduced-motion (app.css), the script then skips straight to the reveal. */

/* The wheel: the pointer stays still at the top, the wheel turns under it. */
.wheel-wrap{position:relative;width:min(300px,82vw);aspect-ratio:1;margin:30px auto 0}
.wheel{width:100%;height:100%;border-radius:50%;box-shadow:0 12px 32px #0a0a0a29;transform:rotate(0deg);transition:transform 2.2s cubic-bezier(.12,.72,.16,1);will-change:transform}
.wheel svg{display:block;width:100%;height:100%}
.wheel-num{font-family:Mono,monospace;font-size:30px;font-weight:700;letter-spacing:-.03em}
.wheel-pointer{position:absolute;left:50%;top:-10px;z-index:2;width:0;height:0;margin-left:-17px;border-left:17px solid transparent;border-right:17px solid transparent;border-top:30px solid #0a0a0a;filter:drop-shadow(0 2px 0 #fff)}

/* The reveal sits on the blue reward screen. */
.reveal .tiles{text-align:left}
.reveal .tile{background:#fff}
.reveal .tile-title{color:var(--ink)}
.use-them .label{margin-bottom:0}

/* Countdown to the next spin. */
.countdown{font-size:46px;font-weight:600;color:var(--blue);line-height:1.1}

/* The one-line forward message, big enough to read at arm's length. */
.fwd{padding:18px;border:2px solid var(--blue);border-radius:14px;background:#fff}
.fwd-text{font-size:20px;line-height:1.4;font-weight:600}
.fwd-link{display:inline-block;max-width:100%;font-size:17px;overflow-wrap:anywhere;color:var(--blue)}

/* Friend counts. */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;background:var(--grey)}
.stat-num{font-size:34px;font-weight:600;color:var(--blue);line-height:1}
.stat-word{font-size:15px;line-height:1.35;color:var(--muted)}

/* Recent friends. */
.friend-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
.friend-row .num{font-size:19px;font-weight:600}

/* Friends on the win ground (9 October: one move, one win line, no wall of boxes) */
.friends{gap:18px}
.fr-hero{position:relative;isolation:isolate;text-align:center;padding:6px 0 2px}
.fr-hero .win-rays{top:110px}
.fr-kicker{display:flex;justify-content:center;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--gold)}
.fr-kicker .icon{width:22px;height:22px}
.fr-title{display:flex;flex-direction:column;align-items:center;margin-top:6px;line-height:1}
.fr-big{font-size:clamp(104px,34vw,150px);line-height:.92;font-weight:700;font-stretch:78%;letter-spacing:-.05em;color:var(--gold);text-shadow:0 6px 0 var(--gold-ink),0 0 46px #ffcf3d59}
.fr-word{margin-top:6px;font-size:30px;font-weight:700;font-stretch:85%;letter-spacing:-.02em}
.fr-sub{margin-top:10px;font-size:18px;color:#e6ebff}
.friends .fwd{color:var(--ink);border:0;box-shadow:inset 0 0 0 3px var(--gold),0 12px 30px #06105a59}
.friends .fwd .label{color:var(--muted)}
.fr-score{padding:16px;border-radius:18px;background:#ffffff14;box-shadow:inset 0 0 0 1.5px #ffffff2e;text-align:center}
.fr-score-label{font-size:15px;font-weight:600;color:#dfe6ff}
.fr-score-big{margin-top:2px;font-size:30px;line-height:1.15;font-weight:700;font-stretch:85%;color:var(--gold)}
.fr-funnel{margin-top:6px;font-size:16px;line-height:1.45;color:#e6ebff}
.fr-funnel b{color:#fff}
.fr-list{padding:6px 16px 10px;border-radius:16px;background:#fff;color:var(--ink)}
.fr-list .label{margin:10px 0 0;color:var(--ink)}
.fr-list .note{color:var(--muted)}
.fr-rules{display:grid;gap:8px;font-size:15px;line-height:1.5;color:#dfe6ff}
.fr-rules strong{color:#fff}
.fr-rules summary{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:16px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:4px;cursor:pointer;list-style:none}
.fr-rules summary::-webkit-details-marker{display:none}