/* Vanilla GUI palette. --u = one game texture pixel, scaled. */
:root {
  --u: min(3px, calc((100vw - 32px) / 176));
  --gui-bg: #c6c6c6;
  --gui-light: #ffffff;
  --gui-shadow: #555555;
  --gui-edge: #000000;
  --slot-bg: #8b8b8b;
  --slot-dark: #373737;
  --slot-light: #ffffff;
  --text: #3f3f3f;
  --text-soft: #5b5b5b;
  --btn-bg: #707070;
  --btn-hover: #7e88c8;
  --btn-text: #ffffff;
  --mc-red: #ff5555;
  --mc-green: #55ff55;
  --mc-aqua: #55ffff;
  --mc-gray: #aaaaaa;
  --mc-dark-gray: #555555;
  --ok: #2f8f2f;
  --ko: #b02e26;
  --page-bg: #1b1b1b;
  --font: 'Pixelify Sans', 'Courier New', monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--page-bg); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
  background-color: var(--page-bg);
  background-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)), url("../texture.php?sprite=menu_background");
  background-size: auto, 96px 96px;
  image-rendering: pixelated;
}

img, .icon { image-rendering: pixelated; }

button, input, select, textarea { font: inherit; }

:focus-visible { outline: 2px solid #ffff55; outline-offset: 1px; }

.noscript { color: #fff; padding: 24px; max-width: 640px; margin: 0 auto; }

/* ------------------------------------------------------------------ frames */

.gui {
  background: var(--gui-bg);
  border: 2px solid var(--gui-edge);
  border-radius: 4px;
  box-shadow: inset 3px 3px 0 var(--gui-light), inset -3px -3px 0 var(--gui-shadow);
  padding: 14px 16px;
}

.gui__title { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--text); }
.gui__label { margin: 0; color: var(--text); }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  max-width: 1280px;
  margin: 0 auto;
}

.topbar__title {
  margin: 0;
  font-size: 28px;
  color: #fff;
  text-shadow: 3px 3px 0 #3f3f3f;
}

.topbar__version {
  font-size: 15px;
  color: #ffff55;
  text-shadow: 2px 2px 0 #3f3f15;
  white-space: nowrap;
}

.topbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(340px, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

.layout__main { display: grid; gap: 16px; min-width: 0; }

/* ------------------------------------------------------------------ buttons and fields */

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 14px;
  border: 2px solid #000;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-shadow: 2px 2px 0 #3f3f3f;
  box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -3px 0 #4a4a4a;
  cursor: pointer;
  user-select: none;
}
.mc-btn:hover { background: var(--btn-hover); box-shadow: inset 2px 2px 0 #bdc6ff, inset -2px -3px 0 #59619a; border-color: #fff; }
.mc-btn:active { box-shadow: inset 2px 2px 0 #4a4a4a; }
.mc-btn--small { min-height: 28px; padding: 2px 10px; font-size: 14px; }
.mc-btn--danger:hover { background: #b04a4a; box-shadow: inset 2px 2px 0 #e08585, inset -2px -3px 0 #6e2a2a; }

.mc-field {
  width: 100%;
  min-height: 34px;
  padding: 4px 8px;
  background: #000;
  color: #fff;
  border: 2px solid #a0a0a0;
  border-radius: 0;
}
.mc-field:focus { border-color: #fff; outline: none; }
.mc-field::placeholder { color: #707070; }
select.mc-field { cursor: pointer; }

.mc-check {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  background: var(--slot-bg);
  border: 2px solid;
  border-color: var(--slot-dark) var(--slot-light) var(--slot-light) var(--slot-dark);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}
.mc-check:checked::after { content: '✔'; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; font-size: 14px; line-height: 1; }
.mc-check:checked { background: var(--ok); }
.mc-check:disabled { opacity: .4; cursor: not-allowed; }

.linklike {
  border: 0;
  padding: 0;
  background: none;
  color: #2b4fb0;
  text-decoration: underline;
  cursor: pointer;
}

.tag {
  display: inline-block;
  padding: 0 5px;
  font-size: 12px;
  color: #fff;
  background: #a07b1d;
  border: 1px solid #5c470f;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ inventory (176 x 166 units) */

.inventory {
  position: relative;
  width: calc(var(--u) * 176);
  height: calc(var(--u) * 166);
  padding: 0;
  border-width: var(--u);
  border-radius: calc(var(--u) * 2);
  box-shadow: inset calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--gui-light), inset calc(var(--u) * -2) calc(var(--u) * -2) 0 var(--gui-shadow);
  font-size: calc(var(--u) * 7.5);
  justify-self: start;
  user-select: none;
}

.slot {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  padding: 0;
  background: var(--slot-bg);
  border: var(--u) solid;
  border-color: var(--slot-dark) var(--slot-light) var(--slot-light) var(--slot-dark);
  border-radius: 0;
  cursor: pointer;
}
.slot::before {
  /* Gray silhouette of empty armor slots (official sprite). */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--placeholder, none) center / calc(var(--u) * 16) no-repeat;
  image-rendering: pixelated;
}
.slot--filled::before { display: none; }
.slot[data-slot="head"] { --placeholder: url("../texture.php?sprite=slot_head"); }
.slot[data-slot="chest"] { --placeholder: url("../texture.php?sprite=slot_chest"); }
.slot[data-slot="legs"] { --placeholder: url("../texture.php?sprite=slot_legs"); }
.slot[data-slot="feet"] { --placeholder: url("../texture.php?sprite=slot_feet"); }
.slot[data-slot="offhand"] { --placeholder: url("../texture.php?sprite=slot_offhand"); }
.slot--filled { touch-action: none; }
.slot:hover::after, .slot--drop-ok::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .5);
  pointer-events: none;
}
.slot--drop-ko::after { content: ''; position: absolute; inset: 0; background: rgba(255, 60, 60, .45); }
.slot--selected { outline: calc(var(--u) * 1) solid #ffff55; outline-offset: calc(var(--u) * -1); box-shadow: 0 0 0 var(--u) #000; z-index: 1; }
.slot--dragging .icon { opacity: .35; }
.slot:focus-visible { outline: 2px solid #ffff55; z-index: 2; }

.slot .icon { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }

.slot__badge {
  position: absolute;
  right: calc(var(--u) * -0.5);
  bottom: calc(var(--u) * -1.5);
  font-size: calc(var(--u) * 7);
  line-height: 1;
  color: var(--mc-red);
  text-shadow: var(--u) var(--u) 0 #3f1515;
  pointer-events: none;
}
.slot__badge--done { color: var(--mc-green); text-shadow: var(--u) var(--u) 0 #153f15; }

.inventory__slots {
  position: absolute;
  left: calc(var(--u) * 7);
  top: calc(var(--u) * 7);
  display: grid;
}

.slot--offhand { position: absolute; left: calc(var(--u) * 76); top: calc(var(--u) * 61); }

.inventory__player {
  position: absolute;
  left: calc(var(--u) * 25);
  top: calc(var(--u) * 7);
  width: calc(var(--u) * 51);
  height: calc(var(--u) * 72);
  background: #000;
  border: var(--u) solid;
  border-color: var(--slot-dark) var(--slot-light) var(--slot-light) var(--slot-dark);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.inventory__player canvas { width: 100%; height: 100%; display: block; }
.inventory__player--missing canvas { display: none; }
.inventory__player--missing::after { content: '?'; color: #555; font-size: calc(var(--u) * 24); }

.inventory__info {
  position: absolute;
  left: calc(var(--u) * 97);
  top: calc(var(--u) * 7);
  width: calc(var(--u) * 72);
  display: grid;
  gap: calc(var(--u) * 2.5);
  align-content: start;
}
.inventory__count { margin: 0; color: var(--text-soft); font-size: calc(var(--u) * 6.5); }
.inventory__info .mc-field { min-height: 0; height: calc(var(--u) * 13); padding: 0 calc(var(--u) * 3); border-width: var(--u); font-size: calc(var(--u) * 7); }

/* XP bar at the sprite's native 1:1 scale (182x5): keep 7 segments of 10 px
   (columns 0 to 69), then add the sprite's right edge (column 181), instead of
   squeezing all 182 px into the column, which squashed the segments. */
.xpbar, .xpbar__fill {
  --xp-size: calc(var(--u) * 182) 100%;
  box-sizing: border-box;
  padding-right: var(--u);
  background-clip: content-box;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.xpbar::before, .xpbar__fill::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--u);
  height: 100%;
  background: inherit;
  background-clip: border-box;
  background-position: right 0;
}
.xpbar {
  position: relative;
  width: calc(var(--u) * 71);
  height: calc(var(--u) * 5);
  background-image: url("../texture.php?sprite=xp_background");
  background-size: var(--xp-size);
}
.xpbar__fill {
  position: absolute;
  inset: 0;
  background-image: url("../texture.php?sprite=xp_progress");
  background-size: var(--xp-size);
  clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
}


.inventory__grid, .inventory__hotbar {
  position: absolute;
  left: calc(var(--u) * 7);
  display: grid;
  grid-template-columns: repeat(9, calc(var(--u) * 18));
}
.inventory__grid { top: calc(var(--u) * 83); }
.inventory__hotbar { top: calc(var(--u) * 141); }

.icon { display: inline-grid; place-items: center; position: relative; }
.icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.icon--missing { font-size: 11px; color: #fff; background: #555; text-transform: uppercase; }

/* Enchantment glint: animated purple gradient masked by the icon's shape. */
.icon--glint::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(200, 120, 255, .65) 40%, transparent 55%, rgba(160, 90, 255, .45) 75%, transparent 90%) 0 0 / 300% 300%;
  mix-blend-mode: screen;
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
  animation: glint 3.2s linear infinite;
}
@keyframes glint { from { background-position: 100% 100%; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .icon--glint::after { animation: none; background-position: 50% 50%; } }

.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  margin: calc(var(--u) * -8) 0 0 calc(var(--u) * -8);
}
.drag-ghost .icon { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }

/* ------------------------------------------------------------------ game-style tooltip */

.tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  max-width: 320px;
  padding: 5px 7px 6px;
  background: rgba(16, 0, 16, .94);
  border: 2px solid #100010;
  box-shadow: inset 0 0 0 2px #2a0b5e;
  outline: 2px solid rgba(80, 0, 255, .55);
  outline-offset: -4px;
  color: var(--mc-gray);
  text-shadow: 2px 2px 0 #2a2a2a;
  pointer-events: none;
  font-size: 16px;
}
.tt__name { color: #fff; margin-bottom: 2px; }
.tt__name--enchanted { color: var(--mc-aqua); text-shadow: 2px 2px 0 #153f3f; }
.tt__name--custom { font-style: italic; }
.tt__line--curse { color: var(--mc-red); text-shadow: 2px 2px 0 #3f1515; }
.tt__line--missing { color: var(--mc-dark-gray); text-shadow: 2px 2px 0 #151515; }
.tt__tag { font-size: 13px; }
.tt__line--meta { color: var(--mc-dark-gray); text-shadow: 2px 2px 0 #151515; }
.tt__line--progress { color: #5555ff; text-shadow: 2px 2px 0 #15153f; margin-top: 2px; }

/* ------------------------------------------------------------------ side panel */

.panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  min-width: 0;
}

.panel__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.panel__name { margin: 0; overflow-wrap: anywhere; }
.panel__sub { margin: 0; color: var(--text-soft); font-size: 14px; }
.panel__group { margin: 16px 0 6px; font-size: 16px; color: var(--text); }
.panel__group--curse { color: #a42a2a; }
.panel__note { padding: 8px 10px; background: #b5b5b5; border-left: 4px solid #707070; }
.panel__help { padding-left: 18px; color: var(--text-soft); }
.panel__help li + li { margin-top: 6px; }
.panel__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 2px solid #a8a8a8; }

.slot--static { --u: 2px; cursor: default; flex: none; }
.slot--static:hover::after { display: none; }
.slot--big { --u: 3px; }

.fields { display: grid; gap: 8px; }
.field { display: grid; gap: 2px; font-size: 14px; color: var(--text-soft); }

.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.picker__item {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 2px solid transparent;
  background: #b9b9b9;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  text-align: center;
}
.picker__item:hover { border-color: #fff; background: #d2d2d2; }
.picker__item .slot { pointer-events: none; }

.equip { display: grid; gap: 4px; margin-top: 12px; justify-items: start; }
.equip small { color: var(--text-soft); }

.alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alts__row { display: flex; align-items: center; gap: 8px; }
.alts__name { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.alts__name small { color: var(--text-soft); }

.bis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  background: #b3b3b3;
  border: 2px solid;
  border-color: #8b8b8b #e0e0e0 #e0e0e0 #8b8b8b;
}
.bis__label { font-weight: 600; }
.bis .mc-field { width: auto; flex: 1 1 120px; }
.bis__preview { flex-basis: 100%; font-size: 13px; color: var(--text-soft); }

.ench-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
.ench-head .panel__group { margin: 6px 0; }
.ench-head__actions { display: flex; gap: 6px; }

.ench { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ench__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 8px;
  padding: 5px 8px;
  background: #b9b9b9;
  border: 2px solid transparent;
}
.ench__row--active { background: #d6d6d6; border-color: #8b8b8b; }
.ench__row--blocked { opacity: .6; }
.ench__row--curse .ench__name span:first-of-type { color: #a42a2a; }
.ench__name { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; flex-wrap: wrap; }
.ench__row--blocked .ench__name { cursor: not-allowed; }
.ench__reason { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #8a2020; }

.levels { display: flex; }
.levels__btn {
  min-width: 30px;
  height: 28px;
  padding: 0 4px;
  border: 2px solid #000;
  margin-left: -2px;
  background: var(--slot-bg);
  color: #fff;
  text-shadow: 1px 1px 0 #3f3f3f;
  cursor: pointer;
  font-size: 13px;
}
.levels__btn:hover:not(:disabled) { background: var(--btn-hover); }
.levels__btn[aria-pressed='true'] { background: #5a6ad0; box-shadow: inset 0 0 0 2px #bdc6ff; }
.levels__btn:disabled { cursor: not-allowed; }

.status {
  min-width: 92px;
  height: 28px;
  padding: 0 8px;
  border: 2px solid #000;
  color: #fff;
  text-shadow: 1px 1px 0 #3f3f3f;
  cursor: pointer;
  font-size: 13px;
}
.status--missing { background: var(--ko); }
.status--applied { background: var(--ok); }

/* ------------------------------------------------------------------ books list */

.shopping { max-width: calc(var(--u) * 176); min-width: 0; }
.shopping__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.shopping__head .gui__title { margin: 0; }
.shopping__hint, .shopping__summary, .shopping__empty { margin: 6px 0 10px; color: var(--text-soft); font-size: 14px; }
.shopping__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shopping__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: #b9b9b9;
}
.shopping__row--done { background: #a9c9a4; }
.shopping__row--done strong { text-decoration: line-through; }
.shopping__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.shopping__qty { color: var(--text-soft); }
.shopping__items { font-size: 13px; color: var(--text-soft); overflow-wrap: anywhere; }
.checks { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; max-width: 160px; }
.stepper { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ dialogs, toast */

.dialog {
  width: min(640px, calc(100vw - 32px));
  color: var(--text);
}
.dialog::backdrop { background: rgba(0, 0, 0, .65); }
.dialog--confirm { width: min(440px, calc(100vw - 32px)); }
.dialog__text { min-height: 260px; font-family: ui-monospace, 'Courier New', monospace; font-size: 13px; resize: vertical; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.dialog__error { color: #8a2020; margin: 8px 0 0; white-space: pre-wrap; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 14px;
  background: rgba(16, 0, 16, .94);
  border: 2px solid #5000ff;
  color: #fff;
  text-shadow: 2px 2px 0 #2a2a2a;
  white-space: pre-line;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  /* On mobile: inventory, then inspector panel, then books list. */
  .layout__main { display: contents; }
  .inventory { justify-self: center; order: 1; }
  .panel { position: static; max-height: none; scroll-margin-top: 12px; order: 2; }
  .shopping { max-width: none; width: 100%; order: 3; }
}

@media (max-width: 480px) {
  .topbar__title { font-size: 22px; }
  .gui { padding: 12px; }
  .ench__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ench__row .levels { grid-column: 1 / -1; grid-row: 2; }
  .shopping__row { grid-template-columns: auto minmax(0, 1fr); }
  .shopping__row .checks, .shopping__row .stepper { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}