:root{
    --bg:#000;
    --panel:#0b0b0b;
    --fg:#f2f2f2;
    --muted:#8a8a8a;
    --line:rgba(255,255,255,.14);
    --gold:#ffaa00;   /* §6 from the server MOTD */
    --yellow:#ffff55; /* §e */
    --green:#55ff55;  /* §a */
    --red:#ff5555;    /* §c */
    --mono:"DejaVuSansMono", "DejaVu Sans Mono", "Lucida Console", Monaco, monospace;
}

*,*::before,*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

html,body{
    margin:0;
    padding:0;
    background-color:var(--bg);
    color:var(--fg);
    font-family:var(--mono);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

a{
    color:var(--gold);
}

code{
    color:var(--yellow);
    font-family:inherit;
}

strong{
    color:var(--fg);
}

/* ---------- hero ---------- */

.hero{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5rem 1rem 4rem;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, rgba(0,0,0,.75) 70%),
        linear-gradient(transparent 60%, var(--bg)),
        url("render.jpg") center 30% / cover no-repeat;
    overflow:hidden;
}

.back{
    position:absolute;
    top:1.25rem;
    left:1.25rem;
    color:var(--muted);
    text-decoration:none;
    font-size:.8rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    transition:color .25s ease;
}

.back:hover,
.back:focus-visible{
    color:var(--fg);
}

.hero-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
    text-align:center;
}

.hero h1{
    margin:0;
    line-height:0;
}

.logo{
    width:min(560px, 86vw);
    height:auto;
    filter:drop-shadow(0 6px 30px rgba(0,0,0,.8));
    animation:float 6s ease-in-out infinite;
}

.tagline{
    margin:-.5rem 0 .5rem;
    color:var(--yellow);
    font-size:clamp(.85rem, 2vw, 1rem);
    letter-spacing:.06em;
    text-shadow:2px 2px 0 #3f3f15; /* minecraft-style text shadow */
}

.status{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.45rem 1rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(6px);
    font-size:.85rem;
    letter-spacing:.04em;
}

.dot{
    width:.6rem;
    height:.6rem;
    border-radius:50%;
    background:var(--muted);
}

.status[data-state="online"] .dot{
    background:var(--green);
    box-shadow:0 0 0 0 rgba(85,255,85,.6);
    animation:pulse 2s ease-out infinite;
}

.status[data-state="offline"] .dot{
    background:var(--red);
}

.status[data-state="offline"] .status-text{
    color:var(--red);
}

.address{
    display:grid;
    gap:.15rem;
    min-width:min(20rem, 100%);
    padding:.9rem 1.5rem;
    border:2px solid var(--gold);
    border-radius:0;
    background:rgba(0,0,0,.7);
    color:var(--fg);
    font:inherit;
    cursor:pointer;
    box-shadow:4px 4px 0 rgba(255,170,0,.35);
    transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}

.address:hover,
.address:focus-visible{
    transform:translate(-2px,-2px);
    box-shadow:6px 6px 0 rgba(255,170,0,.45);
    outline:none;
}

.address:active{
    transform:translate(2px,2px);
    box-shadow:0 0 0 rgba(255,170,0,.35);
}

.address-label,
.address-hint{
    color:var(--muted);
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.address-value{
    color:var(--gold);
    font-size:clamp(1.2rem, 4vw, 1.6rem);
    font-weight:bold;
    letter-spacing:.04em;
}

.address.copied{
    border-color:var(--green);
}

.address.copied .address-hint{
    color:var(--green);
}

.scroll{
    position:absolute;
    bottom:1.25rem;
    left:50%;
    transform:translateX(-50%);
    color:var(--muted);
    text-decoration:none;
    font-size:1.2rem;
    animation:bob 2.4s ease-in-out infinite;
}

/* ---------- sections ---------- */

main{
    width:min(100% - 2rem, 62rem);
    margin:0 auto;
}

section{
    padding:4.5rem 0 1rem;
}

h2{
    display:flex;
    align-items:baseline;
    gap:1rem;
    margin:0 0 1.75rem;
    font-size:clamp(1.1rem, 3vw, 1.5rem);
    letter-spacing:.14em;
    text-transform:uppercase;
}

h2 span{
    color:var(--gold);
    font-size:.75em;
}

h2::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg, var(--line), transparent);
}

h3{
    margin:0 0 .5rem;
    font-size:.85rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gold);
}

p{
    margin:0 0 1rem;
}

.lead{
    max-width:46rem;
    color:#cfcfcf;
    font-size:1.02rem;
}

.muted{
    color:var(--muted);
}

.small{
    font-size:.8rem;
}

.facts{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    margin:2rem 0 0;
    border:1px solid var(--line);
    background:var(--line);
}

.facts div{
    padding:1rem 1.1rem;
    background:var(--bg);
}

.facts dt{
    color:var(--muted);
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.facts dd{
    margin:.2rem 0 0;
    font-size:1.05rem;
}

/* how to join */
.steps{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
    gap:1rem;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:step;
}

.steps li{
    position:relative;
    padding:2.6rem 1.2rem 1.2rem;
    border:1px solid var(--line);
    background:var(--panel);
    counter-increment:step;
}

.steps li::before{
    content:counter(step);
    position:absolute;
    top:.8rem;
    left:1.2rem;
    color:var(--bg);
    background:var(--gold);
    width:1.5rem;
    height:1.5rem;
    display:grid;
    place-items:center;
    font-weight:bold;
    font-size:.85rem;
}

.steps p{
    margin:0;
    color:#c4c4c4;
    font-size:.88rem;
}

/* members */
.members{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
    gap:.6rem;
    margin:0;
    padding:0;
    list-style:none;
}

.members li{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.5rem .75rem;
    border:1px solid var(--line);
    background:var(--panel);
    color:#bdbdbd;
    font-size:.85rem;
    overflow-wrap:anywhere;
    transition:border-color .3s ease, color .3s ease;
}

.members img{
    flex:none;
    width:32px;
    height:32px;
    image-rendering:pixelated;
    filter:grayscale(.6) brightness(.85);
    transition:filter .3s ease;
}

.members li.admin::after{
    content:"op";
    margin-left:auto;
    color:var(--gold);
    font-size:.7rem;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.members li.on{
    border-color:var(--green);
    color:var(--fg);
}

.members li.on img{
    filter:none;
}

.members li.on::before{
    content:"";
    order:3;
    margin-left:auto;
    width:.5rem;
    height:.5rem;
    border-radius:50%;
    background:var(--green);
}

.members li.on.admin::before{
    margin-left:.5rem;
    order:4;
}

/* mods */
.modgroups{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr));
    gap:1rem;
}

.modgroup{
    padding:1.2rem;
    border:1px solid var(--line);
    background:var(--panel);
}

.modgroup.wide{
    grid-column:1 / -1;
}

.modgroup ul{
    margin:0;
    padding:0;
    list-style:none;
    font-size:.85rem;
}

.modgroup.wide ul{
    columns:15rem auto;
    column-gap:2rem;
}

.modgroup li{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:.2rem 0;
    border-bottom:1px dashed rgba(255,255,255,.07);
    break-inside:avoid;
}

.modgroup li i{
    color:var(--muted);
    font-style:normal;
    font-size:.78rem;
    white-space:nowrap;
}

.libs p{
    margin:0;
    color:var(--muted);
    font-size:.82rem;
}

/* rules */
.rules{
    margin:0;
    padding:0;
    list-style:none;
    max-width:48rem;
}

.rules li{
    position:relative;
    padding:.6rem 0 .6rem 1.8rem;
    color:#c4c4c4;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.rules li::before{
    content:"▸";
    position:absolute;
    left:.2rem;
    color:var(--gold);
}

/* ---------- footer ---------- */

footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.75rem 1rem;
    margin-top:4rem;
    padding:2rem 1rem 2.5rem;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.8rem;
    letter-spacing:.06em;
}

footer img{
    image-rendering:pixelated;
}

footer a{
    color:var(--muted);
}

footer a:hover{
    color:var(--fg);
}

/* ---------- motion ---------- */

@keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

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

@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(85,255,85,.55); }
    100%{ box-shadow:0 0 0 10px rgba(85,255,85,0); }
}

@media (max-width: 600px){
    .facts{
        grid-template-columns:repeat(2, 1fr);
    }

    .members li{
        gap:.5rem;
        padding:.45rem .55rem;
        font-size:.75rem;
    }

    .members img{
        width:24px;
        height:24px;
    }

    section{
        padding-top:3.5rem;
    }

    .modgroup li{
        font-size:.8rem;
    }
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }

    .logo,
    .scroll,
    .status[data-state="online"] .dot{
        animation:none;
    }
}