/* Homepage (category_list.html): page head, announcement, Twitch Drops banner. Category cards live in base.css. */

.home-head { align-items: center; }
/* Title, one-line lede and online count share a row; they wrap under each other when narrow. */
.home-head > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.home-head .lede { margin: 0; }
.home-head .online-badge { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--body-font); font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.online-dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--success-text); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-text) 60%, transparent); animation: online-pulse 2.5s ease-out infinite; }
@keyframes online-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-text) 60%, transparent); }
    70%  { box-shadow: 0 0 0 0.5em transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.home-announcement {
    max-width: 440px;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-family: var(--body-font);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-strong);
}
.home-announcement a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.home-announcement a:hover { color: var(--text-strong); }

/* --- Twitch Drops banner --- */
.twitch-drops-banner {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background:
        linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
        linear-gradient(120deg, var(--twitch), color-mix(in srgb, var(--twitch) 80%, black) 45%, var(--border)) border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: 0 0 18px color-mix(in srgb, var(--twitch) 18%, transparent);
}
.td-logo { flex: 0 0 auto; width: 2.6em; height: 2.6em; color: var(--twitch); }
.td-main { flex: 0 1 auto; min-width: 10em; }
.td-eyebrow { font-family: var(--primary-font); font-size: var(--fs-lg); letter-spacing: 0.06em; color: var(--text-strong); }
.td-eyebrow .td-purple { color: var(--twitch); }
.td-tagline { font-family: var(--body-font); font-size: var(--fs-sm); color: var(--text-muted); margin-top: 0.15em; }
.td-timer { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-left: auto; }
.td-status { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2em; }
.td-label { font-family: var(--body-font); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); white-space: nowrap; }
.td-live { display: none; align-items: center; gap: 0.4em; font-family: var(--body-font); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--danger-text); }
.td-live .td-live-dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--danger-text); animation: td-pulse 1.6s infinite; }
@keyframes td-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-text) 55%, transparent); }
    70%  { box-shadow: 0 0 0 0.5em transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.td-count { display: flex; gap: var(--space-1); }
.td-seg { display: flex; flex-direction: column; align-items: center; min-width: 2.6em; padding: 0.3em 0.35em; background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.td-seg b { font-family: var(--primary-font); font-size: 1.25em; line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.td-seg span { font-family: var(--body-font); font-size: 0.6em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.td-watch svg { width: 1.1em; height: 1.1em; }
/* Pre-live: outlined "Follow"; fills solid when drops go live (JS toggles .is-upcoming) */
.twitch-drops-banner.is-upcoming .td-watch { background: transparent; color: var(--twitch); }
.twitch-drops-banner.is-upcoming .td-watch:hover { background: color-mix(in srgb, var(--twitch) 14%, transparent); border-color: var(--twitch); color: var(--twitch); }
.td-remind { margin-top: var(--space-2); border-style: dashed; color: var(--text-muted); }
.td-remind:hover { border-color: var(--twitch); color: var(--text-strong); }
.td-remind.is-set { border-style: solid; border-color: color-mix(in srgb, var(--success) 60%, transparent); color: var(--success-text); cursor: default; }
.td-items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.td-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15em; padding: 0.25em; background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.td-item-watch { font-family: var(--body-font); font-size: 0.6em; font-weight: 700; line-height: 1; color: var(--twitch); font-variant-numeric: tabular-nums; }
a.td-item:hover { border-color: var(--twitch); transform: translateY(-2px); }
.td-item img, .td-item-noimg { width: 2.4em; height: 2.4em; object-fit: contain; }
.td-item-noimg { display: flex; align-items: center; justify-content: center; font-family: var(--primary-font); color: var(--text-faint); }

@media (max-width: 640px) {
    .home-announcement { max-width: none; }
    .twitch-drops-banner { justify-content: center; text-align: center; }
    .td-main { flex-basis: 100%; }
    .td-status { align-items: center; }
    .td-items { justify-content: center; }
    .td-timer { margin-left: 0; justify-content: center; }
}