/* =========================================================
   Pixel SMP — Layout: topbar, hero, live-duo, mission,
   community/marquee, guides, slut-CTA, footer.
   ========================================================= */

/* ============== TOPBAR ============== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 8, 20, .75);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--c-border-soft);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .85rem;
}
.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .02em;
}
.topbar .brand img {
    width: 176px;
    /* height: 40px; */
    /* image-rendering: pixelated; */
}
.topbar .brand span b { color: var(--c-purple); }

.topbar nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.topbar nav a.nav-link {
    font-weight: 500;
    color: var(--c-text-dim);
    transition: color var(--t-fast);
    position: relative;
}
.topbar nav a.nav-link:hover,
.topbar nav a.nav-link.is-active { color: var(--c-text); }
.topbar nav a.nav-link:hover::after,
.topbar nav a.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: var(--c-purple);
}

.topbar-actions { display: inline-flex; align-items: center; gap: .75rem; }

/* mobile burger */
.burger {
    display: none;
    width: 42px; height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .03);
}
.burger span {
    display: block;
    width: 18px; height: 2px;
    background: var(--c-text);
    position: relative;
}
.burger span::before, .burger span::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--c-text);
}
.burger span::before { top: -6px; }
.burger span::after  { top:  6px; }

@media (max-width: 880px) {
    .topbar nav,
    .topbar-actions .login-link { display: none; }
    .burger { display: inline-flex; }
    .topbar.is-open + .mobile-sheet { display: flex; }
}

.mobile-sheet {
    display: none;
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(11, 8, 20, .96);
    backdrop-filter: blur(8px);
    z-index: 49;
    flex-direction: column;
    padding: 1.5rem;
    gap: .5rem;
}
.mobile-sheet a {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--c-border-soft);
    font-weight: 700;
}
.mobile-sheet a.is-cta { background: var(--c-purple); color: #fff; text-align: center; }

/* ============== HERO ============== */
.hero {
    position: relative;
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
    overflow: hidden;
    min-height: clamp(420px, 70vh, 720px);
    display: flex;
    align-items: center;
}
.hero::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto auto;
    width: 60%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(162, 89, 255, .35), transparent 70%);
    z-index: 0;
    pointer-events: none;
}
.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    width: 100%;
}
@media (max-width: 880px) {
    .hero { min-height: 0; display: block; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero { text-align: center; }
    .hero .hero-cta-row { justify-content: center; }
    .hero .hero-live { justify-content: center; }
}
.hero h1 {
    margin-bottom: 1.1rem;
    /* Sort stroke + skygge så teksten er læsbar henover hero-billedet */
    -webkit-text-stroke: 8px #000;
    paint-order: stroke fill;
    text-shadow:
        0 8px 0 rgba(0, 0, 0, .55),
        0 6px 24px rgba(0, 0, 0, .55);
}
.hero h1 .accent { color: var(--c-purple); display: inline-block; }
.hero .hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: var(--c-text-dim);
    max-width: 52ch;
    margin-bottom: 1.8rem;
}
@media (max-width: 880px) { .hero .hero-sub { margin-inline: auto; } }

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 1.5rem;
}
.hero-live {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--c-text-dim);
    font-size: .98rem;
    flex-wrap: wrap;
}
.hero-live strong { color: var(--c-text); margin-right: .15rem; }
.hero-live-sep {
    color: rgba(162,89,255,.55);
    margin: 0 .1rem;
    font-weight: 700;
}

.hero-art {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-art::before {
    content: "";
    position: absolute;
    inset: 5% 5%;
    background: radial-gradient(closest-side, rgba(162, 89, 255, .45), transparent 70%);
    filter: blur(20px);
    z-index: 0;
}
.hero-art img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: min(520px, 100%);
    height: auto;
    image-rendering: pixelated;
    -webkit-user-drag: none;
}

/* Desktop: hero-billede som stort baggrunds-element, aligned right,
   må overlappe teksten en smule. Teksten ligger over med z-index. */
@media (min-width: 881px) {
    .hero-text { position: relative; z-index: 2; max-width: 60%; }
    .hero-art {
        position: absolute;
        top: 0;
        right: clamp(-3rem, -4vw, -1rem);
        width: clamp(520px, 58vw, 880px);
        height: auto;
        z-index: 1;
        pointer-events: none;
    }
    .hero-art img {
        width: 100%;
        max-width: none;
        filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
    }
    .hero-art::before {
        inset: 8% 8%;
        background: radial-gradient(closest-side, rgba(162, 89, 255, .55), transparent 70%);
        filter: blur(40px);
    }
    /* Subtil fade så billedet glider ind i bagrunden mod venstre */
    .hero-art::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--c-bg-0) 0%, rgba(11, 8, 20, 0) 28%);
        z-index: 2;
        pointer-events: none;
    }
}
@media (min-width: 1280px) {
    .hero-art { width: clamp(720px, 62vw, 1000px); right: clamp(-6rem, -6vw, -2rem); }
    .hero-text { max-width: 56%; }
}

/* ============== LIVE-DUO ============== */
.section {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.section-head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section-head h2 { margin-bottom: .8rem; }
.section-head h1 {
    margin-bottom: .8rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
}
.section-head p {
    max-width: 60ch;
    margin-inline: auto;
    font-size: 1.05rem;
}

/* Page header (subsider som /guides) */
.page-header {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 1.5rem);
    position: relative;
    overflow: hidden;
}
.page-header::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(162, 89, 255, .25), transparent 70%);
    z-index: 0;
    pointer-events: none;
}
.page-header .section-head { position: relative; z-index: 1; }

.live-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 760px) {
    .live-duo { grid-template-columns: 1fr; }
}
.stat-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 220px;
}
.stat-card .stat-label {
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}
.stat-card .stat-big {
    font-size: clamp(3rem, 6vw, 4.6rem);
    line-height: 1;
    font-weight: 700;
    margin: .25rem 0 .35rem;
}
.stat-card .stat-big .slash { color: var(--c-text-mut); font-size: .55em; margin-left: .25rem; }
.stat-card .stat-foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.25rem;
    color: var(--c-text-dim);
    font-size: .9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border-soft);
}
.stat-card .stat-foot b { color: var(--c-text); }

.stat-card.is-server .stat-big { color: var(--c-green); text-shadow: 0 0 30px rgba(62, 211, 90, .35); }
.stat-card.is-discord .stat-big { color: var(--c-purple); text-shadow: 0 0 30px rgba(162, 89, 255, .35); }

.stat-card .stat-cta { margin-top: 1rem; }

.discord-avatars {
    display: flex;
    align-items: center;
    margin: .4rem 0 .2rem;
}
.discord-avatars .av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--c-panel);
    background: var(--c-panel-2);
    margin-left: -10px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-text);
}
.discord-avatars .av:first-child { margin-left: 0; }
.discord-avatars .av img { width: 100%; height: 100%; object-fit: cover; }
.discord-avatars .av-more {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-purple);
    color: #fff;
    margin-left: -10px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    border: 2px solid var(--c-panel);
}
.discord-avatars .av-more.is-green { background: var(--c-green); }

/* ============== MISSION ============== */
.values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin-top: 1rem;
}
@media (max-width: 800px) { .values { grid-template-columns: 1fr; } }
.value {
    text-align: left;
}
.value .v-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(162,89,255,.25), rgba(162,89,255,.08));
    border: 1px solid var(--c-border);
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-bottom: 1rem;
    color: var(--c-purple);
}
.value h3 { margin-bottom: .5rem; }
.value p  { font-size: .98rem; }

/* ============== COMMUNITY MARQUEE ============== */
.community-cta { text-align: center; margin-top: 2rem; }

.marquee {
    margin: 1.5rem 0;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row {
    display: flex;
    width: max-content;
    gap: 1.5rem;
    animation: marquee 60s linear infinite;
}
.marquee-row.reverse { animation-direction: reverse; animation-duration: 75s; }
.marquee-row + .marquee-row { margin-top: 1rem; }

.marquee .av {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
    transition: transform var(--t-base);
}
.marquee .av img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.marquee .av:hover { transform: translateY(-6px); }

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-row { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ============== GUIDES (accordion) ============== */
.guides { display: grid; gap: .85rem; }
.guide {
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--t-fast);
}
.guide.is-open { border-color: var(--c-purple); }
.guide-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.2rem 1.4rem;
    text-align: left;
    transition: background var(--t-fast);
}
.guide-head:hover { background: rgba(162, 89, 255, .06); }
.guide-head .g-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(162,89,255,.25), rgba(162,89,255,.08));
    border: 1px solid var(--c-border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-purple);
    flex-shrink: 0;
}
.guide-head h3 {
    flex: 1;
    font-size: 1.15rem;
    color: var(--c-text);
}
.guide-head .g-toggle {
    color: var(--c-text-dim);
    font-size: 1.4rem;
    transition: transform var(--t-fast);
}
.guide.is-open .g-toggle { transform: rotate(45deg); color: var(--c-purple); }

.guide-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.guide.is-open .guide-body { max-height: 1500px; }
.guide-body-inner {
    padding: 0 1.4rem 1.4rem;
    color: var(--c-text-dim);
}
.guide-body-inner > * + * { margin-top: 1rem; }
.guide-body-inner p strong { color: var(--c-text); }
.guide-body-inner code {
    background: rgba(255, 255, 255, .06);
    padding: .15rem .4rem;
    border-radius: 4px;
    color: var(--c-cyan);
    font-family: var(--f-body);
}

.guide-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--c-border-soft);
}
.guide-tabs button {
    padding: .6rem 1rem;
    color: var(--c-text-dim);
    font-weight: 700;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.guide-tabs button.is-active {
    color: var(--c-purple);
    border-bottom-color: var(--c-purple);
}
.guide-panel { display: none; }
.guide-panel.is-active { display: block; }

.steps { display: grid; gap: .9rem; counter-reset: step; }
.steps li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 1rem;
    align-items: flex-start;
}
.steps li::before {
    counter-increment: step;
    content: counter(step);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-purple);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-sm);
}
.steps li h4 { margin-bottom: .15rem; color: var(--c-text); font-size: 1rem; }

/* ============== IP COPY ============== */
.ip-copy {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--c-border);
    padding: .55rem .7rem .55rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.ip-copy:hover { border-color: var(--c-purple); background: rgba(162, 89, 255, .08); }
.ip-copy .ip { color: var(--c-text); letter-spacing: .02em; }
.ip-copy .ic {
    color: var(--c-text-dim);
    transition: color var(--t-fast);
}
.ip-copy:hover .ic { color: var(--c-purple); }
.ip-copy.is-copied { border-color: var(--c-green); }
.ip-copy.is-copied .ic { color: var(--c-green); }

/* ============== SLUT-CTA ============== */
.cta-banner {
    margin: clamp(2rem, 6vw, 5rem) 0 0;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 20% 20%, rgba(162, 89, 255, .35), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(123, 45, 255, .35), transparent 50%),
        linear-gradient(135deg, #2a1450 0%, #160a2b 100%);
    border: 1px solid var(--c-border);
    text-align: center;
    box-shadow: var(--glow-purple);
}
.cta-banner h2 { margin-bottom: .7rem; }
.cta-banner p { margin-bottom: 1.6rem; max-width: 50ch; margin-inline: auto; }
.cta-banner .cta-row {
    display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center;
}

/* ============== FOOTER ============== */
.site-footer {
    margin-top: clamp(2rem, 5vw, 4rem);
    padding: 2.5rem 0 1.8rem;
    border-top: 1px solid var(--c-border-soft);
}
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}
.footer-brand {
    display: inline-flex; align-items: center; gap: .65rem; font-weight: 700;
}
.footer-brand img { width: 28px; height: 28px; image-rendering: pixelated; }
.footer-nav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}
.footer-nav a { color: var(--c-text-dim); transition: color var(--t-fast); }
.footer-nav a:hover { color: var(--c-text); }
.footer-meta { color: var(--c-text-mut); font-size: .9rem; }
@media (max-width: 600px) { .footer-grid { flex-direction: column; text-align: center; } }

/* ============== TOAST ============== */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--c-purple);
    color: #fff;
    padding: .8rem 1.2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    box-shadow: var(--shadow-cta);
    transition: transform .3s ease;
    z-index: 100;
}
.toast.is-visible { transform: translateX(-50%) translateY(0); }

/* ============== FLOATING JOIN-BUTTON (Minecraft-style) ==============
 * Designet som en klassisk MC-button:
 *   - Firkantet (ingen border-radius), pixel-perfect rendering
 *   - 2px sort yderkant + 4-farvet bevel (hvid top/venstre, mørk bund/højre)
 *   - Semi-transparent baggrund med Deepslate-texture + backdrop blur,
 *     så man kan se siden gennem knappen
 *   - Lilla "tint"-overlay holder brand-følelsen
 *   - Pixel-bob + halo bevares men i pixel-style (firkantet halo)
 */
.floating-join {
    position: fixed;
    bottom: clamp(1rem, 3vw, 1.75rem);
    right: clamp(1rem, 3vw, 1.75rem);
    z-index: 90;

    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem 1.15rem .85rem;

    color: #fff;
    font-family: 'Minecraft', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .04em;
    text-decoration: none;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);

    /* Lag 1: Deepslate-texture (lav opacity) — Lag 2: lilla tint */
    background-color: rgba(38, 22, 62, .55);
    background-image:
        linear-gradient(rgba(123, 45, 255, .35), rgba(80, 25, 180, .45)),
        url('/assets/minecrafticons/minecraft_item_icons/Item%20icons/InvSprite%20files/Invicon%20Deepslate.png');
    background-repeat: no-repeat, repeat;
    background-size: cover, 32px 32px;
    background-position: center, center;

    /* Klassisk MC-button bevel: tyk sort kant + 4-farvet inset */
    border: 2px solid #000;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .35),       /* highlight top/left */
        inset -2px -2px 0 rgba(0, 0, 0, .55),           /* shadow bottom/right */
        inset 0 0 0 3px rgba(162, 89, 255, .25),        /* lilla glow indeni */
        0 4px 0 #000,                                   /* "lift" skygge */
        0 8px 24px rgba(123, 45, 255, .35);             /* aura */
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
    animation: fjBob 3.4s steps(2, end) infinite;
    will-change: transform;
}
.floating-join .fj-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    overflow: hidden;
}
.floating-join .fj-icon img {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .65));
}
.floating-join .fj-icon img.is-swapping {
    opacity: 0;
    transform: translateY(-6px) scale(.7) rotate(-8deg);
}
.floating-join:hover,
.floating-join:focus-visible {
    transform: translateY(-2px);
    background-color: rgba(58, 30, 90, .65);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .45),
        inset -2px -2px 0 rgba(0, 0, 0, .6),
        inset 0 0 0 3px rgba(162, 89, 255, .45),
        0 6px 0 #000,
        0 12px 32px rgba(162, 89, 255, .55);
    outline: none;
    animation-play-state: paused;
}
.floating-join:active {
    transform: translateY(2px);
    box-shadow:
        inset 2px 2px 0 rgba(0, 0, 0, .45),             /* invertér bevel = "trykket" */
        inset -2px -2px 0 rgba(255, 255, 255, .25),
        inset 0 0 0 3px rgba(162, 89, 255, .25),
        0 0 0 #000,
        0 4px 14px rgba(123, 45, 255, .35);
}

/* Pixel-halo (firkantet, ikke rund) — match MC-æstetikken */
.floating-join::before {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(162, 89, 255, .55);
    opacity: 0;
    animation: fjPulse 2.4s steps(6, end) infinite;
    pointer-events: none;
}

@keyframes fjBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes fjPulse {
    0%   { opacity: .7; transform: scale(1); }
    80%  { opacity: 0;  transform: scale(1.18); }
    100% { opacity: 0;  transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .floating-join,
    .floating-join::before { animation: none; }
}

@media (max-width: 480px) {
    .floating-join {
        padding: .7rem .9rem .75rem;
        font-size: .9rem;
        gap: .5rem;
    }
    .floating-join .fj-text { display: inline; }
}

/* ============== INFO / MINECRAFT MENU ============== */
.mc-menu-section {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
    position: relative;
    overflow: hidden;
}
.mc-menu-section::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 90%;
    background: radial-gradient(closest-side, rgba(162, 89, 255, .28), transparent 70%);
    z-index: 0;
    pointer-events: none;
}
.mc-menu-wrap { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.mc-menu-head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.mc-menu-logo {
    width: clamp(110px, 16vw, 160px);
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55));
    margin-bottom: 1rem;
}
.mc-menu-head h1,
.mc-title {
    font-family: 'Minecraft', system-ui, sans-serif;
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    font-weight: 400;
    color: #fff;
    margin-bottom: .5rem;
    text-shadow: 3px 3px 0 #3f3f3f;
    letter-spacing: .02em;
}
.mc-menu-head p { color: var(--c-text-dim); font-family: 'Minecraft', sans-serif; }

.mc-menu {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 620px;
    margin: 0 auto;
}
.mc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
@media (max-width: 560px) {
    .mc-row { grid-template-columns: 1fr; }
}

/* Minecraft-button (rigtig stone-stil) */
.mc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: .6rem 1rem;
    min-height: 44px;
    background: #727272;
    color: #f7f7f7;
    font-family: 'Minecraft', system-ui, sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: .025em;
    text-decoration: none;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
    border: 2px solid #000;
    box-shadow:
        inset 3px 3px 0 rgba(255, 255, 255, .5),
        inset -3px -3px 0 rgba(0, 0, 0, .5);
    image-rendering: pixelated;
    cursor: pointer;
    user-select: none;
    transition: background .12s ease, color .12s ease;
}
.mc-btn:hover {
    background: rgb(115, 107, 221);
}
.mc-btn:focus,
.mc-btn:focus-visible {
    color: rgb(246, 246, 44);
    outline: none;
}
.mc-btn-wide { grid-column: 1 / -1; }

/* Info-sektioner (under menuen) */
.info-section {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    scroll-margin-top: 90px;
}
.info-section.is-alt { background: rgba(22, 12, 37, .35); }
.info-block {
    /* max-width: 760px; */
    margin: 0 auto;
}
.info-block .eyebrow { display: inline-block; margin-bottom: .8rem; }
.info-block h2 { margin-bottom: 1rem; font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.info-block h3 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; color: var(--c-text); }
.info-block p { color: var(--c-text-dim); margin-bottom: .8rem; }
.info-block strong { color: var(--c-text); }

.info-bullets {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: grid;
    gap: .55rem;
}
.info-bullets li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--c-text-dim);
}
.info-bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: .6rem; height: .6rem;
    background: var(--c-purple);
    box-shadow: 0 0 0 2px #000;
}

.rules-list {
    list-style: none;
    counter-reset: rules;
    padding: 0;
    margin: 1.25rem 0 0;
    display: grid;
    gap: 1rem;
}
.rules-list li {
    counter-increment: rules;
    position: relative;
    padding: 1.1rem 1.25rem 1.1rem 3.5rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
}
.rules-list li::before {
    content: counter(rules);
    position: absolute;
    left: .85rem; top: 50%;
    transform: translateY(-50%);
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    background: var(--c-purple);
    color: #fff;
    font-family: 'Minecraft', sans-serif;
    font-weight: 700;
    border: 2px solid #000;
    -webkit-text-stroke: 1px #000;
    paint-order: stroke fill;
}
.rules-list li h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.rules-list li p { margin: 0; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.team-card {
    padding: 1.25rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
}
.team-card .team-role {
    display: inline-block;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-purple);
    margin-bottom: .5rem;
}
.team-card h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.team-card p { margin: 0; color: var(--c-text-dim); font-size: .95rem; }

/* ============== BREADCRUMB ============== */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
    font-size: .95rem;
    color: var(--c-text-dim);
}
.breadcrumb a {
    color: var(--c-text-dim);
    text-decoration: none;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease;
}
.breadcrumb a:hover {
    color: var(--c-text);
    background: rgba(162, 89, 255, .12);
}
.breadcrumb .sep {
    color: rgba(162, 89, 255, .55);
    font-weight: 700;
    user-select: none;
}
.breadcrumb [aria-current="page"] {
    color: var(--c-text);
    font-weight: 600;
    padding: .25rem .5rem;
}

/* Disclaimer block på regler-siden */
.rules-disclaimer {
    text-align: center;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: rgba(123, 45, 255, .08);
    border: 2px solid rgba(162, 89, 255, .3);
    border-radius: 12px;
}
.rules-disclaimer .eyebrow {
    color: var(--c-purple);
    font-size: 1rem;
    margin-bottom: .75rem;
    display: inline-block;
}
.rules-disclaimer p { margin: 0; color: var(--c-text); }

/* Regler-side */

/* ============== TIL FORÆLDRE ============== */
.page-parents .info-block { max-width: 900px; }

.parents-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.quick-card {
    padding: 1.1rem 1.25rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
}
.quick-card .quick-label {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-purple);
    margin-bottom: .35rem;
}
.quick-card .quick-value {
    font-family: 'Minecraft', sans-serif;
    font-size: 1.2rem;
    color: var(--c-text);
    margin-bottom: .35rem;
}
.quick-card .quick-text {
    font-size: .9rem;
    color: var(--c-text-dim);
    line-height: 1.45;
}

.parents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.trust-card {
    padding: 1.25rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
}
.trust-card .trust-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: .6rem;
}
.trust-card h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.trust-card p { margin: 0; color: var(--c-text-dim); font-size: .95rem; line-height: 1.55; }
.trust-card a { color: var(--c-purple); }

/* ============== TEAMET BAG ============== */
.page-team .info-block { max-width: 1100px; }

.owners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
    align-items: start;
}
@media (max-width: 760px) {
    .owners-grid { grid-template-columns: 1fr; }
}

.owner-card {
    margin-top: 0;
    padding: 1.25rem clamp(1rem, 2.5vw, 1.5rem);
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
    transition: transform .25s ease, box-shadow .25s ease;
}
.owner-card:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .4), 0 6px 0 #000, 0 12px 30px rgba(123, 45, 255, .25);
}
.owner-card + .owner-card { margin-top: 0; }

.owner-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(162, 89, 255, .2);
}
.owner-ident { min-width: 0; }
.owner-nick {
    display: inline-block;
    font-family: 'Minecraft', sans-serif;
    font-size: .85rem;
    letter-spacing: .08em;
    color: var(--c-purple);
    background: rgba(162, 89, 255, .12);
    padding: .2rem .55rem;
    border: 1px solid rgba(162, 89, 255, .35);
    border-radius: 4px;
    margin-bottom: .5rem;
    text-transform: none;
}
.owner-name {
    margin: 0 0 .25rem;
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    color: var(--c-text);
}
.owner-role {
    color: var(--c-text-dim);
    font-size: .95rem;
}
.owner-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}
.owner-links li { margin: 0; }
.owner-links a {
    display: inline-block;
    padding: .35rem .7rem;
    background: rgba(162, 89, 255, .08);
    border: 1px solid rgba(162, 89, 255, .3);
    border-radius: 6px;
    color: var(--c-text);
    font-size: .85rem;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.owner-links a:hover {
    background: rgba(162, 89, 255, .2);
    border-color: var(--c-purple);
    color: #fff;
}
.owner-body p { margin-bottom: .75rem; line-height: 1.6; }
.owner-body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .owner-head { flex-direction: column; }
    .owner-links { justify-content: flex-start; }
}

/* ----- Owner avatar (Minecraft-skin) ----- */
.owner-card.has-avatar {
    position: relative;
    overflow: hidden;
}
/* Subtil glow bag avataren */
.owner-card.has-avatar::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 220px;
    height: 220px;
    background: radial-gradient(closest-side, rgba(162, 89, 255, .35), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}
.owner-avatar {
    position: absolute;
    top: -8px;
    right: .85rem;
    width: 88px;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 22px rgba(162, 89, 255, .35));
    z-index: 1;
    transform-origin: 50% 100%;
    animation: ownerBob 4s ease-in-out infinite;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
}
.avatar-tilt-l .owner-avatar { animation: ownerBobL 4s ease-in-out infinite; }
.avatar-tilt-r .owner-avatar { animation: ownerBobR 4.5s ease-in-out infinite; }

.owner-card.has-avatar:hover .owner-avatar {
    transform: translateY(-8px) rotate(0deg) scale(1.08);
    animation-play-state: paused;
}

/* Hold ident-tekst fri af avataren */
.owner-card.has-avatar .owner-head {
    padding-right: 105px;
    position: relative;
    z-index: 2;
}
.owner-card.has-avatar .owner-body {
    position: relative;
    z-index: 2;
}

/* Owner-head bliver kompakt — ingen border-bottom i grid-versionen */
.owner-head {
    display: block;
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid rgba(162, 89, 255, .2);
}
.owner-name {
    margin: 0 0 .2rem;
    font-size: 1.4rem;
    color: var(--c-text);
}
.owner-role {
    color: var(--c-text-dim);
    font-size: .85rem;
    line-height: 1.3;
}

/* Teaser */
.owner-teaser {
    color: var(--c-text-dim);
    line-height: 1.55;
    margin: 0 0 .85rem;
    font-size: .95rem;
}
.owner-teaser strong { color: var(--c-text); }

/* Læs mere — <details>-baseret toggle */
.owner-more { margin: 0; }
.owner-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .85rem;
    color: var(--c-purple);
    background: rgba(162, 89, 255, .08);
    border: 1px solid rgba(162, 89, 255, .35);
    border-radius: 6px;
    user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.owner-more > summary::-webkit-details-marker { display: none; }
.owner-more > summary::marker { content: ""; }
.owner-more > summary::after {
    content: "▼";
    font-size: .65em;
    transition: transform .2s ease;
}
.owner-more[open] > summary::after { transform: rotate(180deg); }
.owner-more[open] > summary .om-label::before { content: "Skjul"; }
.owner-more[open] > summary .om-label { font-size: 0; }
.owner-more[open] > summary .om-label::before {
    font-size: .85rem;
}
.owner-more > summary:hover,
.owner-more > summary:focus-visible {
    background: rgba(162, 89, 255, .18);
    border-color: var(--c-purple);
    color: #fff;
    outline: none;
}

.owner-more-body {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(162, 89, 255, .25);
    animation: ownerMoreIn .25s ease;
}
.owner-more-body p {
    color: var(--c-text-dim);
    line-height: 1.6;
    margin: 0 0 .75rem;
    font-size: .95rem;
}
.owner-more-body p:last-of-type { margin-bottom: 1rem; }
.owner-more-body strong { color: var(--c-text); }

@keyframes ownerMoreIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.owner-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

@keyframes ownerBobL {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-6px) rotate(-3deg); }
}
@keyframes ownerBobR {
    0%, 100% { transform: translateY(0) rotate(6deg); }
    50%      { transform: translateY(-6px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .owner-avatar { animation: none !important; }
}

@media (max-width: 640px) {
    .owner-avatar {
        width: 80px;
        right: .75rem;
        top: -6px;
    }
    .owner-card.has-avatar .owner-head {
        padding-right: 95px;
    }
}

/* ============================================================
   OM PIXEL SMP — /info/om
   ============================================================ */
.page-om .info-block { max-width: 1000px; }

/* ----- Pitch-blok (kort fortalt) ----- */
.om-pitch {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
    border-radius: 4px;
}
.om-pitch-icon {
    font-size: 2.6rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(162, 89, 255, .55));
}
.om-pitch h2 { margin-bottom: .6rem; }
.om-pitch p { margin: 0; }
@media (max-width: 600px) {
    .om-pitch { flex-direction: column; gap: .75rem; padding: 1.25rem; }
    .om-pitch-icon { font-size: 2.2rem; }
}

/* ----- Vores fokus — værdi-kort ----- */
.om-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (max-width: 880px) { .om-values { grid-template-columns: 1fr; } }

.om-value {
    padding: 1.5rem 1.25rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
    transition: transform .2s ease, box-shadow .2s ease;
}
.om-value:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .45), 0 7px 0 #000, 0 0 24px rgba(162, 89, 255, .25);
}
.om-value-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .75rem;
    filter: drop-shadow(0 0 10px rgba(162, 89, 255, .45));
}
.om-value h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--c-text); }
.om-value p { margin: 0; color: var(--c-text-dim); font-size: .95rem; line-height: 1.55; }

/* ----- Team-strip (mini avatarer) ----- */
.om-team-strip {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 700px) { .om-team-strip { grid-template-columns: repeat(2, 1fr); } }

.om-team-strip li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem .75rem 1.1rem;
    background: rgba(22, 12, 37, .55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .2), 0 4px 0 #000;
    transition: transform .2s ease;
}
.om-team-strip li:hover { transform: translateY(-4px) rotate(-1deg); }
.om-team-strip li:nth-child(even):hover { transform: translateY(-4px) rotate(1deg); }

.om-team-strip img {
    width: 72px;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 14px rgba(162, 89, 255, .3));
    margin-bottom: .55rem;
}
.om-team-nick {
    font-family: 'Minecraft', sans-serif;
    font-size: .85rem;
    color: var(--c-purple);
    line-height: 1.2;
}
.om-team-name {
    font-size: .8rem;
    color: var(--c-text-dim);
    margin-top: .15rem;
}

/* ----- Nybegynder / Pro spor ----- */
.om-tracks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
@media (max-width: 760px) { .om-tracks { grid-template-columns: 1fr; } }

.om-track {
    position: relative;
    padding: 1.5rem 1.5rem 1.25rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .3), 0 4px 0 #000;
    overflow: hidden;
}
.om-track::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(162, 89, 255, .18), transparent 60%);
    pointer-events: none;
}
.om-track-pro::before {
    background: radial-gradient(circle at top right, rgba(123, 45, 255, .25), transparent 60%);
}
.om-track-badge {
    display: inline-block;
    padding: .35rem .8rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-purple);
    border: 2px solid #000;
    margin-bottom: .85rem;
    position: relative;
    z-index: 1;
}
.om-track-pro .om-track-badge { background: #7b2dff; }
.om-track h3 {
    margin: 0 0 .85rem;
    font-size: 1.2rem;
    color: var(--c-text);
    position: relative;
    z-index: 1;
}
.om-track ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
    position: relative;
    z-index: 1;
}
.om-track ul li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--c-text-dim);
    font-size: .95rem;
    line-height: 1.5;
}
.om-track ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--c-purple);
    font-weight: 700;
}

.om-promise {
    text-align: center;
    margin: 1.75rem 0 0;
    padding: 1rem;
    color: var(--c-text);
    font-size: 1.05rem;
}
.om-promise strong { color: var(--c-purple); }

/* ----- Join CTA ----- */
.om-join-section { padding-bottom: clamp(3rem, 7vw, 5rem); }
.om-join {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
    background: linear-gradient(135deg, rgba(123, 45, 255, .18), rgba(162, 89, 255, .08));
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .4), 0 6px 0 #000, 0 0 40px rgba(162, 89, 255, .15);
    border-radius: 4px;
}
@media (max-width: 760px) {
    .om-join { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.25rem; }
}
.om-join-text h2 { margin: .3rem 0 .8rem; }
.om-join-text p { margin: 0 0 1rem; }

.om-join-ip {
    display: inline-flex;
    flex-direction: column;
    gap: .25rem;
    padding: .65rem .95rem;
    background: rgba(11, 8, 20, .65);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .3);
}
.om-join-ip-label {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}
.om-join-ip code {
    font-family: 'Minecraft', sans-serif;
    font-size: 1.1rem;
    color: var(--c-purple);
    background: none;
    padding: 0;
}

.om-join-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.om-join-actions .mc-btn {
    width: 100%;
    text-align: center;
}
.om-join-primary {
    background: var(--c-purple) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 4px 0 #000, 0 0 24px rgba(162, 89, 255, .45) !important;
}
.om-join-primary:hover {
    background: #b97aff !important;
}

/* ============================================================
   REGLER — to base-typer (open vs claim)
   ============================================================ */
.base-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0 .5rem;
}
@media (max-width: 760px) { .base-types { grid-template-columns: 1fr; } }

.base-type {
    position: relative;
    padding: 1.25rem 1.4rem 1.4rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
    overflow: hidden;
}
.base-type::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.base-type-open::before {
    background: radial-gradient(circle at top right, rgba(255, 145, 90, .18), transparent 60%);
}
.base-type-claim::before {
    background: radial-gradient(circle at top right, rgba(98, 220, 140, .18), transparent 60%);
}

.base-type-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.base-type-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(162, 89, 255, .35));
}
.base-type-tag {
    display: inline-block;
    padding: .2rem .55rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-purple);
    border: 2px solid #000;
    margin-bottom: .35rem;
}
.base-type-open .base-type-tag { background: #d97645; }
.base-type-claim .base-type-tag { background: #3fb56b; }

.base-type-head h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--c-text);
}

.base-type-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem;
    position: relative;
    z-index: 1;
}
.base-type-list li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--c-text-dim);
    line-height: 1.5;
    font-size: .95rem;
}
.base-type-list .bt-emoji {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.4;
    width: 1.5rem;
    text-align: center;
}
.base-type-list strong { color: var(--c-text); }
.base-type-open .base-type-list strong { color: #ff9c6d; }
.base-type-claim .base-type-list strong { color: #6fdc99; }

/* ============================================================
   PLAYERS WIDGET — forsiden
   ============================================================ */
.players-section { padding: clamp(2rem, 5vw, 4rem) 0; }

.players-24h {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(162,89,255,.18), rgba(62,211,90,.10));
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.35), 0 4px 0 #000;
}
.players-24h-num {
    font-family: 'Minecraft', sans-serif;
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height: 1;
    color: #fff;
    padding: .35rem .75rem;
    background: var(--c-purple);
    border: 2px solid #000;
    box-shadow: 0 3px 0 #000;
    flex-shrink: 0;
}
.players-24h-text {
    color: var(--c-text);
    font-size: 1.05rem;
    line-height: 1.35;
}
.players-24h-text strong { color: #c8a8ff; }
.players-24h-sub {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    color: var(--c-text-dim);
}
@media (max-width: 520px) {
    .players-24h { flex-direction: column; align-items: flex-start; text-align: left; }
}

.players-widget {
    display: grid;
    gap: 1.5rem;
}

.players-row {
    background: rgba(22,12,37,.6);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.25), 0 4px 0 #000;
    padding: 1.1rem 1.25rem 1.25rem;
}

.players-row-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.players-row-head h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--c-text);
    letter-spacing: .04em;
}
.players-tabs {
    display: inline-flex;
    gap: .35rem;
    margin-left: .25rem;
}
.players-tab {
    font-family: 'Minecraft', sans-serif;
    font-size: .8rem;
    color: var(--c-text-dim);
    background: rgba(11,8,20,.5);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.18);
    padding: .3rem .65rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .15s ease, background .15s ease, transform .12s ease;
}
.players-tab:hover { color: #fff; transform: translateY(-1px); }
.players-tab.is-active {
    color: #fff;
    background: var(--c-purple);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 3px 0 #000;
}
.players-tab-badge {
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    padding: 0 .35rem;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.18);
    font-size: .72rem;
    line-height: 1.4;
}
.players-tab-panel { display: none; }
.players-tab-panel.is-active { display: grid; }
.players-count {
    margin-left: auto;
    font-family: 'Minecraft', sans-serif;
    font-size: .8rem;
    padding: .2rem .6rem;
    color: #fff;
    background: var(--c-purple);
    border: 2px solid #000;
}
.players-more {
    margin-left: auto;
    font-family: 'Minecraft', sans-serif;
    font-size: .8rem;
    color: var(--c-text-dim);
    text-decoration: none;
    padding: .2rem .55rem;
    border: 2px solid #000;
    background: rgba(11,8,20,.5);
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.25);
    transition: color .15s ease, background .15s ease, transform .12s ease;
}
.players-more:hover {
    color: #fff;
    background: var(--c-purple);
    transform: translateY(-1px);
}
.live-dot.is-grey {
    background: #6c5d8a;
    box-shadow: 0 0 0 0 #6c5d8a;
    animation: none;
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .65rem;
}

.players-empty {
    grid-column: 1 / -1;
    padding: 1.25rem;
    text-align: center;
    color: var(--c-text-dim);
    border: 2px dashed rgba(162,89,255,.25);
    background: rgba(11,8,20,.4);
}

.player-chip {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    background: rgba(11,8,20,.55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.18);
    text-decoration: none;
    color: var(--c-text);
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
    min-width: 0;
}
.player-chip:hover {
    transform: translateY(-2px);
    background: rgba(22,12,37,.75);
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.45), 0 4px 0 #000;
}
.player-chip.is-online {
    box-shadow: inset 0 0 0 1px rgba(62,211,90,.45), 0 0 14px rgba(62,211,90,.18);
    background: rgba(62,211,90,.06);
}
.player-chip.is-online:hover {
    box-shadow: inset 0 0 0 1px rgba(62,211,90,.7), 0 4px 0 #000, 0 0 22px rgba(62,211,90,.25);
}

.player-chip-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: #0b0814;
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.25);
}
.player-chip-avatar img {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

.player-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.player-chip-name {
    font-family: 'Minecraft', sans-serif;
    font-size: .9rem;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-chip-time {
    font-size: .72rem;
    color: var(--c-text-dim);
    margin-top: .1rem;
}
.player-chip.is-online .player-chip-time {
    color: #6fdc99;
}

@media (max-width: 480px) {
    .players-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
    .player-chip { padding: .45rem .55rem; gap: .55rem; }
    .player-chip-avatar { width: 36px; height: 36px; }
    .player-chip-avatar img { width: 32px; height: 32px; }
}

/* ============================================================
   FORSIDE — Hero IP-copy + "Liv på serveren" sektion
   (erstatter .hero-live, .live-duo, .players-widget, .marquee)
   ============================================================ */

.hero-ip {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.hero-ip-label {
    font-family: 'Minecraft', sans-serif;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}
.ip-copy.ip-copy-sm {
    padding: .45rem .7rem;
    font-size: .9rem;
}
.ip-copy.ip-copy-sm .ip { font-size: .95rem; }

/* ---------- Liveness section ---------- */
.liveness { padding-top: clamp(2rem, 4vw, 3rem); }
.liveness-head {
    text-align: center;
    margin-bottom: 2rem;
}
.liveness-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
}
#liveness-headline {
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    line-height: 1.2;
    margin: 0;
    color: var(--c-text);
    transition: opacity .3s ease;
}

/* ---------- Tiles ---------- */
.liveness-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.1rem;
    margin-bottom: 2rem;
}
@media (max-width: 880px) {
    .liveness-tiles { grid-template-columns: 1fr 1fr; }
    .liveness-tiles .tile-discord { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .liveness-tiles { grid-template-columns: 1fr; }
    .liveness-tiles .tile-discord { grid-column: auto; }
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.4rem 1.4rem 1.25rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
    overflow: hidden;
    min-height: 180px;
}
.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
}
.tile-online::before {
    background: radial-gradient(circle at top right, rgba(62, 211, 90, .25), transparent 60%);
}
.tile-day::before {
    background: radial-gradient(circle at top right, rgba(162, 89, 255, .28), transparent 60%);
}
.tile-discord::before {
    background: radial-gradient(circle at top right, rgba(88, 101, 242, .28), transparent 60%);
}
.tile > * { position: relative; z-index: 1; }

.tile-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}
.tile-num {
    font-family: 'Minecraft', sans-serif;
    font-size: clamp(2.8rem, 6vw, 4.4rem);
    line-height: 1;
    font-weight: 700;
    margin: .25rem 0 .15rem;
    color: var(--c-text);
    text-shadow: 0 0 30px rgba(162, 89, 255, .25);
    transition: filter .8s ease;
}
.tile-online .tile-num { color: var(--c-green); text-shadow: 0 0 30px rgba(62, 211, 90, .35); }
.tile-day    .tile-num { color: #c8a8ff;        text-shadow: 0 0 30px rgba(162, 89, 255, .35); }
.tile-discord .tile-num { color: #aab6ff;       text-shadow: 0 0 30px rgba(88, 101, 242, .35); }

.tile-sub {
    color: var(--c-text-dim);
    font-size: .95rem;
}
.tile-meta {
    margin-top: auto;
    padding-top: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    color: var(--c-text-dim);
    font-size: .82rem;
    border-top: 1px solid rgba(162, 89, 255, .18);
}
.tile-meta b { color: var(--c-text); }
.tile-cta { margin-top: .9rem; align-self: flex-start; }

/* ---------- Live-stream (avatar-strøm) ---------- */
.live-stream-wrap {
    background: rgba(11, 8, 20, .55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .18), 0 4px 0 #000;
    padding: 1.1rem 1.25rem 1.25rem;
}
.live-stream-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.live-stream-head h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: .04em;
    color: var(--c-text);
}
.live-stream-more {
    font-family: 'Minecraft', sans-serif;
    font-size: .8rem;
    color: var(--c-text-dim);
    text-decoration: none;
    padding: .2rem .55rem;
    border: 2px solid #000;
    background: rgba(11, 8, 20, .5);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25);
    transition: color .15s ease, background .15s ease, transform .12s ease;
}
.live-stream-more:hover {
    color: #fff;
    background: var(--c-purple);
    transform: translateY(-1px);
}
.live-stream {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .65rem;
}
@media (max-width: 480px) {
    .live-stream { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
}

/* ---------- Marquee variant: spiller-avatars ---------- */
.marquee.marquee-players { margin: 2.5rem 0; }
.marquee.marquee-players .av {
    width: 64px;
    height: 64px;
    background: rgba(11, 8, 20, .55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25);
    align-items: center;
    filter: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.marquee.marquee-players .av img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.marquee.marquee-players .av.is-online {
    box-shadow: inset 0 0 0 1px rgba(62, 211, 90, .55), 0 0 18px rgba(62, 211, 90, .25);
    background: rgba(62, 211, 90, .08);
}
.marquee.marquee-players .av:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .55), 0 4px 0 #000;
}

/* ============================================================
   FORSIDE — "Sådan kommer du på" (Java + Bedrock cards)
   ============================================================ */
.join-section { padding-top: clamp(2rem, 4vw, 3rem); }

.join-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
@media (max-width: 880px) {
    .join-grid { grid-template-columns: 1fr; }
}

.join-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.5rem 1.5rem 1.4rem;
    background: rgba(22, 12, 37, .7);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 4px 0 #000;
    overflow: hidden;
}
.join-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .6;
}
.join-java::before {
    background: radial-gradient(circle at top right, rgba(62, 211, 90, .22), transparent 60%);
}
.join-bedrock::before {
    background: radial-gradient(circle at top right, rgba(120, 130, 150, .25), transparent 60%);
}
.join-card > * { position: relative; z-index: 1; }

.join-card-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.join-icon {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    background: rgba(11, 8, 20, .65);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 3px 0 #000;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
}
.join-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.join-tag {
    display: inline-block;
    padding: .2rem .55rem;
    margin-bottom: .35rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-purple);
    border: 2px solid #000;
}
.join-java   .join-tag { background: var(--c-green); color: #0d2a16; }
.join-bedrock .join-tag { background: #6c7589; }
.join-card-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--c-text);
    line-height: 1.3;
}

.join-ip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .9rem 1rem;
    background: rgba(11, 8, 20, .55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .18);
}
.join-ip-label {
    font-family: 'Minecraft', sans-serif;
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--c-text-dim);
    width: 100%;
}
.join-ip .ip-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.join-version {
    font-size: .82rem;
    color: var(--c-text-dim);
    flex-shrink: 0;
}
.join-version strong { color: var(--c-text); }

.join-ip .ip-copy.join-port {
    flex: 0 0 auto;
    min-width: 0;
}
.join-ip .ip-copy.join-port .ip {
    color: var(--c-text-dim);
    font-size: .82rem;
    letter-spacing: .04em;
}
.join-ip .ip-copy.join-port .ip strong { color: var(--c-text); }

.join-steps {
    list-style: none;
    counter-reset: jstep;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem;
}
.join-steps li {
    counter-increment: jstep;
    position: relative;
    padding: .15rem 0 .15rem 2.4rem;
    color: var(--c-text-dim);
    font-size: .95rem;
    line-height: 1.5;
}
.join-steps li::before {
    content: counter(jstep);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    font-family: 'Minecraft', sans-serif;
    font-size: .85rem;
    color: #fff;
    background: var(--c-purple);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.join-java   .join-steps li::before { background: var(--c-green); color: #0d2a16; }
.join-bedrock .join-steps li::before { background: #6c7589; }
.join-steps strong { color: var(--c-text); }

.join-cta { align-self: flex-start; margin-top: .25rem; }

/* ============================================================
   MINECRAFT ICON ACCENTS — sprinkles på forsiden
   ============================================================ */
.mc-ico {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .55));
    pointer-events: none;
}

/* Eyebrow-ikon: lille, justeret med tekstens line-height */
.mc-ico-eyebrow {
    width: 18px;
    height: 18px;
    margin-right: .35rem;
    margin-top: -2px;
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .55));
}

/* Inline-ikon i overskrifter (h3 osv.) */
.mc-ico-inline {
    width: 26px;
    height: 26px;
    margin-right: .45rem;
    transform: translateY(-2px);
}

/* ---------- Tile-ikon i øverste hjørne ---------- */
.tile { position: relative; }
.tile-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: rgba(11, 8, 20, .55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25), 0 3px 0 #000;
    transform: rotate(-4deg);
    transition: transform .25s ease;
}
.tile-icon .mc-ico {
    width: 40px;
    height: 40px;
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .65));
}
.tile:hover .tile-icon { transform: rotate(0deg) translateY(-2px); }
.tile-online .tile-icon { box-shadow: inset 0 0 0 1px rgba(62, 211, 90, .45), 0 3px 0 #000; }
.tile-discord .tile-icon { box-shadow: inset 0 0 0 1px rgba(88, 101, 242, .45), 0 3px 0 #000; }

/* Giv plads til ikon-boksen så tile-label ikke kolliderer */
.tile-label { padding-right: 4rem; }

/* ---------- Værdi-ikoner i mission-sektionen ---------- */
.value .v-icon-mc {
    width: 72px;
    height: 72px;
    border-radius: 0;                              /* firkantet, MC-stil */
    background: rgba(11, 8, 20, .55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .3), 0 4px 0 #000;
    color: inherit;
}
.value .v-icon-mc .mc-ico {
    width: 56px;
    height: 56px;
}

/* ---------- Hero-art floating ikoner ---------- */
.hero-art { position: relative; }
.hero-float {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: .5rem;
    background: rgba(11, 8, 20, .65);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .35), 0 4px 0 #000;
    pointer-events: none;
    animation: heroFloat 4.2s ease-in-out infinite;
}
.hero-float .mc-ico { display: block; }
.hero-float-1 { top: 8%;  left: -2%;  animation-delay: 0s;   transform: rotate(-8deg); }
.hero-float-2 { top: 12%; right: 4%;  animation-delay: -1s;  transform: rotate(6deg);  }
.hero-float-3 { bottom: 14%; left: 6%; animation-delay: -2s; transform: rotate(4deg);  }
.hero-float-4 { bottom: 6%; right: -2%; animation-delay: -3s; transform: rotate(-10deg); }

@keyframes heroFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}

@media (max-width: 800px) {
    .hero-float-1, .hero-float-3 { left: 2%; }
    .hero-float-2, .hero-float-4 { right: 2%; }
    .hero-float .mc-ico { width: 36px !important; height: 36px !important; }
}
@media (max-width: 520px) {
    .hero-float { display: none; }
}

/* ---------- CTA-banner deko-ikoner ---------- */
.cta-banner { position: relative; overflow: hidden; }
.cta-deco {
    position: absolute;
    top: 50%;
    z-index: 0;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    background: rgba(11, 8, 20, .35);
    border: 2px solid rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .25);
    opacity: .6;
    pointer-events: none;
    animation: ctaDecoFloat 5s ease-in-out infinite;
}
.cta-deco .mc-ico { width: 64px; height: 64px; }
.cta-deco-l { left: clamp(.5rem, 4%, 3rem);  transform: translateY(-50%) rotate(-12deg); }
.cta-deco-r { right: clamp(.5rem, 4%, 3rem); transform: translateY(-50%) rotate(12deg); animation-delay: -2.5s; }
/* Hæv indhold over deco-laget — undtag decos selv så deres position: absolute bevares */
.cta-banner > :not(.cta-deco) { position: relative; z-index: 1; }

@keyframes ctaDecoFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -6px; }
}

@media (max-width: 720px) {
    .cta-deco { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-float, .cta-deco, .tile-icon { animation: none; }
}

/* ============================================================
   LIVE-STREAM "Vis flere"-knap + staggered chip-reveal
   ============================================================ */
.live-stream-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

/* Skjul ekstra chips med visuel hard-cut når lukket */
.live-stream .player-chip.is-extra[hidden] { display: none !important; }

/* Når .is-expanded sættes på containeren spawner chips ind med staircase-fx */
.live-stream.is-expanded .player-chip.is-extra {
    animation: chipPopIn .42s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: calc(var(--chip-i, 0) * 45ms);
}

@keyframes chipPopIn {
    0%   { opacity: 0; transform: translateY(14px) scale(.6) rotate(-6deg); filter: brightness(2); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.06) rotate(2deg); filter: brightness(1.3); }
    100% { opacity: 1; transform: translateY(0)    scale(1)    rotate(0);    filter: brightness(1); }
}

/* ---------- "Vis flere"-knap (Minecraft button-stil) ---------- */
.btn-show-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.35rem .9rem;
    color: #fff;
    font-family: 'Minecraft', sans-serif;
    font-size: .95rem;
    letter-spacing: .04em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
    cursor: pointer;
    background-color: rgba(38, 22, 62, .7);
    background-image:
        linear-gradient(rgba(123, 45, 255, .35), rgba(80, 25, 180, .45)),
        url('/assets/minecrafticons/minecraft_item_icons/Item%20icons/InvSprite%20files/Invicon%20Deepslate.png');
    background-repeat: no-repeat, repeat;
    background-size: cover, 32px 32px;
    background-position: center, center;
    border: 2px solid #000;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .35),
        inset -2px -2px 0 rgba(0, 0, 0, .55),
        inset 0 0 0 3px rgba(162, 89, 255, .25),
        0 4px 0 #000,
        0 6px 22px rgba(123, 45, 255, .3);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
    overflow: hidden;
}

/* "Sparkle"-shimmer der glider hen over knappen */
.btn-show-more::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, .25) 45%,
        rgba(255, 255, 255, .55) 50%,
        rgba(255, 255, 255, .25) 55%,
        transparent 100%);
    pointer-events: none;
    animation: bsmShine 3.6s ease-in-out infinite;
}

@keyframes bsmShine {
    0%, 60%, 100% { left: -120%; }
    80%           { left: 130%; }
}

.btn-show-more:hover,
.btn-show-more:focus-visible {
    transform: translateY(-2px);
    background-color: rgba(58, 30, 90, .8);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .45),
        inset -2px -2px 0 rgba(0, 0, 0, .6),
        inset 0 0 0 3px rgba(162, 89, 255, .55),
        0 6px 0 #000,
        0 12px 32px rgba(162, 89, 255, .55);
    outline: none;
}
.btn-show-more:active {
    transform: translateY(2px);
    box-shadow:
        inset 2px 2px 0 rgba(0, 0, 0, .45),
        inset -2px -2px 0 rgba(255, 255, 255, .25),
        inset 0 0 0 3px rgba(162, 89, 255, .25),
        0 0 0 #000,
        0 4px 14px rgba(123, 45, 255, .35);
}

.btn-show-more .bsm-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.btn-show-more .bsm-icon .mc-ico {
    width: 24px;
    height: 24px;
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .65));
}
.btn-show-more:hover .bsm-icon { transform: rotate(-12deg) scale(1.1); }

.btn-show-more .bsm-text strong {
    color: #c8a8ff;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
    margin: 0 .15rem;
}

.btn-show-more .bsm-chevron {
    display: inline-block;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
    font-size: 1rem;
    line-height: 1;
}
.btn-show-more.is-open .bsm-chevron { transform: rotate(180deg); }
.btn-show-more.is-open .bsm-icon    { transform: rotate(180deg) scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .btn-show-more::before,
    .live-stream.is-expanded .player-chip.is-extra { animation: none; }
}

/* ============================================================
   HERO V2 — tekstcentreret + spiller-avatars + scattered MC-ikoner
   ============================================================ */
.hero-v2 {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
    /* Override af gamle .hero regler */
    min-height: 0;
    display: block;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(162, 89, 255, .22), transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(123, 45, 255, .18), transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(88, 101, 242, .15), transparent 60%);
}
.hero-v2::before { content: none; }   /* fjern den gamle ::before glow */

.hero-v2-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    max-width: 880px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-text);
    background: rgba(11, 8, 20, .55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .3), 0 3px 0 #000;
}
.hero-eyebrow .live-dot { margin-right: .15rem; }

.hero-v2 .hero-title {
    margin: .3rem 0 .35rem;
    font-size: clamp(2.4rem, 6.5vw, 4.6rem);
    line-height: 1.05;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke fill;
    text-shadow: 0 6px 0 rgba(0, 0, 0, .55), 0 4px 22px rgba(0, 0, 0, .55);
}
.hero-v2 .hero-title .accent { color: var(--c-purple); display: inline-block; }

.hero-v2 .hero-sub {
    max-width: 60ch;
    margin: 0 auto;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--c-text-dim);
    line-height: 1.55;
}
.hero-v2 .hero-sub strong { color: var(--c-text); }

.hero-v2 .hero-cta-row {
    margin: .4rem 0 0;
    justify-content: center;
}

/* IP-row med label + meta */
.hero-ip-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .85rem;
    padding: .85rem 1.1rem;
    background: rgba(11, 8, 20, .55);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .2), 0 4px 0 #000;
    margin-top: .5rem;
}
.hero-ip-label {
    font-family: 'Minecraft', sans-serif;
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}
.hero-ip-meta {
    font-size: .85rem;
    color: var(--c-text-dim);
}
.hero-ip-meta strong { color: var(--c-text); }

/* ---------- Spiller-avatars under CTA ---------- */
.hero-players {
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
}
.hero-players-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}
.hero-players-label strong { color: var(--c-green); }

.hero-players-stack {
    display: flex;
    align-items: center;
    /* Negativ margin = avatars overlapper hinanden */
    padding-left: 14px;
}
.hero-pa {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    margin-left: -14px;
    background: rgba(11, 8, 20, .65);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .35), 0 3px 0 #000;
    transition: transform .2s ease, box-shadow .2s ease, z-index 0s linear .2s;
    z-index: 1;
    animation: heroPaIn .55s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}
.hero-pa img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}
.hero-pa.is-online {
    box-shadow: inset 0 0 0 1px rgba(62, 211, 90, .65), 0 3px 0 #000, 0 0 22px rgba(62, 211, 90, .35);
    background: rgba(62, 211, 90, .1);
}
.hero-pa:hover,
.hero-pa:focus-visible {
    transform: translateY(-6px) scale(1.12);
    z-index: 5;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .65), 0 6px 0 #000, 0 10px 24px rgba(162, 89, 255, .4);
    transition: transform .2s ease, box-shadow .2s ease, z-index 0s;
    outline: none;
}
.hero-pa.is-online:hover,
.hero-pa.is-online:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(62, 211, 90, .85), 0 6px 0 #000, 0 10px 28px rgba(62, 211, 90, .55);
}

/* Tooltip ovenpå avataren ved hover */
.hero-pa-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .45rem .65rem;
    background: rgba(11, 8, 20, .92);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .35), 0 3px 0 #000;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    font-family: 'Minecraft', sans-serif;
    font-size: .72rem;
}
.hero-pa-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #000;
}
.hero-pa-name { color: var(--c-text); letter-spacing: .04em; }
.hero-pa-time { color: var(--c-text-dim); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.hero-pa:hover .hero-pa-tooltip,
.hero-pa:focus-visible .hero-pa-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@keyframes heroPaIn {
    0%   { opacity: 0; transform: translateY(20px) scale(.4); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.08); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.hero-players-more {
    margin-top: .25rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .78rem;
    color: var(--c-text-dim);
    text-decoration: none;
    padding: .25rem .6rem;
    border-bottom: 2px dashed transparent;
    transition: color .2s ease, border-color .2s ease;
}
.hero-players-more:hover { color: var(--c-purple); border-color: var(--c-purple); }

/* ---------- Baggrunds-ikoner (scattered, parallax-bobbing) ---------- */
.hero-bg-ico {
    position: absolute;
    z-index: 1;
    display: block;
    opacity: .55;
    pointer-events: none;
    animation: heroBgFloat 6s ease-in-out infinite;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .7));
}
.hero-bg-ico .mc-ico {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.hero-bg-ico-1 { top:  8%; left:  4%; width: 64px; height: 64px; transform: rotate(-12deg); animation-delay: 0s;    }
.hero-bg-ico-2 { top: 16%; right: 8%; width: 56px; height: 56px; transform: rotate( 14deg); animation-delay: -1s;   }
.hero-bg-ico-3 { top: 38%; left:  2%; width: 72px; height: 72px; transform: rotate(  8deg); animation-delay: -2s;   }
.hero-bg-ico-4 { top: 58%; right: 4%; width: 60px; height: 60px; transform: rotate(-10deg); animation-delay: -3s;   }
.hero-bg-ico-5 { bottom: 18%; left: 10%; width: 56px; height: 56px; transform: rotate(  6deg); animation-delay: -4s; }
.hero-bg-ico-6 { bottom:  8%; right: 14%; width: 48px; height: 48px; transform: rotate(-18deg); animation-delay: -2.5s; }
.hero-bg-ico-7 { top: 28%; left: 22%; width: 56px; height: 56px; transform: rotate( 12deg); animation-delay: -1.5s; opacity: .35; }
.hero-bg-ico-8 { bottom: 30%; right: 24%; width: 52px; height: 52px; transform: rotate(-6deg); animation-delay: -3.5s; opacity: .35; }

@keyframes heroBgFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

@media (max-width: 880px) {
    /* Mindre scattered-ikoner, og fjern de inderste 2 så teksten ikke kvæles */
    .hero-bg-ico { opacity: .35; }
    .hero-bg-ico-7, .hero-bg-ico-8 { display: none; }
    .hero-bg-ico-1, .hero-bg-ico-3, .hero-bg-ico-5 { left: -2%; }
    .hero-bg-ico-2, .hero-bg-ico-4, .hero-bg-ico-6 { right: -2%; }
}
@media (max-width: 520px) {
    .hero-bg-ico { width: 40px !important; height: 40px !important; opacity: .25; }
    .hero-pa { width: 44px; height: 44px; margin-left: -10px; }
    .hero-players-stack { padding-left: 10px; }
    .hero-ip-meta { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-ico, .hero-pa { animation: none; }
}


/* ============================================================
   STØT PIXEL — supporter-pakker (forsiden)
   ============================================================ */
.pricing-section { padding-top: clamp(2rem, 4vw, 3rem); }

.pricing-section .text-purple { color: var(--c-purple); }

/* --- Giveaway-callout over pakkerne ---------------------------- */
.giveaway-callout {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem auto clamp(2.5rem, 5vw, 4rem);
    max-width: 760px;
    padding: 1rem 1.2rem;
    background:
        linear-gradient(180deg, rgba(123, 45, 255, .18) 0%, rgba(20, 12, 32, .85) 100%);
    border: 2px solid #000;
    box-shadow:
        inset 0 0 0 1px rgba(162, 89, 255, .35),
        inset 0 -3px 0 rgba(0, 0, 0, .35),
        0 4px 0 #000;
    color: var(--c-text-dim);
    font-size: .92rem;
    line-height: 1.5;
}
.giveaway-callout .gc-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: rgba(11, 8, 20, .65);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .35), 0 3px 0 #000;
}
.giveaway-callout .gc-icon .mc-ico { width: 38px; height: 38px; }
.giveaway-callout strong { color: var(--c-text); }
.giveaway-callout em { color: #ffe9b8; font-style: normal; font-weight: 700; }

@media (max-width: 560px) {
    .giveaway-callout { flex-direction: column; text-align: center; }
}

/* --- Grid ------------------------------------------------------ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-top: .5rem;
}
@media (max-width: 980px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* --- Kort ------------------------------------------------------ */
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.6rem 1.4rem 1.4rem;
    background:
        linear-gradient(180deg, rgba(20, 12, 32, .92) 0%, rgba(14, 8, 24, .96) 100%);
    border: 3px solid #000;
    box-shadow:
        inset 0 0 0 2px rgba(162, 89, 255, .22),
        inset 0 -4px 0 rgba(0, 0, 0, .4),
        0 6px 0 #000;
    overflow: visible;
    transition: transform .25s ease, box-shadow .25s ease;
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 0 2px rgba(162, 89, 255, .35),
        inset 0 -4px 0 rgba(0, 0, 0, .4),
        0 10px 0 #000,
        0 0 40px rgba(123, 45, 255, .25);
}

/* Tier-specifikke accent-farver via radial glow */
.pricing-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    z-index: 0;
}
.pricing-mini::before  { background: radial-gradient(circle at top right, rgba(255, 184, 217, .25), transparent 60%); }
.pricing-pro::before   { background: radial-gradient(circle at top right, rgba(92, 209, 255, .28), transparent 60%); }
.pricing-pixel::before { background: radial-gradient(circle at top right, rgba(255, 233, 184, .28), transparent 60%); }
.pricing-card > * { position: relative; z-index: 1; }

/* Featured (Pro) — fremhæv */
.pricing-card.is-featured {
    border-color: #000;
    box-shadow:
        inset 0 0 0 2px rgba(162, 89, 255, .55),
        inset 0 -4px 0 rgba(0, 0, 0, .4),
        0 8px 0 #000,
        0 0 60px rgba(123, 45, 255, .35);
}
@media (min-width: 981px) {
    .pricing-card.is-featured { transform: translateY(-12px) scale(1.03); }
    .pricing-card.is-featured:hover { transform: translateY(-16px) scale(1.03); }
}
.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: .3rem .7rem;
    font-family: 'Minecraft', sans-serif;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-purple);
    border: 2px solid #000;
    box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(255, 255, 255, .2);
    z-index: 2;
    white-space: nowrap;
}

/* Header (icon + name + tagline) */
.pricing-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding-bottom: .8rem;
    border-bottom: 2px dashed rgba(162, 89, 255, .25);
}
.pricing-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    background: rgba(11, 8, 20, .65);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162, 89, 255, .3), 0 3px 0 #000;
}
.pricing-icon .mc-ico { width: 52px; height: 52px; }
.pricing-name {
    margin: 0;
    font-family: 'Minecraft', sans-serif;
    font-size: 1.6rem;
    color: var(--c-text);
    text-shadow: 2px 2px 0 #000;
    letter-spacing: .04em;
}
.pricing-tagline {
    margin: 0;
    font-size: .88rem;
    color: var(--c-text-dim);
    line-height: 1.4;
}

/* Pris-blok */
.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .3rem;
    padding: .5rem 0;
    font-family: 'Minecraft', sans-serif;
    color: #ffe9b8;
    text-shadow: 2px 2px 0 #000;
}
.pricing-price .pp-amount {
    font-size: 3rem;
    line-height: 1;
}
.pricing-price .pp-currency { font-size: 1.1rem; color: var(--c-text); }
.pricing-price .pp-period { font-size: .9rem; color: var(--c-text-dim); }

.pricing-desc {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--c-text-dim);
    text-align: center;
}

/* Feature-liste */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: .25rem 0 .5rem;
    display: grid;
    gap: .5rem;
    flex: 1 1 auto;
}
.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .88rem;
    line-height: 1.4;
    color: var(--c-text-dim);
}
.pricing-features li:first-child {
    color: var(--c-text);
    font-weight: 600;
    padding-bottom: .35rem;
    border-bottom: 1px dashed rgba(162, 89, 255, .2);
    margin-bottom: .15rem;
}
.pricing-features .pf-check {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #3ed35a;
}
.pricing-pro   .pricing-features .pf-check { color: #5cd1ff; }
.pricing-pixel .pricing-features .pf-check { color: #ffe9b8; }

/* Mini lever op til sit navn — kompakt kort, mindre padding mellem features */
.pricing-mini { padding: 1.2rem 1.1rem 1.1rem; gap: .75rem; }
.pricing-mini .pricing-head { padding-bottom: .55rem; gap: .35rem; }
.pricing-mini .pricing-icon { width: 56px; height: 56px; }
.pricing-mini .pricing-icon .mc-ico { width: 40px; height: 40px; }
.pricing-mini .pricing-name { font-size: 1.3rem; }
.pricing-mini .pricing-tagline { font-size: .82rem; }
.pricing-mini .pricing-price { padding: .25rem 0; }
.pricing-mini .pricing-price .pp-amount { font-size: 2.3rem; }
.pricing-mini .pricing-desc { font-size: .85rem; }
.pricing-mini .pricing-features { gap: .25rem; margin: .15rem 0 .35rem; }
.pricing-mini .pricing-features li { font-size: .82rem; line-height: 1.35; }
.pricing-mini .pricing-features li:first-child { padding-bottom: .2rem; margin-bottom: .1rem; }
.pricing-mini .pricing-buy { padding-top: .65rem; padding-bottom: .65rem; font-size: .9rem; }

/* Kommer snart-knap (disabled) */
.pricing-buy {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.pricing-buy[disabled],
.pricing-buy[aria-disabled="true"] {
    background: #2a223a !important;
    color: #8a82a3 !important;
    border-color: #000 !important;
    cursor: not-allowed;
    opacity: .85;
    box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
    transform: none !important;
}
.pricing-buy[disabled]:hover {
    background: #2a223a !important;
    transform: none !important;
}
.pricing-buy .pb-icon {
    display: inline-grid;
    place-items: center;
}
.pricing-buy .pb-icon .mc-ico { width: 18px; height: 18px; }

.pricing-foot {
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--c-text-dim);
    font-size: .9rem;
}
.pricing-disclaimer {
    margin: .9rem auto 0;
    max-width: 640px;
    text-align: center;
    color: var(--c-text-mut, #6b6184);
    font-size: .78rem;
    line-height: 1.5;
    font-style: italic;
}
.pricing-disclaimer .pd-star {
    color: var(--c-purple);
    font-style: normal;
    margin-right: .15rem;
}