/* Live "Previous:" strip of recent winning sides, and the rust50.com name-tag line under the summary. */
.previous-strip { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; min-height: 42px; }
.previous-strip > span { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); }
.previous-results { display: flex; gap: 4px; overflow: hidden; flex: 1; min-width: 0; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.previous-coin { flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.previous-coin img { width: 24px; height: 24px; display: block; }
.previous-coin:hover, .previous-coin:focus-visible { transform: translateY(-1px); outline: 2px solid var(--accent); outline-offset: 1px; }
.previous-coin.new { animation: previous-in .45s ease-out; }
@keyframes previous-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.previous-empty { font-size: 12px; color: var(--muted); }
.name-tag-promo { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.name-tag-promo strong { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .previous-coin.new { animation: none; } }
@media (max-width: 600px) { .previous-coin, .previous-coin img { width: 20px; height: 20px; } }
