@hytopia.com/examples 1.0.17 → 1.0.18

package/frontiers-rpg-game/assets/ui/index.html

@@ -372,12 +372,75 @@ window.ItemTooltips = (function() {
     if (existingTooltip) existingTooltip.remove();
   }
 
+  // Mobile tooltip handling
+  let mobileTooltipActive = false;
+  
+  function initializeMobileTooltips() {
+    // Check if we're on mobile
+    const isMobile = document.body.classList.contains('mobile');
+    if (!isMobile) return;
+    
+    // Add click handler to document for event delegation
+    document.addEventListener('click', handleMobileTooltipClick, true);
+  }
+  
+  function handleMobileTooltipClick(e) {
+    // List of tooltip container selectors - include quest reward enabled class
+    const tooltipContainers = [
+      '.backpack-slot', '.backpack-hotbar-slot', '.backpack-wearable-slot',
+      '.hud-hotbar-slot', '.merchant-slot', '.merchant-hotbar-slot', 
+      '.crafting-slot', '.crafting-requirement-item', 
+      '.quests-reward-item', '.quests-reward-item-tooltip-enabled'
+    ];
+    
+    // Check if click is on a tooltip container
+    const container = e.target.closest(tooltipContainers.join(', '));
+    
+    if (container) {
+      // Find tooltip in this container
+      const tooltip = container.querySelector([
+        '.item-tooltip', '.backpack-item-tooltip', '.merchant-item-tooltip',
+        '.crafting-item-tooltip', '.crafting-requirement-tooltip', '.quests-reward-item-tooltip'
+      ].join(', '));
+      
+      if (tooltip) {
+        // Close any other open tooltips
+        closeAllMobileTooltips();
+        
+        // Show this tooltip
+        tooltip.classList.add('mobile-tooltip-visible');
+        mobileTooltipActive = true;
+      }
+    } else {
+      // Click outside any container - close all tooltips
+      closeAllMobileTooltips();
+    }
+  }
+  
+  function closeAllMobileTooltips() {
+    const visibleTooltips = document.querySelectorAll('.mobile-tooltip-visible');
+    if (visibleTooltips.length > 0) {
+      visibleTooltips.forEach(tooltip => {
+        tooltip.classList.remove('mobile-tooltip-visible');
+      });
+      mobileTooltipActive = false;
+    }
+  }
+  
+  // Initialize mobile tooltips when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeMobileTooltips);
+  } else {
+    initializeMobileTooltips();
+  }
+
   // Public API
   return {
     parseText: parseText,
     hasTooltipData: hasTooltipData,
     createTooltip: createTooltip,
-    removeTooltip: removeTooltip
+    removeTooltip: removeTooltip,
+    closeAllMobileTooltips: closeAllMobileTooltips
   };
 })();
 </script>
@@ -405,8 +468,7 @@ window.ItemTooltips = (function() {
     .merchant-hotbar-slot:hover .item-tooltip,
     .crafting-slot:hover .item-tooltip,
     .crafting-requirement-item:hover .item-tooltip,
-    .quests-reward-item:hover .item-tooltip,
-    /* Tooltip visibility on hover - Specific classes */
+
     .backpack-slot:hover .backpack-item-tooltip,
     .backpack-hotbar-slot:hover .backpack-item-tooltip,
     .backpack-wearable-slot:hover .backpack-item-tooltip,
@@ -530,14 +592,72 @@ window.ItemTooltips = (function() {
     font-size: 11px;
   }
 
-  /* Mobile - Hide tooltips on mobile devices */
+  /* Mobile - Control tooltip visibility on mobile devices */
   body.mobile .item-tooltip,
   body.mobile .backpack-item-tooltip,
   body.mobile .merchant-item-tooltip,
   body.mobile .crafting-item-tooltip,
   body.mobile .crafting-requirement-tooltip,
   body.mobile .quests-reward-item-tooltip {
-    display: none;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
+  }
+
+  /* Mobile tooltip visibility when tapped */
+  body.mobile .mobile-tooltip-visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: translateY(-8px) !important;
+  }
+
+  /* Improve mobile tooltip positioning and touch targets */
+  body.mobile .backpack-slot,
+  body.mobile .backpack-hotbar-slot,
+  body.mobile .backpack-wearable-slot,
+  body.mobile .hud-hotbar-slot,
+  body.mobile .merchant-slot,
+  body.mobile .merchant-hotbar-slot,
+  body.mobile .crafting-slot,
+  body.mobile .crafting-requirement-item,
+  body.mobile .quests-reward-item,
+  body.mobile .quests-reward-item-tooltip-enabled {
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
+  }
+
+  /* Center carets on mobile tooltips */
+  body.mobile .item-tooltip-content::after,
+  body.mobile .backpack-item-tooltip-content::after,
+  body.mobile .merchant-item-tooltip-content::after,
+  body.mobile .crafting-item-tooltip-content::after,
+  body.mobile .crafting-requirement-tooltip-content::after,
+  body.mobile .quests-reward-item-tooltip-content::after {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  body.mobile .item-tooltip-content::before,
+  body.mobile .backpack-item-tooltip-content::before,
+  body.mobile .merchant-item-tooltip-content::before,
+  body.mobile .crafting-item-tooltip-content::before,
+  body.mobile .crafting-requirement-tooltip-content::before,
+  body.mobile .quests-reward-item-tooltip-content::before {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  /* Mobile tooltip content sizing */
+  body.mobile .item-tooltip-content,
+  body.mobile .backpack-item-tooltip-content,
+  body.mobile .merchant-item-tooltip-content,
+  body.mobile .crafting-item-tooltip-content,
+  body.mobile .crafting-requirement-tooltip-content,
+  body.mobile .quests-reward-item-tooltip-content {
+    max-width: 220px;
+    font-size: 11px;
+    padding: 8px 10px;
   }
 
   /* Mouse Follower Tooltip (for backpack drag system) */
@@ -631,6 +751,9 @@ window.ItemTooltips = (function() {
     accessory: 5
   };
 
+  const mouseFollower = createMouseFollower();
+  let heldItem = null;
+
   // Setup hytopia data handlers
   hytopia.onData(data => {
     if (data.type === 'toggleBackpack') {
@@ -683,15 +806,8 @@ window.ItemTooltips = (function() {
     }
   }
 
-  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) {
+  // 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) {
@@ -765,8 +881,14 @@ window.ItemTooltips = (function() {
       // Copy content to mouse follower
       mouseFollower.innerHTML = contentHTML;
       
-      // Copy tooltip if it exists
+      // Copy tooltip if it exists and store reference for later restoration
       if (tooltip) {
+        // Store tooltip data for restoration
+        heldItem.tooltipData = {
+          element: tooltip.cloneNode(true),
+          parentSlot: slot
+        };
+        
         const tooltipClone = tooltip.cloneNode(true);
         tooltipClone.style.opacity = '1';
         tooltipClone.style.visibility = 'visible';
@@ -774,15 +896,26 @@ window.ItemTooltips = (function() {
         tooltipClone.style.position = 'absolute';
         tooltipClone.style.bottom = 'auto';
         tooltipClone.style.top = '-8px';
+        
+        // Remove mobile tooltip classes that might interfere
+        tooltipClone.classList.remove('mobile-tooltip-visible');
+        
         mouseFollower.appendChild(tooltipClone);
+        
+        // Completely remove original tooltip to prevent ghosting
+        tooltip.remove();
       }
+    
+      // Position mouse follower at center of slot
+      const slotRect = slot.getBoundingClientRect();
+      const centerX = slotRect.left + slotRect.width / 2;
+      const centerY = slotRect.top + slotRect.height / 2;
       
-      mouseFollower.style.left = mouseX + 'px';
-      mouseFollower.style.top = mouseY + 'px';
+      mouseFollower.style.left = centerX + 15 + 'px';
+      mouseFollower.style.top = centerY - 15 + 'px';
       mouseFollower.classList.add('active');
       slot.classList.add('backpack-slot-empty');
       
-      console.log(`Picked up from ${slotInfo.type}: ${slotInfo.index}`);
       return true;
     }
 
@@ -801,8 +934,15 @@ window.ItemTooltips = (function() {
     // Reset held item state
     function resetHeldItem() {
       if (!heldItem) return;
-      
+
       heldItem.sourceSlot.classList.remove('backpack-slot-empty');
+      
+      // Restore original tooltip by recreating it
+      if (heldItem.tooltipData) {
+        const restoredTooltip = heldItem.tooltipData.element.cloneNode(true);
+        heldItem.tooltipData.parentSlot.appendChild(restoredTooltip);
+      }
+      
       mouseFollower.classList.remove('active');
       mouseFollower.innerHTML = '';
       heldItem = null;
@@ -812,10 +952,13 @@ window.ItemTooltips = (function() {
     function cancelHeldItem() {
       if (!heldItem) return;
       
-      console.log(`Cancelled pickup from ${heldItem.sourceType}: ${heldItem.sourceIndex}`);
       resetHeldItem();
     }
 
+  function setupEventListeners() {
+    const closeButton = document.querySelector('.backpack-close');
+    closeButton.addEventListener('click', closeBackpack);
+
     // Setup slot click handlers
     document.querySelectorAll('.backpack-slot, .backpack-wearable-slot, .backpack-hotbar-slot')
       .forEach(slot => {
@@ -870,6 +1013,16 @@ window.ItemTooltips = (function() {
   function closeBackpack() {
     document.querySelector('.backpack-overlay').style.display = 'none';
     hytopia.lockPointer(true);
+    
+    // Close any open mobile tooltips
+    if (window.ItemTooltips) {
+      window.ItemTooltips.closeAllMobileTooltips();
+    }
+
+    // Cancel any picked up item
+    if (heldItem) {
+      cancelHeldItem();
+    }
   }
 
   function openBackpack() {
@@ -1334,66 +1487,80 @@ window.ItemTooltips = (function() {
 
   /* Mobile Styles */
   body.mobile {
-    --backpack-slot-size: 40px;
-    --backpack-hotbar-size: 40px;
-    --backpack-icon-size: 20px;
-    --backpack-gap: 3px;
-    --backpack-padding: 6px;
+    --backpack-slot-size: 44px;
+    --backpack-hotbar-size: 44px;
+    --backpack-icon-size: 32px;
+    --backpack-gap: 4px;
+    --backpack-padding: 8px;
   }
 
   body.mobile .backpack-overlay {
-    gap: 8px;
-    padding: 4px;
+    gap: 12px;
+    padding: 8px;
   }
 
   body.mobile .backpack-container,
   body.mobile .backpack-hotbar-container {
     width: auto;
-    max-width: 500px;
-    min-width: 320px;
+    max-width: 520px;
+    min-width: 340px;
+    border-radius: 8px;
   }
 
   body.mobile .backpack-header,
   body.mobile .backpack-hotbar-header {
-    padding: 4px 8px;
+    padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
   }
 
   body.mobile .backpack-title,
   body.mobile .backpack-hotbar-title {
-    font-size: 12px;
+    font-size: 14px;
   }
 
   body.mobile .backpack-close {
-    width: 20px;
-    height: 20px;
-    font-size: 14px;
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+    border-radius: 6px;
   }
 
   body.mobile .backpack-content {
-    padding: 6px;
-    gap: 6px;
+    padding: 12px;
+    gap: 12px;
   }
 
   body.mobile .backpack-wearables-panel {
-    flex-direction: row;
+    flex-direction: column;
     min-width: auto;
+    gap: 12px;
   }
 
   body.mobile .backpack-wearables-slots {
     justify-items: center;
+    padding: 8px;
+    border-radius: 6px;
   }
 
-  body.mobile .backpack-wearable-slot,
-  body.mobile .backpack-slot,
-  body.mobile .backpack-hotbar-slot {
-    box-sizing: border-box;
+  body.mobile .backpack-grid {
+    padding: 8px;
+    border-radius: 6px;
   }
 
-  body.mobile .backpack-grid,
   body.mobile .backpack-hotbar-grid {
     justify-items: center;
     width: fit-content;
     margin: 0 auto;
+    padding: 12px;
+    border-radius: 0 0 6px 6px;
+  }
+
+  body.mobile .backpack-wearable-slot,
+  body.mobile .backpack-slot,
+  body.mobile .backpack-hotbar-slot {
+    box-sizing: border-box;
+    border-radius: 6px;
+    border-width: 2px;
   }
 
   body.mobile .backpack-slot-content,
@@ -1402,36 +1569,58 @@ window.ItemTooltips = (function() {
   }
 
   body.mobile .backpack-item-icon {
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
   }
 
   body.mobile .backpack-hotbar-slot-icon {
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
   }
 
   body.mobile .backpack-slot-quantity {
-    font-size: 7px;
-    padding: 1px 2px;
-    bottom: 1px;
-    right: 1px;
-    min-width: 8px;
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 10px;
+    border-radius: 3px;
   }
 
   body.mobile .backpack-hotbar-slot-quantity {
     font-size: 8px;
     padding: 1px 3px;
-    bottom: 1px;
-    right: 1px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 12px;
+    border-radius: 3px;
   }
 
-  body.mobile .backpack-item-tooltip {
-    display: none;
-  }
+
 
   body.mobile .backpack-wearable-slot-label {
-    font-size: 9px;
+    font-size: 7px;
+    font-weight: 500;
+  }
+
+  body.mobile .backpack-mouse-follower {
+    width: 44px;
+    height: 44px;
+    border-radius: 6px;
+  }
+
+  body.mobile .backpack-mouse-follower img {
+    width: 36px;
+    height: 36px;
+  }
+
+  body.mobile .backpack-mouse-follower .backpack-hotbar-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 10px;
+    border-radius: 3px;
   }
 
   .backpack-mouse-follower {
@@ -1609,6 +1798,9 @@ window.ItemTooltips = (function() {
   function closeSkills() {
     document.querySelector('.skills-overlay').style.display = 'none';
     hytopia.lockPointer(true);
+    
+    // Close any open mobile tooltips
+    closeAllMobileTooltips();
   }
 
   // Update Functions
@@ -1639,6 +1831,9 @@ window.ItemTooltips = (function() {
       const skillItem = createSkillItem(skill);
       skillsGrid.appendChild(skillItem);
     });
+    
+    // Close any open mobile tooltips after updating skills
+    closeAllMobileTooltips();
   }
 
   function updateSkillsExp(data) {
@@ -1706,6 +1901,54 @@ window.ItemTooltips = (function() {
   // Event Listeners
   function setupEventListeners() {
     document.querySelector('.skills-close').addEventListener('click', closeSkills);
+    
+    // Setup mobile tooltip handling
+    setupMobileTooltips();
+  }
+
+  // Mobile tooltip handling
+  function setupMobileTooltips() {
+    // Check if we're on mobile
+    const isMobile = document.body.classList.contains('mobile');
+    if (!isMobile) return;
+    
+    // Add click handler to skills container for event delegation
+    document.querySelector('.skills-skills-grid').addEventListener('click', handleMobileTooltipClick);
+    
+    // Add click handler to document to close tooltips when clicking outside
+    document.addEventListener('click', handleDocumentClick);
+  }
+  
+  function handleMobileTooltipClick(e) {
+    const skillItem = e.target.closest('.skills-skill-item');
+    if (!skillItem) return;
+    
+    e.stopPropagation();
+    
+    const tooltip = skillItem.querySelector('.skills-skill-tooltip');
+    if (!tooltip) return;
+    
+    // Close any other open tooltips
+    closeAllMobileTooltips();
+    
+    // Toggle this tooltip
+    tooltip.classList.add('skills-mobile-tooltip-visible');
+  }
+  
+  function handleDocumentClick(e) {
+    // Close tooltips when clicking outside
+    if (!e.target.closest('.skills-skill-item')) {
+      closeAllMobileTooltips();
+    }
+  }
+  
+  function closeAllMobileTooltips() {
+    const visibleTooltips = document.querySelectorAll('.skills-mobile-tooltip-visible');
+    if (visibleTooltips.length > 0) {
+      visibleTooltips.forEach(tooltip => {
+        tooltip.classList.remove('skills-mobile-tooltip-visible');
+      });
+    }
   }
 
   // Initialize
@@ -2022,97 +2265,136 @@ window.ItemTooltips = (function() {
   /* Mobile Styles */
   body.mobile .skills-container {
     width: auto;
-    max-width: 98vw;
-    min-width: 300px;
+    max-width: 680px;
+    min-width: 475px;
+    border-radius: 8px;
   }
 
   body.mobile .skills-header {
-    padding: 6px 8px;
+    padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
   }
 
   body.mobile .skills-title {
-    font-size: 11px;
+    font-size: 14px;
   }
 
   body.mobile .skills-close {
-    width: 18px;
-    height: 18px;
-    font-size: 12px;
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+    border-radius: 6px;
   }
 
   body.mobile .skills-content {
-    padding: 6px;
+    padding: 12px;
   }
 
   body.mobile .skills-player-section,
   body.mobile .skills-skills-section {
-    margin-bottom: 8px;
-    padding: 6px;
+    padding: 10px;
+    border-radius: 6px;
   }
 
   body.mobile .skills-section-title {
-    font-size: 10px;
-    margin-bottom: 6px;
+    font-size: 12px;
+    margin-bottom: 8px;
   }
 
   body.mobile .skills-level-display {
-    margin-bottom: 4px;
+    margin-bottom: 8px;
   }
 
   body.mobile .skills-level-number {
-    font-size: 12px;
+    font-size: 16px;
   }
 
   body.mobile .skills-exp-bar {
-    height: 14px;
+    height: 16px;
+    border-radius: 6px;
   }
 
   body.mobile .skills-exp-text {
-    font-size: 8px;
+    font-size: 10px;
   }
 
   body.mobile .skills-skills-grid {
-    grid-template-columns: 1fr 1fr;
-    gap: 4px;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 6px;
   }
 
   body.mobile .skills-skill-item {
-    gap: 8px;
-    padding: 3px;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    min-height: 40px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
   }
 
   body.mobile .skills-skill-icon {
     width: 28px;
     height: 28px;
-  }
-
-  body.mobile .skills-skill-icon-img {
-    width: 100%;
-    height: 100%;
+    border-radius: 6px;
   }
 
   body.mobile .skills-skill-header {
-    margin-bottom: 3px;
+    margin-bottom: 4px;
   }
 
   body.mobile .skills-skill-name {
-    font-size: 9px;
+    font-size: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   body.mobile .skills-skill-level {
-    font-size: 8px;
+    font-size: 9px;
+    flex-shrink: 0;
   }
 
   body.mobile .skills-skill-exp-bar {
     height: 10px;
+    border-radius: 6px;
   }
 
   body.mobile .skills-skill-exp-text {
-    font-size: 6px;
+    font-size: 7px;
   }
 
   body.mobile .skills-skill-tooltip {
-    display: none;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
+  }
+
+  body.mobile .skills-mobile-tooltip-visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: translateY(-8px) !important;
+  }
+
+  body.mobile .skills-skill-tooltip-content {
+    max-width: 180px;
+    font-size: 10px;
+  }
+
+  /* Center the caret on mobile */
+  body.mobile .skills-skill-tooltip-content::after {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  body.mobile .skills-skill-tooltip-content::before {
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+  }
+
+  /* Enable scrolling if needed */
+  body.mobile .skills-content * {
+    touch-action: pan-y !important;
   }
 </style>
 
@@ -2495,94 +2777,72 @@ window.ItemTooltips = (function() {
     flex: 1;
   }
 
-  /* Mobile and Small Screen Responsive */
-  @media (max-width: 768px) {
-    .dialogue-panel {
-      bottom: max(16px, env(safe-area-inset-bottom, 16px));
-      right: max(12px, env(safe-area-inset-right, 12px));
-      width: min(100vw - 24px, calc(100vw - 2 * max(12px, env(safe-area-inset-right, 12px))));
-      max-width: 340px;
-      max-height: min(70vh, calc(100vh - 32px));
-    }
+  /* Mobile Responsive */
+  body.mobile .dialogue-panel {
+    bottom: 20px;
+    right: 20px;
+    width: auto;
+    max-width: 340px;
+    min-width: 280px;
+    max-height: calc(100vh - 40px);
+  }
 
-    .dialogue-header {
-      padding: 8px 12px;
-    }
+  body.mobile .dialogue-header {
+    padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
+  }
 
-    .dialogue-npc-avatar {
-      width: 28px;
-      height: 28px;
-    }
+  body.mobile .dialogue-container {
+    border-radius: 8px;
+  }
 
-    .dialogue-npc-name {
-      font-size: 11px;
-    }
+  body.mobile .dialogue-npc-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+  }
 
-    .dialogue-npc-title {
-      font-size: 9px;
-    }
-
-    .dialogue-close {
-      width: 18px;
-      height: 18px;
-      font-size: 10px;
-    }
-
-    .dialogue-content {
-      padding: 10px;
-      max-height: calc(min(60vh, calc(100vh - 80px)) - 50px);
-    }
-
-    .dialogue-message {
-      padding: 8px;
-      font-size: 11px;
-      margin-bottom: 8px;
-    }
-
-    .dialogue-option {
-      padding: 6px 8px;
-      font-size: 10px;
-    }
+  body.mobile .dialogue-npc-name {
+    font-size: 12px;
+  }
 
-    .dialogue-quest-icon {
-      width: 14px;
-      height: 14px;
-    }
+  body.mobile .dialogue-npc-title {
+    font-size: 10px;
   }
 
-  /* Very small screens (landscape phones, small devices) */
-  @media (max-width: 480px) {
-    .dialogue-panel {
-      max-height: min(60vh, calc(100vh - 20px));
-      max-width: 300px;
-    }
+  body.mobile .dialogue-close {
+    width: 20px;
+    height: 20px;
+    font-size: 12px;
+    border-radius: 4px;
+  }
 
-    .dialogue-content {
-      max-height: calc(min(50vh, calc(100vh - 60px)) - 45px);
-      padding: 8px;
-    }
+  body.mobile .dialogue-content {
+    padding: 12px;
+    max-height: calc(100vh - 140px);
+  }
 
-    .dialogue-message {
-      padding: 6px;
-      font-size: 10px;
-    }
+  body.mobile .dialogue-content * {
+    overflow-y: scroll;
+    touch-action: pan-y !important;
+  }
 
-    .dialogue-option {
-      padding: 5px 6px;
-      font-size: 9px;
-    }
+  body.mobile .dialogue-message {
+    padding: 8px;
+    font-size: 11px;
+    margin-bottom: 8px;
+    border-radius: 4px;
+  }
 
-    .dialogue-quest-icon {
-      width: 12px;
-      height: 12px;
-    }
+  body.mobile .dialogue-option {
+    padding: 8px 10px;
+    font-size: 11px;
+    border-radius: 4px;
   }
 
-  /* Ultra-wide screens - prevent dialogue from being too far left */
-  @media (min-width: 1920px) {
-    .dialogue-panel {
-      right: max(20px, calc((100vw - 1200px) / 4));
-    }
+  body.mobile .dialogue-quest-icon {
+    width: 14px;
+    height: 14px;
   }
 </style> 
 
@@ -3464,13 +3724,15 @@ window.ItemTooltips = (function() {
   /* Mobile Styles */
   body.mobile .quests-container {
     width: auto;
-    max-width: 98vw;
-    min-width: 300px;
-    height: 90vh;
+    max-width: 600px;
+    min-width: 340px;
+    height: 85vh;
+    border-radius: 8px;
   }
 
   body.mobile .quests-header {
     padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
   }
 
   body.mobile .quests-title {
@@ -3478,72 +3740,193 @@ window.ItemTooltips = (function() {
   }
 
   body.mobile .quests-close {
-    width: 20px;
-    height: 20px;
-    font-size: 14px;
-  }
-
-  body.mobile .quests-content {
-    flex-direction: column;
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+    border-radius: 6px;
   }
 
   body.mobile .quests-sidebar {
-    width: auto;
-    max-height: 200px;
-    border-right: none;
-    border-bottom: 1px solid #444;
-  }
-
-  body.mobile .quests-section {
-    flex: none;
+    width: 175px;
+    min-width: 175px;
   }
 
   body.mobile .quests-section-title {
-    padding: 8px 12px 6px;
-    font-size: 12px;
+    padding: 8px 10px 6px;
+    font-size: 11px;
   }
 
   body.mobile .quests-list {
     padding: 6px;
-    max-height: 120px;
+  }
+
+  body.mobile .quests-list * {
+    touch-action: pan-y !important;
+    overflow-y: scroll;
   }
 
   body.mobile .quests-item {
-    padding: 8px;
-    margin-bottom: 4px;
+    padding: 3px 8px;
+    margin-bottom: 3px;
+    border-radius: 6px;
+    min-height: 28px;
   }
 
   body.mobile .quests-item-name {
     font-size: 11px;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   body.mobile .quests-item-progress {
-    font-size: 10px;
+    font-size: 9px;
+    font-weight: 600;
   }
 
   body.mobile .quests-details-content {
     padding: 12px;
   }
 
+  body.mobile .quests-details-content * {
+    touch-action: pan-y !important;
+    overflow-y: scroll;
+  }
+
+  /* Exception for reward items and tooltips - override the blanket overflow rule */
+  body.mobile .quests-reward-item,
+  body.mobile .quests-reward-item *,
+  body.mobile .quests-reward-item-tooltip,
+  body.mobile .quests-reward-item-tooltip * {
+    overflow: visible !important;
+  }
+
+  /* Ensure all parent containers allow tooltips to escape */
+  body.mobile .quests-rewards-list,
+  body.mobile .quests-detail-rewards,
+  body.mobile .quests-details-panel {
+    overflow: visible !important;
+  }
+
+  body.mobile .quests-rewards-list * {
+    overflow-y: scroll !important;
+    touch-action: pan-y !important;
+  }
+
+  body.mobile .quests-detail-header {
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+  }
+
   body.mobile .quests-detail-name {
-    font-size: 16px;
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+
+  body.mobile .quests-detail-description {
+    margin-bottom: 16px;
   }
 
   body.mobile .quests-detail-description p {
     font-size: 11px;
+    line-height: 1.4;
   }
 
-  body.mobile .quests-objectives-title {
+  body.mobile .quests-detail-objectives {
+    margin-bottom: 12px;
+  }
+
+  body.mobile .quests-objectives-title,
+  body.mobile .quests-rewards-title {
     font-size: 12px;
+    margin-bottom: 8px;
+  }
+
+  body.mobile .quests-objectives-list {
+    margin-bottom: 6px;
+  }
+
+  body.mobile .quests-objective {
+    padding: 6px 0;
+    gap: 8px;
+  }
+
+  body.mobile .quests-objective-icon {
+    width: 14px;
+    height: 14px;
+    font-size: 10px;
   }
 
   body.mobile .quests-objective-text {
-    font-size: 11px;
+    font-size: 10px;
+    line-height: 1.3;
+  }
+
+  body.mobile .quests-reward-item {
+    padding: 3px 8px;
+    gap: 6px;
+    border-radius: 6px;
+    min-height: 24px;
+  }
+
+  body.mobile .quests-reward-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  body.mobile .quests-reward-exp-icon {
+    font-size: 12px;
+    width: 16px;
+  }
+
+  body.mobile .quests-reward-text {
+    font-size: 10px;
+    font-weight: 500;
   }
 
   body.mobile .quests-empty-section {
     padding: 12px 8px;
-    font-size: 12px;
+    font-size: 10px;
+    line-height: 1.3;
+  }
+
+  body.mobile .quests-empty-content {
+    padding: 16px 12px;
+  }
+
+  body.mobile .quests-empty-icon {
+    font-size: 32px;
+    margin-bottom: 8px;
+  }
+
+  body.mobile .quests-empty-text {
+    font-size: 11px;
+    line-height: 1.3;
+    padding: 0 6px;
+  }
+
+  /* Mobile tooltip adjustments */
+  body.mobile .quests-reward-item-tooltip {
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+  }
+
+  body.mobile .quests-reward-item-tooltip.mobile-tooltip-visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+
+  /* Override mobile caret centering - keep caret over reward icon */
+  body.mobile .quests-reward-item-tooltip-content::after {
+    left: 15px !important;
+    transform: translateX(-50%) !important;
+  }
+
+  body.mobile .quests-reward-item-tooltip-content::before {
+    left: 15px !important;
+    transform: translateX(-50%) !important;
   }
 
 
@@ -4450,155 +4833,149 @@ window.ItemTooltips = (function() {
   .merchant-hotbar-slot.merchant-legendary { border-color: #F59E0B; }
 
   /* Mobile styles */
-  @media (max-width: 768px) {
-    body.mobile {
-      --merchant-slot-size: 40px;
-      --merchant-hotbar-size: 40px;
-      --merchant-icon-size: 20px;
-      --merchant-gap: 3px;
-      --merchant-padding: 6px;
-    }
-
-    body.mobile .merchant-overlay {
-      gap: 8px;
-      padding: 4px;
-    }
+  body.mobile {
+    --merchant-slot-size: 44px;
+    --merchant-hotbar-size: 44px;
+    --merchant-icon-size: 32px;
+    --merchant-gap: 4px;
+    --merchant-padding: 8px;
+  }
 
-    body.mobile .merchant-container,
-    body.mobile .merchant-hotbar-container {
-      width: auto;
-      max-width: 500px;
-      min-width: 320px;
-    }
+  body.mobile .merchant-overlay {
+    gap: 12px;
+    padding: 8px;
+  }
 
-    body.mobile .merchant-header {
-      padding: 4px 8px;
-    }
+  body.mobile .merchant-container,
+  body.mobile .merchant-hotbar-container {
+    width: auto;
+    max-width: 560px;
+    min-width: 340px;
+    border-radius: 8px;
+  }
 
-    body.mobile .merchant-info {
-      gap: 8px;
-    }
+  body.mobile .merchant-header {
+    padding: 8px 12px;
+    border-radius: 8px 8px 0 0;
+  }
 
-    body.mobile .merchant-avatar {
-      width: 32px;
-      height: 32px;
-    }
+  body.mobile .merchant-info {
+    gap: 8px;
+  }
 
-    body.mobile .merchant-name {
-      font-size: 12px;
-    }
+  body.mobile .merchant-avatar {
+    width: 32px;
+    height: 32px;
+  }
 
-    body.mobile .merchant-title {
-      font-size: 10px;
-    }
+  body.mobile .merchant-name {
+    font-size: 14px;
+  }
 
-    body.mobile .merchant-close {
-      width: 20px;
-      height: 20px;
-      font-size: 14px;
-    }
+  body.mobile .merchant-title {
+    font-size: 12px;
+  }
 
-    body.mobile .merchant-content {
-      padding: 6px;
-      flex-direction: column;
-      gap: 8px;
-    }
+  body.mobile .merchant-close {
+    width: 24px;
+    height: 24px;
+    font-size: 16px;
+  }
 
-    body.mobile .merchant-grid,
-    body.mobile .merchant-hotbar-grid {
-      justify-items: center;
-      width: fit-content;
-      margin: 0 auto;
-    }
+  body.mobile .merchant-content {
+    padding: 12px;
+    gap: 12px;
+  }
 
-    body.mobile .merchant-right-panel {
-      width: auto;
-      flex: 1;
-      min-height: 80px;
-      padding: var(--merchant-padding);
-    }
+  body.mobile .merchant-grid,
+  body.mobile .merchant-hotbar-grid {
+    padding: 8px;
+    border-radius: 6px;
+  }
 
-    body.mobile .merchant-panel-placeholder {
-      padding: 20px;
-      font-size: 12px;
-    }
+  body.mobile .merchant-hotbar-grid {
+    justify-items: center;
+    width: fit-content;
+    margin: 0 auto;
+    padding: 12px;
+    border-radius: 0 0 6px 6px;
+  }
 
-    body.mobile .merchant-slot-content,
-    body.mobile .merchant-hotbar-slot-content {
-      font-size: 10px;
-    }
+  body.mobile .merchant-right-panel {
+    padding: 8px;
+    border-radius: 6px;
+    flex: 0 0 184px;
+    min-width: 184px;
+    box-sizing: border-box;
+  }
 
-    body.mobile .merchant-item-icon {
-      width: 32px;
-      height: 32px;
-    }
+  body.mobile .merchant-panel-placeholder {
+    font-size: 12px;
+  }
 
-    body.mobile .merchant-hotbar-slot-icon {
-      width: 32px;
-      height: 32px;
-    }
+  body.mobile .merchant-slot-content,
+  body.mobile .merchant-hotbar-slot-content {
+    font-size: 10px;
+  }
 
-    body.mobile .merchant-slot-quantity {
-      font-size: 7px;
-      padding: 1px 2px;
-      bottom: 1px;
-      right: 1px;
-      min-width: 8px;
-    }
+  body.mobile .merchant-item-icon {
+    width: 36px;
+    height: 36px;
+  }
 
-    body.mobile .merchant-hotbar-slot-quantity {
-      font-size: 8px;
-      padding: 1px 3px;
-      bottom: 1px;
-      right: 1px;
-    }
+  body.mobile .merchant-hotbar-slot-icon {
+    width: 36px;
+    height: 36px;
+  }
 
-    body.mobile .merchant-item-tooltip {
-      display: none;
-    }
+  body.mobile .merchant-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 10px;
+    border-radius: 3px;
+  }
 
-    /* Mobile item details */
-    body.mobile .merchant-item-details {
-      gap: 6px;
-    }
+  body.mobile .merchant-hotbar-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+    min-width: 12px;
+    border-radius: 3px;
+  }
 
-    body.mobile .merchant-item-header {
-      gap: 8px;
-      padding: 6px;
-    }
 
-    body.mobile .merchant-item-actions {
-      gap: 6px;
-    }
 
-    body.mobile .merchant-item-icon {
-      width: 24px;
-      height: 24px;
-    }
+  /* Mobile item details */
+  body.mobile .merchant-item-details {
+    min-width: 180px;
+    gap: 8px;
+  }
 
-    body.mobile .merchant-item-name {
-      font-size: 10px;
-    }
+  body.mobile .merchant-item-header {
+    gap: 6px;
+  }
 
-    body.mobile .merchant-item-total {
-      font-size: 9px;
-    }
+  body.mobile .merchant-item-actions {
+    gap: 12px;
+  }
 
-    body.mobile .merchant-qty-btn {
-      width: 20px;
-      height: 20px;
-      font-size: 10px;
-    }
+  body.mobile .merchant-qty-btn {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
 
-    body.mobile .merchant-qty-display {
-      font-size: 10px;
-      min-width: 16px;
-    }
+  body.mobile .merchant-qty-display {
+    font-size: 12px;
+    min-width: 20px;
+  }
 
-    body.mobile .merchant-action-btn {
-      padding: 6px 12px;
-      font-size: 10px;
-    }
+  body.mobile .merchant-action-btn {
+    padding: 8px 16px;
+    font-size: 12px;
   }
 
   /* Button styles */
@@ -5513,37 +5890,40 @@ window.ItemTooltips = (function() {
 
 
   /* Mobile responsive */
-  @media (max-width: 768px) {
+
     body.mobile {
-      --crafting-slot-size: 40px;
-      --crafting-icon-size: 20px;
-      --crafting-gap: 3px;
-      --crafting-padding: 6px;
+      --crafting-slot-size: 44px;
+      --crafting-icon-size: 32px;
+      --crafting-gap: 4px;
+      --crafting-padding: 8px;
     }
 
     body.mobile .crafting-container {
       width: auto;
-      max-width: 500px;
-      min-width: 320px;
+      max-width: 520px;
+      min-width: 340px;
+      border-radius: 8px;
     }
 
     body.mobile .crafting-content {
-      padding: 6px;
-      flex-direction: column;
-      gap: 8px;
+      padding: 12px;
+      gap: 12px;
     }
 
     body.mobile .crafting-grid {
       justify-items: center;
       width: fit-content;
       margin: 0 auto;
+      padding: 8px;
+      border-radius: 6px;
     }
 
     body.mobile .crafting-right-panel {
       width: auto;
       flex: 1;
-      min-height: 80px;
+      min-height: 120px;
       padding: var(--crafting-padding);
+      border-radius: 6px;
     }
 
     body.mobile .crafting-panel-content {
@@ -5556,10 +5936,9 @@ window.ItemTooltips = (function() {
       padding: 16px;
     }
 
-
-
     body.mobile .crafting-header {
-      padding: 4px 8px;
+      padding: 8px 12px;
+      border-radius: 8px 8px 0 0;
     }
 
     body.mobile .crafting-info {
@@ -5572,15 +5951,21 @@ window.ItemTooltips = (function() {
     }
 
     body.mobile .crafting-name {
-      font-size: 12px;
+      font-size: 14px;
     }
 
     body.mobile .crafting-title {
-      font-size: 10px;
+      font-size: 12px;
+    }
+
+    body.mobile .crafting-close {
+      width: 24px;
+      height: 24px;
+      font-size: 16px;
     }
 
     body.mobile .crafting-item-details {
-      gap: 6px;
+      gap: 8px;
     }
 
     body.mobile .crafting-item-header {
@@ -5590,71 +5975,85 @@ window.ItemTooltips = (function() {
     }
 
     body.mobile .crafting-item-header .crafting-item-icon {
-      width: 24px;
-      height: 24px;
+      width: 28px;
+      height: 28px;
     }
 
     body.mobile .crafting-item-name {
-      font-size: 10px;
+      font-size: 11px;
     }
 
     body.mobile .crafting-requirements-title {
-      font-size: 10px;
+      font-size: 11px;
     }
 
     body.mobile .crafting-requirements-list {
       grid-template-columns: repeat(2, 1fr);
-      gap: 3px;
+      gap: 4px;
     }
 
     body.mobile .crafting-requirement-item {
-      padding: 3px 4px;
-      min-height: 28px;
-      gap: 4px;
+      padding: 4px 6px;
+      min-height: 32px;
+      gap: 6px;
+      border-radius: 6px;
     }
 
     body.mobile .crafting-requirement-icon {
-      width: 16px;
-      height: 16px;
+      width: 18px;
+      height: 18px;
     }
 
     body.mobile .crafting-requirement-name {
-      font-size: 9px;
+      font-size: 10px;
     }
 
     body.mobile .crafting-requirement-quantity {
-      font-size: 8px;
-      padding: 1px 2px;
+      font-size: 9px;
+      padding: 1px 3px;
     }
 
     body.mobile .crafting-no-requirements {
-      font-size: 10px;
-      padding: 12px;
+      font-size: 11px;
+      padding: 14px;
     }
 
     body.mobile .crafting-item-actions {
-      padding-top: 6px;
+      padding-top: 8px;
     }
 
     body.mobile .crafting-action-btn {
-      padding: 6px 12px;
-      font-size: 10px;
+      padding: 8px 14px;
+      font-size: 11px;
     }
 
-    body.mobile .crafting-item-stats {
+    body.mobile .crafting-slot-quantity {
       font-size: 8px;
-      margin-top: 3px;
+      padding: 1px 3px;
+      bottom: 2px;
+      right: 2px;
+      min-width: 10px;
+      border-radius: 3px;
+    }
+
+    body.mobile .crafting-item-icon {
+      width: 36px;
+      height: 36px;
+    }
+
+    body.mobile .crafting-item-stats {
+      font-size: 9px;
+      margin-top: 4px;
     }
 
     body.mobile .crafting-item-stats .stats-header {
-      font-size: 8px;
+      font-size: 9px;
     }
 
     body.mobile .crafting-item-description {
-      font-size: 8px;
-      margin-top: 3px;
+      font-size: 9px;
+      margin-top: 4px;
     }
-  }
 </style>
 
 
@@ -6689,6 +7088,20 @@ window.ItemTooltips = (function() {
     <div class="hud-crosshair-vertical"></div>
   </div>
 
+  <!-- Mobile Control Buttons -->
+  <button class="hud-mobile-button" id="hud-attack-btn">
+    <img src="{{CDN_ASSETS_URL}}/icons/skills/combat.png" alt="Attack" class="hud-mobile-button-icon">
+  </button>
+  <button class="hud-mobile-button" id="hud-dodge-btn">
+    <img src="{{CDN_ASSETS_URL}}/icons/skills/agility.png" alt="Dodge" class="hud-mobile-button-icon">
+  </button>
+  <button class="hud-mobile-button" id="hud-jump-btn">
+    <img src="{{CDN_ASSETS_URL}}/icons/buttons/jump.png" alt="Jump" class="hud-mobile-button-icon">
+  </button>
+  <button class="hud-mobile-button" id="hud-interact-btn">
+    <img src="{{CDN_ASSETS_URL}}/icons/buttons/e-mobile.png" alt="Interact" class="hud-mobile-button-icon">
+  </button>
+
   <!-- Hotbar -->
   <div class="hud-hotbar-container">
     <div class="hud-hotbar-grid">
@@ -6820,6 +7233,17 @@ window.ItemTooltips = (function() {
 
     // Setup death overlay respawn button
     document.getElementById('hud-death-respawn-btn').addEventListener('click', handleRespawn);
+    
+    // Setup mobile buttons
+    document.getElementById('hud-attack-btn').addEventListener('touchstart', handleAttackTap);
+    document.getElementById('hud-attack-btn').addEventListener('touchend', stopAutoAttack);
+    document.getElementById('hud-attack-btn').addEventListener('touchcancel', stopAutoAttack);
+    document.getElementById('hud-dodge-btn').addEventListener('touchstart', () => hytopia.pressInput('q', true));
+    document.getElementById('hud-dodge-btn').addEventListener('touchend', () => hytopia.pressInput('q', false));
+    document.getElementById('hud-jump-btn').addEventListener('touchstart', () => hytopia.pressInput('sp', true));
+    document.getElementById('hud-jump-btn').addEventListener('touchend', () => hytopia.pressInput('sp', false));
+    document.getElementById('hud-interact-btn').addEventListener('touchstart', () => hytopia.pressInput('e', true));
+    document.getElementById('hud-interact-btn').addEventListener('touchend', () => hytopia.pressInput('e', false));
   }
 
   function updateHudQuestCount(activeCount, completedCount) {
@@ -7078,6 +7502,49 @@ window.ItemTooltips = (function() {
     }
   }
 
+  // Auto-attack system
+  let autoAttackInterval = null;
+  let lastTapTime = 0;
+
+
+  function handleAttackTap() {
+    const currentTime = Date.now();
+    
+    // Double tap detected (within 300ms)
+    if (currentTime - lastTapTime < 300 && lastTapTime > 0) {
+      stopAutoAttack();
+      hytopia.pressInput('mr', true);
+      setTimeout(() => hytopia.pressInput('mr', false), 100);
+      lastTapTime = 0;
+      return;
+    }
+    
+    // Single tap - start auto attack
+    lastTapTime = currentTime;
+    startAutoAttack();
+  }
+
+  function startAutoAttack() {
+    if (autoAttackInterval) return;
+    
+    // Immediate first attack
+    hytopia.pressInput('ml', true);
+    setTimeout(() => hytopia.pressInput('ml', false), 100);
+    
+    // Repeat every 500ms
+    autoAttackInterval = setInterval(() => {
+      hytopia.pressInput('ml', true);
+      setTimeout(() => hytopia.pressInput('ml', false), 100);
+    }, 500);
+  }
+
+  function stopAutoAttack() {
+    if (autoAttackInterval) {
+      clearInterval(autoAttackInterval);
+      autoAttackInterval = null;
+    }
+  }
+
   // Initialize HUD
   initializeHUD();
 
@@ -8003,181 +8470,312 @@ window.ItemTooltips = (function() {
     }
   }
 
+  /* ============================================
+     MOBILE CONTROL BUTTONS
+     ============================================ */
+
+  .hud-mobile-button {
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(145deg, var(--hud-primary), var(--hud-secondary));
+    border: 2px solid var(--hud-border);
+    border-radius: 50%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+    transition: all var(--hud-transition);
+    box-shadow: var(--hud-box-shadow), var(--hud-inset-shadow);
+    pointer-events: auto;
+    
+    /* Mobile optimizations */
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+    outline: none;
+  }
+
+  /* Individual button positioning */
+  #hud-attack-btn {
+    bottom: 50px;
+    right: 70px;
+    height: 70px;
+    width: 70px;
+  }
+
+  #hud-dodge-btn {
+    bottom: 50px;
+    right: 155px;
+  }
+
+  #hud-jump-btn {
+    bottom: 130px;
+    right: 50px;
+  }
+
+  #hud-interact-btn {
+    bottom: 120px;
+    right: 130px;
+  }
+
+  .hud-mobile-button:active {
+    transform: scale(0.95);
+    box-shadow: var(--hud-box-shadow);
+  }
+
+  .hud-mobile-button-icon {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: contain;
+    opacity: 0.85;
+    transition: opacity var(--hud-transition);
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+  }
+
+  .hud-mobile-button:active .hud-mobile-button-icon {
+    opacity: 1;
+  }
+
+
+
   /* ============================================
      MOBILE RESPONSIVE
      ============================================ */
 
-  @media (max-width: 768px) {
-    :root {
-      --hud-hotbar-size: 40px;
-      --hud-bar-height: 16px;
-      --hud-bar-width: 180px;
-      --hud-hotbar-gap: 6px;
-      --hud-status-gap: 3px;
-      --hud-clock-size: 12px;
-    }
+  body.mobile {
+    --hud-hotbar-size: 44px;
+    --hud-bar-height: 16px;
+    --hud-bar-width: 160px;
+    --hud-hotbar-gap: 5px;
+    --hud-status-gap: 10px;
+    --hud-clock-size: 10px;
+    --hud-actions-gap: 10px;
+  }
 
-    .hud-hotbar-container {
-      bottom: 16px;
-    }
+  /* Show mobile buttons only on mobile */
+  body.mobile .hud-mobile-button {
+    display: flex;
+  }
 
-    .hud-hotbar-grid {
-      padding: 8px;
-      border-radius: 8px;
-    }
+  body.mobile .hud-hotbar-container {
+    bottom: 8px;
+  }
 
-    .hud-status-container {
-      bottom: 70px;
-    }
+  body.mobile .hud-hotbar-grid {
+    padding: 8px;
+    border-radius: 8px;
+    gap: 4px;
+  }
 
-    .hud-clock-container {
-      top: 16px;
-      right: 16px;
-    }
+  body.mobile .hud-status-container {
+    bottom: 82px;
+    gap: 16px;
+  }
 
-    .hud-clock {
-      padding: 8px;
-    }
+  body.mobile .hud-clock-container {
+    top: 16px;
+    right: 16px;
+  }
 
-    .hud-hotbar-slot-content {
-      font-size: 12px;
-    }
+  body.mobile .hud-clock {
+    padding: 8px 10px;
+    border-radius: 8px;
+  }
 
-    .hud-hotbar-slot-icon {
-      width: 28px;
-      height: 28px;
-    }
+  body.mobile .hud-hotbar-slot {
+    border-radius: 8px;
+    border-width: 2px;
+  }
 
-    .hud-hotbar-slot-quantity {
-      font-size: 8px;
-      padding: 1px 3px;
-    }
+  body.mobile .hud-hotbar-slot-content {
+    font-size: 12px;
+  }
 
-    .hud-health-text,
-    .hud-exp-text {
-      font-size: 10px;
-    }
+  body.mobile .hud-hotbar-slot-icon {
+    width: 32px;
+    height: 32px;
+  }
 
-    .hud-exp-gain {
-      font-size: 12px;
-      left: calc(var(--hud-bar-width) + var(--hud-status-gap) + var(--hud-bar-width) / 2);
-    }
+  body.mobile .hud-hotbar-slot-quantity {
+    font-size: 8px;
+    padding: 1px 3px;
+    bottom: 2px;
+    right: 2px;
+  }
 
-    .hud-action-buttons {
-      top: 60px;
-      right: 16px;
-    }
+  body.mobile .hud-health-bar,
+  body.mobile .hud-exp-bar {
+    border-radius: 8px;
+  }
 
-    .hud-action-button-icon {
-      width: 24px;
-      height: 24px;
-    }
+  body.mobile .hud-health-text,
+  body.mobile .hud-exp-text {
+    font-size: 10px;
+  }
 
-    .hud-action-tooltip {
-      display: none;
-    }
+  body.mobile .hud-exp-gain {
+    font-size: 12px;
+    left: calc(var(--hud-bar-width) + var(--hud-status-gap) + var(--hud-bar-width) / 2);
+  }
 
-    .hud-action-key-indicator {
-      width: 16px;
-      height: 16px;
-      top: -6px;
-      right: -6px;
-      font-size: 8px;
-    }
+  body.mobile .hud-action-buttons {
+    top: 55px;
+    right: 16px;
+    gap: 10px;
+  }
 
-    .hud-quest-count-indicator {
-      min-width: 14px;
-      height: 14px;
-      top: -6px;
-      left: -6px;
-      font-size: 8px;
-    }
+  body.mobile .hud-action-button {
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+    border-width: 2px;
+  }
 
-    .hud-help-icon {
-      font-size: 18px;
-    }
+  body.mobile .hud-action-button-icon {
+    width: 44px;
+    height: 44px;
+  }
 
-    /* Notification Mobile Adjustments */
-    .hud-notification-container {
-      top: 60px;
-      right: 66px;
-      gap: 8px;
-    }
+  body.mobile .hud-action-tooltip {
+    display: none;
+  }
 
-    .hud-notification {
-      min-width: 160px;
-      max-width: 240px;
-      padding: 10px 12px;
-      font-size: 11px;
-    }
+  body.mobile .hud-action-key-indicator {
+    width: 16px;
+    height: 16px;
+    top: -6px;
+    right: -6px;
+    font-size: 8px;
+    border-radius: 6px;
+  }
 
-    .hud-notification-content {
-      gap: 8px;
-    }
+  body.mobile .hud-quest-count-indicator {
+    width: 16px;
+    height: 16px;
+    top: -6px;
+    left: -6px;
+    font-size: 9px;
+  }
 
-    .hud-notification-text {
-      font-size: 11px;
-    }
+  body.mobile .hud-help-notification-indicator {
+    width: 12px;
+    height: 12px;
+    top: -5px;
+    left: -5px;
+  }
 
-    .hud-crosshair-horizontal {
-      width: 8px;
-      left: -4px;
-    }
+  body.mobile .hud-help-icon {
+    font-size: 20px;
+  }
 
-    .hud-crosshair-vertical {
-      height: 8px;
-      top: -4px;
-    }
+  /* Notification Mobile Adjustments */
+  body.mobile .hud-notification-container {
+    top: 55px;
+    right: 70px;
+    gap: 8px;
+  }
 
-    /* Area Banner Mobile */
-    .hud-area-banner-text {
-      font-size: clamp(1.8rem, 10vw, 3rem);
-      letter-spacing: 0.05em;
-      margin: 0 0 4px 0;
-    }
+  body.mobile .hud-notification {
+    min-width: 160px;
+    max-width: 240px;
+    padding: 10px 12px;
+    font-size: 10px;
+    border-radius: 8px;
+  }
 
-    @keyframes underlineExpand {
-      to { 
-        width: min(300px, 85vw); 
-        opacity: 1; 
-      }
-    }
+  body.mobile .hud-notification-content {
+    gap: 8px;
+  }
 
-    /* Death Overlay Mobile */
-    .hud-death-content {
-      margin: 0 16px;
-      max-width: 90vw;
-    }
+  body.mobile .hud-notification-icon {
+    width: 14px;
+    height: 14px;
+    font-size: 10px;
+  }
 
-    .hud-death-title {
-      font-size: clamp(1.8rem, 10vw, 3.5rem);
-      margin: 0 0 4px 0;
-      letter-spacing: 0.05em;
-    }
+  body.mobile .hud-notification-text {
+    font-size: 10px;
+  }
 
-    .hud-death-subtitle {
-      font-size: clamp(0.8rem, 4vw, 1rem);
-      margin: 0 0 10px 0;
-    }
+  body.mobile .hud-crosshair-horizontal {
+    width: 10px;
+    height: 2px;
+    left: -5px;
+    top: -1px;
+  }
 
-    .hud-death-underline {
-      margin: 0 auto 20px auto;
-    }
+  body.mobile .hud-crosshair-vertical {
+    width: 2px;
+    height: 10px;
+    top: -5px;
+    left: -1px;
+  }
 
-    @keyframes deathUnderlineExpand {
-      to { 
-        width: min(200px, 80vw); 
-        opacity: 1; 
-      }
+  /* Area Banner Mobile */
+  body.mobile .hud-area-banner-text {
+    font-size: clamp(1.8rem, 9vw, 3rem);
+    letter-spacing: 0.05em;
+    margin: 0 0 4px 0;
+  }
+
+  body.mobile .hud-area-banner-underline {
+    height: 4px;
+  }
+
+  body.mobile .hud-area-banner.show .hud-area-banner-underline {
+    animation: underlineExpandMobile 1.2s ease-out 0.8s forwards;
+  }
+
+  @keyframes underlineExpandMobile {
+    to { 
+      width: min(300px, 80vw); 
+      opacity: 1; 
     }
+  }
 
-    .hud-death-respawn-btn {
-      font-size: 12px;
-      padding: 10px 20px;
-      min-width: 100px;
+  /* Death Overlay Mobile */
+  body.mobile .hud-death-content {
+    margin: 0 16px;
+    max-width: 90vw;
+  }
+
+  body.mobile .hud-death-title {
+    font-size: clamp(1.8rem, 9vw, 3.5rem);
+    margin: 0 0 4px 0;
+    letter-spacing: 0.05em;
+  }
+
+  body.mobile .hud-death-subtitle {
+    font-size: clamp(0.8rem, 4vw, 1rem);
+    margin: 0 0 10px 0;
+  }
+
+  body.mobile .hud-death-underline {
+    margin: 0 auto 18px auto;
+    height: 3px;
+  }
+
+  body.mobile .hud-death-overlay.show .hud-death-underline {
+    animation: deathUnderlineExpandMobile 1.2s ease-out 0.8s forwards;
+  }
+
+  @keyframes deathUnderlineExpandMobile {
+    to { 
+      width: min(220px, 75vw); 
+      opacity: 1; 
     }
   }
 
+  body.mobile .hud-death-respawn-btn {
+    font-size: 12px;
+    padding: 10px 20px;
+    min-width: 100px;
+    border-radius: 8px;
+  }
+
   /* ============================================
      HIGH DPI DISPLAYS
      ============================================ */