@font-face {
  font-family: Minecraftia;
  font-style: normal;
  font-weight: 400;
  src: local('Minecraftia'), url('https://fonts.cdnfonts.com/s/31977/Minecraftia.woff') format('woff');
}


:root,
[data-emi-theme="dark"] {
  --border: #3a3a44;
  --panel: #25252b;
  --text: #e8e8ec;
  --muted: #9a9aa8;
  --slot-hover: #6cb6ff;
  --emi-link-hover: var(--slot-hover);
  --emi-tooltip-bg: rgba(16, 16, 20, 0.95);
  --emi-tooltip-text: #e8e8ec;
  --emi-tooltip-border: var(--border);
  --emi-tooltip-shadow: none;
  --emi-popover-scrim: rgba(0, 0, 0, 0.45);
  --emi-popover-panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --emi-popover-slot-hover-bg: rgba(108, 182, 255, 0.12);
  --emi-popover-stage-bg: #1e1e24;
  --emi-popover-footer-bg: #1a1a1e;
}

/* API: renderer.setTheme('light') → data-emi-theme on themeRoot; legacy: html[data-theme] */
[data-emi-theme="light"],
html[data-theme="light"] {
  --border: #d7dbe3;
  --panel: #ffffff;
  --text: #111318;
  --muted: #5c6370;
  --slot-hover: #2563eb;
  --emi-link-hover: var(--slot-hover);
  --emi-tooltip-bg: #ffffff;
  --emi-tooltip-text: #111318;
  --emi-tooltip-border: var(--border);
  --emi-tooltip-shadow: 0 12px 28px rgba(15, 18, 24, 0.16);
  --emi-popover-scrim: rgba(15, 18, 24, 0.28);
  --emi-popover-panel-shadow: 0 10px 28px rgba(16, 18, 22, 0.12);
  --emi-popover-slot-hover-bg: color-mix(in srgb, var(--slot-hover) 12%, transparent);
  --emi-popover-stage-bg: #f0f2f5;
  --emi-popover-footer-bg: #ffffff;
}

.emi-recipe {
  display: block;
  box-sizing: border-box;
}

.emi-recipe-pending {
  min-width: 120px;
  min-height: 88px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border, #3a3a44);
  border-radius: 4px;
}

.emi-recipe-error {
  margin: 0;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: #f88;
  text-align: center;
}

.emi-recipe-stage {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.emi-recipe-card-stage {
  line-height: 0;
}

.emi-recipe-card-image {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.emi-recipe-hitlayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.emi-recipe-hit {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
}

.emi-recipe-hit:focus-visible {
  outline: 1px solid var(--slot-hover, #6cb6ff);
  outline-offset: -1px;
}

.emi-recipe-root {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: scale(var(--emi-scale, 2));
  transform-origin: top left;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.emi-nine-patch {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.emi-nine-patch-cell {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.emi-recipe-content {
  position: absolute;
  pointer-events: none;
}

.emi-layer,
.emi-slot,
.emi-text {
  position: absolute;
  pointer-events: none;
}

.emi-slot {
  pointer-events: auto;
}

.emi-layer-chrome img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.emi-layer-texture {
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.emi-slot {
  cursor: default;
  box-sizing: border-box;
}

.emi-slot-inner {
  position: relative;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.emi-slot-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.emi-slot-count {
  position: absolute;
  right: 0;
  bottom: 1px;
  font-size: 8px;
  line-height: 1;
  font-family: Minecraftia, Minecraft, monospace;
  font-weight: normal;
  color: #fff;
  text-shadow: 1px 1px 0 #3f3f3f;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

.emi-slot-count-fluid {
  left: 1px;
  right: auto;
  width: 16px;
  bottom: 0;
  text-align: center;
  font-size: 6px;
  line-height: 1;
  letter-spacing: 0;
}

/* EMI widgets.png (0, 252) 4×4 — tag inputs with multiple variants */
.emi-slot-tag-mark {
  position: absolute;
  left: 1px;
  top: 13px;
  width: 4px;
  height: 4px;
  background-repeat: no-repeat;
  background-size: 256px 256px;
  background-position: 0 -252px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 200;
}

/* EMI widgets.png remainder / catalyst marks (top-right of slot) */
.emi-slot-remainder-mark {
  position: absolute;
  left: 13px;
  top: 1px;
  width: 4px;
  height: 4px;
  background-repeat: no-repeat;
  background-size: 256px 256px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 6;
}

.emi-slot-remainder-mark-other {
  background-position: -4px -252px;
}

.emi-slot-remainder-mark-self {
  background-position: -12px -252px;
}

.emi-slot-icon .icon-atlas {
  width: 32px;
  height: 32px;
  display: block;
  transform: scale(0.5);
  transform-origin: top left;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.emi-slot-icon .item-icon-atlas,
.emi-slot-icon .fluid-icon-atlas {
  width: 16px;
  height: 16px;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.emi-slot-icon .block-item-icon-atlas {
  width: 64px;
  height: 64px;
  display: block;
  transform: scale(0.25);
  transform-origin: top left;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.emi-slot-carousel.icon-carousel {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.emi-slot-carousel.icon-carousel > span {
  position: absolute;
  top: 0;
  left: 0;
}

.icon-carousel > span {
  display: none;
}

.icon-carousel > span.icon-carousel-active {
  display: block;
}

.icon-carousel > .icon-atlas,
.icon-carousel > .item-icon-atlas,
.icon-carousel > .fluid-icon-atlas,
.icon-carousel > .block-item-icon-atlas {
  display: none;
}

.icon-carousel > .icon-atlas.icon-carousel-active,
.icon-carousel > .item-icon-atlas.icon-carousel-active,
.icon-carousel > .fluid-icon-atlas.icon-carousel-active,
.icon-carousel > .block-item-icon-atlas.icon-carousel-active {
  display: block;
}

.emi-layer-chrome {
  z-index: 0;
}

.emi-slot,
.emi-tank {
  z-index: 2;
}

.emi-tank-inner {
  overflow: hidden;
}

.emi-tank-fluid {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.emi-tank-fluid .emi-tank-fluid-tile.icon-atlas {
  width: 32px;
  height: 32px;
  transform: scale(0.5);
  transform-origin: top left;
  display: block;
}

.emi-slot-empty {
  pointer-events: none;
  cursor: default;
}

.emi-slot:not(.emi-slot-empty):hover,
.emi-slot:not(.emi-slot-empty):focus-visible {
  outline: 2px solid var(--slot-hover);
  outline-offset: -2px;
  z-index: 10;
}

.emi-slot.emi-slot-fluid .emi-slot-inner {
  overflow: hidden;
}

.emi-text {
  font-family: Minecraftia, Minecraft, monospace;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: none;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

#tooltip {
  position: fixed;
  z-index: 1200;
  max-width: 320px;
  padding: 8px 10px;
  background: var(--emi-tooltip-bg);
  border: 1px solid var(--emi-tooltip-border, var(--border));
  border-radius: 4px;
  color: var(--emi-tooltip-text);
  font-size: 0.8rem;
  pointer-events: none;
  display: none;
  line-height: 1.4;
  box-shadow: var(--emi-tooltip-shadow);
}

.emi-slot-tag-input {
  cursor: pointer;
}

.emi-slot-item-nav {
  cursor: pointer;
}

.emi-slot-item-nav:focus-visible {
  outline: 2px solid #6cb6ff;
  outline-offset: 1px;
}

/* EMI tag recipe popover (EmiTagRecipe / EmiIngredientRecipe layout) */
.tag-popover {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
  background: var(--emi-popover-scrim);
}

.tag-popover[hidden] {
  display: none !important;
}

.tag-popover-panel {
  margin-top: min(10vh, 48px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--emi-popover-panel-shadow);
  max-width: min(calc(100vw - 32px), calc(16 * 36px + 28px));
}

.tag-popover-header {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}

.tag-popover-header-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tag-popover-header-text {
  flex: 1;
  min-width: 0;
}

.tag-popover-close {
  flex-shrink: 0;
  margin: 0;
  padding: 0 6px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.tag-popover-close:hover,
.tag-popover-close:focus-visible {
  color: var(--text);
  background: var(--emi-popover-slot-hover-bg, rgba(255, 255, 255, 0.08));
  outline: none;
}

.tag-popover-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}


.tag-popover-title-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.tag-popover-title-link:hover,
.tag-popover-title-link:focus-visible {
  color: var(--emi-link-hover, var(--slot-hover));
  outline: none;
}
.tag-popover-emi-id {
  margin-top: 4px;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  word-break: break-all;
}

.tag-popover-stage-wrap {
  padding: 14px;
  display: flex;
  justify-content: center;
  background: var(--emi-popover-stage-bg);
}

.tag-popover-stage {
  position: relative;
  flex-shrink: 0;
}

.tag-popover-root {
  position: relative;
  transform: scale(var(--emi-scale, 2));
  transform-origin: top left;
  image-rendering: pixelated;
}

.tag-popover-body {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
}

.tag-popover-root .emi-nine-patch {
  z-index: 0;
}

.tag-popover-featured-slot {
  position: absolute;
  left: 63px;
  top: 0;
  width: 18px;
  height: 18px;
}

.tag-popover-grid {
  position: absolute;
  left: 0;
  top: 24px;
  width: 144px;
}

.tag-popover-grid .tag-popover-slot {
  position: absolute;
}

.tag-popover-slot {
  position: relative;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.tag-popover-slot .emi-slot-inner {
  width: 18px;
  height: 18px;
}

.tag-popover-slot .emi-slot-icon {
  left: 1px;
  top: 1px;
}

.tag-popover-slot .emi-slot-icon .icon-atlas {
  width: 32px;
  height: 32px;
  display: block;
  transform: scale(0.5);
  transform-origin: top left;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tag-popover-grid-slot {
  cursor: default;
}

.tag-popover-grid-slot:hover,
.tag-popover-grid-slot:focus-visible {
  outline: 2px solid var(--slot-hover);
  outline-offset: -1px;
  z-index: 2;
}

.tag-popover-empty {
  margin: 32px 8px 8px;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

.tag-popover-footer {
  padding: 10px 14px 12px;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  word-break: break-all;
  background: var(--emi-popover-footer-bg);
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: 40vh 1fr;
  }

  #list-pane {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}