/* ============================================================
   TEXTURES — all from Vanilla Tweaks. See credits.txt.

   planks.png            64x64  VariatedPlanks (oak_planks2-6)
   bricks.png            64x64  VariatedBricks (bricks2-8)
   cobblestone.png       64x64  VariatedCobblestone (cobblestone2-10)
   yellow_terracotta.png 64x64  VariatedTerracotta (yellow_terracotta, 2-7)
   red_mushroom.png      64x64  VariatedMushroomBlocks (red_mushroom_block2-13)
   dirt.png              16x16  SmoothDirt
   grass_side.png        16x16  SmoothDirt
   leaves.png            16x16  BushyLeaves by Pollie, tinted with the pack's
                                own UniversalLushGrass foliage colormap

   VariatedTerracotta and VariatedMushroomBlocks both ship reoriented
   models, so the game flips those blocks as well as swapping them. Those
   two supertiles do the same, which is how a handful of variants fill a
   4x4 grid without an obvious repeat.

   The mushroom blockstate also weights variant 2 at 2 against 100 for
   every other variant, making it a rare find in game. Those weights are
   passed through to the supertile so it stays rare here too, rather than
   turning up once every twelve blocks.

   Every block renders at 48px — 16x16 sources scale 3x, 64x64 supertiles
   scale to 192px — with image-rendering: pixelated so the grid stays hard.

   NO SCRIMS. The block textures run at full strength. Nothing sits
   directly on them: raw brick, cobble, andesite and dirt all measure
   between 2.6:1 and 4.2:1 against either text colour, so every word on
   the page lives inside a panel instead.
   ============================================================ */
:root {
  --sky: #BBD4FF;
  --sea: #3E6E90;
  --sea-deep: #1B3C52;
  --hull: #0E2534;

  --grass-lush: #54CA3E;
  /* UniversalLushGrass — grass colormap */
  --foliage: #2ABB0E;
  /* UniversalLushGrass — foliage colormap */
  --jungle-lt: #6BD44F;

  --balloon: #EE8C3E;
  /* hot-air balloon orange — the CTA */
  --berry: #C9548C;
  --red: #C00000;

  --panel: #F5F2E8;
  /* the sign face */
  --ink: #132B38;
  /* text on a panel — 13:1 */
  --ink-dim: #4E6675;

  --oak-dark: #5E4527;
  --bone: #F4F0E4;
  --bone-dim: #A9BCC7;

  --tile: 48px;
  /* one block: 16px source at 3x */
  --tile-4: 192px;
  /* 4x4 supertile: 64px source at 3x */
  --shell: min(1180px, 92vw);
  --display: 'Silkscreen', 'Courier New', monospace;
  --body: 'Outfit', system-ui, sans-serif;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  * {
    animation: none !important;
    transition: none !important
  }
}

body {
  margin: 0;
  background: var(--sea-deep);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block
}

a {
  color: var(--sea)
}

a:hover {
  text-decoration: underline
}

:focus-visible {
  outline: 4px solid var(--balloon);
  outline-offset: 4px
}

.shell {
  width: var(--shell);
  margin-inline: auto
}

/* ============================================================
   THE PANEL
   One element, one look. A sign face with the same hard 4px bevel
   the buttons use, and a solid drop shadow so it sits proud of the
   wall behind it rather than floating ambiguously.
   ============================================================ */
.panel {
  background: var(--panel);
  color: var(--ink);
  padding: clamp(26px, 4vw, 44px);
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, .92),
    inset -4px -4px 0 rgba(28, 40, 48, .15),
    0 6px 0 rgba(10, 16, 12, .42);
}

.panel> :first-child {
  margin-top: 0
}

.panel> :last-child {
  margin-bottom: 0
}

.eyebrow {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2C6E1B;
  margin: 0 0 14px;
}

h2 {
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 20px;
  text-align: center;
}

/* ============================================================
   SIGNATURE 1 — the wooden button
   Real VariatedPlanks, with the label carried by a hard offset
   shadow rather than a background wash. 26px because Silkscreen's
   cap height is only ~60% of its em.
   ============================================================ */
.wood {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #FBF6E6;
  text-shadow: 3px 3px 0 rgba(10, 6, 2, .92);
  image-rendering: pixelated;
  background-color: #8A6740;
  background-image:
    linear-gradient(rgba(40, 25, 9, .30), rgba(40, 25, 9, .30)),
    url('textures/planks.png');
  background-size: auto, var(--tile-4) var(--tile-4);
  box-shadow:
    inset 4px 4px 0 rgba(255, 240, 205, .20),
    inset -4px -4px 0 rgba(30, 18, 6, .42),
    0 5px 0 var(--oak-dark);
  transition: transform .06s steps(1), box-shadow .06s steps(1), filter .12s;
}

.wood:hover {
  filter: brightness(1.12);
  text-decoration: none
}

.wood:active {
  transform: translateY(5px);
  box-shadow:
    inset 4px 4px 0 rgba(30, 18, 6, .34),
    inset -4px -4px 0 rgba(255, 240, 205, .14),
    0 0 0 var(--oak-dark);
}

/* ============================================================
   SIGNATURE 2 — the checkered flag band
   The only divider on the page, so a section break always means
   "finish line."
   ============================================================ */
.checker {
  height: 16px;
  background-image: conic-gradient(var(--hull) 0 25%, var(--panel) 0 50%,
      var(--hull) 0 75%, var(--panel) 0);
  background-size: 16px 16px;
}

/* ============================================================
   THE BEDS — raw block, no overlay
   Top to bottom the page reads as a cross-section: canopy, sky,
   grass line, brick, cobble, stone, andesite, dirt.
   ============================================================ */
.bed {
  image-rendering: pixelated;
  padding: clamp(56px, 8vw, 104px) 0;
}

/* SmoothDirt has no variants, so it's a plain 16x16 at one-block scale.
   The rest are 4x4 supertiles. */
.bed-dirt {
  background-color: #855F41;
  background-image: url('textures/dirt.png');
  background-size: var(--tile) var(--tile);
}

.bed-brick {
  background-color: #956152;
  background-image: url('textures/bricks.png');
  background-size: var(--tile-4) var(--tile-4);
}

.bed-cobble {
  background-color: #818080;
  background-image: url('textures/stone.png');
  background-size: var(--tile-4) var(--tile-4);
}

.bed-terracotta {
  background-color: #BB8321;
  background-image: url('textures/yellow_terracotta.png');
  background-size: var(--tile-4) var(--tile-4);
}

/* Yellow terracotta is the lightest bed on the page — a cream panel only
   separates from it at 2.9:1, against 3.5-5.4:1 everywhere else. A deeper
   drop shadow does the lifting the value difference can't. */
.bed-terracotta .panel {
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, .92),
    inset -4px -4px 0 rgba(28, 40, 48, .15),
    0 7px 0 rgba(58, 28, 4, .55);
}

/* ---------- canopy / nav ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  image-rendering: pixelated;
  background-color: #0D3211;
  background-image: url('textures/bedrock.png');
  background-size: var(--tile-4) var(--tile-4);
  border-bottom: 4px solid rgba(10, 20, 8, .55);
}

.topbar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--bone);
  white-space: nowrap;
  text-shadow: 3px 3px 0 rgba(3, 12, 6, .95);
  /* raw leaves measure 12:1, but
                                               the shadow keeps the glyphs off
                                               the bright leaf highlights */
}

.mark span {
  color: var(--red);
}

.nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.nav .wood {
  padding: 11px 18px;
  font-size: 20px
}

@media (max-width:900px) {
  .nav {
    display: none
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(52px, 7vw, 96px) 0 clamp(48px, 6vw, 84px);
  background-color: var(--sea-deep);
  /* only a soft fade into the ground line, so the render stays visible */
  background-image:
    linear-gradient(180deg,
      rgba(20, 44, 60, 0) 0%,
      rgba(20, 44, 60, .12) 52%,
      rgba(20, 44, 60, .55) 90%,
      rgba(20, 44, 60, .72) 100%),
    url('renders/craggy-llama-island.png');
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
}

.hero .shell {
  position: relative;
  z-index: 2;
  max-width: 800px
}

.logotype {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 88px);
  line-height: .95;
  margin: 0 0 24px;
  color: var(--bone);
  text-align: center;
  text-shadow: 6px 6px 0 rgba(6, 20, 28, .85);
}

.logotype em {
  display: block;
  font-style: normal;
  color: var(--red);
}

.hero .panel {
  max-width: 660px;
  margin-inline: auto
}

.hero .panel p.lede {
  font-size: clamp(17px, 2vw, 20px);
  margin: 0 0 26px;
  color: var(--ink);
}

.cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}

/* ---------- the ground line ---------- */
.groundline {
  height: var(--tile);
  image-rendering: pixelated;
  background-image: url('textures/grass_side.png');
  background-size: var(--tile) var(--tile);
  background-repeat: repeat-x;
}

/* ---------- server address chip ---------- */
.join-chip {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  max-width: 100%;
  background: var(--hull);
  box-shadow: inset 0 0 0 3px rgba(238, 140, 62, .75);
}

.join-chip .addr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 20px;
  min-width: 0;
}

.join-chip .addr small {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--balloon);
  text-transform: uppercase;
}

.join-chip .addr strong {
  font-family: var(--display);
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 400;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
}

.join-chip button {
  border: 0;
  cursor: pointer;
  padding: 0 22px;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--balloon);
  color: #3A1B04;
  transition: background-color .12s, transform .06s steps(1);
}

.join-chip button:hover {
  filter: brightness(1.1)
}

.join-chip button:active {
  transform: scale(.94)
}

.join-chip button.is-copied {
  background: var(--grass-lush);
  color: #0D3211;
}

.status {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.status .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  background: #2C6E1B;
  vertical-align: middle;
}

/* ---------- pitch ---------- */
.pitch .panel p {
  font-size: clamp(17px, 2vw, 20px);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.stat {
  padding: 22px 20px
}

/* .stat is also a .panel */
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 32px);
  color: var(--sea);
  line-height: 1.2;
}

.stat span {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- tracks ---------- */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.track {
  position: relative;
  background: var(--hull);
  box-shadow: 0 6px 0 rgba(10, 16, 12, .42);
}

.track .shot {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-image:
    linear-gradient(180deg, rgba(14, 37, 52, 0) 46%, rgba(14, 37, 52, .94) 100%),
    linear-gradient(160deg, var(--sea), var(--sea-deep) 62%, var(--hull));
}

.track--craggy .shot {
  background-image:
    linear-gradient(180deg, rgba(14, 37, 52, 0) 46%, rgba(14, 37, 52, .94) 100%),
    url('renders/craggy-llama-island.png');
}

.track--farm .shot {
  background-image:
    linear-gradient(180deg, rgba(14, 37, 52, 0) 46%, rgba(14, 37, 52, .94) 100%),
    url('renders/llamoo-farm.png');
}

.track--rocket .shot {
  background-image:
    linear-gradient(180deg, rgba(14, 37, 52, 0) 46%, rgba(14, 37, 52, .94) 100%),
    url('renders/rocket-llaunch.png');
}

.track .plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px
}

.track .plate b {
  display: block;
  font-family: var(--body);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--bone);
}

.track .plate span {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--balloon);
}

/* ---------- videos ---------- */
.video-embed {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 900px;
  margin: 20px auto 0;
  background: var(--hull);
  box-shadow: inset 0 0 0 3px rgba(238, 140, 62, .5), 0 6px 0 rgba(10, 16, 12, .42);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

/* ---------- join steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.step {
  padding: 26px 24px
}

/* .step is also a .panel */
.step .n {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .1em;
  color: #8A3F06;
  display: block;
  margin-bottom: 12px;
}

.step h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -.01em
}

.step p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-dim)
}

/* ---------- dirt footer ---------- */
footer {
  image-rendering: pixelated;
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 88px);
  background-color: #C93230;
  background-image: url('textures/bedrock.png');
  background-size: var(--tile-4) var(--tile-4);
}

/* The buttons sit inside the footer panel, not on the bookshelves. Plank
   buttons on a busy book-spine wall put two competing textures edge to
   edge; the panel gives them a flat field to read against. A rule then
   separates them from the credits below without needing a second panel. */
.social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding-bottom: 26px;
  border-bottom: 3px solid rgba(19, 43, 56, .13);
  text-align: center;
  justify-content: center;
}

.social-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink-dim);
  transition: color .12s, transform .06s steps(1);
}

.social-icon svg {
  width: 24px;
  height: 24px
}

.social-icon:hover {
  color: var(--ink);
  text-decoration: none
}

.social-icon:active {
  transform: translateY(2px)
}

.credits {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-dim);
}

.credits p {
  margin: 0 0 8px
}

.credits p:last-child {
  margin-bottom: 0
}

.credits strong {
  color: var(--ink)
}

.attrib {
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.55
}