/* --------------------------------------------------------------------------
   Minecraft by Idrees Hassan - SIL Open Font License 1.1 (see fonts/OFL.txt).
   A fan recreation of the Minecraft UI typeface; contains no Mojang assets.
   Source: https://github.com/IdreesInc/Minecraft-Font
   Note: only 193 glyphs. No em dash, ellipsis or curly quotes.

   The pixel face is a DISPLAY face: headings, the brand, numerals. Running
   text is Instrument Sans. A whole page of body copy set in a pixel font is
   what made the old build read as a fan site.

   So the ASCII rule now applies to HEADINGS ONLY - h1/h2/h3, .brand, and
   anything else set in var(--display). Body copy is free to use whatever
   typography it needs.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Minecraft";
  src:url("fonts/Minecraft.woff2") format("woff2"),
      url("fonts/Minecraft.otf") format("opentype");
  font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Minecraft";
  src:url("fonts/Minecraft-Bold.woff2") format("woff2"),
      url("fonts/Minecraft-Bold.otf") format("opentype");
  font-weight:700 900;font-style:normal;font-display:swap;
}

/* ==========================================================================
   JesterSMP - shared site styles
   Dark, single theme, on purpose. Ink-black ground, one ember accent.
   ========================================================================== */

:root{
  /* Ground and surfaces.
     Ink Black is the floor; each step up walks toward Night Bordeaux but
     stays low-chroma, so body copy sits on near-neutral cards rather than on
     saturated red. The red belongs to the hairlines and the accent. */
  --abyss:#03071e;
  --ground-2:#0a0716;
  --surface:#130b18;
  --surface-2:#1c1121;
  --surface-3:#26172a;

  /* Hairlines - Night Bordeaux and Black Cherry, thinned right down */
  --line:#2c1626;
  --line-2:#40202d;
  --line-3:#5f313a;

  /* Text - warm off-white, never clinical white */
  --ink:#fbf3ea;
  --dim:#cab6ad;
  --faint:#95817b;

  /* Accent - the fire ramp. Orange leads, Amber Flame is the lit state,
     Autumn Leaf is the second voice. */
  --accent:#faa307;
  --accent-2:#e85d04;
  --accent-soft:rgba(250,163,7,.10);
  --accent-line:rgba(250,163,7,.32);
  --accent-hover:#ffba08;

  /* The deep end of the ramp, for fills and glows rather than text */
  --bordeaux:#370617;
  --cherry:#6a040f;
  --oxblood:#9d0208;
  --ember:#d00000;
  --ochre:#dc2f02;

  /* In-game currency colours, sampled from the item art (local/unused/money_gem.png) */
  --c-money:#23e302;
  --c-gem:#dc01f6;

  /* Status. Green and red are off-palette on purpose: "online", "free" and
     "blocked" have to read as status at a glance, and a second orange would
     disappear into the accent. Both are muted to sit with the embers. */
  --good:#3fc98a;
  --good-soft:rgba(63,201,138,.10);
  --good-line:rgba(63,201,138,.35);
  --warn:#ff5c63;
  --blurple:#5865F2;
  --blurple-hover:#6b77ff;

  /* Chrome that would otherwise be hardcoded mid-file */
  --wash:rgba(157,2,8,.30);
  --header-bg:rgba(3,7,30,.88);

  /* Wordmark - Jester in orange, SMP in purple, with a solid extrude */
  --wm-o-1:#ffd76a; --wm-o-2:#ff9a1f; --wm-o-3:#f2701a; --wm-o-cast:#7a3005;
  --wm-p-1:#dcaaff; --wm-p-2:#a855f7; --wm-p-3:#7c2ae8; --wm-p-cast:#3f1275;
  --wm-ambient:rgba(0,0,0,.5);

  /* Radius scale - tight and consistent; 999px only for real pills */
  --r-sm:6px;
  --r:10px;
  --r-lg:14px;

  color-scheme:dark;

  --maxw:1080px;
  --display:"Minecraft","Pixelify Sans",ui-sans-serif,system-ui,sans-serif;
  --prose:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:var(--prose);
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100svh;
  background:var(--abyss);
  color:var(--ink);
  font-family:var(--prose);
  font-size:16px;line-height:1.6;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;flex-direction:column;
}
a{color:var(--accent);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm);
}
img{max-width:100%;display:block}
h1,h2,h3{
  font-family:var(--display);
  text-wrap:balance;font-weight:700;letter-spacing:0;
  /* Kill grayscale AA where the platform honours it (macOS WebKit). The size
     grid below does the real work everywhere else. */
  -webkit-font-smoothing:none;
  font-smooth:never;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Background ----------
   The old build layered beams, waves, blobs and scanlines at once. One quiet
   directional wash reads as considered; five moving layers read as a template.
   .beam and .waves are inert so pages still carrying that markup degrade to
   nothing rather than break. */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 62% at 50% -10%, var(--wash), transparent 62%),
    linear-gradient(180deg, var(--ground-2), var(--abyss) 42%);
}
.beam,.waves{display:none}

/* ---------- Shell ---------- */
/* Discrete padding, not clamp(): a fluid value lands the text origin on a
   fractional pixel at most viewport widths, which blurs the pixel face. */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){ .wrap{padding-inline:32px} }
main{flex:1}

/* ---------- Wordmark ----------
   "Jester" orange, "SMP" purple. The gradient is painted through the glyphs
   with background-clip; the solid extrude underneath is a drop-shadow rather
   than a text-shadow, because a text-shadow shows through the transparent
   fill that background-clip needs. Colour falls back to a flat fill wherever
   background-clip:text is unsupported. */
.wm-j,.wm-s{color:var(--wm-o-2)}
.wm-s{color:var(--wm-p-2)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wm-j,.wm-s{
    color:transparent;
    -webkit-background-clip:text;background-clip:text;
    background-repeat:no-repeat;
  }
  .wm-j{background-image:linear-gradient(180deg,var(--wm-o-1) 8%,var(--wm-o-2) 54%,var(--wm-o-3) 100%)}
  .wm-s{background-image:linear-gradient(180deg,var(--wm-p-1) 8%,var(--wm-p-2) 54%,var(--wm-p-3) 100%)}
}
/* Header lockup: one crisp pixel of lift, no more - it is 18px tall. */
.brand-name .wm-j{filter:drop-shadow(0 1px 0 var(--wm-o-cast))}
.brand-name .wm-s{filter:drop-shadow(0 1px 0 var(--wm-p-cast))}

/* ---------- Header ---------- */
header.top{
  position:sticky;top:0;z-index:20;
  background:var(--header-bg);
  backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand img{height:30px;width:auto;transition:opacity .18s ease}
.brand-name{
  font-family:var(--display);font-size:18px;line-height:24px;
  color:var(--ink);transition:opacity .18s ease;
  -webkit-font-smoothing:none;font-smooth:never;
  white-space:nowrap;
}
.brand:hover img,.brand:hover .brand-name{opacity:.8}
@media (max-width:420px){ .brand-name{display:none} }
.top nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.navlink{
  position:relative;
  font-size:14px;font-weight:500;color:var(--dim);
  padding:7px 11px;border-radius:var(--r-sm);
  transition:color .16s ease,background .16s ease;
  white-space:nowrap;
}
.navlink:hover{color:var(--ink);background:var(--surface-2)}
.navlink[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.navlink[aria-current="page"]::after{
  content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2px;
  background:var(--accent);border-radius:2px 2px 0 0;
}
.navlink.dc{display:inline-flex;align-items:center;gap:7px}
.navlink.dc svg{width:15px;height:15px;fill:currentColor}
.navlink.soon{opacity:.5;cursor:default}
@media (max-width:720px){
  .top .wrap{height:auto;padding-block:12px;flex-wrap:wrap;gap:8px}
  .navlink{font-size:13px;padding:6px 9px}
  .navlink.dc span{display:none}
}

/* ---------- Page header ---------- */
/* padding-block, not the padding shorthand: .pagehead is also a .wrap and
   the shorthand would zero out its padding-inline. */
.pagehead{padding-block:clamp(40px,7vh,72px) clamp(22px,3.5vh,34px)}
.pagehead .eyebrow{
  display:inline-block;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--accent);
}
.pagehead h1{font-size:36px;line-height:48px;margin-top:14px}
@media (min-width:900px){ .pagehead h1{font-size:54px;line-height:72px} }
.pagehead p{
  margin-top:16px;max-width:64ch;color:var(--dim);
  font-size:clamp(15px,1.9vw,17px);line-height:1.6;
}
.pagehead p code{font-family:var(--mono);font-size:.9em;color:var(--ink)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;
  transition:border-color .18s ease, background .18s ease;
}
a.card:hover{border-color:var(--line-3);background:var(--surface-2)}
.card h2{font-size:18px;line-height:24px;color:var(--ink);display:flex;align-items:center;gap:10px}
.card p{font-size:14px;color:var(--dim)}
.icon{
  width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:var(--r-sm);
  background:var(--surface-3);border:1px solid var(--line-2);
}
.icon svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon svg.solid{fill:var(--accent);stroke:none}
.icon img{width:20px;height:20px;border-radius:4px;image-rendering:pixelated}
.go{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--accent);
}
.go .arrow{transition:transform .18s ease;display:inline-block}
a.card:hover .go .arrow{transform:translateX(3px)}
.card.soon{opacity:.55}
.chip{
  align-self:flex-start;margin-top:auto;font-family:var(--mono);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:4px 8px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--prose);font-size:14px;font-weight:600;cursor:pointer;
  color:var(--abyss);background:var(--accent);
  border:1px solid transparent;border-radius:var(--r-sm);padding:10px 18px;
  transition:background .16s ease, transform .08s ease;
}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn.ghost{color:var(--ink);background:var(--surface-2);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-3);border-color:var(--line-3)}
.btn.discord{color:#fff;background:var(--blurple);border-color:transparent}
.btn.discord svg{fill:currentColor}
.btn.discord:hover{background:var(--blurple-hover)}
.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);margin-top:clamp(48px,8vh,88px)}
footer .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  padding-block:24px;font-size:13.5px;color:var(--faint);
}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer nav a{color:var(--faint);font-weight:500}
footer nav a:hover{color:var(--ink)}
footer .mono{font-family:var(--mono);font-size:12.5px}
.foot-end{display:flex;align-items:center;gap:11px}
/* Small, quiet link to the minigame - the only route to it now that it is
   out of the nav. */
.ftj-dot{
  display:inline-flex;flex:0 0 auto;opacity:.55;
  transition:opacity .16s ease, transform .16s ease;
}
.ftj-dot img{
  width:22px;height:22px;display:block;border-radius:4px;
  border:1px solid var(--line-2);background:var(--surface-2);
  image-rendering:pixelated;
  transition:border-color .16s ease;
}
.ftj-dot:hover,.ftj-dot:focus-visible{opacity:1;transform:translateY(-1px)}
.ftj-dot:hover img{border-color:var(--accent)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(8px);animation:rise .5s cubic-bezier(.22,.8,.3,1) forwards;animation-delay:var(--d,0s)}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------- Live status ---------- */
.status{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;color:var(--dim);
}
.status[hidden]{display:none}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.status.online .dot{background:var(--good)}
.status.online .status-text{color:var(--ink)}
.status.offline .dot{background:var(--warn)}
.status .ver{color:var(--faint);font-family:var(--mono);font-size:11px}
.status .ver:empty{display:none}

/* ---------- Address panel ---------- */
.panel{
  width:min(100%,560px);display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
}
.panel-main{
  width:100%;display:flex;flex-direction:column;gap:12px;align-items:center;
  padding:24px 22px 22px;
}
.kicker{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--faint);
}
.copy{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--mono);font-size:clamp(17px,3vw,21px);font-weight:500;
  cursor:pointer;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);
  padding:14px 20px;border-radius:var(--r);
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.copy:hover{border-color:var(--line-3);background:var(--surface-3)}
.copy:active{transform:translateY(1px)}
.copy svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s ease}
.copy:hover svg{stroke:var(--accent)}
.copy .ck{display:none}
.copy.copied{border-color:var(--good-line);color:var(--good)}
.copy.copied .ci{display:none}
.copy.copied .ck{display:inline;stroke:var(--good)}
.panel-foot{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:12px 20px;
  border-top:1px solid var(--line);
  background:var(--ground-2);
  min-height:52px;
}
.panel-foot .faces-box{width:auto;flex-direction:row;align-items:center;gap:10px}
.panel-foot .faces-label{display:none}
.panel-foot .faces{justify-content:flex-start;gap:5px}
.panel-foot .sep{width:1px;height:20px;background:var(--line-2);flex:0 0 auto}
.panel-foot .sep[hidden]{display:none}

/* ---------- Online player faces ---------- */
.faces-box{width:100%;display:flex;flex-direction:column;gap:9px;align-items:center}
.faces-box[hidden]{display:none}
.faces-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--faint)}
.faces{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.faces img{
  width:28px;height:28px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface-2);
  image-rendering:pixelated;display:block;
  transition:border-color .16s ease;
}
.face{position:relative;display:inline-flex}
.face:hover img,.face:focus-visible img{border-color:var(--accent)}
.face .name{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11.5px;
  color:var(--ink);background:var(--surface-3);border:1px solid var(--line-2);
  padding:5px 8px;border-radius:var(--r-sm);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .14s ease;z-index:5;
}
.face:hover .name,.face:focus-visible .name{opacity:1}

/* ---------- Numbered steps ---------- */
.steps{display:flex;flex-direction:column;gap:9px}
.step{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--dim)}
.step i{
  flex:0 0 auto;width:19px;height:19px;border-radius:var(--r-sm);margin-top:1px;
  display:grid;place-items:center;font-style:normal;
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-line);
}
.step code{font-family:var(--mono);font-size:13px;color:var(--ink)}

/* The Minecraft font has no arrow glyph - render those in the prose face. */
.arrow{font-family:var(--prose)}