.community-duel {
    overflow: hidden;
    color: var(--odp-text, #eef2ff);
    background: linear-gradient(145deg, rgba(24, 29, 49, .98), rgba(13, 17, 31, .98));
    border: 1px solid rgba(148, 163, 184, .18);
}

.community-duel__header,
.community-duel__intro,
.community-duel__columns {
    display: flex;
}

.community-duel__header {
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, .13);
}

.community-duel__header h2 {
    margin: .2rem 0 0;
    font-size: clamp(1.15rem, 3.6vw, 1.55rem);
}

.community-duel__eyebrow,
.community-duel__label {
    color: #aeb9d4;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.community-duel__lock {
    flex: 0 0 auto;
    padding: .42rem .65rem;
    color: #c7d2fe;
    border: 1px solid rgba(129, 140, 248, .3);
    border-radius: 999px;
    font-size: .75rem;
}

.community-duel__body { padding: 1.2rem; }

.community-duel__intro {
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.community-duel__intro p { margin: 0; color: #c5cee3; }
.community-duel__deadline { color: #86efac; font-size: .8rem; white-space: nowrap; }

.community-duel__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.community-duel__panel {
    min-width: 0;
    padding: 1rem;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
}

.community-duel__choice { display: grid; gap: .25rem; margin-top: .75rem; }
.community-duel__choice strong { overflow-wrap: anywhere; font-size: 1.04rem; }
.community-duel__choice span, .community-duel__empty { color: #aeb9d4; font-size: .82rem; }

.community-duel__buttons { display: grid; gap: .55rem; margin-top: .75rem; }
.community-duel__vote {
    display: grid;
    gap: .12rem;
    width: 100%;
    min-height: 52px;
    padding: .62rem .75rem;
    color: #f8fafc;
    text-align: left;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 10px;
    background: rgba(15, 23, 42, .72);
    cursor: pointer;
}
.community-duel__vote span { color: #aeb9d4; font-size: .7rem; text-transform: uppercase; }
.community-duel__vote:hover, .community-duel__vote:focus-visible { border-color: #818cf8; transform: translateY(-1px); }
.community-duel__vote:disabled { cursor: wait; opacity: .6; transform: none; }

.community-duel__bar-label { display: flex; justify-content: space-between; gap: .5rem; margin-top: .7rem; font-size: .78rem; }
.community-duel__bar-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-duel__bar { height: 7px; margin-top: .28rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.community-duel__bar i { display: block; height: 100%; border-radius: inherit; background: #34d399; }
.community-duel__bar--dire i { background: #fb7185; }
.community-duel__panel small { display: block; margin-top: .65rem; color: #8e9ab5; }

.community-duel__sealed { display: grid; place-items: center; gap: .55rem; min-height: 105px; color: #8e9ab5; text-align: center; font-size: .82rem; }
.community-duel__result { display: inline-block; margin-top: .7rem; padding: .25rem .5rem; border-radius: 999px; font-size: .75rem; }
.community-duel__result.is-correct { color: #86efac; background: rgba(34,197,94,.12); }
.community-duel__result.is-wrong { color: #fda4af; background: rgba(244,63,94,.12); }
.community-duel__status, .community-duel__account-note { margin: .8rem 0 0; color: #aeb9d4; font-size: .82rem; }
.community-duel__status.is-error { color: #fda4af; }

@media (max-width: 767.98px) {
    .community-duel__header { align-items: flex-start; padding: 1rem; }
    .community-duel__lock { font-size: .68rem; }
    .community-duel__body { padding: .85rem; }
    .community-duel__intro { align-items: flex-start; flex-direction: column; }
    .community-duel__columns { grid-template-columns: 1fr; }
    .community-duel__panel { padding: .85rem; }
    .community-duel__buttons { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
    .community-duel__header { flex-direction: column; }
    .community-duel__buttons { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .community-duel__vote { transition: none; }
}

.hero-contribution { overflow: hidden; }
.hero-contribution__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #f8fafc;
    background: linear-gradient(135deg, #4338ca, #6d28d9);
}
.hero-contribution__header h2 { font-size: 1.15rem; }
.hero-contribution__eyebrow { display: block; margin-bottom: .15rem; color: #ddd6fe; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.hero-contribution__method { padding: .3rem .55rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: .7rem; }
.hero-contribution__lead { color: var(--bs-secondary-color, #94a3b8); font-size: .85rem; }
.hero-contribution__notice { display: flex; gap: .65rem; margin-bottom: 1rem; padding: .75rem; color: #cbd5e1; background: rgba(99,102,241,.1); border-radius: 10px; font-size: .8rem; }
.hero-contribution__groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem 1rem; }
.hero-contribution__group > div:first-child, .hero-contribution__row { display: flex; justify-content: space-between; gap: .75rem; }
.hero-contribution__group span, .hero-contribution__row span { overflow-wrap: anywhere; }
.hero-contribution__group strong, .hero-contribution__row strong { white-space: nowrap; font-size: .82rem; }
.hero-contribution__track { height: 7px; margin-top: .3rem; overflow: hidden; background: rgba(148,163,184,.14); border-radius: 999px; }
.hero-contribution__track i { display: block; height: 100%; border-radius: inherit; }
.hero-contribution .is-radiant { color: #34d399; }
.hero-contribution .is-dire { color: #fb7185; }
.hero-contribution__track .is-radiant { background: #34d399; }
.hero-contribution__track .is-dire { margin-left: auto; background: #fb7185; }
.hero-contribution__details { margin-top: 1rem; }
.hero-contribution__details summary { color: #a5b4fc; cursor: pointer; font-size: .82rem; }
.hero-contribution__row { padding: .65rem 0; border-bottom: 1px solid rgba(148,163,184,.12); font-size: .82rem; }

@media (max-width: 575.98px) {
    .hero-contribution__groups { grid-template-columns: 1fr; }
    .hero-contribution__header { align-items: flex-start; flex-direction: column; }
}