/* Artwork proportions and rail bounds from the Chiseled Slate handoff. */
.hud .hud-main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  height: auto;
}

.hud .resource-bar {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 2090 / 637;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: url('./assets/chiseled-slate/resource.webp') center / 100% 100% no-repeat;
  box-shadow: none;
  color: #fff0d6;
}

.hud .resource-bar .currency-art {
  position: absolute;
  left: 10%;
  top: 50%;
  width: 15%;
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
  filter: drop-shadow(0 1px 2px #0b1723b0);
}

.hud .resource-copy {
  position: absolute;
  inset: 0 9% 0 27%;
  justify-content: center;
  gap: 1px;
}

.hud .xp-resource .resource-copy { bottom: 12%; }

.hud .resource-copy b {
  font-size: clamp(11px, 10.5cqw, 19px);
  line-height: 1;
}

.hud .gold-resource .resource-copy b {
  font-size: clamp(12px, 11.4cqw, 21px);
}

.hud .resource-copy span {
  color: #efe4d4;
  font-size: clamp(8px, 6.1cqw, 11px);
  line-height: 1;
}

.hud .xp-resource .xp-track {
  left: 27%;
  right: 12%;
  bottom: 15%;
  height: clamp(3px, 2.4cqw, 5px);
  border: 0;
  background: #111b26;
  box-shadow: inset 0 1px 2px #080c15, 0 1px 0 #b5c9db48;
}

.hud .xp-track i {
  background: linear-gradient(#d9b1ff, #9859de 53%, #5b2e9b);
  box-shadow: none;
  transition: transform 120ms ease-out;
}

.order-board {
  --rail-left: 17.6688%;
  --rail-top: 38.6792%;
  --rail-width: 77.3207%;
  --rail-height: 21.6981%;
  --rail-right: 5.0105%;
  container-type: inline-size;
  width: calc(100% - 24px);
  justify-self: center;
  margin-inline: 0;
  aspect-ratio: 1896 / 424;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url('./assets/chiseled-slate/order.webp') center / 100% 100% no-repeat;
  box-shadow: none;
}

.order-board .order-emblem {
  position: absolute;
  left: 4.1%;
  top: 49.5282%;
  width: 11.4%;
  height: auto;
  aspect-ratio: 1;
}

.order-board .order-emblem .work-art {
  inset: 0;
  width: 100%;
  height: 100%;
}

.order-board .order-name,
.order-board .order-reward {
  position: absolute;
  left: var(--rail-left);
  right: var(--rail-right);
  margin: 0;
  white-space: nowrap;
}

.order-board .order-name {
  top: 15%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(10px, 3.7cqw, 17px);
  line-height: 1.15;
  text-shadow: 0 1px 2px #091820;
}

.order-board .order-reward {
  top: 66%;
  gap: 5%;
  font-size: clamp(10px, 3cqw, 14px);
}

.order-board .order-reward > span { gap: .25em; }
.order-board .order-reward .currency-art { width: 1.2em; height: 1.2em; }

.order-board .meter {
  position: absolute;
  isolation: isolate;
  left: var(--rail-left);
  top: var(--rail-top);
  width: var(--rail-width);
  height: var(--rail-height);
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.elixir-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--done, 0%);
  overflow: hidden;
  border-radius: 0 11px 9px 0 / 0 52% 48% 0;
  background:
    radial-gradient(ellipse at 20% 80%, #f0a2fe9c, transparent 31%),
    radial-gradient(ellipse at 74% 6%, #dabcffb8, transparent 39%),
    radial-gradient(ellipse at 46% 73%, #5d28b8, transparent 45%),
    linear-gradient(180deg, #edbcff, #ba6bf3 19%, #803dd8 47%, #4c1e96 83%, #5d2488);
  box-shadow: inset 0 1px 0 #faf2ff7a, inset 0 -2px 5px #2309398c;
  transition: width 120ms ease-out;
}

.elixir-fill::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #e5bdffbd);
}

.meter[data-complete] .elixir-fill { border-radius: 0; }
.meter[data-complete] .elixir-fill::after { display: none; }

.elixir-sheen {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  opacity: 0;
  background: linear-gradient(108deg, transparent 12%, #edc7ff9c 53%, transparent 83%);
  mix-blend-mode: screen;
}

.meter .progress-count {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: #fff7e5;
  font-size: clamp(9px, 3.1cqw, 14px);
  line-height: 1;
  background: #21162cda;
  border-radius: 999px;
  padding: 1px 6px 2px;
  text-shadow: 0 1px 2px #140d20;
}

@media (max-width: 359px) {
  .order-board { width: calc(100% - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .elixir-fill, .hud .xp-track i { transition: none; }
  .elixir-sheen { display: none; }
}