@hytopia.com/examples 1.0.2 → 1.0.4

package/frontiers-rpg-game/assets/ui/menus/backpack.html

@@ -0,0 +1,981 @@
+<!-- Backpack UI -->
+<div class="backpack-overlay">
+  <div class="backpack-container">
+    <div class="backpack-header">
+      <h2 class="backpack-title">Backpack</h2>
+      <button class="backpack-close">×</button>
+    </div>
+    
+    <div class="backpack-content">
+      <!-- Character Wearables Panel -->
+      <div class="backpack-wearables-panel">
+        <div class="backpack-wearables-slots">
+          <!-- Top row: Helmet -->
+          <div class="backpack-wearable-slot-spacer"></div>
+          <div class="backpack-wearable-slot" data-slot="helmet">
+            <div class="backpack-wearable-slot-label">Helmet</div>
+          </div>
+          <div class="backpack-wearable-slot-spacer"></div>
+          
+          <!-- Middle row: Gloves, Armor, Accessory -->
+          <div class="backpack-wearable-slot" data-slot="gloves">
+            <div class="backpack-wearable-slot-label">Gloves</div>
+          </div>
+          <div class="backpack-wearable-slot" data-slot="armor">
+            <div class="backpack-wearable-slot-label">Armor</div>
+          </div>
+          <div class="backpack-wearable-slot" data-slot="accessory">
+            <div class="backpack-wearable-slot-label">Accessory</div>
+          </div>
+          
+          <!-- Bottom row: Leggings -->
+          <div class="backpack-wearable-slot-spacer"></div>
+          <div class="backpack-wearable-slot" data-slot="leggings">
+            <div class="backpack-wearable-slot-label">Leggings</div>
+          </div>
+          <div class="backpack-wearable-slot-spacer"></div>
+          
+          <!-- Bottom row: Boots -->
+          <div class="backpack-wearable-slot-spacer"></div>
+          <div class="backpack-wearable-slot" data-slot="boots">
+            <div class="backpack-wearable-slot-label">Boots</div>
+          </div>
+          <div class="backpack-wearable-slot-spacer"></div>
+        </div>
+      </div>
+      
+      <!-- Main Backpack Grid -->
+      <div class="backpack-grid-container">
+        <div class="backpack-grid" id="backpack-grid">
+          <!-- Grid slots will be generated by JavaScript -->
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Hotbar Container -->
+  <div class="backpack-hotbar-container">
+    <div class="backpack-hotbar-header">
+      <h3 class="backpack-hotbar-title">Hotbar</h3>
+    </div>
+    <div class="backpack-hotbar-grid" id="backpack-hotbar-grid">
+      <!-- Hotbar slots will be generated by JavaScript -->
+    </div>
+  </div>
+</div>
+
+<script>
+  // Configuration
+  const BACKPACK_CONFIG = {
+    slots: 18,
+    rowWidth: 6,
+    hotbarSlots: 8
+  };
+
+  // Wearable slot to position mapping (matches Wearables.ts)
+  const WEARABLE_SLOT_POSITIONS = {
+    helmet: 0,
+    armor: 1,
+    gloves: 2,
+    leggings: 3,
+    boots: 4,
+    accessory: 5
+  };
+
+  // Setup hytopia data handlers
+  hytopia.onData(data => {
+    if (data.type === 'toggleBackpack') {
+      toggleBackpack();
+    }
+    
+    if (data.type === 'hotbarUpdate') {
+      updateHotbarSlot(data.position, data);
+    }
+    
+    if (data.type === 'backpackUpdate') {
+      updateBackpackSlot(data.position, data);
+    }
+    
+    if (data.type === 'wearablesUpdate') {
+      updateWearablesSlot(data.position, data);
+    }
+  });
+
+  // Initialize backpack system
+  function initializeBackpack() {
+    createBackpackSlots();
+    createHotbarSlots();
+    setupEventListeners();
+  }
+
+  function createBackpackSlots() {
+    const grid = document.getElementById('backpack-grid');
+    grid.innerHTML = '';
+    
+    for (let i = 0; i < BACKPACK_CONFIG.slots; i++) {
+      const slot = document.createElement('div');
+      slot.className = 'backpack-slot';
+      slot.dataset.slotIndex = i;
+      slot.innerHTML = '<div class="backpack-slot-content"></div>';
+      grid.appendChild(slot);
+    }
+  }
+
+  function createHotbarSlots() {
+    const grid = document.getElementById('backpack-hotbar-grid');
+    grid.innerHTML = '';
+    
+    for (let i = 0; i < BACKPACK_CONFIG.hotbarSlots; i++) {
+      const slot = document.createElement('div');
+      slot.className = 'backpack-hotbar-slot';
+      slot.dataset.hotbarIndex = i;
+      slot.innerHTML = `<div class="backpack-hotbar-slot-content">${i + 1}</div>`;
+      grid.appendChild(slot);
+    }
+  }
+
+  function setupEventListeners() {
+    const closeButton = document.querySelector('.backpack-close');
+    closeButton.addEventListener('click', closeBackpack);
+
+    let heldItem = null;
+    const mouseFollower = createMouseFollower();
+
+    // Helper function to get slot info
+    function getSlotInfo(slot) {
+      if (slot.dataset.slotIndex) {
+        return { type: 'backpack', index: slot.dataset.slotIndex };
+      } else if (slot.dataset.slot) {
+        return { type: 'wearables', index: WEARABLE_SLOT_POSITIONS[slot.dataset.slot] };
+      } else if (slot.dataset.hotbarIndex) {
+        return { type: 'hotbar', index: slot.dataset.hotbarIndex };
+      }
+      return { type: 'unknown', index: null };
+    }
+
+    // Helper function to check if slot has content
+    function hasContent(slot) {
+      // For wearable slots, check if there's an item icon
+      if (slot.classList.contains('backpack-wearable-slot')) {
+        return slot.querySelector('.backpack-item-icon') !== null;
+      }
+      // For backpack and hotbar slots, check content containers
+      const content = slot.querySelector('.backpack-slot-content, .backpack-hotbar-slot-content');
+      return content && content.children.length > 0;
+    }
+
+    // Helper function to get slot content
+    function getSlotContent(slot) {
+      // For wearable slots, the slot itself is the content container
+      if (slot.classList.contains('backpack-wearable-slot')) {
+        return slot;
+      }
+      // For backpack and hotbar slots, get the content container
+      return slot.querySelector('.backpack-slot-content, .backpack-hotbar-slot-content');
+    }
+
+    // Create and setup mouse follower
+    function createMouseFollower() {
+      const follower = document.createElement('div');
+      follower.className = 'backpack-mouse-follower';
+      document.body.appendChild(follower);
+      
+      document.addEventListener('mousemove', e => {
+        if (heldItem) {
+          follower.style.left = e.clientX + 'px';
+          follower.style.top = e.clientY + 'px';
+        }
+      });
+      
+      return follower;
+    }
+
+    // Handle item pickup
+    function pickupItem(slot, slotInfo, mouseX, mouseY) {
+      if (!hasContent(slot)) return false;
+      
+      const content = getSlotContent(slot);
+      const tooltip = slot.querySelector('.backpack-item-tooltip');
+      
+      // For wearable slots, we need to capture just the item content, not the whole slot
+      let contentHTML;
+      if (slot.classList.contains('backpack-wearable-slot')) {
+        const icon = slot.querySelector('.backpack-item-icon');
+        contentHTML = icon ? icon.outerHTML : '';
+      } else {
+        contentHTML = content.innerHTML;
+      }
+      
+      heldItem = {
+        sourceSlot: slot,
+        sourceType: slotInfo.type,
+        sourceIndex: slotInfo.index,
+        content: contentHTML
+      };
+      
+      // Copy content to mouse follower
+      mouseFollower.innerHTML = contentHTML;
+      
+      // Copy tooltip if it exists
+      if (tooltip) {
+        const tooltipClone = tooltip.cloneNode(true);
+        tooltipClone.style.opacity = '1';
+        tooltipClone.style.visibility = 'visible';
+        tooltipClone.style.transform = 'translateY(-110%)';
+        tooltipClone.style.position = 'absolute';
+        tooltipClone.style.bottom = 'auto';
+        tooltipClone.style.top = '-8px';
+        mouseFollower.appendChild(tooltipClone);
+      }
+      
+      mouseFollower.style.left = mouseX + 'px';
+      mouseFollower.style.top = mouseY + 'px';
+      mouseFollower.classList.add('active');
+      slot.classList.add('backpack-slot-empty');
+      
+      console.log(`Picked up from ${slotInfo.type}: ${slotInfo.index}`);
+      return true;
+    }
+
+    // Handle item placement
+    function placeItem(slotInfo) {
+      hytopia.sendData({
+        type: 'moveItem',
+        fromType: heldItem.sourceType,
+        fromIndex: heldItem.sourceIndex,
+        toType: slotInfo.type,
+        toIndex: slotInfo.index
+      });
+      resetHeldItem();
+    }
+
+    // Reset held item state
+    function resetHeldItem() {
+      if (!heldItem) return;
+      
+      heldItem.sourceSlot.classList.remove('backpack-slot-empty');
+      mouseFollower.classList.remove('active');
+      mouseFollower.innerHTML = '';
+      heldItem = null;
+    }
+
+    // Cancel held item
+    function cancelHeldItem() {
+      if (!heldItem) return;
+      
+      console.log(`Cancelled pickup from ${heldItem.sourceType}: ${heldItem.sourceIndex}`);
+      resetHeldItem();
+    }
+
+    // Setup slot click handlers
+    document.querySelectorAll('.backpack-slot, .backpack-wearable-slot, .backpack-hotbar-slot')
+      .forEach(slot => {
+        slot.addEventListener('click', e => {
+          e.preventDefault();
+          e.stopPropagation();
+          
+          const slotInfo = getSlotInfo(slot);
+          
+          if (!heldItem) {
+            pickupItem(slot, slotInfo, e.clientX, e.clientY);
+          } else {
+            placeItem(slotInfo);
+          }
+        });
+      });
+
+    // Setup cancel handlers
+    document.addEventListener('contextmenu', e => {
+      if (heldItem) {
+        e.preventDefault();
+        cancelHeldItem();
+      }
+    });
+
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape' && heldItem) {
+        cancelHeldItem();
+      }
+    });
+
+    // Setup click outside containers handler for item dropping
+    document.addEventListener('click', e => {
+      // Only handle if we have a held item
+      if (!heldItem) return;
+      
+      // Check if click is outside both containers using closest()
+      const isInsideContainers = e.target.closest('.backpack-container, .backpack-hotbar-container');
+      
+      // If click is outside both containers, log for drop logic
+      if (!isInsideContainers) {
+        hytopia.sendData({
+          type: 'dropItem',
+          fromType: heldItem.sourceType,
+          fromIndex: heldItem.sourceIndex,
+        });
+        cancelHeldItem();
+      }
+    });
+  }
+
+  function closeBackpack() {
+    document.querySelector('.backpack-overlay').style.display = 'none';
+    hytopia.lockPointer(true);
+  }
+
+  function openBackpack() {
+    document.querySelector('.backpack-overlay').style.display = 'flex';
+    hytopia.lockPointer(false, true); // true decouples input from pointer lock, in this case allowing key inputs still while pointer is unlocked.
+  }
+
+  function toggleBackpack() {
+    const overlay = document.querySelector('.backpack-overlay');
+    if (overlay.style.display === 'flex') {
+      closeBackpack();
+    } else {
+      openBackpack();
+    }
+  }
+
+  // Initialize
+  initializeBackpack();
+
+  // Slot update configurations
+  const SLOT_CONFIGS = {
+    hotbar: {
+      selector: '.backpack-hotbar-slot',
+      contentSelector: '.backpack-hotbar-slot-content',
+      iconClass: 'backpack-hotbar-slot-icon',
+      quantityClass: 'backpack-hotbar-slot-quantity',
+      maxSlots: BACKPACK_CONFIG.hotbarSlots,
+      showEmptyNumber: true
+    },
+    backpack: {
+      selector: '.backpack-slot',
+      contentSelector: '.backpack-slot-content',
+      iconClass: 'backpack-item-icon',
+      quantityClass: 'backpack-slot-quantity',
+      maxSlots: BACKPACK_CONFIG.slots,
+      showEmptyNumber: false
+    },
+    wearables: {
+      selector: '.backpack-wearable-slot',
+      contentSelector: '.backpack-wearable-slot',
+      iconClass: 'backpack-item-icon',
+      quantityClass: 'backpack-slot-quantity',
+      maxSlots: 6,
+      showEmptyNumber: false
+    }
+  };
+
+  // Generic slot update function
+  function updateSlot(slotType, position, itemData) {
+    const config = SLOT_CONFIGS[slotType];
+    if (!config || position < 0 || position >= config.maxSlots) return;
+
+    const slots = document.querySelectorAll(config.selector);
+    const slot = slots[position];
+    if (!slot) return;
+    
+    const content = slot.querySelector(config.contentSelector);
+    if (!content) return;
+    
+    // Clear existing content and tooltip
+    content.innerHTML = '';
+    removeTooltip(slot);
+    
+    if (itemData.removed) {
+      // Show slot number for empty slots (hotbar only)
+      if (config.showEmptyNumber) {
+        content.textContent = position + 1;
+      }
+    } else {
+      createItemContent(content, itemData, config);
+      createTooltip(slot, itemData);
+    }
+  }
+
+  function createItemContent(content, itemData, config) {
+    // Create item icon
+    const icon = document.createElement('img');
+    icon.src = `{{CDN_ASSETS_URL}}/${itemData.iconImageUri}`;
+    icon.alt = 'Item';
+    icon.className = config.iconClass;
+    content.appendChild(icon);
+    
+    // Add quantity if greater than 1
+    if (itemData.quantity && itemData.quantity > 1) {
+      const quantity = document.createElement('div');
+      quantity.className = config.quantityClass;
+      quantity.textContent = itemData.quantity.toLocaleString();
+      content.appendChild(quantity);
+    }
+  }
+
+  // Use shared tooltip system
+  function createTooltip(slot, itemData) {
+    ItemTooltips.createTooltip(slot, itemData, {
+      tooltipClass: 'backpack-item-tooltip',
+      contentClass: 'backpack-item-tooltip-content'
+    });
+  }
+
+  function removeTooltip(slot) {
+    ItemTooltips.removeTooltip(slot, 'backpack-item-tooltip');
+  }
+
+  // Custom wearables slot update function
+  function updateWearablesSlot(position, itemData) {
+    // Find slot by position
+    const slotName = Object.keys(WEARABLE_SLOT_POSITIONS).find(name => WEARABLE_SLOT_POSITIONS[name] === position);
+    if (!slotName) return;
+    
+    const slot = document.querySelector(`[data-slot="${slotName}"]`);
+    if (!slot) return;
+    
+    // Clear existing content
+    removeTooltip(slot);
+    const existingIcon = slot.querySelector('.backpack-item-icon');
+    const existingLabel = slot.querySelector('.backpack-wearable-slot-label');
+    if (existingIcon) existingIcon.remove();
+    if (existingLabel) existingLabel.remove();
+    
+    if (itemData.removed) {
+      // Show label for empty slot
+      const label = slotName.charAt(0).toUpperCase() + slotName.slice(1);
+      const labelElement = document.createElement('div');
+      labelElement.className = 'backpack-wearable-slot-label';
+      labelElement.textContent = label;
+      slot.appendChild(labelElement);
+    } else {
+      // Show item (label is hidden when item is present)
+      const icon = document.createElement('img');
+      icon.src = `{{CDN_ASSETS_URL}}/${itemData.iconImageUri}`;
+      icon.alt = itemData.name;
+      icon.className = 'backpack-item-icon';
+      slot.appendChild(icon);
+      createTooltip(slot, itemData);
+    }
+  }
+
+  // Specific update functions
+  function updateHotbarSlot(position, itemData) {
+    updateSlot('hotbar', position, itemData);
+  }
+
+  function updateBackpackSlot(position, itemData) {
+    updateSlot('backpack', position, itemData);
+  }
+
+  // Setup global functions
+  window.frontiersRPG.openBackpack = openBackpack;
+</script>
+
+<style>
+  :root {
+    --backpack-slot-size: 56px;
+    --backpack-hotbar-size: 64px;
+    --backpack-icon-size: 32px;
+    --backpack-gap: 6px;
+    --backpack-padding: 12px;
+    --backpack-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  }
+
+  .backpack-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    font-family: var(--backpack-font);
+    user-select: none;
+    gap: 16px;
+  }
+
+  /* Container Styles */
+  .backpack-container,
+  .backpack-hotbar-container {
+    background: linear-gradient(145deg, #2a2a2a, #1e1e1e);
+    border: 2px solid #444;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    width: 680px;
+  }
+
+  /* Header Styles */
+  .backpack-header,
+  .backpack-hotbar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    background: linear-gradient(135deg, #3a3a3a, #2d2d2d);
+    border-bottom: 1px solid #444;
+  }
+
+  .backpack-hotbar-header {
+    justify-content: flex-start;
+  }
+
+  .backpack-title,
+  .backpack-hotbar-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    letter-spacing: 0.3px;
+  }
+
+  .backpack-close {
+    background: rgba(255, 0, 0, 0.2);
+    border: 1px solid rgba(255, 0, 0, 0.3);
+    border-radius: 6px;
+    color: #ff6b6b;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .backpack-close:hover {
+    background: rgba(255, 0, 0, 0.3);
+    transform: scale(1.05);
+  }
+
+  /* Layout Styles */
+  .backpack-content {
+    display: flex;
+    padding: 20px;
+    gap: 20px;
+  }
+
+  .backpack-wearables-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    min-width: 220px;
+  }
+
+  /* Grid Styles */
+  .backpack-wearables-slots {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    gap: var(--backpack-gap);
+    padding: var(--backpack-padding);
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid #444;
+    border-radius: 8px;
+    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
+  }
+
+  .backpack-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: var(--backpack-gap);
+    background: rgba(0, 0, 0, 0.3);
+    padding: var(--backpack-padding);
+    border: 1px solid #444;
+    border-radius: 8px;
+    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
+  }
+
+  .backpack-hotbar-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 8px;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 16px;
+    border-radius: 0 0 8px 8px;
+    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
+  }
+
+  /* Slot Styles */
+  .backpack-wearable-slot,
+  .backpack-slot {
+    width: var(--backpack-slot-size);
+    height: var(--backpack-slot-size);
+    background: rgba(0, 0, 0, 0.6);
+    border: 2px solid #444;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .backpack-slot {
+    border-color: #333;
+    border-radius: 6px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
+  }
+
+  .backpack-hotbar-slot {
+    width: var(--backpack-hotbar-size);
+    height: var(--backpack-hotbar-size);
+    background: rgba(0, 0, 0, 0.6);
+    border: 2px solid #333;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
+  }
+
+  /* Slot Hover & Highlight States */
+  .backpack-wearable-slot:hover,
+  .backpack-slot:hover,
+  .backpack-hotbar-slot:hover {
+    border-color: #666;
+    background: rgba(0, 0, 0, 0.8);
+    transform: translateY(-1px);
+  }
+
+  .backpack-wearable-slot:hover {
+    border-color: #666;
+  }
+
+  .backpack-slot:hover,
+  .backpack-hotbar-slot:hover {
+    border-color: #555;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
+  }
+
+  .backpack-slot-highlight {
+    border-color: #4CAF50 !important;
+    background: rgba(76, 175, 80, 0.1) !important;
+  }
+
+  .backpack-slot-empty {
+    border-color: #999 !important;
+    background: linear-gradient(145deg, 
+      rgba(255, 255, 255, 0.02), 
+      rgba(255, 255, 255, 0.08)
+    ) !important;
+    box-shadow: 
+      inset 0 2px 8px rgba(0, 0, 0, 0.8),
+      0 0 0 1px rgba(255, 255, 255, 0.1) !important;
+    opacity: 0.6;
+    transition: all 0.2s ease;
+  }
+
+  /* Content Styles */
+  .backpack-slot-icon {
+    width: var(--backpack-icon-size);
+    height: var(--backpack-icon-size);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: 0.3;
+    transition: opacity 0.2s ease;
+  }
+
+  .backpack-slot-content,
+  .backpack-hotbar-slot-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #ccc;
+  }
+
+  .backpack-hotbar-slot-content {
+    font-size: 14px;
+    font-weight: 600;
+    color: #888;
+  }
+
+  .backpack-item-icon {
+    width: 48px;
+    height: 48px;
+    object-fit: contain;
+    image-rendering: pixelated;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+  }
+
+  .backpack-hotbar-slot-icon {
+    width: 56px;
+    height: 56px;
+    object-fit: contain;
+    image-rendering: pixelated;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+  }
+
+  .backpack-slot-quantity {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #ffffff;
+    font-size: 9px;
+    font-weight: 700;
+    padding: 1px 3px;
+    border-radius: 3px;
+    line-height: 1;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    min-width: 10px;
+    text-align: center;
+  }
+
+  .backpack-hotbar-slot-quantity {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #ffffff;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 1px 4px;
+    border-radius: 3px;
+    line-height: 1;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    min-width: 12px;
+    text-align: center;
+  }
+
+  /* Wearable Slot Labels */
+  .backpack-wearable-slot-label {
+    font-size: 8px;
+    font-weight: 600;
+    color: #888;
+    text-align: center;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    transition: color 0.2s ease;
+    pointer-events: none;
+  }
+
+  .backpack-wearable-slot:hover .backpack-wearable-slot-label {
+    color: #cccccc;
+  }
+
+  /* Item Rarity Colors */
+  .backpack-slot.backpack-common,
+  .backpack-hotbar-slot.backpack-common { border-color: #9CA3AF; }
+  .backpack-slot.backpack-uncommon,
+  .backpack-hotbar-slot.backpack-uncommon { border-color: #22C55E; }
+  .backpack-slot.backpack-rare,
+  .backpack-hotbar-slot.backpack-rare { border-color: #3B82F6; }
+  .backpack-slot.backpack-epic,
+  .backpack-hotbar-slot.backpack-epic { border-color: #A855F7; }
+  .backpack-slot.backpack-legendary,
+  .backpack-hotbar-slot.backpack-legendary { border-color: #F59E0B; }
+
+  /* Mobile Styles */
+  body.mobile {
+    --backpack-slot-size: 40px;
+    --backpack-hotbar-size: 40px;
+    --backpack-icon-size: 20px;
+    --backpack-gap: 3px;
+    --backpack-padding: 6px;
+  }
+
+  body.mobile .backpack-overlay {
+    gap: 8px;
+    padding: 4px;
+  }
+
+  body.mobile .backpack-container,
+  body.mobile .backpack-hotbar-container {
+    width: auto;
+    max-width: 500px;
+    min-width: 320px;
+  }
+
+  body.mobile .backpack-header,
+  body.mobile .backpack-hotbar-header {
+    padding: 4px 8px;
+  }
+
+  body.mobile .backpack-title,
+  body.mobile .backpack-hotbar-title {
+    font-size: 12px;
+  }
+
+  body.mobile .backpack-close {
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+  }
+
+  body.mobile .backpack-content {
+    padding: 6px;
+    gap: 6px;
+  }
+
+  body.mobile .backpack-wearables-panel {
+    flex-direction: row;
+    min-width: auto;
+  }
+
+  body.mobile .backpack-wearables-slots {
+    justify-items: center;
+  }
+
+  body.mobile .backpack-wearable-slot,
+  body.mobile .backpack-slot,
+  body.mobile .backpack-hotbar-slot {
+    box-sizing: border-box;
+  }
+
+  body.mobile .backpack-grid,
+  body.mobile .backpack-hotbar-grid {
+    justify-items: center;
+    width: fit-content;
+    margin: 0 auto;
+  }
+
+  body.mobile .backpack-slot-content,
+  body.mobile .backpack-hotbar-slot-content {
+    font-size: 10px;
+  }
+
+  body.mobile .backpack-item-icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  body.mobile .backpack-hotbar-slot-icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  body.mobile .backpack-slot-quantity {
+    font-size: 7px;
+    padding: 1px 2px;
+    bottom: 1px;
+    right: 1px;
+    min-width: 8px;
+  }
+
+  body.mobile .backpack-hotbar-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 1px;
+    right: 1px;
+  }
+
+  body.mobile .backpack-item-tooltip {
+    display: none;
+  }
+
+  body.mobile .backpack-wearable-slot-label {
+    font-size: 9px;
+  }
+
+  .backpack-mouse-follower {
+    position: fixed;
+    width: 56px;
+    height: 56px;
+    pointer-events: none;
+    z-index: 10000;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
+    border: 2px solid #555;
+    border-radius: 8px;
+    box-shadow: 
+      0 8px 32px rgba(0, 0, 0, 0.9),
+      0 4px 16px rgba(0, 0, 0, 0.7),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    transform: translate(-50%, -50%) scale(0.95);
+    transition: transform 0.15s ease, opacity 0.15s ease;
+    opacity: 0;
+    font-family: var(--backpack-font);
+  }
+
+  .backpack-mouse-follower.active {
+    display: flex;
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+    animation: mouseFollowerPulse 2s ease-in-out infinite;
+  }
+
+  .backpack-mouse-follower img {
+    width: 48px;
+    height: 48px;
+    object-fit: contain;
+    image-rendering: pixelated;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
+  }
+
+  .backpack-mouse-follower .backpack-hotbar-slot-quantity {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background: linear-gradient(145deg, #000, #333);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 2px 5px;
+    border-radius: 4px;
+    line-height: 1;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    min-width: 14px;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
+  }
+
+  .backpack-mouse-follower .backpack-item-tooltip {
+    z-index: 2001;
+  }
+
+  @keyframes mouseFollowerPulse {
+    0%, 100% { 
+      box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.9),
+        0 4px 16px rgba(0, 0, 0, 0.7),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
+        0 0 0 rgba(255, 255, 255, 0);
+    }
+    50% { 
+      box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.9),
+        0 4px 16px rgba(0, 0, 0, 0.7),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
+        0 0 8px rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  /* Backpack-specific tooltip positioning (content handled by shared system) */
+  .backpack-item-tooltip {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: 8px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 2000;
+    pointer-events: none;
+  }
+
+  /* Mouse Follower Tooltip */
+  .backpack-mouse-follower .backpack-item-tooltip {
+    z-index: 2001;
+  }
+</style>