/* Social Reps — the fun layer (js/fun.js). Kept in its own file while
   other passes edit styles.css; uses the same tokens. */

/* Today's rep, on Pick a rep */
.fun-daily{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background: var(--warm-panel); border:1.5px solid var(--yellow); border-radius: var(--radius);
  padding: 14px 16px; margin: 0 0 14px; color: var(--text); font: inherit; cursor:pointer;
}
.fun-daily.done{ border-color: var(--hairline); background: var(--panel); }
.fun-daily:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 2px; }
.fun-daily-text{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.fun-daily-title{ font-weight:800; font-size:19px; line-height:1.2; }
.fun-daily-sub{ font-size:14px; line-height:1.45; color: var(--text); opacity:.88; }
.fun-daily-foot{ font-size:12px; color: var(--muted); }
.fun-daily-go{
  flex:none; font-family: var(--font-display); font-size:20px; letter-spacing:.02em;
  color: var(--bubble-ink); background: var(--yellow); border-radius: 999px; padding: 8px 14px;
}
.fun-daily.done .fun-daily-go{ background: transparent; color: var(--muted); border:1px solid var(--hairline); }

/* In the chat: she laughed, and the plot twisted */
.fun-laugh{
  align-self:flex-end; margin: -2px 4px 2px 0; font-size:12px; font-weight:800; letter-spacing:.02em;
  color: var(--bubble-ink); background: var(--yellow); border-radius: 999px; padding: 3px 10px;
}
.fun-laugh.pop{ animation: fun-pop .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes fun-pop{ 0%{ transform: scale(.4); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
.fun-twist{
  align-self:center; text-align:center; font-size:13px; color: var(--text);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding: 6px 12px; margin: 6px 0; max-width: 90%;
}
.fun-twist-k{ font-family: var(--font-display); color: var(--yellow); letter-spacing:.04em; margin-right:4px; }

/* The score reveal */
.fun-reveal{ margin: 14px 0 22px; }
.fun-verdict{
  font-family: var(--font-display); font-size: 26px; line-height:1.15; color: var(--text);
  margin: 0 0 8px; letter-spacing:.01em;
}
.fun-stats{ font-size:13px; color: var(--yellow); font-weight:700; margin-bottom: 14px; }
.fun-review{ background: var(--cream); color: var(--bubble-ink); border-radius: var(--bubble-radius); padding: 12px 16px; margin-bottom: 14px; }
.fun-review .kicker{ color: #5A544E; }
.fun-review-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; }
.fun-stars{ font-size:16px; letter-spacing:2px; color:#B2381A; }
.fun-take{ font-size:16px; line-height:1.45; font-weight:600; }
.fun-badge{ border:1.5px solid var(--hairline); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px; background: var(--panel); }
.fun-badge.fresh{ border-color: var(--yellow); animation: fun-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.fun-badge-title{ font-family: var(--font-display); font-size:20px; color: var(--yellow); letter-spacing:.02em; }
.fun-badge-line{ font-size:14px; color: var(--text); }
.fun-badge-again{ font-size:13px; color: var(--muted); margin-bottom: 8px; }
.fun-collection{ display:flex; flex-direction:column; gap:3px; font-size:13px; color: var(--muted); margin-top: 6px; }
.fun-tease{ font-style: italic; }
.fun-rewind{ margin-top: 10px; }

@media (prefers-reduced-motion: reduce){
  .fun-laugh.pop, .fun-badge.fresh{ animation: none; }
}

/* Round 2: callback laugh, days practised, her last word */
.fun-laugh.big{ font-size:13px; padding: 4px 12px; background: var(--rust); color: var(--on-rust); }
.fun-week{ display:flex; align-items:center; gap:4px; margin-top:6px; flex-wrap:wrap; }
.fun-week i{
  font-style:normal; font-size:10px; font-weight:800; width:18px; height:18px; line-height:18px; text-align:center;
  border-radius:50%; color: var(--muted); border:1px solid var(--hairline);
}
.fun-week i.on{ background: var(--yellow); color: var(--bubble-ink); border-color: var(--yellow); }
.fun-week i.today{ outline: 1.5px solid var(--text); outline-offset: 1px; }
.fun-week-note{ font-size:12px; color: var(--muted); margin-left:6px; }
.fun-lastword{ margin: 0 0 14px; padding: 14px 16px; border-left: 3px solid var(--yellow); background: var(--panel); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.fun-lastword blockquote{ margin:0; font-family: var(--font-display); font-size:22px; line-height:1.2; color: var(--text); letter-spacing:.01em; }
.fun-lastword figcaption{ margin-top:6px; font-size:12px; color: var(--muted); text-transform: uppercase; letter-spacing:.08em; }