/* Storymoji retention layer (retention.js) — reminders, streak freezes, unlocks, crews.
   Kept out of styles.css so it can change without touching the shared stylesheet. Uses the
   same tokens (:root in styles.css): Fredoka, white cards on blue, gold primary buttons. */

/* ---------- Stats-screen cards ---------- */
.rt-stats { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.rt-card {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px; padding: 14px 16px; color: #fff;
}
.rt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.rt-row-label { font-weight: 600; font-size: 16px; }
.rt-row-sub { font-size: 14px; color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.rt-toggle { flex: 0 0 auto; min-width: 132px; }
.rt-toggle .mode-opt { min-height: 44px; padding: 8px 14px; }
.rt-time-row { margin-top: 8px; cursor: pointer; }
.rt-time {
  font-family: var(--font); font-weight: 600; font-size: 16px; color: var(--ink);
  background: #fff; border: none; border-radius: 12px; padding: 8px 12px; min-height: 44px; min-width: 120px;
}

/* ---------- Modal sheets (pre-prompt, unlock celebration) ---------- */
.rt-sheet .btn-primary { min-height: 48px; }
.rt-sheet .btn-ghost { min-height: 44px; }
.rt-ask-preview {
  background: #F3EFFA; border-radius: 14px; padding: 10px 12px;
  color: var(--ink) !important; font-weight: 600; font-size: 15px !important;
}

/* ---------- Streak freeze (inside the stats 🔥 card) ---------- */
.rt-freeze-badge {
  display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(160, 220, 255, 0.22); border: 1px solid rgba(190, 235, 255, 0.45);
  color: #E6F7FF; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.rt-freeze-badge.is-empty { opacity: 0.6; }
.rt-freeze-dots { display: inline-flex; gap: 6px; font-size: 22px; }
.rt-freeze-dot { filter: grayscale(1); opacity: 0.35; }
.rt-freeze-dot.is-held { filter: none; opacity: 1; }

/* ---------- Unlocks card (stats) ---------- */
.rt-unlocks-head { display: flex; align-items: center; justify-content: space-between; }
.rt-unlocks-count { font-weight: 700; font-size: 14px; color: var(--gold); }
.rt-unlocks-sub { font-size: 13px; color: rgba(255, 255, 255, 0.65); margin: 4px 0 6px; line-height: 1.35; }
.rt-unlocks-kind { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin: 12px 0 6px; }
.rt-unlock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-unlock {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; text-align: start;
  background: #fff; color: var(--ink); border: 2px solid transparent; border-radius: 16px;
  font-family: var(--font); cursor: pointer; transition: transform 0.12s, border-color 0.2s;
}
.rt-unlock:active { transform: scale(0.97); }
.rt-unlock.is-on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 226, 52, 0.35); }
.rt-unlock.is-locked { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); cursor: default; }
.rt-unlock.is-locked .rt-unlock-swatch { filter: grayscale(1); opacity: 0.55; }
.rt-unlock:disabled { opacity: 1; }
.rt-unlock-swatch {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: #F3EFFA;
}
.rt-unlock-label { display: flex; flex-direction: column; min-width: 0; }
.rt-unlock-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.rt-unlock-state { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.rt-unlock.is-locked .rt-unlock-state { color: rgba(255, 255, 255, 0.55); }
.rt-unlock.is-on .rt-unlock-state { color: #B8860B; }

/* Unlock celebration list */
.rt-unlock-list { display: flex; flex-direction: column; gap: 8px; }
.rt-unlock-item { display: flex; align-items: center; gap: 12px; background: #F3EFFA; border-radius: 14px; padding: 10px 12px; text-align: start; }
.rt-unlock-emoji { font-size: 28px; }
.rt-unlock-text { display: flex; flex-direction: column; color: var(--ink); }
.rt-unlock-text strong { font-weight: 700; font-size: 16px; }
.rt-unlock-kind { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---------- Card themes (story card + playback stage; share card is drawn in app.js) ---------- */
body[data-rt-theme="sunset"]   { --rt-t1: #FFB347; --rt-t2: #FF6A5B; --rt-t3: #B4468F; --rt-tint: #FFE9DC; --rt-edge: #FF6A5B; }
body[data-rt-theme="grape"]    { --rt-t1: #B77CF2; --rt-t2: #7B2FF7; --rt-t3: #45188F; --rt-tint: #F1E6FF; --rt-edge: #7B2FF7; }
body[data-rt-theme="midnight"] { --rt-t1: #3A3F8F; --rt-t2: #1B1E5C; --rt-t3: #090A26; --rt-tint: #E6E8FF; --rt-edge: #3A3F8F; }
body[data-rt-theme="aurora"]   { --rt-t1: #2EC4B6; --rt-t2: #2F80ED; --rt-t3: #7B2FF7; --rt-tint: #E1FBF7; --rt-edge: #2EC4B6; }
body[data-rt-theme] .story-card.mine.my-today-card {
  border-color: var(--rt-edge); background: linear-gradient(120deg, #fff, var(--rt-tint));
}
body[data-rt-theme] #screen-playback .playback-stage {
  background: linear-gradient(135deg, var(--rt-t1), var(--rt-t2) 55%, var(--rt-t3));
  border-radius: 26px; padding: 20px 14px 22px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
}

/* ---------- Avatar frames ---------- */
.rt-framed { border: 3px solid transparent !important; }
.rt-frame-rainbow { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(#FF5E5B, #FF9F1C, #FFE234, #2EC4B6, #2F80ED, #9D4EDD, #FF5E5B) border-box !important; }
.rt-frame-gold { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #FFF3A0, #FFB020, #FFE234, #C98A00) border-box !important; box-shadow: 0 0 14px rgba(255, 210, 60, 0.55) !important; }
.rt-frame-diamond { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(#E0F7FF, #7FD8FF, #FFFFFF, #B388FF, #E0F7FF) border-box !important; box-shadow: 0 0 16px rgba(160, 225, 255, 0.7) !important; }
#avatarPreview.rt-framed { display: inline-flex; align-self: center; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; }
.rt-av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; vertical-align: middle; margin-inline-end: 2px; }
.rt-unlock-swatch.rt-framed { border-radius: 50%; }

/* ---------- Lobby: judge personality ---------- */
.rt-persona-chip { min-height: 44px; }

/* ---------- My Crew ---------- */
.rt-crews { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.rt-crews-title { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); text-align: center; }
.rt-crew { display: flex; align-items: stretch; gap: 8px; }
.rt-crew-go {
  flex: 1 1 auto; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: #fff; color: var(--ink); border: none; border-radius: 20px; padding: 12px 16px; text-align: start;
  font-family: var(--font); cursor: pointer; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.5); transition: transform 0.12s;
}
.rt-crew-go:active { transform: scale(0.97); }
.rt-crew-go-label { font-weight: 700; font-size: 16px; }
.rt-crew-go-label::before { content: "▶ "; color: var(--tangerine); }
.rt-crew-rm {
  flex: 0 0 auto; min-width: 44px; min-height: 44px; border: none; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); font-family: var(--font); font-weight: 600; font-size: 14px; padding: 0 12px;
}
.rt-crew-rm.is-armed { background: var(--coral); color: #fff; }
.rt-crew-avatars { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-crew-av {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #F3EFFA; font-size: 18px;
}
.rt-crew-lobby .rt-crew-av, .rt-crew-save .rt-crew-av { width: 40px; height: 40px; font-size: 22px; background: rgba(255, 255, 255, 0.9); }
.rt-crew-av.is-here { box-shadow: 0 0 0 3px var(--mint); }
.rt-crew-av.is-missing { opacity: 0.4; filter: grayscale(0.8); }
.rt-crew-lobby {
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 18px; color: #fff;
  background: rgba(255, 255, 255, 0.1); border: 1px dashed rgba(255, 255, 255, 0.3);
  display: flex; flex-direction: column; gap: 8px;
}
.rt-crew-lobby-label { font-weight: 700; font-size: 15px; }
.rt-crew-lobby-sub { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.rt-crew-invite { min-height: 44px; }
.rt-crew-save { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.rt-crew-name { display: flex; flex-direction: column; gap: 4px; }
.rt-crew-input { width: 100%; margin: 0; }
.rt-crew-save-btn { min-height: 48px; }

/* ---------- Celebration sheet ---------- */
.rt-celebrate-emoji { font-size: 56px; animation: rtPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes rtPop { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rt-celebrate-emoji { animation: none; }
  .rt-overlay { animation: none; }
}