:root{
  --dirt:url("assets/tex-dirt.png");
  --grass-top:url("assets/tex-grass-top.png");
  --grass-side:url("assets/tex-grass-side.png");
  --stone:url("assets/tex-stone.png");
  --cobble:url("assets/tex-cobble.png");
  --planks:url("assets/tex-planks.png");
  --btn:url("assets/tex-btn.png");
  --btn-h:url("assets/tex-btn-h.png");
  --pano:url("assets/tex-pano.png");
  --inv:url("assets/tex-inv.png");
  --max:1060px;
  --ink:#1e1e1e;
  --paper:#f5f5f5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  font-size:16px;line-height:1.7;
  background:#1b1b1b;
  overflow-x:hidden;
}
/* real MC panorama backdrop */
.pano{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--pano);
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) brightness(.92);
  transform:scale(1.08);
  animation:panoDrift 40s ease-in-out infinite alternate;
}
@keyframes panoDrift{
  from{transform:scale(1.08) translateX(-1.5%)}
  to{transform:scale(1.12) translateX(1.5%)}
}
.pano-dim{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45) 50%,rgba(0,0,0,.55));
}
.wrap{position:relative;z-index:1;width:min(var(--max),calc(100% - 1.25rem));margin:0 auto}

/* inventory-style container */
.inv-panel{
  background-color:#c6c6c6;
  background-image:var(--inv);
  background-size:100% 100%;
  background-repeat:no-repeat;
  border:0;
  image-rendering:pixelated;
  color:#3f3f3f;
  box-shadow:0 10px 0 rgba(0,0,0,.35);
}
/* solid MC gray panel (when inv stretch looks odd) */
.mc-box{
  background:#c6c6c6;
  color:#3f3f3f;
  border:4px solid #000;
  box-shadow:
    inset 4px 4px 0 #fff,
    inset -4px -4px 0 #555,
    0 8px 0 rgba(0,0,0,.28);
}
.mc-box-dark{
  background:#2c2c2c;
  color:#f0f0f0;
  border:4px solid #000;
  box-shadow:inset 3px 3px 0 #5a5a5a, inset -3px -3px 0 #111, 0 8px 0 rgba(0,0,0,.35);
}
.tex-dirt{
  background-image:var(--dirt);
  background-size:32px 32px;
  image-rendering:pixelated;
}
.tex-stone{
  background-image:var(--stone);
  background-size:32px 32px;
  image-rendering:pixelated;
}
.tex-planks{
  background-image:var(--planks);
  background-size:32px 32px;
  image-rendering:pixelated;
}
.tex-cobble{
  background-image:var(--cobble);
  background-size:32px 32px;
  image-rendering:pixelated;
}
.grass-bar{
  height:40px;
  border-top:4px solid #1a1a1a;
  border-bottom:4px solid #1a1a1a;
  background:
    var(--grass-top) 0 0 / 32px 20px repeat-x,
    var(--dirt) 0 20px / 32px 20px repeat-x;
  image-rendering:pixelated;
  box-shadow:0 4px 0 rgba(0,0,0,.25);
  position:relative;z-index:1;
}

/* top bar */
.nav{
  position:sticky;top:0;z-index:40;
  background-image:var(--stone);
  background-size:32px 32px;
  image-rendering:pixelated;
  border-bottom:4px solid #000;
  box-shadow:0 6px 0 rgba(0,0,0,.25);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem 0}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff}
.brand img{width:42px;height:42px;image-rendering:auto;border:3px solid #000;box-shadow:2px 2px 0 #000;background:#000}
.brand span{
  font-family:"Press Start 2P",monospace;font-size:12px;color:#ffaa00;
  text-shadow:2px 2px 0 #3f3f00;
}
.nav-links{display:flex;flex-wrap:wrap;gap:.35rem}
.nav-links a{
  text-decoration:none;color:#f0f0f0;font-weight:700;font-size:13px;
  padding:.55rem .85rem;min-height:36px;
  background-image:var(--btn);background-size:100% 100%;background-repeat:no-repeat;
  image-rendering:pixelated;border:0;
  text-shadow:1px 1px 0 #000;
}
.nav-links a:hover{background-image:var(--btn-h);color:#ffffa0}
@media(max-width:860px){.nav-links{display:none}}

.hero{padding:1.75rem 0 1.25rem;display:grid;grid-template-columns:1.15fr .85fr;gap:1rem}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.hero-main,.hero-card{padding:1.2rem 1.25rem}
.eyebrow{
  display:inline-block;margin-bottom:.85rem;padding:.45rem .6rem;
  font-family:"Press Start 2P",monospace;font-size:9px;line-height:1.5;
  color:#55ff55;background:#1a1a1a;border:3px solid #000;
  text-shadow:1px 1px 0 #003300;
}
h1{
  margin:0 0 .85rem;font-size:clamp(1.55rem,3.6vw,2.15rem);line-height:1.4;font-weight:800;
  color:#111;text-shadow:2px 2px 0 rgba(255,255,255,.45);
}
h1 em{font-style:normal;color:#2d6b1f}
.lead{margin:0 0 1rem;color:#222;font-size:1.02rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:.9rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:140px;min-height:40px;padding:.7rem 1.1rem;
  text-decoration:none;font-weight:800;font-size:.95rem;color:#fff;
  background-image:var(--btn);background-size:100% 100%;background-repeat:no-repeat;
  image-rendering:pixelated;border:0;cursor:pointer;
  text-shadow:1px 1px 0 #000;
}
.btn:hover{background-image:var(--btn-h);color:#ffffa0}
.btn-ghost{color:#f0f0f0}
.meta-row{display:flex;flex-wrap:wrap;gap:.45rem .85rem;font-size:.9rem;color:#222}
.meta-row strong{color:#000}

.hero-logo{width:92px;height:92px;display:block;margin-bottom:.9rem;image-rendering:auto;border:4px solid #000;box-shadow:4px 4px 0 #000;background:#000}
.hero-card h2{
  margin:0 0 .55rem;font-family:"Press Start 2P","Microsoft YaHei UI",monospace;
  font-size:12px;line-height:1.75;color:#ffaa00;text-shadow:2px 2px 0 #3f3f00;
}
.hero-card p{margin:0;color:#ddd;font-size:.95rem}
.ticker{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font-size:12px;font-weight:800;padding:.35rem .55rem;color:#111;
  background-image:var(--planks);background-size:16px 16px;image-rendering:pixelated;
  border:3px solid #000;box-shadow:inset 1px 1px 0 rgba(255,255,255,.25);
}

section{padding:1.6rem 0}
.section-label{
  display:inline-block;margin-bottom:.65rem;padding:.4rem .55rem;
  font-family:"Press Start 2P",monospace;font-size:9px;color:#55ff55;
  background:#111;border:3px solid #000;text-shadow:1px 1px 0 #003300;
}
h2.section-title{
  margin:0 0 .7rem;display:inline-block;padding:.4rem .6rem;
  font-size:clamp(1.25rem,2.8vw,1.7rem);font-weight:800;color:#111;
  background:rgba(198,198,198,.95);border:3px solid #000;
  box-shadow:inset 2px 2px 0 #fff, inset -2px -2px 0 #555;
}
.section-intro{
  margin:0 0 1rem;max-width:42rem;padding:.65rem .8rem;color:#111;
  background:rgba(198,198,198,.92);border:3px solid #000;
  box-shadow:inset 2px 2px 0 #fff, inset -2px -2px 0 #555;
}

.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:720px){.q-grid{grid-template-columns:1fr}}
.q-card{padding:1rem 1.05rem;opacity:0;transform:translateY(10px);transition:.35s ease}
.q-card.visible{opacity:1;transform:none}
.q-num{font-family:"Press Start 2P",monospace;font-size:9px;color:#5c3a1e;margin-bottom:.4rem}
.q-card h3{margin:0 0 .35rem;font-size:1.05rem}
.q-card p{margin:0;color:#333;font-size:.93rem}
.bridge{
  margin-top:1rem;padding:1rem 1.05rem;color:#fff;
  background-image:var(--grass-side);background-size:32px 32px;image-rendering:pixelated;
  border:4px solid #000;text-shadow:1px 1px 0 #000;
  box-shadow:inset 0 0 0 9999px rgba(0,0,0,.28), 0 6px 0 rgba(0,0,0,.3);
}
.bridge strong{color:#ffff55}

.step{
  display:grid;grid-template-columns:60px 1fr;gap:.75rem;
  padding:.95rem 1rem;margin-bottom:.7rem;opacity:0;transform:translateX(-8px);
}
.step.visible{opacity:1;transform:none;transition:.4s ease}
.step-index{
  width:52px;height:52px;display:grid;place-items:center;
  font-family:"Press Start 2P",monospace;font-size:14px;color:#ffaa00;
  background:#1a1a1a;border:3px solid #000;box-shadow:inset 2px 2px 0 #555;
}
.step h3{margin:.05rem 0 .3rem;font-size:1.05rem}
.step p{margin:0;color:#1f1f1f}
code.inline-code{
  font-family:Consolas,"Courier New",monospace;font-size:.88em;
  background:#1a1a1a;color:#55ff55;padding:.05rem .35rem;border:2px solid #000;
}
.cmd{
  margin-top:.65rem;padding:.75rem .85rem;background:#111;color:#e8e8e8;
  border:3px solid #000;font-family:Consolas,"Courier New",monospace;font-size:.84rem;
  line-height:1.55;overflow-x:auto;box-shadow:inset 2px 2px 0 #333;
}
.cmd .c{color:#55ff55}.cmd .g{color:#ffff55}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{padding:1rem}
.feat-icon{
  width:40px;height:40px;display:grid;place-items:center;margin-bottom:.65rem;
  background-image:var(--cobble);background-size:16px 16px;image-rendering:pixelated;
  border:3px solid #000;color:#fff;font-size:1.05rem;text-shadow:1px 1px 0 #000;
}
.feat h3{margin:0 0 .3rem;font-size:1.02rem}.feat p{margin:0;color:#2a2a2a;font-size:.92rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.panel{padding:1.05rem}
.panel h3{margin:0 0 .65rem;font-size:1.12rem}
.band{display:flex;gap:.4rem;margin:.85rem 0}
.band span{
  flex:1;text-align:center;padding:.6rem .2rem;font-size:.8rem;font-weight:800;
  border:3px solid #000;color:#111;
}
.band .l{background-image:var(--grass-top);background-size:16px 16px;image-rendering:pixelated}
.band .m{background-image:var(--planks);background-size:16px 16px;image-rendering:pixelated}
.band .h{background-image:var(--cobble);background-size:16px 16px;image-rendering:pixelated;color:#fff;text-shadow:1px 1px 0 #000}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:720px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;overflow:hidden}
.gallery img{display:block;width:100%;height:auto;image-rendering:auto;border-bottom:3px solid #000}
.gallery figcaption{padding:.7rem .8rem;font-size:.88rem;color:#222;background:#c6c6c6}
.gallery figcaption strong{display:block;color:#000;margin-bottom:.15rem}
.gallery .wide{grid-column:1/-1}

.author-block{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1.1rem}
@media(max-width:560px){.author-block{grid-template-columns:1fr;justify-items:center;text-align:center}}
.author-block img{width:96px;height:96px;object-fit:cover;border:4px solid #000;box-shadow:4px 4px 0 #000;image-rendering:auto}
.author-block h3{
  margin:0 0 .35rem;font-family:"Press Start 2P","Microsoft YaHei UI",monospace;
  font-size:13px;line-height:1.65;color:#ffaa00;text-shadow:2px 2px 0 #3f3f00;
}
.author-block p{margin:0;color:#ccc;font-size:.95rem}
.qq-box{
  margin-top:.85rem;display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;background:#111;border:3px solid #ffaa00;color:#ffaa00;
  font-family:Consolas,monospace;font-size:.95rem;
}
.qq-box button{
  border:0;min-height:32px;padding:.3rem .75rem;cursor:pointer;font-weight:800;color:#fff;
  background-image:var(--btn);background-size:100% 100%;image-rendering:pixelated;
  text-shadow:1px 1px 0 #000;
}
.qq-box button:hover{background-image:var(--btn-h);color:#ffffa0}
.note{margin-top:.9rem;padding:.8rem .95rem;background:#1a1a1a;color:#eee;border:3px solid #000;border-left:8px solid #ffaa00}
ul.clean{margin:0;padding-left:1.15rem;color:#1f1f1f}ul.clean li{margin:.28rem 0}

footer{
  position:relative;z-index:1;margin-top:1rem;padding:1.2rem 0 2rem;color:#f0e6d2;
  background-image:var(--dirt);background-size:32px 32px;image-rendering:pixelated;
  border-top:6px solid #000;
  box-shadow:inset 0 0 0 9999px rgba(0,0,0,.35);
}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.7rem;font-size:.9rem}
.foot-row strong{color:#ffaa00;text-shadow:1px 1px 0 #000}

.reveal{opacity:0;transform:translateY(10px);transition:.4s ease}
.reveal.visible{opacity:1;transform:none}
.toast{
  position:fixed;bottom:1rem;left:50%;transform:translateX(-50%) translateY(14px);
  background:#111;color:#55ff55;border:3px solid #000;padding:.6rem .9rem;
  font-family:"Press Start 2P",monospace;font-size:10px;opacity:0;pointer-events:none;z-index:100;
  text-shadow:1px 1px 0 #003300;transition:.2s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}