:root{
  --stone:#7f7f7f; --stone-dark:#3f3f3f; --stone-light:#c6c6c6;
  --grass:#6aaa40; --dirt:#866043; --gold:#ffaa00; --gold-dark:#c07a00;
  --ink:#1b1b1b; --panel:#c6c6c6; --slot:#8b8b8b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Minecraft","Courier New",ui-monospace,monospace;
  color:#e8e8e8; background:#2b2b2b; line-height:1.55;
  image-rendering:pixelated; font-size:17px;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA/UlEQVR42lXTMQ6EQAwDwDyVF1BSUVFRUfHfO3mlOfmK1WYTx0kcmPM8P9d1ffZ9/51t25bvOI5l3/e97Nw5cPGNwPu+y/k8zw8Qf96JxU6x2N4pMgFgDZmqKgccTMDxBceOfxoEiDAVQ5i4Tr2DTXzMqnKCEnPn6FL8bwQCJqFnJ2bAwYSIP2++IVyA5iZki6YbmzDKmC9J2lbFnG6d0mmNIJCDDGFvoMekW0hGZfP2NviR9kens+mZdNGtAls3QuKOBERWpgMrbUIfUexpAZ0W0azWZlO51xqJqJP+WHoTOuxtrA4k919GrAa3kIiWiNpqHZJsI8gl9/eS2Bczl3kxBisADgAAAABJRU5ErkJggg==");
  background-size:96px 96px; opacity:.55;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,12,.55),rgba(10,10,12,.85));
}
a{color:var(--gold); text-decoration:none}
a:hover{color:#ffd166; text-shadow:2px 2px 0 #000}

.wrap{max-width:1080px;margin:0 auto;padding:0 18px}

header.top{
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABA0lEQVR42qWTLQ7CQBCF9yBIVBWSA1QSBIIgEA2yB0AgEARBEAgEB0CiUEiutuRt8m1eJ7iKye787Jt5r9P06Of5dVwUe59X+XPd5O+9K6aY8rorp1N5mfznvs3psm1qgAIluCtPToDKyRSTpdN6WgOcKqSrAIj/m6QCeBG+gA7LyaCBjInrBCoEEXTApAE+9AApE9x2s4oORwdRAwcGADoVIHbHV56HPjrNUtc2eYwVDaLCvhNMSC6KXCjEL8CpAkT2h65TksouogslnwY8AqxqwKa5SN4JClCMNJMWBb6+53SI/4pPKqDBIsWfxTfRaZErE4gCDkL5VoqCj89k3EfvwQ9FfV/9sZJh9AAAAABJRU5ErkJggg==") repeat; background-size:64px 64px;
  border-bottom:6px solid #2a1c10; position:sticky; top:0; z-index:50;
  box-shadow:0 6px 0 rgba(0,0,0,.35);
}
.top .wrap{display:flex;align-items:center;gap:18px;padding:10px 18px;flex-wrap:wrap}
.brand{font-size:20px;font-weight:700;letter-spacing:2px;color:#fff;
  text-shadow:3px 3px 0 #000; text-transform:uppercase}
.top nav{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.top nav a{
  background:#8b8b8b;color:#fff;padding:7px 12px;font-size:13px;letter-spacing:1px;
  border:3px solid; border-color:#c6c6c6 #373737 #373737 #c6c6c6;
  text-shadow:2px 2px 0 #000; text-transform:uppercase;
}
.top nav a:hover{background:#a0a0a0;color:#fff}
.top nav a.active{background:#5a9e3a;border-color:#8ed05f #2c5a17 #2c5a17 #8ed05f}

h1,h2,h3{font-family:inherit;text-transform:uppercase;letter-spacing:2px;line-height:1.2}
h1{font-size:clamp(26px,5vw,46px);color:var(--gold);text-shadow:4px 4px 0 #000;margin:0 0 10px}
h2{font-size:22px;color:#fff;text-shadow:3px 3px 0 #000}
h3{font-size:16px;color:var(--gold);text-shadow:2px 2px 0 #000;margin:0 0 6px}

/* главный экран: 3D-сцена */
.hero{
  position:relative; overflow:hidden; background:#8fd0f0;
  border-bottom:8px solid #2a1c10; min-height:520px; height:min(76vh,660px);
}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab}
.hero canvas:active{cursor:grabbing}
.hero-ui{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  max-width:min(520px,46vw); padding:0 0 0 24px; z-index:3;
}
.hero-ui .sub{color:#12180c;font-size:13px;letter-spacing:1px;background:#fff8e8dd;
  display:inline-block;padding:5px 10px;border:3px solid #2a1c10;text-transform:uppercase}
.hero-ui h1{color:#fff;text-shadow:4px 4px 0 #000,8px 8px 0 rgba(0,0,0,.22);
  font-size:clamp(26px,4.4vw,52px);margin:10px 0 12px}
.hero-ui p.lead{color:#18220f;background:#fbf7e8ee;border:4px solid #2a1c10;
  padding:11px 13px;font-size:15px;max-width:44ch;margin:0 0 14px}
.hero-ui .actions{display:flex;gap:10px;flex-wrap:wrap}
#scene-hint{
  position:absolute;right:14px;bottom:14px;z-index:3;background:#000000a6;color:#fff;
  border:3px solid #6a6a6a;padding:6px 10px;font-size:12px;letter-spacing:1px;
  transition:opacity .6s; text-transform:uppercase;
}
.hero .fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  color:#1b1b1b;font-size:14px;text-align:center;padding:20px}
@media (max-width:820px){
  .hero{height:auto;min-height:640px}
  .hero-ui{position:relative;top:auto;transform:none;max-width:none;padding:20px 18px 0}
  .hero canvas{position:relative;height:52vh;min-height:320px}
}

/* герои */
.heroes{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hero-card{background:#3a3a3a;border:4px solid;border-color:#6a6a6a #1d1d1d #1d1d1d #6a6a6a;
  padding:14px;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.hero-card .who{font-size:15px;color:var(--gold);text-shadow:2px 2px 0 #000;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.hero-card p{margin:0;font-size:14px;color:#dedede}
.hero-card .tag{display:inline-block;margin-top:8px;font-size:11px;color:#0f0f0f;
  background:#b9c69a;padding:2px 7px;text-transform:uppercase;letter-spacing:1px}

/* панели / слоты */
.panel{
  background:var(--panel); color:#2b2b2b; border:4px solid;
  border-color:#fff #555 #555 #fff; padding:16px 18px;
  box-shadow:inset 0 0 0 3px #8b8b8b, 0 6px 0 rgba(0,0,0,.35);
  margin:22px 0;
}
.panel h2,.panel h3{color:#2b2b2b;text-shadow:none}
.panel p,.panel li{color:#2b2b2b}
.dark{background:#3a3a3a;color:#e8e8e8;border-color:#5a5a5a #1d1d1d #1d1d1d #5a5a5a;
  box-shadow:inset 0 0 0 3px #4d4d4d, 0 6px 0 rgba(0,0,0,.35)}
.dark h2,.dark h3{color:var(--gold);text-shadow:2px 2px 0 #000}
.dark p,.dark li{color:#e0e0e0}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{
  background:#3a3a3a;border:4px solid;border-color:#6a6a6a #1d1d1d #1d1d1d #6a6a6a;
  padding:14px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 6px 0 rgba(0,0,0,.35); transition:transform .12s
}
.card:hover{transform:translateY(-4px)}
.card .icon{font-size:30px;line-height:1}
.card h3{margin:0;font-size:16px}
.card .meta{font-size:12px;color:#b9b9b9;letter-spacing:1px}
.card p{font-size:14px;margin:0;color:#dcdcdc;flex:1}
.card .go{font-size:13px;color:var(--gold)}

.slot{width:52px;height:52px;background:var(--slot);border:3px solid;
  border-color:#373737 #c6c6c6 #c6c6c6 #373737;display:flex;align-items:center;
  justify-content:center;font-size:22px}
.craft{display:grid;grid-template-columns:repeat(3,52px);gap:6px;background:#8b8b8b;
  padding:10px;border:4px solid;border-color:#373737 #c6c6c6 #c6c6c6 #373737;width:max-content}
.craft .slot{width:44px;height:44px;font-size:18px}

ol.steps{counter-reset:s;list-style:none;padding-left:0;margin:0}
ol.steps li{counter-increment:s;position:relative;padding:8px 0 8px 42px;border-bottom:2px dashed #b9b9b9}
ol.steps li:last-child{border-bottom:0}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:28px;height:28px;
  background:#5a9e3a;color:#fff;border:3px solid;border-color:#8ed05f #2c5a17 #2c5a17 #8ed05f;
  display:flex;align-items:center;justify-content:center;font-size:14px;text-shadow:2px 2px 0 #000}

ul.ing{list-style:none;padding:0;margin:0}
ul.ing li{display:flex;gap:10px;padding:7px 0;border-bottom:2px dashed #b9b9b9;font-size:15px}
ul.ing li::before{content:"▪";color:#5a9e3a;font-size:18px;line-height:1}

.btn{display:inline-block;background:#8b8b8b;color:#fff;padding:10px 18px;font-size:14px;
  letter-spacing:1px;text-transform:uppercase;border:4px solid;
  border-color:#c6c6c6 #373737 #373737 #c6c6c6;text-shadow:2px 2px 0 #000;cursor:pointer}
.btn:hover{background:#a0a0a0;color:#fff}
.btn.green{background:#5a9e3a;border-color:#8ed05f #2c5a17 #2c5a17 #8ed05f}

.badge{display:inline-block;background:#2f2f2f;color:var(--gold);border:3px solid #6a6a6a;
  padding:3px 8px;font-size:12px;letter-spacing:1px;text-transform:uppercase}

footer{background:#2a1c10;border-top:6px solid #1a120a;margin-top:40px;padding:22px 0}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#c9b79f}
footer a{color:#e5c79a}

.breadcrumbs{font-size:13px;color:#c9c9c9;margin:18px 0 0}
.recipe-head{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:14px 0 6px}
.recipe-head .icon{font-size:44px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:780px){.cols{grid-template-columns:1fr}.hero .inner{grid-template-columns:1fr}}