/* Made by PapaGordon */
/* Discord-Seite. Basis kommt aus mf-base.css. */
:root { --blurple: #5865f2; }

/* Kopf. */
.discordHero { position: relative; }
.discordHero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.discordHero h1 .line > span { display: inline-block; animation: rise .9s var(--ease-out) both; }
.discordHero h1 .line + .line > span { animation-delay: .12s; color: #8f98ff; }
.discordHero > p { animation: fadeIn .8s .3s both; }
.discordHero .heroActions { animation: fadeIn .8s .4s both; }

.valueStrip { width: var(--page); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.valueStrip li { padding: 16px 18px; border-radius: var(--radius-small); background: var(--deck); color: var(--haze); font-size: 15px; font-weight: 600; }

/* Live-Ansicht. */
.livePanel { min-height: 280px; border-radius: 24px; background: linear-gradient(150deg, color-mix(in srgb, var(--blurple) 30%, var(--deck)), var(--deck) 65%); }
.consentPanel { display: grid; justify-items: start; gap: 14px; max-width: 760px; padding: clamp(24px, 4vw, 44px); }
.consentPanel h3 { font-size: clamp(28px, 3.4vw, 44px); }
.consentPanel p { color: var(--soft); }
.consentPanel small { color: var(--haze); font-size: 14px; }
.consentPanel small a { color: var(--moon); text-underline-offset: 3px; }
.loadingPanel { display: flex; align-items: center; gap: 14px; padding: clamp(24px, 4vw, 44px); }
.spinner { width: 28px; height: 28px; border: 3px solid rgba(238,234,246,.2); border-top-color: var(--moon); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.communityLive { display: grid; gap: 22px; padding: clamp(22px, 4vw, 40px); animation: fadeIn .4s both; }
.liveHead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.liveHead h3 { font-size: clamp(28px, 3.4vw, 44px); }
.livePill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--night); font-weight: 600; }
.livePill i { width: 10px; height: 10px; border-radius: 50%; background: var(--live); animation: pulse 2.2s infinite; }
.liveColumns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 14px; }
.liveColumns > section { padding: 18px; border-radius: 18px; background: var(--night); }
.liveColumns h4 { margin: 0 0 12px; font: 800 19px/1.2 var(--font-display); }
.memberGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.member { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border-radius: 12px; background: var(--deck); }
.member > span:last-child { display: grid; min-width: 0; }
.member strong { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.member small { overflow: hidden; color: var(--haze); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.memberAvatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--blurple); font-size: 13px; font-weight: 600; }
.liveNote { display: block; margin-top: 10px; color: var(--haze); font-size: 13px; }
.channelList { display: grid; gap: 6px; }
.channelList div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--deck); font-weight: 600; }
.channelList div span { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.emptyState { color: var(--haze); }

/* Community. */
.featureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.featureGrid article { padding: 24px; border-radius: 20px; background: var(--deck); box-shadow: inset 0 4px 0 var(--accent); }
.featureGrid h3 { font-size: 24px; letter-spacing: -.02em; }
.featureGrid p { margin-top: 10px; color: var(--soft); }

/* Projekte. */
.projectList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.projectList a { position: relative; display: flex; align-items: center; min-height: 84px; padding: 0 60px 0 22px; border-radius: 18px; background: var(--deck); font: 900 clamp(22px, 2.2vw, 30px)/1.1 var(--font-display); letter-spacing: -.03em; text-decoration: none; transition: background .2s, transform .2s var(--ease-out); }
.projectList a::after { content: ""; position: absolute; right: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--accent); }
.projectList a:hover { background: var(--deck-high); transform: translateY(-2px); }

/* Regeln. */
.rulesBand { width: var(--page); margin: clamp(72px, 10vw, 130px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: var(--mint); color: var(--night); }
.rulesBand h2 { grid-row: span 2; font-size: clamp(36px, 4.6vw, 64px); }
.rulesBand .button { justify-self: start; }

@media (max-width: 1000px) {
  .valueStrip { grid-template-columns: repeat(2, 1fr); }
  .liveColumns, .featureGrid, .rulesBand { grid-template-columns: 1fr; }
  .projectList { grid-template-columns: repeat(2, 1fr); }
  .rulesBand h2 { grid-row: auto; }
}
@media (max-width: 620px) {
  .valueStrip, .projectList { grid-template-columns: 1fr; }
}