@font-face { font-family: 'Vanilla'; src: url('../fonts/Minecraft.ttf'); }
@font-face { font-family: 'Faithful'; src: url('../fonts/mineglyph-faithful.otf'); }

:root {
  --slot-size: 36px;
  --mc-font: 'Faithful', 'Vanilla', 'Minecraft', monospace;
  --grid-gap: 0px;
}

.mc-scale-engine {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto !important;
  width: fit-content !important;
  image-rendering: pixelated;
  user-select: none;
  transform-origin: top center;
}

@media (min-width: 768px) {
  .mc-scale-engine {
    zoom: 1.25;
  }
}

.mc-container {
  background: #c6c6c6;
  border: 4px solid #fff;
  border-right-color: #555;
  border-bottom-color: #555;
  padding: 12px;
  box-shadow: 0 0 0 2px #000, 0 10px 40px rgba(0,0,0,.5);
  box-sizing: border-box;
  display: inline-block;
}

.mc-title {
  color: #404040;
  font-family: var(--mc-font);
  font-size: 16px;
  margin: -6px 0 6px 1px;
  font-weight: normal !important;
}

.mc-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 9), var(--slot-size)) !important;
  grid-template-rows: repeat(var(--rows, auto), var(--slot-size)) !important;
  gap: var(--grid-gap) !important;
  width: fit-content !important;
}

.slot {
  width: var(--slot-size);
  height: var(--slot-size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  background: #8b8b8b;
  border: 2px solid #373737;
  border-right-color: #fff;
  border-bottom-color: #fff;
  box-sizing: border-box;
}

.slot:hover {
  background: #bebebe;
  z-index: 10;
}

/* ==========================================================================
   SLOT HEATMAP TIERS & COLOURBLIND MAPPINGS
   ========================================================================== */

/* 1. Default Palette (Red -> Orange -> Yellow -> Green -> Aqua -> Purple) */
.slot.lvl-1, .slot.lvl-2, .slot.lvl-3 { background-color: rgba(255, 85, 85, 0.4) !important; }
.slot.lvl-4, .slot.lvl-5, .slot.lvl-6 { background-color: rgba(255, 151, 54, 0.4) !important; }
.slot.lvl-7, .slot.lvl-8             { background-color: rgba(255, 196, 0, 0.3) !important; }
.slot.lvl-9                           { background-color: rgba(208, 255, 0, 0.3) !important; }
.slot.lvl-10                          { background-color: rgba(0, 170, 0, 0.35) !important; }
.slot.lvl-p1                          { background-color: rgba(0, 170, 170, 0.4) !important; }
.slot.lvl-p2                          { background-color: rgba(160, 65, 255, 0.3) !important; }
.slot.locked-star-slot                { background-color: rgba(255, 85, 85, 0.4) !important; }

/* 2. Red-Green Assist (Protan / Deutan: Deep Navy -> Royal -> Sky -> Cyan -> Gold -> Starlight White) */
html[data-a11y="protan-deutan"] .slot.lvl-1,
html[data-a11y="protan-deutan"] .slot.lvl-2,
html[data-a11y="protan-deutan"] .slot.lvl-3 { background-color: rgba(59, 130, 246, 0.35) !important; }

html[data-a11y="protan-deutan"] .slot.lvl-4,
html[data-a11y="protan-deutan"] .slot.lvl-5,
html[data-a11y="protan-deutan"] .slot.lvl-6 { background-color: rgba(96, 165, 250, 0.35) !important; }

html[data-a11y="protan-deutan"] .slot.lvl-7,
html[data-a11y="protan-deutan"] .slot.lvl-8 { background-color: rgba(56, 189, 248, 0.35) !important; }

html[data-a11y="protan-deutan"] .slot.lvl-9  { background-color: rgba(125, 211, 252, 0.4) !important; }
html[data-a11y="protan-deutan"] .slot.lvl-10 { background-color: rgba(165, 243, 252, 0.45) !important; }
html[data-a11y="protan-deutan"] .slot.lvl-p1 { background-color: rgba(251, 191, 36, 0.45) !important; }
html[data-a11y="protan-deutan"] .slot.lvl-p2 { background-color: rgba(255, 255, 255, 0.5) !important; }

/* 3. Blue-Yellow Assist (Tritan: Crimson -> Red -> Rose -> Light Pink -> Teal -> Neon Lime) */
html[data-a11y="tritan"] .slot.lvl-1,
html[data-a11y="tritan"] .slot.lvl-2,
html[data-a11y="tritan"] .slot.lvl-3 { background-color: rgba(159, 18, 57, 0.4) !important; }

html[data-a11y="tritan"] .slot.lvl-4,
html[data-a11y="tritan"] .slot.lvl-5,
html[data-a11y="tritan"] .slot.lvl-6 { background-color: rgba(225, 29, 72, 0.4) !important; }

html[data-a11y="tritan"] .slot.lvl-7,
html[data-a11y="tritan"] .slot.lvl-8 { background-color: rgba(244, 63, 94, 0.35) !important; }

html[data-a11y="tritan"] .slot.lvl-9  { background-color: rgba(251, 113, 133, 0.4) !important; }
html[data-a11y="tritan"] .slot.lvl-10 { background-color: rgba(254, 205, 211, 0.45) !important; }
html[data-a11y="tritan"] .slot.lvl-p1 { background-color: rgba(20, 184, 166, 0.45) !important; }
html[data-a11y="tritan"] .slot.lvl-p2 { background-color: rgba(132, 204, 22, 0.45) !important; }

.item-wrapper {
  width: 32px;
  height: 32px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.item-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.count {
  position: absolute;
  right: -2px;
  bottom: -4px;
  font-size: 16px;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  pointer-events: none;
  z-index: 5;
  font-family: var(--mc-font);
  font-weight: normal !important;
}

/* Dark Mode */
[data-theme="dark"],[data-theme="midnight"] .mc-container {
  background: rgba(35,35,35,.95);
  border-color: rgba(255,255,255,.15);
  border-right-color: rgba(0,0,0,.8);
  border-bottom-color: rgba(0,0,0,.8);
}
[data-theme="dark"],[data-theme="midnight"] .mc-title { color: #ddd; text-shadow: 2px 2px 0 #000; }
[data-theme="dark"],[data-theme="midnight"] #crafting-arrow { color: #aaa; text-shadow: 2px 2px 0 #000; }
[data-theme="dark"],[data-theme="midnight"] .slot { border-color: rgba(0,0,0,.8); border-right-color: rgba(255,255,255,.1); border-bottom-color: rgba(255,255,255,.1); }
[data-theme="dark"],[data-theme="midnight"] .slot:not([class*="lvl-"]):not(.locked-star-slot) { background: rgba(80,80,80,.3); }
[data-theme="dark"],[data-theme="midnight"] .inv-player-box {
  background-color: rgba(20,20,20,.8);
  border-color: rgba(0,0,0,.8);
  border-right-color: rgba(255,255,255,.1);
  border-bottom-color: rgba(255,255,255,.1);
}

/* Tooltip Settings */
.mc-tooltip {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  padding: 6px 10px;
  max-width: min(480px, calc(100vw - 20px)) !important;
  width: max-content;
  color: #fff;
  background: rgba(16,0,16,.96);
  letter-spacing: .05em;
  border: 2px solid #2d0064;
  font-family: var(--mc-font);
  box-shadow: 2px 0 0 0 #000, -2px 0 0 0 #000, 0 2px 0 0 #000, 0 -2px 0 0 #000;
  word-break: break-word;
  word-wrap: break-word !important;
  white-space: normal;
  line-height: 1.35;
  box-sizing: border-box !important;
}

.mc-tooltip.show {
  display: block;
}

.mc-container,
.mc-container *,
.mc-tooltip,
.mc-tooltip *,
.tt-name,
.tt-line {
  font-weight: normal !important;
}

.tt-name {
  font-size: 16px;
  display: block;
  line-height: 1.35;
  margin-bottom: 4px;
  font-family: var(--mc-font);
}

.tt-line {
  display: block;
  min-height: 1.15em;
  line-height: 1.25;
}

.r-common{color:#fff} .r-uncommon{color:#55ff55} .r-rare{color:#5555ff} .r-epic{color:#ff55ff} .r-legendary{color:#ffaa00}
.c-grey{color:#aaa} .c-yellow{color:#ffff55} .c-red{color:#ff5555}

.tt-p2-star,
.tt-p1-star {
  height: 12px;
  width: auto;
  vertical-align: middle;
  margin: 0 1px;
  padding-bottom: 2px;
  image-rendering: pixelated;
  display: inline-block;
}