:root {
  --ink: #fff7dc;
  --muted: #d8caa0;
  --coal: #10120e;
  --obsidian: #17101f;
  --stone-dark: #3d3d3d;
  --stone: #696969;
  --stone-light: #8b8b8b;
  --dirt-dark: #4c321f;
  --dirt: #765239;
  --grass-dark: #2d6d2f;
  --grass: #52a343;
  --leaf: #1f5e32;
  --leaf-light: #317a3e;
  --gold: #f4cf55;
  --gold-dark: #8d621d;
  --diamond: #5dd6d6;
  --redstone: #d73f31;
  --slot: #201b16;
  --line: rgba(255, 255, 255, .2);
  font-family: "Trebuchet MS", Verdana, Segoe UI, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(#15251b 0 20%, #1d3d29 20% 46%, #563b28 46% 100%);
}

a {
  color: inherit;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(14px, 4vw, 54px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(#2f2f2f, #171717);
  border-bottom: 4px solid #050505;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .38);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #221500;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .32) 0 12px, transparent 12px 24px, rgba(0, 0, 0, .12) 24px 36px, transparent 36px) 0 0 / 48px 48px,
    linear-gradient(#ffe777, var(--gold));
  border: 4px solid #fff0a3;
  box-shadow: 0 5px 0 var(--gold-dark), inset -5px -5px 0 rgba(0, 0, 0, .16);
  font-weight: 900;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 19px;
  text-shadow: 2px 2px 0 #000;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

nav {
  display: flex;
  gap: 8px;
  color: var(--ink);
  font-weight: 900;
}

nav a {
  padding: 10px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 34%),
    #373737;
  border: 2px solid #111;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .12), inset -3px -3px 0 rgba(0, 0, 0, .35);
  text-decoration: none;
}

nav a:hover {
  background: #4a4a4a;
  color: #fff;
}

.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 126px clamp(18px, 5vw, 72px) 76px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(#6bbde1 0 42%, #5aa34b 42% 55%, #7a5335 55% 78%, #4a3324 78%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .82), rgba(8, 8, 8, .34) 56%, rgba(8, 8, 8, .72)),
    radial-gradient(circle at 72% 42%, transparent 0 210px, rgba(0, 0, 0, .18) 211px);
}

.hero-world {
  position: absolute;
  inset: 0;
}

.sun,
.cloud,
.hill,
.tree,
.portal,
.ground,
.ore {
  position: absolute;
  display: block;
}

.sun {
  top: 118px;
  right: 12vw;
  width: 112px;
  height: 112px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .3) 0 16px, transparent 16px 32px, rgba(0, 0, 0, .1) 32px 48px, transparent 48px 64px) 0 0 / 64px 64px,
    #ffd84d;
  box-shadow: 0 0 0 18px rgba(255, 216, 77, .16), inset -8px -8px 0 rgba(0, 0, 0, .13);
}

.cloud {
  width: 64px;
  height: 32px;
  background: #f4fbff;
  box-shadow: 64px 0 0 #f4fbff, 128px 0 0 #f4fbff, 64px -32px 0 #f4fbff;
}

.cloud-one {
  top: 178px;
  left: 15vw;
}

.cloud-two {
  top: 256px;
  right: 24vw;
  transform: scale(.78);
}

.hill {
  bottom: 26%;
  width: 42vw;
  height: 26vh;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--grass-dark);
  clip-path: polygon(0 100%, 30% 30%, 52% 72%, 78% 18%, 100% 100%);
}

.hill-one {
  left: -5vw;
}

.hill-two {
  right: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 48px 48px,
    #214f2d;
}

.tree {
  bottom: 24%;
  width: 48px;
  height: 144px;
  background:
    linear-gradient(90deg, #5b3821 0 12px, #7b5232 12px 24px, #4b2e1b 24px 36px, #6a462b 36px);
  box-shadow: inset -8px 0 0 rgba(0, 0, 0, .22);
}

.tree::before {
  content: "";
  position: absolute;
  left: -48px;
  top: -64px;
  width: 144px;
  height: 96px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .2) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--leaf);
  box-shadow: 0 -48px 0 var(--leaf-light), 48px -24px 0 #286f38;
}

.tree-one {
  left: 56vw;
}

.tree-two {
  left: 76vw;
  transform: scale(.86);
}

.portal {
  right: 9vw;
  bottom: 21%;
  width: 128px;
  height: 192px;
  border: 18px solid #111018;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 18px 18px,
    repeating-linear-gradient(45deg, #5b2995 0 18px, #a852e4 18px 36px);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .22), 0 12px 0 rgba(0, 0, 0, .38);
}

.ground {
  inset: auto 0 0;
  height: 22%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(var(--grass) 0 30px, var(--dirt) 30px 64%, var(--dirt-dark) 64%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 790px;
}

.kicker {
  margin: 0 0 12px;
  color: var(--gold);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 780px;
  margin-bottom: 18px;
  font-size: clamp(48px, 8vw, 112px);
  line-height: .92;
  text-shadow: 5px 5px 0 #101010, 8px 8px 0 rgba(0, 0, 0, .25);
}

h2 {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1;
  margin-bottom: 18px;
  text-shadow: 4px 4px 0 #000;
}

h3 {
  font-size: 23px;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 #000;
}

.lead {
  max-width: 690px;
  color: #fff3c2;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .7);
}

.join-panel {
  width: min(100%, 600px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin: 30px 0 22px;
  padding: 14px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--slot);
  border: 4px solid #070707;
  box-shadow: inset 4px 4px 0 rgba(255, 255, 255, .08), inset -5px -5px 0 rgba(0, 0, 0, .42), 0 9px 0 rgba(0, 0, 0, .36);
}

.join-panel div {
  min-width: 0;
  padding: 4px 2px;
}

.join-panel span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.join-panel strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(26px, 4vw, 38px);
  word-break: break-word;
  text-shadow: 3px 3px 0 #000;
}

button,
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 3px solid #130d00;
  color: #1d1400;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .22) 0 8px, transparent 8px 16px, rgba(0, 0, 0, .1) 16px 24px, transparent 24px 32px) 0 0 / 32px 32px,
    linear-gradient(#ffe27a, var(--gold));
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .18), inset -4px -4px 0 rgba(0, 0, 0, .22), 0 6px 0 var(--gold-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
}

button:active,
.button:active {
  transform: translateY(4px);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .18), inset -4px -4px 0 rgba(0, 0, 0, .22), 0 2px 0 var(--gold-dark);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.button {
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(#5d5d5d, #343434);
  border-color: #121212;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .12), inset -4px -4px 0 rgba(0, 0, 0, .4), 0 6px 0 #111;
  text-shadow: 2px 2px 0 #000;
}

.button.primary {
  color: #1d1400;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .22) 0 8px, transparent 8px 16px, rgba(0, 0, 0, .1) 16px 24px, transparent 24px 32px) 0 0 / 32px 32px,
    linear-gradient(#ffe27a, var(--gold));
  border-color: #130d00;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .18), inset -4px -4px 0 rgba(0, 0, 0, .22), 0 6px 0 var(--gold-dark);
  text-shadow: none;
}

.status-band,
.section,
.split-section,
.cta-section,
footer {
  padding-inline: clamp(18px, 5vw, 72px);
}

.status-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding-block: 4px;
  background: #070707;
  border-block: 4px solid #070707;
}

.status-band article {
  padding: 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 20px 20px,
    #213a29;
  box-shadow: inset 4px 4px 0 rgba(255, 255, 255, .06), inset -4px -4px 0 rgba(0, 0, 0, .28);
}

.status-band span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 900;
}

.status-band strong {
  font-size: clamp(20px, 2vw, 28px);
  text-shadow: 2px 2px 0 #000;
}

.section,
.split-section,
.cta-section {
  padding-block: clamp(58px, 8vw, 110px);
}

.section {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(#1b2a22, #111c17);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feature {
  min-height: 258px;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(135deg, var(--stone-light), var(--stone) 38%, var(--stone-dark));
  border: 4px solid #141414;
  box-shadow: inset 5px 5px 0 rgba(255, 255, 255, .12), inset -5px -5px 0 rgba(0, 0, 0, .35), 0 8px 0 rgba(0, 0, 0, .35);
}

.feature p,
.split-section p,
.rules {
  color: #f0e2ba;
  line-height: 1.65;
  text-shadow: 1px 1px 0 #000;
}

.block {
  display: block;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border: 3px solid #141414;
  box-shadow: inset 4px 4px 0 rgba(255, 255, 255, .12), inset -5px -5px 0 rgba(0, 0, 0, .3), 0 6px 0 rgba(0, 0, 0, .35);
}

.block.grass {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .14) 0 10px, transparent 10px 20px, rgba(0, 0, 0, .15) 20px 30px, transparent 30px) 0 0 / 40px 40px,
    linear-gradient(var(--grass) 0 34%, var(--dirt) 34%);
}

.block.emerald {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 20px, rgba(0, 0, 0, .14) 20px 30px, transparent 30px) 0 0 / 40px 40px,
    linear-gradient(135deg, #0d8158, #5df0ac);
}

.block.map {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .15) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(135deg, #d6c081, #72aab7);
}

.block.redstone {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .12) 0 10px, transparent 10px 20px, rgba(0, 0, 0, .18) 20px 30px, transparent 30px) 0 0 / 40px 40px,
    linear-gradient(135deg, #661a17, var(--redstone));
}

.block.plot {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(#9ea36b 0 25%, #5d7d46 25% 54%, #6c5438 54%);
}

.block.island {
  background:
    radial-gradient(circle at 50% 34%, #62a953 0 20px, transparent 21px),
    linear-gradient(#61aac8 0 42%, #d8c075 42% 58%, #6b5135 58%);
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 7vw, 90px);
  align-items: start;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 32px 32px,
    #182216;
}

.rules {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style-position: inside;
  font-weight: 900;
}

.rules li {
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(#5b5b5b, #3a3a3a);
  border: 3px solid #111;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .1), inset -4px -4px 0 rgba(0, 0, 0, .34);
}

.cta-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .2) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(var(--grass) 0 32px, var(--dirt) 32px);
}

.compact {
  width: min(100%, 500px);
  margin: 0;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 26px;
  color: var(--muted);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    #0c0c0c;
  border-top: 4px solid #000;
}

@media (max-width: 920px) {
  .site-header,
  .cta-section {
    align-items: flex-start;
    flex-direction: column;
  }

  nav {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .hero {
    min-height: 850px;
  }

  .status-band,
  .feature-grid,
  .split-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .hero {
    min-height: 780px;
    padding-top: 150px;
  }

  .status-band,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .join-panel {
    align-items: stretch;
    flex-direction: column;
  }

  button,
  .button {
    width: 100%;
  }

  .tree-one,
  .tree-two,
  .portal {
    display: none;
  }

  footer {
    flex-direction: column;
  }

  nav a {
    flex: 1 1 92px;
    text-align: center;
  }
}