@hytopia.com/examples 1.0.3 → 1.0.4

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

@@ -0,0 +1,1576 @@
+<!-- Game HUD Overlay -->
+<div class="hud-overlay">
+  <!-- Area Banner -->
+  <div class="hud-area-banner" id="hud-area-banner">
+    <div class="hud-area-banner-content">
+      <div class="hud-area-banner-text"></div>
+      <div class="hud-area-banner-underline"></div>
+    </div>
+  </div>
+
+  <!-- Death Overlay -->
+  <div class="hud-death-overlay" id="hud-death-overlay">
+    <div class="hud-death-content">
+      <div class="hud-death-title">You Died!</div>
+      <div class="hud-death-subtitle">Await revival or respawn nearby</div>
+      <div class="hud-death-underline"></div>
+      <button class="hud-death-respawn-btn" id="hud-death-respawn-btn">
+        <span class="hud-death-respawn-text">Respawn</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Respawn Fade Overlay -->
+  <div class="hud-respawn-fade" id="hud-respawn-fade"></div>
+
+  <!-- Game Clock (top right) -->
+  <div class="hud-clock-container">
+    <div class="hud-clock">
+      <div class="hud-clock-time">2:45 PM</div>
+    </div>
+  </div>
+
+  <!-- Action Buttons (below clock) -->
+  <div class="hud-action-buttons">
+    <button class="hud-action-button" id="hud-quest-log-btn">
+      <img src="{{CDN_ASSETS_URL}}/icons/buttons/quests.png" alt="Quests" class="hud-action-button-icon">
+      <div class="hud-action-key-indicator">J</div>
+      <div class="hud-quest-count-indicator" id="hud-quest-count-indicator">0</div>
+      <div class="hud-action-tooltip">
+        <div class="hud-action-tooltip-content">
+          Quests - View your active and completed quests.
+        </div>
+      </div>
+    </button>
+    <button class="hud-action-button" id="hud-backpack-btn">
+      <img src="{{CDN_ASSETS_URL}}/icons/buttons/backpack.png" alt="Backpack" class="hud-action-button-icon">
+      <div class="hud-action-key-indicator">I</div>
+      <div class="hud-action-tooltip">
+        <div class="hud-action-tooltip-content">
+          Backpack - View and manage your backpack and equipment.
+        </div>
+      </div>
+    </button>
+    <button class="hud-action-button" id="hud-skills-btn">
+      <img src="{{CDN_ASSETS_URL}}/icons/buttons/skills.png" alt="Skills" class="hud-action-button-icon">
+      <div class="hud-action-key-indicator">M</div>
+      <div class="hud-action-tooltip">
+        <div class="hud-action-tooltip-content">
+          Skills - View your current character skills.
+        </div>
+      </div>
+    </button>
+    <button class="hud-action-button hud-help-button" id="hud-help-btn">
+      <div class="hud-help-icon">?</div>
+      <div class="hud-action-key-indicator">O</div>
+      <div class="hud-help-notification-indicator show" id="hud-help-notification-indicator"></div>
+      <div class="hud-action-tooltip">
+        <div class="hud-action-tooltip-content">
+          Help - View game controls and tips.
+        </div>
+      </div>
+    </button>
+  </div>
+
+  <!-- Player Status Bars (positioned above hotbar) -->
+  <div class="hud-status-container">
+    <!-- Health Bar -->
+    <div class="hud-health-bar">
+      <div class="hud-health-fill health-high" style="width: 75%;"></div>
+      <div class="hud-health-text">150 / 200</div>
+    </div>
+    
+    <!-- Experience Bar -->
+    <div class="hud-exp-bar">
+      <div class="hud-exp-fill" style="width: 60%;"></div>
+      <div class="hud-exp-text">Level 12 - 1,200 / 2,000 XP</div>
+    </div>
+  </div>
+
+  <!-- Crosshair -->
+  <div class="hud-crosshair">
+    <div class="hud-crosshair-horizontal"></div>
+    <div class="hud-crosshair-vertical"></div>
+  </div>
+
+  <!-- Hotbar -->
+  <div class="hud-hotbar-container">
+    <div class="hud-hotbar-grid">
+      <!-- Static hotbar slots -->
+      <div class="hud-hotbar-slot">
+        <div class="hud-hotbar-slot-content">1</div>
+      </div>
+      <div class="hud-hotbar-slot">
+        <div class="hud-hotbar-slot-content">2</div>
+      </div>
+      <div class="hud-hotbar-slot">
+        <div class="hud-hotbar-slot-content">3</div>
+      </div>
+      <div class="hud-hotbar-slot">
+        <div class="hud-hotbar-slot-content">4</div>
+      </div>
+      <div class="hud-hotbar-slot">
+        <div class="hud-hotbar-slot-content">5</div>
+      </div>
+      <div class="hud-hotbar-slot">
+        <div class="hud-hotbar-slot-content">6</div>
+      </div>
+      <div class="hud-hotbar-slot">
+        <div class="hud-hotbar-slot-content">7</div>
+      </div>
+      <div class="hud-hotbar-slot">
+        <div class="hud-hotbar-slot-content">8</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Notification Toast Container (outside HUD overlay for proper z-indexing) -->
+<div class="hud-notification-container" id="hud-notification-container"></div>
+
+<script>
+  // Configuration
+  const HUD_CONFIG = {
+    // Layout
+    hotbarSlots: 8,
+    
+    // Timing (in milliseconds)
+    clockUpdateInterval: 1000,
+    elementFadeDuration: 500,
+    expGainStaggerDelay: 100,
+    expGainDuration: 1200,
+    notificationDuration: 7500,
+    respawnDelay: 250
+  };
+
+  // State Management
+  let gameTime = { hour: 0, minute: 0 };
+  let lastExp = null;
+  let expGainCount = 0;
+
+  // Data Handlers
+  hytopia.onData(data => {
+    switch (data.type) {
+      case 'syncClock':
+        gameTime = { hour: data.hour, minute: data.minute };
+        updateClock();
+        break;
+      case 'syncExp':
+        updateExperienceBar(data.level, data.exp, data.currentLevelExp, data.nextLevelExp);
+        break;
+      case 'syncHealth':
+        updateHealthBar(data.health, data.maxHealth);
+        break;
+      case 'hotbarUpdate':
+        updateHotbarSlot(data.position, data);
+        break;
+      case 'showAreaBanner':
+        showAreaBanner(data.areaName);
+        break;
+      case 'showNotification':
+        showNotification(data.message, data.notificationType);
+        break;
+    }
+  });
+
+  // Initialization
+  function initializeHUD() {
+    setupClock();
+    setupHotbar();
+    setupActionButtons();
+    setActiveSlot(0);
+  }
+
+  function setupClock() {
+    const clockTime = document.querySelector('.hud-clock-time');
+    setInterval(() => {
+      gameTime.minute++;
+      if (gameTime.minute >= 60) {
+        gameTime.minute = 0;
+        gameTime.hour = (gameTime.hour + 1) % 24;
+      }
+      updateClock();
+    }, HUD_CONFIG.clockUpdateInterval);
+  }
+
+  function setupHotbar() {
+    const hotbarSlots = document.querySelectorAll('.hud-hotbar-slot');
+    
+    // Setup click events
+    hotbarSlots.forEach((slot, index) => {
+      slot.addEventListener('click', () => setActiveSlot(index));
+    });
+
+    // Setup keyboard events
+    document.addEventListener('keydown', (e) => {
+      const key = parseInt(e.key);
+      if (key >= 1 && key <= HUD_CONFIG.hotbarSlots) {
+        setActiveSlot(key - 1);
+      }
+    });
+  }
+
+  function setupActionButtons() {
+    const buttons = {
+      'hud-quest-log-btn': () => window.frontiersRPG.openQuests(),
+      'hud-backpack-btn': () => window.frontiersRPG.openBackpack(),
+      'hud-skills-btn': () => window.frontiersRPG.openSkills(),
+      'hud-help-btn': () => window.frontiersRPG.openHelp()
+    };
+
+    Object.entries(buttons).forEach(([id, handler]) => {
+      document.getElementById(id).addEventListener('click', handler);
+    });
+
+    // Setup death overlay respawn button
+    document.getElementById('hud-death-respawn-btn').addEventListener('click', handleRespawn);
+  }
+
+  function updateHudQuestCount(activeCount, completedCount) {
+    const questIndicator = document.getElementById('hud-quest-count-indicator');
+    const helpNotification = document.getElementById('hud-help-notification-indicator');
+    
+    // Update quest count indicator
+    if (activeCount > 0) {
+      questIndicator.textContent = activeCount.toString();
+      questIndicator.classList.add('show');
+    } else {
+      questIndicator.classList.remove('show');
+    }
+    
+    // Hide help notification if the user has any quests, meaning they've started the game.
+    if (activeCount > 0 || completedCount > 0) {
+      helpNotification.classList.remove('show');
+    }
+  }
+
+  // Utility Functions
+  function formatExpNumber(num) {
+    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+    return num.toString();
+  }
+
+  function updateClock() {
+    const clockTime = document.querySelector('.hud-clock-time');
+    const period = gameTime.hour >= 12 ? 'PM' : 'AM';
+    const displayHour = gameTime.hour === 0 ? 12 : gameTime.hour > 12 ? gameTime.hour - 12 : gameTime.hour;
+    clockTime.textContent = `${displayHour}:${gameTime.minute.toString().padStart(2, '0')} ${period}`;
+  }
+
+  function setActiveSlot(index) {
+    const hotbarSlots = document.querySelectorAll('.hud-hotbar-slot');
+    hotbarSlots.forEach((slot, i) => 
+      slot.classList.toggle('hud-hotbar-slot-active', i === index)
+    );
+    hytopia.sendData({ type: 'setSelectedHotbarIndex', index });
+  }
+
+  // Update Functions
+  function updateHealthBar(health, maxHealth) {
+    const healthBar = document.querySelector('.hud-health-fill');
+    const healthText = document.querySelector('.hud-health-text');
+    
+    const healthPercent = Math.max(0, Math.min(100, (health / maxHealth) * 100));
+    
+    healthBar.style.width = `${healthPercent}%`;
+    
+    // Update color class
+    healthBar.className = 'hud-health-fill';
+    if (healthPercent > 66) {
+      healthBar.classList.add('health-high');
+    } else if (healthPercent > 33) {
+      healthBar.classList.add('health-medium');
+    } else {
+      healthBar.classList.add('health-low');
+    }
+    
+    healthText.textContent = `${Math.max(0, health)} / ${maxHealth}`;
+
+    // Show death overlay if health reaches 0, hide if health is restored
+    if (health <= 0) {
+      showDeathOverlay();
+    } else if (health > 0) {
+      hideDeathOverlay();
+    }
+  }
+
+  function updateExperienceBar(level, exp, currentLevelExp, nextLevelExp) {
+    const expBar = document.querySelector('.hud-exp-fill');
+    const expText = document.querySelector('.hud-exp-text');
+    
+    // Show EXP gain effect if applicable
+    if (lastExp !== null && exp > lastExp) {
+      showExpGainEffect(exp - lastExp);
+    }
+    lastExp = exp;
+    
+    // Calculate and update progress
+    const currentProgress = exp - currentLevelExp;
+    const maxProgress = nextLevelExp - currentLevelExp;
+    const expPercent = Math.max(0, Math.min(100, (currentProgress / maxProgress) * 100));
+    
+    expBar.style.width = `${expPercent}%`;
+    
+    // Update text
+    const currentFormatted = formatExpNumber(currentProgress);
+    const maxFormatted = formatExpNumber(maxProgress);
+    const percentText = `${Math.round(expPercent)}%`;
+    
+    expText.textContent = `Level ${level} • ${currentFormatted}/${maxFormatted} XP (${percentText})`;
+  }
+
+  function updateHotbarSlot(position, itemData) {
+    if (position < 0 || position >= HUD_CONFIG.hotbarSlots) return;
+    
+    const hotbarSlots = document.querySelectorAll('.hud-hotbar-slot');
+    const slot = hotbarSlots[position];
+    const content = slot.querySelector('.hud-hotbar-slot-content');
+    
+    content.innerHTML = '';
+    
+    if (itemData.removed) {
+      content.textContent = position + 1;
+    } else {
+      const icon = document.createElement('img');
+      icon.src = `{{CDN_ASSETS_URL}}/${itemData.iconImageUri}`;
+      icon.alt = 'Item';
+      icon.className = 'hud-hotbar-slot-icon';
+      content.appendChild(icon);
+      
+      if (itemData.quantity && itemData.quantity > 1) {
+        const quantity = document.createElement('div');
+        quantity.className = 'hud-hotbar-slot-quantity';
+        quantity.textContent = itemData.quantity.toLocaleString();
+        content.appendChild(quantity);
+      }
+    }
+  }
+
+  function showExpGainEffect(expGained) {
+    const expGainEl = document.createElement('div');
+    expGainEl.className = 'hud-exp-gain';
+    expGainEl.textContent = `+${formatExpNumber(expGained)} XP`;
+    
+    const delay = expGainCount++ * HUD_CONFIG.expGainStaggerDelay;
+    
+    document.querySelector('.hud-status-container').appendChild(expGainEl);
+    
+    setTimeout(() => expGainEl.classList.add('show'), delay);
+    setTimeout(() => {
+      expGainEl.remove();
+      expGainCount = Math.max(0, expGainCount - 1);
+    }, HUD_CONFIG.expGainDuration + delay);
+  }
+
+  function showAreaBanner(areaName) {
+    const banner = document.getElementById('hud-area-banner');
+    const bannerText = banner.querySelector('.hud-area-banner-text');
+    
+    // Update text
+    bannerText.textContent = areaName;
+    
+    // Wait 1.5 seconds before showing banner
+    setTimeout(() => {
+      // Show banner
+      banner.classList.add('show');
+      
+      // Hide banner after 4 seconds
+      setTimeout(() => {
+        banner.classList.remove('show');
+      }, 4000);
+    }, 1500);
+  }
+
+  // Notification System
+  function showNotification(message, type = 'success') {
+    const container = document.getElementById('hud-notification-container');
+    const notification = document.createElement('div');
+    
+    notification.className = 'hud-notification';
+    notification.setAttribute('data-type', type);
+    
+    // Simple icon mapping
+    const icons = { complete: '✓', new: '!' };
+    const icon = icons[type];
+    
+    notification.innerHTML = `
+      <div class="hud-notification-content">
+        ${icon ? `<div class="hud-notification-icon">${icon}</div>` : ''}
+        <div class="hud-notification-text">${message}</div>
+      </div>
+    `;
+    
+    container.appendChild(notification);
+    
+    // Animate in
+    setTimeout(() => notification.classList.add('show'), 10);
+    
+    // Auto-dismiss
+    setTimeout(() => {
+      notification.classList.add('hide');
+      setTimeout(() => notification.remove(), 400);
+    }, HUD_CONFIG.notificationDuration);
+  }
+
+  // Death Overlay Functions
+  function showDeathOverlay() {
+    document.getElementById('hud-death-overlay').classList.add('show');
+    hytopia.lockPointer(false);
+  }
+
+  function hideDeathOverlay() {
+    document.getElementById('hud-death-overlay').classList.remove('show');
+    hytopia.lockPointer(true);
+  }
+
+  // Utility Functions
+  function fadeElement(element, opacity, duration = HUD_CONFIG.elementFadeDuration) {
+    return new Promise(resolve => {
+      element.style.transition = `opacity ${duration}ms ease-in-out`;
+      element.style.opacity = opacity;
+      setTimeout(resolve, duration);
+    });
+  }
+
+  function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  async function handleRespawn() {
+    const respawnFade = document.getElementById('hud-respawn-fade');
+    const respawnBtn = document.getElementById('hud-death-respawn-btn');
+    
+    if (respawnBtn.disabled) return;
+    
+    try {
+      respawnBtn.disabled = true;
+      respawnBtn.style.opacity = '0.6';
+      
+      await fadeElement(respawnFade, 1);
+      hideDeathOverlay();
+      hytopia.sendData({ type: 'respawnPlayer' });
+      await delay(HUD_CONFIG.respawnDelay);
+      await fadeElement(respawnFade, 0);
+      
+    } finally {
+      respawnBtn.disabled = false;
+      respawnBtn.style.opacity = '';
+    }
+  }
+
+  // Initialize HUD
+  initializeHUD();
+
+  // Setup global functions
+  window.frontiersRPG = window.frontiersRPG || {};
+  window.frontiersRPG.updateHudQuestCount = updateHudQuestCount;
+</script>
+
+<style>
+  :root {
+    /* Layout Variables */
+    --hud-hotbar-size: 56px;
+    --hud-bar-height: 20px;
+    --hud-bar-width: 220px;
+    --hud-hotbar-gap: 8px;
+    --hud-actions-gap: 16px;
+    --hud-status-gap: 12px;
+    --hud-clock-size: 14px;
+    
+    /* Color Variables */
+    --hud-primary: #2a2a2a;
+    --hud-secondary: #1e1e1e;
+    --hud-border: #444;
+    --hud-health: #22c55e;
+    --hud-exp: #ffd700;
+    --hud-text: #ffffff;
+    --hud-text-secondary: #cccccc;
+    --hud-crosshair: rgba(255, 255, 255, 0.8);
+    
+    /* Font Variables */
+    --hud-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --hud-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    
+    /* Effect Variables */
+    --hud-transition: 0.2s ease;
+    --hud-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
+    --hud-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  /* Base HUD Overlay */
+  .hud-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 100;
+    font-family: var(--hud-font);
+    user-select: none;
+  }
+
+  /* ============================================
+     AREA BANNER
+     ============================================ */
+
+  .hud-area-banner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.6s ease-out;
+  }
+
+  .hud-area-banner.show {
+    opacity: 1;
+    animation: areaBannerFade 4s ease-out;
+  }
+
+  .hud-area-banner-content {
+    text-align: center;
+  }
+
+  .hud-area-banner-text {
+    font-family: 'EB Garamond', serif;
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: 600;
+    color: #f4f1e8;
+    text-shadow: 
+      0 0 30px rgba(244, 241, 232, 0.4),
+      0 4px 12px rgba(0, 0, 0, 0.8);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin: 0 0 5px 0;
+    white-space: nowrap;
+    transform: translateY(15px);
+    opacity: 0;
+  }
+
+  .hud-area-banner.show .hud-area-banner-text {
+    animation: textShow 1s ease-out 0.3s forwards;
+  }
+
+  .hud-area-banner-underline {
+    width: 0;
+    height: 4px;
+    margin: 0 auto;
+    background: linear-gradient(90deg, 
+      transparent, 
+      rgba(255, 215, 0, 0.6) 25%, 
+      #ffd700 50%, 
+      rgba(255, 215, 0, 0.6) 75%, 
+      transparent);
+    box-shadow: 
+      0 0 20px rgba(255, 215, 0, 0.5),
+      0 2px 6px rgba(0, 0, 0, 0.6);
+    border-radius: 2px;
+  }
+
+  .hud-area-banner.show .hud-area-banner-underline {
+    animation: underlineExpand 1.2s ease-out 0.8s forwards;
+  }
+
+  /* Animations */
+  @keyframes areaBannerFade {
+    0%, 85% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+
+  @keyframes textShow {
+    to { 
+      opacity: 0.8; 
+      transform: translateY(0); 
+    }
+  }
+
+  @keyframes underlineExpand {
+    to { 
+      width: min(500px, 70vw); 
+      opacity: 1; 
+    }
+  }
+
+  /* ============================================
+     STATUS BARS
+     ============================================ */
+
+  .hud-status-container {
+    position: absolute;
+    bottom: 120px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: row;
+    gap: var(--hud-status-gap);
+    pointer-events: auto;
+  }
+
+  .hud-health-bar,
+  .hud-exp-bar {
+    position: relative;
+    width: var(--hud-bar-width);
+    height: var(--hud-bar-height);
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid var(--hud-border);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: var(--hud-box-shadow), inset 0 1px 2px rgba(0, 0, 0, 0.5);
+  }
+
+  .hud-health-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: linear-gradient(90deg, var(--hud-health), #16a34a);
+    transition: width 0.3s ease;
+    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
+  }
+
+  .hud-health-fill.health-high {
+    background: linear-gradient(90deg, #4CAF50, #16a34a);
+  }
+
+  .hud-health-fill.health-medium {
+    background: linear-gradient(90deg, #FFC107, #f59e0b);
+  }
+
+  .hud-health-fill.health-low {
+    background: linear-gradient(90deg, #f44336, #dc2626);
+  }
+
+  .hud-exp-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: linear-gradient(90deg, var(--hud-exp), #f59e0b);
+    transition: width 0.5s ease;
+    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
+  }
+
+  .hud-health-text,
+  .hud-exp-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--hud-text);
+    text-shadow: var(--hud-text-shadow);
+    white-space: nowrap;
+    z-index: 2;
+  }
+
+  /* EXP Gain Effect */
+  .hud-exp-gain {
+    position: absolute;
+    top: 50%;
+    left: calc(var(--hud-bar-width) + var(--hud-status-gap) + var(--hud-bar-width) / 2);
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--hud-exp);
+    text-shadow: var(--hud-text-shadow), 
+                 0 0 8px rgba(255, 215, 0, 0.6),
+                 1px 1px 0 #000, 
+                 -1px -1px 0 #000;
+    opacity: 0;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 10;
+    white-space: nowrap;
+  }
+
+  .hud-exp-gain.show {
+    animation: expGainFloat 1.2s ease-out;
+  }
+
+  @keyframes expGainFloat {
+    0% { 
+      opacity: 0; 
+      transform: translate(-50%, -50%) translateY(0) scale(0.6); 
+    }
+    15% { 
+      opacity: 1; 
+      transform: translate(-50%, -50%) translateY(-8px) scale(1.1); 
+    }
+    25% { 
+      transform: translate(-50%, -50%) translateY(-12px) scale(1); 
+    }
+    100% { 
+      opacity: 0; 
+      transform: translate(-50%, -50%) translateY(-40px) scale(0.8); 
+    }
+  }
+
+  /* ============================================
+     HOTBAR
+     ============================================ */
+
+  .hud-hotbar-container {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: auto;
+  }
+
+  .hud-hotbar-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: var(--hud-hotbar-gap);
+    background: linear-gradient(145deg, var(--hud-primary), var(--hud-secondary));
+    padding: 12px;
+    border: 2px solid var(--hud-border);
+    border-radius: 12px;
+    box-shadow: var(--hud-box-shadow), var(--hud-inset-shadow);
+  }
+
+  .hud-hotbar-slot {
+    position: relative;
+    width: var(--hud-hotbar-size);
+    height: var(--hud-hotbar-size);
+    background: rgba(0, 0, 0, 0.6);
+    border: 2px solid #333;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--hud-transition);
+    overflow: hidden;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .hud-hotbar-slot:hover {
+    border-color: #555;
+    background: rgba(0, 0, 0, 0.8);
+    transform: translateY(-2px);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.6);
+  }
+
+  .hud-hotbar-slot-active {
+    border-color: var(--hud-text-secondary) !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 3px rgba(255, 255, 255, 0.2) !important;
+  }
+
+  .hud-hotbar-slot-active .hud-hotbar-slot-content {
+    color: var(--hud-text-secondary);
+  }
+
+  .hud-hotbar-slot-content {
+    position: relative;
+    z-index: 2;
+    font-size: 14px;
+    font-weight: 600;
+    color: #888;
+    text-shadow: var(--hud-text-shadow);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hud-hotbar-slot-icon {
+    width: 48px;
+    height: 48px;
+    object-fit: contain;
+    image-rendering: pixelated;
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+  }
+
+  .hud-hotbar-slot-quantity {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.8);
+    color: var(--hud-text);
+    font-size: 10px;
+    font-weight: 700;
+    padding: 1px 4px;
+    border-radius: 3px;
+    line-height: 1;
+    text-shadow: var(--hud-text-shadow);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    min-width: 12px;
+    text-align: center;
+  }
+
+  /* ============================================
+     CLOCK
+     ============================================ */
+
+  .hud-clock-container {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    pointer-events: auto;
+  }
+
+  .hud-clock {
+    background: linear-gradient(145deg, var(--hud-primary), var(--hud-secondary));
+    border: 2px solid var(--hud-border);
+    border-radius: 8px;
+    padding: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), var(--hud-inset-shadow);
+  }
+
+  .hud-clock-time {
+    font-size: var(--hud-clock-size);
+    font-weight: 600;
+    color: var(--hud-text);
+    text-shadow: var(--hud-text-shadow);
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ============================================
+     ACTION BUTTONS
+     ============================================ */
+
+  .hud-action-buttons {
+    position: absolute;
+    top: 80px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--hud-actions-gap);
+    pointer-events: auto;
+  }
+
+  .hud-action-button {
+    position: relative;
+    width: var(--hud-hotbar-size);
+    height: var(--hud-hotbar-size);
+    background: linear-gradient(145deg, var(--hud-primary), var(--hud-secondary));
+    border: 2px solid var(--hud-border);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--hud-transition);
+    overflow: visible;
+    box-shadow: var(--hud-box-shadow), var(--hud-inset-shadow);
+    padding: 0;
+  }
+
+  .hud-action-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9), var(--hud-inset-shadow);
+    border-color: #555;
+  }
+
+  .hud-action-button:hover .hud-action-tooltip {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-8px);
+  }
+
+  .hud-action-tooltip {
+    position: absolute;
+    right: 100%;
+    margin-right: 12px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .hud-action-tooltip-content {
+    background: linear-gradient(145deg, var(--hud-primary), var(--hud-secondary));
+    border: 2px solid var(--hud-border);
+    border-radius: 8px;
+    padding: 8px 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), var(--hud-inset-shadow);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--hud-text);
+    text-shadow: var(--hud-text-shadow);
+    white-space: nowrap;
+    line-height: 1.3;
+    position: relative;
+  }
+
+  .hud-action-tooltip-content::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-left: 8px solid var(--hud-border);
+  }
+
+  .hud-action-tooltip-content::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    margin-left: -2px;
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid var(--hud-primary);
+    z-index: 1;
+  }
+
+  .hud-action-button-icon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    opacity: 0.8;
+    border-radius: 6px;
+    transition: opacity var(--hud-transition);
+  }
+
+  .hud-action-button:hover .hud-action-button-icon {
+    opacity: 1;
+  }
+
+  /* Help Button Styles */
+  .hud-help-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: 900;
+    color: #cccccc;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    opacity: 0.8;
+    transition: opacity var(--hud-transition);
+  }
+
+  .hud-action-button:hover .hud-help-icon {
+    opacity: 1;
+  }
+
+  /* Key Indicators */
+  .hud-action-key-indicator {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    width: 20px;
+    height: 20px;
+    background: linear-gradient(145deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
+    border-radius: 6px;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    font-weight: 700;
+    color: var(--hud-text);
+    text-shadow: var(--hud-text-shadow);
+    z-index: 3;
+    transition: all var(--hud-transition);
+    pointer-events: none;
+  }
+
+  .hud-action-button:hover .hud-action-key-indicator {
+    background: linear-gradient(145deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85));
+  }
+
+  /* Hide key indicators on mobile */
+  body.mobile .hud-action-key-indicator {
+    display: none;
+  }
+
+  /* Hide help button on mobile */
+  body.mobile .hud-help-button {
+    display: none;
+  }
+
+  /* Quest Count Indicator */
+  .hud-quest-count-indicator {
+    position: absolute;
+    top: -8px;
+    left: -8px;
+    width: 18px;
+    height: 18px;
+    background: linear-gradient(145deg, #4CAF50, #66BB6A);
+    border: 1px solid rgba(76, 175, 80, 0.8);
+    border-radius: 50%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-size: 9px;
+    font-weight: 700;
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    z-index: 4;
+    box-shadow: 
+      0 0 8px rgba(76, 175, 80, 0.5),
+      0 1px 4px rgba(0, 0, 0, 0.8),
+      inset 0 1px 0 rgba(255, 255, 255, 0.3);
+    transition: all var(--hud-transition);
+    pointer-events: none;
+  }
+
+  .hud-quest-count-indicator.show {
+    display: flex;
+  }
+
+  .hud-action-button:hover .hud-quest-count-indicator {
+    transform: scale(1.1);
+    box-shadow: 
+      0 0 12px rgba(76, 175, 80, 0.7),
+      0 1px 4px rgba(0, 0, 0, 0.8),
+      inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  }
+
+  /* Help Notification Indicator */
+  .hud-help-notification-indicator {
+    position: absolute;
+    top: -6px;
+    left: -6px;
+    width: 14px;
+    height: 14px;
+    background: #dc2626;
+    border-radius: 50%;
+    display: none;
+    z-index: 4;
+    pointer-events: none;
+    animation: pulse 2s infinite;
+  }
+
+  .hud-help-notification-indicator.show {
+    display: block;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  /* ============================================
+     NOTIFICATION TOASTS
+     ============================================ */
+
+  .hud-notification-container {
+    position: absolute;
+    top: 80px;
+    right: 90px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    pointer-events: none;
+    font-family: var(--hud-font);
+    z-index: 100000;
+  }
+
+  .hud-notification {
+    background: linear-gradient(145deg, var(--hud-primary), var(--hud-secondary));
+    border: 2px solid var(--notification-color);
+    border-radius: 8px;
+    padding: 12px 16px;
+    min-width: 200px;
+    max-width: 300px;
+    
+    box-shadow: 
+      0 4px 16px rgba(0, 0, 0, 0.8),
+      0 0 8px var(--notification-glow),
+      var(--hud-inset-shadow);
+    
+    opacity: 0;
+    transform: translateX(120%) scale(0.9);
+    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    pointer-events: auto;
+  }
+
+  .hud-notification[data-type="success"],
+  .hud-notification[data-type="complete"],
+  .hud-notification[data-type="new"] { 
+    --notification-color: #4CAF50; 
+    --notification-glow: rgba(76, 175, 80, 0.3);
+  }
+
+  .hud-notification[data-type="warning"] { 
+    --notification-color: #FFC107; 
+    --notification-glow: rgba(255, 193, 7, 0.3);
+  }
+
+  .hud-notification[data-type="error"] { 
+    --notification-color: #f44336; 
+    --notification-glow: rgba(244, 67, 54, 0.3);
+  }
+
+  .hud-notification.show {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+
+  .hud-notification.hide {
+    opacity: 0;
+    transform: translateX(120%) scale(0.9);
+    transition: all 0.4s ease-out;
+  }
+
+  /* Notification Content Layout */
+  .hud-notification-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+  }
+
+  .hud-notification-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 900;
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .hud-notification-text {
+    flex: 1;
+    line-height: 1.4;
+  }
+
+  /* Notification text styling */
+  .hud-notification-text {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--hud-text);
+    text-shadow: var(--hud-text-shadow);
+    word-wrap: break-word;
+  }
+
+  /* ============================================
+     CROSSHAIR
+     ============================================ */
+
+  .hud-crosshair {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 50;
+  }
+
+  .hud-crosshair-horizontal,
+  .hud-crosshair-vertical {
+    position: absolute;
+    background: var(--hud-crosshair);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+  }
+
+  .hud-crosshair-horizontal {
+    width: 12px;
+    height: 2px;
+    top: -1px;
+    left: -6px;
+  }
+
+  .hud-crosshair-vertical {
+    width: 2px;
+    height: 12px;
+    top: -6px;
+    left: -1px;
+  }
+
+  /* ============================================
+     DEATH OVERLAY
+     ============================================ */
+
+  .hud-death-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.6s ease-out;
+  }
+
+  .hud-death-overlay.show {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ============================================
+     RESPAWN FADE OVERLAY
+     ============================================ */
+
+  .hud-respawn-fade {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000000;
+    z-index: 15000;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .hud-death-content {
+    text-align: center;
+    transform: translateY(15px);
+    opacity: 0;
+    transition: all 0.8s ease-out;
+    max-width: 500px;
+    margin: 0 20px;
+  }
+
+  .hud-death-overlay.show .hud-death-content {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  .hud-death-title {
+    font-family: 'EB Garamond', serif;
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: 600;
+    color: #dc2626;
+    text-shadow: 
+      0 0 30px rgba(220, 38, 38, 0.4),
+      0 4px 12px rgba(0, 0, 0, 0.8);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin: 0 0 5px 0;
+    white-space: nowrap;
+    transform: translateY(15px);
+    opacity: 0;
+  }
+
+  .hud-death-overlay.show .hud-death-title {
+    animation: deathTitleShow 1s ease-out 0.3s forwards;
+  }
+
+  .hud-death-subtitle {
+    font-family: var(--hud-font);
+    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
+    font-weight: 500;
+    color: var(--hud-text-secondary);
+    text-shadow: var(--hud-text-shadow);
+    margin: 0 0 12px 0;
+    opacity: 0.8;
+    line-height: 1.4;
+    transform: translateY(15px);
+    opacity: 0;
+  }
+
+  .hud-death-overlay.show .hud-death-subtitle {
+    animation: deathSubtitleShow 1s ease-out 0.5s forwards;
+  }
+
+  .hud-death-underline {
+    width: 0;
+    height: 3px;
+    margin: 0 auto 24px auto;
+    background: linear-gradient(90deg, 
+      transparent, 
+      rgba(220, 38, 38, 0.6) 25%, 
+      #dc2626 50%, 
+      rgba(220, 38, 38, 0.6) 75%, 
+      transparent);
+    box-shadow: 
+      0 0 20px rgba(220, 38, 38, 0.5),
+      0 2px 6px rgba(0, 0, 0, 0.6);
+    border-radius: 2px;
+    opacity: 0;
+  }
+
+  .hud-death-overlay.show .hud-death-underline {
+    animation: deathUnderlineExpand 1.2s ease-out 0.8s forwards;
+  }
+
+  .hud-death-respawn-btn {
+    background: linear-gradient(145deg, #dc2626, #b91c1c);
+    border: 2px solid #991b1b;
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-family: var(--hud-font);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--hud-text);
+    text-shadow: var(--hud-text-shadow);
+    cursor: pointer;
+    transition: all var(--hud-transition);
+    box-shadow: 
+      0 4px 12px rgba(220, 38, 38, 0.3),
+      inset 0 1px 2px rgba(255, 255, 255, 0.1);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    position: relative;
+    overflow: hidden;
+    min-width: 120px;
+  }
+
+  .hud-death-respawn-btn:hover {
+    background: linear-gradient(145deg, #ef4444, #dc2626);
+    border-color: #b91c1c;
+    transform: translateY(-2px);
+    box-shadow: 
+      0 6px 16px rgba(220, 38, 38, 0.4),
+      inset 0 1px 2px rgba(255, 255, 255, 0.1);
+  }
+
+  .hud-death-respawn-btn:active {
+    transform: translateY(0);
+  }
+
+  .hud-death-respawn-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    transition: left 0.5s ease;
+  }
+
+  .hud-death-respawn-btn:hover::before {
+    left: 100%;
+  }
+
+  .hud-death-respawn-text {
+    position: relative;
+    z-index: 2;
+  }
+
+  @keyframes deathTitleShow {
+    to { 
+      opacity: 0.9; 
+      transform: translateY(0); 
+    }
+  }
+
+  @keyframes deathSubtitleShow {
+    to { 
+      opacity: 0.9; 
+      transform: translateY(0); 
+    }
+  }
+
+  @keyframes deathUnderlineExpand {
+    to { 
+      width: min(250px, 60vw); 
+      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;
+    }
+
+    .hud-hotbar-container {
+      bottom: 16px;
+    }
+
+    .hud-hotbar-grid {
+      padding: 8px;
+      border-radius: 8px;
+    }
+
+    .hud-status-container {
+      bottom: 70px;
+    }
+
+    .hud-clock-container {
+      top: 16px;
+      right: 16px;
+    }
+
+    .hud-clock {
+      padding: 8px;
+    }
+
+    .hud-hotbar-slot-content {
+      font-size: 12px;
+    }
+
+    .hud-hotbar-slot-icon {
+      width: 28px;
+      height: 28px;
+    }
+
+    .hud-hotbar-slot-quantity {
+      font-size: 8px;
+      padding: 1px 3px;
+    }
+
+    .hud-health-text,
+    .hud-exp-text {
+      font-size: 10px;
+    }
+
+    .hud-exp-gain {
+      font-size: 12px;
+      left: calc(var(--hud-bar-width) + var(--hud-status-gap) + var(--hud-bar-width) / 2);
+    }
+
+    .hud-action-buttons {
+      top: 60px;
+      right: 16px;
+    }
+
+    .hud-action-button-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    .hud-action-tooltip {
+      display: none;
+    }
+
+    .hud-action-key-indicator {
+      width: 16px;
+      height: 16px;
+      top: -6px;
+      right: -6px;
+      font-size: 8px;
+    }
+
+    .hud-quest-count-indicator {
+      min-width: 14px;
+      height: 14px;
+      top: -6px;
+      left: -6px;
+      font-size: 8px;
+    }
+
+
+
+    .hud-help-icon {
+      font-size: 18px;
+    }
+
+    /* Notification Mobile Adjustments */
+    .hud-notification-container {
+      top: 60px;
+      right: 66px;
+      gap: 8px;
+    }
+
+    .hud-notification {
+      min-width: 160px;
+      max-width: 240px;
+      padding: 10px 12px;
+      font-size: 11px;
+    }
+
+    .hud-notification-content {
+      gap: 8px;
+    }
+
+    .hud-notification-text {
+      font-size: 11px;
+    }
+
+    .hud-crosshair-horizontal {
+      width: 8px;
+      left: -4px;
+    }
+
+    .hud-crosshair-vertical {
+      height: 8px;
+      top: -4px;
+    }
+
+    /* Area Banner Mobile */
+    .hud-area-banner-text {
+      font-size: clamp(1.8rem, 10vw, 3rem);
+      letter-spacing: 0.05em;
+      margin: 0 0 4px 0;
+    }
+
+    @keyframes underlineExpand {
+      to { 
+        width: min(300px, 85vw); 
+        opacity: 1; 
+      }
+    }
+
+    /* Death Overlay Mobile */
+    .hud-death-content {
+      margin: 0 16px;
+      max-width: 90vw;
+    }
+
+    .hud-death-title {
+      font-size: clamp(1.8rem, 10vw, 3.5rem);
+      margin: 0 0 4px 0;
+      letter-spacing: 0.05em;
+    }
+
+    .hud-death-subtitle {
+      font-size: clamp(0.8rem, 4vw, 1rem);
+      margin: 0 0 10px 0;
+    }
+
+    .hud-death-underline {
+      margin: 0 auto 20px auto;
+    }
+
+    @keyframes deathUnderlineExpand {
+      to { 
+        width: min(200px, 80vw); 
+        opacity: 1; 
+      }
+    }
+
+    .hud-death-respawn-btn {
+      font-size: 12px;
+      padding: 10px 20px;
+      min-width: 100px;
+    }
+  }
+
+  /* ============================================
+     HIGH DPI DISPLAYS
+     ============================================ */
+
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .hud-health-text,
+    .hud-exp-text,
+    .hud-hotbar-slot-content {
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+</style>