@font-face {
  font-family: "Monocraft";
  src: url("../fonts/monocraft.ttf") format("truetype");
  font-display: swap;
}

.mc {
  --mc-font: var(--font-mc, "Monocraft"), "Monocraft", ui-monospace, monospace;
  --p: 2px;
  display: block;
  margin: 1.25rem 0;
  max-width: 100%;
  container-type: inline-size;
  font-family: var(--mc-font);
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
  -webkit-font-smoothing: none;
  font-smooth: never;
  font-synthesis: none;
  text-rendering: optimizeSpeed;
}

.mc .mc-fallback {
  font-family: var(--font-code, monospace);
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-m, 8px);
  background: #1b1d22;
  color: #e7e5e1;
}

.mc[data-mc-rendered] > .mc-fallback {
  display: none;
}

.mc-text,
.mc-tooltip,
.mc-scene {
  font-family: var(--font-mc, "Monocraft"), "Monocraft", ui-monospace, monospace;
  font-synthesis: none;
}

.mm-seg {
  text-shadow: var(--p, 2px) var(--p, 2px) 0 var(--mm-shadow, #3f3f3f);
  white-space: pre-wrap;
}

.mc-noshadow .mm-seg {
  text-shadow: none;
}

.mm-b {
  letter-spacing: var(--p, 2px);
  text-shadow: var(--p, 2px) 0 0 currentColor, var(--p, 2px) var(--p, 2px) 0 var(--mm-shadow, #3f3f3f), calc(var(--p, 2px) * 2) var(--p, 2px) 0 var(--mm-shadow, #3f3f3f);
}

.mc-noshadow .mm-b {
  text-shadow: var(--p, 2px) 0 0 currentColor;
}

.mm-i {
  font-style: italic;
  font-synthesis: style;
}

.mm-u,
.mm-s,
.mm-us {
  text-decoration-thickness: var(--p, 2px);
  text-decoration-skip-ink: none;
}

.mm-u {
  text-decoration-line: underline;
  text-underline-offset: calc(var(--p, 2px) * 0.5);
}

.mm-s {
  text-decoration-line: line-through;
}

.mm-us {
  text-decoration-line: underline line-through;
  text-underline-offset: calc(var(--p, 2px) * 0.5);
}

.mm-click,
.mm-hover {
  cursor: pointer;
}

.mm-click:focus-visible,
.mm-hover:focus-visible {
  outline: 2px solid #ffff55;
  outline-offset: 1px;
}

.mm-font-alt,
.mm-font-illageralt {
  font-family: "Segoe UI Symbol", serif;
  letter-spacing: 0.1em;
}

.mm-font-uniform {
  font-family: "Unifont", "Lucida Console", ui-monospace, monospace;
  font-size: 0.95em;
}

.mm-object {
  display: inline-block;
  width: calc(var(--p, 2px) * 8);
  height: calc(var(--p, 2px) * 8);
  vertical-align: calc(var(--p, 2px) * -0.5);
  margin: 0 var(--p, 2px) 0 0;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.mm-sprite {
  background-color: rgba(164, 124, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.mm-sprite.has-image {
  background-color: transparent;
  box-shadow: none;
}

.mm-head {
  background:
    linear-gradient(#2a1b10 0 37.5%, transparent 37.5%),
    linear-gradient(90deg, transparent 0 12.5%, #ffffff 12.5% 25%, #4a3aa6 25% 37.5%, transparent 37.5% 62.5%, #4a3aa6 62.5% 75%, #ffffff 75% 87.5%, transparent 87.5%) 0 50% / 100% 12.5% no-repeat,
    linear-gradient(90deg, transparent 0 37.5%, #6b3f2b 37.5% 62.5%, transparent 62.5%) 0 75% / 100% 12.5% no-repeat,
    #b98a6a;
}

.mc-scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m, 8px);
  container-type: inline-size;
  --gp: max(1.25px, calc(100cqw / 320));
  background:
    radial-gradient(120% 60% at 20% 108%, rgba(46, 82, 32, 0.95) 0 55%, transparent 56%),
    radial-gradient(90% 55% at 85% 112%, rgba(58, 98, 40, 0.95) 0 55%, transparent 56%),
    radial-gradient(70% 40% at 55% 100%, rgba(84, 128, 60, 0.9) 0 55%, transparent 56%),
    radial-gradient(140% 50% at 50% 95%, rgba(126, 150, 170, 0.55) 0 50%, transparent 51%),
    linear-gradient(180deg, #5d8fd8 0%, #8fb6ec 48%, #bcd5f2 70%, #d9e6f2 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.mc-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}

.mc-scene--dark {
  background:
    radial-gradient(120% 60% at 20% 108%, rgba(24, 40, 22, 0.98) 0 55%, transparent 56%),
    radial-gradient(90% 55% at 85% 112%, rgba(30, 50, 28, 0.98) 0 55%, transparent 56%),
    radial-gradient(70% 40% at 55% 100%, rgba(40, 62, 36, 0.95) 0 55%, transparent 56%),
    linear-gradient(180deg, #121a33 0%, #23315a 55%, #3b4a72 80%, #4b5878 100%);
}

.mc-scene > * {
  position: relative;
  z-index: 1;
}

.mc-scene--chat {
  --p: min(2px, max(1.25px, calc(100cqw / 340)));
  padding: calc(var(--p) * 18) calc(var(--p) * 4) calc(var(--p) * 8);
  min-height: calc(var(--p) * 48);
  display: flex;
  align-items: flex-end;
}

.mc-chatbox {
  width: min(100%, calc(var(--p) * 324));
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
  padding: 0 0 var(--p);
}

.mc-chatline {
  padding: 0 calc(var(--p) * 2);
  min-height: calc(var(--p) * 9);
  overflow-wrap: anywhere;
}

.mc-scene--title {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  display: block;
}

.mc-title-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 calc(var(--gp) * 4);
}

.mc-title-main {
  --p: calc(var(--gp) * 4);
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
  color: #ffffff;
  white-space: nowrap;
  margin-top: calc(var(--gp) * -26);
}

.mc-title-sub {
  --p: calc(var(--gp) * 2);
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
  color: #ffffff;
  white-space: nowrap;
  margin-top: calc(var(--gp) * 10);
}

.mc-title-main:empty,
.mc-title-sub:empty {
  display: none;
}

.mc-scene--hud {
  aspect-ratio: 16 / 7;
  min-height: calc(var(--gp) * 72);
}

.mc-actionbar-text {
  --p: var(--gp);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--gp) * 36);
  text-align: center;
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
  color: #ffffff;
  white-space: nowrap;
}

.mc-hotbar {
  --p: var(--gp);
  position: absolute;
  left: 50%;
  bottom: calc(var(--gp) * 2);
  transform: translateX(-50%);
  display: flex;
  padding: var(--p);
  background: rgba(20, 20, 20, 0.55);
  box-shadow: inset 0 0 0 var(--p) #2a2a2a, inset 0 0 0 calc(var(--p) * 2) rgba(150, 150, 150, 0.55);
}

.mc-hotbar-slot {
  width: calc(var(--p) * 20);
  height: calc(var(--p) * 20);
  box-shadow: inset 0 0 0 var(--p) rgba(120, 120, 120, 0.5);
  display: grid;
  place-items: center;
}

.mc-hotbar-slot.is-selected {
  box-shadow: inset 0 0 0 var(--p) #000000, inset 0 0 0 calc(var(--p) * 2) #f4f4f4, inset 0 0 0 calc(var(--p) * 3) #6b6b6b;
}

.mc-hotbar-slot img {
  width: calc(var(--p) * 16);
  height: calc(var(--p) * 16);
}

.mc-scene--boss {
  min-height: calc(var(--gp) * 64);
}

.mc-boss {
  --p: var(--gp);
  position: absolute;
  top: calc(var(--gp) * 3);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--p) * 182);
  max-width: 94%;
  text-align: center;
  color: #ffffff;
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
}

.mc-boss-text {
  white-space: nowrap;
}

.mc-boss-bar {
  position: relative;
  height: calc(var(--p) * 5);
  margin-top: var(--p);
  background: linear-gradient(180deg, var(--bb-0) 0 20%, var(--bb-1) 20% 40%, var(--bb-2) 40% 60%, var(--bb-1) 60% 80%, var(--bb-0) 80% 100%);
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, calc(100% - var(--p)) 20%, 100% 20%, 100% 80%, calc(100% - var(--p)) 80%, calc(100% - var(--p)) 100%, var(--p) 100%, var(--p) 80%, 0 80%, 0 20%, var(--p) 20%);
}

.mc-boss-progress {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, var(--bp-0) 0 20%, var(--bp-1) 20% 40%, var(--bp-2) 40% 60%, var(--bp-3) 60% 80%, var(--bp-0) 80% 100%);
}

.mc-boss[data-color="pink"] { --bb-0: #26001e; --bb-1: #490039; --bb-2: #39002c; --bp-0: #4a003a; --bp-1: #ec00b8; --bp-2: #b90090; --bp-3: #8c006d; }
.mc-boss[data-color="blue"] { --bb-0: #001e26; --bb-1: #003949; --bb-2: #002c39; --bp-0: #003a4a; --bp-1: #00b7ec; --bp-2: #008fb9; --bp-3: #006d8c; }
.mc-boss[data-color="red"] { --bb-0: #260800; --bb-1: #491000; --bb-2: #390d00; --bp-0: #4a1000; --bp-1: #ec3500; --bp-2: #b92a00; --bp-3: #8c1f00; }
.mc-boss[data-color="green"] { --bb-0: #052600; --bb-1: #094900; --bb-2: #073900; --bp-0: #0a4a00; --bp-1: #1dec00; --bp-2: #16b900; --bp-3: #128c00; }
.mc-boss[data-color="yellow"] { --bb-0: #262600; --bb-1: #484900; --bb-2: #383900; --bp-0: #4a4a00; --bp-1: #e9ec00; --bp-2: #b6b900; --bp-3: #8b8c00; }
.mc-boss[data-color="purple"] { --bb-0: #130026; --bb-1: #260049; --bb-2: #1e0039; --bp-0: #26004a; --bp-1: #7b00ec; --bp-2: #6100b9; --bp-3: #49008c; }
.mc-boss[data-color="white"] { --bb-0: #262626; --bb-1: #494949; --bb-2: #393939; --bp-0: #4a4a4a; --bp-1: #ececec; --bp-2: #b9b9b9; --bp-3: #8c8c8c; }

.mc-scene--sidebar {
  min-height: calc(var(--gp) * 90);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--gp) * 6) calc(var(--gp) * 2) calc(var(--gp) * 6) calc(var(--gp) * 6);
}

.mc-sidebar-box {
  --p: max(1.5px, var(--gp));
  color: #ffffff;
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
  min-width: calc(var(--p) * 40);
  max-width: 100%;
}

.mc-sidebar-title {
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  padding: 0 var(--p);
  white-space: nowrap;
}

.mc-sidebar-row {
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--p) * 4);
  padding: 0 var(--p);
  white-space: nowrap;
}

.mc-sidebar-score {
  color: #ff5555;
}

.mc-window {
  --p: min(2px, calc(100cqw / 180));
  display: inline-block;
  position: relative;
  max-width: 100%;
  padding: calc(var(--p) * 4) calc(var(--p) * 7) calc(var(--p) * 7);
  background: #c6c6c6;
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
  box-shadow:
    inset var(--p) var(--p) 0 #ffffff,
    inset calc(var(--p) * -1) calc(var(--p) * -1) 0 #555555,
    inset calc(var(--p) * 2) calc(var(--p) * 2) 0 #ffffff,
    inset calc(var(--p) * -2) calc(var(--p) * -2) 0 #555555,
    0 0 0 var(--p) #000000;
  border-radius: calc(var(--p) * 2);
  margin: var(--p);
}

.mc-window-title,
.mc-window-label {
  color: #404040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: calc(var(--p) * 9);
  margin: calc(var(--p) * 2) var(--p) calc(var(--p) * 2);
}

.mc-window-title .mm-seg,
.mc-window-label .mm-seg {
  text-shadow: none;
}

.mc-window-title .mm-b,
.mc-window-label .mm-b {
  text-shadow: var(--p) 0 0 currentColor;
}

.mc-grid {
  display: grid;
  grid-template-columns: repeat(9, calc(var(--p) * 18));
  grid-auto-rows: calc(var(--p) * 18);
}

.mc-grid + .mc-window-label {
  margin-top: calc(var(--p) * 4);
}

.mc-grid--hotbar {
  margin-top: calc(var(--p) * 4);
}

.mc-slot {
  position: relative;
  width: calc(var(--p) * 18);
  height: calc(var(--p) * 18);
  background: #8b8b8b;
  box-shadow: inset var(--p) var(--p) 0 #373737, inset calc(var(--p) * -1) calc(var(--p) * -1) 0 #ffffff;
  display: grid;
  place-items: center;
  outline: none;
}

.mc-slot.has-item {
  cursor: pointer;
}

.mc-slot:hover::after,
.mc-slot:focus-visible::after {
  content: "";
  position: absolute;
  inset: var(--p);
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 3;
}

.mc-slot:focus-visible {
  box-shadow: inset var(--p) var(--p) 0 #373737, inset calc(var(--p) * -1) calc(var(--p) * -1) 0 #ffffff, 0 0 0 2px #ffff55;
  z-index: 4;
}

.mc-icon {
  width: calc(var(--p) * 16);
  height: calc(var(--p) * 16);
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.mc-icon.is-block {
  image-rendering: auto;
}

.mc-icon-missing {
  width: calc(var(--p) * 14);
  height: calc(var(--p) * 14);
  display: grid;
  place-items: center;
  background: #5a3b6e;
  box-shadow: inset 0 0 0 var(--p) #2b1838;
  color: #ffffff;
  font-size: calc(var(--p) * 6);
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
}

.mc-glint {
  position: absolute;
  left: var(--p);
  top: var(--p);
  width: calc(var(--p) * 16);
  height: calc(var(--p) * 16);
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: linear-gradient(115deg, rgba(128, 64, 255, 0) 0%, rgba(170, 110, 255, 0.55) 18%, rgba(128, 64, 255, 0.15) 32%, rgba(200, 150, 255, 0.6) 50%, rgba(128, 64, 255, 0.1) 66%, rgba(170, 110, 255, 0.5) 84%, rgba(128, 64, 255, 0) 100%);
  background-size: 300% 300%;
  mix-blend-mode: screen;
  animation: mc-glint 3.2s linear infinite;
}

@keyframes mc-glint {
  from { background-position: 100% 0; }
  to { background-position: 0 100%; }
}

.mc-count {
  position: absolute;
  right: 0;
  bottom: calc(var(--p) * -1);
  color: #ffffff;
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 9);
  text-shadow: var(--p) var(--p) 0 #3f3f3f;
  pointer-events: none;
  z-index: 2;
}

.mc-player-top {
  display: grid;
  grid-template-columns: calc(var(--p) * 18) calc(var(--p) * 52) calc(var(--p) * 18) 1fr;
  gap: 0 calc(var(--p) * 1);
  margin-bottom: calc(var(--p) * 4);
  align-items: start;
}

.mc-player-armor {
  display: grid;
  grid-auto-rows: calc(var(--p) * 18);
}

.mc-player-model {
  height: calc(var(--p) * 72);
  background: #000000;
  box-shadow: inset var(--p) var(--p) 0 #373737, inset calc(var(--p) * -1) calc(var(--p) * -1) 0 #ffffff;
  position: relative;
  overflow: hidden;
}

.mc-player-model::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--p) * 6);
  width: calc(var(--p) * 16);
  height: calc(var(--p) * 56);
  transform: translateX(-50%);
  background:
    linear-gradient(#2a1b10 0 7%, #b98a6a 7% 22%, #00a8a8 22% 50%, #3b3fa0 50% 92%, #4d4d4d 92% 100%);
  box-shadow: calc(var(--p) * -6) calc(var(--p) * 8) 0 calc(var(--p) * -1) #b98a6a, calc(var(--p) * 6) calc(var(--p) * 8) 0 calc(var(--p) * -1) #b98a6a;
}

.mc-player-offhand {
  align-self: end;
}

.mc-player-craft {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--p) * 18)) calc(var(--p) * 14) calc(var(--p) * 18);
  grid-template-rows: auto repeat(2, calc(var(--p) * 18));
  align-items: center;
  margin-top: calc(var(--p) * 4);
}

.mc-player-craft .mc-window-label {
  grid-column: 1 / -1;
  margin: 0 0 calc(var(--p) * 1);
}

.mc-craft-arrow {
  grid-column: 3;
  grid-row: 2 / span 2;
  justify-self: center;
  width: 0;
  height: 0;
  border-top: calc(var(--p) * 4) solid transparent;
  border-bottom: calc(var(--p) * 4) solid transparent;
  border-left: calc(var(--p) * 6) solid #8b8b8b;
}

.mc-craft-result {
  grid-column: 4;
  grid-row: 2 / span 2;
}

.mc-tooltip {
  --p: 2px;
  position: relative;
  display: inline-block;
  max-width: min(100%, calc(var(--p) * 200));
  padding: calc(var(--p) * 4) calc(var(--p) * 4) calc(var(--p) * 3);
  color: #ffffff;
  font-size: calc(var(--p) * 9);
  line-height: calc(var(--p) * 10);
  text-align: left;
  background: rgba(16, 0, 16, 0.94);
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, calc(100% - var(--p)) var(--p), 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, var(--p) calc(100% - var(--p)), 0 calc(100% - var(--p)), 0 var(--p), var(--p) var(--p));
}

.mc-tooltip::before {
  content: "";
  position: absolute;
  inset: var(--p);
  border: var(--p) solid transparent;
  border-image: linear-gradient(180deg, rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1;
  pointer-events: none;
}

.mc-tooltip-line {
  position: relative;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: calc(var(--p) * 10);
}

.mc-tooltip-line + .mc-tooltip-gap {
  height: calc(var(--p) * 2);
}

.mc-tooltip-note {
  position: relative;
  margin-top: calc(var(--p) * 3);
  padding-top: calc(var(--p) * 2);
  border-top: 1px dashed rgba(170, 170, 170, 0.35);
  color: #aaaaaa;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
}

.mc-tooltip-note code {
  font-family: var(--font-code, monospace);
  color: #ffff55;
  background: none;
  padding: 0;
}

.mc-float {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  max-width: min(92vw, 420px);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.mc-float[hidden] {
  display: none;
}

.mc-item-show {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-m, 8px);
  background: repeating-conic-gradient(#3a3d44 0% 25%, #33363c 0% 50%) 0 0 / 16px 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.mc-item-show .mc-slot {
  --p: 3px;
  flex: none;
}

.mc-item-show .mc-tooltip {
  --p: min(2px, calc(100cqw / 180));
}

.mc-text {
  font-size: calc(var(--p, 2px) * 9);
  line-height: calc(var(--p, 2px) * 9);
}

.mc-text--dark {
  display: inline-block;
  background: rgba(0, 0, 0, 0.72);
  padding: 0 calc(var(--p, 2px) * 2);
}

.mc-ph {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}

@container (max-width: 420px) {
  .mc-scene--chat {
    --p: 1.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-glint {
    animation: none;
    background-position: 50% 50%;
  }
}