:root {
  --ink: #171b14;
  --cream: #e8dfc6;
  --paper: #f7f2df;
  --green: #5f9f32;
  --green-dark: #234626;
  --lime: #80bd3e;
  --orange: #d58a36;
  --dirt: #795438;
  --stone: #747774;
  --coal: #272c26;
  --line: rgba(21, 32, 20, .16);
  --pixel-shadow: 6px 6px 0 #101810;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Noto Sans SC", sans-serif;
  overflow-x: hidden;
  image-rendering: pixelated;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.noise {
  position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  height: 86px; position: absolute; inset: 0 0 auto; z-index: 20; padding: 0 5vw;
  display: flex; align-items: center; justify-content: space-between; color: white;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand strong { display: block; font-size: 18px; letter-spacing: .15em; }
.brand small { display: block; margin-top: 2px; font: 7px/1 "Press Start 2P"; color: #b8d9aa; letter-spacing: .04em; }
.brand-cube {
  width: 35px; height: 35px; display: block; background: #6ea02f;
  border: 4px solid #172518; box-shadow: inset -7px -7px 0 #477c28, inset 5px 5px 0 #98c949;
}
.nav-links { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 700; }
.nav-links a { transition: color .2s, transform .2s; }
.nav-links a:hover { color: var(--lime); transform: translateY(-2px); }
.nav-cta { border: 2px solid #fff; padding: 10px 18px; box-shadow: 3px 3px 0 rgba(255,255,255,.25); }
.menu-button { display: none; background: transparent; border: 0; padding: 6px; }
.menu-button span { width: 25px; height: 3px; margin: 4px; display: block; background: white; }

.hero {
  min-height: 760px; height: 100vh; max-height: 980px; position: relative; overflow: hidden;
  color: white;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(124deg, #101711 0%, #1c2e1d 51%, #3e6742 100%);
  background-size: 32px 32px, 32px 32px, auto;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(transparent, rgba(10,18,11,.7));
}
.hero-content { position: relative; z-index: 5; width: min(650px, 48vw); margin-left: 8vw; padding-top: 19vh; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 9px/1.5 "Press Start 2P"; letter-spacing: .08em; color: #cceaa7; }
.eyebrow span { width: 28px; height: 4px; background: var(--lime); box-shadow: 5px 0 0 #669132; }
.eyebrow.dark { color: #73816e; }
.hero h1 { margin: 24px 0; font-size: clamp(45px, 5.5vw, 82px); line-height: 1.13; letter-spacing: -.055em; font-weight: 900; text-shadow: 4px 4px 0 #080c08; }
.hero h1 em { font-style: normal; color: #91cf49; text-shadow: 5px 5px 0 #2b4e21, 8px 8px 0 #152912; }
.hero-copy { width: min(570px, 100%); color: #c9d2c5; font-size: 17px; line-height: 1.9; }
.hero-actions { display: flex; gap: 15px; margin-top: 36px; }
.pixel-button {
  border: 3px solid white; padding: 15px 22px; display: inline-flex; align-items: center; gap: 11px;
  color: white; background: transparent; font-weight: 700; cursor: pointer; box-shadow: 5px 5px 0 rgba(0,0,0,.35);
  transition: transform .15s, box-shadow .15s; position: relative;
}
.pixel-button::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.28); pointer-events: none; }
.pixel-button:hover { transform: translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.pixel-button.primary { color: var(--ink); border-color: var(--lime); background: var(--lime); }
.pixel-button.download-button { border-color: #e9b949; color: #ffe09a; background: rgba(28,22,12,.38); }
.pixel-button.download-button:hover { background: #8a5c24; color: #fff; }
.button-icon { font-size: 11px; }
.server-strip {
  margin-top: 46px; width: min(590px, 100%); display: flex; align-items: center; gap: 14px;
  padding: 14px 17px; border-left: 3px solid var(--lime); background: rgba(5,13,7,.45); backdrop-filter: blur(8px);
}
.server-strip small { display: block; color: #9fac9d; font-size: 11px; }
.server-strip strong { letter-spacing: .04em; }
.status-dot { width: 11px; height: 11px; background: #8eda3c; box-shadow: 0 0 0 5px rgba(142,218,60,.15), 0 0 18px #8eda3c; }
.status-dot.checking { background: #e7b64a; box-shadow: 0 0 0 5px rgba(231,182,74,.15), 0 0 18px #e7b64a; animation: status-pulse 1.2s steps(2,end) infinite; }
.status-dot.offline { background: #d85748; box-shadow: 0 0 0 5px rgba(216,87,72,.15), 0 0 18px #d85748; }
.status-dot.unknown { background: #8b9188; box-shadow: 0 0 0 5px rgba(139,145,136,.15); }
@keyframes status-pulse { 50% { opacity: .35; } }
.player-count { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.player-head { width: 18px; height: 18px; background: #d7aa73; border: 3px solid #543f27; box-shadow: inset 0 5px #6a482a; }

.hero-art { position: absolute; inset: 0; overflow: hidden; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #152017 0%, rgba(21,32,23,.84) 15%, rgba(21,32,23,.16) 58%, rgba(8,14,9,.15) 100%);
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 -160px 120px rgba(8,14,9,.62);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 55% center;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .8s ease, transform 5s linear;
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}
.slide-castle { object-position: 58% center; }
.slide-players { object-position: 55% center; }
.slide-garden-light { object-position: 62% center; }
.slide-garden { object-position: 58% center; }
.slide-lotus { object-position: 62% center; }
.slide-carrier { object-position: 58% center; }
.slide-modern { object-position: 65% center; }
.hero-dots {
  position: absolute;
  z-index: 7;
  right: 5vw;
  bottom: 32px;
  display: flex;
  gap: 10px;
}
.hero-dot {
  width: 28px;
  height: 8px;
  padding: 0;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(12,19,13,.55);
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,.45);
}
.hero-dot.active {
  background: var(--lime);
  border-color: var(--lime);
}
.scroll-cue { position: absolute; z-index: 6; bottom: 28px; left: 8vw; display: flex; gap: 10px; align-items: center; font-size: 11px; color: #9eab9c; }
.scroll-cue span { width: 2px; height: 38px; background: linear-gradient(var(--lime) 50%, transparent 50%); background-size: 2px 8px; }
.sky-blocks i { position: absolute; background: rgba(255,255,255,.025); width: 80px; height: 80px; transform: rotate(18deg); }
.sky-blocks i:nth-child(1){left:3%;top:22%}.sky-blocks i:nth-child(2){left:40%;top:65%;width:35px;height:35px}.sky-blocks i:nth-child(3){right:4%;top:8%;width:55px;height:55px}.sky-blocks i:nth-child(4){left:22%;bottom:3%}.sky-blocks i:nth-child(5){right:30%;top:20%;width:25px;height:25px}

.stats { display: grid; grid-template-columns: repeat(4,1fr); padding: 0 7vw; background: #20261f; color: white; border-top: 7px solid #4c7330; border-bottom: 7px solid #111711; }
.stats article { padding: 30px 3vw; border-right: 1px solid rgba(255,255,255,.12); display: flex; align-items: baseline; gap: 10px; }
.stats article:last-child { border-right: 0; }
.stats strong { font: 24px "Press Start 2P"; color: var(--lime); }
.stats span { font-size: 12px; color: #aab3a7; }

.section { padding: 120px 8vw; position: relative; }
.features {
  background:
    linear-gradient(90deg, rgba(74,64,42,.035) 1px, transparent 1px),
    linear-gradient(rgba(74,64,42,.035) 1px, transparent 1px),
    var(--cream);
  background-size: 32px 32px;
}
.section-heading { max-width: 670px; }
.section-heading h2 { margin: 20px 0; font-size: clamp(38px,4vw,62px); line-height: 1.25; letter-spacing: -.05em; }
.section-heading h2::after { content: ""; display: block; width: 84px; height: 8px; margin-top: 24px; background: var(--green); box-shadow: 12px 0 0 var(--dirt), 24px 0 0 var(--stone); }
.section-heading > p:last-child { color: #73816e; font-size: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 60px; }
.feature-card {
  min-height: 360px; padding: 36px; position: relative; background: var(--paper); border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 #d1cbb9; transition: transform .2s, box-shadow .2s;
}
.feature-card::after { content:""; position:absolute; inset: 8px; border: 1px dashed rgba(23,27,20,.12); pointer-events:none; }
.feature-card.featured::after { border-color: rgba(255,255,255,.13); }
.feature-card:hover { transform: translate(-3px,-3px); box-shadow: 12px 12px 0 #b8c58c; }
.feature-card.featured { color: white; background: var(--green-dark); box-shadow: 8px 8px 0 #8db449; }
.pixel-icon { width: 62px; height: 62px; display: grid; place-items: center; font-size: 30px; color: #fff; background: var(--green); border: 4px solid var(--ink); box-shadow: 4px 4px 0 #b5d267; }
.community { background: #d39747; }.shield { background: #537f9c; }
.card-number { position: absolute; right: 28px; top: 28px; font: 12px "Press Start 2P"; color: #a4aa9e; }
.feature-card h3 { margin: 36px 0 14px; font-size: 25px; }
.feature-card p { color: #6d7868; line-height: 1.8; font-size: 14px; }
.feature-card.featured p { color: #c0ccb9; }
.card-tags { position: absolute; bottom: 30px; display: flex; gap: 8px; }
.card-tags span { padding: 6px 9px; border: 1px solid currentColor; font-size: 10px; color: #87917f; }
.featured .card-tags span { color: #a9c490; }

.worlds { min-height: 720px; display: grid; grid-template-columns: .9fr 1.1fr; color: white; background: #172218; border-block: 9px solid #0e140e; }
.worlds-content { padding: 100px 7vw; }
.section-heading.light h2 { color: white; }
.world-tabs { margin-top: 50px; }
.world-tab {
  width: 100%; padding: 20px 12px; display: flex; align-items: center; gap: 20px; color: #92a092;
  text-align: left; border: 0; border-top: 1px solid rgba(255,255,255,.14); background: transparent; cursor: pointer;
}
.world-tab:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.world-tab > span { font: 10px "Press Start 2P"; }
.world-tab strong,.world-tab small { display: block; }
.world-tab strong { font-size: 19px; color: inherit; }.world-tab small { margin-top: 6px; }
.world-tab.active { color: var(--lime); background: linear-gradient(90deg,rgba(184,224,82,.12),transparent); }
.world-visual { position: relative; overflow: hidden; background: linear-gradient(#5b7871,#8ca67e 48%,#30422d 49%); transition: background .25s; box-shadow: inset 10px 0 #0d150e; }
.world-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px; }
.world-visual[data-active-world="nether"] { background: linear-gradient(#351a1c,#8b3d2d 48%,#321815 49%); }
.world-visual[data-active-world="end"] { background: linear-gradient(#211a36,#615578 48%,#1c1a28 49%); }
.moon { position: absolute; right: 15%; top: 12%; width: 72px; height: 72px; background: #e7e6c6; box-shadow: 0 0 30px rgba(231,230,198,.3); }
.mountain { position: absolute; bottom: 37%; background: #3b5141; clip-path: polygon(50% 0,100% 100%,0 100%); }
.mountain-back { width: 90%; height: 52%; left: -20%; opacity: .5; }
.mountain-front { width: 105%; height: 60%; right: -45%; background: #243a2b; }
.world-trees { position: absolute; bottom: 23%; inset-inline: 0; display: flex; justify-content: space-around; align-items: end; }
.world-trees i { display: block; width: 46px; height: 110px; background: #142a1c; clip-path: polygon(50% 0,75% 28%,62% 28%,90% 58%,72% 58%,100% 90%,60% 90%,60% 100%,40% 100%,40% 90%,0 90%,28% 58%,10% 58%,38% 28%,25% 28%); }
.world-trees i:nth-child(2){height:150px}.world-trees i:nth-child(3){height:80px}.world-trees i:nth-child(4){height:135px}.world-trees i:nth-child(5){height:95px}
.campfire { position: absolute; left: 45%; bottom: 20%; font-size: 55px; color: #ffc84c; text-shadow: 0 0 30px #f26c33; }
.world-caption { position: absolute; left: 40px; bottom: 35px; padding: 12px 18px; border-left: 3px solid var(--lime); background: rgba(0,0,0,.4); }
.world-caption span,.world-caption strong { display: block; }.world-caption span { color: #abb7a6; font-size: 10px; }.world-caption strong { margin-top: 4px; font-size: 18px; }

.join {
  background:
    linear-gradient(135deg, rgba(112,82,51,.07) 25%, transparent 25%) 0 0/32px 32px,
    #d8cfb7;
}
.join-panel { position: relative; min-height: 500px; padding: 65px; display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; color: white; background: #315b34; box-shadow: 12px 12px 0 #172817; }
.join-panel::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px; }
.join-copy,.join-steps { position: relative; z-index: 2; }
.join-copy h2 { margin: 20px 0; font-size: clamp(38px,4vw,58px); line-height: 1.25; }
.join-copy > p { color: #c1d3ba; }
.light-button { margin-top: 30px; min-width: 320px; justify-content: space-between; color: var(--ink); background: var(--paper); border-color: var(--paper); }
.light-button b { color: #5d872d; font-size: 12px; }
.join-steps { list-style: none; margin: 15px 0 0; padding: 0; }
.join-steps li { display: flex; gap: 20px; margin-bottom: 34px; }
.join-steps li > span { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; color: var(--ink); background: var(--lime); border: 3px solid var(--ink); font: 9px "Press Start 2P"; box-shadow: 4px 4px #172817; }
.join-steps strong { font-size: 19px; }.join-steps p { margin: 5px 0; color: #aec4aa; font-size: 13px; }
.join-cube { position: absolute; right: -70px; bottom: -75px; width: 220px; height: 220px; border: 24px solid rgba(255,255,255,.06); transform: rotate(18deg); }

footer { padding: 60px 8vw 30px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 35px; color: #bac1b8; background: #111811; }
.footer-brand { color: white; }.footer-links { display: flex; gap: 28px; font-size: 13px; }.footer-links a:hover { color: var(--lime); }
footer > small { grid-column: 1/-1; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-size: 10px; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: 30px; padding: 14px 22px; color: #142013; background: var(--lime); border: 3px solid #142013; box-shadow: 5px 5px #142013; font-weight: 700; transform: translate(-50%,100px); opacity: 0; transition: .3s; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.revealed { opacity: 1; transform: translateY(0); transition: opacity .45s steps(4,end), transform .45s steps(4,end); }

@media (max-width: 900px) {
  .site-header { height: 70px; }
  .menu-button { display: block; }
  .nav-links { position: absolute; top: 70px; left: 0; right: 0; padding: 25px; display: none; flex-direction: column; background: #111911; }
  .nav-links.open { display: flex; }
  .hero { height: auto; min-height: 850px; }
  .hero-content { width: auto; margin: 0 6vw; padding-top: 140px; }
  .hero-art { inset: 0; height: auto; opacity: .72; }
  .hero-art::before { background: linear-gradient(180deg, rgba(21,32,23,.88) 0%, rgba(21,32,23,.3) 55%, rgba(8,14,9,.52) 100%); }
  .hero-slide { object-position: center; }
  .slide-players { object-position: 54% center; }
  .slide-carrier { object-position: 62% center; }
  .slide-modern { object-position: 68% center; }
  .hero-dots { right: 6vw; bottom: 20px; }
  .server-strip { margin-top: 30px; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .stats article:nth-child(2) { border-right: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .worlds { grid-template-columns: 1fr; }
  .world-visual { min-height: 550px; }
  .join-panel { grid-template-columns: 1fr; gap: 50px; padding: 45px 35px; }
  footer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  footer > small { grid-column: auto; width: 100%; }
}

@media (max-width: 560px) {
  .hero { min-height: 880px; }
  .hero h1 { font-size: 43px; }
  .hero-copy { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .pixel-button { width: 100%; justify-content: center; }
  .server-strip { align-items: flex-start; flex-wrap: wrap; }
  .player-count { width: 100%; margin-left: 25px; }
  .stats { padding: 0; }
  .stats article { padding: 23px 16px; flex-direction: column; }
  .stats strong { font-size: 17px; }.stats span { font-size: 10px; }
  .section { padding: 85px 5vw; }
  .feature-card { padding: 28px; }
  .worlds-content { padding: 85px 6vw; }
  .world-visual { min-height: 430px; }
  .join { padding-inline: 4vw; }
  .join-panel { padding: 50px 22px; }
  .light-button { min-width: 0; }
  .light-button b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}