/* raffle.css: Weekly Raffle; Site News comments and reactions. */
/* =========================================================================
   Weekly Raffle ("Lucky Draw")
   One contiguous block at the end of the file, same reasoning as the .ib2-*/
   .sq2-* blocks: nothing else can fight it in the cascade, and the whole
   feature is one contiguous edit to add, retune, or remove.
   ========================================================================= */
.raffle-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}
.raffle-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.raffle-sidebar { min-width: 0; }
.raffle-section h2 { margin-top: 0; }

.raffle-prizes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}
.raffle-prize-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    text-align: center;
}
.raffle-prize-number {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.raffle-prize-icon img { border-radius: var(--radius-sm); object-fit: contain; }
.raffle-prize-emoji { font-size: 2rem; display: block; }
.raffle-prize-name { font-weight: 600; margin-top: 6px; }

.raffle-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.raffle-countdown-label { color: var(--text-muted); }
.raffle-countdown-timer { font-weight: 700; color: var(--color-primary); }

.raffle-buy-form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }

.raffle-entries-section { margin-top: 16px; }
.raffle-entries-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.raffle-entries-odds { color: var(--text-muted); font-size: 0.9rem; }
.raffle-entries-table { width: 100%; border-collapse: collapse; }
.raffle-entries-table th,
.raffle-entries-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}
.raffle-entries-empty { color: var(--text-muted); }

.raffle-history { display: flex; flex-direction: column; gap: 12px; }
.raffle-history-entry { border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.raffle-history-entry:last-child { border-bottom: none; padding-bottom: 0; }
.raffle-history-date { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.raffle-history-prizes { display: flex; flex-direction: column; gap: 6px; }
.raffle-history-prize { display: flex; align-items: flex-start; gap: 8px; }
.history-prize-icon { flex-shrink: 0; }
.raffle-history-list { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 900px) {
    .raffle-page { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (width < 640px) {
    .raffle-prizes { grid-template-columns: minmax(0, 1fr); }
}

/* Site News comments: a flat list beneath a published post, plus one composer.
   Mirrors .forum-post/.forum-reply-form structurally (meta line, body, actions,
   a textarea composer), but kept as its own namespace rather than reusing the
   forum's own classes cross-domain: this is a comment list, not a second forum. */
.news-comments__heading { margin: 0 0 12px; }
.news-comment {
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    margin-bottom: 10px;
}
.news-comment__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.news-comment__date { color: var(--text-muted); }
.news-comment__body { line-height: 1.6; overflow-wrap: break-word; }
.news-comment__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.news-comment__actions form { margin: 0; }

.news-comment-form { margin-top: 12px; }
.news-comment-form textarea { width: 100%; }
.news-comment-form__tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.news-comment-form__tools a { color: var(--text-secondary); font-size: .8rem; }

/* Site News reactions, on both a post and a comment: mirrors .forum-reactions*
   exactly (curated six chips, dim/tint on the reacted one, a "who reacted"
   line), under its own namespace for the same cross-domain reason as the
   comment classes above. */
.news-reactions-wrap { margin: 10px 0; }
.news-reactions { display: flex; flex-wrap: wrap; gap: 6px; }
.news-reactions form { margin: 0; }
.news-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
}
.news-reactions--readonly .news-reaction-chip { cursor: default; }
.news-reaction-chip.is-active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 16%, var(--bg-subtle));
    color: var(--text-primary);
}
@media (hover: hover) {
    .news-reactions .news-reaction-chip:hover { border-color: var(--color-primary); }
}
.news-reaction-names { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-muted); }