: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: clamp(14px,2vw,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(820px, 62vw); 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; flex-wrap: wrap; gap: 15px; margin-top: 36px; }
.hero-actions .pixel-button { white-space:nowrap; }
.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; }
.pixel-button.guide-button { border-color: #a8d973; color: #d8f6b8; background: rgba(42,74,35,.55); }
.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-community { width:min(590px,100%); margin-top:10px; padding:11px 14px; display:flex; align-items:center; gap:12px; color:white; text-align:left; background:rgba(18,43,54,.58); border:1px solid rgba(143,197,229,.55); border-left:3px solid #8fc5e5; backdrop-filter:blur(8px); cursor:pointer; transition:background .2s,transform .2s; }
.hero-community:hover { background:rgba(47,91,113,.78); transform:translateX(3px); }
.hero-community-badge { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; color:#173044; background:#8fc5e5; border:2px solid #132632; font:7px "Press Start 2P"; box-shadow:3px 3px rgba(6,18,24,.65); }
.hero-community > span:nth-child(2) { min-width:0; }.hero-community small,.hero-community strong { display:block; }.hero-community small { color:#abc7d5; font-size:10px; }.hero-community strong { margin-top:2px; letter-spacing:.08em; }
.hero-community b { margin-left:auto; color:#c9e9f8; font-size:11px; }

.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; }
.farming { background: #7c9f42; }.economy { background: #ad7934; }.handbook { background: #4d7651; }
.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; }
.guide-card { background: #e7e0c9; }
.card-link { position: absolute; z-index: 2; bottom: 32px; color: var(--green-dark); font-weight: 900; border-bottom: 2px solid var(--green); }

.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="home"] { background: linear-gradient(#698988,#9eb383 48%,#40533a 49%); }
.world-visual[data-active-world="resource"] { background: linear-gradient(#846e59,#ba9b70 48%,#4a4436 49%); }
.world-visual[data-active-world="rpg"] { 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-guide-link { display: block; width: max-content; margin-top: 18px; color: #d5e8cb; font-weight: 700; border-bottom: 1px solid rgba(213,232,203,.5); }
.community-invite { width:min(540px,100%); margin-top:25px; padding:16px; display:grid; grid-template-columns:58px 1fr auto; gap:16px; align-items:center; position:relative; color:white; background:linear-gradient(135deg,rgba(12,27,16,.76),rgba(31,61,44,.62)); border:2px solid #8fc5e5; box-shadow:6px 6px #172817; }
.community-invite::after { content:""; position:absolute; inset:6px; border:1px dashed rgba(180,221,240,.22); pointer-events:none; }
.community-badge { width:56px; height:56px; display:grid; place-items:center; color:#173044; background:#8fc5e5; border:3px solid #142315; box-shadow:4px 4px #172817; font:10px "Press Start 2P"; }
.community-copy { min-width:0; }.community-copy small,.community-copy strong,.community-copy p { display:block; }
.community-copy small { color:#bcd7e4; font-size:10px; letter-spacing:.08em; }.community-copy strong { margin-top:4px; color:white; font:18px "Press Start 2P"; }.community-copy p { margin:7px 0 0; color:#b8cbb7; font-size:11px; line-height:1.55; }
.community-invite button { z-index:2; padding:10px 12px; color:#173044; background:#a8d9f2; border:2px solid #142315; box-shadow:3px 3px #172817; cursor:pointer; font-size:12px; font-weight:900; }
.community-invite button:hover { color:white; background:#4f8caf; transform:translate(2px,2px); box-shadow:1px 1px #172817; }
.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); }

/* Player guide */
.guide-page { background: var(--paper); }
.guide-header { position: absolute; background: rgba(14,22,15,.76); backdrop-filter: blur(12px); }
.guide-hero {
  min-height: 680px; padding: 160px 8vw 100px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  gap: 8vw; align-items: center; color: white; overflow: hidden; position: relative;
  background: linear-gradient(90deg,rgba(11,18,12,.96),rgba(19,38,22,.78) 60%,rgba(37,67,39,.45)), url("assets/minetown-garden-light.png") center/cover;
  border-bottom: 8px solid #101710;
}
.guide-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px; }
.guide-hero-copy,.guide-hero-card { min-width:0; position: relative; z-index: 2; }
.guide-kicker { margin: 26px 0 0; color: #b7c8b1; font-size: 15px; font-weight: 700; letter-spacing: .22em; }
.guide-hero h1 { max-width: 850px; margin: 14px 0 25px; font-size: clamp(48px,6vw,82px); line-height:1.15; letter-spacing:-.055em; text-shadow:4px 4px #080c08; }
.guide-hero h1 em { color:#91cf49; font-style:normal; text-shadow:5px 5px #2b4e21; }
.guide-hero-copy > p:last-of-type { max-width: 720px; color:#cad5c6; font-size:17px; line-height:1.9; }
.guide-hero-card { width:100%; min-height:360px; padding:38px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:end; gap:14px; color:var(--ink); background:rgba(247,242,223,.94); border:4px solid #172218; box-shadow:12px 12px 0 rgba(8,14,9,.72); }
.guide-hero-card::before { content:""; position:absolute; inset:9px; border:1px dashed rgba(23,27,20,.2); }
.guide-card-label { position:absolute; top:32px; left:38px; font:9px "Press Start 2P"; color:#708069; }
.guide-hero-card > strong { grid-column:1/-1; font:76px/1 "Press Start 2P"; color:var(--green-dark); }
.guide-hero-card > small { grid-column:1/-1; margin-bottom:25px; font-size:14px; font-weight:700; }
.guide-hero-card div { padding-top:14px; border-top:3px solid var(--ink); }
.guide-hero-card b,.guide-hero-card div span { display:block; }
.guide-hero-card b { font:17px "Press Start 2P"; color:var(--green); }
.guide-hero-card div span { margin-top:8px; font-size:11px; color:#717b6d; }

.guide-shell { max-width:1600px; margin:auto; padding:0 6vw 110px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:6vw; align-items:start; }
.guide-sidebar { position:sticky; top:24px; margin-top:80px; z-index:12; }
.toc-toggle { display:none; }
.guide-toc { padding:26px 22px; background:#172218; color:#9fac9d; border:3px solid #0d140e; box-shadow:7px 7px 0 #9b957f; }
.guide-toc > p { margin:0 0 19px; padding-bottom:16px; color:#bddf95; border-bottom:1px solid rgba(255,255,255,.12); font:8px "Press Start 2P"; }
.guide-toc a { display:flex; gap:12px; align-items:center; padding:10px 8px; position:relative; font-size:13px; transition:.15s; }
.guide-toc a span { color:#6f806c; font:7px "Press Start 2P"; }
.guide-toc a:hover,.guide-toc a.active { color:#b6e675; background:rgba(128,189,62,.11); transform:translateX(3px); }
.guide-toc a.active::after { content:""; position:absolute; right:5px; width:5px; height:5px; background:var(--lime); box-shadow:5px 0 rgba(128,189,62,.35); }
.guide-content { min-width:0; }
.guide-section { padding:100px 0 20px; scroll-margin-top:20px; }
.chapter-heading { display:flex; align-items:center; gap:25px; padding-bottom:25px; border-bottom:3px solid var(--ink); }
.chapter-heading > span { min-width:75px; color:var(--green); font:38px "Press Start 2P"; text-shadow:3px 3px #c5d8a2; }
.chapter-heading p,.subheading > p { margin:0 0 7px; color:#75836e; font:8px "Press Start 2P"; }
.chapter-heading h2 { margin:0; font-size:clamp(30px,3vw,48px); letter-spacing:-.04em; }
.section-lead { max-width:900px; margin:28px 0 38px; color:#596455; font-size:16px; line-height:1.9; }
.guide-section code { padding:3px 7px; color:#315a28; background:#dfe8cc; border:1px solid #9caf85; font:600 13px/1.5 Consolas,monospace; }

.server-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.server-grid article { min-height:220px; padding:28px; position:relative; background:#eee8d4; border:2px solid var(--ink); box-shadow:6px 6px #d1cbb9; }
.server-grid article > span,.life-grid article > span { color:#74836d; font:8px "Press Start 2P"; }
.server-grid h3 { margin:18px 0 10px; font-size:23px; }.server-grid p { margin:0 0 25px; color:#687363; line-height:1.7; }
.command-chip { padding:7px 10px; color:#d8efba; background:#29492b; border:2px solid #142315; cursor:pointer; font:600 12px Consolas,monospace; box-shadow:3px 3px #9ca88b; }
.command-chip:hover { background:var(--green); }
.guide-notice { margin:28px 0; padding:20px 24px; display:grid; grid-template-columns:125px 1fr; gap:20px; border:2px solid var(--ink); box-shadow:5px 5px #c4beaa; }
.guide-notice b { font-size:14px; }.guide-notice p { margin:0; line-height:1.7; }
.guide-notice.warning { background:#f0d39c; }.guide-notice.tip { background:#dce9c0; }

.route-list { margin-top:35px; display:grid; gap:12px; }
.route-list article { padding:20px 24px; display:grid; grid-template-columns:55px 1fr; gap:20px; align-items:center; background:#ece6d2; border:2px solid var(--ink); }
.route-list article > b { color:var(--green); font:15px "Press Start 2P"; }.route-list h3 { margin:0 0 5px; }.route-list p { margin:0; color:#697464; line-height:1.7; }
.subsection-anchor { padding-top:70px; scroll-margin-top:30px; }.subheading { position:relative; margin-bottom:25px; }.subheading h3 { margin:5px 0; font-size:30px; }.subheading > span { position:absolute; right:0; bottom:7px; color:#75816e; font-size:12px; }
.command-groups { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.command-groups article { padding:24px; background:#172218; border:3px solid #0f170f; box-shadow:6px 6px #aaa490; }
.command-groups h4 { margin:0 0 16px; color:#dce8d5; font-size:17px; }
.command-row { width:100%; padding:10px 0; display:flex; justify-content:space-between; gap:12px; color:#9eaa9a; text-align:left; border:0; border-top:1px solid rgba(255,255,255,.1); background:none; cursor:pointer; }
.command-row:hover span { color:#d8e9ce; }.command-row code { color:#b8e381; background:none; border:0; padding:0; }.command-row span { font-size:12px; }

.class-grid { margin-top:35px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.class-grid article { padding:28px; background:#eee8d4; border:2px solid var(--ink); box-shadow:6px 6px #c9c3ae; }
.class-grid article.class-featured { color:white; background:var(--green-dark); box-shadow:6px 6px #83a84c; }.class-grid article.class-featured p,.class-grid article.class-featured small { color:#bdcdb8; }
.class-type { color:var(--green); font:8px "Press Start 2P"; }.class-grid h3 { margin:18px 0 8px; font-size:25px; }.class-grid p { min-height:50px; color:#687363; font-size:13px; line-height:1.7; }
.talent-bars { margin:25px 0; }.talent-bars label { margin:12px 0; display:grid; grid-template-columns:40px 1fr 25px; gap:8px; align-items:center; font-size:11px; }.talent-bars i { height:8px; background:linear-gradient(90deg,var(--lime) var(--value),rgba(120,130,115,.2) var(--value)); border:1px solid currentColor; }.talent-bars b { text-align:right; }.class-grid small { color:#74806f; }
.rarity-line { margin:35px 0; padding:18px; display:flex; flex-wrap:wrap; gap:8px; background:#172218; }.rarity-line span,.rarity-line strong { padding:8px 12px; color:#cbd5c7; border:1px solid #697565; font-size:12px; }.rarity-line span:nth-child(2){color:#9ccc72}.rarity-line span:nth-child(3){color:#6eadd3}.rarity-line span:nth-child(4){color:#ae83df}.rarity-line span:nth-child(5){color:#e7ad4d}.rarity-line span:nth-child(6){color:#e86b5d}.rarity-line strong{color:#f0d47e;border-color:#c29c43}
.forge-flow { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }.forge-flow article { padding:22px; position:relative; background:#eee8d4; border:2px solid var(--ink); }.forge-flow article > b { color:#8c9b83; font:10px "Press Start 2P"; }.forge-flow article:not(:last-child)::after { content:"›"; position:absolute; right:-12px; top:50%; z-index:2; width:20px; height:25px; color:white; background:var(--green); text-align:center; font-weight:900; }.forge-flow h3 { min-height:48px; margin:18px 0 7px; font-size:18px; }.forge-flow p { min-height:150px; color:#687363; font-size:13px; line-height:1.7; }.forge-flow code { display:block; font-size:10px; }

.dungeon-list { margin:35px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.dungeon-list article { min-height:230px; padding:27px; color:white; background:linear-gradient(145deg,#1c291d,#29432b); border:3px solid #101810; box-shadow:6px 6px #939b79; }.dungeon-list article > span { color:#b7dc88; font:8px "Press Start 2P"; }.dungeon-list h3 { margin:22px 0 10px; font-size:21px; }.dungeon-list p { color:#b9c4b6; line-height:1.7; }.dungeon-list small { color:#d7bd75; }
.difficulty-table { border:2px solid var(--ink); }.difficulty-table > div { display:grid; grid-template-columns:1fr 1.5fr .7fr .7fr 1.5fr; }.difficulty-table span,.difficulty-table strong { padding:13px 15px; border-right:1px solid rgba(23,27,20,.18); }.difficulty-table > div:not(:last-child) { border-bottom:1px solid rgba(23,27,20,.25); }.difficulty-table .table-head { color:#d7e2d4; background:#253626; font-weight:700; }.affix-cloud { margin-top:25px; display:flex; flex-wrap:wrap; gap:10px; }.affix-cloud span { padding:9px 15px; color:#e9d9a7; background:#554326; border:2px solid #261f15; box-shadow:3px 3px #c7c0ac; font-weight:700; }

.contribution-grid { margin:35px 0; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }.contribution-grid article { padding:22px 14px; text-align:center; background:#eee8d4; border:2px solid var(--ink); }.contribution-grid b { width:45px; height:45px; margin:auto; display:grid; place-items:center; color:white; background:var(--green); border:3px solid var(--ink); box-shadow:3px 3px #b5c593; }.contribution-grid h3 { margin:20px 0 6px; font-size:16px; }.contribution-grid p { margin:0; color:#737d6e; font-size:12px; line-height:1.5; }
.life-grid,.home-grid { margin-top:35px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.life-grid article,.home-grid article { padding:30px; background:#eee8d4; border:2px solid var(--ink); box-shadow:6px 6px #c9c3ae; }.life-grid h3,.home-grid h3 { margin:20px 0 12px; font-size:22px; }.life-grid p,.home-grid p { min-height:130px; color:#687363; line-height:1.8; font-size:14px; }.life-grid article div { display:flex; flex-wrap:wrap; gap:6px; }
.economy-layout { margin-top:35px; display:grid; grid-template-columns:.75fr 1.25fr; gap:25px; }.quest-stack { display:grid; gap:10px; }.quest-stack article { padding:18px 22px; color:white; background:#2b482e; border:2px solid #152416; }.quest-stack p { margin:5px 0 0; color:#bdcbb9; font-size:13px; }.economy-copy { padding:35px; background:#eee8d4; border:2px solid var(--ink); box-shadow:7px 7px #c9c3ae; }.economy-copy h3 { margin-top:0; font-size:27px; }.economy-copy p { color:#63705e; line-height:1.9; }.economy-copy > div { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.home-icon { width:60px; height:60px; display:grid; place-items:center; color:white; background:#527e4b; border:4px solid var(--ink); box-shadow:4px 4px #a9c17f; font-size:29px; }.home-grid p { min-height:105px; }
.tips-list { margin:35px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; counter-reset:tip; }.tips-list li { padding:24px 24px 24px 75px; position:relative; background:#eee8d4; border:2px solid var(--ink); counter-increment:tip; }.tips-list li::before { content:counter(tip,decimal-leading-zero); position:absolute; left:21px; top:25px; color:var(--green); font:11px "Press Start 2P"; }.tips-list b { font-size:16px; }.tips-list p { margin:8px 0 0; color:#697464; line-height:1.7; }
.guide-finale { margin-top:80px; padding:60px; color:white; background:#315b34; border:4px solid #172817; box-shadow:10px 10px #b4ad99; }.guide-finale h2 { max-width:760px; margin:20px 0; font-size:clamp(34px,4vw,56px); }.guide-finale > p { color:#bfd1b9; }.guide-finale > div { margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }

@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; }
  .hero-community { width:min(590px,100%); }
  .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%; }
  .guide-header { position:absolute; }
  .guide-hero { grid-template-columns:1fr; padding-top:135px; }
  .guide-hero-card { min-height:260px; max-width:520px; }
  .guide-shell { grid-template-columns:1fr; padding-inline:5vw; }
  .guide-sidebar { position:sticky; top:8px; margin:20px 0 0; }
  .toc-toggle { width:100%; padding:15px 18px; display:flex; justify-content:space-between; color:white; background:#172218; border:3px solid #0d140e; box-shadow:5px 5px #9b957f; font-weight:700; cursor:pointer; }
  .toc-toggle span { color:#a9d375; }
  .guide-toc { display:none; position:absolute; inset:calc(100% + 7px) 0 auto; max-height:calc(100vh - 90px); overflow:auto; overscroll-behavior:contain; box-shadow:7px 7px #777363; }
  .guide-sidebar.open .guide-toc { display:block; }
  .guide-sidebar.open .toc-toggle { color:#c9ef98; border-color:var(--lime); box-shadow:5px 5px #5c713e; }
  .guide-section,.subsection-anchor { scroll-margin-top:82px; }
  .guide-content > .guide-section:first-child { padding-top:70px; }
  .server-grid,.command-groups { grid-template-columns:1fr 1fr; }
  .forge-flow { grid-template-columns:1fr; }
  .forge-flow article:not(:last-child)::after { content:"↓"; right:24px; top:auto; bottom:-14px; }
  .forge-flow p { min-height:0; }
  .contribution-grid { grid-template-columns:repeat(3,1fr); }
}

@media (min-width:901px) and (max-width:1200px) {
  .site-header { padding-inline:3vw; }
  .nav-links { gap:10px; font-size:12px; }
  .nav-cta { padding:9px 12px; }
  .hero-actions { gap:8px; }
  .hero-actions .pixel-button { padding:12px; font-size:12px; }
}

@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; }
  .hero-community b { display:none; }
  .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; }
  .community-invite { grid-template-columns:48px 1fr; padding:14px; gap:13px; }
  .community-badge { width:46px; height:46px; }
  .community-copy strong { font-size:14px; }
  .community-invite button { grid-column:1/-1; width:100%; }
  .guide-hero { min-height:0; padding:125px 5vw 75px; }
  .guide-hero h1 { font-size:42px; }
  .guide-hero-card { padding:30px 22px; min-height:250px; }
  .guide-card-label { left:22px; }.guide-hero-card > strong { font-size:58px; }
  .guide-shell { padding-bottom:75px; }
  .guide-section { padding-top:85px; }
  .chapter-heading { gap:14px; align-items:flex-start; }.chapter-heading > span { min-width:52px; font-size:24px; }.chapter-heading h2 { font-size:28px; }
  .server-grid,.command-groups,.class-grid,.dungeon-list,.life-grid,.home-grid,.tips-list,.economy-layout { grid-template-columns:1fr; }
  .guide-notice { grid-template-columns:1fr; gap:5px; }
  .route-list article { grid-template-columns:38px 1fr; padding:18px 15px; gap:10px; }
  .subheading > span { position:static; }.command-row { align-items:flex-start; }.command-row span { text-align:right; }
  .difficulty-table { overflow:auto; }.difficulty-table > div { min-width:650px; }
  .contribution-grid { grid-template-columns:repeat(2,1fr); }
  .guide-finale { padding:35px 24px; }
}

/* Motion and atmosphere */
.scroll-progress {
  position:fixed; z-index:250; inset:0 auto auto 0; width:100%; height:4px;
  transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--lime),#e7c34f,var(--lime));
  box-shadow:0 0 12px rgba(128,189,62,.72); pointer-events:none;
}
.cursor-glow {
  position:absolute; z-index:3; left:0; top:0; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(150,211,82,.13),rgba(150,211,82,.035) 42%,transparent 70%);
  transform:translate3d(calc(var(--glow-x,50vw) - 50%),calc(var(--glow-y,40vh) - 50%),0);
  pointer-events:none; mix-blend-mode:screen; transition:opacity .25s;
}
.pixel-particles { position:absolute; z-index:1; inset:0; overflow:hidden; pointer-events:none; }
.pixel-particles i {
  position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size);
  background:var(--particle-color,rgba(157,213,88,.48)); box-shadow:calc(var(--size) * .8) calc(var(--size) * .5) 0 rgba(255,255,255,.16);
  opacity:0; animation:pixel-drift var(--duration) steps(8,end) var(--delay) infinite;
}
@keyframes pixel-drift {
  0% { opacity:0; transform:translate3d(0,20px,0) rotate(0); }
  15%,70% { opacity:var(--opacity); }
  100% { opacity:0; transform:translate3d(var(--drift),-120px,0) rotate(90deg); }
}
.hero-content,.guide-hero-copy { transition:transform .35s ease-out; }
.hero.scene-active .hero-content { transform:translate3d(calc((var(--scene-x,.5) - .5) * -12px),calc((var(--scene-y,.5) - .5) * -8px),0); }
.guide-hero.scene-active .guide-hero-copy { transform:translate3d(calc((var(--scene-x,.5) - .5) * -10px),calc((var(--scene-y,.5) - .5) * -7px),0); }
.guide-hero.scene-active .guide-hero-card { transform:perspective(900px) rotateY(calc((var(--scene-x,.5) - .5) * 4deg)) rotateX(calc((.5 - var(--scene-y,.5)) * 3deg)); }
.guide-hero-card { transition:transform .35s ease-out,box-shadow .35s; }
.guide-hero-card:hover { box-shadow:18px 18px 0 rgba(8,14,9,.72); }

.pixel-button { overflow:hidden; isolation:isolate; }
.pixel-button::after {
  content:""; position:absolute; z-index:-1; inset:-60% auto -60% -45%; width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg);
  transition:left .48s steps(6,end); pointer-events:none;
}
.pixel-button:hover::after { left:118%; }
.nav-cta { position:relative; overflow:hidden; }
.nav-cta::after { content:""; position:absolute; left:-110%; bottom:0; width:100%; height:3px; background:var(--lime); transition:left .28s steps(5,end); }
.nav-cta:hover::after { left:0; }

.effect-card { position:relative; overflow:hidden; transform-style:preserve-3d; transition:transform .18s ease-out,box-shadow .2s; will-change:transform; }
.effect-card::before {
  content:""; position:absolute; z-index:4; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%),rgba(255,255,255,.2),transparent 34%);
  transition:opacity .2s;
}
.effect-card:hover::before { opacity:1; }
.feature-card.effect-card::after { z-index:6; }

.fx-enter { opacity:0; transform:translateY(28px); }
.fx-enter.fx-visible { opacity:1; transform:translateY(0); transition:opacity .5s steps(5,end),transform .5s steps(5,end); }
.chapter-heading.fx-enter { transform:translateX(-25px); }
.chapter-heading.fx-enter.fx-visible { transform:translateX(0); }
.chapter-heading.fx-visible::after {
  content:""; position:absolute; right:0; bottom:-3px; width:32%; height:3px; background:var(--lime);
  animation:heading-scan .6s steps(7,end) both;
}
.chapter-heading { position:relative; }
@keyframes heading-scan { from { transform:scaleX(0); transform-origin:left; } to { transform:scaleX(1); transform-origin:left; } }

.moon { animation:moon-hover 5s ease-in-out infinite; }
.world-trees i { transform-origin:center bottom; animation:tree-sway 4.2s steps(5,end) infinite; }
.world-trees i:nth-child(2n) { animation-delay:-1.7s; animation-direction:reverse; }
.campfire { animation:fire-flicker .72s steps(4,end) infinite; }
@keyframes moon-hover { 50% { transform:translateY(-9px); box-shadow:0 0 45px rgba(231,230,198,.42); } }
@keyframes tree-sway { 50% { transform:skewX(1.5deg); } }
@keyframes fire-flicker { 50% { transform:translateY(-4px) scale(.92,1.08); filter:brightness(1.2); } }
.status-dot:not(.checking):not(.offline):not(.unknown) { animation:online-pulse 1.8s steps(4,end) infinite; }
@keyframes online-pulse { 50% { box-shadow:0 0 0 8px rgba(142,218,60,.08),0 0 24px #8eda3c; } }
.brand-cube { animation:cube-breathe 4s steps(5,end) infinite; }
@keyframes cube-breathe { 50% { filter:brightness(1.18); transform:translateY(-1px); } }

@media (hover: none), (pointer: coarse) {
  .cursor-glow { display:none; }
  .effect-card { will-change:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .pixel-particles,.cursor-glow { display:none !important; }
  .hero-content,.guide-hero-copy,.guide-hero-card,.effect-card { transform:none !important; }
  .fx-enter { opacity:1; transform:none; }
}