/* Scores, personal records and friend boards */
.vd-app .sc-games, .vd-app .sc-board { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vd-app .sc-game, .vd-app .sc-board li { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 20px; background: var(--vd-panel); box-shadow: 0 4px 14px #3a2f1c10; color: var(--vd-ink); text-decoration: none; }
.vd-app .sc-game img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; }
.vd-app .sc-game-name, .vd-app .sc-who { display: grid; flex: 1; min-width: 0; gap: 2px; }
.vd-app .sc-game-name b, .vd-app .sc-who b { font-size: 1.0625rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-app .sc-game small, .vd-app .sc-board small, .vd-app .sc-tiles dt { font-size: 13px; color: var(--vd-muted); }
.vd-app .sc-best { display: grid; justify-items: end; line-height: 1.1; }
.vd-app .sc-best b { font-size: 1.5rem; font-weight: 780; letter-spacing: -.02em; }
.vd-app .sc-head { display: flex; align-items: center; gap: 14px; margin: 14px 0 16px; }
.vd-app .sc-head img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; }
.vd-app .sc-head h1 { margin: 0; font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 760; letter-spacing: -.03em; color: var(--vd-ink); }
.vd-app .sc-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin: 0 0 16px; }
.vd-app .sc-tiles div { padding: 12px 14px; border-radius: 20px; background: var(--vd-panel); box-shadow: 0 4px 14px #3a2f1c10; }
.vd-app .sc-tiles dd { margin: 2px 0 0; font-size: 1.9rem; font-weight: 780; letter-spacing: -.03em; color: var(--vd-ink); }
.vd-app .sc-board svg { width: 40px; height: 40px; flex: none; }
.vd-app .sc-board li.is-me { box-shadow: inset 0 0 0 2px var(--su-accent, var(--vd-action)), 0 4px 14px #3a2f1c10; }
.vd-app .sc-rank { display: grid; place-items: center; width: 26px; font-style: normal; font-weight: 750; color: var(--vd-muted); }
.vd-app .sc-empty { color: var(--vd-muted); }
.vd-app .sc-actions { display: flex; margin-top: 18px; }
.vd-app .sc-actions .lc-pill { width: 100%; justify-content: center; }

/* The line under a finished game */
.vd-app .gr-note { display: grid; gap: 8px; max-width: 560px; margin: 14px auto 0; padding: 10px 12px; border-radius: 20px; background: var(--vd-panel); box-shadow: 0 4px 14px #3a2f1c10; color: var(--vd-ink); }
.vd-app .gr-row { display: flex; align-items: center; gap: 10px; }
.vd-app .gr-row svg { width: 34px; height: 34px; flex: none; }
.vd-app .gr-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.vd-app .gr-row span { font-size: 14px; color: var(--vd-muted); white-space: nowrap; }
.vd-app .gr-row.is-best span { padding: 3px 10px; border-radius: 999px; background: #f6e2a4; color: #4b3a0b; font-weight: 700; animation: gr-pop 360ms var(--vd-ease); }
.vd-app .gr-link { justify-self: end; font-size: 14px; font-weight: 650; color: var(--vd-action); text-decoration: none; }
@keyframes gr-pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vd-app .gr-row.is-best span { animation: none; } }

/* Best line under a game's title: quiet text, not a bar */
.vd-app .sc-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 0; color: var(--vd-muted); font-size: 14px; text-decoration: none; }
.vd-app .sc-strip b { color: var(--vd-ink); font-weight: 750; }
.vd-app .sc-strip span:last-child { color: var(--vd-action); font-weight: 650; }
.vd-app .sc-strip svg { width: 12px; height: 12px; vertical-align: -1px; }

/* Account */
.vd-app .ac-avatar { display: flex; align-items: center; gap: 14px; }
.vd-app .ac-avatar svg { width: 64px; height: 64px; }
.vd-app .ac-hide { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.vd-app .ac-hide input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--vd-action); }
.vd-app .ac-hide span { display: grid; gap: 2px; font-weight: 600; }
.vd-app .ac-hide small { font-weight: 400; font-size: 13px; color: var(--vd-muted); }