.community-page { padding-top: 48px; padding-bottom: 48px; }
.community-heading { margin-bottom: 28px; }
.community-heading h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 10px 0; }
.community-form { display: grid; gap: 12px; margin-top: 16px; }
.community-form .btn { justify-self: start; }
.community-form textarea { resize: vertical; }
.community-section { scroll-margin-top: 90px; }
.community-comment { padding: 20px 0; border-bottom: 1px solid var(--border-color); }
.community-comment-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.community-comment-header time { font-size: .8rem; }
.community-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0; }
.vote-balance { border: 1px solid var(--border-hover); }
.vote-balance p { margin-top: 10px; }
.vote-remaining { color: var(--accent-primary); font-size: 2.5rem; }
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.vote-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.vote-card > img { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; display: block; }
.vote-card-body { padding: 20px; }
.vote-card h3 { margin-bottom: 10px; overflow-wrap: anywhere; }
.vote-count { font-size: 1.25rem; margin: 18px 0; }
.vote-card button { width: 100%; }
.community-page button:disabled { opacity: .5; cursor: not-allowed; }
.community-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; }

.community-page > .content-section { margin-bottom: 24px; }


.community-page h1 { margin: 16px 0 24px; }
.vote-history-grid { display: grid; gap: 16px; margin-top: 20px; }
.vote-history-card { display: flex; gap: 20px; padding: 16px; border: 1px solid var(--border-color); border-radius: 12px; align-items: center; }
.vote-history-card img { width: 200px; aspect-ratio: 460/215; object-fit: cover; border-radius: 8px; }
.outcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.outcome-status { color: var(--accent-primary); margin: 10px 0; }
#outcomes { scroll-margin-top: 90px; }
@media (max-width: 650px) { .outcome-actions { grid-template-columns: 1fr; } .vote-history-card { flex-direction: column; align-items: stretch; } .vote-history-card img { width: 100%; } }

.vote-board-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin: 18px 0; }
.vote-board-heading h2 { margin-right: auto; }
.vote-quick-balance { color: var(--accent-primary); background: var(--accent-subtle); padding: 8px 14px; border-radius: 20px; }
.community-page .vote-grid { margin-bottom: 24px; }
.community-page .community-pagination { margin-bottom: 24px; }
#propose-game { scroll-margin-top: 90px; }


/* Badge Status */
.badge-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}
.status-voting { background: rgba(56, 189, 248, 0.1); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.2); }
.status-selected { background: rgba(250, 204, 21, 0.1); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.2); }
.status-translating { background: rgba(168, 85, 247, 0.1); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.2); }
.status-translated { background: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.2); }

/* Leaderboard Top 10 */
.leaderboard-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.leaderboard-item {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    gap: 16px;
    position: relative;
    overflow: hidden;
}
.leaderboard-item:hover {
    border-color: var(--accent-primary);
}
.rank-badge {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-muted);
    min-width: 40px;
    text-align: center;
}
.rank-1 { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); font-size: 2rem; }
.rank-2 { color: #94a3b8; font-size: 1.8rem; }
.rank-3 { color: #b45309; font-size: 1.6rem; }

.leaderboard-img {
    width: 120px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
}
.leaderboard-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.leaderboard-score {
    font-size: 1.25rem;
    font-weight: bold;
    min-width: 80px;
    text-align: right;
}

@media (max-width: 600px) {
    .leaderboard-img { display: none; }
    .leaderboard-item { padding: 12px; gap: 12px; }
}

/* Modal Overlay Base (Nạp lại đề phòng trong style cũ chưa có) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalPop {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}