/* YouTube Comment Picker - filters, entries counter, winner cards
 * with the staggered reveal. */

.ycp-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.ycp-field { display: flex; flex-direction: column; gap: 4px; }
.ycp-field-grow { flex: 1 1 240px; }
.ycp-field-sm { flex: 0 1 140px; }
.ycp-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.ycp-check { font-size: 0.86rem; color: #334155; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.ycp-draw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef0f3; }
.ycp-entries { font-size: 0.92rem; font-weight: 700; color: #1f2937; }

.ycp-winners { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.ycp-winners[hidden] { display: none; }
.ycp-winner {
    background: #fdf9f0;
    border: 1px solid #f1e2bd;
    border-radius: 12px;
    padding: 14px 16px;
    opacity: 0;
    transform: translateY(8px);
    animation: ycp-reveal 0.5s ease forwards;
}
@keyframes ycp-reveal {
    to { opacity: 1; transform: translateY(0); }
}
.ycp-winner-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ycp-winner-badge {
    background: #b45309;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    padding: 3px 10px;
}
.ycp-winner-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #eef0f3; }
.ycp-winner-name { font-weight: 800; color: #0b57d0; text-decoration: none; font-size: 0.95rem; }
.ycp-winner-name:hover { text-decoration: underline; }
.ycp-winner-date { font-size: 0.78rem; }
.ycp-winner-text { margin-top: 8px; font-size: 0.9rem; color: #1f2937; white-space: pre-wrap; word-break: break-word; }
.ycp-again { align-self: flex-start; }