:root{
  --stone:#1b1b1f; --stone-2:#26262c; --edge:#0d0d10; --edge-light:#4a4a55;
  --grass:#5db54b; --grass-dark:#3a7a30; --text:#f2f2f2; --muted:#b9b9c2;
  --red:#d4534f; --grey:#8a8a96;
  /* hero: night sky -> grass -> dirt, so the dark page body reads as underground */
  --sky-top:#0a1420; --sky-mid:#0f2033; --sky-horizon:#16324a;
  --dirt:#7a5033;
  --display:'Silkscreen','Courier New',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--stone);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}
h1,h2,h3{font-family:"Courier New",monospace;letter-spacing:.04em;text-transform:uppercase}
h1{font-size:clamp(1.6rem,6vw,3rem);margin:0 0 .3em}
.hero{position:relative;overflow:hidden;text-align:center;
  padding:3.75rem 1rem 5.5rem;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-horizon) 100%)}
.hero__inner{position:relative;z-index:1;max-width:48rem;margin:0 auto}
.hero h1{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,6.5vw,3.75rem);line-height:1.15;margin:0 0 .6rem;
  color:#fff;letter-spacing:.01em;text-shadow:0 4px 0 rgba(0,0,0,.55)}
.hero #tagline{margin:0 auto 1.6rem;max-width:34rem;color:#c8d6e5;font-size:1.05rem}

.status-pill{display:inline-flex;align-items:center;gap:.6rem;margin:0;
  background:rgba(0,0,0,.38);border:3px solid var(--edge);padding:.5rem 1.15rem;
  font-family:var(--display);font-size:.85rem;letter-spacing:.02em}
.status-pill .badge{width:.85rem;height:.85rem;margin:0}

/* Signature: a blocky grass/dirt horizon. Everything below it is stone, so the
   page body reads as underground rather than merely dark. */
.terrain{position:absolute;left:0;right:0;bottom:0;z-index:0;line-height:0}
.terrain__grass{height:22px;background:var(--grass);
  clip-path:polygon(
    0% 100%,
    0% 0%, 6.25% 0%, 6.25% 45%, 12.5% 45%, 12.5% 0%, 25% 0%,
    25% 45%, 31.25% 45%, 31.25% 0%, 37.5% 0%, 37.5% 45%, 50% 45%,
    50% 0%, 62.5% 0%, 62.5% 45%, 68.75% 45%, 68.75% 0%, 81.25% 0%,
    81.25% 45%, 87.5% 45%, 87.5% 0%, 93.75% 0%, 93.75% 45%, 100% 45%,
    100% 100%)}
.terrain__dirt{height:40px;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 8px,transparent 8px 16px),
  repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 8px,transparent 8px 16px),
  var(--dirt)}
main{max-width:60rem;margin:0 auto;padding:1rem}
.panel{background:var(--stone-2);border:4px solid var(--edge);
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.35),inset 4px 4px 0 rgba(255,255,255,.06);
  padding:1.25rem;margin:1.25rem 0}
.cards{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:36rem){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--stone);border:4px solid var(--edge-light);padding:1rem;text-align:center}
.card code{display:block;font-size:1.05rem;word-break:break-all;margin:.5rem 0;color:var(--grass)}
.copy,.button{font:inherit;cursor:pointer;background:var(--grass-dark);color:#fff;
  border:3px solid var(--edge);padding:.55rem 1.1rem;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none;display:inline-block}
.copy:hover,.button:hover{background:var(--grass)}
.copy:focus-visible,.button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.copy[data-copied="true"]{background:var(--grass)}
.badge{display:inline-block;width:.75rem;height:.75rem;margin-right:.5rem;border:2px solid var(--edge)}
.badge--online{background:var(--grass)}
.badge--offline{background:var(--red)}
.badge--unknown{background:var(--grey)}
.hint,.note,.muted,.card-status{color:var(--muted);font-size:.9rem}
.card-status{margin:.35rem 0}
#player-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
#player-list li{background:var(--stone);border:3px solid var(--edge-light);padding:.3rem .7rem}
dl#server-details{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0}
dl#server-details dt{color:var(--muted)}
dl#server-details dd{margin:0}
footer{text-align:center;padding:2rem 1rem;color:var(--muted);font-size:.85rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}