/*
  style.css - Minecraft GUI | Portfolio Project
  Minecraft-faithful inventory UI styles
*/

/* ================================================================
   0. LOCAL FONT
*/

@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   1. CSS CUSTOM PROPERTIES
*/

:root {
  /* Slot sizing */
  --slot-size: 48px;            /* width & height of each inventory slot */
  --slot-gap:   4px;            /* gap between slots in the grid */

  /* Panel width - 9 slots + 8 gaps + 2×12px padding + 2×3px border */
  --panel-width: calc(9 * var(--slot-size) + 8 * var(--slot-gap) + 2 * 12px + 2 * 3px);

  /* Minecraft UI palette */
  --mc-bg:      #c6c6c6;      /* panel background grey */
  --mc-darker:  #373737;      /* dark border edge (bottom-right bevel) */
  --mc-light:   #ffffff;      /* light border edge (top-left bevel) */
  --mc-slot:    #8b8b8b;      /* empty slot fill */
  --mc-label:   #3d3d3d;      /* section label text */

  /* Page */
  --page-bg:    #f0f0f0;      /* outer page background */
  --title:      #3a3a3a;      /* page heading color */
  --footer:     #aaaaaa;      /* footer text color */

  /* Tooltip */
  --tooltip-bg:     #100010;  /* dark purple-black background */
  --tooltip-border: #ffffff;  /* white border */
  --tooltip-text:   #ffffff;  /* white text */
}

/* ================================================================
   2. RESET
*/

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

/* ================================================================
   3. BASE BODY STYLES
*/

body {
  min-height: 100vh;
  background: var(--page-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  padding: 40px 20px;
}

/* ================================================================
   4. PAGE TITLE
*/

h1 {
  font-size: 10px;
  color: var(--title);
  letter-spacing: 2px;
  margin-bottom: 32px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* ================================================================
   5. WORKSPACE
*/

/* Outer flex container, centres the panel horizontally */
.workspace {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

/* ================================================================
   6. MC PANEL
*/

/* Classic Minecraft bevelled window frame */
.mc-panel {
  background: var(--mc-bg);
  border: 3px solid;
  border-color: var(--mc-light) var(--mc-slot) var(--mc-slot) var(--mc-light);
  box-shadow:
    inset -2px -2px 0 var(--mc-darker),
    inset  2px  2px 0 var(--mc-light);
  padding: 12px;
}

/* ================================================================
   7. GUI LAYOUT
*/

/* Vertical stack: Bag section → Inventory section → spacer */
.hopper-gui {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Small section labels (e.g. "Bag", "Inventory") */
.gui-label {
  font-size: 7px;
  color: var(--mc-label);
  margin-bottom: 4px;
}

/* ================================================================
   8. SLOT
*/

.slot {
  width: var(--slot-size);
  height: var(--slot-size);
  background: var(--mc-slot);
  border: 3px solid;
  /* Inset bevel: dark top-left, light bottom-right */
  border-color: var(--mc-darker) var(--mc-light) var(--mc-light) var(--mc-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: default;
  transition: border-color .08s;
  position: relative;
}

/* Occupied slots, show grab cursor */
.slot[data-item-id]        { cursor: grab; }
.slot[data-item-id]:active { cursor: grabbing; }

/* Highlight border when hovering an occupied slot */
.slot[data-item-id]:hover  { border-color: whitesmoke; }

/* Highlight when an item is being dragged over this slot */
.slot.drag-over {
  background: #a0a0a0;
  border-color: whitesmoke;
}

/*
  Item count badge, shown in the bottom-right corner of each occupied slot.
  The number is set via the data-count attribute and rendered via CSS counter.
*/
.slot[data-count]::after {
  content: attr(data-count);
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
  line-height: 1;
}

/*
  Canvas inside each slot.
  Pixel dimensions are set in JS (IMG_PX × DPR).
  No CSS scaling, prevents bilinear interpolation blur on pixel art.
*/
.slot canvas,
.slot img {
  display: block;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;     /* Chrome / Firefox */
  image-rendering: crisp-edges;   /* Safari fallback  */
}

/* ================================================================
   9. ITEM ENTRANCE ANIMATION
   Each item fades in and pops up slightly when placed.
   Applied by JS via the .item-enter class; removed after the animation ends.
*/

@keyframes item-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1);   }
}

.item-enter {
  animation: item-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ================================================================
   10. GRIDS
*/

.grid        { display: grid; gap: var(--slot-gap); }
.hopper-row  { grid-template-columns: repeat(5, var(--slot-size)); }  /* 5  slots - Bag     */
.inv-grid    { grid-template-columns: repeat(9, var(--slot-size)); }  /* 27 slots - 3 rows  */
.hotbar-grid { grid-template-columns: repeat(9, var(--slot-size)); }  /* 9  slots - Hotbar  */

/* Visual gap between the main inventory rows and the hotbar */
.gap-row { height: 4px; }

/* ================================================================
   11. TOOLTIP
*/

/* Floating name label, displayed on mouseover occupied slots */
#tooltip {
  display: none;
  position: fixed;
  background: var(--tooltip-bg);
  border: 2px solid var(--tooltip-border);
  color: var(--tooltip-text);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 5px 8px;
  pointer-events: none;
  z-index: 99999;
  white-space: nowrap;
  line-height: 1.6;
  box-shadow: 2px 2px 0 #320032;
}

/* ================================================================
   12. BOTTOM SPACER
*/

/* Maintains panel height consistent with the original Minecraft GUI */
.gui-bottom-spacer { height: 10px; }

/* ================================================================
   13. FIRST-VISIT HINT PANEL
   Appears centered over the page on first load, fades out on dismiss.
*/

.hint-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  background: var(--mc-bg);
  border: 3px solid;
  border-color: var(--mc-light) var(--mc-slot) var(--mc-slot) var(--mc-light);
  box-shadow:
    inset -2px -2px 0 var(--mc-darker),
    inset  2px  2px 0 var(--mc-light),
    0 8px 40px rgba(0, 0, 0, 0.45);
  padding: 20px 24px;
  width: 280px;
  animation: hint-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hint-panel[hidden] { display: none; }

/* Fade + scale out when dismissed */
.hint-panel.hint-hiding {
  animation: hint-out 0.25s ease forwards;
  pointer-events: none;
}

@keyframes hint-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
}

@keyframes hint-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
  to   { opacity: 0; transform: translate(-50%, -52%) scale(0.95); }
}

.hint-panel__title {
  font-size: 8px;
  color: var(--mc-label);
  letter-spacing: 1px;
  margin-bottom: 14px;
  text-transform: uppercase;
  text-align: center;
}

.hint-panel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.hint-panel__list li {
  font-size: 6px;
  color: var(--mc-label);
  line-height: 1.8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.hint-panel__icon {
  font-size: 10px;
  flex-shrink: 0;
  color: var(--mc-darker);
}

/* Blinking dismiss prompt */
.hint-panel__dismiss {
  font-size: 6px;
  color: var(--mc-slot);
  text-align: center;
  letter-spacing: 0.5px;
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ================================================================
   14. PANEL ACTIONS
*/

/* Row that holds the "Bag" label and the icon buttons side by side */
.bag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

/* The label inside bag-header doesn't need its own bottom margin anymore */
.bag-header .gui-label { margin-bottom: 0; }

/* Wrapper that keeps the two icon buttons together */
.panel-actions {
  display: flex;
  gap: 4px;
}

/* Small square Minecraft-style icon button */
.mc-icon-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--mc-label);
  background: var(--mc-bg);
  border: 2px solid;
  border-color: var(--mc-light) var(--mc-slot) var(--mc-slot) var(--mc-light);
  box-shadow:
    inset -1px -1px 0 var(--mc-darker),
    inset  1px  1px 0 var(--mc-light);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  user-select: none;
  transition: filter .08s;
}

.mc-icon-btn:hover  { filter: brightness(1.08); }
.mc-icon-btn:active {
  /* Pressed state, invert bevel */
  border-color: var(--mc-slot) var(--mc-light) var(--mc-light) var(--mc-slot);
  box-shadow:
    inset  1px  1px 0 var(--mc-darker),
    inset -1px -1px 0 var(--mc-light);
}

/* ================================================================
   15. INSPECTOR MODAL
*/

/* Full-screen dark overlay */
.inspector-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  /* Fade in */
  animation: overlay-in 0.15s ease forwards;
}

.inspector-overlay[hidden] {
  display: none;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The modal panel itself */
.inspector-panel {
  position: relative;
  background: var(--mc-bg);
  border: 3px solid;
  border-color: var(--mc-light) var(--mc-slot) var(--mc-slot) var(--mc-light);
  box-shadow:
    inset -2px -2px 0 var(--mc-darker),
    inset  2px  2px 0 var(--mc-light),
    0 8px 32px rgba(0,0,0,0.6);
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 380px;
  width: 90vw;
  /* Pop in */
  animation: panel-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes panel-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Large item preview */
.inspector-icon-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--mc-slot);
  border: 3px solid;
  border-color: var(--mc-darker) var(--mc-light) var(--mc-light) var(--mc-darker);
  display: flex;
  align-items: center;
  justify-content: center;
}

#inspector-canvas {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Text section */
.inspector-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.inspector-label {
  font-size: 6px;
  color: var(--mc-slot);
  letter-spacing: 2px;
}

.inspector-name {
  font-size: 9px;
  color: var(--mc-label);
  word-break: break-word;
  line-height: 1.6;
}

.inspector-id {
  font-size: 6px;
  color: var(--mc-slot);
  font-style: italic;
}

.inspector-desc {
  font-size: 7px;
  color: #555;
  line-height: 1.8;
  margin-top: 4px;
}

/* Close (✕) button - top-right corner */
.inspector-close {
  position: absolute;
  top: 6px;
  right: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--mc-label);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.inspector-close:hover { color: #000; }

/* ================================================================
   16. FOOTER
*/

.site-footer {
  margin-top: 3px;
  padding: 10px 14px;
  width: 100%;
  max-width: var(--panel-width);   /* aligns with the GUI panel width */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 7px;
  letter-spacing: 1px;

  /* Bevelled panel - mirrors .mc-panel */
  background: var(--mc-bg);
  border: 3px solid;
  border-color: var(--mc-light) var(--mc-slot) var(--mc-slot) var(--mc-light);
  box-shadow:
    inset -2px -2px 0 var(--mc-darker),
    inset  2px  2px 0 var(--mc-light);
}

.site-footer__copy  { color: var(--mc-label); }
.site-footer__sep   { color: var(--mc-slot);  }
.site-footer__name  { color: var(--footer);   }