.hero h1 {
  white-space: nowrap;
}
.hero h1 em {
  font-style: normal;
  color: #e8c288;
}
.pin-3 {
  left: 86%;
  top: 53%;
}
.settings-guide {
  margin-top: 20px;
}
.craft-entry {
  margin-top: 11px;
  padding: 10px 0 1px;
  border-top: 1px solid #3b4034;
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: start;
  color: #ddc593;
}
.craft-entry strong {
  font-weight: 500;
  font-size: 12px;
}
.craft-entry span {
  margin-inline-start: auto;
  color: #b4b29d;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.craft-entry:hover {
  color: #ffcf93;
}
.craft-moves {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 15px;
}
.craft-button {
  min-height: 33px;
  height: auto;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.craft-button:disabled {
  opacity: 0.35;
}
.craft-hint {
  font-size: 12px;
  color: #d8ba87;
  min-height: 22px;
  text-align: center;
  margin: 13px 0;
}
.seal-table,
.kilns,
.sequence {
  margin: 20px 0 5px;
  text-align: center;
  border: 1px solid #645b44;
  border-radius: 6px;
  background: radial-gradient(ellipse at top, #3a3c31, #23271f);
  padding: 20px 12px;
}
.seal-table,
.kilns {
  display: flex;
  justify-content: center;
}
.seal-page {
  background: #d9c89d;
  color: #725d42;
  width: 90px;
  border-right: 1px dashed #8d775a;
  padding: 7px;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.seal-page + .seal-page {
  border: 0;
}
.seal-page span,
.kilns span,
.sequence small {
  font-size: 11px;
  letter-spacing: 0.15em;
}
.seal-page b {
  width: 49px;
  height: 49px;
  line-height: 41px;
  border: 3px double #a33d2e;
  color: #a33d2e;
  font-size: 29px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 4px;
}
.kilns {
  gap: 12px;
}
.kilns > div {
  background: #252721;
  border: 1px solid #635844;
  border-radius: 7px;
  width: 105px;
  padding: 7px;
  color: #d5c5a6;
}
.coals {
  display: flex;
  align-items: center;
  min-height: 40px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}
.coals i {
  width: 12px;
  height: 15px;
  transform: rotate(15deg);
  background: linear-gradient(45deg, #7e322a, #f5a753);
  border-radius: 55% 22% 50% 50%;
  box-shadow: 0 0 9px #ff9e4845;
}
.sequence small,
.sequence strong {
  display: block;
}
.sequence small {
  color: #bcb696;
}
.sequence strong {
  font: 600 18px/1.8 var(--serif);
  color: #edca93;
  margin: 4px 0 11px;
}
.seq-slots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.seq-slots span {
  min-width: 0;
  flex: 0 1 auto;
  min-height: 28px;
  min-inline-size: min(49px, 24%);
  padding: 3px 6px;
  overflow-wrap: anywhere;
  border: 1px dashed #777862;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #ead9b5;
}
@media (min-width: 1151px) {
  .world-grid:has(> .world-card:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .world-grid:has(> .world-card:nth-child(4)) .world-picture {
    aspect-ratio: 1.73;
  }
  .system-grid:has(> .system-card:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 681px) and (max-width: 1150px) {
  .world-grid:has(> .world-card:nth-child(4)),
  .system-grid:has(> .system-card:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ticket-preview img {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 16px auto;
  border-radius: 4px;
}
.ticket-preview .primary {
  display: flex;
}
.sys-rewind {
  background: linear-gradient(150deg, #293637, #1e2421 75%);
}
.gl-active .stage-viewport:before {
  inset: -7px;
  background-image:
    linear-gradient(0deg, #222b29f5 0%, #212927ed 27%, #1a2625bc 57%, #172322ad 100%), var(--backdrop);
  background-size: cover;
  background-position: center 44%;
  filter: blur(2px) saturate(0.76);
}
@media (hover: hover) {
  .stage-pin:hover:after,
  .stage-pin:focus-visible:after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%);
    white-space: nowrap;
    border: 1px solid #ada1817b;
    background: #20251cf1;
    border-radius: 3px;
    padding: 4px 7px;
    color: #f7ead5;
    font: 12px/1.3 var(--sans);
  }
}