/* Silkscreen by Jason Kottke, SIL Open Font License 1.1, via Google Fonts.
 * Self-hosted rather than linked: a runtime request to fonts.gstatic.com would
 * hand every visitor's IP address to Google, which is not a thing to do quietly
 * on a site that publishes an Impressum.
 */
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("silkscreen.woff2") format("woff2");
}

/* mc.magical.rocks
 *
 * Dark only, on purpose: Minecraft has no light mode and a beige version of
 * this page would look like a mistake. color-scheme is pinned so form controls
 * and scrollbars follow.
 *
 * Palette is Minecraft's own chat-colour codes -- white, §7 grey, §a green,
 * §e yellow, §c red -- which is why the greens and yellows look "right".
 */
:root {
  color-scheme: dark;
  --white: #ffffff;
  --grey: #aaaaaa;
  --dgrey: #555555;
  --green: #55ff55;
  --yellow: #ffff55;
  --red: #ff5555;
  --aqua: #55ffff;
  --shadow: #3f3f3f;

  --gui: #1c1a18;
  --gui-hi: #6b6459;
  --gui-lo: #0d0c0b;
  --btn: #6d6d6d;
  --btn-hi: #8b8b8b;
  --btn-lo: #3a3a3a;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: clamp(2rem, 7vh, 4.5rem) 1rem 4rem;
  min-height: 100vh;
  background: #100e0c;
  color: var(--white);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The Minecraft main menu is a tiled dirt texture behind a dark scrim. This is
 * that, panning slowly -- one full tile per cycle, so the loop is seamless. */
body::before {
  content: "";
  position: fixed;
  inset: -80px;
  background-image: url("dirt.svg");
  background-repeat: repeat;
  background-size: 64px 64px;
  image-rendering: pixelated;
  opacity: .28;
  animation: pan 60s linear infinite;
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(20,16,12,.25), rgba(8,7,6,.92) 78%);
  z-index: -1;
}
@keyframes pan { to { transform: translate(64px, 64px); } }

main { width: 100%; max-width: 44rem; }

/* Pixel type for anything that is "game UI". Body copy stays in a normal sans:
 * Silkscreen is charming for six words and punishing for a paragraph. */
.px {
  font-family: Silkscreen, ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-shadow: 2px 2px 0 var(--shadow);
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  text-align: center;
  margin: 0 0 clamp(2rem, 6vh, 3.5rem);
  padding-bottom: 1.5rem;
}
.logo {
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: clamp(1.6rem, 7.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0;
  letter-spacing: .02em;
  text-shadow: 4px 4px 0 rgba(0,0,0,.75);
}
.logo .sep { color: var(--green); }

/* The yellow splash, rotated and bouncing, exactly like the title screen. */
.splash {
  position: absolute;
  right: max(-1rem, -4vw);
  bottom: .1rem;
  margin: 0;
  max-width: 12rem;
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: clamp(.6rem, 2.2vw, .82rem);
  line-height: 1.35;
  color: var(--yellow);
  text-shadow: 2px 2px 0 #3f3f15;
  transform: rotate(-16deg);
  transform-origin: center;
  animation: bounce .9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes bounce {
  from { transform: rotate(-16deg) scale(1); }
  to   { transform: rotate(-16deg) scale(1.09); }
}

/* ----------------------------------------------------- server list entry */
/* A recreation of one row of Minecraft's own Multiplayer screen, driven by
 * the live ping. It is the whole point of the page: a player recognises this
 * before reading a word of it. */
.serverlist { margin-bottom: 1.75rem; }

.entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem;
  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.10);
  transition: background .12s steps(2), border-color .12s steps(2);
}
.entry:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.55);
}
.entry .icon {
  width: 64px; height: 64px;
  flex: none;
  image-rendering: pixelated;
  border: 2px solid rgba(0,0,0,.5);
}
.entry-main { flex: 1 1 auto; min-width: 0; }
.entry-name {
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: clamp(.85rem, 3vw, 1.05rem);
  text-shadow: 2px 2px 0 var(--shadow);
}
.entry-motd {
  color: var(--grey);
  font-size: .88rem;
  margin-top: .3rem;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
}
.entry-motd .ok { color: var(--green); }
.entry-motd .bad { color: var(--red); }

.entry-right {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: .8rem;
  text-shadow: 2px 2px 0 var(--shadow);
  color: var(--grey);
}
.players .n { color: var(--white); }

/* Signal bars, same five-step ladder the game draws. */
.ping {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.ping i {
  width: 3px;
  background: var(--dgrey);
  display: block;
}
.ping i:nth-child(1) { height: 4px; }
.ping i:nth-child(2) { height: 7px; }
.ping i:nth-child(3) { height: 10px; }
.ping i:nth-child(4) { height: 13px; }
.ping i:nth-child(5) { height: 16px; }
.ping i.on { background: var(--white); }
.ping.dead i { background: var(--red); height: 16px; }

.entry-status {
  margin: .6rem .1rem 0;
  font-size: .82rem;
  color: var(--grey);
}
.entry-status .live { color: var(--green); }
.entry-status .down { color: var(--red); }

/* ------------------------------------------------------------- gui panel */
/* Minecraft's beveled GUI slab: light top-left, dark bottom-right, no radius
 * anywhere. box-shadow rather than border so the bevel is exactly 4 crisp
 * pixels and never gets antialiased into a gradient. */
.panel {
  position: relative;
  margin-bottom: 1.25rem;
  padding: 1.35rem 1.5rem;
  background-color: rgba(18,16,14,.94);
  background-image: url("stone.svg");
  background-repeat: repeat;
  background-size: 48px 48px;
  background-blend-mode: multiply;
  box-shadow:
    inset  4px  4px 0 var(--gui-hi),
    inset -4px -4px 0 var(--gui-lo);
}
.panel h2 {
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 1rem;
  color: var(--yellow);
  text-shadow: 2px 2px 0 #3f3f15;
}

/* ------------------------------------------------------- address + copy */
.join { margin-bottom: 1.25rem; }
.fieldlabel {
  display: block;
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grey);
  text-shadow: 2px 2px 0 var(--shadow);
  margin-bottom: .55rem;
}
.field-row { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Minecraft's text field: black box, thin light border, monospace content. */
.mc-input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .85rem 1rem;
  background: #000;
  box-shadow: inset 0 0 0 2px #a0a0a0;
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: clamp(.9rem, 3.4vw, 1.15rem);
  color: var(--white);
  text-shadow: 2px 2px 0 var(--shadow);
  overflow-x: auto;
  white-space: nowrap;
}

.mc-btn {
  flex: 0 0 auto;
  padding: .85rem 1.6rem;
  border: 0;
  background: var(--btn);
  color: var(--white);
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 2px 2px 0 var(--shadow);
  cursor: pointer;
  box-shadow:
    inset  3px  3px 0 var(--btn-hi),
    inset -3px -3px 0 var(--btn-lo);
  transition: background .1s steps(2);
}
.mc-btn:hover { background: #7b88a0; }
.mc-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.mc-btn:active {
  box-shadow:
    inset -3px -3px 0 var(--btn-hi),
    inset  3px  3px 0 var(--btn-lo);
  transform: translateY(2px);
}
.mc-btn.done { background: #4c7a3a; }

/* ------------------------------------------------------------ how to join */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: .9rem;
  counter-increment: step;
}
.steps li:last-child { margin-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -.05rem;
  width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--gui-hi);
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: .85rem;
  color: var(--green);
  text-shadow: 2px 2px 0 #0f3f0f;
}
.note {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 2px solid rgba(255,255,255,.09);
  font-size: .86rem;
  color: var(--yellow);
}

kbd {
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: .82em;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--gui-hi);
  padding: .15em .5em;
  color: var(--white);
}

/* ------------------------------------------------------------ info slots */
/* Inventory slots: a grid of sunken squares. */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem;
}
.slot {
  padding: .7rem .8rem;
  background: rgba(0,0,0,.45);
  box-shadow:
    inset  3px  3px 0 var(--gui-lo),
    inset -3px -3px 0 rgba(255,255,255,.09);
}
.slot .k {
  display: block;
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--grey);
  text-shadow: 2px 2px 0 var(--shadow);
  margin-bottom: .3rem;
}
.slot .v { font-size: .92rem; }
.slot .v .hl { color: var(--aqua); }

/* ---------------------------------------------------------------- footer */
.links {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.links a {
  flex: 1 1 8rem;
  text-align: center;
  padding: .7rem .9rem;
  background: var(--btn);
  color: var(--white);
  text-decoration: none;
  font-family: Silkscreen, ui-monospace, monospace;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 2px 2px 0 var(--shadow);
  box-shadow:
    inset  3px  3px 0 var(--btn-hi),
    inset -3px -3px 0 var(--btn-lo);
  transition: background .1s steps(2);
}
.links a:hover { background: #7b88a0; }

.fineprint {
  margin: 1.5rem 0 0;
  font-size: .76rem;
  color: var(--dgrey);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .splash { animation: none; }
  * { transition: none !important; }
}