html, body { margin: 0; height: 100%; overflow: hidden; background: lightskyblue; }
canvas { display: block; }
#hud { position: fixed; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; color: white; font: 600 18px system-ui, sans-serif; text-shadow: 0 2px 4px black; pointer-events: none; }
#tempete { background: rgba(139, 92, 246, 0.7); padding: 6px 14px; border-radius: 20px; }
#tempete.danger { background: rgba(220, 38, 38, 0.85); }
#aide { font-size: 14px; opacity: 0.85; text-align: right; }
#viseur { position: fixed; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 4px black; pointer-events: none; }
#viseur.touche { border-color: #ef4444; background: rgba(239, 68, 68, 0.5); }
#vie { position: fixed; left: 50%; bottom: 24px; width: 320px; height: 22px; margin-left: -160px; background: rgba(0, 0, 0, 0.5); border: 3px solid white; border-radius: 12px; overflow: hidden; pointer-events: none; }
#hpfill { height: 100%; width: 100%; background: linear-gradient(#4ade80, #16a34a); transition: width 0.1s; }
#degats { position: fixed; inset: 0; box-shadow: inset 0 0 120px 40px rgba(220, 38, 38, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.1s; }
#message { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; color: white; font: 800 56px system-ui, sans-serif; text-shadow: 0 3px 8px black; pointer-events: none; }
#message small { display: block; font-size: 22px; margin-top: 10px; }