Engagement features

This commit is contained in:
2026-10-21 13:10:25 -04:00
parent f4c10c9d7d
commit f9afa8ccbe
6 changed files with 405 additions and 4 deletions
+19
View File
@@ -196,6 +196,12 @@ details[open] summary { margin-bottom: 1rem; }
.metric-card strong { display: block; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--mauve); line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.metric-card:nth-child(2) strong { color: var(--teal); }
.metric-card small { font-size: 0.65rem; color: var(--subtext); }
.personal-records .metric-card strong { font-size: clamp(1rem, 1.8vw, 1.35rem); letter-spacing: -0.04em; padding-block: 0.4rem; }
.personal-records .metric-card small { display: block; line-height: 1.6; }
.rival-card { padding: 1.1rem; margin-top: 1rem; border: 1px solid #cba6f730; border-radius: 12px; background: linear-gradient(110deg, #cba6f70c, transparent), var(--base); }
.rival-card #my-rival-title { margin: 0.8rem 0 0.4rem; font-size: 1rem; color: var(--lavender); overflow-wrap: anywhere; }
#my-rival-description { font-size: 0.85rem; color: var(--text); margin: 0; }
.rival-card .fine-print { font-size: 0.65rem; margin-bottom: 0; }
#my-subscribed { padding: 0.65rem; border-radius: 8px; background: #a6e3a110; color: var(--green); font-size: 0.75rem; }
#leaderboard-status:empty { display: none; }
@@ -367,6 +373,19 @@ stripe-buy-button { display: block; max-width: 100%; margin: 1.5rem 0; }
#chat-login { margin: 0; color: var(--lavender); font-size: 0.85rem; line-height: 1.6; }
#chat-status:empty, #chat-error:empty { display: none; }
.game-panel #presence-count { color: var(--teal); font-size: 0.7rem; margin: 0.65rem 0 0; }
.presence-count::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.4rem; background: var(--teal); }
.presence-preference { border: 1px solid var(--surface); border-radius: 12px; background: var(--base); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.presence-preference label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--lavender); cursor: pointer; }
#presence-opt-in { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--mauve); flex-shrink: 0; }
#presence-help { margin: 0.5rem 0 0; font-size: 0.7rem; line-height: 1.6; color: var(--subtext); }
#presence-error { margin-bottom: 0; font-size: 0.75rem; }
.chat-presence { padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--surface); background: #94e2d504; }
#chat-presence-summary { font-size: 0.7rem; color: var(--subtext); margin: 0; }
#chat-presence-names { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0.5rem 0 0; }
#chat-presence-names:empty { display: none; }
#chat-presence-names li { font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 20px; color: var(--teal); background: #94e2d50c; border: 1px solid #94e2d525; overflow-wrap: anywhere; max-width: 100%; }
#rules { text-align: left; font-size: 0.9rem; color: var(--subtext); }
@media (max-width: 760px) {