/* Dirt Client: the site's look, from pvpmod-alpha's site (web/site/style.css).
 *
 * Minecraft's menu, reproduced rather than approximated:
 *   1. The background is the dirt tile at 3x under a 75 % black wash, the
 *      0x404040 tint vanilla's old menus drew it with (the game's own title
 *      screen does the same).
 *   2. Text shadow is the text colour at 25 % brightness, a hard one-pixel
 *      offset (Minecraft's Font), at the page's 2 px "pixel".
 *   3. The button is the real widget/button sprite (200x20, a 3 px border in
 *      its .mcmeta), nine-sliced by border-image at 3x.
 */

@font-face {
  font-family: "Monocraft";
  src: url("/assets/Monocraft.ttf") format("truetype");
  font-display: swap;
}

:root {
  --text: #ffffff;
  --text-dim: #a8a8a8;
  --text-shadow: #3f3f3f;       /* #ffffff at 25 % */
  --gold: #ffaa00;              /* Minecraft's gold */
  --gold-shadow: #3f2a00;       /* the gold at 25 % */
  --bevel-light: #6d6d6d;
  --bevel-dark: #191919;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Monocraft", ui-monospace, "Courier New", monospace;
  font-size: clamp(15px, 1.1vw + 11px, 18px);
  line-height: 1.7;
  color: var(--text);
  text-shadow: 2px 2px 0 var(--text-shadow);
  overflow-wrap: break-word;
  background-color: #1a1a1a;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url("/assets/dirt.png");
  background-size: auto, 48px 48px;  /* 16 px tile at 3x: integer, so crisp */
  background-attachment: fixed;
  image-rendering: pixelated;        /* never smooth a 16 px texture */
}

a { color: var(--gold); text-shadow: 2px 2px 0 var(--gold-shadow); }
a:hover, a:focus-visible { color: #ffd257; }

:focus-visible {
  outline: 3px solid #55ff55;
  outline-offset: 3px;
}

header, main, footer {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}

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

.hero {
  text-align: center;
  padding-top: 56px;
  padding-bottom: 32px;
}

.logo { margin: 0 0 16px; line-height: 0; }
.logo img {
  width: 100%;
  max-width: 720px;
  height: auto;
  image-rendering: auto;             /* a painted image, downscaled: smooth it */
}

.tagline {
  margin: 0 auto 32px;
  font-size: clamp(16px, 2vw, 21px);
}
.tagline span { display: inline-block; }  /* a sentence per line where it fits */

.fineprint {
  margin: 12px 0 0;
  font-size: 0.82em;
  color: var(--text-dim);
  text-shadow: 2px 2px 0 #2a2a2a;
}

/* ---------------------------------------------------------------- button -- */

.mc-button {
  display: inline-block;
  min-width: 300px;
  padding: 16px 32px;
  font-family: inherit;
  font-size: 1.06em;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  text-shadow: 2px 2px 0 var(--text-shadow);
  border: 9px solid transparent;     /* the 3 px slice at 3x */
  border-image: url("/assets/button.png") 3 fill / 9px repeat;
  image-rendering: pixelated;
}

.mc-button:hover,
.mc-button:focus-visible {
  border-image-source: url("/assets/button_highlighted.png");
  color: var(--text);
}

.mc-button.primary {
  min-width: 380px;
  padding: 20px 32px;
  font-size: 1.2em;
}

@media (max-width: 420px) {
  .mc-button, .mc-button.primary { min-width: 0; width: 100%; }
}

/* ---------------------------------------------------------------- panels -- */

/* Minecraft's container bevel: light top and left, dark bottom and right. */
.panel {
  margin: 32px 0;
  padding: 24px 28px;
  background: rgba(0, 0, 0, 0.55);
  border-top: 3px solid var(--bevel-light);
  border-left: 3px solid var(--bevel-light);
  border-bottom: 3px solid var(--bevel-dark);
  border-right: 3px solid var(--bevel-dark);
}

.panel h2 {
  margin: 0 0 16px;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--gold-shadow);
}

.panel p { margin: 0; }
.panel ul { margin: 0; padding-left: 1.4em; }
.panel li + li { margin-top: 10px; }

@media (max-width: 420px) {
  .panel { padding: 18px 16px; }
}

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

footer {
  margin-top: 40px;
  padding-top: 24px;
  padding-bottom: 48px;
  text-align: center;
  border-top: 3px solid var(--bevel-dark);
}

.disclaimer {
  max-width: 66ch;
  margin: 12px auto;
  font-size: 0.74em;
  line-height: 1.6;
  color: #7a7a7a;
  text-shadow: 2px 2px 0 #1e1e1e;
}