@font-face {
  font-family: Minecraft;
  src: url("assets/font/minecraft.woff") format("woff");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --gui-scale: 3;
  --gui-width: 276px;
  --gui-height: 166px;
  font-family: Minecraft, monospace;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { height: 100dvh; overflow: hidden; background: #354b29; user-select: none; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, [tabindex] { outline: none; }
[hidden] { display: none !important; }
img, .merchant, .experience, .scroll-thumb, .offer, .offer-arrow, .out-of-stock, .reopen {
  image-rendering: pixelated;
}

.world {
  position: fixed;
  inset: -4px;
  background: url("assets/background/panorama.png") center 72% / cover no-repeat;
  filter: blur(2px);
}
.world-shade { position: fixed; inset: 0; background: rgb(0 0 0 / 56%); }
.game { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.gui-wrapper { width: calc(var(--gui-width) * var(--gui-scale)); height: calc(var(--gui-height) * var(--gui-scale)); }
.merchant {
  position: relative;
  width: var(--gui-width);
  height: var(--gui-height);
  background: url("assets/gui/trading-panel.png") 0 0 / var(--gui-width) var(--gui-height) no-repeat;
  transform: scale(var(--gui-scale));
  transform-origin: left top;
  color: #404040;
  font-size: 8px;
  line-height: 9px;
}
.trades-title, .merchant-title {
  position: absolute;
  top: 6px;
  height: 9px;
  margin: 0;
  font-size: 8px;
  line-height: 9px;
  font-weight: normal;
  text-align: center;
}
.trades-title { left: 5px; width: 88px; }
.merchant-title { left: 107px; width: 162px; }
.experience {
  position: absolute;
  left: 136px;
  top: 16px;
  width: 102px;
  height: 5px;
  background: url("assets/gui/experience_bar_background.png") left top / 102px 5px;
}
.experience-current, .experience-preview { position: absolute; inset: 0 auto 0 0; height: 5px; }
.experience-current { width: 64%; background: url("assets/gui/experience_bar_current.png") left top / 102px 5px; }
.experience-preview { width: 68%; background: url("assets/gui/experience_bar_result.png") left top / 102px 5px; opacity: 0; }
.donation-price { position: absolute; top: 64px; left: 107px; width: 162px; margin: 0; text-align: center; font-size: 8px; line-height: 9px; }

.offers {
  position: absolute;
  left: 5px;
  top: 18px;
  width: 89px;
  height: 140px;
  overflow: hidden;
  touch-action: none;
  scrollbar-width: none;
}
.offer {
  position: absolute;
  left: 0;
  width: 89px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-image: url("assets/gui/button.png") 2 fill / 2px / 0 stretch;
  background: transparent;
  border-radius: 0;
  text-align: left;
  color: #fff;
}
.offer:hover, .offer:focus-visible {
  border-image-source: url("assets/gui/button-highlighted.png");
}
.offer[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid #fff;
  pointer-events: none;
}
.offer .item-stack { top: 0; }
.offer .cost { left: 3px; }
.offer .cost-secondary { left: 28px; }
.offer .result { left: 67px; }
.offer-arrow {
  position: absolute;
  left: 53px;
  top: 4px;
  width: 10px;
  height: 9px;
  background: url("assets/gui/trade_arrow.png") center / 10px 9px;
}
.offer.exhausted .offer-arrow { background-image: url("assets/gui/trade_arrow_out_of_stock.png"); }
.item-stack { position: absolute; width: 16px; height: 16px; }
.item-stack img { display: block; width: 16px; height: 16px; pointer-events: none; }
.item-count {
  position: absolute;
  right: -1px;
  bottom: -1px;
  height: 9px;
  font-size: 8px;
  line-height: 9px;
  color: white;
  text-shadow: 1px 1px 0 #3f3f3f;
  pointer-events: none;
}
.scroll-track { position: absolute; left: 94px; top: 18px; width: 6px; height: 139px; touch-action: none; }
.scroll-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 27px;
  background: url("assets/gui/scroller.png") center / 6px 27px;
  cursor: grab;
  touch-action: none;
}
.scroll-thumb:active { cursor: grabbing; }
.scroll-thumb:focus-visible { outline: 1px solid white; }
.scroll-thumb.disabled { background-image: url("assets/gui/scroller_disabled.png"); cursor: default; }
.trade-input { position: absolute; top: 37px; width: 16px; height: 16px; }
.first-input { left: 136px; }
.second-input { left: 162px; }
.trade-input::after, .trade-output::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff80;
  opacity: 0;
  pointer-events: none;
}
.trade-input:hover::after, .trade-output:hover::after,
.trade-output:focus-visible::after { opacity: 1; }
.trade-output {
  position: absolute;
  left: 216px;
  top: 34px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.trade-output .item-stack { top: 3px; left: 4px; }
.trade-output:disabled { cursor: default; }
.offer:disabled, .trade-output:disabled { opacity: .6; cursor: progress; }
.trade-output:disabled::after { display: none; }
.out-of-stock {
  position: absolute;
  left: 186px;
  top: 35px;
  width: 28px;
  height: 21px;
  background: url("assets/gui/out_of_stock.png") center / 28px 21px;
}
.particles { position: absolute; left: 215px; top: 32px; width: 28px; height: 28px; pointer-events: none; }
.xp-particle { position: absolute; width: 2px; height: 2px; background: #abf557; box-shadow: 1px 0 #457a21, 0 1px #457a21; animation: sparkle 600ms steps(8) forwards; }
@keyframes sparkle { from { transform: translate(12px, 12px); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

.tooltip {
  position: fixed;
  z-index: 5;
  max-width: calc(100vw - 24px);
  padding: 3px 4px 4px;
  border: 1px solid #1d0047;
  outline: 1px solid #120c1c;
  box-shadow: inset 0 1px #5000a0, inset 0 -1px #28007f;
  background: rgb(16 0 16 / 96%);
  color: #fff;
  font-size: 8px;
  line-height: 11px;
  text-shadow: 1px 1px #3f3f3f;
  transform: scale(var(--gui-scale));
  transform-origin: left top;
  pointer-events: none;
  white-space: nowrap;
}
.tooltip .muted { display: block; color: #aaa; }
.reopen {
  width: min(600px, calc(100vw - 40px));
  height: 60px;
  padding: 0 12px;
  border: 6px solid transparent;
  border-image: url("assets/gui/button.png") 2 fill / 6px / 0 stretch;
  background: transparent;
  color: #fff;
  font-size: 24px;
  text-shadow: 3px 3px #3f3f3f;
}
.reopen:hover, .reopen:focus-visible { border-image-source: url("assets/gui/button-highlighted.png"); color: #ffffa0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.test-mode { position: fixed; top: 12px; left: 0; right: 0; margin: 0; text-align: center; color: #ffdf8a; font-size: 14px; line-height: 20px; text-shadow: 1px 1px #3f3f3f; pointer-events: none; }
.checkout-message { position: fixed; bottom: 16px; left: 50%; width: max-content; max-width: calc(100% - 24px); transform: translateX(-50%); margin: 0; padding: 10px 14px; background: #160d21f5; border: 2px solid #6323a4; color: white; font-size: 14px; line-height: 22px; text-align: center; }
.payment-page { display: grid; place-items: center; min-height: 100dvh; height: auto; overflow: auto; padding: 24px; color: #fff; }
.payment-card { position: relative; width: min(100%, 480px); padding: 32px 24px; background: #c6c6c6; border: 4px solid; border-color: #fff #555 #555 #fff; outline: 2px solid #111; color: #404040; text-align: center; font-size: 16px; line-height: 1.8; }
.payment-card h1 { font-size: 24px; font-weight: normal; line-height: 1.5; }
.payment-card p { margin: 12px 0; }
.payment-icon { display: block; width: 64px; height: 64px; margin: 0 auto; image-rendering: pixelated; }
.payment-card .payment-amount { font-size: 32px; }
.payment-card .payment-test { color: #774d00; font-size: 14px; }
.mc-button { display: block; width: 100%; padding: 10px; margin: 12px 0; border: 4px solid transparent; border-image: url("assets/gui/button.png") 2 fill / 4px / 0 stretch; border-radius: 0; background: transparent; color: white; text-shadow: 2px 2px #3f3f3f; text-decoration: none; text-align: center; font: inherit; cursor: pointer; image-rendering: pixelated; }
.mc-button:hover, .mc-button:focus-visible { border-image-source: url("assets/gui/button-highlighted.png"); outline: 2px solid white; }
.mc-button:disabled { opacity: .6; cursor: progress; }

/* In portrait, retain vanilla pixels while stacking the trade above the offers. */
@media (orientation: portrait) {
  :root { --gui-width: 176px; --gui-height: 248px; }
  .merchant { background-image: url("assets/gui/trading-portrait.png"); }
  .merchant-title { left: 7px; }
  .experience, .first-input { left: 36px; }
  .donation-price { left: 7px; top: 62px; }
  .second-input { left: 62px; }
  .trade-output { left: 116px; }
  .out-of-stock { left: 86px; }
  .particles { left: 115px; }
  .trades-title { top: 88px; width: 159px; }
  .offers { top: 100px; width: 159px; }
  .offer { width: 159px; }
  .offer .cost { left: 8px; }
  .offer .cost-secondary { left: 41px; }
  .offer .result { left: 132px; }
  .offer-arrow { left: 104px; }
  .scroll-track { left: 164px; top: 100px; }
}

@media (prefers-reduced-motion: reduce) { .xp-particle { animation: none; display: none; } }