/* Community blocks (levels, badges, leaderboard, toasts). Colours follow the theme's variables. */
.mc-lvl { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 999px; background: color-mix(in srgb, var(--c, #94a3b8) 16%, transparent); color: var(--c, #94a3b8); font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: middle; }
.mc-lvl b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--c, #94a3b8); color: #0b0c18; font-size: 11px; }
.mc-rank { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 20px; white-space: nowrap; vertical-align: middle; }
.mc-rank--admin { background: rgb(255 77 94 / .16); color: #ff7a87; }
.mc-rank--moderator { background: rgb(43 211 139 / .15); color: #46e0a0; }
.mc-rank--premium { background: rgb(255 194 74 / .16); color: var(--gold, #ffc24a); }
.mc-fb { font-size: 16px; line-height: 1; vertical-align: middle; }

.mc-level { --c: #7c5cff; display: flex; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--line, rgb(255 255 255 / .07)); border-radius: var(--r-lg, 18px); background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%), var(--surface, #14162e); }
.mc-level__ring { --p: 0; position: relative; display: grid; place-items: center; flex: none; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3, #252946) 0); }
.mc-level__ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface, #14162e); }
.mc-level__num { position: relative; font-size: 30px; font-weight: 800; line-height: 1; color: var(--c); margin-top: 10px; }
.mc-level__ring small { position: relative; margin-top: -18px; font-size: 11px; color: var(--muted, #7e8396); }
.mc-level__body { flex: 1; min-width: 0; }
.mc-level__name { display: block; font-size: 22px; color: var(--c); }
.mc-level__title { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2, #1b1e3a); font-size: 13px; color: var(--text-2, #b7bbc8); }
.mc-level__next { margin: 10px 0 0; color: var(--text-2, #b7bbc8); font-size: 14px; }
.mc-level__next b { color: var(--text, #f2f3f7); }
.mc-bar { display: block; height: 10px; margin-top: 12px; border-radius: 999px; background: var(--surface-3, #252946); overflow: hidden; }
.mc-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c, var(--accent, #7c5cff)), color-mix(in srgb, var(--c, #7c5cff) 60%, #fff)); }
.mc-bar--sm { height: 6px; margin-top: 8px; }

.mc-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mc-badge { --c: #7c5cff; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border: 1px solid var(--line, rgb(255 255 255 / .07)); border-radius: var(--r, 14px); background: var(--surface, #14162e); text-align: center; }
.mc-badge.is-earned { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--surface, #14162e); }
.mc-badge.is-locked { opacity: .62; }
.mc-badge.is-locked .mc-badge__icon { filter: grayscale(1); }
.mc-badge__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, transparent); font-size: 28px; }
.mc-badge strong { font-size: 14px; color: var(--text, #f2f3f7); }
.mc-badge small { font-size: 12px; color: var(--muted, #7e8396); line-height: 1.5; }
.mc-badge time, .mc-badge em { font-size: 11px; font-style: normal; color: var(--muted, #7e8396); }
.mc-badge .mc-bar { width: 100%; --c: var(--accent, #7c5cff); }
.mc-gift { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: rgb(255 194 74 / .14); color: var(--gold, #ffc24a); font-size: 11px; font-weight: 600; }

.mc-ladder { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mc-ladder li { --c: #94a3b8; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-2, #1b1e3a); font-size: 14px; }
.mc-ladder li b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-size: 12px; flex: none; }
.mc-ladder li span { flex: 1; color: var(--text, #f2f3f7); }
.mc-ladder li em { font-style: normal; color: var(--muted, #7e8396); font-size: 12px; }
.mc-ladder li.is-done { opacity: .6; }
.mc-ladder li.is-current { box-shadow: inset 0 0 0 1px var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface-2, #1b1e3a)); }

.mc-earn { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mc-earn li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-2, #1b1e3a); font-size: 14px; }
.mc-earn b { color: var(--ok, #2bd38b); }
.mc-note { margin: 10px 0 0; color: var(--muted, #7e8396); font-size: 13px; }

.mc-history { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mc-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line, rgb(255 255 255 / .07)); font-size: 14px; }
.mc-history li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2, #b7bbc8); }
.mc-history time { color: var(--muted, #7e8396); font-size: 12px; }
.mc-history b { color: var(--ok, #2bd38b); min-width: 44px; text-align: end; }
.mc-history b.is-neg { color: var(--danger, #ff4d5e); }

.mc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mc-stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 1px solid var(--line, rgb(255 255 255 / .07)); border-radius: var(--r, 14px); background: var(--surface, #14162e); }
.mc-stats span { font-size: 20px; }
.mc-stats b { font-size: 20px; color: var(--text, #f2f3f7); }
.mc-stats small { color: var(--muted, #7e8396); font-size: 12px; }

.mc-board { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mc-board li { --c: #94a3b8; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-2, #1b1e3a); }
.mc-board li.is-top { background: linear-gradient(90deg, color-mix(in srgb, var(--gold, #ffc24a) 12%, transparent), transparent), var(--surface-2, #1b1e3a); }
.mc-board li.is-me { box-shadow: inset 0 0 0 1px var(--accent, #7c5cff); }
.mc-board__pos { width: 30px; text-align: center; font-weight: 700; color: var(--muted, #7e8396); flex: none; }
.mc-board li.is-top .mc-board__pos { font-size: 22px; }
.mc-board__av { border-radius: 50%; flex: none; }
.mc-board__name { font-weight: 700; color: var(--text, #f2f3f7); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-board__name:hover { color: var(--accent, #7c5cff); }
.mc-board__lvl { margin-inline-start: auto; }
.mc-board__xp { min-width: 80px; text-align: end; color: var(--text, #f2f3f7); white-space: nowrap; }
.mc-board__xp small { color: var(--muted, #7e8396); font-weight: 400; }

.mc-page { max-width: var(--wrap, 1200px); margin: 0 auto; padding: 32px var(--gutter, 16px) 60px; color: var(--text, #f2f3f7); }
.mc-page__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.mc-page__icon { font-size: 42px; }
.mc-page__head h1 { margin: 0 0 4px; font-size: clamp(24px, 3vw, 32px); }
.mc-page__head p { margin: 0; color: var(--text-2, #b7bbc8); }
.mc-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.mc-card { padding: 18px; border: 1px solid var(--line, rgb(255 255 255 / .07)); border-radius: var(--r-lg, 18px); background: var(--surface, #14162e); }
.mc-card h2 { margin: 18px 0 12px; font-size: 17px; }
.mc-card h2:first-child { margin-top: 0; }

.mc-invite-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-invite-code code { padding: 6px 10px; border-radius: 8px; background: var(--surface-2, #1b1e3a); font-size: 14px; letter-spacing: .04em; }
.mc-invite-link { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2, rgb(255 255 255 / .12)); border-radius: 8px; background: var(--bg-2, #0d0f22); color: var(--text-2, #b7bbc8); font-size: 12px; direction: ltr; }

.mc-toasts { position: fixed; left: 50%; bottom: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 24px)); transform: translateX(-50%); }
.mc-toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2, rgb(255 255 255 / .12)); border-radius: var(--r, 14px); background: var(--surface-2, #1b1e3a); color: var(--text, #f2f3f7); box-shadow: 0 18px 40px -16px rgb(0 0 0 / .85); font-size: 14px; line-height: 1.6; animation: mc-in .35s ease both; }
.mc-toast--level { border-color: rgb(var(--accent-rgb, 124 92 255) / .5); }
.mc-toast--badge { border-color: rgb(255 194 74 / .45); }
.mc-toast__icon { font-size: 24px; flex: none; }
.mc-toast__x { margin-inline-start: auto; padding: 0 4px; border: 0; background: none; color: var(--muted, #7e8396); font-size: 20px; cursor: pointer; }
@keyframes mc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
	.mc-page__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.mc-level { flex-direction: column; text-align: center; }
	.mc-board__lvl .mc-lvl { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
	.mc-board__xp { min-width: 60px; font-size: 13px; }
}