* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: 'Segoe UI', Arial, sans-serif; }
#gameCanvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; }

#hud { position: fixed; top: 0; left: 0; right: 0; pointer-events: none; z-index: 10; }

#health-bar {
  position: fixed; top: 10px; left: 10px;
  display: flex; gap: 2px; pointer-events: none;
}
#health-bar .heart {
  width: 24px; height: 24px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ff0000" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') center/contain no-repeat;
  transition: opacity 0.2s;
}
#health-bar .heart.empty { opacity: 0.25; }
#health-bar .heart.half { opacity: 0.6; }

#mana-bar {
  position: fixed; top: 10px; left: 280px;
  display: flex; gap: 2px; pointer-events: none;
}
#mana-bar .star {
  width: 22px; height: 22px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234488ff" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') center/contain no-repeat;
  transition: opacity 0.2s;
}
#mana-bar .star.empty { opacity: 0.25; }

#hotbar {
  position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 3px; background: rgba(0,0,0,0.6); padding: 5px;
  border-radius: 6px; border: 2px solid #555; pointer-events: none;
}
.hotbar-slot {
  width: 48px; height: 48px; border: 2px solid #444; border-radius: 4px;
  background: rgba(40,40,40,0.8); position: relative; display: flex;
  align-items: center; justify-content: center;
}
.hotbar-slot.active { border-color: #ffcc00; background: rgba(80,80,40,0.8); }
.hotbar-slot .count {
  position: absolute; bottom: 2px; right: 4px; color: #fff;
  font-size: 11px; font-weight: bold; text-shadow: 1px 1px 2px #000;
}
.hotbar-slot .slot-key {
  position: absolute; top: 1px; left: 3px; color: #aaa;
  font-size: 9px; text-shadow: 1px 1px 1px #000;
}
.hotbar-slot canvas { image-rendering: pixelated; }

#minimap-container {
  position: fixed; bottom: 70px; right: 10px;
  border: 2px solid #555; border-radius: 4px;
  background: rgba(0,0,0,0.5); pointer-events: none;
}
#minimap { image-rendering: pixelated; }

/* Inventory */
#inventory-screen {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; gap: 40px;
  z-index: 100; pointer-events: all;
}
#inventory-title, #crafting-title {
  color: #ffcc00; font-size: 20px; font-weight: bold;
  text-align: center; margin-bottom: 10px; text-shadow: 2px 2px 4px #000;
}
#inventory-grid {
  display: grid; grid-template-columns: repeat(10, 48px);
  grid-template-rows: repeat(4, 48px); gap: 3px;
}
.inv-slot {
  width: 48px; height: 48px; border: 2px solid #555; border-radius: 4px;
  background: rgba(40,40,40,0.85); position: relative; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.inv-slot:hover { border-color: #aaa; background: rgba(70,70,70,0.9); }
.inv-slot canvas { image-rendering: pixelated; }
.inv-slot .count {
  position: absolute; bottom: 2px; right: 4px; color: #fff;
  font-size: 11px; font-weight: bold; text-shadow: 1px 1px 2px #000;
}

#crafting-panel {
  background: rgba(30,30,30,0.9); border: 2px solid #666;
  border-radius: 8px; padding: 15px; max-height: 250px; overflow-y: auto;
}
#crafting-list { display: flex; flex-direction: column; gap: 4px; }
.craft-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid #444; border-radius: 4px; cursor: pointer;
  color: #ddd; font-size: 13px; background: rgba(50,50,50,0.6);
}
.craft-item:hover { background: rgba(80,80,40,0.8); border-color: #ffcc00; }
.craft-item.can-craft { border-color: #66ff66; }
.craft-item.can-craft:hover { background: rgba(40,80,40,0.8); }
.craft-item canvas { image-rendering: pixelated; }

#item-tooltip {
  position: fixed; background: rgba(10,10,30,0.95); color: #fff;
  padding: 8px 12px; border-radius: 4px; border: 1px solid #666;
  font-size: 12px; pointer-events: none; z-index: 200;
  max-width: 200px;
}
#item-tooltip .tt-name { color: #ffcc00; font-weight: bold; font-size: 14px; }
#item-tooltip .tt-desc { color: #aaa; margin-top: 4px; }
#item-tooltip .tt-stats { color: #66ff66; margin-top: 4px; }

/* Death screen */
#death-screen {
  position: fixed; inset: 0; background: rgba(100,0,0,0.8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 150; cursor: pointer;
}
#death-text { color: #ff0000; font-size: 48px; font-weight: bold; text-shadow: 3px 3px 6px #000; }
#death-sub { color: #ffcccc; font-size: 18px; margin-top: 20px; }

/* Start screen */
#start-screen {
  position: fixed; inset: 0; background: linear-gradient(180deg, #001133 0%, #002244 40%, #335500 60%, #224400 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 200; cursor: pointer;
}
#start-title {
  font-size: 72px; font-weight: bold; color: #ffcc00;
  text-shadow: 4px 4px 8px #000, 0 0 40px rgba(255,200,0,0.3);
  letter-spacing: 8px;
}
#start-subtitle { color: #aaccff; font-size: 22px; margin-top: 10px; }
#start-prompt {
  color: #ffffff; font-size: 20px; margin-top: 60px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
#start-controls {
  color: #8899aa; font-size: 13px; margin-top: 20px; text-align: center; line-height: 1.8;
}

.hidden { display: none !important; }

/* Day/night overlay */
#day-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  transition: background 2s;
}

/* Loading */
#loading {
  position: fixed; inset: 0; background: #000; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  color: #ffcc00; font-size: 24px;
}

/* Damage flash */
#damage-flash {
  position: fixed; inset: 0; background: rgba(255,0,0,0.3);
  pointer-events: none; z-index: 8; opacity: 0; transition: opacity 0.1s;
}

/* Block breaking progress */
.break-indicator {
  position: fixed; pointer-events: none; z-index: 7;
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6);
}