/* ═══════════════════════════════════════════════════
   NQT Guild CSS — assets/css/nqt-guild.css
   ═══════════════════════════════════════════════════ */

/* ── Guild Header ─────────────────── */
.guild-my-card { margin-bottom: var(--space-6); }

.guild-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.guild-emoji { font-size: 3rem; line-height: 1; flex-shrink: 0; }

.guild-header-info { flex: 1; }

.guild-name {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.guild-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.guild-treasury { color: var(--accent); font-weight: 600; }

.guild-desc { color: var(--text-secondary); font-size: var(--font-size-sm); margin: 0; }

.guild-role-badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}
.role-founder { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
.role-officer { background: linear-gradient(135deg, #8B5CF6, #6D28D9); color: #fff; }
.role-member  { background: var(--bg-tertiary); color: var(--text-secondary); }

/* ── Objectives ───────────────────── */
.guild-objectives { margin-bottom: var(--space-6); }

.objective-row {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.objective-row--done { border-left: 3px solid var(--success); }

.objective-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.objective-type { font-weight: 600; color: var(--text-primary); }
.objective-progress-text { color: var(--text-secondary); font-size: var(--font-size-sm); }
.objective-reward { color: var(--accent); font-weight: 600; margin-left: auto; }

.objective-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.objective-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #06B6D4);
    border-radius: var(--radius-full);
    transition: width 0.8s ease;
}

/* ── Members ──────────────────────── */
.guild-members-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.guild-member-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.member-username { font-weight: 600; }
.member-contributed { color: var(--accent); font-size: var(--font-size-sm); }
.member-weekly { color: var(--text-tertiary); font-size: var(--font-size-sm); }

/* ── Actions ──────────────────────── */
.guild-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* ── No Guild / Create ────────────── */
.no-guild-section { display: flex; flex-direction: column; gap: var(--space-6); }

.create-guild-banner {
    text-align: center;
    padding: var(--space-10);
}

.create-guild-icon { font-size: 4rem; margin-bottom: var(--space-4); }
.create-guild-banner h2 { font-size: var(--font-size-2xl); margin-bottom: var(--space-3); }
.create-guild-banner p { color: var(--text-secondary); margin-bottom: var(--space-4); }

.create-guild-cost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--accent-bg);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-5);
}
.cost-label { color: var(--text-secondary); font-size: var(--font-size-sm); }
.cost-value { color: var(--accent); font-weight: 700; }
.cost-note  { color: var(--text-tertiary); font-size: var(--font-size-xs); }

/* ── Leaderboard ──────────────────── */
.guild-leaderboard { margin-top: var(--space-6); }

.guild-lb-list { display: flex; flex-direction: column; gap: var(--space-2); }

.guild-lb-row {
    display: grid;
    grid-template-columns: 32px 28px 1fr auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    transition: var(--transition-fast);
}
.guild-lb-row--mine {
    background: var(--accent-bg);
    border: 1px solid var(--accent-light);
}
.lb-rank { font-weight: 700; color: var(--text-tertiary); font-size: var(--font-size-sm); }
.lb-emoji { font-size: 1.25rem; }
.lb-name  { font-weight: 600; color: var(--text-primary); }
.lb-members, .lb-treasury, .lb-score { font-size: var(--font-size-sm); color: var(--text-secondary); white-space: nowrap; }
.lb-score { color: var(--accent); font-weight: 600; }

/* ── Badges tier ──────────────────── */
.badge--none     { background: var(--bg-tertiary); color: var(--text-tertiary); }
.badge--bronze   { background: #CD7F32; color: #fff; }
.badge--silver   { background: #9EA3A8; color: #fff; }
.badge--gold     { background: #F59E0B; color: #fff; }
.badge--diamond  { background: linear-gradient(135deg, #06B6D4, #8B5CF6); color: #fff; }

/* ── Responsive ───────────────────── */
@media (max-width: 640px) {
    .guild-header { flex-direction: column; }
    .guild-lb-row { grid-template-columns: 28px 24px 1fr auto auto; }
    .lb-score { display: none; }
    .guild-member-row { grid-template-columns: 1fr auto auto; }
    .member-weekly { display: none; }
}