/* ============================================================================
   RamboMC website — Ghost-theme
   ----------------------------------------------------------------------------
   Zelfde huisstijl als de store (RamboMC-Craftingstore-Template/style.css).
   Kleuren staan alleen in :root en in de tonen van blok 02.

     01 Tokens          06 Knoppen + labels    11 Bericht
     02 Kleurtonen      07 Nieuws: intro/tabs  12 Pagina-kop
     03 Basis           08 Nieuws: kaarten     13 Staff
     04 Kop (home)      09 Discord-blok        14 Regels
     05 Balk            10 Ghost-inhoud        15 Stemmen
                                               16 Footer + responsive
   ========================================================================== */


/* 01  TOKENS ================================================================ */

:root {
    --accent:        #FFC93C;
    --accent-hover:  #FFD45E;
    --on-accent:     #2B2006;
    --discord:       #5865F2;

    --text:          #1E2740;
    --text-soft:     #33405F;
    --text-muted:    #4E5A78;
    --label:         #5B6785;

    /* Achtergrond: de kleur van de wolkjes in de banner. */
    --page:          #C4F5F9;
    --surface:       #FFFFFF;
    --glass:         rgba(255, 255, 255, .88);
    --glass-strong:  rgba(255, 255, 255, .94);
    --glass-bar:     rgba(255, 255, 255, .7);
    --glass-line:    rgba(255, 255, 255, .95);
    --bg-alt:        #F6F8FB;
    --chip:          #EEF2F7;
    --line:          #E3E8F0;
    --line-soft:     #EDF1F6;
    --btn-white-edge:#DDE4EE;
    --placeholder:   #D8E2EE;
    --save-bg:       #DCF5E5;
    --save-ink:      #14532D;
    --save-line:     #BFEBD0;

    --sh-btn-accent: inset 0 -4px 0 rgba(120, 80, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .45);
    --sh-btn-white:  inset 0 -4px 0 var(--btn-white-edge);
    --sh-btn-discord:inset 0 -4px 0 rgba(0, 0, 30, .3), inset 0 2px 0 rgba(255, 255, 255, .18);
    --sh-chip-accent:inset 0 -3px 0 rgba(120, 80, 0, .25);
    --sh-glass:      0 14px 40px rgba(20, 60, 110, .14);
    --sh-card:       0 10px 26px rgba(20, 60, 110, .1);
    --sh-bar:        0 10px 30px rgba(20, 60, 110, .12);

    --r-btn:  6px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-pill: 999px;

    /* Ghost kan via Ontwerp > Merk een ander lettertype zetten; anders Rubik. */
    --font: var(--gh-font-body, 'Rubik'), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-head: var(--gh-font-heading, 'Rubik'), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --t: .18s ease;
    --wrap: 1200px;
}


/* 02  KLEURTONEN ============================================================
   Een toon zet --tone-grad (labels, icoonvlakken) en --tone-soft (vlak achter
   een afbeelding). Topics krijgen hun toon via de tag-slug. */

.tone--none, .tone--sky { --tone-grad: linear-gradient(135deg, #BDE6FF, #DDF0FB); --tone-ink: #075985; --tone-soft: linear-gradient(150deg, #EEF2F7 0%, #DDF0FB 100%); }
.tone--gold   { --tone-grad: linear-gradient(135deg, #FFE9A6, #FFCFE3); --tone-ink: #713F12; --tone-soft: linear-gradient(150deg, #FFF3C4 0%, #FFE1EC 100%); }
.tone--purple { --tone-grad: linear-gradient(135deg, #E7D6FF, #FFD1E8); --tone-ink: #5B21B6; --tone-soft: linear-gradient(150deg, #EFE6FF 0%, #FFE4F0 100%); }
.tone--red    { --tone-grad: linear-gradient(135deg, #FFD6D6, #FFE1C2); --tone-ink: #9F1239; --tone-soft: linear-gradient(150deg, #FFE7E7 0%, #FFEDE0 100%); }
.tone--blue   { --tone-grad: linear-gradient(135deg, #CFE0FF, #E7D6FF); --tone-ink: #1E3A8A; --tone-soft: linear-gradient(150deg, #DDF0FB 0%, #E7E2FF 100%); }
.tone--green  { --tone-grad: linear-gradient(135deg, #C8F5D8, #BDE6FF); --tone-ink: #14532D; --tone-soft: linear-gradient(150deg, #E3F8EB 0%, #DDF0FB 100%); }
.tone--mint   { --tone-grad: linear-gradient(135deg, #E3F8EB, #F1FBF5); --tone-ink: #166534; --tone-soft: linear-gradient(150deg, #E3F8EB 0%, #F1FBF5 100%); }
.tone--peach  { --tone-grad: linear-gradient(135deg, #FFE1C2, #E6D9FF); --tone-ink: #7C2D12; --tone-soft: linear-gradient(150deg, #FFE1C2 0%, #FFD6E4 55%, #E6D9FF 100%); }

/* Topics (tag-slugs) */
.tone--events      { --tone-grad: linear-gradient(135deg, #FFE1C2, #E6D9FF); --tone-ink: #7C2D12; --tone-soft: linear-gradient(150deg, #FFE1C2 0%, #FFD6E4 55%, #E6D9FF 100%); }
.tone--updates     { --tone-grad: linear-gradient(135deg, #CFE0FF, #E7D6FF); --tone-ink: #1E3A8A; --tone-soft: linear-gradient(150deg, #DDF0FB 0%, #E7E2FF 100%); }
.tone--acties      { --tone-grad: linear-gradient(135deg, #FFE9A6, #FFCFE3); --tone-ink: #713F12; --tone-soft: linear-gradient(150deg, #FFF3C4 0%, #FFE1EC 100%); }
.tone--patch-notes { --tone-grad: linear-gradient(135deg, #E3E8F0, #F6F8FB); --tone-ink: #33405F; --tone-soft: linear-gradient(150deg, #EEF2F7 0%, #DDF0FB 100%); }
.tone--community   { --tone-grad: linear-gradient(135deg, #C8F5D8, #BDE6FF); --tone-ink: #14532D; --tone-soft: linear-gradient(150deg, #E3F8EB 0%, #DDF0FB 100%); }

/* Onbekend topic: neutraal blauw. */
[class*="tone--"] { --tone-grad-fallback: linear-gradient(135deg, #BDE6FF, #DDF0FB); }


/* 03  BASIS ================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--page);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 56px;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); }
a { color: var(--text); }
a:hover { color: #3C4A73; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.wrap {
    display: flex; flex-direction: column; gap: 20px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}
.wrap--bar { padding-top: 24px; margin-bottom: 20px; }
.wrap--news { margin-top: 8px; }
.wrap--footer { margin-top: 20px; }

.card {
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-card);
}

/* Pixel-icoontjes altijd scherp en in hele veelvouden. */
.pix { display: inline-block; flex: none; image-rendering: pixelated; object-fit: contain; }
.pix--14 { width: 14px; height: 14px; }
.pix--16 { width: 16px; height: 16px; }
.pix--18 { width: 18px; height: 18px; }
.pix--20 { width: 20px; height: 20px; }
.pix--22 { width: 22px; height: 22px; }
.pix--24 { width: 24px; height: 24px; }
.pix--32 { width: 32px; height: 32px; }
.pix--48 { width: 48px; height: 48px; }

.kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }


/* 04  KOP (home en topics) ================================================== */

.hero { position: relative; }
.hero__banner {
    height: 360px;
    background-size: cover; background-position: center;
    -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, #000 62%, transparent 100%);
}
.pills {
    position: absolute; top: 36px; left: 50%;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    width: max-content; max-width: calc(100% - 32px);
    padding: 10px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(20, 60, 90, .18);
}
.hero__logo {
    position: relative;
    display: flex; justify-content: center;
    width: 260px; height: 260px;
    margin: -190px auto 0;
}
.hero__logo img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(30, 40, 80, .28));
    animation: logo-float 5s ease-in-out infinite;
}
/* Rustig zweven, zoals in de store: een paar pixels op en neer met een
   fractie kantelen. */
@keyframes logo-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
}

.pill {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    border-radius: var(--r-btn);
    background: var(--surface); color: var(--text);
    box-shadow: var(--sh-btn-white);
    font: 800 13px var(--font); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
    transition: transform var(--t), background var(--t);
}
.pill:hover { color: var(--text); transform: translateY(-1px); }
.pill--active { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-btn-accent); }
.pill--active:hover { background: var(--accent-hover); color: var(--on-accent); }
.pill i { font-size: 14px; }


/* 05  BALK (overige pagina's) =============================================== */

.bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--r-md);
    background: var(--glass-bar);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: var(--sh-bar);
}
.bar__logo { display: inline-flex; align-items: center; margin-right: 6px; }
.bar__logo img { width: 60px; height: 60px; object-fit: contain; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.bar__logo:hover img { transform: rotate(-8deg) scale(1.08); }

/* Wie in het systeem minder beweging heeft ingesteld, krijgt een stil logo. */
@media (prefers-reduced-motion: reduce) {
    .hero__logo img { animation: none; }
    .bar__logo img { transition: none; }
    .bar__logo:hover img { transform: none; }
}
.bar__links { display: flex; flex-wrap: wrap; gap: 8px; }
.bar__links .pill { padding: 0 16px; }
.bar__spacer { flex: 1 1 auto; }


/* 06  KNOPPEN + LABELS ====================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px;
    border: 0; border-radius: var(--r-btn);
    background: var(--surface); color: var(--text);
    font: 800 14px var(--font); letter-spacing: .05em; text-transform: uppercase;
    line-height: 1.1; text-align: center; text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: background var(--t), transform var(--t), filter var(--t);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-btn-accent), 0 6px 14px rgba(160, 110, 0, .2); }
.btn--accent:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--white { background: var(--surface); box-shadow: var(--sh-btn-white); }
.btn--discord { background: var(--discord); color: #FFFFFF; box-shadow: var(--sh-btn-discord), 0 6px 14px rgba(60, 70, 180, .28); }
.btn--discord:hover { color: #FFFFFF; filter: brightness(1.06); }
.btn--lg { min-height: 52px; padding: 0 26px; }
.btn--block { display: flex; width: 100%; }

/* Gele label boven een paginatitel */
.label {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    height: 28px; padding: 0 12px;
    border-radius: var(--r-btn);
    background: var(--accent); color: var(--on-accent);
    box-shadow: var(--sh-chip-accent);
    font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}

/* Topic-label met pastel kleurverloop */
.chip {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--tone-grad, var(--tone-grad-fallback)); color: var(--tone-ink, var(--text-soft));
    font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
a.chip:hover { color: var(--tone-ink); filter: brightness(.98); }


/* 07  NIEUWS: INTRO + TOPICS ================================================ */

.intro { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.intro__title { margin: 0; font-size: 44px; font-weight: 900; line-height: 1.05; }
.intro__text { margin: 0; max-width: 520px; color: var(--text-soft); }

.topics {
    align-self: center;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 14px;
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: var(--sh-card);
}
.topic {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px;
    border-radius: var(--r-btn);
    background: var(--surface); color: var(--text);
    box-shadow: var(--sh-btn-white);
    font: 800 13px var(--font); letter-spacing: .04em; text-decoration: none;
    transition: transform var(--t);
}
.topic:hover { color: var(--text); transform: translateY(-1px); }
.topic__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--chip); color: var(--text-muted);
    font-size: 11px; font-weight: 900;
}

/* Actieve knop: "Alles" op home, anders de knop van het huidige topic. */
.home-template .topic--all,
.paged:not(.tag-template) .topic--all,
.tag-events .topic--events,
.tag-updates .topic--updates,
.tag-acties .topic--acties,
.tag-patch-notes .topic--patch-notes,
.tag-community .topic--community { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-btn-accent); }
.home-template .topic--all .topic__count,
.paged:not(.tag-template) .topic--all .topic__count,
.tag-events .topic--events .topic__count,
.tag-updates .topic--updates .topic__count,
.tag-acties .topic--acties .topic__count,
.tag-patch-notes .topic--patch-notes .topic__count,
.tag-community .topic--community .topic__count { background: rgba(255, 255, 255, .7); color: var(--on-accent); }


/* 08  NIEUWS: KAARTEN ======================================================= */

.news { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.news--three { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Uitgelicht: over de volle breedte */
.feature {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--glass-line);
    border-radius: 22px;
    background: var(--glass-strong);
    box-shadow: 0 18px 46px rgba(20, 60, 110, .16);
}
.feature__media {
    position: relative;
    flex: 1 1 380px; min-height: 340px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tone-soft, var(--tone-grad-fallback));
}
/* De uitgelichte afbeelding vult altijd het hele vlak. */
.feature__media > img:not(.pix) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__media > .pix { width: 96px; height: 96px; }
.feature__badge {
    position: absolute; top: 16px; left: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 12px;
    border-radius: var(--r-pill);
    background: #FFFFFF; color: var(--text);
    font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.feature__body {
    flex: 1 1 420px; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 12px;
    padding: 32px;
}
.feature__title { margin: 0; font-size: 36px; font-weight: 900; line-height: 1.1; }
.feature__title a { text-decoration: none; }
.feature__excerpt { margin: 0; color: var(--text-soft); }
.feature .btn { align-self: flex-start; margin-top: 6px; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 13px; color: var(--text-muted); }
.meta__author { display: inline-flex; align-items: center; gap: 8px; }
.meta__author strong { color: var(--text); }
.meta__avatar { width: 26px; height: 26px; border-radius: 4px; background: var(--placeholder); object-fit: cover; }
.meta__read { display: inline-flex; align-items: center; gap: 4px; }

/* Gewone kaart */
.post-card {
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--glass-line);
    border-radius: 18px;
    background: var(--glass-strong);
    box-shadow: var(--sh-card);
    color: var(--text); text-decoration: none;
    transition: transform var(--t), box-shadow var(--t);
}
.post-card:hover { color: var(--text); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20, 60, 110, .14); }
.post-card__media {
    height: 190px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tone-soft, var(--tone-grad-fallback));
}
.post-card__media > img:not(.pix) { width: 100%; height: 100%; object-fit: cover; }
.post-card__media > .pix { width: 64px; height: 64px; }
.post-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.post-card__title { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.2; }
.post-card__excerpt { margin: 0; font-size: 14px; color: var(--text-muted); }
.post-card__meta { display: flex; justify-content: space-between; margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--label); }

.empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--text-muted); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pager__info { font-size: 13px; font-weight: 700; color: var(--text-muted); }


/* 09  DISCORD-BLOK + WERVING ================================================ */

.cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
    padding: 24px 28px;
    box-shadow: var(--sh-glass);
}
.cta__text { flex: 1 1 320px; }
.cta__text h2 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.15; }
.cta__text p { margin: 2px 0 0; font-size: 15px; color: var(--text-soft); }
.cta--warm { background: linear-gradient(120deg, #FFF3C4 0%, #FFE1EC 55%, #E3EEFF 100%); }
.cta--warm .cta__text h2 { font-size: 26px; }
.cta__art { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(30, 40, 80, .2)); }


/* 10  GHOST-INHOUD (editor) ================================================= */

.gh-content { font-size: 17px; line-height: 1.7; color: var(--text-soft); overflow-wrap: break-word; }
.gh-content > * + * { margin-top: 1.1em; margin-bottom: 0; }
.gh-content > :first-child { margin-top: 0; }
.gh-content h2, .gh-content h3, .gh-content h4 { color: var(--text); font-weight: 900; line-height: 1.2; }
.gh-content h2 { margin-top: 1.6em; font-size: 26px; }
.gh-content h3 { margin-top: 1.4em; font-size: 21px; }
.gh-content a { color: #3C45B5; font-weight: 600; }
.gh-content strong { color: var(--text); }
.gh-content ul, .gh-content ol { padding-left: 1.4em; }
.gh-content li + li { margin-top: .35em; }
.gh-content blockquote { margin-left: 0; padding: 12px 18px; border-left: 4px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--bg-alt); }
.gh-content hr { border: 0; height: 1px; background: var(--line); }
.gh-content img { height: auto; border-radius: var(--r-md); }
.gh-content figure { margin-left: 0; margin-right: 0; }
.gh-content figcaption { margin-top: 8px; font-size: 13px; text-align: center; color: var(--label); }
.gh-content pre { overflow-x: auto; padding: 16px; border-radius: var(--r-md); background: #1E2740; color: #E3E8F0; font-size: 14px; }
.gh-content code { font-size: .9em; }
.gh-content :not(pre) > code { padding: 2px 6px; border-radius: 4px; background: var(--chip); color: var(--text); }
.gh-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gh-content th, .gh-content td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }

/* Brede en volle afbeeldingen uit de editor (Ghost verplicht deze klassen). */
.kg-width-wide { position: relative; width: calc(100% + 64px); max-width: none; margin-left: -32px; }
.kg-width-full { position: relative; width: calc(100% + 64px); max-width: none; margin-left: -32px; }
.kg-width-full img { border-radius: 0; }
.kg-image { display: block; margin: 0 auto; }


/* 11  BERICHT =============================================================== */

.article { padding: 32px; }
.article__head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto 24px; }
.article__title { margin: 0; font-size: 40px; font-weight: 900; line-height: 1.1; }
.article__excerpt { margin: 0; font-size: 18px; color: var(--text-soft); }
.article__media {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    margin: 0 -32px 28px;
    background: var(--tone-soft, var(--tone-grad-fallback));
}
.article__media img { display: block; width: 100%; height: auto; }
.article__media figcaption { margin: 0; padding: 10px 16px 12px; font-size: 13px; color: var(--text-muted); }
.article__media--page { margin: 0; overflow: hidden; }
.article .gh-content { max-width: 760px; margin: 0 auto; }

/* Bericht: kop zoals de uitgelichte kaart (plaatje links, titel rechts),
   schrijver onderaan. */
.article--post { overflow: hidden; padding-top: 0; }
.article__hero {
    display: flex; flex-wrap: wrap;
    margin: 0 -32px 36px;
    border-bottom: 1px solid var(--line-soft);
}
.article__banner {
    position: relative;
    flex: 1 1 380px; min-height: 340px;
    margin: 0;
    background: var(--tone-soft, var(--tone-grad-fallback));
}
.article__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article__hero .article__head {
    flex: 1 1 420px; min-width: 0; justify-content: center;
    max-width: none; margin: 0; padding: 36px 40px;
}
.article__hero--plain .article__head { padding: 40px 32px 8px; max-width: 824px; margin: 0 auto; }
.article__hero--plain { border-bottom: 0; margin-bottom: 20px; }
.article__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.article__kicker .chip { margin-right: 4px; }
.article__dot { color: var(--label); }
.article--post .article__title { font-size: 46px; line-height: 1.05; }
.article__caption { margin: 0; font-size: 13px; color: var(--label); }
.article__author {
    display: flex; align-items: center; gap: 14px;
    max-width: 760px; margin: 36px auto 0; padding-top: 22px;
    border-top: 1px solid var(--line);
}
.article__avatar { flex: none; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--placeholder); object-fit: cover; }
.article__by { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.article__name { font-size: 17px; font-weight: 900; color: var(--text); }

.more { display: flex; flex-direction: column; gap: 14px; }
.more__title { margin: 0; font-size: 24px; font-weight: 900; }


/* 12  PAGINA-KOP ============================================================ */

.pagehead {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
    padding: 28px;
    background: var(--glass);
    box-shadow: var(--sh-glass);
}
.pagehead__main { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }
.pagehead__title { margin: 0; font-size: 46px; font-weight: 900; line-height: 1.05; }
.pagehead__text { margin: 0; max-width: 520px; color: var(--text-soft); }
.pagehead__small { font-size: 13px; color: var(--text-muted); }
.pagehead--center { text-align: center; }
.pagehead--center .pagehead__main { align-items: center; }
.pagehead--center .label { align-self: center; }


/* 13  STAFF ================================================================= */

.badges { display: flex; flex-wrap: wrap; gap: 8px; }

/* Rollabel: zelfde vorm als de topic-labels, in de kleur van de rol. */
.roletag {
    display: inline-flex; align-items: center;
    height: 26px; padding: 0 12px;
    border-radius: var(--r-pill);
    background: var(--tone-grad); color: var(--tone-ink);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .06);
    font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}

.staff, .staff__groups { display: flex; flex-direction: column; gap: 20px; }
.group { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 24px; }
.group__head { display: flex; align-items: center; gap: 12px; }
.group__badge {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    background: var(--tone-grad);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .06);
}
.group__text { flex: 1 1 auto; min-width: 0; }
.group__title { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.1; }
.group__desc { font-size: 13px; color: var(--text-muted); }
.group__count { font-size: 13px; font-weight: 800; color: var(--text-muted); white-space: nowrap; }

.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.group--big .members { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.member {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 16px 12px;
    border: 2px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: #FFFFFF;
    box-shadow: 0 6px 16px rgba(30, 40, 80, .05);
}
.group--big .member { padding: 22px 16px; }
.member__frame {
    display: flex; align-items: center; justify-content: center;
    width: 100px; height: 100px; padding: 4px;
    border-radius: var(--r-md);
    background: var(--tone-grad);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .06);
}
.group--big .member__frame { width: 120px; height: 120px; }
.member__frame { overflow: hidden; }
.member__skin { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10px; image-rendering: pixelated; }
.member__name { font-size: 16px; font-weight: 900; text-align: center; overflow-wrap: anywhere; }


/* 14  REGELS ================================================================ */

.steps { flex: 1 1 340px; display: flex; flex-direction: column; gap: 10px; }
.steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.steps__item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 4px;
    border-radius: 10px;
    font-size: 12px; font-weight: 900; line-height: 1.2; text-align: center;
}
.steps__item--1 { background: #FFF8DB; }
.steps__item--2 { background: #FFEDD5; }
.steps__item--3 { background: #FFE1E1; }
.steps__item--4 { background: #FFD0D6; }
.steps__note { font-size: 12px; color: var(--text-muted); }

.rules { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.rules__toc {
    position: sticky; top: 20px;
    flex: 1 1 240px; max-width: 280px;
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px;
    border-radius: 18px;
}
.rules__toc .kicker { padding: 4px 8px 6px; }
.toc__link {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 10px;
    border-radius: 8px;
    background: var(--bg-alt);
    font-size: 14px; font-weight: 700; text-decoration: none;
}
.toc__link:hover { background: var(--chip); }
.toc__name { flex: 1 1 auto; }
.toc__count { font-size: 12px; font-weight: 800; color: var(--label); }
.rules__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.cat { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; scroll-margin-top: 20px; }
.cat__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.cat__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--tone-grad); }
.cat__title { margin: 0; font-size: 22px; font-weight: 900; }
.cat__note { margin: 0; font-size: 14px; color: var(--text-muted); }
.cat__rules { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rule { display: flex; gap: 14px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg-alt); }
.rule__n {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--tone-grad);
    font-size: 13px; font-weight: 900;
}
.rule__text { min-width: 0; }
.rule__title { font-size: 15px; font-weight: 900; }
.rule__desc { font-size: 14px; color: var(--text-muted); }

.rules__source { flex: 1 1 100%; }


/* 15  STEMMEN =============================================================== */

.tally {
    flex: 1 1 340px;
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #FFFFFF;
}
.tally__top { display: flex; align-items: baseline; justify-content: space-between; }
.tally__count { font-size: 22px; font-weight: 900; }
.tally__bar { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }
.tally__seg { height: 12px; border-radius: 4px; background: var(--line); }
.tally__seg.is-on { background: var(--accent); box-shadow: var(--sh-chip-accent); }
.tally__note { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-soft); }

.votes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.votes:empty { display: none; }
.vote {
    display: flex; flex-direction: column; gap: 14px;
    padding: 20px;
    border: 2px solid var(--glass-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--sh-card);
}
.vote.is-done { border-color: var(--save-line); }
.vote__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.vote__num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--tone-grad); font-size: 20px; font-weight: 900; }
.done-chip {
    display: none; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--save-bg); color: var(--save-ink);
    font-size: 12px; font-weight: 800;
}
.vote.is-done .done-chip { display: inline-flex; }
.vote__name { margin: 0; font-size: 20px; font-weight: 900; overflow-wrap: anywhere; }
.vote__host { font-size: 13px; color: var(--label); overflow-wrap: anywhere; }
.reward { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-alt); }
.reward .kicker { letter-spacing: .1em; }
.reward__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border: 1px solid var(--line); border-radius: var(--r-btn); background: #FFFFFF; font-size: 13px; font-weight: 800; }
.vote__btn { margin-top: auto; min-height: 50px; }
.vote.is-done .vote__btn { background: var(--chip); color: var(--text-muted); box-shadow: var(--sh-btn-white); }

.how { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; box-shadow: var(--sh-glass); }
.how__col { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.how h2 { margin: 0; font-size: 22px; font-weight: 900; }
.how__steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.how__steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-soft); }
.how__n { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 900; }
.prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prize { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 14px; text-align: center; }
.prize strong { font-size: 20px; font-weight: 900; }
.prize span { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.prize--1 { background: linear-gradient(135deg, #FFE3EC, #FFF1CF); }
.prize--2 { background: linear-gradient(135deg, #FFE9A6, #FFCFE3); }
.prize--3 { background: linear-gradient(135deg, #C8F5D8, #BDE6FF); }
.how__note { margin: 0; font-size: 13px; color: var(--text-muted); }


/* 16  FOOTER + RESPONSIVE =================================================== */

.site-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
    padding: 18px 24px;
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-size: 13px; color: var(--text-muted);
}

@media (max-width: 760px) {
    .wrap { padding: 0 16px; gap: 16px; }
    .wrap--bar { padding-top: 16px; }
    .hero__banner { height: 300px; }
    .pills { top: 16px; padding: 8px; gap: 6px; }
    .pill { min-height: 40px; padding: 0 12px; font-size: 12px; }
    .hero__logo { width: 200px; height: 200px; margin-top: -130px; }
    .intro__title { font-size: 34px; }
    .pagehead { padding: 22px; }
    .pagehead__title { font-size: 34px; }
    .feature__body { padding: 22px; }
    .feature__title { font-size: 28px; }
    .feature__media { min-height: 240px; }
    .news { grid-template-columns: 1fr; }
    .article { padding: 22px; }
    .article__title { font-size: 30px; }
    .article__hero { margin: 0 -22px 26px; }
    .article__banner { min-height: 210px; }
    .article__hero .article__head { padding: 22px 22px 24px; }
    .article--post .article__title { font-size: 32px; }
    .kg-width-wide, .kg-width-full { width: calc(100% + 44px); margin-left: -22px; }
    .bar__logo img { width: 48px; height: 48px; }
    .bar__links { order: 3; width: 100%; gap: 6px; }
    .group { padding: 18px; }
    .group__head { flex-wrap: wrap; }
    .group__badge { width: 48px; height: 48px; }
    .group__text { flex: 1 1 160px; }
    .members, .group--big .members { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .bar__links .pill { padding: 0 12px; }
    .bar .btn--discord { min-height: 44px; padding: 0 16px; }
    .rules__toc { position: static; max-width: none; }
    .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prizes { gap: 6px; }
    .cta { padding: 20px; }
}