/**
 * Contest System Styles
 * Premium minimalist aesthetic (Linear/Figma inspired)
 */

/* ============================================================================
   BASE
   ============================================================================ */
.contest-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    color: #f5f5f5;
    position: relative;
    z-index: 2;
}

/* ============================================================================
   HEADER & TABS
   ============================================================================ */
.contest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.contest-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.contest-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.contest-tab:hover {
    color: #f5f5f5;
    background: rgba(255, 255, 255, 0.05);
}

.contest-tab.active {
    color: #f5f5f5;
    background: #a69cd2;
    box-shadow: 0 2px 8px rgba(166, 156, 210, 0.3);
}

/* Active contest count badge - subtle inline display */
.contest-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: inherit;
    opacity: 0.85;
}

.contest-tab.active .contest-tab-count {
    background: rgba(0, 0, 0, 0.15);
}

.contest-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #a69cd2;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contest-create-btn:hover {
    background: #8b82b8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(166, 156, 210, 0.3);
}

/* ============================================================================
   CONTEST CARDS GRID
   ============================================================================ */
.contest-cards-container {
    min-height: 200px;
}

.contest-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contest-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #252438;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contest-card:hover {
    border-color: rgba(166, 156, 210, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.contest-card-content {
    flex: 1;
}

.contest-card-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.contest-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(166, 156, 210, 0.15);
    color: #a69cd2;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
}

.contest-phase-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
}

.contest-phase-badge.suggestion {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.contest-phase-badge.voting {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.contest-phase-badge.completed {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.contest-card .contest-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #f5f5f5;
}

.contest-card .contest-theme {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 0 12px 0;
}

.contest-card .contest-theme i {
    margin-right: 6px;
}

.contest-meta {
    display: flex;
    gap: 20px;
    align-items: center;
}

.contest-countdown,
.contest-entries {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #9ca3af;
}

.contest-countdown i,
.contest-entries i {
    color: #a69cd2;
}

.countdown-timer {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 500;
}

.countdown-timer.ended {
    color: #f87171;
}

.contest-view-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #f5f5f5;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contest-view-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #a69cd2;
    color: #a69cd2;
}

/* Empty State */
.contest-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
    text-align: center;
}

.contest-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.contest-empty-state p {
    font-size: 16px;
    margin: 0;
    color: #9ca3af;
}

/* ============================================================================
   CONTEST DETAIL VIEW (FULL PAGE)
   ============================================================================ */
.contest-detail-view {
    padding: 28px;
    background: #1a1a2e;
    border-radius: 16px;
    min-height: 400px;
}

.contest-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 24px;
}

.contest-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
}

.contest-back-btn i {
    font-size: 12px;
}

/* ============================================================================
   MODAL (for create contest)
   ============================================================================ */
.contest-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.contest-modal-content {
    background: #252438;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    color: #f5f5f5;
}

.contest-create-modal-content {
    max-width: 600px;
}

.contest-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contest-modal-close:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: #f87171;
    color: #f87171;
}

/* ============================================================================
   CREATE CONTEST FORM
   ============================================================================ */
.contest-modal-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 24px 0;
    color: #f5f5f5;
}

.contest-form-group {
    margin-bottom: 20px;
}

.contest-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    margin-bottom: 8px;
}

.contest-form-group input,
.contest-form-group select,
.contest-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: #f5f5f5;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.contest-form-group input:focus,
.contest-form-group select:focus,
.contest-form-group textarea:focus {
    outline: none;
    border-color: #a69cd2;
}

.contest-form-group small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.contest-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.games-checklist {
    max-height: 200px;
    overflow-y: auto;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.game-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    color: #f5f5f5;
}

.game-checkbox input {
    width: auto;
    cursor: pointer;
}

.game-checkbox:hover {
    color: #a69cd2;
}

.contest-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.contest-btn-primary,
.contest-btn-secondary,
.contest-btn-danger {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contest-btn-primary {
    background: #a69cd2;
    border: none;
    color: #fff;
}

.contest-btn-primary:hover {
    background: #8b82b8;
}

.contest-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.contest-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #f5f5f5;
}

.contest-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

.contest-btn-danger {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid #f87171;
    color: #f87171;
}

.contest-btn-danger:hover {
    background: rgba(248, 113, 113, 0.2);
}

/* ============================================================================
   CONTEST DETAIL VIEW
   ============================================================================ */
.contest-detail-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

#contest-detail-content h2 {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #f5f5f5;
}

#contest-detail-content .contest-theme {
    font-size: 16px;
    color: #9ca3af;
    margin: 0 0 24px 0;
}

/* Phase Tabs */
.contest-phase-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: 24px;
}

.phase-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.phase-tab:hover {
    color: #f5f5f5;
    background: rgba(255, 255, 255, 0.05);
}

.phase-tab.active {
    color: #f5f5f5;
    background: #a69cd2;
}

.phase-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Rules Section */
.contest-rules {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.contest-rules h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f5f5f5;
}

.contest-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contest-rules li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #9ca3af;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.contest-rules li:last-child {
    border-bottom: none;
}

.contest-rules li i {
    width: 20px;
    text-align: center;
    color: #a69cd2;
}

/* Eligible Games */
.contest-eligible-games {
    margin-bottom: 24px;
}

.contest-eligible-games h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #9ca3af;
}

.eligible-games-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.game-chip {
    padding: 6px 12px;
    background: rgba(166, 156, 210, 0.1);
    border: 1px solid rgba(166, 156, 210, 0.2);
    color: #a69cd2;
    font-size: 13px;
    border-radius: 20px;
}

/* Eligible Games Grid (Thumbnails) */
.eligible-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.eligible-game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.eligible-game-card img {
    width: 80px;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.eligible-game-card:hover img {
    transform: scale(1.05);
}

.eligible-game-title {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Notices */
.contest-submitted-notice,
.contest-upgrade-notice,
.contest-phase-ended {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
}

.contest-submitted-notice {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.contest-upgrade-notice {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.contest-phase-ended {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

/* ============================================================================
   SUGGESTION FORM
   ============================================================================ */
.suggestion-form-container {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 24px;
}

.suggestion-form-container h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f5f5f5;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    margin-bottom: 6px;
}

.form-group label small {
    font-weight: 400;
    opacity: 0.7;
}

.form-group label .required {
    color: #f87171;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: #f5f5f5;
    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #a69cd2;
}

.image-input-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.toggle-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #9ca3af;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    color: #f5f5f5;
}

.toggle-btn.active {
    background: #a69cd2;
    border-color: #a69cd2;
    color: #fff;
}

/* Admin field styling */
.form-group.admin-field {
    background: rgba(166, 156, 210, 0.1);
    border: 1px dashed rgba(166, 156, 210, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
}

.form-group.admin-field label {
    color: #a69cd2;
}

.form-group.admin-field label i {
    margin-right: 6px;
}

/* ============================================================================
   SUGGESTIONS GRID
   ============================================================================ */
.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.suggestion-card {
    background: #252438;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.suggestion-card:hover {
    border-color: rgba(166, 156, 210, 0.3);
    transform: translateY(-2px);
}

.suggestion-card.voted {
    border-color: #4ade80;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.1);
}

.suggestion-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.suggestion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.outfit-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    color: #a69cd2;
    font-size: 12px;
}

.suggestion-info {
    padding: 16px;
}

.suggestion-game {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a69cd2;
    margin-bottom: 8px;
}

.suggestion-characters {
    font-size: 14px;
    font-weight: 600;
    color: #f5f5f5;
    margin-bottom: 8px;
}

.suggestion-characters i {
    margin-right: 6px;
    color: #9ca3af;
}

.suggestion-idea {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.suggestion-outfit {
    font-size: 12px;
    color: #a69cd2;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.suggestion-outfit i {
    font-size: 11px;
}

.suggestion-author {
    font-size: 12px;
    color: #9ca3af;
    opacity: 0.7;
}

.suggestion-voting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.vote-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #fbbf24;
}

.voter-count {
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af;
    opacity: 0.7;
}

.suggestion-detail-voting .voter-count {
    font-size: 12px;
}

.vote-btn {
    padding: 8px 16px;
    background: rgba(166, 156, 210, 0.1);
    border: 1px solid #a69cd2;
    color: #a69cd2;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vote-btn:hover {
    background: #a69cd2;
    color: #fff;
}

.vote-btn.voted {
    background: #4ade80;
    border-color: #4ade80;
    color: #fff;
}

.no-suggestions {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    color: #9ca3af;
}

.no-suggestions i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ============================================================================
   RESULTS
   ============================================================================ */
.results-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #252438;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.result-card.gold {
    border-color: #fbbf24;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, #252438 100%);
}

.result-card.silver {
    border-color: #94a3b8;
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, #252438 100%);
}

.result-card.bronze {
    border-color: #d97706;
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, #252438 100%);
}

.result-rank {
    font-size: 24px;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
}

.result-card.gold .result-rank { color: #fbbf24; }
.result-card.silver .result-rank { color: #94a3b8; }
.result-card.bronze .result-rank { color: #d97706; }

.result-image {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-info {
    flex: 1;
    min-width: 0;
}

.result-title {
    font-size: 16px;
    font-weight: 600;
    color: #f5f5f5;
    margin-bottom: 4px;
}

.result-game {
    font-size: 12px;
    color: #a69cd2;
    margin-bottom: 8px;
}

.result-info p {
    font-size: 13px;
    color: #9ca3af;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-outfit {
    font-size: 12px;
    color: #a69cd2;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.result-outfit i {
    font-size: 11px;
}

.result-author {
    font-size: 12px;
    color: #9ca3af;
}

.result-votes {
    font-size: 18px;
    font-weight: 600;
    color: #fbbf24;
    white-space: nowrap;
}

.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    color: #9ca3af;
}

.no-results i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Admin Controls */
.contest-admin-controls {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
}

/* ============================================================================
   LOADING & ERROR STATES
   ============================================================================ */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #9ca3af;
    gap: 10px;
}

.loading-spinner i {
    color: #a69cd2;
}

.error {
    color: #f87171;
    text-align: center;
    padding: 20px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .contest-container {
        padding: 16px;
    }

    .contest-header {
        flex-direction: column;
        align-items: stretch;
    }

    .contest-tabs {
        width: 100%;
    }

    .contest-tab {
        flex: 1;
        text-align: center;
    }

    .contest-create-btn {
        width: 100%;
        justify-content: center;
    }

    .contest-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .contest-view-btn {
        width: 100%;
        justify-content: center;
    }

    .contest-form-row {
        grid-template-columns: 1fr;
    }

    .contest-modal-content {
        padding: 20px;
        margin: 10px;
        max-height: calc(100vh - 20px);
    }

    .suggestions-grid {
        grid-template-columns: 1fr;
    }

    .result-card {
        flex-direction: column;
        text-align: center;
    }

    .result-rank {
        font-size: 32px;
    }

    .result-image {
        width: 100%;
        height: 150px;
    }

    .result-votes {
        margin-top: 12px;
    }

    .contest-phase-tabs {
        flex-direction: column;
    }
}

/* ============================================================================
   SUGGESTION DETAIL MODAL
   ============================================================================ */
.suggestion-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.suggestion-detail-modal.visible {
    opacity: 1;
}

.suggestion-detail-content {
    background: linear-gradient(145deg, #252438 0%, #1a1a2e 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.2s ease;
}

.suggestion-detail-modal.visible .suggestion-detail-content {
    transform: translateY(0);
}

.suggestion-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestion-detail-close:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: #f87171;
    color: #f87171;
}

.suggestion-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    padding: 32px;
}

.suggestion-detail-image {
    position: relative;
}

.suggestion-detail-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.suggestion-detail-info {
    display: flex;
    flex-direction: column;
    padding-right: 24px;
}

.suggestion-detail-game {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a69cd2;
    margin-bottom: 8px;
}

.suggestion-detail-characters {
    font-size: 24px;
    font-weight: 600;
    color: #f5f5f5;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.suggestion-detail-idea {
    font-size: 15px;
    line-height: 1.7;
    color: #d1d5db;
    margin: 0;
    white-space: pre-wrap;
}

.suggestion-detail-outfit {
    margin-top: 24px;
    padding: 16px;
    background: rgba(166, 156, 210, 0.08);
    border: 1px solid rgba(166, 156, 210, 0.15);
    border-radius: 12px;
}

.suggestion-detail-outfit .outfit-label {
    font-size: 12px;
    font-weight: 600;
    color: #a69cd2;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.suggestion-detail-outfit .outfit-text {
    font-size: 14px;
    color: #d1d5db;
    margin: 0;
    line-height: 1.5;
}

.suggestion-detail-outfit .outfit-image {
    max-width: 200px;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.suggestion-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 20px 20px;
}

.suggestion-detail-author {
    font-size: 14px;
    color: #9ca3af;
}

.suggestion-detail-voting {
    display: flex;
    align-items: center;
    gap: 16px;
}

.suggestion-detail-voting .vote-count {
    font-size: 16px;
}

.suggestion-detail-voting .vote-btn {
    padding: 10px 20px;
    font-size: 14px;
}

/* Suggestion and result card cursor pointer */
.suggestion-card,
.result-card {
    cursor: pointer;
}

/* Responsive for suggestion detail modal */
@media (max-width: 768px) {
    .suggestion-detail-modal {
        padding: 12px;
    }

    .suggestion-detail-layout {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }

    .suggestion-detail-info {
        padding-right: 0;
    }

    .suggestion-detail-characters {
        font-size: 20px;
    }

    .suggestion-detail-close {
        top: 12px;
        right: 12px;
    }

    .suggestion-detail-footer {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 16px 20px;
    }

    .suggestion-detail-voting {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   SCROLLBAR STYLING
   ============================================================================ */
.contest-modal-content::-webkit-scrollbar,
.games-checklist::-webkit-scrollbar,
.suggestion-detail-content::-webkit-scrollbar {
    width: 6px;
}

.contest-modal-content::-webkit-scrollbar-track,
.games-checklist::-webkit-scrollbar-track,
.suggestion-detail-content::-webkit-scrollbar-track {
    background: transparent;
}

.contest-modal-content::-webkit-scrollbar-thumb,
.games-checklist::-webkit-scrollbar-thumb,
.suggestion-detail-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.contest-modal-content::-webkit-scrollbar-thumb:hover,
.games-checklist::-webkit-scrollbar-thumb:hover,
.suggestion-detail-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   WINNER THUMBNAIL (Past Contest Cards)
   ============================================================================ */
.contest-winner-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 16px;
}

.contest-winner-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   VOTE BREAKDOWN (Results Phase)
   ============================================================================ */
.result-votes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.result-vote-total {
    font-size: 16px;
    font-weight: 600;
    color: #fbbf24;
}

.vote-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 10px;
    color: #9ca3af;
    justify-content: flex-end;
}

.tier-stat {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ============================================================================
   BONUS CG SPECIFIC STYLES
   ============================================================================ */

/* Bonus CG suggestion cards */
.suggestion-card.bonus-cg .suggestion-moment {
    font-size: 13px;
    color: #a69cd2;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-style: italic;
}

.suggestion-card.bonus-cg .suggestion-moment i {
    margin-top: 2px;
    flex-shrink: 0;
}

.suggestion-card.bonus-cg .suggestion-extra {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.suggestion-card.bonus-cg .suggestion-extra i {
    margin-right: 6px;
    color: #9ca3af;
}

/* Bonus CG detail modal - Moment section */
.suggestion-detail-moment {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(166, 156, 210, 0.08);
    border: 1px solid rgba(166, 156, 210, 0.15);
    border-radius: 12px;
}

.moment-label {
    font-size: 12px;
    font-weight: 600;
    color: #a69cd2;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.moment-text {
    font-size: 14px;
    color: #d1d5db;
    margin: 0;
    line-height: 1.5;
}

/* Bonus CG detail modal - Extra Info section */
.suggestion-detail-extra {
    margin-top: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.extra-label {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.extra-text {
    font-size: 14px;
    color: #d1d5db;
    margin: 0;
    line-height: 1.5;
}

/* Form hint text */
.form-hint {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 8px;
    font-weight: normal;
}

/* Moment input toggle in form */
.moment-text-input {
    width: 100%;
    resize: vertical;
}

/* Moment image in detail modal */
.moment-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    margin-top: 8px;
}

/* Rule examples styling */
.contest-rules li.rule-example {
    padding-left: 30px;
    font-size: 13px;
    border-bottom: none;
    padding-top: 4px;
    padding-bottom: 4px;
}

.contest-rules li.rule-example i {
    color: #4ade80;
}

.contest-rules li.rule-example.bad i {
    color: #f87171;
}

/* Tier eligibility badges on contest cards */
.contest-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.contest-tier-badge.exclusive {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #d8b4fe;
}

.contest-tier-badge.exclusive i {
    color: #c084fc;
}

.contest-tier-badge.standard {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.contest-tier-badge.standard i {
    color: #4ade80;
}