/* ─── FULL CUSTOM DIALOG CONTAINER OVERRIDE ─── */



/* 1. The wrapper element handles the frame dimensions and positioning constraints */
.enchanted-canvas {
  position: relative;
  display: inline-block;
  width: 64px;  /* Match your shield display width */
  height: 64px; /* Match your shield display height */
  overflow: hidden; /* Keeps the moving shine corners clipped cleanly to the box */
}

/* Force the child canvas to fill the wrapper layout perfectly */
.enchanted-canvas canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Sits cleanly beneath the overlay */
  image-rendering: pixelated;
}

/* 2. The Pseudo-Overlay forces the purple magic glint directly on TOP of the canvas */
.enchanted-canvas::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Crucial: Sits on top of the canvas, not underneath it */
  
  /* The moving enchantment sheen purple gradient stripes */
  background: repeating-linear-gradient(
    45deg,
    rgba(128, 0, 128, 0.0) 0px,
    rgba(128, 0, 128, 0.0) 15px,
    rgba(216, 112, 147, 0.5) 25px,
    rgba(75, 0, 130, 0.6) 35px,
    rgba(128, 0, 128, 0.0) 45px
  );
  background-size: 200% 200%;
  
  /* Color-dodge brightens up the underlying pixels on the canvas dynamically */
  mix-blend-mode: color-dodge; 
  animation: mcGlint 2.2s linear infinite;
  
  /* Ensures hover tooltips and item click actions fall straight through the wrapper layer */
  pointer-events: none; 
}



/* Apply this class directly to your generated <canvas> element */
.enchanted-canvasOLDER {
  position: relative;
  display: inline-block;
  image-rendering: pixelated; /* Retains crisp retro pixel details */
}

/* The magic trick: attach the animated overlay straight to the element structure */
.enchanted-canvasOLDER::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* The moving enchantment sheen purple gradient stripes */
  background: repeating-linear-gradient(
    45deg,
    rgba(128, 0, 128, 0.0) 0px,
    rgba(128, 0, 128, 0.0) 15px,
    rgba(216, 112, 147, 0.5) 25px,
    rgba(75, 0, 130, 0.6) 35px,
    rgba(128, 0, 128, 0.0) 45px
  );
  background-size: 200% 200%;
  
  /* mix-blend-mode bypasses the canvas animation isolation bug */
  mix-blend-mode: color-dodge; 
  
  /* Triggers the movement loop */
  animation: mcGlint 2.2s linear infinite;
  pointer-events: none; /* Mouse actions drop straight down into the element */
}




/* Apply this class directly to your <canvas> element */
.enchanted-canvasOLD {
  position: relative;
  display: inline-block;
  image-rendering: pixelated; /* Keeps pixel texture crisp */

  /* 1. Layer the moving enchantment glint behind/onto the element canvas */
  background: repeating-linear-gradient(
    45deg,
    rgba(128, 0, 128, 0.0) 0px,
    rgba(128, 0, 128, 0.0) 15px,
    rgba(216, 112, 147, 0.5) 25px,
    rgba(75, 0, 130, 0.6) 35px,
    rgba(128, 0, 128, 0.0) 45px
  );
  //background-size: 200% 200%;
   /* 2. CRITICAL: Force the gradient background to double the size of the canvas */
  background-size: 128px 128px; /* Assuming your canvas display size is 64px x 64px */
  background-repeat: repeat;
  
  /* 2. The secret trick: blend the background gradient right onto the canvas pixels */
  background-blend-mode: color-dodge;
  
  /* 3. Animation loop */
  animation: mcGlint 2.2s linear infinite;
}

@keyframes mcGlint {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -200% -200%;
  }
}


.ui-dialog.custom-modern-modal {
    background: #141419 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden;
}

/* The container grid box */
.inventory-slot {
  width: 48px;
  height: 48px;
  background: #8b8b8b;
  border: 3px solid #373737;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 1. Relative structural positioning box around the canvas */
.canvas-wrapper {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure the canvas sits properly inside the slot boundaries */
.canvas-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* 2. The Enchantment Layer Overlay sits exactly over the canvas block */
.enchanted-glint .canvas-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* The moving purple glint lines */
  background: repeating-linear-gradient(
    45deg,
    rgba(128, 0, 128, 0.0) 0px,
    rgba(128, 0, 128, 0.0) 15px,
    rgba(200, 100, 255, 0.6) 25px,
    rgba(100, 30, 200, 0.7) 35px,
    rgba(128, 0, 128, 0.0) 45px
  );
  background-size: 200% 200%;
  
  /* Color dodge lights up the underlying canvas artwork pixels dynamically */
  mix-blend-mode: color-dodge;
  animation: shine 2.2s linear infinite;
  pointer-events: none;
}

@keyframes shine {
  0% { background-position: 0% 0%; }
  100% { background-position: -200% -200%; }
}



.enchanted-glintold::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* The moving magic sheen: repeating purple stripes at a 45-degree angle */
  background: repeating-linear-gradient(
    45deg,
    rgba(128, 0, 128, 0.0) 0px,
    rgba(128, 0, 128, 0.0) 20px,
    rgba(216, 112, 147, 0.4) 30px,
    rgba(75, 0, 130, 0.5) 40px,
    rgba(128, 0, 128, 0.0) 50px
  );
  background-size: 200% 200%;
  
  /* Blends into the item art under it dynamically */
  mix-blend-mode: color-dodge; 
  
  /* Triggers the loop animation */
  animation: shine 2.5s linear infinite;
  pointer-events: none; /* Allows pointer clicks to pass straight through to item */
}

/* Keyframes moving the glint diagonal layout coordinates */
@keyframes shineOLD {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -200% -200%;
  }
}


.item-icon {
      width: 34px;
      height: 34px;
      image-rendering: pixelated; /* Forces retro pixel clarity */
      object-fit: contain;
}

.hdr2 {
    color: brown;
text-transform: capitalize;
}

.hdr, .hdr3 {
    color: gold;
    font-variant-caps: small-caps;
}

/* ─── MODAL HEADER / TITLE BAR ─── */
.ui-dialog.custom-modern-modal .ui-dialog-titlebar {
    background: rgba(255, 255, 255, 0.02) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 18px 24px !important;
    border-radius: 16px 16px 0 0 !important;
}

.ui-dialog.custom-modern-modal .ui-dialog-title {
    color: #ffffff !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.3px;
}

/* ─── THE MODAL INTERIOR WINDOW CONTENT ─── */
.ui-dialog.custom-modern-modal .ui-dialog-content {
    color: #b0b0bc !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    padding: 24px !important;
    
    /* Dynamic Local Vertical Scrolling Configuration */
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ─── LIGHTNING RESPONSIVE SCROLLBAR ─── */
.ui-dialog.custom-modern-modal .ui-dialog-content::-webkit-scrollbar {
    width: 6px;
}
.ui-dialog.custom-modern-modal .ui-dialog-content::-webkit-scrollbar-track {
    background: transparent;
}
.ui-dialog.custom-modern-modal .ui-dialog-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
.ui-dialog.custom-modern-modal .ui-dialog-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ─── LOWER BUTTON DRAWER INTERACTION BAR ─── */
.ui-dialog.custom-modern-modal .ui-dialog-buttonpane {
    background: rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin: 0 !important;
    padding: 14px 24px !important;
}

/* ─── STYLIZED ACTION BUTTONS ─── */
.ui-dialog.custom-modern-modal .ui-dialog-buttonset button {
    background: #00ffcc !important;
    color: #050508 !important;
    border: none !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 8px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.ui-dialog.custom-modern-modal .ui-dialog-buttonset button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.4);
}

/* ─── HEADER INLINE CLOSING X ACCELERATOR BUTTON ─── */
.ui-dialog.custom-modern-modal .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    color: #aaaaaa !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.ui-dialog.custom-modern-modal .ui-dialog-titlebar-close::after {
    content: "✕";
    color: #888;
    font-weight: bold;
}
.ui-dialog.custom-modern-modal .ui-dialog-titlebar-close .ui-icon {
    display: none !important; /* Hides default low-res sprite icons */
}

/* ─── SEMI-TRANSPARENT BACKGROUND LAYER COVER OVERLAY ─── */
.ui-widget-overlay.custom-modal-backdrop {
    background: #050508 !important;
    opacity: 0.75 !important;
    backdrop-filter: blur(4px);
}