@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --sky-top:#7EC0EE;
  --sky-bottom:#CDEAFB;
  --grass:#5D8A3A;
  --grass-dark:#3F6B27;
  --dirt:#7B5233;
  --paper:#F1F5EC;
  --ink:#182013;
  --ink-soft:#4A5540;
  --accent: var(--grass);
  --accent-dark: var(--grass-dark);
  --panel-bg: rgba(255,255,255,0.55);
  --stroke: rgba(24,32,19,0.15);
  --transition-slow: 700ms cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink);
  transition: background var(--transition-slow), color var(--transition-slow);
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}

.mono{font-family:'JetBrains Mono', monospace;}
.pixel{font-family:'Press Start 2P', monospace;}

::selection{background: var(--accent); color:#fff;}

a{color:inherit;}

/* ---------- pixel-art engine ---------- */
.pixel-art{
  display:grid;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
}
.pixel-art div{width:100%; height:100%;}

/* ---------- top nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 32px;
  background: rgba(24,18,28,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(255,255,255,0.12);
  transition: background var(--transition-slow), border-color var(--transition-slow);
}
.dark-theme nav{background: rgba(10,4,16,0.92);}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:22px; height:22px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);}
.brand-mark div{background:var(--accent); transition:background var(--transition-slow);}
.brand-mark-img{width:26px; height:26px; object-fit:contain; border-radius:50%; flex-shrink:0;}
.brand span{font-family:'Space Grotesk'; font-weight:700; font-size:15px; letter-spacing:0.02em; color:#fff;}
nav ul{list-style:none; display:flex; gap:28px;}
nav a{text-decoration:none; font-size:13px; font-weight:600; color:rgba(255,255,255,0.75); transition:color .2s;}
nav a:hover{color:var(--accent-dark);}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{width:22px; height:2px; background:#fff; transition:transform .25s, opacity .25s;}

@media(max-width:720px){
  nav{padding:14px 20px;}
  .nav-toggle{display:flex;}
  nav ul{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background: rgba(24,18,28,0.98); border-bottom:2px solid rgba(255,255,255,0.12);
    max-height:0; overflow:hidden; transition: max-height .3s ease;
  }
  .dark-theme nav ul{background: rgba(10,4,16,0.98);}
  nav ul.open{max-height:400px;}
  nav ul li{width:100%;}
  nav ul a{display:block; padding:14px 20px; border-top:1px solid rgba(255,255,255,0.1);}
  nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
  nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 120px 24px 80px;
  background-image: url('../images/hero-landscape.jpg');
  background-size: cover;
  background-position: center 65%;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(20,20,10,0.15) 0%, rgba(10,10,10,0.35) 100%);
  transition: background var(--transition-slow);
}
.dark-theme .hero::before{background: linear-gradient(180deg, rgba(18,10,23,0.55) 0%, rgba(8,4,16,0.75) 100%);}

.hero-content{position:relative; z-index:5; max-width:780px;}
.eyebrow{
  font-family:'JetBrains Mono'; font-size:12px; letter-spacing:0.15em; text-transform:uppercase;
  color: rgba(24,32,19,0.65); margin-bottom:22px; display:inline-block;
  background: rgba(255,255,255,0.5); padding:6px 14px; border:2px solid rgba(24,32,19,0.25);
}
.dark-theme .eyebrow{color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.25);}

.hero-logo{
  width: min(560px, 84vw);
  height:auto;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.4));
  margin-bottom:26px;
}

.unofficial-stamp{
  position:absolute; top:90px; right:6%;
  z-index:6;
  transform: rotate(-14deg);
  border: 3px solid #D6412E;
  border-radius: 10px;
  color:#D6412E;
  font-family:'JetBrains Mono'; font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding: 8px 14px;
  background: rgba(255,255,255,0.12);
  mix-blend-mode: normal;
  opacity:0.92;
  pointer-events:none;
  text-shadow: 0 0 2px rgba(0,0,0,0.15);
}
.unofficial-stamp::before,
.unofficial-stamp::after{
  content:''; position:absolute; border:1px solid #D6412E; border-radius:6px; inset:3px; opacity:.6;
}
@media(max-width:720px){
  .unofficial-stamp{top:100px; right:50%; transform:translateX(50%) rotate(-10deg); font-size:11px; padding:6px 10px;}
}
.hero p.lede{
  font-size:18px; line-height:1.6; color:rgba(24,32,19,0.85);
  max-width:560px; margin:0 auto 36px;
  background:rgba(255,255,255,0.35); padding:16px 20px; border-radius:2px;
}
.dark-theme .hero p.lede{color:rgba(255,255,255,0.85); background:rgba(0,0,0,0.25);}

/* dimension switcher */
.dim-switcher{
  position:relative; z-index:6; display:inline-flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px;
  background: rgba(255,255,255,0.4); padding:6px; border:2px solid rgba(24,32,19,0.25);
}
.dark-theme .dim-switcher{background:rgba(0,0,0,0.3); border-color:rgba(255,255,255,0.25);}
.dim-switcher button{
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:10px 16px; border:none; cursor:pointer; background:transparent; color:inherit;
  transition: background .25s, color .25s;
  font-weight:600;
}
.dim-switcher button.active{background: var(--accent); color:#fff;}

/* ---------- sections shared ---------- */
section{padding: 100px 24px; max-width:1120px; margin:0 auto;}
@media(max-width:720px){section{padding:64px 20px;}}
.section-head{margin-bottom:56px; max-width:640px;}
.section-head .tag{
  font-family:'JetBrains Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--accent-dark); display:block; margin-bottom:14px; transition:color var(--transition-slow);
}
.section-head h2{font-size: clamp(26px,4vw,38px); margin-bottom:14px;}
.section-head p{font-size:16px; line-height:1.65; color:var(--ink-soft);}
.dark-theme .section-head p, .dark-theme p{color:rgba(255,255,255,0.72);}
.dark-theme .section-head h2, .dark-theme h3{color:#fff;}

/* ---------- intro block ---------- */
.intro-grid{display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:center;}
@media(max-width:720px){.intro-grid{grid-template-columns:1fr; justify-items:center; text-align:center;}}
.intro-grid p{font-size:16px; line-height:1.75; margin-bottom:16px; color:var(--ink-soft);}
.stat-row{display:flex; gap:32px; margin-top:28px; flex-wrap:wrap;}
.stat{border-left:3px solid var(--accent); padding-left:14px;}
.stat .num{font-family:'Space Grotesk'; font-weight:700; font-size:28px; display:block;}
.stat .label{font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase; color:var(--ink-soft); letter-spacing:0.06em;}

/* ---------- modes ---------- */
.modes-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;}
.mode-card{
  background: var(--panel-bg); border:2px solid var(--stroke); padding:26px 22px;
  transition: transform .25s, border-color .3s, background var(--transition-slow);
}
.mode-card:hover{transform:translateY(-4px); border-color:var(--accent);}
.mode-card .icon{width:36px; height:36px; margin-bottom:16px;}
.mode-card h3{font-size:17px; margin-bottom:8px;}
.mode-card p{font-size:14px; line-height:1.55; color:var(--ink-soft);}

/* ---------- crafting ---------- */
.craft-wrap{display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start;}
@media(max-width:800px){.craft-wrap{grid-template-columns:1fr;}}
.craft-grid-visual{
  display:grid; grid-template-columns:repeat(3,64px); grid-template-rows:repeat(3,64px);
  gap:6px; background: var(--dirt); padding:12px; width:fit-content; max-width:100%; border:3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.2); margin:0 auto;
}
@media(max-width:420px){
  .craft-grid-visual{grid-template-columns:repeat(3,26vw); grid-template-rows:repeat(3,26vw);}
}
.craft-cell{background:var(--panel-bg); border:2px solid rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center;}
.item-list{display:flex; flex-direction:column; gap:18px;}
.item-row{display:flex; gap:16px; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--stroke);}
.item-row .icon-sm{width:28px; height:28px; flex-shrink:0; margin-top:2px;}
.item-row h4{font-size:15px; margin-bottom:4px;}
.item-row p{font-size:13px; color:var(--ink-soft); line-height:1.5;}
.rarity{display:flex; gap:3px; margin-top:6px;}
.rarity span{width:14px; height:5px; background:var(--stroke);}
.rarity span.on{background:var(--accent);}

/* ---------- mobs ---------- */
.mobs-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:18px;}
.mob-card{
  perspective:1000px; height:200px; cursor:pointer;
}
.mob-inner{
  position:relative; width:100%; height:100%; transition:transform .6s;
  transform-style:preserve-3d;
}
.mob-card:hover .mob-inner, .mob-card:focus-within .mob-inner{transform:rotateY(180deg);}
.mob-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border:2px solid var(--stroke); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:var(--panel-bg); padding:14px;
}
.mob-face.back{transform:rotateY(180deg); text-align:center;}
.mob-face h4{font-size:14px;}
.mob-icon-img{width:auto; height:72px; max-width:85%; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.25));}
.mob-face .tagline{font-family:'JetBrains Mono'; font-size:10px; text-transform:uppercase; color:var(--ink-soft);}
.mob-face.back p{font-size:12px; line-height:1.5; color:var(--ink-soft);}
.mob-type{font-family:'JetBrains Mono'; font-size:9px; text-transform:uppercase; letter-spacing:.08em; padding:3px 8px; border:1px solid currentColor;}

/* ---------- dimensions panels ---------- */
.dims-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:800px){.dims-grid{grid-template-columns:1fr;}}
.dim-panel{
  padding:32px 24px; border:2px solid var(--stroke); position:relative; overflow:hidden;
  transition: border-color .3s;
}
.dim-panel h3{font-size:18px; margin-bottom:10px;}
.dim-panel p{font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:14px;}
.dim-panel .badge{font-family:'JetBrains Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.7;}
.dim-panel.overworld{background:linear-gradient(160deg,#DDEFCB,#B9DDA0);}
.dim-panel.nether{background:linear-gradient(160deg,#3A1414,#1C0808); color:#F4D9C4;}
.dim-panel.nether p{color:#e3b9a6;}
.dim-panel.end{background:linear-gradient(160deg,#2A1B3D,#100a1c); color:#E6D9F5;}
.dim-panel.end p{color:#c7b3dd;}

/* ---------- timeline ---------- */
.timeline{position:relative; padding-left:32px;}
.timeline::before{content:''; position:absolute; left:6px; top:6px; bottom:6px; width:3px; background:var(--stroke);}
.tl-item{position:relative; padding-bottom:40px;}
.tl-item::before{
  content:''; position:absolute; left:-32px; top:4px; width:15px; height:15px; background:var(--accent);
  border:3px solid var(--paper); box-shadow:0 0 0 2px var(--accent);
}
.tl-item .year{font-family:'JetBrains Mono'; font-weight:600; font-size:13px; color:var(--accent-dark); margin-bottom:4px; display:block;}
.tl-item h4{font-size:16px; margin-bottom:6px;}
.tl-item p{font-size:14px; color:var(--ink-soft); line-height:1.55; max-width:540px;}

/* ---------- community ---------- */
.community-band{
  background: var(--ink); color:#fff; padding:80px 24px; margin-top:40px;
  transition: background var(--transition-slow);
}
.dark-theme .community-band{background:#0a0410;}
.community-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px;}
.community-inner .stat .num{color:#fff;}
.community-inner .stat .label{color:rgba(255,255,255,0.6);}
.community-inner .stat{border-left-color: var(--accent);}

/* ---------- footer ---------- */
footer{padding:48px 24px; text-align:center;}
footer p{font-family:'JetBrains Mono'; font-size:12px; color:var(--ink-soft);}

/* generic icon builder helper classes for pixel grids handled via inline style grid-template */