@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;700&display=swap');

@font-face {
  font-family: "Minecraft";
  src: url("https://minecraft.wiki/images/Minecraft.woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  color-scheme: dark;
  --mc-font: "Minecraft", "Pixelify Sans", monospace;
}

/* ─── Reset ────────────────────────────────────────────────────────────────── */

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

html,
body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top, rgba(80, 90, 120, 0.35), transparent 35%),
    linear-gradient(180deg, #11131a 0%, #08090d 100%);
  color: #f0e8d6;
  font-family: var(--mc-font);
}

/* ─── Layout ────────────────────────────────────────────────────────────────── */

main {
  min-height: 100vh;
}

.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  position: relative;
  z-index: 100;
}

.inventory-panel {
  display: grid;
  justify-items: center;
  gap: 12px;
}

/* ─── Tabs ────────────────────────────────────────────────────────────────── */

.inventory-tabs {
  display: flex;
  gap: 0;
  position: absolute;
  top: -48px;
  left: 0;
}

.inventory-tab {
  position: relative;
  width: 52px;
  height: 56px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  z-index: 50;
}

.inventory-tab.active {
  z-index: 150;
}



.tab-bg {
  position: absolute;
  inset: 0;
  width: 52px;
  height: 56px;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Default state: show unselected */
.inventory-tab .tab-selected {
  display: none;
}

.inventory-tab .tab-unselected {
  display: block;
}

/* Active state: show selected */
.inventory-tab.active .tab-selected {
  display: block;
}

.inventory-tab.active .tab-unselected {
  display: none;
}

/* Hover state: show selected (like in Minecraft creative) */
.inventory-tab:not(.active):hover {
  z-index: 150;
}

.inventory-tab:not(.active):hover .tab-selected {
  display: block;
}

.inventory-tab:not(.active):hover .tab-unselected {
  display: none;
}

.tab-icon {
  position: relative;
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  z-index: 10;
  pointer-events: none;
}

/* ─── Inventory frame ────────────────────────────────────────────────────── */

.inventory-frame {
  position: relative;
  width: 352px;
  height: 332px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  user-select: none;
}

.inventory-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/minecraft/textures/gui/container/inventory_2.png') no-repeat;
  background-size: 352px 332px;
  z-index: 100;
  pointer-events: none;
}

.inventory-viewport {
  position: absolute;
  inset: 0;
  z-index: 200;
}

/* ─── Slots ──────────────────────────────────────────────────────────────── */

.inventory-slot {
  position: absolute;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  image-rendering: pixelated;
  z-index: 10;
}

/* ─── Empty slot background icons ────────────────────────────────────────── */

.inventory-slot.slot-bg-head {
  background-image: url('/assets/minecraft/textures/gui/sprites/container/slot/helmet.png');
}
.inventory-slot.slot-bg-chest {
  background-image: url('/assets/minecraft/textures/gui/sprites/container/slot/chestplate.png');
}
.inventory-slot.slot-bg-legs {
  background-image: url('/assets/minecraft/textures/gui/sprites/container/slot/leggings.png');
}
.inventory-slot.slot-bg-feet {
  background-image: url('/assets/minecraft/textures/gui/sprites/container/slot/boots.png');
}
.inventory-slot.slot-bg-offhand {
  background-image: url('/assets/minecraft/textures/gui/sprites/container/slot/shield.png');
}

/* Hide background icon when slot has item */
.inventory-slot.has-item {
  background-image: none !important;
}

/* ─── Slot highlight (vanilla Minecraft) ─────────────────────────────────── */
/* Back highlight: behind item, for gui_light:"side" (3D blocks) */

.inventory-slot .slot-highlight-back {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.376);
  pointer-events: none;
  z-index: 0;
  display: none;
}

/* Front highlight: on top of item, for gui_light:"front" (flat sprites) */

.inventory-slot .slot-highlight-front {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.125);
  pointer-events: none;
  z-index: 10;
  display: none;
}

/* Show highlights on hover */
.inventory-slot:hover .slot-highlight-back {
  display: block;
}
.inventory-slot:hover .slot-highlight-front {
  display: block;
}

/* ─── Item wrapper ───────────────────────────────────────────────────────── */

.inventory-item {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
  /* Убираем subpixel blur — иконки должны быть чёткими */
  image-rendering: pixelated;
  z-index: 5;
}

/* ─── Cursor ghost (item following cursor) ───────────────────────────────── */

.cursor-item-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.cursor-item-ghost .inventory-icon {
  width: 32px;
  height: 32px;
}

.cursor-item-ghost .inventory-badge-canvas {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 100;
  image-rendering: pixelated;
}

/* ─── Icon canvas ────────────────────────────────────────────────────────── */

.inventory-icon {
  display: block;
  width: 32px;
  height: 32px;
  image-rendering: auto;
  pointer-events: none;
}

/* (glint is drawn directly on the item canvas — no extra element needed) */

/* ─── Stack count badge ──────────────────────────────────────────────────── */

.inventory-badge-canvas {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 100;
  image-rendering: pixelated;
}

/* ─── Tooltip (canvas-rendered, authentic Minecraft) ─────────────────────── */

.inventory-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ─── Hint text ──────────────────────────────────────────────────────────── */

.inventory-hint {
  font-size: 10px;
  font-family: var(--mc-font);
  opacity: 0.7;
  text-align: center;
  letter-spacing: 0.5px;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .page-shell {
    padding: 16px;
  }

  .inventory-frame {
    /*
      На мобиле масштабируем весь фрейм.
      transform-origin: top center — чтобы не уходил за экран.
    */
    transform: scale(0.85);
    transform-origin: top center;
  }

  .inventory-panel {
    gap: 6px;
  }

  .inventory-hint {
    font-size: 9px;
  }
}