.crafting-codex {
  max-width: 1380px;
}

.crafting-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: -24px 0 34px;
  color: #aaa2b8;
  font-size: 12px;
}

.crafting-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.legend-dot.normal { background: #50ddff; }
.legend-dot.cursed { background: #a777ff; }
.legend-dot.ritual { background: #ff7c59; }

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.recipe-card {
  display: grid;
  grid-template-columns: minmax(205px, .86fr) minmax(260px, 1.14fr);
  gap: 22px;
  min-height: 280px;
  padding: 24px;
  background: linear-gradient(135deg, #15131f, #0d0c13);
  border: 1px solid #2e2940;
  border-top: 2px solid #50ddff88;
}

.recipe-card.is-cursed {
  border-top-color: #a777ff;
  background: linear-gradient(135deg, #1a1327, #0d0c13 60%);
}

.recipe-card h3 {
  margin: 3px 0 5px;
  font-size: 21px;
  line-height: 1.2;
}

.recipe-kind {
  margin: 0;
  color: #64dff8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.is-cursed .recipe-kind { color: #bf9aff; }

.recipe-note-small {
  min-height: 38px;
  margin: 0 0 14px;
  color: #9f97ad;
  font-size: 11px;
}

.recipe-visual {
  display: flex;
  align-items: center;
  gap: 13px;
}

.craft-grid {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(3, 52px);
  gap: 4px;
  padding: 7px;
  background: #08070c;
  border: 1px solid #40394e;
  box-shadow: inset 0 0 20px #000;
}

.craft-slot {
  position: relative;
  display: grid;
  place-items: center;
  background: #292532;
  border: 2px solid;
  border-color: #474150 #17141d #17141d #474150;
}

.craft-slot.empty { opacity: .45; }

.craft-slot img,
.recipe-result img,
.ingredient-pill img,
.special-output img {
  width: 38px;
  height: 38px;
  /* Animated Minecraft textures are vertical sprite strips (16x32/48/64...).
     Crop to the first square frame instead of shrinking every frame into one icon. */
  object-fit: cover;
  object-position: top;
  image-rendering: pixelated;
}

.recipe-arrow {
  color: #847a91;
  font-size: 26px;
}

.recipe-result {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  background: #211a2e;
  border: 2px solid;
  border-color: #675582 #1b1425 #1b1425 #675582;
  box-shadow: 0 0 20px #a777ff18;
}

.ingredient-summary {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
}

.ingredient-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: calc(50% - 4px);
  padding: 7px 9px;
  background: #09080d;
  border: 1px solid #ffffff13;
  color: #cfc8d9;
  font-size: 11px;
}

.ingredient-pill img {
  width: 27px;
  height: 27px;
}

.ingredient-pill b { color: #fff; }

.special-heading { margin-top: 95px; }

.special-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.special-card {
  position: relative;
  padding: 27px;
  background: linear-gradient(135deg, #17131d, #0d0c12);
  border: 1px solid #3b2d33;
  border-left: 3px solid #ff7c59;
}

.special-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 17px;
}

.special-output {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  height: 58px;
  background: #08070c;
  border: 1px solid #ff7c5944;
}

.special-head h3 { margin: 2px 0 0; font-size: 21px; }
.special-head p { margin: 0; color: #ff9b80; font-size: 10px; font-weight: 900; letter-spacing: .12em; }

.special-ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.special-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: special-step;
}

.special-steps li {
  position: relative;
  min-height: 30px;
  margin: 9px 0;
  padding-left: 38px;
  color: #c1bac9;
  font-size: 12px;
}

.special-steps li::before {
  counter-increment: special-step;
  content: counter(special-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  color: #ff9476;
  font-family: Georgia, serif;
  font-size: 17px;
}

.special-warning {
  margin: 17px 0 0;
  padding: 10px 12px;
  background: #ff7c590c;
  border: 1px solid #ff7c5930;
  color: #e8b9ab;
  font-size: 11px;
}

@media (max-width: 1050px) {
  .recipe-grid,
  .special-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .recipe-card { grid-template-columns: 1fr; }
  .craft-grid { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
  .craft-slot img { width: 34px; height: 34px; }
  .ingredient-pill { min-width: 100%; }
}