/* ============================================================================
   DAYO Notifier — ticker + avatar CSS delta  (branch claude/web-page-design-template-92f0r6)
   Paste this VERBATIM at the END of the site stylesheet. It's append-last, so these
   rules override any stale equivalents already in the sheet — no editing needed.
   (This is a bridge; the permanent fix is extracting the full CSS from the bundle.)
   ============================================================================ */

/* ---- 1. AVATAR: clip the Discord <img> to the circle (fixes the overflowing photo) ---- */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 2. FEED THUMB: contain item images in the box (any feed-card, all pages) ---- */
.feed-thumb { overflow: hidden; }
.feed-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }

/* ---- 3. TICKER THUMB SIZE: 88px + tighter card padding so item art fills the card ---- */
.ticker .feed-card { align-items: center; padding: 4px 12px; }
.ticker .feed-thumb { width: 88px; height: 88px; font-size: 2.2rem; }

/* ---- 4. EVENT-DRIVEN TICKER: no loop; newest enters right, oldest clips left ---- */
.ticker .ticker-track { animation: none; width: 100%; }
.ticker .ticker-group { width: 100%; flex-direction: row-reverse; justify-content: flex-start; padding-right: 0; }

/* slide-in plays ONLY on new cards -> a full poll-swap re-render is silent (no "reset").
   Add class `feed-card--new` to steals that are new since the last render; leave it off the rest. */
.ticker .feed-card--new { animation: feed-enter .5s ease both; }
@keyframes feed-enter { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .ticker .feed-card--new { animation: none; } }

/* ---- 5. HEADER BRAND: bigger turtle logo + "DAYO" wordmark + "Notifier" badge ---- */
.brand-logo { width: 54px; height: 54px; }
.brand { font-size: 1.5rem; }
.brand-badge { font-size: .875rem; padding: 4px 12px; }